/* =========================================================================
   PMC Landing — "Harbor & Brass"

   Design constraints (from README §5). Do not relax these:
     - No gradients. No glassmorphism. No scroll animation.
     - Max radius 3px. Exactly one elevated surface (the form card).
     - Structure comes from 1px hairlines and whitespace, not boxes.
     - No icon set. Numerals and rules carry the hierarchy.
     - Base 18px, max measure 68ch.
   ====================================================================== */

:root{
  --ink:#10242B;
  --deep:#163C46;
  --brass:#B5822E;
  --brass-dk:#8E6621;
  --brass-tint:#F0E4CC;
  --bone:#FAF6EF;
  --paper:#FFFFFF;
  --rule:#DED6C8;
  --text:#1D2B30;
  --muted:#56666C;
  --green:#2E6B4F;
  --error:#9A2E24;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gutter:24px;
  --container:1180px;
}

/* ---------- fonts (self-hosted; no third-party request) ---------- */
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bone);color:var(--text);
  font:400 18px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block;}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0 0 .5em;}
p{margin:0 0 1em;}
a{color:var(--deep);}
a:hover{color:var(--ink);}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.narrow{max-width:900px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--gutter);top:12px;z-index:100;background:var(--ink);color:var(--bone);padding:12px 18px;border-radius:3px;}

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

/* ---------- admin-only launch banner ---------- */
.pmc-admin-banner{
  background:#7A1F1A;color:#fff;padding:14px var(--gutter);font-size:15px;line-height:1.5;
}

/* ---------- header ---------- */
.siteheader{border-bottom:1px solid var(--rule);background:var(--bone);}
.siteheader__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;flex-wrap:wrap;}
.brand img{width:300px;height:auto;}
.siteheader__contact{text-align:right;}
.phone{display:block;font-size:22px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em;}
.phone:hover{color:var(--brass-dk);}
.hours{display:block;font-size:14px;color:var(--muted);}

/* ---------- hero (asymmetric: copy 7 cols, form 5) ---------- */
.hero{padding-block:72px 88px;border-bottom:1px solid var(--rule);}
.hero__grid{display:grid;grid-template-columns:1fr;gap:48px;}
.eyebrow{
  display:inline-block;background:var(--brass-tint);color:#6B4D18;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:6px 12px;border-radius:3px;margin-bottom:22px;
}
.hero h1{font-size:clamp(32px,5vw,48px);max-width:16ch;margin-bottom:24px;}
.lede{font-size:20px;color:var(--muted);max-width:60ch;}
.trustrow{list-style:none;margin:32px 0 0;padding:28px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:0;}
.trustrow li{font-size:16px;color:var(--text);padding-right:22px;margin-right:22px;border-right:1px solid var(--rule);}
.trustrow li:last-child{border-right:0;margin-right:0;padding-right:0;}

/* ---------- sections ---------- */
.section{padding-block:96px;border-bottom:1px solid var(--rule);}
.section--band{background:var(--paper);}
.section h2{font-size:clamp(26px,3.4vw,36px);max-width:22ch;}
.intro{font-size:19px;color:var(--muted);max-width:66ch;margin-bottom:48px;}
.closing{margin-top:40px;padding-top:28px;border-top:1px solid var(--rule);font-size:19px;max-width:68ch;}
.note{margin-top:28px;font-size:16px;color:var(--muted);max-width:68ch;}

/* ---------- numbered list (hanging brass numerals, no cards) ---------- */
.numbered{list-style:none;margin:0;padding:0;}
.numbered li{display:grid;grid-template-columns:auto 1fr;gap:28px;
  padding:32px 0;border-top:1px solid var(--rule);}
.numbered li:last-child{border-bottom:1px solid var(--rule);}
.numbered__n{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--brass);line-height:1;padding-top:4px;}
.numbered h3{font-size:21px;margin-bottom:.35em;}
.numbered p{color:var(--muted);max-width:62ch;margin:0;}

