#top.smile-hero {
  --hero-height: max(100vh, 640px);
  --hero-edge: 20px;
  --hero-pad: 16px;
  --hero-gap: 8px;
  --hero-focal: 72%;
  height: var(--hero-height);
  padding: var(--hero-pad) var(--hero-edge) var(--hero-gap);
  gap: var(--hero-gap);
  position: relative;
  font-family: 'Open Sauce One', Arial, sans-serif;
}

#top .smile-band, #top .smile-panel {
  position: relative;
  padding: 0;
  min-height: 0;
  isolation: isolate;
  border-radius: 16px;
}

#top .smile-band {
  height: 80px;
  flex: 0 0 80px;
  display: grid;
  place-items: center;
  overflow: visible;
  z-index: 2;
}

#top .smile-panel {
  flex: 1 1 auto;
  overflow: hidden;
  background-image: none;
}

#top .smile-band::before, #top .smile-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  background: var(--smile-photo) var(--hero-focal) calc(-1 * var(--hero-pad)) / max(100%, calc(var(--hero-height) * 1.777)) auto no-repeat;
}

#top .smile-band::before {
  background-image: linear-gradient(105deg,#342c2a, rgb(52 44 42 / .88) 72%, rgb(52 44 42 / .8)), var(--smile-photo);
  background-position: center, var(--hero-focal) calc(-1 * var(--hero-pad));
  background-size: cover, max(100%, calc(var(--hero-height) * 1.777)) auto;
}

#top .smile-panel::before { background-position: var(--hero-focal) calc(-80px - var(--hero-gap) - var(--hero-pad)); }
#top .smile-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(250 250 249 / .94), rgb(250 250 249 / .72) 28%, rgb(250 250 249 / .16) 57%, transparent 75%),
    linear-gradient(0deg, rgb(250 250 249 / .5), transparent 47%);
}

#top .smile-logo { position: absolute; top: 0; left: 0; width: 72px; padding: 8px; }
#top .smile-brand { position: absolute; inset: 0; width: max-content; height: max-content; margin: auto; gap: 4px; }
#top .smile-brand .elementor-heading-title { font-weight: 700; }
#top .smile-nav { position: absolute; right: 0; top: 12px; width: max-content; padding: 5px; gap: 3px; border-radius: 99px; background: #fafaf9; }
#top .smile-nav .elementor-button { padding: 11px 12px; }
#top .smile-toggle { display: none; }
#top .smile-title, #top .smile-message, #top .smile-contact { position: absolute; width: auto; }
#top .smile-title { inset: 28px auto auto 28px; gap: 4px; }
#top .smile-title h1 { font-size: clamp(4.6rem, 7.4vw, 8rem); line-height: .82; }
#top .smile-title p { font-size: clamp(1.75rem, 3vw, 3.2rem); line-height: 1; }
#top .smile-message { inset: auto auto 112px 28px; gap: 12px; }
#top .smile-message h2 { font-size: clamp(2.4rem, 4vw, 4.1rem); line-height: .92; }
#top .smile-message > .elementor-widget-text-editor { max-width: 720px; font-size: clamp(1.1rem,1.35vw,1.45rem); font-weight: 600; line-height: 1.25; }
#top .smile-message p { margin: 0; }
#top .smile-metrics { width: min(72vw,1160px); gap: 16px; }
#top .smile-metrics > .e-con { width: 0; flex: 1 1 0; min-width: 0; min-height: 88px; padding: 8px clamp(12px,2.2vw,32px); gap: 12px; flex-wrap: nowrap; }
#top .smile-metrics > .e-con > :first-child { white-space: nowrap; flex-shrink: 0; }
#top .smile-metrics > .e-con > :first-child p { font-size: 3.25rem; }
#top .smile-metrics > .e-con > :nth-child(2) { max-width: 160px; }
#top .smile-metrics sup { font-size: .48em; }
#top .smile-contact { inset: auto 32px 40px auto; }
#top .smile-contact .elementor-button { padding: 12px 24px; }
#top .smile-contact .elementor-button-content-wrapper { align-items: center; gap: 8px; }
#top :is(.smile-brand,.smile-title,.smile-message) .elementor-heading-title,
#top .smile-message > .elementor-widget-text-editor { font-family: 'Open Sauce One', Arial, sans-serif; letter-spacing: -.045em; }

