/* Isolated hero: React Bits-inspired motion, native to this Webflow site. */
#sec_hero.os-hero {
  --hero-accent: #ff5a24;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: min(900px, 100svh);
  padding: 170px max(6vw, 24px) 30px;
  background: #fff;
  color: #181818;
  font-family: var(--os-font-display, 'Google Sans', sans-serif);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#sec_hero .os-hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .17; background-image: linear-gradient(#79716c33 1px, transparent 1px), linear-gradient(90deg, #79716c33 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent, #000); }
#sec_hero .os-hero-art { position: absolute; z-index: -1; width: 65%; height: 100%; top: 0; right: -8%; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, #ff6b2410, transparent 63%); }
#sec_hero .os-hero-art::before { content: ''; position: absolute; width: 58%; aspect-ratio: 1; border: 1px solid #ff602b; border-radius: 50%; top: 24%; left: 20%; box-shadow: 0 0 80px #fc4b153b, inset 0 0 55px #fc4b1522; transform: rotate(-30deg) scaleX(.8); }
#sec_hero .os-hero-art.is-rendered::before { display: none; }
#sec_hero canvas { width: 100%; height: 100%; display: block; }
#sec_hero .os-hero-topline { display: flex; align-items: center; gap: 10px; font-family: var(--os-font-display, 'Google Sans', sans-serif); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .01em; text-transform: none; color: #68635e; }
#sec_hero .os-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 15px #ff5a2470; }
#sec_hero .os-hero-content { padding: 55px 0 58px; max-width: 900px; }
#sec_hero h1 { margin: 0; font-size: clamp(48px, 7.7vw, 80px); font-family: var(--os-font-display, 'Google Sans', sans-serif); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; color: inherit; }
#sec_hero h1 > span { display: block; animation: os-hero-reveal 1s both cubic-bezier(.2,.7,.2,1); }
#sec_hero h1 > span:nth-child(2) { animation-delay: .12s; }
#sec_hero h1 > span:nth-child(3) { animation-delay: .24s; }
#sec_hero h1 em { font-family: inherit; font-size: .82em; font-style: normal; font-weight: 500; letter-spacing: -.04em; color: #d9430c; }
#sec_hero .os-hero-description { font-family: var(--os-font-primary, 'Roboto', sans-serif); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #64615d; max-width: 390px; margin: 30px 0; }
#sec_hero .os-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
#sec_hero .os-hero-cta { display: inline-flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 36px; border: 1px solid var(--hero-accent); border-radius: 100px; padding: 21px 30px; background: var(--hero-accent); color: #101010; text-decoration: none; font-size: 18px; line-height: 1.3; font-weight: 500; transition: background .2s, transform .2s; }
#sec_hero .os-hero-cta:hover { background: #ff794c; transform: translateY(-3px); }
#sec_hero .os-hero-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 66px; color: #181818; text-decoration: none; font-size: 18px; line-height: 1.3; font-weight: 500; padding: 21px 30px; border: 1px solid #18181845; border-radius: 100px; background: #ffffffb3; transition: border-color .2s, background .2s; }
#sec_hero .os-hero-link:hover { border-color: var(--hero-accent); background: #fff5ef; }
#sec_hero a:focus-visible, #sec_hero button:focus-visible { outline: 2px solid #181818; outline-offset: 6px; }
#sec_hero .os-hero-bottom { border-top: 1px solid #18181824; padding-top: 23px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #64615d; font-family: var(--os-font-display, 'Google Sans', sans-serif); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .01em; text-transform: none; }
#sec_hero .os-hero-services { display: flex; flex-wrap: wrap; gap: 23px; }
#sec_hero .os-hero-services span + span::before { content: '/'; margin-right: 23px; color: #66574e; }
#sec_hero .os-hero-motion { background: transparent; border: 1px solid #18181835; border-radius: 50%; color: #64615d; width: 34px; height: 34px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
#sec_hero .os-hero-signature { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); font-family: var(--os-font-display, 'Google Sans', sans-serif); font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; color: #a74522; writing-mode: vertical-rl; }
@keyframes os-hero-reveal { from { opacity: 0; filter: blur(8px); transform: translateY(22px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@media (min-width: 1600px) { #sec_hero.os-hero { padding-left: max(6vw, calc((100vw - 1600px)/2)); padding-right: max(6vw, calc((100vw - 1600px)/2)); } }
@media (max-width: 900px) {
  #sec_hero.os-hero { min-height: 850px; padding-top: 145px; }
  #sec_hero .os-hero-art { width: 88%; right: -30%; opacity: .7; }
  #sec_hero .os-hero-signature { display: none; }
  #sec_hero h1 { font-size: clamp(62px, 10vw, 88px); }
}
@media (max-width: 600px) {
  #sec_hero.os-hero { min-height: 860px; padding: 125px 24px 24px; }
  #sec_hero .os-hero-content { padding: 200px 0 35px; }
  #sec_hero h1 { font-size: clamp(42px, 10.9vw, 66px); }
  #sec_hero .os-hero-art { width: 100%; height: 370px; top: 90px; right: -12%; opacity: .85; }
  #sec_hero .os-hero-topline { font-size: 14px; letter-spacing: 0; }
  #sec_hero .os-hero-description { margin: 23px 0; font-size: 16px; max-width: 310px; }
  #sec_hero .os-hero-actions { gap: 12px; }
  #sec_hero .os-hero-cta { width: 100%; min-height: 58px; padding: 17px 24px; gap: 23px; font-size: 17px; }
  #sec_hero .os-hero-link { width: 100%; min-height: 58px; padding: 17px 24px; font-size: 17px; }
  #sec_hero .os-hero-bottom { font-size: 14px; gap: 12px; }
  #sec_hero .os-hero-services { gap: 10px; }
  #sec_hero .os-hero-services span + span::before { margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #sec_hero h1 > span { animation: none; }
  #sec_hero .os-hero-cta { transition: none; }
}