/* modern.css — loaded last. Fixes + modern polish layer on top of style-v126 / hero-clean. */
:root{
  --m-ink:#eaf6fb;
  --m-muted:rgba(214,234,243,.72);
  --m-line:rgba(160,225,245,.16);
  --m-surface:rgba(10,30,46,.62);
  --m-accent:#18c3e6;
  --m-warm:#ff9b3d;
  --m-radius:20px;
  --m-ease:cubic-bezier(.2,.7,.2,1);
}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--m-accent);outline-offset:3px;border-radius:6px}

/* ---- Hero: heading no longer overflows its card ---- */
body.frame-page.home-page #home.hero > .hero-copy,
body.frame-page.home-page #home.hero > .hero-copy.glass{
  width:min(880px,100%) !important;
  max-width:880px !important;
  background:linear-gradient(160deg,rgba(14,70,96,.88),rgba(6,26,42,.9)) !important;
  border-color:var(--m-line) !important;
  border-radius:28px !important;
  backdrop-filter:blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(130%) !important;
}
body.frame-page.home-page #home.hero > .hero-copy h1{
  font-size:clamp(26px,3.3vw,44px) !important;
  line-height:1.1 !important;
  text-wrap:balance;
}
body.frame-page.home-page #home.hero > .hero-copy .hero-title-line{
  white-space:normal !important;
  text-wrap:balance;
}
@media (min-width:1100px){
  body.frame-page.home-page #home.hero > .hero-copy .hero-title-line{white-space:nowrap !important}
}
@media (max-width:700px){
  body.frame-page.home-page #home.hero > .hero-copy h1{font-size:clamp(24px,7vw,30px) !important;letter-spacing:-.02em !important}
}

/* ---- Estimate steps: glass cards with a single accent per card ---- */
.estimate-step-card{
  background:linear-gradient(170deg,rgba(18,48,70,.85),rgba(8,24,38,.92)) !important;
  border:1px solid var(--m-line) !important;
  border-radius:var(--m-radius) !important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8) !important;
  overflow:hidden;
  transition:transform .35s var(--m-ease),border-color .35s var(--m-ease),box-shadow .35s var(--m-ease);
}
.estimate-step-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--step,var(--m-accent));opacity:.9}
.estimate-step-card:nth-child(1){--step:#ff9b3d}
.estimate-step-card:nth-child(2){--step:#4fd18b}
.estimate-step-card:nth-child(3){--step:#18c3e6}
.estimate-step-card{position:relative}
.estimate-step-card:hover,.estimate-step-card:focus-within{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--step) 60%,transparent) !important;
  box-shadow:0 26px 50px -24px color-mix(in srgb,var(--step) 45%,#000) !important;
}
.estimate-step-number{color:color-mix(in srgb,var(--step) 70%,transparent) !important;background:none !important}

/* ---- Service cards ---- */
.service-card{
  border-radius:var(--m-radius);
  transition:transform .35s var(--m-ease);
}
.service-card:hover{transform:translateY(-6px)}
.service-card .card-img-wrap{border-radius:var(--m-radius);overflow:hidden}
.services p,.service-card p{color:var(--m-muted)}

/* ---- Section headings ---- */
.section h2{text-wrap:balance;letter-spacing:-.02em}

/* ---- Buttons ---- */
.liquid-btn{transition:transform .25s var(--m-ease),box-shadow .25s var(--m-ease),filter .25s}
.liquid-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* Home: remove the fixed blue/magenta page glow so sections under the carousel match its near-black (#010508). */
body.frame-page.home-page::before{background:none !important}