/* ============================================================================
   Bark & Mane of Westoplex — Meta ads qualification landing page
   Built on Brand/brand-tokens.css (inlined below) + page styles.
   ========================================================================== */

/* ---- Self-hosted Neulis Neue ------------------------------------------- */
@font-face {
  font-family: 'Neulis Neue';
  src: url('../fonts/neulis-neue.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue';
  src: url('../fonts/neulis-neue-bold.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Core palette -------------------------------------------------- */
  --main-street:      #006842;
  --green-light:      #5FA544;
  --bubble-blue:      #1DA1C8;
  --pavement:         #58595B;
  --white:            #FFFFFF;

  --main-street-dark: #005536;
  --bubble-blue-dark: #1689AB;

  --primary-container:   #E5F0EB;
  --secondary-container: #EBF5E4;
  --tertiary-container:  #E4F4F9;
  --border:              #E0E2E1;
  --border-strong:       #58595B;

  --font: 'Neulis Neue', 'Nunito', system-ui, sans-serif;
  --tracking-tight: -0.015em;
  --tracking-eyebrow: 0.08em;

  --xs: 4px;  --sm: 8px;   --md: 16px;  --lg: 24px;
  --xl: 32px; --2xl: 48px; --3xl: 64px; --section: 96px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px;

  --shadow-card:  0 2px 6px rgba(0, 0, 0, .06);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--tracking-tight);
  color: var(--pavement);
  background: var(--white);
}

/* Headlines are ALWAYS lowercase, bold, Main Street or Green Light. */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  color: var(--main-street);
  margin: 0;
}
h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; font-weight: 700; }
h4 { font-size: 19px; font-weight: 700; }

.accent { color: var(--green-light); font-style: normal; }

.eyebrow {
  font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--green-light);
  margin: 0 0 var(--sm);
}

p { margin: 0 0 var(--md); max-width: 65ch; }
.body-lg { font-size: 18px; line-height: 1.5; }
.body-sm { font-size: 11px; line-height: 1.5; }

strong { font-weight: 800; color: var(--main-street); }

/* ---- Buttons — always pill-shaped, bold ------------------------------- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  border-radius: var(--r-pill); padding: 13px 27px;
  font-family: var(--font); font-weight: 700; font-size: 15px;
  text-decoration: none; text-align: center;
}
.btn-primary   { background: var(--main-street); color: #fff; }
.btn-primary:hover { background: var(--main-street-dark); }
.btn-secondary { background: var(--green-light); color: #fff; }
.btn-cta       { background: var(--bubble-blue); color: #fff; }
.btn-cta:hover { background: var(--bubble-blue-dark); }
.btn-outline   { background: transparent; color: var(--main-street);
                 border: 2px solid var(--main-street); padding: 11px 25px; }
.btn-outline:hover { background: var(--primary-container); }
.btn-quiet {
  background: transparent; color: var(--pavement); border: 0;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: underline; padding: 8px;
}

.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--lg);
}
.card-feature {
  background: var(--primary-container); color: var(--main-street);
  border-radius: var(--r-lg); padding: var(--xl);
}
.panel-dark {
  background: var(--main-street); color: #fff;
  border-radius: var(--r-lg); padding: var(--xl);
}
.panel-dark h1, .panel-dark h2, .panel-dark h3, .panel-dark h4,
.panel-dark strong { color: #fff; }

.badge {
  display: inline-block; background: var(--secondary-container);
  color: var(--main-street); border-radius: var(--r-pill);
  padding: 4px 13px; font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

.input {
  font-family: var(--font); font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 16px; background: #fff; color: var(--pavement);
  width: 100%;
}
.input:focus { outline: 0; border: 2px solid var(--main-street); padding: 11px 15px; }

.marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--r-pill);
  background: var(--main-street); color: #fff; flex-shrink: 0;
}
.marker-secondary { background: var(--green-light); }

.roadway { width: 100%; height: 110px; display: block; }

/* ========================================================================
   Page layout
   ======================================================================== */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--lg); }

section { padding: var(--3xl) 0; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--md); padding-bottom: var(--md);
}
.site-header img { height: 56px; width: auto; display: block; }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.of-westoplex {
  font-weight: 700; font-size: 14px; line-height: 1.1;
  color: var(--green-light); text-transform: lowercase; white-space: nowrap;
}
.site-footer .of-westoplex { color: #fff; opacity: .9; }
.header-phone { text-align: right; }
.header-phone a {
  color: var(--main-street); font-weight: 800; font-size: 18px;
  text-decoration: none; white-space: nowrap;
}
.header-phone .hours { font-size: 11px; color: var(--pavement); }

/* ---- Hero -------------------------------------------------------------- */
.hero { background: var(--primary-container); padding: var(--3xl) 0; }
.hero .wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--2xl); align-items: center;
}
.hero h1 { font-size: 52px; }
.hero-img img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--sm); margin: var(--md) 0 var(--lg); }

