/* ==========================================================================
   Trio Mindspace — Brand layer
   Overrides the base template with the identity taken from the logo:
   navy + teal, with the sage/dusty-blue pair from the two seated figures.
   Loaded AFTER style.css. Nothing here depends on template internals except
   the class names it re-skins.
   ========================================================================== */

:root {
  /* --- Brand palette — "fresh & airy" teal, 2026 -------------------------
     The identity moves off navy and onto a single teal family: a bright aqua
     for accents, a deep teal for text and dark fields. Navy is kept only as a
     variable alias so nothing that still references it breaks — every rule
     that used to paint navy now resolves to the deep teal ink. Surfaces are
     lifted well above the old mist so the page reads light first.
     ---------------------------------------------------------------------- */

  /* Deep teal replaces navy as the anchoring dark. 11.9:1 on white. */
  --tm-ink:         #0B3F45;
  --tm-ink-deep:    #072E33;

  /* Aliases: legacy token names now resolve into the teal family, so any rule
     still asking for "navy" gets the deep teal without needing to be edited. */
  --tm-navy:        var(--tm-ink);
  --tm-navy-deep:   var(--tm-ink-deep);

  /* The bright aqua. Large shapes, icon fills and decorative marks only — it
     is 2.6:1 on white, so it never carries text or sits behind white text. */
  --tm-teal:        #0FB5AE;
  --tm-teal-bright: #2BD0C6;
  --tm-glow:        #6EE7DC;   /* highlights, bloom, rails — decorative only */

  /* Text/UI steps. Anything carrying words uses these, not --tm-teal.
     ink: 6.2:1 on white and 5.6:1 on --tm-surf.
     btn: 4.8:1 behind white button text. Both pass WCAG AA. */
  --tm-teal-ink:    #0A6B68;
  --tm-teal-btn:    #0A7F79;

  --tm-sage:        #7FC5A8;   /* refreshed toward mint to sit in the teal family */
  --tm-blue:        #6FB3C9;   /* refreshed toward aqua */
  --tm-slate:       #56646B;

  /* Neutrals — near-white and pale mint. Lighter and cooler than the old
     mist, which is what carries most of the "brighter" read. */
  --tm-paper:       #FBFEFE;
  --tm-mist:        #EAF9F8;   /* pale mint — the main tinted surface */
  --tm-mist-deep:   #D6F1EE;
  --tm-line:        #CDE8E6;
  --tm-body:        #435259;

  /* --- Rewire Bootstrap/template tokens to the brand --- */
  --bs-primary:            var(--tm-teal);
  --bs-primary-rgb:        15,181,174;
  --bs-secondary:          var(--tm-ink);
  --bs-secondary-rgb:      11,63,69;
  --bs-dark:               var(--tm-ink-deep);
  --bs-dark-rgb:           7,46,51;
  --bs-primary-bg-subtle:  var(--tm-mist);
  --bs-secondary-bg-subtle:#DFF4F2;

  --bs-body-color:         var(--tm-body);
  --bs-body-color-rgb:     67,82,89;
  --bs-body-font-family:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-body:          'Inter', system-ui, sans-serif;
  --bs-font-heading:       'Fraunces', Georgia, 'Times New Roman', serif;
  --bs-body-font-size:     17px;
  --bs-body-line-height:   1.72;

  --bs-link-color:         var(--tm-teal-ink);
  --bs-link-color-rgb:     10,107,104;
  --bs-link-hover-color:   var(--tm-ink);

  --bs-border-color:       var(--tm-line);
  --bs-border-radius:      18px;
  --bs-border-radius-sm:   10px;
  --bs-border-radius-lg:   26px;

  /* Shadows are tinted with the teal ink rather than neutral black — on very
     light surfaces a grey shadow reads as dirt, a tinted one reads as depth. */
  --bs-box-shadow:         0 1px 2px rgba(11,63,69,.05), 0 6px 20px rgba(11,63,69,.05);
  --bs-box-shadow-lg:      0 20px 48px rgba(11,63,69,.10);
  --bs-focus-ring-color:   rgba(15,181,174,.32);

  --tm-ease: cubic-bezier(.22,.8,.36,1);
}

/* ==========================================================================
   1. Typography
   ========================================================================== */

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--tm-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading_text, .section_heading_text, .page_title, .item_title {
  font-family: var(--bs-font-heading);
  color: var(--tm-navy);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  letter-spacing: -.015em;
  line-height: 1.18;
}

.heading_text, h1.page_title {
  font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.65rem);
  font-weight: 600;
  letter-spacing: -.028em;
}

.section_heading_text {
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.7rem);
  margin-bottom: 14px;
}

.item_title { font-size: 1.28rem; line-height: 1.3; }

.heading_description,
.section_heading_description {
  font-family: var(--bs-font-body);
  font-size: 1.06rem;
  color: var(--tm-body);
  max-width: 62ch;
}
.section_heading.text-center .section_heading_description { margin-inline: auto; }

/* Eyebrow — small caps label above a section heading. Used only where the
   label adds information (the condition group, the page's role), not as decor. */
.tm_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--bs-font-body);
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tm-teal-ink);
  margin-bottom: 14px;
}
/* The signature mark: two bars, sage + dusty blue — the two figures in the
   logo, mid-conversation. Appears wherever a section announces itself. */
.tm_eyebrow::before {
  content: "";
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tm-blue) 0 50%, var(--tm-sage) 50% 100%);
  flex: none;
}
.section_heading.text-center .tm_eyebrow { justify-content: center; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.btn {
  font-family: var(--bs-font-body);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: .005em;
  border-radius: 100px;
  padding: 15px 30px;
  transition: all .35s var(--tm-ease);
  border-width: 1.5px;
}

/* Solid --tm-teal-btn rather than a gradient: the lighter stop a gradient needs
   to read as "bright" only reaches ~3.5:1 behind white text, and the label sits
   across the whole button, so there is no safe part of it to put that stop in.
   The brightness is carried by the aqua glow beneath instead, which sits
   outside the text area entirely. White on this fill is 4.9:1. */
.btn.btn-primary {
  background: var(--tm-teal-btn);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15,181,174,.34), 0 2px 6px rgba(11,63,69,.10);
}
/* Hover darkens toward the ink — both stops are darker than the resting fill,
   so contrast only improves. */
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: var(--tm-ink);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 30px rgba(15,181,174,.42), 0 3px 8px rgba(11,63,69,.14);
  transform: translateY(-2px);
}

