/* ══════════════════════════════════════════════════════════════════════
   DIVYANSHI WELLNESS — desktop.css   (v5 · "Register, Inset")
   Desktop mode for screens >= 1024px.

   HOW THIS FILE IS SCOPED
   • layout.ejs links it with media="(min-width: 1024px)". Phones and tablets
     never apply a single rule from here, so the mobile site is untouched.
   • Loaded after style.css + enhance.css, so equal-specificity rules win by
     order. `!important` appears only where the base layer already uses it
     (hero padding, bottom-nav) or where a view has inline styles.
   • Every colour is a theme variable from Admin → Appearance
     (--green-deep = primary, --g-core = gold, --earth, --ivory …), so a
     theme change restyles desktop and mobile together.
   • Desktop-only markup (.dt-nav, .dt-book, .dt-phone, .dt-footer) ships with
     the `hidden` attribute; this file reveals it.
   • Page scoping uses the body class set in layout.ejs: body.pg-<page>.

   THE STYLE ("Variant D", chosen by the owner, Oct 2026)
   • Compact INSIDE components (slim header and buttons, 20px card padding,
     type one step down) and airy BETWEEN them (one --dt-sec rhythm).
   • Header: the dark-glass nav dock. Heroes: inset rounded panels; a strip
     right under a hero (ticker, hours) joins it into one panel.
   • Everything else: gold hairlines (--dt-line), title-left / text-right
     section headers, a quote on a gold rule, a flat CTA band.
   • Cards: rounded 14px white cards with a gold top hairline, in full-width
     grids. Numbers 01–08 only on therapies (a real sequence).
   • Each selector is set in one place, in its page's section below.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root {
  --dt-box: 1400px;                                   /* boxed page width   */
  --dt-max: 1120px;                                   /* text/grid width    */
  --dt-gutter: max(56px, calc((100% - var(--dt-max)) / 2));
  --dt-card-w: min(var(--dt-max), calc(100% - 112px)); /* floating cards    */
  --dt-radius: 16px;
  --dt-sec: 104px;              /* vertical rhythm between sections (airy) */
  --dt-pad: 20px;               /* inner padding of components (compact)   */
  --dt-inset: 20px;             /* gap around inset hero panels            */
  --dt-ticker-h: 42px;          /* home ticker strip under the hero        */
  --dt-notice-h: 0px;           /* notice bars above the hero (set below)  */
  --dt-line: rgba(196, 160, 82, 0.22);   /* gold hairline, from --g-core   */
  --header-h: 62px;
  --nav-h: 0px;                  /* no bottom nav on desktop → no body gap  */
  --content-max: 100%;
  /* Laptop scale. The desktop design is laid out for a 1440px-wide window.
     Narrower laptops (a 14" screen is often 1280–1366px) draw that same
     layout scaled down with `zoom`, so the header, hero and cards keep their
     proportions instead of some parts shrinking and others dropping out.
     --z steps with the window width (below); 1 from 1440px up. Under zoom the
     browser's vh/vw stay in real pixels, so this file uses --vh/--vw, which
     divide them back by --z. */
  --z: 1;
  --vh: calc(1vh / var(--z));
  --vw: calc(1vw / var(--z));
}
html { zoom: var(--z); }
/* 1224–1439px: z = (step's lower edge) / 1440, so the layout is always at
   least 1440px wide; 1024–1223px: z stays 0.85 (text never below ~12.7px). */
@media (max-width: 1439px) { :root { --z: 0.9833; } }
@media (max-width: 1415px) { :root { --z: 0.9667; } }
@media (max-width: 1391px) { :root { --z: 0.95; } }
@media (max-width: 1367px) { :root { --z: 0.9333; } }
@media (max-width: 1343px) { :root { --z: 0.9167; } }
@media (max-width: 1319px) { :root { --z: 0.9; } }
@media (max-width: 1295px) { :root { --z: 0.8833; } }
@media (max-width: 1271px) { :root { --z: 0.8667; } }
@media (max-width: 1247px) { :root { --z: 0.85; } }

/* ── 2 · Page frame ─────────────────────────────────────────────────────── */
body { padding-bottom: 0; }
/* Boxed layout: the page sits in a centred 1400px box on the ivory ground,
   framed by a gold hairline. Heroes, ticker and footer fill the box. */
