:root{
    --ink:#16140f;
    --charcoal:#28251e;
    --cream:#f4efe3;
    --cream-2:#ece4d3;
    --brass:#a9812f;
    --brass-light:#c9a24b;
    --brick:#8f4128;
    --brick-dark:#6e3220;
    --stone:#6f6a5f;
    --line:rgba(22,20,15,0.14);
    --line-light:rgba(244,239,227,0.22);
    --radius:2px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Public Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Source Serif 4', serif;
    font-weight:600;
    margin:0;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{margin:0;padding:0;list-style:none;}

  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* ---------- Brick coursing divider ---------- */
  .coursing{
    display:flex;
    height:10px;
    width:100%;
    overflow:hidden;
  }
  .coursing span{
    flex:1 1 auto;
    border-right:2px solid var(--cream);
  }
  .coursing.dark span{background:var(--ink);}
  .coursing.brass span{background:var(--brass);}
  .coursing.brick span{background:var(--brick);}
  .coursing-row1{display:flex;}
  .coursing-row2{display:flex; margin-left:-4.1%;}

  /* ---------- Header ---------- */
  header{
    background:var(--ink);
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(201,162,75,0.25);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 24px;
    max-width:1080px;
    margin:0 auto;
    gap:16px;
  }
  .logo-mark{height:118px;width:auto;}
  .header-phone{
    font-family:'Source Serif 4', serif;
    font-size:16px;
    color:var(--cream);
    border:1px solid rgba(244,239,227,0.35);
    padding:8px 16px;
    border-radius:var(--radius);
    white-space:nowrap;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .header-phone:hover{background:rgba(244,239,227,0.08); border-color:var(--brass-light);}
  .header-phone:focus-visible, a:focus-visible, button:focus-visible{
    outline:2px solid var(--brass-light);
    outline-offset:3px;
  }
  @media (max-width: 640px){
    .logo-mark{height:88px;}
  }
  @media (max-width: 420px){
    .logo-mark{height:72px;}
    .header-phone{padding:7px 12px; font-size:14px;}
  }

  /* ---------- Hero ---------- */
  .hero{
    background:var(--ink);
    color:var(--cream);
    position:relative;
  }
  .hero-inner{
    max-width:1080px;
    margin:0 auto;
    padding:64px 24px 56px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:48px;
    align-items:center;
  }
  .hero-eyebrow{
    color:var(--brass-light);
    font-size:15px;
    margin-bottom:18px;
  }
  .hero h1{
    font-size:clamp(34px, 5vw, 52px);
    line-height:1.08;
    color:var(--cream);
  }
  .hero-lede{
    margin-top:22px;
    font-size:18px;
    color:rgba(244,239,227,0.82);
    max-width:46ch;
  }
  .hero-actions{
    margin-top:32px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-block;
    font-family:'Source Serif 4', serif;
    font-size:16px;
    padding:13px 26px;
    border-radius:var(--radius);
    transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn-primary{
    background:var(--brass);
    color:var(--ink);
    border:1px solid var(--brass);
  }
  .btn-primary:hover{background:var(--brass-light); border-color:var(--brass-light);}
  .btn-ghost{
    color:var(--cream);
    border:1px solid rgba(244,239,227,0.4);
  }
  .btn-ghost:hover{border-color:var(--brass-light); color:var(--brass-light);}

  .hero-figure{
    position:relative;
    border:1px solid rgba(201,162,75,0.4);
    padding:10px;
  }
  .hero-figure img{
    width:100%;
    height:340px;
    object-fit:cover;
  }
  .hero-figure figcaption{
    font-size:13px;
    color:rgba(244,239,227,0.6);
    padding-top:10px;
    text-align:center;
  }

  @media (max-width: 860px){
    .hero-inner{
      grid-template-columns:1fr;
      padding:44px 20px 36px;
      gap:28px;
    }
    .hero-figure img{
      height:auto;
      aspect-ratio:4/3;
    }
  }

  /* ---------- Sections shared ---------- */
  section{padding:76px 0;}
  .section-head{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:32px;
    margin-bottom:44px;
    padding-bottom:22px;
    border-bottom:1px solid var(--line);
  }
  .section-num{
    font-family:'Source Serif 4', serif;
    color:var(--brass);
    font-size:15px;
  }
  .section-head h2{
    font-size:clamp(26px, 3.4vw, 34px);
  }
  .section-intro{
    max-width:60ch;
    color:var(--stone);
    margin-top:14px;
    font-size:16.5px;
  }

  @media (max-width: 720px){
    .section-head{grid-template-columns:1fr;}
  }

  /* ---------- About ---------- */
  .about{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
  }
  .about-quote{
    font-family:'Source Serif 4', serif;
    font-size:22px;
    line-height:1.5;
    color:var(--ink);
  }
  .about-quote .sig{
    display:block;
    margin-top:22px;
    font-size:16px;
    color:var(--brass);
  }
  .about-facts{border-top:1px solid var(--line);}
  .fact-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .fact-row dt{color:var(--stone);}
  .fact-row dd{margin:0; text-align:right; font-weight:600;}

  @media (max-width: 780px){
    .about{grid-template-columns:1fr;}
  }

  /* ---------- Services (brick ledger) ---------- */
  .service-ledger{border-top:1px solid var(--line);}
  .service-row{
    display:grid;
    grid-template-columns:56px 1fr 1.4fr;
    gap:24px;
    align-items:start;
    padding:26px 0;
    border-bottom:1px solid var(--line);
  }
  .service-brick{
    width:32px;
    height:16px;
    background:var(--brick);
    margin-top:8px;
    position:relative;
  }
  .service-brick::after{
    content:"";
    position:absolute;
    left:-8px; top:20px;
    width:16px; height:16px;
    background:var(--brass);
  }
  .service-row h3{font-size:20px;}
  .service-row p{color:var(--stone); font-size:15.5px; max-width:52ch;}

  @media (max-width: 640px){
    .service-row{grid-template-columns:32px 1fr; }
    .service-row p{grid-column:2; }
  }

  /* ---------- Process (real sequence, numbered) ---------- */
  .process{
    background:var(--ink);
    color:var(--cream);
  }
  .process .section-head{border-bottom-color:var(--line-light);}
  .process .section-num{color:var(--brass-light);}
  .process .section-intro{color:rgba(244,239,227,0.68);}
  .process-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    border-top:1px solid var(--line-light);
  }
  .process-step{
    padding:26px 22px 26px 0;
    border-right:1px solid var(--line-light);
  }
  .process-step:last-child{border-right:none;}
  .process-step .n{
    font-family:'Source Serif 4', serif;
    font-size:38px;
    color:var(--brass-light);
    line-height:1;
  }
  .process-step h4{
    color:var(--cream);
    font-size:17px;
    margin-top:14px;
  }
  .process-step p{
    color:rgba(244,239,227,0.65);
    font-size:14.5px;
    margin-top:8px;
  }
  @media (max-width: 820px){
    .process-list{grid-template-columns:1fr 1fr;}
    .process-step{border-right:none; border-bottom:1px solid var(--line-light); padding:22px 0;}
  }
  @media (max-width: 480px){
    .process-list{grid-template-columns:1fr;}
  }

  /* ---------- Gallery ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:170px;
    gap:6px;
  }
  .gallery-grid img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(6%);
  }
  .gallery-grid a:nth-child(3n+1){grid-row:span 2;}
  @media (max-width: 760px){
    .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
    .gallery-grid a:nth-child(3n+1){grid-row:span 1;}
  }

  /* ---------- Instagram ---------- */
  .instagram-embed{
    border:1px solid var(--line);
    background:var(--cream-2);
    min-height:120px;
  }
  .instagram-fallback{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    border:1px solid var(--line);
    background:var(--cream-2);
    padding:24px 28px;
  }
  .instagram-fallback p{
    color:var(--stone);
    font-size:15px;
    max-width:44ch;
  }
  .instagram-handle{
    font-family:'Source Serif 4', serif;
    font-size:18px;
    color:var(--ink);
    margin-bottom:4px;
    display:block;
  }
  .btn-instagram{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-instagram svg{width:18px; height:18px;}

  /* ---------- Coverage ---------- */
  .coverage{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
  }
  .coverage-map{
    border:1px solid var(--line);
    padding:26px;
    background:var(--cream-2);
  }
  .coverage-map h4{font-size:15px; color:var(--stone); font-weight:500; margin-bottom:16px;}
  .town-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
  }
  .town-list li{
    font-family:'Source Serif 4', serif;
    font-size:15px;
    padding:6px 0;
    position:relative;
  }
  .town-list li:not(:last-child)::after{
    content:"·";
    color:var(--brass);
    margin-left:12px;
  }
  .coverage-text p{color:var(--stone); font-size:16px;}
  .coverage-text p + p{margin-top:14px;}
  @media (max-width: 780px){
    .coverage{grid-template-columns:1fr;}
  }

  /* ---------- Contact ---------- */
  .contact{
    background:var(--ink);
    color:var(--cream);
  }
  .contact .section-head{border-bottom-color:var(--line-light);}
  .contact .section-num{color:var(--brass-light);}
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:56px;
  }
  .contact-lede{
    font-family:'Source Serif 4', serif;
    font-size:26px;
    line-height:1.4;
    max-width:22ch;
  }
  .contact-cta{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}
  .contact-details dl{display:block;}
  .contact-details .row{
    padding:16px 0;
    border-bottom:1px solid var(--line-light);
  }
  .contact-details dt{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:rgba(244,239,227,0.5);
    margin-bottom:6px;
  }
  .contact-details dd{
    margin:0;
    font-family:'Source Serif 4', serif;
    font-size:17px;
  }
  @media (max-width: 780px){
    .contact-grid{grid-template-columns:1fr; gap:32px;}
  }

  .contact-form{
    background:var(--cream);
    color:var(--ink);
    padding:28px;
    border:1px solid var(--line-light);
  }
  .contact-form h3{
    font-size:18px;
    margin-bottom:4px;
  }
  .contact-form .form-note{
    font-size:13.5px;
    color:var(--stone);
    margin-bottom:22px;
  }
  .field{margin-bottom:18px;}
  .field label{
    display:block;
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--stone);
    margin-bottom:7px;
  }
  .field input,
  .field textarea{
    width:100%;
    background:var(--cream-2);
    border:1px solid var(--line);
    color:var(--ink);
    font-family:'Public Sans', sans-serif;
    font-size:15px;
    padding:11px 13px;
    border-radius:var(--radius);
  }
  .field input:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--brass);
    background:#fff;
  }
  .field textarea{resize:vertical; min-height:104px;}
  .field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  @media (max-width:520px){
    .field-row{grid-template-columns:1fr;}
  }
  .form-submit{
    width:100%;
    background:var(--brass);
    color:var(--ink);
    border:1px solid var(--brass);
    font-family:'Source Serif 4', serif;
    font-size:16px;
    padding:13px 26px;
    border-radius:var(--radius);
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .form-submit:hover{background:var(--brass-light); border-color:var(--brass-light);}
  .form-status{
    font-size:13.5px;
    margin-top:12px;
    color:var(--brass);
    min-height:18px;
  }
  .contact-mini-details{
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid var(--line-light);
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    font-size:14px;
    color:rgba(244,239,227,0.7);
  }
  .contact-mini-details strong{color:var(--cream); font-weight:500;}

  footer{
    background:var(--ink);
    color:rgba(244,239,227,0.55);
    font-size:13.5px;
    padding:22px 0 30px;
    border-top:1px solid var(--line-light);
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

/* ---------- Legal pages ---------- */
.legal-page{
  padding:56px 0 90px;
}
.legal-page h1{
  font-size:clamp(28px, 4vw, 40px);
  margin-bottom:8px;
}
.legal-updated{
  color:var(--stone);
  font-size:14px;
  margin-bottom:40px;
}
.legal-content h2{
  font-size:20px;
  margin-top:36px;
  margin-bottom:12px;
}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{
  color:var(--charcoal);
  font-size:15.5px;
  line-height:1.7;
  margin-bottom:14px;
  max-width:72ch;
}
.legal-content ul{
  margin:0 0 14px 0;
  padding-left:20px;
  max-width:72ch;
}
.legal-content li{
  color:var(--charcoal);
  font-size:15.5px;
  line-height:1.7;
  list-style:disc;
  margin-bottom:6px;
}
.legal-content a{
  color:var(--brass);
  text-decoration:underline;
}
.legal-back{
  display:inline-block;
  margin-bottom:28px;
  font-size:14px;
  color:var(--stone);
}
.legal-back:hover{color:var(--brass);}
.legal-note{
  margin-top:44px;
  padding:18px 20px;
  border:1px solid var(--line);
  background:var(--cream-2);
  font-size:13.5px;
  color:var(--stone);
  max-width:72ch;
}

/* ---------- Footer legal links ---------- */
.footer-legal{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.footer-legal a:hover{color:var(--brass-light);}

/* ---------- Cookie consent banner ---------- */
#cookieBanner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:100;
  background:var(--ink);
  color:var(--cream);
  border-top:1px solid rgba(201,162,75,0.4);
  padding:20px 24px;
  display:none;
}
#cookieBanner.show{display:block;}
.cookie-inner{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cookie-text{
  font-size:14px;
  color:rgba(244,239,227,0.82);
  max-width:60ch;
  line-height:1.55;
}
.cookie-text a{
  color:var(--brass-light);
  text-decoration:underline;
}
.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cookie-btn{
  font-family:'Source Serif 4', serif;
  font-size:14px;
  padding:10px 20px;
  border-radius:var(--radius);
  cursor:pointer;
  border:1px solid rgba(244,239,227,0.35);
  background:transparent;
  color:var(--cream);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.cookie-btn:hover{border-color:var(--brass-light); color:var(--brass-light);}
.cookie-btn.primary{
  background:var(--brass);
  border-color:var(--brass);
  color:var(--ink);
}
.cookie-btn.primary:hover{background:var(--brass-light); border-color:var(--brass-light);}
@media (max-width:640px){
  .cookie-inner{flex-direction:column; align-items:flex-start;}
}

/* ---------- Back to top button ---------- */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:100px;
  z-index:90;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--brass);
  color:var(--ink);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease;
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
}
.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{background:var(--brass-light);}
.back-to-top svg{width:20px; height:20px;}
@media (max-width:640px){
  .back-to-top{right:16px; bottom:88px; width:42px; height:42px;}
}