.btn.btn-outline-secondary {
  background: transparent;
  border-color: var(--tm-navy);
  color: var(--tm-navy);
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus-visible {
  background: var(--tm-navy);
  border-color: var(--tm-navy);
  color: #fff;
  transform: translateY(-2px);
}

/* .tm_on_dark used to mark navy fields and inverted its buttons to white. Those
   fields are light mint now, so a white button would be invisible on them — the
   buttons keep their normal light-field treatment instead. The class is left in
   the markup (it is on ~20 pages) and simply carries no inversion any more. */
.tm_on_dark .btn.btn-outline-secondary {
  border-color: var(--tm-ink);
  color: var(--tm-ink);
}
.tm_on_dark .btn.btn-outline-secondary:hover,
.tm_on_dark .btn.btn-outline-secondary:focus-visible {
  background: var(--tm-ink);
  border-color: var(--tm-ink);
  color: #fff;
}

/* Neutralise the template's "roll-up" label effect (style.css:745-771). It
   slides .btn_text up by -76% on hover to swap it for a duplicate drawn with
   `content: attr(data-text)`. Our buttons carry no data-text attribute, so the
   duplicate is empty: the real label slid up out of the button and nothing
   replaced it. Restoring it would mean adding data-text to 170 buttons for a
   motion that fights the calm tone of the rest of the site, so the lift and the
   colour change carry the hover instead. */
.btn { overflow: visible; }
.btn .btn_text { transition: none; }
.btn:hover .btn_text,
.btn:focus-visible .btn_text { transform: none; }
.btn .btn_text::before { content: none; }

.btn_icon { transition: transform .35s var(--tm-ease); }
.btn:hover .btn_icon { transform: translate(2px,-2px); }

.btn-link {
  font-family: var(--bs-font-body);
  font-weight: 600;
  color: var(--tm-teal-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-link::after {
  content: "\2192";
  transition: transform .3s var(--tm-ease);
}
/* The template's markup already supplies its own arrow in .btn_icon — don't
   add a second one via the pseudo-element. */
.btn-link:has(.btn_icon)::after { content: none; }
.btn-link .btn_icon {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--tm-mist);
  /* Must be set explicitly: the template's own colour here is white, which is
     invisible against the mist chip. */
  color: var(--tm-teal-ink);
  font-size: .72rem;
  transition: background .3s var(--tm-ease), color .3s, transform .3s var(--tm-ease);
}
.btn-link:hover .btn_icon {
  background: var(--tm-teal-btn);
  color: #fff;
  transform: translate(2px,-2px);
}
.btn-link:hover { color: var(--tm-navy); }
.btn-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   3. Header
   ========================================================================== */

.site_header {
  padding: 30px 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding .3s var(--tm-ease), box-shadow .3s var(--tm-ease), border-color .3s;
}
.site_header.sticky {
  padding: 18px 0;
  background: rgba(255,255,255,.97);
  border-bottom-color: var(--tm-line);
  box-shadow: 0 4px 24px rgba(11,63,69,.07);
}

.site_logo img { height: auto; width: 100%; transition: height .3s var(--tm-ease); }
.site_header.sticky .site_logo img { height: 70px; }
.site_footer .site_logo img { height: 74px; }
.site_header [class*=col-] {
  padding-top:0px;
  padding-bottom:0px
}
@media (max-width: 575px) { .site_logo img { height: 62px; } }

/* Keep the whole menu on one line — six items plus a dropdown caret is tight
   at 992–1199px, so padding and size step down rather than wrapping. */
.main_menu_list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main_menu_list > li { position: relative; }
.main_menu_list > li > .nav-link {
  font-family: var(--bs-font-body);
  font-weight: 500;
  font-size: .93rem;
  color: var(--tm-navy);
  letter-spacing: .002em;
  white-space: nowrap;
  padding: 10px 12px;
  display: block;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .main_menu_list > li > .nav-link { font-size: .8rem; padding: 10px 5px; }
  .site_logo img { height: 68px; }
  .site_header.sticky .site_logo img { height: 56px; }
  .btn_hotline { padding: 10px 13px; font-size: .8rem; }
}
/* Seven nav items plus the phone button do not fit between 992 and 1080px.
   Drop the number down to the icon there so the menu keeps its full width. */
@media (min-width: 992px) and (max-width: 1080px) {
  .main_menu_list > li > .nav-link { font-size: .76rem; padding: 10px 3px; }
  .btn_hotline { padding: 10px 12px; }
  .btn_hotline .btn_text { display: none; }
}
.main_menu_list > li > .nav-link:hover,
.main_menu_list > li.active > .nav-link { color: var(--tm-teal-ink); }

/* Visually hidden but read aloud — used to tell screen reader users that a
   link leaves the site. */
.tm_sr_only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The sister clinic link points off-site, so it is tinted and carries an
   arrow to set it apart from the site's own sections. */
.main_menu_list > li > .nav-link.tm_nav_external {
  color: var(--tm-teal-ink);
  font-weight: 600;
}
.main_menu_list > li > .nav-link.tm_nav_external i {
  font-size: .7em;
  margin-left: 4px;
  vertical-align: baseline;
}
.main_menu_list > li > .nav-link.tm_nav_external:hover { color: var(--tm-navy); }

/* Same fix as the breadcrumb separator: the template's caret uses an unloaded
   Font Awesome family. Draw it in CSS and rotate it when the menu opens. */
.main_menu_list .dropdown > a::after,
.main_menu_list .dropdown-toggle::after {
  content: "";
  float: none;
  display: inline-block;
  width: .34em;
  height: .34em;
  margin: -3px 0 0 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  border-top: 0;
  border-left: 0;
  opacity: .55;
  transition: transform .3s var(--tm-ease), opacity .3s;
}
.main_menu_list .dropdown:hover > a::after { opacity: 1; }

.main_menu_list .dropdown-menu {
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11,63,69,.13);
  padding: 10px;
  background: #fff;
}
.main_menu_list .dropdown-menu a {
  font-family: var(--bs-font-body);
  font-size: .92rem;
  font-weight: 500;
  color: var(--tm-navy);
  border-radius: 9px;
  padding: 9px 14px;
  transition: background .2s, color .2s;
}
.main_menu_list .dropdown-menu a:hover {
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
}
/* The conditions menu is long — give it two columns on desktop */
.tm_menu_wide { min-width: 460px; }
@media (min-width: 992px) {
  .tm_menu_wide { columns: 2; column-gap: 6px; }
  .tm_menu_wide > li { break-inside: avoid; }
}

.btn_hotline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bs-font-body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--tm-navy);
  padding: 11px 22px;
  border-radius: 100px;
  background: var(--tm-mist);
  transition: all .3s var(--tm-ease);
}
/* style.css:964 gives this icon a 36px --bs-primary pill and a white glyph.
   Both the pill and our teal glyph colour resolve to the same teal now, which
   rendered as a plain filled circle with the phone hidden inside it. Drop the
   pill and let the glyph sit directly on the mist chip. The `flex`/`width`
   resets are needed because the template sizes it as a 36px flex item. */
.btn_hotline .btn_icon {
  background: none;
  width: auto;
  height: auto;
  flex: none;
  margin-right: 0;
  border-radius: 0;
  color: var(--tm-teal-ink);
  font-size: .85rem;
}
/* The template also animates this glyph on a 1.5s infinite loop (phoneRinging).
   A permanently shaking icon in the header is noise on a psychiatry site. */
