/* Pine quote builder — shared by quote.html and gutter-quote.html.
   Extracted from quote.html's inline <style> on 2026-09-17. */

  :root{
    --pine:#01736b; --pine-dark:#014c47; --teal:#01736b; --teal-bright:#16b3a6;
    --cream:#f5f2ec; --cream-2:#efe9df; --ink:#1c2620; --muted:#5d6b63; --white:#fff;
    --line:rgba(26,92,58,.14);
    --radius:20px; --radius-sm:14px;
    --shadow:0 24px 60px -28px rgba(18,63,40,.42);
    --shadow-sm:0 10px 30px -16px rgba(18,63,40,.30);
    --display:'Poppins','Segoe UI',system-ui,sans-serif;
    --body:'Poppins','Segoe UI',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;flex-direction:column;
    background:
      radial-gradient(1100px 600px at 12% -8%, rgba(1,121,111,.10), transparent 60%),
      radial-gradient(900px 520px at 102% 8%, rgba(26,92,58,.10), transparent 55%),
      linear-gradient(180deg, #f7f5f0, #eef2ee 70%, #eaf1ec);
  }
  /* faint grain overlay */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  svg{display:block}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}

  /* progress bar */
  .progress{position:fixed;top:0;left:0;height:4px;z-index:60;width:0%;
    background:linear-gradient(90deg,var(--pine),var(--teal-bright));
    transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(10,156,143,.5)}

  /* header */
  header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  header .wrap, .navbar .wrap{max-width:none;padding:0 40px}
  .head-inner{display:flex;align-items:center;gap:1.4rem;height:72px}
  .head-inner .logo img{height:34px}
  .pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--teal);
    background:rgba(1,121,111,.10);padding:.35rem .8rem;border-radius:999px}
  .pill svg{width:15px;height:15px}
  .head-step{margin-left:auto;font-size:.82rem;color:var(--muted);font-weight:500}
  .head-step b{color:var(--pine)}

  /* layout */
  main{flex:1;position:relative;z-index:1;padding:48px 0 140px}
  .builder{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
  .builder.has-side{grid-template-columns:1fr 340px}

  .panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:2.6rem;position:relative;overflow:hidden}
  .panel::after{content:"";position:absolute;left:0;top:0;height:100%;width:5px;
    background:linear-gradient(var(--pine),var(--teal))}

  .q-eyebrow{font-size:.74rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:.7rem}
  .q-title{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:600;letter-spacing:-.4px;line-height:1.1}
  .q-sub{color:var(--muted);margin-top:.5rem;font-size:1rem}

  /* option grid */
  .opts{display:grid;gap:16px;margin-top:2rem}
  .opts.c2{grid-template-columns:repeat(2,1fr)}
  .opts.c3{grid-template-columns:repeat(3,1fr)}
  .opts.c4{grid-template-columns:repeat(4,1fr)}

  .opt{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:1.5rem 1.2rem;cursor:pointer;text-align:center;
    transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
    opacity:0;transform:translateY(14px);animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  .opt:hover{border-color:var(--teal-bright);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
  .opt.tall{padding:2rem 1.2rem}
  .opt-ico{width:50px;height:50px;margin:0 auto 1rem;border-radius:14px;display:grid;place-items:center;
    background:var(--cream);color:var(--pine);transition:background .22s ease,color .22s ease,transform .3s ease}
  .opt-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .opt-label{font-weight:600;font-size:1.04rem}
  .opt-desc{color:var(--teal);font-size:.84rem;margin-top:.3rem;font-weight:500}
  .opt.plain{display:flex;align-items:center;justify-content:center;text-align:center;min-height:68px;padding:1.15rem 1.4rem;font-weight:600}
  .opt.plain .opt-label{width:100%;text-align:center}
  .opt-area{padding:2.6rem 1.2rem}
  /* Step 1 area: large square-ish cards */
  .opts.c2 .opt.tall{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.4rem 1.5rem;gap:.2rem}
  .opts.c2 .opt.tall .opt-ico{width:72px;height:72px;border-radius:20px;margin-bottom:1.2rem}
  .opts.c2 .opt.tall .opt-ico svg{width:38px;height:38px}
  .opts.c2 .opt.tall .opt-label{font-size:1.2rem}
  .opts.c2 .opt.tall .opt-desc{font-size:.92rem}
  .opt-map{width:104px;height:104px;margin:0 auto 1.1rem;color:var(--teal-bright);filter:drop-shadow(0 6px 14px rgba(1,121,111,.25));transition:color .25s ease,transform .3s ease}
  .opt-map svg{width:100%;height:100%;fill:currentColor;stroke:none}
  .opt.selected .opt-map{color:var(--pine);transform:scale(1.04)}
  /* selected state: green outline + glow + check badge */
  .opt.selected{border-color:var(--teal);border-width:2px;background:linear-gradient(180deg,rgba(1,121,111,.06),rgba(1,121,111,.02));
    box-shadow:0 0 0 4px rgba(1,121,111,.12), var(--shadow-sm)}
  .opt.selected .opt-ico{background:var(--pine);color:#fff;transform:scale(1.05)}
  .opt-check{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--teal);
    display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1)}
  .opt-check svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .opt.selected .opt-check{opacity:1;transform:scale(1)}

  .estimate{text-align:center;margin-top:2.2rem;min-height:1px}
  .estimate:empty{margin-top:0}
  .est-q{font-weight:600;color:var(--ink);font-size:1.06rem;animation:rise .4s ease}
  .est-q b{color:var(--teal)}
  .est-actions{display:flex;gap:.8rem;justify-content:center;margin-top:1.1rem;animation:rise .5s ease}
  .est-btn{min-width:70px;padding:.7rem 1.3rem;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-weight:600;font-size:1rem;color:var(--ink);cursor:pointer;transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease}
  .est-btn:hover{border-color:var(--teal-bright);transform:translateY(-2px)}
  .est-btn.sel{border-color:var(--teal);border-width:2px;background:linear-gradient(180deg,rgba(1,121,111,.07),rgba(1,121,111,.02));color:var(--pine);box-shadow:0 0 0 3px rgba(1,121,111,.12)}
  .adjust{margin-top:2.2rem;animation:rise .4s ease}
  .adjust-label{font-weight:600;color:var(--ink);margin-bottom:1rem}
  .pane-num{text-align:center;font-family:var(--display);font-size:3rem;font-weight:700;color:var(--pine);line-height:1}
  .pane-underline{width:64px;height:3px;margin:.5rem auto 0;border-radius:3px;background:linear-gradient(90deg,var(--pine),var(--teal-bright))}
  .pane-cap{text-align:center;color:var(--teal);font-size:.85rem;font-weight:600;margin-top:.45rem}
  .slider-wrap{margin-top:1.6rem}
  .pane-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#e3e8e5;outline:none;cursor:pointer}
  .pane-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--teal);box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;transition:transform .15s ease}
  .pane-slider::-webkit-slider-thumb:hover{transform:scale(1.12)}
  .pane-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--teal);box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer}
  .slider-ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:.55rem}
  .form-submit{display:flex;justify-content:flex-end;margin-top:1.6rem}
  /* compact contact step so the Request Quote button fits on one screen */
  .contact-mode main{padding-top:26px;padding-bottom:36px}
  .contact-mode .navbar{display:none}
  .contact-mode .contact-head{margin-bottom:18px}
  .contact-mode .contact-head .q-title{font-size:clamp(1.5rem,3vw,2rem)}
  .contact-mode .contact-head .q-sub{font-size:.95rem}
  .contact-mode .panel{padding:1.5rem 2rem}
  .contact-mode .panel h3{margin-bottom:1rem!important;font-size:1.2rem!important}
  .contact-mode .form-grid{gap:.7rem 1.3rem}
  .contact-mode .field label{margin-bottom:.25rem;font-size:.78rem}
  .contact-mode .field input{padding:.6rem .9rem}
  .contact-mode .info-note{margin-top:1rem!important;padding:.6rem .9rem;font-size:.82rem}
  .contact-mode .form-submit{margin-top:1.1rem}
  .info-note{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.6rem;background:rgba(1,121,111,.07);
    border:1px solid rgba(1,121,111,.16);border-radius:12px;padding:.85rem 1rem;font-size:.88rem;color:var(--pine)}
  .info-note svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--teal);fill:none;stroke-width:2}

  /* sidebar */
  .side{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.8rem;position:sticky;top:96px}
  .side h3{font-family:var(--display);font-size:1.3rem;font-weight:600;margin-bottom:1.3rem}
  .side-row{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .side-row:last-child{border-bottom:0}
  .side-row .k{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
  .side-row .v{margin-top:.25rem;font-weight:600;color:#c2c8c4;transition:color .3s ease}
  .side-row .v.set{color:var(--teal)}

  /* contact form */
  .contact-head{text-align:center;max-width:640px;margin:0 auto 32px}
  .contact-head .q-title{font-size:clamp(1.9rem,3.6vw,2.6rem)}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.3rem}
  .field{display:flex;flex-direction:column}
  .field.full{grid-column:1 / -1}
  .field label{font-size:.82rem;font-weight:600;margin-bottom:.4rem}
  .field label .req{color:#c45b5b}
  .field input,.field select{padding:.85rem 1rem;border-radius:12px;border:1.5px solid var(--line);
    font-family:inherit;font-size:.97rem;background:var(--white);color:var(--ink);
    transition:border-color .18s ease, box-shadow .18s ease}
  .field input:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,121,111,.15)}

  /* footer nav */
  .navbar{position:fixed;bottom:0;left:0;right:0;z-index:55;background:rgba(247,245,240,.9);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .navbar-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
  .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:inherit;font-weight:600;font-size:1rem;
    padding:.9rem 1.8rem;border-radius:999px;border:2px solid transparent;cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s ease}
  .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .btn-prev{background:transparent;border-color:var(--line);color:var(--ink)}
  .btn-prev:hover{border-color:var(--pine);color:var(--pine)}
  .btn-prev.hidden{visibility:hidden}
  .btn-next{background:var(--pine);color:#fff;box-shadow:var(--shadow-sm)}
  .btn-next:hover{background:var(--pine-dark);transform:translateY(-2px)}
  .btn-next:disabled{background:#cdd5d0;color:#fff;cursor:not-allowed;box-shadow:none;transform:none}

  /* success */
  .success{text-align:center;padding:3rem 1rem}
  .success .ring{width:96px;height:96px;border-radius:50%;margin:0 auto 1.6rem;background:rgba(1,121,111,.1);display:grid;place-items:center;
    animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
  @keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
  .success .ring svg{width:48px;height:48px;stroke:var(--teal);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .success h2{font-family:var(--display);font-size:2rem;font-weight:600;margin-bottom:.6rem}
  .success p{color:var(--muted);max-width:48ch;margin:0 auto 1.6rem}
  /* communications disclosure on the success screen */
  .consent-card{text-align:left;max-width:58ch;margin:0 auto 1.8rem;background:rgba(1,121,111,.06);
    border:1px solid rgba(1,121,111,.16);border-radius:14px;padding:1.15rem 1.3rem}
  .consent-card h3{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--pine);
    margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
  .consent-card h3 svg{width:18px;height:18px;flex:none;stroke:var(--teal);fill:none;stroke-width:2}
  .consent-card p{color:var(--muted);font-size:.87rem;max-width:none;margin:0 0 .7rem}
  .consent-card ul{list-style:none;margin:0 0 .8rem;padding:0}
  .consent-card li{position:relative;padding-left:1.35rem;font-size:.87rem;color:var(--ink);
    line-height:1.55;margin-bottom:.4rem}
  .consent-card li::before{content:"";position:absolute;left:.35rem;top:.65em;width:5px;height:5px;
    border-radius:50%;background:var(--teal)}
  .consent-card .fine{font-size:.77rem;color:var(--muted);margin:0}
  .consent-card a{color:var(--teal);text-decoration:underline}
  /* inside the contact form panel the card spans the panel instead of being
     centred at 58ch, which left an odd gap beside the last form field */
  .consent-card.in-form{max-width:none;margin:1.6rem 0 0}

  @media(max-width:920px){
    .builder.has-side{grid-template-columns:1fr}
    .side{position:static;order:-1}
    .opts.c4{grid-template-columns:repeat(2,1fr)}
    .opts.c3{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:560px){
    .panel{padding:1.6rem}
    .opts.c2,.opts.c3,.opts.c4{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .head-step{display:none}
  }

/* optional marketing opt-in inside a consent card */
.consent-card .opt-in{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;margin:.9rem 0 0;font-size:.82rem;line-height:1.6}
.consent-card .opt-in input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--teal);flex:0 0 auto}