/* Dawn Till Dusk Construction — charcoal base + sunset gold-orange accent + field-green secondary + cream */
  :root{
    --ink:#1C1A17;
    --ink-2:#2B2822;
    --body:#4C4740;
    --muted:#7A736A;
    --red:#8A5A14;
    --red-l:#B8832A;
    --red-d:#6E4710;
    --red-dd:#6E4710;
    --navy:#131110;
    --navy-d:#070706;
    --navy-l:#201D1A;
    --amber:#D9A441;
    --amber-l:#E8BC66;
    --gold:#8A5A14;
    --ok:#6E4710;
    --strip:#000;
    --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(138,90,20,.30)}
  .btn-red:hover{background:var(--red-dd);transform:translateY(-2px);box-shadow:0 16px 32px rgba(138,90,20,.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/wall-section.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(138,90,20,.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/mailbox-brick-b.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/mailbox-brick-b.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(138,90,20,.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(138,90,20,.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/mailbox-brick-b.jpg") center 48%/cover no-repeat}
  .hero{background:linear-gradient(180deg,rgba(14,16,18,.56),rgba(11,12,14,.82)),url("../img/wall-section.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}}




/* One review left after Eck Bulner came off (his words named Tim and a
   customer quote is not edited). The band is a 2-column grid, so a lone
   card sat 439px wide against 439px of nothing. Centre it and let it
   breathe. Same fix as Mac’s. This PREMIUM const is local to this file,
   so no other site is touched. */
.tcard:only-child{grid-column:1 / -1;max-width:760px;margin:0 auto}
/* ====================================================================
   CORNERSTONE MASONRY — refinement layer (this site only)
   Appended after the shared sheet. OVERRIDES ONLY — nothing above this
   point is edited, because the sheet above is shared by twelve sites.

   Texas limestone and live oak: a warm cream ground, warm charcoal ink,
   and a dark bronze accent taken off the sandstone in his own photos.
   Brought up to the Dawn Till Dusk / JLS / Envision Works standard:
   same air between sections, same type scale, same photo framing.
   ==================================================================== */
:root{
  --bg:#FAF6EF;
  --alt:#F2ECE1;
  --alt-2:#E7DFD0;
  --line:#E4DCCE;
}
/* MEASURED against the cream ground (#FAF6EF, L=0.9245):
     --ink  #1C1A17  16.8:1      --body  #4C4740  7.2:1
     --red  #8A5A14   5.49:1     --red-d #6E4710  7.4:1
   --amber #D9A441 is ~2:1 on the cream and stays on DARK GROUNDS ONLY. */

/* ---- 0. air ---------------------------------------------------------
   The shared sheet runs 60-100px between sections; the three sibling
   sites run 76-132. Cornerstone was reading cramped beside them. */
section.blk{padding:clamp(76px,9vw,132px) 0}
.shead{max-width:700px;margin-bottom:52px}
.shead p{margin-top:14px;font-size:16.5px;line-height:1.75;max-width:62ch}
.shead.center p{margin-left:auto;margin-right:auto}
.srow{padding:clamp(56px,7.5vw,92px) 0}
.about-grid{gap:clamp(40px,5vw,72px)}

/* ---- 1. type --------------------------------------------------------
   One notch tighter and one weight lighter than the base sheet's 800.
   That restraint is most of what makes the siblings read as designed. */
.eyebrow{font:700 12.5px/1.25 "Inter",system-ui,sans-serif;letter-spacing:.22em}
@media(min-width:821px){.eyebrow{line-height:1}}
.shead h2{font-size:clamp(28px,3.7vw,43px);font-weight:700;letter-spacing:-.028em;line-height:1.14}
.hero-left h1{font-weight:700;letter-spacing:-.032em;font-size:clamp(36px,4.7vw,57px);
  text-shadow:0 2px 34px rgba(0,0,0,.45)}
.hero-left p.sub{font-size:17px;line-height:1.7;color:#E9E4DC;max-width:54ch}
.final h2,.srow-copy h2,.prose h2,.about-copy h2{font-weight:700;letter-spacing:-.026em}
/* MEASURED on rendered pixels at 1440: against cut limestone the shared
   102deg scrim left the amber <em> in the H1 at 3.4:1 on its brightest
   1% of backdrop and the amber eyebrow at 4.47:1. This is an ADDITIVE
   left-hand veil rather than a rewrite of the base .hero rule, so the
   photograph keeps its full brightness from 72% rightwards and the
   phone scrim in the base sheet is left exactly as it is. Scoped to the
   width where the copy actually occupies the left column: below 901px
   the base sheet stacks the hero and the copy spans the full width. */
@media(min-width:901px){
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(10,11,13,.46) 0%,rgba(12,14,16,.36) 42%,rgba(14,16,18,0) 76%)}
}
/* 681-900: the base sheet is still serving the 102deg DESKTOP scrim here,
   but it has already stacked the hero to one column, so the right-hand end
   of every line of copy sits over the thinnest 40% of it. The veil leans
   the other way to compensate. */
@media(min-width:681px) and (max-width:900px){
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(10,11,13,.18) 0%,rgba(10,11,13,.34) 50%,rgba(10,11,13,.50) 100%)}
}
/* phones: the base's own vertical scrim is close, and measured on rendered
   pixels the body copy came in at 4.38:1 on its brightest 3% of backdrop.
   A flat 14% lifts everything clear without flattening the photograph. */
@media(max-width:680px){
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:rgba(10,11,13,.14)}
}
/* THE PHONE CROP. Vertically the hero is taller than the image's own
   aspect at these widths, so background-position-y does nothing at all —
   cover scales by height and the whole frame is visible. What is cropped
   is the WIDTH, down to about a fifth of the photograph, and at the
   default "center" that fifth of wall-section.jpg is the tree trunk and
   the planting bed above the wall, with the stonework reduced to a sliver
   in the corner. 80% lands the crop on the coursed run of limestone, so
   the subject is still the subject on a phone. Shorthand is untouched:
   this sets position only, so the gradient and the filename still come
   from the shared sheet. */
@media(max-width:900px){.hero{background-position:80% 45%}}
.about-copy p.big,.about-copy p{font-size:16.5px;line-height:1.78}
.tcard p{font-size:15px;line-height:1.75}

/* ---- 2. the two dark bands under the hero ---------------------------
   One quiet ground, hairline dividers, amber only where the ground is
   dark enough to carry it. The divider is a min-width rule because the
   base sheet restacks the strip to two columns at 820px. */
.strip .it{font:600 14.5px/1.2 "Inter",system-ui,sans-serif;letter-spacing:.015em;padding:24px 14px;border-right:0}
@media(min-width:821px){.strip .it{border-right:1px solid rgba(255,255,255,.08)}
  .strip .it:last-child{border-right:0}}
.strip .it .ic{color:var(--amber);display:flex}
.strip .it .ic .ico{width:19px;height:19px;stroke-width:1.7}
.vetbar{border-top:1px solid rgba(255,255,255,.08)}
.vetbar .wrap{padding-top:18px;padding-bottom:18px;gap:12px 38px}
.vetbar .vb{font:600 14px/1.3 "Inter",system-ui,sans-serif;color:#E4DFD8;letter-spacing:.015em}
.vetbar .vb .ico{width:18px;height:18px;color:var(--amber)}
.util{font:600 13px "Inter",system-ui,sans-serif;letter-spacing:.015em}

/* ---- 3. every photo framed the same way -----------------------------
   On a cream ground a photo with no shadow reads as loose from its own
   caption. One resting shadow value, one hover value, everywhere. */
.fcards{gap:26px}
.fcard{border-radius:12px;box-shadow:0 14px 34px rgba(28,26,23,.10)}
.fcard:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(28,26,23,.17)}
.fcard .ph{height:228px}
/* the tag chip is SOLID, not a translucent scrim: over a translucent chip
   the measured contrast of the white label depends on whatever pixel of
   the photograph happens to be underneath it, and on a bright flagstone
   frame that drops under 4.5:1. #17130D holds 18:1 whatever is behind. */
.fcard .ph .tag{background:#17130D;border-radius:4px;padding:7px 11px;
  font:700 12.5px "Inter",system-ui,sans-serif;letter-spacing:.12em}
.fcard .body{padding:26px 24px}
.fcard h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.fcard p{font-size:14.5px;line-height:1.72;margin-bottom:18px}
.fcard .lnk{font:700 13px "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
figure.gal{border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(28,26,23,.10)}
figure.gal:hover{box-shadow:0 22px 48px rgba(28,26,23,.17)}
.galgrid{gap:18px}
.srow-media img,.about-media img{border-radius:12px;box-shadow:0 22px 48px rgba(28,26,23,.16)}
.tcard{border-radius:12px;box-shadow:0 14px 34px rgba(28,26,23,.10)}
/* The About media slot is Tim's headshot. Square crop so it sits level with
   the copy beside it at every width. */
.about-media img{object-fit:contain;aspect-ratio:1/1;background:#000}

/* ---- 4. the services page's orphan card -----------------------------
   Ten cards in a three-wide grid leaves one alone on the last row.
   Centre it. Keyed on the count, so the home page's three are untouched,
   and inside a min-width query so the 2-up and 1-up stacks are clean. */
@media(min-width:901px){
  .feat .fcards > .fcard:nth-child(10):last-child{grid-column:2}
}

/* ---- 5. the gallery as a composition, not thirteen equal tiles ------
   One lead photo at 2x2 plus twelve supporting tiles fills a 4x4 grid
   exactly. DESKTOP ONLY — the base sheet drops to 2-up at 900px and
   1-up at 560px, and an unscoped grid-template-columns here would
   out-specify both and leak onto phones. */
@media(min-width:901px){
  #work .galgrid{grid-template-columns:repeat(4,1fr);gap:16px}
  #work .galgrid figure.gal:first-child{grid-column:span 2;grid-row:span 2}
  /* the lead tile sizes from the rows beside it, not from its own 4:3 */
  #work .galgrid figure.gal:first-child .gph{aspect-ratio:auto;flex:1 1 0;min-height:0}
}

/* ---- 6. two reviews, not three --------------------------------------
   There are exactly two Google reviews and they are never padded out.
   A three-column grid left a hole where the third would be. */
@media(min-width:901px){
  .test .tgrid{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
}

/* ---- 7. the three undefined variables --------------------------------
   The base sheet asks for --ok, --gold and --amber-l. The palette above
   never declared them, so the review stars and every confirmation tick
   were falling back to inherited body colour. Declared here, on palette,
   and both tick chips restated in bronze so nothing is tinted green. */
:root{
  --ok:#6E4710;
  --gold:#8A5A14;
  --amber-l:#E8BC66;
}
.checks .ck,.prose ul li::before,#qok .chk{background:rgba(138,90,20,.12);color:var(--red-d)}
.checks div{font:500 15px/1.6 "Inter",system-ui,sans-serif;color:var(--ink-2)}
/* the base sheet makes each checklist row a flex container, which turns a
   <b> inside the row into its own flex item — on the service-areas list
   "San Antonio" was being laid out as a separate shrink-to-fit column from
   "and the surrounding neighbourhoods". Hanging indent instead, so the tick
   still aligns to the first line and the sentence stays one sentence. */
.checks div{display:block;position:relative;padding-left:35px}
.checks div .ck{position:absolute;left:0;top:1px}
.tcard .st{color:var(--gold);letter-spacing:1.5px}

/* ---- 8. the quote card ----------------------------------------------
   11px is refined on a desktop and unreadable on a phone, and this is
   SMS consent language. Nothing here goes under 12px. */
.hero-form{border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.40);padding:24px 22px 10px}
.hero-form h3{font-size:19px;font-weight:700;letter-spacing:-.015em}
.hero-form .hf-lead{font-size:13px;color:var(--muted);margin-bottom:14px}
.qfld input,.qfld select,.qfld textarea,.qform input,.qform select{border-radius:8px}
.optin span{font:400 12.5px/1.55 "Inter",system-ui,sans-serif;color:#7A736A}
.qform .fine{font:400 12px/1.55 "Inter",system-ui,sans-serif}

/* ---- 9. the closing band --------------------------------------------
   DESKTOP ONLY — the base sheet stacks this to one column at 900px. */
@media(min-width:901px){.final-grid{grid-template-columns:1fr auto;gap:clamp(34px,5vw,76px)}}
.final p.lead{font-size:17px;line-height:1.7}
.final .fbul div{font:500 14.5px/1.6 "Inter",system-ui,sans-serif}
.final .fbul .ck{width:22px;height:22px;background:rgba(217,164,65,.20);color:var(--amber)}

/* ---- 10. footer ------------------------------------------------------ */
footer.foot{padding:76px 0 34px}
.foot h4{font-size:12.5px;letter-spacing:.14em}
.foot ul a,.foot p{font-size:14px}

/* ---- 11. the brand lockup --------------------------------------------
   Tim's mark is gold on black and intricate: a letter C built around a
   stacked stone block. In a 42x42 slot the stone texture turned to mush
   and it read as a dark smudge beside a Poppins wordmark that repeated
   the logo's own wordmark anyway. The header now carries the horizontal
   lockup (mark + wordmark, re-cut from the 1254px original) and wordA /
   wordB are empty so the name is said once. The black plate is kept
   because the gold has dark stone texture in it and disappears on white.

   The base sheet pins header.top .brand .logo to a hard 42x42 circle and
   steps it down at 1100 and 600, so each of those three rules has to be
   answered — an unscoped height alone would freeze the phone size. */
header.top .brand .logo{height:62px;width:auto;flex:0 0 auto;object-fit:contain;
  border-radius:0;background:transparent;padding:0}
@media(max-width:1100px){header.top .brand .logo{height:50px;width:auto;flex:0 0 auto}}
@media(max-width:600px){header.top .brand .logo{height:44px;width:auto;flex:0 0 auto;border-radius:0;padding:0}}
@media(max-width:380px){header.top .brand .logo{height:38px;width:auto;flex:0 0 auto}}
.foot .brand .logo{height:52px;width:auto;flex:0 0 auto;object-fit:contain;
  border-radius:0;background:transparent;padding:0;box-shadow:none}
@media(max-width:600px){.foot .brand .logo{height:42px;width:auto}}
/* nothing but the image is inside the anchor now, so it carries the gap */
.brand{gap:0;min-height:44px}

/* ---- 12. tap targets --------------------------------------------------
   Everything interactive reaches 44px. Inline links in running prose use
   vertical padding: on a non-replaced inline box that grows the hit area
   without changing the line box, so paragraph rhythm is untouched.
   The nav rule is min-width because below 680px the base sheet hides
   these behind the hamburger. */
@media(min-width:681px){.menu a.lnk{display:inline-flex;align-items:center;min-height:44px}}
.fbot a{padding:14px 2px}
.prose a:not(.btn),.final p a:not(.btn),.info-row a:not(.btn),
.about-copy p a:not(.btn),.foot .li a:not(.btn),.okbox a:not(.btn),
.hero-form .fine a,.qform .fine a,footer.foot > p a{padding-block:15px}
.optin{min-height:44px;padding:6px 0}
.optin input{width:24px;height:24px}
main.blk a:not(.btn){padding-block:14px}

/* deep-linked sections must clear the sticky header when jumped to */
.srow[id],section[id]{scroll-margin-top:118px}
@media(max-width:900px){.srow[id],section[id]{scroll-margin-top:92px}}

/* ---- 18. BLACK MASTHEAD ---------------------------------------------
   Tim's new mark is gold-on-black and it was sitting in a lit rectangle
   on a white header, which read as a sticker rather than a brand. The
   masthead now carries the SAME #000 the lockup was composed on, so the
   plate disappears and the gold sits straight on the bar.

   Four things have to be answered together or the phone menu opens as a
   white sheet with invisible links: the header background, the nav link
   colour, the hamburger bars, and .menu.open at max-width:680px, which
   is where the base sheet turns the nav into a drop-down sheet. */
header.top{background:#000;border-bottom:1px solid rgba(255,255,255,.10)}
header.top .menu a.lnk{color:#EFE8DC}
header.top .menu a.lnk:hover,header.top .menu a.lnk:focus-visible{color:var(--amber)}
.hamb span{background:#EFE8DC}
@media(max-width:680px){
  header.top .menu.open{background:#000;border-top:1px solid rgba(255,255,255,.10)}
}

/* ---- 19. the owner band ---------------------------------------------
   Dawn Till Dusk's .blk.owner, which the shared sheet already styles in
   full (.owner-grid / .owner-media / .owner-role / .sig / .vtag). No new
   CSS is needed for the layout; these two rules only size the single
   portrait, because DTD's slot was built for a 2x2 quad of four photos
   and a lone image in it would otherwise run the full column width. */
.owner-media img{aspect-ratio:1/1;object-fit:contain;background:#000}
@media(min-width:901px){.owner-media{max-width:460px}}

/* ---- 20. SERVICE AREAS, THE JLS LAYOUT ------------------------------
   Ported from JLS Outdoor, which Noah asked for by name. Those rules
   live in that site's own sheet, NOT the shared one, so they are
   reproduced here with the red swapped for Cornerstone's bronze
   (--red #8A5A14 = rgb(138,90,20)). 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(138,90,20,.08);border:1px solid rgba(138,90,20,.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:760px;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(28,26,23,.08);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)}
.area-caveat a:not(.btn){color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}