/* NEXT Garage — canonical typography & spacing layer
   2026-10-01. Loaded last so the site has one final type/rhythm contract. */

:root{
  --nx-type-body:16px;
  --nx-type-body-mobile:15.5px;
  --nx-type-label:10px;
  --nx-type-label-mobile:9px;
  --nx-section-space:92px;
  --nx-section-space-dense:88px;
}

html{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  font-family:'PT Sans',Arial,sans-serif;
  font-kerning:normal;
}
h1,h2,h3,h4,.product-size,.product-price,.total span{
  font-family:'Oswald',sans-serif;
  font-kerning:normal;
}
.eyebrow,.section-no,.btn,.link,.pill,.pick,
.nav a,.region-btn,figcaption,.nx-portfolio-kicker,
.nx-install-kicker,.nx-proof-label{
  font-family:'Tektur',sans-serif;
}

/* Header: navigation must be readable, not decorative microtype. */
.nav a{
  font-size:10px!important;
  line-height:1.15!important;
  letter-spacing:.06em!important;
}
.region-btn{
  font-size:9.5px!important;
  line-height:1!important;
  letter-spacing:.065em!important;
}
.header-lead,.btn{
  font-size:10.5px!important;
  line-height:1!important;
  letter-spacing:.075em!important;
}
.link{
  font-size:10px!important;
  letter-spacing:.075em!important;
}
.phone{font-size:14px!important}

/* Global labels. */
.section-no{
  padding-top:6px!important;
  font-size:var(--nx-type-label)!important;
  line-height:1.3!important;
  letter-spacing:.09em!important;
}
.eyebrow{
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:.09em!important;
}
.hero .eyebrow{font-size:10.5px!important}

/* Top-level section rhythm. Dense informational blocks get slightly less air. */
main>#catalog.section{padding-block:92px!important}
main>#calc.section{padding-block:96px!important}
main>#construction.section{padding-block:88px!important}
main>#works.section{padding-block:96px!important}
main>#install.section{padding-block:88px!important}
main>#prepare.section{padding-block:88px!important}
main>#faq.section{padding-block:88px!important}
main>#reviews.section{padding-block:88px!important}
main>#contacts.section{padding-block:96px!important}

.section-head:not(.compact){
  grid-template-columns:132px minmax(0,1.25fr) minmax(280px,.62fr)!important;
  gap:28px!important;
  margin-bottom:40px!important;
}
#calc .section-head{margin-bottom:30px!important}
.nx-portfolio-head,.nx-site-guide-head{margin-bottom:38px!important}

.section-head p,
.nx-faq-head>p,
.nx-reviews-head-copy>p,
.nx-contact-copy>p:not(.eyebrow){
  font-size:16px!important;
  line-height:1.55!important;
  max-width:560px;
  text-wrap:pretty;
}

/* One hierarchy, with a dense tier for long editorial headlines. */
main :is(#catalog,#calc,#install) .section-head h2{
  font-size:clamp(54px,4.25vw,64px)!important;
  line-height:.95!important;
  letter-spacing:-.024em!important;
  text-wrap:balance;
}
main :is(#construction,#works,#prepare) .section-head h2{
  font-size:clamp(50px,4vw,60px)!important;
  line-height:.95!important;
  letter-spacing:-.022em!important;
  text-wrap:balance;
}
.nx-faq-head h2{
  font-size:clamp(48px,3.7vw,54px)!important;
  line-height:.96!important;
  letter-spacing:-.02em!important;
  text-wrap:balance;
}
.nx-reviews-head h2,
.nx-contact-copy h2{
  font-size:clamp(54px,4.25vw,64px)!important;
  line-height:.95!important;
  letter-spacing:-.024em!important;
  text-wrap:balance;
}

/* Catalog. */
.catalog-tools .pill{
  font-size:10px!important;
  letter-spacing:.07em!important;
}
.product-top{font-size:8.5px!important}
.nx-product .product-use>span{
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
}
.nx-product .product-use p{
  font-size:14px!important;
  line-height:1.45!important;
}
.product-meta{
  font-size:11px!important;
  line-height:1.4!important;
}
.pick{
  font-size:10px!important;
  letter-spacing:.07em!important;
}
.real-strip figcaption span,.real-strip__label,
.nx-multi-order-note__value span{
  font-size:8.5px!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
}
.nx-multi-order-note>a{
  font-size:9.5px!important;
  letter-spacing:.07em!important;
}

