:root{
  --bg:#e7e4dc;
  --surface:#f7f5f0;
  --ink:#1b2226;
  --ink-soft:#535c60;
  --line:#c7c1b2;
  --accent:#c6551e;
  --accent-ink:#f7f5f0;

  /* fixed "blueprint plate" tokens — intentionally constant across themes */
  --plate-bg:#132029;
  --plate-surface:#0f1a21;
  --plate-ink:#ece7db;
  --plate-ink-soft:#9fb0b8;
  --plate-line:#2f4753;
  --plate-accent:#e8763f;

  --font-display:"Big Shoulders", "Arial Narrow", sans-serif;
  --font-body:"IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15191b;
    --surface:#1b2225;
    --ink:#eae6db;
    --ink-soft:#a4adaf;
    --line:#333c3f;
    --accent:#e8793f;
    --accent-ink:#15191b;
  }
}
:root[data-theme="dark"]{
  --bg:#15191b;
  --surface:#1b2225;
  --ink:#eae6db;
  --ink-soft:#a4adaf;
  --line:#333c3f;
  --accent:#e8793f;
  --accent-ink:#15191b;
}

*{box-sizing:border-box;}
html{color-scheme:light dark;scroll-behavior:auto;}

/* ---------- scroll reveal (progressive enhancement: only hides content once JS + motion are both OK) ---------- */
.js-ready.motion-ok .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-ready.motion-ok .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.js-ready.motion-ok .schedule-row.reveal{transition-delay:calc(var(--i, 0) * 60ms);}
.js-ready.motion-ok .dev-card.reveal{transition-delay:calc(var(--i, 0) * 120ms);}
.js-ready.motion-ok .review-card.reveal{transition-delay:calc(var(--i, 0) * 120ms);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{text-wrap:balance;margin:0;}

.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,48px);}

/* ---------- reusable drafting bits ---------- */
.sheet-tag{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.sheet-tag::before{content:"";width:1.6em;height:1px;background:currentColor;}
.tick{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.55;}
.tick svg{width:100%;height:100%;}
.tick.tl{top:14px;left:14px;}
.tick.tr{top:14px;right:14px;transform:scaleX(-1);}
.tick.bl{bottom:14px;left:14px;transform:scaleY(-1);}
.tick.br{bottom:14px;right:14px;transform:scale(-1,-1);}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:border-color .3s ease, box-shadow .3s ease;
}
header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.35);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:.03em;
  text-decoration:none;
  display:flex;align-items:center;gap:.55em;
}
.wordmark img{height:38px;width:auto;display:block;}
.footer-grid .wordmark img{height:46px;}
.wordmark small{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.6rem;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);list-style:none;margin:0;padding:0;}
.nav-links a{
  font-size:.86rem;text-decoration:none;color:var(--ink-soft);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--ink);border-color:var(--accent);}
.nav-links a.active{color:var(--ink);border-color:var(--accent);}
.btn{
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.75em 1.2em;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent);
  transition:opacity .15s, transform .15s;
  cursor:pointer;
  font-size:.78rem;
}
.btn:hover, .btn:focus-visible{opacity:.85;}
.btn:active{transform:scale(.96);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--ink);opacity:1;}
.btn.on-plate{background:var(--plate-accent);color:var(--plate-bg);border-color:var(--plate-accent);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:.5em .7em;font-family:var(--font-mono);}

@media (max-width:820px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px clamp(20px,4vw,48px) 16px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding-block:10px;width:100%;}
  .menu-toggle{display:inline-block;}
  header .btn.ghost{display:none;}
}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;}
.hero-grid{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.35;
  position:absolute;inset:-40px 0 0 0;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
  will-change:transform;
}
.hero-inner{
  position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);
  align-items:center;
  padding-block:clamp(48px,8vw,88px);
}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;}}
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.5rem,6vw,4.4rem);
  line-height:.98;
  letter-spacing:.005em;
  margin-block:.5em .4em;
  text-transform:uppercase;
}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p.lede{
  max-width:52ch;
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--ink-soft);
}
.trustline{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--ink);
  margin-top:1.6em;
  padding-top:1em;
  border-top:1px solid var(--line);
  max-width:44ch;
}
.hero-ctas{display:flex;gap:14px;margin-top:1.8em;flex-wrap:wrap;}

