/* TapHelp responsive rebuild — fluid structure with controlled copy ranges */
html, body { width:100%; min-width:0; overflow-x:hidden; }
body { font-size:18px; }
.container, .hero__inner, .intro__inner, .faq__inner { width:min(calc(100% - 32px),1180px); margin-inline:auto; }
.hero__inner { width:min(calc(100% - 32px),920px); }
.intro__inner { width:min(calc(100% - 32px),780px); }
.faq__inner { width:min(calc(100% - 32px),880px); }
.hero__logo { width:min(440px, calc(100vw - 64px)); }
.intro__copy { width:min(520px,100%); margin-inline:auto; transform:none; }
.service-grid { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),330px)); justify-content:center; width:auto; }
.service-card { width:100%; }
.steps-grid { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),330px)); justify-content:center; width:auto; }
.step-card { width:100%; }
.about-card { width:min(calc(100% - 32px),780px); }
.about-card__body { width:min(500px,100%); transform:none; }
.price-card { width:min(340px,calc(100% - 32px)); }

.about-phone-break {
  display:none;
}

/* Mobile structure: one gutter, full-width prose, and flexible cards. */
@media (max-width:1023px) {
  .container,.hero__inner,.intro__inner {
    width:calc(100% - 32px);
    max-width:none;
  }

  .faq__inner {
    width:calc(100% - 12px);
    max-width:none;
  }

  /* Portrait service cards retain their approved frame and internal columns. */
  .service-grid {
    width:100%;
    max-width:678px;
    grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),330px));
    grid-auto-rows:1fr;
  }

  .steps-grid {
    width:100%;
    max-width:none;
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:1fr;
  }

  .service-card {
    grid-template-columns:70px 186px;
    column-gap:12px;
    width:100%;
    min-width:0;
    max-width:330px;
    height:126px;
    min-height:126px;
    padding:15px 10px;
  }



  .service-card img,.service-card>div { transform:none; }
  .service-card>div { min-width:0; }

  .step-card {
    width:100%;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:176px;
  }
  .step-card h3 { white-space:normal; }

  /* The About card supplies its own gutter, avoiding double inset. */
  .about-card {
    width:100%;
    max-width:none;
    margin-inline:0;
    padding:31px 16px;
  }

  .intro__copy,.about-card__body {
    width:100%;
    margin-inline:auto;
    transform:none;
  }

  .price-card { width:100%; max-width:340px; }

  .footer { padding-left:16px; padding-right:16px; }
  .footer__inner,.footer p.footer__legal {
    width:100%;
    max-inline-size:none;
  }
}

/* Appointment layout: retain the centered third card. */
@media (min-width:650px) and (max-width:1023px) {
  .steps-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .steps-grid .step-card:last-child {
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - 24px) / 2);
  }
}

/* Shared service-card design for every width and orientation. */
.service-grid {
  width:100%;
  max-width:678px;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),330px));
  grid-auto-rows:1fr;
}
.service-card {
  grid-template-columns:70px 186px;
  column-gap:12px;
  width:100%;
  min-width:0;
  max-width:330px;
  height:126px;
  min-height:126px;
  padding:15px 10px;
}
.service-card img,.service-card>div { transform:none; }
.service-card>div { min-width:0; }

@media (max-width:599px) {
  .section { padding:42px 0; }

  .hero__logo {
    width:clamp(285px,68.85vw,360px);
    max-width:calc(100% - 28px);
  }
  .hero__trust { width:auto; margin-inline:auto; }
  .hero__meta span { display:block; height:0; margin:0; overflow:hidden; font-size:0; line-height:0; }

  .intro__copy br:not(.intro-approved-break),
  .about-approved-break,
  .footer__legal br { display:none; }

  .pricing { padding-block:32px; }
  .price-card p.price-card__price { white-space:nowrap; font-size:clamp(24px,8vw,28px); }
  .keep-together { white-space:nowrap; }

  .faq summary { padding:20px 36px 20px 12px; }
  .faq summary::after { right:12px; }

  .footer { padding:34px 16px 30px; }
  .footer p.footer__legal {
    width:calc(100vw - 12px);
    margin:22px 0 0 50%;
    transform:translateX(-50%);
    font-size:14px;
    line-height:1.55;
    text-wrap:wrap;
  }
}

@media (min-width:1024px) {
  .service-grid { grid-template-columns:repeat(2,330px); }
  .steps-grid { grid-template-columns:repeat(3,330px); }
}

