/* ==========================================================================
   dentalads.uk — "Bold Liquid Glass" design system
   Deep-space gradient mesh + frosted specular glass + kinetic type
   ========================================================================== */

/* Fonts are linked directly in each page's <head> (not @import here) —
   @import blocks the CSSOM behind a serial HTML→CSS→font-CSS→font-file
   chain instead of letting the browser fetch them in parallel. */

:root{
  /* void + depth */
  --void:        #05060a;
  --deep:        #090c16;
  --deep-2:      #0d1220;
  --panel:       rgba(255,255,255,0.055);
  --panel-hi:    rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.14);
  --glass-hair:   rgba(255,255,255,0.08);
  --specular:    rgba(255,255,255,0.55);
  --specular-2:  rgba(255,255,255,0.18);

  /* accent story: mint -> violet -> blue mesh */
  --mint:   #3fead0;
  --mint-2: #21c8ae;
  --violet: #8b7bff;
  --blue:   #4f8bff;
  --coral:  #ff8a65;

  /* text */
  --ink-0: #f6f8fc;
  --ink-1: #c7cfe0;
  --ink-2: #8891a8;
  --ink-3: #7b85a2; /* lifted from #5c6580 to clear WCAG AA (5.2:1) */

  /* theme-swappable surfaces */
  --surface-1: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
  --nav-bg: rgba(9,12,22,0.55);
  --nav-bg-scrolled: rgba(9,12,22,0.78);
  --stat-bg: rgba(9,12,22,0.7);
  --mesh-1: rgba(79,139,255,0.16);
  --mesh-2: rgba(139,123,255,0.14);
  --shadow-panel: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
  --shadow-nav: 0 20px 50px -25px rgba(0,0,0,0.7);
  --glow: rgba(255,255,255,0.14);
  --grain-blend: overlay;
  --grain-opacity: 0.05;
  --blob-opacity: 0.55;

  /* accent used as TEXT — must stay legible against the page background */
  --accent-text: #3fead0;
  --accent-underline: rgba(63,234,208,0.35);

  /* dropdown panel — deliberately more opaque than .glass so it reads
     clearly over busy hero/page content instead of blending in */
  --dropdown-bg: rgba(8,11,20,0.98);
  --dropdown-border: rgba(255,255,255,0.16);
  --dropdown-shadow: 0 30px 70px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

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

  --font-display: 'Bricolage Grotesque', 'Manrope', sans-serif;
  --font-body: 'Manrope', -apple-system, sans-serif;

  --container: 1480px;

  color-scheme: dark;
}

/* ==========================================================================
   Light theme — "1 light option": airy frosted glass on a soft daylight mesh
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme: light;
  --void:        #f4f6fb;
  --deep:        #e9edf7;
  --deep-2:      #dfe5f3;
  --panel:       rgba(255,255,255,0.55);
  --panel-hi:    rgba(255,255,255,0.7);
  --glass-border: rgba(20,25,45,0.10);
  --glass-hair:   rgba(20,25,45,0.08);
  --specular:    rgba(255,255,255,0.9);
  --specular-2:  rgba(255,255,255,0.6);

  --ink-0: #12162a;
  --ink-1: #3b4262;
  --ink-2: #656d8c;
  --ink-3: #656d8b; /* darkened from #8991ad to clear WCAG AA (4.9:1) */

  --surface-1: rgba(20,25,45,0.035);
  --surface-2: rgba(20,25,45,0.06);
  --nav-bg: rgba(255,255,255,0.6);
  --nav-bg-scrolled: rgba(255,255,255,0.82);
  --stat-bg: rgba(255,255,255,0.6);
  --mesh-1: rgba(79,139,255,0.14);
  --mesh-2: rgba(139,123,255,0.12);
  --shadow-panel: 0 1px 0 0 rgba(255,255,255,0.8) inset, 0 30px 60px -30px rgba(30,41,82,0.18);
  --shadow-nav: 0 20px 50px -25px rgba(30,41,82,0.22);
  --glow: rgba(20,25,45,0.06);
  --grain-blend: multiply;
  --grain-opacity: 0.025;
  --blob-opacity: 0.4;

  /* darker teal: ~4.9:1 on the light panel, vs ~1.6:1 for raw mint */
  --accent-text: #0b7565;
  --accent-underline: rgba(11,117,101,0.4);

  --dropdown-bg: rgba(255,255,255,0.98);
  --dropdown-border: rgba(20,25,45,0.12);
  --dropdown-shadow: 0 30px 70px -20px rgba(30,41,82,0.28), 0 0 0 1px rgba(20,25,45,0.04);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  background:var(--void);
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-1);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
::selection{ background:var(--mint); color:var(--void); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-0);
  margin:0;
  font-weight:650;
  letter-spacing:-0.02em;
  line-height:1.02;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:6px;
}

