/* ============================================================================
   PA Property Services — visual system
   ----------------------------------------------------------------------------
   Concept: THE STRAIT LINE. North of Port Angeles the Strait of Juan de Fuca
   draws one flat horizontal across the horizon. That line is the organising
   device: horizontals for structure, thin mullion verticals for rhythm, flat
   workwear colour, and no decoration that is not doing a job.

   Written 390px-first. Every escalation is a min-width query.
   No webfonts are fetched: the CSP forbids third-party origins, so the display
   and text faces are named first and degrade to a tuned local stack.
========================================================================== */

/* --- Layer 1: primitives — the locked PA palette ------------------------- */
:root {
  --c-ink:        #162A3A;  /* Strait Ink     */
  --c-pine:       #244A3F;  /* Peninsula Pine */
  --c-harbor:     #3E7C9E;  /* Harbor Blue    */
  --c-fog:        #EDF2F1;  /* Fog            */
  --c-whitecap:   #FBFCFA;  /* Whitecap       */
  --c-driftwood:  #D7C7AE;  /* Driftwood      */

  /* --- Layer 2: semantic ------------------------------------------------ */
  --bg:           var(--c-fog);
  --surface:      var(--c-whitecap);
  --ink:          var(--c-ink);
  --ink-soft:     #4B6270;
  --ink-faint:    #526975;  /* small copy must remain readable on Fog/Whitecap */
  --accent:       var(--c-harbor);
  --accent-text:  #306780;  /* accessible Harbor Blue text; graphics keep brand blue */
  --accent-warm:  var(--c-driftwood);
  --on-dark:      #DCE6E6;
  --rule:         #C6D4D6;
  --rule-strong:  var(--c-ink);
  --danger:       #96351F;

  /* --- Layer 3: component ----------------------------------------------- */
  --measure:      62ch;
  --max:          1200px;
  --gutter:       20px;
  --rule-w:       1px;
  --radius:       3px;
  --pane-gap:     0px;

  --font-display: 'Manrope', 'Inter Tight', 'Segoe UI Variable Display',
                  ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', 'Segoe UI',
                  ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--c-ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.1rem; }