.page-content {
  display: flow-root;       /* contain child margins so the box meets the footer */
  max-width: var(--dt-box);
  margin: 0 auto;
  min-height: calc(100 * var(--vh) - var(--header-h));
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--dt-line);
}
.site-notice { max-width: var(--dt-box); margin-inline: auto; }
.bottom-nav { display: none !important; }
body { min-height: calc(100 * var(--vh)); }
body .drawer, body .dw-drawer { height: calc(100 * var(--vh)); }   /* menu drawer: full height under zoom (beats the inline 100dvh) */
body .pay-modal { height: auto; }                                   /* Book: pay popup is pinned by top/bottom */
body .pay-card { max-height: calc(100 * var(--vh) - 40px); }

:where(.dt-link, .dt-book, .dt-footer a, .header-call, .hamburger-btn,
       .service-card, .therapy-list-card, .product-card, .blog-card,
       .contact-card, .btn-primary, .btn-outline, .btn-white):focus-visible {
  outline: 2px solid var(--g-core, #c4a052);
  outline-offset: 3px;
}

/* ── 3 · Header: brand · nav dock · actions ─────────────────────────────── */
.header-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 20px;
  max-width: var(--dt-box) !important;              /* aligns with the box */
  padding: 0 24px;
  overflow: visible;
}
.brand, .brand-text { flex: none; min-width: max-content; overflow: visible; }
.brand { gap: 10px; }
.brand-logo { width: 40px; height: 40px; }
.brand-name, .brand-sub { overflow: visible; text-overflow: clip; }
.brand-name { font-size: 20px; }
.brand-sub { font-size: 10px; letter-spacing: .06em; }

/* The mobile bottom dock, moved to the top: same dark glass, gold ink,
   gold-tinted active pill. Slim: 34px links in a 4px-padded dock. */