@media (max-width: 1199px) {
  #top .smile-band:has(.smile-toggle) .smile-nav { display: none; }
  #top .smile-band:has(.smile-toggle[aria-expanded='true']) .smile-nav { display: flex; top: 74px; width: min(240px, 100%); flex-direction: column; align-items: stretch; padding: 9px 13px; border-radius: 12px; box-shadow: 0 10px 35px #342c2a30; }
  #top .smile-nav .elementor-button { display: flex; min-height: 44px; align-items: center; }
  #top .smile-toggle { position: absolute; right: 0; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #342c2a26; border-radius: 50%; background: #fafaf9; color: #342c2a; cursor: pointer; }
  #top .smile-toggle svg { width: 20px; height: 20px; }
  #top .smile-toggle[aria-expanded='false'] .smile-close, #top .smile-toggle[aria-expanded='true'] .smile-open { display: none; }
}

@media (min-width: 768px) and (max-width: 1100px) { #top.smile-hero { --hero-height: max(100vh, 750px); } }
@media (min-width: 768px) and (max-width: 1023px) {
  #top .smile-metrics { width: min(84vw,820px); gap: 12px; flex-direction: row; }
  #top .smile-metrics > .e-con { min-height: 66px; padding: 8px 12px; gap: 8px; }
  #top .smile-metrics > .e-con > :first-child p { font-size: 2.35rem; }
}

@media (max-width: 767px) {
  #top.smile-hero { --hero-pad: 12px; --hero-edge: 12px; --hero-gap: 6px; --hero-focal: 78%; }
  #top .smile-band, #top .smile-panel { border-radius: 12px; }
  #top .smile-logo { width: 60px; padding: 6px; }
  #top .smile-brand { left: auto; right: 52px; align-items: flex-end; gap: 2px; }
  #top .smile-brand .elementor-heading-title { text-align: right; }
  #top .smile-panel::after { background: linear-gradient(90deg, rgb(250 250 249 / .85), rgb(250 250 249 / .27) 47%, transparent 78%), linear-gradient(0deg, rgb(250 250 249 / .88) 0%, rgb(250 250 249 / .74) 28%, transparent 66%); }
  #top .smile-title { inset: 20px 20px auto 16px; }
  #top .smile-title h1 { font-size: clamp(3.6rem,15vw,5.5rem); }
  #top .smile-title p { font-size: clamp(1.5rem,6vw,2.4rem); }
  #top .smile-message { inset: auto 20px 96px 12px; gap: 8px; }
  #top .smile-message h2 { font-size: clamp(1.9rem,8vw,3.2rem); }
  #top .smile-message > .elementor-widget-text-editor { font-size: 14px; line-height: 20px; }
  #top .smile-metrics { width: 100%; gap: 8px; margin-top: 4px; }
  #top .smile-metrics > .e-con { flex: 0 0 auto; width: 100%; min-height: 58px; padding: 8px 16px; gap: 8px; }
  #top .smile-metrics > .e-con:last-child { min-height: 72px; }
  #top .smile-metrics > .e-con > :first-child p { font-size: clamp(1.7rem,6.8vw,2.35rem); }
  #top .smile-metrics > .e-con > :nth-child(2) { max-width: 100px; }
  #top .smile-contact { inset: auto 16px 24px auto; }
  #top .smile-contact .elementor-button { padding: 12px 16px; }
}
@media (max-width: 365px) { #top.smile-hero { --hero-height: max(100vh, 680px); } }

#top.smile-hero .elementor-invisible { visibility: visible; }
#top.smile-hero .animated { animation: none; }
#top .smile-title h1 > span { display: block; }
.smile-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  #top .smile-panel::before { transform-origin: 72% 44%; animation: smile-photo-in 1.65s cubic-bezier(.16,1,.3,1) backwards; }
  #top.smile-hero :is(.smile-brand,.smile-title h1 > span,.smile-title p,.smile-message h2,.smile-message > .elementor-widget-text-editor,.smile-metrics > .e-con,.smile-contact) { animation: smile-rise .68s cubic-bezier(.16,1,.3,1) var(--hero-delay,0s) backwards; }
  #top .smile-brand { --hero-delay: .06s; }
  #top .smile-title h1 > span:first-child { --hero-delay: .14s; }
  #top .smile-title h1 > span:last-child { --hero-delay: .22s; }
  #top .smile-title p { --hero-delay: .29s; }
  #top .smile-message h2 { --hero-delay: .32s; }
  #top .smile-message > .elementor-widget-text-editor { --hero-delay: .39s; }
  #top .smile-metrics > :nth-child(1) { --hero-delay: .45s; }
  #top .smile-metrics > :nth-child(2) { --hero-delay: .52s; }
  #top .smile-metrics > :nth-child(3) { --hero-delay: .59s; }
  #top .smile-contact { --hero-delay: .56s; }
}
@keyframes smile-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes smile-photo-in { from { opacity: .54; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }