/* ===========================================================================
   Albertson Construction — site stylesheet
   One stylesheet for every page. Sections in order:
     1. Tokens        design variables (colors, type, spacing)
     2. Base          resets and element defaults
     3. Layout        page shell, sections, grids
     4. Components    header, buttons, cards, forms, footer
     5. Page blocks   hero, trust strip, project index, services, process
     6. Utilities
     7. Responsive    1180px / 900px / 480px breakpoints
   Add page-specific rules at the bottom under a clear comment, or create a
   second stylesheet for a one-off page rather than bloating this file.
   =========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* brand */
  --charcoal:#1F1F1F;
  --charcoal-soft:#2B2B2B;
  --charcoal-deep:#161616;
  --copper:#B96E2B;          /* brand copper: fills, rules, dark backgrounds */
  --copper-dark:#9E5B21;     /* darkened so white text on it passes contrast */
  --copper-light:#D48B4A;    /* links and accents on dark */
  --copper-pale:#F2C08A;
  --gold:#E0A82E;            /* review stars only */

  /* neutrals */
  --white:#fff;
  --ivory:#F6F5F3;
  --line:#DEDAD5;
  --line-dark:#3A3A3A;
  --muted:#5A5550;
  --muted-dark:#8F8A84;
  --text-on-dark:#E4E0DB;

  /* type */
  --font-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --font-body:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* spacing */
  --gutter:80px;
  --section-y:76px;
}

/* ---------- 2. Base ------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--charcoal-soft);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--copper-dark);text-decoration:none}
a:hover{color:#7A4518}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--copper-dark);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);padding:12px 18px;z-index:99}
.skip:focus{left:0}

/* ---------- 3. Layout ---------------------------------------------------- */
.section{padding:var(--section-y) var(--gutter)}
.section--ivory{background:var(--ivory)}
.section--dark{background:var(--charcoal);color:var(--text-on-dark)}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.split--end{align-items:end}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:22px}
.row-between{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}

/* ---------- 4. Components ------------------------------------------------ */
.label{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;
  font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  border:0;cursor:pointer}
.btn--copper{background:var(--copper);color:var(--charcoal)}
.btn--copper:hover{background:var(--copper-light);color:var(--charcoal)}
.btn--solid{background:var(--copper-dark);color:var(--white)}
.btn--solid:hover{background:#7A4518;color:var(--white)}
.btn--ghost{border:2px solid rgba(255,255,255,.7);color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--charcoal)}
.btn--outline{border:2px solid var(--charcoal);color:var(--charcoal)}
.btn--outline:hover{background:var(--charcoal);color:var(--white)}
.btn--sm{min-height:48px;font-size:15px;padding:0 22px}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;
  padding:12px var(--gutter);background:var(--white);border-bottom:3px solid var(--copper)}
.site-header .logo img{height:104px;width:auto}
.nav{display:flex;gap:30px;align-items:center;font-size:18px;font-weight:600}
.nav a{color:var(--charcoal)}
.nav a:hover{color:var(--copper-dark)}
.nav .nav__tel{color:var(--copper-dark);font-weight:700;font-size:19px}

/* The Google rating, in the nav because it is the strongest thing we can say
   in six characters. Shows the number rather than the word "Reviews". */
.nav__rating{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:16px;font-weight:700;line-height:1;text-decoration:none}
.nav__rating:hover{border-color:var(--copper-dark)}
.nav__star{color:var(--gold);font-size:17px}
.nav__count{font-weight:600;font-size:13.5px;color:var(--muted);letter-spacing:.01em}
@media (max-width:900px){ .nav__rating{align-self:flex-start;margin:4px 0} }
.nav__toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);cursor:pointer}

/* footer */
.site-footer{background:var(--ivory);color:var(--muted);padding:44px var(--gutter);border-top:3px solid var(--copper);
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;font-size:16.5px}
.site-footer img{height:56px;width:auto}
.site-footer nav{display:flex;gap:26px;flex-wrap:wrap;font-weight:600}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--copper-dark)}

