/* ══════════════════════════════════════════════════════════════════
   Vellmark Group — shared stylesheet for every page on the site.
   Edit tokens HERE, never in a page. If a rule is only ever used by one
   page it belongs in that page's own <style>, not in this file.
   ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   Vellmark Group — design tokens
   Palette named after construction materials, sampled from the
   client's own logo pixels (#00ABE0, #232320) and photography.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --plaster:#EDEDEA;      /* ground — fresh drywall before paint */
  --plaster-2:#E3E3DF;    /* recessed ground */
  --concrete:#C9C9C3;     /* mats, panels, strong hairline */
  --zinc:#63666A;         /* meta, muted copy — 4.92:1 on plaster */
  --carbon:#232320;       /* ink — sampled from the logo */
  --bitumen:#141413;      /* deep sections */
  --blueprint:#00ABE0;    /* accent — sampled from the logo. Used twice. */

  --rule:rgba(35,35,32,.16);
  --rule-soft:rgba(35,35,32,.09);
  --rule-dark:rgba(237,237,234,.16);

  /* The roofline. Measured off the logo mark: the cyan plane leans
     19.48° from vertical. It is the only non-orthogonal angle here. */
  --lean:19.5deg;
  --lean-tan:.3538;

  --hero-h:clamp(30rem,80vh,53rem);
  --cut:calc(var(--hero-h) * var(--lean-tan));

  --pad:clamp(1.25rem,4.4vw,4.5rem);
  --max:88rem;
  --bleed:max(0px,(100vw - var(--max)) / 2);

  --sans:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--plaster);color:var(--carbon);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.62;
  font-variation-settings:"wdth" 100,"opsz" 14;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{list-style:none;padding:0}
