/* ==========================================================================
   [BRAND NAME] — stylesheet
   Mobile-first. One accent colour. No frameworks, no web fonts, no images.

   To change the accent colour, edit --accent and --accent-dark below
   (and the theme-color meta tag in index.html).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* The one accent colour */
  --accent:        #1D4ED8;
  --accent-dark:   #1739A8;
  --accent-soft:   #EEF2FF;
  --accent-ring:   rgba(29, 78, 216, 0.32);

  /* Neutrals */
  --ink:           #101828;   /* headings, body text */
  --ink-2:         #4B5565;   /* secondary text */
  --ink-3:         #7A8698;   /* fine print */
  --line:          #E3E7ED;
  --bg:            #FFFFFF;
  --bg-alt:        #F7F9FC;
  --footer-bg:     #0B1220;

  /* Shape & depth */
  --radius:        14px;
  --radius-lg:     18px;
  --shadow-sm:     0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md:     0 4px 16px rgba(16, 24, 40, 0.07);

  /* Layout */
  --maxw:          1140px;
  --gutter:        20px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* clears the sticky header when jumping to #anchors */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.021em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 96px); }
.section-tint { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-head {
  max-width: 680px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.section-head h2 { font-size: clamp(1.625rem, 4.4vw, 2.375rem); }
.section-sub {
  color: var(--ink-2);
  font-size: clamp(1rem, 2vw, 1.125rem);
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }

.btn-contact { background: #fff; color: var(--accent); }
.btn-contact:hover { background: var(--accent-soft); color: var(--accent-dark); }

.btn-lg { min-height: 56px; padding: 15px 26px; font-size: 1.0625rem; }
.btn-sm { min-height: 42px; padding: 9px 16px; font-size: 0.9375rem; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

.ico-mail { flex: none; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
}

.site-nav { display: none; gap: 26px; }
.site-nav a {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }

.header-cta { display: none; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(44px, 9vw, 88px) clamp(36px, 6vw, 64px);
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% -20%, var(--accent-soft) 0%, rgba(255,255,255,0) 62%);
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 880px;
  margin-inline: auto;
  font-size: clamp(2.0625rem, 6.1vw, 3.375rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.lede {
  max-width: 600px;
  margin: 16px auto 0;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 2.3vw, 1.25rem);
}
.hero-actions {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}
.hero-note {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   6. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
  padding-block: 20px;
}
.trust-grid { display: grid; gap: 10px; }
.trust-grid p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.tick { color: var(--accent); font-weight: 700; flex: none; }

/* --------------------------------------------------------------------------
   7. Offer cards
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 16px; }

.card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 1.1875rem; }
.card > p {
  color: var(--ink-2);
  font-size: 0.9688rem;
  line-height: 1.55;
}
.card .price {
  margin: 18px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin-top: auto; /* keeps every button on the same baseline */
}
.card .price strong {
  display: inline-block;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.price-plus { white-space: nowrap; }

/* With the price removed, .price no longer exists to push the button to the
   bottom via margin-top:auto. Put that same push on the button itself, so
   all four "Choose this" buttons still sit on one baseline regardless of how
   long each card's description runs. Cards in the same grid row are already
   equal height (CSS grid default), so this is enough on its own. */
.card > .btn:last-child { margin-top: auto; }

.card-alt { background: var(--bg-alt); box-shadow: none; }

/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.step-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
}
.step h3 { font-size: 1.125rem; }
.step p { color: var(--ink-2); font-size: 0.9688rem; margin: 0; }

/* --------------------------------------------------------------------------
   9. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: flex; flex-direction: column; gap: 20px; }

.panel {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* WhatsApp panel sits first on a phone, second on a wide screen */
.contact-side { order: -1; display: flex; flex-direction: column; gap: 16px; }
.panel-accent {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.panel-accent h3 { color: #fff; font-size: 1.25rem; }
.panel-accent p { color: rgba(255, 255, 255, 0.88); font-size: 0.9688rem; }
.panel-accent .btn { margin-top: 18px; }
.contact-note {
  margin-top: 14px !important;
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming in on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid #CFD5DF;
  border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.field select {
  /* hand-drawn chevron, so there is no image file to host */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Only turn a field red once the visitor has actually got it wrong —
   never on page load. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #D92D20; }
.was-validated .field :invalid { border-color: #D92D20; }

/* What the intake bot came back with */
.bot-reply {
  margin-top: 20px;
  padding: 20px;
  background: var(--accent-soft);
  border: 1px solid rgba(29, 78, 216, 0.18);
  border-radius: var(--radius);
}
.bot-reply[hidden] { display: none; }
.bot-reply-text { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.bot-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: 0.9375rem;
}
.bot-facts dt { color: var(--ink-3); }
.bot-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.bot-caveat { margin: 0 0 16px; font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; }

/* Direct details under the WhatsApp panel */
.info-card { padding: 6px 20px; }
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 13px 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--ink-3); font-size: 0.875rem; }
.info-row a { font-weight: 600; }

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

.form-hint { margin: 12px 0 0; color: var(--ink-3); font-size: 0.875rem; text-align: center; }
.form-status {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}
.form-status:empty { display: none; }
.form-status.is-ok { color: #027A48; }
.form-status.is-err { color: #B42318; }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 40px 28px;
  margin-bottom: 0;
}
.footer-inner { display: grid; gap: 24px; }
.footer-brand {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.footer-line { margin: 0; font-size: 0.9375rem; max-width: 440px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-nav a { color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; }
.footer-nav a:hover { color: #fff; }
.footer-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-legal p { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   11. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
  transition: transform .25s ease;
}
.mobile-cta.is-hidden { transform: translateY(130%); }
body { padding-bottom: 86px; } /* room for the bar, phones only */

/* --------------------------------------------------------------------------
   12. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .hero-actions .btn { width: auto; }
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .trust-grid p { font-size: 0.9062rem; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  body { padding-bottom: 0; }
  .mobile-cta { display: none; }
  .header-cta { display: inline-flex; }
  .panel { padding: 28px; }
  .info-card { padding: 8px 24px; }
  .footer-inner { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .footer-nav { justify-content: flex-end; }
}

@media (min-width: 880px) {
  .site-nav { display: flex; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

@media (min-width: 940px) {
  .contact-grid { flex-direction: row; align-items: flex-start; gap: 28px; }
  .contact-form { flex: 1 1 58%; }
  .contact-side { flex: 1 1 42%; order: 0; position: sticky; top: 88px; }
}

@media (min-width: 1080px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 26px 22px; }
}

/* --------------------------------------------------------------------------
   13. Print & motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .mobile-cta, .hero-actions, .btn { display: none !important; }
  body { padding: 0; font-size: 12pt; }
}


/* 404 page — kept here rather than inline so the CSP can forbid inline styles. */
.hero-404 { padding-block: clamp(64px, 12vw, 120px); }
.footer-legal-flat { margin-top: 0; border-top: 0; }

.opt { font-weight: 400; color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Thinking overlay
   The old status line was 13px grey text under the button — easy to miss on a
   phone, and the wait is several seconds. This blurs the page behind and puts
   the message in the middle of the screen, so it is unmissable and obviously
   deliberate rather than a hang.
   ========================================================================== */
.thinking {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  background: rgba(16, 24, 40, 0.45);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  animation: thinking-in 160ms ease-out;
}
.thinking[hidden] { display: none; }

/* Older browsers with no backdrop-filter get a heavier scrim instead, so the
   text stays readable rather than sitting on a busy page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .thinking { background: rgba(16, 24, 40, 0.82); }
}

/* A soft panel behind the words: the blur alone is not enough contrast when a
   bright blue button happens to sit directly behind the text. */
.thinking-inner {
  max-width: 26rem;
  text-align: center;
  padding: 32px 28px 34px;
  border-radius: 20px;
  background: rgba(16, 24, 40, 0.74);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.thinking-text {
  margin: 20px 0 0;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.thinking-sub {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.thinking-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: thinking-spin 800ms linear infinite;
}

@keyframes thinking-spin { to { transform: rotate(360deg); } }
@keyframes thinking-in  { from { opacity: 0; } to { opacity: 1; } }

/* Someone who asked for less motion still needs to know it is working. */
@media (prefers-reduced-motion: reduce) {
  .thinking { animation: none; }
  .thinking-spinner { animation-duration: 2.4s; }
}

/* Stops the page scrolling behind the overlay. */
body.is-thinking { overflow: hidden; }