:root{
    --soil:#f7f3ea;
    --soil-lift:#ece6d8;
    --limestone:#241f19;
    --caliche:#4a4338;
    --machine:#8f5d00;
    --cedar:#5d6d50;
    --measure:34rem;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--soil);
    color:var(--limestone);
    font-family:'Barlow',system-ui,-apple-system,sans-serif;
    font-size:1.125rem;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem}
  a{color:inherit}
  a:focus-visible{outline:2px solid var(--machine);outline-offset:3px;border-radius:2px}

  /* --- hero --- */
  header{padding:4.5rem 0 3rem}
  .mark{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,9vw,4.5rem);
    line-height:.95;
    letter-spacing:-.01em;
  }
  .mark span{display:block}
  .trade{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:500;
    font-size:clamp(1.125rem,3.4vw,1.5rem);
    color:var(--caliche);
    margin-top:1rem;
    max-width:var(--measure);
    line-height:1.3;
  }

  /* soil horizons — the one decorative idea, used once */
  .strata{margin:2.75rem 0 2.5rem;max-width:22rem}
  .strata i{display:block;border-radius:1px}
  .strata i:nth-child(1){height:6px;background:var(--cedar)}
  .strata i:nth-child(2){height:3px;background:#6b5a41;margin-top:3px}
  .strata i:nth-child(3){height:2px;background:var(--caliche);margin-top:4px;opacity:.6}
  .strata i:nth-child(4){height:1px;background:var(--caliche);margin-top:5px;opacity:.35}

  /* --- call --- */
  .call{display:inline-block;text-decoration:none}
  .call b{
    display:block;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:clamp(2.75rem,11vw,5rem);
    line-height:1;
    color:var(--machine);
    letter-spacing:-.015em;
  }
  .call:hover b{color:#6b4400}
  .call em{
    display:block;
    font-style:normal;
    color:var(--caliche);
    font-size:1rem;
    margin-top:.65rem;
    max-width:var(--measure);
  }

  /* --- sections --- */
  section{padding:3rem 0;border-top:1px solid rgba(60,52,42,.22)}
  h2{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:1.5rem;
    letter-spacing:.005em;
    margin-bottom:1.5rem;
  }
  .work{list-style:none;max-width:44rem}
  .work li{
    display:grid;
    grid-template-columns:14rem 1fr;
    gap:.25rem 2rem;
    padding:.95rem 0;
    border-bottom:1px solid rgba(60,52,42,.14);
  }
  .work li:last-child{border-bottom:0}
  .work b{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:1.2rem;
    color:var(--limestone);
  }
  .work span{color:var(--caliche);font-size:1.02rem}
  @media (max-width:34rem){
    .work li{grid-template-columns:1fr;gap:.15rem}
  }

  .prose{max-width:var(--measure);color:var(--caliche)}
  .prose p + p{margin-top:1rem}
  .prose strong{color:var(--limestone);font-weight:500}

  .towns{
    max-width:44rem;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:500;
    font-size:clamp(1.25rem,4vw,1.75rem);
    line-height:1.45;
  }
  .towns .other{color:var(--caliche)}

  .creds{
    display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;
    list-style:none;
  }
  .creds li{
    border:1px solid rgba(60,52,42,.4);
    color:var(--caliche);
    padding:.35rem .75rem;
    border-radius:2px;
    font-size:.92rem;
  }

  /* --- foot --- */
  footer{
    border-top:1px solid rgba(60,52,42,.22);
    background:var(--soil-lift);
    padding:3rem 0 3.5rem;
    margin-top:0;
  }
  .foot-call{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:clamp(1.75rem,6vw,2.5rem);
    color:var(--machine);
    text-decoration:none;
    line-height:1.1;
    display:inline-block;
  }
  .foot-mail{display:inline-block;margin-top:1rem;color:var(--limestone);font-size:1.05rem}
  .fine{margin-top:2rem;color:var(--caliche);font-size:.9rem;line-height:1.7}

  /* ---- added for multi-page site ---- */
  .call b,.topcall,.foot-call{white-space:nowrap}
  .topbar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 1.5rem;max-width:60rem;margin:0 auto}
  .brand{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:.01em}
  .topcall{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;color:var(--machine);text-decoration:none}
  .topcall:hover{color:#6b4400}
  /* .wrap's horizontal padding was overriding the vertical padding of header/section; set vertical padding explicitly */
  header.wrap{padding-top:2.5rem;padding-bottom:2rem}
  section.wrap{padding-top:2.25rem;padding-bottom:2.25rem}
  header.page-head{padding-top:1.25rem;padding-bottom:1.75rem}
  h2{margin-bottom:1rem}
  .strata{margin:1.5rem 0 1.5rem}
  .work li{padding:.7rem 0}
  footer{padding:2.25rem 0 2.5rem}
  @media (max-width:34rem){
    header.wrap{padding-top:1.75rem;padding-bottom:1.5rem}
    section.wrap{padding-top:1.75rem;padding-bottom:1.75rem}
    footer{padding:1.75rem 0 2rem}
  }
  /* laptop/desktop: photo beside the logo + phone so the whole top fits above the fold */
  @media (min-width:56rem){
    header.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:3rem;align-items:center}
    header.home > *{grid-column:1}
    header.home > .hero{grid-column:2;grid-row:1 / span 4;margin:0}
    header.home .hero img{aspect-ratio:4/3;object-position:50% 50%}
    header.home .call b{white-space:nowrap}
  }
  .page-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(2.1rem,7vw,3.5rem);line-height:1;letter-spacing:-.01em;max-width:40rem}
  .page-head .trade{margin-top:1rem}
  .page-head .call{margin-top:1.75rem}
  .page-head .call b{font-size:clamp(2.25rem,8vw,3.5rem)}
  .work a{display:inline-block;padding:.4rem 0;text-decoration:underline;text-decoration-color:rgba(143,93,0,.5);text-underline-offset:5px}
  .work a:hover{text-decoration-color:var(--machine);color:#fff}
  .prose a{color:var(--limestone);text-decoration-color:rgba(143,93,0,.6);text-underline-offset:3px}
  .prose a:hover{text-decoration-color:var(--machine)}
  figure{margin:0}
  figure img{display:block;width:100%;height:auto;border-radius:2px;background:var(--soil-lift)}
  figcaption{color:var(--caliche);font-size:.92rem;margin-top:.6rem;max-width:var(--measure);line-height:1.45}
  .photos{display:grid;gap:1.5rem;margin-top:2rem}
  .photos.two{grid-template-columns:repeat(2,1fr)}
  .photos.one{max-width:44rem}
  @media (max-width:34rem){.photos.two{grid-template-columns:1fr}}
  .photos.portrait figure{max-width:100%}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  .gallery figure img{aspect-ratio:4/3;object-fit:cover}
  @media (max-width:46rem){.gallery{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:28rem){.gallery{grid-template-columns:1fr}}
  .steps{max-width:var(--measure);padding-left:1.25rem;color:var(--caliche)}
  .steps li{padding:.35rem 0 .35rem .35rem}
  .steps strong{color:var(--limestone);font-weight:500}
  .faq{max-width:44rem}
  .faq details{border-bottom:1px solid rgba(60,52,42,.18);padding:0}
  .faq details[open]{padding-bottom:.9rem}
  .faq summary{padding:.85rem 0;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.2rem}
  .faq summary:focus-visible{outline:2px solid var(--machine);outline-offset:3px}
  .faq p{color:var(--caliche);margin-top:.6rem;max-width:var(--measure)}
  .related{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.25rem}
  .related a{display:inline-block;padding:.6rem 0;color:var(--machine);text-decoration:underline;text-decoration-color:rgba(143,93,0,.5);text-underline-offset:5px}
  .related a:hover{text-decoration-color:var(--machine)}
  .hero{margin:1.75rem 0 0}
  .hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%;border-radius:2px;background:var(--soil-lift)}
  @media (max-width:34rem){
    .hero{margin-left:-1.5rem;margin-right:-1.5rem}
    .hero img{aspect-ratio:1/1;object-position:62% 50%;border-radius:0}
  }
  .foot-links{margin-top:1.75rem;font-size:.95rem}
  /* ---- type scale: title and phone sized down ---- */
  .mark{font-size:clamp(1.75rem,6vw,2.5rem)}
  .trade{font-size:clamp(1rem,2.6vw,1.1875rem)}
  .call b{font-size:clamp(1.75rem,7vw,2.25rem)}
  .call em{font-size:.95rem}
  .page-title{font-size:clamp(1.625rem,5vw,2.25rem)}
  .page-head .call b{font-size:clamp(1.75rem,6vw,2.25rem)}
  .foot-call{font-size:clamp(1.5rem,4.5vw,1.875rem)}
  @media (min-width:56rem){header.home .call b{font-size:clamp(2rem,2.6vw,2.25rem)}}

  .foot-links a{display:inline-block;padding:.75rem 0;color:var(--caliche);margin-right:1.25rem}
  .foot-mail{padding:.55rem 0;margin-top:.5rem}
  .foot-call{padding:.4rem 0}
  .topcall,.brand{padding:.7rem 0}

  /* ---- light theme: keep a dark footer so the yellow phone number stays bright ---- */
  .work a:hover,.related a:hover{color:#000}
  .creds li{background:rgba(255,255,255,.55)}
  footer{
    --limestone:#e8e3d7;--caliche:#b4ab9c;--machine:#f2a900;
    background:#221e19;border-top:0;color:var(--limestone);
  }
  footer .foot-call:hover{color:#ffbe28}
  footer .foot-links a{color:var(--caliche)}