@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope/Manrope-latin.woff2") format("woff2");
}

@layer wa-theme {
  .wa-theme-surfacegrade,
  .wa-theme-surfacegrade.wa-light,
  .wa-theme-surfacegrade .wa-light,
  .wa-theme-surfacegrade.wa-dark .wa-invert,
  .wa-theme-surfacegrade .wa-dark .wa-invert,
  .wa-light .wa-theme-surfacegrade,
  .wa-dark .wa-theme-surfacegrade.wa-invert,
  .wa-dark .wa-theme-surfacegrade .wa-invert {
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--sg-color-off-white);
    --wa-color-surface-default: var(--sg-color-off-white);
    --wa-color-surface-lowered: var(--sg-color-light-gray);
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--sg-color-deep-slate);
    --wa-color-text-quiet: var(--sg-color-slate-gray);
    --wa-color-text-link: var(--sg-color-steel-blue);

    --wa-color-overlay-modal: color-mix(in oklab, var(--sg-color-deep-slate) 64%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--sg-color-steel-blue) 18%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--sg-color-deep-slate) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );

    --wa-color-focus: var(--sg-color-bright-lime);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-30);
    --wa-color-brand-on-normal: var(--wa-color-brand-20);
    --wa-color-brand-on-loud: var(--sg-color-off-white);

    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --wa-color-success-border-loud: var(--wa-color-success-40);
    --wa-color-success-on-quiet: var(--wa-color-success-30);
    --wa-color-success-on-normal: var(--wa-color-success-20);
    --wa-color-success-on-loud: var(--sg-color-deep-slate);

    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --wa-color-warning-border-loud: var(--wa-color-warning-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-30);
    --wa-color-warning-on-normal: var(--wa-color-warning-20);
    --wa-color-warning-on-loud: var(--sg-color-deep-slate);

    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-40);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --wa-color-danger-border-loud: var(--wa-color-danger-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-30);
    --wa-color-danger-on-normal: var(--wa-color-danger-20);
    --wa-color-danger-on-loud: var(--sg-color-off-white);

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-on-loud: var(--sg-color-off-white);
  }

  .wa-theme-surfacegrade.wa-dark,
  .wa-theme-surfacegrade .wa-dark,
  .wa-theme-surfacegrade.wa-invert,
  .wa-theme-surfacegrade .wa-invert,
  .wa-dark .wa-theme-surfacegrade,
  .wa-light .wa-theme-surfacegrade.wa-invert,
  .wa-light .wa-theme-surfacegrade .wa-invert {
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-20);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --wa-color-surface-border: var(--wa-color-neutral-20);

    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-70);
    --wa-color-text-link: var(--wa-color-brand-80);

    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
      transparent
    );

    --wa-color-focus: var(--sg-color-bright-lime);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 20%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-70);
    --wa-color-brand-on-normal: var(--wa-color-brand-80);
    --wa-color-brand-on-loud: var(--sg-color-off-white);

    --wa-color-success-fill-quiet: var(--wa-color-success-10);
    --wa-color-success-fill-normal: var(--wa-color-success-20);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-20);
    --wa-color-success-border-normal: var(--wa-color-success-30);
    --wa-color-success-border-loud: var(--wa-color-success-40);
    --wa-color-success-on-quiet: var(--wa-color-success-70);
    --wa-color-success-on-normal: var(--wa-color-success-80);
    --wa-color-success-on-loud: var(--sg-color-deep-slate);

    --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-20);
    --wa-color-warning-border-normal: var(--wa-color-warning-30);
    --wa-color-warning-border-loud: var(--wa-color-warning-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-70);
    --wa-color-warning-on-normal: var(--wa-color-warning-80);
    --wa-color-warning-on-loud: var(--sg-color-deep-slate);

    --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
    --wa-color-danger-fill-loud: var(--wa-color-danger-40);
    --wa-color-danger-border-quiet: var(--wa-color-danger-20);
    --wa-color-danger-border-normal: var(--wa-color-danger-30);
    --wa-color-danger-border-loud: var(--wa-color-danger-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-70);
    --wa-color-danger-on-normal: var(--wa-color-danger-80);
    --wa-color-danger-on-loud: var(--sg-color-off-white);

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
  }

  .wa-theme-surfacegrade,
  .wa-theme-surfacegrade.wa-light,
  .wa-theme-surfacegrade .wa-light,
  .wa-theme-surfacegrade.wa-dark,
  .wa-theme-surfacegrade .wa-dark,
  .wa-theme-surfacegrade.wa-invert,
  .wa-theme-surfacegrade .wa-invert {
    font-family: var(--wa-font-family-body);

    --sg-color-deep-slate: #122124;
    --sg-color-charcoal: #203132;
    --sg-color-steel-blue: #415A62;
    --sg-color-surface-green: #94CE3A;
    --sg-color-bright-lime: #A9E93C;
    --sg-color-light-gray: #E8ECEC;
    --sg-color-off-white: #F8FAFB;
    --sg-color-slate-gray: #6A747A;

    --wa-color-brand-05: #122124;
    --wa-color-brand-10: #182B30;
    --wa-color-brand-20: #20383F;
    --wa-color-brand-30: #2B4850;
    --wa-color-brand-40: #36555E;
    --wa-color-brand-50: #415A62;
    --wa-color-brand-60: #607982;
    --wa-color-brand-70: #859AA1;
    --wa-color-brand-80: #B6C4C8;
    --wa-color-brand-90: #DDE6E8;
    --wa-color-brand-95: #F1F6F7;
    --wa-color-brand: var(--sg-color-steel-blue);
    --wa-color-brand-on: var(--sg-color-off-white);

    --wa-color-neutral-05: #122124;
    --wa-color-neutral-10: #17282B;
    --wa-color-neutral-20: #203132;
    --wa-color-neutral-30: #2F444A;
    --wa-color-neutral-40: #415A62;
    --wa-color-neutral-50: #6A747A;
    --wa-color-neutral-60: #8B979C;
    --wa-color-neutral-70: #B1BCBF;
    --wa-color-neutral-80: #D3DBDD;
    --wa-color-neutral-90: #E8ECEC;
    --wa-color-neutral-95: #F8FAFB;
    --wa-color-neutral: var(--sg-color-slate-gray);
    --wa-color-neutral-on: var(--sg-color-off-white);

    --wa-color-success-05: #16220E;
    --wa-color-success-10: #203312;
    --wa-color-success-20: #344916;
    --wa-color-success-30: #537521;
    --wa-color-success-40: #73A22D;
    --wa-color-success-50: #94CE3A;
    --wa-color-success-60: #A9E93C;
    --wa-color-success-70: #C2F279;
    --wa-color-success-80: #D8F7A8;
    --wa-color-success-90: #ECFBD5;
    --wa-color-success-95: #F6FDEB;
    --wa-color-success: var(--sg-color-surface-green);
    --wa-color-success-on: var(--sg-color-deep-slate);

    --wa-color-warning-05: #2B1300;
    --wa-color-warning-10: #492000;
    --wa-color-warning-20: #713400;
    --wa-color-warning-30: #975000;
    --wa-color-warning-40: #BF7000;
    --wa-color-warning-50: #E8911C;
    --wa-color-warning-60: #FFB547;
    --wa-color-warning-70: #FFC979;
    --wa-color-warning-80: #FFDBAB;
    --wa-color-warning-90: #FFEDD6;
    --wa-color-warning-95: #FFF6EA;
    --wa-color-warning: #FFB547;
    --wa-color-warning-on: #492000;

    --wa-color-danger-05: #300103;
    --wa-color-danger-10: #500609;
    --wa-color-danger-20: #7A0F15;
    --wa-color-danger-30: #A41A24;
    --wa-color-danger-40: #D12736;
    --wa-color-danger-50: #FF5252;
    --wa-color-danger-60: #FF7B7B;
    --wa-color-danger-70: #FFAAAA;
    --wa-color-danger-80: #FFD0D0;
    --wa-color-danger-90: #FFE7E7;
    --wa-color-danger-95: #FFF2F2;
    --wa-color-danger: #D12736;
    --wa-color-danger-on: var(--sg-color-off-white);

    --wa-font-family-body: "Manrope", Arial, Helvetica, sans-serif;
    --wa-font-family-heading: "Manrope", Arial, Helvetica, sans-serif;
    --wa-font-family-code: "JetBrains Mono", monospace;
    --wa-font-weight-heading: 700;
    --wa-font-weight-body: 400;
    --wa-font-weight-code: 500;
    --wa-font-weight-action: 600;
    --wa-font-weight-semibold: 600;

    --wa-border-radius-s: 0.4rem;
    --wa-border-radius-m: 0.7rem;
    --wa-border-radius-l: 1rem;

    --wa-space-xs: 0.45rem;
    --wa-space-s: 0.7rem;
    --wa-space-m: 1rem;
    --wa-space-l: 1.35rem;
    --wa-space-xl: 1.9rem;

    --wa-border-width-s: 1px;
    --wa-border-width-m: 1.5px;
    --wa-panel-border-style: solid;
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: calc(var(--wa-border-radius-l) * 1.1);
  }
}

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--wa-color-surface-default);
  overflow-x: clip;
}