.dt-nav {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--glass-a, rgba(48,64,58,.86)), var(--glass-b, rgba(26,38,34,.92)));
  border: 1px solid rgba(201, 165, 92, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dt-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(237, 231, 216, 0.87);
  transition: background 0.2s, color 0.2s;
}
.dt-link i {
  font-size: 13px;
  color: var(--nav-gold, #c9a55c);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.dt-link:hover { background: rgba(201, 165, 92, 0.12); color: #fff; }
.dt-link.active {
  background: rgba(201, 165, 92, 0.16);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 92, 0.3);
  color: var(--nav-gold-lt, #e4c983);
}
.dt-link.active i {
  color: var(--nav-gold-lt, #e4c983);
  filter: drop-shadow(0 0 6px rgba(201, 165, 92, 0.55));
}
/* Links that don't fit stay reachable through the menu drawer (☰), which
   remains on desktop, and through the footer. Widths were measured, not
   guessed: brand ≈240px, actions ≈380px, each link ≈70–125px. */
.dt-link-wide { display: none; }                         /* Testimonials, Blog, Find Us */
@media (min-width: 1224px) { .dt-link-wide:nth-child(4) { display: inline-flex; } }   /* + Testimonials (layout ≥ 1440 from here) */
@media (min-width: 1224px) { .dt-link-wide:nth-child(6) { display: inline-flex; } }   /* + Blog */
@media (min-width: 1600px) { .dt-link-wide:nth-child(7) { display: inline-flex; } }   /* + Find Us */

/* Actions: phone number (not "Call Now" — desktops rarely dial) + Book. */
.header-call {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--header-text, #1B4332) !important;
  padding: 10px 12px;
  font-size: 13px;
}
.header-call svg { stroke: var(--g-deep, #a87f2e) !important; color: var(--g-deep, #a87f2e) !important; }
.header-call::after { display: none; }
.header-call:hover { background: rgba(196, 160, 82, 0.12) !important; }
.header-call .hc-label { display: none; }
.header-call .dt-phone { display: inline; font-weight: 700; letter-spacing: 0.01em; }
/* Small laptops (below 1224px, where the scaled layout is narrower than
   1440): phone becomes an icon-only button to make room for the nav. */
@media (max-width: 1223px) {
  .header-inner { padding: 0 28px; gap: 16px; }
  .header-call {
    width: 38px; height: 38px; padding: 0; justify-content: center;
    border-radius: 12px;
    border: 1.5px solid var(--header-ham-border, rgba(27,67,50,0.25)) !important;
  }
  body .hero .hero-mandala { width: 300px; height: 300px; top: calc(50% - 150px); right: 24px; opacity: 0.13; }
  body .hero-sub { max-width: 500px; }
  .header-call .dt-phone {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;                /* kept for screen readers */
  }
}

.dt-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 50px;
  font-family: var(--font-btn);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: #2a2418;
  background: linear-gradient(180deg, var(--g-lite, #e4c983) 0%, var(--g-core, #c4a052) 55%, var(--g-deep, #a87f2e) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(120,90,30,.3),
              0 4px 14px rgba(120,90,30,.32), 0 1px 3px rgba(120,90,30,.24);
  transition: transform 0.15s, box-shadow 0.15s;
}
.dt-book:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(120,90,30,.36); }
.hamburger-btn { width: 38px; height: 38px; border-radius: 10px; }

/* ── 4 · Shared page heroes (inner pages): inset rounded panels ─────────── */
.contact-hero,
.book-hero,
.about-hero,
.service-detail-hero {
  margin: var(--dt-inset) var(--dt-inset) 0;
  padding: 64px var(--dt-gutter) 64px;
  border-radius: 22px;
  overflow: hidden;
}
.about-hero { text-align: left; }
.about-hero p { margin: 0; }
.contact-hero h1, .book-hero h1, .about-hero h1, .service-detail-hero h1 {
  font-size: 40px;
  line-height: 1.12;
  margin-bottom: 12px;
}
.contact-hero p, .book-hero p, .about-hero p, .service-detail-hero > p {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 640px;
}

/* ── 5 · Shared blocks ──────────────────────────────────────────────────── */
.section { padding: var(--dt-sec) var(--dt-gutter) 0; }
/* The rhythm wins over the views' inline padding-top:0, so every section
   gets the same airy gap. */
.page-content > .section { padding-top: var(--dt-sec) !important; }
.section-header { max-width: 680px; margin-bottom: 36px; }
.section-title { font-size: 34px; line-height: 1.15; }
.section-desc { font-size: 15px; line-height: 1.7; }
.divider { margin: 0 var(--dt-gutter); }
.site-notice { padding: 12px 24px; font-size: 14px; }   /* centred text; the gutter would follow the window, not the 1400px box */
/* One notice bar is 44px tall (12 + 20 + 12); the home hero subtracts them. */
body:has(.site-notice) { --dt-notice-h: 44px; }
body:has(.site-notice + .site-notice) { --dt-notice-h: 88px; }

/* Stats: four separate cards, same look as the therapy cards. */
.stats-bar {
  width: var(--dt-card-w);
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.stat-item {
  position: relative;
  overflow: hidden;
  padding: 20px 12px;
  background: var(--card-surface);
  border: 1px solid var(--gx-card-border, rgba(196,160,82,.18));
  border-radius: 14px;
  box-shadow: var(--elev-2);
}
.stat-item + .stat-item { border-left: 1px solid var(--gx-card-border, rgba(196,160,82,.18)); }
.stat-item::before {                                  /* gold top hairline */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-core) 25%, var(--g-lite) 50%, var(--g-core) 75%, transparent);
  opacity: .5;
}
.stat-item::after { display: none; }
.stat-number { font-size: 28px; }
.stat-label { font-size: 10px; letter-spacing: 0.12em; }

/* CTA: a slim, flat band with air around it. */
.cta-banner {
  width: var(--dt-card-w);
  margin: var(--dt-sec) auto var(--dt-sec);
  padding: 32px 44px;
  border-radius: 20px;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "h btn" "p btn";
  column-gap: 40px;
  align-items: center;
  text-align: left;
}
.cta-banner h3 { grid-area: h; font-size: 26px; margin-bottom: 8px; }
.cta-banner p { grid-area: p; font-size: 14.5px; margin: 0; max-width: 560px; }
.cta-banner .btn-white { grid-area: btn; padding: 12px 24px; font-size: 14px; }

.map-embed { margin: 0 var(--dt-gutter) 24px; height: 440px; border-radius: var(--dt-radius); }

/* Cards: rounded 14px white cards with a gold top hairline. Most cards get
   the surface and hairline from enhance.css; the ones that don't (value,
   legal, video cards) get them here. */
.product-card, .blog-card, .contact-card, .value-card, .expert-card { border-radius: 14px; }
body.pg-about .value-card,              /* beats enhance.css's gold-mode left rail */
body .legal-card,
body .vt-card {
  position: relative;
  overflow: hidden;
  background: var(--card-surface);
  border: 1px solid var(--gx-card-border, rgba(196,160,82,.18));
  border-radius: 14px;
  box-shadow: var(--elev-2);
}
body.pg-about .value-card::before, body .legal-card::before, body .vt-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--g-core) 25%, var(--g-lite) 50%, var(--g-core) 75%, transparent);
  opacity: calc(var(--gx-hair-op, .8) * .6);
}

/* Hover lift for cards — pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  .service-card, .therapy-list-card, .product-card, .blog-card, .contact-card, .value-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .service-card:hover, .therapy-list-card:hover, .product-card:hover,
  .blog-card:hover, a.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
  }
}

/* ── 6 · HOME ───────────────────────────────────────────────────────────── */
/* Hero: inset panel; the ticker under it joins it into one panel.
   First screen: hero + ticker fill the window below the header (20px gap
   top and bottom), on short laptops and tall monitors alike. Padding and
   the heading shrink with the window height, so the pair still fits; if a
   very short window can't hold the text, the hero grows instead of
   clipping it. */
.hero {
  --dt-fold: calc(100 * var(--vh) - var(--header-h) - var(--dt-notice-h) - 2 * var(--dt-inset));
  margin: var(--dt-inset) var(--dt-inset) 0;
  padding: clamp(20px, 4 * var(--vh), 48px) var(--dt-gutter) !important;   /* a floor only: the height comes from min-height, content is centred */
  min-height: calc(var(--dt-fold) - var(--dt-ticker-h));
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero:not(:has(+ .ticker-wrap)) { border-radius: 22px; min-height: var(--dt-fold); }
.hero h1 { font-size: clamp(36px, 7.4 * var(--vh) - 4px, 54px); line-height: 1.08; letter-spacing: -0.01em; max-width: 760px; }
.hero-sub { font-size: 16px; line-height: 1.75; max-width: 520px; }
.hero-location { font-size: 14px; }
.hero-actions { flex-direction: row; gap: 14px; }
.hero-actions .btn-primary, .hero-actions .btn-outline { padding: 12px 22px; font-size: 14px; }
.hero .hero-mandala {
  width: 420px;
  height: 420px;
  top: calc(50% - 210px);
  right: max(24px, calc((100% - var(--dt-max)) / 2 - 20px));
  opacity: 0.16;
}
/* Hero card: a raised photo card on the right, text on the left. Its height
   follows the first-screen height (and 37.5 --vw, so the text keeps room on a
   1024px laptop); 4:5, like the 1200 × 1500 upload asked for in Admin → Hero.
   Without a photo it is a frosted card holding the clinic badge. */
.hero:has(> .hero-card) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(32px, 4 * var(--vw), 64px);
  align-content: center;
  align-items: center;
  justify-items: start;
}
.hero:has(> .hero-card) > :not(.hero-card) { grid-column: 1; }
.hero:has(> .hero-card) > .hero-mandala { display: none; }
.hero-card {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 5;
  position: relative;
  z-index: 2;
  margin: 0;
  height: min(calc(var(--dt-fold) - var(--dt-ticker-h) - 112px), 37.5 * var(--vw), 560px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.6), 0 12px 24px -14px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.hero-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-card.is-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}
.hero-card.is-empty .hero-card-badge { width: 42%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3)); }
.ticker-wrap { height: var(--dt-ticker-h); margin: 0 var(--dt-inset); border-radius: 0 0 22px 22px; overflow: hidden; }
.ticker-item { font-size: 14px; }

