/* Lawson Bridge — mobile-first, self-hosted Inter, no external requests */
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --navy: #000f2e;
  --navy-2: #071833;
  --navy-3: #0b2248;
  --ink: #f4f6f8;
  --muted: #b7c4d6;
  --cyan: #0ea0ef;
  --cyan-2: #5ec8f7;
  --cyan-dim: rgba(14, 160, 239, 0.16);
  --line: #1a3a66;
  --card: #071a3a;
  --btn-text: #001224;
  --warn: #ffe56d;
  --warn-ink: #2a2400;
  --warn-border: #c9a400;
  --header-h: 64px;
  --radius: 14px;
  --shadow: 0 10px 32px rgba(0, 8, 24, 0.35);
  --max: 1120px;
  --sticky-pad: calc(92px + env(safe-area-inset-bottom, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font: 17px/1.6 Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--ink);
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
}
body.has-call { padding-bottom: var(--sticky-pad); }
@media (min-width: 720px) { body.has-call { padding-bottom: 0; } }

img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--cyan-2); }
a:hover { color: #9ad9fb; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--cyan); color: var(--btn-text); padding: 8px 14px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 56px 0; }
.section--alt { background: var(--navy-2); }
.section h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; font-weight: 700;
}
.lede { color: var(--muted); margin: 0 0 28px; max-width: 62ch; }

/* Preview / sample-pricing banners — intentionally visible */
.preview-bar {
  background: var(--warn); color: var(--warn-ink);
  font-weight: 800; text-align: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px));
  font-size: 0.92rem; border-bottom: 3px solid #111;
}
.sample-note {
  display: inline-block;
  background: var(--warn); color: var(--warn-ink);
  border: 1px dashed var(--warn-border);
  border-radius: 999px; padding: 4px 12px;
  font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.02em; margin: 0 0 16px;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(0, 15, 46, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; min-width: 0;
}
.brand-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 8px; display: block; background: #000c28;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.28em;
  text-decoration: none; font-weight: 700;
  letter-spacing: 0.04em; font-size: 1.05rem; line-height: 1;
  text-transform: uppercase;
}
.wordmark .lawson { color: #fff; }
.wordmark .bridge { color: var(--cyan); }
/* Full lockup (bridge + LAWSON BRIDGE + tagline). Tagline is under 9px at
   header height, but cropping it clips the bridge supports, so the full
   image stays in the header and the same lockup is shown larger in the footer. */
.wordmark-image {
  display: block;
  height: auto;
  width: auto;
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 359px) {
  .wordmark-image { max-height: 36px; }
}
@media (min-width: 720px) {
  .wordmark-image { max-height: 48px; }
}

@media (max-width: 419px) {
  .brand-mark { width: 32px; height: 32px; }
}
.nav-toggle {
  appearance: none; background: transparent;
  border: 1px solid var(--line); color: inherit;
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.nav-toggle:hover { background: var(--cyan-dim); }
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.site-nav { display: none; }
.site-nav.open { display: block; }
.site-nav ul {
  list-style: none; margin: 0; padding: 8px 0 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.site-nav a {
  color: inherit; text-decoration: none; display: block;
  padding: 10px 4px; font-weight: 600; font-size: 0.95rem;
}
.site-nav a:hover { color: var(--cyan-2); }
.site-nav .nav-call {
  margin-top: 8px; text-align: center;
  background: var(--cyan); color: var(--btn-text) !important;
  border-radius: 999px; padding: 10px 18px;
}
@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; margin-left: auto; }
  .site-nav ul { flex-direction: row; align-items: center; padding: 0; gap: 4px 18px; }
  .site-nav a { padding: 8px 0; }
  .site-nav .nav-call { margin-top: 0; padding: 8px 16px; }
}

/* Hero */
.hero {
  background: var(--navy);
  padding: 24px 0 48px;
  position: relative;
  overflow: hidden;
}
/* Keep the first-screen CTA in view, with room above the sticky call button. */
@media (max-width: 719px) {
  .hero { padding: 16px 0 calc(28px + var(--sticky-pad)); }
  .hero-art { max-width: min(100%, 360px); margin-bottom: 16px; }
  .hero-art img { max-height: 32vh; width: auto; margin-inline: auto; }
  .hero h1 { font-size: clamp(1.45rem, 7vw, 1.8rem); }
  .hero .tag { margin-bottom: 16px; font-size: 1rem; }
}
body.has-call .sticky-call.is-hidden { display: none; }
.hero-art {
  margin: 0 auto 28px;
  max-width: 900px;
}
.hero-art picture, .hero-art img {
  width: 100%;
  border-radius: 16px;
  background: #000c28;
}
/* Reserve space so the square mobile art / landscape desktop art does not jump. */
.hero-art img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 720px) {
  .hero-art img { aspect-ratio: 16 / 9; }
}
.hero-copy { text-align: center; }
.hero h1 {
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.03em;
  margin: 0 0 10px; font-weight: 700;
}
.hero .tag {
  font-size: 1.12rem; color: var(--muted);
  margin: 0 auto 24px; max-width: 40ch;
}
.hero-actions, .actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font-weight: 700;
  text-decoration: none; font-size: 1rem; line-height: 1.2;
  border: 2px solid transparent; cursor: pointer;
  background: none; font-family: inherit; color: inherit;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--cyan); color: var(--btn-text); border-color: var(--cyan); }
