/* ==========================================================================
   Skincare by Dr. Kerri — design system
   Hand-authored. No frameworks. Mobile-first. iOS Safari hardened.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Times New Roman', Georgia, serif;
  --font-body: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  --ink:      #221c19;
  --ink-2:    #574c45;
  --ink-3:    #8a7c72;
  --bg:       #fcfaf7;
  --bg-2:     #f6efe8;
  --bg-3:     #efe4d9;
  --surface:  #ffffff;
  --line:     #e6dace;
  --line-2:   #d6c6b6;
  --accent:   #a56b47;
  --accent-2: #8a5636;
  --accent-soft: #f3e6da;
  --focus:    #2f6f8f;
  /* Text drawn on top of --accent (primary buttons, badges). A token rather
     than a hard-coded #fff, so a theme with a pale accent can flip it. */
  --on-accent: #ffffff;
  /* Pre-mixed accent at low alpha. color-mix() is Safari 16.2+; a token keeps
     the form focus ring working all the way back. */
  --ring: rgba(165,107,71,.22);

  --shadow-sm: 0 1px 2px rgba(45,32,24,.05), 0 2px 8px rgba(45,32,24,.04);
  --shadow-md: 0 2px 6px rgba(45,32,24,.06), 0 12px 32px rgba(45,32,24,.07);
  --shadow-lg: 0 4px 12px rgba(45,32,24,.07), 0 24px 60px rgba(45,32,24,.10);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --pad: clamp(1.25rem, 5vw, 2rem);
  --maxw: 1180px;
  --maxw-prose: 68ch;
  --section-y: clamp(3.5rem, 9vw, 7.5rem);

  --header-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:      #f3ece5;
    --ink-2:    #c4b5a9;
    --ink-3:    #9a8b7f;
    --bg:       #17120f;
    --bg-2:     #1f1815;
    --bg-3:     #29201b;
    --surface:  #1f1815;
    --line:     #362b24;
    --line-2:   #493a31;
    --accent:   #d99b6f;
    --accent-2: #eab98f;
    --accent-soft: #2a1f18;
    --focus:    #7fc0e0;
    --on-accent: #1a120c;
    --ring: rgba(217,155,111,.28);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --ink:      #f3ece5;
  --ink-2:    #c4b5a9;
  --ink-3:    #9a8b7f;
  --bg:       #17120f;
  --bg-2:     #1f1815;
  --bg-3:     #29201b;
  --surface:  #1f1815;
  --line:     #362b24;
  --line-2:   #493a31;
  --accent:   #d99b6f;
  --accent-2: #eab98f;
  --accent-soft: #2a1f18;
  --focus:    #7fc0e0;
  --on-accent: #1a120c;
  --ring: rgba(217,155,111,.28);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;   /* iOS: stop font inflation on rotate */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: clip;             /* guard against any accidental h-scroll */
  min-height: 100svh;
}
/* overflow on the root propagates to the viewport and the root itself stays
   `visible`, so the sticky header keeps working. Setting it on <body> as well
   would make the body a scroll container and break that. */
@supports not (overflow: clip) { html { overflow-x: hidden; } }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
.card--link, .card--link:hover { text-decoration: none; color: inherit; }
.card--link h3 { text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Type scale ---------- */
.t-hero   { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.028em; }
.t-h1     { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem); }
.t-h2     { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); }
.t-h3     { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.t-lead   { font-size: clamp(1.075rem, 1.01rem + .35vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.t-small  { font-size: .9rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
  display: block;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 820px; }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--bg-2); }
.section--deep { background: var(--bg-3); }
.prose { max-width: var(--maxw-prose); }
.prose > * + * { margin-top: 1.05em; }
.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;                 /* comfortable tap target */
  padding: .8rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: .012em;
  text-decoration: none;
  text-align: center;
  touch-action: manipulation;       /* kill iOS 300ms tap delay */
  -webkit-appearance: none;
  appearance: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-2); box-shadow: var(--shadow-md); }