/* Calculator: labels explain pricing, so they cannot sit at 6–8 px. */
.nx-calc-promise span{
  font-size:9px!important;
  line-height:1.15!important;
  letter-spacing:.065em!important;
}
#calc .step-head>span{font-size:8.5px!important}
#calc .step-head h3{
  font-size:23px!important;
  line-height:1.02!important;
  letter-spacing:-.01em!important;
}
#calc .step-head p{
  font-size:12px!important;
  line-height:1.35!important;
}
#calc .option b{font-size:16px!important}
#calc .option small,
#calc .color small,
.nx-height-rate span{font-size:10.5px!important}
#calc .color b{font-size:13.5px!important}
#calc .hint{font-size:12px!important;line-height:1.45!important}
#calc .nx-summary-head .eyebrow{font-size:9px!important}
.nx-live-dot{font-size:9px!important}
.nx-summary-model small,
.nx-breakdown>p,
.nx-summary-included>span,
.total small{
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.075em!important;
}

/* Construction, portfolio, installation and preparation. */
.nx-proof-label,.nx-portfolio-kicker,.nx-install-kicker{
  font-size:9px!important;
  line-height:1.3!important;
  letter-spacing:.085em!important;
}
.nx-proof-specs article>span,
.nx-preflight-state>span,
.nx-preflight-list article>small,
.nx-preflight-foot span,
.nx-flow-bridge span{
  font-size:8.5px!important;
  line-height:1.3!important;
  letter-spacing:.075em!important;
}
.nx-portfolio-main figcaption span{font-size:8.5px!important}
.nx-portfolio-tags span{font-size:9px!important}
.nx-portfolio-actions>a,
.nx-flow-bridge>a{
  font-size:9.5px!important;
  letter-spacing:.07em!important;
}
.nx-install-time span{font-size:11px!important}
.nx-preflight-no{font-size:8.5px!important}

/* FAQ, reviews, contact and footer. */
.nx-faq-meter span,.nx-faq-num{
  font-size:8.5px!important;
  line-height:1.35!important;
}
.nx-faq-panel .faq-a p{
  font-size:15px!important;
  line-height:1.6!important;
}
.nx-review-source,
.nx-review-score-foot>span,
.nx-review-deal{
  font-size:9px!important;
  line-height:1.3!important;
  letter-spacing:.065em!important;
}
.nx-review-score-foot>a{font-size:9.5px!important}
.nx-contact-route span{font-size:8.5px!important}
.nx-contact-route b{
  font-size:16px!important;
  line-height:1.18!important;
}
.nx-contact-phone-card>span{font-size:9px!important}
.nx-social{font-size:9.5px!important}
.nx-form-card-head>span{font-size:9px!important}
.nx-form label>span{
  font-size:10px!important;
  line-height:1.3!important;
  letter-spacing:.065em!important;
}
.nx-form label>span small{font-size:8.5px!important}
.nx-form-assurance{
  font-size:9.5px!important;
  line-height:1.4!important;
  letter-spacing:.055em!important;
}
.consent{
  font-size:10px!important;
  line-height:1.5!important;
  letter-spacing:.045em!important;
}
.nx-footer-nav>span,.nx-footer-production>span{
  font-size:8.5px!important;
  letter-spacing:.08em!important;
}
.nx-footer-nav a{font-size:13px!important;line-height:1.3!important}
.nx-footer-map{font-size:9.5px!important}
.nx-footer-developer span{font-size:8.5px!important}

/* Consent/region notices are functional UI, not legal footnotes. */
.nx-notice__eyebrow{font-size:9px!important}
.nx-notice__chip{font-size:8.5px!important}
.nx-notice__action{
  font-size:9.5px!important;
  letter-spacing:.065em!important;
}

/* Tablet. */
@media(max-width:1180px){
  .section-head:not(.compact){
    grid-template-columns:112px minmax(0,1.14fr) minmax(250px,.66fr)!important;
    gap:24px!important;
  }
  main>#catalog.section,
  main>#calc.section,
  main>#works.section,
  main>#contacts.section{padding-block:82px!important}
  main>#construction.section,
  main>#install.section,
  main>#prepare.section,
  main>#faq.section,
  main>#reviews.section{padding-block:78px!important}
}

