/* ============================================================
   Samikshya Kafle, Direction A "Hireable Hygienist"
   Palette: warm cream + soft sage + deep teal, copper accent
   Type: Fraunces (display) + Inter (body)
   Layout: single-column, mobile-first, generous whitespace
   ============================================================ */

:root {
  /* Color */
  --paper:        #fbf8f2;   /* warm cream, page bg */
  --paper-2:      #f5f1e8;   /* slightly deeper cream */
  --sage:         #e7efe7;   /* soft sage panel */
  --sage-2:       #dde7dd;   /* sage hover */
  --teal:         #0d3b3c;   /* deep teal, primary ink/headlines */
  --teal-2:       #144b4c;   /* hover */
  --ink:          #1d2b2a;   /* body text */
  --muted:        #586664;   /* secondary copy */
  --line:         #d8ddd2;   /* hairline rules */
  --line-strong:  #b9c2b3;
  --copper:       #bf6b55;   /* tiny accent, kickers, hover */
  --copper-soft:  #e9d6cd;
  --white:        #ffffff;
  --shadow-sm:    0 1px 2px rgba(13, 59, 60, 0.05), 0 2px 4px rgba(13, 59, 60, 0.04);
  --shadow-md:    0 1px 2px rgba(13, 59, 60, 0.05), 0 6px 14px rgba(13, 59, 60, 0.06), 0 14px 30px -8px rgba(13, 59, 60, 0.06);
  --shadow-lg:    0 2px 6px rgba(13, 59, 60, 0.06), 0 14px 30px -6px rgba(13, 59, 60, 0.09), 0 34px 64px -24px rgba(13, 59, 60, 0.12);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --pad-x:        clamp(20px, 5vw, 76px);
  --pad-y:        clamp(64px, 9vw, 120px);
  --gap-sm:       12px;
  --gap-md:       24px;
  --gap-lg:       clamp(32px, 5vw, 64px);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a {
  color: var(--teal);
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}

a:hover { color: var(--copper); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--copper-soft); color: var(--teal); }

h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 16px;
  background: var(--teal);
  color: var(--paper);
  font-weight: 600;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  outline: 2px solid var(--copper);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad-x);
  background: rgba(251, 248, 242, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, background 160ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 600;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-name {
  font-size: 17px;
  letter-spacing: 0.005em;
}

.nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 28px);
}

.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.nav a:hover { color: var(--copper); }

.header-cta {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
}

.header-cta:hover {
  background: var(--teal-2);
  color: var(--paper);
}

@media (max-width: 760px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .site-header { padding: 12px 18px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 140ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--teal);
  color: var(--paper);
  border: 1px solid var(--teal);
}
.btn-primary:hover {
  background: var(--teal-2);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal);
}
.btn-ghost:hover {
  background: var(--teal);
  color: var(--paper);
}

.link-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.link-tertiary:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

/* ---------- Section primitives ---------- */

main > section {
  padding: var(--pad-y) var(--pad-x);
}

.section-kicker {
  margin: 0 0 14px;
  color: var(--copper);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Signature molar glyph before every section kicker.
   Inline SVG via data URI keeps it zero-request and tintable per context. */
.section-kicker::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 14px;
  flex: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 260' fill='%23bf6b55'%3E%3Cpath d='M80 5C130 5 158 28 152 70L144 130C142 162 134 200 122 232C116 250 102 254 96 240L86 178Q80 168 74 178L64 240C58 254 44 250 38 232C26 200 18 162 16 130L8 70C2 28 30 5 80 5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* On the deep-teal contact section, the copper glyph reads as muted paper */
.contact .section-kicker::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 260' fill='%23e9d6cd'%3E%3Cpath d='M80 5C130 5 158 28 152 70L144 130C142 162 134 200 122 232C116 250 102 254 96 240L86 178Q80 168 74 178L64 240C58 254 44 250 38 232C26 200 18 162 16 130L8 70C2 28 30 5 80 5Z'/%3E%3C/svg%3E");
}

main h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  max-width: 22ch;
  margin-bottom: 0.6em;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 9vw, 112px);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--sage) 0%, transparent 55%),
    var(--paper);
}

/* Signature molar mark: large, low opacity, positioned bottom-right,
   partially clipped so it reads as a deliberate art mark. */
.hero-mark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: clamp(280px, 36vw, 460px);
  height: auto;
  color: var(--teal);
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

/* Asymmetric grid: text dominant on the left, portrait substantial on the right. */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: start;
  gap: var(--gap-lg);
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(8px, 2vw, 24px);
}

.hero .eyebrow {
  margin: 0 0 18px;
  color: var(--copper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 22px;
  padding-bottom: 22px;
  font-size: clamp(54px, 8.4vw, 116px);
  font-weight: 400;
  letter-spacing: -0.028em;
  /* Fluid leading: tighter on small displays, more breathing room on large */
  line-height: clamp(1em, 0.95em + 0.4vw, 1.05em);
  position: relative;
}

/* Hairline rule beneath the headline, in copper, narrow.
   Acts as a typographic signature: quiet, deliberate. */
.hero h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--copper);
  border-radius: 2px;
}

.hero-name {
  display: block;
  color: var(--teal);
}

/* RDH as the credential highlight: large Fraunces italic in copper with a
   longer leading rule. Reads as a deliberate editorial mark. */
.hero-creds {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  color: var(--copper);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  text-transform: none;
  vertical-align: middle;
}

.hero-creds::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--copper);
  flex: none;
}

.hero-headline {
  max-width: 28ch;
  margin: 0 0 18px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.25;
}