.stamp{
  position:absolute;
  right:clamp(-10px,2vw,24px);
  bottom:clamp(-6px,3vw,18px);
  width:min(190px,32vw);
  border:2px solid var(--accent);
  border-radius:50%;
  aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;
  padding:14px;
  color:var(--accent);
  text-align:center;
  transform:rotate(-8deg) scale(1);
}
.stamp img{width:30%;min-width:34px;filter:grayscale(1) contrast(1.15);opacity:.9;}
.js-ready.motion-ok .stamp.stamp-in{
  opacity:0;
  transform:rotate(-22deg) scale(1.4);
  transition:opacity .5s ease .5s, transform .5s cubic-bezier(.34,1.56,.64,1) .5s;
}
.js-ready.motion-ok .stamp.stamp-in.is-visible{
  opacity:1;
  transform:rotate(-8deg) scale(1);
}
.stamp::before{
  content:"";position:absolute;inset:8px;border:1px solid var(--accent);border-radius:50%;
}
.stamp span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.72rem;
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.elevation{position:relative;aspect-ratio:420/340;}
.elevation svg{width:100%;height:auto;color:var(--ink-soft);}
.elevation .accent-part{color:var(--accent);}
.compass{position:absolute;top:6px;right:6px;width:46px;height:46px;color:var(--ink-soft);}

.house3d{
  display:none;
  position:absolute;inset:0;
  width:100%;height:100%;
  cursor:grab;
  touch-action:none;
}
.house3d.active{display:block;}
.elevation.has-3d svg.draw-in{display:none;}
.house3d:active{cursor:grabbing;}
.drag-hint{
  display:none;
  position:absolute;bottom:8px;left:8px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  padding:.3em .6em;
  pointer-events:none;
}
.house3d.active ~ .drag-hint{display:block;}

/* ---------- blueprint draw-in (JS sets stroke-dasharray/offset inline; this just animates it) ---------- */
.js-ready.motion-ok .draw-in rect,
.js-ready.motion-ok .draw-in line,
.js-ready.motion-ok .draw-in polygon,
.js-ready.motion-ok .draw-in circle{
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}

/* ---------- section shell ---------- */
section{position:relative;padding-block:clamp(52px,8vw,96px);border-bottom:1px solid var(--line);scroll-margin-top:76px;}
.section-head{max-width:62ch;margin-bottom:clamp(28px,4vw,48px);}
.section-head h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  text-transform:uppercase;
  margin-top:.3em;
}
.section-head p{color:var(--ink-soft);margin-top:.7em;max-width:58ch;}