/* Therapy sections: title left, description right, on a gold hairline. */
.section:has(.services-grid) .section-header {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: 56px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dt-line);
  margin-bottom: 28px;
}
.section:has(.services-grid) .section-header .section-eyebrow { grid-column: 1; }
.section:has(.services-grid) .section-header .section-title { grid-column: 1; margin: 0; }
.section:has(.services-grid) .section-header .section-desc { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: end; }

/* Therapy cards in a full-width 4-column grid, numbered 01–08. */
.services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: reg; }
.section:has(.services-grid) + .section:has(.services-grid) .services-grid { counter-reset: reg 4; }
.service-card { counter-increment: reg; position: relative; padding: var(--dt-pad); border-radius: 14px; }
.service-card::after {
  content: counter(reg, decimal-leading-zero);
  position: absolute;
  top: 22px; right: 20px;
  font-family: var(--font-stat);
  font-size: 13px;
  color: var(--g-deep);                 /* decorative: 3.39:1, like the eyebrows */
  letter-spacing: .04em;
}
.service-card h3 { font-size: 16.5px; }
.service-card p { font-size: 13.5px; line-height: 1.65; }
.service-icon { width: 36px; height: 36px; border-radius: 9px; margin-bottom: 14px; }
.service-icon i { font-size: 17px; }
.service-arrow { font-size: 11px; padding: 5px 11px; margin-top: 16px; }

