/* ==========================================================================
   Contact Us — "When We Find Signal"

   Kept in its own file (not an inline <style>) so the WordPress child-theme
   port can wp_enqueue it against the page template. Same convention as
   testimonials.css.

   The design export shipped every rule as an inline style attribute; they are
   lifted into classes here. Nothing else about the design has changed.

   Sections
     1.  Palette + page shell (the sea/sky world)
     2.  The decorative scene (sun, clouds, gull, coastline, motor yacht)
     3.  Paper pads — the shared "ship's paper" surface
     4.  1 · The honest promise
     5.  2 · The message slip (the form)
     6.  The stamp, the SENT flash, the receipt spike
     7.  The ship's-copy confirmation
     8.  3 · The signal panel (hand-set; not a live feed)
     9.  4 · Where to find us (the drawn Solent chart)
     10. 5 · Keeping her afloat (the stores manifest)
     11. 6 · Follow along (non-interactive social — accounts unconfirmed)
     12. Narrow screens
     13. prefers-reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE + PAGE SHELL
   -------------------------------------------------------------------------- */
.sig-page {
  --ink: #173049;          /* the darkest navy — headings, rules */
  --ink-soft: #2c3f4d;     /* body copy on paper */
  --ink-mute: #41586b;
  --ink-faint: #5a7285;
  --ink-ghost: #7c93a3;
  --ink-wash: #8ea6b6;
  --rust: #a8432a;         /* the stamp ink */
  --teal: #0b6e66;         /* the home pin */
  --teal-lit: #2f9e8f;     /* a lit signal bar */
  --gold: #ffe6ad;         /* focus rings */
  --amber: #e0a53a;        /* the meter word */
  --paper-edge: #b6c6d2;
  --paper-line: #bccad5;
  --paper-hair: #c4d0da;
  --cream: #fcf6ec;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #8ec8ee 0, #accfe9 190px, #c3e0f1 360px, #a9cbe6 62%, #7ba9d2 100%);
}

.sig-page *,
.sig-page *::before,
.sig-page *::after { box-sizing: border-box; }

.sig-page a { color: var(--rust); text-decoration: none; }
.sig-page a:hover { color: #14304e; }

.sig-page input,
.sig-page textarea { font-family: 'Nunito Sans', system-ui, sans-serif; }
.sig-page input::placeholder,
.sig-page textarea::placeholder { color: var(--ink-wash); opacity: 1; }

/* the content column */
.sig-stage {
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 26px) clamp(14px, 4vw, 32px) clamp(56px, 7vw, 96px);
}

/* screen-reader-only (the polite announcer) */
.sig-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. THE DECORATIVE SCENE
   -------------------------------------------------------------------------- */
.sig-scene {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 560px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: sigSway 11s ease-in-out infinite;
  transform-origin: 50% 30%;
}
.sig-sun {
  position: absolute; top: -150px; left: -60px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,214,.9), rgba(255,238,190,.28) 46%, transparent 70%);
}
.sig-cloud {
  position: absolute;
  border-radius: 40px;
  animation: sigCloud 34s ease-in-out infinite alternate;
}
.sig-cloud-a { top: 64px; right: 12%; width: 210px; height: 44px; background: rgba(255,255,255,.62); filter: blur(11px); }
.sig-cloud-b { top: 128px; left: 9%; width: 150px; height: 32px; background: rgba(255,255,255,.46); filter: blur(9px); animation-duration: 28s; animation-delay: -12s; }
.sig-gull { position: absolute; top: 52px; left: 44%; opacity: .5; animation: sigGull 40s linear infinite alternate; }
.sig-horizon { position: absolute; left: 0; right: 0; top: 300px; height: 2px; background: rgba(255,255,255,.34); }
.sig-coast { position: absolute; left: -2%; top: 274px; opacity: .42; }
.sig-yacht { position: absolute; left: 8%; top: 286px; animation: sigYacht 58s ease-in-out infinite; }
.sig-yacht svg { opacity: .9; }
.sig-swell {
  position: absolute; left: 0; right: 0; top: 360px; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 18px);
}
.sig-wave { position: absolute; height: 2px; border-radius: 2px; }
.sig-wave-a { left: 16%; top: 420px; width: 120px; background: rgba(255,255,255,.4); }
.sig-wave-b { left: 60%; top: 452px; width: 84px;  background: rgba(255,255,255,.32); }
.sig-wave-c { left: 36%; top: 492px; width: 150px; background: rgba(255,255,255,.3); }