.btn-primary:hover { background: #3bb4f4; border-color: #3bb4f4; color: var(--btn-text); }
.btn-ghost { border-color: rgba(244, 246, 248, 0.55); color: var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

/* Cards / grids */
.grid { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.card p { margin: 0; color: var(--muted); }
.card .ic {
  width: 40px; height: 40px; color: var(--cyan);
  background: var(--cyan-dim); border-radius: 10px; padding: 8px;
  margin-bottom: 12px;
}

/* Prices */
.price-card .amount {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 8px;
}
.price-card .amount.soon { font-size: 1.2rem; color: var(--cyan-2); }
.price-card .flag {
  display: inline-block; background: var(--warn); color: var(--warn-ink);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em;
  border-radius: 999px; padding: 3px 8px; margin-bottom: 10px;
}

/* How it works */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 800px) { .steps { grid-template-columns: 1fr 1fr; } }
.steps li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 22px 72px;
  position: relative;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cyan-dim); color: var(--cyan-2);
  display: grid; place-items: center; font-weight: 800;
}
.steps h3 { margin: 0 0 6px; font-size: 1.08rem; }
.steps p { margin: 0; color: var(--muted); }

/* FAQ */
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px 18px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-weight: 700; padding: 14px 0;
  list-style: none; display: flex; justify-content: space-between;
  gap: 12px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-size: 1.4rem; font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--muted); }

/* Contact */
.contact-grid {
  display: grid; gap: 28px;
}
@media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.dl { margin: 0; }
.dl dt {
  font-weight: 700; margin-top: 16px; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.dl dd { margin: 4px 0 0; }
.dl a { color: var(--cyan-2); font-weight: 600; text-decoration: none; }
.dl a:hover { text-decoration: underline; }

.form {
  display: grid; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.form label { font-weight: 600; font-size: 0.92rem; }
.form label span { color: var(--muted); font-weight: 500; }
.form input, .form textarea {
  width: 100%; margin-top: 4px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--navy); color: var(--ink);
  font: inherit;
}
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--cyan); outline-offset: 1px;
}
.form textarea { min-height: 120px; resize: vertical; }
.form .hint { margin: 0; color: var(--muted); font-size: 0.88rem; }
.form button { justify-self: start; }

