/* Site-wide responsive overrides. !important needed because components use inline styles. */

html, body { margin: 0; padding: 0; background: #faf9f6; }
body { font-family: 'Inter', system-ui, sans-serif; color: #345048; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* ------------------------------------------------------------
   Neutralize a stale direct-edit text override: an earlier inline
   text edit wrapped the hero headline in <span class="__om-t">
   and pinned it to font-size:11px, so the headline rendered tiny
   regardless of the #top h1 rules. Force those spans to follow
   the headline's own type. Applies on every breakpoint.
   ------------------------------------------------------------ */
#top h1 .__om-t,
h1 .__om-t,
h2 .__om-t {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Tablet breakpoint */
@media (max-width: 960px) {
  .ck-grid-3 { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .ck-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ck-problem-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ck-about-grid { grid-template-columns: 1fr !important; }
  .ck-pay-explainer { grid-template-columns: 1fr !important; gap: 20px !important; text-align: left; }
  .ck-process-grid { grid-template-columns: 1fr 1fr !important; row-gap: 36px !important; }
  .ck-process-grid > *:nth-child(n) { align-items: flex-start !important; }
  .ck-contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ck-table-wrap { overflow-x: auto !important; }
  .ck-table-wrap > table { min-width: 720px; }
@media (max-width: 640px) {
  .ck-table-wrap > table { min-width: 520px; }
  .ck-table-wrap td, .ck-table-wrap th { padding: 10px 10px !important; font-size: 11.5px !important; }
  .ck-table-wrap th span, .ck-table-wrap td span { font-size: 10.5px !important; }
  .ck-price-card { text-align: center !important; align-items: center !important; }
  .ck-price-card > div { text-align: center !important; justify-content: center !important; }
  .ck-price-banner { text-align: center !important; align-items: center !important; }
  .ck-price-banner > div { align-items: center !important; text-align: center !important; }
  .ck-price-banner .ck-banner-right { align-items: center !important; text-align: center !important; }
  .ck-price-banner .ck-banner-right a { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; }
  .ck-banner-tagline { display: none !important; }
  .ck-banner-subtext { display: none !important; }
  .ck-price-banner .ck-price-range { font-size: clamp(2.25rem, 3.6vw, 2.925rem) !important; }
}
  section { padding-left: 24px !important; padding-right: 24px !important; }
  h1, h2 { word-break: break-word; }
}

/* Mobile breakpoint */
@media (max-width: 640px) {
  .ck-grid-3 { grid-template-columns: 1fr !important; }
  .ck-process-grid { grid-template-columns: 1fr !important; }
  .ck-process-grid > *:nth-child(n) { align-items: center !important; text-align: center !important; }
  .ck-form-grid { grid-template-columns: 1fr !important; }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  /* Hero needs tighter vertical padding */
  section#top { padding-top: 56px !important; padding-bottom: 72px !important; }
}

/* Print-friendly link reset for tap state on mobile */
a { -webkit-tap-highlight-color: rgba(63,128,116,0.12); }

/* ============================================================
   SERVICE CARD HOVER — matches pricing card lift + teal ring
   ============================================================ */
.ck-service-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; }
.ck-service-card:hover {
  transform: translateY(-8px) !important;
  border-color: #3F8074 !important;
  box-shadow: 0 0 0 1.5px #3F8074, 0 24px 50px rgba(22,63,52,.12) !important;
}
.ck-service-card.ck-service-card-featured:hover {
  border-color: #C4924A !important;
  box-shadow: 0 0 0 1.5px #C4924A, 0 24px 50px rgba(22,63,52,.2) !important;
}

/* ============================================================
   PRIMARY CTA BUTTON POLISH
   Shadow + lift applied globally. Class added in components;
   nav buttons intentionally excluded.
   ============================================================ */
.ck-btn-primary {
  box-shadow: 0 4px 14px rgba(63,128,116,.32) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s !important;
}
.ck-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(63,128,116,.48) !important;
}

/* Footer + Nav are already responsive in their own files */

/* Nav logo — increase rendered height above the component default */
.ck-nav-logo img { height: 53px !important; width: auto !important; }

/* Hero headshot — portrait card, slightly taller than before */
#top .ck-hero-grid > div:last-child > div {
  height: 469px !important;
}
@media (max-width: 960px) {
  #top .ck-hero-grid > div:last-child > div { height: 423px !important; }
}
#top .ck-hero-grid > div:last-child > div img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 10% !important;
}

