:root{
  --slate-900:#141F2B;
  --slate-800:#1B2A3A;
  --slate-700:#213348;
  --slate-500:#5A7085;
  --slate-300:#9FADBB;
  --slate-200:#C8D0D8;
  --paper:#EDF0F2;
  --paper-warm:#E3E7EA;
  --copper:#A85B32;
  --copper-light:#C87446;
  --letterhead:#FDFDFD;

  --display:'Archivo',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;

  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--slate-900);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* anchor targets clear the sticky bar */
[id]{scroll-margin-top:5rem}

.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--slate-500);
  margin:0 0 1.25rem;
}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem)}
h3{font-size:1.0625rem;font-weight:600;letter-spacing:.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:660px}

/* ---------- letterhead masthead (static, not sticky) ---------- */
/* Stacked and centred by default; side-by-side from 820px up. */
.masthead{
  background:var(--letterhead);
  border-bottom:1px solid var(--slate-200);
  padding:clamp(1.75rem,4.5vw,2.75rem) 0;
  text-align:center;
}
.masthead__logo{
  display:block;
  width:min(100%,clamp(200px,50vw,260px));
  height:auto;
  margin-inline:auto;
}
.masthead__contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.85rem 1.5rem;
  margin-top:clamp(1.1rem,2.5vw,1.6rem);
}
@media (min-width:820px){
  .masthead{padding:2rem 0;text-align:left}
  .masthead .wrap{
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(2rem,5vw,4rem);
  }
  .masthead__logo{
    width:100%;max-width:260px;
    margin-inline:0;
    flex:0 1 260px;
  }
  .masthead__contact{
    margin-top:0;
    flex:0 0 auto;
    flex-direction:column;align-items:flex-end;justify-content:center;
    gap:1rem;
  }
}
/* Below ~420px the tel and CTA can no longer share a row; let them stack
   and give the band back some of the height the second row costs. */
@media (max-width:420px){
  .masthead{padding:1.25rem 0}
  .masthead__contact{margin-top:.9rem}
}
.masthead__tel{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2.15rem);
  letter-spacing:-.01em;line-height:1;
  color:var(--slate-900);text-decoration:none;
  border-bottom:3px solid var(--copper);
  padding-bottom:.15rem;
  transition:color .18s ease;
  white-space:nowrap;
}
.masthead__tel:hover,.masthead__tel:focus-visible{color:var(--copper)}

/* ---------- sticky bar (all widths, appears past the masthead) ---------- */
.stickybar{
  position:fixed;left:0;right:0;top:0;z-index:60;
  background:var(--slate-900);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:translateY(-100%);
  transition:transform .22s ease;
}
.stickybar.is-visible{transform:translateY(0)}
/* Off-screen at rest. The inert attribute (toggled in JS, and present in the
   markup so it holds before JS runs) keeps its links out of the tab order
   without relying on visibility, which does not inherit reliably here. */
