/* Self-hosted Inter (4 weights, latin only) */
    @font-face {
      font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
      src: url('/fonts/inter-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
      src: url('/fonts/inter-500.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
      src: url('/fonts/inter-600.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
      src: url('/fonts/inter-700.woff2') format('woff2');
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #333; line-height: 1.6;
    }
    section { scroll-margin-top: 80px; }

    /* NAV */
    nav {
      position: fixed; top: 0; width: 100%; z-index: 1000;
      background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .nav-container {
      max-width: 1100px; margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between; height: 64px;
    }
    .nav-brand {
      display: inline-flex; align-items: center;
      font-weight: 700; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.02em;
    }
    .nav-brand-mark {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; background: #16A34A;
      border-radius: 7px; margin-right: 10px;
    }
    .nav-brand-mark svg { width: 18px; height: 18px; }
    .nav-brand-clear { color: #0F172A; }
    .nav-brand-space { color: #16A34A; }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a {
      color: #4B5563; text-decoration: none; font-size: 0.9rem; font-weight: 500;
      transition: color 0.2s; position: relative;
    }
    .nav-links a:hover { color: #0F172A; }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
      background: #16A34A; transition: width 0.3s;
    }
    .nav-links a:hover::after { width: 100%; }
    .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
    .nav-toggle span { display: block; width: 24px; height: 2px; background: #0F172A; margin: 5px 0; transition: transform 0.3s, opacity 0.3s; }

    @media (max-width: 768px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none; flex-direction: column; position: absolute; top: 64px; left: 0;
        width: 100%; background: rgba(255,255,255,0.98); padding: 16px 24px 24px; gap: 16px;
        border-top: 1px solid rgba(0,0,0,0.06);
      }
      .nav-links.open { display: flex; }
    }

    /* HERO */
    .hero {
      background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 60%, #ECFDF5 100%);
      color: #0F172A; text-align: center; padding: 140px 24px 100px;
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; top: -40%; right: -20%; width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(22,163,74,0.10) 0%, transparent 70%);
      border-radius: 50%; pointer-events: none;
    }
    .hero::after {
      content: ''; position: absolute; bottom: -50%; left: -20%; width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(22,163,74,0.06) 0%, transparent 70%);
      border-radius: 50%; pointer-events: none;
    }
    .hero > * { position: relative; z-index: 1; }
    .hero h1 {
      font-size: 3.25rem; font-weight: 700; margin-bottom: 18px; line-height: 1.05;
      letter-spacing: -0.03em; color: #0F172A;
    }
    .hero .subtitle { font-size: 0.85rem; font-weight: 600; margin-bottom: 24px; color: #16A34A; letter-spacing: 0.12em; text-transform: uppercase; }
    .hero .tagline { max-width: 620px; margin: 0 auto 40px; font-size: 1.15rem; color: #475569; line-height: 1.7; }
    .btn-primary {
      display: inline-block; background: #16A34A; color: #fff; padding: 16px 36px;
      border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem;
      border: none; cursor: pointer; font-family: inherit;
      transition: transform 0.2s, box-shadow 0.2s; position: relative;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.25); }
    .btn-outline {
      display: inline-block; background: transparent; color: #16A34A; padding: 14px 32px;
      border-radius: 8px; border: 2px solid #16A34A; text-decoration: none;
      font-weight: 600; font-size: 1rem; transition: background 0.2s, color 0.2s;
    }
    .btn-outline:hover { background: #16A34A; color: #fff; }

    /* SECTIONS */
    .section { padding: 100px 24px; }
    .section--gray { background: #FAFAFA; }
    .section--white { background: #fff; }
    .container { max-width: 1100px; margin: 0 auto; }
    .section-heading {
      font-size: 2.2rem; font-weight: 700; text-align: center; margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .section-subtext { text-align: center; color: #888; max-width: 540px; margin: 0 auto 56px; font-size: 1rem; }
    .section-intro {
      text-align: center; color: #475569; max-width: 720px; margin: 0 auto 56px;
      font-size: 1.05rem; line-height: 1.7;
    }
    .section-intro strong { color: #0F172A; font-weight: 600; }

    /* FADE IN ANIMATION */
    .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }
    .fade-in:nth-child(2) { transition-delay: 0.1s; }
    .fade-in:nth-child(3) { transition-delay: 0.2s; }
    .fade-in:nth-child(4) { transition-delay: 0.3s; }

    /* SERVICE CARDS - EXPANDABLE (4 tiers, 2x2 grid) */
    .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    @media (max-width: 768px) { .cards { grid-template-columns: 1fr; } }

    .service-card {
      background: #fff; border: 1px solid #E8E8E8; border-radius: 12px;
      padding: 32px 28px; cursor: pointer; position: relative;
      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }
    .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); border-color: #16A34A; }
    .eyebrow {
      font-size: 1.05rem; font-weight: 700; letter-spacing: -0.4px;
      color: #16A34A; margin-bottom: 14px; display: block;
    }
    .eyebrow strong { color: #0F172A; font-weight: 700; }
    .service-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
    .service-card .card-desc { color: #666; font-size: 0.95rem; margin-bottom: 12px; line-height: 1.6; }
    .service-card .card-price {
      font-size: 0.9rem; font-weight: 600; color: #16A34A; margin-bottom: 16px;
    }
    .service-card .expand-hint {
      font-size: 0.8rem; color: #999; display: flex; align-items: center; gap: 6px;
      transition: color 0.2s;
    }
    .service-card:hover .expand-hint { color: #16A34A; }
    .expand-hint .arrow {
      display: inline-block; transition: transform 0.3s; font-size: 1rem;
    }
    .service-card.expanded .expand-hint .arrow { transform: rotate(180deg); }
    .service-card .card-details {
      max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-top 0.3s ease, opacity 0.3s ease;
      opacity: 0; margin-top: 0;
    }
    .service-card.expanded .card-details { max-height: 600px; margin-top: 20px; opacity: 1; }
    .card-details ul { list-style: none; padding: 0; border-top: 1px solid #eee; padding-top: 16px; }
    .card-details ul li {
      position: relative; padding: 8px 0 8px 24px; font-size: 0.9rem; color: #444;
    }
    .card-details ul li::before {
      content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 16px; height: 16px; border-radius: 50%; background: rgba(22,163,74,0.1);
      display: flex; align-items: center; justify-content: center;
    }
    .card-details ul li::after {
      content: "\2713"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
      color: #16A34A; font-size: 0.7rem; font-weight: 700;
    }
    .card-details .card-note {
      margin-top: 14px; font-size: 0.85rem; color: #999; font-style: italic;
    }
    .card-details .card-cta {
      margin-top: 20px; display: inline-flex; color: #16A34A; font-weight: 600;
      font-size: 0.9rem; text-decoration: none; align-items: center; gap: 6px;
      transition: gap 0.2s;
    }
    .card-details .card-cta:hover { gap: 10px; }

    /* HOW IT WORKS - STEP CARDS */
    .step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
    @media (max-width: 768px) { .step-cards { grid-template-columns: 1fr; } }
    .step-card {
      background: #fff; border: 1px solid #E8E8E8; border-radius: 12px;
      padding: 36px 28px; text-align: center; position: relative;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
    .step-number {
      width: 48px; height: 48px; border-radius: 50%; background: #16A34A; color: #fff;
      display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
      font-size: 1.2rem; font-weight: 700;
    }
    .step-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
    .step-card p { color: #666; font-size: 0.95rem; line-height: 1.6; }

    #our-commitment .step-cards {
      grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto;
    }
    @media (max-width: 768px) {
      #our-commitment .step-cards { grid-template-columns: 1fr; }
    }

    /* QUOTE CALCULATOR + BOOKING */
    .quote-card {
      max-width: 600px; margin: 0 auto; background: #fff;
      border: 1px solid #E5E7EB; border-radius: 16px; padding: 44px 40px;
      box-shadow: 0 12px 48px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
      position: relative; overflow: hidden;
    }
    .quote-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, #16A34A 0%, #22C55E 100%);
    }
    .form-row { margin-bottom: 20px; }
    .form-row label {
      display: block; font-size: 0.9rem; font-weight: 600; color: #444;
      margin-bottom: 6px;
    }
    .form-row input, .form-row select, .form-row textarea {
      width: 100%; padding: 12px 16px; border: 1px solid #E8E8E8; border-radius: 8px;
      font-size: 1rem; font-family: inherit; background: #fff; color: #333;
      transition: border-color 0.2s;
    }
    .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
      outline: none; border-color: #16A34A;
    }
    .form-row textarea { resize: vertical; min-height: 60px; }
    .quote-card > button {
      width: 100%;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    }
    .quote-card > button[disabled] { opacity: 0.85; cursor: not-allowed; }

    /* All-in pricing banner shown above the quote calculator */
    .all-in-banner {
      max-width: 600px; margin: 0 auto 24px;
      background: #F0FDF4; border: 1px solid #16A34A;
      border-radius: 10px; padding: 14px 18px;
      font-size: 0.95rem; color: #166534; line-height: 1.55;
    }
    .all-in-banner strong { color: #14532D; }
    .all-in-banner-check {
      display: inline-block; width: 22px; height: 22px;
      background: #16A34A; color: #fff;
      border-radius: 50%; text-align: center; line-height: 22px;
      font-size: 0.85rem; margin-right: 8px; vertical-align: middle;
    }

    /* Spinner that replaces the "Get My Quote" button label briefly */
    @keyframes csSpin { to { transform: rotate(360deg); } }
    .btn-spinner {
      display: inline-block; width: 16px; height: 16px;
      border: 2px solid rgba(255,255,255,0.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: csSpin 0.65s linear infinite;
    }
    .btn-spinner[hidden] { display: none; }

    .quote-result {
      margin-top: 32px; padding-top: 32px; border-top: 1px solid #F0F0F0;
      text-align: center;
    }
    .result-label {
      font-size: 0.75rem; font-weight: 600; color: #999; text-transform: uppercase;
      letter-spacing: 0.1em; margin-bottom: 8px;
    }
    .result-amount {
      font-size: 3rem; font-weight: 700; color: #16A34A; margin-bottom: 8px;
      letter-spacing: -0.02em;
    }
    .result-detail { color: #666; font-size: 0.95rem; margin-bottom: 16px; line-height: 1.5; }

    /* All-in price callout shown alongside the calculated quote */
    .result-all-in {
      background: #F0FDF4; border-left: 3px solid #16A34A;
      padding: 12px 16px; margin: 0 auto 20px; max-width: 480px;
      font-size: 0.9rem; color: #166534; line-height: 1.55;
      text-align: left; border-radius: 6px;
    }
    .result-all-in strong { color: #14532D; }

    .result-meta { color: #999; font-size: 0.85rem; margin-bottom: 24px; }
    .quote-result button { display: inline-block; }

    .booking-wrapper {
      max-width: 600px; margin: 48px auto 0; background: #fff;
      border: 1px solid #E8E8E8; border-radius: 12px; padding: 40px;
      scroll-margin-top: 80px;
    }
    .booking-wrapper h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; }
    .booking-note {
      color: #666; font-size: 0.95rem; line-height: 1.6; margin-bottom: 28px;
      padding-bottom: 20px; border-bottom: 1px solid #F0F0F0;
    }
    .booking-wrapper button { width: 100%; margin-top: 8px; }

    /* Quote summary banner inside the booking form — travels with the form
       so the customer sees their price reinforced while filling it out. */
    .quote-summary {
      background: #F0FDF4; border: 1px solid #16A34A;
      border-radius: 8px; padding: 14px 18px; margin-bottom: 28px;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 8px;
    }
    .quote-summary-label {
      font-size: 0.78rem; color: #14532D; text-transform: uppercase;
      letter-spacing: 0.08em; font-weight: 600;
    }
    .quote-summary-amount { font-size: 1.5rem; font-weight: 700; color: #16A34A; }
    .quote-summary-detail { width: 100%; font-size: 0.9rem; color: #14532D; }

    /* Section headers — chunk the form into visible groups without page transitions. */
    .section-header {
      font-size: 1rem; font-weight: 700; color: #1A1A1A;
      margin: 32px 0 18px; padding-top: 24px;
      border-top: 1px solid #EDEDED;
    }
    .section-header.first { margin-top: 0; padding-top: 0; border-top: none; }
    .section-header .section-meta {
      font-size: 0.82rem; color: #888; font-weight: 400; margin-left: 8px;
    }

    /* Required/optional inline markers inside labels. */
    .form-row label .req { color: #16A34A; }
    .form-row label .optional {
      font-weight: 400; color: #888; font-size: 0.85rem; margin-left: 4px;
    }

    /* Durham-only badge next to the address label. */
    .durham-hint {
      display: inline-block; font-size: 0.78rem; color: #888;
      background: #F5F5F0; padding: 2px 8px; border-radius: 4px;
      margin-left: 6px; font-weight: 400; vertical-align: middle;
    }

    /* Date + optional time picker row. */
    .dt-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px;
    }
    .dt-cell { display: flex; flex-direction: column; gap: 4px; }
    .dt-sublabel {
      font-size: 0.82rem; color: #555; font-weight: 500;
    }
    .dt-sublabel .req { color: #16A34A; }
    .dt-sublabel .optional { color: #888; font-weight: 400; }

    /* Field hint text under inputs. */
    .field-hint {
      font-size: 0.82rem; color: #888; margin: 6px 0 0; line-height: 1.4;
    }

    /* Inline validation errors (Durham ZIP, deadline floor, etc.) */
    .error-msg {
      margin-top: 8px; padding: 10px 14px;
      background: #FEF2F2; border-left: 3px solid #DC2626;
      color: #991B1B; font-size: 0.88rem; line-height: 1.45;
      border-radius: 4px;
    }
    .error-msg[hidden] { display: none; }
    .form-row input.invalid, .form-row textarea.invalid {
      border-color: #DC2626; background: #FFFBFB;
    }

    @media (max-width: 480px) {
      .dt-grid { grid-template-columns: 1fr; }
    }

    .thanks-block {
      max-width: 600px; margin: 0 auto; background: #fff;
      border: 1px solid #E8E8E8; border-radius: 12px; padding: 40px;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.04);
      scroll-margin-top: 80px;
    }
    .thanks-block h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 16px; color: #16A34A; letter-spacing: -0.01em; }
    .thanks-block p { color: #666; line-height: 1.7; margin-bottom: 12px; }
    .thanks-block a:not(.btn-primary) { color: #16A34A; text-decoration: none; font-weight: 600; }
    .thanks-block a:not(.btn-primary):hover { text-decoration: underline; }
    .thanks-block .btn-primary { margin-top: 20px; }

    /* WHY CLEARSPACE */
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }
    .two-col p { color: #555; line-height: 1.8; font-size: 1.05rem; }
    .value-list { list-style: none; padding: 0; }
    .value-list li {
      padding: 14px 0 14px 36px; position: relative; font-size: 1rem;
      border-bottom: 1px solid #F0F0F0; transition: padding-left 0.2s;
    }
    .value-list li:hover { padding-left: 40px; }
    .value-list li:last-child { border-bottom: none; }
    .value-list li::before {
      content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 24px; height: 24px; border-radius: 50%; background: rgba(22,163,74,0.08);
    }
    .value-list li::after {
      content: "\2713"; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
      color: #16A34A; font-weight: 700; font-size: 0.8rem;
    }
    .two-col .btn-primary { margin-top: 32px; }

    /* CONTACT */
    .contact-items { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-bottom: 48px; }
    .contact-item { text-align: center; flex: 1; max-width: 250px; }
    .contact-item .label {
      font-weight: 600; font-size: 0.75rem; color: #999; text-transform: uppercase;
      letter-spacing: 0.1em; margin-bottom: 8px;
    }
    .contact-item .value { font-size: 1.05rem; color: #333; }
    .contact-item a { color: #16A34A; text-decoration: none; transition: color 0.2s; }
    .contact-item a:hover { color: #15803D; }
    .contact-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

    /* TRUST BAND */
    .trust-band {
      background: #fff; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;
      padding: 24px; text-align: center;
    }
    .trust-band p {
      color: #6B7280; font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1.6;
    }
    .trust-band strong { color: #0F172A; font-weight: 600; }
    .trust-band .sep { color: #D1D5DB; margin: 0 10px; }

    /* FOOTER */
    footer { background: #F9FAFB; padding: 40px 24px; text-align: center; }
    .footer-copy { color: #6B7280; font-size: 0.85rem; margin-bottom: 16px; }
    .footer-links { list-style: none; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
    .footer-links a { color: #6B7280; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
    .footer-links a:hover { color: #16A34A; }

    @media (max-width: 768px) {
      .hero h1 { font-size: 2rem; }
      .hero { padding: 120px 24px 80px; }
      .section-heading { font-size: 1.6rem; }
      .section { padding: 72px 24px; }
      .quote-card, .booking-wrapper, .thanks-block { padding: 28px 24px; }
      .result-amount { font-size: 2.4rem; }
    }

    /* FAQ accordion */
    .faq-list { max-width: 800px; margin: 0 auto; }
    .faq-item {
      background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
      margin-bottom: 12px; padding: 0; transition: border-color 0.2s, box-shadow 0.2s;
    }
    .faq-item[open] { border-color: #16A34A; box-shadow: 0 4px 16px rgba(15,23,42,0.06); }
    .faq-item summary {
      padding: 20px 56px 20px 24px; font-weight: 600; font-size: 1.05rem;
      color: #0F172A; cursor: pointer; list-style: none; position: relative;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+'; position: absolute; right: 24px; top: 50%;
      transform: translateY(-50%); font-size: 1.5rem; color: #16A34A;
      font-weight: 400; line-height: 1;
    }
    .faq-item[open] summary::after { content: '\2212'; }
    .faq-item .faq-answer {
      padding: 0 24px 20px 24px; color: #475569; line-height: 1.7; font-size: 0.98rem;
    }

    /* Booking flow: hide booking form and thanks block by default via CSS rule
       (NOT inline display:none, which would make Netlify treat all form fields
       as hidden when deciding the dashboard listing title). JS shows them at
       the right moment via inline style which overrides this. */
    #cs-booking-wrapper { display: none; }
    #cs-thanks { display: none; }
    #cs-result { display: none; }