/* Testimonials: heading left, the quote right on a gold rule. */
.pg-home .section:has(#tFadeWrap) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding-top: var(--dt-sec) !important;
}
.pg-home .section:has(#tFadeWrap) .section-header { margin: 0; }
.pg-home .section:has(#tFadeWrap) .section-title { font-size: 36px; }
body.pg-home .t-fade-wrap { max-width: none; width: 100%; min-height: 220px; margin: 0; }
body.pg-home .t-fade-card {
  padding: 8px 0 8px 32px;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  border-left: 2px solid var(--g-core);
}
body.pg-home .t-fade-card::before { display: none; }
body.pg-home .t-fade-card .testimonial-text { font-size: 17px; line-height: 1.7; }

/* ── 7 · SERVICES list + detail ─────────────────────────────────────────── */
.therapy-category { padding: 72px var(--dt-gutter) 0 !important; }
.therapy-category + .cta-banner { margin-top: 72px; }
.therapy-category-label { font-size: 14px; }
.therapy-category > p { font-size: 15px !important; max-width: 640px; margin-bottom: 18px !important; }
/* Two-column list on a gold hairline, numbered 01–08. */
.therapy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  counter-reset: reg;
  border-top: 1px solid var(--dt-line);
  padding-top: 20px;
}
.therapy-category + .therapy-category .therapy-list { counter-reset: reg 4; }
.therapy-list-card { counter-increment: reg; padding: 16px 18px; gap: 16px; align-items: center; border-radius: 14px; }
.therapy-list-card::after {
  content: counter(reg, decimal-leading-zero);
  order: -1;
  width: 22px;
  flex-shrink: 0;
  font-family: var(--font-stat);
  font-size: 13px;
  color: var(--g-deep);                 /* decorative: 3.39:1, like the eyebrows */
}
.therapy-list-icon { width: 38px; height: 38px; border-radius: 10px; }
.therapy-list-icon i { font-size: 18px; }
.therapy-list-body h3 { font-size: 16.5px; }
.therapy-list-body p { font-size: 13.5px; line-height: 1.6; }
.therapy-price { font-size: 17px; }

/* Detail page: the hours strip joins the hero into one panel. */
.service-detail-hero .back-btn { margin-bottom: 28px; }
.service-detail-hero:has(+ .hours-strip) { border-radius: 22px 22px 0 0; }
.service-icon-lg i { font-size: 56px; }
.hours-strip { padding: 16px var(--dt-gutter); }
.service-detail-hero + .hours-strip {
  margin: 0 var(--dt-inset);
  border-radius: 0 0 22px 22px;
  padding-inline: calc(var(--dt-gutter) - var(--dt-inset));
}
.pg-services .section > p { font-size: 16px !important; max-width: 820px; }
.conditions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 900px; }
.condition-chip { padding: 14px 18px; font-size: 14px; }