/* forms */
.form{display:flex;flex-direction:column;gap:14px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;color:var(--muted-dark)}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea{
  min-height:42px;padding:2px 0;background:transparent;border:0;border-bottom:1px solid var(--muted);
  color:var(--white);font-size:17px;font-family:inherit}
.form textarea{min-height:60px}
.form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.form .choices{display:flex;gap:10px;flex-wrap:wrap}
.form .choices label{flex-direction:row;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid var(--muted);color:var(--white);font-size:15px;cursor:pointer}
.form .choices input:checked + span{font-weight:700}

/* photo placeholder, for slots without a photo yet */
.ph{background:repeating-linear-gradient(135deg,#E2DFDB 0 2px,#D8D5D1 2px 14px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  color:var(--muted);font-size:13px}

/* ---------- 5. Page blocks ---------------------------------------------- */

/* hero */
.hero{position:relative;min-height:760px;background:var(--charcoal);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,20,20,.88) 0%,rgba(20,20,20,.55) 50%,rgba(20,20,20,.10) 100%)}
.hero__inner{position:relative;padding:96px var(--gutter);display:flex;flex-direction:column;gap:30px;max-width:980px}
.hero h1{font-stretch:78%;font-weight:800;font-size:clamp(44px,7vw,104px);line-height:.92;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--white)}
.hero__lede{font-size:22px;line-height:1.5;color:var(--text-on-dark);max-width:620px}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero__pictured{position:absolute;right:var(--gutter);bottom:48px;display:flex;gap:16px;align-items:center;
  background:rgba(31,31,31,.82);padding:14px 20px 14px 14px;color:var(--white)}
.hero__pictured img{width:72px;height:56px;object-fit:cover}
.hero__pictured strong{font-weight:700;font-size:17px}

/* compact hero for inner pages */
.hero--inner{min-height:380px}
.hero--inner h1{font-size:clamp(36px,5vw,72px)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--copper);color:var(--charcoal)}
.trust > div{padding:28px 32px;border-right:1px solid rgba(31,31,31,.2)}
.trust > div:first-child{padding-left:var(--gutter)}
.trust > div:last-child{border-right:0;padding-right:var(--gutter)}
.trust b{font-family:var(--font-display);font-weight:800;font-size:22px;display:block}
.trust span{font-size:15px}

/* statement */
.statement h2{font-stretch:85%;font-weight:700;font-size:clamp(34px,4vw,60px);line-height:1.02;color:var(--charcoal)}
.statement em{font-style:normal;color:var(--copper-dark)}

/* project index */
.projects{background:var(--charcoal);padding:72px var(--gutter);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.projects h2{font-stretch:80%;font-weight:800;font-size:clamp(36px,5vw,64px);line-height:.95;
  text-transform:uppercase;color:var(--white)}
.project-list{display:flex;flex-direction:column;border-top:1px solid var(--line-dark);margin:0;padding:0;list-style:none}
.project-list button{display:flex;justify-content:space-between;align-items:baseline;width:100%;min-height:56px;
  padding:14px 0;background:transparent;border:0;border-bottom:1px solid var(--line-dark);
  color:#BDB6AE;text-align:left;cursor:pointer;transition:color .15s ease,padding .2s ease}
.project-list button:hover{color:var(--white);padding-left:8px}
.project-list button[aria-selected="true"]{color:var(--copper-light);box-shadow:inset 4px 0 0 var(--copper);padding-left:16px}
.project-list .name{font-family:var(--font-display);font-weight:700;font-size:24px}
.project-list .kind{font-size:14px;color:var(--muted-dark)}
.project-view{display:flex;flex-direction:column;gap:16px}
.project-view__lead{width:100%;height:620px;object-fit:cover;background:#45413D}
.project-view__thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project-view__thumbs img{width:100%;height:170px;object-fit:cover;background:#45413D}
.project-meta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line-dark);color:var(--text-on-dark)}
.project-meta dl{display:flex;gap:40px;margin:0}
.project-meta dt{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-dark)}
.project-meta dd{margin:0;font-size:17px;font-weight:600}
.project-meta a{color:var(--copper-light);font-weight:700}

/* service rows */
.services h2{font-stretch:80%;font-weight:800;font-size:clamp(36px,5vw,64px);line-height:.95;
  text-transform:uppercase;color:var(--charcoal)}
.service-rows{display:flex;flex-direction:column;border-top:2px solid var(--charcoal)}
.service-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) 280px 60px;gap:40px;align-items:center;
  padding:28px 20px;border-bottom:1px solid var(--line);color:var(--charcoal-soft);transition:background .15s ease}