/* ==========================================================================
   Background mesh + grain
   ========================================================================== */
.mesh{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 8% -10%, var(--mesh-1), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--mesh-2), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--deep) 45%, var(--void) 100%);
  transition:background .5s var(--ease);
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:var(--blob-opacity);
  will-change:transform;
  transition:opacity .5s var(--ease);
}
.blob--a{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-14vw; left:-10vw;
  background:radial-gradient(circle at 30% 30%, var(--mint), transparent 70%);
  animation:drift1 26s var(--ease-soft) infinite alternate;
}
.blob--b{
  width:46vw; height:46vw; max-width:680px; max-height:680px;
  top:6vw; right:-14vw;
  background:radial-gradient(circle at 60% 40%, var(--violet), transparent 70%);
  animation:drift2 32s var(--ease-soft) infinite alternate;
}
.blob--c{
  width:38vw; height:38vw; max-width:560px; max-height:560px;
  bottom:-12vw; left:20vw;
  background:radial-gradient(circle at 50% 50%, var(--blue), transparent 70%);
  opacity:0.35;
  animation:drift3 38s var(--ease-soft) infinite alternate;
}
@keyframes drift1{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(6vw,4vw) scale(1.12);} }
@keyframes drift2{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-5vw,6vw) scale(0.9);} }
@keyframes drift3{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(4vw,-5vw) scale(1.08);} }

.grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:var(--grain-opacity);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* page load fade */
body{ animation:page-in .7s var(--ease); }
@keyframes page-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none !important; }
  html{ scroll-behavior:auto; }
  body{ animation:none !important; }
  .grad{ animation:none !important; }
}

/* ==========================================================================
   Glass primitives
   ========================================================================== */
.glass{
  position:relative;
  background:var(--panel);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .4s var(--ease);
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg, var(--specular) 0%, transparent 18%, transparent 82%, var(--specular-2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.5;
  pointer-events:none;
}
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 60%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.glass:hover::after{ opacity:1; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.nav{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  width:min(1160px, calc(100% - 32px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 12px 22px;
  border-radius:999px;
  background:var(--nav-bg);
  border:1px solid var(--glass-hair);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:background .4s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.nav.is-scrolled{
  background:var(--nav-bg-scrolled);
  box-shadow:var(--shadow-nav);
}
.nav__logo{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink-0);
  letter-spacing:-0.01em;
}
.nav__logo .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--blue));
  display:inline-block;
  margin-right:8px;
  box-shadow:0 0 12px rgba(63,234,208,0.8);
}
.nav__logo .muted{ color:var(--ink-3); font-weight:500; }
.nav__links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav__links a{
  font-size:0.9rem;
  font-weight:600;
  color:var(--ink-1);
  padding:9px 16px;
  border-radius:999px;
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--ink-0); background:var(--surface-2); }
.nav__links a.active{ color:var(--void); background:var(--ink-0); }
.nav__cta{ display:flex; align-items:center; gap:10px; }

