/* SaltyStork landing — site-level extensions to the brand tokens. */

:root {
  /* Periwinkle promoted to primary accent on navy surfaces — per brandbook,
     periwinkle is the only permitted non-blue accent. Amber removed. */
  --ss-periwinkle-soft: #9aa6e0;
  --ss-navy:         #0a2a3d;
  --ss-navy-2:       #0f3a55;
  --ss-navy-line:    rgba(255,255,255,.12);
  --ss-navy-fg2:     rgba(255,255,255,.75);
  --ss-navy-fg3:     rgba(255,255,255,.55);

  --shadow-blue-glow: 0 10px 30px rgba(0, 145, 210, .35);
  --shadow-navy:     0 20px 60px rgba(0, 0, 0, .35);
}

[data-palette="navy"] {
  --section-bg: var(--ss-navy);
  --section-fg1: #ffffff;
  --section-fg2: var(--ss-navy-fg2);
  --section-fg3: var(--ss-navy-fg3);
  --section-card: #103247;
  --section-line: var(--ss-navy-line);
  --section-cta-bg: var(--ss-blue);
  --section-cta-fg: #ffffff;
  --section-cta-hover: #2aa6df;
  --section-cta-shadow: var(--shadow-blue-glow);
  --section-eyebrow: var(--ss-blue-mid);
  --section-accent: var(--ss-blue-mid);
  --section-accent-2: var(--ss-periwinkle);
}
[data-palette="brand"] {
  --section-bg: #ffffff;
  --section-fg1: var(--ss-ink);
  --section-fg2: var(--fg2);
  --section-fg3: var(--fg3);
  --section-card: #ffffff;
  --section-line: var(--border);
  --section-cta-bg: var(--ss-blue);
  --section-cta-fg: #ffffff;
  --section-cta-hover: var(--accent-hover);
  --section-cta-shadow: var(--shadow-blue);
  --section-eyebrow: var(--ss-blue);
  --section-accent: var(--ss-blue);
}
[data-palette="tint"] {
  --section-bg: var(--ss-blue-tint);
  --section-fg1: var(--ss-ink);
  --section-fg2: var(--fg2);
  --section-fg3: var(--fg3);
  --section-card: #ffffff;
  --section-line: var(--border);
  --section-cta-bg: var(--ss-blue);
  --section-cta-fg: #ffffff;
  --section-cta-hover: var(--accent-hover);
  --section-cta-shadow: var(--shadow-blue);
  --section-eyebrow: var(--ss-blue);
  --section-accent: var(--ss-blue);
}

html, body { margin: 0; padding: 0; background: #fff; }
* { box-sizing: border-box; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font-body); }

/* Reusable section frame */
.ss-section {
  background: var(--section-bg);
  color: var(--section-fg1);
  padding: 96px 24px;
}
.ss-wrap { max-width: 1200px; margin: 0 auto; }
.ss-wrap-narrow { max-width: 820px; margin: 0 auto; }
.ss-wrap-mid { max-width: 1040px; margin: 0 auto; }

.ss-eyebrow {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--section-eyebrow);
}
.ss-h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600; color: var(--section-fg1);
  line-height: 1.15; margin: 8px 0 0; letter-spacing: -0.01em;
}
.ss-lede {
  color: var(--section-fg2); font-size: 17px; line-height: 1.5;
  max-width: 560px; margin: 14px auto 0;
}
.ss-section-head { text-align: center; margin-bottom: 48px; }

/* Buttons */
.ss-btn-primary, .ss-btn-ghost, .ss-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; border: none; cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out),
              box-shadow .2s var(--ease-out), transform .15s var(--ease-out);
  text-decoration: none;
}
.ss-btn-primary {
  background: var(--section-cta-bg); color: var(--section-cta-fg);
  box-shadow: var(--section-cta-shadow);
}
.ss-btn-primary:hover { background: var(--section-cta-hover); }
.ss-btn-primary:active { transform: translateY(1px); }
.ss-btn-ghost {
  background: transparent; color: var(--section-fg1);
  border: 1.5px solid var(--section-line);
}
.ss-btn-ghost:hover { background: rgba(255,255,255,.06); }
[data-palette="brand"] .ss-btn-ghost, [data-palette="tint"] .ss-btn-ghost {
  color: var(--ss-blue); border-color: var(--ss-blue);
}
[data-palette="brand"] .ss-btn-ghost:hover, [data-palette="tint"] .ss-btn-ghost:hover {
  background: var(--ss-blue-tint);
}

/* Card */
.ss-card {
  background: var(--section-card);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--section-line);
}
[data-palette="navy"] .ss-card { box-shadow: none; }

/* Grid shortcuts */
.ss-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ss-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ss-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Responsive */
@media (max-width: 900px) {
  .ss-section { padding: 64px 20px; }
  .ss-grid-3, .ss-grid-2, .ss-grid-4 { grid-template-columns: 1fr; }
  .ss-section-head { margin-bottom: 32px; text-align: left; }
  .ss-lede { margin-left: 0; }
}

/* Bottom sticky CTA needs to stay above everything including tweak panel */
.ss-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 42, 61, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(120%);
  transition: transform .3s var(--ease-out);
}
.ss-sticky-cta.show { transform: translateY(0); }
.ss-sticky-cta-inner {
  max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
}
.ss-sticky-cta-copy { flex: 1; min-width: 0; }
.ss-sticky-cta-copy .t1 { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; font-family: var(--font-display); }
.ss-sticky-cta-copy .t2 { color: rgba(255,255,255,.65); font-size: 12px; font-family: var(--font-ui); margin-top: 2px; }
.ss-sticky-cta .ss-btn-primary {
  padding: 12px 20px; font-size: 14px;
  background: var(--ss-blue); color: #fff;
  box-shadow: var(--shadow-blue);
}
@media (max-width: 900px) {
  .ss-sticky-cta { display: block; }
  body { padding-bottom: 80px; }
}

/* Smooth scroll for anchors */
html { scroll-behavior: smooth; }

/* Inputs */
.ss-input, .ss-select {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--ss-ink);
  transition: border-color .15s, box-shadow .15s;
}
.ss-input:focus, .ss-select:focus {
  outline: none; border-color: var(--ss-blue);
  box-shadow: 0 0 0 4px rgba(0,145,210,.12);
}
.ss-input::placeholder { color: var(--ss-muted); }
.ss-label {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg3);
  margin-bottom: 6px; display: block;
}