/* The house hero (decision 040): the soft grid, the drifting blue and orange light and the
   blue-to-orange rule that the about, accountants, audit, pricing and guides pages already use,
   shared so every page header looks the same. Linked last in <head> so it settles sizes. */
.house-hero{position:relative;overflow:hidden;isolation:isolate;padding:96px 0 76px;background:transparent}
.house-hero.slim{padding:72px 0 52px}
.house-hero .eyebrow{display:inline-block}
.house-hero h1{font-size:clamp(36px,5vw,58px);font-weight:800;max-width:880px;margin-top:16px;line-height:1.05;letter-spacing:-.02em}
.house-hero.slim h1{font-size:clamp(32px,4.2vw,48px)}
.house-hero p.lede,.house-hero p.lead{font-size:19px;color:var(--slate);max-width:660px;margin-top:22px;line-height:1.6}
.house-hero .ctas,.house-hero .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.house-hero .meta{margin-top:16px}
.house-hero + section{padding-top:56px!important}
@media(max-width:720px){.house-hero{padding:56px 0 48px}.house-hero.slim{padding:44px 0 36px}.house-hero p.lede,.house-hero p.lead{font-size:17px}}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg .grid{position:absolute;inset:-40px;background-image:linear-gradient(to right,rgba(23,80,224,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(23,80,224,.075) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 62% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 62% 45%,#000 20%,transparent 75%);animation:heroGrid 48s linear infinite}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;mix-blend-mode:multiply}
.hero-bg .o1{width:560px;height:560px;left:-140px;top:-180px;background:radial-gradient(circle at 40% 40%,rgba(23,80,224,.16),rgba(23,80,224,0) 65%);animation:heroDrift1 38s ease-in-out infinite}
.hero-bg .o2{width:520px;height:520px;right:-120px;top:40px;background:radial-gradient(circle at 50% 50%,rgba(255,106,43,.14),rgba(255,106,43,0) 65%);animation:heroDrift2 46s ease-in-out infinite}
.hero-bg .o3{width:380px;height:380px;left:42%;bottom:-200px;background:radial-gradient(circle at 50% 50%,rgba(23,80,224,.10),rgba(23,80,224,0) 65%);animation:heroDrift3 54s ease-in-out infinite}
.hero-bg .rule{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--blue) 0 55%,var(--orange) 55% 100%);transform:scaleX(0);transform-origin:left;animation:heroRule 1.6s cubic-bezier(.7,0,.2,1) .4s forwards}
@keyframes heroDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,60px) scale(1.08)}}
@keyframes heroDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,50px) scale(1.06)}}
@keyframes heroDrift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-40px)}}
@keyframes heroGrid{from{background-position:0 0}to{background-position:44px 44px}}
@keyframes heroRule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.hero-bg .orb,.hero-bg .grid{animation:none}.hero-bg .rule{animation:none;transform:none}}
@media (max-width:720px){.hero-bg .orb{filter:blur(50px)}.hero-bg .o1{width:380px;height:380px}.hero-bg .o2{width:340px;height:340px}.hero-bg .o3{display:none}}
/* The hero's pieces win over any page class with the same name (the reviews page has its own .rule card). */
.hero-bg .rule{padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;height:2px!important;min-height:0!important;background:linear-gradient(90deg,var(--blue) 0 55%,var(--orange) 55% 100%)!important}
.hero-bg .grid,.hero-bg .orb{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;display:block!important}