:root{
    --ink:#15191B;
    --ink-2:#212729;
    --ink-3:#2E3537;
    --paper:#E9E6DE;
    --paper-2:#F4F2EC;
    --line:#CBC6BA;
    --timber:#A96A2E;
    --timber-lift:#C3813F;
    --moss:#3D5A49;
    --text:#191D1F;
    --muted:#4E5451;
    --label:#8A5220;
    --scrim:rgba(14,17,18,.74);
    --shadow:0 1px 2px rgba(18,22,24,.10);
    --measure:64ch;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#15191B;
      --paper-2:#1D2224;
      --line:#343B3D;
      --text:#F0EDE6;
      --muted:#B9BFBB;
      --label:#D8994F;
      --timber:#D08E45;
      --timber-lift:#E0A45E;
      --moss:#7FA98D;
      --shadow:0 1px 2px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --paper:#15191B;
    --paper-2:#1D2224;
    --line:#343B3D;
    --text:#F0EDE6;
    --muted:#B9BFBB;
      --label:#D8994F;
    --timber:#D08E45;
    --timber-lift:#E0A45E;
    --moss:#7FA98D;
    --shadow:0 1px 2px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
    font-size:19px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  img{display:block; max-width:100%;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--timber); outline-offset:3px;}

  .wrap{max-width:1180px; margin:0 auto; padding-inline:22px;}
  .measure{max-width:var(--measure);}

  /* ---------- masthead ---------- */
  .bar{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
    background:var(--ink); color:#EDEAE2; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:11px;}
  .brand{font-family:"Zilla Slab",Georgia,serif; font-weight:600; font-size:18px; letter-spacing:.2px; line-height:1.1;}
  .brand span{display:block; font-family:"Archivo",sans-serif; font-weight:500; font-size:12px; letter-spacing:.16em;
               text-transform:uppercase; color:#B7BEB9; margin-top:2px;}
  .callbtn{
    font-family:"Zilla Slab",Georgia,serif; font-weight:600; font-size:17px; text-decoration:none;
    background:var(--timber); color:#14100B; padding:8px 15px; border-radius:2px; white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .callbtn:hover{background:var(--timber-lift);}

  /* ---------- hero ---------- */
  .hero{position:relative; background:var(--ink);}
  .hero img{width:100%; height:clamp(340px,58vh,600px); object-fit:cover; object-position:50% 58%; opacity:.84;}
  .hero .overlay{
    position:absolute; inset:0; display:flex; align-items:flex-end;
    background:
      linear-gradient(100deg,rgba(14,17,18,.70) 0%,rgba(14,17,18,.46) 46%,rgba(14,17,18,.18) 78%),
      linear-gradient(180deg,rgba(14,17,18,.30) 0%,rgba(14,17,18,.14) 36%,var(--scrim) 100%);
  }
  .hero .inner{padding-block:34px; color:#F2EFE7;}
  .eyebrow{
    font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    color:var(--timber-lift); margin:0 0 12px; text-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  .hero h1{
    font-family:"Zilla Slab",Georgia,serif; font-weight:600;
    font-size:clamp(30px,5.4vw,55px); line-height:1.04; margin:0; max-width:17ch; text-wrap:balance; text-shadow:0 2px 10px rgba(0,0,0,.45);
  }
  .hero p{margin:14px 0 0; max-width:48ch; font-size:clamp(18px,1.8vw,21px); line-height:1.5; color:#F4F1EA; text-shadow:0 1px 4px rgba(0,0,0,.7);}

  /* ---------- sections ---------- */
  section{padding-block:clamp(44px,6vw,78px);}
  .rule{height:1px; background:var(--line); border:0; margin:0;}
  h2{
    font-family:"Zilla Slab",Georgia,serif; font-weight:600;
    font-size:clamp(27px,3.4vw,36px); line-height:1.12; margin:0 0 14px; text-wrap:balance;
  }
  h3{font-family:"Zilla Slab",Georgia,serif; font-weight:600; font-size:21px; margin:0 0 6px;}
  p{margin:0 0 15px;}
  .lede{font-size:clamp(20px,2.2vw,23px); line-height:1.5;}

  .label{font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--label); margin:0 0 10px;}

  /* facts */
  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:1px; background:var(--line);
         border-block:1px solid var(--line); margin-top:30px;}
  .facts div{background:var(--paper); padding:16px 18px;}
  .facts dt{font-size:12.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
  .facts dd{margin:0; font-family:"Zilla Slab",Georgia,serif; font-size:19px; font-weight:500; font-variant-numeric:tabular-nums;}

  /* trades */
  .trades{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px 34px; margin-top:8px;}
  .trades ul{list-style:none; margin:0; padding:0;}
  .trades li{padding:7px 0; border-bottom:1px solid var(--line); font-size:18px;}
  .trades li:last-child{border-bottom:0;}

  /* photo bands */
  .band{background:var(--ink);}
  .band img{width:100%; height:clamp(260px,44vw,520px); object-fit:cover;}
  figure{margin:0;}
  figcaption{font-size:15px; color:var(--muted); padding-top:8px; line-height:1.4;}

  .grid{display:grid; gap:18px; margin-top:26px;}
  .g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
  .g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
  .grid img{width:100%; aspect-ratio:4/3; object-fit:cover; max-width:100%;}
  .grid img.tall{aspect-ratio:3/4;}
  .grid img.wide{aspect-ratio:16/10;}

  .split{display:grid; grid-template-columns:1fr; gap:28px; align-items:start;}
  @media (min-width:860px){ .split{grid-template-columns:1.05fr 1fr; gap:46px;} }

  /* process list */
  .steps{counter-reset:s; list-style:none; margin:22px 0 0; padding:0;}
  .steps li{
    counter-increment:s; position:relative; padding:14px 0 14px 46px; border-top:1px solid var(--line);
  }
  .steps li:last-child{border-bottom:1px solid var(--line);}
  .steps li::before{
    content:counter(s,decimal-leading-zero); position:absolute; left:0; top:15px;
    font-family:"Zilla Slab",Georgia,serif; font-size:16px; font-weight:600; color:var(--label);
    font-variant-numeric:tabular-nums;
  }

  /* contact */
  .contact{background:var(--ink); color:#E9E5DC;}
  .contact h2{color:#F3F0E8;}
  .contact .label{color:var(--timber-lift);}
  .contact a{color:#F3F0E8;}
  .phone{
    display:inline-block; font-family:"Zilla Slab",Georgia,serif; font-weight:600;
    font-size:clamp(32px,6.4vw,58px); line-height:1.05; text-decoration:none; color:var(--timber-lift);
    font-variant-numeric:tabular-nums; margin:4px 0 6px;
  }
  .phone:hover{color:#E7B277;}
  .cgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:24px 30px; margin-top:34px;
         padding-top:26px; border-top:1px solid rgba(255,255,255,.13);}
  .cgrid dt{font-size:12.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:#B3BBB6; margin-bottom:6px;}
  .cgrid dd{margin:0; font-size:18px; line-height:1.5;}
  .foot{background:var(--ink); color:#A3ABA7; font-size:14px; padding-block:18px; border-top:1px solid rgba(255,255,255,.09);}
  .foot .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;}

  /* ---------- tablet & desktop photo grids: even rows, no orphans ---------- */
  @media (min-width:601px){
    .g2{grid-template-columns:repeat(2,1fr);}
    .g3{grid-template-columns:repeat(2,1fr);}
    .g3 img.tall{aspect-ratio:4/3;}
  }
  @media (min-width:601px) and (max-width:859px){
    .g3 figure:last-child:nth-child(odd){grid-column:1/-1;}
  }
  @media (min-width:860px){
    .g3{grid-template-columns:repeat(3,1fr);}
  }

  /* ---------- phones ---------- */
  @media (max-width:600px){
    body{font-size:20px; line-height:1.6;}
    .facts{grid-template-columns:1fr;}
    .wrap{padding-inline:20px;}
    .brand{font-size:19px;}
    .callbtn{font-size:18px; padding:10px 14px;}
    .hero img{height:clamp(460px,72vh,640px);}
    .hero h1{font-size:37px; line-height:1.08;}
    .hero p{font-size:20px;}
    .eyebrow{font-size:14px;}
    h2{font-size:31px;}
    h3{font-size:22px;}
    .lede{font-size:22px;}
    .label{font-size:14px;}
    .facts dt{font-size:13.5px;}
    .facts dd{font-size:21px;}
    figcaption{font-size:17px;}
    .trades li{font-size:20px; padding:10px 0;}
    .steps li{padding:16px 0 16px 48px;}
    .steps li::before{font-size:17px; top:18px;}
    .phone{font-size:42px;}
    .cgrid dt{font-size:13.5px;}
    .cgrid dd{font-size:20px;}
    .foot{font-size:15px;}
    .band img{height:300px;}
  }

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

  /* ---------- nav links in the bar ---------- */
  .brand a{color:inherit; text-decoration:none;}
  .backlink{display:inline-block; font-size:15px; font-weight:600; letter-spacing:.04em; color:var(--label); text-decoration:none; margin-bottom:14px;}
  .backlink:hover{text-decoration:underline;}

  /* ---------- category cards ---------- */
  .cats{display:grid; gap:22px; margin-top:28px; grid-template-columns:1fr;}
  @media (min-width:601px){ .cats{grid-template-columns:repeat(2,1fr);} }
  @media (min-width:960px){ .cats{grid-template-columns:repeat(3,1fr);} }
  .cat{display:block; text-decoration:none; color:inherit; background:var(--paper-2); border:1px solid var(--line);}
  .cat img{width:100%; aspect-ratio:4/3; object-fit:cover;}
  .cat .body{padding:16px 18px 18px;}
  .cat h3{font-size:23px; margin:0 0 6px;}
  .cat p{margin:0 0 10px; font-size:17px; line-height:1.5; color:var(--muted);}
  .cat .more{font-weight:600; font-size:16px; color:var(--label);}
  .cat:hover h3{text-decoration:underline;}

  /* ---------- gallery grid (uniform 4:3 tiles, even rows) ---------- */
  .gal{display:grid; gap:16px; margin-top:26px; grid-template-columns:1fr;}
  @media (min-width:601px){ .gal{grid-template-columns:repeat(2,1fr);} }
  @media (min-width:960px){ .gal{grid-template-columns:repeat(3,1fr);} }
  .gal figure{margin:0;}
  .gal button{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;}
  .gal img{width:100%; aspect-ratio:4/3; object-fit:cover;}
  .gal figcaption{font-size:16px; color:var(--muted); padding-top:8px; line-height:1.4;}

  .pagehead{padding-block:clamp(30px,5vw,56px) 0;}
  .pagehead h1{font-family:"Zilla Slab",Georgia,serif; font-weight:600; font-size:clamp(34px,5vw,50px); line-height:1.08; margin:0 0 12px;}
  .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
  .chips a{display:inline-block; padding:10px 14px; border:1px solid var(--line); text-decoration:none; font-weight:600; font-size:16px; background:var(--paper-2);}
  .chips a:hover{border-color:var(--label);}
  .ctaband{background:var(--ink); color:#E9E5DC;}
  .ctaband h2{color:#F3F0E8;}
  .ctaband .label{color:var(--timber-lift);}
  .ctaband a.phone{color:var(--timber-lift);}

  /* ---------- lightbox ---------- */
  .lb{position:fixed; inset:0; z-index:100; background:#0B0D0E; display:none; flex-direction:column; align-items:center; justify-content:center; padding:56px 12px 20px;}
  .lb.open{display:flex;}
  .lb img{max-width:100%; max-height:calc(100vh - 150px); object-fit:contain;}
  .lb .cap{color:#EDEAE2; font-size:18px; margin-top:12px; text-align:center; max-width:60ch;}
  .lb .ctl{position:absolute; top:10px; right:10px; display:flex; gap:8px;}
  .lb button{font:600 18px/1 "Archivo",sans-serif; color:#15191B; background:#E0A45E; border:0; padding:12px 16px; cursor:pointer;}
  .lb .nav{position:absolute; bottom:18px; display:flex; gap:12px;}
  @media (min-width:700px){ .lb .nav{bottom:auto; top:50%; left:12px; right:12px; justify-content:space-between; transform:translateY(-50%); pointer-events:none;} .lb .nav button{pointer-events:auto;} }
  @media (max-width:600px){
    .cat h3{font-size:25px;}
    .cat p{font-size:18px;}
    .gal figcaption{font-size:17px;}
    .chips a{font-size:17px; padding:12px 14px;}
  }