/* ==========================================================================
   AGELESS MEDICAL AESTHETICS — Page & component styles
   Loaded after brand.css. Depends on its custom properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* The approved design's hero is a near-white panel carrying one very large,
   light-weight, letter-spaced gold headline. The only departure requested was
   to split it: copy on the left, portrait on the right. */
.hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FA 62%, #E7ECF1 100%);
  border-bottom: 1px solid var(--silver-mid);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-5), 5vw, var(--s-8));
  align-items: center;
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
}

.hero__title {
  margin-bottom: var(--s-5);
  font-size: clamp(2.1rem, 5.4vw, 3.65rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* The approved design breaks the headline in exactly three lines. Those breaks
   are set in the markup and honoured from the tablet width up; below that the
   column is too narrow for them, so they are dropped and it wraps naturally. */
@media (max-width: 719px) { .hero__title br { display: none; } }
.hero__sub {
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  color: var(--text-soft);
  max-width: 52ch;
  margin-bottom: var(--s-6);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  font-size: 0.86rem; color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__meta svg { width: 15px; height: 15px; color: var(--gold-dark); flex: 0 0 auto; }

/* Portrait frame — thin gold rule offset behind the image */
.hero__media { position: relative; }
.hero__media::before {
  content: '';
  position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.hero__media img {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(28, 36, 50, 0.16);
  background: var(--silver-light);
}
@media (max-width: 899px) {
  .hero__media::before { inset: 12px -12px -12px 12px; }
  .hero__media img { aspect-ratio: 4 / 3; object-position: center 25%; }
}

/* --------------------------------------------------------------------------
   Trust strip (social proof + credentials)
   -------------------------------------------------------------------------- */
.trust-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-strip__inner {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: var(--s-6);
}
/* This `display: none` MUST stay above the media query. It used to sit below it
   at equal specificity, so it won on source order and the divider was hidden at
   every width — which left the three-column grid with only two in-flow items,
   dropping the credentials list into the 1px divider TRACK. The list computed to
   1px wide, every label wrapped one word per line, and the icons collapsed to
   nothing. It read as "the credentials are stacked vertically". */
.trust-strip__divider { display: none; }
@media (min-width: 800px) {
  .trust-strip__inner { grid-template-columns: auto 1px 1fr; gap: var(--s-7); }
  .trust-strip__divider { display: block; background: var(--line); align-self: stretch; }
}
.trust-strip__mark { display: flex; justify-content: center; }
.trust-strip__mark img { width: 118px; }

/* Stacked on small screens, then the three credentials sit side by side from the
   same 800px breakpoint the logo/divider layout uses. Explicit rather than
   auto-fit: auto-fit derives the count from the available width, which wrapped
   them 2-then-1 in the band between 800px and ~1000px. */
.credentials {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 800px) {
  .credentials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}
.credential { display: flex; gap: var(--s-3); align-items: flex-start; }
.credential svg { width: 26px; height: 26px; color: var(--gold-dark); flex: 0 0 auto; margin-top: 2px; }
.credential strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 0.87rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink);
  line-height: 1.35;
}
.credential span { font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; }

/* --------------------------------------------------------------------------
   The Jessica Valdman Distinction
   -------------------------------------------------------------------------- */
.distinction {
  display: grid; gap: clamp(var(--s-5), 5vw, var(--s-8));
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .distinction { grid-template-columns: 0.85fr 1.15fr; } }

.distinction__media { position: relative; }
.distinction__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 46px rgba(28, 36, 50, 0.16);
  background: var(--silver-light);
}
.distinction__badge {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--gold-light);
  border-radius: var(--radius-lg); padding: var(--s-3) var(--s-5);
  box-shadow: 0 8px 24px rgba(28, 36, 50, 0.14);
  text-align: center; white-space: nowrap;
}
.distinction__badge strong {
  display: block; font-family: var(--font-display); font-size: 0.9rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink);
}
.distinction__badge span { font-size: 0.76rem; color: var(--gold-dark); letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 939px) { .distinction__media { margin-bottom: var(--s-7); } }