/* Stacked section heads before phone sizes. */
@media(max-width:980px){
  .section-head:not(.compact){
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
  .section-no{padding-top:0!important}
  .section-head p{max-width:680px!important}
}

/* Mobile is a separate composition: natural headline wrapping, readable labels,
   tighter section rhythm and no desktop-forced line breaks. */
@media(max-width:760px){
  :root{
    --nx-type-label:9.5px;
  }

  main>#catalog.section{padding-block:60px!important}
  main>#calc.section{padding-top:60px!important;padding-bottom:108px!important}
  main>#construction.section{padding-block:58px!important}
  main>#works.section{padding-block:62px!important}
  main>#install.section{padding-block:60px!important}
  main>#prepare.section{padding-block:60px!important}
  main>#faq.section{padding-block:58px!important}
  main>#reviews.section{padding-block:58px!important}
  main>#contacts.section{padding-block:64px!important}

  .section-head:not(.compact){
    gap:9px!important;
    margin-bottom:30px!important;
  }
  #calc .section-head{margin-bottom:24px!important}
  .nx-portfolio-head,.nx-site-guide-head{margin-bottom:30px!important}

  .section-head p,
  .nx-faq-head>p,
  .nx-reviews-head-copy>p,
  .nx-contact-copy>p:not(.eyebrow){
    font-size:15.5px!important;
    line-height:1.55!important;
  }

  main :is(#catalog,#calc) .section-head h2{
    font-size:clamp(38px,10.5vw,41px)!important;
    line-height:.96!important;
    letter-spacing:-.018em!important;
  }
  main :is(#construction,#prepare) .section-head h2{
    font-size:clamp(35px,9.7vw,38px)!important;
    line-height:.96!important;
    letter-spacing:-.016em!important;
  }
  main #works .section-head h2{
    font-size:clamp(38px,10.4vw,40px)!important;
    line-height:.95!important;
    letter-spacing:-.018em!important;
  }
  main #install .section-head h2{
    font-size:clamp(34px,9vw,35px)!important;
    line-height:.95!important;
    letter-spacing:-.012em!important;
  }
  .nx-faq-head h2,
  .nx-reviews-head h2,
  .nx-contact-copy h2{
    font-size:clamp(38px,10.5vw,41px)!important;
    line-height:.96!important;
    letter-spacing:-.018em!important;
  }

  .section-head h2 br,
  .nx-faq-head h2 br,
  .nx-reviews-head h2 br,
  .nx-contact-copy h2 br{
    display:none!important;
  }

  .section-no{font-size:9.5px!important}
  .eyebrow{font-size:9px!important}
  .hero .eyebrow{font-size:9.5px!important}
  .btn{font-size:10px!important}
  .pill{font-size:9.5px!important}
  .pick{font-size:10px!important}

  .nx-calc-promise{
    gap:7px!important;
  }
  .nx-calc-promise span{
    font-size:8.5px!important;
    line-height:1.2!important;
  }
  #calc .step-head h3{font-size:21px!important}
  #calc .step-head p{font-size:12px!important}
  #calc .option small,#calc .color small{font-size:10.5px!important}

  .nx-proof-label,.nx-portfolio-kicker,.nx-install-kicker{font-size:8.5px!important}
  .nx-faq-panel .faq-a p{font-size:15px!important}
  .nx-review-source,.nx-review-deal{font-size:8.5px!important}
  .nx-social{font-size:9px!important}
  .nx-form label>span{font-size:9.5px!important}
  .consent{font-size:9.5px!important}
}

