/* ==========================================================================
   Home page — Design 4 sections.
   Loaded only on the home page (see partials/header.php). Palette, type,
   buttons and the section furniture live in theme.css; this file is the
   section layout on top of it.
   ========================================================================== */

/* ---------------- hero ---------------- */
.hero4 { padding: 26px 0 0; }
.hero4-panel {
  background: var(--brand-soft); border-radius: var(--r-xl);
  padding: 58px 54px; position: relative; overflow: hidden;
}
.hero4-panel::before {
  content: ""; position: absolute; width: 420px; height: 420px;
  left: -160px; bottom: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,138,0,.26), transparent 70%);
  filter: blur(50px); pointer-events: none;
}
.hero4-panel > .row { position: relative; z-index: 2; }
.hero4-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--brand-line); border-radius: 40px;
  padding: .45rem 1rem; font-family: var(--display); font-size: .76rem;
  font-weight: 600; color: var(--ink-2); margin-bottom: 1.3rem;
}
.hero4-badge i { color: var(--brand); }
.hero4 h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.12; margin-bottom: 1.1rem; }
.hero4-lead { font-size: 1rem; max-width: 460px; margin-bottom: 1.8rem; }

.hero4-stats { display: flex; gap: 2.6rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--brand-line); }
.hero4-stats b {
  display: block; font-family: var(--display); font-size: 1.05rem;
  font-weight: 700; color: var(--ink); line-height: 1.3;
}
.hero4-stats span { font-size: .8rem; color: var(--body); }
@media (max-width: 575.98px) { .hero4-stats { gap: 1.6rem; flex-wrap: wrap; } }

.hero4-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.hero4-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.hero4-social { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; flex-direction: column; gap: .5rem; }
.hero4-social a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: .8rem; transition: all .3s var(--ease);
}
.hero4-social a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.hero4-overlay {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3;
  background: rgba(26,20,8,.78); backdrop-filter: blur(10px);
  border-radius: var(--r-md); padding: 18px 20px; color: #fff;
}
.hero4-overlay b { font-family: var(--display); font-size: .92rem; display: block; margin-bottom: .2rem; }
.hero4-overlay p { font-size: .8rem; color: rgba(255,255,255,.8); margin: 0; line-height: 1.6; }
.hero4-creds { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.hero4-creds span {
  font-family: var(--display); font-size: .64rem; font-weight: 600;
  background: rgba(228,138,0,.3); border-radius: 30px; padding: .2rem .6rem;
}
@media (max-width: 991.98px) {
  .hero4-panel { padding: 38px 26px; }
  .hero4-figure { margin-top: 2rem; }
}

/* ---------------- service cards ---------------- */
.svc4 { border-radius: var(--r-lg); overflow: hidden; background: var(--brand); height: 100%; transition: all .4s var(--ease); }
.svc4:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(228,138,0,.3); }
.svc4-head { display: flex; align-items: center; gap: 1rem; padding: 20px 22px; color: #fff; }
.svc4-head h3 { color: #fff; font-size: 1.02rem; margin: 0; flex: 1; }
.svc4-head .go {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
  color: #fff; font-size: .75rem; transition: all .35s var(--ease);
}
.svc4:hover .svc4-head .go { background: var(--ink); transform: rotate(-45deg); }
.svc4-media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--brand-card); }
.svc4-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc4:hover .svc4-media img { transform: scale(1.06); }

.svc4-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 2.4rem; }
.svc4-pill {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--brand-soft); border-radius: 40px; padding: .5rem .6rem .5rem 1.3rem;
  font-size: .85rem; color: var(--ink-2);
}
.svc4-pill a {
  background: #fff; border-radius: 30px; padding: .5rem 1.1rem;
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .45rem;
}
.svc4-pill a i { color: var(--brand); }

/* ---------------- steps ---------------- */
.step4 {
  background: var(--brand-soft); border-radius: var(--r-md);
  padding: 22px 24px; margin-bottom: .9rem; transition: all .35s var(--ease);
  border: 1px solid transparent;
}
.step4:hover { background: #fff; border-color: var(--brand-line); box-shadow: 0 14px 32px rgba(119,72,0,.1); }
.step4-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--brand); color: #fff;
  font-family: var(--display); font-size: .82rem; font-weight: 700; margin-bottom: .8rem;
}
.step4 h3 { font-size: 1rem; color: var(--brand-dk); margin-bottom: .45rem; }
.step4 p { font-size: .88rem; margin: 0; }