.btn_hotline .btn_icon i { animation: none; }
.btn_hotline:hover {
  background: var(--tm-teal-btn);
  color: #fff;
}
.btn_hotline:hover .btn_icon { color: #fff; }

.mobile_menu_btn {
  background: var(--tm-mist);
  border: 0;
  color: var(--tm-navy);
  width: 46px; height: 46px;
  border-radius: 12px;
}

/* ==========================================================================
   4. Page banner (breadcrumb)
   ========================================================================== */

.page_banner {
  background: linear-gradient(168deg, #DFF6F4 0%, var(--tm-mist) 44%, #F4FDFC 78%, var(--tm-paper) 100%);
  padding: 66px 0 70px;
  border-bottom: 1px solid var(--tm-line);
}
.site_header + main > .page_banner { margin-top: 140px; }

.page_title { margin-bottom: 0; }

.breadcrumb_nav {
  font-family: var(--bs-font-body);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb_nav a { color: var(--tm-teal-ink); font-weight: 500; }
.breadcrumb_nav a:hover { color: var(--tm-navy); }
.breadcrumb_nav > li { color: var(--tm-slate); position: static; }

/* The template draws the separator with a Font Awesome glyph via a family name
   that isn't loaded here, which renders as tofu, and positions it absolutely.
   Draw a CSS chevron inline instead — no font dependency, and it stays on the
   baseline. The `top/right/position` resets undo the template rule. */
.breadcrumb_nav > li:not(:last-child) {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
}
.breadcrumb_nav > li:not(:last-child)::after {
  content: "";
  position: static;
  top: auto;
  right: auto;
  display: inline-block;
  width: .36em;
  height: .36em;
  margin-left: 10px;
  border-right: 1.6px solid #8FB3B2;
  border-top: 1.6px solid #8FB3B2;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  font-size: inherit;
  line-height: 1;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero_section {
  background: linear-gradient(168deg, #DFF6F4 0%, var(--tm-mist) 38%, #F4FDFC 72%, var(--tm-paper) 100%);
  padding: 212px 0 96px;
  position: relative;
  overflow: hidden;
}
/* A single soft aqua bloom behind the hero. This is where the palette is
   allowed to be at full strength — it is a large, diffuse light source, not a
   field behind text, so it brightens the page without touching contrast. */
.hero_section::before {
  content: "";
  position: absolute;
  left: -14%; top: -46%;
  width: 780px; height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,220,.40), rgba(110,231,220,0) 66%);
  pointer-events: none;
  z-index: 0;
}
.hero_section > * { position: relative; z-index: 1; }

.hero_content_wrap .heading_text { margin-bottom: 20px; }
.hero_content_wrap .heading_description { font-size: 1.12rem; margin-bottom: 32px; }

/* style.css wraps this in 60px padding and two coloured pseudo-element slabs.
   We use it as a plain framed image, so both are removed. */
.hero_image_wrap {
  position: relative;
  padding: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(11,63,69,.16);
}
.hero_image_wrap::before,
.hero_image_wrap::after { content: none; display: none; }
.hero_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Credential strip under the hero copy — facts, not decoration */
.tm_hero_creds {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid var(--tm-line);
  list-style: none;
  padding-left: 0;
}
.tm_hero_creds li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bs-font-body);
  font-size: .93rem;
  font-weight: 500;
  color: var(--tm-navy);
}
.tm_hero_creds i { color: var(--tm-teal); font-size: 1rem; }

/* ==========================================================================
   6. Sections & surfaces
   ========================================================================== */

.section_space_lg { padding: 104px 0; }
.section_space    { padding: 76px 0; }
.bg_primary_light { background: var(--tm-mist); }
.tm_bg_paper      { background: var(--tm-paper); }

.section_heading { margin-bottom: 52px; }

/* ==========================================================================
   7. Service cards
   ========================================================================== */

.service_item {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 20px;
  padding: 32px 28px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--tm-ease), box-shadow .4s var(--tm-ease), border-color .4s;
}
/* Sage/blue dialogue bar reveals on hover — the signature, used sparingly */
.service_item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tm-blue), var(--tm-sage));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--tm-ease);
}
.service_item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(11,63,69,.13);
  border-color: transparent;
}
.service_item:hover::before { transform: scaleX(1); }

.service_item .item_icon {
  width: 58px; height: 58px;
  border-radius: 15px;
  background: var(--tm-mist);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--tm-teal-ink);
  font-size: 1.4rem;
  transition: background .35s var(--tm-ease), color .35s var(--tm-ease);
}
.service_item:hover .item_icon { background: var(--tm-teal-btn); color: #fff; }
.service_item .item_icon img { width: 30px; height: 30px; }

.service_item .item_title { margin-bottom: 10px; }
.service_item p { font-size: .97rem; margin-bottom: 18px; }
.service_item .btn-link { margin-top: auto; }
/* The template wraps card text in .item_contact — keep it flexing so the
   link still pins to the bottom of equal-height cards. */
.service_item .item_contact {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service_item .item_contact .btn-link { margin-top: auto; }

/* ==========================================================================
   7b. Conditions index (services.html)
   The page is a directory, not a card wall. A sticky group label sits beside a
   numbered list of conditions; each row reveals its own photograph on hover or
   keyboard focus. Rows adapt to the group size (5/2/4/3), so unlike the old
   3-column grid there is no orphan-row problem.
   ========================================================================== */

.tm_index_page { padding: 84px 0 96px; }

/* --- Opening statement --- */
/* The jump nav sits under the statement, not beside it — as a sibling column it
   competed for width and crushed the paragraph to a few words per line. */
.tm_index_lede {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 34px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--tm-line);
}
.tm_lede_text {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.32rem);
  line-height: 1.62;
  color: var(--tm-navy);
  max-width: 62ch;
  margin: 0;
}
.tm_lede_text strong {
  font-family: var(--bs-font-heading);
  font-weight: 600;
  color: var(--tm-teal-ink);
  white-space: nowrap;
}

.tm_jump { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tm_jump_label {
  font-family: var(--bs-font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tm-slate);
}
.tm_jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tm_jump a {
  display: block;
  font-family: var(--bs-font-body);
  font-size: .86rem;
  font-weight: 500;
  color: var(--tm-navy);
  padding: 7px 15px;
  border: 1px solid var(--tm-line);
  border-radius: 100px;
  transition: all .28s var(--tm-ease);
}
.tm_jump a:hover, .tm_jump a:focus-visible {
  background: var(--tm-navy);
  border-color: var(--tm-navy);
  color: #fff;
}

/* --- Group band --- */
.tm_band {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 68px;
  padding: 58px 0;
  border-bottom: 1px solid var(--tm-line);
}
.tm_band:last-of-type { border-bottom: 0; }

.tm_band_aside { position: sticky; top: 128px; align-self: start; }
.tm_band_kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--bs-font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tm-teal-ink);
  margin: 0 0 12px;
}
/* Signature mark: the sage + dusty-blue pair from the logo's two figures. */
.tm_band_kicker::before {
  content: "";
  width: 26px; height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tm-blue) 0 50%, var(--tm-sage) 50% 100%);
  flex: none;
}
.tm_band_title {
  font-family: var(--bs-font-heading);
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.95rem);
  line-height: 1.2;
  color: var(--tm-navy);
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
.tm_band_desc { font-size: .97rem; line-height: 1.62; margin: 0 0 16px; }
.tm_band_count {
  font-family: var(--bs-font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--tm-slate);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--tm-line);
}

/* --- The index rows --- */
.tm_idx { list-style: none; margin: 0; padding: 0; }
.tm_idx_row { position: relative; border-top: 1px solid var(--tm-line); }
.tm_idx_row:first-child { border-top: 0; }
.tm_idx_row:last-child { border-bottom: 1px solid var(--tm-line); }

.tm_idx_link {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 4px;
  padding: 22px 8px 22px 4px;
  transition: padding-left .38s var(--tm-ease), background .3s var(--tm-ease);
}
.tm_idx_link:hover,
.tm_idx_link:focus-visible { padding-left: 18px; }

/* Rendered as generated content, not a text node: the numbering is a visual
   ordinal for the <ol>, which already conveys order to assistive tech. Keeping
   it out of the accessibility tree lets it stay deliberately faint without
   failing a text-contrast rule that does not apply to it. */