::selection{background:var(--blueprint);color:var(--carbon)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* ─── Type roles ─────────────────────────────────────────────── */
.display{
  font-size:clamp(2.6rem,7.2vw,6.25rem);line-height:.94;
  letter-spacing:-.038em;font-weight:500;
  font-variation-settings:"wdth" 92,"opsz" 96;
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.8rem,3.7vw,3.15rem);line-height:1.02;
  letter-spacing:-.03em;font-weight:500;
  font-variation-settings:"wdth" 94,"opsz" 72;
  text-wrap:balance;
}
.h3{
  font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.18;
  letter-spacing:-.018em;font-weight:600;
  font-variation-settings:"opsz" 24;
}
.lede{
  font-size:clamp(1.0625rem,1.32vw,1.22rem);line-height:1.55;
  color:#3B3B37;max-width:38ch;
}
.prose{max-width:62ch;color:#3B3B37}
.prose + .prose{margin-top:1.1em}

/* Mono is reserved for real technical data: addresses, phone numbers,
   service schedules, drawing-sheet indices. Never a decorative label. */
.meta{
  font-family:var(--mono);font-size:.6875rem;line-height:1.4;
  letter-spacing:.15em;text-transform:uppercase;color:var(--zinc);
  font-variant-numeric:tabular-nums;
}
.data{font-family:var(--mono);font-size:.8125rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.idx{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--zinc);font-variant-numeric:tabular-nums;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.02rem 1.85rem;border:1px solid var(--carbon);background:var(--carbon);
  color:var(--plaster);font-family:var(--sans);font-size:.9375rem;font-weight:600;
  letter-spacing:-.005em;text-decoration:none;border-radius:0;cursor:pointer;
  transition:background .22s cubic-bezier(.2,.7,.3,1),border-color .22s,color .22s;
}
.btn:hover{background:var(--blueprint);border-color:var(--blueprint);color:var(--carbon)}
.btn--ghost{background:transparent;color:var(--carbon)}
.btn--ghost:hover{background:var(--carbon);border-color:var(--carbon);color:var(--plaster)}
.btn--onDark{background:var(--plaster);border-color:var(--plaster);color:var(--carbon)}
.btn--onDark:hover{background:var(--blueprint);border-color:var(--blueprint);color:var(--carbon)}

.tel{
  font-family:var(--mono);font-size:.9375rem;letter-spacing:.01em;
  text-decoration:none;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;
  transition:border-color .2s,color .2s;
}
.tel:hover{border-color:var(--blueprint);color:var(--blueprint)}

.linkline{
  display:inline-block;font-weight:600;font-size:.9375rem;text-decoration:none;
  padding-bottom:.28rem;border-bottom:1px solid var(--carbon);
  transition:border-color .2s,color .2s;
}
.linkline:hover{color:var(--blueprint);border-color:var(--blueprint)}

/* ══════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:60;background:var(--plaster);
  border-bottom:1px solid var(--rule-soft);
}
.nav__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:5.25rem;
  display:flex;align-items:center;gap:2rem;
}
.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex-shrink:0}
.brand img{height:1.85rem;width:auto}
.brand__name{
  font-size:1.06rem;font-weight:700;letter-spacing:-.028em;line-height:1;
  font-variation-settings:"wdth" 92,"opsz" 18;
}
.brand__name span{font-weight:400;color:var(--zinc)}
.nav__links{display:flex;gap:2.15rem;margin-left:auto}
.nav__links a{
  text-decoration:none;font-size:.9375rem;font-weight:500;letter-spacing:-.008em;
  padding-bottom:.2rem;border-bottom:1px solid transparent;transition:border-color .2s;
}
.nav__links a:hover{border-color:var(--carbon)}
.nav__end{display:flex;align-items:center;gap:1.5rem;margin-left:2.25rem}
.nav__burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;margin-left:auto}
.nav__burger span{
  display:block;width:22px;height:1.5px;background:var(--carbon);margin:5px 0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .18s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.sheet{display:none;border-top:1px solid var(--rule-soft);background:var(--plaster)}
.sheet[data-open]{display:block}
.sheet__in{padding:.5rem var(--pad) 2rem}
.sheet a.sheet__link{
  display:block;text-decoration:none;font-size:1.35rem;font-weight:500;
  letter-spacing:-.022em;padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);
}
.sheet__foot{display:flex;flex-direction:column;gap:1.1rem;padding-top:1.75rem;align-items:flex-start}
.sheet__foot .btn{width:100%}

/* ══════════════════════════════════════════════════════════════
   HERO — asymmetric split, divided on the roofline
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative;background:var(--plaster);overflow:hidden}
.hero__grid{
  max-width:var(--max);margin:0 auto;position:relative;
  min-height:var(--hero-h);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
}
.hero__copy{
  padding:clamp(2.75rem,5.4vw,5rem) var(--pad) clamp(2.75rem,5vw,4.5rem);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;
}
.hero__eyebrow{margin-bottom:1.6rem;display:flex;align-items:center;gap:.85rem}
.hero__eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:5rem}
.hero .display{margin-bottom:1.5rem}
.hero .lede{margin-bottom:2.4rem}
.hero__cta{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}

/* The photograph runs to the true right edge of the viewport, not the
   content measure — so it reads as a wall, not a card. */
.hero__shot{position:relative}
.hero__shot::before{
  content:"";position:absolute;top:0;left:0;
  width:calc(100% + var(--bleed));height:100%;
  background:var(--plaster-2);
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);
}
/* The element is stretched to exactly the slice that is visible — from the
   column's left edge out to the viewport's right edge — so object-fit
   composes the crop for what the eye actually sees, at every width. */
.hero__shot img{
  position:absolute;top:0;left:0;
  width:calc(100% + var(--bleed));max-width:none;height:100%;
  object-fit:cover;object-position:64% 50%;
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);
}

/* Colophon — the strongest "this is a real business" signal there is. */
.colophon{border-top:1px solid var(--rule);background:var(--plaster)}
.colophon__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.12fr;
}
.colophon__cell{padding:1.6rem 1.75rem 1.7rem 0;position:relative}
.colophon__cell + .colophon__cell{padding-left:1.75rem}
.colophon__cell + .colophon__cell::before{
  content:"";position:absolute;left:0;top:1.6rem;bottom:1.7rem;width:1px;background:var(--rule);
}
.colophon__cell dt{margin-bottom:.55rem}
.colophon__cell dd{margin:0;font-size:.9375rem;line-height:1.45;letter-spacing:-.006em}

/* ══════════════════════════════════════════════════════════════
   CREDENTIAL BAND
   ══════════════════════════════════════════════════════════════ */
/* A static row, not a marquee. These are the credentials a condo board
   actually reads before shortlisting — they need to hold still. */
