/* V24: the slogan becomes the headline, the hero gets one action, the examples follow the hero, and the bar matches the hero width with the menu at the far right. Loads after hero-dust-v20.css. */
.hero-dust .hero-copy {max-width:600px}
.hero-dust h1 {font-size:clamp(2.9rem,5.4vw,5rem);line-height:1.04;letter-spacing:-.05em}
.hero-dust h1 span {display:inline-block}
.hero-dust .hero-description {max-width:46ch;font-size:1.125rem;line-height:1.6;margin-top:28px;color:#cbc1d8}
.hero-dust .hero-description strong {font-weight:500;color:#fff}
/* One block holds both paragraphs so they share a single grid row on mobile; the global p line-height must not override the block's. */
.hero-dust .hero-description p {margin:0;line-height:inherit}
.hero-dust .hero-description p + p {margin-top:.75em}
.hero-actions-v24 {display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.hero-actions-v24 .hero-cta {
  border:0;font:inherit;font-weight:500;cursor:pointer;
  margin:0;gap:14px;padding:15px 24px;min-height:52px;
  background:var(--violet);color:#fff;font-size:1rem;
  transition:background .2s,transform .3s var(--ease);
}
.hero-actions-v24 .hero-cta:hover {background:#7433ff}
.hero-actions-v24 .hero-cta:active {transform:translateY(1px)}
.hero-actions-v24 .hero-cta {padding-inline:28px}
.hero-dust .hero-assurance {font-size:.875rem;line-height:1.5;color:#a89cb8;margin-top:12px}
.hero-dust .hero-assurance .whatsapp-link {color:#d7c2ff;text-decoration:underline;text-underline-offset:4px}
.hero-dust .hero-assurance .whatsapp-link:hover {color:#fff}
/* WhatsApp beside the other ways to talk. */
.footer-meta .whatsapp-link {margin-left:4px}
.contact-options a.quiet {text-decoration:none}
/* The bar spans the hero width on the home page; the menu button sits at the far right on every page. */
.nav-cta {border:0;font:inherit;font-weight:500;cursor:pointer}
.nav-inner .nav-cta {margin-left:auto}
.nav-inner .menu-toggle {margin-left:0}
@media(min-width:1101px) {html[data-page="home"] .nav-inner {width:min(1440px,calc(100% - 96px))}}
@media(min-width:901px) and (max-width:1100px) {html[data-page="home"] .nav-inner {width:calc(100% - 64px)}}
/* Without eyebrows, headings carry the sections; the examples sit directly under the dark hero. */
.hero-dust + .flow-story {border-top:0;padding-top:80px}
.section-heading h2,.chapter-heading h2,.flow-intro h2,.subpage-intro h1 {margin-top:0}
/* The navigation button steps back while the hero button is on screen, so the first screen has one call to action. */
.navigation .nav-cta {transition:opacity .25s,visibility .25s}
html[data-hero-cta="visible"] .navigation .nav-cta {opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:1100px) and (min-width:901px) {
  .hero-dust h1 {font-size:clamp(2.6rem,4.6vw,3.3rem)}
  .hero-dust .hero-description {font-size:1.0625rem}
}
@media(max-width:900px) {
  .hero-dust .hero-layout {grid-template-rows:auto clamp(180px,30svh,300px) auto auto;align-content:center;padding-top:24px}
  .hero-dust .hero-copy {display:contents}
  .hero-dust #hero-title {grid-row:1;position:relative;z-index:2}
  .hero-dust .hero-visual {grid-row:2;max-height:none}
  .hero-dust-stage {min-height:0}
  .hero-dust .hero-description {grid-row:3;position:relative;z-index:2}
  .hero-actions-v24 {grid-row:4;position:relative;z-index:2}
  .hero-dust h1 {font-size:clamp(2.6rem,7.6vw,4rem);line-height:1.04}
  .hero-actions-v24 {margin-top:26px;gap:12px 24px}
}
@media(max-width:540px) {
  .hero-dust h1 {font-size:clamp(2.2rem,9.6vw,3.15rem)}
  .hero-dust .hero-description {font-size:1rem;line-height:1.55;margin-top:18px}
  .hero-actions-v24 {margin-top:22px;gap:6px 20px}
  .hero-actions-v24 .hero-cta {width:100%;font-size:.9375rem;min-height:50px}
  .hero-dust .hero-assurance {margin-top:6px}
}
@media(max-height:700px) and (max-width:900px) {
  .hero-dust .hero-layout {grid-template-rows:auto 160px auto auto}
  .hero-dust-stage {min-height:160px}
  .hero-dust h1 {font-size:clamp(2rem,8.4vw,2.6rem)}
  .hero-dust .hero-description {margin-top:14px;line-height:1.5}
  .hero-actions-v24 {margin-top:16px}
  .hero-actions-v24 .hero-cta {min-height:46px}
  .hero-dust .hero-assurance {margin-top:4px}
}
@media(prefers-reduced-motion:reduce) {
  .navigation .nav-cta,.hero-actions-v24 .hero-cta {transition:none}
}
@media(forced-colors:active) {
  .hero-actions-v24 .hero-cta {border:1px solid ButtonText}
  html[data-hero-cta="visible"] .navigation .nav-cta {opacity:1;visibility:visible;pointer-events:auto}
}
@media print {
  html[data-hero-cta="visible"] .navigation .nav-cta {opacity:1;visibility:visible}
}