@keyframes sigSway  { 0%,100% { transform: rotate(-.2deg) translateY(1px); } 50% { transform: rotate(.2deg) translateY(-2px); } }
@keyframes sigCloud { 0% { transform: translateX(-24px); } 100% { transform: translateX(52px); } }
@keyframes sigGull  { 0% { transform: translateX(-10px); } 100% { transform: translateX(60px); } }
@keyframes sigYacht { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(30vw) translateY(-2px); } }
@keyframes sigPing  { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sigSweep { 0% { transform: translateX(-120%) skewX(-16deg); opacity: 0; } 22% { opacity: .85; } 100% { transform: translateX(320%) skewX(-16deg); opacity: 0; } }
@keyframes sigSettle {
  0%   { transform: translateY(-40px) rotate(var(--r, 0deg)); opacity: 0; }
  64%  { transform: translateY(6px) rotate(var(--r, 0deg)); opacity: 1; }
  100% { transform: translateY(0) rotate(var(--r, 0deg)); }
}

/* --------------------------------------------------------------------------
   3. PAPER PADS — the shared surface
   -------------------------------------------------------------------------- */
.sig-settle { animation: sigSettle .62s cubic-bezier(.2,.8,.25,1) both; }

.sig-pad {
  position: relative;
  background: linear-gradient(155deg, #e9eef3 0, #dbe4ec 54%, #d1dbe4 100%);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  box-shadow: 0 22px 44px -26px rgba(20,45,70,.5), 0 2px 0 rgba(255,255,255,.55) inset;
  overflow: hidden;
}
/* the feint printed grid every pad carries */
.sig-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(70,100,125,.09) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(70,100,125,.09) 0 1px, transparent 1px 27px);
}
.sig-grid-soft {
  background-image:
    repeating-linear-gradient(0deg,  rgba(70,100,125,.07) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(70,100,125,.07) 0 1px, transparent 1px 27px);
}
.sig-grid-h { background-image: repeating-linear-gradient(0deg, rgba(70,100,125,.06) 0 1px, transparent 1px 28px); }
.sig-grid-v { background-image: repeating-linear-gradient(90deg, rgba(70,100,125,.06) 0 1px, transparent 1px 27px); }
.sig-inner { position: relative; z-index: 1; }

.sig-eyebrow {
  font: 700 10px/1.3 'Oswald', sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rust);
}

/* --------------------------------------------------------------------------
   4. 1 · THE HONEST PROMISE
   -------------------------------------------------------------------------- */
.sig-promise { --r: -.5deg; position: relative; }
.sig-promise .sig-pad { padding: clamp(26px,4vw,40px) clamp(22px,4vw,46px) clamp(28px,4vw,40px); }

