/* Site-wide type and controls. Loaded after layout/legacy sheets in base.html.
   Body reference: homepage product descriptions, 16px / 1.7.
   Keep sizes here; page sheets should only arrange components. */
:root {
  --sg-font-family: 'Rubik', sans-serif;
  --sg-title-size: clamp(30px, 3.4vw, 44px);
  --sg-section-title-size: clamp(26px, 2.8vw, 34px);
  --sg-card-title-size: clamp(20px, 2vw, 24px);
  --sg-title-related-size: 18px;
  --sg-title-product-size: 16px;
  --sg-title-article-size: 18px;
  --sg-font-body: 16px;
  --sg-font-lead: 18px;
  --sg-font-small: 14px;
  --sg-font-note: 13px;
  --sg-font-caption: 12px;
  --sg-font-eyebrow: 11px;
  --sg-font-input: 16px;
  --sg-line-body: 1.7;
  --sg-line-lead: 1.55;
  --sg-weight-body: 400;
  --sg-weight-heading: 600;
  --sg-space-xs: 8px;
  --sg-space-sm: 12px;
  --sg-space-md: 16px;
  --sg-space-lg: 24px;
  --sg-space-xl: 32px;
  --sg-grid-gap: 24px;
  --sg-section-space: 56px;
  --sg-card-padding: 24px;
  --sg-panel-padding: 32px;
  --sg-control-height: 46px;
  --sg-motion: .2s ease;
}
body { font-family: var(--sg-font-family); }
:is(.sg-landing, .home-apple, .user-content),
.topic-cluster, .architect-library {
  font-family: var(--sg-font-family);
  font-size: var(--sg-font-body);
  font-weight: var(--sg-weight-body);
  line-height: var(--sg-line-body);
}
/* Shared hierarchy includes pages still rendered by the constructor. */
h1, body h1.text-block__title, body .architect-library h1, .user-content h1,
.sg-landing h1, .index-apple .home-apple__hero h1 {
  font-size: var(--sg-title-size);
  font-weight: var(--sg-weight-heading);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--sg-text);
  text-wrap: balance;
}
h2, body .architect-library h2, .user-content h2,
.sg-landing h2, .index-apple .home-apple h2,
.topic-cluster h2 {
  font-size: var(--sg-section-title-size);
  font-weight: var(--sg-weight-heading);
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h3, body .architect-library h3, .sg-landing .sg-title--card, .user-content h3,
.sg-landing h3, .index-apple .home-apple h3 {
  font-size: var(--sg-card-title-size);
  font-weight: var(--sg-weight-heading);
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
}
:is(.user-content, .home-apple) :is(p, li) {
  font-size: var(--sg-font-body);
  font-weight: var(--sg-weight-body);
  line-height: var(--sg-line-body);
}
.sg-landing .sg-lead,
.home-apple .home-apple__lead {
  font-size: var(--sg-font-lead);
  font-weight: var(--sg-weight-body);
  line-height: var(--sg-line-lead);
  color: var(--sg-text-soft);
}
.home-apple :is(.home-apple__eyebrow, .home-apple__section-head > div > span, .home-apple__card-kicker),
.sg-landing .sg-eyebrow {
  font-size: var(--sg-font-eyebrow);
  font-weight: var(--sg-weight-heading);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-brand-strong);
}
.home-apple .home-apple__hero-note,
.home-apple .home-apple__news-meta {
  font-size: var(--sg-font-small);
  line-height: var(--sg-line-body);
}
.home-apple__hero-overlay strong { font-size: var(--sg-font-body); font-weight: 600; line-height: 1.4; }
.home-apple__hero-overlay span { font-size: var(--sg-font-small); line-height: var(--sg-line-lead); }
.home-apple__stat strong { font-size: clamp(30px, 3vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.home-apple__stat span { font-size: var(--sg-font-small); line-height: var(--sg-line-body); }
.topic-card__body p { font-size: var(--sg-font-body); line-height: var(--sg-line-body); }
/* One control geometry and response, including legacy forms and catalogue. */
body :is(.btn, .sg-button, .home-apple__button, .home-apple__text-link,
.search-block__button, .product-form__button, .product-item__buy,
.customer__submit-btn, .file-block__btn),
#cookieNotice .cookie-box button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--sg-control-height);
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--sg-radius-md);
  font-family: var(--sg-font-family);
  font-size: var(--sg-font-small);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--sg-motion), background-color var(--sg-motion), border-color var(--sg-motion), box-shadow var(--sg-motion);
}
.sg-landing .sg-text-link {
  font-size: var(--sg-font-small);
  font-weight: 600;
  line-height: 1.5;
  text-underline-offset: 5px;
}
.sg-landing .sg-material-link {
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}
:is(.sg-landing, .home-apple) a:hover { opacity: 1; }
:is(.sg-text-link, .sg-material-link, .user-content a):hover { color: var(--sg-brand-hover); }
body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sg-brand);
  outline-offset: 3px;
}
.sg-panel--inverse h2, .home-apple__cta h2 { color: #fff; }
.sg-panel--inverse .sg-eyebrow { color: inherit; }
@media (max-width:760px) {
  :root { --sg-font-lead: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  body :is(a, button, input, textarea, select, summary) { transition: none; }
}

/* Shared spacing rhythm. Album compositions can vary their image proportions. */
.home-apple__section, .home-apple__hero, .home-apple__stats,
.topic-cluster__wrapper, .architect-library__wrapper {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
.home-apple__section { margin-top: var(--sg-section-space); }
.home-apple__stats { gap: var(--sg-grid-gap); margin-block: 0 var(--sg-section-space); }
.home-apple__grid, .home-apple__feature-grid, .home-apple__split,
.home-apple__news, .home-apple__trust, .home-apple__partner-grid,
.sg-highgarden .hg-directions, .sg-highgarden .hg-pair,
.sg-highgarden .hg-roof-gallery, .sg-highgarden .hg-roof-spread,
.sg-company .sg-bureaus { gap: var(--sg-grid-gap); }
.home-apple__card-body,
.home-apple__feature-copy, .home-apple__feature--bureau-card .home-apple__feature-copy,
.home-apple__panel:not(.home-apple__panel--tour), .home-apple__panel-body,
.home-apple__trust-copy, .home-apple__showcase-copy, .home-apple__news-copy,
.sg-highgarden .hg-document-copy, .topic-card__body { padding: var(--sg-card-padding); }
.home-apple__hero-copy, .home-apple__cta,
.sg-highgarden .hg-opening-copy { padding: var(--sg-panel-padding); }
.home-apple__section-head, .sg-highgarden .hg-section-head,
.sg-company .sg-company-section-head { margin-bottom: var(--sg-space-xl); }
.home-apple h1 { margin-block: var(--sg-space-md) var(--sg-space-lg); }
.home-apple h2 { margin-top: var(--sg-space-xs); }
.home-apple h3 { margin-block: var(--sg-space-sm); }
.home-apple__hero-actions, .home-apple__feature--bureau-card .home-apple__feature-links,
.sg-company .sg-brand-links { margin-top: var(--sg-space-lg); }
.home-apple__card-links, .home-apple__feature-links { padding-top: var(--sg-space-lg); gap: var(--sg-space-sm); }
.sg-highgarden .hg-project figcaption { padding-top: var(--sg-space-md); }
.sg-company .sg-brand-copy p:not(.sg-eyebrow),
.sg-highgarden .hg-garden > div > p:not(.sg-eyebrow) { margin-bottom: var(--sg-space-md); }
.topic-cluster { padding-block: var(--sg-section-space); }
.topic-cluster__section + .topic-cluster__section { margin-top: var(--sg-section-space); }
@media (max-width:760px) {
  :root { --sg-section-space: 40px; --sg-card-padding: 20px; --sg-panel-padding: 24px; --sg-grid-gap: 16px; }
  .home-apple__section, .home-apple__hero, .home-apple__stats,
  .topic-cluster__wrapper, .architect-library__wrapper { width: calc(100% - 32px); }
}
body .architect-resource__description { font-size: var(--sg-font-body); line-height: var(--sg-line-body); }
body .architect-library__lead { font-size: var(--sg-font-lead); line-height: var(--sg-line-lead); }
/* Full descriptions keep body size; notes, metrics and image captions stay small. */
.sg-roof :is(.sg-roof__facts, .sg-roof__card, .sg-roof__layers, .sg-roof__steps, .sg-roof__bridge) p,
.sg-roof .sg-roof__complete-copy > p:not(.sg-roof__eyebrow),
.sg-substrate :is(.sg-substrate__benefits, .sg-substrate__system-cta, .sg-substrate__types) p {
  font-size: var(--sg-font-body); line-height: var(--sg-line-body);
}
body .home-apple__hero-copy { background: var(--sg-surface-soft); }
body .home-apple { color: var(--sg-text); }
body .home-apple__section-head p,
body .home-apple__card p, body .home-apple__feature-copy p,
body .home-apple__panel p, body .home-apple__trust-copy p,
body .home-apple__showcase-copy p, body .home-apple__news-card p { color: var(--sg-text-soft); }
body .sg-company :is(.sg-brand-row, .sg-contact-hero, .sg-contact-locations, .sg-contact-requisites),
body .sg-highgarden :is(.hg-garden, .hg-process) { gap: var(--sg-space-xl); }
body .architect-library__section { padding-block: var(--sg-section-space); }
body .architect-library__grid { gap: var(--sg-grid-gap); }
body .architect-resource { padding: var(--sg-card-padding); border-radius: var(--sg-radius-md); }
body .architect-library__section-head { margin-bottom: var(--sg-space-xl); }
@media (max-width:760px) {
  body .sg-company :is(.sg-brand-row, .sg-contact-hero, .sg-contact-locations, .sg-contact-requisites),
  body .sg-highgarden :is(.hg-garden, .hg-process) { gap: var(--sg-space-lg); }
}
/* Legacy constructor adapters. Keep these here until those layouts migrate. */
body .text-block__wrapper { padding-block: var(--sg-section-space) var(--sg-space-lg); }
body .promo-block2__wrapper,
body .logo-and-text__wrapper { padding-block: var(--sg-section-space); }
body .text-block__wrapper > .promo-block2:first-of-type .promo-block2__wrapper { padding-top: var(--sg-space-lg); }
body .user-content p + p { margin-top: var(--sg-space-md); }

/* Supporting content uses a quieter, compact title role. */
.topic-cluster h3 { font-size: var(--sg-title-related-size); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.topic-cluster__cards--products h3 { font-size: var(--sg-title-product-size); }
.topic-cluster__cards--posts h3,
.index-apple .home-apple__news-card h3 { font-size: var(--sg-title-article-size); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
/* Heights are measured per actual row by card-alignment.js, including fonts,
   responsive columns and wrapped action groups. Single cards stay natural. */
[data-sg-aligned-card] { min-width: 0; }
.sg-grid > .sg-card, [data-sg-card-body] { display: flex; flex-direction: column; min-width: 0; }
[data-sg-card-body] { flex: 1; }
[data-sg-card-slot] { box-sizing: border-box; min-height: var(--sg-card-slot-height, 0px); }
[data-sg-card-heading] { padding-top: var(--sg-card-title-offset, 0px); }
[data-sg-card-action] { margin-top: auto; }