/* Hide the connecting line on Process when stacked */
@media (max-width: 960px) {
  .ck-process-grid > div:first-child { display: none !important; }
}

/* Reduce hero padding on small screens */
@media (max-width: 960px) {
  section#top { padding-left: 24px !important; padding-right: 24px !important; padding-top: 64px !important; padding-bottom: 80px !important; }
}

/* ============================================================
   MOBILE TYPE + SPACING SCALE
   Desktop inline styles bottom out at 32–36px headings, which
   feel oversized and cramped on phones. Scale type down and
   open up spacing below 640px (with a tighter pass at 400px).
   ============================================================ */
@media (max-width: 640px) {
  /* --- Type scale --- */
  #top h1 { font-size: 1.88rem !important; line-height: 1.3 !important; letter-spacing: -0.02em !important; max-width: none !important; }
  /* "Every month." sits on its own line. */
  #top h1 em { display: block !important; }
  #top > div > div > p,
  #top p { font-size: 12.6px !important; line-height: 1.6 !important; text-align: center !important; }

  /* Section headlines (SectionHeading + dark PageHero h2) */
  section h2 { font-size: 1.28rem !important; line-height: 1.28 !important; letter-spacing: -0.015em !important; }
  /* Standalone page hero h1 (interior pages) */
  section h1 { font-size: 1.5rem !important; line-height: 1.22 !important; }
  section h3 { font-size: 0.98rem !important; }
  /* Long body copy a touch smaller */
  section p { font-size: 14px; line-height: 1.6; }

  /* --- Spacing: open things up vertically, trim side gutters --- */
  section { padding-top: 52px !important; padding-bottom: 52px !important;
            padding-left: 20px !important; padding-right: 20px !important; }
  #top { padding-top: 52px !important; padding-bottom: 60px !important; }
  .ck-hero-grid { gap: 32px !important; }

  /* --- Card padding: desktop cards use 40–44px; far too tight at edges --- */
  .ck-about-grid > div:last-child { padding: 28px 24px !important; }
  .ck-price-card { padding: 26px 22px !important; }
  [style*="padding: 44px"] { padding: 26px !important; }
  [style*="40px 44px"] { padding: 28px 24px !important; }
  [style*="40px 28px"] { padding: 28px 22px !important; }
  [style*="36px 36px"] { padding: 28px 24px !important; }

  /* Trust chips / FUD row: smaller + tighter so they don't dominate */
  #top .ck-hero-grid span { font-size: 11px; }
  /* Eyebrows: smaller, calmer */
  section [style*="letter-spacing"][style*="uppercase"],
  .ck-eyebrow { font-size: 10.5px !important; }
}

