/** Site Theme Tokens **/

:root {
    --core-site-font-body: 'Barlow', system-ui, sans-serif;
    --core-site-heading-font: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
    --core-site-heading-line-height: 1.05;
    --core-site-heading-weight: 800;
    --core-site-heading-margin: 0;
    --core-site-color-text: var(--color-charcoal);
    --core-site-color-link: var(--color-green-dark);
    --core-accent: var(--color-green);
    --core-radius: 10px;
}
body { font-family: var(--core-site-font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--core-site-heading-font); }
h1, h2, h3, h4, h5, h6 { line-height: var(--core-site-heading-line-height); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--core-site-heading-weight); }
h1, h2, h3, h4, h5, h6 { margin-block: var(--core-site-heading-margin); }
body { color: var(--core-site-color-text); }
a { color: var(--core-site-color-link); }


/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ---------- Design tokens (Urban Pest & Termite Solutions) ---------- */ :root  {
  /* Brand green */ --color-green: #6cb33f;
  --color-green-light: #8fd35f;
  --color-green-pale: #eef4e8;
  --color-green-dark: #4a8b2c;
  --color-green-darker: #3a6f22;
  /* Charcoal — dark brand neutral */ --color-charcoal: #2b2f33;
  --color-charcoal-dark: #24282b;
  --color-charcoal-darker: #1c1f22;
  /* Warm-neutral surfaces */ --color-paper: #f6f7f4;
  --color-mist: #eef1ea;
  --color-white: #ffffff;
  /* Muted greys for secondary text / borders */ --color-ink-soft: #565c56;
  --color-ink-softer: #767c76;
  --color-muted: #8a908a;
  --color-line: #e4e7e0;
  /* Semantic anchors */ --color-brand: var(--color-green);
  --color-text: var(--color-charcoal);
  --color-bg: #ffffff;
  /* Fonts */ --font-body: 'Barlow', system-ui, sans-serif;
  --font-display: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  /* Core form component tuning */ --core-form-radius: 9px;
  --core-form-field-border: #d7dbd2;
}
/* ---------- Background utilities ---------- */ .bg-green  {
  background-color: var(--color-green);
}
.bg-green-light  {
  background-color: var(--color-green-light);
}
.bg-green-pale  {
  background-color: var(--color-green-pale);
}
.bg-green-dark  {
  background-color: var(--color-green-dark);
}
.bg-charcoal  {
  background-color: var(--color-charcoal);
}
.bg-charcoal-dark  {
  background-color: var(--color-charcoal-dark);
}
.bg-charcoal-darker  {
  background-color: var(--color-charcoal-darker);
}
.bg-paper  {
  background-color: var(--color-paper);
}
.bg-mist  {
  background-color: var(--color-mist);
}
.bg-white  {
  background-color: var(--color-white);
}
/* ---------- Base ---------- */ html  {
  scroll-behavior: smooth;
  /* Buffer for anchor-link scrolls so targets clear the sticky header.
       Sized to the SHRUNK header (~64px logo + 8px×2 padding + border ≈ 82px)
       plus a little breathing room. */ scroll-padding-top: 96px;
}
body  {
  background: var(--color-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
p  {
  margin: 0;
}
a  {
  text-decoration: none;
}
a:hover  {
  color: var(--color-green-darker);
}
img  {
  display: block;
  max-width: 100%;
}
/* ---------- Shared section heading atoms ---------- */ .eyebrow  {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-size-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 12px;
}
.eyebrow-light  {
  color: var(--color-green-light);
}
.section-title  {
  font-size: var(--text-size-7xl);
  letter-spacing: -0.01em;
}
.section-lede  {
  font-size: var(--text-size-lg);
  color: var(--color-ink-soft);
  margin-top: 14px;
}
.section-lede-light  {
  color: #c8ccc7;
}
.section-head  {
  max-width: 720px;
  margin: 0 auto 44px;
}
.section-head.text-center  {
  margin-left: auto;
  margin-right: auto;
}
/* ---------- Buttons ---------- */ .btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-size-sm);
  padding: 14px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.btn-lg  {
  font-size: var(--text-size-lg);
  padding: 16px 28px;
  border-radius: 10px;
}
.btn-block  {
  width: 100%;
  padding: 16px;
  font-size: var(--text-size-lg);
}
.btn-primary  {
  background: var(--color-green);
  color: #fff;
}
.btn-primary:hover  {
  background: #5fa235;
  color: #fff;
}
.btn-dark  {
  background: var(--color-charcoal);
  color: #fff;
  padding: 14px 24px;
  border-radius: 9px;
}
.btn-dark:hover  {
  background: var(--color-charcoal-darker);
  color: #fff;
}
.btn-outline  {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.btn-outline:hover  {
  border-color: #fff;
  color: #fff;
}
/* ---------- Shared card atoms (used across several sections) ---------- */ .card-title  {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-size-lg);
  margin-bottom: 6px;
  line-height: 1.1;
}
.card-title-lg  {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-size-xl);
  margin-bottom: 7px;
  line-height: 1.1;
}
.card-text  {
  font-size: var(--text-size-xs);
  color: var(--color-ink-softer);
  line-height: 1.45;
}
.chip-tick  {
  color: var(--color-green);
}
/* ---------- Shared responsive ---------- */ @media (max-width: 1023px)  {
  .section-title  {
    font-size: var(--text-size-6xl);
  }
}
@media (max-width: 639px)  {
  .section-title  {
    font-size: var(--text-size-5xl);
  }
}


 /** Content Section Styles **/ 