body {
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-body);
  letter-spacing: 0;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

main {
  padding: 0;
}

wa-page::part(base),
wa-page::part(body),
wa-page::part(main),
wa-page::part(main-content) {
  background: var(--wa-color-surface-default);
}

wa-page::part(body),
wa-page::part(main-content) {
  gap: 0;
}

wa-page::part(header) {
  padding: 0;
  background: var(--wa-color-surface-default);
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

wa-page[view='desktop']::part(navigation),
wa-page[view='desktop']::part(navigation-header),
wa-page[view='desktop']::part(navigation-footer) {
  display: none;
}

wa-page[view='desktop'] .wa-mobile-only,
wa-page[view='mobile'] .wa-desktop-only {
  display: none;
}

wa-card {
  --spacing: var(--wa-space-xl);
}

.site-header {
  padding-block: var(--wa-space-s);
  padding-inline: var(--wa-space-xl);
}

.site-header-bar {
  align-items: center;
}

.page-boundary {
  inline-size: min(100%, calc(var(--wa-space-5xl) * 15));
  margin-inline: auto;
}

.brand-link {
  display: inline-block;
  inline-size: max-content;
}

.brand-logo {
  inline-size: min(calc(var(--wa-space-5xl) * 3.25), 60vw);
  max-inline-size: 100%;
}

.site-top-nav__link {
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-action);
  font-size: var(--wa-font-size-s);
  padding-block: var(--wa-space-3xs);
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-default);
}

