/* Dawn Till Dusk Construction — charcoal base + sunset gold-orange accent + field-green secondary + cream */
  :root{
    /* Repalette 2026-11-04. The green was a guess made before the logo
       existed. Javier's actual crest is deep royal PURPLE and gold — sampled
       off the artwork, its ground runs #04011d..#100330 — so the site now
       takes its colour from the one real piece of brand material he has.
       Green is kept only for tick marks, where it reads as "growing".
       ALL MEASURED (and the gold STARS are treated as text at 4.5, not as a
       graphic at 3.0 — they are a ★ glyph):
         --red   #4B1D7E  white on it 11.82  — CTA
         --red-dd #3B1764 white on it 14.07  — hover
         --amber #D4AF37  8.98 on --navy     — gold, DARK GROUNDS ONLY
         --blue  #7E6110  5.83 on white      — gold as text on light
         --red-l #C9A6F0  9.17 on --navy
         --gold  #7E6110  5.83 white / 4.69 on --alt-2  — review stars
         --body  #4A4550  9.30 white / 7.49 on --alt-2
         --muted #6A6575  5.63 on white
         --ok    #2E7D4F  5.05 on white      — tick marks
       --gold and --ok are declared: the base sheet consumes both for review
       stars and tick marks and does NOT inherit them. */
    --navy:#140833; --navy-d:#0B0420; --navy-l:#241247;
    --red:#4B1D7E; --red-d:#3B176440; --red-dd:#3B1764; --red-l:#C9A6F0;
    --amber:#D4AF37; --amber-l:#E3C359;
    --blue:#7E6110; --blue-l:#C9A6F0;
    --ink:#1A1222; --ink-2:#332A3D; --body:#4A4550; --muted:#6A6575;
    --line:#E7E3EC; --bg:#ffffff; --alt:#F7F4FA; --alt-2:#EBE4F2;
    --gold:#7E6110; --ok:#2E7D4F;
    --strip:#0F0527;
    --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(75,29,126,.30)}
  .btn-red:hover{background:var(--red-dd);transform:translateY(-2px);box-shadow:0 16px 32px rgba(75,29,126,.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-tree-rings.jpg") center 50%/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(75,29,126,.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-striped-backyard.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-striped-backyard.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(75,29,126,.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(75,29,126,.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-striped-backyard.jpg") center 48%/cover no-repeat}
  .hero{background:linear-gradient(180deg,rgba(14,16,18,.56),rgba(11,12,14,.82)),url("../img/hero-tree-rings.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}}



/* ------------------------------------------------------------------
   THE PHOTOGRAPHS ARRIVED (2026-11-04)
   The whole photo-free block that used to live here is DELETED, not
   disabled. Two of its rules painted the hero and the closing band
   with a gradient marked !important — they would have covered the
   new hero photograph. The rest were :not(:has(img)) guards that
   simply stop matching now that every row has a picture, exactly as
   the original build intended.
   ------------------------------------------------------------------ */

/* ---- THE MASTHEAD ---------------------------------------------------
   What shipped: the FULL crest — crown, RL roundel, "ROYAL LEGACY" and
   "LANDSCAPING" — squeezed into a 42x46 box on a white bar, with the
   words ROYAL LEGACY set in type right beside it. So the name was said
   twice, once illegibly, and the crest's own dark ground read as a
   sticker someone had stuck on the header.

   Two fixes. The image is now cropped to the MARK alone (crown + RL
   roundel + lavender sprigs; img/rl-badge.jpg, cut in _rl-photos3.mjs),
   so the type beside it is the only place the name appears. And the bar
   moves to the crest instead of the crest to the bar: #0B0420 is
   --navy-d, which the .util strip above already uses, so the header is
   now one dark block and the badge's ground disappears into it.

   Keying the ground out to transparency was tried first and rejected —
   it is a JPEG gradient and the key fringes the white R and L badly on
   any light surface.

   Five things have to be answered together or the phone menu opens as a
   white sheet with invisible links: header background, nav link colour,
   brand colour, hamburger bars, and .menu.open at max-width:680px. */
header.top{background:var(--navy-d);border-bottom:1px solid rgba(212,175,55,.28);
  box-shadow:0 2px 20px rgba(11,4,32,.30)}
header.top .brand{color:#fff}
header.top .brand span{color:var(--amber)}
header.top .menu a.lnk{color:#E9E1F6}
header.top .menu a.lnk:hover,header.top .menu a.lnk:focus-visible{color:var(--amber)}
.hamb span{background:#E9E1F6}
@media(max-width:680px){
  header.top .menu.open{background:var(--navy-d);border-bottom:1px solid rgba(212,175,55,.28)}
}
/* The base sheet pins the logo to a hard 42x42 circle and steps the height
   down again at 600px, so width and flex-basis have to be answered too —
   an unscoped height alone leaves it 42px wide and still clipped round. */
header.top .brand .logo,
.foot .brand .logo{border-radius:0;object-fit:contain;background:transparent}
/* The mark was 52px of crest against 17px of type: one lockup, two weights.
   Mark down, wordmark up, so the two read as a pair. The PNG's artwork is
   centred inside its own box (_rl-badge2.mjs) so the optical centre of the
   crest now lines up with the middle of the type instead of sitting left of
   it with all the slack piled up on the right. */
header.top .brand .logo{height:46px;width:auto;flex:0 0 auto}
.foot .brand .logo{height:44px;width:auto;flex:0 0 auto;box-shadow:none}
header.top .brand,.foot .brand{gap:13px;font-size:20.5px;letter-spacing:.035em}
@media(max-width:600px){
  header.top .brand .logo{height:38px;width:auto;flex:0 0 auto}
  header.top .brand{gap:10px;font-size:16.5px}
}

/* The three reviews still carry real weight — they are the only
   third-party proof — so they keep the room they were given. */
.tcard{box-shadow:0 18px 40px rgba(20,8,51,.10), 0 2px 6px rgba(20,8,51,.07)}
.tcard p{font-size:16px;line-height:1.72}

/* Owner portrait: a headshot in a 3:2 landscape file, so both places that
   show it have to square it or it letterboxes across the column. */
.about-media img,.owner-media img{aspect-ratio:1/1;object-fit:cover}
@media(min-width:901px){.about-media{max-width:400px}.owner-media{max-width:430px}}


/* ---- HERO SCRIM ------------------------------------------------------
   See _rl-hero.mjs for why. Two layers: the left-hand text column stays
   dark enough to measure against, the right-hand side keeps the grass.
   Filename is restated from heroImg (hero-tree-rings.jpg) and is NOT covered by the
   template's missing-image guard, which runs before cssAppend. */
.hero{background:
  linear-gradient(90deg,rgba(11,4,32,.84) 0%,rgba(11,4,32,.68) 36%,rgba(11,4,32,.30) 62%,rgba(11,4,32,.24) 100%),
  linear-gradient(180deg,rgba(11,4,32,.14),rgba(11,4,32,.40)),
  url("../img/hero-tree-rings.jpg") center top/cover no-repeat}
@media(max-width:680px){
  .hero{background:
    linear-gradient(180deg,rgba(11,4,32,.46),rgba(11,4,32,.78)),
    url("../img/hero-tree-rings.jpg") 58% 22%/cover no-repeat;
    background-attachment:scroll}
}

/* ---- SERVICE AREAS, THE JLS LAYOUT ---------------------------------
   Ported from Cornerstone (sites9.mjs §20), which took it from JLS Outdoor.
   Those rules live in each site's own sheet, not the shared one, so they are
   reproduced here with the bronze swapped for Royal Legacy's purple
   (--red #4B1D7E = rgb(75,29,126)). Every selector is a class only
   /service-areas uses, so no other page and no other site is touched. */
.area-caveat{margin:26px 0 0;max-width:860px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--amber);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{padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
.corr:first-of-type{padding-top:0;margin-top:0;border-top:0}
.chead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:10px}
.chead h3{font:700 clamp(21px,2.7vw,28px)/1.15 "Poppins",sans-serif;letter-spacing:-.018em;color:var(--ink)}
.chead .dir{font:700 12px/1 "Poppins",sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:var(--red);background:rgba(75,29,126,.08);border:1px solid rgba(75,29,126,.22);
  border-radius:100px;padding:7px 13px;white-space:nowrap}
.corr p.orient{color:var(--body);font-size:16px;line-height:1.65;max-width:780px;margin-bottom:18px}
.towns{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.towns li{display:inline-flex;align-items:center;gap:9px;min-height:44px;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::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:0 0 auto}
.towns li:hover{border-color:var(--red);box-shadow:0 8px 18px rgba(20,8,51,.10);transform:translateY(-2px)}
.towns li.is-base{border-color:var(--red);background:var(--alt);color:var(--ink);font-weight:700}
.towns li.is-base::before{background:var(--red);width:8px;height:8px}
.towns li small{font:600 12.5px "Inter",sans-serif;color:var(--muted)}
/* Phone width is where the orphan came back: three pills at 390px wrap 2+1
   and the lone one hangs at the left of an empty row. Below 560 the row
   becomes a two-column grid and an odd final pill spans both columns, so a
   trailing single reads as deliberate full-width rather than left over. */
@media(max-width:960px){
  .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}
}

/* ---- BEFORE & AFTER SECTION ----------------------------------------
   figure.ba and .ba-tag are already styled in the shared sheet (the service
   rows use them); only .srow-media.srow-two scopes the image sizing, so this
   grid brings its own. One square ratio across all six pairs: the mown-lawn
   frames are about 9:8 and the clearing pair is 3:4, and 1:1 is the only box
   that takes a modest bite out of both. */
.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(20,8,51,.09)}
.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:1/1;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)}
@media(max-width:900px){.bagrid{grid-template-columns:1fr}}

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