/* =============================================================================
   CashNowREI - core design system
   Design & development: Sohrab Khan - msoohrab.com

   Load order:  fonts.css  (generated @font-face block - do not hand-edit)
                style.css  (tokens, reset, shell, components)   <- this file
                pages.css  (page section blocks)

   Brand colours are the client's existing ones: navy #171747, gold #EBB419.
   Everything else in the palette is derived from those two, so the whole site
   can be retinted from the :root block below and nowhere else.
   ============================================================================= */

/* =============================================================================
   1. TOKENS
   ============================================================================= */
:root {
  /* Navy. #171747 is the client's brand navy (--navy-800). */
  --navy-950: #08081E;
  --navy-900: #0E0E2E;
  --navy-850: #12123A;
  --navy-800: #171747;
  --navy-700: #1F1F5C;
  --navy-600: #2B2B78;
  --navy-200: #C8C8DE;
  --navy-100: #E6E6F1;
  --navy-50:  #F4F4FA;

  /* Gold. #EBB419 is the client's brand gold (--gold-500).
     --gold-700 is the darkened variant for gold TEXT on light grounds, where
     #EBB419 itself only reaches about 2:1 and fails WCAG AA. Use --gold-500
     on navy and for fills; --gold-700 for words on white. */
  --gold-700: #8F6A04;
  --gold-600: #C89410;
  --gold-500: #EBB419;
  --gold-400: #F5C845;
  --gold-200: #F9E3A6;
  --gold-100: #FDF4DC;

  /* Accent blue, lifted from the "REI" in the badge logo. Used sparingly. */
  --blue-400: #5B8DEF;

  --ink:       #16162C;
  --ink-soft:  #4F4F6B;
  --ink-faint: #64647D;
  --line:      #E3E3EE;
  --line-soft: #EFEFF6;
  --white:     #FFFFFF;
  --cream:     #F7F7FC;

  --ok:     #17703F;
  --danger: #A32B28;

  --shadow-xs:   0 1px 2px rgba(23,23,71,.06);
  --shadow-sm:   0 2px 10px rgba(23,23,71,.07);
  --shadow-md:   0 12px 32px rgba(23,23,71,.10);
  --shadow-lg:   0 28px 64px rgba(8,8,30,.18);
  --shadow-gold: 0 10px 28px rgba(235,180,25,.34);

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --font-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1200px;
  --gutter: clamp(18px, 4vw, 32px);
  --section-y: clamp(60px, 7.5vw, 104px);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Height of the fixed header. main.js keeps this in sync with the real
     element, so anchor scrolling and the hero offset never drift apart. */
  --header-h: 76px;

  /* Height of the mobile sticky action bar, so page content can clear it. */
  --actionbar-h: 0px;
}

/* =============================================================================
   2. RESET + BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);

  /* The closed mobile nav drawer is a FIXED element parked off the right edge.
     A fixed element is not clipped by an ancestor's overflow, so it widens the
     scrollable area and a phone ends up able to pan sideways into empty space.
     Clipping at the root propagates to the viewport, which does contain it.
     It is set here and NOT on body on purpose: overflow on body would turn body
     into its own scroll container and break the sticky header.

     `hidden` stops the sideways pan everywhere; `clip` (Chrome 90+, Firefox 81+,
     Safari 16+) additionally drops the area from the scrollable overflow, so the
     page reports its true width to anything that measures it. Browsers without
     `clip` simply keep the `hidden` above. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--actionbar-h);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-700); }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 600; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--navy-800);
}
/* text-wrap: balance evens out the last line of a heading so a two-line title
   never leaves one orphaned word under it. Browsers without it just wrap the
   old way, so there is nothing to fall back to. */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 700; line-height: 1.03; }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); font-weight: 700; }
h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* --- Accessibility -------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: -120px; transform: translateX(-50%);
  z-index: 2000; background: var(--gold-500); color: var(--navy-900);
  font-weight: 600; padding: 12px 24px; border-radius: 0 0 10px 10px;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: var(--navy-900); }