@media (max-width: 360px) {
  #top h1 { font-size: 1.35rem !important; }
  section h2 { font-size: 1.18rem !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   MOBILE DE-CLUTTER PASS
   Removes desktop artifacts that read as clutter when stacked:
   reserved title heights, oversized card padding, tight chip
   rows. Goal is a calmer, more breathable single-column flow.
   ============================================================ */
@media (max-width: 640px) {
  /* About card: centered text and CTA on mobile */
  #about .ck-about-grid > div:last-child { text-align: center !important; }
  #about .ck-about-grid > div:last-child a { align-self: center !important; }

  /* Service card titles drop their desktop 2.5em reserved height —
     no awkward empty gap above single-line titles when stacked. */
  #services .ck-grid-3 h3 { min-height: 0 !important; font-size: 1.08rem !important; }
  #services .ck-grid-3 > div { padding: 26px 22px !important; gap: 14px !important; }

  /* Problem section keeps its 2-up emoji grid but breathes:
     less padding, tighter gap, smaller emoji. */
  .ck-problem-grid > div:first-child { gap: 12px !important; }
  .ck-problem-grid > div:first-child > div { padding: 20px 16px !important; gap: 10px !important; }

  /* Hero: hide pills above headline on mobile; keep bottom trust chips. */
  #top .ck-hero-grid > div:first-child > div:first-child { display: none !important; }
  #top .ck-hero-grid > div:first-child > div:last-child { gap: 10px 16px !important; margin-top: 26px !important; }

  /* Center the headline + trust chips on mobile. */
  #top h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

  /* Trust pills: smaller still — tight padding + type. */
  #top .ck-hero-grid > div:first-child > div:first-child > span {
    font-size: 10px !important; padding: 4px 10px !important; gap: 4px !important;
  }
  #top .ck-hero-grid > div:first-child > div:first-child > span svg { width: 11px !important; height: 11px !important; }

  /* Full-width primary CTA reads cleaner than a floating pill. */
  #top a[href="contact.html"] { display: block !important; width: 100% !important; text-align: center !important; font-size: 15.7px !important; padding-left: 28px !important; padding-right: 28px !important; }

  /* Guarantee + range cards: a touch more vertical rhythm. */
  #pricing .ck-grid-3 { gap: 16px !important; }
}

/* ============================================================
   SERVICE PAGE BOTTOM CARDS — 25% smaller on mobile
   Targets ServiceHowItWorks step cards and PricingTeaser card.
   ============================================================ */
@media (max-width: 640px) {
  .ck-step-card { padding: 22px !important; gap: 10px !important; border-radius: 14px !important; }
  .ck-step-num { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 10px !important; }
  .ck-step-title { font-size: 13.5px !important; }
  .ck-step-body { font-size: 10.5px !important; }

  .ck-pt-card { padding: 27px !important; border-radius: 16px !important; }
  .ck-pt-eyebrow { font-size: 9px !important; }
  .ck-pt-price { font-size: 33px !important; }
  .ck-pt-name { font-size: 11px !important; }
  .ck-pt-bullet { padding: 9px 0 !important; font-size: 10.5px !important; }
  .ck-pt-footnote { font-size: 10px !important; padding: 10px 12px !important; margin-top: 13px !important; }
  .ck-pt-btn { padding: 9px 22px !important; font-size: 11px !important; margin-top: 16px !important; }
}

/* On the smallest phones, stack the Problem cards fully — a
   single column of full-width cards is calmer than a cramped 2-up. */
@media (max-width: 420px) {
  .ck-problem-grid > div:first-child { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PROBLEM SECTION: MOBILE EYEBROW REORDER
   On mobile the eyebrow lives inside the left cards div so it
   appears above the cards. The copy-column eyebrow is hidden.
   ============================================================ */
.ck-problem-eyebrow-mobile { display: none; }

@media (max-width: 960px) {
  .ck-problem-cards-col { display: none !important; }
  .ck-problem-eyebrow-mobile { display: block !important; margin-bottom: 4px; }
  .ck-problem-eyebrow-desktop { display: none !important; }
  .ck-problem-grid a.ck-btn-primary {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   SERVICE CARDS: MOBILE STACK ORDER
   On mobile (1-column), show Cleanup above Monthly Bookkeeping.
   Desktop 3-col order is unchanged.
   ============================================================ */
@media (max-width: 640px) {
  #services .ck-grid-3 > .ck-service-card:nth-child(1) { order: 2 !important; }
  #services .ck-grid-3 > .ck-service-card:nth-child(2) { order: 1 !important; }
  #services .ck-grid-3 > .ck-service-card:nth-child(3) { order: 3 !important; }
}