.creds{background:var(--carbon);color:var(--plaster)}
.creds__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.creds__cell{
  padding:1.5rem 1.5rem 1.55rem 0;position:relative;
  display:flex;flex-direction:column;gap:.42rem;
}
.creds__cell + .creds__cell{padding-left:1.5rem}
.creds__cell + .creds__cell::before{
  content:"";position:absolute;left:0;top:1.5rem;bottom:1.55rem;width:1px;
  background:rgba(237,237,234,.16);
}
.creds__k{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(237,237,234,.55);
}
.creds__v{font-size:.9375rem;font-weight:500;letter-spacing:-.008em;line-height:1.3}
.creds__star{color:var(--blueprint);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════
   TWO DOORS — the site splits on who is buying
   ══════════════════════════════════════════════════════════════ */
.doors{background:var(--plaster);padding:clamp(4.5rem,8vw,8rem) 0 0}
.doors__head{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(2.75rem,4.5vw,4rem)}
.doors__head .h2{max-width:22ch}
.doors__head p{margin-top:1.2rem}
.js [data-reveal] .w{opacity:.16;transition:opacity .45s linear}
@media (prefers-reduced-motion:reduce){ .js [data-reveal] .w{opacity:1;transition:none} }

.doors__pair{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;
}
.door{position:relative;padding-bottom:clamp(3rem,5vw,4.5rem)}
.door--res{padding-right:clamp(2rem,4vw,4rem)}
.door--com{padding-left:clamp(2rem,4vw,4rem)}
/* the same roofline, now as the seam between the two audiences */
.door--com::before{
  content:"";position:absolute;left:0;top:-3.5rem;bottom:1.25rem;width:1px;
  background:var(--concrete);transform:skewX(calc(-1 * var(--lean)));transform-origin:bottom;
}
.door__shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--plaster-2);margin-bottom:1.9rem}
.door__shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.door:hover .door__shot img{transform:scale(1.035)}
.door__tag{
  position:absolute;left:0;bottom:0;background:var(--plaster);
  padding:.75rem 1.1rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.15em;text-transform:uppercase;
}
.door .h3{margin-bottom:.9rem}
.door p{color:#3B3B37;max-width:44ch;margin-bottom:1.9rem}

.sched{border-top:1px solid var(--carbon);margin-bottom:2.1rem}
.sched li{
  display:flex;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--rule-soft);
}
.sched li span:first-child{font-family:var(--mono);font-size:.6875rem;color:var(--zinc);flex:none;width:2rem;font-variant-numeric:tabular-nums}
.sched li span:last-child{font-size:.9375rem;font-weight:500;letter-spacing:-.008em}

/* ══════════════════════════════════════════════════════════════
   SELECTED WORK — asymmetric editorial, real photography at scale
   ══════════════════════════════════════════════════════════════ */
.work{background:var(--plaster);padding:clamp(4.5rem,8vw,8.5rem) 0 clamp(4rem,7vw,7rem)}
/* Rule inset to the content measure, not the padded box — the same edge
   every other hairline on the page sits on. */
.work__head{
  position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-bottom:clamp(2.25rem,3.6vw,3.25rem);
}
.work__head::after{
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;
  height:1px;background:var(--carbon);
}
.work__head .h2{max-width:18ch}

