/* ==========================================================================
   Terah Development LLC
   --------------------------------------------------------------------------
   Design decisions (stated on purpose, not defaulted):

   DIRECTION  Stark and technical. The reference is a recorded plat sheet and a
              civil construction plan set - the documents this business actually
              produces. Not a SaaS landing page.

   COLOR      Sampled from the trade. Ink is asphalt black. The surface neutral
              is concrete grey (cool, green-leaning) rather than a warm cream.
              The single accent is survey-stake orange, the colour of flagging
              tape and stake paint on a Florida job site. Water/stormwater
              elements use plan-sheet blue because that is the convention on a
              real drawing, not because it is a brand colour.

   TYPE       Archivo for display - squared, industrial grotesque, the register
              of signage and title blocks.
              Public Sans for body - it is the US federal government's text face
              (USWDS). Entitlement work lives inside government documents, so
              the body copy is set in the type those documents use.
              IBM Plex Mono for labels, numbers, bearings and tabular data - the
              register of a plan sheet annotation.

   RADIUS     0-2px. Plan sheets have square corners.
   MOTION     Effectively none. One drawn underline on links, focus states, and
              a single scroll-linked rule on the process diagram. Reduced-motion
              honoured.
   ========================================================================== */

/* --------------------------------------------------------------- 1. reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
/* Without this, an intrinsic height="" attribute wins over CSS aspect-ratio
   and the image renders at its raw pixel height. */
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
:target { scroll-margin-top: 6rem; }

/* -------------------------------------------------------------- 2. tokens */

:root {
  /* ink */
  --ink:        #16181a;
  --ink-2:      #3c4247;
  --ink-3:      #6a7176;
  --ink-4:      #8d9399;

  /* surfaces */
  --paper:      #ffffff;
  --concrete:   #eceeea;   /* cool green-grey. deliberately not a warm cream */
  --concrete-2: #e2e5e0;
  --asphalt:    #16181a;
  --asphalt-2:  #21252a;

  /* rules */
  --rule:       #ccd1cb;
  --rule-2:     #dfe3dd;
  --rule-dark:  #33383d;

  /* accent */
  --stake:      #d94f1e;   /* survey stake orange */
  --stake-2:    #b23c12;
  --stake-tint: #fbe9e2;

  /* plan-sheet conventions */
  --water:      #2e6b8a;
  --wetland:    #4b7d55;

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing scale - one scale, used consistently */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1320px;
}

/* ---------------------------------------------------------- 3. base type */

body {
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.4rem); font-weight: 800; letter-spacing: -0.042em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.14; }
h4 { font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.015em; }

p { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--stake); }