.stickybar[inert]{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .stickybar{transition:none}
}
.stickybar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:56px;
}
.stickybar__tel{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,.92rem + .35vw,1.2rem);
  letter-spacing:.01em;
  color:var(--paper);text-decoration:none;
  white-space:nowrap;
}
.stickybar__tel:hover,.stickybar__tel:focus-visible{color:var(--copper-light)}
.stickybar__cta{
  font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.02em;
  text-decoration:none;color:#fff;background:var(--copper);
  padding:.55rem 1.05rem;border-radius:2px;
  transition:background .18s ease;
  white-space:nowrap;
}
.stickybar__cta:hover,.stickybar__cta:focus-visible{background:var(--copper-light)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--slate-800);
  color:var(--paper);
  overflow:hidden;
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(4.5rem,10vw,7.5rem);
}
.hero__slates{
  position:absolute;inset:0;
  color:var(--slate-500);
  opacity:.34;
  pointer-events:none;
}
.hero__slates svg{width:100%;height:100%}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,31,43,.25) 0%,rgba(20,31,43,.82) 78%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}
.hero__eyebrow{color:var(--slate-200);opacity:.85}
.hero h1{
  font-size:clamp(2.35rem,1.4rem + 4.4vw,4.35rem);
  max-width:16ch;
  margin-bottom:1.5rem;
}
.hero h1 em{font-style:normal;color:var(--copper-light)}
.hero__lede{
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  color:var(--slate-200);
  max-width:52ch;
  margin-bottom:2.25rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

.btn{
  display:inline-block;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.01em;
  text-decoration:none;
  padding:.9rem 1.6rem;border-radius:2px;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--primary{background:var(--copper);color:#fff}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--copper-light)}
.btn--ghost{border-color:rgba(255,255,255,.34);color:var(--paper)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:rgba(255,255,255,.1)}
.btn--dark{background:var(--slate-800);color:var(--paper)}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--slate-700)}

:focus-visible{outline:2px solid var(--copper-light);outline-offset:3px}

/* ---------- scalloped slate course divider ---------- */
.course{display:block;width:100%;height:26px}
.course--paper{color:var(--paper)}
.course--warm{color:var(--paper-warm)}
.course--slate{color:var(--slate-800)}

/* ---------- sections ---------- */
.band{padding:clamp(3.25rem,7vw,5.5rem) 0}
.band--warm{background:var(--paper-warm)}
.band--slate{background:var(--slate-800);color:var(--paper)}
.band--slate .eyebrow{color:var(--slate-300)}

.section-head{margin-bottom:2.75rem;max-width:34ch}

/* services */
.services{border-top:1px solid var(--slate-200)}
.service{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.4rem 2.5rem;
  padding:2rem 0;
  border-bottom:1px solid var(--slate-200);
}
.service h3{color:var(--slate-700)}
.service__body{max-width:62ch}
.service__body p{color:var(--slate-500);font-size:.98rem}
@media (max-width:680px){
  .service{grid-template-columns:1fr;gap:.6rem;padding:1.6rem 0}
}

/* gallery */
.gallery__head{margin-bottom:1.25rem;max-width:34ch}
.gallery__note{
  color:var(--slate-500);
  font-size:.98rem;
  max-width:62ch;
  margin:0 0 2.25rem;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.7rem,1.8vw,1.15rem);
  margin:0;
}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
.gallery__item{margin:0;min-width:0}
.gallery__item--wide{grid-column:1/-1}
.gallery__item img{
  display:block;
  width:100%;height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--paper);
  border:1px solid var(--slate-200);
  border-radius:2px;
}
.gallery__item--wide img{aspect-ratio:2/1}
.gallery__cap{
  margin:.6rem 0 0;
  font-size:.86rem;line-height:1.45;
  color:var(--slate-500);
}

/* diligentia panel */
.origin{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:820px){.origin{grid-template-columns:1fr}}
.origin__word{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,1.3rem + 5vw,4.75rem);
  letter-spacing:-.03em;line-height:.95;
  color:var(--copper-light);
  margin:0 0 .5rem;
}
.origin__gloss{
  font-family:var(--display);font-weight:500;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate-300);
}
.origin__body{color:var(--slate-200)}
.origin__body strong{color:var(--paper);font-weight:600}

/* promises */
.promises{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:0}
.promises li{
  padding:1rem 0 1rem 1.85rem;
  border-top:1px solid rgba(255,255,255,.14);
  position:relative;
  color:var(--slate-200);
  font-size:1rem;
}
.promises li::before{
  content:"";position:absolute;left:0;top:1.55rem;
  width:9px;height:9px;background:var(--copper);
}

/* areas */
.areas{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0;padding:0;list-style:none;
}
.areas li{
  font-family:var(--display);font-weight:500;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--slate-200);
  color:var(--slate-700);
  padding:.5rem .85rem;border-radius:2px;
  background:rgba(255,255,255,.5);
}

