/* ==========================================================================
   Tumble & Tap – site styles
   Loaded by the Astra child theme on every page.
   Sections:
   1. Tokens   2. Base   3. Header/footer   4. Utilities
   5. Elementor widget skins   6. Interactive snippets   7. Motion   8. Reduced motion
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  /* Colours follow Elementor → Site Settings → Global Colours:
     Primary = brand colour, Secondary = dark/ink, Accent = brand text colour.
     The hex values are fallbacks for pages not built with Elementor. */
  --tt-orange: var(--e-global-color-primary, #FF7A1A);
  --tt-ink: var(--e-global-color-secondary, #1B1410);
  --tt-orange-deep: var(--e-global-color-accent, #B8460B);
  --tt-orange-hot: color-mix(in srgb, var(--tt-orange) 85%, #8a2a00);
  --tt-orange-soft: color-mix(in srgb, var(--tt-orange) 22%, #FFFFFF);
  --tt-cream: color-mix(in srgb, var(--tt-orange) 7%, #FFFFFF);
  --tt-line: color-mix(in srgb, var(--tt-orange) 14%, #F2ECE6);
  --tt-ink-2: color-mix(in srgb, var(--tt-ink) 88%, #FFFFFF);
  --tt-ink-3: color-mix(in srgb, var(--tt-ink) 80%, #FFFFFF);
  --tt-muted: color-mix(in srgb, var(--tt-ink) 72%, #FFFFFF);
  --tt-muted-on-dark: #E3D6CC;
  --tt-white: #FFFFFF;
  --tt-green: #1F8A4C;
  --tt-blue: #3E6FD8;

  /* Fonts follow Elementor Global Fonts: Primary = headings, Text = body. */
  --tt-font-display: var(--e-global-typography-primary-font-family, 'Bricolage Grotesque'), 'DM Sans', system-ui, sans-serif;
  --tt-font-body: var(--e-global-typography-text-font-family, 'DM Sans'), 'Segoe UI', system-ui, sans-serif;

  --tt-radius-s: 14px;
  --tt-radius-m: 22px;
  --tt-radius-l: 32px;
  --tt-shadow: 0 18px 40px rgba(27, 20, 16, .12);
  --tt-ease: cubic-bezier(.22, .8, .3, 1);

  /* Animation speed multiplier (Store Settings → Animation speed). */
  --tt-speed: 1;
}
body.tt-speed-slow { --tt-speed: 1.6; }
body.tt-speed-fast { --tt-speed: .65; }

/* 2. Base ---------------------------------------------------------------- */
body {
  font-family: var(--tt-font-body);
  color: var(--tt-ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .tt-display {
  font-family: var(--tt-font-display);
  letter-spacing: -0.02em;
}
a { color: var(--tt-ink); }
a:hover { color: var(--tt-orange-deep); }
:focus-visible {
  outline: 3px solid var(--tt-orange);
  outline-offset: 3px;
  border-radius: 6px;
}
img { max-width: 100%; height: auto; }

/* 3. Header / footer ----------------------------------------------------- */
/* Sticky header without a plugin. Astra wraps the header in #masthead. */
#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow .3s var(--tt-ease);
}
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }
body.tt-scrolled #masthead { box-shadow: 0 8px 24px rgba(27, 20, 16, .10); }
body.tt-scrolled .ast-primary-header-bar { min-height: 64px; }
.ast-primary-header-bar { transition: min-height .3s var(--tt-ease); }

/* Above-header announcement row (Astra > Header Builder > Above Header) */
.ast-above-header-bar {
  background: var(--tt-orange) !important;
  color: var(--tt-ink);
  font-weight: 700;
  font-size: 14px;
}
.tt-topbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 32px; }

/* Primary menu pills */
.main-header-menu .menu-link { border-radius: 999px; font-weight: 700; }
.main-header-menu .current-menu-item > .menu-link { background: var(--tt-orange-soft); }

/* "My Account" menu item rendered as an outline pill (menu item CSS class: tt-menu-btn) */
.main-header-menu .tt-menu-btn > .menu-link {
  border: 2px solid var(--tt-ink); border-radius: 999px; padding-left: 18px !important; padding-right: 18px !important; margin-left: 8px;
}
.main-header-menu .tt-menu-btn > .menu-link:hover { background: var(--tt-ink); color: var(--tt-white) !important; }
.ast-header-break-point .main-header-menu .tt-menu-btn > .menu-link { margin: 12px 20px; justify-content: center; }

/* Mobile sticky action bar (output by functions.php) */
.tt-actionbar { display: none; }
@media (max-width: 767px) {
  .tt-actionbar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1000;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 8px; background: var(--tt-white); border-radius: 20px;
    box-shadow: 0 12px 32px rgba(27, 20, 16, .25);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .tt-actionbar__item {
    min-height: 54px; border-radius: 14px; background: var(--tt-cream);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-weight: 800; font-size: 14px; text-decoration: none; color: var(--tt-ink);
  }
  .tt-actionbar__item--primary { background: var(--tt-orange); }
  body { padding-bottom: 96px; }
}

/* 4. Utilities ----------------------------------------------------------- */
.tt-eyebrow .elementor-heading-title,
.tt-eyebrow { color: var(--tt-orange-deep) !important; font-family: var(--tt-font-body) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0 !important; }
.tt-muted, .tt-muted p { color: var(--tt-muted); }
.tt-on-dark, .tt-on-dark p { color: var(--tt-muted-on-dark); }
.tt-headline-accent .elementor-heading-title span,
.tt-accent { color: var(--tt-orange-hot); }

/* Buttons: add the class to an Elementor Button widget (Advanced > CSS Classes) */
.tt-btn-primary .elementor-button,
a.tt-btn.tt-btn--primary {
  background: var(--tt-orange) !important; color: var(--tt-ink) !important;
  box-shadow: 0 8px 0 -2px var(--tt-orange-deep);
}
.tt-btn-outline .elementor-button,
a.tt-btn.tt-btn--outline {
  background: var(--tt-white) !important; color: var(--tt-ink) !important;
  border: 2px solid var(--tt-ink) !important;
}
.tt-btn-dark .elementor-button,
a.tt-btn.tt-btn--dark { background: var(--tt-ink) !important; color: var(--tt-white) !important; }
.tt-btn-light .elementor-button,
a.tt-btn.tt-btn--light { background: transparent !important; color: var(--tt-white) !important; border: 2px solid var(--tt-white) !important; }
.tt-btn-primary .elementor-button, .tt-btn-outline .elementor-button,
.tt-btn-dark .elementor-button, .tt-btn-light .elementor-button, a.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  font-family: var(--tt-font-body); font-weight: 700; font-size: 17px; text-decoration: none;
  transition: transform .2s var(--tt-ease), box-shadow .2s var(--tt-ease);
}
.tt-btn-primary .elementor-button:hover, a.tt-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 0 -2px var(--tt-orange-deep); }
.tt-btn-primary .elementor-button:active, a.tt-btn--primary:active { transform: translateY(4px); box-shadow: 0 2px 0 -2px var(--tt-orange-deep); }

/* Cards that lift on hover (service cards, deal cards, reviews) */
.tt-lift { transition: transform .25s var(--tt-ease), box-shadow .25s var(--tt-ease); }
.tt-lift:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow); }

/* Pills / chips */
.tt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; background: var(--tt-white);
  border: 1px solid var(--tt-line); color: var(--tt-orange-deep); font-weight: 700; font-size: 14px;
}
.tt-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tt-green); animation: tt-pulse 1.6s ease-out infinite; }

/* 5. Elementor widget skins --------------------------------------------- */
/* Accordion (FAQ). Add class tt-faq to the Accordion widget. Works with legacy and nested accordion. */
.tt-faq .elementor-accordion-item,
.tt-faq .e-n-accordion-item {
  border: 1px solid var(--tt-line) !important; border-radius: 18px; margin-bottom: 12px; overflow: hidden; background: var(--tt-white);
}
.tt-faq .elementor-tab-title, .tt-faq .e-n-accordion-item-title {
  padding: 18px 22px !important; font-weight: 700; font-size: 18px; border: 0 !important;
}
.tt-faq .elementor-tab-content, .tt-faq .e-n-accordion-item > [role="region"] {
  padding: 0 22px 20px !important; color: var(--tt-muted); border: 0 !important;
}

/* Tabs (Services). Add class tt-tabs to the Tabs widget. */
.tt-tabs .elementor-tabs-wrapper, .tt-tabs .e-n-tabs-heading {
  display: flex; flex-wrap: wrap; gap: 8px; border: 0 !important; margin-bottom: 32px;
}
.tt-tabs .elementor-tab-title, .tt-tabs .e-n-tab-title {
  min-height: 48px; padding: 0 22px !important; border-radius: 999px !important;
  border: 2px solid var(--tt-line) !important; background: var(--tt-white) !important;
  font-weight: 700; font-size: 16px; color: var(--tt-ink) !important; display: inline-flex; align-items: center;
  transition: background .2s, color .2s, border-color .2s;
}
.tt-tabs .elementor-tab-title.elementor-active, .tt-tabs .e-n-tab-title[aria-selected="true"] {
  background: var(--tt-ink) !important; color: var(--tt-white) !important; border-color: var(--tt-ink) !important;
}
.tt-tabs .elementor-tab-content, .tt-tabs .e-n-tabs-content > .e-con { border: 0 !important; padding: 0 !important; animation: tt-rise .45s var(--tt-ease) both; }

/* Price tables */
.tt-table-wrap { overflow-x: auto; }
.tt-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tt-table th { text-align: left; color: var(--tt-muted); font-size: 14px; padding: 10px 8px; border-bottom: 2px solid var(--tt-line); }
.tt-table td { padding: 14px 8px; border-bottom: 1px solid #F5EBE2; }
.tt-table td:first-child { font-weight: 700; }
.tt-table td:last-child, .tt-table th:last-child { text-align: right; font-weight: 800; }
.tt-table tbody tr { transition: background .2s; }
.tt-table tbody tr:hover { background: var(--tt-cream); }

/* Fluent Forms skin */
.fluentform .ff-el-form-control {
  min-height: 52px; border: 2px solid var(--tt-line) !important; border-radius: var(--tt-radius-s) !important;
  font-family: var(--tt-font-body); font-size: 16px;
}
.fluentform .ff-el-form-control:focus { border-color: var(--tt-orange) !important; box-shadow: none !important; }
.fluentform .ff-btn-submit {
  min-height: 56px; padding: 0 30px !important; border-radius: 999px !important;
  background: var(--tt-orange) !important; color: var(--tt-ink) !important; font-weight: 700 !important; font-size: 17px !important;
  box-shadow: 0 8px 0 -2px var(--tt-orange-deep);
}
.tt-form-dark .fluentform .ff-btn-submit { background: var(--tt-ink) !important; color: var(--tt-white) !important; box-shadow: none; }

/* Google Maps widget rounded */
.tt-map iframe { border-radius: var(--tt-radius-l); }

/* 6. Interactive snippets ----------------------------------------------- */

/* 6a. Hero photo with floating cards.
   Build: Container (class tt-hero-visual) → Image widget + Shortcode widget [tt_hero_cards]. */
.tt-hero-visual { position: relative; }
.tt-hero-visual .elementor-widget-image img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--tt-radius-l); box-shadow: 0 30px 60px -20px rgba(27, 20, 16, .35); }
.tt-hero-visual .elementor-widget-shortcode { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; }
.tt-hero-cards { position: absolute; inset: 0; }
@media (max-width: 767px) { .tt-hero-visual .elementor-widget-image img { height: 300px; } }
.tt-hero-visual { position: relative; min-height: 460px; }
.tt-hero-visual__photo {
  width: 100%; height: 480px; object-fit: cover; border-radius: var(--tt-radius-l);
  box-shadow: 0 30px 60px -20px rgba(27, 20, 16, .35);
}
.tt-float {
  position: absolute; border-radius: 18px; padding: 14px 16px; font-size: 14px;
  box-shadow: 0 14px 34px rgba(27, 20, 16, .22); animation: tt-bob calc(3.4s * var(--tt-speed)) ease-in-out infinite;
}
.tt-float--sms { right: -12px; top: 28px; background: var(--tt-ink); color: var(--tt-white); max-width: 230px; animation-delay: .4s; }
.tt-float--sms b { display: block; font-size: 12px; color: #FFB27A; }
.tt-float--paid { left: -18px; bottom: 34px; background: var(--tt-white); display: flex; align-items: center; gap: 12px; animation-delay: 1s; }
.tt-float--paid small { display: block; color: var(--tt-muted); font-size: 12px; }
.tt-float--paid strong { font-weight: 800; }
.tt-tick { width: 36px; height: 36px; border-radius: 50%; background: var(--tt-green); display: grid; place-items: center; flex: none; }
.tt-tap { position: absolute; left: 22%; top: 46%; width: 70px; height: 70px; }
.tt-tap span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--tt-orange); animation: tt-ring 2s ease-out infinite; }
.tt-tap span:nth-child(2) { animation-delay: 1s; }
@media (max-width: 767px) {
  .tt-hero-visual { min-height: 0; }
  .tt-hero-visual__photo { height: 300px; }
  .tt-float--sms { right: 8px; top: 12px; font-size: 13px; max-width: 190px; }
  .tt-float--paid { left: 8px; bottom: 12px; }
}