/* the mono label - used everywhere a plan sheet would annotate something */
.lbl {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.lbl--stake { color: var(--stake); }
.lbl--paper { color: #9aa1a8; }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ 4. layout */

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--tight { max-width: 980px; }
.wrap--text  { max-width: 720px; }

.sec { padding-block: clamp(3.5rem, 7vw, 7rem); }
.sec--tall { padding-block: clamp(4.5rem, 9vw, 9rem); }
.sec--concrete { background: var(--concrete); }
.sec--dark { background: var(--asphalt); color: #b9bfc4; }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.sec--dark a { color: #fff; text-decoration-color: #4c5359; }
.sec--dark strong { color: #fff; }

.rule-top { border-top: 1px solid var(--rule); }

/* section header: mono index + rule + heading, left aligned. Repeated so the
   page reads as a numbered document rather than a stack of centred bands. */
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head__idx {
  display: flex; align-items: baseline; gap: var(--s4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s3); margin-bottom: var(--s5);
}
.sec--dark .sec-head__idx { border-color: var(--rule-dark); }
.sec-head__idx span:last-child { margin-left: auto; text-align: right; }
.sec-head h2 { max-width: 20ch; }
.sec-head p { max-width: 58ch; margin-top: var(--s4); font-size: 1.0625rem; }

/* ------------------------------------------------------------ 5. buttons */

.btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 0.8125rem 1.375rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background 120ms linear, border-color 120ms linear, color 120ms linear;
}
.btn:hover { background: var(--stake); border-color: var(--stake); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--stake { background: var(--stake); border-color: var(--stake); }
.btn--stake:hover { background: var(--stake-2); border-color: var(--stake-2); }
.btn--onDark { background: #fff; border-color: #fff; color: var(--ink); }
.btn--onDark:hover { background: var(--stake); border-color: var(--stake); color: #fff; }
.btn--onDarkGhost { background: transparent; border-color: #4c5359; color: #fff; }
.btn--onDarkGhost:hover { background: transparent; border-color: #fff; color: #fff; }
.btn .arw { transition: transform 140ms cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw { transform: translateX(3px); }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* text link with a drawn underline - the one piece of motion on the site */
.tlink {
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 3px;
  transition: border-color 140ms linear;
}
.tlink:hover { border-color: var(--stake); color: var(--stake); }
.sec--dark .tlink { color: #fff; border-color: #4c5359; }
.sec--dark .tlink:hover { color: var(--stake); border-color: var(--stake); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--stake); outline-offset: 3px; border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4);
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* ------------------------------------------------------------- 6. header */

.utility {
  background: var(--asphalt); color: #9aa1a8;
  border-bottom: 1px solid var(--rule-dark);
}
.utility__in {
  max-width: var(--maxw); margin-inline: auto; padding: 0.5rem var(--gut);
  display: flex; align-items: center; gap: var(--s5);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap; min-width: 0;
}
.utility a { color: #d3d8dc; text-decoration: none; }
.utility a:hover { color: var(--stake); }
.utility__sep { margin-left: auto; }
/* The utility bar carries four items at full width and sheds them as space
   runs out. Phone survives to the narrowest screen; it is the one a landowner
   standing on a parcel actually taps. */
.utility__hide, .utility__email { display: none; }
@media (min-width: 560px)  { .utility__email { display: inline; } }
@media (min-width: 1000px) { .utility__hide { display: inline; } }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: var(--s6); min-height: 74px;
}

.mark { display: flex; align-items: center; gap: 0.6875rem; text-decoration: none; }
.mark svg { flex: none; }
.mark__txt { display: grid; gap: 1px; }
.mark__name {
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: 0.02em; color: var(--ink); line-height: 1; text-transform: uppercase;
}
.mark__sub {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.24em;
  color: var(--ink-3); text-transform: uppercase; line-height: 1;
}

.nav { margin-left: auto; display: none; align-items: center; gap: var(--s6); }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav a {
  font-family: var(--display); font-size: 0.875rem; font-weight: 500;
  letter-spacing: -0.005em; color: var(--ink-2); text-decoration: none;
  padding-block: 0.375rem; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--ink); border-color: var(--stake); }
.nav .btn { margin-left: var(--s2); }

.burger {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.5rem 0.75rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger__ic { display: grid; gap: 3px; }
.burger__ic i { display: block; width: 15px; height: 1.5px; background: var(--ink); }

.mnav { display: none; border-bottom: 1px solid var(--rule); background: var(--paper); }
.mnav[data-open="true"] { display: block; }
@media (min-width: 1000px) { .mnav { display: none !important; } }
.mnav ul { list-style: none; padding: var(--s4) var(--gut) var(--s5); margin: 0; }
.mnav li + li { border-top: 1px solid var(--rule-2); }
.mnav a {
  display: block; padding: 0.875rem 0; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1.125rem; color: var(--ink);
}
.mnav a[aria-current="page"] { color: var(--stake); }

/* --------------------------------------------------------------- 7. hero */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(3rem,5vw,5rem); }
}
.hero__eyebrow { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.hero__eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.hero h1 { margin-bottom: var(--s5); }
.hero__lede { max-width: 46ch; margin-bottom: var(--s6); }
.hero__figure { position: relative; }
.hero__figure figcaption {
  margin-top: var(--s3); display: flex; gap: var(--s4);
  border-top: 1px solid var(--rule); padding-top: var(--s3);
}
.hero__figure figcaption span:last-child { margin-left: auto; text-align: right; }

/* the plan drawing */
.plan {
  width: 100%; height: auto; background: var(--paper);
  border: 1px solid var(--ink);
}
.plan .p-parcel  { fill: none; stroke: var(--ink); stroke-width: 2; }
.plan .p-lot     { fill: #fff; stroke: var(--ink-3); stroke-width: 0.9; }
.plan .p-lot-alt { fill: var(--stake-tint); stroke: var(--stake); stroke-width: 0.9; }
.plan .p-row     { fill: var(--concrete-2); stroke: var(--ink-3); stroke-width: 0.9; }
.plan .p-cl      { fill: none; stroke: var(--stake); stroke-width: 1; stroke-dasharray: 14 4 3 4; }
.plan .p-water   { fill: #e4eef4; stroke: var(--water); stroke-width: 1.2; }
.plan .p-wet     { fill: none; stroke: var(--wetland); stroke-width: 1.2; stroke-dasharray: 7 3; }
.plan .p-buf     { fill: none; stroke: var(--wetland); stroke-width: 0.8; stroke-dasharray: 2 3; }
.plan .p-contour { fill: none; stroke: var(--ink-4); stroke-width: 0.6; opacity: .5; }
.plan .p-tick    { stroke: var(--ink); stroke-width: 1; }
.plan text { font-family: var(--mono); fill: var(--ink-3); }
.plan .t-lot  { font-size: 9px; fill: var(--ink-3); }
.plan .t-note { font-size: 9.5px; letter-spacing: .08em; }
.plan .t-bear { font-size: 8px; letter-spacing: .02em; }
.plan .t-big  { font-size: 11px; letter-spacing: .14em; fill: var(--ink); font-weight: 500; }
.plan .t-water { fill: var(--water); }
.plan .t-wet   { fill: var(--wetland); }
.plan .t-stake { fill: var(--stake); }

/* ------------------------------------------------------ 8. title block */
/* mimics the title block strip on a construction drawing */

.titleblock {
  border-block: 1px solid var(--ink);
  background: var(--paper);
}
.titleblock__grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1fr;
}
.titleblock__cell {
  padding: var(--s4) var(--gut);
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.titleblock__cell:first-child { border-top: 0; }

/* 2-up, then the full 4-up title block strip */
@media (min-width: 560px) {
  .titleblock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock__cell { padding-inline: var(--s5); border-left: 1px solid var(--rule); }
  .titleblock__cell:nth-child(-n+2) { border-top: 0; }
  .titleblock__cell:nth-child(2n+1) { border-left: 0; padding-left: var(--gut); }
  .titleblock__cell:nth-child(2n)   { padding-right: var(--gut); }
}
@media (min-width: 780px) {
  .titleblock__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .titleblock__cell { border-top: 0; border-left: 1px solid var(--rule); padding-inline: var(--s5); }
  .titleblock__cell:nth-child(2n+1) { border-left: 1px solid var(--rule); padding-left: var(--s5); }
  .titleblock__cell:nth-child(2n)   { padding-right: var(--s5); }
  .titleblock__cell:first-child { border-left: 0; padding-left: var(--gut); }
  .titleblock__cell:last-child  { padding-right: var(--gut); }
}
.titleblock dt { margin-bottom: 0.375rem; }
.titleblock dd {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); line-height: 1.35; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.titleblock dd a { text-decoration: none; }
.titleblock dd a:hover { color: var(--stake); }

/* ------------------------------------------------------------ 9. figures */
/* real regional numbers, cited. never company performance claims. */

.figures { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figure {
  padding: var(--s6) var(--s5) var(--s5);
  border-top: 2px solid var(--ink);
  display: flex; flex-direction: column;
}
@media (min-width: 720px) {
  .figure + .figure { border-left: 1px solid var(--rule); }
  .figure { padding-left: var(--s5); }
  .figure:first-child { padding-left: 0; }
}
@media (max-width: 719px) { .figure + .figure { border-top: 1px solid var(--rule); } }
.figure__n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4rem);
  letter-spacing: -0.05em; color: var(--ink); line-height: 0.92;
  display: block; margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
}
.figure__n em { font-style: normal; color: var(--stake); }
.figure p { font-size: 0.9375rem; color: var(--ink-2); max-width: 34ch; }
.figure cite {
  display: block; margin-top: auto; padding-top: var(--s4); font-style: normal;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.figure cite a { color: inherit; text-decoration-color: var(--rule); }
.figure cite a:hover { color: var(--stake); }

/* ------------------------------------------------------------- 10. prose */

.prose-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .prose-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.prose p + p { margin-top: var(--s4); }
.prose p { max-width: 62ch; }
.prose h3 { margin-top: var(--s6); margin-bottom: var(--s3); }
.prose--lg p { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); }

.aside {
  border-top: 2px solid var(--ink);
  padding-top: var(--s4);
  align-self: start;
}
.aside dl { margin: 0; }
.aside div { padding-block: var(--s3); border-bottom: 1px solid var(--rule-2); display: grid; gap: 2px; }
.aside dd { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.aside dd strong { font-weight: 600; }

/* --------------------------------------------------- 11. scope of work */
/* numbered rows, not a three-card grid */

.scope { border-top: 1px solid var(--rule); }
.scope__row {
  display: grid; gap: var(--s3) var(--s5);
  grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .scope__row {
    grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr) 12rem;
    align-items: start; gap: var(--s6);
  }
}
.scope__n { font-family: var(--mono); font-size: 0.8125rem; color: var(--stake); padding-top: 0.3rem; letter-spacing: .06em; }
.scope__row h3 { letter-spacing: -0.025em; }
.scope__row p { font-size: 0.9688rem; }
.scope__tags { display: grid; gap: 0.375rem; align-content: start; }
.scope__tags span {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--ink-3); padding-left: 0.875rem; position: relative; line-height: 1.5;
}
.scope__tags span::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; background: var(--stake);
}

/* ---------------------------------------------------------- 12. process */

.process { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 860px) { .process { grid-template-columns: repeat(5, 1fr); } }
.step { padding: var(--s5) var(--s5) var(--s6) 0; border-top: 1px solid var(--rule-dark); position: relative;
        display: flex; flex-direction: column; }
@media (min-width: 860px) { .step { padding-right: var(--s5); } .step:last-child { padding-right: 0; } }
@media (max-width: 859px) { .step { padding-right: 0; } }
.step::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 2.5rem;
  background: var(--stake);
}
.step__n { font-family: var(--mono); font-size: 0.75rem; color: var(--stake); letter-spacing: .1em; display: block; margin-bottom: var(--s4); padding-top: var(--s2); }
.step h3 { font-size: 1.25rem; margin-bottom: var(--s3); }
.step p { font-size: 0.9063rem; color: #a2a9af; }
.step__t {
  margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .06em; color: #7c848a; text-transform: uppercase;
}

/* ------------------------------------------------------------- 13. fork */
/* two panels of unequal width, deliberately not three equal cards */

.fork { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fork { grid-template-columns: 1.15fr 1fr; } }
.fork__panel { padding: clamp(2rem, 4vw, 3.25rem); display: flex; flex-direction: column; }
.fork__panel--a { background: var(--ink); color: #b0b7bd; }
.fork__panel--a h2, .fork__panel--a h3 { color: #fff; }
.fork__panel--b { background: var(--concrete); }
.fork__panel h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem); margin-block: var(--s5) var(--s4); max-width: 18ch; }
.fork__panel p { max-width: 46ch; }
.fork__panel p + p { margin-top: var(--s4); }
.fork__panel .btnrow, .fork__panel .tlink { margin-top: auto; padding-top: var(--s6); }

/* -------------------------------------------------------- 14. area table */

.areas { width: 100%; border-collapse: collapse; text-align: left; }
.areas caption { text-align: left; padding-bottom: var(--s4); color: var(--ink-3); font-size: 0.9375rem; }
.areas th, .areas td { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.areas thead th {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--ink); padding-bottom: var(--s3);
}
.areas tbody th {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  color: var(--ink); letter-spacing: -0.02em; white-space: nowrap;
}
.areas td { font-size: 0.9375rem; color: var(--ink-2); }
.areas .areas__places { font-size: 0.875rem; color: var(--ink-3); }
.areas .areas__auth { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); letter-spacing: .01em; }
.tablescroll { overflow-x: auto; }
@media (max-width: 720px) { .areas { min-width: 640px; } }

/* --------------------------------------------------------- 15. projects */

.notice {
  border: 1px solid var(--ink); border-left: 4px solid var(--stake);
  padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper);
}
.notice h3 { margin-bottom: var(--s4); }
.notice p { max-width: 60ch; }
.notice p + p { margin-top: var(--s4); }

.tmpl {
  border: 1px dashed var(--rule); background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.tmpl__hd { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.tmpl__hd span:last-child { margin-left: auto; }
.tmpl dl { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-bottom: var(--s5); }
@media (min-width: 700px) { .tmpl dl { grid-template-columns: repeat(4, 1fr); } }
.tmpl dd { margin: 0; font-family: var(--display); font-weight: 600; color: var(--ink-4); font-size: 0.9375rem; }
.tmpl__blk + .tmpl__blk { margin-top: var(--s4); }
.tmpl__blk p { color: var(--ink-4); font-size: 0.9375rem; max-width: 62ch; }
.grid-2 { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

/* --------------------------------------------------------------- 16. faq */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding-block: var(--s5);
  display: flex; gap: var(--s5); align-items: baseline;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400;
  color: var(--stake); font-size: 1.25rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--stake); }
.faq__a { padding: 0 0 var(--s5) calc(var(--s5) + 2.25rem); }
.faq__a p { max-width: 66ch; font-size: 0.9688rem; }
.faq__a p + p { margin-top: var(--s3); }
.faq__i { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-4); width: 2.25rem; flex: none; }

/* -------------------------------------------------------------- 17. form */

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); } }

.nap { font-style: normal; }
.nap__row { padding-block: var(--s4); border-bottom: 1px solid var(--rule); display: grid; gap: 3px; }
.nap__row:first-child { border-top: 2px solid var(--ink); }
.nap__v { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); letter-spacing: -0.015em; overflow-wrap: break-word; }
.nap__v a { text-decoration: none; }
.nap__v a:hover { color: var(--stake); }

.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: 0.375rem; }
.field > label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.field .req { color: var(--stake); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 0.875rem;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
  font-family: var(--body); font-size: 1rem; color: var(--ink);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-4); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 8rem; }