/* services dropdown */
.nav__dropdown{ position:relative; }
.nav__dropdown-trigger{
  display:flex !important;
  align-items:center;
  gap:6px;
}
.nav__dropdown-trigger .chevron{ transition:transform .3s var(--ease); }
.nav__dropdown:hover .nav__dropdown-trigger .chevron,
.nav__dropdown:focus-within .nav__dropdown-trigger .chevron{ transform:rotate(180deg); }
.nav__dropdown::after{
  /* invisible bridge so the pointer can travel from trigger to panel */
  content:"";
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  width:120%;
  height:16px;
}
.nav__dropdown-panel{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%);
  width:540px;
  max-width:min(540px, 88vw);
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  background:var(--dropdown-bg);
  border:1px solid var(--dropdown-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--dropdown-shadow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s var(--ease), visibility .2s;
  z-index:120;
}
.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.nav__dropdown-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:var(--radius-md);
  transition:background .25s;
}
.nav__dropdown-item:hover, .nav__dropdown-item:focus-visible{ background:var(--surface-2); }
.nav__dropdown-item .icon{
  width:34px; height:34px;
  border-radius:10px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--mint),var(--blue));
  color:var(--void);
}
.nav__dropdown-item .icon svg{ width:16px; height:16px; }
.nav__dropdown-item strong{ display:block; font-size:0.86rem; font-weight:650; color:var(--ink-0); margin-bottom:3px; }
.nav__dropdown-item small{ display:block; font-size:0.76rem; color:var(--ink-3); line-height:1.4; }
.nav__dropdown-viewall{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px;
  margin-top:2px;
  border-top:1px solid var(--dropdown-border);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  font-size:0.84rem;
  font-weight:700;
  color:var(--accent-text);
  transition:background .25s;
}
.nav__dropdown-viewall:hover{ background:var(--surface-2); }
@media (max-width:860px){ .nav__dropdown-panel{ display:none; } }

/* mobile services submenu */
.nav__mobile-sub{
  display:flex;
  flex-direction:column;
  padding:2px 0 6px 14px;
  margin-bottom:4px;
  border-left:1px solid var(--glass-hair);
}
.nav__mobile-sub a{
  padding:11px 14px;
  font-size:0.9rem;
  font-weight:600;
  color:var(--ink-2);
}
.nav__mobile-sub a:hover{ color:var(--ink-0); background:var(--surface-2); }
.nav__toggle{
  display:none;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--glass-hair);
  background:var(--surface-1);
  color:var(--ink-0);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* theme toggle */
.theme-toggle{
  position:relative;
  width:40px; height:40px;
  flex:none;
  border-radius:50%;
  border:1px solid var(--glass-hair);
  background:var(--surface-1);
  color:var(--ink-0);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.theme-toggle:hover{ background:var(--surface-2); transform:rotate(-14deg); }
.theme-toggle svg{
  position:absolute;
  width:18px; height:18px;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.theme-toggle .icon-sun{ opacity:0; transform:rotate(-90deg) scale(.4); }
.theme-toggle .icon-moon{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(90deg) scale(.4); }
.nav__mobile{
  display:none;
  position:fixed;
  top:86px; left:16px; right:16px;
  z-index:99;
  border-radius:24px;
  padding:14px;
  flex-direction:column;
  gap:4px;
}
.nav__mobile a{
  padding:14px 16px;
  border-radius:14px;
  font-weight:600;
  color:var(--ink-1);
}
.nav__mobile a:hover{ background:rgba(255,255,255,0.06); color:var(--ink-0); }
.nav__mobile.is-open{ display:flex; }

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav .btn{ display:none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --pad-y:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:var(--pad-y) 26px;
  border-radius:999px;
  font-weight:700;
  font-size:0.92rem;
  letter-spacing:-0.01em;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{
  color:var(--void);
  background:linear-gradient(135deg, var(--mint) 0%, var(--blue) 100%);
  box-shadow:0 10px 30px -8px rgba(63,234,208,0.45);
}
.btn-primary:hover{
  box-shadow:0 16px 40px -10px rgba(63,234,208,0.6);
  transform:translateY(-2px);
}
.btn-ghost{
  color:var(--ink-0);
  background:rgba(255,255,255,0.05);
  border-color:var(--glass-border);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.3);
  transform:translateY(-2px);
}
.btn-link{
  color:var(--ink-0);
  font-weight:700;
  padding:0;
  border-bottom:1px solid var(--glass-border);
  border-radius:0;
  padding-bottom:2px;
}
.btn-link:hover{ border-color:var(--mint); color:var(--accent-text); }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translate(3px,-3px); }

/* ==========================================================================
   Layout sections
   ========================================================================== */
main{ position:relative; z-index:2; }
section{ position:relative; padding:96px 0; }
.section--tight{ padding:64px 0; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:20px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--mint);
}
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(2rem, 4vw, 2.9rem);
  margin-bottom:18px;
}
.section-head p{
  font-size:1.05rem;
  color:var(--ink-2);
  line-height:1.6;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding:172px 0 90px;
  display:flex;
  align-items:center;
}
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  align-items:center;
}
.hero__inner{ max-width:640px; }
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px 8px 8px;
  border-radius:999px;
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-1);
  margin-bottom:32px;
}
.hero__badge span.pill{
  background:linear-gradient(135deg,var(--mint),var(--blue));
  color:var(--void);
  font-weight:800;
  font-size:0.72rem;
  padding:4px 10px;
  border-radius:999px;
}
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  font-weight:650;
  margin-bottom:28px;
}
.hero h1 .grad{
  background:linear-gradient(120deg, var(--mint) 0%, var(--blue) 35%, var(--violet) 60%, var(--mint) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 8s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero__lede{
  font-size:1.2rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:620px;
  margin-bottom:44px;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
}

/* ==========================================================================
   Hero morph slider — liquid blob background with crossfading platform slides
   ========================================================================== */
.morph-card{
  position:relative;
  height:460px;
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.morph-blob{
  position:absolute;
  inset:6%;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background:conic-gradient(from 0deg, var(--mint), var(--blue), var(--violet), var(--coral), var(--mint));
  filter:blur(42px);
  opacity:.5;
  animation:blob-morph 16s ease-in-out infinite, blob-spin 26s linear infinite;
  pointer-events:none;
}
@keyframes blob-morph{
  0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; }
  25%{ border-radius:63% 37% 41% 59% / 51% 62% 38% 49%; }
  50%{ border-radius:38% 62% 55% 45% / 60% 40% 60% 40%; }
  75%{ border-radius:55% 45% 34% 66% / 41% 55% 45% 59%; }
}
@keyframes blob-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .morph-blob{ animation:none; } }

.morph-stage{ position:relative; width:100%; height:100%; }
.morph-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  opacity:0;
  transform:translateY(16px) scale(.94);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.morph-slide.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.morph-icon{
  width:92px; height:92px;
  border-radius:28px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--mint),var(--blue));
  color:var(--void);
  box-shadow:0 20px 45px -15px rgba(63,234,208,0.5);
}
.morph-icon svg{ width:42px; height:42px; }
.morph-eyebrow{
  font-family:var(--font-display);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-text);
}
.morph-text{
  font-size:1.2rem;
  font-weight:650;
  color:var(--ink-0);
  max-width:300px;
  line-height:1.45;
}
.morph-dots{
  position:absolute;
  bottom:22px; left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
}
.morph-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--glass-border);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .3s, width .3s var(--ease);
}
.morph-dot.is-active{ background:var(--mint); width:22px; border-radius:5px; }