/* ---------- who we are ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;}}
.about-grid p{color:var(--ink-soft);margin:0 0 1em;}
.about-grid p:last-child{margin-bottom:0;}
.about-grid .callout{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.15rem;color:var(--ink);
  border-left:3px solid var(--accent);padding-left:.7em;margin:1.4em 0;
}
.provide-card{background:var(--surface);border:1px solid var(--line);padding:clamp(24px,3vw,36px);}
.provide-card h3{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:1em;
}

/* ---------- scope of work schedule ---------- */
.schedule{border-top:1px solid var(--line);}
.schedule-row{border-bottom:1px solid var(--line);}
.schedule-toggle{
  display:grid;
  grid-template-columns:64px 1fr 24px;
  gap:24px;
  width:100%;
  padding-block:20px;
  padding-inline:12px;
  margin-inline:-12px;
  align-items:baseline;
  background:none;border:none;
  font:inherit;text-align:left;cursor:pointer;
  color:var(--ink);
  transition:background .2s ease;
}
.schedule-toggle:hover{background:color-mix(in srgb, var(--surface) 60%, var(--accent) 6%);}
.schedule-toggle:hover .mark{color:var(--ink);}
.schedule-toggle .chev{
  font-family:var(--font-mono);color:var(--accent);
  transition:transform .25s ease;
  justify-self:end;
}
.schedule-row.open .chev{transform:rotate(45deg);}
.schedule-desc{
  padding:0 12px 0 calc(64px + 24px + 12px);
  max-height:400px;
  opacity:1;
}
.js-ready .schedule-desc{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s ease, opacity .25s ease;
}
.js-ready .schedule-row.open .schedule-desc{max-height:200px;opacity:1;padding-bottom:18px;}
.schedule-desc p{margin:0;color:var(--ink-soft);font-size:.94rem;}
.schedule-desc .learn-more{
  display:inline-block;margin-top:.7em;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;
  color:var(--accent);text-decoration:none;
}
.schedule-desc .learn-more:hover{text-decoration:underline;}
@media (max-width:720px){
  .schedule-toggle{grid-template-columns:40px 1fr 20px;}
  .schedule-desc{padding-left:40px;}
}
.schedule-row .mark{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:.9rem;
  transition:color .2s ease;
}
.schedule-row .service{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* ---------- ownership / pricing ---------- */
.ownership-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);
}
@media (max-width:860px){.ownership-grid{grid-template-columns:1fr;}}
.ownership-grid h2{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem,3.2vw,2.2rem);margin-bottom:.6em;
}
.ownership-grid p{color:var(--ink-soft);margin:0 0 1em;}
.ownership-grid p:last-child{margin-bottom:0;}
.philosophy-card{
  background:var(--surface);border:1px solid var(--line);
  padding:clamp(24px,3vw,36px);
}
.philosophy-card blockquote{
  margin:0 0 1.2em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  text-transform:uppercase;
  border-left:3px solid var(--accent);
  padding-left:.7em;
}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.6em;font-size:.92rem;}
.checklist li{display:flex;gap:.6em;align-items:flex-start;color:var(--ink-soft);}
.checklist li::before{content:"—";color:var(--accent);flex:none;}
.pricing-breakdown{
  margin-top:1.6em;padding-top:1.4em;border-top:1px solid var(--line);
}
.pricing-breakdown h4{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .9em;
}
.pricing-breakdown ol{
  list-style:none;margin:0;padding:0;
  display:flex;border:1px solid var(--line);
}
.pricing-breakdown li{
  flex:1;padding:.9em 1em;
  font-family:var(--font-mono);
}
.pricing-breakdown li + li{border-left:1px solid var(--line);}
.pricing-breakdown li span{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4em;}
.pricing-breakdown li strong{display:block;font-size:.92rem;font-weight:500;color:var(--ink);}
.pricing-breakdown li.margin{background:var(--accent);border-color:var(--accent);}
.pricing-breakdown li.margin span, .pricing-breakdown li.margin strong{color:var(--accent-ink);}
@media (max-width:480px){.pricing-breakdown ol{flex-direction:column;}
  .pricing-breakdown li + li{border-left:none;border-top:1px solid var(--line);}
  .pricing-breakdown li.margin{border-top-color:var(--accent);}
}

/* ---------- developments plate ---------- */
.plate{
  background:var(--plate-bg);
  color:var(--plate-ink);
  border-bottom:1px solid var(--plate-line);
}
.plate .sheet-tag{color:var(--plate-accent);}
.plate .section-head h2{color:var(--plate-ink);}
.plate .section-head p{color:var(--plate-ink-soft);}
.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--plate-line);border:1px solid var(--plate-line);}
@media (max-width:860px){.dev-grid{grid-template-columns:1fr;}}
.dev-card{background:var(--plate-surface);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px;transition:background .25s ease, transform .25s ease;}
.dev-card:hover{background:color-mix(in srgb, var(--plate-surface) 80%, var(--plate-accent) 8%);transform:translateY(-4px);}
.dev-card .num{font-family:var(--font-mono);color:var(--plate-accent);font-size:.78rem;letter-spacing:.1em;}
.dev-card h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.25rem;}
.dev-card .siteplan{width:100%;aspect-ratio:4/3;color:var(--plate-line);}
.dev-card .siteplan .hl{color:var(--plate-accent);}
.dev-card .meta{font-family:var(--font-mono);font-size:.76rem;color:var(--plate-ink-soft);display:grid;gap:.35em;}
.dev-card .meta span{color:var(--plate-ink);}
.dev-toggle{
  align-self:flex-start;
  background:none;border:1px solid var(--plate-line);
  color:var(--plate-accent);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.5em .9em;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.dev-toggle:hover{border-color:var(--plate-accent);background:color-mix(in srgb, var(--plate-surface) 70%, var(--plate-accent) 10%);}
.js-ready .dev-card .meta{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s ease, opacity .25s ease;
}
.js-ready .dev-card.open .meta{max-height:200px;opacity:1;margin-top:2px;}
.dev-foot{margin-top:clamp(28px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;}
.dev-foot p{color:var(--plate-ink-soft);font-size:.9rem;max-width:46ch;margin:0;}

/* ---------- reviews ---------- */
.review-note{font-size:.86rem;font-style:italic;color:var(--ink-soft);margin-top:-.6em;margin-bottom:1.8em;max-width:56ch;}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:860px){.review-grid{grid-template-columns:1fr;}}
.review-card{background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:14px;transition:transform .25s ease, box-shadow .25s ease;}
.review-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px -20px rgba(0,0,0,.4);}
.review-card .stars{color:var(--accent);letter-spacing:.15em;font-size:.85rem;}
.review-card p{margin:0;color:var(--ink-soft);font-size:.94rem;}
.review-card footer{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-soft);text-transform:uppercase;
  border-top:1px dashed var(--line);padding-top:10px;
}

