/* =========================================================
   Clear Link v1.11.3 — navigation clarity / section hierarchy guard
   Loaded last. 2026-09-06
   ========================================================= */

/* ---------------------------------------------------------
   1) Cross-page navigation must look actionable
   --------------------------------------------------------- */
main :where(.arrow-link,.cl-nav-button){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:50px!important;
  width:auto!important;
  max-width:100%!important;
  padding:13px 22px!important;
  border:1px solid #173d34!important;
  border-radius:999px!important;
  background:#173d34!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  white-space:normal!important;
  box-shadow:0 10px 24px rgba(23,61,52,.12)!important;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease!important;
}
main :where(.arrow-link,.cl-nav-button):hover{
  transform:translateY(-2px)!important;
  background:#245246!important;
  box-shadow:0 14px 30px rgba(23,61,52,.17)!important;
}
main :where(.arrow-link,.cl-nav-button)>:where(span,b){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  color:inherit!important;
  font:inherit!important;
  position:static!important;
  transform:none!important;
}
main .cl-nav-button--light{
  border-color:#fff!important;
  background:#fff!important;
  color:#173d34!important;
}

/* A card that moves to another page gets a visible action pill, not a bare arrow. */
main .cl-card-action,
main .cl-inline-action{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:38px!important;
  margin-top:18px!important;
  padding:9px 15px!important;
  border:1px solid rgba(23,61,52,.18)!important;
  border-radius:999px!important;
  background:#173d34!important;
  color:#fff!important;
  font-family:inherit!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.25!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
main .cl-card-action b,
main .cl-inline-action span{
  position:static!important;
  inset:auto!important;
  display:inline!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  font:inherit!important;
  line-height:inherit!important;
  transform:none!important;
}

/* Keep the whole card clickable, but make that fact visually obvious. */
main :where(
  .reform-menu-card,.work-card,.journal-card,.ft-guide-card,.ft-case-card,
  .sf-hub-card,.pf-hub-card,.cf-menu-card,.af-hub-card,.bp-card[href],
  .bp-service-grid>a,.bp-problem-grid>a,.column-category-card,.column-guide-card
){
  cursor:pointer!important;
}

/* Next-page/navigation cards also read as controls. */
main :where(.sf-next-grid,.pf-next-grid,.cf-next__grid,.af-next-grid,.ftc-next__grid,.bp-next__grid)>a{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:118px!important;
  padding:20px!important;
  border:1px solid rgba(23,61,52,.16)!important;
  border-radius:18px!important;
  background:#fff!important;
  color:#173d34!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:0 10px 24px rgba(23,61,52,.06)!important;
}
main :where(.sf-next-grid,.pf-next-grid,.cf-next__grid,.af-next-grid,.ftc-next__grid,.bp-next__grid)>a:hover{
  border-color:rgba(23,61,52,.34)!important;
  box-shadow:0 14px 30px rgba(23,61,52,.10)!important;
}
main :where(.sf-next-grid,.pf-next-grid,.cf-next__grid,.af-next-grid,.ftc-next__grid,.bp-next__grid)>a>.cl-inline-action{
  margin-top:4px!important;
}

/* ---------------------------------------------------------
   2) Section title + subcatch alignment contract
   --------------------------------------------------------- */
main section :where(
  .section-title,.home-section-head,.sf-heading,.sf-heading-grid,.pf-heading,.pf-heading-grid,
  .cf-heading,.af-heading,.ftc-heading,.ft-section-head,.ft-consult__head,.ft-promise__heading,
  .bp-section__heading,.bp-gallery__heading,.fq-group__heading,.cl-common-faq__heading
){
  text-align:center!important;
}
main section .section-title__en,
main section .section-title__lead,
main section :where(.home-section-head,.sf-heading,.pf-heading,.cf-heading,.af-heading,.ftc-heading,.ft-section-head,.ft-consult__head,.ft-promise__heading,.cl-common-faq__heading)>p:not(:first-child),
main section :where(.sf-heading-grid,.pf-heading-grid)>p{
  width:min(100%,800px)!important;
  max-width:800px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
main section .section-title__lead{
  margin-top:16px!important;
  line-height:1.9!important;
}

/* If a title fits naturally on one line, do not force an artificial break. */
@media(min-width:1100px){
  .ft-page .ft-help-topics .ft-section-head h2{
    max-width:none!important;
    font-size:clamp(36px,3.35vw,48px)!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
  }
}
@media(max-width:1099px){
  .ft-page .ft-help-topics .ft-section-head h2{
    white-space:normal!important;
    text-wrap:balance!important;
  }
}

/* ---------------------------------------------------------
   3) FAQ: heading first, questions second, CTA last
   --------------------------------------------------------- */
.cl-common-faq__stack,
.sf-faq>.sf-shell,
.pf-faq>.pf-shell,
.bp-faq__wrap{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(26px,4vw,42px)!important;
  width:100%!important;
}
.cl-common-faq__heading,
.sf-faq .sf-heading,
.pf-faq .pf-heading,
.bp-faq__wrap>.bp-section__heading{
  order:1!important;
  position:static!important;
  width:100%!important;
  max-width:980px!important;
  margin:0 auto!important;
  text-align:center!important;
}
.cl-common-faq__list,
.sf-faq-list,
.pf-faq-list,
.bp-faq__list{
  order:2!important;
  width:min(100%,920px)!important;
  max-width:920px!important;
  margin:0 auto!important;
}
.cl-common-faq__action,
.sf-faq__action,
.pf-faq__action,
.bp-faq__action{
  order:3!important;
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
  margin:0!important;
}
.cl-common-faq__list details,
.sf-faq-list details,
.pf-faq-list details,
.bp-faq__list details{
  width:100%!important;
}

/* ---------------------------------------------------------
   4) TOP maintenance experience card — no clipping at any width
   --------------------------------------------------------- */
.home-main--future .maintenance__grid--with-visual{
  display:grid!important;
  grid-template-columns:minmax(250px,.62fr) minmax(280px,.9fr) minmax(360px,1.25fr)!important;
  gap:clamp(24px,3.6vw,48px)!important;
  align-items:stretch!important;
}
.home-main--future .maintenance__experience{
  min-width:250px!important;
  min-height:220px!important;
  padding:30px 22px!important;
  overflow:visible!important;
  border-radius:24px!important;
}
.home-main--future .maintenance__experience small{
  margin-bottom:14px!important;
  font-size:11px!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
}
.home-main--future .maintenance__experience strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(44px,4.4vw,64px)!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
}
.home-main--future .maintenance__experience span{
  margin-top:14px!important;
  font-size:12px!important;
  line-height:1.6!important;
  white-space:normal!important;
}
@media(max-width:1100px) and (min-width:821px){
  .home-main--future .maintenance__grid--with-visual{
    grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr)!important;
  }
  .home-main--future .maintenance__visual{
    grid-column:1/-1!important;
    width:min(100%,920px)!important;
    margin-inline:auto!important;
  }
}
@media(max-width:820px){
  .home-main--future .maintenance__grid--with-visual{
    grid-template-columns:1fr!important;
  }
  .home-main--future .maintenance__experience{
    min-width:0!important;
    min-height:180px!important;
    width:100%!important;
    padding:26px 18px!important;
  }
  .home-main--future .maintenance__experience strong{
    font-size:clamp(46px,14vw,62px)!important;
  }
}