.site-top-nav__link:hover,
.site-top-nav__link:focus-visible {
  color: var(--wa-color-text-normal);
  border-color: var(--wa-color-brand-border-loud);
}

.menu-toggle,
.site-header-actions {
  flex: 0 0 auto;
}

.site-drawer-section,
.site-navigation {
  padding: var(--wa-space-l);
}

.drawer-summary {
  max-inline-size: 34ch;
  color: var(--wa-color-text-quiet);
}

.site-navigation {
  padding-block: var(--wa-space-s);
}

.site-nav-link {
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-heading);
  padding-block: var(--wa-space-xs);
  text-decoration: none;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: var(--wa-color-brand-border-loud);
}

.hero {
  min-block-size: 76dvh;
  padding-block: var(--wa-space-5xl) var(--wa-space-4xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-on-loud);
  background: var(--sg-color-deep-slate);
  background-image: url("/assets/images/roof-installation.jpg");
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
  border-block-end: var(--wa-border-width-l) solid var(--wa-color-success-fill-loud);
}

.hero-layout {
  min-block-size: calc(76dvh - var(--wa-space-5xl) - var(--wa-space-4xl));
  justify-content: center;
}

.hero-copy,
.section-heading {
  max-inline-size: 70ch;
}

.hero-kicker {
  margin: 0;
  color: var(--wa-color-success-fill-normal);
  font-weight: var(--wa-font-weight-action);
  text-transform: uppercase;
}

.hero-title {
  margin: 0;
  max-inline-size: 13ch;
  color: var(--wa-color-neutral-on-loud);
  line-height: 1;
}

.hero-title__grade {
  color: var(--wa-color-success-fill-loud);
}

.hero-lead {
  margin: 0;
  max-inline-size: 64ch;
  color: var(--wa-color-neutral-80);
  line-height: 1.7;
}

.hero-proof {
  max-inline-size: 66ch;
  padding-block-start: var(--wa-space-m);
  color: var(--wa-color-neutral-80);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-30);
}

.hero-proof wa-icon {
  color: var(--wa-color-success-fill-normal);
}

wa-button.hero-secondary-action::part(base) {
  background-color: var(--sg-color-deep-slate);
  border-color: var(--wa-color-success-fill-normal);
  color: var(--wa-color-success-fill-normal);
}