.btn--ghost {
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn--light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--light:hover { box-shadow: var(--shadow-md); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row.center { justify-content: center; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);                                    /* Safari < 16.2 */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease);
  padding-top: env(safe-area-inset-top);
}
@supports not (backdrop-filter: blur(1px)) { .header { background: var(--bg); } }
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 550;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
  flex-shrink: 0;
}
.brand__mark {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: block;
  border-radius: 9px;      /* matches the mark's own corner radius at this size */
}
.brand__text small {
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .1rem;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; }
.nav__link {
  display: block;
  padding: .55rem .85rem;
  border-radius: var(--r-pill);
  font-size: .93rem;
  font-weight: 480;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--bg-2); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }

.header__cta { display: none; }

@media (min-width: 940px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
}

/* Mobile menu button */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-right: -.4rem;
  border-radius: var(--r-sm);
  touch-action: manipulation;
  color: var(--ink);
}
.nav-toggle__bars { position: relative; width: 22px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6.1px; }
.nav-toggle__bars span:nth-child(3) { top: 12.2px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

/* Declared after .nav-toggle's own display so source order does not undo it. */
@media (min-width: 940px) {
  .header .nav-toggle { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
  overscroll-behavior: contain;
}
.mobile-nav.is-open { visibility: visible; opacity: 1; }
@media (min-width: 940px) { .mobile-nav { display: none !important; } }

.mobile-nav__top {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--pad);
}
.mobile-nav__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem var(--pad) 2.5rem;
}
.mobile-nav__list { list-style: none; padding: 0; }
.mobile-nav__list li + li { border-top: 1px solid var(--line); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem .15rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  touch-action: manipulation;
}
.mobile-nav__link[aria-current="page"] { color: var(--accent); }
.mobile-nav__link svg { color: var(--ink-3); flex: 0 0 auto; }
.mobile-nav__foot { margin-top: 2rem; display: grid; gap: .7rem; }
.mobile-nav__meta { margin-top: 1.75rem; color: var(--ink-2); font-size: .93rem; }
.mobile-nav__meta a { color: var(--ink-2); }

body.nav-open { overflow: hidden; }

/* Skip link */
.skip {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  transition: transform .2s var(--ease);
  z-index: 200;
  padding: .8rem 1.2rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { transform: translateY(0); }

/* ---------- Hero ----------
   The whole hero is sized to fit the first screen with no scrolling, on phones
   and on desktop. Two things make that work:
     * 100svh (small viewport height) — on iOS Safari 100vh is the height with
       the toolbars *hidden*, so a 100vh hero is always taller than what you can
       actually see on load. svh is the visible-with-toolbars height.
     * the photo is a flexible grid row (minmax(0,1fr)) with object-fit:cover,
       so it absorbs whatever space the copy leaves rather than forcing overflow.
   ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bg-2); }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80ch 60ch at 12% -10%, var(--accent-soft), transparent 62%),
    radial-gradient(60ch 50ch at 105% 108%, var(--accent-soft), transparent 60%);
  background:
    radial-gradient(80ch 60ch at 12% -10%, color-mix(in srgb, var(--accent-soft) 75%, transparent), transparent 62%),
    radial-gradient(60ch 50ch at 105% 108%, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 60%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  /* height, not min-height: a minimum lets the grid grow past the screen,
     which is exactly what we are trying to prevent. */
  height: calc(100svh - var(--header-h));
  min-height: 440px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(1rem, 2.6vh, 2.25rem);
  padding-block: clamp(1rem, 2.5vh, 2.25rem);
}
/* Fallback for engines without svh (older iOS): dvh, then vh. */
@supports not (height: 100svh) {
  .hero__inner { height: calc(100dvh - var(--header-h)); }
}
@supports not (height: 100dvh) {
  .hero__inner { height: calc(100vh - var(--header-h)); }
}