.plates{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.plate{padding:clamp(2.5rem,4.6vw,4.25rem) 0;border-bottom:1px solid var(--rule-soft)}
.plate:last-child{border-bottom:0}
.plate__row{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:end}
.plate--a .plate__row{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.plate--b .plate__row{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.plate--b .plate__caption{order:-1}
.plate figure{margin:0}
/* Each frame crops its photograph, and the photograph is cut taller than the
   frame so it has room to drift. */
.par{display:block;position:relative;overflow:hidden;background:var(--plaster-2);aspect-ratio:16/11}
.par img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.plate__stack .par{aspect-ratio:4/5}
@media (prefers-reduced-motion:no-preference){
  .par img{top:-9%;height:118%;will-change:transform}
}
/* Index pinned to the top of the column, the rest sitting on the image's
   baseline — so the space between them reads as measured, not left over. */
.plate__caption{
  align-self:stretch;display:flex;flex-direction:column;
  justify-content:space-between;padding-bottom:.3rem;
}
.plate__caption .idx{display:block;margin-bottom:1.1rem}
.plate__caption .h3{margin-bottom:.75rem}
.plate__caption p{color:#3B3B37;font-size:.9375rem;max-width:34ch}
.plate__spec{margin-top:1.4rem;border-top:1px solid var(--rule)}
.plate__spec div{
  display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--rule-soft);font-family:var(--mono);font-size:.75rem;
  font-variant-numeric:tabular-nums;
}
.plate__spec div span:first-child{color:var(--zinc);letter-spacing:.06em}
.plate__stack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.75rem)}
.work__foot{
  position:relative;max-width:var(--max);margin:clamp(1rem,2vw,2rem) auto 0;
  padding:clamp(2.5rem,4vw,3.5rem) var(--pad) 0;display:flex;align-items:baseline;
  justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.work__foot::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;
  height:1px;background:var(--carbon);
}
.work__foot .prose{max-width:44ch;font-size:.9375rem}

/* ══════════════════════════════════════════════════════════════
   STANDARD — the four claims, as a spec schedule, not cards
   ══════════════════════════════════════════════════════════════ */
.standard{background:var(--plaster-2);padding:clamp(4.5rem,8vw,8rem) 0}
.standard__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.standard__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:start;padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.standard__top .h2{max-width:16ch}
.rows{border-top:1px solid var(--carbon)}
.row{
  display:grid;grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);align-items:start;
  padding:clamp(1.5rem,2.6vw,2.25rem) 0;border-bottom:1px solid var(--rule);
}
.row p{color:#3B3B37;max-width:60ch}

/* ══════════════════════════════════════════════════════════════
   PROCESS — genuinely a sequence, so it genuinely gets numbers
   ══════════════════════════════════════════════════════════════ */
.process{background:var(--plaster);padding:clamp(4.5rem,8vw,8rem) 0}
.process__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.process__head{max-width:52ch;padding-bottom:clamp(2.5rem,4.4vw,3.75rem)}
.process__head p{margin-top:1.1rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--carbon)}
.step{padding:1.9rem 1.75rem 0 0;position:relative}
.step + .step{padding-left:1.75rem}
.step + .step::before{content:"";position:absolute;left:0;top:0;bottom:.5rem;width:1px;background:var(--rule)}
.step__n{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--zinc);
  display:block;margin-bottom:1.5rem;font-variant-numeric:tabular-nums;
}
.step .h3{margin-bottom:.7rem}
.step p{font-size:.9375rem;color:#3B3B37;line-height:1.55}

/* ══════════════════════════════════════════════════════════════
   QUOTES — real reviews, set as pull quotes
   ══════════════════════════════════════════════════════════════ */
.says{background:var(--plaster);padding:0 0 clamp(4.5rem,8vw,8rem)}
.says__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.says__head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-bottom:clamp(2rem,3.4vw,3rem);border-bottom:1px solid var(--carbon)}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.quote{padding:clamp(2rem,3.4vw,3rem) clamp(1.5rem,3vw,3rem) clamp(2rem,3.4vw,3rem) 0;border-bottom:1px solid var(--rule);position:relative}
.quote:nth-child(even){padding-left:clamp(1.5rem,3vw,3rem);padding-right:0}
.quote:nth-child(even)::before{content:"";position:absolute;left:0;top:clamp(2rem,3.4vw,3rem);bottom:clamp(2rem,3.4vw,3rem);width:1px;background:var(--rule)}
.quote blockquote{
  font-size:clamp(1.0625rem,1.35vw,1.22rem);line-height:1.5;letter-spacing:-.014em;
  font-weight:400;color:var(--carbon);max-width:46ch;
}
.quote figcaption{margin-top:1.5rem;display:flex;align-items:center;gap:.8rem}
.quote figcaption .nm{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}

/* ══════════════════════════════════════════════════════════════
   QUOTE REQUEST — deep ground
   ══════════════════════════════════════════════════════════════ */
.ask{background:#0D0D0C;color:var(--plaster);position:relative;overflow:hidden}
.ask__in{
  max-width:var(--max);margin:0 auto;padding:clamp(4rem,7vw,7rem) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);position:relative;z-index:2;
}
.ask .h2{color:var(--plaster);max-width:14ch;margin-bottom:1.3rem}
.ask__lede{color:rgba(237,237,234,.68);max-width:40ch;font-size:1.0625rem;line-height:1.6;margin-bottom:2.75rem}
.ask__contact{border-top:1px solid var(--rule-dark)}
.ask__contact div{padding:1.05rem 0;border-bottom:1px solid var(--rule-dark);display:grid;grid-template-columns:6.5rem 1fr;gap:1.25rem;align-items:baseline}
.ask__contact dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,237,234,.58)}
.ask__contact dd{margin:0;font-family:var(--mono);font-size:.8125rem;line-height:1.55;color:rgba(237,237,234,.9);font-variant-numeric:tabular-nums}
.ask__contact a{text-decoration:none;border-bottom:1px solid rgba(237,237,234,.28)}
.ask__contact a:hover{border-color:var(--blueprint);color:var(--blueprint)}