.field__hint { font-size: 0.8125rem; color: var(--ink-3); }
.field__err { font-size: 0.8125rem; color: var(--stake-2); font-weight: 600; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--stake-2); background: #fff8f5; }
.field[data-invalid="true"] .field__err { display: block; }
.form__row { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-top: var(--s2); }
.form__note { font-size: 0.8125rem; color: var(--ink-3); max-width: 40ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__ok {
  border: 1px solid var(--ink); border-left: 4px solid var(--stake);
  padding: var(--s5); background: var(--paper);
}
.form__ok h3 { margin-bottom: var(--s3); }
.form__ok p { max-width: 52ch; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- 18. CTA */

.cta { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: var(--s8); } }
.cta h2 { max-width: 16ch; }
.cta p { max-width: 44ch; margin-top: var(--s4); }

/* ------------------------------------------------------------ 19. footer */

.foot { background: var(--asphalt); color: #8d9399; padding-block: var(--s8) var(--s5); }
.foot__top { display: grid; gap: var(--s6); grid-template-columns: 1fr; padding-bottom: var(--s7); border-bottom: 1px solid var(--rule-dark); }
@media (min-width: 820px) { .foot__top { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: var(--s7); } }
.foot__tag { max-width: 34ch; margin-top: var(--s4); font-size: 0.9375rem; }
.foot h4 { color: #fff; margin-bottom: var(--s4); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.foot a { color: #b9bfc4; text-decoration: none; font-size: 0.9375rem; }
.foot a:hover { color: var(--stake); }
.foot address { font-style: normal; font-size: 0.9375rem; line-height: 1.7; overflow-wrap: break-word; }
.foot__bot {
  padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6a7176;
}
.foot__bot p:last-child { margin-left: auto; }
.foot__legal { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 0.8125rem; color: #6a7176; max-width: 68ch; margin-top: var(--s4); line-height: 1.6; }
.mark--foot .mark__name { color: #fff; }
.mark--foot .mark__sub { color: #7c848a; }

/* --------------------------------------------------------- 20. page head */

.pagehead { border-bottom: 1px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); }
.pagehead__crumb { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.pagehead h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); max-width: 16ch; }
.pagehead .lede { max-width: 54ch; margin-top: var(--s5); }

/* ------------------------------------------------------- 21. detail svg */

.detail { width: 100%; height: auto; border: 1px solid var(--ink); background: var(--paper); }
.detail text { font-family: var(--mono); fill: var(--ink-3); }
.detail .d-t { font-size: 9px; letter-spacing: .06em; }
.detail .d-tb { font-size: 10.5px; letter-spacing: .14em; fill: var(--ink); font-weight: 500; }
.detail .d-dim { stroke: var(--stake); stroke-width: 0.9; }
.detail .d-line { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.detail .d-hair { stroke: var(--ink-3); stroke-width: 0.7; fill: none; }

.figcap {
  margin-top: var(--s3); border-top: 1px solid var(--rule); padding-top: var(--s3);
  display: flex; gap: var(--s4);
}
.figcap span:last-child { margin-left: auto; text-align: right; }

/* -------------------------------------------------------- 22. utilities */

.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }
.mb5 { margin-bottom: var(--s5); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .utility, .masthead, .mnav, .btnrow, .foot__bot { display: none; }
  body { color: #000; }
  .sec--dark { background: #fff; color: #000; }
}

/* ------------------------------------------------- 23. differentiators */
/* two columns of unequal reading length, top-ruled. Deliberately not a
   three-up icon-card grid. */

.why { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 880px) { .why { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); } }
.why__item { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); position: relative; }
.why__item:first-child { border-top: 2px solid var(--ink); }
@media (min-width: 880px) { .why__item:nth-child(2) { border-top: 2px solid var(--ink); } }
.why__n {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--stake); display: block; margin-bottom: var(--s4);
}
.why__item h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); margin-bottom: var(--s3); max-width: 22ch; }
.why__item p { font-size: 0.9688rem; max-width: 52ch; }

/* ----------------------------------------------------- 24. parcel cards */
/* Photograph over a spec table. The spec table is the point: this audience
   buys on parcel ID, zoning and utilities, not on a pretty aerial. */

.parcels { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .parcels { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

.parcel {
  border: 1px solid var(--ink); background: var(--paper);
  display: flex; flex-direction: column; min-width: 0;
}
.parcel__fig { margin: 0; border-bottom: 1px solid var(--ink); }
.parcel__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--concrete); }
.parcel__fig figcaption {
  padding: var(--s2) var(--s4); border-top: 1px solid var(--rule-2);
  display: flex; gap: var(--s4); background: var(--concrete);
}
.parcel__fig figcaption span:last-child { margin-left: auto; text-align: right; }

.parcel__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.parcel__hd { border-bottom: 1px solid var(--rule); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.parcel__hd h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); margin-bottom: 0.375rem; }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--stake);
  border: 1px solid var(--stake); padding: 0.25rem 0.5rem; margin-bottom: var(--s4);
}
.tag--held { color: var(--ink); border-color: var(--rule); }