.tm_idx_num {
  font-family: var(--bs-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: transparent;
  transition: color .3s var(--tm-ease);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.tm_idx_num::before {
  content: attr(data-n);
  color: #A6CFCC;
  transition: color .3s var(--tm-ease);
}
.tm_idx_link:hover .tm_idx_num::before,
.tm_idx_link:focus-visible .tm_idx_num::before { color: var(--tm-teal-ink); }
.tm_idx_link:hover .tm_idx_num,
.tm_idx_link:focus-visible .tm_idx_num { color: var(--tm-teal-ink); }

.tm_idx_body { min-width: 0; }
.tm_idx_name {
  display: block;
  font-family: var(--bs-font-heading);
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 600;
  color: var(--tm-navy);
  letter-spacing: -.018em;
  line-height: 1.24;
  transition: color .3s var(--tm-ease);
}
.tm_idx_link:hover .tm_idx_name,
.tm_idx_link:focus-visible .tm_idx_name { color: var(--tm-teal-ink); }
.tm_idx_desc {
  display: block;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tm-body);
  margin-top: 5px;
  max-width: 56ch;
}

.tm_idx_go {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
  font-size: .78rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .32s var(--tm-ease), transform .32s var(--tm-ease),
              background .3s, color .3s;
}
.tm_idx_link:hover .tm_idx_go,
.tm_idx_link:focus-visible .tm_idx_go {
  opacity: 1;
  transform: none;
  background: var(--tm-teal-btn);
  color: #fff;
}

/* The photograph, revealed beside the row it belongs to. Pointer-only: it is
   decorative, and on touch it would just cover the text. */
.tm_idx_thumb {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 200px;
  aspect-ratio: 7/5;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(.94) rotate(-1.5deg);
  transition: opacity .42s var(--tm-ease), transform .42s var(--tm-ease),
              visibility 0s linear .42s;
  box-shadow: 0 18px 40px rgba(11,63,69,.20);
  display: none;
  z-index: 2;
}
.tm_idx_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (hover: hover) and (min-width: 1200px) {
  /* Reserve the column the photograph occupies so it never sits over the text,
     and clip it to the row so it cannot bleed past the container edge. */
  /* Reserve the column the photograph occupies, and let it sit inside the row's
     height so nothing is clipped (rows are ~128px; the image is height-led). */
  .tm_idx_row { overflow: hidden; }
  .tm_idx_thumb {
    display: block;
    width: auto;
    height: calc(100% - 26px);
    aspect-ratio: 7/5;
  }
  .tm_idx_link { grid-template-columns: 54px minmax(0, 1fr) 244px; }
  .tm_idx_link:hover ~ .tm_idx_thumb,
  .tm_idx_link:focus-visible ~ .tm_idx_thumb {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1) rotate(0deg);
    transition: opacity .42s var(--tm-ease), transform .42s var(--tm-ease),
                visibility 0s;
  }
  .tm_idx_go { justify-self: start; }
}

.tm_index_foot {
  margin: 54px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 1rem;
  color: var(--tm-body);
}

/* The closing prompt on the conditions index is the one line that catches
   people whose concern is not on the list, so it is lifted out of body copy
   into a bordered card and set at heading weight. */
.tm_index_foot.tm_index_foot_cta {
  max-width: 66ch;
  padding: 30px 34px;
  background: var(--tm-mist);
  border: 1px solid var(--tm-line);
  border-radius: 18px;
  box-shadow: 0 6px 26px rgba(11,63,69,.06);
  font-family: var(--bs-font-body);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--tm-ink);
}
.tm_index_foot.tm_index_foot_cta a {
  color: var(--tm-teal-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tm_index_foot.tm_index_foot_cta a:hover { color: var(--tm-navy); }
@media (max-width: 575px) {
  .tm_index_foot.tm_index_foot_cta { padding: 24px 20px; font-size: 1.04rem; }
}

@media (max-width: 1199px) {
  .tm_band { grid-template-columns: 260px minmax(0, 1fr); gap: 0 44px; }
}
@media (max-width: 991px) {
  .tm_index_page { padding: 60px 0 72px; }
  .tm_index_lede { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .tm_band {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 42px 0;
  }
  .tm_band_aside { position: static; }
  .tm_band_count { display: inline-block; }
}
@media (max-width: 575px) {
  /* Align the number with the condition name rather than centring it against
     the whole row, which left it floating beside the description. */
  .tm_idx_link {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    padding: 18px 0;
  }
  .tm_idx_num { padding-top: .34em; }
  .tm_idx_go { display: none; }
  .tm_idx_link:hover, .tm_idx_link:focus-visible { padding-left: 6px; }
}

/* ==========================================================================
   8. Condition detail pages
   ========================================================================== */

.tm_detail_body { font-size: 1.06rem; }
.tm_detail_body h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  margin: 46px 0 16px;
}
.tm_detail_body h2:first-child { margin-top: 0; }
.tm_detail_body h3 { font-size: 1.25rem; margin: 32px 0 12px; }
.tm_detail_body p { margin-bottom: 18px; }
.tm_detail_body > p:first-of-type {
  font-size: 1.16rem;
  line-height: 1.66;
  color: var(--tm-navy);
}

/* Symptom list — checkmarks in teal, two columns where there's room */
.tm_symptom_list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 12px 30px;
}
@media (min-width: 768px) { .tm_symptom_list { grid-template-columns: 1fr 1fr; } }
.tm_symptom_list li {
  position: relative;
  padding-left: 32px;
  font-size: 1rem;
  line-height: 1.6;
}
.tm_symptom_list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: 0; top: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
  font-size: .62rem;
  display: grid;
  place-items: center;
}

/* Callout — "when to seek help". Sage rail, because it is guidance, not alarm. */
.tm_callout {
  border-left: 4px solid var(--tm-sage);
  background: linear-gradient(90deg, rgba(127,197,168,.16), rgba(127,197,168,0));
  border-radius: 0 14px 14px 0;
  padding: 24px 26px;
  margin: 30px 0;
}
.tm_callout h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--tm-navy);
}
.tm_callout p:last-child { margin-bottom: 0; }

/* Clinical note — dusty blue rail, for scope/limitation statements */
.tm_note {
  border-left: 4px solid var(--tm-blue);
  background: linear-gradient(90deg, rgba(111,179,201,.16), rgba(111,179,201,0));
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: .97rem;
}
.tm_note p:last-child { margin-bottom: 0; }

/* --- Template service-detail components, re-skinned -----------------------
   These class names come from the purchased template's service_details page
   (details_content / details_info_title / info_list / service_author /
   service_cost_info / prev_next_post_nav). We keep its structure and give it
   the Trio Mindspace palette and type. */

/* --- Condition page shell: article + sticky rail ---------------------------
   The old layout centred a col-lg-8 and left ~205px of dead gutter down both
   sides of a 5,800px page. The rail fills that space with wayfinding and a
   persistent booking card, and the article keeps a proper ~68ch measure. */

.tm_detail { padding: 76px 0 96px; }

.tm_detail_grid {
  display: grid;
  /* The article track is capped here rather than with a max-width on
     .tm_detail_main. A 1fr track plus a max-width on its child left the
     leftover track empty — at 1600px that was 288px of dead space on top of
     the 72px gap, reading as a ~360px white channel beside the text. Capping
     the track means the grid never allocates width the article won't use, and
     `justify-content: center` puts any true surplus outside both columns. */
  grid-template-columns: minmax(0, 720px) 330px;
  justify-content: center;
  gap: 0 72px;
  /* `stretch` (not `start`) so the rail column spans the article's full height.
     A sticky child only travels within its parent's box, so a collapsed column
     would stop following after ~770px and leave the gutter empty again. */
  align-items: stretch;
}

/* One rhythm for the whole article. Each block used to carry its own top and
   bottom margin, which collapsed into seven different gaps (40/46/46/34/34/34/54).
   The column owns the spacing now and the blocks own none, so every section is
   separated by exactly the same measure. */
.tm_detail_main {
  min-width: 0;
  display: flow-root;
}
/* The rules that enforce this live at the end of the file, after every
   component that would otherwise override them on source order. */
@media (max-width: 991px) { .tm_detail_main { --tm-flow: 40px; } }
@media (max-width: 575px) { .tm_detail_main { --tm-flow: 34px; } }

/* The prev/next nav closes the article, so it gets extra separation. */
.tm_detail_main > .prev_next_post_nav { margin-top: calc(var(--tm-flow, 52px) + 14px); }