.hero__title { margin-bottom: .75rem; }
.hero__title em { font-style: italic; color: var(--accent); }
.hero__text {
  max-width: 34rem;
  margin-bottom: 1.25rem;
  /* Trim the intro to what fits rather than letting it push the photo off. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.hero__cta { margin-bottom: 1rem; }
.hero__cta .btn-row { flex-wrap: nowrap; }
.hero__cta .btn { flex: 1 1 auto; min-width: 0; }
.hero__note {
  font-size: .84rem;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
.hero__note span { display: inline-flex; align-items: center; gap: .35rem; }

.hero__media { position: relative; min-height: 0; }
.hero__media picture { display: block; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  object-position: center 32%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.hero__badge {
  position: absolute;
  left: clamp(-.5rem, -1vw, 0rem);
  bottom: clamp(.75rem, 2.5vh, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 17.5rem;
}
.hero__badge strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.hero__badge span { font-size: .82rem; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }

/* --- Short viewports: shed the optional bits before the photo gets squeezed --- */
@media (max-height: 760px) {
  .hero__title { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem); }
  .hero__text { -webkit-line-clamp: 4; line-clamp: 4; margin-bottom: 1rem; }
  .hero__note { display: none; }
  .hero__badge { padding: .55rem .8rem; }
  .hero__badge strong { font-size: 1.35rem; }
  .hero__badge span { font-size: .76rem; }
}
@media (max-height: 640px) {
  .hero__title { font-size: clamp(1.85rem, 1.2rem + 2.8vw, 2.8rem); margin-bottom: .5rem; }
  .hero__text { -webkit-line-clamp: 3; line-clamp: 3; }
  .hero__badge { display: none; }
  .hero__inner { gap: .85rem; }
}
/* Very short and wide (landscape phone): the photo stops earning its space. */
@media (max-height: 560px) and (orientation: landscape) {
  /* A landscape phone has no room for a photo. Headline and a button, nothing
     else. min-height must be released here or it beats the fixed height. */
  .hero__inner {
    grid-template-rows: auto;
    min-height: 0;
    gap: .6rem;
    padding-block: .75rem;
  }
  .hero__media,
  .hero__text,
  .hero__note { display: none; }
  .hero__title { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.3rem); margin-bottom: .4rem; }
  .hero__cta { margin-bottom: 0; }
  .hero__copy .eyebrow { margin-bottom: .45rem; }
}

/* --- Desktop: side by side, still capped to one screen --- */
@media (min-width: 940px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(3rem, 5vw, 5rem);
    padding-block: clamp(1.5rem, 4vh, 3.5rem);
  }
  .hero__copy { align-self: center; }
  /* stretch, not centre: a centred track sizes to content, which collapsed the
     photo to its min-height instead of filling the column. */
  .hero__media { align-self: stretch; min-height: 0; }
  .hero__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
  .hero__title { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.6rem); }
  .hero__note { display: flex; }
  .hero__badge { display: flex; }
}
@media (min-width: 940px) and (max-height: 780px) {
  .hero__title { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.4rem); }
  .hero__text { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 23px; height: 23px; }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-2); font-size: .975rem; }
.card__meta {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .84rem;
  color: var(--ink-3);
}
.card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.card__more { margin-top: auto; padding-top: 1.15rem; font-size: .9rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.card--link .stretched::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Feature rows ---------- */
.feature { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature--flip .feature__media { order: -1; }
}
.feature__media img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; }
.feature + .feature { margin-top: clamp(3rem, 7vw, 5.5rem); }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.steps li { counter-increment: step; position: relative; padding-top: 3.1rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  width: 2.3rem; height: 2.3rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.steps h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.steps p { color: var(--ink-2); font-size: .95rem; }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 500; color: var(--accent); line-height: 1; }
.stat span { display: block; margin-top: .5rem; font-size: .92rem; color: var(--ink-2); }

