/* Carsultant4u — site styles
   Palette (locked Sept 2026): Sunlit Brooklyn Grey hero, Brooklyn Mist reading areas,
   Gulf Navy text, Gulf Blue + Gulf Orange accents, Link Blue for links.
   Rules: text is always navy on the grays; Gulf Blue/Orange never carry text on the grays;
   one orange call to action per screen; the navy-pinstriped Gulf stripe is the signature.
   Type: Libre Baskerville (headlines, figures), Open Sans (everything else) */

:root {
  --navy:      #192133;  /* Gulf Navy: all text, dark scenes */
  --navy-2:    #26324A;  /* secondary text on Brooklyn Grey */
  --navy-3:    #222C43;  /* raised surface on navy */
  --brooklyn:  #B0BCC0;  /* Sunlit Brooklyn Grey: hero and header bands */
  --mist:      #E7EBEC;  /* Brooklyn Mist: reading areas, forms, calculator */
  --paper:     #FFFFFF;  /* cards */
  --gulf:      #6AB8E6;  /* Gulf Blue: stripe, gauges, accents on navy */
  --gulf-tint: #E3F1FA;
  --orange:    #FE8818;  /* Gulf Orange: one call to action per screen */
  --orange-hi: #FF9A3C;
  --on-orange: #2A1400;
  --link:      #1F5E96;  /* Link Blue */
  --muted:     #4A5568;  /* secondary text on mist and white */
  --on-navy:   #C9D3E3;  /* body text on navy */
  --on-navy-2: #9FB0C7;  /* small print on navy */
  --rule:      #CDD4D7;
  --field:     #7D878C;
  --error:     #B3261E;
  --stripe: linear-gradient(to bottom,
              var(--navy) 0 2px, var(--gulf) 2px 9px, var(--navy) 9px 11px,
              var(--orange) 11px 16px, var(--navy) 16px 18px);
  --stripe-h: 18px;
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans:  'Open Sans', Arial, sans-serif;
  --wrap:  1120px;
  --gutter: 32px;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--navy); }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 700; margin: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 680px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--paper); padding: 8px 12px; z-index: 100; }