/* 6b. Ticker */
.tt-ticker { background: var(--tt-ink); color: var(--tt-white); overflow: hidden; padding: 18px 0; }
.tt-ticker__track { display: flex; width: max-content; animation: tt-marquee calc(26s * var(--tt-speed)) linear infinite; }
.tt-ticker:hover .tt-ticker__track { animation-play-state: paused; }
.tt-ticker__item {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap;
  font-family: var(--tt-font-display); font-weight: 600; font-size: 22px;
}
.tt-ticker__item::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tt-orange); }

/* 6c. Stats */
.tt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.tt-stat { border: 1px solid var(--tt-line); border-radius: var(--tt-radius-m); padding: 24px; }
.tt-stat__value { display: block; font-family: var(--tt-font-display); font-size: 48px; font-weight: 800; line-height: 1; }
.tt-stat__label { color: var(--tt-muted); }

/* 6d. Auto-advancing steps (Home "How it works", How to Pay demo) */
.tt-steps { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.tt-steps__list { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tt-step {
  display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 20px; border-radius: var(--tt-radius-m); border: 2px solid transparent; background: transparent;
  font: inherit; color: var(--tt-ink); transition: background .3s, border-color .3s, box-shadow .3s;
}
.tt-step:hover, .tt-step:focus { background: transparent; color: var(--tt-ink); }
.tt-step__n {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; background: var(--tt-line); color: var(--tt-muted); transition: background .3s, color .3s;
}
.tt-step__title { display: block; font-weight: 800; font-size: 20px; }
.tt-step__body { display: block; color: var(--tt-muted); font-weight: 400; }
.tt-step__bar { display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--tt-line); overflow: hidden; opacity: 0; }
.tt-step__bar i { display: block; height: 100%; width: 0; background: var(--tt-orange); }
.tt-step.is-active { background: var(--tt-white); border-color: var(--tt-orange); box-shadow: 0 12px 30px rgba(27, 20, 16, .08); }
.tt-step.is-active .tt-step__n { background: var(--tt-orange); color: var(--tt-ink); }
.tt-step.is-active .tt-step__bar { opacity: 1; }
.tt-step.is-active .tt-step__bar i { animation: tt-bar var(--tt-step-ms, 2600ms) linear both; }
.tt-steps--cream .tt-step.is-active { background: var(--tt-cream); box-shadow: none; }

.tt-stage {
  flex: 1 1 420px; min-width: 0; min-height: 500px; border-radius: var(--tt-radius-l); background: var(--tt-ink);
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.tt-stage::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--tt-ink-2); }
.tt-device {
  position: relative; width: 230px; height: 440px; border-radius: 38px; background: var(--tt-white);
  border: 9px solid var(--tt-ink-3); box-sizing: border-box; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px; transition: width .4s var(--tt-ease), height .4s var(--tt-ease), border-radius .4s;
}
.tt-device::before { content: ""; align-self: center; width: 60px; height: 6px; border-radius: 6px; background: #E9DCCF; }
.tt-device--kiosk { width: 320px; height: 420px; border-radius: 18px; border-width: 14px 14px 60px; }
.tt-device__label { font-size: 12px; font-weight: 700; color: var(--tt-orange-deep); text-align: center; }
.tt-screen { display: none; flex-direction: column; gap: 10px; align-items: stretch; }
.tt-screen.is-active { display: flex; animation: tt-rise .45s var(--tt-ease) both; }
.tt-screen--center { align-items: center; text-align: center; }
.tt-screen h4 { margin: 0; font-family: var(--tt-font-body); font-size: 16px; font-weight: 800; }
.tt-screen p { margin: 0; font-size: 13px; color: var(--tt-muted); }
.tt-opt { padding: 12px; border-radius: 12px; border: 1px solid var(--tt-line); font-size: 14px; }
.tt-opt--on { border: 2px solid var(--tt-orange); background: var(--tt-cream); font-weight: 700; }
.tt-paybtn { padding: 13px; border-radius: 999px; text-align: center; font-weight: 700; font-size: 15px; background: var(--tt-ink); color: var(--tt-white); }
.tt-paybtn--ghost { background: transparent; color: var(--tt-ink); border: 2px solid var(--tt-ink); }
.tt-qr {
  position: relative; width: 140px; height: 140px; border-radius: 16px; border: 3px solid var(--tt-ink); box-sizing: border-box;
  padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.tt-qr i { border-radius: 2px; background: var(--tt-ink); }
.tt-qr i.o { background: transparent; }
.tt-qr::after {
  content: ""; position: absolute; left: 4%; right: 4%; height: 3px; background: var(--tt-orange);
  box-shadow: 0 0 10px var(--tt-orange); animation: tt-scan 1.8s ease-in-out infinite;
}
.tt-done { width: 90px; height: 90px; border-radius: 50%; background: var(--tt-green); display: grid; place-items: center; animation: tt-grow .5s var(--tt-ease) both; }
.tt-spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px dashed var(--tt-orange); animation: tt-spin 2s linear infinite; }
.tt-nfc { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.tt-nfc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--tt-orange); animation: tt-ring 1.6s ease-out infinite; }