/* =============================================================================
   3. LAYOUT PRIMITIVES
   ============================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--cream); }
.section--line { border-top: 1px solid var(--line-soft); }
.section > .container { position: relative; z-index: 1; }

/* Dark sections carry the navy ground plus a faint dot grid and one warm
   radial bloom, so they read as lit rather than as a flat slab of colour. */
.section--dark {
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(235,180,25,.17), transparent 62%),
    radial-gradient(760px 500px at 2% 110%, rgba(91,141,239,.14), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 58%, var(--navy-950) 100%);
  color: #D6D6E8;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--gold-400); }
.section--dark a:hover { color: var(--gold-500); }

.dot-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
          mask-image: linear-gradient(180deg, #000, transparent 78%);
  pointer-events: none;
}

/* --- Section heading block ------------------------------------------------ */
.sec-head { max-width: 760px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--gold-500); }

/* The short gold rule under a section title - the repeated mark that ties
   every section of the site to the badge logo. */
.sec-head h1,
.sec-head h2 { position: relative; padding-bottom: 22px; }
.sec-head h1::after,
.sec-head h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 68px; height: 5px; border-radius: 3px;
  background: var(--gold-500);
}
.sec-head--center h1::after,
.sec-head--center h2::after { left: 50%; transform: translateX(-50%); }

.sec-lede {
  margin-top: 20px;
  text-wrap: pretty;
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  color: var(--ink-soft);
  line-height: 1.78;
}
.section--dark .sec-lede { color: #AEAECB; }

/* "gold" flips to the readable dark gold whenever it sits on a light ground. */
.gold { color: var(--gold-500); }
.section:not(.section--dark) .gold { color: var(--gold-700); }

/* =============================================================================
   4. BUTTONS
   ============================================================================= */
.btn {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  padding: 17px 30px;
  min-height: 54px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-align: center;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

/* A button is a button wherever it lands. Without this, the link colours set
   by .section--dark a and .footer a out-specify .btn and repaint the label -
   which put gold text on a gold button on the 404 page. */
a.btn,
a.btn:hover,
.section--dark a.btn,
.section--dark a.btn:hover,
.footer a.btn,
.footer a.btn:hover { color: var(--btn-fg); }

.btn-gold { box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: var(--gold-400); box-shadow: 0 14px 34px rgba(235,180,25,.44); }

.btn-navy { --btn-bg: var(--navy-800); --btn-fg: var(--white); box-shadow: var(--shadow-sm); }
.btn-navy:hover { --btn-bg: var(--navy-700); box-shadow: var(--shadow-md); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--white); border-color: rgba(255,255,255,.34); }
.btn-ghost:hover { --btn-fg: var(--gold-400); border-color: var(--gold-500); background: rgba(235,180,25,.1); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--navy-800); border-color: var(--navy-200); }
.btn-outline:hover { border-color: var(--navy-800); background: var(--navy-50); }

.btn-lg { font-size: 1.06rem; padding: 20px 36px; min-height: 62px; }
.btn-sm { font-size: .88rem; padding: 12px 20px; min-height: 44px; }
.btn-block { display: flex; width: 100%; }

/* Text link with a sliding arrow. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; font-size: .92rem;
  color: var(--navy-800);
}
.link-arrow::after { content: "\2192"; transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--gold-700); }
.link-arrow:hover::after { transform: translateX(5px); }
.section--dark .link-arrow { color: var(--gold-500); }
.section--dark .link-arrow:hover { color: var(--gold-400); }

/* =============================================================================
   5. FORMS
   ============================================================================= */
.field { margin-bottom: 15px; }

.field label, .form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  min-height: 54px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-200); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(235,180,25,.22);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F4F6B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  padding-right: 44px;
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(163,43,40,.14);
}
.field-error {
  display: none;
  margin-top: 7px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--danger);
  text-transform: none;
  letter-spacing: 0;
}
.field-error.is-shown { display: block; }

.form-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-faint);
  text-align: center;
}

/* TCPA consent block. Deliberately small, deliberately not hidden: it has to
   be legible to count as informed consent, so it sits at the AA-passing
   --ink-faint rather than being greyed out into decoration. */