@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__inner{ max-width:100%; }
  .morph-card{ height:380px; }
}

/* stat strip */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--glass-border);
  border:1px solid var(--glass-border);
}
.stat{
  background:var(--stat-bg);
  padding:34px 28px;
  backdrop-filter:blur(18px);
  transition:background .5s var(--ease);
}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,2.6vw,2.4rem);
  font-weight:700;
  background:linear-gradient(120deg,var(--ink-0),var(--mint) 120%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:8px;
}
.stat__label{ font-size:0.85rem; color:var(--ink-2); line-height:1.4; }

@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   Platform / service cards
   ========================================================================== */
.grid-5{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:20px;
}
.pcard{
  padding:32px 26px;
  border-radius:var(--radius-lg);
  transition:transform .4s var(--ease), border-color .4s;
  cursor:pointer;
}
.pcard:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.3); }
.pcard__icon{
  width:46px; height:46px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1rem;
  color:var(--void);
  background:linear-gradient(135deg,var(--mint),var(--blue));
  margin-bottom:22px;
  transition:transform .4s var(--ease);
}
.pcard__icon svg{ width:22px; height:22px; }
.pcard:hover .pcard__icon{ transform:scale(1.08) rotate(-4deg); }

.logo-badge{
  width:64px; height:64px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--void);
  background:linear-gradient(135deg,var(--mint),var(--blue));
  box-shadow:0 14px 34px -12px rgba(63,234,208,0.5);
  margin-bottom:26px;
}
.logo-badge svg{ width:30px; height:30px; }
.service-row__icon{
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--void);
  background:linear-gradient(135deg,var(--mint),var(--blue));
  flex:none;
}
.service-row__icon svg{ width:26px; height:26px; }
.pcard h3{ font-size:1.15rem; margin-bottom:10px; font-weight:650;}
.pcard p{ font-size:0.92rem; color:var(--ink-2); line-height:1.55; margin:0 0 18px; }
.pcard .go{ font-size:0.85rem; font-weight:700; color:var(--ink-0); display:inline-flex; align-items:center; gap:6px; }
.pcard .go svg{ transition:transform .3s var(--ease); }
.pcard:hover .go svg{ transform:translate(3px,-3px); }