a { color: inherit; text-underline-offset: 0.2em; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.1rem; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: fixed; z-index: 200; top: 8px; left: 8px;
  padding: 0.7rem 1rem; background: var(--c-ink); color: var(--c-whitecap);
  font-weight: 700; text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* --- Release banner ----------------------------------------------------- */
.poc {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.2rem 0.7rem;
  padding: 0.6rem var(--gutter);
  background: var(--c-ink); color: var(--on-dark);
  font-size: 0.78rem; line-height: 1.45;
}
.poc strong {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.68rem; color: var(--accent-warm);
}

/* --- Header ------------------------------------------------------------- */
.header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto;
  padding: 16px var(--gutter);
  border-bottom: var(--rule-w) solid var(--rule);
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brandtext { display: flex; flex-direction: column; line-height: 1.15; }
.brandtext b {
  font-family: var(--font-display); font-size: 0.96rem;
  letter-spacing: -0.02em; font-weight: 800;
}
.brandtext small { color: var(--ink-faint); font-size: 0.7rem; letter-spacing: 0.01em; }

.mark { width: 46px; height: 37px; flex: none; }
.mark .mk-l { stroke: var(--c-ink); }
.mark .mk-s { stroke: var(--accent); }
.mark.onDark .mk-l { stroke: var(--c-whitecap); }
.mark.onDark .mk-s { stroke: var(--accent-warm); }

.menu {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: transparent; border: var(--rule-w) solid var(--rule-strong);
  border-radius: 0; padding: 0.5rem 0.85rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
}
.mbars { width: 16px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

#nav { display: none; width: 100%; flex-direction: column; padding-bottom: 0.4rem; }
#nav.open { display: flex; }
#nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  text-decoration: none; padding: 0.7rem 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
#nav a[aria-current='page'] { color: var(--accent-text); }

/* --- Layout ------------------------------------------------------------- */
main {
  max-width: var(--max); margin: 0 auto;
  padding: 36px var(--gutter) 80px;
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.69rem; color: var(--accent-text);
}

h1 { font-size: clamp(2.55rem, 10vw, 5.2rem); margin-bottom: 1.1rem; }
h1 em {
  font-style: normal; color: var(--accent);
  /* the display face carries the emphasis; no second family is introduced */
}
h2 { font-size: clamp(1.8rem, 6vw, 3rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.015em; }

.lede {
  font-size: clamp(1.06rem, 3.4vw, 1.3rem);
  line-height: 1.5; color: var(--ink-soft); max-width: var(--measure);
}
.lede.center { margin-inline: auto; }
.micro, .hint, .fine { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; }
.bigline { max-width: 18ch; }

/* --- The Strait Line: the distinctive asset ----------------------------- */
.straitline { display: flex; align-items: center; gap: 0; margin: 52px 0; }
.straitline span { height: 1px; background: var(--rule); }
.straitline span:nth-child(1) { flex: 1 1 auto; }
.straitline span:nth-child(2) { flex: 0 0 84px; height: 3px; background: var(--accent); }
.straitline span:nth-child(3) { flex: 2 1 auto; }
.straitline.onDark span { background: rgba(220, 230, 230, 0.26); }
.straitline.onDark span:nth-child(2) { background: var(--accent-warm); }

/* --- Buttons and links -------------------------------------------------- */
.button, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.3rem; border-radius: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 0.93rem;
  text-decoration: none; border: 2px solid var(--c-ink);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.button { background: var(--c-ink); color: var(--c-whitecap); }
.button:hover, .button:focus-visible { background: var(--c-pine); border-color: var(--c-pine); }
.ghost { background: transparent; color: var(--c-ink); }
.ghost:hover, .ghost:focus-visible { background: var(--c-ink); color: var(--c-whitecap); }
.button.wide { width: 100%; }
.arw { transition: transform 0.16s ease; }
.button:hover .arw { transform: translateX(3px); }

.textlink {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  text-decoration-thickness: 2px; text-decoration-color: var(--accent);
}
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin: 1.5rem 0 0.8rem; }

/* --- Hero --------------------------------------------------------------- */
.hero { display: grid; gap: 2rem; padding-top: 0.5rem; }
.herocopy .actions { margin-bottom: 1rem; }

.glassfig { margin: 0; }
.glassfig svg { display: block; width: 100%; height: auto; }
.glassfig figcaption {
  margin-top: 0.6rem; font-size: 0.72rem; color: var(--ink-faint);
  font-family: var(--font-mono); letter-spacing: 0.01em;
}

/* --- Pane grid: the mullion rhythm -------------------------------------- */
.panes { display: grid; gap: var(--pane-gap); border-top: var(--rule-w) solid var(--rule-strong); }
.pane {
  padding: 26px 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
.pnum {
  display: block; margin-bottom: 0.8rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; color: var(--accent-text);
}
.pane h3 { margin-bottom: 0.4rem; }
.pane p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.promise { margin: 64px 0; }
.promise .panes { margin-top: 2rem; }

/* --- Steps -------------------------------------------------------------- */
.steps { margin: 64px 0; }
.stepgrid { list-style: none; padding: 0; margin: 1.6rem 0 0; border-top: var(--rule-w) solid var(--rule-strong); counter-reset: s; }
.stepgrid li {
  display: grid; gap: 0.2rem; padding: 20px 0 20px 2.6rem;
  border-bottom: var(--rule-w) solid var(--rule); position: relative;
  counter-increment: s;
}
.stepgrid li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 22px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-text);
}
.stepgrid b { font-family: var(--font-display); font-size: 1.06rem; }
.stepgrid span { color: var(--ink-soft); font-size: 0.94rem; }

/* --- Dark boundary panel ------------------------------------------------ */
.boundary {
  margin: 64px 0; padding: 32px var(--gutter);
  background: var(--c-ink); color: var(--on-dark);
  margin-inline: calc(var(--gutter) * -1);
}
.boundary h2 { color: var(--c-whitecap); }
.boundary .eyebrow { color: var(--accent-warm); }
.boundary .bnote { color: var(--on-dark); max-width: var(--measure); margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0; padding: 0; list-style: none; }
.chips span {
  border: 1px solid rgba(220, 230, 230, 0.34);
  padding: 0.4rem 0.75rem; font-size: 0.8rem;
}

/* --- Scope panels ------------------------------------------------------- */
.scope-panel {
  background: var(--surface);
  border: var(--rule-w) solid var(--rule);
  border-top: 3px solid var(--c-ink);
  padding: 24px;
}
.scope-panel.warm { border-top-color: var(--accent-warm); background: #FAF7F1; }
.scope-panel.tight { padding: 20px; }
.scope-panel > :last-child { margin-bottom: 0; }
.scope-panel h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }

.honest, .compare { display: grid; gap: 1rem; margin: 64px 0; }

.ticks, .crosses { list-style: none; padding: 0; margin: 0; }
.ticks li, .crosses li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem;
  font-size: 0.94rem; color: var(--ink-soft);
}
.ticks li::before, .crosses li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 0.85rem;
}
.ticks li::before { content: '—'; color: var(--accent); }
.crosses li::before { content: '\00d7'; color: var(--danger); }

