/* A brighter expression of the existing butterfly identity. */
:root {
  --local-bg: #f8faf3;
  --local-surface: #ffffff;
  --local-surface-soft: #e8f3eb;
  --local-surface-warm: #f1f3df;
  --local-text: #173e35;
  --local-muted: #50685e;
  --local-teal: #087568;
  --local-teal-dark: #075d53;
  --local-line: rgba(23, 62, 53, .17);
  --local-line-strong: rgba(23, 62, 53, .28);
  --local-shadow: 0 24px 64px rgba(23, 62, 53, .10);
}

body { background: var(--local-bg); }
::selection { color: #173e35; background: #d9ebaa; }
:focus-visible { outline-color: #087568; }
.site-header { background: rgba(248, 250, 243, .96); }
.site-header.is-scrolled { background: rgba(248, 250, 243, .97); }
.reading-progress { position: absolute; inset: auto 0 0; height: 3px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--local-teal); transform: scaleX(0); transform-origin: left; }
.nav-links { box-shadow: none; }
.nav-links .nav-contact { border-radius: 999px; padding-inline: 22px; }
.status-dot { background: var(--local-teal); box-shadow: 0 0 0 4px #e0eee5; animation: none; }

.hero { background: var(--local-bg); padding-top: calc(var(--header-height) + 42px); padding-bottom: 88px; }
.hero::before {
  opacity: .65;
  background-image: radial-gradient(#a8c4b0 .75px, transparent .75px);
  background-size: 24px 24px;
  mask-image: linear-gradient(110deg, transparent 35%, #000);
}
.hero::after {
  top: 110px; right: -12%; width: 54vw; height: 75%;
  aspect-ratio: auto; border-radius: 50% 0 0 45%;
  background: #deecd5; filter: none; transform: rotate(-9deg);
}
.hero-grid { gap: clamp(40px, 5vw, 88px); }
.hero-copy { padding-top: 18px; }
.hero .kicker { display: inline-block; padding: 9px 15px; background: #e4eedc; border-radius: 4px; margin-bottom: 30px; }
.hero .kicker::before { display: none; }
.hero-title { line-height: 1.18; letter-spacing: -.045em; }
.title-line--accent { margin-top: .2em; color: var(--local-teal); }
.title-line--accent::after { display: none; }
.title-line--small { margin-top: 18px; font-size: .48em; letter-spacing: .015em; line-height: 1.6; }
.hero-lead { margin-top: 22px; max-width: 35em; }
.hero-actions { margin-top: 30px; }
.hero-reassurance { color: var(--local-muted); font-size: 1rem; line-height: 1.8; margin: 20px 0 0; }
.button { border-radius: 999px; padding: 18px 24px; gap: 24px; box-shadow: 0 8px 0 #dbe8d3; }
.button::before { display: none; }
.button-arrow { border: 0; border-radius: 50%; background: rgba(255,255,255,.14); width: 32px; height: 32px; }
.button:hover .button-arrow { transform: translate(2px, -2px); }
.button:hover { box-shadow: 0 11px 0 #dbe8d3; }
.button:active { box-shadow: 0 3px 0 #dbe8d3; }
.text-link { font-weight: 700; }
.text-link::after { height: 2px; }
.core-panel { border: 1px solid #c6d9cd; border-radius: 24px 24px 12px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.offer-brand-art figcaption { left: 20px; right: 20px; bottom: 16px; width: fit-content; border-radius: 6px; box-shadow: none; }
.offer-summary { padding-top: 28px; }
.offer-summary__note { color: #42552c; background: #f0f4df; border-color: #c2cd9f; }
.core-panel__head { background: #e8f3eb; }
.core-panel__foot { background: #e8f3eb; }

.plan { background: var(--local-surface-warm); }
.section-heading h2, .why-copy h2, .contact-copy h2 { letter-spacing: -.04em; }
.price-card { box-shadow: none; }
.price-card--repair { border-top: 5px solid #93bda2; }
.price-card--rebuild { border: 1px solid #83ac91; border-top: 5px solid var(--local-teal); background: white; box-shadow: 8px 8px 0 #d9e5c4; }
.price-card--rebuild .price-card__head { background: #e2efdf; }
.price-card__number { opacity: 1; }
.management-card { background: #e3eedc; }
.first-year { background: #e4eedc; }
.process { background: #e8f3eb; }
.production-flow { background: transparent; }
.production-flow > li > span { display: grid; place-items: center; width: 56px; height: 56px; background: white; border: 1px solid #c0d7c9; border-radius: 50%; font-size: 1.5rem; }
.case-browser, .case-browser__bar { background: var(--local-teal-dark); }
.case-browser__bar strong { color: #e5f2c9; }
.compare-divider { background: #087568; }
.compare-divider span { color: #fff; background: #087568; }
.case-hint { text-align: center; padding: 12px; margin-top: 16px; border-radius: 6px; background: #e8f3eb; color: var(--local-teal-dark); }
.case-full-image { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 14px 16px; border: 1px solid var(--local-teal); border-radius: 6px; color: var(--local-teal-dark); background: #fff; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.case-full-image:hover { background: #e8f3eb; }
.contact { background: #e2edcf; }
.contact-form { box-shadow: 10px 12px 0 #ccdeb9; border-color: #bccdac; }
.site-footer { background: var(--local-teal-dark); }
.site-footer .brand-mark span:nth-child(2), .site-footer .brand-mark span:nth-child(3) { background: #d6e9ad; }
.footer-contact { border-color: #d6e9ad; }
.motion-toggle { min-height: 44px; padding: 8px 12px; color: #fff; background: transparent; border: 1px solid #9ebeb1; border-radius: 6px; font-size: .875rem; }
.motion-toggle:disabled { cursor: default; }
.site-footer :focus-visible { outline-color: #e4f1c1; }

/* Entries are brief, run once, and never control scroll position. */
.js .reveal-item { transform: translateY(18px); transition: opacity .55s ease, transform .65s var(--ease-out); }
.js .reveal-item.is-visible { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-reduced) .offer-panel.is-visible .offer-brand-art img { animation: art-arrive 1.2s var(--ease-out) both; }
  html:not(.motion-reduced) .production-flow.is-visible > li { animation: step-arrive .6s var(--ease-out) both; }
  .production-flow > li:nth-child(2) { animation-delay: .08s !important; }
  .production-flow > li:nth-child(3) { animation-delay: .16s !important; }
  .production-flow > li:nth-child(4) { animation-delay: .24s !important; }
  @keyframes art-arrive { from { opacity: .65; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
  @keyframes step-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (hover: hover) and (pointer: fine) {
  .offer-summary__subprices a { transition: color .2s, background-color .2s; }
  .offer-summary__subprices a:hover { background: #edf5e8; color: var(--local-teal-dark); }
  .production-flow li { transition: background-color .2s; }
  .production-flow li:hover { background: rgba(255,255,255,.65); }
}
@media (min-width: 961px) { .nav-links { background: transparent; } }
@media (max-width: 960px) {
  .hero-copy { padding-top: 0; }
  .hero::after { width: 85vw; top: 38%; height: 55%; }
}
@media (max-width: 620px) {
  .hero { padding-top: calc(var(--header-height) + 28px); padding-bottom: 48px; }
  .hero-grid { gap: 28px; }
  .hero-brand-mobile { display: none; }
  .offer-panel > .offer-brand-art { display: block; }
  .hero .kicker { font-size: .875rem; margin-bottom: 22px; padding: 8px 10px; }
  .hero-title { font-size: clamp(2rem, 8.8vw, 2.7rem); line-height: 1.23; }
  .title-line--small { font-size: .56em; margin-top: 18px; }
  .hero-lead { margin-top: 22px; line-height: 1.85; }
  .hero-actions { margin-top: 24px; gap: 16px; }
  .hero-reassurance { font-size: .9375rem; margin-top: 16px; }
  .hero::after { top: 55%; right: -35%; }
  .button { padding: 16px 20px; }
  .offer-brand-art figcaption strong { font-size: .875rem; }
  .offer-brand-art figcaption { left: 12px; right: 12px; }
  .production-flow > li > span { width: 44px; height: 44px; }
  .contact-form { box-shadow: 5px 6px 0 #ccdeb9; }
  .footer-bottom { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal-item { opacity: 1; transform: none; }
}
html.motion-reduced { scroll-behavior: auto; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation: none !important; transition: none !important; }
.motion-reduced .reveal-item { opacity: 1; transform: none; }
.motion-reduced .button:hover, .motion-reduced .button:active, .motion-reduced .button:hover .button-arrow { transform: none; }