.sig-promise-tags {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.sig-promise-tags span:not(.sig-dot) {
  font: 600 10.5px/1.4 'Oswald', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sig-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }

.sig-h1 {
  font: 700 clamp(38px,6.4vw,68px)/.92 'Oswald', sans-serif;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  max-width: 12ch;
}
.sig-underline { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.sig-underline i { display: block; height: 3px; flex: 0 0 54px; background: var(--rust); }
.sig-underline b { display: block; height: 1.5px; flex: 1; background: var(--paper-edge); }

.sig-lede {
  font: 400 clamp(15px,1.7vw,17.5px)/1.6 'Nunito Sans', sans-serif;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.sig-lede strong { color: var(--ink); font-weight: 800; }

/* --------------------------------------------------------------------------
   5. 2 · THE MESSAGE SLIP
   -------------------------------------------------------------------------- */
.sig-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px,2.4vw,26px);
  margin-top: clamp(22px,3vw,34px);
}
.sig-slipcol { flex: 1 1 560px; min-width: 0; --r: -.4deg; }
.sig-slip-stack { position: relative; }

.sig-slip-top {
  position: relative;
  z-index: 2;
  background: linear-gradient(155deg, #eaeff4 0, #dde6ed 54%, #d2dce5 100%);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  box-shadow:
    0 3px 5px -1px rgba(20,45,70,.28),
    22px 30px 54px -30px rgba(20,45,70,.55),
    0 2px 0 rgba(255,255,255,.55) inset;
  transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .45s ease;
  overflow: hidden;
}
.sig-slip-top .sig-grid {
  background-image:
    repeating-linear-gradient(0deg,  rgba(70,100,125,.10) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(70,100,125,.075) 0 1px, transparent 1px 26px);
}
/* the slip slides down onto the spike */
.sig-slip-top.is-filed { transform: translateY(46px) rotate(1deg); opacity: 0; }
.sig-slip-top.is-gone { display: none; }

.sig-ghostno {
  position: absolute; top: 12px; right: 20px;
  font: 700 54px/1 'Oswald', sans-serif;
  letter-spacing: .02em;
  color: rgba(40,70,95,.06);
  z-index: 0;
  user-select: none;
}
.sig-slip-body { position: relative; z-index: 1; padding: clamp(24px,3.6vw,40px) clamp(22px,3.8vw,42px) clamp(24px,3.4vw,36px); }

.sig-masthead {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.sig-masthead-title {
  font: 700 clamp(16px,2.2vw,22px)/1 'Oswald', sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.sig-masthead-sub {
  font: 600 10px/1.4 'Oswald', sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 6px;
}
.sig-masthead-form {
  text-align: right;
  font: 600 10px/1.5 'Oswald', sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.sig-rule-thick { height: 2.5px; background: var(--ink); margin: 14px 0 0; }
.sig-rule-thin  { height: 1px; background: var(--paper-edge); margin: 3px 0 clamp(18px,2.4vw,24px); }

.sig-form { display: flex; flex-direction: column; gap: clamp(15px,2vw,19px); }

.sig-formrow { display: flex; align-items: stretch; gap: 14px; }
fieldset.sig-formrow { border: 0; margin: 0; padding: 0; min-width: 0; }
.sig-rowlabel {
  flex: 0 0 66px;
  font: 600 11px/1.3 'Oswald', sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 7px;
}
.sig-rowlabel-tight { padding-top: 2px; }
.sig-gutter { flex: 0 0 1px; background: var(--paper-edge); }
.sig-rowbody { flex: 1; min-width: 0; }

/* TO — printed, fixed */
.sig-to {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding-top: 4px;
}
.sig-to-brand { font: 700 15px/1.35 'Nunito Sans', sans-serif; color: var(--ink); }
.sig-to-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rust); }
.sig-to-addr { font: 600 14px/1.35 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-soft); }
.sig-to-chip {
  font: 600 9px/1.3 'Oswald', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-wash);
  border: 1px solid var(--paper-hair);
  border-radius: 20px;
  padding: 3px 9px;
}

/* FROM — name + email */
.sig-fromgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}
.sig-label {
  display: block;
  font: 600 9.5px/1.3 'Oswald', sans-serif;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1px;
}
.sig-label-lg {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.sig-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 5px 2px 6px;
  font: 400 16px/1.35 'Nunito Sans', sans-serif;   /* 16px — no iOS zoom on focus */
  color: var(--ink);
}
/* the rule under each field, and the rust ink that runs along it on focus */
.sig-ruleline { position: relative; height: 2px; background: #aebfca; }
.sig-ink {
  position: absolute; left: 0; top: -1px;
  height: 3px; width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.sig-field:focus-within .sig-ink { transform: scaleX(1); }
/* an errored field's rule breaks into a rust dash */
.sig-field.is-bad .sig-ruleline { background: transparent; border-bottom: 2px dashed var(--rust); }

.sig-err {
  display: none;
  font: 700 12px/1.4 'Nunito Sans', sans-serif;
  color: var(--rust);
  margin-top: 5px;
}
.sig-field.is-bad .sig-err { display: block; }

/* RE — the reason picker (sets the subject line) */
.sig-reason-hint {
  font: 600 9.5px/1.3 'Oswald', sans-serif;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}
.sig-reasons { display: flex; flex-wrap: wrap; gap: 9px; }
.sig-reasonopt {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--paper-line);
  background: rgba(255,255,255,.42);
  border-radius: 3px;
  padding: 8px 13px 8px 11px;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.sig-reasonopt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.sig-tick {
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid var(--rust);
  display: flex; align-items: center; justify-content: center;
}
.sig-tick i {
  display: block;
  width: 8px; height: 8px;
  background: var(--rust);
  opacity: 0;
  transition: opacity .15s;
}
.sig-reasonopt span:last-child { font: 700 12.5px/1 'Nunito Sans', sans-serif; color: var(--ink); }
/* checked */
.sig-reasonopt:has(input:checked) {
  border-color: var(--rust);
  background: rgba(168,67,42,.08);
  box-shadow: 0 6px 14px -10px rgba(168,67,42,.7);
}
.sig-reasonopt:has(input:checked) .sig-tick i { opacity: 1; }
/* focus is always visible */
.sig-reasonopt:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

.sig-subject { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.sig-subject-key {
  font: 600 9px/1.3 'Oswald', sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #8194a2;
}
.sig-subject-val { font: 600 13px/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-soft); }

/* MESSAGE */
.sig-msgfield { margin-top: 4px; }
.sig-msgwrap {
  position: relative;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  background: rgba(255,255,255,.4);
  background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(70,100,125,.16) 30px 31px);
  transition: border-color .18s, box-shadow .18s;
}
.sig-msgfield:focus-within .sig-msgwrap {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(168,67,42,.12);
}
.sig-msgfield.is-bad .sig-msgwrap { border-color: var(--rust); }
.sig-textarea {
  width: 100%;
  display: block;
  background: transparent;
  border: 0;
  outline: none;
  padding: 7px 12px;
  font: 400 15px/31px ui-monospace, Menlo, Consolas, monospace;
  color: #17242e;
  resize: vertical;
  min-height: 155px;
}
.sig-msgfield .sig-err { margin-top: 6px; }

/* the honeypot — bots tick it, people never see it */
.sig-botcheck { display: none; }

/* --------------------------------------------------------------------------
   6. THE STAMP, THE FLASH, THE SPIKE
   -------------------------------------------------------------------------- */
.sig-stampwrap {
  display: flex; flex-direction: column; align-items: center;
  margin-top: clamp(6px,1.2vw,12px);
}
.sig-stamp-cue { font: 600 17px/1.2 'Caveat', cursive; color: var(--ink-faint); margin-bottom: 2px; }
.sig-stamp {
  position: relative;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: transform .12s cubic-bezier(.3,.7,.4,1);
}
.sig-stamp:hover { transform: translateY(-4px); }
.sig-stamp:active { transform: translateY(4px) scale(.97); }
.sig-stamp:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.sig-stamp[disabled] { cursor: progress; opacity: .72; }
.sig-stamp-knob {
  display: block;
  width: 74px; height: 26px; margin: 0 auto;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, #6f4a2e, #5a3a22);
  box-shadow: 0 3px 0 #47301c;
}
.sig-stamp-grip {
  display: block;
  width: 104px; height: 16px; margin: 0 auto;
  background: linear-gradient(180deg, #8a5a34, #6f4a2e);
  border-radius: 4px;
}
.sig-stamp-face {
  display: block;
  margin: 5px auto 0;
  background: #faf3e2;
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 11px 26px 10px;
  box-shadow: 0 12px 22px -12px rgba(15,35,70,.6);
}
.sig-stamp-word {
  display: block;
  font: 700 20px/.95 'Oswald', sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rust);
}
.sig-stamp-sub {
  display: block;
  font: 700 8px/1 'Oswald', sans-serif;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); margin-top: 5px;
}
.sig-stamp-note {
  font: 400 12px/1.5 'Nunito Sans', sans-serif;
  color: var(--ink-faint);
  margin-top: 14px;
  text-align: center;
  max-width: 360px;
}

