/* Harbor Sites commits to one light look on purpose -- no dark-mode
   variant. A visitor's system/browser dark-mode setting should not
   turn this white brand page dark. */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F5F6;
  --ink:#10222D;
  --ink-soft:#48585F;
  --ink-faint:#83908E;
  --line:#DDE1E3;
  --navy:#173B4C;
  --navy-ink:#FFFFFF;
  --brass:#AD8232;
  --brass-deep:#8C6A28;
  --channel:#A23B2E;
  --font-display:'Spectral',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
:root{color-scheme: light;}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
}

/* Smooth cross-fade between pages on same-origin navigation.
   Native, no JS/library needed; browsers without support just do a
   normal instant navigation, so this is a pure progressive enhancement. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
}
.side{padding-inline:20px;}
@media(min-width:760px){ .side{padding-inline:48px;} }
.wrap{max-width:1040px;margin-inline:auto;}
a{color:inherit;}
img{max-width:100%;}

/* ---------- Nav ---------- */
.topnav{
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.topnav-inner{
  max-width:1040px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:16px;
  flex-wrap:wrap;
}
.wordmark{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  color:var(--ink);
}
.wordmark svg{width:24px;height:24px;flex-shrink:0;color:var(--brass);}
.nav-cta{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  background:var(--navy);
  color:var(--navy-ink);
  padding:10px 18px;
  border-radius:7px;
}

/* ---------- Hero / background-paths texture ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  padding-block:60px 52px;
}
/* Soft blend from the hero into the informational zone below, instead
   of a hard rule -- the chart-line motif already fades via its own
   SVG mask, this band finishes the color transition. */
.fade-seam{
  height:64px;
  background:linear-gradient(to bottom, var(--bg), var(--surface-2));
}
.fade-seam.reverse{
  background:linear-gradient(to bottom, var(--surface-2), var(--bg));
}
.zone{background:var(--surface-2);}
.hero-chart-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
}
.hero svg.chart{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* Background paths: each line is a long dashed stroke whose dash offset
   scrolls continuously, at its own speed, so it reads as many currents
   of water flowing through the hero at different rates rather than a
   single rigid pattern sliding. Static (no animation) under
   reduced-motion -- the lines still give the hero texture at rest. */
@media (prefers-reduced-motion: no-preference){
  .bgp{ animation: bgpFlow var(--dur, 20s) linear infinite; }
}
@keyframes bgpFlow{ to{ stroke-dashoffset:-400; } }
.hero-inner{
  position:relative;
  max-width:1040px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:14px;
}
h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(32px,5.4vw,52px);
  line-height:1.08;
  margin:0 0 20px;
  max-width:16ch;
  text-wrap:balance;
}
.sub{
  font-size:17px;
  line-height:1.62;
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 0 28px;
}
.cta-row{display:flex;flex-direction:column;align-items:center;gap:12px;}
.btn-primary{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  text-decoration:none;
  background:var(--navy);
  color:var(--navy-ink);
  padding:15px 26px;
  border-radius:8px;
}
.microcopy{font-size:13.5px;color:var(--ink-faint);}

/* ---------- Sections ---------- */
section{padding-block:52px;border-bottom:1px solid var(--line);}
section.noborder{border-bottom:none;}
h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(23px,3.2vw,30px);
  margin:0 0 28px;
  max-width:24ch;
  text-wrap:balance;
}

/* Scroll-reveal: JS adds .in-view as each element crosses into the
   viewport. No-JS and reduced-motion both fall back to fully visible. */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

.steps{display:flex;flex-direction:column;gap:26px;}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;}
.step .n{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--brass-deep);
  border:1px solid var(--line);
  border-radius:8px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:17px;margin:2px 0 6px;}
.step p{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:56ch;}

/* Soft blurred color blobs behind the grid so the glass cells below have
   something to refract -- a flat white-on-white page gives a frosted-glass
   effect nothing to show. Kokonut-UI "Liquid Glass" inspired; simplified to
   backdrop-filter blur/saturate rather than a true SVG displacement filter,
   since feDisplacementMap referenced from backdrop-filter isn't reliably
   supported outside Chromium. */
