/* 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:linear-gradient(180deg, rgba(20,18,15,.34) 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; }
/* Cover the hero box with a 16:9 player (classic vw/vh cover — always fills, keeps ratio). */
.ttb-hero__video iframe, .ttb-hero__video video{
    position:absolute !important; top:50% !important; left:50% !important;
    width:177.78vh !important; min-width:100% !important;
    height:56.25vw !important; min-height:100% !important;
    transform:translate(-50%,-50%); border:0; object-fit:cover;
}
.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; }

/* ── 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:linear-gradient(180deg, rgba(20,18,15,.5) 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; }

  /* 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); }

  /* 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); }
.ttb-introxsell .ttb-xsell--combined{ padding-block:0 var(--ttb-section-y); }

/* ── Plans & Fees two-column body ── */
.ttb-pf-body{ padding-bottom:var(--ttb-space-9); }
.ttb-pf-grid{ display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:55px; align-items:start; }
/* Rail stretches to the full body-row height so the booking card (the main CTA)
   can stick on its own while the membership card scrolls away above it. */
.ttb-pf-rail{ align-self:stretch; display:flex; flex-direction:column; gap:38px; }
.ttb-pf-rail .ttb-booking{ position:sticky; top:110px; }
.ttb-pf-main{ min-width:0; }

/* ── 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:100px; }
.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,671px) 1fr; 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; }

/* ── 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__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 ── */
.ttb-reviews{ background:rgba(var(--ttb-gold-rgb),.30); padding-block:var(--ttb-space-9); }
.ttb-reviews__title{ text-align:center; font-size:clamp(34px,2.9vw,50px); letter-spacing:-.01em; }
.ttb-reviews__subtitle{ text-align:center; font-size:16px; line-height:29px; letter-spacing:-.16px; color:var(--ttb-heading); max-width:60ch; margin:14px auto 48px; }
/* Without a subheading the title would otherwise sit almost on the cards, so the
   gap the subtitle normally contributes is applied to the grid instead. */