/* ── Signature Gulf stripe ─────────────────────────────── */
.hero, .page-head, .calc-top { position: relative; }
.hero::after, .page-head::after, .calc-top::after, .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; height: var(--stripe-h); background: var(--stripe);
}
.hero::after, .page-head::after, .calc-top::after { bottom: 0; }
.gulf-stripe { height: var(--stripe-h); background: var(--stripe); }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  background: var(--brooklyn);
  position: sticky; top: 0; z-index: 40;
  transition: box-shadow .2s ease;
}
.site-header.scrolled { box-shadow: 0 1px 0 rgba(25,33,51,.18), 0 6px 18px rgba(25,33,51,.10); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: 0.12em;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.nav a {
  color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { border-bottom-color: rgba(25,33,51,.45); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }
.menu-btn {
  display: none; background: transparent; border: 1.5px solid var(--navy); color: var(--navy);
  font: 600 15px var(--sans); padding: 8px 14px; cursor: pointer; border-radius: var(--radius);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block; background: var(--orange); color: var(--on-orange);
  font: 700 16px var(--sans); padding: 14px 26px; border: 1.5px solid var(--navy); cursor: pointer;
  text-decoration: none; border-radius: var(--radius);
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--orange-hi); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn-quiet {
  display: inline-block; color: var(--link); font-weight: 700; text-decoration: none;
  border-bottom: 3px solid var(--gulf); padding-bottom: 1px;
}
.btn-quiet:hover { border-bottom-color: var(--orange); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 32px; }

/* ── Home hero with window sticker ─────────────────────── */
.hero { background: var(--brooklyn); padding: 64px 0 calc(88px + var(--stripe-h)); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: center; }
.hero h1 { font-size: 52px; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 24px; }
.hero .lede { font-size: 19px; color: var(--navy-2); max-width: 560px; }
.hero .btn-quiet, .page-head .btn-quiet { color: var(--navy); }

.sticker {
  border: 2px solid var(--navy); background: var(--paper); border-radius: 4px;
  box-shadow: 10px 10px 0 var(--gulf);
  font-size: 15px;
}
.sticker-head { background: var(--navy); color: var(--paper); padding: 18px 22px 16px; }
.sticker-head strong { display: block; font-family: var(--sans); font-size: 17px; letter-spacing: 0.12em; }
.sticker-head small { font-size: 13px; color: var(--gulf); }
.sticker dl { margin: 0; padding: 8px 22px 6px; }
.sticker .row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sticker .row:last-child { border-bottom: 0; }
.sticker dt { color: var(--muted); white-space: nowrap; }
.sticker .leader { flex: 1; border-bottom: 2px dotted var(--brooklyn); transform: translateY(-4px); min-width: 16px; }
.sticker dd { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--navy); white-space: nowrap; }
.sticker-foot {
  border-top: 2px solid var(--navy); padding: 14px 22px 16px; display: flex; justify-content: space-between;
  gap: 12px; font-size: 13px; color: var(--muted);
}
.sticker-foot b { color: var(--navy); }

/* ── Sections ───────────────────────────────────────────── */
.band { padding: 88px 0; }
.band.tint { background: var(--paper); }
.band.blue { background: var(--navy); color: var(--on-navy); }
.band.blue h2, .band.blue h3 { color: var(--paper); }
.band.blue a:not(.btn) { color: var(--gulf); }
.band.blue .btn-quiet { border-bottom-color: var(--orange); }
.band.blue :focus-visible, .site-footer :focus-visible { outline-color: var(--gulf); }
.section-title { font-size: 34px; line-height: 1.2; margin-bottom: 16px; }
.section-intro { font-size: 18px; color: var(--muted); max-width: 640px; margin-bottom: 48px; }
.band.blue .section-intro { color: var(--on-navy); }

/* Two audiences on home + services */
.audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.audience h2 { font-size: 26px; padding-bottom: 14px; border-bottom: 3px solid var(--navy); margin-bottom: 8px; position: relative; }
.audience h2::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 64px; height: 3px; background: var(--orange); }
.svc { display: block; padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.svc h3 { font-size: 21px; color: var(--link); margin-bottom: 8px; }
.svc p { color: var(--navy); margin-bottom: 10px; }
.svc .more { font-weight: 700; color: var(--link); font-size: 15px; }
.svc .more::after { content: " \2192"; display: inline-block; transition: transform .15s ease; }
.svc:hover h3, .svc:hover .more { text-decoration: underline; }
.svc:hover .more::after { transform: translateX(3px); }
.svc .terms { font-size: 15px; color: var(--muted); }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.quote { margin: 0; padding-top: 18px; border-top: 3px solid var(--gulf); }
.quote blockquote { margin: 0 0 16px; font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.quote cite { font-style: normal; font-weight: 700; color: var(--muted); }
.quotes.all { grid-template-columns: 1fr 1fr; }
.quote.wide { grid-column: 1 / -1; }
.quote.wide blockquote { font-size: 21px; max-width: 860px; }

/* Calculator teaser (the dark navy scene) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cost-card { background: var(--navy-3); border-radius: 14px; padding: 22px 24px 18px; }
.gauge-row { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(201,211,227,.18); }
.gauge { width: 132px; flex-shrink: 0; }
.gauge .track { stroke: #2C3650; }
.gauge .arc { stroke: var(--gulf); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.gauge .needle { stroke: var(--orange); transform-origin: 60px 58px; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.gauge .hub { fill: var(--mist); }
.gauge-label { font-size: 13px; color: var(--on-navy-2); }
.gauge-value { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--paper); line-height: 1.15; }
.cost-lines div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(201,211,227,.18); font-size: 16px; }
.cost-lines div:last-child { border-bottom: 0; font-weight: 700; color: var(--paper); }
.cost-lines span:last-child { font-family: var(--serif); }
.cost-note { font-size: 14px; color: var(--on-navy-2); margin-top: 12px; }

/* ── Interior pages ─────────────────────────────────────── */
.page-head { background: var(--brooklyn); padding: 56px 0 calc(56px + var(--stripe-h)); }
.page-head h1 { font-size: 46px; line-height: 1.15; margin-bottom: 18px; max-width: 860px; }
.page-head .lede { font-size: 19px; color: var(--navy-2); max-width: 700px; }
.page-head a:not(.btn) { color: var(--navy); }
.crumb { font-size: 14px; margin-bottom: 18px; color: var(--navy-2); }
.crumb a { color: var(--navy-2); }

.detail { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--rule); }
.detail:last-child { border-bottom: 0; }
.detail h2 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--link); padding-top: 2px; }
.detail .body { max-width: 680px; }
.detail ul { margin: 0; padding-left: 20px; }
.detail li { margin-bottom: 8px; }
.detail li::marker { color: var(--link); }

.pull {
  border-left: 4px solid var(--orange); padding: 6px 0 6px 28px; margin: 48px 0;
  font-family: var(--serif); font-size: 23px; line-height: 1.5; max-width: 760px;
}

.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); margin: 0 0 56px; }
.figures div { padding: 24px 20px; border-left: 1px solid var(--rule); }
.figures div:first-child { border-left: 0; padding-left: 0; }
.figures b { display: block; font-family: var(--serif); font-size: 36px; color: var(--navy); line-height: 1.1; margin-bottom: 6px; }
.figures span { font-size: 15px; color: var(--muted); }