.why-zone{position:relative;overflow:hidden;}
.why-zone::before,.why-zone::after{
  content:"";
  position:absolute;
  width:360px;height:360px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.28;
  pointer-events:none;
  z-index:0;
}
.why-zone::before{background:var(--brass);top:-140px;left:-100px;}
.why-zone::after{background:var(--navy);bottom:-160px;right:-80px;}
.why-zone .wrap{position:relative;z-index:1;}

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(221,225,227,.6);
  border:1px solid rgba(221,225,227,.7);
  border-radius:12px;
  overflow:hidden;
}
@media(max-width:760px){ .why-grid{grid-template-columns:1fr;} }
.why-cell{
  position:relative;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  padding:24px 22px;
  overflow:hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .why-cell{background:var(--surface);}
}
/* Mouse-follow spotlight: JS sets --mx/--my per cell on pointermove.
   Fine-pointer devices only (see JS guard) -- on touch, the glow simply
   never appears, which is a fine, harmless fallback. */
.why-cell::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(173,130,50,.16), transparent 72%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.why-cell:hover::before{opacity:1;}
.why-cell h3,.why-cell p{position:relative;}
.why-cell h3{font-size:16px;margin:0 0 8px;}
.why-cell p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.55;}

footer{padding-block:36px;}
.footer-inner{
  max-width:1040px;margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;
  font-size:13.5px;color:var(--ink-faint);
}
.footer-inner a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}

