/* Shared stylesheet for Rankers lead sites. System fonts only, no external requests. */
:root {
  --cta: #ff9900;
  --cta-hover: #ffad33;
  --cta-edge: #c77700;
  --cta-ink: #111111;
  --navy: #0d1b33;
  --navy-2: #1a2d50;
  --sky: #cfe4f8;
  --sky-2: #eef6fd;
  --panel: #e2eef9;
  --link: #0a55ad;
  --ink: #111418;
  --muted: #47525e;
  --line: #a9bbce;
  --radius: 10px;
  --wrap: 70rem;
  --header-h: 3.5rem;   /* slim header; also the scroll offset when it is sticky */
  --bar-h: 4.5rem;      /* phone quote bar height before the safe-area inset (52px button + padding) */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.site-header :focus-visible, .site-footer :focus-visible, .quotebar :focus-visible { outline-color: #ffd27a; }
h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 1.45rem; margin: 0 0 .8rem; }
h3 { font-size: 1.12rem; margin: 1.3rem 0 .35rem; }
p { margin: 0 0 1rem; }

.skip { position: absolute; left: -999px; top: .5rem; background: #fff; color: var(--ink); padding: .6rem 1rem; border-radius: 6px; z-index: 30; }
.skip:focus { left: .5rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.prose { max-width: 46rem; }

/* Header */
.site-header { background: var(--navy); color: #fff; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: var(--header-h); }
.hdr-actions { display: flex; gap: .5rem; }
.hdr-actions.has-phone .hdr-quote { display: none; }
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.12rem; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .5rem; min-width: 0; line-height: 1.15; }
.logo-mark { flex: none; display: block; width: 32px; height: 32px; }
.site-footer .foot-brand { margin: 0 0 1.25rem; }
.foot-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.05rem; color: #fff; }
.foot-brand .logo-mark { width: 28px; height: 28px; }
.brand:hover { color: var(--sky); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  border: 0; border-radius: var(--radius); padding: .8rem 1.25rem; min-height: 48px; cursor: pointer;
}
.btn-cta { background: var(--cta); color: var(--cta-ink); box-shadow: 0 2px 0 var(--cta-edge); }
.btn-cta:hover { background: var(--cta-hover); color: var(--cta-ink); }
.btn-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--cta-edge); }
.btn-cta[disabled] { opacity: .75; cursor: progress; }
.btn-block { width: 100%; }
.btn-sm { padding: .5rem .85rem; min-height: 44px; font-size: .95rem; }
.btn-call { font-size: 1.15rem; margin: 0 0 1rem; }
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.btn-call svg { width: 1.2rem; height: 1.2rem; }
.site-header .btn { white-space: nowrap; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--sky-2), #fff 85%); border-bottom: 1px solid var(--sky); }
.hero-grid { display: grid; gap: 1.25rem; padding-top: 1.4rem; padding-bottom: 2rem; grid-template-areas: "copy" "form" "bullets"; }
.hero-copy { grid-area: copy; }
.hero-form { grid-area: form; }
.hero-bullets { grid-area: bullets; }
.eyebrow { margin: 0 0 .35rem; font-weight: 700; color: var(--link); font-size: .95rem; }
h1 { font-size: 1.75rem; margin: 0 0 .7rem; }
.sub { font-size: 1.1rem; margin: 0 0 1.1rem; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 2.1rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .18rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23ff9900' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .85rem no-repeat;
}

/* Form */
.lead { background: var(--panel); border: 1px solid var(--sky); border-radius: 14px; padding: 1.1rem; display: grid; gap: .85rem; }
.lead h2 { font-size: 1.3rem; margin: 0; }
.form-head p { margin: .25rem 0 0; color: var(--muted); }
.field { display: grid; gap: .3rem; }
.field label { font-weight: 650; font-size: .97rem; }
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 8px; padding: .65rem .8rem; width: 100%; min-height: 48px;
}
input:focus, select:focus, textarea:focus { border-color: var(--link); }
textarea { min-height: 5.5rem; resize: vertical; }
::placeholder { color: #66717d; opacity: 1; }
.switch-row { display: flex; align-items: center; gap: .8rem; }
.switch-row label { font-weight: 650; }
.switch-row .hint { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); }
.switch-row input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; cursor: pointer;
  width: 3.2rem; height: 1.85rem; min-height: 0; padding: 0; margin: 0;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--line); transition: background .15s;
}
.switch-row input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #66717d; transition: left .15s;
}
.switch-row input:checked { background: var(--navy); border-color: var(--navy); }
.switch-row input:checked::after { left: calc(100% - 1.4rem - 2px); background: var(--cta); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; padding: .7rem .85rem; border-radius: 8px; background: #fff4e0; border: 1px solid #e0a040; font-weight: 600; }
.form-note { font-size: .8rem; line-height: 1.45; color: var(--muted); margin: 0; }
/* "Get a quote" links jump here: the wrapper starts at the form's top edge, so the heading lands
   at the top of the screen. scroll-margin keeps it clear of the header if it is ever made sticky. */
.quote-target, #calculator { scroll-margin-top: 1rem; }
.form-done { background: #fff; border: 2px solid var(--navy); border-radius: 14px; padding: 1.25rem; font-weight: 600; font-size: 1.1rem; }

/* Content blocks */
.block { padding: 2.25rem 0; }
.block.alt { background: var(--sky-2); }
.media { margin: 0 0 1.25rem; }
.media img, .ph { border-radius: 12px; width: 100%; }
.ph { background: repeating-linear-gradient(135deg, #e6edf4 0 14px, #dde6ef 14px 28px); }
.split { display: grid; gap: 1.25rem; }
.block ul:not(.ticks), .block ol:not(.steps) { padding-left: 1.3rem; margin: 0 0 1rem; }
.block li { margin-bottom: .35rem; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps li { counter-increment: step; background: #fff; border: 1px solid var(--sky); border-radius: 12px; padding: 1rem 1rem 1rem 3.6rem; position: relative; }
.steps li::before {
  content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; display: grid; place-items: center;
}
.steps h3 { margin: 0 0 .25rem; }
.steps p { margin: 0; }

.cards { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .75rem; }
.cards a { display: block; height: 100%; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--cta); border-radius: 10px; padding: .85rem 1rem; text-decoration: none; color: var(--ink); }
.cards a:hover { border-color: var(--link); border-left-color: var(--cta); }
.cards strong { display: block; color: var(--link); }
.cards span { display: block; font-size: .95rem; color: var(--muted); }
.chips { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { background: var(--sky); border-radius: 999px; padding: .3rem .8rem; font-size: .95rem; margin: 0; }

.prices { width: 100%; border-collapse: collapse; margin: 0 0 .8rem; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--sky); }
.prices th, .prices td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--sky); vertical-align: top; }
.prices thead th { background: var(--navy); color: #fff; font-size: .95rem; }
.prices td:last-child { white-space: nowrap; font-weight: 700; }
.prices small { display: block; font-weight: 400; color: var(--muted); }
.small { font-size: .92rem; color: var(--muted); }

.proof { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.proof li { background: #fff; border: 1px solid var(--sky); border-radius: 10px; padding: .85rem 1rem; margin: 0; }

.faq h3 { margin-top: 1.4rem; }
.faq h3:first-of-type { margin-top: .5rem; }

.areas dt { font-weight: 700; margin-top: .9rem; }
.areas dd { margin: .15rem 0 0; }

.closing { background: var(--navy); color: #fff; }
.closing h2 { color: #fff; }
.closing a:not(.btn) { color: #fff; }
.closing .lead, .closing .lead h2 { color: var(--ink); }
.closing .form-done { color: var(--ink); }
.closing .lead a { color: var(--link); }
.closing-grid { display: grid; gap: 1.25rem; }
.reminder { font-size: 1.1rem; font-weight: 600; }

/* Footer */
.site-footer { background: var(--navy); color: #dce6f2; border-top: 4px solid var(--cta); padding: 2rem 0 1.5rem; font-size: .95rem; }
.site-footer a { color: #fff; }
.foot-groups { display: grid; gap: 1.25rem; margin: 0 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.foot-groups ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.foot-title { font-weight: 700; color: #fff; margin: 0 0 .5rem; }
.site-footer p { margin: 0 0 .6rem; }
.foot-legal { font-size: .85rem; color: #b9c7d6; }

/* Breadcrumbs */
.crumbs { font-size: .88rem; margin: 0 0 .6rem; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.crumbs li + li::before { content: "/"; margin-right: .25rem; color: var(--muted); }
.crumbs [aria-current] { color: var(--muted); }

/* Advice and article header */
.hero-plain .wrap { padding-top: 1.4rem; padding-bottom: 1.8rem; }
.lead-in p { font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 0; }
.hero-actions .btn-call { margin: 0; }
.legal h2 { font-size: 1.2rem; margin-top: 1.6rem; }

/* Fixed call bar on phones (only rendered when the site has a phone number) */
/* Phone quote bar. Fixed, so showing it moves nothing. The page keeps room for it at all times
   (body padding) so it can never cover the footer or the last lines of text. It is hidden with
   visibility, which also takes its links out of the keyboard order while it is off screen. */
.quotebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: .6rem; align-items: center;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom)); /* fixed, so it always equals the body padding below */
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--navy); box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
  transform: translateY(110%); visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
}
.quotebar .btn { flex: 1 1 0; min-height: 52px; }
.quotebar.two { gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
.quotebar.two .btn { padding-left: .4rem; padding-right: .4rem; font-size: 1rem; white-space: nowrap; }
.quotebar.two .btn svg { margin-right: .3rem; }
.quotebar.is-shown { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
body.has-quotebar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 760px) {
  .quotebar { display: none; }
  body.has-quotebar { padding-bottom: 0; }
  /* Desktop and tablet: the slim header stays on screen with the quote button in it. */
  .site-header { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
  .hdr-actions.has-phone .hdr-quote { display: inline-flex; }
  .quote-target, #calculator { scroll-margin-top: calc(var(--header-h) + 1rem); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { padding: 3.6rem 1rem 1rem; }
}
@media (min-width: 900px) {
  h1 { font-size: 2.35rem; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; grid-template-areas: "copy form" "bullets form"; grid-template-rows: auto 1fr; align-items: start; column-gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 3rem; }
  .hero-bullets { align-self: start; }
  .split { grid-template-columns: 1.15fr .85fr; align-items: start; gap: 2.5rem; }
  .split .media { margin: 0; }
  .closing-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
  .block { padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Cost calculator */
.calc { max-width: 46rem; }
.calc-tool { background: #fff; border: 1px solid var(--sky); border-radius: 14px; padding: 1rem; margin: 0 0 1.25rem; }
.calc-step { border: 0; padding: 0; margin: 0 0 1rem; }
.calc-step legend { font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; padding: 0; }
.choices { display: grid; gap: .5rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: flex; align-items: center; min-height: 52px; padding: .65rem .9rem .65rem 2.6rem;
  background: var(--sky-2); border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; position: relative;
}
.choice span::before {
  content: ""; position: absolute; left: .85rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem;
  border-radius: 50%; border: 2px solid var(--muted); background: #fff;
}
.choice input:checked + span { background: #fff; border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.choice input:checked + span::before { border-color: var(--navy); background: radial-gradient(circle, var(--cta) 0 45%, #fff 50%); }
.choice input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 2px; }
.calc-result { background: var(--panel); border-radius: 12px; padding: 1rem; margin-top: .5rem; }
.calc-result p { margin: 0 0 .5rem; }
.calc-job { font-weight: 700; font-size: 1.1rem; }
.calc-typical strong { font-size: 1.6rem; display: block; line-height: 1.2; }
.calc-disclaimer { margin: .75rem 0 0 !important; }
.calc .quote-box, .calc .quote-target { margin: 0 0 1.5rem; }
.sources { padding-left: 1.2rem; font-size: .95rem; }
.teaser { background: #fff; border: 1px solid var(--sky); border-left: 5px solid var(--cta); border-radius: 12px; padding: 1.1rem; }
@media (min-width: 600px) {
  .choices { grid-template-columns: 1fr 1fr; }
}