/* Anchor targets must clear the fixed header when jumped to from the rail. */
.tm_detail_main [id] { scroll-margin-top: 118px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.tm_detail_lede {
  font-size: clamp(1.12rem, 1.02rem + .55vw, 1.36rem);
  line-height: 1.6;
  color: var(--tm-navy);
  margin: 0 0 34px;
}

/* --- Rail --- */
/* style.css sets `.page_wrapper { overflow: hidden }` to contain the template's
   decorative shapes. That makes it a scroll container, which silently disables
   position:sticky for every descendant. `overflow-x: clip` contains horizontal
   overflow just as well without creating a scroll container, so sticky works. */
.page_wrapper { overflow: visible; overflow-x: clip; }

/* The rail column stretches to the article's height (block layout, so the
   sticky child is positioned against the full column) while .tm_rail_inner
   keeps its own natural height and travels down it. */
.tm_detail_rail { min-width: 0; display: block; }
.tm_rail_inner {
  position: sticky;
  top: 118px;
  display: grid;
  gap: 20px;
}

.tm_rail_kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--bs-font-body);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tm-teal-ink);
  margin: 0 0 14px;
}
.tm_rail_kicker::before {
  content: "";
  width: 22px; height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tm-blue) 0 50%, var(--tm-sage) 50% 100%);
  flex: none;
}

/* Table of contents — mirrors the numbered directory on the index page. */
.tm_toc {
  border: 1px solid var(--tm-line);
  border-radius: 18px;
  padding: 22px 22px 18px;
}
.tm_toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.tm_toc li { counter-increment: toc; }
.tm_toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px;
  align-items: baseline;
  padding: 8px 0;
  font-family: var(--bs-font-body);
  font-size: .93rem;
  font-weight: 500;
  color: var(--tm-navy);
  border-top: 1px solid transparent;
  transition: color .26s var(--tm-ease), padding-left .26s var(--tm-ease);
}
.tm_toc li + li a { border-top-color: var(--tm-line); }
.tm_toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: .72rem;
  font-weight: 700;
  color: #A6CFCC;
  font-variant-numeric: tabular-nums;
  transition: color .26s var(--tm-ease);
}
.tm_toc a:hover, .tm_toc a:focus-visible { color: var(--tm-teal-ink); padding-left: 4px; }
.tm_toc a:hover::before, .tm_toc a:focus-visible::before { color: var(--tm-teal-ink); }

/* Current section, set by the scroll-spy in brand.js */
.tm_toc a.is-current { color: var(--tm-teal-ink); font-weight: 600; }
.tm_toc a.is-current::before { color: var(--tm-teal-ink); }

/* Booking card */
.tm_book_card {
  background: linear-gradient(158deg, var(--tm-mist) 0%, #F0FBFA 100%);
  border-radius: 18px;
  padding: 24px 22px;
}
.tm_book_line { font-size: .95rem; margin: 0 0 16px; }
.tm_book_card .btn { width: 100%; justify-content: center; }
.tm_book_card .tm_appt_meta { margin: 18px 0 0; }
.tm_book_doc {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tm-mist-deep);
}
.tm_book_doc strong {
  display: block;
  font-family: var(--bs-font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tm-navy);
}
.tm_book_doc span {
  display: block;
  font-size: .87rem;
  color: var(--tm-slate);
  margin-bottom: 10px;
}
/* The card is already mist-tinted, so the default mist-on-mist icon chip
   disappears. Use a plain inline arrow here instead of the chip. */
.tm_book_doc .btn_icon {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  color: var(--tm-teal-ink);
  font-size: .78rem;
}
.tm_book_doc .btn-link:hover .btn_icon {
  background: none;
  color: var(--tm-navy);
}

/* --- Symptom panel: the "is this me?" moment, given real weight --- */
.tm_symptoms {
  background: var(--tm-paper);
  border: 1px solid var(--tm-line);
  border-radius: 22px;
  padding: 34px 34px 30px;
  /* Spacing comes from .tm_detail_main's flow rule, not from here. */
  margin: 0;
}
.tm_symptoms_head .details_item_title { margin-top: 0; }
.tm_symptoms_head p { font-size: 1rem; margin-bottom: 22px; }
.tm_symptoms .info_list.unordered_list_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 30px;
  margin: 0;
}
@media (max-width: 767px) {
  .tm_symptoms { padding: 26px 22px 22px; }
  .tm_symptoms .info_list.unordered_list_block { grid-template-columns: 1fr; }
}

.service_details_section .details_content { font-size: 1.06rem; }
.service_details_section .details_content p { margin-bottom: 18px; }
.service_details_section .details_content > p:first-child {
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--tm-navy);
}

.details_item_title {
  font-family: var(--bs-font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  color: var(--tm-navy);
  margin: 34px 0 14px;
}
.details_info_title {
  font-family: var(--bs-font-heading);
  font-size: 1.4rem;
  color: var(--tm-navy);
  margin: 0 0 14px;
}

/* Below the rail breakpoint the aside stops being a column and becomes a
   booking block after the article, so the page still ends on a clear action. */
@media (max-width: 1199px) {
  .tm_detail_grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 0 44px; }
}
@media (max-width: 991px) {
  .tm_detail { padding: 56px 0 72px; }
  .tm_detail_grid { grid-template-columns: 1fr; gap: 44px; }
  .tm_detail_main { max-width: none; }
  .tm_rail_inner {
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
}
@media (max-width: 767px) {
  .tm_rail_inner { grid-template-columns: 1fr; }
  /* The article headings already provide wayfinding once everything is stacked. */
  .tm_toc { display: none; }
}

/* Full-bleed figure between copy blocks. Top-level spacing is owned by
   .tm_detail_main's flow rule; the inline variant sits inside a text block and
   keeps its own tighter margins. */
.tm_detail_figure {
  border-radius: 24px;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 21/9;
  box-shadow: 0 20px 46px rgba(11,63,69,.13);
}
.tm_detail_figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm_detail_figure_inline {
  aspect-ratio: 16/9;
  margin: 28px 0;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(11,63,69,.10);
}

/* Symptom list — the template's info_list, with teal circle-checks */
.info_list.unordered_list_block { list-style: none; padding: 0; margin: 0 0 6px; }
.info_list.unordered_list_block > li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 9px 0;
  font-size: 1rem;
  line-height: 1.55;
}
.info_list.unordered_list_block .info_icon {
  flex: none;
  color: var(--tm-teal-ink);
  font-size: 1.02rem;
  margin-top: 3px;
}
.info_list.unordered_list_block .info_text { color: var(--tm-body); }

/* The two cards: consultant + booking */
.service_author,
.service_cost_info {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 20px;
  padding: 30px 28px;
  height: 100%;
  box-shadow: var(--bs-box-shadow);
}
.service_cost_info { background: var(--tm-mist); border-color: transparent; }
.author_name {
  font-family: var(--bs-font-heading);
  font-size: 1.18rem;
  color: var(--tm-navy);
  margin: 0 0 4px;
}
/* style.css sets this to the raw logo teal (3.8:1 on white). Scoped selector
   so the accessible ink teal wins. */
.service_author .author_designation,
.author_designation {
  display: block;
  font-family: var(--bs-font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--tm-teal-ink);
  margin-bottom: 12px;
}
.service_author p, .service_cost_info p { font-size: .97rem; margin-bottom: 16px; }

.tm_appt_meta { list-style: none; padding: 0; margin: 0 0 20px; }
.tm_appt_meta li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  font-size: .96rem;
}
.tm_appt_meta i { color: var(--tm-teal-ink); width: 18px; flex: none; }
.tm_appt_meta a { color: var(--tm-navy); font-weight: 600; }
.service_cost_info .btn { width: 100%; justify-content: center; }