.form{display:grid;gap:0}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.field{position:relative;border-bottom:1px solid var(--rule-dark);padding-top:1.45rem}
.field--half{padding-right:1.5rem}
.field--half + .field--half{padding-right:0;padding-left:1.5rem}
.field label{
  position:absolute;top:0;left:0;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(237,237,234,.58);
}
.field--half + .field--half label{left:1.5rem}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;outline:0;color:var(--plaster);
  font-family:var(--sans);font-size:1rem;padding:.35rem 0 .95rem;letter-spacing:-.01em;
  border-radius:0;
}
.field select{appearance:none;cursor:pointer}
.field select:invalid,.field select option[value=""]{color:rgba(237,237,234,.5)}
.field select option{background:var(--bitumen);color:var(--plaster)}
.field textarea{resize:vertical;min-height:5.5rem}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:0}
.field:focus-within{border-color:var(--blueprint)} /* accent, use 2 of 2 */
.field ::placeholder{color:rgba(237,237,234,.5)}
.form__foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:2rem}
.form__note{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:rgba(237,237,234,.55);max-width:26ch;line-height:1.55}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.foot{background:var(--bitumen);color:var(--plaster);border-top:1px solid var(--rule-dark)}
.foot__in{max-width:var(--max);margin:0 auto;padding:clamp(3rem,5vw,4.5rem) var(--pad) 2rem;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
.foot__logo img{width:clamp(11rem,17vw,15rem);height:auto;margin-bottom:1.5rem}
.foot__logo p{font-family:var(--mono);font-size:.75rem;line-height:1.75;color:rgba(237,237,234,.58);max-width:36ch;letter-spacing:.01em}
.foot h4{font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,237,234,.58);font-weight:400;margin-bottom:1.15rem}
.foot li{margin-bottom:.62rem}
.foot li a{font-size:.9375rem;text-decoration:none;color:rgba(237,237,234,.85);letter-spacing:-.008em;transition:color .2s}
.foot li a:hover{color:var(--plaster)}
.foot__bar{max-width:var(--max);margin:0 auto;padding:1.5rem var(--pad) 2.25rem;border-top:1px solid var(--rule-dark);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot__bar p,.foot__bar a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;color:rgba(237,237,234,.55);text-decoration:none}
.foot__bar a:hover{color:rgba(237,237,234,.8)}