@media(max-width:360px){
  main :is(#catalog,#calc) .section-head h2,
  .nx-faq-head h2,
  .nx-reviews-head h2,
  .nx-contact-copy h2{
    font-size:37px!important;
  }
  main :is(#construction,#prepare) .section-head h2{font-size:34px!important}
  main #works .section-head h2{font-size:36px!important}
  main #install .section-head h2{font-size:33px!important}
}

/* Breakpoint correction: 1024-class screens must not squeeze a 3-column heading grid. */
@media(max-width:1080px){
  .section-head:not(.compact){
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
  .section-no{padding-top:0!important}
  .section-head p{max-width:680px!important}
}

/* Portrait tablets: use the same readable single-column logic as phones for final sections. */
@media(max-width:860px){
  .nx-reviews-head{
    grid-template-columns:1fr!important;
    gap:26px!important;
    align-items:start!important;
  }
  .nx-contact-copy{display:block!important}
  .nx-contact-phone-card{margin-top:22px!important}
  .nx-faq-head{display:block!important}
  .nx-faq-meter{
    margin-top:26px!important;
    padding:18px 0 0!important;
    border-left:0!important;
    border-top:1px solid #ccd5d9!important;
  }
}
@media(max-width:860px){
  .nx-faq-head h2{max-width:620px!important}
}

/* Body-copy floor: explanatory text is never treated as decorative microcopy. */
.nx-quantity-help{
  font-size:13px!important;
  line-height:1.5!important;
}
.nx-proof-specs article>p{
  font-size:13px!important;
  line-height:1.5!important;
}
#install .nx-install-step-copy p{
  font-size:13px!important;
  line-height:1.45!important;
}
.nx-preflight-list p{
  font-size:13.5px!important;
  line-height:1.5!important;
}
.nx-preflight-foundation-copy p{
  font-size:14px!important;
  line-height:1.55!important;
}
.nx-preflight-foot p{
  font-size:13px!important;
  line-height:1.5!important;
}
.nx-footer-production p{
  font-size:12.5px!important;
  line-height:1.4!important;
}
@media(max-width:760px){
  .nx-quantity-help,
  .nx-proof-specs article>p,
  #install .nx-install-step-copy p,
  .nx-preflight-list p,
  .nx-preflight-foundation-copy p,
  .nx-preflight-foot p{
    font-size:14px!important;
    line-height:1.52!important;
  }
}

/* Specificity cleanup for legacy component rules. */
#catalog .section-no{font-size:10px!important}
.product-top b{
  font-size:8.5px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}
.frame-photo figcaption span{
  font-size:8.5px!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
}
#install .nx-install-kicker{
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.09em!important;
}
.nx-preflight-head>div:first-child>span,
.nx-preflight-foundation-copy>span{
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.09em!important;
}
.nx-quantity-benefit>span{
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.075em!important;
}
@media(max-width:760px){
  #catalog .section-no{font-size:9.5px!important}
  #install .nx-install-kicker,
  .nx-preflight-head>div:first-child>span,
  .nx-preflight-foundation-copy>span{font-size:8.5px!important}
}

/* 2026-10-01 — primary / secondary phone hierarchy */
.nxh .phone{
  font-size:16px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
}
.nx-drawer-phone-primary{
  color:#eef5f7!important;
  font:500 22px/1 'Oswald',sans-serif!important;
  letter-spacing:.005em!important;
}
.nx-drawer-phone-secondary{
  color:#80939d!important;
  font:400 14px/1.25 'PT Sans',Arial,sans-serif!important;
}
.nx-drawer-email{color:#718690!important}
.nx-footer-phones{
  margin:16px 0 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.nx-footer-phone-primary{
  color:#eef5f7!important;
  font:500 23px/1 'Oswald',sans-serif!important;
  letter-spacing:.005em!important;
}
.nx-footer-phone-secondary{
  color:#718690!important;
  font-size:13px!important;
  line-height:1.25!important;
}
@media(max-width:760px){
  .nx-drawer-phone-primary{font-size:21px!important}
  .nx-drawer-phone-secondary{font-size:14px!important}
  .nx-footer-phone-primary{font-size:22px!important}
  .nx-footer-phone-secondary{font-size:14px!important}
}

/* Responsive portfolio picture keeps the same block geometry as the original img. */
.nx-portfolio-picture{display:block}

/* 2026-10-01 — image optimization geometry fix: HTML width/height prevent CLS,
   CSS controls rendered aspect ratio at responsive widths. */
.nx-portfolio-thumb img{
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
}
.nx-portfolio-main img{
  height:auto!important;
}
@media(max-width:390px){
  .nx-portfolio-main img{
    aspect-ratio:1/1!important;
    object-fit:cover!important;
  }
}

/* 2026-10-01 — canonical anchor geometry.
   One offset only: exactly the fixed header height at each breakpoint. */
html{
  scroll-padding-top:0!important;
}
main>section[id]{
  scroll-margin-top:76px!important;
}
@media(max-width:1180px){
  main>section[id]{scroll-margin-top:72px!important}
}
@media(max-width:760px){
  main>section[id]{scroll-margin-top:68px!important}
}

/* 2026-10-01 — canonical card title alignment. */
/* Catalog: reserve the badge row so the HIT badge never pushes card content down. */
.nx-product .product-top{
  height:21px!important;
  min-height:21px!important;
}

/* Preparation checklist: descriptions start on one line even when a title wraps. */
@media(min-width:761px){
  .nx-preflight-list h4{
    min-height:1.96em!important;
  }
}

/* Foundation options: one title zone at every responsive width. */
.nx-preflight-bases b{
  min-height:2.1em!important;
}