/* Previous / next condition */
.prev_next_post_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 54px;
  padding-top: 32px;
  border-top: 1px solid var(--tm-line);
}
.prev_next_post_nav .nav_item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border: 1px solid var(--tm-line);
  border-radius: 16px;
  flex: 1 1 240px;
  transition: all .32s var(--tm-ease);
}
.prev_next_post_nav .next_post { justify-content: flex-end; text-align: right; }
.prev_next_post_nav .nav_item:hover {
  border-color: transparent;
  background: var(--tm-mist);
  transform: translateY(-3px);
}
.prev_next_post_nav .item_icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
  display: grid;
  place-items: center;
  font-size: .85rem;
  flex: none;
  transition: background .3s, color .3s;
}
.prev_next_post_nav .nav_item:hover .item_icon {
  background: var(--tm-teal-btn);
  color: #fff;
}
.prev_next_post_nav small {
  display: block;
  font-family: var(--bs-font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tm-slate);
  margin-bottom: 3px;
}
.prev_next_post_nav strong {
  font-family: var(--bs-font-heading);
  font-size: 1.05rem;
  color: var(--tm-navy);
  font-weight: 600;
}

/* Sticky booking card beside the condition copy */
.tm_side_card {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: var(--bs-box-shadow);
}
@media (min-width: 992px) { .tm_side_card { position: sticky; top: 118px; } }
.tm_side_card h3 { font-size: 1.2rem; margin: 0 0 10px; }
.tm_side_card p  { font-size: .95rem; }
.tm_side_card .btn { width: 100%; justify-content: center; }

.tm_side_card_img {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 4/3;
}
.tm_side_card_img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Related-conditions rail */
.tm_related_list { list-style: none; padding: 0; margin: 0; }
.tm_related_list li + li { border-top: 1px solid var(--tm-line); }
.tm_related_list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  font-family: var(--bs-font-body);
  font-size: .95rem;
  font-weight: 500;
  color: var(--tm-navy);
  transition: color .25s, padding-left .25s var(--tm-ease);
}
.tm_related_list a::after {
  content: "\2192";
  color: var(--tm-teal);
  opacity: 0;
  transition: opacity .25s, transform .25s var(--tm-ease);
}
.tm_related_list a:hover { color: var(--tm-teal-ink); padding-left: 6px; }
.tm_related_list a:hover::after { opacity: 1; transform: translateX(3px); }

/* ==========================================================================
   9. About / doctor profile
   ========================================================================== */

.tm_doctor_photo {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(11,63,69,.15);
  background: var(--tm-mist);
}
.tm_doctor_photo img { width: 100%; display: block; }

/* Placeholder shown until Dr. Surana's own photograph is supplied. */
.tm_photo_placeholder {
  aspect-ratio: 4/5;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  padding: 36px;
  background:
    repeating-linear-gradient(-45deg, rgba(15,181,174,.05) 0 12px, transparent 12px 24px),
    var(--tm-mist);
  border: 2px dashed var(--tm-teal);
  border-radius: 22px;
  color: var(--tm-teal-ink);
  font-family: var(--bs-font-body);
}
.tm_photo_placeholder i { font-size: 2.4rem; }
.tm_photo_placeholder strong { font-size: 1.02rem; font-weight: 600; }
.tm_photo_placeholder span { font-size: .87rem; color: var(--tm-slate); max-width: 30ch; }

.tm_cred_list { list-style: none; padding: 0; margin: 0; }
.tm_cred_list li {
  display: flex;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid var(--tm-line);
}
.tm_cred_list li:last-child { border-bottom: 0; }
.tm_cred_list i {
  color: var(--tm-teal);
  font-size: 1.05rem;
  margin-top: 4px;
  flex: none;
}
.tm_cred_list strong {
  display: block;
  font-family: var(--bs-font-body);
  font-weight: 600;
  color: var(--tm-navy);
  font-size: 1rem;
}
.tm_cred_list span { font-size: .95rem; }

/* ==========================================================================
   10. Approach / process steps
   ========================================================================== */

.tm_steps { counter-reset: tmstep; list-style: none; padding: 0; margin: 0; }
.tm_step {
  counter-increment: tmstep;
  position: relative;
  padding: 0 0 34px 62px;
}
.tm_step::before {
  content: counter(tmstep, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: .82rem;
  display: grid;
  place-items: center;
}
/* The connecting rail — these steps are a real sequence, so the line earns its place */
.tm_step::after {
  content: "";
  position: absolute;
  left: 20.5px; top: 48px; bottom: 8px;
  width: 1px;
  background: var(--tm-line);
}
.tm_step:last-child { padding-bottom: 0; }
.tm_step:last-child::after { display: none; }
.tm_step h3 { font-size: 1.15rem; margin: 8px 0 8px; }
.tm_step p  { font-size: .98rem; margin: 0; }

/* ==========================================================================
   11. Consultation / CTA banner
   ========================================================================== */

/* Light CTA band. There is no dark block anywhere on the page now, so this
   section separates itself from the white above it with a mint wash and a
   hairline rather than with a colour inversion. Every text colour below is a
   dark step on that light field — the old white-on-navy values would have
   been invisible here, so none of them survive. */
.consultation_section {
  position: relative;
  background: linear-gradient(135deg, #DAF5F2 0%, var(--tm-mist) 52%, #F0FCFB 100%);
  color: var(--tm-body);
  border-top: 1px solid var(--tm-line);
  border-bottom: 1px solid var(--tm-line);
  overflow: hidden;
}
.tm_cta_inner { padding: 78px 0; position: relative; z-index: 2; }
.consultation_section h2 {
  color: var(--tm-ink);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.7rem);
  margin-bottom: 14px;
}
.consultation_section p { color: var(--tm-body); margin-bottom: 0; }
.consultation_section .tm_eyebrow { color: var(--tm-teal-ink); }
.consultation_section .tm_cta_note {
  font-size: .89rem;
  color: var(--tm-slate);
  margin-top: 18px;
}
/* Soft aqua bloom — the only full-strength colour in the band. */
.consultation_section::after {
  content: "";
  position: absolute;
  right: -8%; top: -60%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,220,.50), transparent 68%);
  pointer-events: none;
}

/* ==========================================================================
   12. Forms
   ========================================================================== */