.lead {
  margin: 0;
  max-inline-size: 66ch;
  color: var(--wa-color-text-quiet);
  line-height: 1.7;
}

.site-section {
  padding-block: var(--wa-space-4xl);
  padding-inline: var(--wa-space-xl);
  background: var(--wa-color-surface-default);
}

.site-section--tint {
  background: var(--wa-color-surface-lowered);
  border-block: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.kicker {
  color: var(--wa-color-brand-border-loud);
  font-weight: var(--wa-font-weight-action);
  text-transform: uppercase;
}

.icon-badge {
  inline-size: var(--wa-space-2xl);
  block-size: var(--wa-space-2xl);
  border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font-size: var(--wa-font-size-l);
}

.feature-grid {
  --min-column-size: 28ch;
}

.value-point {
  padding-block-start: var(--wa-space-l);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.report-preview {
  overflow: clip;
}

.score-ring-grid {
  --min-column-size: 16ch;
}

.score-ring {
  --size: calc(var(--wa-space-5xl) * 1.35);
  --track-width: var(--wa-border-width-l);
  --indicator-width: var(--wa-border-width-l);
  --track-color: var(--wa-color-neutral-fill-normal);
}

.score-ring--empty {
  --indicator-color: var(--wa-color-neutral-border-normal);
}

.score-ring--low {
  --indicator-color: var(--wa-color-neutral-30);
}

.score-ring--high {
  --indicator-color: var(--wa-color-success-fill-loud);
}

.score-ring span {
  color: var(--wa-color-text-normal);
  font-weight: var(--wa-font-weight-heading);
}

.score-ring-item h4 {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.report-detail-grid {
  --min-column-size: 30ch;
}

.process-grid {
  --min-column-size: 24ch;
}

.report-photo {
  overflow: clip;
  aspect-ratio: 16 / 10;
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
}

.report-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.workflow-step {
  padding-block-start: var(--wa-space-xl);
  border-block-start: var(--wa-border-width-m) solid var(--wa-color-success-border-normal);
}

.workflow-step wa-icon {
  color: var(--wa-color-success-border-loud);
  font-size: var(--wa-font-size-xl);
}

.step-index {
  color: var(--wa-color-neutral-30);
}

.access-proof {
  padding-block-start: var(--wa-space-m);
  color: var(--wa-color-text-quiet);
}

.access-proof strong {
  color: var(--wa-color-brand-border-loud);
  font-size: var(--wa-font-size-xl);
}

.insight-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.insight-list wa-icon {
  color: var(--wa-color-brand-border-loud);
}

.cta-band {
  padding-block: var(--wa-space-4xl);
  padding-inline: var(--wa-space-xl);
  background: var(--sg-color-deep-slate);
  color: var(--wa-color-neutral-on-loud);
  border-block-start: var(--wa-border-width-l) solid var(--wa-color-success-fill-loud);
}

.cta-band .lead {
  color: var(--wa-color-neutral-80);
}

.footer {
  padding-block: var(--wa-space-xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-80);
  background: var(--wa-color-neutral-10);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-30);
}

.footer a {
  color: var(--wa-color-neutral-95);
}

wa-page[view='mobile'] .site-header {
  padding-inline: var(--wa-space-m);
}

wa-page[view='mobile'] .site-header-actions {
  gap: var(--wa-space-xs);
}

wa-page[view='mobile'] .brand-logo {
  inline-size: min(calc(var(--wa-space-5xl) * 2.4), 58vw);
}

wa-page[view='mobile'] .hero {
  min-block-size: auto;
  padding-block: var(--wa-space-2xl);
  padding-inline: var(--wa-space-m);
  background-position: 58% center;
}

wa-page[view='mobile'] .hero-layout {
  min-block-size: auto;
}

wa-page[view='mobile'] .hero-title {
  font-size: var(--wa-font-size-2xl);
}

wa-page[view='mobile'] .hero-lead {
  font-size: var(--wa-font-size-m);
  line-height: 1.6;
}

wa-page[view='mobile'] .hero-proof {
  font-size: var(--wa-font-size-s);
}

wa-page[view='mobile'] .site-section,
wa-page[view='mobile'] .cta-band {
  padding-inline: var(--wa-space-m);
}