/* =====================================================================
   ENHANCE LAYER — glassmorphism + refined motion (added 2026-06)
   "Quiet-luxury" treatment for a clinical brand: frosted glass, soft
   depth, gentle hover sheen, slow gradient glow in dark sections.

   Self-contained override block. To fully revert this direction:
     1) delete this file
     2) remove the <link ... enhance.css> and <script ... enhance.js>
        tags from each page (they sit right after site.css / before
        </body>).
   Everything here layers on top of existing classes — no markup
   changes required.
   ===================================================================== */

:root{
  /* glass tokens */
  --glass-light: rgba(255,255,255,.55);
  --glass-light-2: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.6);
  --glass-dark: rgba(255,255,255,.06);
  --glass-dark-border: rgba(255,255,255,.14);
  --glass-blur: blur(16px) saturate(160%);
  --glass-blur-strong: blur(22px) saturate(170%);
  /* refined shadow ramp */
  --shadow-sm: 0 2px 8px -4px rgba(40,50,47,.18);
  --shadow-md: 0 16px 38px -20px rgba(40,50,47,.32);
  --shadow-lg: 0 34px 70px -34px rgba(40,50,47,.45);
  --ease-soft: cubic-bezier(.4,.14,.3,1);
}

/* ---------------------------------------------------------------
   1. SCROLL PROGRESS BAR (element injected by enhance.js)
   --------------------------------------------------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--clay),var(--ip-blue) 55%,var(--ip-green));
  box-shadow:0 0 12px -2px rgba(88,141,153,.6);
  transition:width .08s linear;pointer-events:none;
  border-bottom-right-radius:3px;border-top-right-radius:3px;
}

/* ---------------------------------------------------------------
   2. FROSTED HEADER + GLASS DROPDOWNS
   --------------------------------------------------------------- */
header.scrolled,
header.on-white{
  background:var(--glass-light-2);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 rgba(40,50,47,.06), 0 10px 30px -22px rgba(40,50,47,.4);
}

.navlinks .drop{
  background:var(--glass-light-2);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-md);
}

/* ---------------------------------------------------------------
   3. SLOW GRADIENT GLOW in dark / colored hero + bands
   A single drifting aurora layer. Very low opacity = calm.
   --------------------------------------------------------------- */
.hero, .inner-hero, .philo, .path, .refer, .closing{position:relative}
.hero::before,
.inner-hero::before,
.philo::before,
.path::before,
.refer::before,
.closing::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 50% at 18% 28%, rgba(88,141,153,.22), transparent 70%),
    radial-gradient(34% 46% at 82% 72%, rgba(165,184,94,.16), transparent 72%),
    radial-gradient(30% 40% at 60% 20%, rgba(184,122,80,.14), transparent 70%);
  background-size:200% 200%, 200% 200%, 200% 200%;
  animation:auroraDrift 28s ease-in-out infinite alternate;
  opacity:.9;
}
/* keep all real content above the glow */
.hero > *, .inner-hero > *, .philo > *, .path > *, .refer > *, .closing > *{position:relative;z-index:1}
.hero .wrap, .inner-hero .wrap{z-index:2}

@keyframes auroraDrift{
  0%  {background-position:0% 0%,   100% 100%, 50% 0%;}
  50% {background-position:60% 40%, 40% 60%,   30% 50%;}
  100%{background-position:100% 100%, 0% 0%,   70% 30%;}
}

/* ---------------------------------------------------------------
   4. GLASS CARDS — treatment, voice, refer, form, badges, stats
   --------------------------------------------------------------- */

/* shared soft-glass surface + sheen sweep on hover */
.tcard, .voice, .form-card{
  position:relative;overflow:hidden;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft),
             border-color .55s var(--ease-soft), background .55s var(--ease-soft);
}

/* glassy paper for the warm cards */
.tcard{
  background:linear-gradient(150deg, rgba(255,253,249,.92), rgba(255,253,249,.7));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
}
.tcard:hover{box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.8)}

/* sheen sweep that crosses a card on hover */
.tcard::after, .voice::after{
  content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg);transition:none;pointer-events:none;opacity:0;
}
.tcard:hover::after, .voice:hover::after{
  animation:sheen 1.1s var(--ease-soft) forwards;
}
@keyframes sheen{
  0%{left:-60%;opacity:0}
  18%{opacity:.9}
  100%{left:130%;opacity:0}
}

/* flagged (blue gradient) card keeps its sheen subtle/white */
.tcard.flag{box-shadow:var(--shadow-md)}
.tcard.flag:hover{box-shadow:var(--shadow-lg)}