/* ── 8 · ABOUT ──────────────────────────────────────────────────────────── */
.expert-card { padding: 28px 32px; gap: 36px; align-items: center; }
.expert-photo, .expert-photo-placeholder { width: 136px; height: 136px; }
.expert-name { font-size: 26px; }
.expert-bio { font-size: 15px; line-height: 1.8; max-width: 860px; }
.about-section { padding: 80px var(--dt-gutter) 0; }
.about-section h2 { font-size: 30px; }
.about-section > p { font-size: 15px; line-height: 1.8; max-width: 820px; }
/* Story / Approach: editorial two-column — heading left, prose right. */
.about-section:not(:has(.value-cards, .map-embed)) {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: 64px;
  align-items: start;
}
.about-section:not(:has(.value-cards, .map-embed)) > h2 { grid-column: 1; grid-row: 1 / span 6; }
.about-section:not(:has(.value-cards, .map-embed)) > p { grid-column: 2; max-width: 720px; }
/* Find Us: details + buttons left, map right. */
.about-section:has(.map-embed) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  align-content: start;
}
.about-section:has(.map-embed) > :not(.map-embed) { grid-column: 1; }
.about-section:has(.map-embed) > .section-eyebrow { justify-self: start; }
.about-section:has(.map-embed) > .map-embed {
  grid-column: 2;
  grid-row: 1 / span 6;
  margin: 0 !important;
  height: 100%;
  min-height: 380px;
}
.value-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.value-card { padding: 22px 20px; }

/* ── 9 · CONTACT ────────────────────────────────────────────────────────── */
/* Cards stacked on the left, map filling the right. */
body.pg-contact .page-content {
  display: grid;
  grid-template-columns: var(--dt-gutter) minmax(0, 5fr) minmax(0, 7fr) var(--dt-gutter);
  grid-template-rows: auto auto 1fr;
}
body.pg-contact .contact-hero { grid-column: 1 / -1; }
.contact-cards { gap: 14px; padding: 56px 28px 0 0; }
body.pg-contact .contact-cards { grid-column: 2; grid-row: 2; }
.contact-card { padding: 16px 18px; }
.contact-card-value { font-size: 15px; }
body.pg-contact .map-embed {
  grid-column: 3;
  grid-row: 2 / span 2;
  margin: 56px 0 88px 28px;
  height: auto;
  min-height: 520px;
}
body.pg-contact .page-content > div:last-child {
  grid-column: 2;
  grid-row: 3;
  padding: 18px 28px 88px 0 !important;
}