.service-row:hover{background:var(--ivory)}
.service-row:hover .service-row__arrow{transform:translateX(6px);color:var(--copper-dark)}
.service-row h3{font-stretch:90%;font-weight:700;font-size:clamp(26px,3vw,38px);color:var(--charcoal)}
.service-row img,.service-row .ph{height:150px;width:100%;object-fit:cover}
.service-row__arrow{font-size:32px;color:var(--charcoal);justify-self:end;transition:transform .2s ease}

/* process */
.process h2{font-stretch:80%;font-weight:800;font-size:clamp(36px,5vw,64px);line-height:.95;
  text-transform:uppercase;color:var(--charcoal)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;
  list-style:none;margin:0;padding:0}
.steps::before{content:"";position:absolute;left:0;right:0;top:23px;height:2px;background:#CFCAC4}
.step{position:relative;display:flex;flex-direction:column;gap:16px}
.step__num{width:48px;height:48px;border-radius:50%;background:var(--charcoal);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:20px}
.step:first-child .step__num{background:var(--copper);color:var(--charcoal)}
.step h3{font-weight:700;font-size:26px;color:var(--charcoal)}

/* reviews */
.reviews__mark{font-family:var(--font-display);font-weight:800;font-size:120px;line-height:.6;color:var(--copper)}
.reviews blockquote{margin:0;font-family:var(--font-display);font-stretch:90%;font-weight:600;
  font-size:clamp(26px,3.2vw,40px);line-height:1.2;color:var(--charcoal)}
.reviews cite{font-style:normal;font-size:17px;color:#555}
.review-small{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.review-small:first-of-type{border-top:2px solid var(--charcoal)}
.stars{color:var(--gold);letter-spacing:2px}

/* contact */
.contact{background:var(--charcoal);padding:60px var(--gutter);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.contact h2{font-stretch:78%;font-weight:800;font-size:clamp(32px,4vw,56px);line-height:.95;
  text-transform:uppercase;color:var(--white)}
.contact em{font-style:normal;color:var(--copper-light)}
.contact p{color:#D6D1CB;font-size:18px}
.contact__tel{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--white);line-height:1.1}
.contact__areas{font-size:14px;line-height:1.5;color:var(--muted-dark)}
.contact__areas a{color:#BDB6AE}

/* ---------- 6. Utilities ------------------------------------------------- */
.u-copper{color:var(--copper-dark)}
.u-pale{color:var(--copper-pale)}
.u-light{color:var(--copper-light)}
.u-max-lede{max-width:460px}
.u-self-start{align-self:flex-start}


/* ---------- 8. Project gallery pages ------------------------------------ */
.project-head{padding:40px var(--gutter) 28px}
.project-head h1{font-stretch:80%;font-weight:800;font-size:clamp(36px,5vw,64px);line-height:.95;
  text-transform:uppercase;color:var(--charcoal)}
.project-facts{display:flex;gap:56px;flex-wrap:wrap;margin:28px 0 0;padding-top:24px;border-top:2px solid var(--charcoal)}
.project-facts dt{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.project-facts dd{margin:4px 0 0;font-size:20px;font-weight:600;color:var(--charcoal)}

.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 var(--gutter) 56px}
.gallery-grid button{padding:0;border:0;background:#EDEAE6;cursor:zoom-in;display:block;overflow:hidden}
.gallery-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .35s ease}
.gallery-grid button:hover img{transform:scale(1.03)}

.project-review{background:var(--ivory);padding:56px var(--gutter);display:flex;flex-direction:column;
  gap:18px;align-items:flex-start}
.project-review blockquote{margin:0;font-family:var(--font-display);font-stretch:90%;font-weight:600;
  font-size:clamp(22px,2.6vw,32px);line-height:1.25;color:var(--charcoal);max-width:22em}
.project-review cite{font-style:normal;font-size:16px;color:var(--muted)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(16,16,16,.96);display:none;
  align-items:center;justify-content:center;padding:32px}
.lightbox[open],.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain}
.lightbox__count{position:absolute;top:24px;left:var(--gutter);color:#BDB6AE;font-family:var(--font-display);
  font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase}
.lightbox__btn{position:absolute;background:transparent;border:0;color:#fff;cursor:pointer;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
.lightbox__btn:hover{color:var(--copper-light)}
.lightbox__close{top:16px;right:16px;font-size:40px}
.lightbox__prev{left:8px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:8px;top:50%;transform:translateY(-50%)}

@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:56px}
  .project-facts{gap:32px}
  .lightbox{padding:12px}
  .lightbox img{max-height:calc(100vh - 120px)}
}
@media (max-width:480px){
  .gallery-grid{grid-template-columns:1fr}
  .project-head{padding:36px var(--gutter) 28px}
}


/* ---------- 9. Gallery index -------------------------------------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 var(--gutter) 28px}
.filters button{min-height:44px;padding:0 18px;border:1px solid var(--line);background:var(--white);
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--charcoal);cursor:pointer}
.filters button:hover{border-color:var(--charcoal)}
.filters button[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:var(--charcoal)}

.project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;padding:0 var(--gutter) 64px}
.project-card{display:flex;flex-direction:column;color:var(--charcoal-soft)}
.project-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#EDEAE6}
.project-card__body{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 0 0;border-top:2px solid var(--charcoal);margin-top:14px}
.project-card h2{font-stretch:90%;font-weight:700;font-size:26px;color:var(--charcoal)}
.project-card__meta{font-size:14px;color:var(--muted)}
.project-card:hover h2{color:var(--copper-dark)}
.project-card.is-hidden{display:none}

@media (max-width:1180px){ .project-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .project-cards{grid-template-columns:1fr !important;padding-bottom:56px}
  .project-card__body{flex-wrap:wrap;gap:4px}
  .project-card__meta{flex-shrink:0}
}


/* ---------- 10. Service pages ------------------------------------------- */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.feature{display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--copper);padding-top:22px}
.feature h3{font-stretch:90%;font-weight:700;font-size:26px;color:var(--charcoal)}
.feature p{font-size:17px;line-height:1.6}

.checklist{display:flex;flex-direction:column;gap:22px;margin:0;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;align-items:start}
.checklist svg{margin-top:4px;flex-shrink:0}
.checklist strong{display:block;font-family:var(--font-display);font-stretch:90%;font-weight:700;
  font-size:21px;color:var(--charcoal);margin-bottom:4px}

.areas-line{font-size:17px;line-height:1.7;color:var(--muted)}

@media (max-width:900px){
  .features{grid-template-columns:1fr;gap:28px}
}


/* ---------- 11. Process grid + callout ---------------------------------- */
.steps--grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 24px}
.steps--grid::before{display:none}
.steps--grid .step__num{width:40px;height:40px;font-size:17px;background:var(--charcoal)}
.steps--grid .step:first-child .step__num{background:var(--copper);color:var(--charcoal)}
.steps--grid .step h3{font-size:20px}
.steps--grid .step p{font-size:16px;line-height:1.55}

.callout{background:var(--copper);color:var(--charcoal);padding:40px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.callout h2{font-stretch:85%;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1;text-transform:uppercase}
.callout p{font-size:18px;max-width:56ch}

@media (max-width:1180px){ .steps--grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .steps--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px} }
@media (max-width:480px){ .steps--grid{grid-template-columns:1fr} }


/* ---------- 12. About page ---------------------------------------------- */
.portrait{padding:0 var(--gutter) 8px}
.portrait img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.portrait figcaption{padding-top:12px;font-size:15px;color:var(--muted)}
.prose{columns:2;column-gap:56px;font-size:17px;line-height:1.7}
.prose p{break-inside:avoid;margin-bottom:18px}
@media (max-width:900px){ .prose{columns:1} .portrait img{aspect-ratio:4/3} }


/* ---------- 13. Testimonials -------------------------------------------- */
.stat-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--copper);color:var(--charcoal)}
.stat-band > div{padding:26px 32px;border-right:1px solid rgba(31,31,31,.2)}
.stat-band > div:first-child{padding-left:var(--gutter)}
.stat-band > div:last-child{border-right:0;padding-right:var(--gutter)}
.stat-band b{display:block;font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1.1}
.stat-band span{font-size:15px}