.consent {
  font-size: .75rem;
  line-height: 1.62;
  color: var(--ink-faint);
  margin: 2px 0 18px;
}
.consent a {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent a:hover { color: var(--gold-700); }

/* Honeypot: a real field to a bot, invisible and untabbable to a person. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

.btn[aria-busy="true"] { pointer-events: none; opacity: .78; }
.btn[aria-busy="true"] .btn-text::after {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 10px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  line-height: 1.6;
  text-align: left;
}
.form-status.is-shown { display: block; }
.form-status.is-ok  { background: #E8F6EE; color: #10583A; border: 1px solid #BCE3CD; }
.form-status.is-err { background: #FCECEB; color: #8C2320; border: 1px solid #F0C7C5; }

/* =============================================================================
   6. TOP BAR
   ============================================================================= */
.topbar {
  background: var(--navy-950);
  color: #A9A9C6;
  font-size: .82rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  min-height: 40px;
  padding-block: 7px;
}
.topbar a { color: #D7D7E8; font-weight: 500; }
.topbar a:hover { color: var(--gold-500); }
.tb-left, .tb-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0;
  min-width: 0;
}
.tb-sep { color: rgba(255,255,255,.22); }
.tb-base { display: inline-flex; align-items: center; gap: 6px; }
.tb-base svg { color: var(--gold-500); flex: none; }

/* The phone and email moved here out of the nav bar. They are the only two
   things in the header a seller might actually need mid-scroll, so they get a
   little more weight than the tagline beside them. */
.tb-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 3px;
  white-space: nowrap;
}
.tb-contact svg { color: var(--gold-500); flex: none; }
.tb-phone {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .93rem;
  letter-spacing: .03em;
  color: var(--white);
}
.tb-phone:hover { color: var(--gold-500); }

/* Below the desktop bar the tagline is the first thing to go: the phone number
   is the only part of this strip anyone is looking for on a phone, and it gets
   the whole width to itself rather than being elbowed off the end. */
@media (max-width: 860px) {
  .topbar .container { justify-content: center; }
  .tb-left { display: none; }
  .tb-right { justify-content: center; }
}
/* Narrower still, the email address is longer than the phone number and less
   likely to be used one-handed. */
@media (max-width: 430px) {
  .tb-right .tb-sep,
  .tb-right .tb-contact:not(.tb-phone) { display: none; }
  .tb-phone { font-size: 1rem; }
}

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #35C77B;
  box-shadow: 0 0 0 0 rgba(53,199,123,.65);
  animation: pulse 2.1s infinite;
  flex: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(53,199,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,199,123,0); }
}

/* =============================================================================
   7. HEADER + NAVIGATION
   ============================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(23,23,71,.94);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.header.is-stuck {
  background: rgba(14,14,46,.97);
  box-shadow: 0 10px 30px rgba(8,8,30,.32);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
  padding-block: 10px;
}

/* --- Logo lockup ---------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo:hover { color: inherit; }
.logo-badge {
  width: 46px; height: 46px; flex: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.logo-text { display: block; line-height: 1; }
.logo-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.42rem;
  letter-spacing: .045em;
  color: var(--white);
  text-transform: uppercase;
}
.logo-name i { font-style: normal; color: var(--gold-500); }
.logo-tag {
  display: block;
  margin-top: 4px;
  font-size: .565rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9C9CBE;
}

/* --- Menu ----------------------------------------------------------------- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin-left: auto;
}
.nav-link {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .96rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #D3D3E6;
  border-radius: 8px;
  position: relative;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,.07); }

/* Active page gets the gold underline rather than a colour swap, so it reads
   as a marker rather than as a second hover state. */
.nav-link::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 3px; border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav-item.is-active .nav-link { color: var(--white); }
.nav-item.is-active .nav-link::after { transform: scaleX(1); }

/* =============================================================================
   SITUATIONS DROPDOWN
   The toggle is a <button>, not a link: it opens a menu rather than going
   anywhere. JS owns the open state on every screen size (see main.js), so
   hover and click can never disagree about whether the panel is showing.
   ========================================================================== */