/* ==========================================================================
   Process steps
   ========================================================================== */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.pstep{ padding:30px 24px; border-radius:var(--radius-lg); }
.pstep__num{
  font-family:var(--font-display);
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent-text);
  letter-spacing:0.05em;
  margin-bottom:18px;
  display:block;
}
.pstep h3{ font-size:1.1rem; margin-bottom:10px; }
.pstep p{ font-size:0.88rem; color:var(--ink-2); line-height:1.55; }
@media (max-width:900px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .process{ grid-template-columns:1fr; } }

/* ==========================================================================
   Treatment chips
   ========================================================================== */
.chip-cloud{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink-1);
  transition:transform .3s var(--ease), color .3s, border-color .3s;
}
.chip:hover{ color:var(--ink-0); border-color:var(--mint); transform:translateY(-3px); }
.chip b{
  font-family:var(--font-display);
  color:var(--accent-text);
  font-weight:700;
  font-size:0.8rem;
}

/* ==========================================================================
   Outcomes / proof
   ========================================================================== */
.proof-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  align-items:stretch;
}
.proof-card{
  padding:48px;
  border-radius:var(--radius-xl);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.proof-card .num{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,5vw,4rem);
  font-weight:700;
  background:linear-gradient(120deg,var(--mint),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px;
}
.proof-card .cap{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); font-weight:700; margin-bottom:18px;}
.proof-card p{ color:var(--ink-2); font-size:1rem; line-height:1.6; }
.proof-note{
  font-size:0.8rem;
  color:var(--ink-3);
  line-height:1.6;
  margin-top:28px;
  max-width:760px;
}
@media (max-width:820px){ .proof-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  padding:80px 64px;
  border-radius:var(--radius-xl);
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(63,234,208,0.16), transparent 60%),
    var(--panel);
}
.cta-band h2{ font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:20px; max-width:680px; margin-left:auto; margin-right:auto; }
.cta-band p{ color:var(--ink-2); font-size:1.05rem; max-width:560px; margin:0 auto 40px; line-height:1.6; }
.cta-band .hero__actions{ justify-content:center; margin-bottom:0; }
@media (max-width:640px){ .cta-band{ padding:56px 24px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  position:relative; z-index:2;
  padding:80px 0 40px;
  border-top:1px solid var(--glass-hair);
  margin-top:60px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:60px;
}
.foot-brand .nav__logo{ margin-bottom:16px; }
.foot-brand p{ color:var(--ink-2); font-size:0.95rem; max-width:280px; line-height:1.6; }
.foot-col h4{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-3);
  margin-bottom:20px;
  font-weight:700;
}
.foot-col a, .foot-col span{
  display:block;
  color:var(--ink-1);
  font-size:0.95rem;
  margin-bottom:14px;
  transition:color .2s;
}
.foot-col a:hover{ color:var(--accent-text); }
.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding-top:32px;
  border-top:1px solid var(--glass-hair);
  font-size:0.82rem;
  color:var(--ink-3);
}
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:36px 28px; } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; gap:32px; } .foot-brand{ grid-column:auto; } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-group] > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero{ padding:180px 0 80px; }
.page-hero h1{ font-size:clamp(2.2rem,5vw,4rem); max-width:820px; margin-bottom:24px; }
.page-hero p{ font-size:1.1rem; color:var(--ink-2); max-width:640px; line-height:1.6; }

/* service detail page */
.breadcrumb{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.85rem; font-weight:600; color:var(--ink-3);
  margin-bottom:28px;
  transition:color .3s, gap .3s;
}
.breadcrumb:hover{ color:var(--ink-0); gap:12px; }
.service-hero-top{ display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.service-hero-top .logo-badge{ margin-bottom:0; }
.service-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.service-tag{
  font-size:0.78rem; font-weight:700;
  padding:8px 16px; border-radius:999px;
  color:var(--ink-1);
}
.related-nav{
  display:flex; flex-wrap:wrap; gap:14px;
  padding-top:8px;
}
.related-nav a{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px;
  border-radius:999px;
  font-weight:700; font-size:0.9rem;
  color:var(--ink-1);
  transition:transform .3s var(--ease), color .3s, border-color .3s;
}
.related-nav a:hover{ color:var(--ink-0); border-color:var(--mint); transform:translateY(-3px); }
.related-nav a svg{ width:16px; height:16px; }

/* checklist */
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; }
.checklist li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink-1); font-size:1rem; }
.checklist li .tick{
  flex:none;
  width:22px;height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--blue));
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
@media (max-width:640px){ .checklist{ grid-template-columns:1fr; } }