/* the whole-form failure notice — never fail silently */
.sig-formerr {
  display: none;
  border: 1.5px dashed var(--rust);
  border-radius: 3px;
  background: rgba(168,67,42,.06);
  padding: 13px 15px;
  margin-top: 4px;
}
.sig-formerr.is-on { display: block; }
.sig-formerr p {
  font: 700 13px/1.5 'Nunito Sans', sans-serif;
  color: var(--rust);
  margin: 0;
}
.sig-formerr .sig-fallback {
  display: block;
  font: 400 13px/1.6 'Nunito Sans', sans-serif;
  color: var(--ink-soft);
  margin-top: 6px;
}
.sig-formerr .sig-fallback a {
  font-weight: 700;
  border-bottom: 2px solid rgba(168,67,42,.4);
  padding-bottom: 1px;
}

/* the rust SENT impression, struck once */
.sig-flash {
  position: absolute;
  left: 50%;
  bottom: clamp(92px,14vw,124px);
  transform: translateX(-50%) rotate(-8deg) scale(1.25);
  color: var(--rust);
  opacity: 0;
  transition: opacity .12s ease, transform .2s cubic-bezier(.3,1.5,.5,1);
  z-index: 3;
  pointer-events: none;
}
.sig-flash.is-on { opacity: 1; transform: translateX(-50%) rotate(-8deg) scale(1); }