/* ---------- Quote ---------- */
.quote { text-align: center; max-width: 46rem; margin-inline: auto; }
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.015em;
}
.quote cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Before / after ---------- */
.ba { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 860px) { .ba { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(2rem,4vw,3.5rem); } }
.ba__figure { margin: 0; }
.ba__figure img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; }
.ba__figure figcaption { margin-top: .9rem; font-size: .86rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- FAQ ----------
   The summary keeps its native `display`. WebKit stops treating a <summary>
   as the disclosure control the moment its display is changed (flex, grid,
   block), which made every question unopenable on iOS Safari. All of the
   layout therefore happens on the inner .faq__q span, and the summary itself
   only carries padding and the hit area. Do not put `display` back here. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 1.25rem .2rem;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
  font-weight: 500;
  line-height: 1.35;
  transition: color .18s var(--ease);
}
.faq summary:hover .faq__q { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.faq__q::after {
  content: '';
  flex: 0 0 auto;
  width: 13px; height: 13px;
  margin-top: .42em;
  border-right: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq details[open] .faq__q::after { transform: rotate(-135deg); }
.faq__body { padding: 0 .2rem 1.4rem; max-width: var(--maxw-prose); color: var(--ink-2); }
.faq__body > * + * { margin-top: .8rem; }

/* ---------- Price list ---------- */
.pricelist { list-style: none; padding: 0; }
.pricelist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  padding: .95rem 0;
  border-bottom: 1px dashed var(--line);
}
.pricelist .p-name { font-weight: 550; }
.pricelist .p-dur { color: var(--ink-3); font-size: .88rem; margin-left: auto; }

/* ---------- Contact / forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .87rem; font-weight: 600; letter-spacing: .01em; }
.field .hint { font-size: .82rem; color: var(--ink-3); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%;
  font-size: 16px;              /* iOS: <16px triggers zoom-on-focus */
  line-height: 1.5;
  padding: .8rem .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a7c72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; }
.field--error input, .field--error textarea, .field--error select { border-color: #c0392b; }
.field__err { font-size: .82rem; color: #c0392b; min-height: 0; }
:root[data-theme="dark"] .field__err, :root:not([data-theme="light"]) .field__err { color: #f0857a; }

.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__status { border-radius: var(--r-md); padding: 1rem 1.15rem; font-size: .95rem; display: none; }
.form__status.is-ok { display: block; background: var(--accent-soft); border: 1px solid var(--line-2); }
.form__status.is-err { display: block; background: #fdecea; border: 1px solid #f5c2bd; color: #8c2118; }
:root[data-theme="dark"] .form__status.is-err, :root:not([data-theme="light"]) .form__status.is-err { background: #2e1815; border-color: #5a2a24; color: #f0a89f; }

/* ---------- Contact panel ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.info-list { list-style: none; padding: 0; display: grid; gap: 1.35rem; }
.info-list li { display: flex; gap: .95rem; align-items: flex-start; }
.info-list .ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
}
.info-list .ic svg { width: 19px; height: 19px; }
.info-list dt, .info-list .lbl {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem;
}
.info-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.info-list a:hover { color: var(--accent); border-color: var(--accent); }

.hours { list-style: none; padding: 0; font-size: .96rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.hours li:last-child { border-bottom: 0; }
.hours .d { color: var(--ink-2); }
.hours .h { font-variant-numeric: tabular-nums; }

.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--bg-2);
  aspect-ratio: 16 / 11;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--bg-3);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  border: 1px solid var(--line);
}
.cta-band p { max-width: 44ch; margin-inline: auto; color: var(--ink-2); }

/* ---------- Notice / disclaimer ---------- */
.notice {
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.1rem 1.35rem;
  font-size: .93rem;
  color: var(--ink-2);
}
.notice strong { color: var(--ink); }

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom));
  margin-top: auto;
}
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.footer h4 { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer__about { color: var(--ink-2); font-size: .95rem; max-width: 32ch; }
.footer__bottom {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--ink-3);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }

/* ---------- Sticky mobile action bar ---------- */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  padding: .65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));
  background: var(--bg);                                    /* Safari < 16.2 */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .actionbar { background: var(--bg); } }
.actionbar.is-visible { transform: translateY(0); }
.actionbar .btn { min-height: 46px; padding-inline: 1rem; font-size: .92rem; }
@media (min-width: 940px) { .actionbar { display: none; } }
body.has-actionbar { padding-bottom: 0; }
@media (max-width: 939px) { body.has-actionbar .footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .85rem; color: var(--ink-3); padding-top: 1.5rem; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--line-2); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* ---------- Page header ---------- */
.pagehead { background: var(--bg-2); border-bottom: 1px solid var(--line); }
/* The element carries both .wrap and .pagehead__inner. Narrowing max-width
   here would re-centre it inside the viewport, leaving the heading indented
   differently from the breadcrumb and body content directly beneath it.
   Keep the container on the 1180px grid and cap the measure on the text. */