/* ---------------------------------------------------------
   5) Mobile tap clarity
   --------------------------------------------------------- */
@media(max-width:820px){
  main :where(.arrow-link,.cl-nav-button){
    min-height:52px!important;
    width:min(100%,360px)!important;
    padding:14px 18px!important;
    font-size:14px!important;
  }
  main .home-section-action,
  main :where(.cl-common-faq__action,.sf-faq__action,.pf-faq__action,.bp-faq__action){
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
  }
  main .cl-card-action,
  main .cl-inline-action{
    min-height:40px!important;
    padding:10px 14px!important;
    font-size:12px!important;
  }
  main :where(.sf-next-grid,.pf-next-grid,.cf-next__grid,.af-next-grid,.ftc-next__grid,.bp-next__grid)>a{
    min-height:96px!important;
    padding:18px 16px!important;
  }
}

/* First-time case section follows the same heading -> content -> CTA hierarchy. */
.ft-page .ft-cases__head{
  display:block!important;
  width:100%!important;
  max-width:980px!important;
  margin:0 auto clamp(28px,4vw,44px)!important;
  text-align:center!important;
}
.ft-page .ft-cases__head .ft-kicker,
.ft-page .ft-cases__head h2{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.ft-page .ft-cases__action{
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
  margin-top:clamp(28px,4vw,44px)!important;
}