/* ============================================================
   HOPEWELL — Design tokens
   Colors extracted directly from the approved brand identity
   deck (Hopewell_LandServices_IdentityExploration02.pdf).
   Shared stylesheet — used by index.html and every service
   subpage (land.html, home.html, commercial.html, prep.html).
   ============================================================ */
:root{
  --orange:       #DC582A;   /* primary brand color — PANTONE 7579 approx. */
  --orange-deep:  #C6422C;   /* pressed / shadow variant, from same deck  */
  --cream:        #F2F0A1;   /* card & panel accent bg                    */
  --sage:         #849581;   /* secondary / footer bg                     */
  --pale-green:   #C8E29C;   /* sparing accent (checks, tick marks)       */
  --off-white:    #F7F7F8;   /* page background                           */
  --ink:          #221D16;   /* warm near-black, primary text             */
  --ink-soft:     #5B564C;   /* secondary text                            */
  --line:         #E4E0CE;   /* hairline borders                          */
  --white:        #FFFFFF;

  /* Type. Bayard (script) is reserved for the wordmark only, per the
     brand book's own rule ("don't use this for other things"), so it's
     baked into the logo SVG below rather than loaded as a live font.
     Interstate Cond is the brand's designated support face; we reference
     it first and fall back to Oswald (free, same condensed-grotesque
     lineage) so the site still looks correct without the licensed font
     file installed. See the README for how to activate the real one. */
  --font-display: 'Interstate Cond', 'Oswald', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Interstate Cond Mono', 'Roboto Mono', ui-monospace, monospace;

  --radius: 6px;
  --shadow: 0 2px 4px rgba(34,29,22,0.04), 0 12px 28px rgba(34,29,22,0.08);
}

/* Optional: if you have a properly licensed webfont build of Interstate,
   drop the files in /assets/fonts/ and uncomment. Until then the site
   renders correctly on the Oswald fallback above. */
/*
@font-face{
  font-family:'Interstate Cond';
  src: url('fonts/interstate-cond.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
*/

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:var(--off-white);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; }
p{ margin:0; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--orange-deep); outline-offset:2px; }

.wrap{ max-width:1180px; margin:0 auto; padding-inline:20px; }
@media (min-width:640px){ .wrap{ padding-inline:32px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.starburst{ color:var(--orange); flex-shrink:0; }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,247,248,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
/* The header is sticky at 64px tall. Without this, jumping to any in-page
   anchor (the lead form, homepage umbrella sections, a subpage's specific
   service card) lands with its top edge hidden behind the header. Applies
   automatically to whatever element the current URL fragment points at. */
:target{ scroll-margin-top: 88px; }
.brand-lockup{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); }
.brand-lockup .starburst{ width:20px; height:20px; }
.brand-lockup .wordmark{ width:132px; color:var(--orange); }
.header-right{ display:flex; align-items:center; gap:18px; }
.tel-link{
  display:none;
  font-family:var(--font-mono); font-weight:700; font-size:0.85rem;
  letter-spacing:0.02em; text-decoration:none; color:var(--ink);
}
@media (min-width:560px){ .tel-link{ display:inline-block; } }

.header-nav{ display:flex; align-items:center; gap:14px; }
.header-nav a{
  font-family:var(--font-mono); font-weight:700; font-size:0.76rem;
  letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; color:var(--ink);
}
.header-nav a:hover{ color:var(--orange); }
@media (max-width:479px){
  .brand-lockup .wordmark{ width:100px; }
  .header-right{ gap:10px; }
  .header-nav{ gap:10px; }
  .header-nav a{ font-size:0.68rem; }
  .btn-sm{ padding:7px 10px; font-size:0.68rem; }
}
/* Below this, even the compact header starts to crowd on very old/narrow
   phones (~320px) — drop "Services" and keep just "Blog", since Services
   is one tap away via the logo anyway. */
@media (max-width:359px){
  .header-nav .nav-services{ display:none; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:0.04em; font-size:0.85rem;
  padding:11px 20px; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--orange); color:var(--white); }
.btn-primary:hover{ background:var(--orange-deep); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--off-white); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:0.76rem; }

/* ---------------- Hero (homepage) ---------------- */
.hero{ padding:44px 0 12px; }
.hero-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-copy .wordmark-lg{ width:min(420px,100%); color:var(--orange); margin:14px auto 0; }
.hero-copy .eyebrow{ margin-bottom:2px; }
.wordmark-tag{
  font-family:var(--font-mono); font-weight:700; font-size:0.8rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft);
  margin:2px 0 22px;
}
.hero-sub{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,2.4vw,1.55rem);
  text-transform:none; letter-spacing:0; color:var(--ink); line-height:1.28; max-width:34ch;
  margin-left:auto; margin-right:auto;
}
.hero-desc{ margin-top:16px; color:var(--ink-soft); font-size:1rem; max-width:46ch; margin-left:auto; margin-right:auto; }
.umbrella-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-weight:700; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:999px; border:1.5px solid var(--line); background:var(--white);
  text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .15s ease;
}
.chip:hover{ border-color:var(--orange); transform:translateY(-1px); }
.chip .dot{ width:7px; height:7px; border-radius:50%; }