.pillars { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.pillar { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.pillar__icon { width: 38px; height: 38px; color: var(--gold-dark); flex: 0 0 auto; }
.pillar__icon svg { width: 100%; height: 100%; }
.pillar h3 { margin-bottom: var(--s-2); font-size: 1.08rem; letter-spacing: 0.05em; }
.pillar p { font-size: 0.94rem; color: var(--text-soft); margin: 0; }

/* --------------------------------------------------------------------------
   3-step patient journey
   -------------------------------------------------------------------------- */
.journey {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  counter-reset: step;
  position: relative;
}
@media (min-width: 820px) { .journey { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.journey__step {
  position: relative; text-align: center;
  padding: var(--s-6) var(--s-4) var(--s-5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.journey__num {
  counter-increment: step;
  width: 54px; height: 54px; margin: 0 auto var(--s-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--foil-gold); color: var(--white);
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 500;
  box-shadow: 0 4px 14px rgba(36, 44, 58, 0.28);
}
.journey__num::before { content: counter(step, decimal-leading-zero); }
.journey__step h3 { font-size: 1.06rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-3); }
.journey__step p { font-size: 0.93rem; color: var(--text-soft); margin: 0; }
.journey__step .duration {
  display: inline-block; margin-top: var(--s-3);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark);
}

/* --------------------------------------------------------------------------
   Pricing philosophy
   -------------------------------------------------------------------------- */
.pricing-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.pricing-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
/* The companion `svg` rule is required, not decorative. These wrappers size
   themselves, but an inline <svg> with no width/height and no viewBox of its
   own falls back to the replaced-element default of 300x150; the global
   `svg { max-width:100%; height:auto }` then caps the width and leaves the
   HEIGHT at 150px. The symbol scales to fit that box and sits centred in it,
   so the icon rendered ~55px below where the wrapper implies. Measured: every
   .pricing-card__icon svg computed 40x150 inside a 40x40 span. `.tile__icon`
   already carried this rule; these three did not. */
.pricing-card__icon { width: 40px; height: 40px; color: var(--gold-dark); flex: 0 0 auto; }
.pricing-card__icon svg { width: 100%; height: 100%; }
.pricing-card h3 { font-size: 1.02rem; letter-spacing: 0.09em; text-transform: uppercase; margin: 0; }
.pricing-card p { font-size: 0.93rem; color: var(--text-soft); margin: 0; }

.pricing-note {
  margin-top: var(--s-6); padding: var(--s-5);
  background: var(--white); border: 1px solid var(--gold-light); border-radius: var(--radius-lg);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
  background:
    linear-gradient(160deg, rgba(36,38,42,0.94), rgba(36,38,42,0.86)),
    radial-gradient(80% 120% at 80% 10%, #2F4256 0%, transparent 60%);
  background-color: var(--ink);
  color: var(--white);
}
.final-cta h2 { color: var(--white); }
.final-cta .lede { color: rgba(255,255,255,0.82); }

.offers {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  margin: var(--s-6) 0;
}
.offer {
  border: 1px solid rgba(190, 188, 178, 0.55);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  background: rgba(255,255,255,0.04);
  text-align: left;
}
.offer h3 { color: var(--gold-light); font-size: 1rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: var(--s-2); }
.offer p { font-size: 0.91rem; color: rgba(255,255,255,0.78); margin: 0; }
.offer .terms { display: block; margin-top: var(--s-3); font-size: 0.78rem; color: rgba(255,255,255,0.5); }

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(180deg, var(--white), var(--cream));
  border-bottom: 1px solid var(--line);
  padding-block: clamp(var(--s-6), 6vw, var(--s-8));
  text-align: center;
}
.page-hero .lede { margin-inline: auto; }

.breadcrumbs {
  font-size: 0.79rem; letter-spacing: 0.09em; color: var(--ink-mute);
  margin-bottom: var(--s-4);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: var(--s-2); color: var(--silver); }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.about-intro {
  display: grid; gap: clamp(var(--s-5), 5vw, var(--s-8));
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 940px) { .about-intro { grid-template-columns: 0.8fr 1.2fr; } }

figure.portrait { margin: 0; }
figure.portrait img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(28, 36, 50, 0.15);
  background: var(--silver-light);
}
figure.portrait figcaption {
  margin-top: var(--s-3); font-size: 0.84rem; color: var(--ink-mute);
  line-height: 1.6; border-left: 2px solid var(--gold-light); padding-left: var(--s-3);
}

.values {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.value { border-top: 2px solid var(--gold-light); padding-top: var(--s-4); }
.value h3 { font-size: 1rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: var(--s-2); }
.value p { font-size: 0.93rem; color: var(--text-soft); margin: 0; }

.gallery {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--silver-light);
}
.gallery figcaption { margin-top: var(--s-3); font-size: 0.84rem; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   Treatments page
   -------------------------------------------------------------------------- */
.cat-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 249, 245, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.cat-nav ul {
  list-style: none; margin: 0; padding: var(--s-3) 0;
  display: flex; gap: var(--s-2); overflow-x: auto;
  scrollbar-width: thin;
}
.cat-nav a {
  display: block; white-space: nowrap;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line); border-radius: 999px;
}
.cat-nav a:hover { color: var(--gold-deep); border-color: var(--gold); background: var(--gold-wash); text-decoration: none; }

.category { scroll-margin-top: 90px; }
.category + .category { margin-top: clamp(var(--s-7), 7vw, var(--s-9)); }
.category__head {
  display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: center;
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .category__head { grid-template-columns: 68px 1fr; gap: var(--s-5); } }
.category__icon { width: 60px; height: 60px; color: var(--gold-dark); flex: 0 0 auto; }
.category__icon svg { width: 100%; height: 100%; }
.category__head h2 { margin-bottom: var(--s-2); }
.category__treatments {
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.11em; color: var(--gold-dark);
  margin: 0 0 var(--s-3) !important;
}
/* Benefits lead each treatment: what the patient actually gets, in their words */
.benefits { margin: 0; padding-left: 1.05rem; list-style: none; }
.benefits li { position: relative; margin-bottom: var(--s-2); font-size: 0.91rem; color: var(--text-soft); }
.benefits li::before {
  content: ''; position: absolute; left: -1.05rem; top: 0.55em;
  width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold);
}
.category__head p { margin: 0; color: var(--text-soft); }

.treatment-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.treatment {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.treatment h3 { margin: 0; font-size: 1.14rem; letter-spacing: 0.03em; }
.treatment .tagline { font-size: 0.83rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-dark); margin: 0; }
.treatment p { font-size: 0.94rem; color: var(--text-soft); margin: 0; }
.treatment dl { margin: 0; display: grid; gap: var(--s-3); }
.treatment dt {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--s-1);
}
.treatment dd { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.treatment ul { margin: 0; padding-left: 1.15rem; font-size: 0.9rem; color: var(--text-soft); }
.treatment ul li { margin-bottom: var(--s-1); }
.treatment .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid; gap: clamp(var(--s-5), 5vw, var(--s-8));
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }

.contact-block + .contact-block { margin-top: var(--s-6); }
.contact-block h3 { font-size: 0.92rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s-3); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.contact-list li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3); align-items: start; }
.contact-list svg { width: 22px; height: 22px; color: var(--gold-dark); margin-top: 3px; }
.contact-list a { color: var(--ink); }
.contact-list a:hover { color: var(--gold-deep); }

