:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", Inter, Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-optical-sizing: auto;
}

.brand,
.main-nav,
.kicker,
.section-tag,
.button,
.text-link,
.hero-side-note,
.hero-bottom,
.card-count,
.card-content p,
.supplier-note,
.process-list,
.showcase-image span,
.contact-details,
.contact-form,
footer,
.material-label,
.material-tab,
.material-tab span,
.systems-usage,
.maker,
.maker > span,
.system-chip,
.system-group > p,
.equipment-grid,
.equipment-grid article > span,
.selection-grid span,
.profile-visual-top,
.profile-visual > p,
.profile-overline,
.profile-badge,
.profile-spec,
.profile-recommendation span,
.profile-disclaimer,
.profile-actions,
.profile-lightbox > p {
  font-family: var(--font-ui);
}

.kicker,
.section-tag {
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1.35;
}

.brand small { letter-spacing: .3em; white-space: nowrap; }
.brand-url {
  display: inline-block;
  margin-left: .58rem;
  padding-left: .62rem;
  border-left: 1px solid currentColor;
  font-size: .72em;
  letter-spacing: .1em;
  opacity: .72;
}
.main-nav a { font-size: .8rem; letter-spacing: -.01em; }
.button { font-size: .69rem; letter-spacing: .075em; }
.hero-side-note { font-size: .64rem; letter-spacing: .11em; }
.hero-bottom { font-size: .7rem; letter-spacing: .075em; }

.product-card {
  isolation: isolate;
}

.product-card > .window-graphic,
.product-card > .door-graphic,
.product-card > .slide-graphic,
.product-card > .blind-graphic,
.product-card > .garage-graphic,
.product-card > .pergola-graphic {
  top: 14%;
  bottom: 46%;
}

.product-card > .door-graphic {
  left: 36%;
  right: 36%;
}

.card-count {
  font-size: .72rem;
  letter-spacing: .08em;
}

.card-content {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title action"
    "copy copy";
  column-gap: 1rem;
  row-gap: .85rem;
}

.card-content h3 {
  grid-area: title;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
}

.card-content p {
  grid-area: copy;
  max-width: 38rem;
}

.card-content > a { grid-area: action; }

.product-card--text-stack .card-content {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title action"
    "copy copy";
  column-gap: 1rem;
  row-gap: .85rem;
}

.product-card--text-stack .card-content h3 { grid-area: title; }
.product-card--text-stack .card-content p {
  grid-area: copy;
  max-width: 38rem;
}
.product-card--text-stack .card-content > a { grid-area: action; }

.product-card--text-stack > .slide-graphic,
.product-card--text-stack > .blind-graphic,
.product-card--text-stack > .garage-graphic {
  bottom: 44%;
}

.card-content p {
  font-size: .9rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.card-content > a {
  flex: 0 0 auto;
}

.trust-row span,
.process-list p,
.system-group > p,
.equipment-grid p,
.selection-grid p {
  font-family: var(--font-ui);
  text-wrap: pretty;
}

.material-tab {
  font-family: var(--font-ui);
  letter-spacing: -.015em;
}

.material-tab span,
.maker > span,
.equipment-grid article > span {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 650;
  letter-spacing: .08em;
}

.material-label,
.systems-usage,
.profile-visual-top,
.profile-overline,
.profile-badge,
.profile-spec span,
.profile-recommendation span,
.profile-actions a {
  letter-spacing: .09em;
}

.material-label { font-size: .68rem; }
.systems-usage { font-size: .75rem; }
.systems-usage strong { font-size: .65rem; }
.system-chip { font-size: .72rem; letter-spacing: -.01em; line-height: 1.25; }
.system-group > p { font-size: .82rem; line-height: 1.6; }
.equipment-grid p { font-size: .84rem; line-height: 1.62; }
.profile-visual-top { font-size: .62rem; }
.profile-visual > p { font-size: .68rem; }
.profile-overline { font-size: .65rem; }
.profile-badge { font-size: .62rem; }
.profile-spec span { font-size: .61rem; }
.profile-disclaimer { font-size: .68rem; }
.profile-actions a { font-size: .63rem; }
.contact-form label,
.contact-details span { font-size: .68rem; letter-spacing: .1em; }
.form-note, footer { font-size: .73rem; }

.detail-icon {
  display: grid;
  place-items: center;
}

.semantic-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.semantic-icon .icon-accent {
  stroke: #9dbd20;
  stroke-width: 4;
}

.semantic-icon text {
  fill: currentColor;
  stroke: none;
  font: 650 8px var(--font-ui);
  letter-spacing: -.02em;
}

@media (max-width: 900px) {
  .card-content { grid-template-columns: minmax(0, 1fr) auto; }
  .card-content p { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 600px) {
  .product-card > .window-graphic,
  .product-card > .door-graphic,
  .product-card > .slide-graphic,
  .product-card > .blind-graphic,
  .product-card > .garage-graphic,
  .product-card > .pergola-graphic {
    top: 13%;
    bottom: 52%;
  }

  .product-card > .door-graphic {
    left: 37%;
    right: 37%;
  }

  .product-card--text-stack > .slide-graphic,
  .product-card--text-stack > .blind-graphic,
  .product-card--text-stack > .garage-graphic {
    bottom: 51%;
  }

  .card-content { gap: 1rem; }
  .card-content p { font-size: .92rem; max-width: 29rem; }
  .systems-usage { gap: 1.5rem; }
}