/* Footer */
.site-footer {
  background: #00081c; color: var(--muted);
  padding: 40px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  font-size: 0.92rem; border-top: 1px solid var(--line);
}
.site-footer .wordmark { margin-bottom: 10px; }
.footer-wordmark {
  display: block;
  height: auto;
  width: min(100%, 38.5rem); /* 616px → ~110px tall, tagline ~9px; shrinks on small screens */
  margin-bottom: 22px;
}
.site-footer a { color: var(--cyan-2); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.legal { margin: 24px 0 0; font-size: 0.82rem; color: #8ea0b8; }

/* Sticky mobile call — padded so it never covers content */
.sticky-call {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
}
body.has-call .sticky-call { display: inline-flex; }
/* Never show the floating Call button on the free-call request page. */
body.free-call-page .sticky-call { display: none !important; }
body.free-call-page { padding-bottom: 0; }

@media (min-width: 720px) { body.has-call .sticky-call { display: none; } }

/* 404 */
.page-simple { padding: 72px 0 96px; text-align: center; }
.page-simple h1 { margin: 0 0 12px; }

.usage-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 62ch;
}

.cta-label { display: inline; }
.hours-line[hidden], .hours-label[hidden], [data-sample-flag][hidden], [data-sample-banner][hidden],
.form[hidden], [data-free-call-success][hidden], [data-free-call-ended][hidden],
[data-free-call-active][hidden], [data-free-call-error][hidden], .form [hidden],
[data-coming-soon][hidden] {
  display: none !important;
}
html.coming-soon-off [data-coming-soon] {
  display: none !important;
}

/* Coming soon booking-stack section — plain cards, no prices or fees */
.coming-soon-section .coming-soon-card .ic {
  width: 40px; height: 40px; color: var(--cyan);
  background: var(--cyan-dim); border-radius: 10px; padding: 8px;
  margin-bottom: 12px;
}
.dl .hours-line { margin: 0; }

/* Holiday offer banner — hidden after promo_end_date (America/New_York) or when disabled */
html.promo-off .promo-banner,
.promo-banner[hidden] {
  display: none !important;
}
.promo-banner {
  background: var(--navy-2);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.promo-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.promo-headline {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
}
.promo-body {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 52ch;
}
.promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.promo-actions .btn {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  justify-content: center;
}
@media (min-width: 720px) {
  .promo-banner { padding: 18px 0; }
  .promo-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }
  .promo-headline { font-size: 1.25rem; }
  .promo-actions { flex: none; }
  .promo-actions .btn { flex: 0 0 auto; min-width: 0; }
}


/* Free-call request form */
.page-free-call { padding-bottom: 48px; }
.page-free-call .free-call-intro,
.page-free-call > .wrap > [data-free-call-active],
.page-free-call .lede { max-width: 46rem; margin-left: auto; margin-right: auto; }
.free-call-form, .page-free-call .form-success, .page-free-call .form-ended, .page-free-call .contact-mini {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.free-call-form { max-width: 40rem; margin-top: 8px; width: 100%; }
.free-call-form fieldset {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0;
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}
.free-call-form legend {
  font-weight: 700;
  padding: 0 6px;
}
.choice-list {
  display: grid;
  gap: 8px;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--navy);
  border: 1px solid var(--line);
  min-height: 44px;
}
.choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 4px 0 0;
  flex: none;
  accent-color: var(--cyan);
}
.form select {
  width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--navy);
  color: var(--ink);
  font: inherit;
  min-height: 48px;
}
.form select:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
.form .field-error {
  color: #ffb4b4;
  font-weight: 600;
  font-size: 0.88rem;
  margin: 4px 0 0;
}
.form .form-error {
  color: #ffb4b4;
  font-weight: 600;
  margin: 0;
}
.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-success {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 40rem;
}
.form-success p { margin: 0; font-size: 1.1rem; }
.form-ended .lede { margin-bottom: 16px; }
.contact-mini a { color: var(--cyan-2); font-weight: 600; }
.form button:disabled { opacity: 0.65; cursor: not-allowed; }