.hours { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hours th, .hours td { text-align: left; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 500; color: var(--ink); }
.hours td { color: var(--text-soft); text-align: right; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

/* Replaced .map-embed. The Google iframe it styled was refused by every browser
   (404 + X-Frame-Options: SAMEORIGIN), so the panel rendered as an empty grey
   box at 16/10. No fixed aspect ratio here — the card is sized by its content. */
.find-us {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--gold-wash);
  padding: var(--s-5);
}
.find-us__addr {
  font-family: var(--font-display); font-size: 1.02rem; line-height: 1.6;
  margin: 0 0 var(--s-3);
}
.find-us__addr a { color: var(--ink); }
.find-us__addr a:hover { color: var(--gold-deep); }
.find-us .btn { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   404 + sitemap
   -------------------------------------------------------------------------- */
.notfound { text-align: center; padding-block: clamp(var(--s-8), 12vw, var(--s-10)); }
.notfound__code {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(4.5rem, 18vw, 10rem); line-height: 1; margin-bottom: var(--s-4);
}
.site-search { display: flex; gap: var(--s-2); max-width: 480px; margin: var(--s-6) auto 0; }
.site-search input { flex: 1 1 auto; }

.sitemap-cols {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
/* Size and tracking now come from `.doc h2` in brand.css — this page carries the
   `doc` class like the other document pages. Only the spacing is column-specific. */
.sitemap-cols h2 { margin-bottom: var(--s-4); }
.sitemap-cols ul { list-style: none; margin: 0; padding: 0; }
.sitemap-cols li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .quiz, .btn, .cat-nav { display: none !important; }
  body { background: #fff; color: #000; }
  .foil { color: #000 !important; -webkit-text-fill-color: #000 !important; }
}