/* ==========================================================================
   Dr. Sana Hussain — drsanahussain.com
   Design system: dark, cinematic, editorial-medical premium.
   ========================================================================== */

:root{
  --bg:            #070f0d;
  --bg-alt:        #0b1815;
  --bg-elevated:   #0f1e1a;
  --line:          rgba(216,181,120,0.14);
  --line-soft:     rgba(245,243,238,0.08);

  --ink:           #f5f3ee;
  --ink-dim:       #b9c4bf;
  --ink-mute:      #7c8b86;

  --gold:          #d8b578;
  --gold-bright:   #f0d29c;
  --teal:          #1f6f63;
  --teal-bright:   #2fd6bd;

  --grad-hero: radial-gradient(120% 120% at 50% 0%, #0d211c 0%, #070f0d 55%, #050908 100%);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);

  --section-pad: clamp(64px, 10vw, 160px);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  background: var(--bg);
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 860px), (hover: none) and (pointer: coarse){
  body{ cursor: auto; }
  .cursor-dot, .cursor-ring{ display:none; }
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd,dt{ margin:0; }
button{ font-family: inherit; }

::selection{ background: var(--teal-bright); color:#04100c; }

.section-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--teal); border-radius: 10px; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{
  width: 64px; height:64px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  animation: pulse-ring 1.8s ease-in-out infinite;
}
.preloader-mark img{ width:100%; height:100%; border-radius:50%; }
@keyframes pulse-ring{
  0%,100%{ box-shadow: 0 0 0 0 rgba(216,181,120,0.25); }
  50%{ box-shadow: 0 0 0 12px rgba(216,181,120,0); }
}
.preloader-bar{ width: 220px; height:2px; background: var(--line-soft); overflow:hidden; }
.preloader-bar-fill{ width:0%; height:100%; background: linear-gradient(90deg, var(--teal-bright), var(--gold)); animation: preload-fill 1.6s var(--ease) forwards; }
@keyframes preload-fill{ to{ width:100%; } }
.preloader-label{ font-size: 11px; letter-spacing: 3px; color: var(--ink-mute); text-transform:uppercase; }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor-dot,.cursor-ring{
  position: fixed; top:0; left:0; z-index: 9998; pointer-events:none;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
}
.cursor-dot.is-active,.cursor-ring.is-active{ opacity:1; }
.cursor-dot{ width:6px; height:6px; background: var(--gold-bright); }
.cursor-ring{
  width:34px; height:34px; border: 1px solid rgba(216,181,120,0.5);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), opacity .3s var(--ease);
}
.cursor-ring.active{
  width: 64px; height:64px; background: rgba(47,214,189,0.08); border-color: var(--teal-bright);
}

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

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  background: linear-gradient(to bottom, rgba(7,15,13,0.85), rgba(7,15,13,0));
  backdrop-filter: blur(6px);
  transition: transform .5s var(--ease);
}
.site-nav.nav-hidden{ transform: translateY(-100%); }
.nav-inner{
  max-width: var(--container); margin:0 auto;
  padding: 20px clamp(20px,5vw,56px) 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{ display:flex; align-items:center; gap: 12px; }
.nav-logo-mark{ height: 40px; width: 40px; display:block; flex-shrink:0; }
.nav-logo-word{ display:flex; flex-direction:column; line-height:1.15; }
.nav-logo-name{
  font-family: Georgia, 'Iowan Old Style', Palatino, serif;
  font-weight: 700; font-size: 17px; letter-spacing: 0.2px;
  background: linear-gradient(90deg, #7FDFC6, #C9D9A0, #EBCB93);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-logo-sub{
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: #C7A874; margin-top: 2px;
}
@media (max-width: 480px){
  .nav-logo-mark{ height: 32px; width: 32px; }
  .nav-logo-name{ font-size: 14px; }
  .nav-logo-sub{ font-size: 8px; letter-spacing: 2px; }
}
.nav-links{ display:flex; align-items:center; gap: clamp(16px,2.4vw,34px); }
.nav-links a{ font-size: 13px; letter-spacing: 0.5px; color: var(--ink-dim); position:relative; padding: 6px 0; }
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold);
  transition: width .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-links a:not(.nav-cta):hover{ color: var(--ink); }
.nav-cta{
  border:1px solid var(--gold); border-radius: 30px; padding: 9px 20px !important;
  color: var(--gold-bright) !important; transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{ background: var(--gold); color: #08120f !important; }
.nav-progress{ position:absolute; bottom:0; left:0; height:2px; width:0%; background: linear-gradient(90deg,var(--teal-bright),var(--gold)); }

.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px; z-index: 600; }
.nav-burger span{ width:24px; height:1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-burger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index: 480;
  background: var(--bg-alt);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap: 18px; padding: 0 32px;
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--serif); font-size: clamp(24px,7vw,36px); color: var(--ink); }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}