/* ---- Honest positioning strip ------------------------------------------ */
.strip { background: var(--main-street); color: #fff; padding: var(--xl) 0; }
.strip .wrap { display: flex; gap: var(--lg); align-items: center; }
.strip p { margin: 0; max-width: none; font-size: 18px; line-height: 1.5; color: #fff; }
.strip strong { color: #fff; }

/* ---- Pillars ----------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg); margin-top: var(--xl); }
.pillar h4 { margin: var(--md) 0 var(--sm); }
.pillar p { font-size: 14px; margin: 0; }

/* ---- Pricing ------------------------------------------------------------ */
.price-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--md); margin-top: var(--xl); }
.price-card { text-align: center; padding: var(--md) var(--sm); }
.price-card .size { font-weight: 800; color: var(--main-street); text-transform: lowercase; font-size: 18px; }
.price-card .weight { font-size: 12px; margin: 2px 0 var(--sm); }
.price-card .amount { font-size: 32px; font-weight: 800; color: var(--main-street); line-height: 1.1; }
.price-card .amount span { font-size: 14px; font-weight: 700; }
.price-note { margin-top: var(--lg); }

/* ---- Process ------------------------------------------------------------ */
.process { background: var(--secondary-container); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lg); margin-top: var(--xl); }
.step { display: flex; flex-direction: column; gap: var(--sm); }
.step .marker { font-weight: 800; font-size: 22px; }

/* ---- Qualifier ---------------------------------------------------------- */
.qualifier { background: var(--tertiary-container); }
.quiz {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--2xl);
  max-width: 640px; margin: var(--xl) auto 0;
  box-shadow: var(--shadow-card);
}
.quiz-progress { display: flex; gap: var(--sm); justify-content: center; margin-bottom: var(--lg); }
.quiz-progress .dot {
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--border);
}
.quiz-progress .dot.on { background: var(--green-light); }
.quiz-step h3 { margin-bottom: var(--sm); }
.quiz-step .help { font-size: 14px; }
.quiz-options { display: flex; flex-direction: column; gap: var(--sm); margin: var(--lg) 0; }
.quiz-option {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 14px 18px; font-family: var(--font); font-size: 15px;
  font-weight: 700; color: var(--pavement);
}
.quiz-option:hover { border-color: var(--green-light); background: var(--secondary-container); }
.quiz-option .sub { display: block; font-weight: 400; font-size: 13px; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--lg); }
.quiz-field { margin-bottom: var(--md); }
.quiz-field label { display: block; font-weight: 700; font-size: 14px; color: var(--main-street); margin-bottom: var(--xs); }
.quiz-error { color: #B3261E; font-size: 13px; font-weight: 700; display: none; margin-top: var(--sm); }
.quiz-error.show { display: block; }
.deadend h3 { margin-bottom: var(--md); }
.consent { display: flex; gap: var(--sm); align-items: flex-start; font-size: 12px; line-height: 1.5; margin: var(--md) 0; }
.consent input { margin-top: 3px; }
.price-callout {
  background: var(--primary-container); border-radius: var(--r-md);
  padding: var(--lg); text-align: center; margin: var(--lg) 0;
}
.price-callout .amount { font-size: 40px; font-weight: 800; color: var(--main-street); line-height: 1.1; }
.price-callout p { margin: var(--sm) auto 0; font-size: 13px; }

/* ---- Testimonials -------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lg); margin-top: var(--xl); }
.quote p { font-size: 15px; font-style: italic; margin-bottom: var(--sm); }
.quote .who { font-weight: 800; color: var(--main-street); font-size: 14px; }

/* ---- Service area -------------------------------------------------------- */
.area-list { columns: 3; column-gap: var(--xl); margin: var(--lg) 0 0; padding: 0 0 0 20px; font-size: 15px; }
.area-list li { margin-bottom: 4px; break-inside: avoid; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq details {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--md) var(--lg); margin-bottom: var(--sm);
  background: #fff;
}
.faq summary {
  font-weight: 800; color: var(--main-street); cursor: pointer;
  font-size: 16px; text-transform: lowercase;
}
.faq details p { margin-top: var(--md); }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { background: var(--main-street); color: #fff; padding: var(--2xl) 0; }
.site-footer .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--xl); align-items: center; }
.site-footer img { height: 72px; width: auto; }
.site-footer p { color: #fff; font-size: 13px; margin: 0 0 var(--xs); max-width: none; }
.site-footer a { color: #fff; }
/* Slogan manuscript state: Title Case, regular weight, upright. */
.slogan { font-weight: 400; font-size: 15px; }
.slogan sup { font-size: 8px; }

/* ---- Thanks page ----------------------------------------------------------- */
.thanks-hero { min-height: 60vh; display: flex; align-items: center; background: var(--primary-container); }
.thanks-card { max-width: 680px; margin: 0 auto; }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  h1, .hero h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  section { padding: var(--2xl) 0; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-img { order: -1; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .steps, .quotes { grid-template-columns: 1fr; }
  .area-list { columns: 2; }
  .site-footer .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .strip .wrap { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .quiz { padding: var(--lg); }
  .site-header img { height: 44px; }
  .header-phone a { font-size: 15px; }
  .header-phone .hours { display: none; }
  .area-list { columns: 2; font-size: 14px; }
}