.pagehead__inner { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }
.pagehead__inner > h1,
.pagehead__inner > p,
.pagehead__inner > .eyebrow { max-width: 52rem; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.chips li {
  font-size: .84rem;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  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; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3rem); }
.muted { color: var(--ink-2); }
.tnum { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Motion layer
   Everything here is transform/opacity only — no layout-triggering properties,
   so it stays at 60fps on an iPhone. All of it collapses under
   prefers-reduced-motion via the global rule near the top of this file.
   ========================================================================== */

/* Entrance for above-the-fold content. Runs immediately rather than waiting
   on IntersectionObserver, so the hero never flashes empty. */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseSoft {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* fill-mode backwards, and NOT opacity:0 in the base rule.
   The base style has to be the visible one: if the animation never runs — a
   throttled tab, a suspended paint, an engine that drops the declaration — an
   opacity:0 base leaves above-the-fold content permanently invisible. With
   backwards, the hidden state exists only inside the animation itself, so the
   worst case is that content simply appears without animating. */
.js .enter {
  animation: rise .85s var(--ease) backwards;
}
.js .enter--soft { animation-name: riseSoft; animation-duration: .7s; }
.js .enter--fade { animation-name: fade; }
.js .enter--scale { animation-name: scaleIn; animation-duration: .95s; }

.js .enter.d1 { animation-delay: .07s; }
.js .enter.d2 { animation-delay: .14s; }
.js .enter.d3 { animation-delay: .21s; }
.js .enter.d4 { animation-delay: .30s; }
.js .enter.d5 { animation-delay: .40s; }
.js .enter.d6 { animation-delay: .52s; }

@media (prefers-reduced-motion: reduce) {
  .js .enter { animation: none !important; }
}

/* Hard guarantee. site.js stamps this on every .enter shortly after load, so
   entrance animation is strictly decorative: if it stalls or never starts, the
   content is still there. Above-the-fold copy must never depend on an
   animation completing. */
.enter.enter-done {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Underline that draws in on hover — pure transform, no reflow. */
.link-u {
  position: relative;
  text-decoration: none;
  color: var(--accent);
  font-weight: 550;
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .32s var(--ease);
}
.link-u:hover::after, .link-u:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Card media zoom on hover */
.zoomwrap { overflow: hidden; border-radius: var(--r-lg); }
.zoomwrap img {
  transition: transform .7s var(--ease);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .card--link:hover .zoomwrap img,
  a:hover > .zoomwrap img { transform: scale(1.045); }
}

/* Arrow nudge inside links/buttons */
.card__more svg, .btn svg.arw { transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card--link:hover .card__more svg,
  .btn:hover svg.arw { transform: translateX(3px); }
}

/* Slow ambient drift behind the hero. GPU-only, and it pauses entirely
   when the user prefers reduced motion. */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2.5%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.hero__glow {
  position: absolute;
  z-index: 0;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  animation: drift 26s ease-in-out infinite;
  will-change: transform;
}
.hero__glow--a { top: -18%; left: -12%; }
.hero__glow--b { bottom: -25%; right: -14%; animation-duration: 34s; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .hero__glow { animation: none; } }

/* Reveal variants used by the IntersectionObserver in site.js */
.reveal--left  { transform: translate3d(-22px, 0, 0); }
.reveal--right { transform: translate3d(22px, 0, 0); }
.reveal--scale { transform: scale(.97); }
.reveal--left.is-in, .reveal--right.is-in, .reveal--scale.is-in { transform: none; }

/* A thin progress bar showing how far down the page you are. */
.readbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 80;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  pointer-events: none;
  opacity: .85;
}
@media (prefers-reduced-motion: reduce) { .readbar { display: none; } }

/* Buttons get a soft sheen sweep on hover (desktop pointers only). */
@media (hover: hover) and (pointer: fine) {
  .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
  .btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease);
  }
  .btn--primary:hover::before { transform: translateX(120%); }
}