/* testimonial cards as light glass */
.voice{
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.8);
}
.voice:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* referral card sits on a dark band — true frosted glass reads here */
.refer-card{
  background:var(--glass-dark)!important;
  -webkit-backdrop-filter:var(--glass-blur-strong);
  backdrop-filter:var(--glass-blur-strong);
  border:1px solid var(--glass-dark-border)!important;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
}
.refer-card:hover{transform:translateY(-3px)}

/* consultation form card — frosted */
.form-card{
  background:linear-gradient(155deg, rgba(255,255,255,.7), rgba(244,237,226,.5));
  border:1px solid rgba(255,255,255,.7);
}

/* practice / pioneers badge -> floating glass chip */
.pioneers .imgcol .badge,
.practice-badge{
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  background:var(--glass-light-2)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:var(--shadow-md);
}

/* stat band cells get a faint glass divider feel */
.stat-band .stat{transition:background .4s var(--ease-soft)}
.stat-band .stat:hover{background:rgba(255,255,255,.4)}

/* ---------------------------------------------------------------
   5. BUTTON SHEEN — light sweep on primary buttons
   --------------------------------------------------------------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;left:-120%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);transition:none;
}
.btn-primary:hover::after{animation:sheen .9s var(--ease-soft) forwards}

/* ---------------------------------------------------------------
   6. FEATURE TILES + TEAM CARDS — softer depth on hover
   --------------------------------------------------------------- */
.feat{transition:background .4s var(--ease-soft), transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft)}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* ---------------------------------------------------------------
   7. REVEAL — refined easing + optional stagger (delay set by JS)
   --------------------------------------------------------------- */
.reveal{transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft)}
.reveal{will-change:opacity, transform}
.reveal.in{will-change:auto}

/* ---------------------------------------------------------------
   8. FOCUS-VISIBLE — accessible rings (keyboard users)
   --------------------------------------------------------------- */
a:focus-visible, button:focus-visible,
.btn:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--ip-blue);
  outline-offset:3px;border-radius:3px;
}

/* ---------------------------------------------------------------
   9. PARALLAX hooks (transform applied by enhance.js)
   --------------------------------------------------------------- */
.hero-enzo, .enzo-bg, .enzo-mark{will-change:transform}

/* ---------------------------------------------------------------
   REDUCED MOTION — disable all decorative motion, keep glass/depth
   --------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero::before,.inner-hero::before,.philo::before,
  .path::before,.refer::before,.closing::before{animation:none}
  .tcard::after,.voice::after,.btn-primary::after{display:none}
  .scroll-progress{transition:none}
}

/* graceful fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.scrolled, header.on-white, .navlinks .drop{background:rgba(255,255,255,.97)}
  .refer-card{background:rgba(255,255,255,.08)!important}
  .tcard{background:#fffdf9}
  .voice{background:#fff}
}

/* ---------------------------------------------------------------
   10. PHOTO SECTIONS — dimmed, desaturated photo behind a dark band.
   Reusable across pages. This block supplies the dim/filter, overlay,
   and light text; each PAGE sets the actual image on the ::before in a
   page-level <style>, because a relative url() inside a CSS custom
   property resolves against enhance.css's folder, not the page. So:
     <section class="sec sec-photo" id="foo" style="--sec-photo-pos:50% 40%">
     ...and in the page's <style>:
     #foo::before{background-image:url(assets/img/foo.jpg)}
   Optional: --sec-photo-pos (default 50% 50%) — a plain value, safe in a var.
   Placed after the aurora block so it overrides ::before on sections that
   also carry an aurora glow (e.g. .path). Content stays readable.
   --------------------------------------------------------------- */
.sec-photo{position:relative;overflow:hidden;background:#202724;color:#fff}
.sec-photo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:var(--sec-photo-pos,50% 50%);
  background-size:cover;background-repeat:no-repeat;
  filter:grayscale(.42) brightness(.5) contrast(1.03);
  animation:none;
}
.sec-photo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(32,39,36,.62),rgba(32,39,36,.82));
}
.sec-photo > .wrap{position:relative;z-index:1}
.sec-photo .sec-head h2,
.sec-photo .textcol h2{color:#fff}
.sec-photo .sec-head p,
.sec-photo .textcol p{color:rgba(255,255,255,.82)}
.sec-photo .eyebrow{color:#d79a68}
.sec-photo .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.sec-photo .btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.sec-photo .enzo-mark{display:none}

@media(prefers-reduced-motion:reduce){
  .sec-photo::before{animation:none}
}