/* ---------- Stat band (questionnaire intro) ---------- */
.stat-band{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:32px 0 4px;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat-item{
  flex:1;
  display:flex;
  flex-direction:column;
  padding-inline:26px;
}
.stat-item:first-child{padding-left:0;}
.stat-item:last-child{padding-right:0;}
/* Stat visuals: small ring gauges (percentage stats) and a growth
   sparkline (the "2.8x" stat, which isn't a percentage), replacing the
   old plain tick-mark rule. Bklit-UI-inspired -- accurate to the source
   number for the rings (ring fill = the literal percentage), decorative
   only for the wave (direction, not a scaled value). Draw-in is driven
   by JS alongside the existing count-up, using the same reveal trigger. */
.stat-visual{
  display:block;
  width:64px;height:64px;
  margin-bottom:14px;
}
.stat-ring{ transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--line); stroke-width:5; }
.ring-fill{
  fill:none;
  stroke:var(--brass);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:163.4;
  stroke-dashoffset:163.4;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,.84,.44,1);
}
.wave-path{
  fill:none;
  stroke:var(--brass);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:90;
  stroke-dashoffset:90;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,.84,.44,1);
}
@media (prefers-reduced-motion: reduce){
  .ring-fill,.wave-path{transition:none;}
}
.stat-num{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(28px,4vw,40px);
  line-height:1;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
.stat-label{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.45;
  max-width:24ch;
}
.stat-divider{width:1px;background:var(--line);flex-shrink:0;}
.stat-source{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
  margin:14px 0 0;
  letter-spacing:.01em;
}
.stat-source summary{cursor:pointer;}
.stat-source summary:hover{color:var(--ink-soft);}
.stat-source p{margin:8px 0 0;}
.stat-source a{color:var(--ink-faint);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;}
.stat-source a:hover{color:var(--ink-soft);}
@media(max-width:680px){
  .stat-band{flex-direction:column;gap:22px;padding:24px 0;}
  .stat-divider{display:none;}
  .stat-item{padding-inline:0;}
}

/* Purely decorative echo of the hero's flowing background-paths lines,
   living in the questionnaire page's otherwise-empty desktop margins so
   the page doesn't feel visually disconnected from the homepage. Reuses
   the .bgp/bgpFlow animation defined above (under "Hero /
   background-paths texture") as-is -- it isn't scoped to .hero, so no
   new keyframes needed here. Only shown once there's genuine empty
   margin outside the 1040px .wrap to hold it without ever crowding the
   form. */
.form-zone{position:relative;overflow:hidden;}
.form-accent{
  position:absolute;
  top:0;
  width:210px;
  height:100%;
  pointer-events:none;
  display:none;
}
.form-accent-left{left:0;}
.form-accent-right{right:0;}
.form-accent svg{width:100%;height:100%;display:block;}
@media(min-width:1400px){
  .form-accent{display:block;}
}

/* ---------- Form ---------- */
.progress-bar{
  position:fixed;top:0;left:0;
  height:3px;width:0%;
  background:var(--brass);
  z-index:50;
  transition:width .1s linear;
}
/* Floating glass progress ring -- same liquid-glass treatment as the
   homepage's why-cells, fixed in the foreground over the form. Hidden
   until you've scrolled a little way in, so it isn't sitting empty over
   the intro copy. Non-interactive: status only, no click target. */
.form-progress-ring{
  position:fixed;
  right:24px;bottom:24px;
  z-index:40;
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px -12px rgba(23,59,76,.35);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .form-progress-ring{background:rgba(255,255,255,.94);}
}
.form-progress-ring.in-view{opacity:1;transform:translateY(0);}
.form-progress-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.form-progress-label{
  position:relative;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--navy);
}
@media(max-width:560px){
  .form-progress-ring{right:16px;bottom:16px;width:54px;height:54px;}
  .form-progress-label{font-size:10.5px;}
}
@media (prefers-reduced-motion: reduce){
  .form-progress-ring{transition:none;}
}
.draft-notice{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:24px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.draft-clear{
  font:inherit;font-size:12.5px;font-weight:600;
  color:var(--navy);
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 10px;
  cursor:pointer;
}
.draft-clear:hover{border-color:var(--navy);}
.file-feedback{
  font-size:12.5px;
  color:var(--brass-deep);
  margin:6px 0 0;
}
.form-shell{max-width:680px;}
fieldset{
  border:none;
  padding:0;
  margin:0 0 40px;
}
fieldset legend{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  padding:0;
  margin-bottom:4px;
}
.field-hint{font-size:13px;color:var(--ink-faint);margin:0 0 18px;}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:6px;
}
.field label .opt{font-weight:400;color:var(--ink-faint);}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="url"],
.field textarea,
.field input[type="file"]{
  width:100%;
  font:inherit;
  font-size:15px;
  padding:11px 13px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
}
.field textarea{resize:vertical;min-height:88px;}
.field input:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:1px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){ .two-col{grid-template-columns:1fr;} }

.submit-row{margin-top:8px;}
.btn-submit{
  font:inherit;
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  background:var(--navy);
  color:var(--navy-ink);
  border:none;
  padding:15px 28px;
  border-radius:8px;
  cursor:pointer;
}
.submit-note{font-size:13px;color:var(--ink-faint);margin-top:10px;}

/* ---------- Thank you ---------- */
.confirm-wrap{
  max-width:620px;
  padding-block:90px;
  text-align:left;
}
.confirm-mark{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.confirm-mark svg{width:26px;height:26px;color:var(--brass-deep);}

/* ---------- Launch Kit: choices, selects, dates, notes ---------- */
.field select,
.field input[type="date"]{
  width:100%;
  font:inherit;
  font-size:15px;
  padding:11px 13px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
}
.field select:focus,.field input[type="date"]:focus{outline:2px solid var(--brass);outline-offset:1px;}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0;padding:0;border:0}
.choices.inline{display:flex;flex-wrap:wrap;gap:8px 20px}
.field .choices label{display:flex;align-items:center;gap:9px;font-weight:400;font-size:15px;margin:0;cursor:pointer}
.choices input{width:18px;height:18px;margin:0;accent-color:var(--navy);flex:none}
@media(max-width:560px){ .choices{grid-template-columns:1fr;} }
.kit-note{border:1px solid var(--line);border-left:3px solid var(--brass);background:var(--surface);border-radius:8px;padding:14px 16px;font-size:14px;margin:0 0 32px}
.kit-note strong{color:var(--ink)}