/* --- Two column --------------------------------------------------------- */
.twocol { display: grid; gap: 2rem; margin: 56px 0; }
.twocol h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }

/* --- Page heads and prose ----------------------------------------------- */
.pagehead { padding-bottom: 8px; }
.pagehead.prose { max-width: 760px; }
.pagehead.prose h2 { font-size: clamp(1.4rem, 4.5vw, 1.85rem); margin-top: 2.4rem; }
.pagehead.prose p { color: var(--ink-soft); max-width: var(--measure); }

.closing {
  margin: 72px 0 0; padding-top: 40px;
  border-top: 3px solid var(--c-ink);
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.closing h2 { max-width: 16ch; }

/* --- FAQ ---------------------------------------------------------------- */
.faqs { max-width: 820px; margin: 24px auto 0; border-top: var(--rule-w) solid var(--rule-strong); }
.faqs details { border-bottom: var(--rule-w) solid var(--rule); }
.faqs summary {
  cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem;
  list-style: none;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after {
  content: '+'; position: absolute; right: 0; top: 1rem;
  font-family: var(--font-mono); color: var(--accent); font-size: 1.1rem;
}
.faqs details[open] summary::after { content: '\2212'; }
.faqs details > div { padding-bottom: 1.1rem; }
.faqs p { color: var(--ink-soft); max-width: var(--measure); margin: 0; font-size: 0.96rem; }

/* --- Hold notice -------------------------------------------------------- */
.holdbar {
  display: grid; gap: 0.3rem; margin: 1.6rem 0;
  padding: 16px 18px;
  background: var(--surface);
  border: var(--rule-w) solid var(--rule);
  border-left: 4px solid var(--accent-warm);
  font-size: 0.87rem; line-height: 1.55;
}
.holdbar strong {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-pine);
}
.holdbar.inline { margin-bottom: 0; }

.reviewflag {
  display: grid; gap: 0.3rem; margin-bottom: 1.2rem; padding: 14px 16px;
  background: #FAF7F1; border-left: 4px solid var(--danger);
  font-size: 0.87rem; line-height: 1.55;
}
.reviewflag strong {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--danger);
}

/* --- Quote form --------------------------------------------------------- */
.quotegrid { display: grid; gap: 2rem; margin-top: 1.4rem; }

form {
  display: grid; gap: 1.1rem;
  padding: 22px var(--gutter);
  background: var(--surface);
  border: var(--rule-w) solid var(--rule);
  border-top: 3px solid var(--c-ink);
  margin-inline: calc(var(--gutter) * -1);
}
.formnote { margin: 0; font-size: 0.8rem; color: var(--ink-faint); }

.field { display: grid; gap: 0.35rem; }
.field label, .check > span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.01em;
}
.field label i { font-style: normal; font-weight: 500; color: var(--ink-faint); }

input, select, textarea {
  width: 100%; padding: 0.72rem 0.8rem;
  background: #fff; color: var(--ink);
  border: var(--rule-w) solid #96A9AE; border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 5.5rem; }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }

.hint { margin: 0; }
.error { margin: 0; min-height: 1.1em; font-size: 0.78rem; color: var(--danger); font-weight: 600; }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.65rem;
  align-items: start; padding-top: 0.3rem;
}
.check input { width: auto; margin-top: 0.28rem; }
.check > span { font-weight: 600; line-height: 1.45; }
.check .error { grid-column: 2; }

/* --- Draft result ------------------------------------------------------- */
.result {
  margin: 48px 0 0; padding: 24px var(--gutter);
  background: var(--surface); border: var(--rule-w) solid var(--rule);
  border-top: 3px solid var(--accent);
  margin-inline: calc(var(--gutter) * -1);
  scroll-margin-top: 1rem;
}
.result h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
.result pre {
  white-space: pre-wrap; word-break: break-word;
  background: var(--c-fog); border: var(--rule-w) solid var(--rule);
  padding: 1.1rem; margin: 0;
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.65;
  max-height: 60vh; overflow: auto;
}