/* Pricing */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 28px; }
.price { border: 1px solid var(--rule); border-radius: 12px; padding: 32px 28px; display: flex; flex-direction: column; background: var(--paper); }
.price.featured { border: 2px solid var(--navy); box-shadow: 8px 8px 0 var(--gulf); }
.price .tag { align-self: flex-start; font-size: 13px; font-weight: 700; margin-bottom: 10px; min-height: 1.4em; }
.price .tag:not(:empty) { background: var(--orange); color: var(--on-orange); padding: 2px 10px; border-radius: 999px; }
.price h3 { font-size: 22px; margin-bottom: 14px; }
.price .amt { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1; }
.price .per { font-size: 15px; color: var(--muted); margin: 6px 0 20px; }
.price ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; border-top: 1px solid var(--rule); }
.price li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.price .btn { text-align: center; }
.retainer { border: 1px solid var(--link); border-radius: 12px; background: var(--gulf-tint); padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.retainer h3 { font-size: 22px; margin-bottom: 10px; }
.retainer .amt { font-family: var(--serif); font-size: 34px; color: var(--navy); font-weight: 700; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps li { counter-increment: step; border-top: 4px solid var(--gulf); padding-top: 18px; }
.steps li::before { content: "Step " counter(step); display: block; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.steps h3 { font-family: var(--sans); font-size: 18px; margin-bottom: 8px; }
.steps p { font-size: 16px; }

/* Calculator page */
.calc-top { background: var(--brooklyn); padding: 36px 0 calc(28px + var(--stripe-h)); }
.calc-top .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.calc-top h1 { font-size: 38px; margin-bottom: 10px; }
.calc-top p { color: var(--navy-2); max-width: 680px; margin: 0; }
.calc-top a:not(.btn) { color: var(--navy); }
.calc-links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.calc-frame { display: block; width: 100%; height: calc(100vh - 76px); min-height: 760px; border: 0; border-bottom: 1px solid var(--rule); background: var(--mist); }

/* Forms */
.form { max-width: 640px; }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--navy); }
.field label small { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 16px var(--sans); color: var(--navy); padding: 12px 14px;
  border: 1px solid var(--field); border-radius: 8px; background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: 3px solid var(--gulf); outline-offset: 0; }
.field textarea { min-height: 130px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.status { display: none; padding: 16px 20px; margin-bottom: 24px; border-left: 4px solid; max-width: 640px; }
.status.ok { display: block; background: var(--gulf-tint); border-color: var(--link); }
.status.err { display: block; background: #FCEBEA; border-color: var(--error); }
.contact-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 72px; }
.aside h2 { font-family: var(--sans); font-size: 17px; color: var(--link); margin-bottom: 8px; }
.aside p { color: var(--muted); }
.aside > div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.aside > div:first-child { padding-top: 0; }

/* Blog */
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 8px 0 64px; }
.topics h2 { font-size: 21px; color: var(--link); margin-bottom: 10px; }
.inline-form { display: flex; gap: 12px; max-width: 560px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 220px; font: 16px var(--sans); padding: 13px 14px; border: 1px solid var(--field); border-radius: 8px; background: var(--paper); color: var(--navy); }

/* CTA strip + footer */
.cta-strip { padding: 72px 0; background: var(--brooklyn); }
.cta-strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-strip h2 { font-size: 28px; max-width: 640px; }
.site-footer { position: relative; background: var(--navy); color: var(--on-navy); padding: calc(56px + var(--stripe-h)) 0 40px; font-size: 15px; }
.site-footer::before { top: 0; }
.site-footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.site-footer .wordmark { color: var(--paper); }
.site-footer h2 { font-family: var(--sans); font-size: 15px; color: var(--paper); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--gulf); text-decoration: underline; }
.site-footer .fine { border-top: 1px solid #2C3650; padding-top: 20px; font-size: 13px; color: var(--on-navy-2); }

/* ── Scroll reveal (motion is optional; content is visible without JS) ── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav ul { gap: 18px; }
  .nav a { font-size: 14px; }
}
@media (max-width: 960px) {
  :root { --gutter: 20px; }
  .menu-btn { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 76px; background: var(--brooklyn); border-bottom: 2px solid var(--navy); display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
  .nav a { display: block; padding: 12px 0; font-size: 16px; border-bottom: 1px solid rgba(25,33,51,.15); }
  .nav a[aria-current="page"] { border-bottom: 2px solid var(--navy); }
  .hero .wrap, .split, .audiences, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 40px 0 calc(64px + var(--stripe-h)); }
  .hero h1 { font-size: 38px; }
  .quotes, .quotes.all, .topics { grid-template-columns: 1fr; }
  .prices { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .figures { grid-template-columns: 1fr 1fr; }
  .figures div:nth-child(3) { border-left: 0; padding-left: 0; }
  .figures div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 32px; }
  .page-head { padding: 40px 0 calc(40px + var(--stripe-h)); }
  .page-head h1, .calc-top h1 { font-size: 32px; }
  .section-title { font-size: 28px; }
  .band { padding: 64px 0; }
  .detail { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .steps { grid-template-columns: 1fr; }
  .retainer { grid-template-columns: 1fr; gap: 20px; }
  .form .grid { grid-template-columns: 1fr; }
  .sticker { box-shadow: 6px 6px 0 var(--gulf); }
  .sticker dd { font-size: 19px; }
  .sticker dl, .sticker-head, .sticker-foot { padding-left: 16px; padding-right: 16px; }
  .sticker-foot { flex-direction: column; gap: 4px; }
  .price.featured { box-shadow: 6px 6px 0 var(--gulf); }
  .gauge { width: 104px; }
  .gauge-value { font-size: 26px; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .calc-frame { min-height: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Jump links land below the sticky header */
[id] { scroll-margin-top: 92px; }