/* M&A frontend brand system — loaded after page styles to keep every public page consistent. */

:root {
  --frontend-section-y: clamp(72px, 7.5vw, 112px);
  --frontend-page-x: clamp(20px, 5vw, 72px);
  --frontend-content-max: 1680px;
  --frontend-reading-max: 900px;
}

body {
  font-family: var(--font-manrope);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  color: var(--color-gray-100);
  background: var(--color-white);
}

main { color: var(--color-gray-100); }

/* Shared page rhythm. Full-bleed visual sections are intentionally not included. */
.product-intro,
.project-hero,
.news-intro,
.contact-hero,
.legal-hero,
.catalog-page,
.detail-page,
.cart-page,
.checkout-login {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--frontend-page-x);
  padding-right: var(--frontend-page-x);
}

.product-intro,
.project-hero,
.news-intro,
.contact-hero,
.legal-hero {
  padding-top: var(--frontend-section-y);
  padding-bottom: clamp(40px, 4vw, 56px);
}

.product-brand,
.project-brand-tabs,
.project-category-tabs,
.project-grid,
.news-grid,
.contact-layout,
.legal-section,
.catalog-toolbar,
.catalog-grid {
  box-sizing: border-box;
  padding-left: var(--frontend-page-x);
  padding-right: var(--frontend-page-x);
}

.product-brand,
.project-brand-tabs,
.project-category-tabs,
.project-grid,
.news-grid,
.contact-layout,
.catalog-toolbar,
.catalog-grid {
  width: 100%;
  max-width: var(--frontend-content-max);
  margin-left: auto;
  margin-right: auto;
}

.legal-hero,
.legal-section {
  max-width: var(--frontend-reading-max);
  margin-left: auto;
  margin-right: auto;
}

/* Product details: center the complete gallery + information composition. */
.pdetail-hero,
.pdetail-body {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--frontend-page-x);
  padding-right: var(--frontend-page-x);
  box-sizing: border-box;
}

.pdetail-hero {
  padding-top: clamp(48px, 5vw, 72px);
}

.pdetail-title {
  text-align: center;
  text-wrap: balance;
}

.pdetail-body {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(320px, 480px);
  justify-content: center;
  align-items: start;
  gap: clamp(48px, 6vw, 88px);
  padding-top: clamp(36px, 4vw, 56px);
  padding-bottom: var(--frontend-section-y);
}

.pdetail-gallery,
.pdetail-info {
  width: 100%;
  min-width: 0;
}

.pdetail-gallery { max-width: 620px; }
.pdetail-info { max-width: 480px; }

p,
li,
dd,
input,
select,
textarea {
  font-family: var(--font-manrope);
  font-weight: 500;
}

a { text-decoration: none; }

/* Page-intro display titles. Detail-page titles intentionally keep their local scale. */
.about-intro-title,
.product-intro-title,
.project-hero-title,
.news-intro-title,
.catalog-heading,
.contact-title,
.legal-hero-title,
.cart-title,
.auth-card-title,
.checkout-login-heading {
  font-family: var(--font-ma-clayton);
  font-size: var(--type-display-xl);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--color-gray-100);
}

/* Small headline / section-title role. */
.section-heading:not(.section-heading--inverted),
.product-brand-title,
.blog-test__comments h2,
.legal-section h2,
.contact-card h2 {
  font-family: var(--font-manrope);
  font-size: var(--type-heading-sm);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--color-gray-100);
}

/* Subheads are always Manrope SemiBold. */
h3,
.subhead,
.about-mission-heading,
.project-brand-tab,
.legal-section h3,
.contact-card h3 {
  font-family: var(--font-manrope);
  font-weight: 600;
}

/* Information labels and captions. */
.eyebrow,
.caption,
figcaption,
.product-meta,
.pdetail-meta,
.detail-meta,
.news-card-meta,
.blog-test__intro time {
  font-family: var(--font-google-sans-code);
  font-size: var(--type-information);
  font-weight: 500;
  line-height: 1.4;
}

.caption--small,
.product-sku,
.pdetail-sku {
  font-family: var(--font-google-sans-code);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.4;
}

/* Long-form and lead copy. */
.section-subtext,
.about-intro-lede,
.product-intro-lede,
.news-intro-lede,
.legal-intro,
.detail-lead {
  font-family: var(--font-manrope);
  font-weight: 500;
}

.about-intro-lede,
.product-intro-lede,
.news-intro-lede {
  font-size: 24px;
  line-height: 1.5;
}

/* Buttons, tabs and form controls. */
.btn,
form button,
button[type="submit"],
input[type="submit"],
.project-category-tab,
.catalog-button,
.catalog-brand-link {
  font-family: var(--font-manrope);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

label {
  font-family: var(--font-manrope);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: 16px;
  color: var(--color-gray-100);
  background-color: var(--color-white);
}

.btn--primary,
button[type="submit"],
input[type="submit"] {
  background-color: var(--color-teal);
  color: var(--color-floralwhite);
}

.btn--primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-teal-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  :root {
    --frontend-section-y: 64px;
    --frontend-page-x: 20px;
  }

  .about-intro-lede,
  .product-intro-lede,
  .news-intro-lede { font-size: 20px; }

  .eyebrow,
  .caption,
  figcaption,
  .product-meta,
  .pdetail-meta,
  .detail-meta,
  .news-card-meta { font-size: 14px; }
}

@media (max-width: 900px) {
  .pdetail-body {
    grid-template-columns: minmax(0, 720px);
    gap: 40px;
  }

  .pdetail-gallery,
  .pdetail-info {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .pma-grid,
  .pac-grid {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .pma-layout,
  .pac-layout {
    padding: 48px var(--frontend-page-x) 72px;
  }

  .pma-grid,
  .pac-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* A card and its image behave as one hover target; avoid stacked motion. */
@media (hover: hover) and (pointer: fine) {
  .motion-card:hover img {
    transform: none;
    filter: none;
  }

  .motion-image-only-card:hover img {
    transform: translateY(-4px);
    filter: saturate(1.035) contrast(1.015);
  }
}