/* Shared text roles. Keep later typography changes in this file. */
:root {
  --type-font: Montserrat, 'Segoe UI', sans-serif;
  --type-heading-color: #171717;
  --type-body-color: #222;
  --type-meta-color: #5b5b5b;
  --type-brand-color: #796126;
  --type-body-size: 20px;
  --type-body-leading: 1.8;
  --type-dialog-size: 21px;
  --type-dialog-title: 36px;
  --type-section-size: clamp(30px, 3vw, 40px);
  --type-card-size: 24px;
  --type-feature-size: 28px;
  --type-project-size: 22px;
  --type-label-size: 18px;
  --type-action-size: 16px;
  --type-meta-size: 14px;
  --type-eyebrow-size: 12px;
}

body {
  font-family: var(--type-font);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--type-body-color);
}
body :is(h1, h2, h3, h4, p, li, a, button, summary, label, input, textarea, select) {
  font-family: var(--type-font);
}

/* Section headings and repeated card headings. */
body :is(.section h2, .product-story-copy h2, .partners h2, .contact-banner h2) {
  font-size: var(--type-section-size);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.8px;
  color: var(--type-heading-color);
}
body :is(.card-content h3, .capacity-block h3, .indicator-card h3,
  .company-value-grid h3, .imported-product-grid h3, .project-results > h3,
  .news-copy h3) {
  font-size: var(--type-card-size);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--type-heading-color);
}
body .project-entry h4 {
  font-size: var(--type-project-size);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--type-heading-color);
}

/* Ordinary sentences share one size, line height, weight and ink color. */
body :is(.intro-copy > p:not(.eyebrow),
  .product-layout > div > p:not(.eyebrow),
  .card-content > p, details > p, .achievement p, .capacity-block p,
  .indicator-card p, .indicator-team p, .project-entry p,
  .news-copy > p:not(.news-meta), .news-article-body p, .news-article-body li,
  .rock-master-layout > div > p:not(.product-lead), .imported-product-grid p,
  .dialog-main > p:not(.story-lead):not(.story-about):not(.form-status):not(.message-count)) {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: 400;
  color: var(--type-body-color);
  letter-spacing: 0;
}
body .indicator-team > div > p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: 600;
  color: var(--type-body-color);
}
body .daily-output > span {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--type-body-color);
}
body .section-heading > p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--type-body-color);
}
body .service-card { display: flex; flex-direction: column; }
body .service-card .service-photo { flex-shrink: 0; }
body .service-card .card-content { display: flex; flex: 1; flex-direction: column; }
body .service-card .card-content > p { min-height: 0; }
body .service-card .card-content details { margin-top: auto; }
body .indicator-card h3 { min-height: calc(var(--type-card-size) * 2.9); }

/* Dark project panels use the same text roles with light ink. */
body .project-panel h3 {
  font-size: var(--type-feature-size);
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}
body .project-panel > p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: 400;
  color: #f1f1ee;
}

/* All four company dialogs follow the Mission dialog's 21px / #222 copy. */
body :is(.dialog-main h2, .product-dialog h2, .rock-master-layout h2, .news-article h2) {
  font-size: var(--type-dialog-title);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--type-heading-color);
}
body .company-dialog .dialog-main :is(p, .company-services) {
  font-size: var(--type-dialog-size);
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0;
  color: #222;
}
body .company-dialog .company-services li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
body :is(.product-dialog .product-lead, .news-dialog .news-lead,
  .custom-materials-dialog .dialog-main .story-lead) {
  font-size: var(--type-dialog-size);
  line-height: 1.8;
  font-weight: 400;
  color: #222;
}

