/* ==========================================================
   Nook Handyman — shared stylesheet
   Linked by index.html, every service page, every city page,
   for-realtors.html and privacy.html. Change a colour or a
   type size once and the whole site follows.
   ========================================================== */

  :root{
    --paper:#FEFCF8;
    --surface:#FFFFFF;
    --surface-tint:#FAF7EF;
    --ink:#252119;
    --ink-soft:#6E6656;
    --warm:#E2691E;
    --warm-soft:#F6D9B7;
    --cool:#2C7A82;
    --cool-soft:#C9E4E2;
    --line:#ECE6D8;
    color-scheme: light;
  }
  /* Light only, deliberately — same call as the cleaning site. The brand is
     cream and terracotta; a system dark-mode variant rendered the page nearly
     black for anyone whose laptop is set to dark, which is most of them.
     color-scheme:light also keeps native selects and scrollbars light. */

  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--warm); color:#fff; }
  a{ color:inherit; }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  .shell{ max-width:1160px; margin:0 auto; padding:0 32px; }

  h1,h2{ margin:0; text-wrap:balance; font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
         font-weight:300; letter-spacing:-0.035em; }
  em.accent{ font-style:normal; font-weight:500; color:var(--warm); }

  .eyebrow{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cool); font-weight:500;
  }
  .cities-line{
    display:flex; align-items:center; flex-wrap:wrap; gap:13px;
    font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
    font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cool); margin:0;
  }
  .cities-line i{ font-style:normal; opacity:0.35; }
  .cities-centred{ justify-content:center; margin-top:18px; }
  @media (max-width:860px){
    .cities-line{ justify-content:center; margin-top:24px; }
  }
  @media (max-width:420px){
    .cities-line{ font-size:11.5px; letter-spacing:0.12em; gap:11px; }
  }

  /* --- Wordmark ---
     Identical to the cleaning site. The name set in Outfit with a single
     orange full stop, plus a quiet service label so the two Nook sites are
     distinguishable at a glance without becoming two brands. */
  :root{ --wm-face:'Outfit', ui-sans-serif, system-ui, sans-serif; }

  .brandmark{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit; }
  /* One variable drives the wordmark size, because the HANDYMAN label below
     is positioned from it. Change --wm-size and both parts follow. */
  .wordmark{ display:flex; flex-direction:column; line-height:1; --wm-size:clamp(34px, 3.4vw, 40px); }
  .wordmark .name{
    font-family:var(--wm-face); font-weight:400;
    font-size:var(--wm-size);
    letter-spacing:-0.028em; color:var(--ink); line-height:1;
  }
  .wordmark .name .dot{ color:var(--warm); }
  /* OPTICAL ALIGNMENT. Both lines start at the same x, but the two typefaces
     do not put their ink in the same place. Measured on the live site: the N
     in Outfit carries a left side bearing of about 7.5% of its font size,
     while the H in IBM Plex Mono starts hard against its own origin. Left
     unadjusted, HANDYMAN's stem sat 2 to 3px left of the N's stem, which is
     small enough to look like a mistake rather than a choice. This pushes it
     back so the two stems line up, and because it is derived from --wm-size
     it stays aligned at every size the wordmark takes. */
  .wordmark .service{
    font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
    font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--ink-soft); margin-top:7px;
    padding-left:calc(var(--wm-size) * 0.059);
    transition:font-size 0.18s ease, margin-top 0.18s ease;
  }

  /* --- Top bar --- */
  .brandrule{ height:8px; background:var(--warm); }
  .topbar{ background:var(--ink); color:var(--paper); }
  .topbar .shell{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 32px; font-size:13.5px;
  }
  .topbar .tb-area{ color:rgba(252,250,243,0.65); }
  .topbar .tb-offer{ color:var(--paper); font-weight:500; letter-spacing:0.01em; }
  .topbar .tb-offer b{ color:var(--warm); font-weight:600; }
  .topbar .tb-offer .sep{ color:rgba(252,250,243,0.4); margin:0 8px; }
  .topbar .tb-offer .narrow{ display:none; }
  .topbar .tb-phone{
    display:flex; align-items:center; gap:7px;
    color:var(--paper); text-decoration:none; font-weight:600; letter-spacing:0.01em;
  }
  .topbar .tb-phone svg{ color:var(--warm); flex-shrink:0; }
  /* On phones the bar carries exactly one thing. The offer if it is running,
     otherwise the city list — the email is the first thing in the footer and
     the chat bubble is on screen throughout, so dropping it here costs
     nothing. Note the city list must NOT be display:none by default: with the
     founding offer switched off that left an empty black strip across the top
     of every phone. The offer script hides .tb-area itself when it takes over. */
  @media (max-width:640px){
    .topbar .tb-phone{ display:none; }
    .topbar .shell{ justify-content:center; text-align:center; padding:12px 18px; font-size:15.5px; }
    .topbar .tb-area{ font-size:12.5px; letter-spacing:0.03em; color:rgba(252,250,243,0.72); }
    .topbar .tb-offer{ line-height:1.3; }
    .topbar .tb-offer .wide{ display:none; }
    .topbar .tb-offer .narrow{ display:block; }
    .topbar .tb-offer .narrow b{ font-size:16.5px; letter-spacing:-0.005em; }
    .topbar .tb-offer .sub{ display:block; font-weight:400; color:rgba(252,250,243,0.72); font-size:12.5px; margin-top:4px; letter-spacing:0.02em; }
  }

  /* --- Nav --- */
  nav{
    position:sticky; top:0; z-index:50;
    background:var(--paper); border-bottom:1px solid var(--line);
    transition:box-shadow 0.18s ease;
  }
  nav.stuck{ box-shadow:0 8px 22px -16px rgba(37,33,25,0.45); }
  .nav-row{ transition:padding 0.18s ease; }
  nav.stuck .nav-row{ padding-top:11px; padding-bottom:11px; }
  .wordmark .name{ transition:font-size 0.18s ease; }
  nav.stuck .wordmark{ --wm-size:clamp(27px, 2.6vw, 31px); }
  nav.stuck .wordmark .service{ font-size:9.5px; margin-top:5px; }
  nav.stuck .navtoggle{ padding:11px 17px; }

  section[id], .wizard{ scroll-margin-top:112px; }
  @media (max-width:760px){ section[id], .wizard{ scroll-margin-top:92px; } }
  .nav-row{ display:flex; align-items:center; gap:14px; padding-top:18px; padding-bottom:18px; }
  .nav-links{ margin-left:auto; display:flex; align-items:center; gap:28px; font-size:14.5px; }
  .nav-links a{ text-decoration:none; color:var(--ink-soft); }
  .nav-links a:hover{ color:var(--ink); }
  /* .nav-links a is (0,1,1) and beats .btn-primary (0,1,0), so the button
     would render ink-soft text on orange. Buttons opt back out. */
  .nav-links a.btn-primary, .nav-links a.btn-primary:hover{ color:#fff; }
  .nav-links a.btn-ghost{ color:var(--ink); }
  .nav-links a.btn-ghost:hover{ color:var(--paper); }
  .btn{
    font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.01em;
    padding:12px 24px; border-radius:4px; text-decoration:none; display:inline-block;
    border:1.4px solid transparent; cursor:pointer;
  }
  .btn-primary{ background:var(--warm); color:#fff; }
  .btn-ghost{ border-color:var(--ink); color:var(--ink); background:transparent; }
  @media (max-width:760px){ .nav-links a:not(.btn){ display:none; } }

  /* --- Hero --- */
  .hero{
    padding-top:64px; padding-bottom:84px;
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  }
  @media (max-width:860px){ .hero{ grid-template-columns:1fr; padding-top:44px; gap:30px; } }
  .hero h1{ font-size:clamp(46px,6.4vw,74px); line-height:1.04; margin-top:16px; }
  .hero .lede{ max-width:48ch; font-size:17px; color:var(--ink-soft); margin:18px 0 30px; }
  .hero .ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
  .foot-zips{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
    letter-spacing:0.05em; margin:11px 0 0; opacity:0.55; line-height:1.9; }

  /* --- Media panel ---
     Photography slot. Until real photographs of your own jobs exist, these
     render as a brand gradient with line art, which reads as a deliberate
     illustration rather than a missing image. Drop an <img> inside and the
     art hides itself. */
  .media{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio:4/3;
    box-shadow:0 18px 40px -22px rgba(37,33,25,0.35);
  }
  .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .media .line-art{ position:absolute; inset:0; width:100%; height:100%; color:rgba(37,33,25,0.42); }
  .media .caption{
    position:absolute; left:0; right:0; bottom:0;
    padding:18px 20px 14px;
    background:linear-gradient(to top, rgba(20,17,10,0.45), transparent);
    color:#fff; font-size:12.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;
    display:flex; justify-content:space-between; align-items:flex-end;
  }
  .m-warm{ background:linear-gradient(135deg, var(--warm-soft), var(--surface-tint) 70%); }
  .m-cool{ background:linear-gradient(135deg, var(--cool-soft), var(--surface-tint) 70%); }
  .m-mix{ background:linear-gradient(135deg, var(--warm-soft), var(--cool-soft)); }

  /* --- Request card (hero) ---
     Same shell as the cleaning site's booking card. The estimate panel is
     replaced by the pricing promise: there is no instant price here, and the
     card must not imply one. */
  .booking-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:26px 26px 24px;
    box-shadow:0 22px 48px -24px rgba(37,33,25,0.32);
  }
  .bc-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--cool); background:var(--cool-soft); padding:5px 10px; border-radius:20px;
    margin-bottom:14px;
  }
  .booking-card h3{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:20px; margin:0 0 18px; }
  .bc-field{ margin-bottom:14px; position:relative; }
  .bc-field label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:6px;
  }
  .bc-field select, .bc-field input, .bc-field textarea{
    width:100%; font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-size:16px; color:var(--ink);
    background:var(--paper); border:1.3px solid var(--line); border-radius:7px;
    padding:14px 14px; appearance:none;
  }
  .bc-field textarea{ min-height:104px; resize:vertical; line-height:1.55; }
  .bc-field select{ padding-right:34px; cursor:pointer; }
  .bc-field.has-caret::after{
    content:"";
    position:absolute; right:14px; bottom:15px;
    width:12px; height:12px;
    background-color:var(--ink-soft);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
  }
  .bc-field select:focus, .bc-field input:focus, .bc-field textarea:focus{ outline:2px solid var(--cool); outline-offset:1px; }
  /* Google Places autocomplete dropdown — matched to site type/colors once a real API key is added, see script at bottom of page */
  .pac-container{
    font-family:'Outfit',ui-sans-serif,system-ui,sans-serif !important; border:1.3px solid var(--line); border-radius:8px;
    margin-top:4px; box-shadow:0 10px 28px rgba(37,33,25,0.12); padding:4px 0; border-top:1.3px solid var(--line) !important;
  }
  .pac-item{ padding:9px 12px; font-size:14px; border-top-color:var(--line); }
  .pac-item-query{ font-size:14px; color:var(--ink); }
  .pac-matched{ font-weight:600; }
  .pac-icon{ display:none; }
  .bc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:420px){ .bc-row{ grid-template-columns:1fr; } }
  .bc-zip-msg{ font-size:12px; margin-top:6px; min-height:15px; color:var(--ink-soft); }
  .bc-zip-msg.hit{ color:var(--cool); font-weight:500; }
  .bc-zip-msg.miss{ color:var(--warm); }

  /* Replaces the cleaning site's price box. Same visual weight, no number. */
  .bc-promise{
    background:var(--surface-tint); border-radius:10px; padding:15px 17px; margin:18px 0 16px;
    display:flex; gap:12px; align-items:flex-start;
  }
  .bc-promise svg{ color:var(--cool); flex-shrink:0; margin-top:2px; }
  .bc-promise .tx{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
  .bc-promise .tx strong{ display:block; color:var(--ink); font-weight:600; font-size:14px; margin-bottom:3px; }
  .bc-offer{
    background:var(--warm-soft); border-radius:8px; padding:11px 14px; margin:0 0 14px;
    font-size:12.5px; line-height:1.5; color:var(--ink);
  }
  .bc-offer strong{ font-weight:600; }
  .bc-offer .n{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; color:var(--ink-soft); display:block; margin-top:3px; }
  .bc-cta{ width:100%; text-align:center; box-sizing:border-box; }
  .bc-note{ text-align:center; font-size:12px; color:var(--ink-soft); margin:12px 0 0; }

  /* ---- Section rhythm: paper → tint → ink → paper ---- */
  .band-ink{ background:var(--ink); color:var(--paper); border-top:none; }
  .band-ink .eyebrow{ color:var(--warm); }
  .band-ink h2{ color:var(--paper); }
  .band-ink p{ color:rgba(252,250,243,0.72); }
  .band-ink .pillars .icon{ color:var(--warm); }
  .band-ink .pillars h4{ color:var(--paper); }
  .band-ink .pillars p{ color:rgba(252,250,243,0.62); }
  .band-ink .media{ box-shadow:0 26px 60px -28px rgba(0,0,0,0.6); }

  /* ---- Trust band ---- */
  .trustband{ background:var(--surface-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .trustband .shell{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
  @media (max-width:760px){ .trustband .shell{ grid-template-columns:1fr; } }
  .trustband .item{ padding:26px 28px 26px 0; display:flex; gap:14px; align-items:flex-start; }
  .trustband .item + .item{ border-left:1px solid var(--line); padding-left:28px; }
  @media (max-width:760px){
    .trustband .item + .item{ border-left:none; border-top:1px solid var(--line); padding-left:0; }
    .trustband .item{ padding:20px 0; }
  }
  .trustband .ic{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--cool-soft); color:var(--cool);
    display:flex; align-items:center; justify-content:center;
  }
  .trustband .tx strong{ display:block; font-size:15px; font-weight:600; letter-spacing:-0.01em; }
  .trustband .tx span{ font-size:13.5px; color:var(--ink-soft); }

  /* ---- Service cards ---- */
  .services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
  .svc{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:26px 24px; display:flex; flex-direction:column; gap:10px;
    border-top:3px solid var(--warm);
    transition:transform 0.18s ease, box-shadow 0.18s ease;
  }
  .svc:nth-child(2n){ border-top-color:var(--cool); }
  .svc:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(37,33,25,0.30); }
  .svc .icon{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--warm-soft); color:var(--warm); }
  .svc:nth-child(2n) .icon{ background:var(--cool-soft); color:var(--cool); }
  .svc h3{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:19px; margin:6px 0 0; }
  .svc p{ font-size:14px; color:var(--ink-soft); margin:0; }
  .svc .incl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; flex-grow:1; }
  .svc .incl li{ font-size:12.5px; color:var(--ink-soft); padding-left:18px; position:relative; }
  .svc .incl li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--cool); font-weight:600; font-size:11px; }

  /* ---- The "we don't do this" card. Deliberately styled apart from the
         service cards: it is the one card that is not an offer. ---- */
  .scope-note{
    margin-top:20px; border:1px dashed var(--line); border-radius:12px;
    background:var(--surface-tint); padding:22px 24px;
    display:flex; gap:16px; align-items:flex-start;
  }
  .scope-note .ic{ color:var(--warm); flex-shrink:0; margin-top:2px; }
  .scope-note h4{ font-family:'Outfit',sans-serif; font-weight:600; font-size:15.5px; margin:0 0 5px; }
  .scope-note p{ font-size:13.5px; color:var(--ink-soft); margin:0; max-width:74ch; }

  /* ---- Pricing explainer ---- */
  .price-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line);
                border-radius:14px; overflow:hidden; background:var(--line); }
  @media (max-width:900px){ .price-steps{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .price-steps{ grid-template-columns:1fr; } }
  .price-step{ background:var(--surface); padding:26px 24px; display:flex; flex-direction:column; gap:9px; }
  .price-step .mk{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--cool);
  }
  .price-step h4{ font-family:'Outfit',sans-serif; font-weight:600; font-size:17px; margin:0; letter-spacing:-0.015em; }
  .price-step p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
  .price-line{
    margin-top:22px; padding:20px 24px; border-radius:12px;
    background:var(--ink); color:var(--paper);
    font-family:'Outfit',sans-serif; font-weight:300; font-size:clamp(19px,2.4vw,25px);
    letter-spacing:-0.025em; line-height:1.35; text-wrap:balance;
  }
  .price-line span{ color:var(--warm); font-weight:500; }

  /* ---- Process ---- */
  .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
  @media (max-width:900px){ .process{ grid-template-columns:repeat(2,1fr); gap:30px; } }
  @media (max-width:560px){ .process{ grid-template-columns:1fr; } }
  .step{ border-top:2px solid var(--warm); padding-top:20px; }
  .step:nth-child(2){ border-top-color:var(--cool); }
  .step:nth-child(3){ border-top-color:var(--warm); }
  .step:nth-child(4){ border-top-color:var(--cool); }
  .step .num{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:200; font-size:54px;
              letter-spacing:-0.05em; color:var(--warm); line-height:1; opacity:0.9; }
  .step:nth-child(2) .num{ color:var(--cool); }
  .step:nth-child(3) .num{ color:var(--warm); }
  .step:nth-child(4) .num{ color:var(--cool); }
  .step h3{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:18px; margin:14px 0 8px; }
  .step p{ font-size:14px; color:var(--ink-soft); margin:0; max-width:34ch; }

  /* ---- Buttons and cards get a little life on hover ---- */
  .btn{ transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease; }
  .btn-primary:hover{ background:var(--ink); }
  .btn-ghost:hover{ background:var(--ink); color:var(--paper); }
  .btn:active{ transform:translateY(1px); }
  a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--warm); outline-offset:3px; }

  /* ---- Mobile menu ---- */
  .navtoggle{ display:none; margin-left:auto; background:none; border:1.5px solid var(--ink);
              border-radius:5px; padding:15px 21px; cursor:pointer; color:var(--ink);
              font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:500;
              letter-spacing:0.14em; text-transform:uppercase; line-height:1;
              transition:background 0.16s ease, color 0.16s ease; }
  .navtoggle:hover, .navtoggle[aria-expanded="true"]{ background:var(--ink); color:var(--paper); }
  @media (max-width:760px){
    .navtoggle{ display:block; }
    .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; z-index:30;
                flex-direction:column; align-items:stretch; gap:0;
                background:var(--surface); border-bottom:1px solid var(--line);
                box-shadow:0 20px 40px -24px rgba(37,33,25,0.35); padding:8px 32px 22px; }
    .nav-links.open{ display:flex; }
    .nav-links a:not(.btn){ display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
    .nav-links .btn{ margin-top:16px; text-align:center; }
  }

  section{ padding:74px 0; border-top:1px solid var(--line); }
  .band{ background:var(--surface-tint); }
  .section-head{ max-width:60ch; margin-bottom:36px; }
  .section-head h2{ font-size:31px; margin-top:8px; font-weight:300; letter-spacing:-0.035em; }
  .section-head p{ color:var(--ink-soft); font-size:15.5px; margin:10px 0 0; }

  /* --- Story / trust --- */
  .story{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:center; }
  @media (max-width:860px){ .story{ grid-template-columns:1fr; gap:34px; } }
  .story .lead-para p{ margin:0 0 16px; font-size:16.5px; }
  .story .lead-para p:last-child{ margin-bottom:0; }
  .pillars{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  @media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }
  .pillars li{ display:flex; gap:13px; }
  .pillars .icon{ color:var(--cool); flex-shrink:0; margin-top:2px; }
  .pillars h4{ font-size:15px; font-weight:600; margin:0 0 4px; font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; }
  .pillars p{ font-size:13.4px; color:var(--ink-soft); margin:0; }

  /* --- Service area --- */
  .area-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
  .chip{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.04em;
    padding:9px 16px; border:1px solid var(--cool); border-radius:20px; color:var(--cool);
  }
  .zip-grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  }
  @media (max-width:760px){ .zip-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .zip-grid{ grid-template-columns:1fr; } }
  .zip-cell{ background:var(--surface); padding:16px 18px; }
  .zip-cell .city{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:14.5px; margin-bottom:6px; }
  .zip-cell .zips{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); letter-spacing:0.02em; }
  .area-note{ font-size:12.5px; color:var(--ink-soft); margin:16px 0 0; }

  /* --- FAQ --- */
  .faq-list{ max-width:70ch; }
  .faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
  .faq-item:first-child{ border-top:1px solid var(--line); }
  .faq-item summary{
    cursor:pointer; list-style:none; font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:15.5px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+"; flex-shrink:0; font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:400; font-size:20px; color:var(--warm);
    transition:transform 0.15s ease;
  }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item p{ font-size:14px; color:var(--ink-soft); margin:12px 0 0; max-width:60ch; }

  /* --- Request wizard --- */
  #contact{ padding-top:78px; padding-bottom:78px; text-align:center; }
  #contact .section-head h2{ font-size:36px; }
  #contact .section-head p{ margin-top:10px; }
  .wizard{
    text-align:left; max-width:640px; margin:36px auto 0;
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    padding:36px 36px 30px; box-shadow:0 22px 48px -28px rgba(37,33,25,0.28);
  }
  @media (max-width:600px){ .wizard{ padding:26px 20px 22px; } }
  .wz-steps{ display:flex; list-style:none; margin:0 0 30px; padding:0; }
  .wz-step-tab{
    flex:1; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-soft);
    padding-bottom:14px; border-bottom:2px solid var(--line);
  }
  .wz-step-tab.active{ color:var(--ink); border-bottom-color:var(--warm); }
  .wz-step-tab.done{ color:var(--cool); border-bottom-color:var(--cool); }
  .wz-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:19px; height:19px; border-radius:50%; margin-right:5px;
    background:var(--surface-tint); border:1px solid var(--line); font-size:10px;
  }
  .wz-step-tab.active .wz-num{ background:var(--warm); border-color:var(--warm); color:#fff; }
  .wz-step-tab.done .wz-num{ background:var(--cool); border-color:var(--cool); color:#fff; }
  @media (max-width:480px){
    .wz-step-tab{ font-size:9px; letter-spacing:0.01em; }
    .wz-num{ width:16px; height:16px; font-size:9px; margin-right:3px; }
  }
  .wz-pane{ display:flex; flex-direction:column; gap:16px; text-align:left; }
  .wz-pane[hidden]{ display:none; }
  .wz-jobs-head{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:14.5px; }
  .wz-jobs-head span{ font-weight:400; color:var(--ink-soft); font-size:12.5px; text-transform:none; }
  .wz-hint{ font-size:12px; color:var(--ink-soft); margin:-4px 0 0; }
  .wz-jobs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:480px){ .wz-jobs-grid{ grid-template-columns:1fr; } }
  .wz-job{
    display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px;
    padding:11px 12px; cursor:pointer; font-size:13.5px;
  }
  .wz-job.on{ border-color:var(--warm); background:var(--warm-soft); }
  .wz-job input{ width:15px; height:15px; accent-color:var(--warm); flex-shrink:0; }
  .wz-job span{ flex-grow:1; }
  .wz-summary{ background:var(--surface-tint); border-radius:12px; padding:16px 18px; font-size:13px; color:var(--ink-soft); margin-top:4px; }
  .wz-summary-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
  .wz-summary-row span:last-child{ text-align:right; color:var(--ink); }
  .wz-summary-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:10px; font-weight:600; color:var(--ink); font-size:14px; }
  .wz-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
  .wz-foot-note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-align:right; letter-spacing:0.02em; line-height:1.5; }
  .wz-done{ text-align:center; padding:30px 6px 10px; }
  .wz-done-icon{
    width:52px; height:52px; border-radius:50%; background:var(--cool-soft); color:var(--cool);
    display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 18px;
  }
  .wz-done-icon.warn{ background:var(--warm-soft); color:var(--warm); }
  .wz-done h3{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:22px; margin:0 0 10px; }
  .wz-done p{ font-size:13.5px; color:var(--ink-soft); max-width:44ch; margin:0 auto; }
  .wz-done p a{ color:var(--warm); }
  .wz-note{ font-size:12px; color:var(--ink-soft); text-align:center; margin:16px 0 0; }

  /* --- Footer --- */
  footer{ background:var(--ink); color:var(--paper); padding:56px 0 28px; }
  footer .wordmark .name{ color:var(--paper); }
  footer .wordmark .service{ color:rgba(252,250,243,0.55); }
  .foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:36px; margin-bottom:24px; border-bottom:1px solid rgba(252,250,243,0.14); }
  .foot-brand p{ color:rgba(252,250,243,0.6); font-size:13.5px; max-width:30ch; margin:14px 0 0; }
  .foot-brand p.foot-tagline{
    font-family:var(--wm-face); font-weight:300;
    font-size:27px; line-height:1.25; letter-spacing:-0.02em; color:var(--paper);
    max-width:25ch; margin:18px 0 0; text-wrap:balance;
  }
  .foot-brand p.foot-tagline span{ color:var(--warm); }
  .foot-brand p.foot-sub{ margin-top:12px; }
  .foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
  .foot-col .eyebrow{ color:var(--warm); }
  .foot-col ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .foot-col a, .foot-col span{ color:rgba(252,250,243,0.6); font-size:13.5px; text-decoration:none; }
  .foot-col a:hover{ color:var(--paper); }
  .foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:rgba(252,250,243,0.45); font-family:'IBM Plex Mono',monospace; }

  /* --- Chat widget --- */
  .chat-widget{ position:fixed; right:20px; bottom:20px; z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
  .chat-bubble{
    width:56px; height:56px; border-radius:50%; background:var(--warm); color:#fff; border:none;
    box-shadow:0 14px 30px -12px rgba(37,33,25,0.5); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .chat-bubble:hover{ background:var(--ink); }
  .chat-panel{
    width:300px; max-width:calc(100vw - 40px); background:var(--surface); border:1px solid var(--line);
    border-radius:16px; box-shadow:0 26px 54px -22px rgba(37,33,25,0.42); padding:20px;
  }
  .chat-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; position:relative; padding-right:20px; }
  .chat-panel-title{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:14px; }
  .chat-panel-sub{ font-size:11px; color:var(--cool); margin-top:2px; }
  .chat-close{
    position:absolute; top:-6px; right:-6px; background:none; border:none; font-size:14px;
    color:var(--ink-soft); cursor:pointer; line-height:1; padding:6px;
  }
  .chat-panel-body p{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
  .chat-cta{ width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; }
  .chat-secondary{ display:block; text-align:center; font-size:11.5px; color:var(--ink-soft); margin-top:12px; text-decoration:underline; }
  @media (max-width:480px){ .chat-widget{ right:14px; bottom:14px; } }

/* ==========================================================
   V2 ADDITIONS
   ========================================================== */

/* --- Phone in the top bar ---
   Desktop shows email and phone. Mobile shows the phone only,
   because the sticky call bar carries the action anyway. */
.topbar .tb-contact{ display:flex; align-items:center; gap:18px; }
.topbar .tb-contact a{
  display:flex; align-items:center; gap:7px;
  color:var(--paper); text-decoration:none; font-weight:600; letter-spacing:0.01em;
}
.topbar .tb-contact svg{ color:var(--warm); flex-shrink:0; }
@media (max-width:860px){ .topbar .tb-contact .tb-mail{ display:none; } }
@media (max-width:640px){ .topbar .tb-contact{ display:none; } }

/* --- Sticky mobile call bar ---
   Phones only. The single highest-value element added in V2: on the
   four best sites in the category the call and the quote are never
   more than a thumb away. Sits above the chat bubble, which shifts up
   to clear it. */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--ink); border-top:1px solid rgba(252,250,243,0.12);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.callbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 10px; border-radius:6px; text-decoration:none;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.01em;
}
.callbar .cb-call{ background:transparent; color:var(--paper); border:1.5px solid rgba(252,250,243,0.45); }
.callbar .cb-book{ background:var(--warm); color:#fff; }
.callbar svg{ flex-shrink:0; }
@media (max-width:760px){
  .callbar{ display:flex; }
  body{ padding-bottom:84px; }
  /* The chat bubble goes away on phones now that the call bar exists. It was
     floating over body text, and Call, Text and Book already cover every
     action a phone visitor wants. The email address stays in the footer. */
  .chat-widget{ display:none; }
}

/* --- The Nook Promise badge --- */
.promise-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--warm); font-weight:500;
  border:1px solid var(--warm); border-radius:20px; padding:7px 15px;
}
.band-ink .promise-badge{ color:var(--warm); border-color:rgba(226,105,30,0.55); }