.reviews-columns{columns:3;column-gap:24px;padding:0 var(--gutter) 64px}
.review-card{break-inside:avoid;background:var(--ivory);padding:26px;margin-bottom:24px;
  display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--copper)}
.review-card .stars{font-size:15px;letter-spacing:2px}
.review-card p{font-size:16px;line-height:1.6;color:var(--charcoal-soft)}
.review-card cite{font-style:normal;font-size:15px;color:var(--muted)}
.review-card cite strong{display:block;font-family:var(--font-display);font-stretch:90%;font-weight:700;
  font-size:18px;color:var(--charcoal)}

@media (max-width:1180px){ .reviews-columns{columns:2} }
@media (max-width:900px){ .stat-band{grid-template-columns:1fr} .stat-band > div{border-right:0;border-bottom:1px solid rgba(31,31,31,.2);padding:18px 20px !important} }
@media (max-width:640px){ .reviews-columns{columns:1;padding-bottom:48px} }

/* ---------- 14. FAQ ------------------------------------------------------ */
.faq-lede{max-width:56ch;margin-top:18px;font-size:19px;color:var(--muted)}
.faq-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.faq-jump a{font-family:var(--font-display);font-stretch:85%;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--charcoal);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:background .15s,border-color .15s,color .15s}
.faq-jump a:hover,.faq-jump a:focus-visible{background:var(--copper-dark);border-color:var(--copper-dark);color:#fff}

.faq-section{padding-top:52px;padding-bottom:52px}
.faq-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.faq-group{font-family:var(--font-display);font-stretch:80%;font-weight:800;
  font-size:clamp(26px,2.6vw,38px);line-height:1;text-transform:uppercase;color:var(--charcoal);
  position:sticky;top:24px}
.faq-group em{font-style:normal;color:var(--copper-dark)}

.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;
  padding:20px 0;font-family:var(--font-display);font-stretch:92%;font-weight:700;
  font-size:19px;line-height:1.35;color:var(--charcoal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;margin-left:auto;width:13px;height:13px;
  margin-top:6px;border-right:2px solid var(--copper-dark);border-bottom:2px solid var(--copper-dark);
  transform:rotate(45deg);transform-origin:60% 60%;transition:transform .18s ease}
.faq[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover,.faq[open] summary{color:var(--copper-dark)}
.faq summary:focus-visible{outline:2px solid var(--copper-dark);outline-offset:3px}
.faq__a{padding:0 44px 22px 0;font-size:17px;line-height:1.7;color:var(--muted)}
.faq__a p{margin:0}
.faq__a a{color:var(--copper-dark)}

@media (max-width:900px){
  .faq-split{grid-template-columns:1fr;gap:22px}
  .faq-group{position:static}
}
@media (max-width:640px){
  .faq-section{padding-top:40px;padding-bottom:40px}
  .faq summary{font-size:17.5px;gap:12px}
  .faq__a{padding-right:0}
}

/* ---------- 15. Contact page --------------------------------------------- */
.contact-direct{padding-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;align-items:start}
.contact-card{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:2px solid var(--charcoal)}
.contact-card p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.contact-card__big{font-family:var(--font-display);font-stretch:88%;font-weight:800;font-size:30px;
  line-height:1.1;color:var(--charcoal);text-decoration:none;word-break:break-word}
.contact-card__big:hover{color:var(--copper-dark)}
.contact-card__big--email{font-size:20px;font-stretch:92%}
.contact-card__hours{font-family:var(--font-display);font-stretch:88%;font-weight:800;font-size:22px;
  line-height:1.25;color:var(--charcoal)}
.contact-card__hours,.contact-card p.contact-card__hours{color:var(--charcoal)}

@media (max-width:900px){
  .contact-direct{grid-template-columns:1fr;gap:28px}
}

/* ---------- 16. Blog ------------------------------------------------------ */
.post__meta{margin-top:16px;font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.project-head .label a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.project-head .label a:hover{color:var(--charcoal)}

.post__hero{margin:0 0 8px;padding:0 var(--gutter)}
.post__hero img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#EDEAE6}

/* A post is one centred column: headline, photo and copy share --post-w so
   nothing sits alone against empty space. box-sizing is border-box, so the
   gutter is added back into the width or it would eat into the measure.
   The width is in rem, not ch: ch resolves against each element's own font
   size, so the headline and the copy would land on different widths. */
.post{--post-w:calc(47rem + var(--gutter) * 2)}
.post .project-head,
.post__hero,
.post__body{max-width:var(--post-w);margin-left:auto;margin-right:auto}
.post .project-head h1{font-size:clamp(30px,3.6vw,52px)}
.post__body{padding:44px var(--gutter) 64px;font-size:20px;line-height:1.75;color:var(--charcoal-soft)}
.post__body > *:first-child{margin-top:0}
.post__body p{margin:0 0 22px}
.post__body h2{font-family:var(--font-display);font-stretch:84%;font-weight:800;
  font-size:clamp(24px,2.4vw,32px);line-height:1.1;text-transform:uppercase;color:var(--charcoal);
  margin:44px 0 16px}
.post__body h3{font-family:var(--font-display);font-stretch:92%;font-weight:700;font-size:21px;
  line-height:1.25;color:var(--charcoal);margin:32px 0 12px}
.post__body ul,.post__body ol{margin:0 0 22px;padding-left:22px}
.post__body li{margin-bottom:9px}
.post__body a{color:var(--copper-dark)}
.post__body strong{color:var(--charcoal)}

@media (min-width:1600px){
  .post{--post-w:calc(51rem + var(--gutter) * 2)}
  .post__body{font-size:21px}
}
/* Between tablet and laptop the type steps down before the column does,
   which would stretch the line length. Narrow the column to match. */
@media (max-width:1100px){
  .post{--post-w:calc(42rem + var(--gutter) * 2)}
}

.post__more{padding-top:52px;padding-bottom:52px}
.post__more-cards{padding-left:0;padding-right:0;padding-bottom:0;margin-top:26px}
.project-card__excerpt{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.project-card--post .project-card__body{display:block}
.project-card--post .project-card__meta{display:block;font-family:var(--font-display);font-weight:600;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.project-card--post h2{margin-top:7px;font-size:23px;line-height:1.2}

.post-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px;align-items:center;
  padding:0 var(--gutter) 40px;color:var(--charcoal-soft);text-decoration:none}
.post-lead img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#EDEAE6}
.post-lead__body{display:flex;flex-direction:column;gap:14px}
.post-lead h2{font-family:var(--font-display);font-stretch:80%;font-weight:800;
  font-size:clamp(28px,3.2vw,44px);line-height:1;text-transform:uppercase;color:var(--charcoal)}
.post-lead p{font-size:17px;line-height:1.65;color:var(--muted)}
.post-lead__more{font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--copper-dark)}
.post-lead:hover h2{color:var(--copper-dark)}

@media (max-width:900px){
  .post-lead{grid-template-columns:1fr;gap:20px}
  .post__body{padding-top:32px;font-size:18.5px}
}

/* ---------- 17. Location pages ------------------------------------------- */
.loc__hero{margin:0 0 8px;padding:0 var(--gutter)}
.loc__hero img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;background:#EDEAE6}

/* Two real columns rather than proportional ones. With 8fr/4fr the text kept
   its 68ch measure while its track went on growing, so the gap to the sidebar
   opened up to 500px on a wide screen. Fixed tracks, centred as a pair. */
.loc-head,
.loc__hero,
.loc{max-width:calc(41rem + 344px + var(--gutter) * 2);margin-left:auto;margin-right:auto}
.loc{display:grid;grid-template-columns:minmax(0,41rem) 300px;gap:44px;
  justify-content:center;padding:44px var(--gutter) 60px;align-items:start}
.loc__body{font-size:18px;line-height:1.75;color:var(--charcoal-soft)}
.loc__body > *:first-child{margin-top:0}
.loc__body p{margin:0 0 20px}
.loc__body h2{font-family:var(--font-display);font-stretch:84%;font-weight:800;
  font-size:clamp(22px,2.2vw,30px);line-height:1.1;text-transform:uppercase;color:var(--charcoal);
  margin:38px 0 14px}
.loc__body h3{font-family:var(--font-display);font-stretch:92%;font-weight:700;font-size:20px;
  color:var(--charcoal);margin:28px 0 10px}
.loc__body ul,.loc__body ol{margin:0 0 20px;padding-left:22px}
.loc__body li{margin-bottom:8px}
.loc__body a{color:var(--copper-dark)}

.loc__aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.loc__card{background:var(--ivory);border-top:3px solid var(--copper);padding:24px}
.loc__card--plain{background:transparent;border-top:1px solid var(--line);padding:22px 0 0}
.loc__card p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.loc__card a{color:var(--copper-dark)}
.loc__tel{display:block;margin-top:8px;font-family:var(--font-display);font-stretch:88%;
  font-weight:800;font-size:27px;color:var(--charcoal);text-decoration:none}
.loc__tel:hover{color:var(--copper-dark)}
.loc__hours{font-size:14px !important;color:var(--muted-dark) !important}
.loc__links{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.loc__links a{font-size:16px;color:var(--charcoal);text-decoration:none;border-bottom:1px solid var(--line)}
.loc__links a:hover{color:var(--copper-dark);border-color:var(--copper-dark)}

@media (max-width:980px){
  .loc{grid-template-columns:minmax(0,1fr);gap:34px}
  .loc__body{max-width:41rem}   /* stacked, so the column no longer caps it */
  .loc__aside{position:static}
  .loc__hero img{aspect-ratio:16/9}
}

/* ---------- 7. Responsive ------------------------------------------------ */
@media (max-width:1180px){
  :root{--gutter:40px;--section-y:60px}
  .service-row{grid-template-columns:minmax(0,4fr) minmax(0,5fr) 200px 40px;gap:24px}
  .projects{grid-template-columns:1fr;gap:40px}
  .project-view__lead{height:420px}
  .split{gap:40px}
}
@media (max-width:900px){
  .nav{display:none}
  .nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--white);border-bottom:3px solid var(--copper);padding:8px var(--gutter) 24px;z-index:20}
  .nav.is-open a{padding:16px 0;width:100%;border-bottom:1px solid var(--line);font-size:19px}
  .nav.is-open .btn{width:100%;margin-top:12px}
  .nav__toggle{display:flex}
  .site-header .logo img{height:64px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust > div{padding:18px 20px !important}
  .split,.split--even,.contact{grid-template-columns:1fr;gap:32px}
  .form__row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before{display:none}
  .service-row{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .service-row img,.service-row .ph{height:180px;order:-1}
  .service-row__arrow{display:none}
  .hero{min-height:560px}
  .hero__scrim{background:linear-gradient(180deg,rgba(20,20,20,.62) 0%,rgba(20,20,20,.62) 45%,rgba(20,20,20,.9) 100%)}
  .hero__pictured{display:none}
  .project-view__thumbs img{height:110px}
}
@media (max-width:480px){
  :root{--gutter:16px;--section-y:44px}
  body{font-size:16px}
  .btn{width:100%}
  .project-meta dl{gap:20px}
  .contact__tel{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto}}