.hero-value {
  max-width: 52ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.hero-availability {
  margin: 0 0 28px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-portrait {
  position: relative;
  margin: 0 16px 16px 0;
  justify-self: end;
  width: 100%;
  /* Substantial editorial headshot, anchors the right side without dominating */
  max-width: 380px;
}

/* Sage offset block, shifted down-right, sits behind the photo.
   Reads as deliberate editorial composition. */
.hero-portrait::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 100%;
  height: 100%;
  background: var(--sage);
  border-radius: var(--r-xl);
  z-index: 0;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-portrait:hover::before { transform: translate(2px, 2px); }

.hero-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* Native 2:3 portrait - the source crop is intentional, no CSS distortion */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-xl);
  background: var(--sage);
  box-shadow:
    0 30px 60px -25px rgba(13, 59, 60, 0.32),
    0 10px 24px -12px rgba(13, 59, 60, 0.18);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-portrait:hover img { transform: translate(-2px, -2px); }

.portrait-cap {
  position: relative;
  z-index: 2;
}

.portrait-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.cap-label {
  color: var(--teal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.cap-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.cap-detail {
  color: var(--copper);
  font-weight: 500;
}

@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-portrait {
    order: -1;
    justify-self: center;
    max-width: 280px;
    margin: 0 12px 12px 0;
  }
  .hero-creds { font-size: clamp(20px, 5vw, 28px); }
  .hero h1 {
    /* keep the dramatic feel without overflowing on mobile */
    font-size: clamp(40px, 12vw, 72px);
    letter-spacing: -0.022em;
    padding-bottom: 18px;
  }
  .hero-mark {
    right: -30px;
    bottom: -40px;
    width: 240px;
    opacity: 0.08;
  }
  .pull-quote {
    font-size: clamp(19px, 5vw, 24px);
    padding-left: 18px;
    margin-left: 0;
  }
  .service-map { height: 260px; }
  .resume-chip { min-width: 84px; padding: 12px 12px; }
  .resume-chip .chip-icon { width: 22px; height: 22px; }
  .meta-copy { width: 32px; height: 32px; }
  .meta-copy svg { width: 16px; height: 16px; }
}

@media (max-width: 480px) {
  .hero-portrait { max-width: 200px; }
  .hero h1 { font-size: clamp(36px, 11vw, 56px); }
  .hero-headline { font-size: clamp(18px, 4.6vw, 22px); }
  .hero-value { font-size: 15px; }
  .service-map { height: 220px; }
  .pull-quote { font-size: 18px; padding-left: 14px; }
  .resume-share { padding: 18px 14px; }
  .resume-chip { min-width: 0; flex: 1 1 28%; }
  .contact-meta { gap: 8px 12px; }
}

/* ---------- Trust strip ---------- */

.trust {
  background: var(--sage);
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

.trust .section-kicker {
  max-width: 1280px;
  margin: 0 auto 22px;
}

.trust-grid {
  display: grid;
  /* Auto-fit so the strip looks balanced whether it has 5, 6, or 7 cells */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.trust-cell {
  /* Fluid padding so cells don't feel cramped on narrow viewports */
  padding: clamp(18px, 2.5vw, 24px) clamp(12px, 2.5vw, 18px);
  border-right: 1px solid var(--line-strong);
}

.trust-cell:last-child { border-right: none; }

.trust-cell .label {
  display: block;
  margin-bottom: 6px;
  color: var(--copper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.trust-cell .value {
  display: block;
  margin-bottom: 4px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.2;
}

.trust-cell .detail {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.trust-cell .verify-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.trust-cell .verify-link:hover {
  color: var(--copper);
}

@media (max-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-cell:nth-child(3n) { border-right: none; }
  .trust-cell:nth-child(-n+3) { border-bottom: 1px solid var(--line-strong); }
}

@media (max-width: 560px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-cell { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .trust-cell:nth-child(2n) { border-right: none; }
  /* The last cell (BLS, with verify link) was orphaning in a half-row.
     Span it across both columns so the grid bottom edge is clean. */
  .trust-cell:last-child { grid-column: 1 / -1; border-right: none; }
  .trust-cell:last-child,
  .trust-cell:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

@media (max-width: 380px) {
  /* On the smallest phones, single-column trust strip is more readable
     than cramming two narrow cells side by side. */
  .trust-grid { grid-template-columns: 1fr; }
  .trust-cell { border-right: none; border-bottom: 1px solid var(--line-strong); }
  .trust-cell:last-child { border-bottom: none; }
}

/* ---------- About ---------- */

.about {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.about h2 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 500;
}

.about-copy p {
  margin-bottom: 1.2em;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.78;
}

.about-copy p:first-of-type::first-letter {
  /* subtle drop cap */
  font-family: var(--font-display);
  font-size: 1.2em;
  font-weight: 600;
  color: var(--teal);
}

.about-signature {
  margin-top: 32px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--copper);
  font-size: 18px;
}

/* ---------- Experience timeline ---------- */

.experience {
  background: var(--paper);
}

.experience h2 { margin-bottom: 36px; }

.timeline {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  display: grid;
  gap: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 11px;
  width: 1px;
  background: var(--line-strong);
}

.timeline-item {
  position: relative;
  padding-left: 44px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px var(--paper);
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--copper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timeline-meta .sep { color: var(--line-strong); }

.timeline-item h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--teal);
}

.timeline-item .org {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.timeline-item .summary {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- Capabilities grid ---------- */

.capabilities {
  background: var(--paper-2);
}

.capabilities h2 { margin-bottom: 36px; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.capability-card {
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.capability-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.capability-card h3 {
  margin: 0 0 10px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.capability-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

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

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

/* ---------- Notes ---------- */

.notes {
  background: var(--paper);
}

.notes-head {
  max-width: 880px;
  margin: 0 auto 38px;
}

.notes-intro {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

.note-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.note-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  color: var(--ink);
}

.note-card .meta {
  margin: 0 0 14px;
  color: var(--copper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.note-card h3 {
  margin: 0 0 12px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
}

.note-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.note-card .read-more {
  margin-top: auto;
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: color 200ms ease;
}

/* Animated arrow that slides on parent hover (cleaner than text "→") */
.note-card .read-more::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.note-card:hover .read-more { color: var(--copper); }
.note-card:hover .read-more::after { transform: translateX(6px); }

.notes-all {
  margin: 36px auto 0;
  max-width: 1100px;
  text-align: right;
}

.notes-all a {
  color: var(--teal);
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.notes-all a:hover { color: var(--copper); }

@media (max-width: 880px) {
  .notes-grid { grid-template-columns: 1fr; }
  .notes-all { text-align: left; }
}

/* ---------- Contact ---------- */

.contact {
  background: var(--teal);
  color: var(--paper);
  text-align: center;
}

.contact .section-kicker { color: var(--copper-soft); }

.contact h2 {
  /* Bold welcoming moment that separates the page from the contact ask.
     Slightly larger than other section H2s, lighter weight for editorial
     elegance, more breathing room on top so it lands as a deliberate
     pause rather than crowding the kicker. */
  color: var(--paper);
  margin: 6px auto 36px;
  max-width: 22ch;
  font-size: clamp(40px, 5.2vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.contact-intro {
  max-width: 56ch;
  margin: 0 auto 36px;
  color: rgba(251, 248, 242, 0.84);
  font-size: 17px;
  line-height: 1.75;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

/* Single small line of meta info under the contact actions:
   email-as-text · location · LinkedIn. Replaces the previous
   .contact-meta dl (which duplicated the action buttons) and the
   .vcard-share QR block (whose function is covered by "Save contact"). */
.contact-meta-line {
  max-width: 56ch;
  margin: 0 auto 40px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 248, 242, 0.78);
  text-align: center;
}

.contact-meta-line a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 248, 242, 0.4);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact-meta-line a:hover {
  color: var(--copper-soft);
  border-bottom-color: var(--copper-soft);
}

.contact-meta-line span[aria-hidden="true"] {
  margin: 0 8px;
  color: rgba(251, 248, 242, 0.4);
}

.contact .btn-primary {
  background: var(--paper);
  color: var(--teal);
  border-color: var(--paper);
}
.contact .btn-primary:hover {
  background: var(--copper);
  color: var(--paper);
  border-color: var(--copper);
}

.contact .btn-ghost {
  color: var(--paper);
  border-color: rgba(251, 248, 242, 0.6);
}
.contact .btn-ghost:hover {
  background: var(--paper);
  color: var(--teal);
  border-color: var(--paper);
}

/* Résumé share group (Contact section) */
.resume-share {
  max-width: 560px;
  margin: 0 auto 36px;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(251, 248, 242, 0.05);
  border: 1px solid rgba(251, 248, 242, 0.18);
  text-align: center;
}

.resume-share-label {
  margin: 0 0 14px;
  color: var(--copper-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.resume-share-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Resume chip: icon stacked above label, square-ish target */
.resume-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  padding: 14px 16px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(251, 248, 242, 0.28);
  color: var(--paper);
  text-decoration: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.resume-chip:hover {
  background: var(--paper);
  color: var(--teal);
  border-color: var(--paper);
  transform: translateY(-1px);
}

.resume-chip .chip-icon {
  width: 26px;
  height: 26px;
  flex: none;
}

.resume-chip .chip-label {
  display: block;
}

.resume-share-status {
  margin: 14px 0 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--copper-soft);
  opacity: 0;
  transition: opacity 180ms ease;
}

.resume-share-status.is-visible { opacity: 1; }

/* Inline copy buttons in contact-meta (next to Email/Phone/LinkedIn) */
.meta-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--copper-soft);
  cursor: pointer;
  vertical-align: -6px;
  transition: background 160ms ease, color 160ms ease;
}

.meta-copy svg { width: 14px; height: 14px; }

.meta-copy:hover {
  background: rgba(251, 248, 242, 0.12);
  color: var(--paper);
}

.meta-copy-status {
  text-align: center;
  margin: 14px 0 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--copper-soft);
  opacity: 0;
  transition: opacity 180ms ease;
}

.meta-copy-status.is-visible { opacity: 1; }

/* Service area block (in Contact section) */
.service-area {
  max-width: 560px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 248, 242, 0.18);
  text-align: center;
}

.service-area-label {
  margin: 0 0 14px;
  color: var(--copper-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.service-area-map {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  background: rgba(251, 248, 242, 0.04);
  border-radius: 14px;
  padding: 12px;
}

.service-area-cities {
  margin: 16px auto 4px;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--paper);
}

.service-area-foot {
  margin: 0;
  font-size: 11px;
  color: var(--copper-soft);
  font-style: italic;
}

.contact-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 248, 242, 0.18);
  text-align: left;
}

.contact-meta dt {
  color: var(--copper-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 4px;
}

.contact-meta dd {
  margin: 0;
  color: var(--paper);
  font-size: 16px;
}

.contact-meta a {
  color: var(--paper);
  border-bottom: 1px solid rgba(251, 248, 242, 0.4);
  padding-bottom: 2px;
}

.contact-meta a:hover { color: var(--copper-soft); border-bottom-color: var(--copper-soft); }

/* ---------- Footer ---------- */

.site-footer {
  padding: 32px var(--pad-x);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.site-footer p { margin: 0; }

.footer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.footer-meta a {
  color: var(--teal);
  font-weight: 500;
}

.footer-meta a:hover { color: var(--copper); }

/* ---------- Mobile sticky CTA ---------- */

.mobile-cta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 25;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(251, 248, 242, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.mobile-cta .btn {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  padding: 10px 14px;
}

/* Sticky mobile CTA bar intentionally hidden so the page reads as a calm
   practitioner site rather than an applicant page. Email and call still live
   in the contact section. To re-enable, restore: .mobile-cta { display: flex; }
   on (max-width: 760px) and add body padding-bottom: 76px back. */

/* ---------- Journal page (journal.html) ---------- */

.journal-page main > section { padding-top: clamp(48px, 6vw, 80px); }

.journal-head {
  max-width: 880px;
  margin: 0 auto 36px;
}

.journal-head .section-kicker { margin-bottom: 12px; }

.journal-head h1 {
  margin: 0 0 14px;
  font-size: clamp(38px, 5vw, 60px);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--teal);
  letter-spacing: -0.01em;
}

.journal-head p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.topic-rail {
  max-width: 1100px;
  margin: 0 auto 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(13, 59, 60, 0.18);
  background: transparent;
  color: var(--teal);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.topic-chip:hover {
  background: rgba(13, 59, 60, 0.06);
  border-color: rgba(13, 59, 60, 0.32);
}

.topic-chip.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream, #fbf8f2);
}

.journal-list {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 760px) {
  .journal-list { grid-template-columns: 1fr; }
}

/* ---------- Article (post.html) ---------- */

.post-page .site-header { background: rgba(251, 248, 242, 0.92); border-bottom: 1px solid var(--line); }

.article-shell {
  padding: clamp(32px, 5vw, 56px) var(--pad-x) clamp(48px, 7vw, 80px);
  background:
    linear-gradient(180deg, var(--sage) 0, var(--paper) 320px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
}

.back-link:hover { color: var(--copper); }

.article {
  max-width: 760px;
  margin: 0 auto;
}

.article-hero { margin-bottom: 36px; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--copper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.article-hero h1 {
  margin: 0 0 14px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.article-summary {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}

.article-visual {
  display: none;
}

.article-body { margin-top: 28px; }

.article-body section { margin-bottom: 32px; }

.article-body h2 {
  margin: 0 0 14px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
}

.article-body p {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.78;
  margin-bottom: 1.1em;
}

.takeaway-box,
.reference-box {
  margin: 32px 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}

.takeaway-box { border-top: 4px solid var(--copper); }

.takeaway-box h2,
.reference-box h2 {
  margin: 0 0 14px;
  font-size: 20px;
  color: var(--teal);
}

.takeaway-box ul,
.reference-box ol {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

.reference-box ol { list-style: decimal; }

.takeaway-box li,
.reference-box li { margin-bottom: 8px; }

.reference-box a {
  color: var(--teal);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}
.reference-box a:hover { color: var(--copper); border-bottom-color: var(--copper); }

/* ---------- Universal hidden override (defends against display:flex/grid leaks) ---------- */

[hidden] { display: none !important; }

/* ---------- Scroll progress indicator (top of viewport) ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--copper);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
  transition: transform 80ms linear;
}

/* ---------- Nav scroll-spy active state ---------- */

.site-header .nav a.is-active {
  color: var(--copper);
  position: relative;
}

.site-header .nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--copper);
  border-radius: 2px;
  animation: nav-underline-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes nav-underline-in {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}

/* ---------- Primary CTA hover (subtle, no pulse, no magnetic) ---------- */

.hero-actions .btn-primary {
  transition: background 200ms ease, color 200ms ease,
              box-shadow 220ms ease, transform 220ms ease;
}

.hero-actions .btn-primary:hover {
  box-shadow: 0 12px 30px -8px rgba(13, 59, 60, 0.35);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* ---------- Reveal motion (smoother, slower, with subtle delay stagger) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 550ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger sibling reveals: each subsequent item nudges its delay slightly,
   so a row of cards rises in sequence rather than as a slab. Tightened
   from 70ms to 60ms and extended to 8 children to cover 7-cap-card / 7-
   trust-cell grids without the last item lagging conspicuously. */
[data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-reveal]:nth-child(2) { transition-delay: 60ms; }
[data-reveal]:nth-child(3) { transition-delay: 120ms; }
[data-reveal]:nth-child(4) { transition-delay: 180ms; }
[data-reveal]:nth-child(5) { transition-delay: 240ms; }
[data-reveal]:nth-child(6) { transition-delay: 290ms; }
[data-reveal]:nth-child(7) { transition-delay: 340ms; }
[data-reveal]:nth-child(8) { transition-delay: 380ms; }

/* ---------- Editorial pull-quote (About section) ---------- */

.pull-quote {
  margin: 28px 0 28px -2px;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--copper);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.32;
  color: var(--teal);
  letter-spacing: -0.005em;
}

/* ---------- Service-area Leaflet map ---------- */

.service-map {
  width: 100%;
  height: 320px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(251, 248, 242, 0.06);
  border: 1px solid rgba(251, 248, 242, 0.18);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.4);
}

/* Leaflet's own controls, themed for the deep-teal contact background */
.service-map .leaflet-control-attribution {
  background: rgba(251, 248, 242, 0.85) !important;
  color: var(--teal) !important;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px 0 0 0;
}
.service-map .leaflet-control-attribution a { color: var(--teal); }
.service-map .leaflet-control-zoom a {
  background: var(--paper);
  color: var(--teal);
  border: 1px solid rgba(13, 59, 60, 0.15);
}
.service-map .leaflet-control-zoom a:hover {
  background: var(--copper-soft);
  color: var(--teal);
}

/* Custom Lake Mary marker: a pulsing copper dot */
.service-marker {
  position: relative;
  width: 24px;
  height: 24px;
}
.service-marker .service-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 3px var(--paper), 0 4px 12px rgba(13, 59, 60, 0.4);
  z-index: 2;
}
.service-marker .service-marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: var(--copper);
  opacity: 0.5;
  animation: marker-pulse 2.4s ease-out infinite;
  z-index: 1;
}
@keyframes marker-pulse {
  0%   { transform: scale(0.5); opacity: 0.6; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .service-marker .service-marker-pulse { animation: none; opacity: 0; }
}

.service-map-fallback {
  margin: 0;
  padding: 24px;
  color: var(--paper);
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
}

/* ---------- Section rhythm: alternating warm/sage with hairlines ---------- */

.about           { background: var(--paper);   }
.experience      { background: var(--paper-2); }
.capabilities    { background: var(--paper);   }
.notes           { background: var(--paper-2); }

/* Visible copper divider between content sections (not Trust or Contact,
   which have their own colored backgrounds). Wider, full opacity, with a
   subtle gradient feathering at the ends for an editorial feel. */
.about + .experience::before,
.experience + .capabilities::before,
.capabilities + .notes::before {
  content: "";
  display: block;
  width: 96px;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--copper) 25%,
    var(--copper) 75%,
    transparent 100%
  );
  margin: -1px auto 56px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .mobile-cta,
  .hero-actions,
  .contact-actions,
  .notes-all,
  .footer-meta { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  main > section { padding: 24px 0; }
}

/* ============================================================
   vCard share - expandable scan-to-save QR + .vcf download + copy link.
   Implemented as <details>/<summary> so it collapses by default and
   reveals the QR + actions on demand. Native, accessible, no JS.
   Visually mirrors .resume-share so both blocks read as one strip.
   ============================================================ */

.vcard-share {
  max-width: 380px;
  margin: 12px auto 36px;
  padding: 0;                       /* summary + content own their own padding */
  border-radius: 16px;
  background: rgba(251, 248, 242, 0.05);
  border: 1px solid rgba(251, 248, 242, 0.18);
}

/* The always-visible header. Click toggles the QR/actions panel. */
.vcard-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  list-style: none;
  cursor: pointer;
  border-radius: 16px;
  user-select: none;
  transition: background 160ms ease;
}

/* Hide the default disclosure marker in all modern browsers. */
.vcard-summary::-webkit-details-marker { display: none; }
.vcard-summary::marker { content: ""; }

.vcard-summary:hover { background: rgba(251, 248, 242, 0.04); }

.vcard-summary-label {
  color: var(--copper-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.vcard-summary-chevron {
  width: 14px;
  height: 14px;
  color: var(--copper-soft);
  transition: transform 220ms ease;
}

.vcard-share[open] .vcard-summary-chevron { transform: rotate(180deg); }

/* Content panel: only shown when [open]. */
.vcard-content {
  padding: 4px 22px 22px;
  text-align: center;
}

.vcard-qr-frame {
  margin: 0 auto 14px;
  width: 152px;
  height: 152px;
  padding: 10px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow:
    0 6px 14px -8px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(13, 59, 60, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcard-qr {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 6px;
}

.vcard-share-hint {
  margin: 0 auto 16px;
  max-width: 32ch;
  color: var(--copper-soft);
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.vcard-share .resume-share-actions { justify-content: center; }
.vcard-share .resume-chip { min-width: 140px; }

/* ============================================================
   Format cluster: download chip + a small COPY-LINK overlay icon
   tucked into the chip's top-right corner. Keeps the chip itself
   uncluttered (single primary download action), while the copy
   action stays one tap away — visible but non-intruding.
   ============================================================ */

.format-cluster {
  position: relative;
  display: inline-block;
}

/* Copy-link button: tiny, semi-transparent, top-right corner of
   the chip. Brightens on hover/focus so the affordance is clear
   when users go looking for it without competing for attention
   the rest of the time. */
.copy-link-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 7px;
  background: rgba(251, 248, 242, 0.06);
  border: 1px solid rgba(251, 248, 242, 0.18);
  color: rgba(251, 248, 242, 0.6);
  cursor: pointer;
  font-family: inherit;
  opacity: 0.85;
  transition: opacity 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.copy-link-btn svg {
  width: 12px;
  height: 12px;
}

.copy-link-btn:hover,
.copy-link-btn:focus-visible {
  opacity: 1;
  background: rgba(251, 248, 242, 0.22);
  border-color: rgba(251, 248, 242, 0.5);
  color: var(--paper);
}

/* Within the vCard, the chip can be a bit wider than the résumé chips. */
.vcard-share .format-cluster .resume-chip { min-width: 140px; }

/* ============================================================
   Mobile-friendliness pass - hero portrait, touch targets,
   container padding, and the sticky mobile CTA.
   ============================================================ */

/* On small phones the hero felt cramped: portrait too small, text too tight,
   action buttons hard to tap. Tighten the rules here without disturbing the
   editorial feel on desktop. */
@media (max-width: 760px) {
  .hero {
    padding-top: clamp(36px, 8vw, 64px);
    padding-bottom: clamp(40px, 9vw, 72px);
  }
  .hero-grid {
    gap: 22px;
    padding-top: 0;
  }
  .hero-portrait {
    /* Center the portrait, give it real estate, remove the asymmetric margin
       that read as "off-center" on narrow screens. */
    margin: 0 auto;
    max-width: min(72vw, 320px);
    width: 100%;
    justify-self: center;
  }
  .hero-portrait::before {
    /* Shrink the offset block so it feels intentional, not crowded */
    top: 10px;
    left: 10px;
  }
  .hero-portrait img {
    /* On mobile, keep the natural 2:3 portrait - face higher in the frame */
    aspect-ratio: 2 / 3;
    object-position: 50% 22%;
    border-radius: var(--r-lg);
  }
  .portrait-cap { justify-content: center; gap: 10px; }
  .hero-headline { max-width: 32ch; }
  .hero-value { font-size: 16px; line-height: 1.6; }
  /* Larger tap targets - Apple HIG / Material both say 44–48px min */
  .hero-actions .btn,
  .contact-actions .btn { min-height: 44px; }
}

@media (max-width: 480px) {
  .hero-portrait { max-width: min(82vw, 280px); }
  .hero-mark { width: 200px; opacity: 0.06; }
  .hero-headline { font-size: clamp(17px, 4.5vw, 21px); }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* Stack contact actions full-width for thumb reach */
  .contact-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .contact-actions .btn { width: 100%; justify-content: center; }
}

/* Mobile sticky CTA - was 2 buttons, now 3. Keep them all visible without
   overflowing on a 360px viewport. */
.mobile-cta { gap: 8px; }
.mobile-cta .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .mobile-cta-save { display: none; } /* on the smallest phones, fall back to 2 buttons */
}


/* ============================================================
   Dental-themed page loader
   Shown until the page's data has rendered. Removed by JS via
   body.classList.add('is-loaded'). Falls back to fading after
   3.5s for users without JS.
   ============================================================ */

.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  z-index: 9999;
  transition: opacity 380ms ease, visibility 380ms ease;
  /* Auto-hide for no-JS users after 3.5s */
  animation: pageLoaderAutoHide 0s 3.5s forwards;
}

body.is-loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--teal);
}

.loader-tooth {
  width: 64px;
  height: auto;
  color: var(--teal);
  animation: toothFloat 1.6s ease-in-out infinite,
             toothPulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(13, 59, 60, 0.18));
  transform-origin: 50% 75%;
}

@keyframes toothFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(-2deg); }
}

@keyframes toothPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@keyframes pageLoaderAutoHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.page-loader-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-loader-dots span {
  display: inline-block;
  animation: dotBlink 1.4s infinite both;
}
.page-loader-dots span:nth-child(2) { animation-delay: 0.18s; }
.page-loader-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dotBlink {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

/* Reduced-motion users: no float / pulse, just a quiet fade */
@media (prefers-reduced-motion: reduce) {
  .loader-tooth { animation: none; opacity: 0.9; }
  .page-loader-dots span { animation: none; opacity: 0.6; }
}

/* ============================================================
   Contact form
   ============================================================ */

/* (Contact form styles removed - form was replaced by direct email + vCard.) */

/* ============================================================
   Comprehensive responsive pass
   Targets: 360px, 414px, 600px, 768px, 1024px, 1440px+
   Goals: no horizontal overflow, fluid typography, 44px+ tap targets,
          readable line lengths, calm spacing.
   ============================================================ */

/* Universal: prevent any element from causing horizontal scroll */
html, body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Container padding: a single source of truth */
main > section,
.notes-head,
.journal-head,
.article-shell,
.experience .timeline,
.capabilities .capability-grid,
.notes .notes-grid,
.contact-meta,
.resume-share,
.vcard-share,
.service-area {
  padding-left: clamp(20px, 5vw, 76px);
  padding-right: clamp(20px, 5vw, 76px);
}

/* Reset that double-padding for elements that already had natural inset */
.notes-head,
.journal-head,
.article-shell,
.contact-meta,
.resume-share,
.vcard-share,
.service-area {
  padding-left: 0;
  padding-right: 0;
}

/* Header navigation - wraps gracefully on tablet, hides on phone in
   favor of the sticky mobile-cta. The single-page anchors are reachable
   by scroll anyway. */
@media (max-width: 720px) {
  .site-header { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .site-header .nav { display: none; }
  .header-cta { padding: 9px 14px; font-size: 14px; }
  .brand-name { font-size: 15px; }
}

/* Trust strip grid: was 3-up rigid -> auto-fit with min cell width */
.trust-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }

/* About/experience/capabilities: ensure copy never exceeds readable line length */
.about-copy p,
.timeline-item .summary,
.capability-card p {
  max-width: 70ch;
}

/* Make the leaflet map height fluid */
.service-map {
  height: clamp(220px, 36vw, 360px);
}

/* Ensure button targets are at least 44x44 anywhere */
.btn,
.resume-chip,
.meta-copy {
  min-height: 44px;
}

/* Sticky mobile CTA: ensure it doesn't cover footer; main bottom padding */
main { padding-bottom: 80px; }
@media (min-width: 880px) { main { padding-bottom: 0; } }

/* Reserve room below the last section on mobile so the sticky CTA
   bar does not visually crop the service-area block. The CTA is
   ~64px tall (10px pad + 44px button + 10px pad) sitting 12px from
   the bottom edge, plus a small visual breathing buffer. */
@media (max-width: 879px) { main { padding-bottom: 96px; } }

/* The mobile CTA itself: only show on mobile widths (already styled, just confirm) */
.mobile-cta { display: flex; }
@media (min-width: 880px) { .mobile-cta { display: none; } }


/* ============================================================
   Motion enhancements (subtle, professional)
   - Hero text + portrait fade-up on first paint after the loader
   - vCard content fade-in when <details> opens
   - Copy-link success pulse on the corner overlay
   - Subtle button lift on the contact CTAs
   - Reduced-motion: collapses everything above to instant
   ============================================================ */

/* --- Hero entrance (one-shot on body.is-loaded) --- */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroPortraitIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-copy > *  { opacity: 0; transform: translateY(10px); }
.hero-portrait  { opacity: 0; transform: scale(0.97); }

body.is-loaded .hero-copy > * {
  animation: heroFadeUp 480ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
body.is-loaded .hero-portrait {
  animation: heroPortraitIn 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 100ms forwards;
}

/* Per-child stagger so the eyebrow lands first, then name, then headline,
   then value, then availability, then the action buttons. */
body.is-loaded .hero-copy > :nth-child(1) { animation-delay:  60ms; }
body.is-loaded .hero-copy > :nth-child(2) { animation-delay: 140ms; }
body.is-loaded .hero-copy > :nth-child(3) { animation-delay: 220ms; }
body.is-loaded .hero-copy > :nth-child(4) { animation-delay: 290ms; }
body.is-loaded .hero-copy > :nth-child(5) { animation-delay: 350ms; }
body.is-loaded .hero-copy > :nth-child(6) { animation-delay: 410ms; }

/* --- vCard content fade-in when the <details> opens --- */

@keyframes vcardFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vcard-share[open] .vcard-content {
  animation: vcardFadeIn 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* --- Copy-link success pulse --- */

@keyframes copyPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.copy-link-btn.is-copied {
  animation: copyPulse 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--paper);
  color: var(--teal);
  border-color: var(--paper);
  opacity: 1;
}

/* --- Contact CTAs: subtle lift on hover so the button feels tactile
       at the moment of decision (the contact section is where the user
       actually commits to clicking). --- */

.contact .btn-primary,
.contact .btn-ghost {
  transition: background 200ms ease, color 200ms ease,
              border-color 200ms ease, box-shadow 220ms ease,
              transform 220ms ease;
}

.contact .btn-primary:hover,
.contact .btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}

/* --- prefers-reduced-motion: kill all of the above for users who ask --- */

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-portrait {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .vcard-share[open] .vcard-content { animation: none !important; }
  .copy-link-btn.is-copied { animation: none !important; }
  .contact .btn-primary:hover,
  .contact .btn-ghost:hover { transform: none !important; box-shadow: none !important; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   LIQUID GLASS LAYER (appended)
   Tasteful glassmorphism over the existing cream/sage/teal palette.
   Faux-glass (translucent gradient + specular sheen) on the many
   cards for speed; real backdrop-filter only on the header, mobile
   bar, and ghost buttons (varied content behind them). Spring
   micro-interactions are GPU-only (transform/opacity) and disabled
   under prefers-reduced-motion at the end of this block.
   ============================================================ */

:root {
  --glass-spring:       cubic-bezier(.2, .8, .2, 1);
  --glass-fill:         linear-gradient(155deg, rgba(255,255,255,0.82), rgba(255,255,255,0.56));
  --glass-fill-hover:   linear-gradient(155deg, rgba(255,255,255,0.92), rgba(255,255,255,0.68));
  --glass-border:       rgba(255,255,255,0.70);
  --glass-sheen:        linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0) 42%);
  --glass-shadow:       0 1px 0 rgba(255,255,255,0.75) inset, 0 18px 42px -26px rgba(13,59,60,0.45), 0 2px 8px -5px rgba(13,59,60,0.12);
  --glass-shadow-hover: 0 1px 0 rgba(255,255,255,0.85) inset, 0 30px 60px -28px rgba(13,59,60,0.50), 0 8px 20px -10px rgba(13,59,60,0.18);
}

/* Ambient gradient mesh behind the page (soft teal / copper / sage glow). */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(40rem 40rem at 8% -12%, rgba(13,59,60,0.10), transparent 60%),
    radial-gradient(34rem 34rem at 110% 4%, rgba(191,107,85,0.07), transparent 55%),
    radial-gradient(44rem 44rem at 50% 120%, rgba(95,140,120,0.10), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* More refined frosted sticky header. */
.site-header {
  background: rgba(251,248,242,0.70);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255,255,255,0.55);
  box-shadow: 0 10px 34px -22px rgba(13,59,60,0.38);
}

/* Glass cards: trust cells, capability cards, note cards. */
.trust-cell,
.capability-card,
.note-card {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  transition: transform 210ms var(--glass-spring), box-shadow 210ms ease,
              border-color 210ms ease, background 210ms ease, opacity 380ms ease;
}
.trust-cell::before,
.capability-card::before,
.note-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-sheen);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}
.trust-cell:hover,
.capability-card:hover,
.note-card:hover {
  transform: translateY(-4px);
  background: var(--glass-fill-hover);
  border-color: rgba(255,255,255,0.90);
  box-shadow: var(--glass-shadow-hover);
}
.note-card:hover { transform: translateY(-4px) scale(1.006); }

/* Glossy primary button + frosted ghost button, with spring lift. */
.btn-primary {
  background: linear-gradient(135deg, var(--teal-2), var(--teal) 62%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 26px -14px rgba(13,59,60,0.65);
  transition: transform 180ms var(--glass-spring), box-shadow 180ms ease, filter 180ms ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.26) inset, 0 18px 32px -14px rgba(13,59,60,0.72);
  filter: saturate(112%) brightness(1.03);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(13,59,60,0.16);
  transition: transform 180ms var(--glass-spring), background 180ms ease, border-color 180ms ease;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.74);
  border-color: rgba(13,59,60,0.30);
}
.btn-ghost:active { transform: translateY(0); }

/* Frosted mobile action bar. */
.mobile-cta {
  background: rgba(251,248,242,0.68);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 -10px 34px -22px rgba(13,59,60,0.40);
}

@media (prefers-reduced-motion: reduce) {
  .trust-cell, .capability-card, .note-card,
  .btn-primary, .btn-ghost { transition: none !important; }
  .trust-cell:hover, .capability-card:hover, .note-card:hover,
  .btn-primary:hover, .btn-ghost:hover { transform: none !important; }
}

/* ============================================================
   REVIEW FIXES: no-JS safety, contrast, mobile perf, fallbacks
   ============================================================ */

/* Define the token a couple of older rules reference via fallback only. */
:root { --cream: #fbf8f2; }

/* CRITICAL: if JavaScript is disabled or fails to run, never show a blank
   page. The inline <script> in <head> removes .no-js the instant JS runs,
   so these only apply when scripting is unavailable. */
html.no-js .page-loader { display: none !important; }
html.no-js [data-reveal],
html.no-js .hero-copy > *,
html.no-js .hero-portrait { opacity: 1 !important; transform: none !important; }

/* Deepen copper on small kicker/meta text to clear WCAG AA (4.5:1). */
.section-kicker,
.note-card .meta,
.article-meta { color: #9c5238; }

/* Avoid fixed-background repaint jank on touch devices. */
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
}

/* Keep the header and mobile bar legible where backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(251, 248, 242, 0.97); }
  .mobile-cta  { background: rgba(251, 248, 242, 0.97); }
}

/* ============================================================
   PREMIUM POLISH (research-informed)
   Reading measure, layered teal-tinted depth, refined glass edges,
   calmer watermark, premium portrait frame, verify trust signal.
   ============================================================ */

/* Editorial reading measure (~60-68ch is the "expensive" sweet spot). */
.about-copy, .about-copy p { max-width: 62ch; }
.article-body, .article-body p { max-width: 68ch; }
.article-summary { max-width: 60ch; }
.notes-intro, .journal-head > p { max-width: 60ch; }

/* Calmer signature watermark (authentic content reads more premium than decoration). */
.hero-mark { opacity: 0.05; }

/* Refined glass cards: faint TEAL hairline (actually visible on cream) + a crisp
   white top light-catch + layered teal-tinted depth. Replaces the prior
   invisible white-on-cream border and single flat shadow. */
.trust-cell,
.capability-card,
.note-card {
  background: linear-gradient(156deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.64));
  border: 1px solid rgba(13, 59, 60, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 1px 2px rgba(13, 59, 60, 0.05),
    0 10px 20px -10px rgba(13, 59, 60, 0.14),
    0 26px 50px -30px rgba(13, 59, 60, 0.22);
}
.trust-cell:hover,
.capability-card:hover,
.note-card:hover {
  border-color: rgba(13, 59, 60, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 2px 4px rgba(13, 59, 60, 0.06),
    0 18px 32px -12px rgba(13, 59, 60, 0.18),
    0 36px 64px -30px rgba(13, 59, 60, 0.26);
}

/* Premium portrait frame: clean radius, hairline edge, layered depth. */
.hero-portrait img {
  border-radius: 18px;
  border: 1px solid rgba(13, 59, 60, 0.08);
  box-shadow:
    0 2px 6px rgba(13, 59, 60, 0.08),
    0 22px 46px -18px rgba(13, 59, 60, 0.30);
}

/* Subtle heading rhythm: a touch more air above section headings. */
.about > h2, .experience > h2, .capabilities > h2, .notes h2, .contact > h2 { margin-top: 0.1em; }

/* Consistent premium tracking on small labels. */
.section-kicker { letter-spacing: 0.14em; }

/* Primary-source license verification: read it as a deliberate trust signal. */
.trust-cell .verify-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #9c5238;
}
.trust-cell .verify-link:hover { color: var(--teal); }

/* Grounding deep-teal footer: a calm, premium finish that closes the page. */
.site-footer {
  background: linear-gradient(180deg, #0d3b3c 0%, #0b3233 100%);
  color: rgba(246, 243, 234, 0.82);
  border-top: 0;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.site-footer a { color: #f1cabb; }
.site-footer a:hover { color: #ffffff; }
.site-footer .footer-meta { color: rgba(246, 243, 234, 0.62); }

/* ============================================================
   LIQUID GLASS v2 — luminous, glossy, euphoric
   A bright aurora field behind transparent sections so the frosted
   glass cards actually refract color. Gloss highlights, soft glows,
   shine-sweep on the primary CTA. Kept light enough for AA text.
   ============================================================ */

/* 1. Luminous aurora field (light base keeps body text readable). */
body {
  background-color: #f7f3ec;
  background-image:
    radial-gradient(52rem 42rem at 10% -10%, rgba(13, 96, 92, 0.20), transparent 60%),
    radial-gradient(46rem 40rem at 104% 3%, rgba(221, 150, 120, 0.18), transparent 58%),
    radial-gradient(50rem 46rem at 50% 116%, rgba(108, 178, 150, 0.22), transparent 60%),
    radial-gradient(42rem 38rem at 90% 66%, rgba(150, 212, 206, 0.18), transparent 60%),
    radial-gradient(40rem 36rem at 2% 80%, rgba(244, 208, 150, 0.16), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* A slow, living shimmer drifting over the field. */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 34rem at 28% 26%, rgba(13, 96, 92, 0.12), transparent 60%),
    radial-gradient(36rem 32rem at 74% 64%, rgba(221, 150, 120, 0.12), transparent 60%),
    radial-gradient(34rem 30rem at 60% 18%, rgba(150, 212, 206, 0.12), transparent 60%);
  animation: auroraDrift 28s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* 2. Let the field show through the content sections (contact stays teal). */
.hero, .trust, .about, .experience, .capabilities, .notes { background: transparent; }

/* 3. Trust strip: gapped floating glass cards (no more crammed hairline grid). */
.trust-grid { gap: 16px; border-top: 0; border-bottom: 0; padding: 2px; }
.trust-cell { border: 1px solid rgba(255, 255, 255, 0.55) !important; border-radius: 20px !important; }

/* Real frosted glass over the colorful field. */
.trust-cell,
.capability-card,
.note-card {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.40));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 30px -14px rgba(13, 59, 60, 0.20),
    0 30px 60px -32px rgba(13, 59, 60, 0.28);
}

/* Glossy specular sweep across the top-left of each card. */
.trust-cell::before,
.capability-card::before,
.note-card::before {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 56%);
  opacity: 0.9;
}

/* Hover: lift, brighten, and bloom a soft mint glow. */
.trust-cell:hover,
.capability-card:hover,
.note-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 22px 42px -14px rgba(13, 59, 60, 0.24),
    0 42px 74px -34px rgba(13, 96, 92, 0.30),
    0 0 44px -10px rgba(150, 210, 205, 0.40);
}

/* 4. Glossy primary CTA with a shine-sweep on hover. */
.btn-primary {
  background: linear-gradient(150deg, #15605e 0%, #0d3b3c 72%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 10px 22px -10px rgba(13, 59, 60, 0.55),
    0 2px 6px rgba(13, 59, 60, 0.28);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -65%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 600ms ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 135%; }

/* Frosted ghost CTA. */
.btn-ghost {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(13, 59, 60, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 20px -10px rgba(13, 59, 60, 0.22);
}
.btn-ghost:hover {
  background: linear-gradient(150deg, rgba(21, 96, 94, 0.22), rgba(13, 59, 60, 0.16));
  border-color: rgba(13, 59, 60, 0.42);
  color: var(--teal);
}

/* 5. Glowing glass portrait frame. */
.hero-portrait img {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 26px 52px -18px rgba(13, 59, 60, 0.34),
    0 0 64px -16px rgba(150, 210, 205, 0.42);
}

/* 6. Richer frosted header + glossy availability pill. */
.site-header {
  background: rgba(250, 246, 239, 0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
.hero-availability {
  background: linear-gradient(150deg, rgba(231, 239, 231, 0.92), rgba(221, 231, 221, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 6px 16px -8px rgba(13, 59, 60, 0.2);
  backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn-primary::after { transition: none; }
}

/* ============================================================
   LIQUID GLASS v2.1 — more presence, glass panel for body text
   ============================================================ */

/* Richer, more luminous field with a glow that reaches the center. */
body {
  background-color: #f6f1e9;
  background-image:
    radial-gradient(56rem 46rem at 8% -8%, rgba(13, 96, 92, 0.24), transparent 60%),
    radial-gradient(50rem 44rem at 106% 2%, rgba(223, 150, 118, 0.22), transparent 58%),
    radial-gradient(54rem 50rem at 50% 120%, rgba(104, 180, 150, 0.26), transparent 60%),
    radial-gradient(46rem 42rem at 92% 72%, rgba(146, 214, 208, 0.22), transparent 60%),
    radial-gradient(44rem 40rem at 0% 84%, rgba(246, 206, 146, 0.20), transparent 60%),
    radial-gradient(64rem 54rem at 72% 38%, rgba(180, 222, 208, 0.16), transparent 66%);
}

/* "How I practice" becomes a floating frosted glass panel: protects the body
   copy at high contrast while letting the field behind it stay vivid. */
.about {
  width: min(920px, 92%);
  margin: clamp(48px, 7vw, 96px) auto;
  padding: clamp(32px, 5vw, 56px);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 24px 50px -26px rgba(13, 59, 60, 0.24),
    0 44px 84px -42px rgba(13, 96, 92, 0.24);
}

/* Brighter specular shine across the cards. */
.trust-cell::before,
.capability-card::before,
.note-card::before {
  background: linear-gradient(146deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.22) 26%, transparent 52%);
  opacity: 1;
}

/* ============================================================
   LIQUID GLASS v2.2 — dial up the glow and the glass
   ============================================================ */
body {
  background-color: #f4efe6;
  background-image:
    radial-gradient(56rem 46rem at 6% -8%, rgba(13, 110, 104, 0.32), transparent 60%),
    radial-gradient(50rem 44rem at 108% 0%, rgba(226, 150, 116, 0.30), transparent 58%),
    radial-gradient(56rem 52rem at 50% 122%, rgba(96, 184, 152, 0.34), transparent 60%),
    radial-gradient(48rem 44rem at 94% 74%, rgba(140, 218, 212, 0.30), transparent 60%),
    radial-gradient(46rem 42rem at -2% 86%, rgba(248, 206, 142, 0.26), transparent 60%),
    radial-gradient(66rem 56rem at 74% 36%, rgba(176, 224, 210, 0.22), transparent 66%);
}
body::before {
  background:
    radial-gradient(42rem 36rem at 26% 24%, rgba(13, 110, 104, 0.16), transparent 60%),
    radial-gradient(38rem 34rem at 76% 66%, rgba(226, 150, 116, 0.16), transparent 60%),
    radial-gradient(36rem 32rem at 58% 16%, rgba(140, 218, 212, 0.16), transparent 60%);
}
.trust-cell,
.capability-card,
.note-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.36));
  border-color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   LIQUID GLASS v2.3 — pushed vivid + iridescent glass edges
   (on-brand teal / mint / peach; body text stays protected by
   the glass panels, so the field can run hot)
   ============================================================ */
body {
  background-color: #f2ece2;
  background-image:
    radial-gradient(58rem 48rem at 4% -10%, rgba(10, 120, 112, 0.40), transparent 60%),
    radial-gradient(52rem 46rem at 110% -2%, rgba(232, 150, 112, 0.38), transparent 58%),
    radial-gradient(58rem 54rem at 50% 124%, rgba(78, 188, 150, 0.44), transparent 60%),
    radial-gradient(50rem 46rem at 96% 76%, rgba(120, 222, 214, 0.40), transparent 60%),
    radial-gradient(48rem 44rem at -4% 88%, rgba(250, 206, 138, 0.34), transparent 60%),
    radial-gradient(70rem 60rem at 76% 34%, rgba(150, 224, 208, 0.28), transparent 66%);
}
body::before {
  background:
    radial-gradient(44rem 38rem at 24% 22%, rgba(10, 120, 112, 0.22), transparent 60%),
    radial-gradient(40rem 36rem at 78% 68%, rgba(232, 150, 112, 0.22), transparent 60%),
    radial-gradient(38rem 34rem at 58% 14%, rgba(120, 222, 214, 0.22), transparent 60%);
}

/* Brighter top shine. */
.trust-cell::before,
.capability-card::before,
.note-card::before {
  background: linear-gradient(144deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.30) 24%, transparent 50%);
}

/* Iridescent gradient edge (1px ring via mask). */
.trust-cell::after,
.capability-card::after,
.note-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(120, 222, 214, 0.95), rgba(255, 255, 255, 0.25) 42%, rgba(232, 150, 112, 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.75;
}
.trust-cell:hover::after,
.capability-card:hover::after,
.note-card:hover::after { opacity: 1; }

/* Stronger, more colorful hover bloom. */
.trust-cell:hover,
.capability-card:hover,
.note-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 24px 46px -14px rgba(13, 59, 60, 0.26),
    0 46px 80px -36px rgba(10, 120, 112, 0.34),
    0 0 58px -8px rgba(120, 222, 214, 0.55);
}

/* Brighter portrait bloom. */
.hero-portrait img {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 28px 56px -18px rgba(13, 59, 60, 0.36),
    0 0 80px -14px rgba(120, 222, 214, 0.5);
}