/* --- Who is coming into your house --- */
.team{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start; }
@media (max-width:860px){ .team{ grid-template-columns:1fr; gap:30px; } }
.portrait{
  position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(150deg, var(--warm-soft), var(--surface-tint) 72%);
  box-shadow:0 18px 40px -22px rgba(37,33,25,0.35);
  display:flex; align-items:center; justify-content:center;
}
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait .initial{
  font-family:'Outfit',sans-serif; font-weight:300; font-size:clamp(90px,16vw,150px);
  color:rgba(37,33,25,0.16); letter-spacing:-0.05em; line-height:1;
}
.portrait .cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px 13px;
  background:linear-gradient(to top, rgba(20,17,10,0.55), transparent);
  color:#fff; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.02em;
}
.vetting{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.vetting li{
  background:var(--surface); padding:15px 18px; display:flex; gap:13px; align-items:flex-start;
  font-size:14px; color:var(--ink-soft);
}
.vetting li b{ color:var(--ink); font-weight:600; display:block; font-size:14.5px; margin-bottom:2px; }
.vetting .tick{ color:var(--cool); flex-shrink:0; margin-top:3px; }

/* --- Credentials strip --- */
.creds{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-top:30px;
}
.cred{ background:var(--surface); padding:20px 22px; }
.cred .k{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--cool); margin-bottom:6px;
}
.cred .v{ font-size:14px; color:var(--ink); font-weight:500; line-height:1.45; }
.cred .n{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }

/* --- Realtor band --- */
.pro-band{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:46px; align-items:center; }
@media (max-width:860px){ .pro-band{ grid-template-columns:1fr; gap:28px; } }
.pro-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pro-list li{ display:flex; gap:12px; font-size:14.5px; color:var(--ink-soft); }
.pro-list .tick{ color:var(--warm); flex-shrink:0; margin-top:3px; }

/* --- Subpage furniture --- */
.crumbs{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft); padding:22px 0 0; margin:0;
}
.crumbs a{ color:var(--cool); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs i{ font-style:normal; opacity:0.4; margin:0 8px; }

.subhero{ padding:34px 0 54px; display:grid; grid-template-columns:1.25fr 0.75fr; gap:48px; align-items:start; }
@media (max-width:900px){ .subhero{ grid-template-columns:1fr; gap:28px; padding-bottom:40px; } }
.subhero h1{
  font-family:'Outfit',sans-serif; font-weight:300; letter-spacing:-0.035em;
  font-size:clamp(34px,5.2vw,52px); line-height:1.06; margin:12px 0 0; text-wrap:balance;
}
.subhero h1 em{ font-style:normal; font-weight:500; color:var(--warm); }
.subhero .lede{ font-size:16.5px; color:var(--ink-soft); margin:18px 0 26px; max-width:54ch; }
.subhero .ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.side-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:24px 24px 22px; box-shadow:0 18px 40px -26px rgba(37,33,25,0.3);
}
.side-card h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:17px; margin:0 0 12px; }
.side-card ul{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
.side-card li{ font-size:13.5px; color:var(--ink-soft); padding-left:18px; position:relative; }
.side-card li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--cool); font-weight:600; font-size:11px; }
.side-card .btn{ width:100%; text-align:center; box-sizing:border-box; }
.side-card .tel{
  display:block; text-align:center; margin-top:12px; font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.side-card .tel span{ color:var(--warm); }

.prose{ max-width:68ch; }
.prose h2{ font-size:26px; font-weight:300; letter-spacing:-0.03em; margin:40px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:'Outfit',sans-serif; font-size:18px; font-weight:600; margin:28px 0 8px; }
.prose p{ font-size:16px; color:var(--ink-soft); margin:0 0 15px; }
.prose ul{ margin:0 0 18px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.prose ul li{ font-size:15px; color:var(--ink-soft); padding-left:22px; position:relative; }
.prose ul li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--warm); }
.prose strong{ color:var(--ink); font-weight:600; }

.related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:8px; }
.rel{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; text-decoration:none; color:inherit;
  transition:transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.rel:hover{ transform:translateY(-2px); border-color:var(--warm); box-shadow:0 14px 28px -20px rgba(37,33,25,0.3); }
.rel .k{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--cool); margin-bottom:6px;
}
.rel .t{ font-family:'Outfit',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:-0.01em; }
.rel .d{ font-size:13px; color:var(--ink-soft); margin-top:5px; }

.cta-strip{ text-align:center; }
.cta-strip h2{ font-size:clamp(26px,4vw,34px); font-weight:300; letter-spacing:-0.03em; }
.cta-strip p{ color:var(--ink-soft); font-size:15.5px; margin:12px auto 24px; max-width:52ch; }
.cta-strip .ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }