/* Treetops Builder — front-end. Every value derives from the design tokens
   (assets emitted by ttb_render_design_tokens_css). Desktop-first to match the
   1728px Figma; responsive adaptation is layered in Phase 7. */

/* ─── Karin (display / headings) — self-hosted @font-face so Builder pages own
   their typography and no longer depend on the legacy plugin's stylesheet.
   Paths are relative to this file (…/plugins/treetops-builder/assets/css/). ─── */
@font-face{ font-family:'Karin'; src:url('../../../../uploads/2026/06/KarinLight.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Karin'; src:url('../../../../uploads/2026/06/KarinRegular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Karin'; src:url('../../../../uploads/2026/06/KarinMedium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Karin'; src:url('../../../../uploads/2026/06/KarinBold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

.ttb, .ttb *{ box-sizing:border-box; }
.ttb{ font-family:var(--ttb-font-body); color:var(--ttb-body); font-size:var(--ttb-body-base); line-height:var(--ttb-lh-body); -webkit-font-smoothing:antialiased; }
/* Heading colour is read from a per-element custom property so a component can
   recolour its own heading (e.g. white hero title) with a single-class rule,
   without fighting this descendant selector's specificity. */
.ttb :where(h1,h2,h3,h4){ font-family:var(--ttb-font-heading); color:var(--_ttb-hc,var(--ttb-heading)); font-weight:var(--ttb-font-heading-weight); line-height:var(--ttb-lh-heading); margin:0; text-wrap:balance; }
/* Headings are set solid (--ttb-lh-heading:1), so the half-leading that used to
   sit under the last line is declared as spacing instead. Only headings that are
   followed by something get it — a trailing heading must not push its container
   open. The selector is kept at single-class specificity (:where) and declared
   here, above every component, so any component that sets its own heading margin
   still wins and compact layouts keep their tuned spacing. */
.ttb :where(h1,h2,h3,h4):where(:not(:last-child)){ margin-bottom:var(--ttb-heading-gap); }
/* Base resets use :where() (zero specificity) so component rules always win. */
.ttb :where(p){ margin:0; }
.ttb a:where(:not(.ttb-btn)){ color:inherit; }
.ttb :where(img){ max-width:100%; display:block; }

.ttb-container{ width:100%; max-width:calc(var(--ttb-container) + (2 * var(--ttb-gutter))); margin-inline:auto; padding-inline:var(--ttb-gutter); }

.ttb-eyebrow{ font-size:var(--ttb-eyebrow); letter-spacing:var(--ttb-tracking-eyebrow); text-transform:uppercase; font-weight:600; color:var(--ttb-primary); margin:0 0 12px; }
.ttb-eyebrow--gold{ color:var(--ttb-gold); }

/* ── Buttons (pill, uppercase, .7px tracking, h55) ── */
.ttb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ttb-font-body); font-weight:var(--ttb-btn-weight); font-size:var(--ttb-btn-font-size); text-transform:uppercase; letter-spacing:var(--ttb-btn-tracking); line-height:1; padding:var(--ttb-btn-pad-y) var(--ttb-btn-pad-x); border-radius:var(--ttb-btn-radius); text-decoration:none; border:1px solid transparent; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease); cursor:pointer; }
.ttb-btn--primary{ background:var(--ttb-primary); color:#fff; }
.ttb-btn--primary:hover{ background:#33352f; }
.ttb-btn--secondary{ background:var(--ttb-gold); color:var(--ttb-primary); }
.ttb-btn--secondary:hover{ background:#e7c79b; }
.ttb-btn--outline{ background:transparent; border-color:var(--ttb-primary); color:var(--ttb-primary); }
.ttb-btn--outline:hover{ background:var(--ttb-primary); color:#fff; }
.ttb-btn--link{ background:none; border:none; padding-inline:0; text-decoration:underline; letter-spacing:normal; text-transform:none; }

/* ── Hero (image banner, title overlaid) ── */
/* Global cap: the hero media never grows past 1920px on very large displays; it
   stays centred (every hero variant centres its media) and behaves responsively
   below that width. */
.ttb-hero__media{ max-width:1920px; }
/* The standard ("smaller") hero used by every internal page — treatment listings,
   Plans & Fees, Our Practice, Contact. Its height and the height of the media
   behind it are driven by one pair of custom properties so the desktop / tablet /
   mobile sizes are declared in a single place (see the responsive blocks below).
   --_ttb-hero-pb is the breathing room under the copy: the content stays
   bottom-aligned, this simply lifts it clear of the bottom edge. */
.ttb-hero--full{ --_ttb-hero-min:560px; --_ttb-hero-pb:96px; position:relative; display:flex; flex-direction:column; min-height:var(--_ttb-hero-min); padding-top:16px; }
/* Media is pinned top-to-bottom rather than given a fixed height, so it always
   fills the hero — including when a long, multi-line H1 pushes the section past
   its minimum height. */
.ttb-hero--full .ttb-hero__media{ position:absolute; top:16px; bottom:0; left:50%; transform:translateX(-50%); width:min(100% - 24px, var(--ttb-container-wide)); border-radius:var(--ttb-radius-lg); overflow:hidden; }
.ttb-hero--full .ttb-hero__img{ width:100%; height:100%; object-fit:cover; }
/* Subtle dark overlay across the whole standard hero image (improves legibility
   and gives every standard hero a consistent tone). The home video heroes
   (.ttb-hero--cinematic) are excluded — they carry their own gradient. */
.ttb-hero--full .ttb-hero__media::after{ content:""; position:absolute; inset:0;
    background:
      /* Header legibility scrim, concentrated in the ~90px band the header occupies
         and gone by --_ttb-scrim-end, so light photography stays bright below it. */
      linear-gradient(180deg, rgba(20,18,15,.55) 0, rgba(20,18,15,.34) var(--_ttb-scrim-mid,80px), rgba(20,18,15,0) var(--_ttb-scrim-end,195px)),
      /* Base grade: top stop lowered (.34 -> .10) so the mid-hero is actually
         BRIGHTER than before; 42%/100% stops unchanged. */
      linear-gradient(180deg, rgba(20,18,15,.10) 0%, rgba(20,18,15,.2) 42%, rgba(20,18,15,.5) 100%); }
.ttb-hero--full .ttb-hero__inner{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-top:0; padding-bottom:var(--_ttb-hero-pb); }
.ttb-hero--full .ttb-hero__inner > *{ position:relative; z-index:1; }
.ttb-hero--full .ttb-hero__eyebrow{ color:var(--ttb-gold); }
.ttb-hero__title{ --_ttb-hc:#fff; font-size:var(--ttb-h1); letter-spacing:-.013em; }
.ttb-hero__text{ color:rgba(255,255,255,.9); max-width:52ch; margin-top:14px; }
.ttb-hero__actions{ display:flex; gap:14px; margin-top:24px; }

/* ── Hero video with play/pause reveal (Vimeo embed or native <video>) ──
   Layers inside .ttb-hero__media--video: video (z0) ← cover image (z2) ← scrim
   (z3) ← play/pause control (z4). Pressing play fades the cover out to reveal
   the playing video; the scrim persists over both so overlaid text stays legible. */
/* isolate so the internal z-index stack (video/cover/scrim/toggle) stays contained
   and can't paint over the hero heading (.ttb-hero__inner) sitting beside it. */
.ttb-hero__media--video{ background:var(--ttb-primary); isolation:isolate; }
.ttb-hero__video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* Neutralise the provider's responsive padding wrapper so the iframe can cover. */
.ttb-hero__video > div{ position:static !important; padding:0 !important; height:100%; margin:0; }
.ttb-hero__video video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
/* Cover the hero box with the player. Sized from the CONTAINER (not the viewport):
   viewport units assume the media box tracks the viewport, which is false for the
   tall cinematic layout on phones — there the box ends up taller than 56.25vw and
   the player letterboxes. Carrying the video's own ratio (--ttb-video-ar) with
   min-width/min-height is the minimal cover at every breakpoint. */
.ttb-hero__video iframe{
    position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
    width:auto !important; height:auto !important; min-width:100%; min-height:100%;
    aspect-ratio:var(--ttb-video-ar, 16 / 9);
    transform:translate(-50%,-50%); border:0;
}
.ttb-hero__cover{ position:absolute; inset:0; z-index:2; opacity:1; transition:opacity .55s var(--ttb-ease,ease); }
.ttb-hero[data-ttb-hero-video].is-playing .ttb-hero__cover{ opacity:0; pointer-events:none; }
.ttb-hero__media--video::after{ z-index:3; }

/* The video hero is its own predictable stacking context: the media (cover/scrim)
   stays contained BELOW the content (z1), while the control (z5, a section-level
   sibling) sits ABOVE the content so the whole button is clickable. */
.ttb-hero[data-ttb-hero-video]{ position:relative; isolation:isolate; }

/* Play / pause control — Figma Group 2 (108:1173 / 1:212): 58.6×55, 2px white
   border, 10px radius, transparent fill, white ~27px icon, right-of-centre. */
.ttb-hero__toggle{
    position:absolute; z-index:5; pointer-events:auto; top:50%; right:clamp(18px,4vw,60px); transform:translateY(-50%);
    width:58.6px; height:55px; padding:0; display:grid; place-items:center;
    background:transparent; color:#fff; border:2px solid #fff; border-radius:10px;
    cursor:pointer; -webkit-appearance:none; appearance:none;
    transition:background var(--ttb-dur-fast,.2s) var(--ttb-ease,ease), color var(--ttb-dur-fast,.2s) var(--ttb-ease,ease), border-color var(--ttb-dur-fast,.2s) var(--ttb-ease,ease), transform var(--ttb-dur-fast,.2s) var(--ttb-ease,ease);
}
.ttb-hero__toggle-icon{ font-size:24px; line-height:1; display:block; }
.ttb-hero__toggle:hover{ background:#fff; color:var(--ttb-primary); }
.ttb-hero__toggle:active{ transform:translateY(-50%) scale(.94); }
.ttb-hero__toggle:focus-visible{ outline:3px solid var(--ttb-gold); outline-offset:3px; }

/* ── Video-playing state ─────────────────────────────────────────────────
   One class drives everything. frontend.js already sets `is-playing` on the
   hero <section> from the player's OWN play/pause/ended events; it now also
   mirrors that onto <html> as .ttb-hero-video-playing, because the header
   lives outside the section and cannot be reached by a descendant selector.
   Because both flags come from the same source of truth, pausing, ending or a
   refused play all reverse every rule below automatically. */

/* Hero copy fades out but KEEPS its box: at <=820px the toggle is a static
   flow sibling, so collapsing the copy would make the button jump. */
.ttb-hero[data-ttb-hero-video] .ttb-hero__inner,
.ttb-hero[data-ttb-hero-video] .ttb-herostrip{
    transition:opacity .45s var(--ttb-ease,ease), transform .45s var(--ttb-ease,ease);
}
.ttb-hero[data-ttb-hero-video].is-playing .ttb-hero__inner,
.ttb-hero[data-ttb-hero-video].is-playing .ttb-herostrip{
    opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
    transition:opacity .45s var(--ttb-ease,ease), transform .45s var(--ttb-ease,ease), visibility 0s linear .45s;
}

/* With no header or copy overlaid, the legibility grade has nothing left to
   serve — fade it out so the footage plays at full brightness. */
.ttb-hero__media::after{ transition:opacity .45s var(--ttb-ease,ease); }
.ttb-hero[data-ttb-hero-video].is-playing .ttb-hero__media::after{ opacity:0; }

/* The control is the only thing left over the video, so give it its own shadow
   rather than relying on the (now faded) grade. Background is left alone so the
   existing :hover / :active / :focus-visible states are untouched. */
.ttb-hero[data-ttb-hero-video].is-playing .ttb-hero__toggle{
    box-shadow:0 2px 18px rgba(0,0,0,.45);
    text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* Smaller internal heroes expand to the cinematic viewing height WHILE PLAYING
   ONLY — the default 560/460/380px heights are untouched. .ttb-hero--cinematic
   is deliberately excluded: it is already at the target height. */
.ttb-hero--full{ transition:min-height .6s var(--ttb-ease,ease); }
.ttb-hero--full[data-ttb-hero-video].is-playing{ min-height:min(88vh,860px); }

/* Header hides only in its transparent over-hero state. If the visitor scrolls
   while the video plays, .is-scrolled wins and the sticky white bar returns as
   normal — navigation is never left unreachable. */
html.ttb-hero-video-playing .ttb-header:not(.is-scrolled){
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:opacity .4s var(--ttb-ease,ease), transform .4s var(--ttb-ease,ease), visibility 0s linear .4s;
}

/* ── Cinematic hero (home pages) — tall, centred, with feature strip ── */
.ttb-hero--cinematic{ position:relative; min-height:min(88vh,860px); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
/* Outer presentation matches the standard hero: 16px above, 12px each side, the
   same rounded-corner box that clips the video/cover/overlays. Positioned with
   top/bottom so the media fills the hero WITHOUT changing the section's height. */
.ttb-hero--cinematic .ttb-hero__media{ position:absolute; top:16px; bottom:0; left:50%; transform:translateX(-50%); width:calc(100% - 24px); border-radius:var(--ttb-radius-lg); overflow:hidden; }
.ttb-hero--cinematic .ttb-hero__img{ width:100%; height:100%; object-fit:cover; }
.ttb-hero--cinematic .ttb-hero__media::after{ content:""; position:absolute; inset:0;
    background:
      /* Same header scrim, gentler because the cinematic grade already starts dark. */
      linear-gradient(180deg, rgba(20,18,15,.50) 0, rgba(20,18,15,.28) var(--_ttb-scrim-mid,80px), rgba(20,18,15,0) var(--_ttb-scrim-end,195px)),
      /* Base grade: 42%/100% stops unchanged so the centred H1 keeps its contrast. */
      linear-gradient(180deg, rgba(20,18,15,.38) 0%, rgba(20,18,15,.18) 42%, rgba(20,18,15,.74) 100%); }
.ttb-hero--cinematic .ttb-hero__inner{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:120px 40px; }
.ttb-hero--cinematic .ttb-hero__eyebrow{ color:var(--ttb-gold); }
.ttb-hero--cinematic .ttb-hero__title{ --_ttb-hc:#fff; font-size:var(--ttb-h1); max-width:1200px; letter-spacing:-.013em; }
.ttb-hero--cinematic .ttb-hero__text{ color:rgba(255,255,255,.9); max-width:56ch; margin-top:16px; }
.ttb-hero--cinematic .ttb-hero__actions{ justify-content:center; margin-top:28px; }
.ttb-hero--cinematic .ttb-hero__actions .ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-hero--cinematic .ttb-hero__actions .ttb-btn--primary:hover{ background:#e7c79b; }
.ttb-hero--cinematic .ttb-hero__actions .ttb-btn--outline{ border-color:rgba(255,255,255,.6); color:#fff; }
.ttb-hero--cinematic .ttb-hero__actions .ttb-btn--outline:hover{ background:#fff; color:var(--ttb-primary); }
.ttb-herostrip{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:42px; padding-bottom:48px; }
.ttb-herostrip__col{ display:block; border-top:1px solid rgba(255,255,255,.35); padding-top:20px; color:#fff; text-decoration:none; transition:border-color var(--ttb-dur-fast) var(--ttb-ease); }
a.ttb-herostrip__col:hover{ border-top-color:var(--ttb-gold); }
.ttb-herostrip__title{ display:block; font-family:var(--ttb-font-heading); font-size:22px; letter-spacing:-.01em; margin-bottom:8px; color:#fff; }
a.ttb-herostrip__col:hover .ttb-herostrip__title{ color:var(--ttb-gold); }
.ttb-herostrip__text{ display:block; font-size:14px; line-height:1.5; color:rgba(255,255,255,.78); max-width:36ch; }
@media (max-width:820px){
  /* Header clearance moves to the section so the content stack (control → heading →
     buttons → strip) sits below the overlaid header whether or not a video exists. */
  .ttb-hero--cinematic{ min-height:auto; justify-content:flex-start; padding-top:118px; }
  .ttb-hero--cinematic .ttb-hero__inner{ flex:0 0 auto; padding-block:0 32px; }

  /* Shorter heroes here, so pull the header scrim in proportionally. */
  .ttb-hero{ --_ttb-scrim-mid:64px; --_ttb-scrim-end:150px; }
  /* Playing expansion is viewport-relative on phones so it never overflows. */
  .ttb-hero--full[data-ttb-hero-video].is-playing{ min-height:min(78vh,620px); }

  /* Play/pause control re-flows into the content stack, centred above the heading,
     with breathing room before it. No absolute coordinates — DOM order does the work. */
  .ttb-hero[data-ttb-hero-video] .ttb-hero__toggle{ position:static; transform:none; align-self:center; margin:0 auto 26px; }
  .ttb-hero[data-ttb-hero-video] .ttb-hero__toggle:active{ transform:scale(.94); }

  /* --full heroes only clear 8px at the top, so the flowed control above lands at
     y=8-63 — underneath the overlaid header (y=16-106), which swallows the tap.
     (.ttb-hero--cinematic is unaffected: its 118px top padding already clears it.)
     Lifting the control OUT OF FLOW fixes the tap target at zero layout cost —
     these heroes have as little as 51px of spare vertical space, so anything that
     consumed flow space would push the shorter heroes past their default height. */
  .ttb-hero--full[data-ttb-hero-video] .ttb-hero__toggle{
      position:absolute; top:118px; left:50%; right:auto; margin:0;
      transform:translateX(-50%); z-index:5;
  }
  .ttb-hero--full[data-ttb-hero-video] .ttb-hero__toggle:active{ transform:translateX(-50%) scale(.94); }

  /* Hero-strip → vertically stacked dark glass cards (mirrors the split-home cards).
     The whole card is the link where a destination exists (the col is already an <a>). */
  .ttb-herostrip{ grid-template-columns:1fr; gap:14px; padding-bottom:40px; }
  .ttb-herostrip__col{
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    border:1px solid rgba(255,255,255,.16); border-radius:var(--ttb-radius-lg); padding:22px 24px;
    background:rgba(20,18,15,.34);
    -webkit-backdrop-filter:blur(20px) saturate(1.1); backdrop-filter:blur(20px) saturate(1.1);
    box-shadow:0 16px 40px rgba(20,18,15,.22);
    transition:background var(--ttb-dur) var(--ttb-ease), border-color var(--ttb-dur) var(--ttb-ease), transform var(--ttb-dur) var(--ttb-ease);
  }
  /* Equal treatment for every card (override the desktop divider-line rule). */
  .ttb-herostrip__col + .ttb-herostrip__col{ border-top:1px solid rgba(255,255,255,.16); }
  a.ttb-herostrip__col:hover{ background:rgba(20,18,15,.5); border-color:rgba(255,255,255,.26); border-top-color:rgba(255,255,255,.26); transform:translateY(-3px); }
  a.ttb-herostrip__col:active{ transform:translateY(0); }
  a.ttb-herostrip__col:focus-visible{ outline:3px solid var(--ttb-gold); outline-offset:3px; }
  .ttb-herostrip__title{ margin-bottom:2px; }
  .ttb-herostrip__text{ max-width:none; }
  /* Fallback for browsers without backdrop-filter — lean on a more opaque ground. */
  @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .ttb-herostrip__col{ background:rgba(20,18,15,.66); }
  }
}

/* ── Intro (two column) ── */
.ttb-intro{ padding-block:80px 56px; }
.ttb-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:62px; align-items:start; }
.ttb-intro__eyebrow{ margin:0 0 18px; }
.ttb-intro__title{ font-size:var(--ttb-h2); max-width:640px; }
.ttb-intro__body{ font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-heading); }
.ttb-intro__body p + p{ margin-top:1em; }
.ttb-intro__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.ttb-intro__actions .ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-intro__actions .ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
/* Centered home intro (Figma 108:1182 / 1:2) — single column, brand mark behind */
.ttb-intro--center{ position:relative; overflow:hidden; padding-block:clamp(72px,8vw,120px) clamp(56px,6vw,96px); }
.ttb-intro--center .ttb-intro__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ttb-intro--center .ttb-intro__eyebrow{ color:var(--ttb-gold-strong); }
.ttb-intro--center .ttb-intro__title{ font-size:var(--ttb-h2); max-width:22ch; }
.ttb-intro--center .ttb-intro__body{ margin-top:22px; max-width:671px; }
.ttb-intro--center .ttb-intro__actions{ justify-content:center; }
.ttb-intro__deco{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(320px,42vw,720px); color:var(--ttb-primary); z-index:1; pointer-events:none; }
.ttb-intro__deco .ttb-leaf{ display:block; width:100%; height:auto; opacity:.05; }

/* ── Combined Intro + Cross-sell band (home pages) — one shared tree motif,
      bleeding off the right edge behind both the header and the tiles (Figma 108:1154). ── */
.ttb-introxsell{ position:relative; overflow:hidden; }
.ttb-introxsell > :not(.ttb-introxsell__deco){ position:relative; z-index:1; }
.ttb-introxsell__deco{ position:absolute; top:clamp(24px,3vw,60px); right:clamp(-160px,-6vw,-40px); width:clamp(360px,50vw,880px); z-index:0; color:var(--ttb-primary); pointer-events:none; }
.ttb-introxsell__deco .ttb-leaf{ display:block; width:100%; height:auto; opacity:.05; }
.ttb-introxsell .ttb-intro--combined{ overflow:visible; padding-block:clamp(64px,7vw,110px) clamp(28px,3vw,44px); }
/* No button row beneath the copy (Dental home, 28 Sept 2026 — its "View Treatments" button was removed because the
   three tiles beneath already lead there): the short bottom margin above expected a button row, so the copy gets a
   fuller, deliberate breath before the tiles instead (Figma 108:1154 keeps ~75px between the last element and the tiles). */
.ttb-introxsell .ttb-intro--combined.ttb-intro--no-actions{ padding-bottom:clamp(48px,5vw,72px); }
.ttb-introxsell .ttb-xsell--combined{ padding-block:0 var(--ttb-section-y); }

/* ── Plans & Fees body: one grid for the whole pricing area ──
   Row 1 the Dental/Wellness switch, row 2 the category nav (both full width, as in
   the Figma), row 3 the tables (left) beside ONE shared sidebar (right) holding the
   Book and Finance cards. The area panels are display:contents wrappers (tab
   semantics + hidden state only), so each area's nav and tables are grid items of
   the area itself and the sidebar is rendered once for every area. Nothing in the
   sidebar is sticky: the cards flow down beside the tables. The Denplan band sits
   in its own section above (.ttb-plans). ≤1000px everything stacks in document order. */
.ttb-pf-body{ padding-bottom:var(--ttb-space-9); }
.ttb-pricearea--fees{ display:grid; grid-template-columns:minmax(0,1fr) 470px; column-gap:55px; align-items:start; }
.ttb-pricearea--fees .ttb-pricearea__switch{ grid-column:1 / -1; justify-self:start; }
.ttb-pricearea--fees .ttb-pricearea__panel{ display:contents; }
.ttb-pricearea--fees .ttb-pricing__nav{ grid-column:1 / -1; }
.ttb-pf-main{ grid-column:1; min-width:0; }
.ttb-pf-rail{ grid-column:2; display:flex; flex-direction:column; gap:38px; min-width:0; }

/* ── Dental / Wellness area switch (Level 1) ──
   Deliberately outranks the category pills beneath it: a solid segmented track,
   a larger uppercase label and a filled dark active state against the pills'
   outlined / gold one, so the two levels can never be mistaken for each other. */
.ttb-pricearea__panel[hidden]{ display:none; }
.ttb-pricearea__panel:focus{ outline:none; }
/* ── Segmented switch (.ttb-switch) — the ONE Dental / Wellness control, used by
   Plans & Fees (.ttb-pricearea__switch) and the Team band (.ttb-team__switch).
   Deliberately small and quiet: a hairline track, 12px tracked caps, a filled
   dark active pill. Tabs stay ≥40px tall for touch. ── */
.ttb-switch{ display:inline-flex; gap:4px; max-width:100%; margin-bottom:28px; padding:4px; background:var(--ttb-surface); border:1px solid var(--ttb-line); border-radius:var(--ttb-radius-pill); }
.ttb-switch__tab{ flex:0 1 auto; min-width:0; min-height:40px; margin:0; font-family:var(--ttb-font-body); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; line-height:1; white-space:nowrap; padding:12px 26px; border:0; border-radius:var(--ttb-radius-pill); background:transparent; color:rgba(var(--ttb-primary-rgb),.72); cursor:pointer; transition:background-color var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-switch__tab:hover{ color:var(--ttb-primary); background:rgba(var(--ttb-primary-rgb),.06); }
.ttb-switch__tab.is-active{ background:var(--ttb-primary); color:var(--ttb-cream); }
.ttb-switch__tab.is-active:hover{ background:var(--ttb-primary); }
.ttb-switch__tab:focus-visible{ outline:2px solid var(--ttb-gold-strong); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .ttb-switch__tab{ transition:none; } }
/* Team band: the switch sits on its own row under the heading, left-aligned with the cards. */
.ttb-team__switch{ margin-bottom:32px; }
.ttb-team__switch .ttb-switch__tab{ padding-inline:30px; }

/* ── Pricing tables ── */
.ttb-pricing__title{ font-size:var(--ttb-h3); margin-bottom:22px; }
.ttb-pricing__intro{ margin-bottom:28px; max-width:60ch; }
.ttb-pricing__nav{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:48px; }
.ttb-pill{ font-family:var(--ttb-font-body); font-size:12px; font-weight:500; letter-spacing:.7px; text-transform:uppercase; padding:18px 26px; border-radius:var(--ttb-radius-pill); border:1px solid var(--ttb-primary); background:transparent; color:var(--ttb-primary); cursor:pointer; transition:all var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-pill:hover{ background:rgba(var(--ttb-primary-rgb),.06); }
.ttb-pill--active{ background:var(--ttb-gold); border-color:var(--ttb-gold); color:var(--ttb-primary); }

.ttb-pricetable{ margin-bottom:60px; scroll-margin-top:180px; }
.ttb-pricetable__title{ font-size:var(--ttb-h4); letter-spacing:-.01em; margin-bottom:28px; }
.ttb-pricetable__head,
.ttb-pricerow{ display:grid; grid-template-columns:minmax(0,1fr) 200px; column-gap:24px; align-items:center; }
.ttb-pricetable__head{ background:var(--ttb-surface); height:54px; padding:0 22px; font-size:18px; color:var(--ttb-heading); }
.ttb-pricetable__head span:first-child,
.ttb-pricerow__name{ padding-left:0; }
.ttb-pricerow{ padding:17px 22px; border-bottom:1px solid var(--ttb-line); font-size:18px; }
.ttb-pricerow__name{ color:var(--ttb-heading); }
.ttb-pricerow__price{ color:var(--ttb-heading); font-variant-numeric:tabular-nums; }
.ttb-pricing__note{ font-size:var(--ttb-body-sm); color:var(--ttb-body); margin-top:24px; }
/* The pricing disclaimer sits once above the first table (client review, 29 Sept 2026). */
.ttb-pricing__note--top{ margin:0 0 32px; padding:16px 22px; background:var(--ttb-surface); border-left:3px solid var(--ttb-gold-strong); border-radius:0 var(--ttb-radius-md) var(--ttb-radius-md) 0; font-size:var(--ttb-body-base); line-height:1.5; font-weight:500; color:var(--ttb-heading); } /* made prominent 1 Oct 2026 (client): the table-header ground + a gold rule, heading colour, body size */

/* ── Cards (shared) ── */
.ttb-card{ border-radius:var(--ttb-radius-md); padding:40px; }

/* Membership (dark Denplan card) */
.ttb-membership{ background:var(--ttb-primary); color:#fff; text-align:center; padding:46px 40px 56px; }
.ttb-membership__logo{ display:flex; justify-content:center; margin-bottom:14px; }
.ttb-membership__logo img{ max-height:40px; width:auto; }
.ttb-membership__eyebrow{ color:#fff; margin-bottom:14px; }
.ttb-membership__title{ --_ttb-hc:var(--ttb-gold); font-size:35px; letter-spacing:-.01em; margin-bottom:18px; }
.ttb-membership__price{ font-family:var(--ttb-font-body); font-weight:600; font-size:14px; color:#fff; margin-bottom:8px; }
.ttb-membership__price span{ font-weight:400; color:rgba(255,255,255,.7); }
.ttb-membership__text{ font-size:14px; color:rgba(255,255,255,.85); max-width:34ch; margin:0 auto; }
.ttb-membership__text + .ttb-membership__text{ margin-top:12px; } /* two-paragraph Denplan description (Oct 2026) */
.ttb-membership__features{ list-style:none; padding:0; margin:22px auto; max-width:34ch; text-align:left; display:flex; flex-direction:column; gap:12px; }
.ttb-membership__features li{ display:flex; gap:10px; align-items:center; font-size:14px; }
.ttb-membership__features i{ font-size:15px; width:20px; text-align:center; color:var(--ttb-gold); flex:none; }
.ttb-membership__actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.ttb-membership__actions .ttb-btn{ width:100%; }
.ttb-membership__actions .ttb-btn:first-child{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-membership__actions .ttb-btn:first-child:hover{ background:#e7c79b; }
.ttb-membership__actions .ttb-btn:last-child{ background:#fff; color:var(--ttb-primary); border-color:#fff; }
.ttb-membership__actions .ttb-btn:last-child:hover{ background:#f0ece3; }

/* Booking (cream card) */
.ttb-booking{ background:var(--ttb-surface); text-align:center; padding:40px 46px 44px; }
.ttb-booking .ttb-eyebrow{ color:var(--ttb-primary); }
.ttb-booking__title{ font-size:35px; letter-spacing:-.01em; margin:6px 0 26px; }
.ttb-booking__cta{ margin-top:22px; }
.ttb-booking__cta .ttb-btn{ min-width:217px; }
.ttb-booking__divide{ border:none; border-top:1px solid var(--ttb-line); margin:32px auto; width:calc(100% - 8px); }
.ttb-booking__phone{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; margin:2px 0 16px; }
.ttb-booking__phone-icon{ width:44px; height:44px; border-radius:50%; background:var(--ttb-primary); color:#fff; display:grid; place-items:center; flex:none; }
.ttb-booking__phone-icon i{ font-size:18px; }
.ttb-booking__phone-num{ font-family:var(--ttb-font-heading); font-size:34px; color:var(--ttb-heading); text-decoration:underline; text-underline-offset:4px; }
.ttb-booking__text{ font-size:14px; margin-bottom:4px; }
.ttb-booking__illustration{ margin-top:32px; }
.ttb-booking__illustration img{ margin:0 auto; }
/* Treetops building line-art (Figma 237:5082) — centred, ~83% of the card width,
   scales down on smaller cards. */
.ttb-booking__building{ display:block; width:min(100%, 389px); height:auto; margin:0 auto; }

/* ── Reviews (Elfsight Google Reviews widget) ──
   The band keeps its Treetops shell — pale gold ground, container width, section
   rhythm, type scale — and hosts the widget inside it.

   Header row: the heading + copy (light DOM, left) and the widget's own Google
   rating block (inside the widget's shadow root, right) have to line up as one
   row even though they live in two different trees. They are laid out as two grid
   items sharing row 1: the intro occupies the left column, the widget spans the
   full width, and the rules adopted into the shadow root (see ttbInitReviewBands
   in frontend.js) push the widget's header to the right-hand half and hold it at
   least as tall as the intro — so the cards always begin below both. The widget's
   own background is fully transparent, so nothing paints over the intro; the intro
   is given a stacking context anyway so it always wins the overlap.

   Below 981px the two stack: heading, copy, Google rating, cards, controls. ── */
.ttb-reviews{ background:rgba(var(--ttb-gold-rgb),.30); padding-block:var(--ttb-space-9); }
.ttb-reviews__layout{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
.ttb-reviews__intro{ grid-area:1 / 1 / 2 / 2; align-self:start; position:relative; z-index:1; max-width:46ch; }
.ttb-reviews__title{ font-size:clamp(34px,2.9vw,50px); letter-spacing:-.01em; }
.ttb-reviews__subtitle{ font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-heading); margin-top:14px; }
/* Full width so the carousel runs the whole container, with the widget's header
   pulled right inside it. min-width:0 keeps a grid item from being sized by its
   contents — without it the carousel's own overflow can push the row wider than
   the viewport. */
.ttb-reviews__widget{ grid-area:1 / 1 / 2 / -1; min-width:0; }

/* Previous / next — one pair of Treetops controls centred under the carousel,
   replacing Elfsight's small circular side arrows (hidden inside the shadow root).
   Rounded squares in the site's card radius, sized to be comfortably clickable. */
.ttb-reviews__nav{ grid-area:2 / 1 / 3 / -1; display:flex; justify-content:center; gap:16px; margin-top:40px; }
.ttb-reviews__nav[hidden]{ display:none; }
.ttb-reviews__arrow{
    width:58px; height:58px; padding:0; flex:none;
    display:grid; place-items:center;
    border:1px solid rgba(65,67,63,.22); border-radius:var(--ttb-radius-md);
    background:#fff; color:var(--ttb-primary); cursor:pointer;
    -webkit-appearance:none; appearance:none;
    transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease);
}
.ttb-reviews__arrow i{ font-size:18px; display:block; }
.ttb-reviews__arrow:hover:not(:disabled){ background:var(--ttb-primary); color:#fff; border-color:var(--ttb-primary); }
.ttb-reviews__arrow:focus-visible{ outline:2px solid var(--ttb-primary); outline-offset:3px; }
.ttb-reviews__arrow:disabled{ opacity:.35; cursor:default; }
.ttb-reviews__actions{ display:flex; justify-content:center; gap:16px; margin-top:44px; }

/* Stacked header: heading, copy, then the widget (its Google rating leads its own
   carousel), then the controls. */
@media (max-width:980px){
  .ttb-reviews__layout{ grid-template-columns:minmax(0,1fr); }
  .ttb-reviews__intro{ grid-area:auto; max-width:60ch; margin-bottom:28px; }
  .ttb-reviews__widget{ grid-area:auto; }
  .ttb-reviews__nav{ grid-area:auto; }
}

/* ══════════════ Responsive (faithful adaptation of the 1728 desktop design) ══════════════ */

/* Laptop: tighten the rail; let the price column take natural width (right-aligned)
   so it never wraps once the table is narrower than the desktop 671px name column */
@media (max-width:1240px){
  .ttb-pricearea--fees{ grid-template-columns:minmax(0,1fr) 400px; column-gap:40px; }
  .ttb-pf-rail{ gap:28px; }
  .ttb-pricetable__head,
  .ttb-pricerow{ grid-template-columns:minmax(0,1fr) auto; column-gap:24px; }
  .ttb-pricetable__head span:last-child,
  .ttb-pricerow__price{ text-align:right; white-space:nowrap; }
}

/* Tablet & phone: single column in document order — switch · category nav · tables ·
   Book card · Finance card (the Denplan band is already above the switch). The two
   sidebar cards sit side by side while there is room, then stack. */
@media (max-width:1000px){
  .ttb-pricearea--fees{ display:block; }
  .ttb-pf-rail{ flex-direction:row; flex-wrap:wrap; gap:24px; align-items:stretch; margin-top:8px; }
  .ttb-pf-rail > *{ flex:1 1 320px; }
  /* The switch goes full width and splits evenly, so neither area can be
     mistaken for a secondary option once the track stops being intrinsic. */
  .ttb-switch{ display:flex; width:100%; max-width:420px; margin-bottom:26px; }
  .ttb-switch__tab{ flex:1 1 0; min-width:0; padding:12px 14px; }
  .ttb-intro__grid{ grid-template-columns:1fr; gap:20px; }
  .ttb-intro__title{ max-width:none; }
  /* 560px is more height than a tablet viewport wants to give a banner. */
  .ttb-hero--full{ --_ttb-hero-min:460px; --_ttb-hero-pb:64px; }
}

/* Mobile: everything stacks; tables keep name↔price two-up */
@media (max-width:680px){
  .ttb-pf-rail{ flex-direction:column; }
  .ttb-reviews{ padding-block:var(--ttb-space-7); }
  .ttb-reviews__intro{ margin-bottom:22px; }
  .ttb-reviews__nav{ margin-top:28px; }
  .ttb-reviews__arrow{ width:52px; height:52px; }
  .ttb-intro{ padding-block:48px 40px; }
  .ttb-hero--full{ --_ttb-hero-min:380px; --_ttb-hero-pb:40px; padding-top:8px; }
  .ttb-hero--full .ttb-hero__media{ top:8px; border-radius:var(--ttb-radius-md); }
  .ttb-pricetable__head,
  .ttb-pricerow{ grid-template-columns:1fr auto; column-gap:14px; padding-inline:16px; font-size:15px; }
  .ttb-pricerow__name{ overflow-wrap:anywhere; }
  .ttb-pricerow__price{ text-align:right; }
  .ttb-pricing__nav{ gap:10px; margin-bottom:36px; }
  .ttb-pill{ padding:13px 18px; }
  .ttb-switch{ max-width:none; margin-bottom:22px; }
  .ttb-switch__tab{ font-size:11px; letter-spacing:.1em; padding:12px 8px; min-height:42px; }
  .ttb-card{ padding:32px 24px; }
  .ttb-membership{ padding:36px 26px 44px; }
  .ttb-booking{ padding:32px 26px 36px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL CHROME — Header · Primary Nav · Mega Menus · Mobile Nav · Mobile CTA
   Grounded in Figma: header 84:457, dental mega 170:2273, wellness mega 184:1639.
   Renders only inside [ttb_page] output (migrated Builder pages).
   ═══════════════════════════════════════════════════════════════════════ */

.ttb-site{ position:relative; }

/* ── Header shell (legacy proportions: 90px bar, 48px inset) ───── */
/* Default (over-hero) header sits 16px down so it aligns with the hero media's
   top inset and reads as contained within the hero rather than floating in the
   white space above it. The scrolled and legal states re-pin to the viewport top
   (below) so their behaviour is unchanged. */
.ttb-header{ position:absolute; top:16px; left:0; right:0; z-index:100; background:transparent;
  transition:background var(--ttb-dur) var(--ttb-ease), box-shadow var(--ttb-dur) var(--ttb-ease), opacity .4s var(--ttb-ease), transform .4s var(--ttb-ease); }
/* Top scrim: OFF by default now the header sits inside the rounded hero — a
   full-width gradient would bleed over the white spacing and the rounded-corner
   margins, which reads as an odd shadow. Both hero types already carry their own
   dark top gradient for nav legibility. Kept (transparent) so the transition to
   the scrolled/mega states stays smooth. */
.ttb-header::before{ content:""; position:absolute; inset:0 0 auto 0; height:150px; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,18,15,.32) 0%, rgba(20,18,15,0) 100%);
  opacity:0; transition:opacity var(--ttb-dur) var(--ttb-ease); }
.ttb-header__inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; height:90px; padding-inline:48px; max-width:1500px; margin-inline:auto; }

/* Scrolled state — translucent WHITE, frosted, fixed to viewport */
.ttb-header--sticky.is-scrolled{ position:fixed; top:0; background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(65,67,63,.08), 0 10px 30px rgba(0,0,0,.05); }
.ttb-header--sticky.is-scrolled::before{ opacity:0; }

/* ── Primary nav ──────────────────────────────────────────────── */
.ttb-nav{ display:flex; align-items:center; min-width:0; }
.ttb-nav--left{ justify-self:start; }
.ttb-header__right{ display:flex; align-items:center; justify-content:flex-end; gap:32px; justify-self:end; min-width:0; }
.ttb-nav ul{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.ttb-nav li{ position:static; }
/* Every nav item shares the mega-item treatment: pill hit-area, radius and the
   same colour/opacity hover — so the whole navigation behaves as one set. */
.ttb-nav a{ display:inline-block; white-space:nowrap; color:#fff; font-family:var(--ttb-font-body); font-size:13px; letter-spacing:1.4px; text-transform:uppercase; text-decoration:none; opacity:.9; padding:10px 16px; margin:-10px -16px; border-radius:9px; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease), opacity var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-nav a:hover{ opacity:1; color:var(--ttb-gold); background:rgba(255,255,255,.12); }
.ttb-nav li.is-active > a{ color:var(--ttb-gold); opacity:1; }
/* Mega trigger ↔ panel hover bridge.
   The panel is pinned at a fixed top:90px, but the nav row sits above that and
   shifts up a further 17px as the header compacts on open (the logo shrinks and
   re-centres). That leaves a transparent band belonging to neither the trigger
   nor the panel — and worse, a band that is inside the CLOSED trigger but
   outside the OPEN one, so the menu would open, slide out from under a
   motionless cursor, close, and reopen in a loop. This bridge spans that band
   while the menu is open so trigger and panel form one continuous hover region.
   Transparent, absolutely positioned and only present in the open state, so it
   changes nothing visually and moves no layout. The `li` selector is repeated
   for specificity — `.ttb-nav li` above would otherwise keep position:static. */
.ttb-nav li.ttb-nav__has-mega{ position:relative; }
.ttb-nav li.ttb-nav__has-mega.is-open::after{ content:""; position:absolute; top:100%; left:-24px; right:-24px; height:36px; }

/* ── Centre logo (real brand logo, light↔dark crossfade) ──────── */
/* Anchor the overhanging logo to the top of the bar with breathing room above it
   (so it isn't clipped at the very top) — it overhangs downward instead. This is
   scoped to the logo cell only, so the nav / phone / book stay centred, unchanged. */
.ttb-header__logo{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; padding-inline:32px; flex-shrink:0; align-self:start; margin-top:14px; }
.ttb-header__logo.has-dark, .ttb-header__logo.has-single{ display:inline-grid; place-items:center; }
/* Default (non-scrolled) header: the logo is larger and overhangs the 90px bar.
   Enlarged in the Sept 2026 final amends (client: "more prominent"): 150px at full
   width (was 128), 122/96px on the two intermediate steps (were 104/90). The scrolled
   state shrinks it back to 72px (was 64, see below). The mark is ~2:1, so 150px tall
   is ~295px wide — the nav gap at ≥1440px is ~420px. */
.ttb-header__logo-img{ grid-area:1 / 1; max-height:150px; width:auto; transition:opacity var(--ttb-dur) var(--ttb-ease), filter var(--ttb-dur) var(--ttb-ease), max-height var(--ttb-dur) var(--ttb-ease); }
/* The centre logo steps down with the viewport so it never meets the nav on either side: the
   right-hand group (Contact · phone · Book) is ~480px wide and the left nav ~445px, which leaves
   room for the full-size mark only above ~1440px. Below 1260px the compact header applies. */
@media (max-width:1440px){ .ttb-header__logo-img{ max-height:122px; } }
@media (max-width:1320px){ .ttb-header__logo-img{ max-height:96px; } .ttb-header__logo{ padding-inline:20px; } }
@media (max-width:1300px){ .ttb-header__logo-img{ max-height:88px; } } /* keeps ≥20px clear of the Contact · phone · Book group down to the 1260px compact step */
.ttb-header__logo-img--dark{ opacity:0; }
.ttb-header__monogram{ display:flex; align-items:center; justify-content:center; width:44px; height:60px; border:1.5px solid var(--ttb-gold); border-radius:50%; font-family:var(--ttb-font-heading); font-size:22px; color:var(--ttb-gold); line-height:1; transition:color var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-header__wordmark{ font-family:var(--ttb-font-heading); font-size:13px; letter-spacing:.3em; color:var(--ttb-gold); text-transform:uppercase; margin-top:5px; transition:color var(--ttb-dur-fast) var(--ttb-ease); }

/* ── Right actions: phone + book ──────────────────────────────── */
.ttb-header__actions{ display:flex; align-items:center; gap:24px; flex-shrink:0; }
.ttb-header__phone{ display:flex; align-items:center; gap:12px; color:#fff; font-family:var(--ttb-font-body); font-size:15px; text-decoration:none; white-space:nowrap; }
.ttb-header__phone-icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--ttb-gold); color:var(--ttb-primary); flex-shrink:0; }
.ttb-header__phone-icon i{ font-size:15px; }
/* Default header: phone text is white (over the dark hero). Scrolled/mega/legal
   states below switch it to brand-dark. */
.ttb-header__phone-num{ color:#fff; transition:color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-header__phone:hover .ttb-header__phone-num{ color:var(--ttb-gold); }
/* Book Appointment uses the site's standard Primary Button (the gold pill —
   Figma's Primary-Btn). Gold reads well on both the dark hero and the scrolled
   white header, so it needs no light-state override. */
.ttb-header__book{ flex-shrink:0; white-space:nowrap; }
.ttb-header__book.ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-header__book.ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }

/* ── LIGHT-HEADER STATES (scrolled OR mega-open) — dark, legible ─
   All header elements switch to strong brand-dark so they stay clearly
   legible over the translucent-white / white background. */
/* Mega-open header uses the SAME translucent frosted glass as the scrolled header,
   so the mega panel below reads as a seamless extension of it. */
.ttb-header.is-mega-open{ position:fixed; background:#fff; box-shadow:none; }
.ttb-header.is-mega-open::before{ opacity:0; }
.is-scrolled .ttb-nav a, .is-mega-open .ttb-nav a{ color:var(--ttb-primary); opacity:1; }
/* Light states: every item gets the same cream hover pill; the open mega item
   uses that identical treatment so hovering any item behaves like "Dental". */
.is-scrolled .ttb-nav a:hover, .is-mega-open .ttb-nav a:hover{ color:var(--ttb-gold-strong, #b98a3e); background:#f7efe2; }
.is-scrolled .ttb-nav li.is-active > a, .is-mega-open .ttb-nav li.is-active > a{ color:var(--ttb-gold-strong, #b98a3e); }
.is-mega-open .ttb-nav__has-mega.is-open > a{ color:var(--ttb-gold-strong, #b98a3e); background:#f7efe2; }
/* Scrolled / mega-open: shrink the logo back to its compact size (no overhang) and
   re-centre it in the bar (the default overhang offset no longer applies). */
.is-scrolled .ttb-header__logo, .is-mega-open .ttb-header__logo{ align-self:center; margin-top:0; }
.is-scrolled .ttb-header__logo-img, .is-mega-open .ttb-header__logo-img{ max-height:72px; }
.is-scrolled .ttb-header__logo-img--light, .is-mega-open .ttb-header__logo-img--light{ opacity:0; }
.is-scrolled .ttb-header__logo-img--dark, .is-mega-open .ttb-header__logo-img--dark{ opacity:1; }
/* single-logo fallback: darken to brand-olive when no dark logo is provided */
.is-scrolled .ttb-header__logo.has-single .ttb-header__logo-img,
.is-mega-open .ttb-header__logo.has-single .ttb-header__logo-img{ filter:brightness(0) saturate(100%) invert(23%) sepia(9%) saturate(520%) hue-rotate(40deg) brightness(94%) contrast(90%); }
.is-scrolled .ttb-header__monogram, .is-mega-open .ttb-header__monogram{ border-color:var(--ttb-primary); color:var(--ttb-primary); }
.is-scrolled .ttb-header__wordmark, .is-mega-open .ttb-header__wordmark{ color:var(--ttb-primary); }
.is-scrolled .ttb-header__phone-num, .is-mega-open .ttb-header__phone-num{ color:var(--ttb-primary); }
.is-scrolled .ttb-header__phone:hover .ttb-header__phone-num, .is-mega-open .ttb-header__phone:hover .ttb-header__phone-num{ color:var(--ttb-gold-strong, #b98a3e); }

/* ── Mega backdrop ────────────────────────────────────────────── */
.ttb-mega-backdrop{ position:fixed; left:0; right:0; top:90px; bottom:0; background:rgba(0,0,0,.14); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--ttb-dur) var(--ttb-ease), visibility var(--ttb-dur) var(--ttb-ease); z-index:1; }
.ttb-header.is-mega-open .ttb-mega-backdrop{ opacity:1; visibility:visible; pointer-events:auto; }

/* ── Mega panel (legacy/Figma-accurate absolute layout) ───────── */
/* Solid white panel that matches the mega-open header. A faint shadow, offset
   downward with a negative spread so it never peeks above the panel's top edge
   (which meets the header) — it reads only along the bottom / sides. */
.ttb-mega{ position:fixed; top:90px; left:50%; width:min(1606px, calc(100% - 122px)); background:#fff; border-radius:0 0 40px 40px; box-shadow:0 32px 40px -16px rgba(20,18,15,.16); z-index:5; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(10px); transition:opacity .32s var(--ttb-ease), transform .32s cubic-bezier(.16,1,.3,1), visibility .32s var(--ttb-ease); }
.ttb-mega.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
/* The panel is sized by its treatment list rather than pinned to one height: the
   column area is a normal flow child inside the inner box's padding, so a division
   with more treatments grows the panel instead of overflowing it. min-height keeps
   the Figma 324px proportions for any division that fits inside them, so nothing
   changes at three rows per column. */
.ttb-mega__inner{ position:relative; min-height:324px; padding:84px 541px 26px 59px; }
.ttb-mega__heading{ --_ttb-hc:#322f2e; position:absolute; top:24px; left:59px; margin:0; font-family:var(--ttb-font-heading); font-weight:400; font-size:26px; line-height:1; letter-spacing:-.26px; }
.ttb-mega__cols{ display:flex; gap:21px; }
.ttb-mega__col{ flex:1 1 0; min-width:0; }
.ttb-mega__list{ list-style:none; margin:0; padding:0; }
/* Group heading above a column (Dental: General Dentistry / Specialisms / Cosmetic Dentistry) —
   links to the listing page pre-filtered to that group. */
.ttb-mega__col-title{ display:block; margin:0 0 6px; padding:6px 9px 6px 21px; font-family:var(--ttb-font-body); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ttb-gold-strong,#b98a3e); text-decoration:none; border-radius:9px; transition:color var(--ttb-dur-fast) var(--ttb-ease), background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-mega__col-title:hover, .ttb-mega__col-title:focus-visible{ color:#000; background:rgba(var(--ttb-gold-rgb),.22); outline:none; }
.ttb-mega__row + .ttb-mega__row{ border-top:1px solid rgba(65,67,63,.12); }
.ttb-mega__row a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:8px 9px 8px 21px; text-decoration:none; font-family:var(--ttb-font-body); font-size:18px; line-height:1.3; color:#322f2e; background:transparent; border-radius:9px; transition:color var(--ttb-dur-fast) var(--ttb-ease), background var(--ttb-dur-fast) var(--ttb-ease), box-shadow var(--ttb-dur-fast) var(--ttb-ease); }
/* Hover + keyboard focus = the highlighted treatment-row state (cream pill + gold arrow). Applies to EVERY row. */
.ttb-mega__row a:hover, .ttb-mega__row a:focus-visible{ color:#000; background:rgba(var(--ttb-gold-rgb),.22); outline:none; }
.ttb-mega__row-arrow{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:35px; height:35px; border-radius:50%; background:var(--ttb-gold); color:var(--ttb-primary); opacity:0; transform:translateX(-6px) scale(.82); transition:opacity var(--ttb-dur-fast) var(--ttb-ease), transform var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-mega__row a:hover .ttb-mega__row-arrow, .ttb-mega__row a:focus-visible .ttb-mega__row-arrow{ opacity:1; transform:none; }
.ttb-mega__row-arrow i{ font-size:14px; display:block; }
/* No current-page treatment state by design: every row renders identically and
   only reacts to hover / keyboard focus (the rules above already apply to EVERY
   row, .is-active included). The markup still carries aria-current="page" so the
   current page is announced to screen readers without any visual differentiation. */
.ttb-mega__media{ position:absolute; top:10px; right:16px; bottom:16px; width:490px; min-height:298px; border-radius:23px; overflow:hidden; display:block; background:var(--ttb-primary); text-decoration:none; }
.ttb-mega__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ttb-mega__media:hover .ttb-mega__img{ transform:scale(1.04); }
.ttb-mega__media-btn{ position:absolute; right:14px; bottom:16px; display:inline-flex; align-items:center; justify-content:center; width:253px; height:55px; border-radius:100px; background:var(--ttb-gold); color:var(--ttb-primary); font-family:var(--ttb-font-body); font-size:12px; letter-spacing:.7px; text-transform:uppercase; transition:transform var(--ttb-dur-fast) var(--ttb-ease), box-shadow var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-mega__media:hover .ttb-mega__media-btn{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.25); }

/* Staggered entrance */
.ttb-mega__heading, .ttb-mega__col-title, .ttb-mega__row, .ttb-mega__media{ opacity:0; transform:translateY(14px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.ttb-mega.is-open .ttb-mega__heading, .ttb-mega.is-open .ttb-mega__col-title, .ttb-mega.is-open .ttb-mega__row, .ttb-mega.is-open .ttb-mega__media{ opacity:1; transform:translateY(0); }
.ttb-mega.is-open .ttb-mega__col:nth-child(2) .ttb-mega__row{ transition-delay:.04s; }
.ttb-mega.is-open .ttb-mega__col:nth-child(3) .ttb-mega__row{ transition-delay:.08s; }
.ttb-mega.is-open .ttb-mega__media{ transition-delay:.06s; }
/* Keep the arrow's own hover transition instant regardless of entrance */
.ttb-mega.is-open .ttb-mega__row-arrow{ transition:opacity var(--ttb-dur-fast) var(--ttb-ease), transform var(--ttb-dur-fast) var(--ttb-ease); }

/* ── Burger (mobile trigger) ──────────────────────────────────── */
.ttb-burger{ display:none; flex-direction:column; gap:5px; background:transparent; border:0; padding:10px; margin-left:8px; cursor:pointer; border-radius:8px; justify-self:end; }
.ttb-burger span{ display:block; width:24px; height:2.5px; background:#fff; border-radius:2px; transition:transform .25s var(--ttb-ease), opacity .25s var(--ttb-ease), background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-header.is-scrolled .ttb-burger span, .ttb-header.is-mega-open .ttb-burger span{ background:var(--ttb-primary); }
.ttb-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.ttb-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ttb-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ── Mobile drawer ────────────────────────────────────────────── */
.ttb-mobile{ position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none; }
.ttb-mobile::before{ content:""; position:absolute; inset:0; background:rgba(20,18,15,.42); opacity:0; transition:opacity var(--ttb-dur) var(--ttb-ease); }
.ttb-mobile.is-open{ visibility:visible; pointer-events:auto; }
.ttb-mobile.is-open::before{ opacity:1; }
/* Full-width dark frosted-glass drawer (premium look, consistent with the site). */
.ttb-mobile__panel{ position:absolute; top:0; right:0; height:100%; width:100%; max-width:none; background:rgba(22,20,17,.72); -webkit-backdrop-filter:blur(28px) saturate(1.3); backdrop-filter:blur(28px) saturate(1.3); box-shadow:none; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .34s cubic-bezier(.16,1,.3,1); overflow-y:auto; }
/* Fallback where backdrop-filter is unsupported — lean on a more opaque ground. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .ttb-mobile__panel{ background:rgba(22,20,17,.94); } }
.ttb-mobile.is-open .ttb-mobile__panel{ transform:translateX(0); }
.ttb-mobile__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid rgba(255,255,255,.12); }
.ttb-mobile__logo{ display:inline-flex; align-items:center; text-decoration:none; }
.ttb-mobile__logo-img{ max-height:72px; width:auto; }
.ttb-mobile__title{ font-family:var(--ttb-font-heading); font-size:20px; color:#fff; }
.ttb-mobile__close{ background:none; border:0; font-size:34px; line-height:1; color:#fff; cursor:pointer; padding:0 4px; }
.ttb-mobile__nav{ padding:14px 20px; flex:1; }
.ttb-mobile__nav ul{ list-style:none; margin:0; padding:0; }
.ttb-mobile__item{ border-bottom:1px solid rgba(255,255,255,.10); }
/* The whole row is the tap target (full width + generous padding + hover feedback). */
.ttb-mobile__item > a, .ttb-mobile__row > a{ display:block; flex:1; padding:18px 12px; font-size:17px; letter-spacing:.02em; color:#fff; text-decoration:none; border-radius:10px; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-mobile__item > a:hover, .ttb-mobile__row > a:hover, .ttb-mobile__item > a:active, .ttb-mobile__row > a:active{ background:rgba(255,255,255,.08); color:var(--ttb-gold); }
.ttb-mobile__item.has-sub .ttb-mobile__row{ display:flex; align-items:center; justify-content:space-between; }
.ttb-mobile__item .is-active > a, .ttb-mobile__item > a[aria-current], .ttb-mobile__row > a[aria-current]{ color:var(--ttb-gold); }
.ttb-mobile__toggle{ background:none; border:0; padding:12px; cursor:pointer; color:#fff; display:flex; }
.ttb-mobile__toggle i{ font-size:14px; transition:transform .25s var(--ttb-ease); }
.ttb-mobile__toggle[aria-expanded="true"] i{ transform:rotate(180deg); }
.ttb-mobile__sub{ list-style:none; margin:0 0 10px; padding:0 0 6px 20px; }
.ttb-mobile__sub li a{ display:block; padding:11px 8px; font-size:15px; color:rgba(255,255,255,.72); text-decoration:none; border-radius:8px; }
.ttb-mobile__sub li a:hover{ color:var(--ttb-gold); background:rgba(255,255,255,.06); }
.ttb-mobile__sub-all a{ color:#fff; font-weight:500; }
/* Category group headings inside the drawer's treatment sub-menu. */
.ttb-mobile__sub-group a{ margin-top:10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ttb-gold); }
.ttb-mobile__sub-group:first-child a{ margin-top:0; }
.ttb-mobile__foot{ padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:14px; }
.ttb-mobile__book{ width:100%; }
.ttb-mobile__book.ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-mobile__book.ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
.ttb-mobile__phone{ display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; text-decoration:none; font-size:16px; }
.ttb-mobile__phone i{ font-size:16px; }

/* ── Mobile CTA bar ───────────────────────────────────────────── */
.ttb-mcta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:150; background:#fff; box-shadow:0 -4px 20px rgba(0,0,0,.12); padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); gap:10px; }
.ttb-mcta__btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; border-radius:100px; font-size:15px; text-decoration:none; white-space:nowrap; }
.ttb-mcta__call{ background:var(--ttb-surface); color:var(--ttb-primary); border:1px solid rgba(65,67,63,.14); }
.ttb-mcta__call i{ font-size:16px; }
.ttb-mcta__book{ background:var(--ttb-primary); color:#fff; }

/* ── Responsive collapse ──────────────────────────────────────── */
@media (max-width:1260px){
  .ttb-header__inner{ padding-inline:32px; }
  .ttb-nav ul{ gap:14px; }
  .ttb-nav a{ font-size:12px; letter-spacing:1.1px; padding-inline:12px; margin-inline:-12px; }
  .ttb-header__right{ gap:20px; }
  .ttb-header__phone-num{ display:none; }
  .ttb-header__logo{ padding-inline:14px; }
  .ttb-header__logo-img{ max-height:66px; }
  /* (mega panel sizing for this range lives in the tiered block: "MEGA MENUS — responsive tiers") */
}
@media (max-width:1000px){
  .ttb-nav ul{ gap:10px; }
  .ttb-nav a{ padding-inline:10px; margin-inline:-10px; }
}
@media (max-width:900px){
  .ttb-header__inner{ display:flex; justify-content:space-between; }
  .ttb-nav--left, .ttb-header__right{ display:none !important; }
  .ttb-burger{ display:flex; }
  .ttb-mega{ display:none !important; }
}
@media (max-width:768px){
  .ttb-mcta{ display:flex; }
  .ttb-site .ttb-page{ padding-bottom:74px; }
  /* Keep the fixed mobile CTA bar from overlapping the footer bar / social icons:
     clear space beneath the last footer content equal to the CTA's height. */
  .ttb-footer__bar-inner{ padding-bottom:calc(24px + 78px + env(safe-area-inset-bottom)); }
}

/* ── Focus visibility + reduced motion ────────────────────────── */
.ttb-header a:focus-visible, .ttb-burger:focus-visible, .ttb-mega__row a:focus-visible,
.ttb-mobile a:focus-visible, .ttb-mobile button:focus-visible, .ttb-mcta__btn:focus-visible{
  outline:2px solid var(--ttb-gold); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
  .ttb-mega, .ttb-mega__heading, .ttb-mega__row, .ttb-mega__media,
  .ttb-mobile__panel, .ttb-mobile::before, .ttb-header::before{ transition:none !important; }
  .ttb-mega__heading, .ttb-mega__col-title, .ttb-mega__row, .ttb-mega__media{ opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER + SOCIAL  (Figma 170:2352)
   ═══════════════════════════════════════════════════════════════════════ */
.ttb-footer{ background:var(--ttb-secondary); color:#fff; }
.ttb-footer__inner{ max-width:calc(var(--ttb-container) + (2 * var(--ttb-gutter))); margin-inline:auto; padding:64px var(--ttb-gutter) 56px; }
.ttb-footer__cols{ display:grid; grid-template-columns:1fr 1fr 1.15fr auto; gap:48px; align-items:start; }
.ttb-footer__heading{ --_ttb-hc:var(--ttb-gold); font-family:var(--ttb-font-heading); font-weight:400; font-size:26px; letter-spacing:.02em; margin:0 0 30px !important; }
.ttb-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ttb-footer__col a{ color:#fff; text-decoration:none; font-family:var(--ttb-font-body); font-size:16px; letter-spacing:-.16px; transition:color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-footer__col a:hover{ color:var(--ttb-gold); }
.ttb-footer__col a.is-active{ display:inline-block; color:var(--ttb-gold); background:rgba(var(--ttb-gold-rgb),.16); border-radius:100px; padding:7px 16px; margin:-7px -16px; }
.ttb-footer__address{ font-size:16px; line-height:1.7; letter-spacing:-.16px; color:#fff; margin:0 0 18px; }
.ttb-footer__map{ display:block; width:100%; max-width:362px; aspect-ratio:362 / 184; border-radius:15px; overflow:hidden; background:rgba(255,255,255,.06); }
.ttb-footer__map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.15); pointer-events:none; }
.ttb-footer__brand{ display:flex; flex-direction:column; align-items:center; justify-self:end; padding-top:4px; }
.ttb-footer__logo-img{ max-height:150px; width:auto; }
.ttb-footer__monogram{ display:flex; align-items:center; justify-content:center; width:78px; height:104px; border:1.5px solid var(--ttb-gold); border-radius:50%; font-family:var(--ttb-font-heading); font-size:44px; color:var(--ttb-gold); line-height:1; }
.ttb-footer__wordmark{ font-family:var(--ttb-font-heading); font-size:24px; letter-spacing:.34em; color:var(--ttb-gold); text-transform:uppercase; margin-top:12px; padding-left:.34em; }

.ttb-footer__bar{ background:var(--ttb-primary); }
.ttb-footer__bar-inner{ max-width:calc(var(--ttb-container) + (2 * var(--ttb-gutter))); margin-inline:auto; padding:24px var(--ttb-gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ttb-footer__copyright{ margin:0; font-family:var(--ttb-font-body); font-size:15px; letter-spacing:-.15px; color:rgba(255,255,255,.92); }
.ttb-footer__copyright a{ color:var(--ttb-gold); text-decoration:underline; text-underline-offset:2px; }
.ttb-footer__social{ list-style:none; display:flex; gap:12px; margin:0; padding:0; }
.ttb-footer__social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-footer__social a i{ font-size:17px; }
.ttb-footer__social a:hover{ background:var(--ttb-gold); color:var(--ttb-primary); }

@media (max-width:1100px){
  .ttb-footer__cols{ grid-template-columns:1fr 1fr; gap:40px; }
  .ttb-footer__brand{ justify-self:start; grid-column:1 / -1; align-items:flex-start; }
}
@media (max-width:640px){
  .ttb-footer__cols{ grid-template-columns:1fr; gap:36px; }
  /* Centre all footer content on small screens. */
  .ttb-footer__col{ text-align:center; }
  .ttb-footer__col ul{ align-items:center; }
  .ttb-footer__brand{ align-items:center; }
  /* The map expands to the available width (still inside the footer's gutter). */
  .ttb-footer__find{ display:flex; flex-direction:column; align-items:center; }
  .ttb-footer__map{ max-width:none; width:100%; }
  .ttb-footer__bar-inner{ flex-direction:column-reverse; align-items:center; text-align:center; gap:16px; }
  .ttb-footer__inner{ padding-top:48px; }
}
.ttb-footer a:focus-visible, .ttb-footer__social a:focus-visible{ outline:2px solid var(--ttb-gold); outline-offset:3px; border-radius:6px; }

/* ═══════════════════════════════════════════════════════════════════════
   TREATMENT LISTING — tile grid, filter pills, details popup
   Grounded in Figma: Dental Treatments 84:1943, tile 237:3254, popup 237:3571.
   ═══════════════════════════════════════════════════════════════════════ */

.ttb-txlist{ padding-bottom:var(--ttb-section-y); }
.ttb-txlist__rule{ border:0; border-top:1px solid var(--ttb-line); margin:0 0 44px; }
.ttb-txlist__title{ font-size:var(--ttb-h2); letter-spacing:-.01em; margin-bottom:34px; }

/* Filter pills (share the .ttb-pill component with Plans & Fees) */
.ttb-txfilter{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }

/* Tile grid — 3-up, 450×450 image, 35px gutters, 60px row gap (Figma) */
.ttb-txgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:60px 35px; }
/* A card left alone on the last row of a WELLNESS services grid sits centred (client,
   Oct 2026 — "Ear Wax Removal"). Scoped to .ttb-txlist--wellness (set from the grid's
   source), so the Dental grids keep their normal left-to-right fill at every width. It is
   counted over the cards actually on show (the filter hides cards with an inline
   display:none), so it holds through filtering and any change in the number or order of
   services; same card size, never stretched. Browsers without :nth-child(… of …) keep the
   card left-aligned. Three columns here, two at ≤900px. */
@media (min-width:901px){
  .ttb-txlist--wellness .ttb-txgrid > .ttb-tile:nth-last-child(1 of :not([style*="display: none"])):nth-child(3n+1 of :not([style*="display: none"])){ grid-column:2; }
}
@media (min-width:681px) and (max-width:900px){
  .ttb-txlist--wellness .ttb-txgrid > .ttb-tile:nth-last-child(1 of :not([style*="display: none"])):nth-child(2n+1 of :not([style*="display: none"])){ grid-column:1 / -1; justify-self:center; width:calc((100% - 28px) / 2); }
}
/* The whole tile is a card: on hover it takes a soft cream background. The content
   under the image is padded so that hover state reads as an intentional card. */
.ttb-tile{ position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; border-radius:24px; padding:12px; transition:background var(--ttb-dur) var(--ttb-ease); }
.ttb-tile.has-popup{ cursor:pointer; }
.ttb-tile.has-popup:hover{ background:#FEFCFA; }
.ttb-tile__media{ display:block; width:100%; aspect-ratio:1/1; border-radius:20px; overflow:hidden; padding:0; border:0; background:var(--ttb-surface); }
.ttb-tile__img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ttb-tile__img--empty{ display:block; background:linear-gradient(135deg, var(--ttb-surface), rgba(var(--ttb-gold-rgb),.35)); }
.ttb-tile.has-popup:hover .ttb-tile__img{ transform:scale(1.05); }
.ttb-tile__content{ display:flex; flex-direction:column; align-items:flex-start; width:100%; padding:20px 12px 16px; }
.ttb-tile__title{ font-size:var(--ttb-h4); letter-spacing:-.01em; }
.ttb-tile__summary{ font-size:16px; line-height:22px; letter-spacing:-.16px; color:var(--ttb-heading); margin-top:11px; }
/* This button is the tile's single interactive control. Its ::after (positioned
   against the position:relative tile, so the button itself stays static) stretches
   over the whole card — a click anywhere on the tile activates it, while keyboard
   users still get one clean focus target. */
.ttb-tile__btn{ margin-top:26px; min-width:min(217px,100%); max-width:100%; white-space:nowrap; }
.ttb-tile.has-popup .ttb-tile__btn::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:24px; }

/* ── Carousel layout (Figma home "Popular Treatments" 352:2689) ── */
.ttb-txlist--carousel{ overflow:hidden; padding-top:var(--ttb-section-y); }
.ttb-txlist__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:44px; }
.ttb-txlist__intro{ max-width:640px; }
.ttb-txlist--carousel .ttb-txlist__title{ margin-bottom:0; }
.ttb-txlist__sub{ margin-top:14px; font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-body); max-width:443px; }
.ttb-txlist__nav{ display:flex; gap:12px; flex:none; }
.ttb-txlist__arrow{ width:52px; height:52px; border-radius:50%; border:1px solid var(--ttb-line); background:transparent; color:var(--ttb-heading); display:grid; place-items:center; cursor:pointer; transition:background var(--ttb-dur-fast) var(--ttb-ease),color var(--ttb-dur-fast) var(--ttb-ease),border-color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-txlist__arrow:hover:not(:disabled){ background:var(--ttb-gold); border-color:var(--ttb-gold); color:var(--ttb-primary); }
.ttb-txlist__arrow:disabled{ opacity:.35; cursor:default; }
.ttb-txlist__arrow i, .ttb-team__arrow i{ font-size:17px; }
/* overflow-y is pinned to hidden: leaving it at its initial `visible` makes the
   browser compute it to `auto` (a scrolling value on one axis forces the other),
   which turns the track into a vertical scroll container too. It then swallows
   wheel/trackpad gestures — the page stops scrolling while the pointer is over a
   carousel. The carousels scroll horizontally only. */
.ttb-txlist__track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(280px,30vw,450px); gap:15px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; padding-block:6px 8px; padding-left:max(var(--ttb-gutter),calc((100% - var(--ttb-container))/2)); padding-right:var(--ttb-gutter); scroll-padding-left:max(var(--ttb-gutter),calc((100% - var(--ttb-container))/2)); }
.ttb-txlist__track::-webkit-scrollbar{ display:none; }
.ttb-txlist__track .ttb-tile{ scroll-snap-align:start; }
.ttb-txlist__track.is-dragging{ scroll-snap-type:none; cursor:grabbing; scroll-behavior:auto; }

/* Details popup */
.ttb-popup{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px) 20px; overflow-y:auto; opacity:0; transition:opacity .28s var(--ttb-ease); }
.ttb-popup[hidden]{ display:none; }
.ttb-popup.is-open{ opacity:1; }
.ttb-popup__backdrop{ position:fixed; inset:0; background:rgba(20,18,15,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
/* The panel is always fully inside the viewport: it never grows past the visible
   height — instead its own content scrolls internally.

   Two spacing zones, premium-card style: the panel's own padding is the tight
   --ttb-pop-edge (10px) so the imagery nearly fills the top of the card, while
   every block of written content adds --ttb-pop-gutter back on the horizontal
   axis. The two together reproduce the original clamp(24px,3vw,52px) gutter for
   copy, at every width, and the panel keeps that generous padding at the bottom. */
.ttb-popup__panel{ --ttb-pop-edge:10px; --ttb-pop-gutter:clamp(14px,2.4vw,42px); position:relative; width:min(992px,100%); max-height:calc(100vh - clamp(32px,8vw,112px)); overflow-y:auto; overscroll-behavior:contain; margin:auto; background:#fff; border-radius:28px; padding:var(--ttb-pop-edge) var(--ttb-pop-edge) clamp(24px,3vw,52px); box-shadow:0 40px 100px rgba(0,0,0,.35); transform:translateY(18px); transition:transform .34s cubic-bezier(.16,1,.3,1); }
.ttb-popup.is-open .ttb-popup__panel{ transform:none; }
/* Content zone — everything below the image keeps the roomy side gutter. */
.ttb-popup__head,
.ttb-popup__body,
.ttb-popup__prices,
.ttb-popup__foot{ padding-inline:var(--ttb-pop-gutter); }
/* Sticky (not absolute) so it stays reachable while the panel scrolls internally.
   Floated right and pulled back with a negative margin so it overlays the top-right
   corner of the image without pushing the gallery down. The margins inset it from
   the panel edge, so it sits just inside the image's rounded corner; the sticky
   offset keeps it clear of the panel edge once the content scrolls under it. */
.ttb-popup__close{ position:sticky; top:var(--ttb-pop-edge); float:right; margin:10px 10px -64px auto; width:54px; height:54px; border:0; border-radius:14px; background:var(--ttb-gold); color:var(--ttb-primary); font-size:30px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background var(--ttb-dur-fast) var(--ttb-ease); z-index:3; }
.ttb-popup__close:hover{ background:#e7c79b; }
/* Imagery: one image spans full width; two images sit inline as equal columns;
   20px gap between them; each image is at most 410px tall. It carries no gutter
   of its own, so it sits at --ttb-pop-edge (10px) from the panel's top, left and
   right edges — the image reads as part of the card rather than floating in it. */
.ttb-popup__gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:34px; }
.ttb-popup__gallery--one{ grid-template-columns:1fr; }
.ttb-popup__gallery img{ width:100%; height:clamp(240px,40vw,410px); max-height:410px; object-fit:cover; border-radius:20px; }
.ttb-popup__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
/* Flex row with the category pill — the row owns the spacing, not the title. */
.ttb-popup__title{ font-size:40px; letter-spacing:-.02em; margin-bottom:0; }
.ttb-popup__cat{ flex:none; background:var(--ttb-surface); color:var(--ttb-primary); font-family:var(--ttb-font-body); font-size:14px; letter-spacing:.7px; text-transform:uppercase; padding:15px 32px; border-radius:var(--ttb-radius-pill); white-space:nowrap; }
.ttb-popup__body{ column-count:2; column-gap:48px; font-size:16px; line-height:24px; letter-spacing:-.16px; color:var(--ttb-body); margin-bottom:42px; }
.ttb-popup__body p{ margin:0 0 1em; break-inside:avoid; }
.ttb-popup__body p:last-child{ margin-bottom:0; }
/* Short copy (frontend.js, BODY_SINGLE_MAX) spans the full width — a one-paragraph body in
   column-count:2 can never reach the second column, so it read as a narrow column beside a
   blank one (client review, 7 Oct 2026). A long single paragraph is instead allowed to break
   across the two columns. */
.ttb-popup__body--single{ column-count:1; }
.ttb-popup__body--flow p{ break-inside:auto; }
.ttb-popup__prices{ margin-bottom:40px; }
.ttb-popup__prices-title{ font-size:28px; letter-spacing:-.01em; margin-bottom:22px; }
.ttb-poptable__head,
.ttb-poptable__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:24px; }
.ttb-poptable__head{ background:var(--ttb-surface); height:54px; padding:0 22px; font-size:16px; color:var(--ttb-heading); }
.ttb-poptable__row{ padding:16px 22px; border-bottom:1px solid var(--ttb-line); font-size:16px; }
.ttb-poptable__row .n{ color:var(--ttb-heading); }
.ttb-poptable__row .p{ color:var(--ttb-heading); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ttb-popup__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:8px; }
.ttb-popup__actions{ display:flex; flex-direction:column; gap:14px; width:min(466px,58%); }
.ttb-popup__actions .ttb-btn{ width:100%; }
.ttb-popup__mark{ display:flex; flex-direction:column; align-items:center; gap:9px; flex:none; }
.ttb-popup__mark-img{ max-height:74px; width:auto; }
.ttb-popup__mark-badge{ width:64px; height:84px; border:1.5px solid var(--ttb-primary); border-radius:50%; display:grid; place-items:center; font-family:var(--ttb-font-heading); font-size:36px; color:var(--ttb-primary); line-height:1; }
.ttb-popup__mark-word{ font-family:var(--ttb-font-heading); font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--ttb-primary); padding-left:.3em; }

/* Treatment listing — responsive */
@media (max-width:1100px){
  .ttb-txgrid{ gap:44px 28px; }
}
@media (max-width:900px){
  .ttb-txgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .ttb-txlist{ padding-bottom:56px; }
  .ttb-txgrid{ grid-template-columns:1fr; gap:36px; max-width:420px; margin-inline:auto; }
  .ttb-txfilter{ gap:10px; margin-bottom:36px; }
  .ttb-popup__gallery{ grid-template-columns:1fr; }
  .ttb-popup__head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .ttb-popup__title{ font-size:32px; }
  .ttb-popup__body{ column-count:1; }
  .ttb-popup__foot{ flex-direction:column-reverse; align-items:stretch; gap:24px; }
  .ttb-popup__actions{ width:100%; }
  .ttb-popup__mark{ flex-direction:row; align-self:center; }
}
@media (prefers-reduced-motion:reduce){
  .ttb-popup, .ttb-popup__panel, .ttb-tile__img{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED BANDS — cross-sell tiles · team carousel · mission/about band
   Grounded in Figma: 1/3 Tile 237:3356, Team-Carousel 237:3334, About 237:3335.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cross-sell tiles ── */
.ttb-xsell{ padding-block:var(--ttb-section-y); }
.ttb-xsell__title{ font-size:var(--ttb-h2); letter-spacing:-.01em; margin-bottom:44px; text-align:center; }
.ttb-xsell__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:39px; }
.ttb-xtile{ position:relative; display:block; border-radius:24px; overflow:hidden; aspect-ratio:496/650; color:#fff; text-decoration:none; }
.ttb-xtile__img{ position:absolute; inset:0; display:block; }
.ttb-xtile__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ttb-xtile__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,0) 30%, rgba(20,18,15,.5) 70%, rgba(20,18,15,.86) 100%); }
a.ttb-xtile:hover .ttb-xtile__img img{ transform:scale(1.05); }
.ttb-xtile__body{ position:absolute; left:0; right:0; bottom:0; padding:34px; display:flex; flex-direction:column; gap:10px; }
.ttb-xtile__name{ font-family:var(--ttb-font-heading); font-size:32px; letter-spacing:-.01em; color:#fff; text-shadow:0 2px 16px rgba(20,18,15,.5); }
.ttb-xtile__text{ font-size:15px; line-height:1.5; color:rgba(255,255,255,.92); max-width:34ch; text-shadow:0 1px 12px rgba(20,18,15,.5); }

/* ── Team carousel ── */
.ttb-team{ padding-block:var(--ttb-section-y); }
.ttb-team__head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:36px; }
.ttb-team__head:has(+ .ttb-team__switch){ margin-bottom:22px; }
/* Sits in a flex row beside the carousel arrows, so it keeps no bottom margin —
   the row itself owns the spacing (.ttb-team__head). */
.ttb-team__title{ font-size:var(--ttb-h2); letter-spacing:-.01em; margin-bottom:0; }
/* Optional intro copy under the heading row (ttb_team_text) — same measure and
   type as the centred intro body, left-aligned above the cards. */
.ttb-team__intro{ max-width:760px; margin:-6px 0 40px; font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-heading); }
.ttb-team__intro p{ margin:0; }
.ttb-team__intro p + p{ margin-top:1em; }
@media (max-width:640px){ .ttb-team__intro{ margin:0 0 32px; font-size:15px; line-height:26px; } }
.ttb-team{ scroll-margin-top:110px; }
.ttb-team__head{ flex-wrap:wrap; }
.ttb-team__nav{ display:flex; align-items:center; gap:12px; }
.ttb-team__cta{ display:inline-flex; margin-right:8px; }
.ttb-team__cta .ttb-btn{ white-space:nowrap; }
@media (max-width:640px){ .ttb-team__nav{ width:100%; justify-content:space-between; } .ttb-team__cta{ margin-right:auto; } }
.ttb-team__foot{ display:flex; justify-content:center; margin-top:44px; }
.ttb-team__arrow{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(65,67,63,.22); background:#fff; color:var(--ttb-primary); display:grid; place-items:center; cursor:pointer; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-team__arrow:hover{ background:var(--ttb-primary); color:#fff; border-color:var(--ttb-primary); }
.ttb-team__arrow:disabled{ opacity:.35; cursor:default; background:#fff; color:var(--ttb-primary); border-color:rgba(65,67,63,.22); }
/* Horizontal only — see the note on .ttb-txlist__track. The block padding gives
   the cards' focus ring room to sit inside the now-clipped box. */
.ttb-team__track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*35px)/4); gap:35px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-block:6px 8px; scrollbar-width:none; }
.ttb-team__track::-webkit-scrollbar{ display:none; }
.ttb-team__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:52px 35px; }
.ttb-teamcard{ scroll-snap-align:start; min-width:0; }
.ttb-teamcard[hidden]{ display:none; } /* filtered out by the Dental / Wellness switch */
.ttb-teamcard__photo{ aspect-ratio:353/442; border-radius:30px; overflow:hidden; background:var(--ttb-surface); margin-bottom:20px; }
.ttb-teamcard__photo img{ width:100%; height:100%; object-fit:cover; }
.ttb-teamcard__photo--empty{ display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(135deg,var(--ttb-surface),rgba(var(--ttb-gold-rgb),.35)); font-family:var(--ttb-font-heading); font-size:clamp(48px,6vw,72px); color:rgba(65,67,63,.32); letter-spacing:.04em; }
.ttb-teamcard__name{ font-size:var(--ttb-h4); letter-spacing:-.01em; margin-bottom:11px; }
.ttb-teamcard__meta{ font-size:18px; line-height:1.45; letter-spacing:-.18px; color:var(--ttb-body); }
/* Whole card opens the profile drawer (stretched trigger button over the card). */
.ttb-teamcard.has-drawer{ position:relative; cursor:pointer; }
.ttb-teamcard:not(.has-drawer){ cursor:default; } /* nothing more to show → plain card, no hover zoom, no trigger */
.ttb-teamcard__trigger{ position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
/* Keyboard focus (e.g. after closing the drawer with Escape) is shown on the photo,
   not around the whole card, so the ring follows the image's rounded corners and
   never crowds the name / role text beneath it. */
.ttb-teamcard__trigger:focus-visible{ outline:none; }
.ttb-teamcard:has(.ttb-teamcard__trigger:focus-visible) .ttb-teamcard__photo{ outline:2px solid var(--ttb-gold); outline-offset:4px; }
.ttb-teamcard.has-drawer:hover .ttb-teamcard__photo img{ transform:scale(1.04); }
.ttb-teamcard__photo img{ transition:transform .6s cubic-bezier(.16,1,.3,1); }

/* ── Team member drawer (Figma "Meet The Team Popup" 237:2796) ──
   A right-anchored side panel: large portrait, name/role/GDC + brand mark,
   biography, accreditations and a two-button footer. Internally scrollable. ── */
.ttb-tdrawer{ position:fixed; inset:0; z-index:400; visibility:hidden; pointer-events:none; }
.ttb-tdrawer__backdrop{ position:absolute; inset:0; background:rgba(20,18,15,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .35s var(--ttb-ease); }
.ttb-tdrawer.is-open{ visibility:visible; pointer-events:auto; }
.ttb-tdrawer.is-open .ttb-tdrawer__backdrop{ opacity:1; }
.ttb-tdrawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(560px,94vw); background:#fff; border-radius:40px 0 0 40px; box-shadow:-24px 0 70px rgba(0,0,0,.3); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%); transition:transform .42s cubic-bezier(.16,1,.3,1); }
.ttb-tdrawer.is-open .ttb-tdrawer__panel{ transform:none; }
.ttb-tdrawer__close{ position:absolute; top:0; right:0; width:56px; height:56px; border:0; border-radius:0 0 0 18px; background:var(--ttb-gold); color:var(--ttb-primary); font-size:30px; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:4; transition:background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-tdrawer__close:hover{ background:#e7c79b; }
.ttb-tdrawer__photo{ position:relative; width:100%; aspect-ratio:560/460; background:var(--ttb-surface); border-radius:40px 0 0 0; overflow:hidden; flex:none; }
.ttb-tdrawer__photo img{ width:100%; height:100%; object-fit:cover; }
.ttb-tdrawer__photo-empty{ display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(135deg,var(--ttb-surface),rgba(var(--ttb-gold-rgb),.35)); font-family:var(--ttb-font-heading); font-size:clamp(56px,8vw,88px); color:rgba(65,67,63,.32); }
.ttb-tdrawer__body{ flex:1 0 auto; padding:clamp(24px,3vw,40px); }
.ttb-tdrawer__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.ttb-tdrawer__name{ font-size:clamp(24px,2.4vw,30px); letter-spacing:-.01em; }
.ttb-tdrawer__role{ margin-top:8px; font-size:16px; color:var(--ttb-body); }
.ttb-tdrawer__gdc{ margin-top:2px; font-size:16px; color:var(--ttb-body); }
.ttb-tdrawer__gdc:empty, .ttb-tdrawer__role:empty{ display:none; }
.ttb-tdrawer__id{ flex:1 1 auto; min-width:0; }
.ttb-tdrawer__mark{ flex:0 1 auto; min-width:0; max-width:36%; } /* yields to a long name on narrow panels instead of overflowing */
.ttb-tdrawer__mark-badge{ display:grid; place-items:center; width:60px; height:78px; border:1.5px solid var(--ttb-primary); border-radius:50%; font-family:var(--ttb-font-heading); font-size:32px; color:var(--ttb-primary); }
.ttb-tdrawer__mark-img{ max-height:70px; max-width:100%; width:auto; height:auto; object-fit:contain; }
.ttb-tdrawer__bio{ font-size:16px; line-height:1.7; color:var(--ttb-body); }
.ttb-tdrawer__bio p{ margin:0 0 1em; }
.ttb-tdrawer__bio p:last-child{ margin-bottom:0; }
.ttb-tdrawer__quals{ margin-top:32px; padding-top:26px; border-top:1px solid var(--ttb-line); }
.ttb-tdrawer__quals-title{ font-family:var(--ttb-font-body); font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ttb-body); margin-bottom:14px; }
.ttb-tdrawer__quals-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ttb-tdrawer__quals-list li{ position:relative; padding-left:18px; font-size:15px; line-height:1.5; color:var(--ttb-body); }
.ttb-tdrawer__quals-list li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--ttb-gold); }
.ttb-tdrawer__acc{ margin-top:32px; padding-top:26px; border-top:1px solid var(--ttb-line); }
.ttb-tdrawer__acc-title{ font-family:var(--ttb-font-body); font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ttb-body); margin-bottom:18px; }
.ttb-tdrawer__acc-list{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.ttb-tdrawer__acc-list img{ height:40px; width:auto; filter:grayscale(1); opacity:.6; }
.ttb-tdrawer__foot{ position:sticky; bottom:0; display:flex; gap:14px; padding:18px clamp(24px,3vw,40px) calc(18px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--ttb-line); }
.ttb-tdrawer__foot .ttb-btn{ flex:1 1 0; }
@media (prefers-reduced-motion:reduce){
  .ttb-tdrawer__panel, .ttb-tdrawer__backdrop, .ttb-teamcard__photo img{ transition:none !important; }
}

/* ── Mission / About band (dark) — legacy .ttd-tx-band "layered overlapping
      composition" ported to the Builder (Figma 252:2340 / 240:5380 · 1728×1620).
      A proportionally-scaled stage: children are absolutely positioned by % so
      the band is pixel-accurate at the 1728 design width and scales down cleanly;
      a stacked fallback takes over <1024px. ── */
.ttb-mission{ position:relative; background:var(--ttb-primary); color:#fff; overflow:hidden; }
.ttb-mission__stage{ position:relative; width:100%; max-width:1728px; margin-inline:auto; aspect-ratio:1728 / 1620; }
/* Watermark — huge faint word, lower-left, clipped by the band (opacity 10%). */
.ttb-mission__watermark{ position:absolute; left:50%; top:85.5%; transform:translateX(-50%); margin:0; font-family:var(--ttb-font-heading); font-weight:400; font-size:clamp(90px,14.47vw,250px); line-height:.78; letter-spacing:-2px; color:rgba(255,255,255,.10); white-space:nowrap; text-align:center; pointer-events:none; user-select:none; z-index:0; }
/* Eyebrow + accented heading, top-left */
.ttb-mission__eyebrow{ position:absolute; left:4.69%; top:6.2%; margin:0; font-family:var(--ttb-font-body); font-size:clamp(12px,0.93vw,16px); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); z-index:4; }
.ttb-mission__title{ --_ttb-hc:#fff; position:absolute; left:4.69%; top:9.3%; width:47.5%; margin:0; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(30px,3vw,52px); line-height:var(--ttb-lh-heading); letter-spacing:-.6px; z-index:4; }
.ttb-mission__title span{ color:var(--ttb-gold); }
/* Body + buttons block, mid-left, with a left rule */
.ttb-mission__lead{ position:absolute; left:11.92%; top:21%; width:36%; min-height:35.7%; padding-left:clamp(22px,3.4%,52px); border-left:1px solid rgba(255,255,255,.22); box-sizing:border-box; z-index:4; }
.ttb-mission__para{ margin:0; max-width:443px; font-family:var(--ttb-font-body); font-size:clamp(14px,0.93vw,16px); line-height:1.8; color:rgba(255,255,255,.72); }
.ttb-mission__para + .ttb-mission__para{ margin-top:1em; }
/* Sub-headings inside the copy ("### " lines in the Text field — the Dental Treatments referral box, Oct 2026). */
.ttb-mission__sub{ margin:1.6em 0 .5em; max-width:443px; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(20px,1.5vw,26px); line-height:1.25; letter-spacing:-.2px; color:#fff; }
.ttb-mission__sub:first-child{ margin-top:0; }
.ttb-mission__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14%; }
.ttb-mission__actions .ttb-btn{ min-width:200px; justify-content:center; }
.ttb-mission__actions .ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-mission__actions .ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
.ttb-mission__actions .ttb-btn--outline{ border-color:var(--ttb-gold); color:var(--ttb-gold); background:transparent; }
.ttb-mission__actions .ttb-btn--outline:hover{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
/* Two overlapping rounded photos — portrait top-right, wide landscape lower-centre.
   The wide one doubles as the video container (cover image + play → embed). */
.ttb-mission__img,.ttb-mission__video{ position:absolute; margin:0; border-radius:20px; overflow:hidden; }
.ttb-mission__img img,.ttb-mission__video img{ display:block; width:100%; height:100%; object-fit:cover; }
.ttb-mission__img--portrait{ left:52.43%; top:6.2%; width:42.36%; height:61%; z-index:1; }
.ttb-mission__video{ left:17.65%; top:52.7%; width:63.83%; height:35.9%; z-index:2; isolation:isolate; }
.ttb-mission__video-embed{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* Neutralise a provider responsive-wrapper (Vimeo pastes a padding-ratio <div>). */
.ttb-mission__video-embed > div{ position:static !important; padding:0 !important; height:100%; margin:0; }
.ttb-mission__video-embed video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
/* Cover the figure with the iframe. The player letterboxes the video inside whatever
   box it gets, so the box itself must carry the VIDEO's ratio (--ttb-video-ar, set
   per-embed in PHP) and be grown past the figure on its short axis; the figure's
   overflow:hidden then crops it. auto size + min-width/min-height is the minimal
   cover — it never over-zooms the way viewport-unit sizing does. !important beats
   the provider's inline width/height/top/left on the iframe. */
.ttb-mission__video-embed iframe{
    position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
    width:auto !important; height:auto !important; min-width:100%; min-height:100%;
    aspect-ratio:var(--ttb-video-ar, 16 / 9);
    transform:translate(-50%,-50%); border:0; }
.ttb-mission__video-cover{ position:absolute; inset:0; z-index:2; transition:opacity var(--ttb-dur) var(--ttb-ease), visibility var(--ttb-dur) var(--ttb-ease); }
.ttb-mission__video.is-playing .ttb-mission__video-cover{ opacity:0; visibility:hidden; }
/* Play / pause reveal control (Font Awesome icon; stays visible to allow pausing). */
.ttb-mission__play{ position:absolute; right:20px; bottom:30px; z-index:3; width:56px; height:56px; border:0; border-radius:50%; display:grid; place-items:center; color:var(--ttb-primary); background:rgba(255,255,255,.92); cursor:pointer; transition:background var(--ttb-dur-fast) var(--ttb-ease),transform var(--ttb-dur-fast) var(--ttb-ease); }
button.ttb-mission__play:hover{ background:#fff; transform:scale(1.08); }
button.ttb-mission__play:active{ transform:scale(.94); }
.ttb-mission__play:focus-visible{ outline:2px solid var(--ttb-gold); outline-offset:3px; }
.ttb-mission__play-icon{ font-size:15px; line-height:1; }
.ttb-mission__play-icon.fa-play{ margin-left:2px; }
/* Auto-scrolling keyword marquee — crosses the middle of the band, over the photos */
.ttb-mission__scroller{ position:absolute; left:0; right:0; top:55.6%; z-index:3; overflow:visible; pointer-events:none; }
.ttb-mission__marquee{ display:flex; width:max-content; will-change:transform; animation:ttb-marquee 60s linear infinite; }
.ttb-mission__mgroup{ display:flex; align-items:center; flex:none; }
.ttb-mission__kw{ font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(40px,4.92vw,85px); line-height:1; letter-spacing:-.5px; color:#fff; white-space:nowrap; padding-left:.4em; }
.ttb-mission__sep{ font-family:var(--ttb-font-heading); font-size:clamp(40px,4.92vw,85px); line-height:1; color:#fff; padding:0 .32em; }
@keyframes ttb-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* ── Long-copy variant (Dental "Modern dentistry, all under one roof" — Carly's five
   paragraphs, 29 Sept 2026; class set in PHP when the copy runs past ~80 words).
   The aspect-locked stage cannot hold ~180 words above the lower photo, so the long
   band becomes a two-column grid that keeps the original collage: eyebrow + title +
   copy in a wider left column (no rule, no big lead offset — the heading flows into
   the body), the portrait fills the right column to the copy's height (object-fit
   cover, so the crop stays controlled), the video keeps its design size and pulls up
   over the portrait's lower-left corner as in the locked stage, and the watermark
   keeps its offset from the bottom edge. The lead's bottom padding is what the video
   overlaps — the buttons always clear it (≈30–40px). Chosen after testing a wider
   text/narrower image split, a stacked-media column and a Read-more disclosure.
   Short-copy bands never carry the class, so nothing else on the site moves. ── */
@media (min-width:1024px){
  .ttb-mission--long .ttb-mission__stage{ display:grid; grid-template-columns:minmax(0,1fr) 42%; grid-template-rows:auto auto 1fr auto; column-gap:clamp(40px,4.5vw,80px); align-items:start; padding:5.81% 4.69% 10.7%; aspect-ratio:auto; }
  .ttb-mission--long .ttb-mission__eyebrow,.ttb-mission--long .ttb-mission__title,.ttb-mission--long .ttb-mission__lead{ position:static; width:auto; margin:0; }
  /* The figures stay positioned (relative) so their absolute cover / embed / play button remain contained. */
  .ttb-mission--long .ttb-mission__img--portrait,.ttb-mission--long .ttb-mission__video{ position:relative; top:auto; left:auto; width:auto; height:auto; margin:0; }
  .ttb-mission--long .ttb-mission__eyebrow{ grid-column:1; grid-row:1; }
  .ttb-mission--long .ttb-mission__title{ grid-column:1; grid-row:2; margin-top:18px; }
  .ttb-mission--long .ttb-mission__lead{ grid-column:1; grid-row:3; margin-top:32px; padding:0 0 clamp(96px,8.6vw,150px); border-left:0; min-height:0; }
  .ttb-mission--long .ttb-mission__para{ max-width:none; font-size:clamp(15px,1.04vw,17px); } /* none (not removed): the base band caps paragraphs at 443px; the long copy uses its full column */
  .ttb-mission--long .ttb-mission__sub{ max-width:none; }
  .ttb-mission--long .ttb-mission__actions{ margin-top:40px; }
  .ttb-mission--long .ttb-mission__img--portrait{ grid-column:2; grid-row:1 / 4; align-self:stretch; min-height:0; }
  /* The photo is taken out of flow inside its figure so a tall (portrait) source cannot
     push the rows taller than the copy — the figure always matches the text column. */
  .ttb-mission--long .ttb-mission__img--portrait > img{ position:absolute; inset:0; }
  .ttb-mission--long .ttb-mission__video{ grid-column:1 / -1; grid-row:4; justify-self:start; width:70.4%; margin:calc(-1 * clamp(66px,6.2vw,108px)) 0 0 14.3%; aspect-ratio:1103 / 582; } /* 63.83% × 35.9% of the design stage, 17.65% in from its left edge */
  .ttb-mission--long .ttb-mission__watermark{ top:auto; bottom:2.5%; }
}

/* Stacked fallback below the design width — everything flows, images stack. */
@media (max-width:1023px){
  /* Stacked fallback: unlock the stage from its fixed aspect ratio and let every
     child flow as a full-width block (explicit widths + fixed image heights so
     none of the desktop % positioning leaks through). DOM order already ends with
     the watermark, so plain block flow gives the right sequence. */
  .ttb-mission{ padding-block:clamp(56px,8vw,72px); }
  .ttb-mission__stage{ position:static; aspect-ratio:auto; max-width:none; padding-inline:var(--ttb-gutter); }
  /* Text elements → plain static block flow. */
  .ttb-mission__eyebrow,.ttb-mission__title,.ttb-mission__lead,.ttb-mission__scroller,.ttb-mission__watermark{
    position:static; display:block; left:auto; right:auto; top:auto; bottom:auto; width:100%; max-width:100%; box-sizing:border-box; }
  .ttb-mission__title{ font-size:clamp(28px,7vw,42px); margin:14px 0 0; }
  .ttb-mission__lead{ padding-left:20px; margin:26px 0 0; min-height:0; border-left:1px solid rgba(255,255,255,.22); }
  /* Image figures → in-flow blocks with a fixed height; keep them position:relative
     (NOT static) so the absolute video-cover and the portrait <img> stay contained. */
  .ttb-mission__img--portrait,.ttb-mission__video{
    position:relative; display:block; left:auto; right:auto; top:auto; bottom:auto;
    width:100%; height:clamp(220px,60vw,380px); margin:24px 0 0; }
  .ttb-mission__img--portrait > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ttb-mission__scroller{ margin:34px 0 0; overflow:hidden; }
  .ttb-mission__watermark{ transform:none; left:auto; text-align:left; width:auto; max-width:none; margin:26px 0 0; font-size:clamp(48px,12vw,110px); }
  .ttb-mission__kw,.ttb-mission__sep{ font-size:34px; }
  .ttb-mission__kw{ padding-left:.32em; }
  .ttb-mission__actions{ margin-top:24px; }
}
@media (max-width:640px){
  .ttb-mission__actions{ flex-wrap:wrap; }
  .ttb-mission__actions .ttb-btn{ flex:1 1 100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .ttb-mission__marquee{ animation:none !important; }
}

/* ── Mission band — LIGHT variation (Our Practice page, Figma 84:923) ──
   Same layered stage as the dark band, recoloured for a white ground: dark
   headings/body, dark keyword marquee, a faint dark watermark and dark-outline
   buttons. Scoped to the Our Practice page-type wrapper. ── */
.ttb-page--our_practice .ttb-mission{ background:var(--ttb-white); color:var(--ttb-heading); }
.ttb-page--our_practice .ttb-mission__eyebrow{ color:rgba(var(--ttb-primary-rgb),.55); }
.ttb-page--our_practice .ttb-mission__title{ --_ttb-hc:var(--ttb-heading); }
.ttb-page--our_practice .ttb-mission__lead{ border-left-color:rgba(var(--ttb-primary-rgb),.18); }
.ttb-page--our_practice .ttb-mission__para{ color:var(--ttb-body); }
.ttb-page--our_practice .ttb-mission__sub{ color:var(--ttb-heading); }
.ttb-page--our_practice .ttb-mission__kw,
.ttb-page--our_practice .ttb-mission__sep{ color:var(--ttb-primary); }
.ttb-page--our_practice .ttb-mission__watermark{ color:rgba(var(--ttb-primary-rgb),.06); }
.ttb-page--our_practice .ttb-mission__actions .ttb-btn--outline{ border-color:var(--ttb-primary); color:var(--ttb-primary); background:transparent; }
.ttb-page--our_practice .ttb-mission__actions .ttb-btn--outline:hover{ background:var(--ttb-primary); color:#fff; border-color:var(--ttb-primary); }

/* ── Intro flanking images (About centered intro, Figma 84:1823) ── */
.ttb-intro--flank{ position:relative; }
/* Cap the centred/flanked intro to the site's standard content-container width so
   it stops sprawling on large screens and its flanking images stay tethered to
   the content edge instead of the viewport edge. */
.ttb-intro--center.ttb-intro--flank{ max-width:calc(var(--ttb-container) + (2 * var(--ttb-gutter))); margin-inline:auto; }
.ttb-intro--flank .ttb-intro__inner{ position:relative; z-index:2; }
.ttb-intro__flank{ position:absolute; z-index:1; width:clamp(150px,17vw,284px); border-radius:20px; overflow:hidden; box-shadow:0 24px 50px rgba(65,67,63,.16); }
.ttb-intro__flank img{ display:block; width:100%; aspect-ratio:284/375; object-fit:cover; }
.ttb-intro__flank--l{ left:clamp(16px,3vw,60px); bottom:clamp(24px,4vw,64px); }
.ttb-intro__flank--r{ right:clamp(16px,3vw,60px); top:clamp(24px,4vw,64px); }
@media (max-width:1180px){ .ttb-intro__flank{ display:none; } }

/* ── Feature split — image + dark text card (About "Explore Our Treatments", Figma 84:1327) ── */
.ttb-fsplit{ padding-block:0; }
/* True full-width: the two-panel band spans the whole viewport, edge to edge,
   with no container max-width, side gutters or outer radius. */
.ttb-fsplit__wrap{ width:100%; max-width:none; margin:0; padding:0; }
.ttb-fsplit__inner{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; min-height:560px; }
.ttb-fsplit__media{ position:relative; min-height:340px; }
.ttb-fsplit__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ttb-fsplit--flip .ttb-fsplit__media{ order:2; }
.ttb-fsplit__card{ position:relative; overflow:hidden; background:var(--ttb-primary); color:#fff; display:flex; align-items:center; padding:clamp(36px,4.4vw,72px); }
/* Decorative brand-mark overlay — enlarged, vertically centred, aligned to the
   right and pushed slightly past the right edge so it is clipped there (Figma). */
.ttb-fsplit__deco{ position:absolute; top:50%; right:clamp(-90px,-3vw,-24px); transform:translateY(-50%); width:clamp(320px,33vw,620px); color:#fff; z-index:0; pointer-events:none; }
.ttb-fsplit__deco .ttb-leaf{ display:block; width:100%; height:auto; opacity:.07; }
.ttb-fsplit__body{ position:relative; z-index:1; max-width:483px; }
.ttb-fsplit__title{ --_ttb-hc:#fff; font-size:var(--ttb-h2); letter-spacing:-.01em; }
.ttb-fsplit__text{ margin:22px 0 0; font-size:16px; line-height:29px; letter-spacing:-.16px; color:rgba(255,255,255,.85); }
.ttb-fsplit__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.ttb-fsplit__actions .ttb-btn{ min-width:210px; justify-content:center; }
.ttb-fsplit__actions .ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-fsplit__actions .ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
.ttb-fsplit__actions .ttb-btn--outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.ttb-fsplit__actions .ttb-btn--outline:hover{ background:#fff; color:var(--ttb-primary); border-color:#fff; }
@media (max-width:860px){
  .ttb-fsplit__inner{ grid-template-columns:1fr; min-height:0; }
  .ttb-fsplit__media{ aspect-ratio:16/10; min-height:0; }
  .ttb-fsplit--flip .ttb-fsplit__media{ order:0; }
  .ttb-fsplit__actions .ttb-btn{ flex:1 1 100%; min-width:0; }
}

/* ── Mission quote — dark image band with quote card (About "Our Mission", Figma 84:1349) ── */
.ttb-mq{ position:relative; background:var(--ttb-primary); background-size:cover; background-position:center; padding-block:clamp(56px,7vw,120px); }
.ttb-mq__inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:480px; }
.ttb-mq__col{ display:flex; flex-direction:column; gap:22px; max-width:622px; }
.ttb-mq__card{ background:var(--ttb-cream); color:var(--ttb-heading); border-radius:22px; padding:clamp(32px,3.4vw,56px); box-shadow:0 40px 90px rgba(0,0,0,.28); }
/* Pull-quote — its own independent glass panel: translucent, frosted (backdrop
   blur), with an editable background (inline style overrides the default tint). */
.ttb-mq__quote{ border-radius:18px; padding:clamp(22px,2.4vw,34px) clamp(24px,2.8vw,40px); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 24px 60px rgba(0,0,0,.22); }
.ttb-mq__quote-text{ margin:0; font-family:var(--ttb-font-heading); font-size:clamp(20px,1.7vw,26px); line-height:1.35; color:#fff; text-transform:uppercase; letter-spacing:.01em; text-shadow:0 2px 14px rgba(20,18,15,.35); }
.ttb-mq__title{ font-size:var(--ttb-h3); letter-spacing:-.01em; }
.ttb-mq__text{ margin:18px 0 0; font-size:16px; line-height:27px; letter-spacing:-.16px; color:var(--ttb-body); }
.ttb-mq__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.ttb-mq__actions .ttb-btn{ min-width:200px; justify-content:center; }
.ttb-mq__actions .ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-mq__actions .ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
.ttb-mq__play{ display:inline-flex; align-items:center; gap:12px; color:#fff; font-family:var(--ttb-font-body); font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; align-self:flex-start; margin-top:8px; white-space:nowrap; }
.ttb-mq__play-icon{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ttb-mq__play-icon i{ font-size:14px; margin-left:2px; }
.ttb-mq__play:hover .ttb-mq__play-icon{ background:rgba(255,255,255,.32); }
@media (max-width:860px){
  .ttb-mq__inner{ flex-direction:column; align-items:stretch; min-height:0; }
  .ttb-mq__actions .ttb-btn{ flex:1 1 100%; min-width:0; }
  .ttb-mq__play{ align-self:center; }
}

/* Shared-band responsive */
@media (max-width:1180px){
  .ttb-team__grid{ grid-template-columns:repeat(3,1fr); gap:44px 28px; }
}
@media (max-width:1000px){
  .ttb-xsell__grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .ttb-team__track{ grid-auto-columns:calc((100% - 2*24px)/3); gap:24px; }
}
@media (max-width:760px){
  .ttb-team__grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
}
@media (max-width:640px){
  .ttb-xsell__grid{ grid-template-columns:1fr; gap:22px; max-width:420px; margin-inline:auto; }
  .ttb-xtile{ aspect-ratio:16/13; }
  .ttb-team__track{ grid-auto-columns:calc((100% - 20px)/1.35); gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .ttb-xtile__img img, .ttb-team__track{ transition:none !important; scroll-behavior:auto; }
  .ttb-mission__marquee{ animation:none !important; }
  /* Hero video: no animated cover cross-fade or button motion (still fully
     functional — video stays paused until the user deliberately presses play). */
  .ttb-hero__cover, .ttb-hero__toggle{ transition:none !important; }
  /* Video-playing state still applies in full — it just snaps instead of
     animating, and nothing relies on transitionend to complete. */
  .ttb-hero--full, .ttb-header, .ttb-hero__media::after,
  .ttb-hero[data-ttb-hero-video] .ttb-hero__inner,
  .ttb-hero[data-ttb-hero-video] .ttb-herostrip{ transition:none !important; }
  .ttb-hero[data-ttb-hero-video].is-playing .ttb-hero__inner,
  .ttb-hero[data-ttb-hero-video].is-playing .ttb-herostrip,
  html.ttb-hero-video-playing .ttb-header:not(.is-scrolled){ transform:none !important; }
  /* The reduced-motion reveal reset forces .ttb-reveal to opacity:1 !important,
     and .ttb-hero__inner carries .ttb-reveal — so restate the hidden state here
     (higher specificity) rather than leaning on visibility alone. */
  .ttb-hero[data-ttb-hero-video].is-playing .ttb-hero__inner,
  .ttb-hero[data-ttb-hero-video].is-playing .ttb-herostrip{ opacity:0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT — intro + details, booking | enquiry form, full-width map
   Grounded in Figma 84:1473.
   ═══════════════════════════════════════════════════════════════════════ */
.ttb-contact-intro{ position:relative; overflow:hidden; padding-block:clamp(72px,8vw,110px) clamp(40px,5vw,72px); }
.ttb-contact-intro__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
/* max-width is a hard cap only: the heading is centred by the flex column and
   shrinks naturally below 700px, so narrow screens are unaffected. */
.ttb-contact-intro__title{ --_ttb-hc:var(--ttb-heading); font-size:var(--ttb-h2); letter-spacing:-.01em; max-width:700px; }
.ttb-contact-intro__text{ font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-heading); margin:22px 0 0; max-width:640px; }
.ttb-contact-intro__nap{ display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:24px; }
.ttb-contact-intro__line{ font-size:18px; color:var(--ttb-heading); text-decoration:none; }
a.ttb-contact-intro__line:hover{ color:var(--ttb-gold-strong); }
.ttb-contact-intro__address{ color:var(--ttb-body); margin-top:6px; }
/* Opening times — a labelled list under the address, above the enquiry section (1 Oct 2026). */
.ttb-contact-intro__hours{ display:flex; flex-direction:column; align-items:center; margin-top:26px; }
.ttb-contact-intro__hours-label{ font-family:var(--ttb-font-body); color:var(--ttb-gold-strong); margin:0 0 10px; line-height:1.4; }
.ttb-contact-intro__hours-list{ display:grid; grid-template-columns:auto auto; column-gap:24px; row-gap:5px; justify-content:center; margin:0; font-size:18px; text-align:left; }
.ttb-contact-intro__hours-row{ display:contents; } /* day and time sit in two aligned columns, one row per day */
.ttb-contact-intro__hours-row dt{ color:var(--ttb-heading); }
.ttb-contact-intro__hours-row dd{ margin:0; color:var(--ttb-body); font-variant-numeric:tabular-nums; }
.ttb-contact-intro__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:30px; }
.ttb-contact-intro__actions .ttb-btn--primary{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-contact-intro__actions .ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
/* Flanking images (Figma 84:1473) */
/* Cap the flanked contact intro to the standard content-container width (matches
   the rest of the site) so its decorative flanking images stay tethered to the
   content edge on large screens rather than drifting to the viewport edge. */
.ttb-contact-intro.ttb-contact-intro--flank{ max-width:calc(var(--ttb-container) + (2 * var(--ttb-gutter))); margin-inline:auto; }
/* No shadow on the contact intro's imagery (client request) — image shadows
   elsewhere on the site (e.g. .ttb-intro__flank) are unchanged. */
.ttb-contact-intro__flank{ position:absolute; z-index:1; width:clamp(150px,17vw,284px); border-radius:20px; overflow:hidden; box-shadow:none; }
.ttb-contact-intro__flank img{ display:block; width:100%; aspect-ratio:284/375; object-fit:cover; }
.ttb-contact-intro__flank--l{ left:clamp(16px,3vw,60px); bottom:clamp(24px,4vw,56px); }
.ttb-contact-intro__flank--r{ right:clamp(16px,3vw,60px); top:clamp(24px,4vw,56px); }
@media (max-width:1180px){ .ttb-contact-intro__flank{ display:none; } }

.ttb-contact{ padding-bottom:var(--ttb-section-y); }
.ttb-contact__grid{ display:grid; grid-template-columns:470px minmax(0,1fr); gap:44px; align-items:start; }
.ttb-contact__aside{ min-width:0; }
.ttb-contact__main{ min-width:0; }

/* Enquiry form card */
.ttb-form-card{ background:var(--ttb-surface); border-radius:var(--ttb-radius-md); padding:clamp(28px,3vw,48px); }
.ttb-form-card__title{ font-size:35px; letter-spacing:-.01em; margin-bottom:30px; }
.ttb-form-note{ border-radius:12px; padding:14px 18px; margin-bottom:22px; font-size:15px; }
.ttb-form-note--ok{ background:rgba(63,111,79,.12); color:#2f5a3f; border:1px solid rgba(63,111,79,.3); }
.ttb-form-note--err{ background:rgba(178,59,46,.1); color:#9a3327; border:1px solid rgba(178,59,46,.3); }
.ttb-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.ttb-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ttb-field--full{ margin-bottom:18px; }
.ttb-field__label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ttb-body); }
.ttb-field input, .ttb-field select, .ttb-field textarea{ width:100%; font-family:var(--ttb-font-body); font-size:16px; color:var(--ttb-heading); background:#fff; border:1px solid rgba(65,67,63,.2); border-radius:12px; padding:15px 18px; transition:border-color var(--ttb-dur-fast) var(--ttb-ease), box-shadow var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-field textarea{ resize:vertical; min-height:120px; }
.ttb-field input:focus, .ttb-field select:focus, .ttb-field textarea:focus{ outline:none; border-color:var(--ttb-gold-strong); box-shadow:0 0 0 3px rgba(var(--ttb-gold-rgb),.35); }
.ttb-consent{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ttb-body); margin-bottom:24px; }
.ttb-consent input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--ttb-primary); }
.ttb-consent a{ color:var(--ttb-gold-strong); text-decoration:underline; }
.ttb-form__submit{ min-width:200px; }
.ttb-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Pull-quote beneath the form (Figma 84:1927): Treetops emblem + serif quote. */
.ttb-contact-quote{ display:flex; align-items:center; gap:clamp(24px,3.4vw,66px); margin-top:clamp(40px,5vw,72px); }
.ttb-contact-quote__deco{ flex:0 0 auto; width:clamp(96px,9vw,138px); color:var(--ttb-primary); }
.ttb-contact-quote__deco .ttb-leaf{ display:block; width:100%; height:auto; opacity:1; }
.ttb-contact-quote__text{ margin:0; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(24px,2.3vw,32px); line-height:1.28; letter-spacing:-.32px; color:var(--ttb-heading); text-wrap:balance; }

/* Map */
.ttb-map{ width:100%; }
.ttb-map iframe{ display:block; width:100%; height:clamp(360px,42vw,560px); border:0; filter:grayscale(.12); }

@media (max-width:960px){
  .ttb-contact-intro__grid{ grid-template-columns:1fr; gap:20px; }
  .ttb-contact-intro__title{ max-width:none; }
  .ttb-contact__grid{ grid-template-columns:1fr; gap:32px; }
  .ttb-contact__aside{ max-width:470px; }
}
@media (max-width:560px){
  .ttb-contact-intro{ padding-block:48px 32px; }
  .ttb-form__row{ grid-template-columns:1fr; gap:16px; }
  .ttb-form-card__title{ font-size:28px; }
  .ttb-contact-quote{ gap:22px; }
  .ttb-contact-quote__deco{ width:78px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING / HOME-SPLIT — full-screen two-panel entry (Figma 108:1144)
   ═══════════════════════════════════════════════════════════════════════ */
.ttb-page--landing .ttb-page{ padding:0; }
.ttb-split{ position:relative; }
.ttb-split__panels{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; min-height:100svh; }
.ttb-split__panel{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; overflow:hidden; }
.ttb-split__media{ position:absolute; inset:0; overflow:hidden; }
/* Default (dimmed + softly blurred) → Hover/focus (bright, sharp, zoomed) — Figma 108:1144 shows the two states side by side. */
.ttb-split__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); filter:brightness(.82) saturate(.96) blur(1px); transition:transform .8s cubic-bezier(.16,1,.3,1), filter .6s var(--ttb-ease); }
a.ttb-split__panel:hover .ttb-split__media img,
a.ttb-split__panel:focus-visible .ttb-split__media img{ transform:scale(1.06); filter:brightness(1) saturate(1) blur(0); }
.ttb-split__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.26) 0%, rgba(20,18,15,.48) 100%); transition:background var(--ttb-dur) var(--ttb-ease); }
a.ttb-split__panel:hover .ttb-split__scrim,
a.ttb-split__panel:focus-visible .ttb-split__scrim{ background:linear-gradient(180deg, rgba(20,18,15,.12) 0%, rgba(20,18,15,.36) 100%); }
.ttb-split__content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; padding:24px; }
.ttb-split__title{ font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:-.01em; color:#fff; max-width:9ch; text-shadow:0 2px 28px rgba(20,18,15,.55), 0 1px 3px rgba(20,18,15,.35); }
.ttb-split__btn{ pointer-events:none; transition:background var(--ttb-dur-fast) var(--ttb-ease), transform var(--ttb-dur-fast) var(--ttb-ease), box-shadow var(--ttb-dur-fast) var(--ttb-ease); }
a.ttb-split__panel:hover .ttb-split__btn,
a.ttb-split__panel:focus-visible .ttb-split__btn{ background:#e7c79b; transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,18,15,.28); }
/* Centred without a transform: the logo is also a fade reveal, and the reduced-motion reset
   (transform:none !important) would otherwise undo a translate-based centring. */
.ttb-split__logo{ position:absolute; top:40px; left:0; right:0; z-index:3; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.ttb-split__logo a, .ttb-split__logo img{ pointer-events:auto; }
/* Landing-only oversized brand mark (the shared header logo elsewhere is unchanged). Sized by
   width so it scales with the viewport; the source PNG is 297px wide, so it is upscaled here. */
.ttb-split__logo-img{ width:clamp(230px, 27vw, 400px); height:auto; max-height:none; filter:drop-shadow(0 2px 14px rgba(20,18,15,.42)); }
@media (max-width:1180px){ .ttb-split__logo{ top:34px; } }
.ttb-split__monogram{ display:flex; align-items:center; justify-content:center; width:56px; height:74px; border:1.5px solid var(--ttb-gold); border-radius:50%; font-family:var(--ttb-font-heading); font-size:28px; color:var(--ttb-gold); }
.ttb-split__wordmark{ font-family:var(--ttb-font-heading); font-size:15px; letter-spacing:.34em; color:var(--ttb-gold); text-transform:uppercase; margin-top:8px; padding-left:.34em; }

.ttb-split__cards{ position:absolute; left:0; right:0; bottom:40px; z-index:3; display:flex; gap:18px; align-items:stretch; width:min(100%, 1600px); margin-inline:auto; padding-inline:40px; }
/* Dark-glass cards — Figma 108:1144: rgba(0,0,0,.1)+backdrop-blur, no border, white text, gold-outline button.
   Layout: centred column — title at the top, then flexible space, then the description
   with the button directly beneath it, so every button in the row sits on one line and
   every title starts at one height. Equal widths, except the highlighted card (flex 1.3). */
.ttb-splitcard{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; background:rgba(20,18,15,.30); -webkit-backdrop-filter:blur(22px) saturate(1.1); backdrop-filter:blur(22px) saturate(1.1); border:0; border-radius:20px; padding:26px 24px 24px; color:#fff; text-decoration:none; box-shadow:0 18px 44px rgba(20,18,15,.24); transition:background var(--ttb-dur) var(--ttb-ease), transform var(--ttb-dur) var(--ttb-ease), box-shadow var(--ttb-dur) var(--ttb-ease); }
a.ttb-splitcard{ cursor:pointer; }
.ttb-splitcard:hover{ background:rgba(20,18,15,.46); transform:translateY(-4px); box-shadow:0 26px 56px rgba(20,18,15,.34); }
/* Grid item — the card's row-gap already spaces it from the body/CTA row. */
.ttb-splitcard__heading{ --_ttb-hc:#fff; font-family:var(--ttb-font-heading); font-size:22px; letter-spacing:-.01em; margin-bottom:18px; }
.ttb-splitcard__body{ margin-top:auto; margin-bottom:16px; max-width:38ch; font-size:13px; line-height:1.5; color:rgba(255,255,255,.82); }
.ttb-splitcard__body:last-child{ margin-bottom:0; }
.ttb-splitcard__cta{ display:inline-flex; align-items:center; gap:9px; flex:none; border:1px solid var(--ttb-gold); border-radius:var(--ttb-radius-pill); padding:11px 18px; background:var(--ttb-gold); color:var(--ttb-primary); font-family:var(--ttb-font-body); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease); }
/* Every landing-page CTA is the gold pill (client, Oct 2026) — the same fill as the
   panel buttons and the featured card; hover lifts to the site's deeper gold. */
.ttb-splitcard__cta:hover,
.ttb-splitcard:hover .ttb-splitcard__cta{ background:#e7c79b; border-color:#e7c79b; color:var(--ttb-primary); }
.ttb-splitcard__cta-icon{ display:inline-flex; color:inherit; align-items:center; justify-content:center; }
/* ── Floating CTAs — Book Appointment pill + WhatsApp (desktop & tablet) ─────
   Figma Dental Home 108:1154: Floating-Btn 108:1234 (left) + Group 39 114:1505
   (right). A full-width fixed strip pins one button to each bottom corner; the
   strip ignores pointer events so only the buttons are interactive. Hidden ≤768px
   (the sticky mobile Call/Book bar takes over — never both at once). */
.ttb-fabs{ position:fixed; left:0; right:0; bottom:clamp(20px,3vw,40px); z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(20px,3vw,50px); pointer-events:none; }
.ttb-fab-spacer{ width:1px; }
.ttb-fab{ pointer-events:auto; text-decoration:none; box-shadow:0 12px 34px rgba(20,18,15,.28);
  transition:background var(--ttb-dur-fast) var(--ttb-ease), transform var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-fab:active{ transform:scale(.96); }
.ttb-fab:focus-visible{ outline:2px solid var(--ttb-primary); outline-offset:3px; }

/* Book Appointment pill (left) */
.ttb-fab--book{ display:inline-flex; align-items:center; gap:12px;
  background:var(--ttb-gold); color:var(--ttb-primary);
  border-radius:var(--ttb-radius-pill); padding:9px 28px 9px 14px; min-height:70px; }
.ttb-fab--book:hover{ background:#e7c79b; }
.ttb-fab__icon{ display:grid; place-items:center; height:52px; flex:0 0 auto; color:var(--ttb-primary); }
.ttb-fab__icon .ttb-leaf{ display:block; height:100%; width:auto; }
.ttb-fab__icon-img{ display:block; height:100%; width:auto; max-width:52px; object-fit:contain; }
.ttb-fab__label{ font-family:var(--ttb-font-body); font-size:14px; font-weight:400;
  letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; line-height:1; }

/* WhatsApp button (right) — reuses the split-home styling */
.ttb-fab--wa{ width:clamp(64px,6vw,92px); height:clamp(64px,6vw,92px); border-radius:50%;
  background:var(--ttb-gold); color:var(--ttb-primary); display:grid; place-items:center; }
.ttb-fab--wa:hover{ background:#e7c79b; }
.ttb-fab--wa i{ font-size:clamp(28px,2.6vw,40px); }

@media (max-width:768px){ .ttb-fabs{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ttb-fab{ transition:none; } }

@media (max-width:1100px){
  .ttb-split__cards{ gap:14px; padding-inline:24px; }
  .ttb-splitcard{ padding:22px 18px 20px; }
  .ttb-splitcard__heading{ font-size:20px; }
}
/* ── Tablet & phone: the three actions become a continuation of the hero ──
   Below 900px the cards can no longer sit over the photographs, so instead the
   section ground goes dark (it used to stay white between 761–900px), each
   photograph dissolves into that ground through a bottom fade, and the card group
   is pulled up over the fade — the same “glass over the picture” relationship the
   desktop has, rather than boxes appended under a hard edge. Hierarchy comes from
   treatment, not size: Join Treetops leads as the only filled (frosted) card with
   the gold button; Contact Us and Visit Us become an unfilled, hairline-ruled pair
   beneath it — two centred columns on tablets, two compact rows on phones. The
   markup and DOM order are unchanged (Join is moved first with `order`). */
@media (max-width:900px){
  .ttb-split{ background:var(--ttb-primary); }
  /* A touch shorter than the full viewport so the top of the card group shows above the fold. */
  .ttb-split__panels{ min-height:clamp(520px, 84svh, 860px); }
  .ttb-split__panel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg, rgba(var(--ttb-primary-rgb),0) 0%, rgba(var(--ttb-primary-rgb),.55) 55%, var(--ttb-primary) 100%); pointer-events:none; z-index:1; }
  .ttb-split__content{ z-index:2; }
  .ttb-split__cards{ position:relative; inset:auto; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:0; width:auto; max-width:760px; margin:-64px auto 0; padding:0 clamp(20px,4vw,40px) 48px; } /* the top third of the Join card sits over the dissolving photograph */
  .ttb-splitcard{ flex:none; }
  .ttb-splitcard__body{ margin-top:0; }
  .ttb-splitcard--featured{ grid-column:1 / -1; order:-1; margin-bottom:22px; padding:28px 24px 26px; background:rgba(255,255,255,.08); box-shadow:0 18px 44px rgba(20,18,15,.18); }
  .ttb-splitcard--featured:hover{ background:rgba(255,255,255,.12); transform:none; box-shadow:0 18px 44px rgba(20,18,15,.18); }
  .ttb-splitcard--featured .ttb-splitcard__heading{ font-size:24px; }
  .ttb-splitcard:not(.ttb-splitcard--featured){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-radius:0; border-top:1px solid rgba(255,255,255,.14); padding:22px 18px 10px; }
  .ttb-splitcard:not(.ttb-splitcard--featured):hover{ background:transparent; transform:none; box-shadow:none; }
  .ttb-splitcard:not(.ttb-splitcard--featured) .ttb-splitcard__heading{ margin-bottom:12px; }
  .ttb-splitcard:not(.ttb-splitcard--featured) .ttb-splitcard__body{ margin-bottom:14px; }
  .ttb-splitcard:last-child{ border-left:1px solid rgba(255,255,255,.14); } /* the vertical rule between the two columns */
}
@media (max-width:760px){
  .ttb-split__panels{ grid-template-columns:1fr; min-height:auto; }
  .ttb-split__panel{ min-height:60vh; }
  .ttb-split__panel--left::after{ display:none; } /* only the last photograph dissolves into the actions */
  .ttb-split__logo{ top:22px; }
  .ttb-split__logo-img{ width:min(240px, 62vw); }
}
@media (max-width:640px){
  .ttb-split__cards{ grid-template-columns:1fr; margin-top:-56px; padding:0 20px 40px; }
  .ttb-splitcard--featured{ padding:26px 22px 24px; margin-bottom:12px; }
  /* Contact / Visit as compact rows: heading + copy on the left, the pill on the right. */
  .ttb-splitcard:not(.ttb-splitcard--featured){ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"h h" "b c"; column-gap:14px; align-items:center; text-align:left; padding:16px 2px; border-left:0; }
  .ttb-splitcard:not(.ttb-splitcard--featured) .ttb-splitcard__heading{ grid-area:h; font-size:19px; margin:0 0 6px; }
  .ttb-splitcard:not(.ttb-splitcard--featured) .ttb-splitcard__body{ grid-area:b; margin:0; max-width:none; }
  .ttb-splitcard:not(.ttb-splitcard--featured) .ttb-splitcard__cta{ grid-area:c; justify-self:end; align-self:center; }
}
@media (max-width:379px){
  /* Not enough room beside the pill: stack it under the copy, left-aligned. */
  .ttb-splitcard:not(.ttb-splitcard--featured){ grid-template-columns:1fr; grid-template-areas:"h" "b" "c"; }
  .ttb-splitcard:not(.ttb-splitcard--featured) .ttb-splitcard__cta{ justify-self:start; margin-top:12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Legal / policy document (page type: legal)
   Token-driven, document-style: title header, sticky TOC, readable measure.
   ═══════════════════════════════════════════════════════════════════ */
.ttb-legal{ padding-block:var(--ttb-section-y); }
.ttb-legal__wrap{ max-width:calc(1040px + (2 * var(--ttb-gutter))); }

/* Header */
.ttb-legal__head{ max-width:760px; margin-bottom:44px; }
.ttb-legal__title{ font-size:var(--ttb-h1); letter-spacing:-.013em; }
.ttb-legal__updated{ margin-top:14px; font-size:14px; letter-spacing:.3px; text-transform:uppercase; color:rgba(var(--ttb-primary-rgb),.6); }
.ttb-legal__intro{ margin-top:20px; font-size:19px; line-height:1.6; color:var(--ttb-heading); }
.ttb-legal__intro p{ margin-bottom:14px; }

/* Two columns: sticky TOC + body */
.ttb-legal__cols{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:56px; align-items:start; }
.ttb-legal__toc{ position:sticky; top:110px; font-size:14px; }
.ttb-legal__toc-title{ font-weight:600; text-transform:uppercase; letter-spacing:.6px; font-size:12px; color:rgba(var(--ttb-primary-rgb),.55); margin-bottom:12px; }
.ttb-legal__toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid rgba(var(--ttb-primary-rgb),.14); }
.ttb-legal__toc li{ margin:0; }
.ttb-legal__toc a{ display:block; padding:6px 0 6px 16px; margin-left:-1px; border-left:2px solid transparent; color:rgba(var(--ttb-primary-rgb),.75); line-height:1.4; transition:color var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-legal__toc a:hover{ color:var(--ttb-primary); border-left-color:var(--ttb-gold); }
.ttb-legal__toc-l3 a{ padding-left:30px; font-size:13px; }

/* Body — readable measure, styled long-form content */
.ttb-legal__body{ max-width:72ch; font-size:17px; line-height:1.72; color:var(--ttb-body); }
.ttb-legal__body > *:first-child{ margin-top:0; }
.ttb-legal__body h2{ font-size:clamp(26px,3vw,32px); margin:48px 0 16px; scroll-margin-top:120px; }
.ttb-legal__body h3{ font-size:clamp(20px,2.2vw,23px); margin:34px 0 12px; scroll-margin-top:120px; }
.ttb-legal__body p{ margin:0 0 18px; }
.ttb-legal__body ul,.ttb-legal__body ol{ margin:0 0 18px; padding-left:24px; }
.ttb-legal__body li{ margin-bottom:8px; }
.ttb-legal__body a{ color:var(--ttb-primary); text-decoration:underline; text-underline-offset:2px; }
.ttb-legal__body a:hover{ color:var(--ttb-gold-strong,#b98a3e); }
.ttb-legal__body strong{ color:var(--ttb-heading); }
.ttb-legal__body blockquote{ margin:24px 0; padding:4px 0 4px 22px; border-left:3px solid var(--ttb-gold); color:var(--ttb-heading); }
.ttb-legal__body table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px; }
.ttb-legal__body th,.ttb-legal__body td{ text-align:left; padding:10px 14px; border:1px solid rgba(var(--ttb-primary-rgb),.14); }
.ttb-legal__body th{ background:var(--ttb-surface); }
.ttb-legal__empty{ color:rgba(var(--ttb-primary-rgb),.5); font-style:italic; }

/* Downloads */
.ttb-legal__downloads{ margin-top:44px; }
.ttb-legal__dl-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ttb-legal__dl{ display:flex; align-items:center; gap:14px; padding:16px 20px; border:1px solid rgba(var(--ttb-primary-rgb),.14); border-radius:14px; color:var(--ttb-primary); text-decoration:none; transition:border-color var(--ttb-dur-fast) var(--ttb-ease), background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-legal__dl:hover{ border-color:var(--ttb-gold); background:rgba(var(--ttb-gold-rgb),.08); }
.ttb-legal__dl i{ font-size:18px; flex:0 0 auto; color:var(--ttb-gold-strong,#b98a3e); }
.ttb-legal__dl-label{ font-weight:600; }
.ttb-legal__dl-note{ margin-left:auto; font-size:13px; color:rgba(var(--ttb-primary-rgb),.55); }

/* Contact block */
.ttb-legal__contact{ margin-top:44px; padding:28px 30px; background:var(--ttb-surface); border-radius:var(--ttb-radius-lg); }
.ttb-legal__contact h2{ font-size:24px; margin:0 0 16px; scroll-margin-top:120px; }
.ttb-legal__contact ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ttb-legal__contact li{ display:grid; grid-template-columns:90px 1fr; gap:14px; font-size:16px; line-height:1.5; color:var(--ttb-heading); }
.ttb-legal__contact li span{ font-weight:600; color:rgba(var(--ttb-primary-rgb),.6); font-size:13px; text-transform:uppercase; letter-spacing:.4px; padding-top:2px; }
.ttb-legal__contact a{ color:var(--ttb-primary); text-decoration:underline; }

/* A bare `1fr` track has an `auto` minimum, so below 900px the single column grew to
   the widest unbreakable string in the document — a 366px URL on the privacy notice,
   the 289px practice email in every contact block — and pushed 320/390px phones into
   sideways scrolling. minmax(0,1fr) lets the column shrink to the viewport, and long
   links may break where they must (overflow-wrap:anywhere only ever acts on a word
   that cannot fit its line, so ordinary prose is untouched). */
.ttb-legal__body a, .ttb-legal__contact a{ overflow-wrap:anywhere; }
.ttb-legal__contact li{ grid-template-columns:90px minmax(0,1fr); }
@media (max-width:900px){
  .ttb-legal__cols{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .ttb-legal__toc{ position:static; top:auto; padding:18px 20px; background:var(--ttb-surface); border-radius:14px; }
  .ttb-legal__toc ol{ border-left:none; }
  .ttb-legal__toc a{ border-left:none; padding-left:0; }
  .ttb-legal__toc-l3 a{ padding-left:16px; }
  .ttb-legal__body{ max-width:none; }
}
@media (max-width:560px){
  .ttb-legal__contact li{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .ttb-legal__dl-note{ margin-left:0; width:100%; }
}

/* ── Header on legal/policy pages ──────────────────────────────────
   These pages have no hero, so the header can't sit transparent over a dark
   banner. Pin it in the solid light state from the top, in-flow (sticky) so the
   document naturally begins below it. `.ttb-page--legal` is an ancestor of the
   header, so it drives the same light-state treatment as `.is-scrolled`.
   (The News & Newsletters page has the standard hero since the Figma rework, so it is NOT in this group.) The old note read: it has no hero either and
   shares the treatment. */
.ttb-page--legal .ttb-header{ position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 1px 0 rgba(65,67,63,.08), 0 8px 24px rgba(0,0,0,.04); }
.ttb-page--legal .ttb-header::before{ opacity:0; }
.ttb-page--legal .ttb-header.is-scrolled{ position:sticky; } /* stay in-flow — no jump when JS toggles is-scrolled */
.ttb-page--legal .ttb-nav a{ color:var(--ttb-primary); opacity:1; }
.ttb-page--legal .ttb-nav a:hover, .ttb-page--legal .ttb-nav li.is-active > a{ color:var(--ttb-gold-strong,#b98a3e); }
.ttb-page--legal .ttb-header__logo-img--light{ opacity:0; }
.ttb-page--legal .ttb-header__logo-img--dark{ opacity:1; }
.ttb-page--legal .ttb-header__logo.has-single .ttb-header__logo-img{ filter:brightness(0) saturate(100%) invert(23%) sepia(9%) saturate(520%) hue-rotate(40deg) brightness(94%) contrast(90%); }
.ttb-page--legal .ttb-header__logo{ align-self:center; margin-top:0; } /* no overhang on the pinned solid header */
.ttb-page--legal .ttb-header__logo-img{ max-height:72px; }
.ttb-page--legal .ttb-header__monogram{ border-color:var(--ttb-primary); color:var(--ttb-primary); }
.ttb-page--legal .ttb-header__wordmark, .ttb-page--legal .ttb-header__phone-num{ color:var(--ttb-primary); }
.ttb-page--legal .ttb-burger span{ background:var(--ttb-primary); }

/* ═══════════════════════════════════════════════════════════════════
   News & Newsletters archive (page type: news)
   Document-style like the legal pages: title header, then one row per
   newsletter (most recent first). Rows reuse the legal downloads' card
   treatment so the two document-style page families read as one.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══ NEWS — Latest News & Updates (Figma 237:2066 "Group 21", design width 1728) ═══
   Charcoal band: heading (55px Karin, cream) + intro (16/29) upper-left, outlined
   cream "See More Posts" upper-right, Blog-Post-Tiles (450×300 image, 20px radius,
   badge over the lower-left, 32px title, 16/22 excerpt) in a 3 / 2 / 1 grid, and the
   oversized 10% heading running off the bottom. Shared by the site-wide pre-footer
   (latest three) and the News page archive (every entry). The band clips its own
   overflow, so the decorative text can never widen the page. */
.ttb-newsband{ position:relative; overflow:hidden; isolation:isolate; background:var(--ttb-primary); color:#fff; padding-block:clamp(56px,5.2vw,90px) clamp(110px,12.7vw,219px); }
.ttb-newsband__inner{ position:relative; z-index:1; }
.ttb-newsband__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:clamp(36px,3.2vw,55px); }
.ttb-newsband__copy{ max-width:746px; min-width:0; }
.ttb-newsband__eyebrow{ color:var(--ttb-gold); }
.ttb-newsband__title{ margin:0; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(34px,3.18vw,55px); line-height:1.24; letter-spacing:-.01em; color:var(--ttb-cream); }
.ttb-newsband__title span{ color:var(--ttb-gold); }
.ttb-newsband__intro{ margin-top:11px; max-width:443px; font-size:16px; line-height:29px; letter-spacing:-.16px; color:#fff; }
.ttb-newsband__intro p + p{ margin-top:.6em; }
.ttb-newsband__cta{ flex:0 0 auto; }
.ttb-newsband .ttb-btn--outline{ min-width:217px; border-color:var(--ttb-cream); color:var(--ttb-cream); background:transparent; }
.ttb-newsband .ttb-btn--outline:hover, .ttb-newsband .ttb-btn--outline:focus-visible{ background:var(--ttb-cream); color:var(--ttb-primary); border-color:var(--ttb-cream); }
.ttb-newsband__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 35px; }
.ttb-newsband__empty{ color:rgba(255,255,255,.6); font-style:italic; }
/* Blog-Post-Tile (Figma 5:210) — the whole tile is one link (stretched ::after on the title's anchor) */
.ttb-post{ position:relative; min-width:0; }
.ttb-post__media{ position:relative; aspect-ratio:3 / 2; border-radius:var(--ttb-radius-md); overflow:hidden; background:rgba(255,255,255,.06); }
.ttb-post__img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ttb-post__img--empty{ background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(var(--ttb-gold-rgb),.25)); }
.ttb-post__badge{ position:absolute; left:15px; bottom:17px; z-index:1; display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:var(--ttb-radius-pill); background:rgba(var(--ttb-primary-rgb),.56); color:#fff; font-family:var(--ttb-font-body); font-size:12px; letter-spacing:-.12px; line-height:1; white-space:nowrap; }
.ttb-post__title{ margin:18px 0 0; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(24px,1.85vw,32px); line-height:1.2; letter-spacing:-.01em; color:#fff; transition:color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-post__link{ color:inherit; text-decoration:none; }
.ttb-post__link::after{ content:""; position:absolute; inset:0; border-radius:var(--ttb-radius-md); }
.ttb-post__text{ margin-top:13px; padding-right:min(21%,96px); font-size:16px; line-height:22px; letter-spacing:-.16px; color:rgba(255,255,255,.88); overflow-wrap:anywhere; }
.ttb-post:hover .ttb-post__img, .ttb-post:focus-within .ttb-post__img{ transform:scale(1.04); }
.ttb-post:hover .ttb-post__title, .ttb-post:focus-within .ttb-post__title{ color:var(--ttb-gold); }
.ttb-post__link:focus-visible{ outline:none; }
.ttb-post__link:focus-visible::after{ outline:2px solid var(--ttb-gold); outline-offset:6px; }
/* Oversized decorative heading (Figma 237:2075: 250px, white at 10%, from x=60, bleeding off the right and bottom) */
/* News page archive: the same tiles on the white page ground under the standard hero (no band chrome) */
.ttb-newsgrid{ background:var(--ttb-white); padding-block:var(--ttb-section-y); }
.ttb-newsgrid .ttb-post__media{ background:var(--ttb-surface); }
.ttb-newsgrid .ttb-post__title{ color:var(--ttb-heading); }
.ttb-newsgrid .ttb-post__text{ color:var(--ttb-body); }
.ttb-newsgrid .ttb-post:hover .ttb-post__title, .ttb-newsgrid .ttb-post:focus-within .ttb-post__title{ color:var(--ttb-gold-strong,#b98a3e); }
.ttb-newsgrid .ttb-post__link:focus-visible::after{ outline-color:var(--ttb-gold-strong,#b98a3e); }
.ttb-newsgrid .ttb-newsband__empty{ color:rgba(var(--ttb-primary-rgb),.5); }
.ttb-newsband__bg{ position:absolute; left:clamp(16px,3.5vw,60px); bottom:-.14em; z-index:0; margin:0; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:clamp(84px,14.47vw,250px); line-height:1; letter-spacing:-.01em; color:#fff; opacity:.1; white-space:nowrap; pointer-events:none; user-select:none; }
@media (max-width:1023px){
  .ttb-newsband__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; }
}
@media (max-width:640px){
  .ttb-newsband{ padding-bottom:clamp(96px,26vw,140px); }
  .ttb-newsband__head{ flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:32px; }
  .ttb-newsband .ttb-btn--outline{ min-width:0; }
  .ttb-newsband__grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .ttb-post__title{ font-size:26px; }
  .ttb-post__text{ padding-right:0; }
  .ttb-newsband__bg{ font-size:clamp(72px,24vw,96px); }
}
@media (prefers-reduced-motion:reduce){ .ttb-post__img, .ttb-post__title{ transition:none; } .ttb-post:hover .ttb-post__img, .ttb-post:focus-within .ttb-post__img{ transform:none; } }

/* ═══════════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   Ported from the legacy treetops-dental plugin so the rebuilt site
   keeps the same motion signature. Three mechanisms, all vanilla:

     1. .ttb-reveal      — scroll-triggered reveal (IntersectionObserver)
     2. header bloom     — on-load keyframes, above-the-fold only
     3. footer cascade   — its own observer, slightly different easing

   One duration, one easing and one travel distance for the whole site,
   held as tokens (--ttb-reveal-dur / --ttb-reveal-ease /
   --ttb-reveal-shift) so the motion signature is changed in one place.
   Only opacity/transform are animated, so reveals never reflow and
   never introduce layout shift — elements occupy their final box from
   first paint and merely start transparent + offset.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Scroll reveal (opt-in via .ttb-reveal) ─────────────────────
   Gated behind .ttb-anim-ready, which JS adds to each .ttb wrapper.
   Without JS the class never lands, so content renders fully visible
   rather than being stranded at opacity:0.

   Direction follows the layout: the default is a gentle rise, while
   --left / --right are for content that sits to one side of a band and
   --scale is the restrained reveal used for images and media.

   The offsets are declared only while the element is still hidden
   (:not(.is-visible)). Once revealed the system stops declaring a
   transform at all, so a component's own transform — a card's hover
   lift, a translate-centred logo — takes over cleanly instead of being
   out-specified by a permanent transform:none. */
.ttb-anim-ready .ttb-reveal{
  transition:opacity var(--ttb-reveal-dur) var(--ttb-reveal-ease),
             transform var(--ttb-reveal-dur) var(--ttb-reveal-ease);
  transition-delay:var(--d,0s);
}
.ttb-anim-ready .ttb-reveal:not(.is-visible){
  opacity:0;
  transform:translateY(var(--ttb-reveal-shift));
  /* while-waiting only: a permanent will-change would pin one compositor
     layer per element for the life of the page */
  will-change:opacity, transform;
}
.ttb-anim-ready .ttb-reveal--left:not(.is-visible) { transform:translateX(calc(-1 * var(--ttb-reveal-shift))); }
.ttb-anim-ready .ttb-reveal--right:not(.is-visible){ transform:translateX(var(--ttb-reveal-shift)); }
.ttb-anim-ready .ttb-reveal--scale:not(.is-visible){ transform:scale(.975); }
/* Opacity only — for elements whose own transform is load-bearing (the
   translate-centred landing logo) and for media that shouldn't be moved
   while it paints (the map iframe). */
.ttb-anim-ready .ttb-reveal--fade:not(.is-visible){ transform:none; }

/* Cards inside a horizontal carousel fade without the rise. The cards that are
   still off-track have not revealed yet, so a downward offset on them would push
   the track's scrollable area below its own box and turn a horizontal carousel
   into a vertical scroller as well (which then swallows wheel gestures). A rise
   also reads oddly on a track that moves sideways. */
.ttb-anim-ready .ttb-team__track .ttb-reveal:not(.is-visible),
.ttb-anim-ready .ttb-txlist__track .ttb-reveal:not(.is-visible){ transform:none; }

/* Group trigger — the container itself stays put and only supplies the
   .is-visible state its children cascade off (see the price tables). */
.ttb-anim-ready .ttb-reveal--group:not(.is-visible){ opacity:1; transform:none; will-change:auto; }

/* Hero copy travels a little further, matching the legacy hero feel —
   still inside the site's 15–30px band. */
.ttb-anim-ready .ttb-hero__inner.ttb-reveal:not(.is-visible){ transform:translateY(30px); }

/* Price-table cascade: title → head row → each row in sequence. Legacy
   hardcoded nth-child(1..7) here, which left an 8th row invisible for
   good; delays now come from --d on each row, set by the renderer. */
.ttb-anim-ready .ttb-pricetable .ttb-pricetable__title,
.ttb-anim-ready .ttb-pricetable .ttb-pricetable__head,
.ttb-anim-ready .ttb-pricetable .ttb-pricerow{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),
             transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);
}
.ttb-anim-ready .ttb-pricetable.is-visible .ttb-pricetable__title,
.ttb-anim-ready .ttb-pricetable.is-visible .ttb-pricetable__head,
.ttb-anim-ready .ttb-pricetable.is-visible .ttb-pricerow{
  opacity:1;
  transform:none;
}

/* ── 2. Header bloom on load ───────────────────────────────────────
   The logo settles first as the brand anchor, then the nav items and
   actions cascade outward at +0.08s. animation-fill-mode:both holds
   the hidden "from" state through the delay so nothing flashes, while
   leaving the header visible if animations are unsupported. */
@keyframes ttbHeaderItemIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes ttbHeaderLogoIn{
  from{ opacity:0; transform:translateY(8px) scale(.94); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
.ttb-header__logo,
.ttb-nav > ul > li,
.ttb-header__phone,
.ttb-header__book,
.ttb-burger{
  animation:ttbHeaderItemIn .8s cubic-bezier(.16,1,.3,1) both;
}
.ttb-header__logo{
  animation-name:ttbHeaderLogoIn;
  animation-duration:.9s;
  animation-delay:.06s;
}

/* The header is a split layout (nav-left · logo · nav-right), so the bloom runs
   OUTWARD from the logo in the centre. The left nav counts from its last item
   (the one nearest the logo) and the right nav from its first, which keeps the
   bloom symmetrical for any number of items on either side. */
.ttb-nav--left  > ul > li:nth-last-child(1){ animation-delay:.20s; }
.ttb-nav--left  > ul > li:nth-last-child(2){ animation-delay:.28s; }
.ttb-nav--left  > ul > li:nth-last-child(3){ animation-delay:.36s; }
.ttb-nav--left  > ul > li:nth-last-child(4){ animation-delay:.44s; }
.ttb-nav--left  > ul > li:nth-last-child(5){ animation-delay:.52s; }
.ttb-nav--left  > ul > li:nth-last-child(6){ animation-delay:.60s; }
.ttb-nav--right > ul > li:nth-child(1){ animation-delay:.20s; }
.ttb-nav--right > ul > li:nth-child(2){ animation-delay:.28s; }
.ttb-nav--right > ul > li:nth-child(3){ animation-delay:.36s; }
.ttb-nav--right > ul > li:nth-child(4){ animation-delay:.44s; }
.ttb-nav--right > ul > li:nth-child(5){ animation-delay:.52s; }
.ttb-nav--right > ul > li:nth-child(6){ animation-delay:.60s; }
.ttb-header__phone{ animation-delay:.28s; }
.ttb-header__book { animation-delay:.36s; }
.ttb-burger       { animation-delay:.20s; }

/* ── 3. Footer cascade ─────────────────────────────────────────────
   Own observer + easing, as in legacy. .ttb-footer-anim is added by JS
   so the footer stays fully visible when JS is unavailable. */
@keyframes ttb-footer-rise{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:no-preference){
  .ttb-footer.ttb-footer-anim:not(.is-revealed) .ttb-footer__col,
  .ttb-footer.ttb-footer-anim:not(.is-revealed) .ttb-footer__brand{ opacity:0; }
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__col,
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__brand{
    animation:ttb-footer-rise .7s cubic-bezier(.22,1,.36,1) both;
  }
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__col:nth-child(1){ animation-delay:.05s; }
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__col:nth-child(2){ animation-delay:.14s; }
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__col:nth-child(3){ animation-delay:.23s; }
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__col:nth-child(4){ animation-delay:.32s; }
  .ttb-footer.ttb-footer-anim.is-revealed .ttb-footer__brand{ animation-delay:.41s; }
}

/* ── Reduced motion ────────────────────────────────────────────────
   Everything above resolves to its final resting state. The reveal JS
   also short-circuits, so nothing depends on the observer firing. */
@media (prefers-reduced-motion:reduce){
  .ttb-anim-ready .ttb-reveal,
  .ttb-anim-ready .ttb-pricetable .ttb-pricetable__title,
  .ttb-anim-ready .ttb-pricetable .ttb-pricetable__head,
  .ttb-anim-ready .ttb-pricetable .ttb-pricerow{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .ttb-header__logo,
  .ttb-nav > ul > li,
  .ttb-header__phone,
  .ttb-header__book,
  .ttb-burger,
  .ttb-footer .ttb-footer__col,
  .ttb-footer .ttb-footer__brand{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CLIENT AMENDS (Sept 2026) — landing card emblem · gallery + lightbox ·
   pricing “Other Fees” · anchor offsets
   ═══════════════════════════════════════════════════════════════════════ */

/* Landing card buttons carry the Treetops “T” emblem (the brand mark used on the
   floating Book button) INSIDE the pill, left of the label, at a size that fits the
   existing button height. currentColor keeps it in step with the hover state. */
.ttb-splitcard__cta-icon{ width:15px; height:19px; flex:none; }
.ttb-splitcard__cta-icon .ttb-leaf{ display:block; height:100%; width:auto; }

/* Anchor targets sit clear of the fixed header when jumped to. */
.ttb-form-card{ scroll-margin-top:110px; }
.ttb-txlist{ scroll-margin-top:100px; }

/* Pricing: the Other Fees table + per-area booking terms */
.ttb-pricetable--other .ttb-pricetable__title{ font-size:var(--ttb-h4); }
.ttb-pricing__note--terms{ font-size:var(--ttb-body-sm); color:var(--ttb-heading); margin-top:8px; padding:18px 22px; background:var(--ttb-surface); border-radius:var(--ttb-radius-md); }
.ttb-pricing__note--terms + .ttb-pricing__note{ margin-top:18px; }

/* ── Practice gallery — masonry of practice photography ──
   CSS multi-column masonry: every photo keeps its own aspect ratio (nothing is
   cropped), the columns fill top-to-bottom with no holes, and portrait /
   landscape mix freely. Three columns on desktop, two on tablet, one on phones.
   The optional "grid" layout is an even 3-up grid of 4:3 crops instead. ── */
.ttb-pgal{ padding-block:var(--ttb-section-y); background:var(--ttb-white); }
.ttb-pgal__head{ max-width:720px; margin:0 auto 44px; text-align:center; }
.ttb-pgal__eyebrow{ color:var(--ttb-gold-strong); }
.ttb-pgal__title{ font-size:var(--ttb-h2); letter-spacing:-.01em; }
.ttb-pgal__text{ margin-top:16px; font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-heading); }
.ttb-pgal__grid{ columns:3; column-gap:clamp(12px,1.3vw,20px); }
.ttb-pgal__item{ position:relative; margin:0 0 clamp(12px,1.3vw,20px); min-width:0; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; border-radius:20px; overflow:hidden; background:var(--ttb-surface); }
.ttb-pgal__btn{ display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; -webkit-appearance:none; appearance:none; text-align:left; }
.ttb-pgal__img{ width:100%; height:auto; aspect-ratio:var(--ar, 3 / 2); object-fit:cover; display:block; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.ttb-pgal--grid .ttb-pgal__grid{ columns:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.3vw,20px); }
.ttb-pgal--grid .ttb-pgal__item{ margin:0; }
.ttb-pgal--grid .ttb-pgal__img{ aspect-ratio:4 / 3; }
.ttb-pgal__btn:hover .ttb-pgal__img, .ttb-pgal__btn:focus-visible .ttb-pgal__img{ transform:scale(1.04); }
.ttb-pgal__zoom{ position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.88); color:var(--ttb-primary); font-size:14px; opacity:0; transform:translateY(6px); transition:opacity var(--ttb-dur-fast) var(--ttb-ease), transform var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-pgal__btn:hover .ttb-pgal__zoom, .ttb-pgal__btn:focus-visible .ttb-pgal__zoom{ opacity:1; transform:none; }
.ttb-pgal__btn:focus-visible{ outline:3px solid var(--ttb-gold); outline-offset:-3px; border-radius:20px; }
@media (max-width:1000px){
  .ttb-pgal__grid{ columns:2; }
  .ttb-pgal--grid .ttb-pgal__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .ttb-pgal__grid{ columns:1; }
  .ttb-pgal--grid .ttb-pgal__grid{ grid-template-columns:1fr; }
  .ttb-pgal__item{ border-radius:16px; margin-bottom:14px; }
  .ttb-pgal__zoom{ opacity:1; transform:none; width:34px; height:34px; }
}

/* ── Lightbox (shared pattern with the treatment popup: fixed backdrop, focus
   trap, Escape / arrows / swipe, no layout shift) ── */
.ttb-lightbox{ position:fixed; inset:0; z-index:350; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .28s var(--ttb-ease); }
.ttb-lightbox[hidden]{ display:none; }
.ttb-lightbox.is-open{ opacity:1; }
.ttb-lightbox__backdrop{ position:absolute; inset:0; background:rgba(20,18,15,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ttb-lightbox__panel{ position:relative; width:100%; height:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(8px,2vw,24px); padding:clamp(56px,7vh,72px) clamp(10px,2vw,28px); }
.ttb-lightbox__figure{ margin:0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.ttb-lightbox__img{ max-width:100%; max-height:calc(100vh - clamp(130px,18vh,180px)); width:auto; height:auto; object-fit:contain; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.5); background:var(--ttb-primary); }
.ttb-lightbox__caption{ color:rgba(255,255,255,.85); font-size:14px; text-align:center; max-width:70ch; }
.ttb-lightbox__caption[hidden]{ display:none; }
.ttb-lightbox__close{ position:absolute; top:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); width:54px; height:54px; border:0; border-radius:14px; background:var(--ttb-gold); color:var(--ttb-primary); font-size:30px; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2; transition:background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-lightbox__close:hover{ background:#e7c79b; }
.ttb-lightbox__arrow{ width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:grid; place-items:center; flex:none; transition:background var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-lightbox__arrow i{ font-size:17px; }
.ttb-lightbox__arrow:hover{ background:var(--ttb-gold); color:var(--ttb-primary); border-color:var(--ttb-gold); }
.ttb-lightbox__close:focus-visible, .ttb-lightbox__arrow:focus-visible{ outline:3px solid var(--ttb-gold); outline-offset:3px; }
.ttb-lightbox__count{ position:absolute; left:50%; bottom:clamp(14px,2.4vh,24px); transform:translateX(-50%); color:rgba(255,255,255,.7); font-family:var(--ttb-font-body); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:640px){
  .ttb-lightbox__panel{ grid-template-columns:1fr; padding:64px 12px 56px; }
  .ttb-lightbox__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; }
  .ttb-lightbox__arrow--prev{ left:10px; } .ttb-lightbox__arrow--next{ right:10px; }
  .ttb-lightbox__img{ max-height:calc(100vh - 140px); border-radius:12px; }
}
@media (prefers-reduced-motion:reduce){
  .ttb-lightbox, .ttb-pgal__img, .ttb-pgal__zoom{ transition:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FINAL AMENDS (Sept 2026) — header logo (edited in place above) · hero strip ·
   cross-sell tile alignment · featured landing card · floating Book pill ·
   Contact alignment & spacing · quote-style mission text · Denplan accordion +
   finance card (sidebar) · sticky pricing nav & price tooltips · gallery masonry
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero strip: the columns follow the number of items. The Dental home dropped
   its wellness column, so its strip is two equal columns; Wellness keeps three. ── */
.ttb-herostrip{ grid-template-columns:repeat(auto-fit, minmax(0,1fr)); }
@media (max-width:820px){ .ttb-herostrip{ grid-template-columns:1fr; } }

/* ── Cross-sell tiles: the body takes only the height of its copy. (The 244px /
   276px min-height that once held every heading on one level left a block of empty
   scrim under short descriptions — removed 22 Sept 2026.) The tiles are grid items
   with a fixed aspect ratio, so every tile in a row is the same height and the
   bottom-anchored body keeps their bottom edges aligned by construction; a longer
   description simply starts higher. ── */
@media (min-width:641px) and (max-width:1000px){ .ttb-xtile__name{ font-size:26px; } } /* narrower two-up tiles: smaller title, copy may run to four or five lines */

/* ── Landing cards: the highlighted card (Join Treetops) earns its prominence from
   width alone (flex 1.3 against 1 : 1) plus the filled gold button — no border, no
   extra shadow. Same hover behaviour as its neighbours. ── */
.ttb-splitcard--featured{ flex-grow:1.3; }
.ttb-splitcard--featured .ttb-splitcard__cta{ background:var(--ttb-gold); border-color:var(--ttb-gold); color:var(--ttb-primary); font-weight:600; }
.ttb-splitcard--featured .ttb-splitcard__cta:hover,
.ttb-splitcard--featured:hover .ttb-splitcard__cta{ background:#e7c79b; border-color:#e7c79b; color:var(--ttb-primary); }

/* ── Floating Book pill: the emblem box has an explicit width, so the layout no
   longer depends on the SVG resolving its own width from height:100% (the SVG also
   now carries width/height attributes — see ttb_render_floating_ctas). ── */
.ttb-fab__icon{ width:42px; }
.ttb-fab__icon .ttb-leaf, .ttb-fab__icon-img{ width:100%; height:100%; }

/* ── Contact: the two flanking images sit level (both vertically centred on the intro)
   instead of one bottom-left / one top-right; tighter vertical rhythm; and the
   Enquire card fills its column so nothing is left empty beneath it. ── */
.ttb-contact-intro{ padding-block:clamp(56px,6vw,88px) clamp(36px,4vw,56px); }
.ttb-contact-intro__flank{ --_fw:clamp(150px,17vw,284px); width:var(--_fw); top:50%; bottom:auto; margin-top:calc(var(--_fw) * -0.6602); } /* 375/284 ÷ 2 */
.ttb-contact-intro__flank--l{ left:clamp(16px,3vw,60px); top:50%; bottom:auto; }
.ttb-contact-intro__flank--r{ right:clamp(16px,3vw,60px); top:50%; bottom:auto; }
.ttb-contact__grid{ align-items:stretch; }
.ttb-contact__aside .ttb-booking{ height:100%; display:flex; flex-direction:column; }
.ttb-contact__aside .ttb-booking > .ttb-booking__block:last-child{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; }
.ttb-contact__aside .ttb-booking .ttb-booking__illustration{ margin-top:auto; padding-top:32px; width:100%; }
.ttb-contact{ padding-bottom:clamp(48px,5vw,80px); }
.ttb-contact-quote{ margin-top:clamp(36px,4vw,56px); }
@media (max-width:960px){ .ttb-contact__grid{ align-items:start; } .ttb-contact__aside .ttb-booking{ height:auto; } }

/* ── Our Mission: the mission statement is set as a quotation (typographic quote
   marks + italic). Marks come from CSS so replacement copy from the client gets the
   same treatment without anyone typing quotes. ── */
.ttb-mq__text{ font-style:italic; }
.ttb-mq__text::before{ content:"\201C"; }
.ttb-mq__text::after{ content:"\201D"; }

/* ── Plans & Fees: Denplan band (full width, above pricing) + Finance card (sidebar).
   The band keeps the dark card shell. Head (eyebrow, heading, intro, Enquire) on the
   left; the two plan accordion tiles side by side on the right; footnote beneath. It
   stays compact while both tiles are closed and simply grows when one is opened. ── */
.ttb-plans{ padding-bottom:clamp(36px,3.6vw,56px); }
.ttb-membership__foot{ margin-top:22px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.62); text-align:left; }
.ttb-membership__actions .ttb-btn{ max-width:100%; }
.ttb-membership--band{ text-align:left; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); column-gap:clamp(32px,4vw,64px); row-gap:6px; align-items:start; padding:clamp(30px,2.8vw,42px) clamp(28px,3.2vw,48px) clamp(28px,2.6vw,38px); }
.ttb-membership--band .ttb-membership__head{ grid-column:1; grid-row:1 / span 2; }
.ttb-membership--band .ttb-membership__logo{ justify-content:flex-start; }
.ttb-membership--band .ttb-membership__eyebrow{ margin-bottom:12px; }
.ttb-membership--band .ttb-membership__title{ font-size:var(--ttb-h3); margin-bottom:14px; text-wrap:balance; }
.ttb-membership--band .ttb-membership__text{ font-size:15px; line-height:1.65; max-width:46ch; margin:0; }
.ttb-membership--band .ttb-membership__text + .ttb-membership__text{ margin-top:14px; }
.ttb-membership--band .ttb-membership__features{ margin:18px 0 0; max-width:none; }
.ttb-membership--band .ttb-membership__actions{ flex-direction:column; align-items:stretch; width:max-content; max-width:100%; margin-top:22px; } /* two buttons since Oct 2026 (Enquire + Find out more): stacked at one shared width — the pair no longer fits the head column side by side */
.ttb-membership--band .ttb-membership__actions .ttb-btn{ width:auto; min-width:217px; }
.ttb-membership--band .ttb-acc{ grid-column:2; grid-row:1; margin-top:0; }
.ttb-membership--band .ttb-membership__foot{ grid-column:2; grid-row:2; margin-top:12px; max-width:none; } /* under the tiles, so the band is no taller than its head while both tiles are closed */

/* Accordion (one row per plan option). Closed: name + price + ⊕. Open: ⊖ and the
   description / inclusions. Height animates via grid-template-rows 0fr → 1fr; the
   closed body is visibility:hidden, so it is out of the accessibility tree and the
   tab order until opened. Only the icon changes shape — no other movement. */
.ttb-acc{ margin-top:26px; text-align:left; border-top:1px solid rgba(255,255,255,.2); }
.ttb-acc__item{ border-bottom:1px solid rgba(255,255,255,.2); }
.ttb-acc__heading{ margin:0; }
.ttb-acc__btn{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin:0; padding:18px 2px; background:none; border:0; border-radius:6px; color:#fff; text-align:left; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.ttb-acc__btn:focus-visible{ outline:2px solid var(--ttb-gold); outline-offset:2px; }
.ttb-acc__label{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ttb-acc__name{ font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:23px; line-height:1.1; letter-spacing:-.01em; color:#fff; }
.ttb-acc__price{ font-family:var(--ttb-font-body); font-weight:600; font-size:14px; line-height:1.3; color:var(--ttb-gold); }
.ttb-acc__price span{ font-weight:400; color:rgba(255,255,255,.7); }
.ttb-acc__icon{ position:relative; flex:none; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.4); color:#fff; transition:background var(--ttb-dur-fast) var(--ttb-ease), border-color var(--ttb-dur-fast) var(--ttb-ease), color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-acc__icon::before,
.ttb-acc__icon::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; border-radius:1px; background:currentColor; transform:translate(-50%,-50%); transition:transform var(--ttb-dur) var(--ttb-ease), opacity var(--ttb-dur) var(--ttb-ease); }
.ttb-acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.ttb-acc__btn:hover .ttb-acc__icon,
.ttb-acc__item.is-open .ttb-acc__icon{ background:var(--ttb-gold); border-color:var(--ttb-gold); color:var(--ttb-primary); }
.ttb-acc__item.is-open .ttb-acc__icon::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; } /* plus → minus */
.ttb-acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--ttb-dur) var(--ttb-ease); }
.ttb-acc__inner{ min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s linear var(--ttb-dur); }
.ttb-acc__item.is-open .ttb-acc__panel{ grid-template-rows:1fr; }
.ttb-acc__item.is-open .ttb-acc__inner{ visibility:visible; transition:none; }
.ttb-acc__body{ padding:2px 2px 22px; }
.ttb-acc__text{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.85); }
.ttb-acc__list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ttb-acc__list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:rgba(255,255,255,.9); }
.ttb-acc__list i{ color:var(--ttb-gold); font-size:13px; margin-top:4px; flex:none; }
@media (prefers-reduced-motion:reduce){ .ttb-acc__panel, .ttb-acc__inner, .ttb-acc__icon, .ttb-acc__icon::before, .ttb-acc__icon::after{ transition:none !important; } }

/* Tile variant: each plan is its own rounded tile; two equal columns in the band,
   stacked on phones. A tile only grows when it is the open one. */
.ttb-acc--tiles{ border-top:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.ttb-acc--tiles .ttb-acc__item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:0 22px; }
.ttb-acc--tiles .ttb-acc__btn{ padding:20px 0; }
.ttb-acc--tiles .ttb-acc__body{ padding:0 0 22px; }

/* Finance card (Tabeo) — grey shell (the footer's --ttb-secondary), white type, gold button. */
.ttb-finance{ background:var(--ttb-primary); color:#fff; text-align:center; padding:40px 40px 44px; } /* the same dark ground as the Denplan band, so the two boxes match (client, Oct 2026) */
.ttb-finance__logo img{ max-height:34px; width:auto; margin:0 auto 14px; }
.ttb-finance__eyebrow{ color:var(--ttb-gold); }
.ttb-finance__title{ --_ttb-hc:#fff; font-size:clamp(28px,2.1vw,32px); letter-spacing:-.01em; margin:6px 0 18px; }
.ttb-finance__text{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.86); }
.ttb-finance__actions{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:24px; }
.ttb-finance__actions .ttb-btn--primary{ min-width:217px; max-width:100%; text-align:center; background:var(--ttb-gold); border-color:var(--ttb-gold); color:var(--ttb-primary); }
.ttb-finance__actions .ttb-btn--primary:hover{ background:#e7c79b; border-color:#e7c79b; }
.ttb-finance__actions .ttb-btn--link{ color:#fff; font-size:13px; padding-block:0; }
.ttb-finance__note{ margin-top:22px; font-size:12px; line-height:1.6; color:rgba(255,255,255,.62); }

@media (max-width:1000px){
  .ttb-membership--band{ grid-template-columns:1fr; row-gap:24px; text-align:center; padding:36px 28px 32px; }
  .ttb-membership--band .ttb-membership__head{ display:flex; flex-direction:column; align-items:center; }
  .ttb-membership--band .ttb-membership__logo{ justify-content:center; }
  .ttb-membership--band .ttb-membership__actions{ justify-content:center; }
  .ttb-membership--band .ttb-membership__head{ grid-row:auto; }
  .ttb-membership--band .ttb-acc{ grid-column:1; grid-row:auto; }
  .ttb-membership--band .ttb-membership__foot{ grid-column:1; grid-row:auto; text-align:left; margin-top:4px; }
}
@media (max-width:680px){
  .ttb-membership--band{ padding:32px 22px 28px; }
  .ttb-acc--tiles{ grid-template-columns:1fr; gap:12px; }
  .ttb-acc--tiles .ttb-acc__item{ padding:0 18px; }
  .ttb-membership--band .ttb-membership__actions{ width:100%; }
  .ttb-membership--band .ttb-membership__actions .ttb-btn{ width:100%; min-width:0; }
  .ttb-finance{ padding:32px 26px 36px; } .ttb-finance__actions .ttb-btn--primary{ width:100%; min-width:0; }
}

/* ── Pricing category nav: sticky beneath the fixed header, compact pills, so the
   categories stay one click away however far the list has been scrolled. Pills are
   anchors (see ttb_pricing_render_nav): no JS → jump to the table; JS → filter. ── */
.ttb-pricing__nav{ position:sticky; top:98px; z-index:5; gap:10px; margin-bottom:40px; padding-block:12px; background:var(--ttb-white); }
.ttb-pricing__nav .ttb-pill{ display:inline-block; padding:13px 18px; line-height:1; text-decoration:none; }
/* Below 1000px the wrapped pills would make a 200px+ sticky block, so the nav becomes
   one horizontally scrollable row that bleeds to the gutters (swipe to see more). */
@media (max-width:1000px){
  .ttb-pricing__nav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(-1 * var(--ttb-gutter)); padding-inline:var(--ttb-gutter); margin-bottom:28px; }
  .ttb-pricing__nav::-webkit-scrollbar{ display:none; }
  .ttb-pricing__nav .ttb-pill{ flex:none; white-space:nowrap; }
}

/* ── Price tooltips: "£165" + ⓘ → "per tooth". Hover, keyboard focus (:focus-within)
   and tap (.is-open via frontend.js) all reveal it; the qualifier is also present as
   visually-hidden text (.ttb-sr) so it is never lost to assistive tech or print. The
   bubble is anchored to the icon's right edge, so it can never overflow the viewport. ── */
.ttb-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ttb-pricerow__price{ display:flex; align-items:center; justify-content:flex-start; gap:8px; white-space:nowrap; }
.ttb-tip{ position:relative; display:inline-flex; }
.ttb-tip__btn{ width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:rgba(var(--ttb-primary-rgb),.5); display:grid; place-items:center; cursor:pointer; -webkit-appearance:none; appearance:none; transition:color var(--ttb-dur-fast) var(--ttb-ease), background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-tip__btn i{ font-size:15px; display:block; }
.ttb-tip__btn:hover, .ttb-tip__btn:focus-visible, .ttb-tip.is-open .ttb-tip__btn{ color:var(--ttb-primary); background:rgba(var(--ttb-gold-rgb),.4); outline:none; }
.ttb-tip__btn:focus-visible{ box-shadow:0 0 0 2px var(--ttb-gold); }
.ttb-tip__bubble{ position:absolute; right:0; bottom:calc(100% + 8px); z-index:6; width:max-content; max-width:min(260px,70vw); padding:9px 13px; border-radius:10px; background:var(--ttb-primary); color:#fff; font-family:var(--ttb-font-body); font-size:13px; line-height:1.4; letter-spacing:.01em; text-transform:none; white-space:normal; text-align:left; box-shadow:0 10px 26px rgba(20,18,15,.22); opacity:0; visibility:hidden; transform:translateY(4px); pointer-events:none; transition:opacity var(--ttb-dur-fast) var(--ttb-ease), transform var(--ttb-dur-fast) var(--ttb-ease), visibility var(--ttb-dur-fast); }
.ttb-tip__bubble::after{ content:""; position:absolute; right:7px; top:100%; border:6px solid transparent; border-top-color:var(--ttb-primary); }
.ttb-tip:hover .ttb-tip__bubble, .ttb-tip:focus-within .ttb-tip__bubble, .ttb-tip.is-open .ttb-tip__bubble{ opacity:1; visibility:visible; transform:none; }
@media (max-width:1240px){ .ttb-pricerow__price{ justify-content:flex-end; } }
.ttb-poptable__unit{ margin-left:6px; font-size:12px; font-weight:400; color:var(--ttb-body); }
/* The same tooltip inside the treatment popup's price rows (a non-unit qualifier such as
   "if required"): the icon sits on the price's line, just after it. */
.ttb-poptable__row .p .ttb-tip{ margin-left:6px; vertical-align:middle; }
/* The shared pricing disclaimer under the popup's price table — the Plans & Fees callout,
   spaced from the table instead of from the heading above it (client, Oct 2026). */
.ttb-popup__note{ margin:20px 0 0; }
/* A reduced fee in the popup: previous price struck through, offer badge after the name. */
.ttb-poptable__was{ margin-right:8px; font-weight:400; color:var(--ttb-body); text-decoration:line-through; }
.ttb-poptable__offer{ display:inline-block; margin-left:10px; padding:4px 10px; border-radius:var(--ttb-radius-pill); background:var(--ttb-gold); color:var(--ttb-primary); font-family:var(--ttb-font-body); font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.2; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }
.ttb-pdesc__label .ttb-poptable__offer{ margin-left:8px; }
@media (max-width:640px){ .ttb-poptable__offer{ display:block; width:max-content; margin:6px 0 0; } }
@media (prefers-reduced-motion:reduce){ .ttb-tip__bubble, .ttb-tip__btn{ transition:none !important; } }

/* ── Practice gallery: JS masonry. frontend.js measures the column width, computes
   each photo's height from its own --ar and drops it into the shortest column, so the
   three columns finish level and the bottom-left hole is gone. No JS → the CSS
   columns above still lay the mosaic out. Single column on phones: plain flow. ── */
.ttb-pgal__grid.is-masonry{ columns:auto; position:relative; }
.ttb-pgal__grid.is-masonry .ttb-pgal__item{ position:absolute; margin:0; }

/* ═══════════════════════════════════════════════════════════════════════
   AWAITING-CONTENT AMENDS (22 Sept 2026) — Practice intro flanks level ·
   cross-sell tiles on phones
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Practice intro: the two flanking images level. The Figma stagger (left image
   anchored low, right image high) read to the client as misaligned. Both images now
   share one top edge — centred on the band, so the pair frames the copy — and, being
   the same width and ratio, one bottom edge too. `translate` rather than `transform`,
   so the scale reveal that already animates `transform` on the same element still
   composes with it. Below 1180px the flanks are hidden (unchanged). ── */
.ttb-intro__flank--l, .ttb-intro__flank--r{ top:50%; bottom:auto; translate:0 -50%; }

/* ── Cross-sell tiles on phones. The single-column tile was a landscape 16:13 box
   holding portrait photographs: object-fit:cover threw away almost half of every
   picture (heads at the top edge went first) and the title + copy block covered
   most of what was left — at 320px it was taller than the tile. Phones now keep a
   portrait card (4:5, a touch shorter than the desktop 496:650), so ~83% of the
   photograph shows and the copy sits in the lower part of the card; a tile's
   "Image focus" setting in the Builder pins the top of a portrait photo in frame.
   Narrow phones step the heading and copy down one size so the block still leaves
   the upper half of the card clear. Desktop and two-up tablet tiles are unchanged. ── */
@media (max-width:640px){
  .ttb-xtile{ aspect-ratio:4/5; }
}
@media (max-width:379px){
  .ttb-xtile__body{ padding:26px 24px; gap:8px; }
  .ttb-xtile__name{ font-size:26px; }
  .ttb-xtile__text{ font-size:14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VERTICAL RHYTHM (22 Sept 2026) — bands on one surface
   ═══════════════════════════════════════════════════════════════════════ */

/* Each band owns its own section padding, so two bands on the same surface that
   both carry it met with a doubled gap (2 × --ttb-section-y ≈ 200px at 1440, 240px
   on wide screens, 128px on phones) although they read as one continuous area.
   ttb_render_section() (frontend.php, ttb_section_band) marks the second of such a
   pair .ttb-flush-top; it drops its top padding, so the pair keeps ONE section-y
   between the blocks — the distance a band keeps from a change of surface, at every
   breakpoint (the token already scales). Bands with no padding at the join (hero,
   feature split, map, mission stage) are never involved. Doubled class = 0,2,0, so it
   wins over every single-class padding rule and its media variants without !important. */
.ttb-flush-top.ttb-flush-top{ padding-top:0; }

/* ═══════════════════════════════════════════════════════════════════════
   FINAL AMENDS 2 (23 Sept 2026) — hero autoplay + sound control · hero buttons
   hidden on mobile · tile CTAs on one level · standalone Services grid ·
   mission-statement intro · compact nav dropdown (Our Surgery)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero video, autoplay mode (Dental home). The video starts muted and loops
   BEHIND the copy, so the heading, strip and header all stay put — the play-on-
   demand .is-playing state is never used here. The cover image is the poster: it
   fades out once the player reports playback and simply stays where autoplay is
   refused. Visitors who ask for reduced motion get the play-on-demand hero instead
   (frontend.js hands the same control over as a play button). ── */
.ttb-hero--autoplay.is-live .ttb-hero__cover{ opacity:0; pointer-events:none; }
/* Sound on / off shares the play control's bordered box (Figma Group 2); only the
   glyph changes — volume-xmark while muted, volume-high with the sound on. */
.ttb-hero__toggle--sound .ttb-hero__toggle-icon{ font-size:22px; }

/* ── Hero buttons hidden in the hero's stacked mobile layout (≤820px), where the
   feature strip beneath already links to the same place (Builder toggle). ── */
@media (max-width:820px){
  .ttb-hero__actions--desktop{ display:none; }
}

/* ── Treatment / service tiles: every "View Treatment" button on one level.
   Grid rows (and the carousel track) already stretch each tile to the tallest in
   the row; the title + summary block now fills whatever is left, so the button
   always sits at the foot of the card — no fixed heights, nothing truncated. ── */
.ttb-tile__content{ flex:1 1 auto; }
.ttb-tile__text{ flex:1 1 auto; width:100%; padding-bottom:26px; text-align:center; } /* title + summary centred to match the button (client, 7 Oct 2026) — one centred composition */
.ttb-tile__btn{ margin-top:0; align-self:center; } /* centred in the card (client, Oct 2026) */

/* ── A treatment grid standing alone (Wellness home "Our Services": no intro
   above it) carries its own section padding, and as an anchor target (#services)
   it clears the sticky header like the team band does. ── */
.ttb-txlist{ scroll-margin-top:110px; }
.ttb-txlist--standalone{ padding-top:var(--ttb-section-y); }

/* ── Intro, mission-statement style (Our Surgery). The text becomes one large,
   quoted statement — the italic + curly-quote treatment of the Our Mission band's
   text (.ttb-mq__text), scaled up to carry the band without a heading. Sized on
   the H3 step of the type scale (2.1vw, capped at 35px) with a 22px floor on
   phones — "make the Our Mission text larger", client review 29 Sept 2026
   (was clamp(20px,1.75vw,27px)). ── */
/* 1 Oct 2026 (client): the hierarchy is reversed — "Our Mission" is the prominent
   element (Karin Bold at the H3 step, the heading face's own case rather than tracked
   caps) and the statement steps down to a regular, upright lead size (was italic,
   clamp(22px,2.1vw,35px)). The quotation marks stay. */
.ttb-intro--statement .ttb-intro__eyebrow{ font-family:var(--ttb-font-heading); font-weight:700; font-size:var(--ttb-h3); line-height:var(--ttb-lh-heading); letter-spacing:0; text-transform:none; margin-bottom:16px; }
.ttb-intro--statement .ttb-intro__statement{ font-style:normal; font-weight:400; font-size:clamp(17px,1.35vw,21px); line-height:1.6; letter-spacing:-.005em; color:var(--ttb-heading); }
.ttb-intro--center .ttb-intro__statement{ max-width:760px; margin-top:0; }
.ttb-intro--statement .ttb-intro__eyebrow + .ttb-intro__statement{ margin-top:4px; }
.ttb-intro__statement p:first-child::before{ content:"\201C"; }
.ttb-intro__statement p:last-child::after{ content:"\201D"; }

/* ── Compact nav dropdown (Our Surgery → Meet the Team). Reuses the mega panel's
   surface, heading, rows and hover state, but hangs under its own item at content
   width (the item is position:relative) and leaves the page backdrop alone. ── */
/* Attached to the header like the big mega panels: the nav item sits centred in the
   90px bar, so `50% + 39px` from the item's top is 6px above the bar's bottom edge in
   every header state (over-hero at top:16px, scrolled at top:0, legal sticky) — the
   panel tucks under the white mega-open header with no gap, square top corners and
   the mega's own downward-only shadow, so nothing peeks above the seam. */
.ttb-mega--compact{ position:absolute; top:calc(50% + 39px); left:-14px; right:auto; width:max-content; min-width:280px; max-width:min(360px, calc(100vw - 48px)); border-radius:0 0 20px 20px; box-shadow:0 32px 40px -16px rgba(20,18,15,.16); transform:translateY(10px); }
.ttb-mega--compact.is-open{ transform:translateY(0); }
.ttb-mega--compact .ttb-mega__inner{ min-height:0; padding:62px 12px 12px; }
.ttb-mega--compact .ttb-mega__heading{ top:24px; left:33px; font-size:22px; }
.ttb-mega--compact .ttb-mega__cols{ display:block; }
.ttb-mega--compact .ttb-mega__row a{ min-height:52px; font-size:17px; }
.ttb-header.is-mega-compact .ttb-mega-backdrop{ opacity:0; visibility:hidden; pointer-events:none; }
/* The compact panel lives INSIDE its nav item, so the primary-nav rules would otherwise
   reach it: `.ttb-nav ul` (flex) turns its list into a row of content-sized items —
   which is why the hover pill stopped short of the panel's right edge — and `.ttb-nav a`
   (uppercase, tracking, negative margins, nowrap) reaches its rows. Restate the block
   list and the mega-row treatment at higher specificity: the row now spans the panel's
   inner width, label left, arrow right, the cream hover filling the whole row. */
.ttb-nav .ttb-mega--compact .ttb-mega__list{ display:block; }
.ttb-nav .ttb-mega--compact .ttb-mega__row{ display:block; }
.ttb-nav .ttb-mega--compact .ttb-mega__row a{ display:flex; width:100%; box-sizing:border-box; justify-content:space-between; gap:28px; margin:0; padding:8px 12px 8px 21px; font-size:17px; letter-spacing:0; text-transform:none; white-space:normal; opacity:1; color:#322f2e; }
.ttb-nav .ttb-mega--compact .ttb-mega__row a:hover, .ttb-nav .ttb-mega--compact .ttb-mega__row a:focus-visible{ color:#000; background:rgba(var(--ttb-gold-rgb),.22); }

/* ═══════════════════════════════════════════════════════════════════════
   CLEANUP (23 Sept 2026) — narrow phones: the longest word must fit its box
   ═══════════════════════════════════════════════════════════════════════ */

/* At a true 320px viewport the Our Practice page scrolled sideways to 336px.
   Two single words were the cause, both set at a token's clamp() MINIMUM so
   they stopped scaling with the viewport:
   - the hero H1 (40px min): "Wolverhampton" is 314px wide but the container is
     277px (video heroes only hid this behind their overflow clipping);
   - team grid names (h4, 26px min): two columns give a card 127px, but
     "Sharanpreet" / "Viswanathan" / "Middleton-" run 141–166px.
   Both take min(token, vw-based) on narrow phones so the size keeps shrinking with
   the viewport just far enough for the longest current word — nothing breaks
   mid-word, nothing is clipped. The H1 rule (≤379px) is a no-op from 364px up;
   the name rule (≤420px, where the same surnames still spilled into the gutter at
   390px) is a no-op from 434px up. The video heroes' own H1 rule is more specific,
   so it is named here too — their overflow clipping had merely hidden the same word. ── */
@media (max-width:379px){
  .ttb-hero__title, .ttb-hero--cinematic .ttb-hero__title{ font-size:min(var(--ttb-h1), 11vw); } /* 35.2px at 320 → "Wolverhampton" 276px < 277px */
}
@media (max-width:420px){
  .ttb-team--grid .ttb-teamcard__name{ font-size:min(var(--ttb-h4), 6vw); } /* 19.2px at 320 → "Sharanpreet" 123px < 127px; 23.4px at 390 → 149px < 157px */
}

/* ═══════════════════════════════════════════════════════════════════════
   MEGA MENUS — responsive tiers (23 Sept 2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* The Figma layout — three treatment columns beside a 490px promo image inside a
   panel capped at 1606px — only has room for every label on one line from about
   1680px up: the longest rows ("Crowns Bridges & Veneers" 219px, "Allergy &
   Tolerance Testing" 226px, plus 77px of row padding, gap and arrow) need ~300px
   columns, i.e. ~954px of column area. Below that the columns compressed and the
   labels wrapped. Rather than squeeze the large layout down, each range gets its
   own arrangement; the ≥1700px layout is untouched.
     1480–1699  panel 24px from the viewport edges, 40px inner side padding, image 400px
     1200–1479  the image goes (it is what compresses the links); the three columns
                take the full panel width
      901–1199  the category groups sit on two columns: Dental's General and Cosmetic
                side by side with Specialisms beneath on its own two-column row;
                Wellness's single running list flows down two columns
   (≤900px is the mobile drawer — the desktop panels are display:none there.) */
@media (max-width:1699px){
  .ttb-mega{ width:calc(100% - 48px); }
  .ttb-mega__inner{ padding:84px 432px 26px 40px; } /* 400px image + 16px edge + 16px gap */
  .ttb-mega__heading{ left:40px; }
  .ttb-mega__media{ width:400px; }
}
@media (max-width:1479px){
  .ttb-mega__inner{ padding-right:40px; min-height:0; } /* no image column: nothing to fill, no empty gap */
  .ttb-mega__media{ display:none; }
  /* Shorter tablet viewports: the panel scrolls inside itself rather than running off the screen. */
  .ttb-mega{ max-height:calc(100vh - 90px); overflow-y:auto; }
}
@media (max-width:1199px){
  /* Two stacked group rows must still clear a landscape iPad (1024×768 → ~690px
     viewport): the Dental panel measures 578px here, bottom at 668. */
  .ttb-mega__inner{ padding-top:66px; padding-bottom:18px; }
  .ttb-mega__heading{ top:20px; }
  .ttb-mega__cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px 21px; }
  .ttb-mega__row a{ min-height:48px; }
  /* Grouped (Dental): an odd third group spans both columns, its rows in two sub-columns.
     Dividers restart per visual row: none above the first two, a hairline above the rest. */
  .ttb-mega__cols--grouped .ttb-mega__col:nth-child(3):last-child{ grid-column:1 / -1; }
  .ttb-mega__cols--grouped .ttb-mega__col:nth-child(3):last-child .ttb-mega__list{ display:grid; grid-template-columns:1fr 1fr; column-gap:21px; }
  .ttb-mega__cols--grouped .ttb-mega__col:nth-child(3):last-child .ttb-mega__row{ border-top:1px solid rgba(65,67,63,.12); }
  .ttb-mega__cols--grouped .ttb-mega__col:nth-child(3):last-child .ttb-mega__row:nth-child(-n+2){ border-top:0; }
  /* Plain (Wellness): the server chunks the list into three columns for the wide layout;
     here the column wrappers step aside (display:contents) and the rows themselves flow
     down two columns — 4 + 3 for the current seven services, always balanced. */
  .ttb-mega__cols--plain{ gap:0 21px; }
  .ttb-mega__cols--plain .ttb-mega__col, .ttb-mega__cols--plain .ttb-mega__list{ display:contents; }
  .ttb-mega__cols--plain .ttb-mega__row{ border-top:1px solid rgba(65,67,63,.12); }
  .ttb-mega__cols--plain .ttb-mega__col:first-child .ttb-mega__row:nth-child(-n+2){ border-top:0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ITEM DESCRIPTIONS (24 Sept 2026) — "What's this?" disclosure on price rows
   ═══════════════════════════════════════════════════════════════════════ */

/* The Wellness drips and blood tests carry a one-line description (Builder:
   price row → Description). It stays hidden until asked for: the item name is a
   real button (click / tap / keyboard, never hover alone) and the copy opens in
   a panel that spans the row beneath the name and price. Used by the Plans &
   Fees tables (.ttb-pricerow) and the treatment popup (.ttb-poptable__row). */
.ttb-pricerow--has-desc{ grid-template-rows:auto auto; }
.ttb-pdesc__toggle{ display:inline-flex; align-items:center; gap:10px; min-width:0; max-width:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:var(--ttb-heading); text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; border-radius:6px; }
.ttb-pdesc__label{ min-width:0; }
.ttb-pdesc__hint{ flex:0 0 auto; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ttb-gold-strong,#b98a3e); white-space:nowrap; opacity:.85; transition:opacity var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-pdesc__icon{ flex:0 0 auto; font-size:11px; color:var(--ttb-gold-strong,#b98a3e); transition:transform var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-pdesc__toggle:hover .ttb-pdesc__hint, .ttb-pdesc__toggle:focus-visible .ttb-pdesc__hint{ opacity:1; }
.ttb-pdesc__toggle:focus-visible{ outline:2px solid var(--ttb-gold); outline-offset:4px; }
.ttb-pdesc__toggle[aria-expanded="true"] .ttb-pdesc__icon{ transform:rotate(180deg); }
.ttb-pdesc__toggle[aria-expanded="true"] .ttb-pdesc__hint{ opacity:0; }
/* The panel sits on its own grid row across both columns and animates its
   height through grid-template-rows, so the rows above and below glide rather
   than jump. Closed = visibility:hidden, so screen readers only meet the copy
   once it is open (the button's aria-expanded says which). */
.ttb-pdesc{ grid-column:1 / -1; display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .28s var(--ttb-ease), visibility 0s .28s; }
.ttb-pdesc.is-open{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .28s var(--ttb-ease), visibility 0s; }
.ttb-pdesc__inner{ min-height:0; overflow:hidden; }
.ttb-pdesc__box{ margin:10px 0 2px; padding:12px 16px; border-radius:10px; background:var(--ttb-surface); font-size:15px; line-height:1.55; color:var(--ttb-body); max-width:70ch; }
.ttb-pdesc__box p, .ttb-pdesc__box ul{ margin:0; }
.ttb-pdesc__box p + p, .ttb-pdesc__box p + ul, .ttb-pdesc__box ul + p{ margin-top:.55em; }
.ttb-pdesc__box ul{ padding-left:1.25em; }
.ttb-pdesc__box li{ padding-left:.15em; }
.ttb-pdesc__box li + li{ margin-top:.2em; }
.ttb-poptable__row .ttb-pdesc__box{ font-size:14px; }
@media (max-width:640px){
  .ttb-pdesc__hint{ display:none; } /* the chevron carries the affordance on phones */
  .ttb-pdesc__box{ padding:10px 12px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  .ttb-pdesc, .ttb-pdesc.is-open, .ttb-pdesc__icon{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Cookie consent — centred modal dialog (includes/consent.php; the module
   at the top of frontend.js). A compact white card (560px) centred over a
   subtle brand-tinted backdrop; the page behind is inert and cannot scroll
   while it is open. Hairline border, soft shadow, Karin title, the site's
   own buttons (primary / outline, standard height and hover states).
   Above everything on the page — the floating buttons (120), the mobile bar
   (150), the mobile menu (200), the treatment popup (300), the lightbox
   (350) and the team drawer (400) — so nothing underneath can sit over it.
   ═══════════════════════════════════════════════════════════════ */
.ttb-cc{ position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:24px; overflow:hidden; }
.ttb-cc[hidden]{ display:none; }
.ttb-cc__backdrop{ position:absolute; inset:0; background:rgba(var(--ttb-primary-rgb),.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .28s var(--ttb-ease); }
.ttb-cc.is-open .ttb-cc__backdrop{ opacity:1; }
/* The page behind cannot scroll while the dialog is open. */
html.ttb-cc-open, html.ttb-cc-open body{ overflow:hidden; }
.ttb-cc__card{ position:relative; display:flex; flex-direction:column; width:min(560px,100%); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); min-height:0; background:#fff; color:var(--ttb-body); border:1px solid rgba(var(--ttb-primary-rgb),.12); border-radius:var(--ttb-radius-lg); box-shadow:0 32px 80px rgba(20,18,15,.3), 0 2px 10px rgba(20,18,15,.06); opacity:0; transform:translateY(14px); transition:opacity .28s var(--ttb-ease), transform .34s cubic-bezier(.16,1,.3,1); }
.ttb-cc.is-open .ttb-cc__card{ opacity:1; transform:none; }
/* Focus lands on the dialog itself when it opens, so it is announced; it is not a control and shows no ring of its own. */
.ttb-cc__card:focus{ outline:none; }
.ttb-cc__view{ padding:30px 36px 32px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; }
.ttb-cc__view[hidden]{ display:none; }
.ttb-cc__head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; padding-right:40px; }
.ttb-cc__mark{ display:block; flex:none; width:16px; height:20px; color:var(--ttb-gold-strong); }
.ttb-cc__mark .ttb-leaf{ display:block; width:100%; height:100%; }
.ttb-cc__title{ margin:0; font-family:var(--ttb-font-heading); font-weight:var(--ttb-font-heading-weight); font-size:22px; line-height:1.1; letter-spacing:.04em; text-transform:uppercase; color:var(--ttb-heading); }
.ttb-cc__text{ margin:0; font-family:var(--ttb-font-body); font-size:15px; line-height:1.55; letter-spacing:-.1px; color:var(--ttb-body); }
/* The one policy link, inline in the paragraph (opens in a new tab, so the dialog stays here). */
.ttb-cc__text a{ color:var(--ttb-primary); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-cc__text a:hover{ color:var(--ttb-gold-strong); }
/* Accept | Reject | Manage: one row of equal columns, the site's standard buttons (height, type and
   hover states untouched). Below 520px the primary spans the row and the other two share the next. */
.ttb-cc__actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.ttb-cc__actions .ttb-btn{ width:100%; white-space:nowrap; }
.ttb-cc__close{ position:absolute; top:18px; right:18px; width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--ttb-surface); color:var(--ttb-primary); font-size:16px; line-height:1; cursor:pointer; transition:background var(--ttb-dur-fast) var(--ttb-ease); z-index:1; }
.ttb-cc__close:hover{ background:var(--ttb-gold); }
.ttb-cc__close[hidden]{ display:none; }
/* Preferences: one row per category — name + switch, then its description and what uses it today. */
.ttb-cc__cats{ list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--ttb-line); }
.ttb-cc__cat{ padding:14px 0; border-bottom:1px solid var(--ttb-line); }
.ttb-cc__cat-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ttb-cc__cat-name{ font-family:var(--ttb-font-body); font-size:15px; font-weight:600; letter-spacing:-.1px; color:var(--ttb-heading); cursor:pointer; }
.ttb-cc__cat--locked .ttb-cc__cat-name{ cursor:default; }
.ttb-cc__cat-text{ margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--ttb-body); }
.ttb-cc__cat-use{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ttb-primary); }
/* The switch: a real checkbox laid invisibly over the drawn track, so it takes the click, the tap,
   the keyboard and the screen reader. Off = pale track, white knob; on = brand dark, gold knob. */
.ttb-cc__switch{ position:relative; display:flex; flex:none; align-items:center; gap:10px; }
.ttb-cc__always{ font-size:11px; font-weight:500; letter-spacing:.6px; text-transform:uppercase; color:var(--ttb-body); white-space:nowrap; }
.ttb-cc__input{ position:absolute; top:50%; right:0; width:46px; height:40px; margin:0; opacity:0; transform:translateY(-50%); cursor:pointer; }
.ttb-cc__input:disabled{ cursor:not-allowed; }
.ttb-cc__track{ position:relative; display:block; flex:none; width:46px; height:26px; border-radius:999px; background:rgba(var(--ttb-primary-rgb),.16); transition:background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-cc__knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform var(--ttb-dur-fast) var(--ttb-ease), background var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-cc__input:checked + .ttb-cc__track{ background:var(--ttb-primary); }
.ttb-cc__input:checked + .ttb-cc__track .ttb-cc__knob{ background:var(--ttb-gold); transform:translateX(20px); }
.ttb-cc__input:disabled + .ttb-cc__track{ opacity:.6; }
.ttb-cc__input:focus-visible + .ttb-cc__track{ outline:2px solid var(--ttb-gold-strong); outline-offset:3px; }
.ttb-cc .ttb-btn:focus-visible, .ttb-cc__close:focus-visible, .ttb-cc__text a:focus-visible{ outline:2px solid var(--ttb-gold-strong); outline-offset:3px; }
@media (max-width:520px){
  /* Narrow screens: Accept full width above Reject + Manage (equal halves, outer edges aligned). */
  .ttb-cc{ padding:16px; }
  .ttb-cc__view{ padding:24px 22px; }
  .ttb-cc__head{ margin-bottom:10px; }
  .ttb-cc__title{ font-size:19px; }
  .ttb-cc__text{ font-size:14px; line-height:1.5; }
  .ttb-cc__actions{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
  .ttb-cc__actions .ttb-btn--primary{ grid-column:1 / -1; }
  .ttb-cc__actions .ttb-btn{ padding-inline:16px; }
  .ttb-cc__close{ top:14px; right:14px; width:32px; height:32px; font-size:14px; }
}
/* A short screen (a phone on its side): tighter, and the view inside scrolls. */
@media (max-height:520px){
  .ttb-cc{ padding:12px; }
  .ttb-cc__card{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
  .ttb-cc__view{ padding:18px 22px; }
  .ttb-cc__head{ margin-bottom:8px; }
  .ttb-cc__actions{ margin-top:14px; }
}
@media (prefers-reduced-motion:reduce){ .ttb-cc__backdrop, .ttb-cc__card{ transition:none; transform:none; } .ttb-cc__track, .ttb-cc__knob{ transition:none; } }

/* ── Consent-gated embeds: the placeholder that stands in for gated content until
   "External content" is allowed (ttb_consent_gate / ttb_consent_iframe_attrs). ── */
iframe[data-ttb-consent]:not([data-ttb-consent-active]){ display:none; }
html.ttb-consent-external .ttb-gate[data-ttb-consent-gate="external"]{ display:none; }
.ttb-gate{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:28px 24px; background:var(--ttb-surface); color:var(--ttb-body); border-radius:var(--ttb-radius-md); }
.ttb-gate__icon{ font-size:22px; color:var(--ttb-gold-strong); }
.ttb-gate__text{ margin:0; max-width:52ch; font-family:var(--ttb-font-body); font-size:15px; line-height:1.55; letter-spacing:-.1px; }
.ttb-gate__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; margin-top:4px; }
.ttb-gate__btn{ padding:15px 22px; }
.ttb-gate__link{ font-size:14px; color:var(--ttb-primary); text-decoration:underline; text-underline-offset:3px; }
.ttb-gate .ttb-btn:focus-visible, .ttb-gate__link:focus-visible{ outline:2px solid var(--ttb-gold-strong); outline-offset:3px; }
/* Reviews band: a white panel where the widget would be. On desktop the heading copy shares the
   widget's grid cell, so the panel starts beneath it (the widget's own header reserves the same
   height — see TTB_ELFSIGHT_CSS in frontend.js). */
.ttb-gate--reviews{ background:#fff; min-height:200px; }
@media (min-width:981px){ .ttb-gate--reviews{ margin-top:calc(var(--ttb-reviews-intro-h, 0px) + 46px); } }
/* Contact page map: the same footprint as the map it stands in for. */
.ttb-gate--mapfull{ min-height:clamp(360px,42vw,560px); border-radius:0; }
/* Footer map: a translucent overlay on the map tile. Clicks outside its button fall through to
   the "open map" link beneath, which needs no consent. */
.ttb-footer__mapwrap{ position:relative; width:100%; max-width:362px; }
.ttb-gate--map{ position:absolute; inset:0; padding:12px; gap:8px; background:rgba(255,255,255,.06); color:#fff; border-radius:15px; pointer-events:none; }
.ttb-gate--map .ttb-gate__icon{ font-size:18px; color:var(--ttb-gold); }
.ttb-gate--map .ttb-gate__text{ font-size:13px; line-height:1.4; color:rgba(255,255,255,.85); }
.ttb-gate--map .ttb-gate__actions{ margin-top:0; }
.ttb-gate--map .ttb-gate__btn{ pointer-events:auto; padding:11px 18px; font-size:11px; }
/* "Cookie settings" in the footer's Our Policies column — a button drawn exactly like the links beside it. */
.ttb-footer__cookies{ background:none; border:0; padding:0; margin:0; color:#fff; font-family:var(--ttb-font-body); font-size:16px; letter-spacing:-.16px; line-height:inherit; cursor:pointer; text-align:left; transition:color var(--ttb-dur-fast) var(--ttb-ease); }
.ttb-footer__cookies:hover{ color:var(--ttb-gold); }
.ttb-footer__cookies:focus-visible{ outline:2px solid var(--ttb-gold); outline-offset:3px; border-radius:6px; }