/* 1024px boundary: preserve the three-card composition without horizontal overflow. */
@media (min-width:1024px) and (max-width:1037px) {
  .steps-grid {
    width:calc(100% - 32px);
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Retain the approved landscape logo scale; layout uses the shared mobile rules. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:550px) {
  .hero__logo {
    width:clamp(260px, calc(28.41vw + 20.2px), 285px);
  }
}

@media (orientation:landscape) and (min-width:933px) and (max-width:1023px) and (max-height:550px) {
  .hero__logo {
    width:clamp(285px, calc(44.1176vw - 126.617px), 315px);
  }
}

@media (orientation:landscape) and (min-width:1001px) and (max-width:1023px) and (max-height:550px) {
  .hero__logo {
    width:calc(997.5px - 68.1818vw);
  }
}

/* ---------------------------------------------------------
   TEXT COMPOSITION SYSTEM
   Fluid prose first; intentional measures and surgical locks only.
   --------------------------------------------------------- */

/* Headings should distribute words cleanly instead of leaving tiny tails. */
h2,
.intro__title,
.about-card h2,
.faq summary {
  text-wrap: balance;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Normal prose should prefer visually cleaner line endings. */
.intro__copy p,
.about-card__body p,
.faq__answer,
.footer__legal {
  text-wrap: pretty;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Use readable measures instead of authored line breaks. */
.intro__copy p {
  max-inline-size: 52ch;
}

.about-card__body p {
  max-inline-size: 55ch;
}

.faq__answer {
  max-inline-size: none;
}

/* Prose fills its mobile container; desktop measures stay below. */
@media (max-width:1023px) {
  .intro__copy p,
  .about-card__body p {
    max-inline-size:none;
    text-wrap:wrap;
  }
}

@media (max-width:599px) {
  .intro__copy p {
    margin-inline:auto;
    font-size:18px;
    line-height:1.55;
  }

  .about-phone-break { display:block; }

  .about-card__body p,
  .about-card__body p + p {
    margin-inline:auto;
    font-size:18px;
    line-height:1.55;
  }

  .faq summary { text-wrap:balance; }
  .faq__answer { text-wrap:pretty; }
}

/* FAQ 1 and 2: approved breaks at every viewport. */
.faq-approved-break { display:block; }

/* FAQ 3 and 4: natural wrapping below desktop. */
.faq__inner details:nth-of-type(n+3) .faq-approved-break {
  display:none;
}

/* FAQ 3 and 4: restore their approved desktop breaks. */
@media (min-width:1024px) {
  .faq__inner details:nth-of-type(n+3) .faq-approved-break {
    display:block;
  }
}



/* Approved desktop legal composition: one intentional midpoint break. */
.legal-balanced-break { display:none; }
@media (min-width:1024px) {
  .legal-balanced-break { display:inline; }
}

/* Approved laptop/desktop hero — tighter vertical rhythm without changing logo scale. */
@media (min-width:1024px) {
  .hero__inner { padding-top:12px; }
  .hero__logo { margin-bottom:8px; }
  .hero__rule { margin:8px 0 10px; }
  .hero__trust { margin-bottom:5px; }
  .hero__meta { margin-bottom:5px; }
  .intro { margin-top:18px; }
}


/* Approved desktop About composition: wider prose measure with two intentional breaks. */
.about-approved-break { display:block; }
.mobile-keep-together { white-space:nowrap; }
@media (max-width:1023px) {
  .about-keep-together { white-space:nowrap; }
}
@media (max-width:649px) {
  .about-card__body {
    width:calc(100% - 16px);
    transform:translateX(8px);
  }
}
@media (min-width:1024px) {
  .about-card__body {
    width:min(650px,100%);
  }
  .about-card__body p {
    max-inline-size:none;
  }
  .about-approved-break { display:block; }
}


/* Approved Intro composition: both intentional breaks apply at every viewport. */
.intro-approved-break { display:block; }

@media (min-width:1024px) {
  .intro__copy {
    width:min(620px,100%);
  }
  .intro__copy p {
    max-inline-size:none;
  }
}

/* Approved desktop optical centering for Intro and About prose blocks. */
@media (min-width:1024px) {
  .intro__copy {
    transform: translateX(8px);
  }
  .about-card__body {
    transform: translateX(8px);
  }
}

/* Approved desktop polish: larger About body copy, tighter Intro-to-services rhythm,
   and slightly shorter About card. */
@media (min-width:1024px) {
  .about-card__body p {
    font-size: 19px;
    line-height: 1.56;
  }

  .about-card__body p + p {
    font-size: 18.5px;
    margin-top: 22px;
  }

  .intro {
    padding-bottom: 38px;
  }

  .services {
    padding-top: 52px;
  }

  .about-card {
    padding-bottom: 24px;
  }

  .about-card__direct {
    margin-top: 22px;
  }
}

/* Approved desktop vertical-rhythm refinement: stronger spacing adjustment only. */
@media (min-width:1024px) {
  .intro {
    padding-bottom: 32px;
  }

  .services {
    padding-top: 46px;
  }

  .about-card {
    padding-bottom: 16px;
  }

  .about-card__direct {
    margin-top: 18px;
  }
}

/* Approved desktop adjustment: move the About section up 18px. */
@media (min-width:1024px) {
  .about.section {
    padding-top: 44px;
  }
}

/* Approved desktop adjustment: move all text inside the About card up 18px. */
@media (min-width:1024px) {
  .about-card {
    padding-top: 13px;
    padding-bottom: 34px;
  }
}

/* Approved desktop adjustment: move About-card text down 8px from prior position. */
@media (min-width:1024px) {
  .about-card {
    padding-top: 21px;
    padding-bottom: 26px;
  }
}