/* ==========================================================================
   BUTTONS / MAGNETIC
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 28px; border-radius: 40px;
  font-size: 14px; letter-spacing: .3px; font-weight: 600;
  transition: transform .35s var(--ease-soft), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn svg{ transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }
.btn-primary{
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #0a1512;
  box-shadow: 0 8px 30px -8px rgba(216,181,120,0.5);
}
.btn-primary:hover{ box-shadow: 0 12px 40px -6px rgba(216,181,120,0.7); }
.btn-ghost{
  border: 1px solid var(--line-soft);
  color: var(--ink);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover{ border-color: var(--teal-bright); background: rgba(47,214,189,0.06); }
.btn-lg{ padding: 18px 34px; font-size: 15px; }

/* ==========================================================================
   REVEAL ANIMATION UTILITIES (driven by scroll.js toggling .is-visible)
   ========================================================================== */
.reveal-up{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }
.reveal-lines{ opacity:0; transform: translateY(24px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.reveal-lines.is-visible{ opacity:1; transform: translateY(0); }

[data-delay="0.05"]{ transition-delay: .05s; }
[data-delay="0.1"]{ transition-delay: .1s; }
[data-delay="0.15"]{ transition-delay: .15s; }
[data-delay="0.2"]{ transition-delay: .2s; }
[data-delay="0.3"]{ transition-delay: .3s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  background: var(--grad-hero);
  overflow:hidden;
  padding-top: 90px;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-gradient-fallback{
  position:absolute; inset:0; z-index:0; display:none;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,214,189,0.18), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(216,181,120,0.14), transparent 55%);
  animation: fallback-drift 14s ease-in-out infinite alternate;
}
@keyframes fallback-drift{ from{ transform: scale(1) translate(0,0); } to{ transform: scale(1.08) translate(-2%, 2%); } }
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5,9,8,0.75) 100%);
}
.hero-content{ position:relative; z-index:2; max-width: var(--container); margin:0 auto; padding: 0 clamp(20px,5vw,56px); width:100%; }
.eyebrow{
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
  margin-bottom: 26px; font-family: var(--serif);
}
.hero-title{
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 118px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 34px;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .accent{ background: linear-gradient(100deg, var(--teal-bright), var(--gold-bright) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.reveal-char{ display:inline-block; }
.hero-sub{
  max-width: 620px; font-size: clamp(16px,1.6vw,19px); color: var(--ink-dim); margin-bottom: 40px; font-weight: 300;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom: 42px; }
.hero-credentials{
  display:flex; flex-wrap:wrap; align-items:center; gap: 14px;
  font-size: 12px; letter-spacing: 1px; text-transform:uppercase; color: var(--ink-mute);
}
.hero-credentials i{ width:4px; height:4px; border-radius:50%; background: var(--ink-mute); display:inline-block; }

.scroll-cue{
  position:absolute; bottom: 36px; left:50%; transform: translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue span{ font-size: 10px; letter-spacing: 3px; color: var(--ink-mute); text-transform:uppercase; }
.scroll-cue-line{ width:1px; height:50px; background: var(--line-soft); overflow:hidden; }
.scroll-cue-fill{ width:100%; height:40%; background: var(--gold); animation: scroll-drop 2s var(--ease) infinite; }
@keyframes scroll-drop{ 0%{ transform: translateY(-100%); } 100%{ transform: translateY(250%); } }

@media (max-width: 640px){
  .hero{ padding-top: 110px; padding-bottom: 90px; }
  .scroll-cue{ display: none; }
}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.stats-strip{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.stats-strip-inner{
  max-width: var(--container); margin:0 auto; padding: 48px clamp(20px,5vw,56px);
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.stat-item{ text-align:center; border-right: 1px solid var(--line-soft); }
.stat-item:last-child{ border-right:none; }
.stat-number{ font-family: var(--serif); font-size: clamp(30px,4vw,52px); color: var(--gold-bright); }
.stat-label{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mute); margin-top:6px; }
@media (max-width: 700px){
  .stats-strip-inner{ grid-template-columns: repeat(2,1fr); }
  .stat-item{ border-right:none; border-bottom: 1px solid var(--line-soft); padding-bottom: 18px; }
}

/* ==========================================================================
   SECTION GENERIC
   ========================================================================== */
section{ position:relative; padding: var(--section-pad) 0; }
.section-eyebrow{
  font-family: var(--serif); font-style:italic; font-size: 14px; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase; margin-bottom: 18px;
}
.section-title{
  font-weight: 800; font-size: clamp(30px, 5vw, 56px); line-height:1.08; letter-spacing:-0.01em;
  margin-bottom: 24px; max-width: 900px;
}
.section-lede{ max-width: 640px; color: var(--ink-dim); font-size: 17px; font-weight:300; margin-bottom: 20px; }

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile-section{ background: var(--bg); }
.profile-quote{
  font-family: var(--serif); font-style: italic; font-weight:400;
  font-size: clamp(22px, 3vw, 34px); line-height:1.5; color: var(--ink);
  max-width: 920px; margin-bottom: 56px;
  border-left: 2px solid var(--gold); padding-left: 28px;
}
.profile-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 60px; }
.profile-body{ color: var(--ink-dim); font-size: 17px; font-weight:300; line-height:1.85; }
.profile-facts{ display:flex; flex-direction:column; gap:16px; border-left: 1px solid var(--line); padding-left: 28px; }
.fact{ display:flex; flex-direction:column; gap:2px; }
.fact-k{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color: var(--ink-mute); }
.fact-v{ font-size:15px; color: var(--ink); }
@media (max-width: 860px){
  .profile-grid{ grid-template-columns: 1fr; gap: 32px; }
  .profile-facts{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px; }
}

/* ==========================================================================
   TIMELINE / NARRATIVE
   ========================================================================== */
.narrative-section{ background: var(--bg-alt); }
.timeline{ position:relative; max-width: var(--container); margin: 60px auto 0; padding: 0 clamp(20px,5vw,56px); }
.timeline-track{
  position:absolute; left: calc(clamp(20px,5vw,56px) + 5px); top:0; bottom:0; width:2px;
  background: var(--line-soft);
}
.timeline-track-fill{ width:100%; height:0%; background: linear-gradient(180deg, var(--teal-bright), var(--gold)); transition: height .1s linear; }
.timeline-item{
  position:relative; padding: 0 0 72px 56px;
  opacity:0; transform: translateX(-24px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.timeline-item.is-visible{ opacity:1; transform: translateX(0); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left: -4px; top: 6px; width:12px; height:12px; border-radius:50%;
  background: var(--bg-alt); border: 2px solid var(--ink-mute); transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline-item.is-visible .timeline-dot{ border-color: var(--gold-bright); background: var(--gold); box-shadow: 0 0 0 6px rgba(216,181,120,0.12); }
.timeline-date{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold); margin-bottom:12px; }
.timeline-card{
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px clamp(20px,3vw,36px); max-width: 760px;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.timeline-card:hover{ transform: translateY(-4px); border-color: rgba(216,181,120,0.4); }
.timeline-tag{
  display:inline-block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--teal-bright); border:1px solid rgba(47,214,189,0.35); border-radius: 20px; padding: 4px 12px; margin-bottom:14px;
}
.timeline-card h3{ font-size: clamp(20px,2.4vw,26px); margin-bottom: 6px; font-weight:700; }
.timeline-org{ color: var(--ink-mute); font-size:14px; margin-bottom:16px; }
.timeline-card ul{ display:flex; flex-direction:column; gap:10px; }
.timeline-card li{ position:relative; padding-left:18px; color: var(--ink-dim); font-size:15px; font-weight:300; line-height:1.6; }
.timeline-card li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--gold); }

@media (max-width: 640px){
  .timeline-track{ left: 26px; }
  .timeline-item{ padding-left: 40px; }
  .timeline-dot{ left: -14px; }
}

/* ==========================================================================
   SKILL MATRIX
   ========================================================================== */
.matrix-section{ background: var(--bg); }
.competency-grid{
  max-width: var(--container); margin: 44px auto 70px; padding: 0 clamp(20px,5vw,56px);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px;
}
.competency-card{
  display:flex; align-items:center; gap:14px;
  background: var(--bg-elevated); border:1px solid var(--line-soft); border-radius:14px;
  padding: 20px 22px; font-size:14.5px; color: var(--ink-dim);
  transition: transform .35s var(--ease-soft), border-color .35s var(--ease), background .35s var(--ease);
  opacity:0; transform: translateY(24px) scale(0.98);
}
.competency-card.is-visible{ opacity:1; transform: translateY(0) scale(1); }
.competency-card:hover{ transform: translateY(-6px); border-color: rgba(47,214,189,0.4); background: rgba(47,214,189,0.05); }
.competency-icon{ color: var(--teal-bright); font-size:12px; flex-shrink:0; }

.matrix-sub-label{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.procedure-chart{
  max-width: var(--container); margin: 24px auto 0; padding: 0 clamp(20px,5vw,56px);
  display:flex; flex-direction:column; gap: 14px;
}
.chart-row{ display:grid; grid-template-columns: 180px 1fr 60px; align-items:center; gap: 18px; }
.chart-row-label{ font-size:14px; color: var(--ink); }
.chart-row-track{ position:relative; height:10px; background: var(--line-soft); border-radius:10px; overflow:hidden; }
.chart-row-fill{
  position:absolute; left:0; top:0; height:100%; width:0%; border-radius:10px;
  background: linear-gradient(90deg, var(--teal), var(--teal-bright));
  transition: width 1.1s var(--ease-soft);
}
.chart-row-value{ font-size:13px; color: var(--ink-mute); text-align:right; }
@media (max-width: 640px){
  .chart-row{ grid-template-columns: 100px 1fr 44px; gap:10px; }
  .chart-row-label{ font-size:12.5px; }
}

/* ==========================================================================
   VAULT — CASE STUDIES
   ========================================================================== */
.vault-section{ background: var(--bg-alt); }
.vault-grid{
  max-width: var(--container); margin: 50px auto 0; padding: 0 clamp(20px,5vw,56px);
  display:grid; grid-template-columns: repeat(2,1fr); gap: 28px;
}
.vault-card{
  background: var(--bg-elevated); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .15s ease-out, border-color .35s var(--ease), box-shadow .35s var(--ease);
  opacity:0; transform: translateY(28px);
}
.vault-card.is-visible{ opacity:1; }
.vault-card:hover{ border-color: rgba(216,181,120,0.4); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.vault-card-visual{
  height: 240px; position:relative; overflow:hidden;
  background: linear-gradient(135deg, #0c1c18, #0a1513);
  display:flex;
}
.visual-pane{
  position:relative; flex:1 1 50%; height:100%; overflow:hidden;
}
.visual-pane + .visual-pane{ border-left: 1px solid rgba(245,243,238,0.12); }
.visual-pane img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; filter: saturate(0.94) contrast(1.03);
  transition: transform .6s var(--ease-soft);
}
.vault-card:hover .visual-pane img{ transform: scale(1.06); }
.visual-pane::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,10,9,0.05) 60%, rgba(5,10,9,0.55) 100%);
  pointer-events:none;
}
.visual-label{
  position:absolute; left:10px; bottom:10px; z-index:1;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--ink); background: rgba(5,12,10,0.55); backdrop-filter: blur(3px);
  border: 1px solid rgba(216,181,120,0.35); border-radius: 20px;
  padding: 5px 11px;
}
.vault-card-body{ padding: 30px clamp(22px,3vw,34px) 34px; }
.vault-tag{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color: var(--gold); }
.vault-card-body h3{ font-size: clamp(19px,2vw,23px); margin: 10px 0 18px; font-weight:700; }
.vault-card-body dl{ display:flex; flex-direction:column; gap:12px; }
.vault-card-body dt{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--teal-bright); margin-bottom:3px; }
.vault-card-body dd{ font-size:14.5px; color: var(--ink-dim); font-weight:300; line-height:1.6; margin:0; }

@media (max-width: 860px){
  .vault-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   SAFETY FRAMEWORK
   ========================================================================== */
.framework-section{ background: var(--bg); }
.framework-grid{
  max-width: var(--container); margin: 40px auto 0; padding: 0 clamp(20px,5vw,56px);
  display:grid; grid-template-columns: repeat(6,1fr); gap: 2px;
  background: var(--line-soft);
  border-radius: 20px; overflow:hidden;
}
.framework-step{
  background: var(--bg-elevated); padding: 32px 20px; text-align:left;
  opacity:0; transform: translateY(20px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft), background .3s var(--ease);
}
.framework-step.is-visible{ opacity:1; transform: translateY(0); }
.framework-step:hover{ background: rgba(47,214,189,0.06); }
.framework-num{ font-family: var(--serif); font-style:italic; color: var(--gold); font-size:22px; }
.framework-step h4{ font-size:15px; margin: 14px 0 8px; }
.framework-step p{ font-size:13px; color: var(--ink-mute); font-weight:300; }
@media (max-width: 900px){
  .framework-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 560px){
  .framework-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ==========================================================================
   BEYOND THE CLINIC
   ========================================================================== */
.beyond-section{ background: var(--bg-alt); }
.beyond-grid{
  max-width: var(--container); margin: 40px auto 0; padding: 0 clamp(20px,5vw,56px);
  display:grid; grid-template-columns: repeat(2,1fr); gap: 22px;
}
.beyond-card{
  border:1px solid var(--line-soft); border-radius:18px; padding: 30px;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.beyond-card:hover{ border-color: rgba(216,181,120,0.35); transform: translateY(-4px); }
.beyond-card h4{ font-size:18px; margin-bottom:12px; color: var(--gold-bright); }
.beyond-card p{ font-size:14.5px; color: var(--ink-dim); font-weight:300; line-height:1.7; }
@media (max-width: 760px){ .beyond-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CREDENTIALS
   ========================================================================== */
.credentials-section{ background: var(--bg); }
.credentials-grid{
  max-width: var(--container); margin: 36px auto 0; padding: 0 clamp(20px,5vw,56px);
  display:flex; flex-wrap:wrap; gap: 14px;
}
.credential-pill{
  border: 1px solid var(--line); border-radius: 30px; padding: 12px 22px;
  font-size: 13.5px; color: var(--ink-dim);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.credential-pill:hover{ border-color: var(--teal-bright); color: var(--ink); background: rgba(47,214,189,0.06); }

/* ==========================================================================
   CTA / CONTACT
   ========================================================================== */
.cta-section{
  background: var(--grad-hero); position:relative; overflow:hidden;
  border-top: 1px solid var(--line);
}
.cta-canvas{ position:absolute; inset:0; z-index:0; opacity:0.6; }
.cta-inner{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta-title{ font-weight:800; font-size: clamp(36px,7vw,80px); line-height:1.03; letter-spacing:-0.02em; margin-bottom:22px; }
.cta-title .accent{ background: linear-gradient(100deg, var(--teal-bright), var(--gold-bright) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta-lede{ max-width:560px; color: var(--ink-dim); font-size:17px; font-weight:300; margin-bottom:40px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-bottom: 64px; }
.contact-grid{
  width:100%; max-width: 1080px;
  display:grid; grid-template-columns: repeat(5,1fr); gap:2px; background: var(--line-soft); border-radius:18px; overflow:hidden;
}
.contact-item{ background: var(--bg-elevated); padding: 26px 18px; display:flex; flex-direction:column; gap:6px; transition: background .3s var(--ease); }
a.contact-item:hover{ background: rgba(47,214,189,0.08); }
.contact-label{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color: var(--ink-mute); }
.contact-value{ font-size:13px; color: var(--ink); overflow-wrap: anywhere; line-height:1.4; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px){ .contact-grid{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   ========================================================================== */
.whatsapp-fab{
  position: fixed; right: 28px; bottom: 28px; z-index: 700;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #08120f;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease);
}
.whatsapp-fab:hover{ box-shadow: 0 14px 38px -6px rgba(37,211,102,0.8); }
.whatsapp-fab-ring{
  position:absolute; inset:-6px; border-radius:50%;
  border: 1px solid rgba(37,211,102,0.45);
  animation: whatsapp-pulse 2.2s ease-out infinite;
}
@keyframes whatsapp-pulse{
  0%{ transform: scale(0.9); opacity: 0.9; }
  100%{ transform: scale(1.35); opacity: 0; }
}
@media (max-width: 640px){
  .whatsapp-fab{ right: 18px; bottom: 18px; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-fab-ring{ animation: none; display:none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--bg); border-top:1px solid var(--line-soft); padding: 36px 0; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
.footer-brand{ display:flex; flex-direction:column; }
.footer-brand span:first-child{ font-family: var(--serif); font-size:16px; }
.footer-sub{ font-size:12px; color: var(--ink-mute); margin-top:2px; }
.footer-meta{ display:flex; gap:24px; font-size:12px; color: var(--ink-mute); }

/* ==========================================================================
   TILT (JS sets --rx/--ry via inline transform; class enables perspective)
   ========================================================================== */
.tilt{ perspective: 1200px; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   RESPONSIVE TYPE TWEAKS
   ========================================================================== */
@media (max-width: 480px){
  .btn{ padding:13px 22px; font-size:13px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .cta-actions{ flex-direction:column; align-items:stretch; width:100%; }
}