/* ---------- Service list (services page) ---------- */
.svc-list { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.svc {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.svc:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 900px) {
  .svc { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .svc__head { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
.svc__dur {
  margin-top: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: var(--ink-3);
}
.svc__dur svg { width: 17px; height: 17px; }
.svc__body h3 { margin-bottom: .5rem; }

/* ---------- Image fallback panel ---------- */
.img-fallback {
  width: 100%;
  border-radius: var(--r-lg);
  background:
    linear-gradient(140deg,
      var(--bg-3) 0%,
      color-mix(in srgb, var(--accent-soft) 80%, var(--bg-2)) 45%,
      var(--bg-2) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .img-fallback { background: linear-gradient(140deg, var(--bg-3), var(--bg-2)); }
}

/* ---------- Footer social icons ---------- */
.footer ul[style] a { display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); }
.footer ul[style] a:hover { border-color: var(--accent); color: var(--accent); }
.footer ul[style] svg { width: 19px; height: 19px; }

/* ---------- Header CTA icon sizing ---------- */
.header__cta svg, .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mobile-nav__foot .btn svg { width: 18px; height: 18px; }
.info-list .lbl { display: block; }

/* ---------- Icon sizing per component (overrides the 1.15em default) ---------- */
.card__icon svg      { width: 23px; height: 23px; }
.info-list .ic svg   { width: 19px; height: 19px; }
.hero__note svg      { width: 15px; height: 15px; color: var(--accent); }
.svc__dur svg        { width: 16px; height: 16px; }
.footer ul[style] svg{ width: 19px; height: 19px; }
.btn svg             { width: 18px; height: 18px; }
.card__more svg      { width: 16px; height: 16px; }
.mobile-nav__link svg{ width: 18px; height: 18px; }


/* Footer column labels are headings in the footer landmark (h2 keeps the
   document outline gap-free); this preserves their small-caps appearance. */
.footer__h {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* ---------- Announcement bar (optional, toggled from /admin) ---------- */
.announce {
  background: var(--accent);
  color: var(--on-accent);
  font-size: .88rem;
  line-height: 1.4;
  padding-top: env(safe-area-inset-top);
}
:root[data-theme="dark"] .announce { color: #1a120c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .announce { color: #1a120c; }
}
.announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1rem;
  padding-block: .6rem;
  text-align: center;
}
.announce__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.announce__link svg { width: 14px; height: 14px; }
/* The header is sticky; with a bar above it the hero must lose that height too. */
body.has-announce .hero__inner,
body:has(.announce) .hero__inner {
  height: calc(100svh - var(--header-h) - var(--announce-h, 40px));
}

/* ---------- Price list (/services) ----------
   A menu, not a grid of cards: the point of this page is that you can read
   down one column and see every treatment and what it costs. The price is a
   separate grid column so the figures line up regardless of name length, and
   the name is only a link when the treatment has a page worth opening. */
.menu { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
.menu__group { display: grid; gap: 1rem; }
.menu__head {
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--line);
  color: var(--ink-1, inherit);
}
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.menu__item:last-child { border-bottom: 0; }
.menu__ico { color: var(--accent); align-self: center; }
.menu__ico svg { width: 20px; height: 20px; display: block; }
.menu__text { display: grid; gap: .3rem; min-width: 0; }
.menu__name { font-size: 1.06rem; font-weight: 600; }
.menu__note { font-size: .9rem; color: var(--ink-3); }
.menu__price {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu__link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.menu__link:hover { color: var(--accent); }
.menu__arrow { display: inline-flex; color: var(--accent); }
.menu__arrow svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover .menu__arrow svg { transform: translateX(3px); }
}
/* On a narrow screen the price drops under the name rather than squeezing it. */
@media (max-width: 460px) {
  .menu__item { grid-template-columns: auto minmax(0, 1fr); }
  .menu__price { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Meet Dr. Kerri — the introduction directly under the home-page hero
   ========================================================================== */
.meet { position: relative; overflow: clip; }
.meet__inner { align-items: center; }
.meet__media { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; }
@media (min-width: 900px) {
  .meet__media { max-width: none; margin-inline: 0; }
  .meet__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 5rem); }
}
.meet__frame { position: relative; }
.meet__frame img { display: block; width: 100%; height: auto; object-fit: cover; }
/* A quiet accent edge behind the portrait, offset so it reads as a frame and
   not as a second photograph. Purely decorative — sits under the image. */
.meet__media::before {
  content: '';
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  z-index: 0;
  pointer-events: none;
}
.meet__frame { z-index: 1; }
.meet__copy .prose p { color: var(--ink-2); }
.meet__points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: .7rem;
}
.meet__points li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .975rem;
  line-height: 1.45;
  color: var(--ink);
}
.meet__tick {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  margin-top: .05rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
}
.meet__tick svg { width: .9rem; height: .9rem; stroke-width: 2.2; }
@supports not (overflow: clip) { .meet { overflow: hidden; } }

/* ==== Gallery ==== */
/* Client photo gallery: the home-page strip, the /gallery grid and filters,
   and the lightbox. Theme tokens only, so the owner's palette and dark mode
   carry through; the one literal is the lightbox scrim fallback for engines
   without color-mix(). */
.gallery__strip {
  display: grid;
  gap: clamp(.6rem, 2vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .gallery__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery__grid {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (min-width: 640px) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery__cell { margin: 0; min-width: 0; }
.gallery__cell[hidden] { display: none; }

.gallery__tile,
.gallery__item {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-3);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery__tile picture,
.gallery__item picture { width: 100%; height: 100%; }
.gallery__tile img,
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .gallery__tile:hover, .gallery__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .gallery__tile:hover img, .gallery__item:hover img { transform: scale(1.04); }
}
.gallery__tile:focus-visible,
.gallery__item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gallery__item:target { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .gallery__tile, .gallery__item, .gallery__tile img, .gallery__item img { transition: none; }
}

.gallery__caption {
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.gallery__filters[hidden] { display: none; }
.gallery__filter {
  min-height: 44px;
  min-width: 44px;
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.gallery__filter:hover { border-color: var(--accent); color: var(--accent); }
.gallery__filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gallery__filter:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.gallery__empty { color: var(--ink-3); }
.gallery__empty[hidden] { display: none; }
.gallery__disclaimer { color: var(--ink-3); max-width: var(--maxw-prose); }

/* Lightbox. The <dialog> itself is a full-screen transparent layer; the
   panel inside is the surface, so a click on the scrim closes it. */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .78); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .lightbox::backdrop { background: color-mix(in srgb, var(--ink) 82%, transparent); }
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100% - 2 * var(--pad), 1180px);
  max-height: calc(100% - 2 * var(--pad));
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: .75rem .75rem 1rem;
  box-sizing: border-box;
}
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; max-height: 100%; }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--bg-3);
}
.lightbox__caption {
  margin-top: .75rem;
  padding-inline: 3.25rem;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
  max-width: 60ch;
}
.lightbox__caption:empty { display: none; }
.lightbox__count { position: absolute; left: 1rem; bottom: .9rem; font-size: .78rem; color: var(--ink-3); letter-spacing: .04em; }
.lightbox__btn {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lightbox__btn[disabled] { opacity: .35; cursor: default; }
.lightbox__close { top: -.25rem; right: -.25rem; transform: translate(50%, -50%); }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: -.25rem; transform: translate(-50%, -50%); }
.lightbox__next { right: -.25rem; transform: translate(50%, -50%); }
@media (max-width: 640px) {
  .lightbox__panel { max-width: calc(100% - 1.5rem); padding: .5rem .5rem 2.25rem; }
  .lightbox__close { top: .5rem; right: .5rem; transform: none; }
  .lightbox__prev { left: .5rem; top: auto; bottom: .5rem; transform: none; }
  .lightbox__next { right: .5rem; top: auto; bottom: .5rem; transform: none; }
  .lightbox__count { left: 50%; bottom: 1.2rem; transform: translateX(-50%); }
  .lightbox__caption { padding-inline: .25rem; }
  .lightbox__img { max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); }
}
.lightbox .sr-only, .gallery .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Scroll lock while the lightbox is open (body is fixed at the current
   offset; site.js restores scrollY without animation on close). */
body.lightbox-open { position: fixed; width: 100%; overflow: hidden; }
/* ==== /Gallery ==== */

/* Owner-uploaded brand mark (an <img> in place of the camellia symbol). */
img.brand__mark { object-fit: cover; background: transparent; }