.steps4-figure { border-radius: var(--r-lg); overflow: hidden; }
.steps4-figure img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }

/* ---------------- about ---------------- */
.about4 { background: var(--brand-soft); border-radius: var(--r-xl); padding: 56px 52px; }
@media (max-width: 991.98px) { .about4 { padding: 36px 24px; } }

.cred4 { display: grid; gap: .7rem; margin: 1.6rem 0 0; }
.cred4 li {
  display: flex; align-items: center; gap: .8rem;
  background: #fff; border-radius: 12px; padding: .8rem 1rem;
  font-family: var(--display); font-size: .88rem; font-weight: 600; color: var(--ink);
}
.cred4 li i { color: var(--brand); }
.cred4 li small { margin-left: auto; font-family: var(--text); font-weight: 400; font-size: .76rem; color: var(--body); }

.about4-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.about4-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about4-play {
  position: absolute; left: 22px; bottom: 22px; z-index: 3;
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-size: 1rem; cursor: pointer; box-shadow: 0 12px 28px rgba(228,138,0,.45);
  transition: all .35s var(--ease);
}
.about4-play:hover { background: var(--ink); transform: scale(1.06); }
.about4-note {
  position: absolute; right: 18px; bottom: 18px; z-index: 3; max-width: 260px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-radius: var(--r-md); padding: 14px 16px;
}
.about4-note b { font-family: var(--display); font-size: .86rem; color: var(--ink); display: block; margin-bottom: .2rem; }
.about4-note p { font-size: .76rem; margin: 0; line-height: 1.6; }

.core4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid var(--brand-line); }
@media (max-width: 767.98px) { .core4 { grid-template-columns: 1fr; gap: 1.1rem; } }
.core4-item { display: flex; align-items: flex-start; gap: .9rem; }
.core4-item i {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--brand); font-size: 1rem; flex-shrink: 0;
}
.core4-item b { font-family: var(--display); font-size: .92rem; color: var(--ink); display: block; margin-bottom: .2rem; }
.core4-item span { font-size: .82rem; line-height: 1.65; }

/* ---------------- testimonials ---------------- */
.tst4 {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; height: 100%; display: flex; flex-direction: column;
}
.tst4-stars { color: var(--brand); font-size: .82rem; letter-spacing: .14em; margin-bottom: .9rem; }
.tst4 p { font-size: .9rem; line-height: 1.85; color: var(--body); }
.tst4-by { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.1rem; }
.tst4-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: #fff;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .82rem;
}
.tst4-by b { font-family: var(--display); font-size: .92rem; color: var(--ink); display: block; line-height: 1.3; }
.tst4-by small { font-size: .74rem; color: var(--body); }

.tst4-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 100%; min-height: 320px; }
.tst4-figure img { width: 100%; height: 100%; object-fit: cover; }
.tst4-cta {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  background: var(--brand); border-radius: var(--r-md); padding: 18px 20px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.tst4-cta b { font-family: var(--display); font-size: .92rem; line-height: 1.4; }

/* ---------------- schedule ---------------- */
.sched4 { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.sched4 > img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.sched4-card {
  position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 3;
  background: #fff; border-radius: var(--r-lg); padding: 26px 28px; max-width: 360px;
  box-shadow: 0 24px 60px rgba(26,20,8,.26);
}
.sched4-card .eyebrow { margin-bottom: .6rem; }
.sched4-card h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.sched4-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.sched4-row:last-of-type { border-bottom: 0; }
.sched4-row span:first-child { font-family: var(--display); font-weight: 600; color: var(--ink); }
.sched4-row.closed span { color: var(--brand-dk); }
.sched4-pill {
  position: absolute; right: 30px; bottom: 30px; z-index: 3;
  background: var(--brand); color: #fff; border-radius: var(--r-md);
  padding: 14px 20px; display: flex; align-items: center; gap: .8rem;
}
.sched4-pill:hover { background: var(--brand-dk); color: #fff; }
.sched4-pill i { font-size: 1.1rem; }
.sched4-pill b { font-family: var(--display); font-size: .82rem; display: block; }
.sched4-pill span { font-size: .76rem; opacity: .88; }
@media (max-width: 991.98px) {
  .sched4 > img { aspect-ratio: 4 / 5; }
  .sched4-card { position: static; transform: none; max-width: none; margin: -60px 16px 0; }
  .sched4-pill { position: static; margin: 16px; justify-content: center; }
}

/* ---------------- faq ---------------- */
.faq4-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; overflow: hidden; background: #fff; }
.faq4-item.open { border-color: var(--brand); }
.faq4-q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 16px 20px; display: flex; align-items: center; gap: 1rem;
  font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--ink);
}
.faq4-item.open .faq4-q { background: var(--brand); color: #fff; }
.faq4-q i { margin-left: auto; transition: transform .35s var(--ease); font-size: .8rem; color: var(--brand); }
.faq4-item.open .faq4-q i { color: #fff; transform: rotate(45deg); }
.faq4-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq4-a > div { padding: 16px 20px; font-size: .88rem; line-height: 1.85; }

.faq4-figure { border-radius: var(--r-lg); overflow: hidden; margin-top: 1.4rem; }
.faq4-figure img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* ---------------- blog ---------------- */
.post4 {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: all .4s var(--ease);
}
.post4:hover { transform: translateY(-6px); border-color: var(--brand); box-shadow: 0 20px 44px rgba(228,138,0,.16); }
.post4-media { aspect-ratio: 16 / 9; overflow: hidden; background: #fdfcf5; }
.post4-media img { width: 100%; height: 100%; object-fit: contain; }
.post4-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post4-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.post4-tag {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-dk); border-radius: 30px; padding: .25rem .7rem;
}
.post4-date { font-size: .76rem; color: var(--body); }
.post4-date i { color: var(--brand); margin-right: .3rem; }
.post4 h3 { font-size: 1rem; line-height: 1.45; margin-bottom: .5rem; }
.post4 h3 a { color: var(--ink); }
.post4 h3 a:hover { color: var(--brand-dk); }
.post4 p { font-size: .85rem; margin-bottom: 1rem; }
.post4-more {
  margin-top: auto; align-self: flex-start; font-family: var(--display);
  font-size: .78rem; font-weight: 600; color: var(--brand-dk);
  display: inline-flex; align-items: center; gap: .4rem;
}


/* ==========================================================================
   Additions over the template — sections the live site needs that the
   template mock-up did not have.
   ========================================================================== */

/* ---------------- hero: second button ---------------- */
.hero4-btns { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------------- service cards: text + icon fallback ---------------- */
/* The template cards were photo-only. Real services carry a one-line
   description, and most have no photo uploaded yet — so the media box falls
   back to the service's own Font Awesome icon on a tinted tile, which keeps
   every card in a row the same height. */
.svc4-text {
  margin: 0; padding: 16px 22px 20px; font-size: .84rem; line-height: 1.7;
  background: #fff; border-top: 1px solid var(--brand-line); flex: 1;
}
.svc4 { display: flex; flex-direction: column; }
.svc4-media-icon { display: grid; place-items: center; background: var(--brand-card); }
.svc4-media-icon i { font-size: 2.6rem; color: var(--brand-dk); opacity: .55; }
.svc4:hover .svc4-media-icon i { opacity: .8; }
/* A card with no link has no arrow and must not look clickable */
div.svc4:hover { transform: none; box-shadow: none; }

/* ---------------- why Dr. Date ---------------- */
.why4 {
  height: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px;
  transition: all .4s var(--ease);
}
.why4:hover { border-color: var(--brand); box-shadow: 0 18px 40px rgba(228,138,0,.14); transform: translateY(-5px); }
.why4 i {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dk); font-size: 1.05rem; margin-bottom: 1.1rem;
  transition: all .4s var(--ease);
}
.why4:hover i { background: var(--brand); color: #fff; }
.why4 h3 { font-size: .98rem; margin-bottom: .5rem; }
.why4 p { font-size: .85rem; margin: 0; }

/* ---------------- schedule: no-image + note variants ---------------- */
/* Without a background image the card centres in a cream panel instead of
   floating over a photo. */
.sched4-flat {
  background: var(--brand-soft); border-radius: var(--r-xl); padding: 40px 0;
  min-height: 0; display: flex; justify-content: center;
}
.sched4-flat .sched4-card { position: static; margin: 0 20px; }
.sched4-note { font-size: .78rem; color: var(--body); margin: .9rem 0 0; font-style: italic; }

/* ---------------- pricing (hidden until plans exist) ---------------- */
.price4 {
  height: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column;
  transition: all .4s var(--ease);
}
.price4:hover { border-color: var(--brand-line); box-shadow: 0 18px 40px rgba(119,72,0,.1); }
.price4.featured { background: var(--brand-soft); border-color: var(--brand); }
.price4 h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.price4-amt {
  font-family: var(--display); font-size: 1.9rem; font-weight: 800;
  color: var(--brand-dk); line-height: 1.1; margin-bottom: .8rem;
}
.price4-amt small { font-family: var(--text); font-size: .8rem; font-weight: 400; color: var(--body); }
.price4 > p { font-size: .86rem; }
.price4-list { display: grid; gap: .5rem; margin: 1rem 0 0; font-size: .85rem; }
.price4-list li { display: flex; gap: .55rem; align-items: flex-start; }
.price4-list i { color: var(--brand); margin-top: .35rem; font-size: .72rem; }
.price4 .btn4 { margin-top: auto; }

/* ---------------- layout corrections over the template ---------------- */

/* The approach photo is a portrait on a pale background; a tinted frame keeps
   it reading as a card rather than a cut-out floating on the page. */
.steps4-figure { background: var(--brand-soft); }

/* The clinic photographs are wide banner crops (roughly 2.5:1). The template's
   portrait boxes sliced the subject out of them, so both figures use a gentle
   landscape ratio that keeps the whole subject in frame. */
.steps4-figure img { aspect-ratio: 16 / 11; }
.about4-figure img { aspect-ratio: 16 / 11; }

/* The three approach steps run much taller than the photo beside them, which
   left a tall gap. Letting the figure stick keeps it alongside the steps as
   they scroll past instead of stranding it at the top. */
@media (min-width: 992px) {
  #process .row { align-items: stretch !important; }
  #process .steps4-figure { position: sticky; top: 92px; }
}

/* Qualifications sit on one line as a row of pills rather than stacking —
   three short labels down the column wasted the whole width. */
.cred4 { display: flex; flex-wrap: wrap; gap: .6rem; }
.cred4 li { flex: 0 1 auto; padding: .7rem 1rem; }
@media (max-width: 575.98px) { .cred4 li { flex: 1 1 100%; } }

/* Review cards sized to their own text. Stretching them to the tallest column
   and pinning the author to the bottom left a large blank gap under the
   shorter review. */
.tst4 { height: auto; }
.tst4 p:last-of-type { margin-bottom: 0; }
.tst4-by { margin-top: 1.2rem; }

/* The contact pill carries the clinic's full postal address, which is far
   longer than the short locality the template mocked up — cap the pill and
   hold the address to two lines so it stays inside the panel. */
.sched4-pill { max-width: min(400px, calc(100% - 80px)); align-items: flex-start; }
.sched4-pill i { margin-top: .15rem; }
.sched4-pill > span { min-width: 0; }
.sched4-pill > span > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
@media (max-width: 991.98px) { .sched4-pill { max-width: none; } }

/* The clinic's procedure photographs are a matched set at 370x320. The box
   is cut to that ratio so none of them is cropped at all, and the
   icon-fallback tile inherits it so every card stays the same height. */
.svc4-media { aspect-ratio: 37 / 32; }

/* The hero photograph is a wide clinic shot with Dr. Date on the left third.
   A centred crop clipped him at the frame edge, so the window sits left. */
.hero4-figure img { object-position: 25% center; }

/* Mobile contact card: the template drops it to position:static, and a static
   box's background paints BEFORE replaced content, so the photo covered the
   card's white panel while its text still drew on top. Keeping it positioned
   puts the whole card above the image again. */
@media (max-width: 991.98px) {
  .sched4-card { position: relative; z-index: 3; left: auto; top: auto; }
  /* right/bottom come from the desktop rule; under position:relative they
     would shift the pill instead of anchoring it, so reset them. */
  .sched4-pill { position: relative; z-index: 3; right: auto; bottom: auto; }
}

/* The FAQ artwork is near-square; the template's 2:1 box sliced the row of
   small circles in half. Anchoring to the top keeps the main image whole and
   crops the circles away cleanly instead of bisecting them. */
.faq4-figure img { object-position: center top; }