/* Dawn Till Dusk Construction — charcoal base + sunset gold-orange accent + field-green secondary + cream */
  :root{
    /* GRAPHITE AND BURNT ORANGE. Two sources, no invention: Chris's logo is
       orange over black with green foliage, and his one brand instruction was
       that the site should pick up the LIGHT GREY of his work shirt. So the
       greys are the body of the palette and the orange is the accent, taken
       off the logo rather than chosen.

       ALL MEASURED (contrast.mjs, WCAG relative luminance):
         --red    #B4500F  white on it  5.13  — CTA
         --red-dd #8F3F0B  white on it  7.28  — CTA hover
         --red    as text on white      5.13
         --amber  #E8973A  on --navy    6.18  / on --strip 6.90  — dark only
         --red-l  #F0A86A  on --navy    7.28
         --blue   #95480C  on white     6.54  / on --alt 6.05  — orange as text
         --ink    #1B2125  on white    16.27
         --body   #4C555B  on white     7.61  / on --alt-2 6.29
         --muted  #6B747A  on white     4.77
         --gold   #8A5A10  on white     5.91  / on --alt-2 4.89  — review stars
         --ok     #2E7D4F  on white     5.05  / on --alt 4.66   — tick marks
         white on --navy 14.55, on --navy-d 17.35, on --strip 16.25
       --gold and --ok are declared because the base sheet consumes both and
       does NOT inherit them. */
    --navy:#232A2F; --navy-d:#161B1F; --navy-l:#333C42;
    --red:#B4500F; --red-d:#8F3F0B40; --red-dd:#8F3F0B; --red-l:#F0A86A;
    --amber:#E8973A; --amber-l:#F2B268;
    --blue:#95480C; --blue-l:#F0A86A;
    --ink:#1B2125; --ink-2:#333B41; --body:#4C555B; --muted:#6B747A;
    --line:#E2E6E8; --bg:#ffffff; --alt:#F5F6F7; --alt-2:#E6EAEC;
    --gold:#8A5A10; --ok:#2E7D4F;
    --strip:#1B2126;
    --shell:1220px;
  }
  *{box-sizing:border-box;margin:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--body);font:400 17px/1.7 "Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4,.disp{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);line-height:1.1;font-weight:700}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block;height:auto}
  .wrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
  .eyebrow{font:700 14px/1 "Poppins",sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--red)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 15px/1 "Poppins",sans-serif;letter-spacing:.01em;padding:15px 28px;border-radius:100px;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;border:none;white-space:nowrap}
  .btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(180,80,15,.30)}
  .btn-red:hover{background:var(--red-dd);transform:translateY(-2px);box-shadow:0 16px 32px rgba(180,80,15,.42)}
  .btn-amber{background:var(--amber);color:var(--navy-d);box-shadow:0 10px 24px rgba(227,173,64,.34)}
  .btn-amber:hover{background:var(--amber-l);transform:translateY(-2px)}
  .btn-ghost-l{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
  .btn-ghost-l:hover{border-color:#fff;background:rgba(255,255,255,.12)}
  .btn-lg{padding:18px 34px;font-size:16px}
  .arrow::after{content:"→";font-weight:700}

  /* utility bar */
  .util{background:var(--navy-d);color:#c7d6e2;font:600 13.5px "Inter",sans-serif}
  .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px}
  .util .l{display:flex;align-items:center;gap:9px}
  .util .r{display:flex;align-items:center;gap:22px}
  .util .stars{color:var(--amber);letter-spacing:1px}
  .util a{color:#fff}
  .util .rev b{color:#fff}
  @media(max-width:760px){.util .l{display:none}.util .wrap{justify-content:center}}

  /* header */
  header.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(20,30,40,.06)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
  .brand{display:flex;align-items:center;gap:11px;font:800 19px/1 "Poppins",sans-serif;letter-spacing:.01em;color:var(--navy);text-transform:uppercase}
  .brand .shield{width:32px;height:36px;flex:0 0 auto}
  .brand span{color:var(--red)}
  .brand .logo{height:46px;width:auto;flex:0 0 auto;border-radius:50%}
  .foot .brand .logo{box-shadow:0 0 0 2px rgba(255,255,255,.12)}
  .menu{display:flex;align-items:center;gap:26px}
  .menu a.lnk{font:600 15px "Inter",sans-serif;color:var(--ink-2);transition:color .15s}
  .menu a.lnk:hover{color:var(--red)}
  .hamb{display:none;background:none;border:0;cursor:pointer;padding:11px;min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
  .hamb span{width:26px;height:2.6px;background:var(--navy);border-radius:2px}

  /* hero split */
  /* hero — full-bleed photo + form-in-hero */
  .hero{position:relative;color:#fff;
    background:linear-gradient(102deg,rgba(14,15,17,.93) 0%,rgba(16,18,20,.74) 42%,rgba(18,20,22,.40) 100%),url("../img/hero-bed-heuchera.jpg") center 46%/cover no-repeat}
  .hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(46px,6vw,78px);padding-bottom:clamp(46px,6vw,78px)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,58px);align-items:center}
  .hero-left .eyebrow{color:var(--amber);margin-bottom:16px;display:block}
  .hero-left h1{font-family:"Poppins",system-ui,sans-serif;color:#fff;font-size:clamp(38px,5.2vw,62px);font-weight:800;line-height:1.07;letter-spacing:-.01em;text-shadow:0 2px 26px rgba(0,0,0,.4)}
  .hero-left h1 em{font-style:italic;color:var(--amber)}
  .hero-left p.sub{color:#dbe4ec;font-size:clamp(16px,1.4vw,19px);margin:20px 0 0;line-height:1.6;max-width:500px}
  .hero-left p.sub b{color:#fff}
  .hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
  .rev-badge{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:9px 16px;backdrop-filter:blur(8px)}
  .rev-badge .g{width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-content:center;font:800 14px "Poppins";color:#4285F4}
  .rev-badge .st{color:var(--amber);letter-spacing:1px;font-size:14px}
  .rev-badge b{color:#fff;font:700 14px "Inter"}
  .rev-badge small{color:#c7d2dc;font-size:12.5px}
  .hero-form{background:#fff;border-radius:16px;padding:20px 20px 6px;box-shadow:0 30px 70px rgba(0,0,0,.42)}
  .hero-form h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:2px}
  .hero-form .hf-lead{color:var(--body);font-size:13.5px;margin-bottom:8px}
  .hero-form iframe{width:100%;min-height:745px;border:none;border-radius:8px;display:block}

  /* service icon strip */
  .strip{background:var(--strip)}
  .strip .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:0}
  .strip .it{display:flex;align-items:center;justify-content:center;gap:11px;padding:22px 14px;color:#fff;font:700 15px "Poppins";text-align:center;border-right:1px solid rgba(255,255,255,.16)}
  .strip .it:last-child{border-right:0}
  .strip .it .ic{font-size:22px;filter:grayscale(1) brightness(4)}
  @media(max-width:820px){.strip .wrap{grid-template-columns:repeat(2,1fr)}.strip .it{justify-content:flex-start;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}}

  /* section base */
  section.blk{padding:clamp(60px,8vw,100px) 0}
  .shead{max-width:660px;margin-bottom:44px}
  .shead.center{margin-left:auto;margin-right:auto;text-align:center}
  .shead h2{font-size:clamp(30px,4.2vw,48px);margin-top:12px;font-weight:800;letter-spacing:-.01em}
  .shead p{margin-top:16px;font-size:17px;color:var(--body)}

  /* about */
  .about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  .about-media{position:relative}
  .about-media img{border-radius:16px;width:100%;height:100%;object-fit:cover;box-shadow:0 30px 60px rgba(20,30,40,.18)}
  .about-media .exp{position:absolute;left:-18px;bottom:-18px;background:var(--red);color:#fff;border-radius:14px;padding:20px 24px;box-shadow:0 16px 34px rgba(180,80,15,.30);text-align:center}
  .about-media .exp b{font:800 40px "Poppins";display:block;line-height:1}
  .about-media .exp small{font:600 13px "Inter";opacity:.94}
  .about-copy .eyebrow{margin-bottom:8px;display:block}
  .about-copy p.big{color:var(--body);font-size:17px;margin:18px 0 24px}
  .checks{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;margin-bottom:30px}
  .checks div{display:flex;gap:11px;align-items:flex-start;font:600 15px "Inter";color:var(--ink-2)}
  .checks .ck{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(63,107,58,.14);color:var(--ok);display:grid;place-content:center;font-size:13px;font-weight:700}

  /* featured services */
  .feat{background:var(--alt)}
  .fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .fcard{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(20,30,40,.08);transition:transform .18s,box-shadow .18s}
  .fcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(20,30,40,.15)}
  .fcard .ph{height:212px;overflow:hidden;position:relative}
  .fcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
  .fcard:hover .ph img{transform:scale(1.07)}
  .fcard .ph .tag{position:absolute;left:16px;top:16px;background:var(--red);color:#fff;font:700 12px "Poppins";letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:100px}
  .fcard .body{padding:26px 24px 28px}
  .fcard h3{font-size:22px;margin-bottom:10px}
  .fcard p{font-size:15px;color:var(--body);margin-bottom:20px}
  .fcard .lnk{font:700 14px "Poppins";color:var(--red);display:inline-flex;gap:7px;align-items:center;min-height:44px;padding:4px 0}

  /* offer tiles */
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .tile{border-radius:14px;padding:32px 28px;border:1px solid var(--line);background:#fff;transition:transform .16s,box-shadow .16s}
  .tile:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(20,30,40,.1)}
  .tile.navy{background:var(--navy);border-color:var(--navy)}
  .tile .ic{font-size:30px;margin-bottom:14px;display:block}
  .tile h3{font-size:20px;margin-bottom:9px}
  .tile p{font-size:14.5px;color:var(--body);line-height:1.6}
  .tile.navy h3{color:#fff} .tile.navy p{color:#c7d6e2} .tile.navy .ic{filter:grayscale(1) brightness(4)}

  /* stats */
  .stats{background:var(--navy);color:#fff;position:relative;overflow:hidden}
  .stats::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 100px)}
  .stats .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;padding-top:58px;padding-bottom:58px}
  .stat b{font:800 clamp(40px,5vw,56px) "Poppins";display:block;line-height:1;color:#fff}
  .stat b span{color:var(--amber)}
  .stat small{font:600 14px "Inter";color:#b6c6d3;margin-top:8px;display:block}

  /* faq */
  .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}
  details.q{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
  details.q[open]{border-color:var(--red);box-shadow:0 10px 26px rgba(20,30,40,.07)}
  details.q summary{list-style:none;cursor:pointer;padding:19px 22px;font:600 16px "Poppins";color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary::after{content:"+";font:700 22px "Poppins";color:var(--red);flex:0 0 auto}
  details.q[open] summary::after{content:"–"}
  details.q .a{padding:0 22px 20px;color:var(--body);font-size:15px;line-height:1.65}

  /* testimonials */
  .test{background:var(--alt)}
  .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
  .tcard{background:#fff;border-radius:16px;padding:28px 26px;box-shadow:0 14px 34px rgba(20,30,40,.08);position:relative}
  .tcard .quote{position:absolute;top:16px;right:24px;font:800 60px "Poppins";color:var(--alt-2);line-height:1}
  .tcard .st{color:var(--gold);letter-spacing:2px;font-size:16px;margin-bottom:12px}
  .tcard p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:18px;position:relative;z-index:2}
  .tcard .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
  .tcard .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red-dd));color:#fff;display:grid;place-content:center;font:800 16px "Poppins"}
  .tcard .who b{display:block;color:var(--ink);font:700 15px "Poppins"}
  .tcard .who small{color:var(--muted);font-size:12.5px}

  /* final cta + form */
  .final{position:relative;color:#fff;
    background:linear-gradient(180deg,rgba(18,20,22,.90),rgba(13,14,16,.95)),url("../img/lawn-sunset-tree.jpg") center 50%/cover no-repeat}
  .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .final h2{color:#fff;font-size:clamp(30px,4.2vw,46px);font-weight:800;letter-spacing:-.01em}
  .final p.lead{color:#cddae4;font-size:18px;max-width:480px;margin:18px 0 26px}
  .final .fbul{display:grid;gap:12px;margin-bottom:8px}
  .final .fbul div{display:flex;gap:11px;align-items:center;color:#eaf1f6;font:600 15px "Inter"}
  .final .fbul .ck{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(227,173,64,.22);color:var(--amber);display:grid;place-content:center;font-weight:700;font-size:13px}
  .qform{background:#fff;border-radius:18px;padding:32px 30px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
  .qform h3{font-size:23px;font-weight:800;margin-bottom:4px}
  .qform .qlead{color:var(--body);font-size:14.5px;margin-bottom:20px}
  .qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .qfld{margin-bottom:12px}
  .qfld input,.qfld select{width:100%;background:#f7f9fb;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:13px 14px;font:400 15px "Inter",sans-serif}
  .qfld input::placeholder{color:var(--muted)}
  .qfld input:focus,.qfld select:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,138,43,.14)}
  .qform .btn-red{width:100%;margin-top:6px}
  .qform .fine{margin-top:12px;font:500 12px "Inter";color:var(--muted);text-align:center}
  #qok{display:none;text-align:center;padding:26px 0}
  #qok .chk{width:56px;height:56px;border-radius:50%;background:rgba(63,107,58,.14);color:var(--ok);display:grid;place-content:center;margin:0 auto 14px;font-size:28px}
  #qok h3{margin-bottom:6px}#qok p{color:var(--body);font-size:14.5px}

  /* footer */
  footer.foot{background:var(--navy-d);color:#9fb0bd;padding:60px 0 30px}
  .fgrid,.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:36px;margin-bottom:40px}
  .foot .brand{color:#fff;margin-bottom:16px}
  .foot .brand span{color:var(--red-l)}
  .foot p.desc{font-size:14.5px;line-height:1.7;max-width:280px}
  .fcol h5,.foot h4{color:#fff;font:700 14px "Poppins";letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
  /* the template emits a bare <ul> in each footer column */
  .foot ul{list-style:none;margin:0;padding:0}
  .fcol a,.fcol p.li,.foot ul a{display:block;color:#9fb0bd;font-size:14.5px;margin-bottom:11px;transition:color .15s}
  .fcol a:hover,.foot ul a:hover{color:#fff}
  .fbot,.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:13px}

  /* responsive */
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr}
    .hero-media{min-height:300px;order:2}
    .about-grid{grid-template-columns:1fr;gap:44px}
    .about-media .exp{left:auto;right:18px}
    .fcards,.tiles,.tgrid{grid-template-columns:1fr 1fr}
    .stats .wrap{grid-template-columns:1fr 1fr;gap:36px 20px}
    .faq-grid{grid-template-columns:1fr;gap:30px}
    .fgrid,.foot-grid{grid-template-columns:1fr 1fr}
    .final-grid{grid-template-columns:1fr;gap:36px}
  }
  @media(max-width:680px){
    .menu .lnk,.menu>.btn{display:none}
    .hamb{display:flex}
    .menu.open{position:absolute;top:78px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 20px 18px;box-shadow:0 12px 24px rgba(20,30,40,.1);z-index:60}
    .menu.open .lnk{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
    .menu.open>.btn{display:inline-flex;margin-top:14px;justify-content:center}
    .fcards,.tiles,.tgrid,.fgrid,.foot-grid,.checks{grid-template-columns:1fr}
    .hero-cta .btn{width:100%}
    .cta-row .btn{width:100%}
  }

  /* ===== inner pages ===== */
  .page-hero{position:relative;color:#fff;padding:clamp(56px,8vw,90px) 0 clamp(48px,6vw,70px);
    background:linear-gradient(180deg,rgba(16,18,20,.82),rgba(13,14,16,.92)),url("../img/lawn-sunset-tree.jpg") center 50%/cover no-repeat}
  .page-hero .crumb{font:600 13.5px "Inter";color:#a9bccb;letter-spacing:.02em;margin-bottom:14px}
  .page-hero .crumb a{color:#a9bccb} .page-hero .crumb a:hover{color:#fff}
  .page-hero h1{color:#fff;font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.01em;max-width:820px}
  .page-hero p{color:#cddae4;font-size:clamp(16px,1.5vw,19px);max-width:600px;margin-top:16px}
  .page-hero .hcta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

  .prose{max-width:760px}
  .prose h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.01em;margin:38px 0 14px}
  .prose h3{font-size:22px;font-weight:700;margin:26px 0 8px}
  .prose p{color:var(--body);font-size:17px;margin-bottom:16px}
  .prose ul{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:10px}
  .prose ul li{position:relative;padding-left:30px;color:var(--ink-2);font:500 16px "Inter"}
  .prose ul li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;background:rgba(63,107,58,.14);color:var(--ok);border-radius:50%;display:grid;place-content:center;font-size:12px;font-weight:700}

  /* service detail rows */
  .srow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:clamp(48px,7vw,80px) 0;border-top:1px solid var(--line)}
  .srow:first-child{border-top:0}
  .srow.rev .srow-media{order:2}
  .srow-media img{border-radius:16px;width:100%;height:100%;max-height:420px;object-fit:cover;box-shadow:0 26px 54px rgba(20,30,40,.16)}
  .srow-copy .eyebrow{display:block;margin-bottom:8px}
  .srow-copy h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
  .srow-copy p{color:var(--body);font-size:16.5px;margin-bottom:16px}

  /* contact layout */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .info-card{background:var(--alt);border:1px solid var(--line);border-radius:16px;padding:30px 28px;margin-bottom:18px}
  .info-card h3{font-size:20px;font-weight:800;margin-bottom:16px}
  .info-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
  .info-row .ic{flex:0 0 auto;width:44px;height:44px;border-radius:11px;background:var(--red);color:#fff;display:grid;place-content:center;font-size:19px}
  .info-row b{display:block;color:var(--ink);font:700 15px "Poppins"}
  .info-row span{color:var(--body);font-size:14.5px}
  .contact-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px;box-shadow:0 20px 50px rgba(20,30,40,.08)}
  .contact-form h3{font-size:24px;font-weight:800;margin-bottom:4px}
  .contact-form .qlead{color:var(--body);font-size:14.5px;margin-bottom:22px}
  .embed-note{margin-top:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:var(--alt);color:var(--muted);font:500 12.5px "Inter";text-align:center}

  @media(max-width:900px){
    .srow,.srow.rev{grid-template-columns:1fr;gap:30px}
    .srow.rev .srow-media{order:0}
    .contact-grid{grid-template-columns:1fr;gap:32px}
  }

  /* service areas grid */
  .area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .area{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font:600 15px "Inter";color:var(--ink-2);transition:border-color .15s,box-shadow .15s,transform .15s}
  .area:hover{border-color:var(--red);box-shadow:0 8px 20px rgba(20,30,40,.08);transform:translateY(-2px)}
  .area .pin{color:var(--red);font-size:16px;flex:0 0 auto}
  .radius-note{margin-top:28px;background:var(--alt);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:18px 20px;color:var(--body);font-size:15.5px}
  .radius-note b{color:var(--ink)}
  @media(max-width:900px){.area-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.area-grid{grid-template-columns:1fr}}

  /* ===== how we work / process ===== */
  .process{background:var(--alt)}
  .psteps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:20px}
  .pstep{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 24px 26px;position:relative;transition:transform .16s,box-shadow .16s}
  .pstep:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(20,30,40,.1)}
  .pstep .pnum{position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-content:center;font:800 18px "Poppins";box-shadow:0 8px 18px rgba(180,80,15,.30)}
  .pstep .pic{font-size:28px;display:block;margin:14px 0 12px}
  .pstep h3{font-size:18px;margin-bottom:8px}
  .pstep p{font-size:14.5px;color:var(--body);line-height:1.6}
  @media(max-width:900px){.psteps{grid-template-columns:1fr 1fr;gap:26px 22px}}
  @media(max-width:560px){.psteps{grid-template-columns:1fr;gap:28px}}

  /* ===== featured projects gallery ===== */
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
  .pcard{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(20,30,40,.1);aspect-ratio:4/3}
  .pcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
  .pcard:hover img{transform:scale(1.08)}
  .pcard .pcap{position:absolute;left:0;right:0;bottom:0;padding:42px 18px 16px;background:linear-gradient(180deg,transparent,rgba(15,20,28,.88));color:#fff}
  .pcard .pcap b{display:block;font:700 15.5px "Poppins";margin-bottom:3px}
  .pcard .pcap span{font:600 12.5px "Inter";color:#cfe0f0;display:inline-flex;align-items:center;gap:5px}
  @media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.pgrid{grid-template-columns:1fr}}

  /* ===== why Dawn Till Dusk credentials strip ===== */
  .creds{background:var(--navy);color:#fff;position:relative;overflow:hidden}
  .creds::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 100px)}
  .creds .wrap{position:relative;padding-top:clamp(58px,7vw,88px);padding-bottom:clamp(58px,7vw,88px)}
  .creds .shead h2{color:#fff}
  .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;margin-top:10px}
  .citem{display:flex;gap:14px;align-items:flex-start}
  .citem .cic{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:rgba(224,138,43,.18);border:1px solid rgba(180,80,15,.42);color:var(--red-l);display:grid;place-content:center;font-size:21px}
  .citem b{display:block;color:#fff;font:700 16px "Poppins";margin-bottom:3px}
  .citem p{color:#b6c6d3;font-size:14px;line-height:1.55}
  @media(max-width:820px){.cgrid{grid-template-columns:1fr 1fr;gap:24px}}
  @media(max-width:520px){.cgrid{grid-template-columns:1fr}}

  /* ===== inline SVG icon system ===== */
  .ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:26px;height:26px;display:block;flex:0 0 auto}
  .ico-in{width:15px;height:15px;display:inline-block;vertical-align:-2px;stroke-width:2}
  .ico-ck{width:14px;height:14px;stroke-width:2.6}
  .strip .it .ic{filter:none;display:inline-flex}
  .strip .it .ic .ico{width:23px;height:23px;color:#fff}
  .tile .ic{color:var(--red)}
  .tile.navy .ic{color:#fff;filter:none}
  .pstep .pic{color:var(--red);display:inline-flex}
  .rev-badge .ico{width:18px;height:18px}
  .pcard .pcap span .ico{width:13px;height:13px;display:inline-block;vertical-align:-2px}
  .util .l .ico,.util .r .ico{color:inherit}
  .btn .ico{width:18px;height:18px}
  .chk .ico-ck{width:26px;height:26px;stroke-width:2.2}
  .info-row .ic .ico{width:24px;height:24px}
  .aar-chat-send .ico{width:18px;height:18px}
  .aar-chat-bubble .aar-chat-ic .ico{width:28px;height:28px}

  /* ===== chat widget ===== */
  .aar-chat{position:fixed;right:22px;bottom:22px;z-index:9000;font-family:"Inter",system-ui,sans-serif}
  .aar-chat-bubble{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;background:var(--red);color:#fff;box-shadow:0 12px 30px rgba(224,138,43,.45);display:grid;place-content:center;transition:transform .18s,box-shadow .18s}
  .aar-chat-bubble:hover{transform:translateY(-3px) scale(1.05)}
  .aar-chat-bubble .aar-chat-ic{font-size:26px;line-height:1}
  .aar-chat-panel{position:absolute;right:0;bottom:74px;width:340px;max-width:calc(100vw - 44px);background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(15,20,28,.4);overflow:hidden;display:flex;flex-direction:column;transform-origin:bottom right;opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:opacity .22s ease,transform .22s ease}
  .aar-chat.open .aar-chat-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .aar-chat.open .aar-chat-bubble{transform:scale(.9)}
  .aar-chat-head{background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;padding:15px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .aar-chat-head-t b{display:block;font:700 14.5px "Poppins";letter-spacing:.01em}
  .aar-chat-head-t small{display:block;color:#c7d6e2;font-size:11.5px;margin-top:3px}
  .aar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3f6b3a;margin-right:5px;vertical-align:middle;box-shadow:0 0 0 3px rgba(63,107,58,.25)}
  .aar-chat-x{background:rgba(255,255,255,.14);border:none;color:#fff;width:28px;height:28px;border-radius:8px;font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto;transition:background .15s}
  .aar-chat-x:hover{background:rgba(255,255,255,.28)}
  .aar-chat-body{padding:16px 14px;height:300px;overflow-y:auto;background:#f5f8fb;display:flex;flex-direction:column;gap:10px}
  .aar-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;animation:aarIn .25s ease;word-wrap:break-word}
  @keyframes aarIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .aar-bot{align-self:flex-start;background:#fff;color:var(--ink-2);border:1px solid var(--line);border-bottom-left-radius:4px}
  .aar-user{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
  .aar-typing{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px;padding:12px 14px;display:flex;gap:4px}
  .aar-typing span{width:7px;height:7px;border-radius:50%;background:#9db2c4;animation:aarBounce 1s infinite}
  .aar-typing span:nth-child(2){animation-delay:.15s}.aar-typing span:nth-child(3){animation-delay:.3s}
  @keyframes aarBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
  .aar-cap{align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;animation:aarIn .25s ease}
  .aar-cap input{width:100%;background:#f7f9fb;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:400 14px "Inter";color:var(--ink)}
  .aar-cap input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,138,43,.14)}
  .aar-cap button{background:var(--red);color:#fff;border:none;border-radius:9px;padding:11px;font:700 14px "Poppins";cursor:pointer;transition:background .15s}
  .aar-cap button:hover{background:var(--red-dd)}
  .aar-chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
  .aar-chat-input input{flex:1;min-width:0;background:#f7f9fb;border:1px solid var(--line);border-radius:100px;padding:11px 15px;font:400 14px "Inter";color:var(--ink)}
  .aar-chat-input input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(224,138,43,.14)}
  .aar-chat-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;background:var(--red);color:#fff;font-size:15px;cursor:pointer;transition:background .15s,transform .15s}
  .aar-chat-send:hover{background:var(--red-dd);transform:scale(1.06)}
  @media(max-width:420px){.aar-chat{right:16px;bottom:16px}.aar-chat-panel{width:calc(100vw - 32px)}}


/* A2P SMS consent — unchecked + OPTIONAL by design: consent may never be a condition of submitting */
.optin{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;cursor:pointer;text-align:left}
.optin input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--red,#8a1f1f);cursor:pointer}
.optin span{font:400 12px/1.5 "Inter",sans-serif;color:var(--muted,#55606b)}


/* ===== Meet the Owner ===== */
.owner{background:var(--alt)}
.owner-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,58px);align-items:center}
.owner-media{position:relative}
.owner-media img{width:100%;height:auto;border-radius:18px;box-shadow:0 30px 60px rgba(20,30,40,.2)}
.owner-media .vtag{position:absolute;left:-14px;bottom:-16px;background:var(--navy);color:#fff;border-radius:12px;padding:12px 18px;box-shadow:0 16px 34px rgba(20,30,40,.3);display:flex;align-items:center;gap:9px;font:700 14px "Poppins"}
.owner-media .vtag .ico{width:20px;height:20px;color:var(--amber)}
.owner-copy .eyebrow{display:block;margin-bottom:10px}
.owner-copy h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;letter-spacing:-.01em}
.owner-copy p{color:var(--body);font-size:17px;margin:18px 0 0}
.owner-copy p.sig{font:700 16px "Poppins";color:var(--ink);margin-top:20px}
.owner-copy p.sig small{display:block;font:500 14px "Inter";color:var(--muted);margin-top:2px}
@media(max-width:860px){.owner-grid{grid-template-columns:1fr;gap:40px}.owner-media .vtag{left:auto;right:14px}}

/* ===== veteran trust bar ===== */
.vetbar{background:var(--navy-d);color:#fff}
.vetbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;padding-top:20px;padding-bottom:20px;text-align:center}
.vetbar .vb{display:inline-flex;align-items:center;gap:10px;font:700 15px "Poppins";color:#fff}
.vetbar .vb .ico{width:21px;height:21px;color:var(--amber);flex:0 0 auto}
.vetbar .vb small{font:500 13.5px "Inter";color:#b6c6d3}
@media(max-width:560px){.vetbar .wrap{flex-direction:column;gap:12px;align-items:flex-start;text-align:left}}

/* ===== gallery / recent work ===== */
.galhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:46px 0 20px;border-top:1px solid var(--line);padding-top:30px}
.galhead:first-of-type{border-top:0;padding-top:0;margin-top:0}
.galhead h3{font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.01em}
.galhead p{font-size:15px;color:var(--body);margin:0}
.galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.galgrid.two{grid-template-columns:repeat(2,1fr)}
figure.gal{margin:0;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 30px rgba(20,30,40,.08);display:flex;flex-direction:column}
figure.gal .gph{aspect-ratio:4/3;overflow:hidden;background:var(--alt-2)}
figure.gal .gph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
figure.gal:hover .gph img{transform:scale(1.05)}
figure.gal figcaption{padding:15px 17px 18px;font:400 14.5px/1.55 "Inter",sans-serif;color:var(--body)}
figure.gal figcaption b{display:block;font:700 15.5px "Poppins",sans-serif;color:var(--ink);margin-bottom:4px}
figure.gal.tall .gph{aspect-ratio:3/4}
@media(max-width:900px){.galgrid,.galgrid.two{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.galgrid,.galgrid.two{grid-template-columns:1fr}}

/* mobile brand lockup — keep "DAWN TILL DUSK" on one line instead of stacking to three */
@media(max-width:600px){
  header.top .brand{gap:8px;font-size:16px;letter-spacing:0;white-space:nowrap;min-width:0}
  .foot .brand{gap:8px;font-size:16px;letter-spacing:0;min-width:0;flex-wrap:wrap}
  .brand .logo{height:38px}
  .brand span{display:block;font-size:12.5px;letter-spacing:.06em;line-height:1.1}
  .nav{height:66px;gap:10px}
}
@media(max-width:380px){
  .brand{font-size:14.5px}
  .brand .logo{height:34px}
  .brand span{font-size:12px}
}

/* menu offset follows the shrunken mobile header (nav is 66px under 600px, not 78px) */
@media(max-width:600px){ .menu.open{top:66px} }
/* make sure hero art is never suppressed on small screens */
@media(max-width:680px){ .hero{background-attachment:scroll} .page-hero{background-attachment:scroll} }

/* let the banner photography read on small screens — the desktop scrim is too heavy at phone size */
@media(max-width:680px){
  .page-hero{background:linear-gradient(180deg,rgba(14,16,18,.52),rgba(11,12,14,.78)),url("../img/lawn-sunset-tree.jpg") center 48%/cover no-repeat}
  .hero{background:linear-gradient(180deg,rgba(14,16,18,.56),rgba(11,12,14,.82)),url("../img/hero-bed-heuchera.jpg") center 45%/cover no-repeat}
}

/* ── Aurey revision round: four-pic owner block, two-up service media, photo placeholders ── */

/* Meet the Owner: four photographs in one 2x2 block, same footprint as the old single portrait */
.owner-quad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.owner-quad > img,
.owner-quad > .mediahold{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;
  box-shadow:0 18px 38px rgba(20,30,40,.18)
}
/* bunker-slab.jpg is an uncropped phone screenshot. The square tile above is what hides the
   Facebook chrome and the caption bar; never let this tile get taller than it is wide. */
.owner-quad > img.fb-crop{aspect-ratio:1/1;background:#0d0f11}
.owner-role{
  font:700 13.5px/1 "Poppins",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:-4px 0 16px
}

/* two photographs side by side inside one service row */
.srow-media.srow-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.srow-media.srow-two > img,
.srow-media.srow-two > figure.ba > img{
  aspect-ratio:3/4;height:auto;max-height:none;width:100%;object-fit:cover;border-radius:16px
}
/* before / after pair — same property, labelled so the order can't be misread */
.srow-media.srow-two > figure.ba{position:relative;margin:0;display:block}
figure.ba .ba-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(21,24,28,.88);color:#fff;
  font:700 12px/1 "Poppins",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;backdrop-filter:blur(3px)
}
figure.ba.is-after .ba-tag{background:var(--red)}

/* marked slot for a photograph Aurey has not sent yet */
.mediahold{
  aspect-ratio:3/4;border-radius:16px;border:2px dashed var(--alt-2);background:var(--alt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:16px;text-align:center;box-shadow:none
}
.mediahold .mh-k{
  font:700 10.5px/1 "Poppins",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--red)
}
.mediahold b{font:700 16px/1.2 "Poppins",sans-serif;color:var(--ink)}
.mediahold small{font:500 11px/1.4 "Inter",sans-serif;color:var(--muted);overflow-wrap:anywhere}

@media(max-width:900px){
  .srow-media.srow-two > img,
  .srow-media.srow-two > figure.ba > img,
  .srow-media.srow-two > .mediahold{aspect-ratio:1/1}
}
@media(max-width:560px){
  .owner-quad{gap:8px}
  .srow-media.srow-two{gap:10px}
  .mediahold{padding:12px;gap:5px}
  .mediahold b{font-size:14px}
  .mediahold small{font-size:10px}
}

/* header brand — circular badge logo + text wordmark. The earlier collision was the
   wordmark overflowing into the nav, not duplication: cap the brand and let it shrink. */
header.top .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;
  font:800 17px/1.05 "Poppins",sans-serif;letter-spacing:.01em;text-transform:uppercase;
  white-space:normal;overflow:hidden}
header.top .brand .logo{height:42px;width:42px;flex:0 0 42px;object-fit:cover;border-radius:50%}
header.top .brand span{display:block;color:var(--red);font-size:12.5px;letter-spacing:.08em;line-height:1.15}
header.top .nav{gap:14px}
@media(max-width:1100px){header.top .brand{font-size:15px}header.top .brand .logo{height:36px;width:36px;flex:0 0 36px}}
@media(max-width:600px){header.top .brand{font-size:13.5px}header.top .brand .logo{height:32px;width:32px;flex:0 0 32px}header.top .brand span{font-size:12px}}



/* ---- 1. THE MASTHEAD BADGE -----------------------------------------
   The base sheet pins header.top .brand .logo to a hard 42x42 circle with
   object-fit:cover, which would bite a disc out of a rectangular mascot and
   throw away the thumb and the shovel. Height, WIDTH and flex-basis all have
   to be answered together or it stays 42px wide and still clipped.
   The badge keeps its own white ground and the masthead is white, so no
   keying is needed anywhere it appears on a light surface. */
header.top .brand .logo,
.foot .brand .logo{border-radius:0;object-fit:contain;background:transparent}
header.top .brand .logo{height:50px;width:auto;flex:0 0 auto}
header.top .brand{gap:12px;letter-spacing:.03em}
@media(max-width:1100px){header.top .brand .logo{height:42px;width:auto;flex:0 0 auto}}
@media(max-width:600px){header.top .brand .logo{height:36px;width:auto;flex:0 0 auto}
  header.top .brand{gap:9px}}

/* The footer is graphite, and the badge fades to WHITE at the bottom rather
   than to transparency — the figure runs behind the wordmark plate in the
   original artwork, so there is no clean edge to key. On a dark ground it
   therefore needs a white plate under it, which reads as a deliberate badge
   instead of a sticker with a hard cut across the bottom. */
.foot .brand .logo{height:46px;width:auto;flex:0 0 auto;background:#fff;
  border-radius:10px;padding:5px 7px;box-shadow:none}

/* ---- 2. HERO SCRIM ---------------------------------------------------
   The photo is a brick two-story behind a long bed of burgundy heuchera
   over fresh mulch — sky top left, house across the upper half, bed and lawn
   across the bottom. The headline sits on the left, so the left
   column is taken down hard and the right keeps the lawn and the house.
   The filename is restated from heroImg and is NOT covered by the template's
   missing-image guard, which runs before cssAppend is appended. */
.hero{background:
  linear-gradient(90deg,rgba(14,18,21,.88) 0%,rgba(14,18,21,.74) 34%,rgba(14,18,21,.34) 62%,rgba(14,18,21,.26) 100%),
  linear-gradient(180deg,rgba(14,18,21,.20),rgba(14,18,21,.42)),
  url("../img/hero-bed-heuchera.jpg") center 46%/cover no-repeat}
@media(max-width:680px){
  .hero{background:
    linear-gradient(180deg,rgba(14,18,21,.52),rgba(14,18,21,.80)),
    url("../img/hero-bed-heuchera.jpg") 54% 84%/auto 168% no-repeat;
    background-attachment:scroll}
}

/* ---- 3. ONE REVIEW ---------------------------------------------------
   .tgrid is a three-column grid. A single review dropped into it sits in the
   left third looking like two are missing. It is the only third-party proof
   this business has, so it takes the full width and is given room. */
.tcard:only-child{grid-column:1 / -1;max-width:760px;margin:0 auto}
.tcard{box-shadow:0 18px 40px rgba(27,33,37,.10), 0 2px 6px rgba(27,33,37,.07)}
.tcard p{font-size:16.5px;line-height:1.72}

/* ---- 4. A SERVICE ROW WITH NO PHOTOGRAPH ----------------------------
   Snow removal has no picture and is not going to get one until it snows.
   Both rules are keyed to the ABSENCE of an img, so the row comes back to two
   columns on its own the moment a photo goes into the config. */
.srow-media:not(:has(img)){display:none}
.srow:not(:has(.srow-media img)){grid-template-columns:1fr}
.srow:not(:has(.srow-media img)) .srow-copy{max-width:820px}

/* ---- 5. THE YEAR BAND -----------------------------------------------
   Five cards, one per stretch of the Ohio year, each carrying only services
   that are on Chris's own list.

   FIVE is an awkward number in a grid and auto-fit does not save you: at
   1440 it fitted four and stranded the fifth alone on its own row. So the
   column count is stepped by hand — 5, then 3 (5 cards = 3+2, no orphan),
   then 2 with the odd last card spanning both, then 1. */
.yearband{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.yrgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px}
.yrc{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 20px 20px;display:flex;flex-direction:column;
  box-shadow:0 10px 26px rgba(27,33,37,.05)}
.yrc .when{display:inline-flex;align-items:center;align-self:flex-start;
  background:rgba(180,80,15,.08);border:1px solid rgba(180,80,15,.22);
  color:var(--blue);border-radius:100px;padding:5px 12px;
  font:700 12.5px "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* The photo is full-bleed to the card edge, so it has to climb back out of
   .yrc's own 22px/20px padding and round its own top corners. Each one was
   taken in the stretch of the year its card names — except Dec-Feb, which
   could not be, and says so in its alt text. See _macs-yearphotos.mjs. */
.yrc > img{display:block;width:calc(100% + 40px);max-width:none;margin:-22px -20px 16px;
  aspect-ratio:16/10;object-fit:cover;border-radius:13px 13px 0 0}
.yrc h3{font:700 19px/1.28 "Poppins",sans-serif;color:var(--ink);margin:14px 0 8px}
.yrc p{font:400 15px/1.62 "Inter",sans-serif;color:var(--body);margin:0 0 16px}
.yrc ul{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:7px}
.yrc li{font:600 13px "Inter",sans-serif;color:var(--ink-2);
  background:var(--alt-2);border-radius:7px;padding:5px 10px;white-space:nowrap}
@media(max-width:1180px){.yrgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(max-width:860px){.yrgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yrc:last-child:nth-child(odd){grid-column:1 / -1}}
@media(max-width:560px){.yrgrid{grid-template-columns:1fr}}

/* ---- 6. THE OWNER BAND, WITH NO PORTRAIT ----------------------------
   There is no photo of Chris yet. Rather than letterbox a job photo into
   a slot the eye reads as "the owner", the media column carries the thing a
   visitor actually wants off this section: how to reach him, and when.
   .owner-grid is .85fr/1.15fr, so the card is the narrow column by design. */
.ownercard{background:var(--navy);color:#fff;border-radius:18px;padding:30px 28px;
  box-shadow:0 30px 60px rgba(27,33,37,.22)}
.ownercard h3{font:700 18px "Poppins",sans-serif;color:#fff;margin:0 0 20px}
.ownercard dl{margin:0;display:grid;gap:17px}
.ownercard dt{font:700 12.5px "Inter",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);margin:0 0 3px}
.ownercard dd{margin:0;font:400 15.5px/1.5 "Inter",sans-serif;color:#EDF1F3;
  overflow-wrap:anywhere}
.ownercard dd a{color:#fff;font-weight:700}
.ownercard .note{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  font:400 14px/1.6 "Inter",sans-serif;color:#C9D1D6}
@media(max-width:900px){.ownercard{padding:26px 22px}}

/* ---- 7. SERVICE AREAS, THE JLS LAYOUT -------------------------------
   Ported from Cornerstone (sites9.mjs §20) by way of Royal Legacy, with the
   accent swapped to this site's orange (--red #B4500F = rgb(180,80,15)).
   Every selector is a class only /service-areas uses. */
.area-caveat{margin:26px 0 0;max-width:860px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:12px;padding:18px 22px;
  font:400 16px/1.65 "Inter",sans-serif;color:var(--body)}
.area-caveat b{color:var(--ink);font-weight:700}
.corr{margin-top:38px}
.chead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.chead h3{font:700 clamp(20px,2.4vw,26px)/1.2 "Poppins",sans-serif;color:var(--ink);margin:0}
.chead .dir{font:700 12.5px "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);background:rgba(180,80,15,.08);border:1px solid rgba(180,80,15,.22);
  border-radius:100px;padding:5px 12px}
.orient{margin:16px 0 0;max-width:860px;font:400 16px/1.68 "Inter",sans-serif;color:var(--body)}
.towns{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.towns li{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:100px;padding:10px 18px;
  font:600 15px "Inter",sans-serif;color:var(--ink-2);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.towns li:hover{border-color:rgba(180,80,15,.42);box-shadow:0 8px 20px rgba(27,33,37,.07);
  transform:translateY(-1px)}
.towns li.is-base{background:var(--navy);border-color:var(--navy);color:#fff}
.towns li.is-base small{color:var(--amber);font:700 12.5px "Inter",sans-serif;
  letter-spacing:.08em;text-transform:uppercase}
/* Pills wrap, so an odd last one strands itself in its own row on a phone.
   Two columns, and an odd last pill spans both. */
@media(max-width:560px){
  .towns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .towns li{justify-content:center;padding:10px 12px;font-size:14.5px;text-align:center}
  .towns li:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---- 8. TWO-UP SERVICE PHOTOS ----------------------------------------
   The base sheet pins .srow-media.srow-two images to aspect-ratio 3/4,
   because the pattern was written for portrait before-and-after pairs. Both
   of this site's two-up rows are LANDSCAPE photos — 1.91 and 1.88 —
   so a 3:4 box threw away 2.5x of the frame and the mulch bed came out as a
   vertical slice of brick. Flipped to 4/3, which leaves every one of the
   four photos within 1.45x of its own aspect. */
.srow-media.srow-two > img{aspect-ratio:4/3}
/* ...and once they are landscape, two of them side by side come to 196px of
   picture against 539px of copy, so the row reads as a column of text with a
   postage stamp beside it. Stacked instead: two 4:3 frames at full column
   width, which is about 610px and balances the copy. */
.srow-media.srow-two{grid-template-columns:1fr;gap:14px}

/* The "Get a Quote" link at the foot of every service row is .lnk, and the
   base sheet only colours .lnk inside a feature card — so in a service row
   it inherits --body and the one call to action in the block renders as grey
   body text. Same shape of cascade miss as .owner-role above. */
.srow-copy a.lnk{color:var(--red);font:700 15px "Poppins",sans-serif;
  display:inline-flex;gap:7px;align-items:center}

/* An odd last item in a two-column check list sits alone in its own row.
   Spanning it reads as a closing line rather than as a gap. The service-row
   lists set grid-template-columns:1fr inline, so this is a no-op there. */
.checks > div:last-child:nth-child(odd){grid-column:1 / -1}

/* The signature line under the owner band is --muted at 14px, and the band
   does not sit on white — measured 4.41 there, which misses AA by a hair.
   --body on the same ground measures 7.1. Nothing else on the site puts
   --muted on that background, so the fix is kept to this one line. The base
   sheet sets it as .owner-copy p.sig small, so a bare .sig small loses the
   cascade on specificity and silently does nothing. (This whole block is a
   template literal — a backtick in a comment ends it. It cost one build.) */
.owner-copy p.sig small{color:var(--body)}

/* Same cascade trap one line up. The base sheet intends .owner-role to be a
   small accent-coloured role line, but it writes it as .owner-role (0,1,0)
   and .owner-copy p (0,1,1) beats it — so it renders as 17px body grey on
   every site using this sheet. Restored here to what it was meant to be;
   left alone in the shared sheet so no other client's page shifts without
   being looked at. */
.owner-copy p.owner-role{font-size:13.5px;color:var(--red)}

/* Six town pills in a flex row wrap 5 + 1 between about 560 and 960, which
   strands one on its own line. A three-column grid through that band divides
   both groups exactly — six into two rows, three into one. */
@media(min-width:561px) and (max-width:960px){
  .towns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .towns li{justify-content:center}
}

/* The A2P email address is one unbreakable 36-character token and pushed the
   /text-us page 18px wider than a 360px screen. */
a[href^="mailto:"]{overflow-wrap:anywhere}

/* A feature card's photo well is a fixed 212px tall. That is fine while the
   cards are in two or three columns, but at one column the card goes full
   width and the well becomes a 2.3:1 letterbox — which took 53% of the
   height off the salvia bed, a nearly square photo. Below the
   single-column breakpoint the well takes a shape instead of a height. */
@media(max-width:680px){.fcard .ph{height:auto;aspect-ratio:4/3}}

/* ---- 9. ABOUT MEDIA --------------------------------------------------
   The about image is a near-square tree ring, not a landscape, so it is not
   stretched to the wide ratio the slot normally takes. */
.about-media img{aspect-ratio:1/1;object-fit:cover}
@media(min-width:901px){.about-media{max-width:420px}}

/* ---- 6. BEFORE & AFTER ----------------------------------------------
   All six pair photos are 1400x1050, so one 4/3 box holds every one
   of them square-on with nothing cropped away. Three pairs is an awkward
   count in a two-column grid, so the third card is centred on its own row
   rather than left hanging in the left-hand column. */
.basec{background:var(--alt)}
.bagrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.3vw,28px);margin-top:38px}
.bacard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(27,33,37,.10)}
.bacard:nth-child(odd):last-child{grid-column:1 / -1;max-width:calc(50% - 14px);margin:0 auto}
.bapair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line)}
.bapair figure.ba{position:relative;margin:0;display:block}
.bapair figure.ba img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.bacap{padding:16px 18px 19px}
.bacap b{display:block;font:700 16.5px/1.3 "Poppins",sans-serif;color:var(--ink);margin-bottom:5px}
.bacap span{font:400 14.5px/1.62 "Inter",sans-serif;color:var(--body)}
.banote{margin:30px auto 0;max-width:720px;text-align:center;
  font:400 14px/1.68 "Inter",sans-serif;color:var(--muted,#6B7278)}
@media(max-width:900px){
  .bagrid{grid-template-columns:1fr}
  .bacard:nth-child(odd):last-child{max-width:none;margin:0}
}

/* Before/after pairs sit side by side even on the narrow service rows. */
.srow-media.srow-two{gap:12px}