/* ---------- paths / steps (hairline-separated, not a card grid) ---------- */
.paths article,.steps article{padding:30px 0;border-top:1px solid var(--rule);}
.paths article:last-child,.steps article:last-child{border-bottom:1px solid var(--rule);}
.paths h3,.steps h3{font-size:21px;margin-bottom:.35em;}
.paths p,.steps p{color:var(--muted);max-width:66ch;margin:0;}

/* ---------- windows table ---------- */
.windows{width:100%;border-collapse:collapse;font-size:17px;margin-top:8px;}
.windows th,.windows td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-bottom:1px solid var(--rule);}
.windows thead th{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:12px;}
.windows tbody th{font-weight:600;color:var(--ink);width:30%;}
.windows td{color:var(--muted);}

/* ---------- faq ---------- */
.faq{margin:0;}
.faq dt{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);
  padding-top:28px;margin-top:28px;border-top:1px solid var(--rule);}
.faq dt:first-child{border-top:0;margin-top:0;padding-top:0;}
.faq dd{margin:.5em 0 0;color:var(--muted);max-width:68ch;}

/* ---------- form card (the ONLY elevated surface) ---------- */
.formcard{
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 1px 2px rgba(16,36,43,.06);
  padding:32px 28px;
}
.formcard__title{font-size:25px;margin-bottom:.25em;}
.formcard__sub{color:var(--muted);font-size:16px;margin-bottom:26px;}
.formcard__done h2{font-size:25px;}
.formcard__done p{color:var(--muted);margin-bottom:0;}