.content-section-2570  {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(255,255,255,0.96);
  &.content-section  {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-line);
    transition: padding 0.22s ease, box-shadow 0.22s ease;
  }
  /* Frosted glass on a ::before layer — backdrop-filter on the wrapper itself would
   trap the mobile menu's fixed overlay inside the header bar. */ &.content-section::before  {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
  }
  /* Shrunk state — applied once the page scrolls a little. The vertical padding
   comes down from 12px to 8px and the logo shrinks; scroll-padding-top (set
   site-wide) is sized to this shrunk height so anchor targets land cleanly. */ &.content-section.is-shrunk  {
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  }
  .content-section-inner  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .logo img  {
    height: 66px;
    width: auto;
    transition: height 0.22s ease;
  }
  &.content-section.is-shrunk .logo img  {
    height: 50px;
  }
  .core-menu-link  {
    font-weight: 600;
  }
  .header-actions  {
    gap: 20px;
  }
  .header-phone  {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-charcoal);
  }
  .header-phone-icon  {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-green-pale);
    color: var(--color-green-dark);
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: width 0.22s ease, height 0.22s ease;
  }
  &.content-section.is-shrunk .header-phone-icon  {
    width: 34px;
    height: 34px;
  }
  .header-phone-text  {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .header-phone-label  {
    font-size: var(--text-size-4xs);
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .header-phone-number  {
    font-family: var(--font-display);
    font-size: var(--text-size-xl);
    font-weight: 700;
  }
  @media (max-width: 1023px)  {
    /* Menu collapses at 1024px (mobile_breakpoint default). Re-order the header so
   the hamburger sits hard right, with the phone + CTA grouped just to its left. */ .content-section-inner  {
      gap: 14px;
    }
    .logo  {
      order: 1;
      margin-right: auto;
    }
    /* Phone + CTA group hugs the right, sitting directly left of the burger. The
   logo's margin-right:auto absorbs the free space, so this group no longer
   gets centred by competing auto-margins. */ .header-actions  {
      order: 2;
      gap: 14px;
    }
    .core-menu  {
      order: 3;
    }
    /* Trim the CTA a touch so logo + phone + CTA + burger fit the bar. */ .header-actions .btn  {
      padding: 12px 18px;
    }
  }
  @media (max-width: 767px)  {
    /* Hide the whole phone element (icon + number) together — the icon on its own
   isn't a meaningful affordance without the number beside it. The mobile menu
   carries a Call CTA at this width. */ .header-phone  {
      display: none;
    }
    .header-actions .btn  {
      padding: 11px 16px;
      font-size: var(--text-size-xs);
    }
  }
  @media (max-width: 639px)  {
    .header-phone  {
      display: none;
    }
    .logo img  {
      height: 46px;
    }
    &.content-section.is-shrunk .logo img  {
      height: 42px;
    }
    /* Hide the full-quote CTA on the smallest screens — the phone tap-target and the
   hamburger menu (which carries a Book CTA) cover the action here. */ .header-actions .btn  {
      display: none;
    }
    .header-actions  {
      gap: 10px;
    }
  }
}
.content-section-2571  {
  padding-top: 44px;
  padding-bottom: 44px;
  &.content-section  {
    color: #9aa09a;
  }
  .content-section-inner  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
  }
  .footer-brand  {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .footer-logo  {
    display: inline-flex;
    background: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    width: fit-content;
  }
  .footer-logo img  {
    height: 44px;
    width: auto;
  }
  .footer-about  {
    font-size: var(--text-size-2xs);
    max-width: 420px;
    line-height: 1.5;
  }
  .footer-contact  {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--text-size-xs);
  }
  .footer-phone  {
    color: #dfe2dc;
    font-weight: 600;
    font-family: var(--font-display);
    font-size: var(--text-size-xl);
  }
  .footer-phone:hover  {
    color: var(--color-green-light);
  }
}
.content-section-2572  {
  padding-top: 16px;
  padding-bottom: 16px;
  &.content-section  {
    border-top: 1px solid var(--color-charcoal);
    color: #6a706a;
    font-size: var(--text-size-3xs);
  }
  .content-section-inner  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 16px;
  }
  a  {
    color: var(--color-green-light);
    font-weight: 600;
  }
  a:hover  {
    color: #a6d97a;
  }
  .footer-bar-dot  {
    color: #3a3f43;
  }
}
.content-section-2573  {
  &.content-section  {
    color: #fff;
    overflow: hidden;
  }
  .content-section-inner  {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .hero-badge  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(108,179,63,0.16);
    border: 1px solid rgba(108,179,63,0.4);
    color: #a6d97a;
    font-weight: 600;
    font-size: var(--text-size-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
  }
  .hero-title  {
    font-size: var(--text-size-13xl);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
  }
  .hero-lede  {
    font-size: var(--text-size-xl);
    line-height: 1.5;
    color: #c8ccc7;
    max-width: 540px;
    margin-bottom: 30px;
  }
  .hero-actions  {
    margin-bottom: 26px;
  }
  .hero-guarantee  {
    display: inline-flex;
    gap: 13px;
    background: rgba(108,179,63,0.14);
    border: 1px solid rgba(108,179,63,0.45);
    border-radius: 12px;
    padding: 12px 18px;
  }
  .hero-guarantee-icon  {
    flex: none;
    display: inline-flex;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--color-green);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 19px;
  }
  .hero-guarantee-text  {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-lg);
    color: #fff;
  }
  .hero-media  {
    position: relative;
  }
  .hero-photo  {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
  }
  .hero-photo img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-sticker  {
    position: absolute;
    top: 70px;
    left: -18px;
    background: var(--color-green);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-3xl);
    line-height: 1;
    padding: 15px 24px;
    border-radius: 12px;
    transform: rotate(-4deg);
    z-index: 2;
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .hero-title  {
      font-size: var(--text-size-11xl);
    }
    .hero-sticker  {
      top: auto;
      bottom: 16px;
    }
  }
  @media (max-width: 767px)  {
    /* Full-width, stacked hero CTAs on phones */ .hero-actions  {
      width: 100%;
    }
    .hero-actions .btn  {
      width: 100%;
    }
    .hero-lede  {
      font-size: var(--text-size-lg);
    }
  }
  @media (max-width: 639px)  {
    .hero-title  {
      font-size: var(--text-size-9xl);
    }
    .hero-guarantee  {
      width: 100%;
    }
    .hero-sticker  {
      font-size: var(--text-size-2xl);
      padding: 12px 18px;
    }
  }
}
.content-section-2574  {
  .content-section-inner  {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
  .trust-item  {
    gap: 13px;
  }
  .trust-icon  {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--color-green-pale);
    color: var(--color-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .trust-text  {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .trust-title  {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-size-reg);
    color: var(--color-charcoal);
  }
  .trust-sub  {
    font-size: var(--text-size-2xs);
    color: var(--color-ink-softer);
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 639px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2575  {
  .reviews-grid  {
    gap: 20px;
    align-items: start;
  }
  .review-card  {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .review-stars  {
    color: #f4a825;
    font-size: var(--text-size-lg);
    letter-spacing: 2px;
  }
  .review-source  {
    font-family: ui-monospace, monospace;
    font-size: var(--text-size-5xs);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .review-source-icon  {
    color: var(--color-green-dark);
  }
  .review-quote  {
    font-size: var(--text-size-sm);
    color: #3d4247;
    line-height: 1.5;
    font-style: italic;
  }
  .review-name  {
    margin-top: auto;
    font-weight: 700;
    font-size: var(--text-size-xs);
    color: var(--color-charcoal);
    font-family: var(--font-display);
  }
  @media (max-width: 1023px)  {
    .reviews-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2576  {
  &.content-section  {
    border-top: 1px solid #e2ecd9;
    border-bottom: 1px solid #e2ecd9;
  }
  .bird-intro  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 44px;
  }
  .bird-text  {
    font-size: var(--text-size-lg);
    color: var(--color-ink-soft);
  }
  .bird-text + .bird-text  {
    margin-top: 18px;
  }
  .bird-media  {
    position: relative;
    aspect-ratio: 5 / 4;
  }
  .bird-photo  {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dfe2da;
  }
  .bird-photo img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bird-sticker  {
    position: absolute;
    top: -22px;
    right: -22px;
    background: var(--color-green);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-4xl);
    line-height: 1;
    text-transform: uppercase;
    padding: 16px 26px;
    border-radius: 12px;
    transform: rotate(-4deg);
    z-index: 2;
  }
  .bird-grid  {
    gap: 16px;
  }
  .bird-card  {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px 18px;
    transition: border-color 0.15s ease;
  }
  .bird-card:hover  {
    border-color: var(--color-green);
  }
  .card-icon-light  {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--color-green-pale);
    color: var(--color-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
  }
  @media (max-width: 1023px)  {
    .bird-intro  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .bird-grid  {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 639px)  {
    .bird-grid  {
      grid-template-columns: 1fr;
    }
    .bird-sticker  {
      font-size: var(--text-size-2xl);
      top: -16px;
      right: -8px;
    }
  }
}
.content-section-2577  {
  .service-grid  {
    gap: 18px;
    margin-bottom: 30px;
  }
  .service-card  {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 26px 22px;
    transition: border-color 0.15s ease;
  }
  .service-card:hover  {
    border-color: var(--color-green);
  }
  .service-icon  {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .chip-row  {
    gap: 10px;
  }
  .chip  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 100px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: var(--text-size-sm);
    color: #3d4247;
  }
  @media (max-width: 1023px)  {
    .service-grid  {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 639px)  {
    .service-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2578  {
  &.content-section  {
    color: #fff;
  }
  .prevention-grid  {
    gap: 20px;
  }
  .prevention-card  {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 30px 26px;
  }
  .prevention-stat  {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-6xl);
    color: var(--color-green-light);
    line-height: 1;
    margin-bottom: 12px;
  }
  .prevention-title  {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-size-2xl);
    margin-bottom: 8px;
  }
  .prevention-text  {
    font-size: var(--text-size-sm);
    color: #c8ccc7;
    line-height: 1.5;
  }
  @media (max-width: 1023px)  {
    .prevention-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2579  {
  .content-section-inner  {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
  }
  .why-text  {
    font-size: var(--text-size-lg);
    color: var(--color-ink-soft);
    margin: 16px 0 24px;
  }
  .why-cards  {
    gap: 16px;
  }
  .why-card  {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 24px;
  }
  .why-stat  {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-5xl);
    color: var(--color-green);
    line-height: 1;
    margin-bottom: 10px;
  }
  .why-card-title  {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-size-lg);
    margin-bottom: 6px;
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
  @media (max-width: 767px)  {
    .why-copy  {
      text-align: center;
    }
    .why-copy .btn-dark  {
      width: 100%;
    }
  }
  @media (max-width: 639px)  {
    .why-cards  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2580  {
  .content-section-inner  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .realestate-text  {
    font-size: var(--text-size-lg);
    color: var(--color-ink-soft);
    margin-top: 16px;
  }
  .realestate-cards  {
    gap: 14px;
  }
  .re-card  {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px;
  }
  .re-card-title  {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-size-lg);
    margin-bottom: 6px;
    color: var(--color-charcoal);
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
  @media (max-width: 639px)  {
    .realestate-cards  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2581  {
  &.content-section  {
    color: #fff;
  }
  .content-section-inner  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .service-area-text  {
    font-size: var(--text-size-lg);
    color: #c8ccc7;
    margin: 16px 0 26px;
  }
  .area-tags  {
    gap: 9px;
  }
  .area-tag  {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    padding: 8px 15px;
    font-size: var(--text-size-xs);
    font-weight: 500;
    color: #dfe2dc;
  }
  .area-map  {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
  }
  .area-map img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
}
.content-section-2582  {
  .content-section-inner  {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 56px;
    align-items: start;
  }
  .quote-lede  {
    font-size: var(--text-size-lg);
    color: var(--color-ink-soft);
    margin: 16px 0 30px;
  }
  .contact-list  {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .contact-row  {
    gap: 14px;
    color: var(--color-charcoal);
  }
  a.contact-row:hover  {
    color: var(--color-green-dark);
  }
  .contact-icon  {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .contact-icon-green  {
    background: var(--color-green);
    color: #fff;
  }
  .contact-icon-dark  {
    background: var(--color-charcoal);
    color: var(--color-green-light);
  }
  .contact-icon-green-dark  {
    background: var(--color-green-dark);
    color: #fff;
  }
  .contact-text  {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .contact-label  {
    font-size: var(--text-size-2xs);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .contact-value  {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-size-xl);
  }
  .quote-form-card  {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 34px;
  }
  .quote-form-title  {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-3xl);
    margin-bottom: 4px;
  }
  .quote-form-sub  {
    font-size: var(--text-size-xs);
    color: var(--color-muted);
    margin-bottom: 20px;
  }
  .quote-form label  {
    font-size: var(--text-size-2xs);
    font-weight: 600;
    color: #3d4247;
  }
  .quote-form-fine  {
    text-align: center;
    font-size: var(--text-size-3xs);
    color: #9aa09a;
    margin-top: 12px;
  }
  .w-form-fail  {
    text-align: center;
    color: #c0392b;
    padding: 12px 0;
  }
  .quote-thanks  {
    text-align: center;
    padding: 36px 10px;
  }
  .quote-thanks-icon  {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-green-pale);
    color: var(--color-green-dark);
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
  }
  .quote-thanks-title  {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-size-4xl);
    margin-bottom: 10px;
  }
  .quote-thanks-text  {
    font-size: var(--text-size-reg);
    color: var(--color-ink-soft);
    max-width: 340px;
    margin: 0 auto;
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
  @media (max-width: 639px)  {
    .quote-form-card  {
      padding: 24px;
    }
  }
}