/* =============================================================================
   Liquid glass

   The Apple style glass treatment, rebuilt in plain CSS and SVG. The React
   version this is based on needs Tailwind and a build step; this site has
   neither by design, and the effect itself is only three layers:

     1. a blurred, gently displaced backdrop  (backdrop-filter + SVG turbulence)
     2. a translucent white wash              (the "glass" itself)
     3. inset highlights on two edges         (the lit rim that sells it)

   Used sparingly on the landing page so it reads as craft rather than gimmick.
   ========================================================================== */

.lg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  color: #F3F1EA;
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.6),
              border-radius 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26), 0 0 40px rgba(0, 0, 0, 0.12);
}

/* 1, the refracted backdrop */
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  backdrop-filter: blur(6px) saturate(150%);
  filter: url(#pp-glass-distortion);
  border-radius: inherit;
}

/* 2 and 3, the wash and the lit rim */
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.34),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.lg > * { position: relative; z-index: 2; }

.lg:hover { transform: translateY(-3px); border-radius: 26px; }

/* Safari and Firefox without backdrop-filter get a solid tint instead of a
   flat, unreadable panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg::before { background: rgba(20, 37, 28, 0.62); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg, .lg:hover { transition: none; transform: none; }
}

/* ---- the trust bar on the hero ---------------------------------------- */
.lg-trust {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  margin: 30px auto 0;
  width: fit-content;
  max-width: min(94vw, 720px);
}
.lg-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 26px;
  text-align: center;
  white-space: nowrap;
}
.lg-trust-item + .lg-trust-item {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.lg-trust-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  color: #E8C16A;
  font-weight: 500;
}
.lg-trust-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(243, 241, 234, 0.72);
}
@media (max-width: 720px) {
  .lg-trust { margin-top: 22px; padding: 3px; }
  .lg-trust-item { padding: 11px 15px; }
  .lg-trust-num { font-size: 1.2rem; }
  .lg-trust-label { font-size: 0.5rem; letter-spacing: 0.13em; }
}
@media (max-width: 430px) {
  .lg-trust-item { padding: 10px 10px; }
  .lg-trust-label { font-size: 0.45rem; }
}

/* ---- glass applied to the hero credentials bar ------------------------- */
/* No padding on the shell. The two rows inside run edge to edge and are told
   apart by a hairline, so the bar reads as one pane of glass instead of a dark
   slab pasted inside a frame. The rows carry their own breathing room. */
.lg-hero-trust {
  padding: 0;
  border-radius: 18px;
  background: transparent;
}
.lg-hero-trust:hover { transform: translateY(-2px); border-radius: 22px; }
@media (max-width: 720px) { .lg-hero-trust { padding: 0; border-radius: 14px; } }

/* =============================================================================
   Glass on the two remaining landing page surfaces.

   Both keep their own solid background underneath. The glass is layered over
   it as depth, never as a replacement, because a translucent panel on a white
   nav would leave the label barely readable. Contrast first, effect second.
   ========================================================================== */

/* ---- Book a Consultation ---------------------------------------------- */
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background 0.3s,
              transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.6),
              box-shadow 0.6s;
}
/* the lit rim, which is what reads as glass. No blur here: the button sits on
   an opaque nav, so there is nothing behind it worth refracting. */
.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg,
              rgba(255, 255, 255, 0.42) 0%,
              rgba(255, 255, 255, 0.08) 42%,
              rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.62),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.24);
  pointer-events: none;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(232, 193, 106, 0.75);
}

/* ---- the appointment strip -------------------------------------------- */
.appt-bar {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}
.appt-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.10) 0%,
              rgba(255, 255, 255, 0.02) 55%,
              rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.20);
  pointer-events: none;
}
/* a slow highlight travelling across the strip, the way light moves over a
   polished stone. Long and low contrast so it is felt more than noticed. */
.appt-bar::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 22%;
  z-index: -1;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(232, 193, 106, 0.13) 45%,
              rgba(255, 255, 255, 0.16) 55%,
              transparent 100%);
  animation: apptSheen 9s ease-in-out 2.5s infinite;
  pointer-events: none;
}
@keyframes apptSheen {
  0%   { left: -30%; }
  55%  { left: 118%; }
  100% { left: 118%; }
}
@media (prefers-reduced-motion: reduce) {
  .appt-bar::before { animation: none; opacity: 0; }
  .nav-cta:hover { transform: none; }
}