.has-sub { position: relative; }

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-chev {
  flex: none;
  margin-top: 1px;
  opacity: .7;
  transition: transform .2s var(--ease);
}
.has-sub.is-open .nav-chev { transform: rotate(180deg); }
.has-sub.is-open > .nav-sub-toggle { color: var(--white); background: rgba(255,255,255,.07); }

.nav-sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 60;
  width: 340px;
  padding: 8px;
  background: var(--navy-850, #14143C);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(4, 4, 20, .55);

  /* Closed state keeps it out of the accessibility tree and out of the tab
     order, which display:none would also do - but this way it can animate. */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              visibility 0s linear .18s;
}
.has-sub.is-open > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              visibility 0s linear 0s;
}
/* A gap between the button and the panel would drop the hover halfway across.
   This bridges it without moving anything. */
.nav-sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px;
  height: 12px;
}

.nav-sub ul { list-style: none; margin: 0; padding: 0; }
.nav-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  transition: background-color .15s var(--ease);
}
.nav-sub a:hover,
.nav-sub a:focus-visible { background: rgba(255,255,255,.08); }
.ns-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
}
.ns-desc {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  line-height: 1.45;
  color: #9C9CBE;
}
.nav-sub a:hover .ns-name { color: var(--gold-500); }

/* Both of these belong to the mobile drawer only - the desktop bar carries its
   own CTA in .nav-cta. They are switched on in the drawer block below. */
.nav-drawer-head,
.nav-drawer-foot { display: none; }

/* --- Right-hand actions --------------------------------------------------- */
.nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--white);
  padding: 8px 4px;
}
.nav-phone:hover { color: var(--gold-500); }
.nav-phone svg { color: var(--gold-500); }

.hamburger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.hamburger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--white);
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(8,8,30,.6);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
  z-index: 890;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* =============================================================================
   8. MOBILE STICKY ACTION BAR
   Two thumb-sized targets - call, or open the offer form. On a phone these are
   the only two things a seller ever needs, and they stay reachable at any
   scroll position.
   ============================================================================= */
.action-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;
  background: rgba(14,14,46,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -8px 26px rgba(8,8,30,.3);
}
.action-bar .btn { flex: 1; min-height: 52px; font-size: .93rem; padding-inline: 12px; }

/* =============================================================================
   9. FOOTER
   ============================================================================= */
.footer {
  background: var(--navy-950);
  color: #9A9AB8;
  font-size: .93rem;
  padding-top: clamp(48px, 6vw, 76px);
}
.footer h4 {
  color: var(--white);
  font-size: .86rem;
  letter-spacing: .18em;
  margin-bottom: 18px;
}
.footer a { color: #C6C6DC; }
.footer a:hover { color: var(--gold-500); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(36px, 4.5vw, 56px);
}
.footer-brand .logo { margin-bottom: 18px; }
.footer-blurb { max-width: 38ch; line-height: 1.75; margin-bottom: 20px; }

.footer-links { list-style: none; display: grid; gap: 5px; }
/* padding, not margin: it grows the hit area rather than just the gap. */
.footer-links a { display: inline-block; padding-block: 5px; }

.footer-contact { list-style: none; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.6; }
.footer-contact svg { flex: none; margin-top: 4px; color: var(--gold-500); }
.footer-contact strong { display: block; color: var(--white); font-weight: 600; }
.footer-contact a { display: inline-block; padding-block: 3px; }

.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.f-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 500; letter-spacing: .03em;
  color: #C6C6DC;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  padding: 7px 13px;
}
.f-badge svg { color: var(--gold-500); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  font-size: .84rem;
  color: #80809E;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 2px 16px; list-style: none; }
.footer-legal a { display: inline-block; padding-block: 4px; }

.footer-disclaimer {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-block: 20px 28px;
  font-size: .76rem;
  line-height: 1.7;
  color: #8888A6;
  max-width: 96ch;
}

/* =============================================================================
   10. SHARED CONTENT COMPONENTS
   ============================================================================= */

/* --- Card ----------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--gold-200);
  box-shadow: var(--shadow-md);
}

/* --- Icon chip ------------------------------------------------------------ */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--navy-50);
  color: var(--navy-800);
  border: 1px solid var(--navy-100);
  margin-bottom: 18px;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.card-hover:hover .icon-chip {
  background: var(--gold-100);
  border-color: var(--gold-200);
  color: var(--gold-700);
}