.tm_form_card {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 22px;
  padding: 38px 34px;
  box-shadow: var(--bs-box-shadow);
}
.tm_field { margin-bottom: 18px; }
.tm_field label {
  display: block;
  font-family: var(--bs-font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--tm-navy);
  margin-bottom: 7px;
}
.tm_field .tm_req { color: var(--tm-teal-ink); }
.tm_field input,
.tm_field select,
.tm_field textarea {
  width: 100%;
  font-family: var(--bs-font-body);
  font-size: .97rem;
  color: var(--tm-navy);
  background: var(--tm-paper);
  border: 1.5px solid var(--tm-line);
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.tm_field textarea { min-height: 132px; resize: vertical; }
.tm_field input:focus,
.tm_field select:focus,
.tm_field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--tm-teal);
  box-shadow: 0 0 0 4px var(--bs-focus-ring-color);
}
.tm_field input::placeholder,
.tm_field textarea::placeholder { color: #8AA5A6; }

.tm_form_note {
  font-size: .86rem;
  color: var(--tm-slate);
  margin-top: 16px;
}
.tm_form_status {
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
}
.tm_form_status[data-state="pending"] {
  color: var(--tm-navy);
  background: var(--tm-mist);
}
.tm_form_status[data-state="success"] {
  color: #165c43;
  background: #e8f6ef;
}
.tm_form_status[data-state="error"] {
  color: #8a2e2e;
  background: #fff0f0;
}
.tm_form_card button[type="submit"]:disabled {
  cursor: wait;
  opacity: .7;
}

/* Click-triggered appointment modal. */
body.tm_modal_open { overflow: hidden; }
.tm_booking_modal[hidden] { display: none; }
.tm_booking_modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .22s var(--tm-ease);
}
.tm_booking_modal.is-open { opacity: 1; }
.tm_booking_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 32, 48, .72);
  backdrop-filter: blur(5px);
}
.tm_booking_dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 590px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 24px;
  padding: 38px 38px 32px;
  box-shadow: 0 28px 90px rgba(5, 30, 45, .28);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .22s var(--tm-ease), transform .22s var(--tm-ease);
}
.tm_booking_modal.is-open .tm_booking_dialog {
  opacity: 1;
  transform: none;
}
.tm_booking_dialog:focus { outline: none; }
.tm_booking_dialog h2 {
  color: var(--tm-navy);
  font-size: clamp(1.85rem, 4vw, 2.4rem);
  margin: 10px 48px 10px 0;
}
.tm_booking_intro {
  color: var(--tm-body);
  line-height: 1.65;
  margin-bottom: 24px;
}
.tm_booking_close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tm-line);
  border-radius: 50%;
  background: var(--tm-paper);
  color: var(--tm-navy);
  font-size: 1.1rem;
  transition: background .2s, color .2s, transform .2s;
}
.tm_booking_close:hover {
  background: var(--tm-navy);
  color: #fff;
  transform: rotate(4deg);
}
.tm_booking_dialog .tm_field { margin-bottom: 15px; }
.tm_booking_dialog .tm_optional {
  color: var(--tm-slate);
  font-weight: 400;
}
.tm_booking_actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}
.tm_booking_actions .btn { flex: 1; justify-content: center; }
.tm_modal_later {
  border: 0;
  background: none;
  color: var(--tm-slate);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tm_modal_later:hover { color: var(--tm-navy); }
.tm_booking_privacy,
.tm_booking_emergency {
  font-size: .78rem;
  line-height: 1.55;
  margin: 14px 0 0;
}
.tm_booking_privacy { color: var(--tm-slate); }
.tm_booking_emergency {
  color: #724141;
  border-top: 1px solid var(--tm-line);
  padding-top: 12px;
}
.tm_booking_privacy a,
.tm_booking_emergency a { text-decoration: underline; text-underline-offset: 2px; }

/* Contact detail tiles */
.tm_contact_card {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 18px;
  padding: 28px 26px;
  height: 100%;
  transition: transform .35s var(--tm-ease), box-shadow .35s var(--tm-ease);
}
.tm_contact_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(11,63,69,.11);
}
.tm_contact_card .tm_ci {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  margin-bottom: 18px;
}
.tm_contact_card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tm_contact_card p, .tm_contact_card a {
  font-size: .97rem;
  color: var(--tm-body);
  display: block;
}
.tm_contact_card a:hover { color: var(--tm-teal-ink); }

/* ==========================================================================
   12b. Map widget
   The map sits in a card beside the address rather than running full-bleed, so
   the pin and the details it confirms are read together. The iframe is lazy and
   the card carries the address as real text — the location must still be
   readable if Google's embed is blocked or fails to load.
   ========================================================================== */

.tm_map_card {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(11,63,69,.09);
}
.tm_map_frame { position: relative; min-height: 380px; background: var(--tm-mist); }
.tm_map_frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tm_map_side {
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, var(--tm-mist) 0%, var(--tm-paper) 100%);
}
.tm_map_side h3 {
  font-size: 1.25rem;
  margin: 0 0 18px;
  color: var(--tm-ink);
}
.tm_map_meta { list-style: none; padding: 0; margin: 0 0 24px; }
.tm_map_meta li {
  display: flex;
  gap: 13px;
  padding: 10px 0;
  font-size: .95rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--tm-mist-deep);
}
.tm_map_meta li:last-child { border-bottom: 0; }
.tm_map_meta i { color: var(--tm-teal-ink); margin-top: 4px; flex: none; width: 17px; }
.tm_map_meta a { color: var(--tm-ink); font-weight: 600; }
.tm_map_meta a:hover { color: var(--tm-teal-ink); }
.tm_map_side .btn { margin-top: auto; justify-content: center; }

@media (max-width: 991px) {
  .tm_map_card { grid-template-columns: 1fr; }
  .tm_map_frame { min-height: 300px; order: -1; }
  .tm_map_side { padding: 28px 24px; }
}

/* ==========================================================================
   13. FAQ accordion
   ========================================================================== */

.tm_faq { border-top: 1px solid var(--tm-line); }
.tm_faq_item { border-bottom: 1px solid var(--tm-line); }
.tm_faq_q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 2px;
  font-family: var(--bs-font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--tm-navy);
  cursor: pointer;
  transition: color .25s;
}
.tm_faq_q:hover { color: var(--tm-teal-ink); }
.tm_faq_q .tm_faq_ico {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tm-mist);
  color: var(--tm-teal-ink);
  display: grid;
  place-items: center;
  font-size: .78rem;
  transition: transform .35s var(--tm-ease), background .3s, color .3s;
}
.tm_faq_item.open .tm_faq_q .tm_faq_ico {
  transform: rotate(45deg);
  background: var(--tm-teal-btn);
  color: #fff;
}
.tm_faq_a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--tm-ease);
}
.tm_faq_item.open .tm_faq_a { grid-template-rows: 1fr; }
.tm_faq_a > div { overflow: hidden; }
.tm_faq_a p {
  padding: 0 52px 24px 2px;
  margin: 0;
  font-size: 1rem;
}

/* ==========================================================================
   14. Blog
   ========================================================================== */

.tm_post_card {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--tm-ease), box-shadow .4s var(--tm-ease);
}
.tm_post_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(11,63,69,.13);
}
.tm_post_thumb { aspect-ratio: 16/10; overflow: hidden; }
.tm_post_thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--tm-ease);
}
.tm_post_card:hover .tm_post_thumb img { transform: scale(1.05); }
.tm_post_body { padding: 26px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.tm_post_meta {
  font-family: var(--bs-font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tm-teal-ink);
  margin-bottom: 11px;
}
.tm_post_card h3 { font-size: 1.2rem; line-height: 1.32; margin-bottom: 10px; }
.tm_post_card h3 a { color: var(--tm-navy); }
.tm_post_card h3 a:hover { color: var(--tm-teal-ink); }
.tm_post_card p { font-size: .96rem; margin-bottom: 18px; }
.tm_post_card .btn-link { margin-top: auto; }

/* Article body */
.tm_article { font-size: 1.07rem; }
.tm_article h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); margin: 44px 0 15px; }
.tm_article h3 { font-size: 1.22rem; margin: 30px 0 11px; }
.tm_article p  { margin-bottom: 19px; }
.tm_article ul, .tm_article ol { margin: 0 0 22px; padding-left: 24px; }
.tm_article li { margin-bottom: 9px; }
.tm_article a { color: var(--tm-teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.tm_article a:hover { color: var(--tm-navy); }
.tm_article_lede {
  font-size: 1.2rem;
  line-height: 1.62;
  color: var(--tm-navy);
  padding-bottom: 8px;
}
.tm_article_hero {
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 40px;
  aspect-ratio: 21/9;
}
.tm_article_hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tm_byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--tm-line);
  border-bottom: 1px solid var(--tm-line);
  margin-bottom: 38px;
  font-family: var(--bs-font-body);
  font-size: .93rem;
}
.tm_byline strong { color: var(--tm-navy); font-weight: 600; }
.tm_byline span { color: var(--tm-slate); }

/* ==========================================================================
   15. Gallery
   ========================================================================== */