.lostnav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.4rem 0; }
.lostnav a { font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--c-ink); color: var(--on-dark);
  padding: 48px var(--gutter) 40px;
}
.footgrid { display: grid; gap: 2rem; max-width: var(--max); margin: 0 auto; }
.footbrand .brandtext b { color: var(--c-whitecap); }
.footbrand .brandtext small { color: var(--accent-warm); }
.footpromise { margin: 1rem 0 0; font-size: 0.92rem; max-width: 34ch; color: var(--on-dark); }
.footnav { display: grid; gap: 0.55rem; align-content: start; }
.footnav a { font-size: 0.88rem; text-decoration: none; }
.footnav a:hover, .footnav a:focus-visible { text-decoration: underline; }
.footer .straitline { max-width: var(--max); margin: 32px auto 20px; }
.fine { max-width: var(--max); margin: 0 auto; color: #90A6AC; }

/* ============================================================================
   560px — small tablets and large phones
========================================================================== */
@media (min-width: 560px) {
  :root { --gutter: 28px; }
  .panes.three { grid-template-columns: 1fr 1fr; }
  .panes.three .pane { padding-inline: 0 1.6rem; border-right: var(--rule-w) solid var(--rule); }
  .panes.three .pane:nth-child(2n) { border-right: 0; padding-right: 0; }
  .honest, .compare { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .stepgrid li { grid-template-columns: minmax(170px, 1fr) 1.7fr; gap: 1.4rem; align-items: baseline; }
  .actions { gap: 1.1rem; }
  .button.wide { width: auto; justify-self: start; }
  .footgrid { grid-template-columns: 1.4fr 1fr; }
  .footnav { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
}

/* ============================================================================
   901px — desktop: nav opens out, hero splits, mullion grid completes
========================================================================== */
@media (min-width: 901px) {
  :root { --gutter: 40px; }

  body { font-size: 17.5px; }

  .header { padding-block: 22px; flex-wrap: nowrap; }
  .menu { display: none; }
  #nav {
    display: flex; flex-direction: row; width: auto; gap: 1.6rem;
    padding-bottom: 0; align-items: center;
  }
  #nav a { border-bottom: 2px solid transparent; padding: 0.4rem 0; font-size: 0.86rem; }
  #nav a:hover, #nav a:focus-visible, #nav a[aria-current='page'] { border-bottom-color: var(--accent); }

  main { padding: 52px var(--gutter) 110px; }

  .hero { grid-template-columns: 1.02fr 0.98fr; gap: 3.5rem; align-items: center; min-height: 66vh; }
  .heroFig { order: 2; }

  .panes.three { grid-template-columns: repeat(3, 1fr); }
  .panes.three .pane { padding-right: 2rem; border-right: var(--rule-w) solid var(--rule); }
  .panes.three .pane:nth-child(2n) { border-right: var(--rule-w) solid var(--rule); padding-right: 2rem; }
  .panes.three .pane:last-child { border-right: 0; padding-right: 0; }

  .twocol { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .honest, .compare { gap: 2rem; }

  .boundary { padding: 56px; margin-inline: 0; }
  .promise, .steps, .honest, .compare, .boundary { margin-block: 96px; }
  .straitline { margin-block: 72px; }
  .closing { margin-top: 110px; padding-top: 56px; }

  .quotegrid { grid-template-columns: 1.45fr 0.85fr; gap: 3rem; align-items: start; }
  form {
    grid-template-columns: 1fr 1fr; gap: 1.3rem; padding: 36px; margin-inline: 0;
  }
  .formnote, .field.wide, .check, .button.wide { grid-column: 1 / -1; }
  .result { padding: 40px; margin-inline: 0; }
  .result pre { font-size: 0.82rem; }

  .pagehead { min-height: 30vh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
  .footer { padding: 64px var(--gutter) 44px; }
  .footgrid { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
}

/* ============================================================================
   1440px — desktop craft: the measure stops growing, the rhythm opens up
========================================================================== */
@media (min-width: 1440px) {
  :root { --max: 1280px; --gutter: 56px; }
  body { font-size: 18px; }
  .hero { gap: 5rem; }
  .promise, .steps, .honest, .compare, .boundary { margin-block: 120px; }
}

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

/* --- Print: the draft is the document ----------------------------------- */
@media print {
  .poc, .header, .footer, .quoteaside, .result .actions,
  .holdbar.inline, form, .closing { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .result { border: 0; padding: 0; margin: 0; background: #fff; }
  .result pre { border: 1px solid #999; background: #fff; max-height: none; font-size: 10pt; }
  .result::after {
    content: 'Draft only — not sent, not received, not stored. No price or appointment is offered.';
    display: block; margin-top: 1rem; font-size: 9pt; font-style: italic;
  }
  a[href^='/']::after { content: ''; }
}