/* ---------- start your project form ---------- */
.form-shell{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,64px);}
@media (max-width:900px){.form-shell{grid-template-columns:1fr;}}
.form-side h2{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.4rem);
}
.form-side p{color:var(--ink-soft);margin-top:.8em;max-width:40ch;}
.form-side .also{
  margin-top:2em;padding-top:1.4em;border-top:1px solid var(--line);
}
.form-side .also a{font-family:var(--font-mono);font-size:.82rem;color:var(--accent);text-decoration:none;}
.form-side .also a:hover{text-decoration:underline;}

form{display:grid;gap:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-family:var(--font-mono);letter-spacing:.03em;color:var(--ink-soft);}
input, select, textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  padding:.7em .8em;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
textarea{resize:vertical;min-height:90px;}
.file-field{
  border:1px dashed var(--line);padding:1.1em;font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.submit-row{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap;}
.submit-row .fine{font-size:.76rem;color:var(--ink-soft);font-family:var(--font-mono);}
#form-status{font-size:.86rem;font-family:var(--font-mono);min-height:1.2em;}
#form-status[data-state="ok"]{color:#3f7d4a;}
#form-status[data-state="error"]{color:var(--accent);}

/* ---------- footer ---------- */
footer.site{padding-block:40px;}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end;}
.footer-grid .wordmark{margin-bottom:.4em;}
.footer-grid p{color:var(--ink-soft);font-size:.88rem;margin:0;max-width:44ch;}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.84rem;}
.footer-nav a{text-decoration:none;color:var(--ink-soft);}
.footer-nav a:hover{color:var(--ink);}

/* ---------- service / service-area pages ---------- */
.breadcrumb{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;
  color:var(--ink-soft);margin-bottom:1.2em;
}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}
.service-hero{padding-block:clamp(40px,6vw,64px) clamp(24px,4vw,32px);border-bottom:1px solid var(--line);}
.service-hero h1{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;margin:.2em 0 .4em;
}
.service-hero .lede{max-width:62ch;color:var(--ink-soft);font-size:1.05rem;}
.service-body{padding-block:clamp(40px,6vw,64px);}
.service-body .wrap{max-width:800px;}
.service-body h2{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.4rem;margin:1.8em 0 .6em;
}
.service-body h2:first-of-type{margin-top:0;}
.service-body p{color:var(--ink-soft);font-size:.98rem;line-height:1.7;margin:0 0 1em;}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);align-items:start;}
@media (max-width:760px){.service-grid{grid-template-columns:1fr;}}
.service-cta{
  margin-top:2.4em;padding:clamp(24px,3vw,32px);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.service-cta p{margin:0;color:var(--ink);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;}
.related-services{border-top:1px solid var(--line);padding-block:clamp(32px,4vw,48px);}
.related-services h2{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1em;
}
.related-services ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.related-services a{
  display:inline-block;padding:.6em 1em;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:.88rem;
  transition:border-color .2s ease, color .2s ease;
}
.related-services a:hover{border-color:var(--accent);color:var(--accent);}
.related-services a.current{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--surface) 70%, var(--accent) 6%);}

.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:1.4em 0;}
@media (max-width:760px){.area-grid{grid-template-columns:1fr;}}
.area-card{background:var(--surface);padding:22px;}
.area-card h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.05rem;margin:0 0 .6em;color:var(--ink);
}
.area-card p{margin:0;font-size:.86rem;color:var(--ink-soft);line-height:1.6;}