.tm_gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.tm_gallery_item {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--tm-mist);
}
.tm_gallery_item.tm_wide { grid-column: span 2; aspect-ratio: 8/3; }
@media (max-width: 700px) { .tm_gallery_item.tm_wide { grid-column: span 1; aspect-ratio: 4/3; } }
.tm_gallery_item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--tm-ease);
}
.tm_gallery_item:hover img { transform: scale(1.06); }
.tm_gallery_item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 18px 15px;
  background: linear-gradient(transparent, rgba(7,46,51,.82));
  color: #fff;
  font-family: var(--bs-font-body);
  font-size: .9rem;
  font-weight: 500;
}

/* FAQ side image: an inviting consultation space without competing with the
   question list, and with a stable crop at every breakpoint. */
.tm_faq_side_image {
  aspect-ratio: 3/2;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 24px;
}
.tm_faq_side_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================================== 
   16. Footer
   ========================================================================== */

/* Light footer. Text steps down from --tm-ink (headings) to --tm-body (copy)
   instead of up from translucent white, and the top hairline is what separates
   it from the page rather than a change in luminance. */
.site_footer {
  background: linear-gradient(168deg, var(--tm-mist) 0%, #F2FCFB 58%, var(--tm-paper) 100%);
  color: var(--tm-body);
  border-top: 1px solid var(--tm-line);
}
.site_footer_content { padding: 72px 0 54px; }
.site_footer h3 {
  color: var(--tm-ink);
  font-family: var(--bs-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site_footer p, .site_footer a { font-size: .95rem; }
.site_footer a { color: var(--tm-body); transition: color .25s; }
.site_footer a:hover { color: var(--tm-teal-ink); }

.tm_foot_links { list-style: none; padding: 0; margin: 0; }
.tm_foot_links li { margin-bottom: 10px; }

.tm_foot_contact { list-style: none; padding: 0; margin: 0; }
.tm_foot_contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: .95rem;
}
.tm_foot_contact i { color: var(--tm-teal-ink); margin-top: 5px; flex: none; }

.social_links { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.social_links a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--tm-line);
  color: var(--tm-teal-ink);
  display: grid;
  place-items: center;
  transition: background .3s var(--tm-ease), color .3s, border-color .3s,
              transform .3s var(--tm-ease);
}
.social_links a:hover {
  background: var(--tm-teal-btn);
  border-color: var(--tm-teal-btn);
  color: #fff;
  transform: translateY(-3px);
}

.copyright_widget {
  padding: 26px 0;
  border-top: 1px solid var(--tm-line);
  font-size: .88rem;
  color: var(--tm-slate);
}
.copyright_widget a { text-decoration: underline; text-underline-offset: 3px; }

/* Crisis line — always visible in the footer. This is a safety obligation on a
   psychiatry site, not a design flourish, so it is styled to be found fast. */
/* On the old navy footer a translucent-white panel was enough to make this
   stand out. On a light footer it would disappear, so it gets a solid white
   card, a full border and a teal rail — it must remain the most findable
   element down here. */
.tm_crisis {
  background: #fff;
  border: 1px solid var(--tm-mist-deep);
  border-left: 4px solid var(--tm-teal-btn);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 26px;
  box-shadow: 0 4px 16px rgba(11,63,69,.06);
}
.tm_crisis strong {
  display: block;
  color: var(--tm-ink);
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 5px;
}
.tm_crisis p { font-size: .88rem; margin: 0; color: var(--tm-body); }
.tm_crisis a { color: var(--tm-teal-ink); font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   17. Utilities, a11y, motion
   ========================================================================== */

.backtotop a {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--tm-teal-btn);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(15,181,174,.34);
  transition: background .3s, transform .3s var(--tm-ease);
}
.backtotop a:hover { background: var(--tm-navy); transform: translateY(-3px); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--tm-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.tm_skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 999;
  background: var(--tm-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-family: var(--bs-font-body);
  font-weight: 600;
  font-size: .92rem;
  transition: top .25s var(--tm-ease);
}
.tm_skip:focus { top: 0; color: #fff; }

.tm_sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Entrance animation — one orchestrated reveal, not scattered effects.
   Progressive enhancement: content is visible by default and only starts
   hidden once JS has confirmed it can reveal it again (html.tm_js). If JS
   fails or is blocked, everything still renders — non-negotiable on a
   healthcare site where the content is the point. */
.tm_js .tm_reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--tm-ease), transform .7s var(--tm-ease);
}
.tm_js .tm_reveal.tm_in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tm_js .tm_reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1199px) {
  .section_space_lg { padding: 84px 0; }
}

@media (max-width: 991px) {
  .site_header + main > .page_banner { margin-top: 108px; }
  .hero_section { padding: 156px 0 72px; }
  .hero_image_wrap { margin-top: 44px; }
  .section_space_lg { padding: 68px 0; }
  .section_heading { margin-bottom: 38px; }
  .main_menu_inner {
    background: #fff;
    border: 1px solid var(--tm-line);
    border-radius: 16px;
    margin-top: 14px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(11,63,69,.13);
    max-height: 74vh;
    overflow-y: auto;
  }
  /* Stack vertically — the desktop rule is nowrap, which would run the items
     off the side of the screen. */
  .main_menu_inner .main_menu_list {
    display: block;
    flex-wrap: wrap;
  }
  .main_menu_inner .main_menu_list > li { width: 100%; }
  .main_menu_inner .main_menu_list > li + li { border-top: 1px solid var(--tm-line); }
  .main_menu_inner .main_menu_list > li > .nav-link {
    padding: 14px 12px;
    font-size: 1rem;
    white-space: normal;
  }
  .tm_menu_wide { min-width: 0; columns: 1; }
  .tm_cta_inner { padding: 58px 0; }
  .tm_side_card { margin-top: 40px; }
}

@media (max-width: 767px) {
  :root { --bs-body-font-size: 16px; }
  .section_space_lg { padding: 56px 0; }
  .hero_section { padding: 142px 0 56px; }
  .tm_form_card { padding: 28px 22px; }
  .service_item { padding: 26px 22px; }
  .tm_step { padding-left: 54px; }
  .btn { padding: 13px 26px; }
  .page_banner { padding: 46px 0 50px; }
  .tm_article_hero { aspect-ratio: 16/10; }
  .tm_booking_modal {
    place-items: end center;
    padding: 12px 0 0;
  }
  .tm_booking_dialog {
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    padding: 30px 20px 24px;
    transform: translateY(28px);
  }
  .tm_booking_dialog h2 { font-size: 1.8rem; }
  .tm_booking_close { top: 12px; right: 12px; }
  .tm_booking_actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .tm_booking_actions .btn { width: 100%; }
  .tm_modal_later { min-height: 40px; }
}

/* ==========================================================================
   19. Condition-article vertical rhythm  (must stay last)
   Every block in the article column used to bring its own margins, which
   collapsed into seven different gaps (40/46/46/34/34/34/54). These rules give
   the column sole ownership of the spacing. They sit at the end of the file so
   they win on source order against the component rules above.
   ========================================================================== */

.tm_detail_main > *        { margin-top: 0 !important; margin-bottom: 0 !important; }
.tm_detail_main > * + *    { margin-top: var(--tm-flow, 52px) !important; }
.tm_detail_main > .prev_next_post_nav {
  margin-top: calc(var(--tm-flow, 52px) + 14px) !important;
}

/* Trim the leading/trailing margins inside each block so they cannot stack on
   top of the flow gap. Inner elements keep their own rhythm. */
.tm_detail_main > * > :first-child { margin-top: 0; }
.tm_detail_main > * > :last-child  { margin-bottom: 0; }