/* --- Trust chips (the pill row under the hero headline) ------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 500;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: #E4E4F2;
}
.chip svg { color: var(--gold-500); flex: none; }
.chip--light {
  background: var(--gold-100);
  border-color: var(--gold-200);
  color: var(--navy-800);
}
.chip--light svg { color: var(--gold-700); }

/* --- Accordion (FAQ) ------------------------------------------------------ */
.accordion { display: grid; gap: 12px; }
.acc-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.acc-item.is-open { border-color: var(--gold-200); box-shadow: var(--shadow-sm); }

.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 20px clamp(18px, 2.4vw, 26px);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy-800);
}
.acc-trigger:hover { color: var(--gold-700); }

.acc-icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--navy-800);
  display: grid;
  place-items: center;
  transition: transform .25s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease);
}
.acc-item.is-open .acc-icon {
  transform: rotate(180deg);
  background: var(--gold-500);
  color: var(--navy-900);
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-body {
  padding: 0 clamp(18px, 2.4vw, 26px) 22px;
  color: var(--ink-soft);
  line-height: 1.78;
}

/* --- Scroll reveal --------------------------------------------------------
   The hidden state is scoped to .has-js, which main.js puts on <html> as its
   first act. If the script is blocked, fails to parse, or 404s, the selector
   never matches and every section is simply visible - rather than a page of
   invisible content that nobody can read or crawl. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.has-js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; }
}

/* =============================================================================
   11. RESPONSIVE - HEADER, FOOTER, SHELL
   ============================================================================= */
@media (max-width: 1080px) {
  .nav-link { padding: 10px 11px; font-size: .9rem; }
  .nav-link::after { left: 11px; right: 11px; }
  .nav-phone { font-size: .95rem; }
}

/* Seven items, a two-line logo and a CTA button need about 1124px. Between the
   drawer breakpoint and roughly 1280px there is less than that, so the bar
   tightens rather than letting the button slide out of the container. */
/* The frosted bar is desktop-only ON PURPOSE. backdrop-filter makes an element
   the containing block for any position:fixed descendant, and the mobile drawer
   is a descendant of .header - with the filter on at drawer widths the panel is
   clipped to the height of the header instead of filling the screen. */
@media (min-width: 1101px) {
  .header {
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
  }
}

@media (min-width: 1101px) and (max-width: 1290px) {
  .nav { gap: 14px; }
  .nav-link { padding-inline: 8px; font-size: .89rem; }
  .nav-link::after { left: 8px; right: 8px; }
  .nav-menu { gap: 2px; }
  .logo-badge { width: 40px; height: 40px; }
  .logo-name { font-size: 1.28rem; }
  .logo-tag { font-size: .52rem; letter-spacing: .17em; }
}

@media (max-width: 1100px) {
  :root { --header-h: 68px; }

  .hamburger { display: flex; }
  .nav-cta .btn { display: none; }

  /* The menu becomes a right-hand drawer. */
  .nav-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(330px, 86vw);
    z-index: 895;
    display: block;
    margin: 0;
    padding: 0 0 28px;
    background: var(--navy-900);
    border-left: 1px solid rgba(255,255,255,.1);
    box-shadow: -20px 0 50px rgba(8,8,30,.4);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* The closed drawer is HIDDEN BY CLIPPING, not by being parked off-screen
       with a transform. A fixed element translated past the right edge is not
       clipped by any ancestor's overflow, so it widens the scrollable area and
       lets a phone pan sideways into empty space (iOS Safari in particular
       ignores overflow-x on the root for this). clip-path never contributes
       overflow, so there is simply nothing out there to pan to.
       The panel wipes in from its right edge; the items slide with it. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;

    /* visibility is stepped, not eased: it flips to hidden only AFTER the wipe
       has finished on close (0s delayed by .3s), and back to visible with no
       delay at all on open. Transitioning it like an ordinary property left
       the panel computed-hidden on the opening frame, which meant focus() on
       the close button silently did nothing and the drawer opened with focus
       stranded on <body>. */
    transition: clip-path .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-menu.is-open {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path .3s var(--ease), visibility 0s linear 0s;
  }

  .nav-menu > li {
    transform: translateX(26px);
    opacity: 0;
    transition: transform .34s var(--ease), opacity .3s var(--ease);
  }
  .nav-menu.is-open > li { transform: none; opacity: 1; }
  .nav-menu.is-open > li:nth-child(2) { transition-delay: .04s; }
  .nav-menu.is-open > li:nth-child(3) { transition-delay: .07s; }
  .nav-menu.is-open > li:nth-child(4) { transition-delay: .10s; }
  .nav-menu.is-open > li:nth-child(5) { transition-delay: .13s; }
  .nav-menu.is-open > li:nth-child(6) { transition-delay: .16s; }
  .nav-menu.is-open > li:nth-child(7) { transition-delay: .19s; }
  .nav-menu.is-open > li:nth-child(8) { transition-delay: .22s; }
  .nav-menu.is-open > li:nth-child(9) { transition-delay: .25s; }
  .nav-menu.is-open > li:nth-child(10) { transition-delay: .28s; }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    margin-bottom: 8px;
  }
  .ndh-title {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .8rem;
    color: #9C9CBE;
  }
  .nav-close {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    color: var(--white);
    cursor: pointer;
  }

  .nav-menu .nav-item { display: block; padding-inline: 14px; }
  .nav-menu .nav-link {
    padding: 15px 14px;
    font-size: 1.06rem;
    border-radius: 10px;
  }
  .nav-link::after { left: 14px; right: auto; bottom: 10px; width: 26px; }

  /* --- Situations, inline --------------------------------------------- */
  .has-sub { position: static; }
  .nav-sub-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }
  .nav-chev { margin-top: 0; }

  .nav-sub {
    position: static;
    width: auto;
    padding: 4px 0 6px;
    margin: 2px 0 6px;
    background: rgba(255, 255, 255, .04);
    border: 0;
    border-left: 2px solid var(--gold-500);
    border-radius: 0 10px 10px 0;
    box-shadow: none;
    transform: none;

    /* Collapsed by height rather than visibility, so it slides rather than
       snapping. The generous max-height is a ceiling, not a measurement. */
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease), visibility 0s linear .3s;
  }
  .has-sub.is-open > .nav-sub {
    visibility: visible;
    max-height: 640px;
    transform: none;
    transition: max-height .34s var(--ease), visibility 0s linear 0s;
  }
  .nav-sub::before { display: none; }

  .nav-sub a { padding: 11px 14px; border-radius: 0 8px 8px 0; }
  .ns-name { font-size: .84rem; }
  /* The one-line descriptions earn their space on a wide screen; in a 330px
     drawer they turn six items into a wall of text. */
  .ns-desc { display: none; }

  .nav-drawer-foot {
    margin-top: 18px;
    padding: 22px 22px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    display: grid;
    gap: 14px;
  }
  .nav-drawer-foot .btn { width: 100%; }
  .ndf-line {
    display: flex; align-items: center; gap: 10px;
    font-size: .9rem; color: #A9A9C6;
  }
  .ndf-line svg { color: var(--gold-500); flex: none; }
  .ndf-line a { color: #E1E1F0; font-weight: 500; }

  .action-bar { display: flex; }
  body { --actionbar-h: 76px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* .tb-right used to be hidden here, back when the nav bar carried its own
     phone link. It is now the ONLY place the number appears above the fold,
     so it stays and the tagline yields instead (see the 860px rule above). */
  .footer-bottom-spacer { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-legal { justify-content: center; }
}

@media (max-width: 400px) {
  .logo-badge { width: 40px; height: 40px; }
  .logo-name { font-size: 1.2rem; }
  .logo-tag { font-size: .5rem; letter-spacing: .16em; }
}

/* =============================================================================
   12. PRINT
   ============================================================================= */
@media print {
  .topbar, .header, .action-bar, .nav-scrim, .hero-form, .final-cta { display: none !important; }
  body { color: #000; padding: 0; }
  .section { padding-block: 18px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* =============================================================================
   ASK WIDGET
   Bottom-right helper that answers the common questions from canned copy.
   Sits in the footer shell so it is present on every page, and is inert
   without JavaScript: the panel starts [hidden] and only the launcher shows,
   which is a link to the contact page until the script upgrades it.
   ========================================================================== */
.ask {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  /* --actionbar-h is 0 on desktop and 76px once the mobile action bar shows,
     so the launcher clears the call button without a breakpoint of its own. */
  bottom: calc(var(--actionbar-h, 0px) + clamp(14px, 2.5vw, 26px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* --- Launcher -------------------------------------------------------------- */
.ask-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-900);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(8, 8, 30, .32), 0 2px 6px rgba(8, 8, 30, .2);
  transition: transform .18s ease, background .18s ease;
}
.ask-launch:hover { transform: translateY(-2px); background: var(--gold-400); }
.ask-launch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ask-launch .ask-ico-close { display: none; }
.ask.is-open .ask-launch .ask-ico-open { display: none; }
.ask.is-open .ask-launch .ask-ico-close { display: block; }

/* --- Panel ----------------------------------------------------------------- */
/* display:flex would otherwise beat the UA stylesheet's [hidden] rule, and the
   panel would sit open on top of the page on every load. */
.ask-panel[hidden] { display: none; }
.ask-panel {
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 8, 30, .28), 0 4px 14px rgba(8, 8, 30, .14);
}
.ask-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--navy-800);
  color: #fff;
}
.ask-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
}
.ask-title { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ask-title b {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.ask-title span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: #AEAECB;
}
.ask-title span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3FBF6A;
}
.ask-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.ask-close:hover { background: rgba(255, 255, 255, .22); }

/* --- Conversation ---------------------------------------------------------- */
.ask-log {
  flex: 1 1 auto;
  /* Without a floor the suggested-question block squeezes the conversation
     down to a sliver and the newest reply lands out of sight. */
  min-height: 178px;
  overflow-y: auto;
  padding: 16px 14px 6px;
  background: var(--navy-50);
}
.ask-msg { display: flex; margin-bottom: 10px; }
.ask-msg--bot { justify-content: flex-start; }
.ask-msg--me  { justify-content: flex-end; }
.ask-bubble {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 14px;
  font-size: .89rem;
  line-height: 1.62;
}
.ask-msg--bot .ask-bubble {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--ink);
}
.ask-msg--me .ask-bubble {
  background: var(--navy-800);
  border-bottom-right-radius: 5px;
  color: #fff;
}
.ask-bubble a {
  color: var(--gold-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Three dots while the answer "arrives". */
.ask-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.ask-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: ask-blink 1.1s infinite ease-in-out;
}
.ask-dots i:nth-child(2) { animation-delay: .18s; }
.ask-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ask-blink {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- Suggested questions --------------------------------------------------- */
.ask-chips {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-height: 164px;
  overflow-y: auto;
  gap: 7px;
  padding: 10px 14px 12px;
  background: var(--navy-50);
  border-top: 1px solid var(--line-soft);
}
.ask-chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-800);
  font-family: inherit;
  font-size: .79rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ask-chip:hover { border-color: var(--gold-500); background: #FFFBF0; }
.ask-chip:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 2px; }

/* --- Ask box --------------------------------------------------------------- */
.ask-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.ask-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--navy-50);
  font-family: inherit;
  font-size: .88rem;
  color: var(--ink);
}
.ask-input:focus {
  outline: none;
  border-color: var(--gold-500);
  background: #fff;
}
.ask-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-900);
  cursor: pointer;
}
.ask-send:hover { background: var(--gold-400); }
.ask-foot {
  margin: 0;
  padding: 0 14px 11px;
  background: #fff;
  font-size: .7rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

/* The mobile action bar already owns the bottom of the screen on phones, so
   the launcher lifts above it rather than sitting on top of the call button. */
@media (max-width: 760px) {
  .ask-panel { max-height: min(70vh, calc(100vh - 210px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ask-launch { transition: none; }
  .ask-dots i { animation: none; opacity: .5; }
}