/* long service rows */
.service-row{
  display:grid;
  grid-template-columns:80px 1fr auto;
  align-items:center;
  gap:28px;
  padding:36px 8px;
  border-bottom:1px solid var(--glass-hair);
  transition:padding-left .3s var(--ease);
}
.service-row:first-child{ border-top:1px solid var(--glass-hair); }
.service-row:hover{ padding-left:16px; }
.service-row__num{ font-family:var(--font-display); font-size:1.4rem; color:var(--ink-3); font-weight:700; }
.service-row h3{ font-size:1.3rem; margin-bottom:8px; }
.service-row p{ color:var(--ink-2); font-size:0.95rem; line-height:1.55; max-width:560px; }
.service-row__arrow{
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.service-row:hover .service-row__arrow{ transform:rotate(45deg); border-color:var(--mint); background:rgba(63,234,208,0.1); }
@media (max-width:680px){
  .service-row{ grid-template-columns:1fr; gap:12px; }
  .service-row__arrow{ display:none; }
}

/* about "think" cards reuse pstep; insight cards */
.insight-card{
  padding:34px;
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  height:100%;
}
.insight-card__tag{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:18px;
}
.insight-card h3{ font-size:1.3rem; margin-bottom:14px; flex:1; }
.insight-card p{ color:var(--ink-2); font-size:0.95rem; line-height:1.6; margin-bottom:22px; }

/* contact page */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.contact-card{ padding:40px; border-radius:var(--radius-xl); }
.contact-card__opt{ font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-text); margin-bottom:16px;}
.contact-card h3{ font-size:1.5rem; margin-bottom:14px; }
.contact-card p{ color:var(--ink-2); line-height:1.6; margin-bottom:28px; }
.embed-slot{
  border:1.5px dashed var(--glass-border);
  border-radius:var(--radius-md);
  padding:30px 20px;
  text-align:center;
  color:var(--ink-3);
  font-size:0.85rem;
  background:var(--surface-1);
}
.embed-slot b{ display:block; color:var(--ink-1); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.contact-direct{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.contact-direct a{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px;
  border-radius:var(--radius-md);
  font-weight:700;
  transition:transform .3s var(--ease), border-color .3s;
}
.contact-direct a:hover{ transform:translateY(-3px); border-color:var(--mint); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* form (contact fallback) */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.82rem; font-weight:700; color:var(--ink-2); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);
  background:var(--surface-1);
  color:var(--ink-0);
  font-family:inherit;
  font-size:0.95rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--mint);
  box-shadow:0 0 0 3px rgba(63,234,208,0.15);
}

/* utility */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.flex{ display:flex; }
.gap-16{ gap:16px; }

/* ==========================================================================
   FAQ accordion — native <details> so answers stay in the DOM for crawlers
   and AI engines even when visually collapsed
   ========================================================================== */
.faq{ display:grid; gap:14px; max-width:880px; }
.faq details{
  border-radius:var(--radius-lg);
  padding:0;
  overflow:hidden;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:26px 30px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  font-family:var(--font-display);
  font-weight:650;
  font-size:1.06rem;
  color:var(--ink-0);
  line-height:1.35;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent-text); }
.faq summary::after{
  content:"";
  flex:none;
  width:20px; height:20px;
  margin-top:3px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
  transition:transform .35s var(--ease);
}
.faq details[open] summary{ color:var(--accent-text); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq__body{
  padding:0 30px 28px;
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.75;
  animation:faq-open .4s var(--ease);
}
.faq__body p{ margin:0 0 14px; }
.faq__body p:last-child{ margin-bottom:0; }
.faq__body strong{ color:var(--ink-1); }
@keyframes faq-open{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .faq__body{ animation:none; } }

/* ==========================================================================
   Long-form article prose (blog posts)
   ========================================================================== */
.prose{ max-width:740px; }
.prose h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  margin:56px 0 18px;
  scroll-margin-top:110px;
}
.prose h3{ font-size:1.2rem; margin:36px 0 14px; }
.prose p{
  color:var(--ink-1);
  font-size:1.06rem;
  line-height:1.8;
  margin:0 0 22px;
}
.prose ul, .prose ol{ margin:0 0 24px; padding-left:0; }
.prose li{
  position:relative;
  padding-left:28px;
  color:var(--ink-1);
  font-size:1.04rem;
  line-height:1.75;
  margin-bottom:12px;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:4px; top:12px;
  width:7px; height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--blue));
}
.prose ol{ counter-reset:pl; }
.prose ol li{ counter-increment:pl; }
.prose ol li::before{
  content:counter(pl);
  position:absolute;
  left:0; top:1px;
  font-family:var(--font-display);
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent-text);
}
.prose a{ color:var(--accent-text); border-bottom:1px solid var(--accent-underline); }
.prose a:hover{ border-color:var(--mint); }
.prose strong{ color:var(--ink-0); font-weight:700; }

/* answer-first summary box — the block AI engines lift most often */
.tldr{
  padding:32px 34px;
  border-radius:var(--radius-lg);
  margin-bottom:44px;
  border-left:3px solid var(--mint);
}
.tldr h2{
  font-size:0.78rem !important;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--accent-text);
  margin:0 0 16px !important;
}
.tldr p{ font-size:1.08rem; line-height:1.7; color:var(--ink-1); margin:0; }
.tldr ul{ margin:14px 0 0; }
.tldr li{ font-size:1rem; margin-bottom:10px; }

/* comparison tables — structured data AI engines extract cleanly */
.table-wrap{ overflow-x:auto; margin:0 0 28px; border-radius:var(--radius-md); }
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
  min-width:520px;
}
.data-table th{
  text-align:left;
  padding:16px 18px;
  font-family:var(--font-display);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--accent-text);
  border-bottom:1px solid var(--glass-border);
  white-space:nowrap;
}
.data-table td{
  padding:16px 18px;
  color:var(--ink-1);
  border-bottom:1px solid var(--glass-hair);
  line-height:1.6;
}
.data-table tr:last-child td{ border-bottom:none; }

/* post meta / byline */
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  font-size:0.87rem;
  color:var(--ink-3);
  margin-bottom:36px;
}
.post-meta .dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.post-meta strong{ color:var(--ink-1); font-weight:600; }

/* table of contents */
.toc{ padding:28px 30px; border-radius:var(--radius-lg); margin-bottom:44px; }
.toc h2{ font-size:0.78rem !important; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-3); margin:0 0 16px !important; }
.toc ol{ margin:0; }
.toc li{ padding-left:22px; margin-bottom:10px; font-size:0.97rem; }
.toc a{ color:var(--ink-1); border:none; }
.toc a:hover{ color:var(--accent-text); }

/* blog archive grid */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:22px;
}
.blog-card{
  padding:34px;
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s;
}
.blog-card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.3); }
.blog-card__tag{
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:16px;
}
.blog-card h3{ font-size:1.24rem; margin-bottom:14px; line-height:1.25; }
.blog-card p{ color:var(--ink-2); font-size:0.95rem; line-height:1.6; margin:0 0 22px; flex:1; }
.blog-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.82rem; color:var(--ink-3);
  padding-top:18px; border-top:1px solid var(--glass-hair);
}
.blog-card__foot .go{ color:var(--ink-0); font-weight:700; }

/* areas served (local SEO) */
.areas{ display:flex; flex-wrap:wrap; gap:10px; }
.area-pill{
  padding:10px 18px;
  border-radius:999px;
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink-2);
  transition:color .3s, border-color .3s, transform .3s var(--ease);
}
.area-pill:hover{ color:var(--ink-0); border-color:var(--mint); transform:translateY(-2px); }

/* definition callout — entity clarity for AI engines */
.definition{
  padding:30px 34px;
  border-radius:var(--radius-lg);
  margin:0 0 32px;
  border-left:3px solid var(--violet);
}
.definition h3{ font-size:1.05rem; margin-bottom:12px; }
.definition p{ margin:0; color:var(--ink-2); line-height:1.7; font-size:1rem; }