/* ---------------- Page hero (service subpages) ---------------- */
.page-hero{ padding:44px 0 8px; }
.page-hero h1{ font-size:clamp(1.8rem,5vw,2.6rem); color:var(--tag-color); margin-top:8px; }
.page-intro{ margin-top:14px; color:var(--ink-soft); font-size:1.05rem; max-width:62ch; }

.page-services{ padding:28px 0 8px; }
.page-svc-list{ display:flex; flex-direction:column; gap:18px; }
.page-svc-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px;
}
.page-svc-item .top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.page-svc-item .starburst{ width:17px; height:17px; color:var(--tag-color); }
.page-svc-item h2{
  font-size:1.1rem; font-weight:600; text-transform:none; letter-spacing:0;
  font-family:var(--font-body); color:var(--ink);
}
.page-svc-item p{ color:var(--ink-soft); font-size:0.95rem; max-width:72ch; }
.page-svc-item .add-link{
  display:inline-block; margin-top:12px; font-family:var(--font-mono); font-weight:700; font-size:0.72rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--tag-color); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.page-svc-item .add-link:hover{ opacity:0.7; }
.page-svc-item.added{ border-color:var(--tag-color); background:color-mix(in srgb, var(--tag-color) 6%, white); }
.page-svc-item.added .add-link::after{ content:" ✓ added"; }

/* ---------------- Lead form card ---------------- */
.lead-section{ padding:52px 0 60px; border-top:1px solid var(--line); }
.lead-section .lead-heading{ text-align:center; max-width:46ch; margin:0 auto 26px; }
.lead-section .lead-heading h2{ font-size:clamp(1.4rem,3vw,1.8rem); }
.lead-section .lead-heading p{ margin-top:8px; color:var(--ink-soft); }
.form-card{
  background:var(--white); border-radius:12px; box-shadow:var(--shadow);
  border-top:6px solid var(--orange); padding:26px 22px 24px;
  max-width:560px; margin:0 auto;
}
@media (min-width:560px){ .form-card{ padding:32px 30px 30px; } }
.form-card h2{ font-size:1.5rem; }
.form-card .sub{ color:var(--ink-soft); font-size:0.92rem; margin-top:6px; margin-bottom:22px; }