/* ── 10 · BOOK / CAREERS / CONFIRMATIONS ────────────────────────────────── */
.book-hero { text-align: center; }
/* The form card rides 80px up into the hero: keep 48px clear under the text. */
.book-hero:has(+ .book-form-wrap) { padding-bottom: 128px; }
.book-hero p { margin: 0 auto; }
.book-form-wrap {
  width: min(780px, calc(100% - 80px));
  margin: -80px auto 88px;
  padding: 36px 44px 40px !important;
  position: relative;
  z-index: 5;            /* above the hero's gold hairline (z-index 3) */
  background: var(--card-surface, #fff);
  border: 1px solid rgba(196, 160, 82, 0.22);
  border-radius: 20px;
  box-shadow: var(--elev-3);
}
.booked-wrap {
  width: min(680px, calc(100% - 80px));
  margin: 56px auto 88px;
  padding: 40px 44px !important;
  background: var(--card-surface, #fff);
  border: 1px solid rgba(196, 160, 82, 0.22);
  border-radius: 20px;
  box-shadow: var(--elev-2);
}

/* ── 11 · SHOP + PRODUCT ────────────────────────────────────────────────── */
/* Shop list: the hero and the first row of products fit the first screen,
   with the same gap above and below the row. The hero padding and that gap
   shrink with the window height, and each square photo is sized from the
   height left over (--shop-img), so on a short laptop the cards get a bit
   narrower instead of being cut off. On tall screens the columns fill the
   row as before. */
body.pg-shop .contact-hero { padding-block: clamp(28px, 6 * var(--vh), 64px); }
.shop-grid {
  --shop-cols: 4;
  --shop-gap: clamp(24px, 5.5 * var(--vh), 72px);
  --shop-img: clamp(180px, 77 * var(--vh) - 308px, 400px);
  grid-template-columns: repeat(var(--shop-cols), minmax(0, var(--shop-img)));
  gap: 20px;
  padding: var(--shop-gap) var(--dt-gutter) 72px;
}
/* Columns follow the card count so no card sits alone on the last row:
   5 → 3+2, 6 → 3+3, 9 → 3+3+3; 7, 8, 10, 12 … stay 4-up. */
.shop-grid:has(> :nth-child(4n+1):last-child),
.shop-grid:has(> :nth-child(3n):last-child) { --shop-cols: 3; }
.shop-grid:has(> :nth-child(4n):last-child) { --shop-cols: 4; }
/* Same card height in every row: descriptions stop at three lines here;
   the product page shows the full text. */
.shop-grid .product-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-name { font-size: 17px; }

/* Product page: its two-column "order card" layout lives in views/product.ejs. */
.product-detail-desc { font-size: 16px; line-height: 1.7; }

/* ── 12 · BLOG ──────────────────────────────────────────────────────────── */
.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 72px var(--dt-gutter) 96px; }
/* Columns follow the post count: 4 → 2+2, 7 → 4+3, 10 → 4+4+2. */
.blog-grid:has(> :nth-child(3n+1):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-card-title { font-size: 19px; }
body.pg-blog .page-content > div[style*="max-width:680px"] { max-width: 780px !important; padding-top: 16px !important; }
.blog-post-hero-img { border-radius: var(--dt-radius); overflow: hidden; }
.blog-post-title { font-size: 42px; line-height: 1.15; }
.blog-post-lead { font-size: 19px; }
.blog-post-content { font-size: 17px; line-height: 1.85; }
.blog-post-cta { margin: 40px 0; padding: 28px 36px; border-radius: 20px; box-shadow: none; }

/* ── 13 · TESTIMONIALS + LEGAL ──────────────────────────────────────────── */
body .vt-wrap { max-width: none; padding: 48px var(--dt-gutter) 88px; }
body .vt-grid { gap: 24px; }
body .vt-grid:has(> :nth-child(4n+1):last-child),
body .vt-grid:has(> :nth-child(3n):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .vt-grid:has(> :nth-child(4n):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body .vt-media { aspect-ratio: 4 / 5; }
body .legal-wrap { max-width: 860px; padding: 48px 0 88px; }
body .legal-card { padding: 36px 44px; }

/* ── 14 · Footer ────────────────────────────────────────────────────────── */
.dt-footer {
  display: block;
  position: relative;
  max-width: var(--dt-box);
  margin: 0 auto;
  color: rgba(237, 231, 216, 0.78);
  background: linear-gradient(160deg, var(--glass-a, rgba(48,64,58,.96)), var(--glass-b, rgba(26,38,34,.98))), var(--green-deep);
}
.dt-footer::before {                                  /* gold hairline */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-core) 20%, var(--g-lite) 50%, var(--g-core) 80%, transparent);
  opacity: 0.8;
}
.dt-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 56px var(--dt-gutter) 40px;
}
.dt-footer-name {
  display: block;
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.dt-footer-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav-gold, #c9a55c);
}
.dt-footer-addr { margin: 14px 0 18px; font-size: 13px; line-height: 1.7; max-width: 300px; }
.dt-footer-h {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-gold, #c9a55c);
}
.dt-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dt-footer-col a, .dt-footer-hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(237, 231, 216, 0.82);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.dt-footer-col a:hover { color: var(--nav-gold-lt, #e4c983); }
.dt-footer-col i { width: 16px; font-size: 13px; color: var(--nav-gold, #c9a55c); flex-shrink: 0; }
.dt-footer-hours { align-items: flex-start; }
.dt-footer-hours i { margin-top: 3px; }
.dt-footer-base {
  padding: 14px var(--dt-gutter) 16px;
  border-top: 1px solid rgba(201, 165, 92, 0.18);
  font-size: 12px;
  color: rgba(237, 231, 216, 0.6);
}

/* ── 15 · Large desktops ────────────────────────────────────────────────── */
@media (min-width: 1224px) {
  .hero h1 { font-size: clamp(36px, 7.4 * var(--vh) - 4px, 60px); }
  .hero .hero-mandala { width: 480px; height: 480px; top: calc(50% - 240px); }
}

@media (prefers-reduced-motion: reduce) {
  .dt-book, .dt-link { transition: none; }
  .service-card:hover, .therapy-list-card:hover, .product-card:hover,
  .blog-card:hover, a.contact-card:hover, .dt-book:hover { transform: none; }
}