.tt-modes { display: inline-flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--tt-cream); border: 1px solid var(--tt-line); }
.tt-mode { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; font-size: 16px; color: var(--tt-ink); cursor: pointer; transition: background .2s, color .2s; }
.tt-mode:hover, .tt-mode:focus { background: var(--tt-line); color: var(--tt-ink); }
.tt-mode.is-active { background: var(--tt-ink); color: var(--tt-white); }
.tt-modeset { display: none; }
.tt-modeset.is-active { display: contents; }

/* 6e. Drawn washer drum */
.tt-washer { position: relative; width: 260px; height: 340px; background: var(--tt-white); border: 3px solid var(--tt-ink); border-radius: 30px; box-shadow: 0 22px 0 -6px #F0D4BE; }
.tt-drum { position: absolute; inset: 8px; border-radius: 50%; animation: tt-spin 2.6s linear infinite; }
.tt-drum i { position: absolute; border-radius: 999px; }
.tt-drum i:nth-child(1) { left: 12%; top: 26%; width: 34%; height: 20%; background: var(--tt-orange); }
.tt-drum i:nth-child(2) { right: 10%; top: 46%; width: 28%; height: 18%; background: var(--tt-blue); }
.tt-drum i:nth-child(3) { left: 32%; bottom: 10%; width: 36%; height: 17%; background: #FFD2B0; }

/* 6f. Machine sizes */
.tt-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: end; }
.tt-size { border: 1px solid var(--tt-line); border-radius: 24px; padding: 26px; background: var(--tt-white); display: flex; flex-direction: column; gap: 8px; }
.tt-size__drum-wrap { height: 150px; display: flex; align-items: flex-end; }
.tt-size__drum {
  display: block; width: var(--d, 90px); height: var(--d, 90px); border-radius: 50%; border: 8px solid var(--tt-ink);
  background: var(--tt-orange-soft); box-sizing: border-box; box-shadow: inset 0 0 0 10px var(--tt-white);
  transform: scale(.3); opacity: 0; transform-origin: bottom left; transition: transform .8s var(--tt-ease), opacity .8s;
}
.is-in .tt-size__drum, .tt-size.is-in .tt-size__drum { transform: scale(1); opacity: 1; }
.tt-size:nth-child(2) .tt-size__drum { transition-delay: .12s; }
.tt-size:nth-child(3) .tt-size__drum { transition-delay: .24s; }
.tt-size:nth-child(4) .tt-size__drum { transition-delay: .36s; }
.tt-size__kg { font-family: var(--tt-font-display); font-size: 32px; font-weight: 800; line-height: 1; }
.tt-size__fits { color: var(--tt-muted); }
.tt-size__price { font-weight: 800; font-size: 18px; }

/* 6g. Size picker (Services) */
.tt-picker { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--tt-ink); color: var(--tt-white); border-radius: var(--tt-radius-l); padding: 44px; }
.tt-picker__info { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.tt-picker__info h2 { margin: 0; color: var(--tt-white); font-size: 40px; line-height: 1.05; }
.tt-picker__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-picker__btn { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--tt-muted); background: transparent; color: var(--tt-white); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tt-picker__btn:hover, .tt-picker__btn:focus { background: var(--tt-ink-2); color: var(--tt-white); }
.tt-picker__btn.is-active { background: var(--tt-orange); border-color: var(--tt-orange); color: var(--tt-ink); }
.tt-picker__price { font-family: var(--tt-font-display); font-size: 52px; font-weight: 800; line-height: 1; color: #FF9A4D; }
.tt-picker__cycle { color: var(--tt-muted-on-dark); font-size: 17px; }
.tt-picker__fits { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-picker__fits span { background: var(--tt-ink-2); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.tt-picker__stage { flex: 1 1 320px; height: 320px; display: grid; place-items: center; }
.tt-picker__drum {
  position: relative; width: var(--d, 210px); height: var(--d, 210px); border-radius: 50%; border: 14px solid var(--tt-white);
  background: #CFEAF6; box-sizing: border-box; box-shadow: 0 0 0 6px var(--tt-orange);
  transition: width .45s cubic-bezier(.3, 1.4, .5, 1), height .45s cubic-bezier(.3, 1.4, .5, 1);
}
.tt-picker__drum .tt-drum { inset: 12%; animation-duration: 3s; }
@media (max-width: 767px) { .tt-picker { padding: 28px; } .tt-picker__info h2 { font-size: 30px; } .tt-picker__stage { height: 260px; } }

/* 6h. Rewards dots + punch card */
.tt-dots { display: grid; grid-template-columns: repeat(5, 56px); gap: 12px; }
.tt-dots span {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--tt-orange); display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: var(--tt-white); animation: tt-fill calc(6s * var(--tt-speed)) ease infinite;
}
.tt-dots span:last-child { font-size: 12px; }
.tt-badge-pop { display: inline-block; background: var(--tt-orange); color: var(--tt-ink); font-weight: 800; padding: 8px 18px; border-radius: 999px; animation: tt-pop-loop 6s ease infinite; }
@media (max-width: 480px) { .tt-dots { grid-template-columns: repeat(5, 1fr); } .tt-dots span { width: auto; aspect-ratio: 1; height: auto; } }

.tt-punch { position: relative; overflow: hidden; background: var(--tt-ink); color: var(--tt-white); border-radius: var(--tt-radius-l); padding: 34px; display: flex; flex-direction: column; gap: 20px; }
.tt-punch::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 140%; background: rgba(255, 255, 255, .07); animation: tt-shine 4s ease-in-out infinite; }
.tt-punch__head { display: flex; justify-content: space-between; align-items: center; }
.tt-punch__head b { font-family: var(--tt-font-display); font-size: 20px; }
.tt-punch__head small { color: var(--tt-muted-on-dark); font-size: 13px; }
.tt-punch__count { font-family: var(--tt-font-display); font-size: 46px; font-weight: 800; line-height: 1; }
.tt-punch__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tt-punch__grid span {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px;
  border: 2px dashed var(--tt-muted); color: var(--tt-muted-on-dark); transition: background .25s, color .25s, border .25s;
}
.tt-punch__grid span:last-child { font-size: 12px; }
.tt-punch__grid span.is-on { background: var(--tt-orange); border: 2px solid var(--tt-orange); color: var(--tt-ink); animation: tt-stamp .35s var(--tt-ease) both; }
.tt-punch__msg { color: var(--tt-muted-on-dark); min-height: 40px; display: flex; align-items: center; }
.tt-punch__msg .tt-badge { background: var(--tt-orange); color: var(--tt-ink); font-weight: 800; padding: 10px 18px; border-radius: 999px; animation: tt-pop .5s var(--tt-ease) both; }
.tt-punch__foot { display: flex; justify-content: space-between; border-top: 1px solid var(--tt-ink-3); padding-top: 16px; color: var(--tt-muted-on-dark); }
.tt-punch__foot strong { color: var(--tt-white); }

/* 6i. Pickup timeline */
.tt-timeline { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.tt-timeline::before { content: ""; position: absolute; left: 40px; right: 40px; top: 28px; height: 4px; border-radius: 4px; background: var(--tt-line); }
.tt-timeline__line { position: absolute; left: 40px; top: 28px; height: 4px; border-radius: 4px; background: var(--tt-orange); width: 0; transition: width 2.4s var(--tt-ease) .3s; }
.tt-timeline.is-in .tt-timeline__line { width: calc(100% - 80px); }
.tt-timeline__step { position: relative; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s var(--tt-ease); }
.tt-timeline.is-in .tt-timeline__step { opacity: 1; transform: none; }
.tt-timeline.is-in .tt-timeline__step:nth-of-type(2) { transition-delay: .4s; }
.tt-timeline.is-in .tt-timeline__step:nth-of-type(3) { transition-delay: .8s; }
.tt-timeline.is-in .tt-timeline__step:nth-of-type(4) { transition-delay: 1.2s; }
.tt-timeline__n { width: 60px; height: 60px; border-radius: 50%; background: var(--tt-orange); border: 4px solid var(--tt-white); box-shadow: 0 0 0 2px var(--tt-orange); display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.tt-timeline__step b { font-size: 20px; }
.tt-timeline__step span { color: var(--tt-muted); }
.tt-timeline__step .tt-timeline__n { color: var(--tt-ink); }
@media (max-width: 767px) { .tt-timeline::before, .tt-timeline__line { display: none; } }

/* 6j. Hours with today highlighted */
.tt-hours { display: flex; flex-direction: column; gap: 4px; }
.tt-hours__row { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 12px; font-size: 16px; }
.tt-hours__row.is-today { background: var(--tt-orange-soft); font-weight: 800; }
.tt-hours__row.is-today .tt-hours__day::after { content: " (today)"; }

/* 6k. Bits rendered by shortcodes */
a.tt-btn.tt-btn--big { min-height: 76px; border-radius: var(--tt-radius-m); font-size: 19px; font-weight: 800; padding: 0 24px; width: 100%; justify-content: flex-start; gap: 14px; box-sizing: border-box; }
.tt-eyebrow--light { color: #FFB27A !important; }
.tt-price-card { border: 1px solid var(--tt-line); border-radius: 26px; padding: 30px; height: 100%; box-sizing: border-box; background: var(--tt-white); }
.tt-price-card h3 { margin: 0 0 12px; font-size: 30px; }
.tt-price-card__note { margin: 14px 0 0; color: var(--tt-muted); }
.tt-hours-card { border: 1px solid var(--tt-line); border-radius: var(--tt-radius-l); padding: 30px; background: var(--tt-white); }
.tt-hours-card h3 { margin: 0 0 10px; font-size: 26px; }
.tt-hours-card__extra { margin: 14px 0 0; color: var(--tt-muted); font-size: 15px; }
.tt-hours-card__extra strong { color: var(--tt-ink); }
.tt-demo-head { display: flex; margin: 0 0 32px; }
.tt-dots-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tt-footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0 36px; border-bottom: 1px solid var(--tt-ink-3); }
.tt-footer-cta__title { font-family: var(--tt-font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: #fff; line-height: 1.1; }
.tt-footer-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tt-footer-title { margin: 0 0 8px !important; color: #fff; font-weight: 800; }
.site-footer a { color: var(--tt-muted-on-dark); }
.site-footer a:hover { color: #fff; }
.tt-copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; width: 100%; }
.tt-copyright strong { color: color-mix(in srgb, var(--tt-orange) 70%, #fff); }

/* Header + footer bars follow the brand colours too */
.ast-above-header-bar { background: var(--tt-orange) !important; color: var(--tt-ink) !important; }
.site-footer .site-above-footer-wrap, .site-footer .site-primary-footer-wrap, .site-footer .site-below-footer-wrap { background: var(--tt-ink) !important; color: var(--tt-muted-on-dark); }

/* Global "animations off" switch (Store Settings) behaves like reduced motion */
body.tt-motion-off *, body.tt-motion-off *::before, body.tt-motion-off *::after { animation: none !important; transition: none !important; }
body.tt-motion-off .tt-reveal, body.tt-motion-off .tt-timeline__step, body.tt-motion-off .tt-size__drum { opacity: 1 !important; transform: none !important; }
body.tt-motion-off .tt-timeline__line { width: calc(100% - 80px) !important; }
body.tt-motion-off .tt-dots span { background: var(--tt-orange); color: var(--tt-ink); }
body.tt-motion-off .tt-ticker__track { flex-wrap: wrap; width: auto; justify-content: center; }
body.tt-no-actionbar { padding-bottom: 0 !important; }

/* 7. Motion -------------------------------------------------------------- */
/* Page-load rise for hero lines: add tt-rise + tt-d1..tt-d6 to widgets */
.tt-rise { animation: tt-rise calc(.7s * var(--tt-speed)) var(--tt-ease) both; }
.tt-d1 { animation-delay: .1s !important; } .tt-d2 { animation-delay: .25s !important; }
.tt-d3 { animation-delay: .4s !important; } .tt-d4 { animation-delay: .55s !important; }
.tt-d5 { animation-delay: .7s !important; } .tt-d6 { animation-delay: .85s !important; }

/* Scroll reveal: add tt-reveal to a section/container. JS adds .is-in. */
.tt-js .tt-reveal { opacity: 0; transform: translateY(28px); transition: opacity calc(.7s * var(--tt-speed)) var(--tt-ease), transform calc(.7s * var(--tt-speed)) var(--tt-ease); }
.tt-js .tt-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .tt-reveal { opacity: 1 !important; transform: none !important; }

@keyframes tt-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tt-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tt-bar { from { width: 0; } to { width: 100%; } }
@keyframes tt-scan { 0%, 100% { top: 8%; } 50% { top: 86%; } }
@keyframes tt-grow { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tt-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 76, .55); } 100% { box-shadow: 0 0 0 12px rgba(31, 138, 76, 0); } }
@keyframes tt-fill { 0%, 8% { background: transparent; color: var(--tt-white); } 14%, 100% { background: var(--tt-orange); color: var(--tt-ink); } }
@keyframes tt-pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tt-pop-loop { 0%, 70% { transform: scale(.6); opacity: 0; } 80% { transform: scale(1.12); opacity: 1; } 88%, 100% { transform: scale(1); opacity: 1; } }
@keyframes tt-stamp { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tt-shine { from { transform: translateX(-120%) rotate(20deg); } to { transform: translateX(800%) rotate(20deg); } }

/* 8. Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tt-js .tt-reveal, .tt-timeline__step, .tt-size__drum { opacity: 1 !important; transform: none !important; }
  .tt-timeline__line { width: calc(100% - 80px) !important; }
  .tt-dots span { background: var(--tt-orange); color: var(--tt-ink); }
  .tt-badge-pop { opacity: 1; }
  .tt-ticker__track { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* 9. Build fixes (v1.1.1) ------------------------------------------------ */
/* Price tables: horizontal rules only (Astra adds cell borders) */
.tt-table, .tt-table th, .tt-table td { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
.tt-table { border: 0 !important; margin: 0; }
/* Footer: hide empty paragraphs WordPress adds around shortcodes, readable copyright */
.site-footer .widget > p:empty, .site-footer .widget p:empty { display: none; margin: 0; }
.site-footer .widget p { margin-bottom: 14px; }
.site-below-footer-wrap, .site-below-footer-wrap .ast-footer-copyright, .tt-copyright { color: var(--tt-muted-on-dark) !important; }
.site-below-footer-wrap .ast-footer-copyright { width: 100%; }
.site-below-footer-wrap .ast-footer-copyright p { margin: 0; }
/* Header menu sizing so all items fit on one line */
.ast-desktop .main-header-menu > .menu-item > .menu-link { font-size: 16px; }
.ast-header-button-1 .ast-custom-button { white-space: nowrap; }
/* Testimonials: no avatar placeholder */
.elementor-testimonial-image { display: none; }
.elementor-testimonial-content { font-size: 17px; line-height: 1.6; }
/* Floating cards never cover the hero photo edge on narrow screens */
@media (max-width: 767px) {
  .tt-hero-visual .tt-float--sms { right: 8px; top: 12px; }
  .tt-hero-visual .tt-float--paid { left: 8px; bottom: 12px; }
  .tt-steps { gap: 24px; }
  .tt-stage { min-height: 460px; }
  .tt-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tt-stat { padding: 18px; }
  .tt-stat__value { font-size: 36px; }
}

/* 10. Wireframe illustrations (v1.2.0) ----------------------------------- */
/* Home hero washer: [tt_hero_art] — fixed 460x500 drawing that scales down on small screens */
.tt-art { position: relative; width: 100%; height: 500px; display: flex; justify-content: center; }
.tt-art__inner { position: relative; width: 460px; height: 500px; flex: none; transform-origin: top center; }
.tt-art__halo { position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: var(--tt-orange-soft); }
.tt-art__washer { position: absolute; left: 50%; top: 70px; margin-left: -130px; width: 260px; height: 340px; background: #fff; border: 3px solid var(--tt-ink); border-radius: 30px; box-shadow: 0 22px 0 -6px #F0D4BE; box-sizing: border-box; }
.tt-art__panel { height: 58px; border-bottom: 3px solid var(--tt-ink); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; box-sizing: border-box; }
.tt-art__screen { background: var(--tt-ink); color: #FFB27A; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 8px; letter-spacing: 1px; line-height: 1.4; }
.tt-art__knobs { display: flex; gap: 8px; }
.tt-art__knobs i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--tt-ink); box-sizing: border-box; display: block; }
.tt-art__knobs i.on { background: var(--tt-orange); }
.tt-art__door { position: absolute; left: 50%; top: 92px; margin-left: -105px; width: 210px; height: 210px; border-radius: 50%; border: 14px solid #EADBCD; box-sizing: border-box; background: #CFEAF6; overflow: hidden; }
.tt-art__water { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: #9FD3EA; }
.tt-art__drum { position: absolute; inset: 8px; border-radius: 50%; animation: tt-spin calc(2.6s * var(--tt-speed)) linear infinite; }
.tt-art__drum i { position: absolute; display: block; }
.tt-art__drum i:nth-child(1) { left: 20px; top: 40px; width: 56px; height: 32px; border-radius: 16px; background: var(--tt-orange); }
.tt-art__drum i:nth-child(2) { right: 18px; top: 70px; width: 48px; height: 30px; border-radius: 14px; background: var(--tt-blue); }
.tt-art__drum i:nth-child(3) { left: 52px; bottom: 22px; width: 60px; height: 28px; border-radius: 14px; background: #FFD2B0; }
.tt-art__drum i:nth-child(4) { left: 70px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: #7FC8A9; }
.tt-art__glass { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(255,255,255,.6); }
.tt-art__bubble { position: absolute; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.4); animation: tt-bubble 3s ease-in infinite; }
.tt-art__bubble.b1 { left: 60px; top: 200px; width: 14px; height: 14px; }
.tt-art__bubble.b2 { left: 150px; top: 230px; width: 20px; height: 20px; animation-duration: 3.4s; animation-delay: .8s; }
.tt-art__bubble.b3 { left: 110px; top: 250px; width: 10px; height: 10px; animation-duration: 2.6s; animation-delay: 1.5s; }
.tt-art__phone { position: absolute; left: 8px; top: 160px; width: 92px; height: 176px; border-radius: 22px; background: var(--tt-ink); padding: 8px; box-sizing: border-box; transform: rotate(-12deg); animation: tt-bob-tilt 3.2s ease-in-out infinite; }
.tt-art__phone-screen { width: 100%; height: 100%; border-radius: 16px; background: var(--tt-orange); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--tt-ink); font-weight: 800; font-size: 12px; text-align: center; line-height: 1.2; }
.tt-art__ring { position: absolute; left: 96px; top: 210px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--tt-orange); box-sizing: border-box; animation: tt-ring 1.8s ease-out infinite; }
.tt-art__ring.r2 { animation-delay: .9s; }
.tt-art__sms { position: absolute; right: 0; top: 40px; background: var(--tt-ink); color: #fff; border-radius: 18px; padding: 14px 16px; font-size: 14px; line-height: 1.4; max-width: 220px; box-shadow: 0 14px 30px rgba(27,20,16,.25); animation: tt-bob 3.6s ease-in-out infinite; animation-delay: .4s; }
.tt-art__sms b { display: block; font-size: 12px; color: #FFB27A; }
.tt-art__paid { position: absolute; right: 20px; bottom: 40px; background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: 0 14px 34px rgba(27,20,16,.16); display: flex; align-items: center; gap: 12px; animation: tt-bob 3.4s ease-in-out infinite; animation-delay: 1s; line-height: 1.3; }
.tt-art__paid small { display: block; font-size: 12px; color: var(--tt-muted); }
.tt-art__paid strong { display: block; font-weight: 800; }
@media (max-width: 520px) {
  .tt-art { height: 360px; }
  .tt-art__inner { transform: scale(.72); }
}
@media (max-width: 380px) {
  .tt-art { height: 330px; }
  .tt-art__inner { transform: scale(.66); }
}

/* How to Pay hero: [tt_tap_art] */
.tt-tapart { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
.tt-tapart__halo { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: var(--tt-orange-soft); }
.tt-tapart__core { position: relative; width: 200px; height: 200px; border-radius: 50%; background: var(--tt-ink); display: flex; align-items: center; justify-content: center; animation: tt-bob 3.4s ease-in-out infinite; }
.tt-tapart__ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 4px solid var(--tt-orange); box-sizing: border-box; animation: tt-ring 2s ease-out infinite; }
.tt-tapart__ring.r2 { animation-delay: 1s; }
@media (max-width: 520px) { .tt-tapart { height: 300px; } .tt-tapart__halo { width: 280px; height: 280px; } }

/* Drawn map: [tt_map_art] */
.tt-map-art { display: block; position: relative; height: 400px; border-radius: var(--tt-radius-l); background: #F3E6D8; overflow: hidden; border: 1px solid var(--tt-line); text-decoration: none; color: var(--tt-ink); }
.tt-map-art--large { height: 500px; }
.tt-map-art span, .tt-map-art i { position: absolute; display: block; }
.tt-map-art__road { background: #fff; }
.tt-map-art__road.r1 { left: -40px; top: 150px; width: 140%; height: 34px; transform: rotate(-14deg); }
.tt-map-art__road.r2 { left: 46%; top: -40px; width: 26px; height: 140%; transform: rotate(10deg); }
.tt-map-art__road.r3 { left: -20px; top: 300px; width: 130%; height: 20px; }
.tt-map-art__road.r4 { left: 18%; top: -40px; width: 22px; height: 140%; transform: rotate(-4deg); }
.tt-map-art--large .tt-map-art__road.r1 { top: 210px; height: 44px; transform: rotate(-12deg); }
.tt-map-art--large .tt-map-art__road.r3 { top: 400px; height: 24px; }
.tt-map-art .car { top: 9px; width: 34px; height: 18px; border-radius: 6px; background: var(--tt-blue); animation: tt-drive 7s linear infinite; }
.tt-map-art--large .tt-map-art .car, .tt-map-art--large .car { top: 13px; }
.tt-map-art .car.c2 { background: var(--tt-ink); animation-duration: 9s; animation-delay: 3s; left: -10%; }
.tt-map-art__park { right: 30px; top: 30px; width: 150px; height: 100px; border-radius: 24px; background: #CFE3C6; }
.tt-map-art--large .tt-map-art__park { right: 40px; top: 40px; width: 200px; height: 130px; border-radius: 50%; }
.tt-map-art__lbl { font-size: 13px; font-weight: 700; color: var(--tt-muted); white-space: nowrap; }
.tt-map-art__lbl.gabba { right: 52px; top: 70px; color: #3D5A33; }
.tt-map-art--large .tt-map-art__lbl.gabba { right: 98px; top: 96px; font-size: 14px; }
.tt-map-art__lbl.road { left: 30px; top: 118px; transform: rotate(-14deg); }
.tt-map-art--large .tt-map-art__lbl.road { left: 34px; top: 196px; transform: rotate(-12deg); font-size: 14px; }
.tt-map-art__block { border-radius: 18px; background: #E8D8C8; }
.tt-map-art__block.b1 { left: 30px; top: 40px; width: 120px; height: 90px; }
.tt-map-art__lbl.mater { left: 44px; top: 74px; }
.tt-map-art__block.b2 { left: 40px; top: 440px; width: 170px; height: 46px; border-radius: 14px; }
.tt-map-art__lbl.parking { left: 54px; top: 453px; }
.tt-map-art__pin { left: 50%; top: 150px; margin-left: -22px; width: 44px; height: 44px; border-radius: 50% 50% 50% 0; background: var(--tt-orange); border: 4px solid var(--tt-ink); box-sizing: border-box; animation: tt-pin 1.6s ease-in-out infinite; }
.tt-map-art__shadow { left: 50%; top: 204px; width: 34px; height: 10px; margin-left: -17px; border-radius: 50%; background: var(--tt-ink); opacity: .3; animation: tt-pin-shadow 1.6s ease-in-out infinite; }
.tt-map-art--large .tt-map-art__pin { top: 186px; width: 48px; height: 48px; margin-left: -24px; }
.tt-map-art--large .tt-map-art__shadow { top: 248px; }
.tt-map-art__tag { left: 50%; top: 214px; transform: translateX(-50%); background: var(--tt-ink); color: #fff; padding: 8px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 10px 24px rgba(27,20,16,.25); }
.tt-map-art--large .tt-map-art__tag { top: 262px; padding: 10px 16px; font-size: 16px; }
.tt-map-art__open { right: 16px; bottom: 16px; background: #fff; border: 1px solid var(--tt-line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.tt-map-art:hover .tt-map-art__open { background: var(--tt-ink); color: #fff; }
@media (max-width: 767px) { .tt-map-art { height: 340px; } .tt-map-art--large { height: 420px; } .tt-map-art--large .tt-map-art__block.b2, .tt-map-art--large .tt-map-art__lbl.parking { display: none; } }

/* Pill list: [tt_chips] */
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chips span { border: 1px solid var(--tt-line); border-radius: 999px; padding: 6px 14px; font-size: 15px; background: #fff; }

/* Contact form topic buttons look like the wireframe pills */
.fluentform .ff_list_inline .ff-el-form-check { margin: 0 8px 8px 0 !important; }
.fluentform .ff_list_inline .ff-el-form-check label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--tt-line); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fluentform .ff_list_inline .ff-el-form-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fluentform .ff_list_inline .ff-el-form-check label:has(input:checked) { background: var(--tt-ink); border-color: var(--tt-ink); color: #fff; }
.fluentform .ff_list_inline .ff-el-form-check label:has(input:focus-visible) { outline: 3px solid var(--tt-orange); outline-offset: 2px; }

@keyframes tt-bubble { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-150px) scale(1.15); opacity: 0; } }
@keyframes tt-bob-tilt { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-10px); } }
@keyframes tt-pin { 0%, 100% { transform: translateY(0) rotate(-45deg); } 50% { transform: translateY(-14px) rotate(-45deg); } }
@keyframes tt-pin-shadow { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(.6); opacity: .15; } }
@keyframes tt-drive { 0% { left: -10%; } 100% { left: 105%; } }

/* Eyebrow labels match the wireframe: small caps-style label */
.tt-eyebrow .elementor-heading-title, .tt-eyebrow { text-transform: uppercase; letter-spacing: 1.5px !important; font-size: 14px !important; }
/* Header: brand name with small "Laundromat · Suburb" line under it, as in the wireframe */
.ast-site-identity .site-title { margin-bottom: 0; }
.ast-site-identity .site-description { font-size: 12px !important; color: var(--tt-muted) !important; font-weight: 500; margin: 2px 0 0 !important; line-height: 1; }