.sig-mark { border: 3px solid var(--rust); border-radius: 7px; padding: 8px 18px 6px; text-align: center; }
.sig-mark-ship { font: 700 8px/1 'Oswald', sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.sig-mark-bar  { height: 2px; background: var(--rust); width: 70%; margin: 4px auto; }
.sig-mark-word { font: 700 28px/.95 'Oswald', sans-serif; letter-spacing: .06em; text-transform: uppercase; }

/* the receipt spike */
.sig-spike { position: relative; z-index: 0; margin: 18px auto 0; width: min(340px, 90%); height: 96px; }
.sig-filed {
  position: absolute;
  left: 50%; bottom: 40px;
  transform: translateX(-50%) rotate(-2deg) scale(.6);
  transform-origin: 50% 100%;
  width: min(300px, 86%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .4s cubic-bezier(.3,1.3,.5,1);
  z-index: 1;
}
.sig-filed.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) rotate(-2deg) scale(1); }
.sig-filed-card {
  position: relative;
  background: linear-gradient(155deg, #eaeff4, #dbe4ec);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  box-shadow: 0 12px 22px -12px rgba(20,45,70,.6);
  padding: 10px 12px 12px;
}
/* the hole the spike punches through the stub */
.sig-filed-hole {
  position: absolute; left: 50%; top: -7px;
  transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c3f4d, #0e1c26);
  box-shadow: 0 0 0 2px rgba(20,45,70,.25);
}
.sig-filed-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sig-filed-subject {
  font: 600 11px/1.3 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sig-filed-chip {
  flex: none;
  font: 700 8px/1 'Oswald', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust);
  border: 1.5px solid var(--rust);
  border-radius: 3px;
  padding: 2px 6px;
}
.sig-filed-rule { height: 1px; background: var(--paper-hair); margin: 8px 0; }
.sig-filed-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sig-filed-name { font: 700 15px/1 'Caveat', cursive; color: var(--ink); }
.sig-filed-date {
  font: 600 9px/1 'Oswald', sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-ghost);
}
.sig-spike-pin {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: 5px; height: 64px;
  background: linear-gradient(90deg, #8b929a, #e6ebef 45%, #aeb6bd 60%, #7c848c);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  z-index: 2;
}
.sig-spike-tip {
  position: absolute; left: 50%; bottom: 74px;
  transform: translate(-50%, 50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f2f5f7, #9aa2aa);
  z-index: 2;
}
.sig-spike-base {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 150px; height: 30px;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, #8a5a34, #6f4a2e);
  box-shadow: 0 12px 20px -10px rgba(20,45,70,.55), 0 2px 0 rgba(255,255,255,.18) inset;
  z-index: 1;
}
.sig-spike-boss {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  width: 44px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #5a3a22, #6f4a2e 70%);
  z-index: 1;
}
.sig-spike-label {
  position: absolute; left: 0; right: 0; bottom: 5px;
  text-align: center;
  font: 600 9px/1 'Oswald', sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
  color: #caa27e;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   7. THE SHIP'S-COPY CONFIRMATION
   -------------------------------------------------------------------------- */
.sig-slip-copy {
  display: none;
  position: relative;
  background: linear-gradient(155deg, #eef2f6, #e2e9f0 60%, #dbe3ec);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  box-shadow: 0 22px 44px -26px rgba(20,45,70,.5), 0 2px 0 rgba(255,255,255,.55) inset;
  overflow: hidden;
}
.sig-slip-copy.is-on { display: block; }
.sig-copy-body {
  position: relative;
  padding: clamp(26px,4vw,46px);
  opacity: 0;
  transition: opacity .4s ease .3s;
}
.sig-slip-copy.is-on .sig-copy-body { opacity: 1; }
.sig-copy-kicker {
  font: 600 10.5px/1.3 'Oswald', sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.sig-copy-rule { height: 2px; background: var(--paper-edge); margin: 12px 0 0; width: 130px; }
.sig-copy-stampwrap { display: flex; justify-content: flex-end; margin: -6px 0 0; }
.sig-copy-stamp { transform: rotate(-7deg); color: var(--rust); }
.sig-copy-stamp .sig-mark { padding: 7px 15px 5px; }
.sig-copy-stamp .sig-mark-ship { font-size: 7.5px; }
.sig-copy-stamp .sig-mark-word { font-size: 24px; }
.sig-copy-date {
  font: 700 8px/1 'Oswald', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 4px;
}
.sig-copy-heading {
  font: 700 clamp(26px,3.3vw,36px)/1.05 'Caveat', cursive;
  color: var(--ink);
  margin: -10px 0 0;
  outline: none;
}
.sig-copy-p {
  font: 400 15px/1.65 'Nunito Sans', sans-serif;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 46ch;
}
.sig-copy-p strong { font-weight: 700; color: var(--ink); }
.sig-copy-aside {
  font: 400 14px/1.6 'Nunito Sans', sans-serif;
  color: var(--ink-faint);
  margin: 12px 0 0;
  max-width: 46ch;
}
.sig-copy-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.sig-btn {
  font: 800 12px/1 'Nunito Sans', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
  background: var(--rust);
  border: 0;
  padding: 13px 22px;
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(120,60,48,.4);
  cursor: pointer;
}
.sig-btn:hover { color: #fff; background: #93381f; }
.sig-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sig-copy-mail {
  font: 700 13px/1.3 'Nunito Sans', sans-serif;
  color: var(--rust);
  border-bottom: 2px solid rgba(168,67,42,.4);
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   8. 3 · THE SIGNAL PANEL
   Hand-set values. There is no tracker on the boat — see contact.js.
   -------------------------------------------------------------------------- */
.sig-sigcol { flex: 1 1 320px; min-width: 0; max-width: 380px; --r: .6deg; }

.sig-instrument {
  position: relative;
  background: linear-gradient(160deg, #263947 0, #1d2c38 60%, #182530 100%);
  border: 1px solid #0e1a22;
  border-radius: 8px;
  box-shadow: 0 24px 44px -26px rgba(10,25,45,.75), 0 1px 0 rgba(255,255,255,.08) inset;
  padding: 16px 16px 17px;
  overflow: hidden;
}
.sig-screw {
  position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #6d7883, #2b353d);
}
.sig-screw-tl { top: 8px; left: 9px; }
.sig-screw-tr { top: 8px; right: 9px; }
.sig-screw-bl { bottom: 8px; left: 9px; }
.sig-screw-br { bottom: 8px; right: 9px; }

.sig-plate {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 6px 11px;
}
.sig-plate-title {
  font: 700 9px/1.3 'Oswald', sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: #7fa7bd;
}
.sig-plate-feed {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 9px/1.3 'Oswald', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-wash);
}
.sig-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 7px var(--amber);
}

.sig-set {
  position: relative;
  background: radial-gradient(120% 120% at 30% 12%, #123041, #0c2130 70%, #0a1a26);
  border: 1px solid #0a1620;
  border-radius: 5px;
  padding: 16px 16px 14px;
  overflow: hidden;
}
.sig-sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(120,220,235,.28), transparent);
  opacity: 0;
  pointer-events: none;
}
.sig-sweep.is-sweeping { animation: sigSweep 1.5s ease-out; }
/* sized here, not with SVG width/height attributes — "auto" is not a valid
   SVG attribute length and Chrome logs a console error for it. */
.sig-set svg { display: block; position: relative; width: 100%; height: auto; }

.sig-bar { fill: #c2ced8; opacity: .2; }
.sig-bar.is-animating { transition: opacity .32s ease, fill .32s ease; }
.sig-bar.is-lit { fill: var(--teal-lit); opacity: 1; }
.sig-bar.is-dark { fill: #c2ced8; opacity: .45; }

.sig-readout {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 8px;
}
.sig-readout-key {
  font: 700 10px/1.2 'Oswald', sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #7fa7bd;
}
.sig-readout-val {
  font: 700 15px/1 'Oswald', sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
}

.sig-where { margin-top: 13px; padding: 0 4px; }
.sig-where-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.sig-where-row svg { flex: none; margin-top: 1px; }
.sig-where-key {
  font: 700 8.5px/1.3 'Oswald', sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #6f93a7;
}
.sig-where-val { font: 700 14px/1.35 'Nunito Sans', sans-serif; color: #eaf3fc; }
.sig-where-reply { font: 400 13px/1.55 'Nunito Sans', sans-serif; color: #c3d5e0; margin: 0; }
.sig-where-hand { font: 400 14px/1.4 'Caveat', cursive; color: #7fa7bd; margin-top: 8px; }

/* --------------------------------------------------------------------------
   9. 4 · WHERE TO FIND US — the drawn Solent chart
   -------------------------------------------------------------------------- */
.sig-find { --r: .35deg; position: relative; margin-top: clamp(24px,3.4vw,40px); }
.sig-find .sig-pad { padding: clamp(24px,3.4vw,38px); }
.sig-findrow { display: flex; gap: clamp(20px,3vw,36px); align-items: stretch; flex-wrap: wrap; }
.sig-findcol { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }
.sig-h2 {
  font: 700 clamp(26px,3.4vw,38px)/1 'Oswald', sans-serif;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}
.sig-find p {
  font: 400 14px/1.6 'Nunito Sans', sans-serif;
  color: var(--ink-mute);
  margin: 10px 0 20px;
  max-width: 42ch;
}
.sig-find .sig-eyebrow { margin-bottom: 8px; }
.sig-contacts { display: flex; flex-direction: column; gap: 14px; }
.sig-contact {
  display: flex; align-items: center; gap: 13px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: 13px 15px;
}
.sig-contact:hover { border-color: var(--rust); }
.sig-contact:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sig-contact-plain { border: 0; background: none; padding: 6px 2px 0; }
.sig-contact-icon {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.sig-contact-icon-teal { background: var(--teal); }
.sig-contact-key {
  display: block;
  font: 600 9.5px/1.3 'Oswald', sans-serif;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-ghost);
}
.sig-contact-val {
  display: block;
  font: 700 16px/1.3 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink);
  word-break: break-all;
}
.sig-contact-val-plain { font-family: 'Nunito Sans', sans-serif; word-break: normal; }

.sig-chartcol { flex: 1 1 360px; min-width: 0; }
.sig-chart {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 12;
  background: #d9e9e6;
  background-image: radial-gradient(rgba(11,110,102,.06) 1px, transparent 1px);
  background-size: 15px 15px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 6px 7px 0 rgba(23,48,73,.16);
  overflow: hidden;
}
.sig-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sig-chart-ping { transform-origin: center; animation: sigPing 3.2s ease-out infinite; }
.sig-chart-callout {
  position: absolute;
  left: 46%; top: 47%;
  transform: translate(-52%, -142%) rotate(-2deg);
  transform-origin: bottom left;
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(23,48,73,.28);
  padding: 6px 10px;
}
.sig-chart-callout b {
  display: block;
  font: 700 11px/1 'Oswald', sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.sig-chart-callout i {
  display: block;
  font: 600 9px/1.2 'Oswald', sans-serif;
  font-style: normal;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal);
  margin-top: 2px;
}
/* the standing disclaimer — this chart is a home port, never a live position */
.sig-chart-note {
  position: absolute;
  left: 10px; bottom: 8px;
  background: rgba(252,246,236,.9);
  border: 1px solid #cdba93;
  padding: 3px 8px;
  font: 600 9px/1.3 'Oswald', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #8a7358;
}

/* --------------------------------------------------------------------------
   10. 5 · KEEPING HER AFLOAT — the stores manifest
   -------------------------------------------------------------------------- */
.sig-afloat { --r: -.3deg; position: relative; margin-top: clamp(24px,3.4vw,40px); }
.sig-afloat-pad {
  position: relative;
  background: linear-gradient(155deg, #eef2f6 0, #e3ebf1 55%, #dae4ec 100%);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  box-shadow: 0 24px 46px -26px rgba(20,45,70,.5), 0 2px 0 rgba(255,255,255,.55) inset;
  padding: clamp(26px,3.6vw,44px);
  overflow: hidden;
}
.sig-brasspin {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f0d488, #b8902f 62%, #8a6a29);
  box-shadow: 0 3px 6px rgba(20,45,70,.4), 0 0 0 2px rgba(255,255,255,.25) inset;
  z-index: 2;
}
.sig-afloat-head { position: relative; z-index: 1; text-align: center; max-width: 64ch; margin: 0 auto 6px; }
.sig-afloat-head .sig-eyebrow { margin-bottom: 9px; }
.sig-afloat-head h2 {
  font: 700 clamp(28px,4vw,44px)/1 'Oswald', sans-serif;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.sig-afloat-head p {
  font: 400 15px/1.65 'Nunito Sans', sans-serif;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.sig-manifest {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: clamp(20px,2.6vw,28px) auto 0;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: clamp(16px,2.2vw,22px) clamp(18px,2.6vw,26px);
}
.sig-manifest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.sig-manifest-head span {
  font: 700 10px/1.3 'Oswald', sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.sig-manifest-head span + span { color: var(--ink-ghost); }
.sig-manifest-line {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--paper-hair);
}
.sig-manifest-line:last-of-type { border-bottom: 0; }
.sig-manifest-line svg { flex: none; }
.sig-manifest-what { flex: 1; font: 700 16px/1.3 'Nunito Sans', sans-serif; color: var(--ink); }
.sig-manifest-why  { font: 600 17px/1.3 'Caveat', cursive; color: var(--ink-faint); }

.sig-fee {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 16px;
  border: 1.5px dashed rgba(168,67,42,.5);
  border-radius: 3px;
  padding: 12px 15px;
  background: rgba(168,67,42,.045);
}
.sig-fee-mark { font: 700 22px/1 'Oswald', sans-serif; color: var(--rust); flex: none; }
.sig-fee p {
  font: 400 13.5px/1.6 'Nunito Sans', sans-serif;
  color: var(--ink-soft);
  margin: 0;
}
.sig-fee strong { color: var(--ink); font-weight: 800; }

/* the equipment ask — a general ask by default; see EQUIPMENT in contact.js */
.sig-kit { position: relative; z-index: 1; max-width: 720px; margin: clamp(18px,2.4vw,24px) auto 0; }
.sig-kit-card {
  position: relative;
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(23,48,73,.2);
  padding: clamp(18px,2.4vw,24px) clamp(18px,2.6vw,26px);
  transform: rotate(-.5deg);
}
.sig-kit-tape {
  position: absolute; top: -11px; left: 24px;
  width: 78px; height: 22px;
  background: rgba(228,185,59,.6);
  transform: rotate(-3deg);
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
}
.sig-kit-title { font: 700 24px/1.15 'Caveat', cursive; color: var(--rust); margin-bottom: 6px; }
.sig-kit-card p {
  font: 400 14px/1.65 'Nunito Sans', sans-serif;
  color: #3a2e22;
  margin: 0 0 4px;
  max-width: 56ch;
}
.sig-kit-list { display: none; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.sig-kit-list.is-on { display: flex; }
.sig-kit-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fffdf7;
  border: 1px solid rgba(90,66,30,.28);
  border-radius: 3px;
  box-shadow: 0 6px 12px -8px rgba(20,10,0,.5);
  padding: 8px 12px;
  font: 700 18px/1 'Caveat', cursive;
  color: #3a2e22;
}
.sig-kit-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); flex: none; }
.sig-kit-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.sig-kit-actions .sig-btn { padding: 12px 20px; }
.sig-kit-note {
  font: 400 13px/1.5 'Nunito Sans', sans-serif;
  color: #6b5942;
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   11. 6 · FOLLOW ALONG
   The accounts are unconfirmed, so these are NOT links. They are inert spans,
   announced as disabled. Do not give them an href — invent no URLs.
   -------------------------------------------------------------------------- */
.sig-follow { --r: .3deg; position: relative; margin-top: clamp(24px,3.4vw,40px); }
.sig-follow .sig-pad { padding: clamp(22px,3vw,32px) clamp(22px,3.4vw,38px); box-shadow: 0 20px 40px -26px rgba(20,45,70,.5), 0 2px 0 rgba(255,255,255,.55) inset; }
.sig-followrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.sig-follow .sig-eyebrow { margin-bottom: 7px; }
.sig-follow-line {
  font: 700 clamp(24px,3vw,34px)/1.05 'Caveat', cursive;
  color: var(--ink);
}
.sig-follow-note {
  font: 400 12.5px/1.5 'Nunito Sans', sans-serif;
  color: var(--ink-faint);
  margin-top: 6px;
}
.sig-social { display: flex; gap: 11px; flex-wrap: wrap; }
.sig-social-link {
  position: relative;
  width: 48px; height: 48px;
  border: 1.5px solid var(--paper-line);
  border-radius: 3px;
  background: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.sig-social-link:hover { background: #fff; border-color: var(--gold); }
.sig-social-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   12. NARROW SCREENS
   The export drove this from JS (a ResizeObserver). It is a media query.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .sig-row { flex-direction: column; }
  .sig-sigcol { max-width: none; width: 100%; }
  .sig-slipcol { width: 100%; }

  /* the paper straightens up — no tilt to overflow the viewport */
  .sig-settle { --r: 0deg !important; }
  .sig-kit-card { transform: none; }

  /* form rows stack: the printed label sits above its field */
  .sig-formrow { flex-direction: column; gap: 5px; }
  .sig-rowlabel { flex-basis: auto; padding-top: 0; }
  .sig-gutter { display: none; }

  .sig-followrow { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION — nothing moves; everything still works.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sig-page *,
  .sig-page *::before,
  .sig-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .sig-scene { animation: none !important; }
}