/* ============ SHARED TOKENS & BASE — "Deep Water" ============ */
:root{
  --ground:#3F5F86;           /* Midnight Harbor — primary ground */
  --accent:#6F9FC8;           /* Coastal Sky — accent, the period, hover */
  --salt-linen:#E6E2DA;       /* primary ink on blue */
  --dune:#D8CBB2;             /* sparing only, not used on landing */
  --rule-light:#CFC9C3;       /* Stone Clay — rules on light surfaces */
  --ink-on-light:#2E2B27;     /* Basalt */
  --pale-sky:#CBDCEC;         /* the italic word in the headline */
  --body-on-blue:#DCD8CF;
  --muted-on-blue:#BFCEDE;
  --image-bed:#35506F;
  --rule-on-blue:rgba(230,226,218,0.22);
  --input-underline:rgba(230,226,218,0.40);
  --input-placeholder:rgba(230,226,218,0.45);

  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Menlo, monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ background: var(--ground); }
body{
  font-family: var(--font);
  color: var(--body-on-blue);
  background: var(--ground);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  display:flex; flex-direction:column;
}
main{ flex:1; position:relative; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--accent); color: var(--salt-linen); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============ SITE HEADER ============ */
.site-header{
  position:relative; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  gap:20px;
  padding: 28px clamp(20px,5vw,72px) 0;
}
.site-header .logo{
  font-family: var(--font-display); font-weight:300; font-size:24px; letter-spacing:0.14em; line-height:1;
  margin-left:-0.055em;
  color: var(--salt-linen);
}
.site-header .logo .dot{ color: var(--accent); }
.site-header .header-note{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0.20em; text-transform:uppercase;
  color: var(--salt-linen);
}
.site-header .header-note a:hover{ color: var(--accent); }

/* ============ TYPOGRAPHY ============ */
.eyebrow{
  font-family: var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0.24em; text-transform:uppercase;
  color: var(--accent);
  margin-bottom: clamp(28px,5vw,52px);
}
h1{
  font-family: var(--font-display); font-weight:200; font-size:clamp(38px,7.2vw,92px); line-height:1.04;
  letter-spacing:-0.02em; color: var(--salt-linen); max-width:16em; text-wrap:pretty;
  margin-bottom: clamp(28px,4vw,44px);
}
h1 em{ font-style:italic; font-weight:300; color: var(--pale-sky); }

p.lead{
  font-family: var(--font); font-size:clamp(16px,1.5vw,19px); font-weight:300; color: var(--body-on-blue); line-height:1.65;
  max-width:44em; text-wrap:pretty;
  margin-bottom:32px;
}

/* ============ SHARED FORM CONTROLS ============ */
.pill-field{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:12px;
  max-width:640px;
}
.pill-field input[type="email"]{
  flex:1 1 240px; min-width:0;
  background:transparent;
  border:none; border-bottom:1px solid var(--input-underline);
  padding:14px 2px;
  font-family: var(--font); font-size:17px; font-weight:400; color: var(--salt-linen);
  outline:none;
  transition: border-color .18s ease;
}
.pill-field input[type="email"]::placeholder{ color: var(--input-placeholder); }
.pill-field input[type="email"]:focus-visible{ outline:none; border-bottom-color: var(--accent); }

.pill-btn{
  flex:0 0 auto;
  border:none; cursor:pointer;
  background: var(--salt-linen); color: var(--ground);
  font-family: var(--font-mono); font-weight:400; font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  padding:15px 30px;
  white-space:nowrap;
  transition: background .18s ease, color .18s ease;
}
.pill-btn:hover{ background: var(--accent); color: var(--salt-linen); }
.pill-btn:disabled{ opacity:0.6; cursor:not-allowed; }

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

.form-note{
  margin-top:14px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.10em; color: var(--muted-on-blue);
}
.form-msg{
  display:none; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:300; font-size:19px; color: var(--salt-linen);
}
.form-msg.show{
  display:flex;
  border-top:1px solid var(--input-underline);
  padding-top:18px;
  margin-top:14px;
}
.form-msg.is-error{ color: var(--salt-linen); }

/* ---- text / select fields (multi-field forms) ---- */
.field-group{ margin-bottom:22px; }
.field-label{
  display:block; font-family: var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0.20em; text-transform:uppercase;
  color: var(--muted-on-blue); margin-bottom:10px;
}
.field-hint{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.10em; color: var(--muted-on-blue); margin-top:8px; }
.field{
  width:100%;
  background:transparent;
  border:none; border-bottom:1px solid var(--input-underline);
  border-radius:0;
  padding:14px 2px;
  font-family: var(--font); font-size:17px; font-weight:400; color: var(--salt-linen);
  transition: border-color .18s ease;
}
.field::placeholder{ color: var(--input-placeholder); }
.field:focus{ outline:none; border-color: var(--accent); }
textarea.field{ resize:vertical; min-height:96px; line-height:1.5; }
select.field{ cursor:pointer; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BFCEDE' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
  padding-right:20px;
}

/* ---- chip-style choices (real radio/checkbox groups — interactive) ---- */
.chip-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px;
  border:1px solid rgba(230,226,218,0.35);
  background:transparent;
  font-family: var(--font); font-size:15px; font-weight:400; color: var(--salt-linen);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover span{ border-color: var(--accent); }
.chip input:checked + span{
  border-color: var(--accent);
  background: var(--accent);
  color: var(--salt-linen);
}
.chip input:focus-visible + span{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 520px){
  .pill-btn{ width:100%; }
}

/* ============ FOOTER ============ */
footer{
  position:relative; z-index:2;
  padding: 28px clamp(20px,5vw,72px) 40px;
  border-top:1px solid var(--rule-on-blue);
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px;
  font-family: var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0.14em; color: var(--muted-on-blue);
}
footer a{
  font-family: var(--font); font-size:15px; font-weight:400; letter-spacing:normal; text-transform:none;
  color: var(--salt-linen);
  border-bottom:1px solid var(--input-underline);
  padding-bottom:3px;
  transition: color .15s ease, border-color .15s ease;
}
footer a:hover{ color: var(--accent); border-color: var(--accent); }