@import url("fonts.css");

/* EGPZ Clean — green, white and a little lemon.
   The original layout and print styles live in styles.css.
   Logo filters preserve the original artwork and transparency. */
@media screen {
  :root {
    --page-green: #087d76;
    --panel-green: #066b65;
    --field-green: #075e59;
    --hover-green: #09534f;
    --text-white: #ffffff;
    --text-soft: #effaf5;
    --white-line: rgba(255, 255, 255, .28);
    color-scheme: dark;
    color: var(--text-white);
    background: var(--page-green);
  }

  body, .site-header { background: var(--page-green); }
  .site-header { border-color: var(--white-line); }
  .brand img, .brand-illustration img { filter: brightness(0) invert(1); }
  :focus-visible { outline-color: white; }
  .estimator :focus-visible, .site-footer :focus-visible { outline-color: white; }
  ::selection { background: white; color: var(--field-green); }
  .skip-link { background: white; color: var(--field-green); }

  .main-nav .nav-contact { border-color: rgba(255, 255, 255, .75); }
  .main-nav .nav-contact:hover { background: rgba(255, 255, 255, .12); }
  .location-dot { background: white; }
  .hero h1 span { color: white; }
  .trust-row li { background: rgba(255, 255, 255, .08); border-color: var(--white-line); }
  .trust-row svg, .contact-location svg { color: white; }

  .button-outline { color: white; border-color: rgba(255, 255, 255, .75); }
  .button-outline:hover { background: rgba(255, 255, 255, .12); }
  .button-lemon, .button-teal { background: white; color: var(--field-green); }
  .button-lemon:hover:not(:disabled), .button-teal:hover:not(:disabled) { background: #e0f1eb; }

  .estimator {
    background: var(--panel-green);
    border: 1px solid var(--white-line);
    box-shadow: 0 10px 0 rgba(0, 47, 43, .16);
  }
  .small-leaf { color: white; }
  .room-row { background: var(--field-green); color: white; border: 1px solid var(--white-line); }
  .room-count button:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
  .room-count :focus-visible { outline-color: white; }
  .area-note, .area-inclusions, .estimate-breakdown p { color: var(--text-soft); }
  .provisional-label span { border-color: rgba(255, 255, 255, .7); }
  .estimate-result { border-color: var(--white-line); }

  .benefit-icon { background: rgba(255, 255, 255, .1); color: white; border: 1px solid var(--white-line); }
  .approach-section { background: var(--panel-green); }
  .approach-intro > p:not(.eyebrow), .approach-list p, .steps p,
  .contact-note p, .required-note, .form-privacy { color: var(--text-soft); }
  .brand-illustration, .approach-list article, .steps li, .contact-note { border-color: var(--white-line); }
  .item-number { color: white; }
  .step-number { background: rgba(255, 255, 255, .1); color: white; border: 1px solid var(--white-line); }

  .contact-section { background: var(--panel-green); border-color: var(--white-line); }
  .enquiry-form { background: var(--page-green); border-color: var(--white-line); }
  .field input, .field select, .field textarea {
    background: var(--field-green);
    color: white;
    border-color: rgba(255, 255, 255, .5);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--text-soft); }
  .field select option { background: var(--field-green); color: white; }
  .field input:autofill { background: var(--field-green); color: white; }
  .field input:-webkit-autofill {
    -webkit-text-fill-color: white;
    box-shadow: 0 0 0 1000px var(--field-green) inset;
    caret-color: white;
  }
  .form-privacy a:hover { color: white; }
  .form-status { color: white; }
  .form-status[data-state="error"] { color: #ffe2dc; }
  .estimate-summary { background: var(--field-green); color: white; border-left-color: white; }

  .site-footer { background: var(--field-green); color: white; border-top: 1px solid var(--white-line); }
  .footer-brand { color: white; }
  .site-footer p, .footer-detail { color: var(--text-soft); }
}

/* Warm, rounded details inspired by the original house-and-leaf mark. */
@media screen {
  :root {
    --lemon: #f4e875;
    font-family: 'Nunito Sans', Arial, sans-serif;
    font-size: 17px;
  }
  h1, h2, h3 { font-family: 'Fredoka', 'Trebuchet MS', sans-serif; font-weight: 500; letter-spacing: -.025em; }
  h2 { line-height: 1.13; }
  h3 { font-weight: 500; }
  .site-header { border-bottom: 0; }
  .header-inner { padding-block: 25px 15px; }
  .brand { width: 186px; position: relative; }
  .brand::after {
    content: ''; position: absolute; width: 5.5%; aspect-ratio: 1;
    right: .4%; bottom: 5%; background: var(--lemon); border-radius: 50%;
  }
  .main-nav { font-weight: 800; }
  .main-nav .nav-contact { border: 2px solid rgba(255,255,255,.8); transform: rotate(-2deg); }
  .main-nav .nav-contact:hover { background: var(--lemon); color: var(--field-green); border-color: var(--lemon); }

  .hero { padding-block: 56px 65px; gap: 66px; }
  .hero-copy { position: relative; }
  .hero-copy::after {
    content: ''; position: absolute; right: 12px; top: 52px; width: 56px; height: 67px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 72' fill='none' stroke='%23f4e875' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M31 10c1 16 5 20 20 22-15 2-19 7-20 22-2-15-6-20-21-22 15-2 19-6 21-22Z'/%3E%3Cpath d='m47 4 1 9m-5-5 9 1M9 54l1 10m-6-5 10-1'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(12deg); pointer-events: none;
  }
  .hero .eyebrow { font-size: 11px; letter-spacing: .075em; }
  .location-dot { background: var(--lemon); width: 8px; height: 8px; }
  .hero h1 { font-size: clamp(50px, 5.5vw, 73px); line-height: 1.04; margin-top: 26px; font-weight: 500; }
  .hero h1 span {
    color: var(--lemon);
    text-decoration: underline;
    text-decoration-color: rgba(244,232,117,.48);
    text-decoration-thickness: 3px;
    text-underline-offset: 9px;
    text-decoration-skip-ink: none;
  }
  .hero-intro { max-width: 390px; font-size: 18px; line-height: 1.6; margin-top: 28px; }
  .brand-line { color: #fff6ad; font-family: 'Fredoka', sans-serif; font-size: 23px; font-weight: 500; margin-top: 15px; }
  .trust-row { gap: 11px; margin-block: 26px 29px; }
  .trust-row li { background: rgba(255,255,255,.09); border: 1px dashed rgba(255,255,255,.6); font-weight: 800; }
  .trust-row svg { color: var(--lemon); }
  .button { font-size: 15px; font-weight: 800; padding-block: 14px; }
  .button-outline { border-width: 2px; }
  .button-lemon, .button-teal { background: var(--lemon); color: #174640; border: 2px solid var(--lemon); }
  .button-lemon:hover:not(:disabled), .button-teal:hover:not(:disabled) { background: #fff39a; border-color: #fff39a; }

  .estimator {
    background: #066b65; border: 2px solid rgba(255,255,255,.6);
    border-radius: 37px 32px 49px 29px; padding: 33px;
    box-shadow: 7px 8px 0 var(--lemon);
  }
  .estimator h2 { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
  .small-leaf { color: var(--lemon); width: 30px; height: 30px; transform: rotate(9deg); }
  .estimate-intro { font-size: 15px; margin-top: 10px; }
  .room-row { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.42); border-radius: 13px; }
  .room-label { font-weight: 800; }
  .room-count button { color: var(--lemon); }
  .room-count output { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 21px; }
  .estimate-button { border-radius: 18px 15px 19px 14px; }
  .provisional-label span { border-color: var(--lemon); }
  .estimate-values strong { font-family: 'Fredoka', sans-serif; font-weight: 500; }

  .benefit-strip { padding-bottom: 51px; }
  .benefit { font-size: 15px; font-weight: 800; }
  .benefit-icon { background: var(--lemon); color: #174640; border: 0; border-radius: 42% 58% 57% 43% / 55% 42% 58% 45%; width: 46px; height: 46px; }
  .benefit:nth-child(2) .benefit-icon { transform: rotate(-8deg); }
  .benefit:nth-child(3) .benefit-icon { border-radius: 55% 45% 43% 57%; }
  .approach-section, .contact-section { position: relative; margin-top: 24px; border: 0; }
  .approach-section::before, .contact-section::before {
    content: ''; position: absolute; top: -24px; left: 0; width: 100%; height: 25px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath fill='%23066b65' d='M0 16C130-8 220 36 370 17S620-3 790 17 1080 33 1210 15 1350 9 1440 16V30H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .eyebrow { color: #fff6ad; font-weight: 800; letter-spacing: .09em; }
  .hero .eyebrow { color: white; }
  .approach-list article { border-bottom-style: dashed; padding-block: 30px; }
  .item-number { color: var(--lemon); font-family: 'Fredoka', sans-serif; font-size: 24px; font-weight: 500; }
  .brand-illustration { border-top-style: dashed; }
  .brand-illustration img { width: 105px; height: 105px; transform: rotate(-7deg); }
  .brand-illustration p { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 25px; color: var(--lemon); }
  .steps li { border-top-style: dashed; }
  .step-number { background: var(--lemon); color: #174640; border: 0; font-family: 'Fredoka', sans-serif; font-size: 20px; border-radius: 43% 57% 52% 48%; transform: rotate(-8deg); }
  .steps li:nth-child(2) .step-number { transform: rotate(8deg); }
  .steps h3 { font-size: 24px; }
  .contact-intro h2 { font-size: clamp(40px, 4.4vw, 55px); }
  .contact-note { border-top-style: dashed; }
  .enquiry-form { border: 1px solid rgba(255,255,255,.4); border-radius: 33px 28px 41px 28px; }
  .field { font-weight: 800; font-size: 14px; }
  .field input, .field select, .field textarea { border-radius: 12px; }
  .footer-brand { font-family: 'Fredoka', sans-serif; font-weight: 500; color: var(--lemon); font-size: 30px; }
  .legal-main h1 { font-weight: 500; }
}
@media screen and (max-width: 1100px) {
  .hero { gap: 40px; }
  .hero h1 { font-size: 60px; }
  .estimator { padding: 27px; }
  .estimator h2 { font-size: 29px; }
  .hero-copy::after { right: 2px; top: 50px; width: 37px; }
  .benefit { font-size: 13px; }
}
@media screen and (max-width: 900px) {
  .brand { width: 157px; }
  .hero h1 { font-size: 50px; }
  .hero-copy::after { display: none; }
  .estimator { padding: 24px; }
  .estimator h2 { font-size: 27px; }
}
@media screen and (max-width: 760px) {
  .header-inner { padding-block: 20px 14px; }
  .brand { width: 153px; }
  .hero { padding-block: 36px 48px; gap: 38px; }
  .hero h1 { font-size: clamp(48px, 9vw, 64px); max-width: 550px; }
  .hero-intro { max-width: 470px; font-size: 17px; }
  .hero .brand-line { margin-top: 15px; }
  .estimator { padding: 27px; max-width: 550px; }
  .estimator h2 { font-size: 31px; }
  .benefit { font-size: 14px; }
  .benefit-strip { padding-bottom: 36px; }
  .benefit-icon { width: 41px; height: 41px; }
}
@media screen and (max-width: 480px) {
  .brand { width: 132px; }
  .main-nav { gap: 10px; }
  .main-nav > a:nth-child(2) { display: none; }
  .main-nav .nav-contact { padding-inline: 12px; }
  .hero h1 { font-size: 48px; margin-top: 22px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .04em; }
  .hero-intro { font-size: 17px; margin-top: 24px; }
  .brand-line { font-size: 22px; }
  .estimator { padding: 22px; border-radius: 30px 27px 39px 25px; box-shadow: 5px 6px 0 var(--lemon); }
  .estimator h2 { font-size: 28px; }
  .small-leaf { display: none; }
  .trust-row li { font-size: 12px; padding-inline: 10px; }
  .enquiry-form { padding: 22px; border-radius: 28px; }
  .contact-intro h2 { font-size: 41px; }
}
@media screen and (max-width: 360px) {
  .brand { width: 126px; }
  .hero h1 { font-size: 44px; }
  .hero-intro { font-size: 16px; }
  .estimator { padding: 18px; }
  .estimator h2 { font-size: 25px; }
  .enquiry-form { padding: 19px; }
}