/* Action labels, captions and metadata keep their own consistent roles. */
body :is(.company-actions button, .product-actions strong) {
  font-size: var(--type-label-size);
  line-height: 1.6;
  font-weight: 650;
  color: var(--type-heading-color);
}
body :is(.button, .underlined, summary) {
  font-size: var(--type-action-size);
  line-height: 1.6;
  font-weight: 650;
}
body .project-tabs button {
  font-size: var(--type-label-size);
  line-height: 1.65;
  font-weight: 650;
}
body :is(.product-actions small, .small-index,
  .gallery-heading > p, .news-meta, .news-article-photos figcaption,
  .partner-logo span,
  .project-entry .project-location, .project-year,
  .stage-kind, .lightbox-toolbar p, .gallery-counter,
  .visitor-counter, .footer-bottom) {
  font-size: var(--type-meta-size);
  line-height: 1.7;
  color: var(--type-meta-color);
}
body :is(.experience .experience-period, .indicator-period) {
  font-size: var(--type-meta-size) !important;
  line-height: 1.7;
  color: var(--type-meta-color) !important;
}
body :is(.eyebrow, .experience .eyebrow, .footer-top .eyebrow,
  .product-dialog-toolbar .eyebrow) {
  font-size: var(--type-eyebrow-size);
  line-height: 1.7;
  font-weight: 700;
  color: var(--type-brand-color);
}
body :is(.hero .eyebrow, .hero-project-location) { color: #e8c57e; }
body .hero-project-name {
  font-size: var(--type-meta-size);
  line-height: 1.7;
  color: #fff;
}
body .hero-project-location {
  font-size: var(--type-meta-size);
  line-height: 1.7;
}
body .stage-caption {
  font-size: var(--type-label-size);
  line-height: 1.5;
  font-weight: 650;
  color: var(--type-heading-color);
}
body .product-actions .product-materials small + small {
  font-size: var(--type-meta-size);
  line-height: 1.7;
  color: var(--type-meta-color);
}
body .intro-visual .image-label > span {
  font-size: var(--type-meta-size);
  line-height: 1.7;
}

/* Form and footer copy use the same family and readable label sizes. */
body .contact-fields label {
  font-size: var(--type-action-size);
  line-height: 1.7;
  color: var(--type-body-color);
}
body .contact-fields :is(input, textarea) {
  font-size: var(--type-label-size);
  line-height: 1.7;
  color: var(--type-body-color);
}
body .dialog-main .message-count { font-size: var(--type-meta-size); color: var(--type-meta-color); }
body .dialog-main .form-status { font-size: var(--type-action-size); line-height: 1.7; }
body .footer-brand p { font-size: var(--type-meta-size); line-height: 1.7; color: var(--type-body-color); }
body .footer-top > div > a { font-size: var(--type-action-size); line-height: 1.7; color: var(--type-heading-color); }
body .footer-top > div > a.footer-phone { font-size: var(--type-body-size); }
body .footer-bottom, body .footer-bottom .visitor-counter { color: var(--type-body-color); }

@media (max-width: 980px) {
  body .company-dialog :is(.company-services, .company-value-grid) { grid-template-columns: 1fr; }
  body .company-dialog .company-value-grid article:last-child { grid-column: auto; }
  body .service-grid { grid-template-columns: 1fr; }
  body .service-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  body .service-card .service-photo { height: 100%; min-height: 280px; }
}

@media (max-width: 680px) {
  :root {
    --type-body-size: 18px;
    --type-dialog-size: 19px;
    --type-dialog-title: 30px;
    --type-section-size: 30px;
    --type-card-size: 22px;
    --type-feature-size: 26px;
    --type-project-size: 20px;
    --type-label-size: 16px;
    --type-action-size: 15px;
    --type-meta-size: 13px;
    --type-eyebrow-size: 11px;
  }
  body .indicator-card h3 { min-height: 0; }
  body .service-card { display: flex; }
  body .service-card .service-photo { height: 220px; min-height: 0; }
}

/* Preserve the gallery's one-screen layout on short displays. */
@media (max-height: 600px) {
  body .gallery-heading h2 { font-size: 25px; }
  body .stage-caption { font-size: 14px; line-height: 1.4; }
  body .stage-kind { font-size: 11px; line-height: 1.5; }
}