.field{margin:0 0 20px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field label,.field legend{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.optional{font-weight:400;color:var(--muted);}

.field input[type=text],.field input[type=tel],.field input[type=email],.field select{
  width:100%;font:400 17px/1.4 var(--sans);color:var(--text);
  background:var(--paper);border:1px solid #BDB3A3;border-radius:3px;
  padding:14px 13px;min-height:52px;
}
.field input:focus,.field select:focus{border-color:var(--ink);}
.field [aria-invalid=true]{border-color:var(--error);border-width:2px;}

.field--radio{border:0;margin:0 0 20px;padding:0;}
.field--radio label{display:flex;align-items:center;gap:10px;font-weight:400;font-size:17px;
  min-height:44px;margin:0;cursor:pointer;}
.field--radio input{width:22px;height:22px;accent-color:var(--deep);}

.field--check{margin-top:4px;}
.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:14px;
  line-height:1.55;color:var(--muted);cursor:pointer;margin:0;}
.consent input{width:24px;height:24px;flex:0 0 auto;margin-top:2px;accent-color:var(--deep);}

.field__err{display:block;color:var(--error);font-size:15px;font-weight:600;margin-top:6px;}
.field__err:empty{display:none;}

.formerrors{background:#FBEDEB;border-left:4px solid var(--error);padding:14px 16px;margin-bottom:22px;border-radius:3px;}
.formerrors p{margin:0;font-size:16px;color:#7A2219;font-weight:600;}

.agentnotice{font-size:16px;color:var(--text);margin:24px 0 16px;}

.btn{
  display:block;width:100%;min-height:56px;
  background:var(--brass);color:var(--ink);
  font:600 17px/1 var(--sans);letter-spacing:.01em;
  border:0;border-radius:3px;cursor:pointer;
  padding:18px 20px;margin-top:4px;
  transition:background .15s ease;
}
.btn:hover{background:var(--brass-dk);color:var(--bone);}
.btn[disabled]{opacity:.6;cursor:progress;}

.afterbtn{font-size:14px;color:var(--muted);margin:16px 0 0;}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- footer ---------- */
.sitefooter{background:var(--ink);color:#C9D4D7;padding-block:56px;font-size:15px;}
.sitefooter a{color:#E3EAEC;}
/* COMPLIANCE: TPMO disclaimer must stay >=14px and high contrast. */
.disclaimer{font-size:14px;line-height:1.6;color:#D4DEE0;max-width:88ch;margin-bottom:14px;}
.disclaimer--tpmo{font-size:15px;color:#FFFFFF;}
.sitefooter hr{border:0;border-top:1px solid #2A444C;margin:28px 0;}
.footmeta{font-size:15px;color:#B9C7CB;margin-bottom:12px;}
.footmeta strong{color:#fff;}
.footlinks{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0;}
.footlinks a{font-size:15px;}
.copyright{font-size:14px;color:#8FA3A9;margin:20px 0 0;}

/* ---------- responsive ---------- */
@media (min-width:1024px){
  .hero__grid{grid-template-columns:7fr 5fr;gap:64px;align-items:start;}
  .hero__form{position:sticky;top:32px;}
}
@media (max-width:720px){
  :root{--gutter:20px;}
  .hero{padding-block:48px 56px;}
  .section{padding-block:60px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .trustrow{display:block;}
  .trustrow li{display:block;border-right:0;padding:0 0 10px;margin:0;}
  .siteheader__inner{flex-direction:column;align-items:flex-start;gap:12px;}
  .siteheader__contact{text-align:left;}
  .brand img{width:260px;}
  .numbered li{grid-template-columns:1fr;gap:10px;}
  .windows,.windows tbody,.windows tr,.windows th,.windows td{display:block;width:auto;}
  .windows thead{display:none;}
  .windows tr{border-bottom:1px solid var(--rule);padding:16px 0;}
  .windows th,.windows td{border:0;padding:2px 0;}
  .windows tbody th{width:auto;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* =========================================================================
   Illustrations + motion  (v1.1)

   Motion rules, deliberately conservative for a 64+ audience:
     - Nothing above the fold fades in. The headline and form are instant.
     - Reveals are opacity + 14px rise only. Nothing slides sideways,
       nothing scales, nothing bounces.
     - Illustration lines draw once, then stay.
     - All of it is off under prefers-reduced-motion, and off entirely
       if JS does not run (no .pmc-motion class = everything visible).
   ====================================================================== */

/* ---------- illustrations ---------- */
.illus{line-height:0;}
.illus__svg{width:100%;height:auto;display:block;overflow:visible;}

.illus--hero{margin-top:44px;max-width:520px;}
.illus--hero .illus__svg{width:100%;}

.illus--spot{width:52px;flex:0 0 52px;}
.illus--spot .illus__svg{width:52px;height:52px;}

.illus--path{width:64px;margin-bottom:18px;}
.illus--path .illus__svg{width:64px;height:48px;}

/* The numbered rows now carry numeral + illustration + text. */
.numbered li{grid-template-columns:auto auto 1fr;align-items:start;}
.numbered__n{align-self:start;}

/* ---------- reveal ---------- */
/* Hidden only when JS has confirmed it will reveal them. */
.pmc-motion .reveal{
  opacity:0;
  transform:translateY(14px);
}
.pmc-motion .reveal.is-visible{
  opacity:1;
  transform:none;
  transition:opacity .55s ease-out, transform .55s cubic-bezier(.22,.61,.36,1);
}

/* ---------- illustration line draw ---------- */
.pmc-motion .reveal .dr,
.pmc-motion .illus--hero .dr{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
}
.pmc-motion .reveal.is-visible .dr,
.pmc-motion .illus--hero.is-visible .dr{
  animation:pmc-draw 1.1s ease-out forwards;
}
@keyframes pmc-draw{to{stroke-dashoffset:0;}}

/* ---------- micro-interactions ---------- */
.formcard{transition:box-shadow .25s ease, border-color .25s ease;}
.formcard:focus-within{
  border-color:#C4B79F;
  box-shadow:0 2px 14px rgba(16,36,43,.10);
}
.field input,.field select{transition:border-color .15s ease, box-shadow .15s ease;}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(22,60,70,.10);}
.phone{transition:color .15s ease;}
.numbered li,.paths article,.steps article{transition:border-color .2s ease;}

@media (max-width:720px){
  .illus--hero{margin-top:32px;}
  .numbered li{grid-template-columns:auto 1fr;}
  .numbered .illus--spot{grid-column:1 / -1;margin-bottom:4px;}
}

@media (prefers-reduced-motion:reduce){
  .pmc-motion .reveal{opacity:1 !important;transform:none !important;}
  .pmc-motion .reveal .dr,.pmc-motion .illus--hero .dr{
    stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;
  }
}