.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--font-mono); font-weight:700; font-size:0.7rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.field input{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:0.95rem; color:var(--ink); background:var(--off-white);
  transition:border-color .15s ease, background .15s ease;
}
.field input:focus{ border-color:var(--orange); background:var(--white); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.svc-group{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.svc-group summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; font-family:var(--font-display); font-weight:600; font-size:0.92rem;
  letter-spacing:0.02em; text-transform:uppercase; background:var(--off-white);
  border-left:5px solid var(--tag-color, var(--orange));
}
.svc-group summary::-webkit-details-marker{ display:none; }
.svc-group summary .count{
  font-family:var(--font-mono); font-weight:700; font-size:0.68rem; color:var(--ink-soft);
  background:var(--white); border:1px solid var(--line); border-radius:999px; padding:2px 8px;
}
.svc-group summary .chev{ transition:transform .18s ease; margin-left:8px; }
.svc-group[open] summary .chev{ transform:rotate(180deg); }
.svc-list{ padding:6px 14px 12px; }
.svc-item{ display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.svc-item:first-child{ border-top:none; }
.svc-item input[type=checkbox]{
  margin-top:3px; width:17px; height:17px; accent-color:var(--orange); flex-shrink:0; cursor:pointer;
}
.svc-item label{ cursor:pointer; }
.svc-item .name{ font-weight:600; font-size:0.9rem; display:block; }
.svc-item .desc{ font-size:0.8rem; color:var(--ink-soft); margin-top:1px; display:block; }

.form-msg{ margin-top:14px; font-size:0.85rem; padding:10px 12px; border-radius:var(--radius); display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:#EAF3E4; color:#2F5A28; border:1px solid #BFDDB1; }
.form-msg.err{ background:#FBE9E5; color:#8A2E17; border:1px solid #F0BFAF; }
.privacy-note{ font-size:0.72rem; color:var(--ink-soft); margin-top:12px; }

/* ---------------- Umbrella sections (homepage) ---------------- */
.umbrella{ padding:52px 0; border-top:1px solid var(--line); }
.umbrella.tint{ background:var(--cream); }
.umbrella-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px; margin-bottom:8px; }
.umbrella-head h2{ font-size:clamp(1.4rem,3vw,1.9rem); }
.umbrella-head a.umbrella-link{ color:var(--tag-color); text-decoration:none; }
.umbrella-head a.umbrella-link:hover{ text-decoration:underline; }
.umbrella-head .see-more{
  font-family:var(--font-mono); font-weight:700; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--tag-color); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.umbrella-head .see-more:hover{ opacity:0.7; }
.umbrella-desc{ color:var(--ink-soft); max-width:60ch; margin-bottom:26px; font-size:0.98rem; }
.svc-grid{ display:grid; gap:16px; }
@media (min-width:720px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
.svc-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:8px;
}
.svc-card .top{ display:flex; align-items:flex-start; gap:10px; }
.svc-card .starburst{ width:16px; height:16px; margin-top:3px; color:var(--tag-color); }
.svc-card h3{ font-size:1rem; font-weight:600; text-transform:none; letter-spacing:0; font-family:var(--font-body); }
.svc-card p{ font-size:0.87rem; color:var(--ink-soft); }
.svc-card .card-ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:4px; }
.svc-card .add-link{
  font-family:var(--font-mono); font-weight:700; font-size:0.7rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--tag-color); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.svc-card .add-link:hover{ opacity:0.7; }
.svc-card .more-info-link{
  font-family:var(--font-mono); font-weight:700; font-size:0.7rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  border-bottom:1.5px solid var(--line); padding-bottom:1px;
}
.svc-card .more-info-link:hover{ color:var(--ink); border-color:var(--ink-soft); }
.svc-card.added,
.page-svc-item.added{ border-color:var(--tag-color); background:color-mix(in srgb, var(--tag-color) 6%, white); }
.svc-card.added .add-link::after,
.page-svc-item.added .add-link::after{ content:" ✓ added"; }

/* ---------------- CTA strip ---------------- */
.cta-strip{ background:var(--sage); color:var(--white); padding:40px 0; text-align:center; }
.cta-strip h2{ font-size:clamp(1.3rem,3vw,1.7rem); color:var(--white); }
.cta-strip p{ margin-top:8px; color:rgba(255,255,255,0.85); }
.cta-strip .btn-primary{ margin-top:20px; }

/* ---------------- Footer ---------------- */
footer{ background:var(--ink); color:var(--off-white); padding:40px 0 26px; }
.footer-grid{ display:grid; gap:26px; }
@media (min-width:720px){ .footer-grid{ grid-template-columns:1.2fr 1fr 1fr; } }
footer .wordmark{ width:150px; color:var(--cream); margin-bottom:10px; }
footer .col h4{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--pale-green); margin-bottom:10px; font-weight:700;
}
footer .col p, footer .col a{ font-size:0.88rem; color:rgba(247,247,248,0.82); text-decoration:none; display:block; margin-bottom:6px; }
footer .col a:hover{ color:var(--cream); }
.footer-bottom{
  margin-top:30px; padding-top:18px; border-top:1px solid rgba(247,247,248,0.14);
  font-size:0.76rem; color:rgba(247,247,248,0.55); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;
}

.hidden-honeypot{ position:absolute; left:-9999px; }

/* ---------------- Blog (Field Notes) ---------------- */
.blog-hero{ padding:44px 0 8px; }
.blog-hero h1{ font-size:clamp(1.8rem,5vw,2.6rem); color:var(--orange); margin-top:8px; }
.blog-intro{ margin-top:14px; color:var(--ink-soft); font-size:1.05rem; max-width:62ch; }

.blog-list{ padding:28px 0 60px; }
.blog-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; display:block; text-decoration:none; color:inherit;
  transition:border-color .15s ease;
}
.blog-card:hover{ border-color:var(--orange); }
.blog-card .tag{
  display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:0.68rem;
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;
}
.blog-card h2{ font-size:1.15rem; font-weight:600; text-transform:none; letter-spacing:0; font-family:var(--font-body); color:var(--ink); }
.blog-card p{ margin-top:8px; color:var(--ink-soft); font-size:0.92rem; }

.post-hero{ padding:44px 0 8px; }
.post-hero .tag{
  display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:0.7rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--tag-color, var(--orange)); margin-bottom:10px;
}
.post-hero h1{ font-size:clamp(1.6rem,4.5vw,2.3rem); color:var(--ink); text-transform:none; letter-spacing:0; }
.post-meta{ margin-top:8px; color:var(--ink-soft); font-size:0.85rem; }

.post-body{ padding:28px 0 56px; }
.post-body .wrap > *{ max-width:70ch; }
.post-body p{ margin-bottom:16px; color:var(--ink); font-size:1rem; line-height:1.65; }
.post-body h2{ font-size:1.3rem; text-transform:none; letter-spacing:0; margin:32px 0 12px; color:var(--ink); }
.post-body ul{ margin:0 0 16px; padding-left:22px; color:var(--ink); }
.post-body li{ margin-bottom:8px; line-height:1.55; }
.post-cta{
  margin-top:32px; padding:22px; background:var(--cream); border-radius:var(--radius);
  border-left:5px solid var(--orange); max-width:70ch;
}
.post-cta p{ margin-bottom:12px; }