/* ─── one orchestrated entrance, nothing more ────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(14px);transition:opacity .82s cubic-bezier(.2,.7,.3,1),transform .82s cubic-bezier(.2,.7,.3,1)}
  .js .rise.in{opacity:1;transform:none}
  .hero__eyebrow,.hero .display,.hero .lede,.hero__cta{opacity:0;transform:translateY(16px);animation:enter .9s cubic-bezier(.2,.7,.3,1) forwards}
  .hero__eyebrow{animation-delay:.06s}
  .hero .display{animation-delay:.14s}
  .hero .lede{animation-delay:.24s}
  .hero__cta{animation-delay:.32s}
  /* Resting state is the finished one — if the animation never runs the
     photograph is still there. The keyframe only supplies the start. */
  .hero__shot img{animation:reveal 1.15s cubic-bezier(.76,0,.24,1) .1s both}
}
@keyframes enter{to{opacity:1;transform:none}}
@keyframes reveal{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--blueprint);outline-offset:3px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — designed down, not collapsed
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1250px){
  /* The address is the one string that will not shrink; give the mono a
     smaller step before the columns are forced to stack. */
  .colophon__cell .data{font-size:.75rem}
}
@media (max-width:1080px){
  .colophon__in{grid-template-columns:1fr 1fr}
  .colophon__cell:nth-child(3),.colophon__cell:nth-child(4){border-top:1px solid var(--rule)}
  .colophon__cell:nth-child(3)::before{display:none}
  .colophon__cell:nth-child(3){padding-left:0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3),.step:nth-child(4){border-top:1px solid var(--rule);margin-top:-1px;padding-top:1.9rem}
  .step:nth-child(3)::before{display:none}
  .step:nth-child(3){padding-left:0}
  .standard__top{grid-template-columns:1fr;gap:1.5rem}
  .row{grid-template-columns:3rem minmax(0,12rem) minmax(0,1fr);gap:1.5rem}
}
@media (min-width:901px){
  .sheet{display:none!important}
}
@media (max-width:900px){
  .nav__links,.nav__end{display:none}
  .nav__burger{display:block}
  .nav__in{height:4.25rem}
  :root{--hero-h:auto}
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__copy{padding-top:clamp(2.5rem,9vw,4rem);padding-bottom:clamp(2rem,7vw,3rem)}
  .hero__shot{height:clamp(19rem,58vw,26rem)}
  .hero__shot::before{display:none}
  .hero__shot img{
    position:relative;inset:auto;width:100%;height:100%;
    object-position:58% 50%;animation:none;
    clip-path:polygon(0 11%,100% 0,100% 100%,0 100%);
  }
  .ask__in{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  .plate--a .plate__row,.plate--b .plate__row{grid-template-columns:1fr}
  .plate--b .plate__caption{order:0}
  .plate__caption{padding-top:1.5rem}
  .work__head{flex-direction:column;align-items:flex-start;gap:1.25rem}
}
@media (max-width:900px){
  .creds__in{grid-template-columns:repeat(3,1fr)}
  .creds__cell:nth-child(4){padding-left:0;border-top:1px solid rgba(237,237,234,.16)}
  .creds__cell:nth-child(4)::before{display:none}
  .creds__cell:nth-child(5){border-top:1px solid rgba(237,237,234,.16)}
}
@media (max-width:720px){
  .creds__in{grid-template-columns:1fr 1fr}
  .creds__cell:nth-child(odd){padding-left:0}
  .creds__cell:nth-child(odd)::before{display:none}
  .creds__cell:nth-child(n+3){border-top:1px solid rgba(237,237,234,.16)}
  .doors__pair{grid-template-columns:1fr}
  .door--res{padding-right:0;padding-bottom:2.5rem;border-bottom:1px solid var(--rule)}
  .door--com{padding-left:0;padding-top:2.5rem}
  .door--com::before{display:none}
  .quotes{grid-template-columns:1fr}
  .quote,.quote:nth-child(even){padding-left:0;padding-right:0}
  .quote:nth-child(even)::before{display:none}
  .colophon__in{grid-template-columns:1fr}
  .colophon__cell{padding-left:0!important;padding-right:0}
  .colophon__cell + .colophon__cell{border-top:1px solid var(--rule)}
  .colophon__cell + .colophon__cell::before{display:none}
  .steps{grid-template-columns:1fr}
  .step,.step + .step{padding-left:0;padding-right:0;border-top:1px solid var(--rule);margin-top:-1px}
  .step + .step::before{display:none}
  .step:first-child{border-top:0}
  .row{grid-template-columns:1fr;gap:.6rem}
  .form__grid{grid-template-columns:1fr}
  .field--half{padding-right:0}
  .field--half + .field--half{padding-left:0}
  .field--half + .field--half label{left:0}
  .foot__in{grid-template-columns:1fr}
  .plate__stack{gap:.75rem}
}

/* ══════════════════════════════════════════════════════════════
   INTERIOR PAGES
   Everything below is shared by the pages other than the homepage.
   ══════════════════════════════════════════════════════════════ */

/* The roofline is the site's hero device: every page hero carries it, and
   it appears nowhere else. --cut must be redeclared alongside --hero-h,
   because a custom property resolves its var() references on the element
   where it is declared — overriding --hero-h alone does not recompute it. */
.hero--page{
  --hero-h:clamp(20rem,50vh,31rem);
  --cut:calc(var(--hero-h) * var(--lean-tan));
}
.hero--page .display{font-size:clamp(2.15rem,5vw,4.15rem);line-height:.98}
.hero--page .hero__copy{padding-top:clamp(2.25rem,4vw,3.5rem);padding-bottom:clamp(2.25rem,4vw,3.5rem)}
.hero--page .lede{margin-bottom:0}
.hero--page .lede + .hero__cta{margin-top:2.1rem}

/* Section head used on every interior page. */
.shead{
  position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  padding-bottom:clamp(2rem,3.4vw,3rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.shead::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--carbon)}
.shead .h2{max-width:20ch}
.sect{padding:clamp(4rem,7vw,7rem) 0}
.sect--alt{background:var(--plaster-2)}
.sect__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sect__intro{max-width:62ch;padding-bottom:clamp(2rem,3.4vw,3rem)}
.sect__intro p + p{margin-top:1.1em}

/* The four-claims schedule. Lifted back out of _parked/ for about.html. */
.rows{border-top:1px solid var(--carbon)}
.row{
  display:grid;grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);align-items:start;
  padding:clamp(1.5rem,2.6vw,2.25rem) 0;border-bottom:1px solid var(--rule);
}
.row p{color:#3B3B37;max-width:60ch}

/* A service area: photograph, copy, and its own schedule. Used three times
   on residential.html and once on commercial.html. */
.area{padding:clamp(3rem,5.5vw,5.5rem) 0;border-bottom:1px solid var(--rule)}
.area:last-of-type{border-bottom:0}
.area__row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.area--flip .area__row{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.area--flip .area__media{order:2}
.area__media .par{aspect-ratio:4/3}
.area__label{display:block;margin-bottom:1.1rem}
.area .h2{font-size:clamp(1.6rem,2.9vw,2.4rem);margin-bottom:1rem}
.area__body{color:#3B3B37;max-width:52ch;margin-bottom:2rem}
.area__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--carbon)}
.area__item{padding:1.15rem 1.5rem 1.3rem 0;border-bottom:1px solid var(--rule-soft);position:relative}
.area__item:nth-child(even){padding-left:1.5rem;padding-right:0}
.area__item:nth-child(even)::before{content:"";position:absolute;left:0;top:1.15rem;bottom:1.3rem;width:1px;background:var(--rule-soft)}
.area__item h4{font-size:1rem;font-weight:600;letter-spacing:-.014em;margin-bottom:.4rem}
.area__item p{font-size:.875rem;line-height:1.5;color:#3B3B37}

/* Gallery — work.html */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.75rem,1.5vw,1.5rem)}
.gal figure{margin:0;grid-column:span 2}
.gal figure.w3{grid-column:span 3}
.gal figure.w4{grid-column:span 4}
.gal figure.w6{grid-column:span 6}
.gal .par{aspect-ratio:4/3}
.gal figure.w6 .par,.gal figure.w4 .par{aspect-ratio:16/9}
.gal figcaption{padding-top:.85rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.gal figcaption span:first-child{font-size:.9375rem;font-weight:500;letter-spacing:-.008em}

/* Closing band — every interior page ends on one. */
.band{background:var(--carbon);color:var(--plaster)}
.band__in{
  max-width:var(--max);margin:0 auto;padding:clamp(3rem,5.5vw,5rem) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.band .h2{color:var(--plaster);max-width:20ch;font-size:clamp(1.6rem,2.9vw,2.4rem)}
.band__cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.band .tel{color:var(--plaster);border-color:var(--rule-dark)}
.band .tel:hover{color:var(--blueprint);border-color:var(--blueprint)}

@media (max-width:900px){
  .area__row,.area--flip .area__row{grid-template-columns:1fr;gap:1.75rem}
  .area--flip .area__media{order:0}
  .gal{grid-template-columns:repeat(4,1fr)}
  .gal figure,.gal figure.w3{grid-column:span 2}
  .gal figure.w4,.gal figure.w6{grid-column:span 4}
}
@media (max-width:720px){
  .area__grid{grid-template-columns:1fr}
  .area__item,.area__item:nth-child(even){padding-left:0;padding-right:0}
  .area__item:nth-child(even)::before{display:none}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure,.gal figure.w3,.gal figure.w4,.gal figure.w6{grid-column:span 2}
  .gal .par,.gal figure.w6 .par,.gal figure.w4 .par{aspect-ratio:4/3}
  .row{grid-template-columns:1fr;gap:.6rem}
}
@media (max-width:1080px){
  .row{grid-template-columns:3rem minmax(0,12rem) minmax(0,1fr);gap:1.5rem}
}

/* An area with no photograph. Used where honest imagery does not exist yet —
   a false illustration is worse than none. Same rhythm as process.html. */
.area--nomedia .area__row{grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr)}
.area--nomedia .area__kicker{font-weight:500;color:var(--carbon);max-width:30ch}

/* A credential row sitting under a section head needs air, or it reads as
   though the rule is a border on the band. */
.shead + .creds,.sect__in + .creds{margin-top:clamp(1.75rem,3vw,2.75rem)}