.ttb-reviews__title + .ttb-reviews__grid{ margin-top:48px; }
.ttb-reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.ttb-review{ background:#fff; border-radius:15px; padding:28px 30px; box-shadow:var(--ttb-shadow-card); }
.ttb-review__head{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.ttb-review__avatar{ width:44px; height:44px; border-radius:50%; background:#3f6fb5; color:#fff; display:grid; place-items:center; font-family:var(--ttb-font-body); font-weight:600; font-size:18px; flex:none; }
.ttb-review__meta{ flex:1; min-width:0; }
.ttb-review__name{ font-weight:600; color:var(--ttb-heading); font-size:15px; }
.ttb-review__date{ font-size:13px; color:#8a8b84; }
.ttb-review__source-logo{ flex:none; display:inline-flex; }
.ttb-review__source-logo i{ font-size:20px; color:#4285F4; }
.ttb-review__stars{ display:flex; gap:3px; color:var(--ttb-star); font-size:14px; margin-bottom:12px; }
.ttb-review__stars .fa-regular{ color:#e3ddcf; }
.ttb-review__text{ font-size:15px; color:var(--ttb-body); }
.ttb-reviews__actions{ display:flex; justify-content:center; gap:16px; margin-top:44px; }

/* ══════════════ 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-pf-grid{ grid-template-columns:minmax(0,1fr) 400px; gap:40px; }
  .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: single column; the rail cards sit side by side under the tables */
@media (max-width:1000px){
  .ttb-pf-grid{ grid-template-columns:1fr; gap:40px; }
  .ttb-pf-rail{ align-self:auto; flex-direction:row; flex-wrap:wrap; gap:24px; }
  .ttb-pf-rail > *{ flex:1 1 320px; }
  .ttb-pf-rail .ttb-booking{ position:static; top:auto; }
  .ttb-intro__grid{ grid-template-columns:1fr; gap:20px; }
  .ttb-intro__title{ max-width:none; }
  .ttb-reviews__grid{ grid-template-columns:repeat(2,1fr); }
  /* 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__grid{ grid-template-columns:1fr; gap:18px; }
  .ttb-reviews__title{ margin-bottom:32px; }
  /* the title already carries 32px here, so the no-subheading gap is topped up
     rather than repeated */
  .ttb-reviews__title + .ttb-reviews__grid{ margin-top:16px; }
  .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-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); }
/* 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; }

/* ── 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
   (up to 110px tall). The scrolled state shrinks it back to 64px (see below). */
.ttb-header__logo-img{ grid-area:1 / 1; max-height:110px; 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); }
.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:64px; }
.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); }
.ttb-mega__inner{ position:relative; height:324px; }
.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{ position:absolute; top:84px; left:59px; right:541px; display:flex; gap:21px; }
.ttb-mega__col{ flex:1 1 0; min-width:0; list-style:none; margin:0; padding:0; }
.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; height:58px; padding:0 9px 0 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; }
/* Distinct current-page state — gold accent bar + bold, no cream pill */
.ttb-mega__row.is-active a{ color:var(--ttb-primary); font-weight:600; box-shadow:inset 3px 0 0 var(--ttb-gold); }
.ttb-mega__row.is-active a:hover, .ttb-mega__row.is-active a:focus-visible{ background:rgba(var(--ttb-gold-rgb),.22); }
.ttb-mega__media{ position:absolute; top:10px; right:16px; width:490px; 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__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__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:54px; 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; }
.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:1180px){
  .ttb-header__inner{ padding-inline:32px; }
  .ttb-nav ul{ gap:18px; }
  .ttb-header__right{ gap:20px; }
  .ttb-header__phone-num{ display:none; }
  .ttb-header__logo{ padding-inline:14px; }
  .ttb-header__logo-img{ max-height:52px; }
  .ttb-mega__cols{ right:451px; }
  .ttb-mega__media{ width:400px; }
}
@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__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; }
/* 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:217px; }
.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. */
.ttb-popup__panel{ 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: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; }
/* 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 without pushing the gallery down. */
.ttb-popup__close{ position:sticky; top:0; float:right; margin:0 0 -54px 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. */
.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; }
.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; }
/* 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; }
.ttb-team__nav{ display:flex; gap:12px; }
.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__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__trigger{ position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.ttb-teamcard__trigger:focus-visible{ outline:2px solid var(--ttb-gold); outline-offset:3px; border-radius:30px; }
.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__mark{ flex:none; }
.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; width:auto; }
.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__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__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 iframe,.ttb-mission__video-embed video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.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:3.2%; bottom:9%; 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%); } }
/* 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__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; }
}

/* ═══════════════════════════════════════════════════════════════════════
   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; }
.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(.5) saturate(.92) blur(2px); 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,.46) 0%, rgba(20,18,15,.64) 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,.18) 0%, rgba(20,18,15,.44) 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; }
.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); }
.ttb-split__logo{ position:absolute; top:44px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; }
.ttb-split__logo-img{ max-height:96px; width:auto; }
.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:grid; grid-template-columns:repeat(3,minmax(0,435px)); gap:18px; justify-content:center; align-items:stretch; padding-inline:40px; }
/* Dark-glass cards — Figma 108:1144: rgba(0,0,0,.1)+backdrop-blur, no border, white text, gold-outline button.
   Layout: heading spans the full width; body (left) + button (right) sit in a 2-col row beneath it. */
.ttb-splitcard{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:18px; row-gap:12px; 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:22px 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{ grid-column:1 / -1; --_ttb-hc:#fff; font-family:var(--ttb-font-heading); font-size:22px; letter-spacing:-.01em; margin-bottom:0; }
.ttb-splitcard__body{ grid-column:1; font-size:13px; line-height:1.45; color:rgba(255,255,255,.82); }
.ttb-splitcard__body:last-child{ grid-column:1 / -1; }
.ttb-splitcard__cta{ grid-column:2; justify-self:end; 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; color:#fff; 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); }
.ttb-splitcard__cta:hover,
.ttb-splitcard:hover .ttb-splitcard__cta{ background:var(--ttb-gold); border-color:var(--ttb-gold); color:var(--ttb-primary); }
.ttb-splitcard__cta-icon{ display:inline-flex; width:16px; height:16px; color:inherit; align-items:center; justify-content:center; }
.ttb-splitcard__cta-icon i{ font-size:13px; }
/* ── 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:900px){
  .ttb-split__cards{ position:static; grid-template-columns:1fr; max-width:520px; margin:0 auto; padding:24px 20px 90px; }
  .ttb-splitcard{ background:rgba(20,18,15,.62); }
}
@media (max-width:760px){
  .ttb-split__panels{ grid-template-columns:1fr; min-height:auto; }
  .ttb-split__panel{ min-height:60vh; }
  .ttb-split__logo{ top:24px; }
  .ttb-split__logo-img{ max-height:72px; }
  .ttb-split{ background:var(--ttb-primary); }
}

/* ═══════════════════════════════════════════════════════════════════
   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; }

@media (max-width:900px){
  .ttb-legal__cols{ grid-template-columns: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: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`. */
.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:64px; }
.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); }

/* ═══════════════════════════════════════════════════════════════════
   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;
  }
}