/* contact */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{
  padding:1.15rem 0;
  border-bottom:1px solid var(--slate-200);
}
.contact-list li:first-child{border-top:1px solid var(--slate-200)}
.contact-list dt{
  font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate-500);
  margin-bottom:.3rem;
}
.contact-list dd{margin:0}
.contact-list a{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);
  letter-spacing:-.01em;
  color:var(--slate-900);text-decoration:none;
  border-bottom:2px solid var(--copper);
  transition:color .18s ease;
}
.contact-list a:hover,.contact-list a:focus-visible{color:var(--copper)}
.contact-note{color:var(--slate-500);font-size:.98rem}

/* quote form */
.quote__head{margin-bottom:2.25rem;max-width:46ch}
.quote__callout{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  color:var(--slate-500);margin:0 0 2rem;
}
.quote__callout a{
  font-weight:800;font-size:1.15rem;color:var(--slate-900);
  text-decoration:none;border-bottom:2px solid var(--copper);white-space:nowrap;
}
.quote__callout a:hover,.quote__callout a:focus-visible{color:var(--copper)}
.quote-form{max-width:760px}
.form-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.15rem 1.5rem;
}
@media (max-width:680px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;min-width:0}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate-500);
  margin-bottom:.4rem;
}
.field input,.field select,.field textarea{
  font-family:var(--body);
  font-size:1rem;
  line-height:1.5;
  color:var(--slate-900);
  background:#fff;
  border:1px solid var(--slate-200);
  border-radius:2px;
  padding:.7rem .8rem;
  width:100%;
  transition:border-color .18s ease;
}
.field textarea{resize:vertical;min-height:8rem}
.field select{
  appearance:none;
  padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A7085' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:12px 8px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper)}
.field__hint{
  font-size:.82rem;color:var(--slate-500);margin:.4rem 0 0;
}
.form-actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.form-actions button{cursor:pointer;font-family:var(--display)}
.form-note{font-size:.85rem;color:var(--slate-500);margin:0}
/* Formspree honeypot — off-screen but not display:none, so bots still fill it */
.hp{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* footer */
.foot{background:var(--slate-900);color:var(--slate-300);padding:3rem 0 3.25rem;font-size:.9rem}
.foot__grid{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.foot strong{color:var(--paper);font-family:var(--display);font-weight:800;letter-spacing:.05em;font-size:1rem}
.foot a{color:var(--slate-200)}
.foot__legal{font-size:.8rem;color:var(--slate-500);margin-top:2.5rem;max-width:60ch}

/* ---------- "read more" link on the home page service summaries ---------- */
.service__more{margin:.9rem 0 0}
.service__more a{
  font-family:var(--display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--copper);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:.12em;
}
.service__more a:hover,.service__more a:focus-visible{color:var(--copper-light)}

/* ---------- service page hero ---------- */
.pagehead{padding:clamp(2.5rem,6vw,4rem) 0 0}
.pagehead__crumb{
  font-family:var(--display);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-500);
  margin:0 0 1.1rem;
}
.pagehead__crumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--slate-300)}
.pagehead__crumb a:hover,.pagehead__crumb a:focus-visible{color:var(--copper)}
.pagehead h1{font-size:clamp(1.9rem,1.2rem + 2.8vw,3rem)}
.pagehead__lede{
  max-width:62ch;
  margin:1.1rem 0 0;
  font-size:1.05rem;
  color:var(--slate-500);
}
.hero-shot{margin:clamp(1.75rem,4vw,2.5rem) 0 0}
.hero-shot img{
  display:block;
  width:100%;height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--paper-warm);
  border:1px solid var(--slate-200);
  border-radius:2px;
}
@media (max-width:560px){.hero-shot img{aspect-ratio:4/3}}

/* ---------- service page prose ---------- */
.prose{max-width:66ch}
.prose p{margin-bottom:1.15em}

/* ---------- other services row ---------- */
.alsolinks{
  border-top:1px solid var(--slate-200);
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;
}
.alsolinks strong{
  font-family:var(--display);font-weight:600;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-500);
}
.alsolinks a{color:var(--copper);text-decoration:none;border-bottom:1px solid currentColor}
.alsolinks a:hover,.alsolinks a:focus-visible{color:var(--copper-light)}