/* Arrival layer (2026-10-18): the "dialed in" intro and the full-screen homepage hero. Loaded by the td-mikeymachvac
   plugin after motion.css. Looks only — no text, links or tags change.
   The intro: a round thermostat draws itself, the needle sweeps from cool blue to warm red while the number climbs
   to 72°, MIKEY MAC sets underneath, then the dial goes clear and opens like an iris onto the site. It plays on every
   arrival from outside the site (typed address, a link, a search result, a refresh) and skips on clicks between
   pages. The head snippet decides (html.td-arrive); without that class the overlay is never shown. Its own CSS
   animation ends it, so it can never stay up, and a click or key press skips it. */

/* ===================================================================== intro */
@property --td-t { syntax: '<integer>'; initial-value: 58; inherits: false; }

.td-intro { display: none; }
html.td-arrive .td-intro { display: block; position: fixed; inset: 0; z-index: 2147483600; overflow: hidden; pointer-events: auto; cursor: pointer;
  animation: td-i-gone .01s linear 2.95s forwards; }
html.td-arrive.td-arrive-out .td-intro { pointer-events: none; }
html.td-arrive-skip .td-intro { animation: td-i-fade .35s var(--td-ease) forwards !important; }
@keyframes td-i-gone { to { visibility: hidden; opacity: 0; } }
@keyframes td-i-fade { to { visibility: hidden; opacity: 0; } }

/* the backdrop: the navy of the bands, a soft red/blue glow behind the dial and the same fine grid as design.css */
.td-intro__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 44%, rgba(58,154,217,.22), rgba(58,154,217,0) 70%) -14vmin 0 / 100% 100% no-repeat,
    radial-gradient(closest-side at 50% 44%, rgba(200,38,46,.20), rgba(200,38,46,0) 70%) 14vmin 0 / 100% 100% no-repeat,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 30%, rgba(0,0,0,.25) 100%); mask: radial-gradient(closest-side at 50% 46%, #000 30%, rgba(0,0,0,.25) 100%);
  animation: td-i-bg 2.1s var(--td-ease) both; }
@keyframes td-i-bg { 0% { opacity: 0; } 25%, 80% { opacity: 1; } 100% { opacity: 0; } }

.td-intro__stage { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.6svh, 28px); padding: 24px; text-align: center; color: #fff; }

/* the dial. --d is its width; the iris is a disc the same size whose shadow is the whole screen */
.td-intro__dial { --d: clamp(190px, min(36vmin, 40svh), 300px); position: relative; width: var(--d); height: var(--d); flex: 0 0 auto; }
.td-intro__iris { position: absolute; inset: 0; border-radius: 50%; background: #0e1a3d; box-shadow: 0 0 0 220vmax #0e1a3d; z-index: -1;
  will-change: transform; animation: td-i-clear .3s ease 1.95s forwards, td-i-iris .8s cubic-bezier(.7, 0, .25, 1) 2.12s forwards; }
@keyframes td-i-clear { to { background-color: rgba(14,26,61,0); } }
@keyframes td-i-iris { to { transform: scale(11); } }
.td-intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: td-i-ring .85s cubic-bezier(.6, 0, .3, 1) 2.08s forwards; }
@keyframes td-i-ring { to { transform: scale(1.9); opacity: 0; } }