.parcel__spec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 0 0 var(--s5); }
.parcel__spec > div { display: grid; gap: 3px; border-top: 1px solid var(--rule-2); padding-top: var(--s2); min-width: 0; }
.parcel__spec dd {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; line-height: 1.35;
}
.parcel__spec .wide { grid-column: 1 / -1; }
.parcel__spec .apn dd { font-family: var(--mono); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; }

.parcel__note { font-size: 0.9063rem; color: var(--ink-2); margin-top: auto; }
.parcel__foot {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: baseline;
}
.parcel__price { font-family: var(--display); font-weight: 700; font-size: 1.375rem; color: var(--ink); letter-spacing: -0.03em; }
.parcel__foot .tlink { margin-left: auto; }

/* --------------------------------------------------------- 25. gallery */
/* Main frame plus a thumbnail rail. No lightbox, no library: on a parcel
   page the photographs are the content, so they get the space directly
   rather than hiding behind a click. */

/* min-width:0 everywhere a grid item could be pushed wide by its contents.
   Without it the thumbnail rail sets the floor and the column overflows. */
/* An explicit minmax(0, 1fr) column. An auto column would size to the widest
   item's min-content - the nowrap caption in the bar - and overflow the
   container on narrow screens while .gal's own box stayed put. */
.gal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; }
.gal > * { min-width: 0; max-width: 100%; }
.gal__frame { position: relative; border: 1px solid var(--ink); background: var(--concrete); min-width: 0; }
.gal__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.gal__bar {
  display: flex; align-items: center; gap: var(--s4);
  border-top: 1px solid var(--ink); background: var(--paper);
  padding: var(--s2) var(--s3) var(--s2) var(--s4);
  min-width: 0;
}
.gal__cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal__count { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.gal__nav { display: flex; gap: 2px; flex: none; }
.gal__btn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 2px; cursor: pointer; font-family: var(--mono); font-size: 0.875rem; line-height: 1;
  transition: border-color 120ms linear, background 120ms linear, color 120ms linear;
}
.gal__btn:hover { border-color: var(--ink); }
.gal__btn:active { background: var(--ink); color: #fff; }

.gal__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--s2); overflow-x: auto; padding-bottom: 2px;
  min-width: 0; scrollbar-width: thin;
}
.gal__thumb {
  padding: 0; border: 1px solid var(--rule); background: var(--concrete);
  cursor: pointer; border-radius: 0; overflow: hidden; min-width: 46px;
  transition: border-color 120ms linear;
}
.gal__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal__thumb:hover { border-color: var(--ink-3); }
.gal__thumb[aria-current="true"] { border-color: var(--stake); border-width: 2px; }

/* ------------------------------------------------- 26. parcel detail */

.pd { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
.pd > * { min-width: 0; }
@media (min-width: 1000px) { .pd { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.pd__panel { border-top: 2px solid var(--ink); }
@media (min-width: 1000px) { .pd__panel { position: sticky; top: 96px; } }
.pd__row {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s4);
  padding-block: var(--s3); border-bottom: 1px solid var(--rule-2); align-items: baseline;
}
.pd__row dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.9375rem; color: var(--ink); overflow-wrap: anywhere; }
.pd__row.mono dd { font-family: var(--mono); font-weight: 400; font-size: 0.8125rem; }
.pd__price {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-block: var(--s5) var(--s4); border-bottom: 1px solid var(--rule);
}
.pd__price b { font-family: var(--display); font-weight: 800; font-size: 2.25rem; letter-spacing: -0.04em; color: var(--ink); }
.parcel__fig a { display: block; text-decoration: none; }
.parcel__fig a:focus-visible { outline-offset: -3px; }