.td-intro__face { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.08); stroke-width: 1; transform-origin: 120px 120px; animation: td-i-pop .7s var(--td-ease-back) both; }
.td-intro__track, .td-intro__arc { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 452.39 452.39; }
.td-intro__track { stroke: rgba(255,255,255,.1); animation: td-i-in .5s ease .1s both; }
.td-intro__arc { stroke: url(#td-i-grad); stroke-dashoffset: 452.39; filter: drop-shadow(0 0 6px rgba(143,208,255,.35)); animation: td-i-sweep 1.3s cubic-bezier(.55, .05, .25, 1) .35s forwards; }
@keyframes td-i-sweep { to { stroke-dashoffset: 0; filter: drop-shadow(0 0 9px rgba(255,138,144,.55)); } }
/* the ticks light up as the needle passes them (each one's delay and colour come from the markup) */
.td-intro__tick { stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-linecap: round; animation: td-i-tick .35s ease var(--dl) forwards; }
.td-intro__tick.is-major { stroke-width: 3; }
@keyframes td-i-tick { to { stroke: var(--c); } }
.td-intro__knob { transform: rotate(-135deg); transform-origin: 120px 120px; animation: td-i-knob 1.3s cubic-bezier(.55, .05, .25, 1) .35s forwards; }
.td-intro__knob circle { fill: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }
@keyframes td-i-knob { to { transform: rotate(135deg); } }
.td-intro__lbl { font: 700 9px/1 'Barlow Condensed', Impact, sans-serif; letter-spacing: .22em; animation: td-i-in .5s ease .3s both; }
.td-intro__lbl--c { fill: #8fd0ff; } .td-intro__lbl--h { fill: #ff8a90; }

/* the number in the middle: 58 → 72, cool blue warming to white; "dialed in" lands when it gets there */
.td-intro__read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  animation: td-i-in .45s ease .2s both, td-i-out .35s ease 1.92s forwards; }
.td-intro__num { position: relative; font: 800 calc(var(--d) * .3)/.9 'Barlow Condensed', Impact, sans-serif; letter-spacing: -.01em; color: #8fd0ff;
  animation: td-i-warm 1.3s cubic-bezier(.55, .05, .25, 1) .35s forwards; }
.td-intro__num::before { counter-reset: td-t var(--td-t); content: counter(td-t); animation: td-i-count 1.3s cubic-bezier(.55, .05, .25, 1) .35s forwards; }
.td-intro__num sup { position: absolute; left: 100%; top: .08em; font-size: .42em; color: #ff8a90; }
@keyframes td-i-count { to { --td-t: 72; } }
@keyframes td-i-warm { 60% { color: #fff; } to { color: #fff; } }
.td-intro__set { margin-top: calc(var(--d) * .045); font: 700 calc(var(--d) * .05)/1 Barlow, Arial, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #ffd166;
  animation: td-i-rise .5s var(--td-ease) 1.55s both; }

/* the wordmark, like the van lettering */
.td-intro__wm { font: 800 clamp(40px, min(9.5vw, 8.6svh), 92px)/.9 'Barlow Condensed', Impact, sans-serif; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.td-intro__wm span { display: inline-block; animation: td-i-letter .7s var(--td-ease) calc(.55s + var(--i) * .045s) both; }
.td-intro__wm .sp { width: .24em; }
@keyframes td-i-letter { from { opacity: 0; transform: translate3d(0, .5em, 0) rotate(4deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.td-intro__sub { margin-top: calc(-1 * clamp(4px, 1svh, 12px)); font: 700 clamp(13px, min(2.6vw, 2.3svh), 22px)/1 'Barlow Condensed', Impact, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  animation: td-i-rise .6s var(--td-ease) 1s both; }
.td-intro__sub em { font-style: normal; color: #ff8a90; } .td-intro__sub i { font-style: normal; color: #8fd0ff; } .td-intro__sub b { font-weight: 700; color: rgba(255,255,255,.7); }
.td-intro__rule { width: clamp(60px, 9vw, 110px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, #c8262e 0 50%, #3a9ad9 50% 100%); transform-origin: 50% 50%;
  animation: td-i-draw .7s var(--td-ease) 1.15s both; }
.td-intro__k { margin: 0; font: 600 clamp(11px, 1.6svh, 13.5px)/1 Barlow, Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(223,230,245,.7);
  animation: td-i-rise .6s var(--td-ease) 1.25s both; }
.td-intro__words { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2svh, 20px); animation: td-i-lift .5s cubic-bezier(.6, 0, .3, 1) 1.95s forwards; }
.td-intro__skip { position: absolute; z-index: 3; bottom: max(18px, 3svh); left: 50%; transform: translateX(-50%); font: 600 11px/1 Barlow, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(223,230,245,.38);
  animation: td-i-in .5s ease .9s both, td-i-out .3s ease 1.9s forwards; }

@keyframes td-i-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes td-i-out { to { opacity: 0; } }
@keyframes td-i-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes td-i-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes td-i-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes td-i-lift { to { opacity: 0; transform: translate3d(0, -18px, 0); filter: blur(4px); } }

/* the page's own entrances wait under the intro and start as the iris opens */
html.td-arrive:not(.td-arrive-out) :is(.td-hero, .td-page-hero), html.td-arrive:not(.td-arrive-out) :is(.td-hero, .td-page-hero) *,
html.td-arrive:not(.td-arrive-out) :is(.td-hero, .td-page-hero)::before, html.td-arrive:not(.td-arrive-out) :is(.td-hero, .td-page-hero)::after,
html.td-arrive:not(.td-arrive-out) :is(.td-hero, .td-page-hero) *::before, html.td-arrive:not(.td-arrive-out) :is(.td-hero, .td-page-hero) *::after { animation-play-state: paused !important; }

/* the Ask Mike chat and the scroll bar wait until the iris opens, then fade in */
#athena-agent, .td-progress { transition: opacity .6s ease .3s; }
html.td-arrive:not(.td-arrive-out) #athena-agent, html.td-arrive:not(.td-arrive-out) .td-progress { opacity: 0 !important; pointer-events: none; }
@media (max-width: 480px) { .td-intro__k { font-size: 10.5px; letter-spacing: .14em; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .td-intro { display: none !important; } }

/* ======================================================= homepage hero: one full screen, on every screen */
/* The header plus the hero fill the first screen exactly, from a small phone to a 4K monitor. --td-ht is the hero's
   distance from the top of the page (the strip + header), measured by the footer snippet; the fallbacks are the
   measured header heights. --td-av is the height left for the hero. Every size in the hero is a share of one unit,
   --H (the headline size), which is the largest the room allows — by height (the whole stack is about 7.7 headlines
   tall), by the text column's width, and by a ceiling — so the hero scales as one piece instead of breaking.
   --td-k is the footer snippet's correction: if the stack still measures taller than the room (an odd screen,
   a bigger default font), it scales the unit down until it fits.
   The min-height is !important and doubly specific because Avada's own stylesheet loads after this one. */
:root { --td-ht: 162px; }
@media (max-width: 1100px) { :root { --td-ht: 174px; } }
@media (max-width: 1024px) { :root { --td-ht: 163px; } }
@media (max-width: 640px) { :root { --td-ht: 142px; } }
:root { --td-av: calc(100vh - var(--td-ht)); }
@supports (height: 100svh) { :root { --td-av: calc(100svh - var(--td-ht)); } }

html body .fusion-fullwidth.td-hero { display: flex; min-height: var(--td-av) !important; }
.td-hero > .fusion-builder-row { align-self: stretch; }
.td-hero-text { margin-bottom: 0 !important; }

@media (min-width: 641px) {
  .td-hero { --H: calc(clamp(40px, min(6.8vw, calc(var(--td-av) / 8.1), calc(1.35vw + 87px)), 150px) * var(--td-k, 1)); }
  .td-hero-text > .fusion-column-wrapper { padding-top: calc(var(--H) * .36) !important; padding-bottom: calc(var(--H) * .36) !important; }
  .td-hero-kick { margin-bottom: calc(var(--H) * .26) !important; }
  .td-hero-kick .td-tag { font-size: max(12px, calc(var(--H) * .19)); padding: .38em .75em; }
  .td-hero .td-hero-h1, .td-hero .td-hero-h1 h1 { font-size: var(--H) !important; }
  .td-hero .td-hero-h1 { margin: 0 0 calc(var(--H) * .26) !important; }
  .td-hero-lead { margin-bottom: calc(var(--H) * .3) !important; }
  .td-hero-lead p { font-size: max(16px, calc(var(--H) * .226)); line-height: 1.5; }
  .td-hero-num { margin-bottom: calc(var(--H) * .3) !important; }
  .td-hero-num small { font-size: max(12px, calc(var(--H) * .165)); margin-bottom: calc(var(--H) * .09); }
  .td-hero-num a { font-size: calc(var(--H) * .86); }
  .td-hero .fusion-builder-row-inner .fusion-column-wrapper { gap: calc(var(--H) * .14); }
  .td-hero .fusion-builder-row-inner .fusion-button-text, .td-hero .fusion-builder-row-inner .fusion-button { font-size: max(14px, calc(var(--H) * .2)) !important; }
  .td-hero .fusion-builder-row-inner .fusion-button { padding: .92em 1.4em !important; margin: 0 !important; }
  .td-hero .fusion-builder-row-inner { margin-bottom: 0 !important; }
  .td-hero-tag { margin-top: calc(var(--H) * .32) !important; }
  .td-hero-tag p { font-size: max(14px, calc(var(--H) * .19)); }
}
/* tablets: the words get the full width, so the headline can take more of it */
@media (min-width: 641px) and (max-width: 1024px) { .td-hero { --H: calc(clamp(40px, min(8.8vw, calc(var(--td-av) / 8.4)), 110px) * var(--td-k, 1)); } }
/* short laptop screens: the quote tagline steps out, the stack gets shorter */
@media (min-width: 641px) and (max-height: 680px) { .td-hero-tag { display: none !important; } .td-hero { --H: calc(clamp(36px, min(6.8vw, calc(var(--td-av) / 7.3), calc(1.35vw + 87px)), 150px) * var(--td-k, 1)); } }
/* phones on their side and other very short screens: just the headline, number and buttons, sized to the room */
@media (min-width: 641px) and (max-height: 520px) {
  .td-hero-lead, .td-hero-tag { display: none !important; }
  .td-hero { --H: calc(clamp(24px, min(8.8vw, calc(var(--td-av) / 5.7)), 90px) * var(--td-k, 1)); }
}

/* tablets and phones on their side: the header used to stack the phone number under the wordmark (and break it over
   two lines), 262px tall before the hero began. Now it is one row like the phone header: wordmark, number, menu. */
@media (min-width: 641px) and (max-width: 1024px) {
  .td-header .fusion-builder-row { flex-wrap: nowrap !important; align-items: center; }
  .td-header .fusion-layout-column:first-child { flex: 1 1 auto !important; width: auto !important; }
  .td-header .td-header-phone { order: 2; flex: 0 0 auto !important; width: auto !important; }
  .td-header .fusion-layout-column:nth-child(2) { order: 3; flex: 0 0 auto !important; width: auto !important; margin-left: 22px !important; }
  .td-phone, .td-phone p { white-space: nowrap; }
  .td-header .fusion-builder-row, .td-header .fusion-layout-column, .td-header .fusion-column-wrapper { min-height: 0 !important; }
}

/* phones: Mike's photo fills the top of the screen, the words sit at the bottom, and the two buttons share a row.
   --P is the phone headline size, from the room left and the screen's width. --td-fade (the words' top edge inside
   the hero, set by the footer snippet) places the navy fade and Mike's face. */
@media (max-width: 640px) {
  .td-hero { --P: calc(clamp(26px, min(12.6vw, calc(var(--td-av) * .075)), 58px) * var(--td-k, 1));
    background-size: 160% auto !important; background-position: -43vw calc(var(--td-fade, 200px) * .4 - 36vw) !important; }
  .td-hero::before { background-image: linear-gradient(180deg, rgba(14,26,61,.04) 0, rgba(14,26,61,.12) calc(var(--td-fade, 200px) - 90px), rgba(14,26,61,.84) calc(var(--td-fade, 200px) + 4px), rgba(14,26,61,.97) calc(var(--td-fade, 200px) + 80px), rgba(14,26,61,.98) 100%) !important; }
  .td-hero > .fusion-builder-row { align-items: stretch !important; }
  .td-hero-text { padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; }
  .td-hero-text > .fusion-column-wrapper { justify-content: flex-end !important; flex: 1 1 auto; padding-top: calc(var(--td-av) * .24) !important; padding-bottom: calc(clamp(62px, calc(var(--td-av) * .12), 84px) + env(safe-area-inset-bottom, 0px)) !important; }
  .td-hero-kick { margin-bottom: calc(var(--P) * .24) !important; }
  .td-hero-kick .td-tag { font-size: max(11.5px, calc(var(--P) * .27)); padding: .36em .72em; }
  .td-hero .td-hero-h1, .td-hero .td-hero-h1 h1 { font-size: var(--P) !important; }
  .td-hero .td-hero-h1 { margin: 0 0 calc(var(--P) * .1) !important; }
  .td-hero-lead { margin-top: 0 !important; margin-bottom: calc(var(--P) * .24) !important; }
  .td-hero-lead p { font-size: max(14px, calc(var(--P) * .29)); line-height: 1.42; }
  .td-hero-num { margin-top: 0 !important; margin-bottom: calc(var(--P) * .26) !important; }
  .td-hero-num small { font-size: max(11px, calc(var(--P) * .235)); margin-bottom: 3px; }
  .td-hero-num a { font-size: calc(var(--P) * .86); }
  .td-hero .fusion-builder-row-inner { margin-bottom: 0 !important; }
  .td-hero .fusion-builder-row-inner .fusion-column-wrapper { flex-wrap: nowrap !important; gap: 10px; }
  .td-hero .fusion-builder-row-inner .fusion-column-wrapper > div { flex: 1 1 auto; min-width: 0; }
  .td-hero .fusion-builder-row-inner .fusion-button { margin: 0 !important; width: 100%; justify-content: center; padding: max(12px, calc(var(--P) * .3)) 10px !important; font-size: max(13px, calc(var(--P) * .29)) !important; white-space: nowrap; }
  .td-hero .fusion-builder-row-inner .fusion-button .fusion-button-text { font-size: inherit !important; }
  .td-hero-tag { margin-top: calc(var(--P) * .28) !important; }
  .td-hero-tag p { font-size: max(13px, calc(var(--P) * .27)); }
}
@media (max-width: 640px) and (max-height: 760px) { .td-hero-tag { display: none !important; } }
@media (max-width: 640px) and (max-height: 700px) { .td-hero-lead { display: none !important; } }