/* ========================================================================
   Suntomine stylesheet - modular structure

   1. Design tokens   - color palette as CSS custom properties
   2. Base            - reset and document defaults
   3. Typography      - one merged rule per text variant; every class
                        sharing the same font styling is grouped here
   4. Components      - layout and page rules in page order; identical
                        blocks are merged into grouped selectors

   Classes were merged without touching any template: each selector
   keeps its own declarations, so rendering is unchanged. Component
   rules that were pure typography keep a pointer comment below.
   ======================================================================== */

/* 1. DESIGN TOKENS
   The site palette. Component rules below reference these through
   var(--color-*) so a color can be re-tuned in one place. */
:root {
    --color-bg: #fafaf7;
    --color-text: #1f2933;
    --color-accent: #0f766e;
    --color-border: #e4e4e7;
    --color-navy: #0f172a;
    --color-lavender: #e7e6ee;
    --color-navy-64: #0f172aa3;
    --color-navy-80: #0f172acc;
    --color-white: #ffffff;
    --color-lavender-64: #e7e6eea3;
    --color-lavender-16: #e7e6ee29;
    --color-navy-16: #0f172a29;
    --color-navy-8: #0f172a14;
    --color-gold: #ffd700;
    --color-navy-dark: #1d293b;
    --color-gold-64: #ffd700a3;
}

/* 2. BASE */
* {
    box-sizing: border-box;
    line-height: 1.2!important;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 3. TYPOGRAPHY SCALE
   One grouped rule per text variant. The Roboto font declarations
   (family, style, weight, size, letter spacing) plus color and
   text-align were lifted out of every component rule and merged
   here; the component rules keep only their layout declarations.
   Overrides (e.g. .newsletter-title { font-style: italic }) stay in
   the component section where they win by source order. */
/* Typography: Roboto Black (900), 32px, center, dark navy (var(--color-navy)) */
.section-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 22px, center, dark navy (var(--color-navy)) - shared by 2 selectors */
.section-lead, .response-note {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, dark navy (var(--color-navy)) - shared by 21 selectors */
.section-text,
.manufacturing-modal-item,
.portal-modal-label,
.portal-modal-input,
.portal-modal-signin,
.faq-item-bullet,
.contact-input,
.contact-check-text,
.contact-button,
.product-detail-feature,
.bullet-list-item,
.newsletter-input,
.post-detail-side-date,
.post-detail-other-post-title,
.post-detail-nav-btn,
.post-detail-nav-title,
.talent-input,
.job-search-label,
.job-search-input,
.job-card-description,
.job-detail-list li {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 24px, dark navy (var(--color-navy)) */
.section-subtitle {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 18px, dark navy (var(--color-navy)) */
.card-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 12px, dark navy (var(--color-navy)) */
.card-btn {
    color: var(--color-navy);
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
}

/* Typography: Roboto SemiBold (600), 12px, translucent lavender (var(--color-lavender-64)) - shared by 2 selectors */
.header-menu a, .header-lang-code {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-lavender-64);
}

/* Typography: Roboto Regular (400), 12px, translucent gold (var(--color-gold-64)) */
.header-cta {
    color: var(--color-gold-64);
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
}

/* Typography: Roboto SemiBold (600), 12px, translucent navy (var(--color-navy-64)) - shared by 3 selectors */
.header-lang-item-region, .header-lang-item-sep, .header-lang-item-lang {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-navy-64);
}

/* Typography: Roboto Black (900), 32px, center, sand (#edcd78) */
.hero-kicker-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 0;
    text-align: center;
    color: #edcd78;
}

/* Typography: Roboto Black (900), 59px, white (var(--color-white)) */
.hero-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 59px;
    letter-spacing: 0;
    color: var(--color-white);
}

/* Typography: Roboto Regular (400), 28px, center, light lavender (var(--color-lavender)) */
.hero-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 17px - shared by 8 selectors */
.hero-btn,
.products-page-more-btn,
.projects-more-btn,
.privacy-btn,
.post-detail-actions button,
.apply-modal-cancel,
.apply-modal-proceed,
.apply-modal-submit {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
}

/* Typography: Roboto Regular (400), 12px, dark navy (var(--color-navy)) - shared by 5 selectors */
.product-card-text,
.manufacturing-card-text,
.racking-systems-card-text,
.careers-card-text,
.post-detail-other-post-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 18px, start, dark navy (var(--color-navy)) */
.manufacturing-card-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0;
    text-align: start;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 20px, center, dark navy (var(--color-navy)) */
.manufacturing-modal-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Typography: Roboto Medium (500), 17px, center, dark navy (var(--color-navy)) - shared by 2 selectors */
.manufacturing-modal-subtitle, .apply-modal-step {
    text-align: center;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 20px, dark navy (var(--color-navy)) - shared by 6 selectors */
.manufacturing-pillar-title,
.pillar-modal-title,
.portal-modal-title,
.products-page-feature-title,
.product-detail-panel-heading,
.job-card-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, center, dark navy (var(--color-navy)) - shared by 5 selectors */
.portal-modal-forgot,
.contact-label,
.more-details-inquiry-text,
.apply-modal-field-label,
.apply-modal-input {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, center, dark navy (var(--color-navy)) - shared by 2 selectors */
.portal-modal-register-line, .apply-modal-text {
    text-align: center;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Medium (500), 17px */
.accordion-text b {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0;
}

/* Typography: Roboto SemiBold (600), 17px, light lavender (var(--color-lavender)) - shared by 4 selectors */
.newsroom-card-title,
.news-hero-post-title,
.post-detail-latest-card-title,
.job-detail-apply-btn {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 12px, light lavender (var(--color-lavender)) - shared by 4 selectors */
.newsroom-card-text,
.newsroom-card-date,
.news-hero-post-date,
.post-detail-latest-card-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 12px, translucent lavender (var(--color-lavender-64)) - shared by 2 selectors */
.newsroom-card-btn, .news-hero-post-btn {
    color: var(--color-lavender-64);
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
}

/* Typography: Roboto SemiBold (600), 24px, left, dark navy (var(--color-navy)) */
.about-panel-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-navy);
}

/* Typography: Roboto Medium (500), 20px, dark navy (var(--color-navy)) - shared by 2 selectors */
.contact-card-subtitle, .product-detail-panel-subheading {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Medium (500), 17px, dark navy (var(--color-navy)) - shared by 8 selectors */
.contact-card-email,
.more-details-label,
.newsletter-label,
.post-detail-side-title,
.post-detail-author,
.post-detail-other-title,
.talent-label,
.apply-modal-consent-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Medium (500), 12px, translucent navy (var(--color-navy-64)) - shared by 3 selectors */
.footer-info-text, .footer-legal-link, .footer-legal-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-navy-64);
}

/* Typography: Roboto Regular (400), 12px, #002fa7a3 (#002fa7a3) */
.footer-info-link {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    color: #002fa7a3;
}

/* Typography: Roboto Regular (400), 12px, translucent navy (var(--color-navy-64)) */
.footer-link {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-navy-64);
}

/* Typography: Roboto Black (900), 32px, light lavender (var(--color-lavender)) */
.products-page-caption-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 22px, light lavender (var(--color-lavender)) */
.products-page-caption-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto SemiBold (600), 24px, light lavender (var(--color-lavender)) */
.products-page-product-card-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 17px, light lavender (var(--color-lavender)) - shared by 3 selectors */
.products-page-product-card-text, .timeline-year, .news-hero-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 12px */
.racking-systems-btn {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
}

/* Typography: Roboto weight 700 (700), 24px, dark navy (var(--color-navy)) */
.product-detail-panel-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, dark navy (var(--color-navy)) - shared by 2 selectors */
.product-detail-btn, .more-details-btn {
    color: var(--color-navy);
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
}

/* Typography: Roboto weight 700 (700), 24px, center, dark navy (var(--color-navy)) */
.more-details-inquiry-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 22px, right, white (var(--color-white)) */
.story-image-caption {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0;
    text-align: right;
    color: var(--color-white);
}

/* Typography: Roboto Regular (400), 17px, left, dark navy (var(--color-navy)) */
.timeline-milestone {
    text-align: left;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 17px, left, dark navy (var(--color-navy)) */
.locations-table th {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
    text-align: left;
}

/* Typography: Roboto Regular (400), 17px, left, dark navy (var(--color-navy)) */
.locations-table td {
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
    text-align: left;
}

/* Typography: Roboto Regular (400), 17px, left, dark navy (var(--color-navy)) */
.privacy-policy-nav-item {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, translucent navy (var(--color-navy-64)) */
.support-faq-link {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy-64);
}

/* Typography: Roboto SemiBold (600), 34px, light lavender (var(--color-lavender)) */
.news-hero-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 34px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto Regular (400), 17px, translucent lavender (var(--color-lavender-64)) */
.news-hero-btn {
    color: var(--color-lavender-64);
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
}

/* Typography: Roboto SemiBold (600), 22px, dark navy (var(--color-navy)) */
.news-archive-post-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 15px, dark navy (var(--color-navy)) */
.news-archive-post-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto weight 700 (700), 18px, white (var(--color-white)) */
.post-avatar {
    color: var(--color-white);
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 18px;
}

/* Typography: Roboto SemiBold (600), 15px, dark navy (var(--color-navy)) */
.post-author {
    font-family: Roboto, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 13px, muted grey (#52606d) */
.post-date {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #52606d;
}

/* Typography: Roboto Black (900), 22px, dark navy (var(--color-navy)) */
.post-card-title {
    font-family: Roboto, sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, dark navy (var(--color-navy)) */
.post-text {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: var(--color-navy);
}

/* Typography: Roboto Italic Regular (400), 17px, dark navy (var(--color-navy)) */
.post-image-caption {
    font-family: Roboto, sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 34px, dark navy (var(--color-navy)) */
.post-detail-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 34px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Italic Medium (500), 17px, dark navy (var(--color-navy)) */
.post-detail-featured-caption {
    font-family: Roboto, sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Regular (400), 17px, muted grey (#52606d) */
.post-detail-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    color: #52606d;
}

/* Typography: Roboto Light (300), 17px, translucent navy (var(--color-navy-64)) - shared by 2 selectors */
.talent-upload-text, .apply-upload-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy-64);
}

/* Typography: Roboto Medium (500), 17px, translucent navy (var(--color-navy-64)) - shared by 2 selectors */
.job-filters-label, .job-sort-label {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy-64);
}

/* Typography: Roboto SemiBold (600), 15px, light lavender (var(--color-lavender)) */
.job-card-lead {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--color-lavender);
}

/* Typography: Roboto SemiBold (600), 15px, dark navy (var(--color-navy)) */
.job-card-location {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto Medium (500), 12px, dark navy (var(--color-navy)) */
.job-card-type {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 17px, dark navy (var(--color-navy)) */
.job-detail-label {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Typography: Roboto SemiBold (600), 24px, center, dark navy (var(--color-navy)) */
.apply-modal-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* 4. COMPONENTS AND PAGES (original order)
   Identical declaration blocks across pages are merged into single
   grouped-selector rules, placed at the first occurrence. */
/* Shared section wrapper: full-width outer band for every <section> on the pages; the centered content column inside is .section-inner */
.section {
    width: 100%;
}

/* Shared section container: centered 1280px shell for section interiors across pages (products, partner, newsroom, about, FAQ, contact, projects, response, story, timeline, locations, privacy policy); vertical flow with a 16px gap and 16px side/top padding */
.section-inner {
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Shared narrow section container: like .section-inner but 1152px wide — manufacturing and products pages; vertical flow with a 16px gap and 16px side/top padding */
.section-inner-narrow {
    width: 1152px;
    max-width: 100%;
    margin-inline: auto;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Shared section title: Roboto Black (900), 32px, 100% line height, 0% letter spacing, centered, dark navy — the standard heading scale used by the section/page headings across the site */
/* (merged: 59 rules that carried identical declarations) */
.section-title,
.section-lead,
.section-text,
.section-subtitle,
.card-title,
.hero-title,
.hero-text,
.product-card-text,
.manufacturing-card-title,
.manufacturing-card-text,
.manufacturing-modal-title,
.manufacturing-modal-subtitle,
.manufacturing-pillar-heading,
.manufacturing-pillar-title,
.pillar-modal-title,
.portal-modal-title,
.portal-modal-forgot,
.portal-modal-register-line,
.newsroom-card-title,
.newsroom-card-text,
.about-panel-title,
.contact-card-subtitle,
.contact-card-email,
.contact-label,
.products-page-caption-title,
.products-page-caption-text,
.products-page-product-card-title,
.products-page-product-card-text,
.products-page-feature-title,
.racking-systems-card-text,
.product-detail-panel-title,
.product-detail-panel-heading,
.product-detail-panel-subheading,
.more-details-label,
.more-details-inquiry-title,
.more-details-inquiry-text,
.privacy-policy-nav-item,
.careers-card-text,
.news-hero-title,
.news-hero-post-title,
.news-archive-post-title,
.post-card-title,
.post-text p,
.post-detail-side-title,
.post-detail-title,
.post-detail-other-title,
.talent-label,
.job-search-label,
.job-filters-label,
.job-sort-label,
.job-card-title,
.job-card-lead,
.job-card-location,
.job-card-type,
.job-detail-label,
.job-detail-list li,
.apply-modal-title,
.apply-modal-text,
.apply-modal-step {
    margin: 0;
}

/* Shared lead modifier: caps the section lead's text at the 1152px content width inside the 1280px container (long intro paragraphs) */
.section-lead-narrow {
    max-width: 1152px;
}

/* Responsive line break: a hard break hidden on desktop (desktop leads fit
   their line or wrap on their own); the <= 1023.98px block turns it back on
   so long leads can break at a natural phrase on phones/tablets. Keep a
   space before the <br> in the markup so hiding it never glues two words
   together on desktop */
.br-mobile {
    display: none;
}

/* Shared card button: small 77x22 outline pill — Roboto Regular (400), 12px, 100% line height, 0% letter spacing, 1px navy border, 4px radius, transparent fill, dark navy text; fills solid navy with white text on hover (homepage product cards, manufacturing cards) */
.card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 8px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    align-self: flex-start;
}

/* (merged: 3 rules that carried identical declarations) */
.card-btn:hover, .portal-modal-signin:hover, .post-share:hover {
    background: var(--color-navy);
    color: var(--color-white);
}

/* Header: full-width dark navy bar; content sits in a centered 1280px container that keeps its own dimensions. The bar is also the positioned, stacked anchor for the region dropdown hanging under it. */
.site-header {
    position: relative;
    z-index: 10;
    width: 100%;
    background: var(--color-navy);
}

/* Content container: horizontal flow, fixed 1280px width, hug height (min 54px), space-between, 16px padding */
.header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
    min-height: 54px;
    padding: 16px;
}

/* Panel wrapper: transparent in this layout — the nav, the actions and the
   region dropdown keep behaving as direct children of .header-inner.
   Below 1024px the open state turns the wrapper into the absolutely
   positioned dropdown that overlays the page (see section 5). */
.header-panel {
    display: contents;
}

/* Logo: vertical flow, fixed 129x16px */
.header-logo {
    display: flex;
    flex-direction: column;
    width: 129px;
    height: 16px;
}

/* (merged: 3 rules that carried identical declarations) */
.header-logo img, .footer-logo img, .product-detail-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Menu: horizontal flow, hug, 16px gap */
.header-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menu text: Roboto SemiBold (600), 12px, 100% line height, 0% letter spacing, light lavender at ~64% opacity */
/* (merged: 3 rules that carried identical declarations) */
.header-menu a, .footer-info-link, .footer-link {
    white-space: nowrap;
    text-decoration: none;
}

/* (merged: 3 rules that carried identical declarations) */
.header-menu a:hover,
.header-lang:hover .header-lang-code,
.header-lang:hover .header-lang-arrow {
    color: var(--color-white);
}

/* Customer Portal button: ghost style — transparent background, 1px gold border (64% alpha) and matching text color, 4px radius, 4px/8px padding, 10px gap; Roboto Regular 12px, 100% line height */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border: 1px solid var(--color-gold-64);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.header-cta:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* Header actions: groups the Customer Portal button and the region selector; horizontal flow, hug, 16px gap */
/* (merged: 2 rules that carried identical declarations) */
.header-actions, .newsletter-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* Region selector trigger: horizontal flow, hug, 10px gap, fully unstyled button — native appearance removed so nothing (no white chrome, no border, no padding) shows except its contents */
.header-lang {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Keep keyboard focus visible without restoring the native chrome */
/* (merged: 3 rules that carried identical declarations) */
.header-lang:focus-visible, .hero-btn:focus-visible, .hero-dot:focus-visible {
    outline: 1px solid var(--color-white);
    outline-offset: 2px;
}

/* Flag: fixed 14x14, clipped to a circle */
.header-lang-flag {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    overflow: hidden;
}

/* (merged: 5 rules that carried identical declarations) */
.header-lang-flag img,
.about-image img,
.news-hero-photo-img,
.news-hero-post-photo-img,
.news-archive-post-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Region code: Roboto SemiBold (600), 12px, 100% line height, 0% letter spacing, light lavender at ~64% opacity */
/* (merged: 2 rules that carried identical declarations) */
.header-lang-code, .footer-legal-link, .footer-legal-text {
    white-space: nowrap;
}

/* Down arrow: chevron icon, 2px stroke, light lavender at ~64% opacity (currentColor picks up the color set here) */
.header-lang-arrow {
    flex: 0 0 auto;
    display: block;
    color: var(--color-lavender-64);
}

/* Mobile-dropdown-only pieces of the region trigger: the hamburger panel
   (section 5) swaps the flag/code/chevron for a "Location | Language" row
   with a trailing 16px plus icon; hidden everywhere else */
.header-lang-panel-label,
.header-lang-plus {
    display: none;
}

/* Region dropdown: 1280x134 lavender panel that opens under the nav bar when the header region button is clicked. Centered like the header content; the rows form a four-column grid (flag, region, separator, language) whose shared columns line the flags and the "|" separators up one under another, hugged to the right edge (16px from the top and the right via the padding), 8px gaps, fully opaque */
.header-lang-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 1280px;
    max-width: 100%;
    height: 134px;
    margin: 0 auto;
    padding: 16px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: end;
    align-content: start;
    align-items: center;
    gap: 8px;
    list-style: none;
    background: var(--color-lavender);
    opacity: 1;
}

/* Hidden state: keep the panel out of the layout until it is opened (the grid display above would otherwise override [hidden]) */
/* (merged: 8 rules that carried identical declarations; the closed-state icon
   rules live next to their base .accordion-icon/.faq-item-icon rules below so
   they win by source order) */
.header-lang-menu[hidden],
.site-main:empty,
.accordion-head::-webkit-details-marker,
.accordion[open] .accordion-icon-closed,
.faq-item[open] .faq-item-icon-closed,
.faq-item-head::-webkit-details-marker,
.faq-list[hidden],
.apply-modal-page[hidden] {
    display: none;
}

/* Region row: flattened into the menu grid so its children occupy the shared flag/region/separator/language columns of their grid row */
.header-lang-item {
    display: contents;
}

/* Row flag: fixed 14x14, clipped to a circle like the trigger flag; the extra 2px right margin widens the flag→region gap to 10px */
.header-lang-item-flag {
    width: 14px;
    height: 14px;
    margin-right: 2px;
    border-radius: 50%;
}

/* Row text (region, separator and language names): Roboto SemiBold (600), 12px, 100% line height, 0% letter spacing, dark navy at ~64% opacity; right-anchored in their columns so the language names stay flush with the panel edge and the regions end at the separator */
.header-lang-item-region, .header-lang-item-sep, .header-lang-item-lang {
    justify-self: end;
    white-space: nowrap;
}

/* Language-switching rows: an invisible (display: contents) anchor wraps the row's cells so they keep occupying the menu grid's shared columns while the whole row becomes the click target that takes the visitor to the current page in that language. */
.header-lang-item-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

/* (merged: 4 rules that carried identical declarations) */
.header-lang-item-link:hover .header-lang-item-region,
.header-lang-item-link:hover .header-lang-item-lang,
.header-lang-item-link:focus-visible .header-lang-item-region,
.header-lang-item-link:focus-visible .header-lang-item-lang,
.header-lang-item[data-current] .header-lang-item-region,
.header-lang-item[data-current] .header-lang-item-lang,
.footer-link:hover,
.footer-legal-link:hover {
    color: var(--color-navy);
}

/* Rows for languages that are not enabled yet (Chile/es, Srbija/sr): visible so visitors know they are planned, dimmed and inert until the language is added to settings.LANGUAGES */
.header-lang-item[data-unavailable] {
    opacity: 0.45;
    pointer-events: none;
}

.site-main {
    flex: 1;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

/* Full-bleed hero: the slideshow media box spans the whole page width (it lives outside the centered .site-main container); fixed 709px height, cover-cropped with the top edge anchored so images are shown from the top, not center */
.page-hero {
    position: relative;
    width: 100%;
}

/* Slideshow media box: fixed height so the section never changes height while the slide images cross-fade */
.page-hero-media {
    position: relative;
    height: 709px;
}

.page-hero-image {
    display: block;
    width: 100%;
    height: 709px;
    object-fit: cover;
    object-position: top;
}

/* Slide images: absolutely stacked in the media box; the is-active one fades in over 800ms (ease-in) while the other fades out */
.page-hero-media .page-hero-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 800ms ease-in;
}

/* (merged: 3 rules that carried identical declarations) */
.page-hero-media .page-hero-image.is-active,
.hero-copy.is-active,
.apply-modal-checkbox:checked::before {
    opacity: 1;
}

/* Hero overlay: fixed 960x512 box, vertically and horizontally centered on the hero image; vertical flow, 8px gap, fully opaque */
.page-hero-content {
    position: absolute;
    inset: 0;
    width: 960px;
    height: 512px;
    max-width: calc(100% - 32px);
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 8px;
    opacity: 1;
    text-align: center;
}

/* Kicker banner: hugs its text (centered by the hero copy column) instead of spanning the full hero container, fixed 46px height, dark navy fill, 4px radius, 4px/12px padding, contents centered */
.hero-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 46px;
    margin: 0;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--color-navy);
    opacity: 1;
}

/* Kicker text: Roboto Black (900), 32px, 100% line height, 0% letter spacing, centered; gold gradient clipped to the glyphs (solid gold fallback where background-clip: text is unsupported) */
.hero-kicker-text {
    display: block;
    background: linear-gradient( 70.81deg, #c49337 12.91%, #fcf7cd 33.68%, #edcd78 50%, #a7602b 59.64%, #fdf8d0 73.74%, #bb9138 87.09% );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Slide copy stacks: both .hero-copy groups (kicker + title + lead of one slide) sit in the same grid cell, bottom aligned, so the hero keeps a constant height while the slides cross-fade; each copy repeats the old direct-children spacing (vertical flow, 8px gap) */
.hero-copy-stack {
    display: grid;
    width: 100%;
    align-items: end;
}

.hero-copy {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 800ms ease-in;
}

/* Second slide: kicker, title and lead align left. The .hero-kicker-text and .hero-text overrides are needed because those rules set their own text-align: center, which would otherwise beat inheritance. */
.hero-copy-left {
    align-items: flex-start;
    text-align: left;
}

/* (merged: 2 rules that carried identical declarations) */
.hero-copy-left .hero-kicker-text, .hero-copy-left .hero-text {
    text-align: left;
}

/* Hero buttons row: horizontal flow, hug, 10px gap */
.hero-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Hero button base: fixed 28px height, 4px radius, 4px/8px padding; Roboto Regular (400), 17px, 100% line height, 0% letter spacing */
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Start My Project: fixed 138x28, dark navy fill, light lavender text */
/* (merged: 3 rules that carried identical declarations) */
.hero-btn-primary, .projects-more-btn-primary, .privacy-btn-primary {
    width: fit-content;
    background: var(--color-navy);
    color: var(--color-lavender);
}

/* Learn More: fixed 102x28, light lavender fill, dark navy text */
.hero-btn-secondary {
    width: fit-content;
    background: var(--color-lavender);
    color: var(--color-navy);
}

/* (merged: 5 rules that carried identical declarations) */
.hero-btn-primary:hover,
.products-page-more-btn-primary:hover,
.racking-systems-btn-primary:hover,
.projects-more-btn-primary:hover,
.privacy-btn-primary:hover {
    background: var(--color-navy-dark);
}

.hero-btn-secondary:hover {
    background: var(--color-white);
}

/* Hero slide dots: two 12x12 circles centered 16px below the buttons row (8px parent gap + 8px margin); 8px gap between the dots */
.hero-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

/* Dot: 12x12 circle button, translucent light lavender fill */
.hero-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-lavender-64);
    cursor: pointer;
}

/* Active (left) dot: fully opaque light lavender fill */
.hero-dot-active {
    background: var(--color-lavender);
}

/* Hero slide arrows: mobile-only chips living inside the .hero-dots row
   (the <=1023.98px media query in section 5 switches them on); hidden on
   the desktop layout */
.hero-arrow {
    display: none;
}

/* Products section: centered heading + lead over a row of 4 image cards; full-width with the same 1280px inner container as the header */
/* (merged: 3 rules that carried identical declarations) */
.products-head, .partner-head, .newsroom-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* Cards row: horizontal flow, centered, 10px gap, wraps on narrow viewports */
.products-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* Card: fixed 256x384, 4px radius; the image fills the whole card and the 256x111 content band overlays its bottom */
.product-card {
    position: relative;
    width: 256px;
    height: 384px;
    border-radius: 4px;
    overflow: hidden;
    opacity: 1;
}

/* Card image: explicitly 256x384 — fills the card exactly */
.product-card-image {
    display: block;
    width: 256px;
    height: 384px;
    object-fit: cover;
}

/* Card content band: fixed 111px height pinned to the card bottom, 8px padding, 8px gap, rounded bottom corners matching the card */
.product-card-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 114px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Cards row: horizontal flow, centered, 16px gap, wraps on narrow viewports */
.manufacturing-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Card: fixed 256x384, 4px radius — a cover photo on top with the 131px caption footer flush against it */
.manufacturing-card {
    width: 256px;
    height: 384px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Card photo: fills the space between the card top and its footer */
.manufacturing-card-image {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
}

/* Card footer: fixed 131px band, 8px padding, opaque light lavender (#E7E6EE) fill, 2px bottom corners; title and text stack from the top with 8px gaps so the text starts at the same height in every card, and the button is pinned to the bottom via margin-top: auto */
.manufacturing-card-footer {
    height: 131px;
    padding: 8px;
    background: var(--color-lavender);
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Manufacturing card button modifier: bottom-anchors the shared card button inside the tall manufacturing cards (all shared styling lives in .card-btn) */
.manufacturing-card-btn {
    margin-top: auto;
}

/* Manufacturing modal: native <dialog> opened by the card Learn More buttons — fixed 512x203, 16px padding, 8px gaps, 4px radius, white fill, over a translucent dark navy backdrop; overflow hidden so the dialog never shows its own scrollbar */
.manufacturing-modal {
    width: 512px;
    max-width: calc(100vw - 32px);
    height: 203px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-navy);
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* (merged: 4 rules that carried identical declarations) */
.manufacturing-modal[open],
.pillar-modal[open],
.portal-modal[open],
.apply-modal[open],
.apply-success-modal[open],
.apply-error-modal[open],
.talent-joined-modal[open] {
    display: flex;
}

/* (merged: 5 rules that carried identical declarations) */
.manufacturing-modal::backdrop,
.pillar-modal::backdrop,
.portal-modal::backdrop,
.apply-modal::backdrop,
.apply-success-modal::backdrop,
.apply-error-modal::backdrop,
.talent-joined-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
}

/* Title line: the heading is centered across the modal with the close control absolutely positioned flush to the right padding edge */
.manufacturing-modal-head {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Close control: 20x20 invisible hit area holding the 13x1 minus symbol (symbol-minus.svg), vertically centered on the title line */
.manufacturing-modal-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* (merged: 3 rules that carried identical declarations) */
.manufacturing-modal-close img,
.pillar-modal-close img,
.portal-modal-close img {
    display: block;
    width: 13px;
    height: 1px;
}

/* Divider: 1px translucent dark navy rule (64% alpha) */
/* (merged: 6 rules that carried identical declarations) */
.manufacturing-modal-divider,
.manufacturing-split-divider,
.pillar-modal-divider,
.portal-modal-divider,
.apply-modal-divider,
.apply-success-divider,
.apply-error-divider {
    height: 0;
    border-top: 1px solid var(--color-navy-64);
}

/* Bullet list: disc markers like the FAQ bullets, 8px between rows */
/* (merged: 2 rules that carried identical declarations) */
.manufacturing-modal-list, .job-detail-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* .manufacturing-modal-item - typography only, declared in the Typography scale module above */
/* Manufacturing detail section (manufacturing page): centered heading + lead over a 1152px split row — a padded cover photo on the left and a lavender panel with title, divider and copy on the right; sits 16px under the cards section */
/* (merged: 2 rules that carried identical declarations) */
.manufacturing-detail, .manufacturing-pillars {
    width: 100%;
    margin-top: 16px;
}

/* manufacturing-detail-inner modifier: the shared narrow container with no padding */
/* (merged: 2 rules that carried identical declarations) */
.manufacturing-detail-inner, .manufacturing-pillars-inner {
    padding: 0;
}

/* Split row: 1152x188 — a 516px padded photo, 16px gap, 620px panel */
.manufacturing-split {
    width: 1152px;
    max-width: 100%;
    height: 188px;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

/* Split photo slot: 516x188 relative box hosting the cover photo and the corner logo badge */
.manufacturing-split-photo {
    position: relative;
    width: 516px;
    height: 188px;
    max-width: 100%;
}

/* Shared framed cover photo — used by the manufacturing split photo and the newsletter artwork: fills its slot edge to edge, cropping to cover; the 4px rounded corners sit on the photo itself (a radius on the frame alone does not clip the square-cornered img overflowing it) */
.manufacturing-split-image, .newsletter-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

/* Corner logo: header wordmark pinned 16px from the slot's bottom-right corner, fixed 129x16 */
/* (merged: 3 rules that carried identical declarations) */
.manufacturing-split-logo, .response-image-logo, .locations-map-logo {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 129px;
    height: 16px;
}

/* Split panel: 620x188 lavender (#E7E6EE) card, 4px radius, 32px padding, 8px gaps; the title lands 32px from the panel's top and left via the padding */
.manufacturing-split-panel {
    width: 620px;
    height: 188px;
    flex: 1 1 620px;
    min-width: 0;
    padding: 32px;
    border-radius: 4px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Pillars grid: 1152px row of four cards with 16px gaps, wraps on narrow viewports */
.manufacturing-pillars-grid {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Pillar card: 276x111 lavender (#E7E6EE) card, 4px radius, 16px padding, 8px gaps; the title lands 16px from the card's top and left via the padding */
.manufacturing-pillar {
    width: 276px;
    height: 111px;
    flex: 1 1 276px;
    min-width: 0;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.manufacturing-pillar-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Card icon: 13x13 plus glyph */
.manufacturing-pillar-icon {
    display: block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Card divider: 1px solid dark navy rule */
.manufacturing-pillar-divider {
    height: 0;
    border-top: 1px solid var(--color-navy);
}

/* Pillar modal (manufacturing page): the pillar card headers open this 512x191 lavender (#E7E6EE) dialog filled from the header's data-pillar-title / data-pillar-text attributes — left-aligned title line with the close control flush right, over a translucent dark navy backdrop; overflow hidden so the dialog never shows its own scrollbar */
.pillar-modal {
    width: 512px;
    max-width: calc(100vw - 32px);
    height: 191px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: var(--color-lavender);
    color: var(--color-navy);
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* Title line: heading on the left (16px from the modal's top and left via the padding) with the close control on the same line, flush to the right padding edge (16px in) */
/* (merged: 2 rules that carried identical declarations) */
.pillar-modal-head, .portal-modal-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Close control: 20x20 invisible hit area holding the 13x1 minus symbol (symbol-minus.svg), vertically centered on the title line */
/* (merged: 2 rules that carried identical declarations) */
.pillar-modal-close, .portal-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Customer portal sign-in modal: native <dialog> opened by the header Customer Portal button — fixed 512x280, 16px padding, 8px gaps, 4px radius, lavender fill, over a translucent dark navy backdrop; overflow hidden so the dialog never shows its own scrollbar */
.portal-modal {
    width: 512px;
    max-width: calc(100vw - 32px);
    height: 280px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: var(--color-lavender);
    color: var(--color-navy);
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* Sign-in form: vertical flow, 8px gap between the rows; method="dialog" so the Sign In button submits and closes the dialog natively */
/* (merged: 3 rules that carried identical declarations) */
.portal-modal-form, .post-image, .apply-modal-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* .portal-modal-label - typography only, declared in the Typography scale module above */
/* Text inputs: full-row 24px fields (480px inside the modal padding), 2px padding, 4px radius, translucent dark navy fill */
.portal-modal-input {
    width: 100%;
    height: 24px;
    padding: 2px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-16);
}

/* Sign In button: 68x28 ghost button — transparent fill, 1px dark navy border, 4px/8px padding, 4px radius; Roboto Regular (400), 17px, 100% line height, 0% letter spacing, dark navy */
.portal-modal-signin {
    margin: auto;
    width: fit-content;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

/* Dialog switch actions ("Register an Account" / "Sign in With Your Suntomine Account"): bold text buttons inheriting the line's typography, stripped of the native button chrome so only text shows */
.portal-modal-register-open, .portal-modal-login-open {
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Inline modal links (Privacy Policy, Terms of Use): dark navy, no underline; the bold comes from the <b> in the markup */
.portal-modal-link {
    color: var(--color-navy);
    text-decoration: none;
}

/* Register variant: 768x340 shell for the two-column registration form (all the shared chrome comes from .portal-modal); the title is centered across the modal with the close control absolutely positioned flush to the right padding edge (16px in) */
.portal-modal-register {
    width: 768px;
    height: 340px;
}

.portal-modal-register .portal-modal-head {
    position: relative;
    justify-content: center;
}

/* Register title: Roboto SemiBold (600), 24px, 100% line height, 0% letter spacing, centered, dark navy */
.portal-modal-register .portal-modal-title {
    font-size: 24px;
    text-align: center;
}

.portal-modal-register .portal-modal-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Registration form rows: two field columns side by side with an 8px gap; wraps to a single column when the modal runs out of width */
.portal-modal-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

/* Field column: label over its input with an 8px gap, 364px wide — two columns plus the row gap fill the 736px content width of the register modal */
.portal-modal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 364px;
}

/* Two-column row: the accordion stack and the image sit side by side as a centered group with an 8px gap; the columns stretch to equal height so the accordion stack matches the image */
.partner-split {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

/* Accordion column: vertical flow, 8px gap between items; fixed 518px width so the stack hugs its content instead of stretching across the row (484px content + 16px padding and 1px border on each side) */
.accordions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 518px;
    max-width: 100%;
    flex: 0 1 auto;
}

/* Accordion item: card, 4px radius, 16px padding; native <details> drives the open/closed state (no JavaScript needed). Collapsed cards keep their natural height. */
.accordion {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-lavender);
}

/* Only the opened card stretches: it absorbs the leftover column height so the accordion stack matches the image, with the extra space landing under its body text (content stays top-aligned). If its content is taller than the leftover space, the image frame below grows to match the taller stack so the two columns stay equal. */
.accordion[open] {
    flex: 1 1 auto;
}

/* Accordion header: vertical flow — a title/icon row on top and a divider line under it; the native disclosure marker is removed so the +/- icons carry the state instead */
/* (merged: 2 rules that carried identical declarations) */
.accordion-head, .faq-item-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

/* Title row: title on the left, state icon on the right, 10px gap */
/* (merged: 6 rules that carried identical declarations) */
.accordion-head-row,
.newsroom-card-footer,
.about-panel-head,
.faq-item-head-row,
.news-hero-card-footer,
.news-hero-post-card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Divider line under the title: full-width hairline with a 1px navy top border at 40% opacity (matches the perceived lightness of the +/- icons' thin antialiased strokes); only rendered while the item is expanded */
.accordion-divider {
    display: none;
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172a66;
    opacity: 1;
}

/* (merged: 5 rules that carried identical declarations) */
.accordion[open] .accordion-divider,
.accordion[open] .accordion-icon-open,
.faq-item[open] .faq-item-icon-open,
.faq-item[open] .faq-item-divider,
.projects-gallery-nav-icon {
    display: block;
}

/* Keep keyboard focus visible on the accordion headers */
/* (merged: 11 rules that carried identical declarations) */
.accordion-head:focus-visible,
.faq-item-head:focus-visible,
.products-page-more-btn:focus-visible,
.racking-systems-btn:focus-visible,
.product-detail-btn:focus-visible,
.more-details-btn:focus-visible,
.projects-gallery-nav-btn:focus-visible,
.projects-more-btn:focus-visible,
.privacy-btn:focus-visible,
.apply-modal-checkbox:focus-visible,
.apply-modal-cancel:focus-visible,
.apply-modal-proceed:focus-visible,
.apply-modal-submit:focus-visible {
    outline: 1px solid var(--color-navy);
    outline-offset: 2px;
}

/* State icons: fixed 12x12, fully opaque; the minus is shown while the item is open and the plus while it is closed */
.accordion-icon {
    flex: 0 0 12px;
    display: block;
    width: 12px;
    height: 12px;
    opacity: 1;
}

/* Minus icon: hidden while the item is closed (the [open] rule below brings
   it back) — declared after the base rule so it wins by source order */
.accordion-icon-open {
    display: none;
}

/* Accordion body: 8px gap below the header; vertical flow with an 8px gap between paragraphs */
.accordion-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

/* .accordion-text b - typography only, declared in the Typography scale module above */
/* Image column: hugs the 473px frame; laid out as a flex row so the frame can stretch vertically with the accordion stack */
/* (merged: 3 rules that carried identical declarations) */
.partner-image-col, .story-image-col, .newsletter-image-col {
    flex: 0 0 auto;
    max-width: 100%;
    display: flex;
}

/* Image frame: 473px wide, at least 416px tall - it grows to match a taller open accordion so the two columns always end equal; 4px radius, fully opaque; the photo fills the whole box */
.partner-image {
    position: relative;
    width: 473px;
    min-height: 416px;
    max-width: 100%;
    margin: 0;
    border-radius: 4px;
    background: var(--color-white);
    opacity: 1;
}

/* The photo is absolutely positioned so its intrinsic size never dictates the frame height - the frame keeps its 416px floor and only grows when stretched by a taller accordion stack */
/* (merged: 3 rules that carried identical declarations; scoped to the .partner-image-photo class so the logo overlay img is NOT stretched full-frame by this fill rule) */
.partner-image .partner-image-photo, .news-hero-card-bg, .news-hero-post-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Suntomine logo overlay: shown on phones only (the <= 1023.98px block re-enables it) - desktop keeps the original v6.png photo with its own baked-in logo. Pinned 16px from the top and 16px from the right of the frame so it stays fully visible */
.partner-image-logo {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    height: 24px;
    width: auto;
    z-index: 1;
}

/* The mobile-only partner photo (partner-with-us-2.png) is hidden on desktop; the <= 1023.98px block swaps the two photos over */
.partner-image-photo-mobile {
    display: none;
}

/* Photo row: fixed 1048px wide with an 8px gap between photos */
.newsroom-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    width: 1048px;
    max-width: 100%;
}

/* Photos: each image fills its stack column at full width, cover-cropped into the shared 2:1 frame (the 256x128 design proportion) so every column keeps the same height and proportions regardless of the uploaded image's natural aspect ratio */
.newsroom-image {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

/* Columns: each stack takes one equal share of the row — the photo on top and the gradient card image directly beneath it, with no gap between them */
.newsroom-stack {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* News card (first column): the gradient image becomes a card backdrop — headline at the top, date and Read more button at the bottom, layered over it */
/* (merged: 3 rules that carried identical declarations) */
.newsroom-card, .post-detail-latest-card-title, .post-detail-latest-card-date {
    position: relative;
}

/* Gradient backdrop: fills the card exactly (256x128 by design) */
/* (merged: 3 rules that carried identical declarations) */
.newsroom-card-bg, .post-image-img, .post-featured-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Card overlay: absolute layer spanning the whole card; the headline is pinned to the top and the footer row to the bottom via space-between, with 8px padding all around */
/* (merged: 2 rules that carried identical declarations) */
.newsroom-card-content, .news-hero-post-card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
}

/* Gold accent phrase inside the headline */
.newsroom-card-title-accent {
    color: var(--color-gold);
}

/* Card head group: the headline with optional supporting text 10px beneath it, kept together at the top of the card */
.newsroom-card-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* .newsroom-card-date - typography only, declared in the Typography scale module above */
/* Read more button: ghost button at least 74x22 — 1px light lavender (~64% alpha) border, 4px radius, 4px/8px padding, 10px gap; Roboto Regular (400), 12px, 100% line height, 0% letter spacing, light lavender (~64% alpha). The width is a floor, not a cap, so longer labels such as "News Archive" keep their horizontal padding; the button carries margin-left: auto so it hugs the footer's right edge even when it is the only element in it (the archive card has no date on the left); goes solid lavender on hover */
.newsroom-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 74px;
    height: 22px;
    padding: 4px 8px;
    border: 1px solid var(--color-lavender-64);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    margin-left: auto;
}

/* (merged: 3 rules that carried identical declarations) */
.newsroom-card-btn:hover, .news-hero-btn:hover, .news-hero-post-btn:hover {
    border-color: var(--color-lavender);
    color: var(--color-lavender);
}

/* Head: title with the lead 16px beneath it (both centered) */
/* (merged: 9 rules that carried identical declarations) */
.about-head,
.faq-head,
.contact-head,
.products-page-about-head,
.products-page-more-head,
.projects-more-head,
.response-head,
.privacy-head,
.story-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Split row: image on the left, info panel on the right; both columns are fixed 568px with an 8px gap (1144px total), equal heights — the panel stretches to the image and grows if its text needs more room */
.about-split {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Image column: hugs the fixed 568x156 frame */
.about-image-col {
    flex: 0 0 auto;
    max-width: 100%;
}

/* Image frame: fixed 568x156 (the natural artboard4-3.png size), 4px radius; the art fills the whole box */
.about-image {
    width: 568px;
    height: 156px;
    max-width: 100%;
    margin: 0;
    border-radius: 4px;
}

/* Info panel: light lavender card, same 568px width as the image, 4px radius, 16px padding; vertical flow — title row (title left, arrow right), hairline divider, then the body text */
.about-panel {
    flex: 0 1 auto;
    width: 568px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
}

/* Diagonal arrow icon: fixed 14x14 (the natural arrow.svg size) */
.about-panel-arrow {
    flex: 0 0 auto;
    display: block;
    width: 14px;
    height: 14px;
}

/* Divider line under the panel title: full-width hairline with a 1px navy border at 64% opacity */
/* (merged: 4 rules that carried identical declarations) */
.about-panel-divider,
.contact-card-divider,
.product-detail-panel-divider,
.more-details-inquiry-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--color-navy-64);
}

/* Question stack: fixed 1152px wide with a 16px gap between rows */
.faq-list {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Question row: accordion card, at least 60px tall (grows when expanded), 4px radius, 16px padding; light lavender like the accordion cards. Native <details> drives the open/closed state. */
.faq-item {
    display: flex;
    flex-direction: column;
    min-height: 60px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-lavender);
}

/* State symbols: minus while the item is open, plus while it is closed; natural sizes (13x1 and 13x13) so the thin minus line stays thin */
.faq-item-icon {
    flex: 0 0 auto;
    display: block;
    width: 13px;
    height: auto;
}

/* Minus icon: hidden while the item is closed (the [open] rule above brings
   it back) — declared after the base rule so it wins by source order */
.faq-item-icon-open {
    display: none;
}

/* Divider line under the title: full-width hairline with a 1px navy border at 64% opacity, 8px beneath the title row; only rendered while the item is expanded */
.faq-item-divider {
    display: none;
    width: 100%;
    height: 0;
    border-top: 1px solid var(--color-navy-64);
}

/* Answer body: 8px below the divider line */
.faq-item-body {
    padding-top: 8px;
}

/* Bulleted answer list: shown instead of the answer paragraph when an item supplies "bullets"; vertical flow with a 4px gap between rows */
.faq-item-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* .faq-item-bullet - typography only, declared in the Typography scale module above */
/* Split row: the 342px left column and the 794px right card, 16px apart (1152px total, matching the FAQ list above); equal heights — both sides are 625px tall */
/* (merged: 3 rules that carried identical declarations) */
.contact-split, .story-split, .newsletter-split {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    width: 1152px;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Left column: fixed 342px wide, its two cards separated by a 16px gap (358 + 16 + 251 = 625, the height of the right card) */
.contact-side {
    flex: 0 1 auto;
    width: 342px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card base: light lavender, 4px radius, 32px padding; vertical flow with a 16px gap ready for the card content */
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: 4px;
    background: var(--color-lavender);
}

/* Top-left card: 358px tall (stretches to the column width) */
.contact-card-top {
    flex: 0 0 auto;
    height: 358px;
}

/* Bottom-left card: 251px tall */
.contact-card-bottom {
    flex: 0 0 auto;
    height: 251px;
}

/* Right card: 794x625 */
.contact-card-main {
    flex: 0 1 auto;
    width: 794px;
    max-width: 100%;
    height: 625px;
}

/* Info group: a subtitle with its address lines and email, 8px apart; consecutive groups are 16px apart via the card's gap */
/* (merged: 3 rules that carried identical declarations) */
.contact-card-group, .post-detail-other-col, .apply-modal-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The first label sits 38px below the card's top edge: the card padding provides 32px, this nudge adds the remaining 6px */
.contact-card-main > :first-child {
    margin-top: 6px;
}

/* Form card heading + divider: mobile-only extras from the phone design;
   hidden on desktop, where the form card starts directly with the Full
   Name label in its fixed 794x625 geometry */
.contact-form-title,
.contact-form-divider {
    display: none;
}

/* Consent toggle switch + divider: mobile-only replacements for the square
   checkboxes (the switch is pure CSS over the real checkbox, which stays in
   the DOM and keeps submitting consent/newsletter; hidden on desktop where
   the 24x24 squares remain) */
.contact-toggle,
.contact-check-divider {
    display: none;
}

/* Text input: 730x24 (the full card interior width), 4px radius, 2px padding, navy fill at 16% alpha; Roboto Regular (400), 17px, dark navy inside */
.contact-input {
    width: 730px;
    max-width: 100%;
    height: 24px;
    padding: 2px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-16);
}

/* Message field: same styling, 221px tall, fixed size */
.contact-textarea {
    height: 221px;
    resize: none;
}

/* Keep keyboard focus visible on the form fields */
/* (merged: 8 rules that carried identical declarations) */
.contact-input:focus-visible,
.newsletter-input:focus-visible,
.talent-input:focus-visible,
.talent-upload:focus-within,
.job-search-input:focus-visible,
.job-filter-btn:focus-within,
.apply-modal-input:focus-visible,
.apply-modal-upload:focus-within {
    outline: 1px solid var(--color-navy);
    outline-offset: 1px;
}

/* Checkbox row: the box on the left, its label 16px to the right, vertically centered against the box; the whole row is clickable */
.contact-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Checkbox: 24x24, 4px radius, navy fill at 16% alpha; the checked state fills solid navy with a white check */
.contact-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 4px;
    background: var(--color-navy-16);
    cursor: pointer;
}

.contact-checkbox:checked {
    background: var(--color-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* .contact-check-text - typography only, declared in the Typography scale module above */
/* Send button: centered ghost button, at least 128x28 (grows to fit its label), 1px navy border, 4px radius, 4px/8px padding; Roboto Regular (400), 17px, dark navy; subtle navy tint on hover */
.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: center;
    min-width: 128px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
}

/* (merged: 9 rules that carried identical declarations) */
.contact-button:hover,
.products-page-more-btn-secondary:hover,
.racking-systems-btn-secondary:hover,
.product-detail-btn:hover,
.more-details-btn:hover,
.projects-more-btn-secondary:hover,
.privacy-btn-secondary:hover,
.faq-toggle-btn:hover,
.job-sort-btn:hover {
    background: var(--color-navy-8);
}

/* Footer: light lavender panel, 1280px wide and at least 426px tall (grows with content so nothing can ever spill out), vertical flow, 16px gap, 16px top/bottom padding; centered on the page like the other fixed-width containers */
.site-footer {
    width: 1280px;
    max-width: 100%;
    min-height: 426px;
    margin-inline: auto;
    margin-top: 16px;
    padding: 16px 0;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 1;
}

/* Footer top row: fixed 1068x16, horizontal flow, space-between — greyscale logo on the left, info text + link on the right */
.footer-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 1068px;
    height: 16px;
}

/* Footer logo: fixed 129x16, greyscale variant at 64% opacity */
.footer-logo {
    display: flex;
    flex-direction: column;
    width: 129px;
    height: 16px;
    opacity: 0.64;
}

/* Info group: horizontal flow, hug, 2px gap */
.footer-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

/* Info text: Roboto Medium (500), 12px, 100% line height, 0% letter spacing, dark navy at ~64% opacity */
.footer-info-text {
    margin: 0;
    white-space: nowrap;
}

.footer-info-link:hover {
    color: #002fa7;
}

/* Divider line: fixed 1068x0 with a 1px dark navy (~64% alpha) top border */
.footer-divider {
    width: 1068px;
    height: 0;
    border-top: 1px solid var(--color-navy-64);
}

/* Footer mobile menu: flat link list for the phone layout — hidden on
   desktop, where the five link columns carry the same destinations */
.footer-mobile-menu {
    display: none;
}

/* Legal links group: keeps the three links as one centered row on
   desktop (identical to when they were bare children); on mobile the
   group spreads edge to edge and the copyright drops below it */
.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Footer link columns: 5 columns spread across the same 1068px width as the top row and divider, space-between, aligned to the top */
.footer-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 1068px;
    max-width: 100%;
    opacity: 1;
}

/* Column: vertical flow, hug; first column fixed 79x300 per spec */
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-col-site {
    width: 79px;
    height: 300px;
}

/* Column list: vertical flow, hug, 8px gap. Font metrics are normalized here (12px / 100%) so the li struts match the links — the inherited 16px body font would otherwise inflate every row and push the tallest column past the footer's height */
.footer-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.footer-category-title b {
    font-size: 12px;
    font-weight: bolder;
    color: var(--color-navy-64);
}

/* Footer link rendered as a <button> (the Customer Portal dialog openers): same look as the anchor links with the native button chrome stripped */
.footer-link-button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Social links: icon to the left of the label, 8px gap */
.footer-social {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Social icon: fixed 12x12, tinted with the current link color */
.footer-social-icon {
    flex: 0 0 12px;
    display: block;
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Bottom legal bar: horizontal row centered across the same 1068px width as the rows above */
.footer-legal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 1068px;
    max-width: 100%;
}

.footer-legal-link {
    text-decoration: none;
}

/* Footer FAQs link label pair: the translated label shows on desktop; on
   mobile a literal (untranslated) "FAQs" span takes over so the Bosnian
   "Često postavljana pitanja" doesn't overload the legal row */
.footer-faq-short {
    display: none;
}

/* Talent join button label pair: the translated label shows on desktop;
   on mobile a shorter translated "Register" span takes over so the
   Bosnian "Pridružite se našoj mreži" fits the button */
.talent-btn-join-short {
    display: none;
}

/* Products page intro band: centered 1152x150 container sitting 16px below the header, horizontal flow with a 16px gap between the two image cards (326 + 16 + 810 = 1152); wraps on narrow viewports */
.products-page-inner {
    width: 1152px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 150px;
    opacity: 1;
}

/* Image card shared shape: 150px tall, 4px radius; no padding — the image fills the whole card */
.products-page-card {
    display: flex;
    flex-direction: column;
    height: 150px;
    max-width: 100%;
    border-radius: 4px;
    overflow: hidden;
    opacity: 1;
}

/* Left card: title-slide-background.png as a full-bleed backdrop behind the caption; fixed 326px wide */
.products-page-card-left {
    position: relative;
    width: 326px;
}

/* Backdrop image: fills the whole card (326x150) behind the caption */
.products-page-card-left .products-page-card-image {
    position: absolute;
    inset: 0;
}

/* Caption block: anchored 16px from the backdrop image's top and left edges (the image fills the whole card, so the caption is positioned against the same box) and spans to 16px from the right edge; vertical flow with a 16px gap between the title, divider and lead text */
.products-page-card-caption {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

/* Divider line: full-width 1px light lavender rule */
.products-page-caption-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--color-lavender);
}

/* Right card: manufactoring-01.jpg, fixed 810px wide; also the positioning context for the overlay logo pinned to its bottom-right corner */
.products-page-card-right {
    position: relative;
    width: 810px;
}

/* Overlay logo: header-logo.png pinned 16px from the card's bottom and right edges (16px inside the full-bleed photo), fixed 129x16, fully opaque */
.products-page-card-logo {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 129px;
    height: 16px;
    object-fit: contain;
    opacity: 1;
}

/* Card image: fills the whole card (326x150 / 810x150), cover-cropped, with the same 4px radius as the card */
.products-page-card-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 4px;
}

/* Products page card grid: 16px below the intro band, centered 1152px container, horizontal flow with a 16px gap between the four cards (4 x 252 + 3 x 16 = 1056, centered inside the container) */
.products-page-grid-inner {
    width: 1152px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 323.25px;
    opacity: 1;
}

/* Product card: fixed 252x323.25, 4px radius, 16px padding and 8px inner gap ready for future caption content; the background image fills the whole card behind it. Cards that link to a product page render as anchors — the color/text-decoration resets keep them visually identical */
.products-page-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 252px;
    height: 323.25px;
    max-width: 100%;
    padding: 16px;
    border-radius: 4px;
    overflow: hidden;
    opacity: 1;
    color: inherit;
    text-decoration: none;
}

.products-page-product-card:focus-visible {
    outline: 1px solid var(--color-lavender);
    outline-offset: 2px;
}

/* Card background image: fills the whole card (252x323.25), cover-cropped, clipped to the card's 4px radius */
.products-page-product-card-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card arrow: arrow.svg tinted gold (~64% alpha) — the SVG is used as a CSS mask so the arrow shape takes the background color (no border); pinned 16px from the card's top and right edges at its natural 14x14 size */
.products-page-product-card-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--color-gold-64);
    -webkit-mask: url("../images/arrow.40ab48a3d98a.svg") center / contain no-repeat;
    mask: url("../images/arrow.40ab48a3d98a.svg") center / contain no-repeat;
}

/* Solid gold arrow when hovering the card */
.products-page-product-card:hover .products-page-product-card-arrow {
    background-color: var(--color-gold);
}

/* Card content block: laid out 16px from the card's (and therefore the background image's) top and left edges via the card padding; paints above the absolutely positioned background image; vertical flow with the specified 8px gap between title, divider, photo and text */
.products-page-product-card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Divider line: full-width 1px light lavender (~64% alpha) rule */
.products-page-product-card-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--color-lavender-64);
}

/* Mobile-only short titles: "BESS" / "EMS" replace the two long card titles on phones/tablets (the <= 1023.98px block swaps the span pair inside the same heading); hidden on desktop */
.products-page-product-card-title-short {
    display: none;
}

/* Card photo: fixed 220x151.25 — exactly the card's content-box width, cover-cropped */
.products-page-product-card-photo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: 151.25px;
    object-fit: cover;
}

/* products-page-about-inner modifier: the shared narrow container with a 16px top margin and no padding */
/* (merged: 4 rules that carried identical declarations) */
.products-page-about-inner,
.products-page-more-inner,
.product-detail-inner,
.more-details-inner {
    margin-top: 16px;
    padding: 0;
}

/* Feature row: five cards with an 8px gap (5 x 217.6 + 4 x 8 = 1120, centered inside the 1152px container); wraps on narrow viewports */
.products-page-about-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

/* Feature card: fixed 217.6x194 (design spec: 217.60000610351562), light lavender fill, 4px radius, 16px padding, 8px inner gap */
.products-page-feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 217.6px;
    height: 194px;
    max-width: 100%;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    opacity: 1;
}

/* Divider line: full-width 1px dark navy rule */
/* (merged: 2 rules that carried identical declarations) */
.products-page-feature-divider, .job-card-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--color-navy);
}

/* Button row: horizontal flow, 16px gap, centered */
/* (merged: 5 rules that carried identical declarations) */
.products-page-more-actions,
.projects-more-actions,
.response-row,
.privacy-actions,
.talent-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* Button base: fixed 28px height, 4px/8px padding, 4px radius, 10px inner gap; Roboto Regular (400), 17px, 100% line height, 0% letter spacing */
/* (merged: 3 rules that carried identical declarations) */
.products-page-more-btn, .projects-more-btn, .privacy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
}

/* Contact Us: adapts to its text width (hugged by the inline-flex base), fixed 28px height, dark navy fill, light lavender text */
/* (merged: 3 rules that carried identical declarations) */
.products-page-more-btn-primary,
.faq-filter-btn.is-active,
.faq-filter-btn.is-active:hover,
.job-filter-btn.is-checked,
.job-filter-btn.is-checked:hover {
    background: var(--color-navy);
    color: var(--color-lavender);
}

/* Get Help: adapts to its text width (hugged by the inline-flex base), fixed 28px height, transparent fill with a 1px dark navy border, dark navy text */
.products-page-more-btn-secondary {
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
}

/* Racking systems page heading section: centered 815px container (three 261px cards + two 16px gaps) sitting 16px below the header; vertical flow with a 16px gap between the title, lead and card rows */
.racking-systems-inner {
    width: 815px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Card grid: horizontal flow with 16px gaps; left-aligned so the second row of cards hugs the container's left edge; wraps on narrow viewports */
.racking-systems-grid {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Card: fixed 261px wide, vertical flow — the photo sits directly on the lavender info panel with no gap between them */
.racking-systems-card {
    display: flex;
    flex-direction: column;
    width: 261px;
    max-width: 100%;
}

/* Card photo: fixed 261x161, top corners rounded 4px */
.racking-systems-card-image {
    display: block;
    width: 261px;
    max-width: 100%;
    height: 161px;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    opacity: 1;
}

/* Card info panel: fixed 261x159, 8px padding, light lavender fill, bottom corners rounded 4px; vertical flow with an 8px gap between the title, text and button row */
.racking-systems-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 261px;
    max-width: 100%;
    height: 159px;
    padding: 8px;
    background: var(--color-lavender);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Button row: horizontal flow with an 8px gap; margin-top: auto pins the row to the panel's bottom — the body's 8px padding keeps it 8px above the card's bottom edge, while the body's 8px flex gap leaves at least 16px below the text */
.racking-systems-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

/* Button base: fixed 22px height, 4px/8px padding, 4px radius, 10px inner gap; Roboto Regular (400), 12px, 100% line height, 0% letter spacing */
.racking-systems-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 22px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
}

/* Learn More: fixed 77x22, dark navy fill, light lavender text */
.racking-systems-btn-primary {
    background: var(--color-navy);
    color: var(--color-lavender);
}

/* Product Inquiry: fixed 98x22, transparent fill with a 1px dark navy border, dark navy text */
.racking-systems-btn-secondary {
    width: 98px;
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
}

/* Media/panel row: fixed 1152px row (512 + 624), horizontal flow; wraps on narrow viewports with a 16px row gap. The horizontal gap is 0 because the media frame's 16px right padding provides the visual 16px gap between the product photo and the info panel */
.product-detail-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 16px;
    row-gap: 16px;
    flex-wrap: wrap;
    width: 1152px;
    max-width: 100%;
}

/* Product photo frame: 512px wide, matches the info panel height (352px by default — the native height of the 512x352 product exports, so the image fills the frame with no letterboxing; raise both via the product "height" key in home/products.py); 4px radius */
.product-detail-media {
    width: 512px;
    max-width: 100%;
    height: var(--detail-height, 352px);
    border-radius: 4px;
}

/* Info panel: 624px wide, 352px tall by default — always the same height as the photo frame; products with more text raise both via the optional top-level "height" key in home/products.py; 32px padding, light lavender fill, 4px radius; vertical flow with an 8px gap between the rows. The datasheet button is pinned to the bottom with margin-top: auto. */
.product-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 624px;
    max-width: 100%;
    height: var(--detail-height, 352px);
    padding: 32px;
    background: var(--color-lavender);
    border-radius: 4px;
}

/* Feature list: vertical flow with a 4px gap between the rows */
.product-detail-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* .product-detail-feature - typography only, declared in the Typography scale module above */
/* Datasheet button: fixed 134x28, 4px/8px padding, 4px radius, transparent fill with a 1px dark navy border, dark navy text; Roboto Regular (400), 17px, 100% line height, 0% letter spacing */
.product-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    align-self: flex-start;
    margin-top: auto;
}

/* Value rows: each spec value reads as a bulleted list item — the bullet is drawn with ::before because the column is a flex box, where native list markers don't render; applies on desktop and in the mobile spec list alike */
.more-details-values .section-text::before {
    content: "•";
    margin-right: 8px;
}

/* Value blocks: one block per spec value — a value's lines stack tightly like the <br> they replace (each line is its own bulleted row) */
.more-details-value {
    display: flex;
    flex-direction: column;
}

.more-details-value .section-text {
    margin: 0;
}

/* Spec row: fixed 1152x354 (195 + 16 + 561 + 16 + 364), horizontal flow with 16px gaps; wraps on narrow viewports */
/* (merged: 2 rules that carried identical declarations) */
.more-details-row, .job-detail-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    width: 1152px;
    max-width: 100%;
}

/* Labels panel: 195px wide by default (longer labels such as "Total Structural Mass w/o Solar Panels" widen it with the more_details "labels_width" key in home/products.py), 354px tall by default (the more_details "height" key overrides it), 16px padding, light lavender fill, 4px radius; vertical flow with a 16px gap between the rows */
.more-details-labels {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: var(--labels-width, 195px);
    max-width: 100%;
    height: var(--more-details-height, 354px);
    padding: 16px;
    background: var(--color-lavender);
    border-radius: 4px;
}

/* Values column: fills what the 1152px row leaves after the labels card (var) and the 364px side column plus the two 16px gutters — 561px at the default 195px labels width; 354px tall by default (the more_details "height" key overrides it), 16px top/bottom padding, transparent; vertical flow with a 16px gap between the rows */
.more-details-values {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(1152px - 32px - 364px - var(--labels-width, 195px));
    max-width: 100%;
    height: var(--more-details-height, 354px);
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 4px;
}

/* Side column: fixed 364x354 (166 + 16 + 172), vertical flow with a single 16px gap between the photo frame and the inquiry card */
.more-details-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 364px;
    max-width: 100%;
}

/* Photo frame: fixed 364x166, no padding — the photo is cropped to fill the whole frame; overflow is clipped to the 4px rounded corners and the column's 16px gap is the whole visible gap to the inquiry card */
.more-details-media {
    width: 364px;
    max-width: 100%;
    height: 166px;
    border-radius: 4px;
    overflow: hidden;
}

.more-details-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Inquiry card: fixed 364x172, 16px padding, light lavender fill, 4px radius; centered vertical flow with an 8px gap between the rows */
.more-details-inquiry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 364px;
    max-width: 100%;
    height: 172px;
    padding: 16px;
    background: var(--color-lavender);
    border-radius: 4px;
}

/* Inquiry button: fixed 181x28, 4px/8px padding, 4px radius, transparent fill with a 1px dark navy border, dark navy text; Roboto Regular (400), 17px, 100% line height, 0% letter spacing */
.more-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 181px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Gallery: 1280x520 frame with no scrollbar — three absolutely positioned slides are driven by projects-gallery.js. The active slide is centered in the frame and its neighbours sit one step (slide width + 16px gap = 1064px) to either side, peeking at the frame edges; the bottom 40px of the frame (under the 480px slides) holds the prev/next controls, centered under the active slide */
.projects-gallery {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
}

/* Slide: fixed 1048x480 (its natural size), 10px padding, 4px radius; pulled back by half its width from left: 50% so it is centered in the frame, then shifted in 1064px steps with translateX. The initial transforms set the opening arrangement — first image centered, second to the right, third to the left (projects-gallery.js takes over from there); no transition — the buttons swap the pictures instantly. Slides peek at 64% opacity; the centered one is fully opaque */
.projects-gallery-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1048px;
    height: 480px;
    margin-left: -524px;
    padding: 10px;
    border-radius: 4px;
    opacity: 0.64;
}

/* Centered slide: fully opaque (projects-gallery.js moves this class in step
   with the dots) — declared after the base rule so it wins by source order */
.projects-gallery-slide-active {
    opacity: 1;
}

.projects-gallery-slide:nth-child(1) {
    transform: translateX(0);
}

.projects-gallery-slide:nth-child(2) {
    transform: translateX(1064px);
}

.projects-gallery-slide:nth-child(3) {
    transform: translateX(-1064px);
}

/* Prev/next buttons: two 24x24 controls with a 10px gap, horizontally centered in the 40px strip below the slides (i.e. under the centered image) */
.projects-gallery-nav {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* Button: 24x24, 4px radius, 4px padding, dark navy at ~64% alpha (#0F172AA3) fill that deepens to solid navy on hover */
.projects-gallery-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-64);
    cursor: pointer;
}

/* (merged: 3 rules that carried identical declarations) */
.projects-gallery-nav-btn:hover,
.apply-modal-checkbox:checked,
.apply-modal-dot.is-active {
    background: var(--color-navy);
}

/* Pagination dots between the buttons: one 12x12 dot per slide, 8px radius, 8px apart — the dot of the centered slide is solid dark navy, the others sit at ~64% alpha (projects-gallery.js swaps the active class as the pictures change) */
/* (merged: 3 rules that carried identical declarations) */
.projects-gallery-dots, .post-detail-side-author, .apply-modal-consent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.projects-gallery-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    background: var(--color-navy-64);
}

/* Active dot: solid dark navy — declared after the base rule so it wins by
   source order (projects-gallery.js swaps the class as slides change) */
.projects-gallery-dot-active {
    background: var(--color-navy);
}

/* "Interested in More?" section (projects page): centered title + lead over a pair of buttons, sitting 16px below the Project Tonopah gallery section */
.projects-more-inner {
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Photo Gallery: fixed 118x28, transparent fill with a 1px dark navy border, dark navy text */
.projects-more-btn-secondary {
    width: 118px;
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
}

/* Photo frame: fixed 516x188, 4px radius; clips the zoomed photo so it never spills over the card next to it */
.response-image-frame {
    width: 516px;
    height: 188px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Photo: fills the frame and is cropped to the lower-left part of the picture — anchored 40px past the frame bottom, so the last 40px of the photo are cut off rather than touching the edge — then zoomed 20% around the lower-left corner (bump the scale factor to taste) */
.response-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 calc(100% + 90px);
    transform: scale(1.35);
    transform-origin: left bottom;
}

/* Info card: fixed 620x188, light lavender fill, 32px padding (title sits 32px from the top/left), 4px radius, children 8px apart */
.response-card {
    width: 620px;
    height: 188px;
    padding: 32px;
    border-radius: 4px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Divider line between the title and text */
/* (merged: 2 rules that carried identical declarations) */
.response-card-divider, .locations-table tbody tr:first-child td {
    border-top: 1px solid var(--color-navy-64);
}

/* Note under the row: Roboto Regular (400), 22px, 100% line height, 0% letter spacing, centered, dark navy; capped at the 1152px content width */
.response-note {
    margin: 0;
    max-width: 1152px;
}

/* "Privacy and Data Handling" section (contact page): centered title + lead with two legal buttons underneath; sits 16px below the Response Expectations section */
.privacy-inner {
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Privacy Policy: fixed 121x28, transparent fill with a 1px dark navy border, dark navy text */
.privacy-btn-secondary {
    width: fit-content;
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
}

/* Image frame: 620px wide, at least 508px tall (grows to match a taller open accordion), 4px radius - the photo fills the whole frame */
.story-image {
    position: relative;
    width: 620px;
    min-height: 508px;
    max-width: 100%;
    margin: 0;
    border-radius: 4px;
}

/* The photo is absolutely positioned so its intrinsic size never dictates the frame height - it fills the entire frame edge to edge, cropping to cover, with the same 4px corner radius as the frame. The logo and caption siblings are NOT matched by this rule - classed on purpose so the bare descendant selector cannot stretch the corner overlays */
.story-image-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

/* Corner logo: header wordmark pinned 16px from the frame's top-left corner, fixed 129x16 */
.story-image-logo {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 129px;
    height: 16px;
}

/* Corner caption: two right-aligned lines pinned 16px from the frame's bottom-right corner; Roboto Regular (400), 22px, 100% line height, 0% letter spacing, white for legibility over the photo */
.story-image-caption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    margin: 0;
}

/* Accordion column: fills the remaining 516px of the row. The explicit 516px basis keeps the column beside the image on one line - an "auto" basis would use the paragraphs' unwrapped max-content width and wrap the column under the image. On screens narrower than the 1152px row the column wraps below the image and takes the full row width */
.story-accordion-col {
    flex: 1 1 516px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The shared .accordions stack is a fixed 518px wide on its own - inside this column it stretches to the column's full width and height instead, so the open card can absorb the leftover height next to the photo */
.story-accordion-col .accordions {
    flex: 1 1 auto;
    width: 100%;
}

/* Strip: fixed 1152px = 260+260+260+372 cards flush in a row (no gap), 16px vertical padding framing the 372px-tall cards (404px total). Wraps below the 1152px breakpoint, like the story split row */
.timeline-strip {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 16px 0;
}

/* Year card: 260px wide (the last one 372px), 372px tall; relative so the year chip can pin to its exact vertical center. Flow content (milestone note, slider hint) stacks from the top with a 16px gap */
.timeline-card {
    position: relative;
    flex: 0 1 260px;
    height: 372px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-card-wide {
    flex-basis: 372px;
}

/* Milestone note: tight lines (100% line height), Roboto Regular (400), 17px, 0% letter spacing, dark navy. Shrink-wrapped to its rendered text (fit-content, capped so it wraps 16px from the card's right edge) and anchored 16px in from the left - it is also the positioning context for its card's slider hint, which centers on the text block rather than the card. Its bottom edge sits 16px above the slider (32px) which sits 16px above the chip: 16+32+16+12(half-chip) = 76px above the card midline */
.timeline-milestone {
    position: absolute;
    left: 16px;
    width: fit-content;
    max-width: calc(100% - 32px);
    bottom: calc(50% + 76px);
    margin: 0;
}

/* Slider hint: slider-down.svg / slider-up.svg - a thin 2px stem with a dot (11x39 intrinsic) - scaled to 32px tall (width auto keeps the stem's 2px proportion, the spec's "width: 0" is the Figma hairline artifact). Lives INSIDE the milestone so it centers on the text block's middle; on the above-chip cards its stem drops from 16px beneath the text toward the chip (which stays 16px under the stem's dot) */
.timeline-milestone .timeline-slider {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 16px;
    display: block;
    width: auto;
    height: 32px;
}

/* Below-the-chip milestones (the 2024 entry, and the second 2026 entry on the wide card): same 16px rhythm anchored downward from the chip's bottom edge - the milestone grows down from midline + 76px, and its slider rides above the text, dot toward the chip. Applied per milestone so one card can host entries on both sides of its chip */
.timeline-milestone-below {
    bottom: auto;
    top: calc(50% + 76px);
}

.timeline-milestone-below .timeline-slider {
    top: auto;
    margin-top: 0;
    bottom: 100%;
    margin-bottom: 16px;
}

/* Year chip: pinned to its card's exact vertical center (absolute, so the 2023 card's milestone + slider stack above does not push it off-center), spanning the card's full width (260px, 372px on the last card), 24px tall, 2px vertical + 64px horizontal padding, 1px lavender border on dark navy; Roboto Regular (400), 17px, 100% line height, 0% letter spacing, lavender text */
.timeline-year {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 2px 64px;
    border: 1px solid var(--color-lavender);
    background: var(--color-navy);
}

/* Map frame: relative wrapper the width of the map so the corner logo badge can pin to the map's own box */
.locations-map-frame {
    position: relative;
    width: 1152px;
    max-width: 100%;
    margin: 0;
}

/* Map: fills the frame's width, fixed 600px tall, 4px radius; the source png is square (3334x3334) so it cover-crops into the wide box, like every other photo frame on the site */
.locations-map {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* The mobile-only map artwork (world-map-mobile.png, a pre-cropped wide render of the same map) is hidden on desktop; the <= 1023.98px block swaps the two images over */
.locations-map-mobile {
    display: none;
}

/* Vector path overlay: dotted route graphic laid pixel-exact onto the map artwork - 393x306.22 at (210, 152.78) straight from the design (the png is 394x307 intrinsic, same 1.2834 ratio, so it is not distorted; the spec's "border-width" is a raster-layer artifact) */
.locations-map-path {
    position: absolute;
    top: 140px;
    left: 210px;
    width: 393px;
    height: 306.22px;
}

/* Location pin badge: 16x16 navy chip with a 1px lavender border pinned onto the map; the 12x12 badge png sits 2px in from its top-left corner. The png is 1769x1429 intrinsic, so the 12x12 box stretches it exactly as the design frame does */
.locations-map-badge {
    position: absolute;
    top: 250px;
    left: 202px;
    width: 16px;
    height: 16px;
    background: var(--color-navy);
    border: 1px solid var(--color-lavender);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.locations-map-badge img {
    width: 12px;
    height: auto;
}

/* Second pin badge: same circular chip, pinned further down-right on the map */
.locations-map-badge-2 {
    top: 432px;
    left: 327px;
}

/* Third pin badge */
.locations-map-badge-3 {
    top: 225px;
    left: 325px;
}

/* 4th pin badge */
.locations-map-badge-4 {
    top: 202px;
    left: 582px;
}

/* 5th pin badge */
.locations-map-badge-5 {
    top: 214px;
    left: 593px;
}

/* 6th pin badge */
.locations-map-badge-6 {
    top: 198px;
    left: 597px;
}

/* Locations table: 32px under the map (its own 16px margin atop the stack's 16px gap), 1152px wide like the map, all content left-aligned. Header row is semibold, body Regular - both the page's 17px scale - with a 64%-alpha navy hairline between the titles and the first row */
.locations-table {
    width: 1152px;
    max-width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-family: Roboto, sans-serif;
    text-align: left;
}

.locations-table th {
    padding: 0 32px 16px 0;
    vertical-align: bottom;
}

/* Each body row carries 16px above its text: the divider sits 16px over the first row and consecutive rows are 16px apart, with no trailing space under the last row */
.locations-table td {
    padding: 16px 32px 0 0;
    vertical-align: top;
}

/* The "Since" column reads right-aligned - header label and content both - flush with the table's right edge */
.locations-table td:last-child, .locations-table th:last-child {
    text-align: right;
    padding-right: 0;
}

/* Country cell: flag icon with the country name beside it */
.locations-table-country {
    display: flex;
    align-items: center;
    gap: 12px;
}

.locations-table-country img {
    border-radius: 50%;
}

/* The "since" word is mobile-only: desktop's Since column carries the year alone, and the <= 1023.98px block reveals the word inline when the table restacks into cards ("Headquarters in Brčko District since 2023") */
.locations-table-since-word {
    display: none;
}

/* Same for the card title's line break: desktop keeps one flowing row per location, phones break "Location, Country" onto its own centered line */
.locations-table-br {
    display: none;
}

/* Split row: fixed 1152x848 = 352px nav column + 16px gap + 784px body panel; fully opaque, straight (no rotation); wraps on narrow viewports */
.privacy-policy-split {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 1;
}

/* Left column: 352px wide, at least 848px tall (grows with longer body content like the terms of use page), transparent, 4px radius, 16px padding; vertical flow with an 8px gap between the title, the numbered section entries and the closing sections */
.privacy-policy-nav {
    flex: 0 1 auto;
    width: 352px;
    max-width: 100%;
    min-height: 848px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
}

/* Right panel: 784px wide, at least 848px tall (grows with longer content like the terms of use page), light lavender fill, 4px radius, 16px padding; vertical flow with an 8px gap ready for the policy content */
.privacy-policy-body {
    flex: 0 1 auto;
    width: 784px;
    max-width: 100%;
    min-height: 848px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
    background: var(--color-lavender);
}

/* Shared bullet list: reusable dot-marked list (privacy policy body, other pages); custom dot markers centered on the text (unlike native baseline-riding discs), vertical flow with a 4px gap between rows; 12px left indent so the dots aren't flush with the container edge */
.bullet-list {
    margin: 0;
    padding: 0;
    padding-left: 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* List row: same type as the page body copy — Roboto Regular (400), 17px, 100% line height, 0% letter spacing, dark navy; the 12px left padding leaves an 8px gap between the 4px dot and the text */
.bullet-list-item {
    position: relative;
    padding-left: 12px;
    line-height: 1 !important;
}

/* Dot marker: small 4px navy circle, vertically centered on the row's letters (not sitting on the baseline like a native disc) */
.bullet-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-navy);
}

/* Image frame: fixed 690x388 (the natural newsletter-1.png artboard size) */
.newsletter-image {
    flex: 1 1 auto;
    width: 690px;
    height: 388px;
    max-width: 100%;
    margin: 0;
    border-radius: 4px;
}

/* Form column: fills the remaining 446px of the row. The explicit 446px basis keeps the column beside the frame on one line (same trick as the story split); on screens narrower than the 1152px row it wraps below the frame and takes the full row width. Vertical flow with a 16px gap between every element (title, copy, label, input, buttons, checkbox) */
.newsletter-form-col {
    flex: 1 1 446px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Title modifier: italic cut of the shared .section-subtitle (Roboto SemiBold (600), 24px, 100% line height, 0% letter spacing, dark navy) */
.newsletter-title {
    font-style: italic;
}

/* .newsletter-label - typography only, declared in the Typography scale module above */
/* Email input: fixed 446x28 (the full form column width), 4px radius, 4px/8px padding, navy fill at 16% alpha; Roboto Regular (400), 17px, dark navy inside, Light (300) placeholder at 64% alpha */
.newsletter-input {
    width: 446px;
    max-width: 100%;
    height: 28px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-16);
}

/* (merged: 4 rules that carried identical declarations) */
.newsletter-input::placeholder,
.talent-input::placeholder,
.job-search-input::placeholder,
.apply-modal-input::placeholder {
    font-weight: 300;
    color: var(--color-navy-64);
}

/* Subscribe: the shared .privacy-btn base with the dark navy primary fill, narrowed to the design's fixed 92x28 */
/* (merged: 2 rules that carried identical declarations) */
.newsletter-btn-subscribe, .job-search-btn {
    width: fit-content;
}

/* Hero frame: fixed 1152x150, relative box hosting the cover photo and the corner logo badge */
.support-hero-frame {
    position: relative;
    width: 1152px;
    max-width: 100%;
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
}

/* Hero photo: fills the frame edge to edge, cover-cropped into the wide, short strip; full opacity, no rotation */
/* (merged: 2 rules that carried identical declarations) */
.support-hero-image, .careers-feature-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

/* FAQ entry link (support center page, under the "01 Self-Service Resources" heading): Roboto Regular (400), 17px, 100% line height, 0% letter spacing, dark navy at ~64% alpha; an inline-level row so the 8x8 arrow.svg icon sits right next to the text (8px apart). Flows inline mid-sentence when nested inside a paragraph (e.g. the office@suntomine.com line under "05 Important Notes" — no new row), and still stacks as its own row when placed directly in the panel, because flex-column children are blockified back to flex */
.support-faq-link {
    margin: 0;
    text-decoration: none;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    vertical-align: baseline;
}

/* Link arrow: fixed 8x8 (arrow.svg scaled down from its natural 14x14) */
.support-faq-link-arrow {
    flex: 0 0 auto;
    display: block;
    width: 8px;
    height: 8px;
}

/* Support Center split override: the support page carries less content than the privacy policy / terms of use pages, so its copy of the shared .privacy-policy-split drops the fixed 848px design height both columns carry (scoped under the .support-split modifier added next to the base class in the markup) — the nav column and the lavender body panel simply hug their content and stretch to whichever is taller */
.support-split .privacy-policy-nav, .support-split .privacy-policy-body {
    min-height: 0;
}

/* FAQ page intro band (faq page): the same 1152x150 two-card strip as the products page intro band, so it reuses the shared .products-page-inner / .products-page-card / .products-page-card-caption rules wholesale; these two modifiers only retune the card widths — the title-slide-background.png backdrop card narrows to 314px and the faq-1.png photo card widens to 822px (314 + 16 + 822 = 1152); everything else (the 16px top-left caption anchor with 8px gaps, the 1px lavender divider, the 32px Black caption title, the 22px Regular caption text in #e7e6ee, and the 129x16 header-logo.png pinned 16px inside the photo card's bottom-right corner) comes from the shared rules above */
.faq-intro-card-left {
    width: 314px;
}

.faq-intro-card-right {
    width: 822px;
}

/* FAQ photo crop: faq-1.png is a 960x581 source cropped into the short 822x150 strip; the cover crop is anchored to the bottom but pushed 20px past the frame bottom (the same calc(100% + Npx) trick as .response-image), so the last 20px of the photo are cut off rather than sitting flush against the card's bottom edge */
.faq-intro-card-right .products-page-card-image {
    object-position: center calc(100% + 30px);
}

/* FAQ toolbar (faq page): 1152px row sitting 16px below the intro band; space-between pushes the two groups to the row's opposite ends — the seven category filter buttons on the left (content-hugging widths, ~699px in the design, 8px apart) and the Expand/Collapse pair on the right (~212px); wraps onto stacked rows on narrow viewports */
.faq-toolbar {
    width: 1152px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 28px;
    border-radius: 4px;
    opacity: 1;
}

/* Button group: horizontal flow with the design's 8px gap between buttons */
/* (merged: 2 rules that carried identical declarations) */
.faq-toolbar-group, .post-detail-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Category filter button: the shared .privacy-btn base (28px tall, 4px/8px padding, 4px radius, Roboto Regular 17px, 100% line height, 0% letter spacing) with a permanent ~8% navy fill and the dark navy text at ~63% alpha; hugs its label's width (102px for the wider labels in the design) */
.faq-filter-btn {
    background: var(--color-navy-8);
    color: var(--color-navy-64);
}

/* (merged: 2 rules that carried identical declarations) */
.faq-filter-btn:hover, .job-filter-btn:hover {
    background: var(--color-navy-16);
}

/* Expand/Collapse button: the shared .privacy-btn base with the .privacy-btn-secondary outline treatment retuned for the FAQ toolbar — 98px minimum width (hugging wider labels), the ~63% alpha navy text and a transparent fill (only the filter buttons on the left carry the permanent tint; the subtle navy hover below matches .privacy-btn) */
.faq-toggle-btn {
    min-width: 98px;
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy-64);
}

/* FAQ page question lists (faq page): 16px below the toolbar, centered 1152px container hosting one .faq-list per toolbar category; clicking a filter button reveals the [data-faq-category] block that matches it and hides the others */
.faq-page-lists {
    width: 1152px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Strip row: horizontal flow with the design's 16px gap. The row bleeds 16px into the container's side padding on each side (negative side margins), spanning the shell's full 1152px instead of its 1120px content box; the matching calc() max-width keeps the bleed from ever overflowing the viewport on narrow screens */
.careers-grid {
    width: 1152px;
    max-width: calc(100% + 32px);
    margin-inline: -16px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

/* Cards strip: the two job cards in a row 16px apart inside the grid (608 feature + 16 + 528 strip = 1152); stretches to the feature's 384px height so the cards stay equal */
.careers-cards-strip {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

/* Feature frame: fixed 608x384 photo card with the site's 4px rounded corners, clipping the cover photo inside */
.careers-feature {
    margin: 0;
    width: 608px;
    max-width: 100%;
    height: 384px;
    border-radius: 4px;
    overflow: hidden;
}

/* Job card: fixed 256x384, photo on top over the caption panel at the bottom; the 4px rounded frame clips the photo's top corners */
.careers-card {
    width: 256px;
    max-width: 100%;
    height: 384px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 1;
}

/* Card photo: fills the space above the caption panel (384 - 111 = 273px), cover-cropped from the 4096px-wide source */
.careers-card-image {
    display: block;
    width: 100%;
    height: 273px;
    object-fit: cover;
    opacity: 1;
}

/* Caption panel: fixed 256x111 lavender band, 8px padding, 8px vertical gap between the title, text and button; the bottom corners keep the card's 4px radius */
.careers-card-caption {
    height: 111px;
    padding: 8px;
    background: var(--color-lavender);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
}

/* Caption title: the shared .card-title scale (Roboto SemiBold 600, 18px, 100% line height, 0% letter spacing, dark navy) nudged 4px down so the title sits 12px from the panel's top edge (8px padding + 4px margin) */
.careers-card-title {
    margin-top: 4px;
}

/* Caption button: the shared .card-btn ghost treatment (22px tall, 4px/8px padding, 1px navy border, 4px radius, Roboto Regular 12px, 100% line height, 0% letter spacing, dark navy) with the design's 83px width as a floor instead of the fixed 77px — the wider "Join Our Network" label on the talent network card keeps its horizontal padding; fills solid navy with white text on hover via the shared rule */
.careers-card-btn {
    width: auto;
    min-width: 83px;
}

/* Benefits row: three cards 16px apart ((1152 - 32) / 3 = 373.33px each), equal widths via flex-grow; wraps onto stacked rows on narrow viewports */
.careers-benefits {
    width: 1152px;
    max-width: calc(100% + 32px);
    margin-inline: -16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 1;
}

/* Benefit card: 373.33x131 lavender (#E7E6EE) card, 4px radius, 16px padding, 8px gaps; the title lands 16px from the card's top and left via the padding; the design's fixed 131px height is kept as a floor (min-height) so the three-line 17px copy never clips at the site's effective 1.2 line height, while the three identical cards stay equal-height */
.careers-benefit {
    width: 373.33px;
    min-height: 131px;
    flex: 1 1 373px;
    min-width: 0;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
}

/* Hero band: the latest post 16px under the newsroom lead — fixed 1152x528, horizontal flow with a 16px column gap; the left stack (608px = 1152 - 528 - 16) holds the featured photo on top (608x264) flush with the gradient title-slide-background card beneath it (608x264; 264 + 264 = 528, matching the right grid's 256 + 16 + 256), the right half is a 528x528 grid of the next four posts */
.news-hero {
    width: 1152px;
    max-width: 100%;
    height: 528px;
    margin-inline: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    opacity: 1;
}

/* Left stack: fills the width left of the 528px grid (608px at the full 1152px band); the featured photo and the gradient card sit flush, forming one continuous 4px-rounded card */
.news-hero-stack {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Featured photo of the latest post: 608x264 panel (the stack's full width), cover-cropped to fill it, top corners rounded 4px */
.news-hero-photo {
    margin: 0;
    width: 100%;
    height: 264px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* Title card: products/title-slide-background.png as a full-bleed backdrop behind the headline and the date/button footer; 608x264, bottom corners rounded 4px (flush with the photo above) */
.news-hero-card {
    position: relative;
    width: 100%;
    height: 264px;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

/* Card overlay: absolute layer spanning the whole card; the headline is pinned to the top and the footer row to the bottom via space-between, with 16px padding all around */
.news-hero-card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

/* .news-hero-date - typography only, declared in the Typography scale module above */
/* Read more button: fixed 98x28 ghost button — 1px light lavender (~64% alpha) border, 4px radius, 4px/8px padding, 10px gap; Roboto Regular (400), 17px, 100% line height, 0% letter spacing, light lavender (~64% alpha); opens the latest post's page; goes solid lavender on hover */
.news-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--color-lavender-64);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Right half: fixed 528x528 grid of the next four posts — two columns by two rows of explicit 256x256 cells with a 16px gap (2 * 256 + 16 = 528); the tracks are pinned in px (not fr) so no auto-height pass can inflate them beyond the band's fixed 528px height */
.news-hero-grid {
    width: 528px;
    flex: 0 0 528px;
    display: grid;
    grid-template-columns: repeat(2, 256px);
    grid-template-rows: repeat(2, 256px);
    gap: 16px;
}

/* Grid post: featured photo (256x128) flush above the gradient card (256x128), together one continuous 4px-rounded cell */
.news-hero-post {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Featured photo of a grid post: 256x128 panel, cover-cropped to fill it, top corners rounded 4px */
.news-hero-post-photo {
    margin: 0;
    width: 100%;
    height: 128px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* Gradient card: images/news-card-gradient.png as a full-bleed backdrop behind the title and the date/button footer; 256x128, bottom corners rounded 4px (flush with the photo above) */
.news-hero-post-card {
    position: relative;
    width: 100%;
    height: 128px;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

/* .news-hero-post-date - typography only, declared in the Typography scale module above */
/* Read more button: fixed 74x22 ghost button — 1px light lavender (~64% alpha) border, 4px radius, 4px/8px padding, 10px gap; Roboto Regular (400), 12px, 100% line height, 0% letter spacing, light lavender (~64% alpha); opens the post's page; goes solid lavender on hover */
.news-hero-post-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    height: 22px;
    padding: 4px 8px;
    border: 1px solid var(--color-lavender-64);
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Archive band: the older posts 16px under the "Missed something?" lead — 1152px-wide grid, three columns by up to four rows of 373x128 posts with 16px gaps (3 * 373.33 + 2 * 16 = 1152; 4 * 128 + 3 * 16 = 560 when all twelve slots the template caps it at are filled); rows are implicit 128px tracks created per post, so the band is only as tall as the posts it holds — no empty fixed rows trailing a partial grid */
.news-archive {
    width: 1152px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 128px;
    gap: 16px;
    opacity: 1;
}

/* Archive post: 373x128 row with an 8px gap — the featured photo (128x128) on the left, then the title/date column filling the rest; the whole row opens the post's page */
.news-archive-post {
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
}

/* Featured photo: 128x128 square, cover-cropped to fill it, 4px rounded corners */
.news-archive-post-photo {
    margin: 0;
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    border-radius: 4px;
    overflow: hidden;
}

/* Placeholder: lavender square shown when a post has no featured image, keeping the row's 128x128 photo slot intact */
.news-archive-post-photo-placeholder {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    border-radius: 4px;
    background: var(--color-lavender);
}

/* Title/date column: fills the width left of the photo; the title sits at the top and the date is pinned to the bottom via space-between */
.news-archive-post-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* .news-archive-post-date - typography only, declared in the Typography scale module above */
/* Feed column: 768px reading column inside the 1152px narrow shell */
.news-feed {
    width: 768px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Empty state: lavender panel used while there are no posts yet */
.news-empty {
    width: 100%;
    padding: 32px 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    text-align: center;
}

/* Post card: white panel, 4px radius, 16px padding */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
}

/* Card header: avatar circle + author name / date stack */
.post-card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.post-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
}

.post-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* .post-author - typography only, declared in the Typography scale module above */
/* .post-date - typography only, declared in the Typography scale module above */
.post-card-title-link {
    color: inherit;
    text-decoration: none;
}

.post-card-title-link:hover {
    text-decoration: underline;
}

/* Card body: interleaved text paragraphs and images */
.post-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Text block: a stack of paragraphs (one per newline in the admin text), 8px apart — tighter than the 16px block rhythm; the font styles inherit into the inner <p> elements */
.post-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
}

/* Photo frame: hairline border with the site's 4px rounded corners, clipping the photo inside */
.post-image-frame {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

/* .post-image-caption - typography only, declared in the Typography scale module above */
/* Description label: the bold (700) lead-in inside the italic caption */
.post-image-caption b {
    font-weight: 700;
}

/* Post detail: the block following an image block sits 8px under the image description instead of the container's uniform 16px gap (the 8px negative margin eats half of it), keeping the caption attached to the content that follows it */
.post-detail-blocks .post-image + * {
    margin-top: -8px;
}

/* Card footer: likes counter and share button over a hairline divider */
.post-card-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.post-likes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    color: var(--color-navy);
}

.post-likes-icon {
    color: var(--color-accent);
}

.post-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    color: var(--color-navy);
    cursor: pointer;
}

/* Detail row: horizontal flow with the design's 16px gap */
.post-detail {
    width: 1152px;
    max-width: calc(100% + 32px);
    margin-inline: -16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Reading column (left side): fixed 880px, vertical flow with the design's 16px gap; the title lands 16px under the navbar via the section container's 16px top padding */
.post-detail-main {
    width: 880px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Side column (right side): the reserved 256px strip next to the reading column (880 + 16 + 256 = 1152); vertical flow with the design's 16px gap, holding the author, the post date, the like/share row and the latest news heading */
.post-detail-side {
    width: 256px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* .post-detail-side-date - typography only, declared in the Typography scale module above */
/* Latest news cards: two cards stacked 16px apart under the heading; each is the design's 256x256 rounded frame — the post's featured photo cover-cropped on top and the 256x128 news-card-gradient.png panel 10px below it (256 - 128 - 10 = 118px for the photo), the whole card linking to the post */
/* (merged: 2 rules that carried identical declarations) */
.post-detail-latest, .post-detail-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-detail-latest-card {
    display: flex;
    flex-direction: column;
    width: 256px;
    height: 256px;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    opacity: 1;
}

/* Card photo: the strip above the gradient, cover-cropped and anchored to the top edge (like the featured image); the placeholder keeps the geometry with the site's lavender when a post has no photo yet */
.post-detail-latest-card-image, .post-detail-latest-card-placeholder {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    object-position: top;
    background: var(--color-lavender);
}

/* Gradient panel: the 256x128 news-card-gradient.png filling it edge to edge behind the text, with the title at its top and the date pinned to its bottom */
.post-detail-latest-card-gradient {
    position: relative;
    height: 128px;
    flex: none;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-detail-latest-card-gradient-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Featured figure: the 880x256 rounded image frame with the italic credit line 16px underneath; hidden entirely when the post has no featured image */
.post-detail-featured {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Featured frame: fixed 880x256 with the site's 4px rounded corners, clipping the cover photo inside; full opacity, no rotation (the design's 8px gap setting on the frame is a layout vestige from the design file) */
.post-detail-featured-frame {
    width: 880px;
    max-width: 100%;
    height: 256px;
    border-radius: 4px;
    overflow: hidden;
}

/* Featured photo: fills the frame edge to edge, cover-cropped and anchored to the top edge (the crop eats into the bottom, keeping the top of the picture visible) */
.post-detail-featured-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 1;
}

/* .post-detail-featured-caption - typography only, declared in the Typography scale module above */
/* Author avatar: empty 20px circle placeholder before the author name (the row's 8px gap separates it from the name), lavender until a profile photo fills it; full opacity, no rotation */
.post-detail-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-lavender);
    flex: none;
    opacity: 1;
}

/* .post-detail-author - typography only, declared in the Typography scale module above */
/* .post-detail-date - typography only, declared in the Typography scale module above */
/* Post actions: like and share buttons, 16px apart in a 28px row — 110 + 16 + 78 = 204 wide; the row hugs its content instead of stretching across its column (it lives in the side column) */
.post-detail-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    height: 28px;
    opacity: 1;
}

/* Action buttons: 28px pills with the design's 6px icon/label gap and 4px vertical / 8px horizontal padding, Roboto Regular (400), 17px, 100% line height, 0% letter spacing; the design's fixed widths (110px like, 78px share) become min-widths so longer like counts never clip the text */
.post-detail-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    opacity: 1;
}

/* Like button: solid navy fill with the lavender thumbs-up icon, the label and the post's like count */
.post-detail-like {
    min-width: 110px;
    background: var(--color-navy);
    color: var(--color-lavender);
}

/* Share button: transparent (no fill in the design) with the label before the icon; the muted navy text matches the icon's own 64% opacity fill. The [data-share-label] span doubles as the clipboard feedback target ("Link copied!") for the share handler in main.js */
.post-detail-share {
    min-width: 78px;
    background: transparent;
    color: var(--color-navy-64);
}

/* Post footer: full-width block that wraps onto its own line in the .post-detail row (880px column + 16px gap + 100% exceeds 1152px), 16px under the like/share buttons via the row's gap; holds the divider and the previous/next navigation 16px apart */
.post-detail-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Divider: 1px muted navy rule across the full 1152px width */
.post-detail-divider {
    width: 100%;
    border-top: 1px solid var(--color-navy-64);
}

/* Other news: the heading sits 8px under the closing divider (the -8px margin halves the footer's 16px gap), with up to four other posts 8px below — two per side, pushed to the edges like the navigation row */
.post-detail-other {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -8px;
}

/* Posts row: two columns pushed to the edges — two posts stacked on the left side, two on the right; the right column carries margin-left: auto so it hugs the right edge regardless of how many posts it holds */
.post-detail-other-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.post-detail-other-col-right {
    margin-left: auto;
}

/* Other post: the title over its date, 8px apart */
.post-detail-other-post {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
}

/* .post-detail-other-post-title - typography only, declared in the Typography scale module above */
/* .post-detail-other-post-date - typography only, declared in the Typography scale module above */
/* Post navigation: 1152px row with the previous/next groups pushed to the edges; the next side carries margin-left: auto so it hugs the right edge even when it is the only side rendered (the oldest post has no previous neighbour) */
.post-detail-nav {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    gap: 16px;
    opacity: 1;
}

/* Navigation side: a pill button with the neighbouring post's title 16px underneath; the next side hugs the right edge */
.post-detail-nav-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.post-detail-nav-side-next {
    align-items: flex-end;
    margin-left: auto;
}

/* Navigation pill: ghost button with a 1px currentColor border (the navy of its own label), the design's 6px icon/label gap and 4px/8px padding; the fixed 134px width becomes a min-width so longer labels never clip */
.post-detail-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}

/* .post-detail-nav-title - typography only, declared in the Typography scale module above */
/* Featured image: optional lead picture shown between the post title and the content blocks; uses the post title as alt text automatically */
.post-featured {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

/* Card: light lavender, 4px radius, 32px padding */
.talent-register-card {
    width: 1152px;
    max-width: 100%;
    min-height: 292px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: 4px;
    background: var(--color-lavender);
    opacity: 1;
}

/* The register form wraps the card's fields (it posts them to the join
   view), so it takes over the card's flex column — the 16px rhythm
   between the fields is exactly what they had as direct card children
   before the form wrapper existed. The joined confirmation card that
   replaces the form after a successful join shares the same rhythm,
   as do the newsletter subscribe and unsubscribe forms inside
   .newsletter-form-col. */
.newsletter-form,
.newsletter-unsubscribe-form,
.talent-register-form,
.talent-joined {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Email input: 1088x28 at full size (the full card interior width), 4px radius, 4px/8px padding, navy fill at 16% alpha; Roboto Regular (400), 17px, dark navy inside, Light (300) placeholder at 64% alpha */
.talent-input {
    width: 100%;
    height: 28px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-16);
}

/* CV drop zone: styled like the text input above but built as a label wrapping a visually-hidden file input — clicking it opens the file picker, and main.js additionally accepts dragged files and swaps the hint text for the picked file's name */
.talent-upload {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 28px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--color-navy-16);
    cursor: pointer;
}

/* The real file input: visually hidden but still focusable and announced by screen readers (the label's for= keeps it clickable) */
/* (merged: 2 rules that carried identical declarations) */
.talent-upload-file, .apply-upload-file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Zone text: the drop hint / picked file name, Roboto Light (300), 17px, 100% line height, 0% letter spacing, dark navy at 64% alpha — the placeholder treatment */
/* (merged: 2 rules that carried identical declarations) */
.talent-upload-text, .apply-upload-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drag feedback: a deeper navy tint with a dashed outline while a file is being dragged over the zone (class toggled by main.js) */
/* (merged: 2 rules that carried identical declarations) */
.talent-upload.is-dragover, .apply-modal-upload.is-dragover {
    background: #0f172a3d;
    outline: 1px dashed var(--color-navy);
    outline-offset: -1px;
}

/* Consent row: the shared .contact-check row (24x24 box, label 16px to its right, the whole row clickable), centered in the card */
.talent-check {
    align-self: center;
}

/* Controls form: one GET form wrapping the search bar, the category chips and the sort row so every control submits together; vertical flow with the section container's 16px gap between the rows. The negative top margin turns that gap into the design's 8px offset between the lead and the search bar */
.job-controls {
    width: 100%;
    margin-top: -8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Bar: horizontal flow with the design's 16px gap and 16px padding (the padding puts the "Find" label 16px from the top and left edges), light lavender fill. The 88px height is a min-height so the bar keeps the design height on one line yet grows instead of clipping when the fields wrap on narrow screens */
.job-search {
    width: 100%;
    padding: 16px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 88px;
}

/* Field group: vertical flow — the label on top and its input 8px below */
.job-search-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Text inputs: fixed 28px height, 4px radius, 4px/8px padding, navy fill at 16% alpha; Roboto Regular (400), 17px, dark navy inside, Light (300) placeholder at 64% alpha */
.job-search-input {
    height: 28px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-16);
}

/* Keyword field: the design's fixed 501.5px */
.job-search-query {
    width: 501.5px;
    max-width: 100%;
}

/* ========================================================================
   5. RESPONSIVE — compact header and mobile page rules

   Everything in this section lives in media queries appended after all
   component rules, so at equal specificity they win by source order —
   the same convention the component section uses for its overrides.
   The desktop layout (>= 1024px) is untouched: the hamburger stays
   hidden and the header keeps its original single-row arrangement.
   ======================================================================== */

/* Hamburger button: only rendered below 1024px (the media query below
   switches it on); fully unstyled button so nothing shows except the
   three lines themselves */
.header-burger {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Close icon inside the burger: hidden everywhere except the open mobile
   panel, where it replaces the three lines */
.header-burger-x {
    display: none;
}

/* Mobile & tablet (<= 1023.98px): the header collapses to a 48px bar —
   navy #0F172A background (from .site-header), 16px padding — with the
   logo 16px in from the left and a three-line hamburger whose lines
   (24px wide, 2px solid light lavender) end 16px in from the right. The
   menu links, the Customer Portal button and the region selector fold
   into a full-width overlay panel glued directly under the bar while the
   header carries the .menu-open class (toggled by main.js); the panel
   floats over the page instead of pushing it down. */
@media (max-width: 1023.98px) {
    /* Bar: exactly 48px tall (16px logo + 2 x 16px padding); the
       absolutely positioned burger and overlay panel add no height. The
       relative positioning anchors both of them */
    .header-inner {
        position: relative;
        min-height: 48px;
    }

    /* Hamburger: 40x40 touch target pinned to the bar (top 4px centers it
       on the 48px bar); the lines are right-aligned inside the button so
       the icon ends exactly 16px from the right edge */
    .header-burger {
        position: absolute;
        top: 4px;
        right: 16px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 5px;
        width: 40px;
        height: 40px;
    }

    /* Lines: 24px wide each, drawn as 2px light lavender top borders */
    .header-burger-line {
        width: 24px;
        height: 0;
        border-top: 2px solid var(--color-lavender);
        border-radius: 1px;
    }

    /* Open state: the three lines give way to an X — the same 2px stroke
       weight in light lavender (#E7E6EE), vertically centered and aligned
       to the lines' right edge (the .menu-open class on the <header>
       drives the swap; the lines stay in the DOM for the closed state) */
    .site-header.menu-open .header-burger-line {
        display: none;
    }

    .site-header.menu-open .header-burger-x {
        display: block;
        color: var(--color-lavender);
    }

    /* Folded pieces stay out of the layout until the bar is opened */
    .header-nav,
    .header-actions {
        display: none;
    }

    /* Open panel: the wrapper becomes a full-width lavender (#E7E6EE)
       overlay glued to the bottom edge of the bar (top: 100% of
       .header-inner) — it floats over the page, so nothing below the
       navbar moves. The bar itself keeps its closed-state geometry
       unchanged: 16px padding, logo 16px from the left, 48px tall */
    .site-header.menu-open .header-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: block;
        background: var(--color-lavender);
        animation: header-panel-in 200ms ease-out;
    }

    .site-header.menu-open .header-nav {
        display: block;
        padding: 16px 16px 8px;
    }

    .site-header.menu-open .header-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px; /* each item 8px below the previous one */
    }

    /* Row text: Roboto SemiBold (600), 24px, 100% line height, 0 letter
       spacing, dark navy; the global * rule carries !important, so the
       line-height override needs it too */
    .site-header.menu-open .header-menu a {
        display: block;
        padding: 0;
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 1 !important;
        letter-spacing: 0;
        color: var(--color-navy);
    }

    /* Customer Portal row: restyled exactly like the link rows — the
       ghost-button chrome (gold border and color, centered pill padding)
       is reset inside the panel. The 8px bottom padding is what spaces
       the language list's divider 8px under the Location | Language row
       once it is expanded */
    .site-header.menu-open .header-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px; /* the portal row 8px under Careers, the region row 8px under that */
        padding: 0 16px 8px;
    }

    .site-header.menu-open .header-cta {
        justify-content: flex-start;
        padding: 0;
        border: 0;
        background: transparent;
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 1 !important;
        letter-spacing: 0;
        color: var(--color-navy);
        text-align: left;
    }

    /* Location | Language row: same typography as every other row; the
       desktop trigger contents (flag, region code, chevron) give way to
       the row label and a 16px plus icon that lands 16px from the right
       edge (the row stretches across the panel's 16px side inset) */
    .site-header.menu-open .header-lang {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0;
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 1 !important;
        letter-spacing: 0;
        color: var(--color-navy);
    }

    .site-header.menu-open .header-lang .header-lang-flag,
    .site-header.menu-open .header-lang .header-lang-code,
    .site-header.menu-open .header-lang .header-lang-arrow {
        display: none;
    }

    .site-header.menu-open .header-lang-panel-label {
        display: block;
    }

    .site-header.menu-open .header-lang-plus {
        display: block;
        flex: 0 0 16px;
        color: var(--color-navy-64); /* the strokes use currentColor */
    }

    /* Open state of the language list: the plus drops its vertical bar
       and reads as a minus while the list is expanded. main.js keeps
       aria-expanded on the trigger in sync with the list's visibility,
       so this selector needs no extra wiring */
    .site-header.menu-open .header-lang[aria-expanded="true"] .header-lang-plus-v {
        display: none;
    }

    /* Language list: expands inline inside the open panel — the actions
       block's 8px bottom padding puts this rule's 1px navy (64% alpha)
       top border exactly 8px under the Location | Language row, then the
       rows run 8px apart. The 16px side margins keep the divider 16px
       from the panel's left and right edges (with no side padding, so
       the row text keeps the same 16px inset). Static positioning keeps
       the list in the panel's flow instead of the desktop's absolute
       dropdown. The plain .header-lang-menu selector keeps specificity
       below the [hidden] rule above, so the hidden attribute still
       wins. */
    .header-lang-menu {
        position: static;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        margin: 0 16px;
        padding: 8px 0;
        gap: 8px;
        border-top: 1px solid var(--color-navy-64);
        animation: header-panel-in 200ms ease-out;
    }

    /* Language rows: text only — "Global | English (en)" — in Roboto
       Regular (400), 20px, 100% line height, 0 letter spacing, navy at
       64% alpha; the flags stay desktop-only */
    .header-lang-menu .header-lang-item,
    .header-lang-menu .header-lang-item-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .header-lang-menu .header-lang-item-flag {
        display: none;
    }

    .header-lang-menu .header-lang-item-region,
    .header-lang-menu .header-lang-item-sep,
    .header-lang-menu .header-lang-item-lang {
        justify-self: auto;
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 1 !important;
        letter-spacing: 0;
        color: var(--color-navy-64);
    }

    /* Hero: shorter media box; the overlay grows with its copy and stays
       anchored to the bottom instead of the fixed 960x512 box */
    .page-hero-media,
    .page-hero-image {
        height: 480px;
    }

    .page-hero-content {
        height: auto;
        padding-bottom: 20px;
    }

    /* Kicker banner: hugs the WIDEST rendered line with 12px each side.
       The kicker text becomes a flex column — a flex column's width is by
       spec the widest child, immune to the block-sizing quirk where a
       <br> (or stale inline content) measures as the unwrapped sentence —
       and every line span shrink-wraps its own text via fit-content */
    .hero-kicker {
        height: auto;
        padding: 4px 12px;
        width: fit-content;
        max-width: 100%;
    }

    .hero-kicker-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 32px;
    }

    .hero-kicker-line {
        display: block;
        width: fit-content;
    }

    .hero-title {
        font-size: 48px;
    }

    .hero-text {
        font-size: 19px;
    }

    /* Slide arrows: inline members of the centered dots row — the row's
       8px flex gap puts each chip exactly 8px from the dots, vertically
       centered on the same line (the dots stay dead-center because both
       chips are the same 36px width). Chip: 4px padding, 4px radius,
       near-black #2B2A27 fill, 28x28 icon box inside */
    .hero-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 4px;
        border: 0;
        border-radius: 4px;
        background: #2b2a27;
        opacity: 1;
        cursor: pointer;
    }

    .hero-arrow img {
        display: block;
        width: 11px;
        height: 16px;
    }

    /* Footer: the phone spec — 16px side/top padding (logo 16px from the
       top-left), the support line 12px under the logo and left-aligned,
       then the 16px-gap stack: hairline, Home, hairline, the flat menu
       links, hairline (the desktop dividers sandwich the menu), the legal
       links spread left/center/right, and the copyright 12px under them.
       The five desktop link columns give way to the flat menu */
    .site-footer {
        align-items: stretch;
        min-height: 0;
        padding: 16px;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 12px;
        width: auto;
        max-width: 100%;
    }

    .footer-info {
        justify-content: flex-start;
    }

    .footer-mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    /* Menu row: full width (the menu stretches it) with the label on the
       left and the plus icon on the right — the icon lands 16px from the
       footer's right edge via the footer's 16px padding. Closed-state
       typography is the spec's 17px Roboto Medium at 64% navy; this rule
       sits after the shared modules, so it wins over .footer-link's
       12px scale */
    .footer-mobile-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 17px;
        line-height: 100%;
        letter-spacing: 0;
        color: var(--color-navy-64);
    }

    .footer-mobile-plus {
        display: block;
        flex: 0 0 12px;
        width: 12px;
        height: 12px;
    }

    /* Expanded row (Home): the 17px/500 typography is shared with the
       closed rows — only the color flips to solid navy */
    .footer-mobile-link.is-open {
        color: var(--color-navy);
    }

    /* Home sub-list: pulled 8px up (halving the menu's 16px gap) so the
       first link sits 8px under the Home label; the seven links are 10px
       apart and the divider that follows sits 18px under the last one
       (the menu's 16px gap + the 2px push). [hidden] must win over the
       flex display above, same as the header language menu */
    .footer-mobile-sublist {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: -8px 0 2px;
        padding: 0;
        list-style: none;
    }

    .footer-mobile-sublist[hidden] {
        display: none;
    }

    .footer-mobile-sublink {
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0;
        color: var(--color-navy-64);
        text-decoration: none;
    }

    /* Group header inside an open sub-list (Racking Systems under
       Products): the spec's 14px Roboto Medium at 80% navy; the links
       under it reuse .footer-mobile-sublink and the same 10px list gap */
    .footer-mobile-subtitle {
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0;
        color: var(--color-navy-80);
    }

    .footer-mobile-divider {
        width: 100%;
        height: 0;
        border-top: 1px solid var(--color-navy-64);
    }

    .footer-columns {
        display: none;
    }

    .footer-divider {
        width: auto;
        max-width: 100%;
    }

    .footer-legal {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        width: auto;
        max-width: 100%;
    }

    .footer-legal-links {
        justify-content: space-between;
    }

    /* Legal links + copyright: the shared module already gives them
       Roboto Medium, 0 spacing and 64% navy — only the size moves to the
       spec's 17px on mobile */
    .footer-legal-link,
    .footer-legal-text {
        font-size: 17px;
    }

    /* Support line: the spec's Regular 17px — the info text drops its
       module's 500 weight for 400, and the Support Center link is already
       Regular (both keep their module colors and 0 letter-spacing) */
    .footer-info-text {
        font-weight: 400;
        font-size: 17px;
    }

    .footer-info-link {
        font-size: 17px;
    }

    /* Portal dialogs: the fixed heights would clip once the form rows
       wrap on a narrow card */
    .portal-modal,
    .portal-modal-register {
        height: auto;
    }

    .portal-modal-field {
        max-width: 100%;
    }

    /* Products row: the four cards become a full-bleed horizontal
       scroller — one line, no wrapping, 16px between cards. Negative
       side margins cancel the 16px side padding of .section-inner so
       the row spans the whole screen (scrolled cards would otherwise
       visibly clip 16px short of the edge); the row's own 16px inline
       padding puts the first card exactly 16px from the left edge and
       leaves 16px after the last card at the scroll end */
    .products-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards keep their fixed 256px width instead of shrinking to fit */
    .product-card {
        flex: 0 0 auto;
    }

    /* Newsroom row: the news stacks become a full-bleed horizontal
       scroller too instead of four columns shrinking with the viewport —
       same treatment as the products row above: one line, no wrapping,
       16px between stacks, negative side margins + inline padding for the
       full-bleed scroll (first stack 16px from the edge, 16px left after
       the last one at the scroll end) */
    .newsroom-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        width: calc(100% + 32px);
        /* max-width: none cancels the base row's max-width: 100%, which
           would otherwise clamp the row back inside the section padding
           and stop the peeking card short of the right screen edge */
        max-width: none;
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stacks keep their fixed 256px design width (the desktop row's
       (1048px - 3x8px gaps) / 4 share) instead of shrinking */
    .newsroom-stack {
        flex: 0 0 auto;
        width: 256px;
    }

    /* Manufacturing row: the four cards become a full-bleed horizontal
       scroller — same treatment as the homepage products/newsroom rows:
       one line, no wrapping, 16px between cards, negative side margins +
       inline padding for the full-bleed scroll (first card 16px from the
       edge, 16px left after the last one at the scroll end) */
    .manufacturing-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards keep their fixed 256x384 design size instead of shrinking */
    .manufacturing-card {
        flex: 0 0 auto;
    }

    /* Detail + pillars sections: the inner containers regain their 16px
       side padding so the headings and leads sit 16px from the screen
       edges, and the desktop split row stacks — photo 16px under the lead,
       lavender panel 16px under the photo, both spanning edge to edge minus
       the 16px insets (the section's own margin-top keeps it 16px under
       the cards) */
    .manufacturing-detail-inner,
    .manufacturing-pillars-inner {
        padding: 0 16px;
    }

    .manufacturing-split {
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 16px;
    }

    /* Photo slot: full width at the desktop frame's 188px height so the
       cover crop and the corner logo badge keep their framing */
    .manufacturing-split-photo {
        width: 100%;
        height: 188px;
    }

    /* Panel: hugs its content instead of the fixed 188px desktop height;
       the padding narrows to 16px so the text starts 16px from the card's
       top and left edges */
    .manufacturing-split-panel {
        width: 100%;
        height: auto;
        flex: none;
        padding: 16px;
    }

    /* Card modal: sized to its content instead of the fixed 203px desktop
       height — at phone widths the title and bullets wrap onto more lines
       and the fixed height clipped the list's bottom. fit-content, not
       auto: the native dialog is absolutely positioned with top/bottom
       anchors, and height: auto would stretch it to the full screen */
    .manufacturing-modal {
        height: fit-content;
    }

    /* Projects gallery: the slides become a swipeable horizontal strip —
       in flow, one image per viewport width, natural height; scrolling is
       free momentum, exactly like the homepage card rows (no scroll-snap,
       which would lock the swipe and feel abrupt). The prev/next buttons
       and dots drop out (the carousel JS stays dormant without its
       controls) and the frame keeps the section shell's 16px side insets
       as the scroll viewport */
    .projects-gallery {
        height: auto;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .projects-gallery-slide {
        position: static;
        display: block;
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        opacity: 1;
    }

    /* The desktop nth-child arrangement transforms are cancelled so the
       in-flow slides line up in the strip instead of shifting sideways */
    .projects-gallery-slide:nth-child(1),
    .projects-gallery-slide:nth-child(2),
    .projects-gallery-slide:nth-child(3) {
        transform: none;
    }

    .projects-gallery-nav {
        display: none;
    }

    /* News hero (latest post): full-width stacked card inside the 16px
       side insets; the Read more button drops out */
    .news-hero {
        height: auto;
        flex-direction: column;
        padding: 0 16px;
    }

    .news-hero-btn {
        display: none;
    }

    /* The whole latest-post card and each grid post open their post on tap */
    .news-hero-stack,
    .news-hero-post {
        cursor: pointer;
    }

    /* Latest post headline: the spec's 24px on phones (desktop keeps 34px) */
    .news-hero-title {
        font-size: 24px;
    }

    /* Lower half of the latest post card: 179px on phones (desktop keeps
       the 264/264 split) */
    .news-hero-card {
        height: 179px;
    }

    /* Upper half (the photo): matches the card's 179px so both halves of
       the latest post card are equal */
    .news-hero-photo {
        height: 179px;
    }

    /* The next four posts: older-article-style rows — square photo on the
       left, navy title/date column on the right (the gradient backdrop and
       Read more drop out; the row keeps the archive's 8px photo gap) */
    .news-hero-grid {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .news-hero-post {
        flex-direction: row;
        gap: 8px;
    }

    .news-hero-post-photo {
        width: 128px;
        height: 128px;
        flex: 0 0 128px;
        border-radius: 4px;
    }

    .news-hero-post-card {
        position: static;
        width: auto;
        height: auto;
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 0;
    }

    .news-hero-post-card-bg {
        display: none;
    }

    .news-hero-post-card-content {
        position: static;
        min-height: 128px;
        padding: 0;
    }

    .news-hero-post-title {
        color: var(--color-navy);
        font-weight: 600;
        font-size: 22px;
    }

    .news-hero-post-date {
        color: var(--color-navy);
        font-weight: 400;
        font-size: 15px;
    }

    .news-hero-post-btn {
        display: none;
    }

    /* Older articles: one column, each row reading title, 8px, date, 8px,
       then a 1px navy-64 divider (the row keeps its 128px photo and the
       grid's 16px gaps space the posts) */
    .news-archive {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding: 0 16px;
    }

    /* Photos drop out of the archive rows — text only */
    .news-archive-post-photo,
    .news-archive-post-photo-placeholder {
        display: none;
    }

    .news-archive-post-body {
        justify-content: flex-start;
        gap: 8px;
    }

    .news-archive-post-body::after {
        content: "";
        border-top: 1px solid var(--color-navy-64);
    }

    /* Single post: the detail row keeps the shell's 16px side insets
       instead of its desktop full bleed, so the title, featured image,
       credit line, author row, post text and in-post images all sit 16px
       from the screen edges (16px from the top comes from the shell's own
       top padding, and the main column's 16px gap spaces the featured
       image under the title) */
    .post-detail {
        max-width: 100%;
        margin-inline: 0;
    }

    /* Title: the spec's Roboto Black 32px on phones */
    .post-detail-title {
        font-weight: 900;
        font-size: 32px;
    }

    /* End-of-post sidebar: the creator's avatar, name and date drop out —
       they already show in the main column's meta row under the featured
       image */
    .post-detail-side-author,
    .post-detail-side-date {
        display: none;
    }

    /* The sidebar's Latest News heading and cards drop out on mobile */
    .post-detail-side-title,
    .post-detail-latest {
        display: none;
    }

    /* Prev/next pill labels stay on one line */
    .post-detail-nav-btn {
        white-space: nowrap;
    }

    /* Next-post title: right-aligned under its button (its right edge
       already sits 16px from the screen edge via the row's insets) */
    .post-detail-nav-side-next .post-detail-nav-title {
        text-align: right;
    }

    /* Section headings: 32px title and 19px lead on every phone width (the
       old <= 560px 24px/18px overrides were removed so small phones keep
       the same sizes) */
    .section-title {
        font-size: 32px;
    }

    .section-lead {
        font-size: 19px;
    }

    /* Exception: the About page timeline lead keeps the desktop 22px on
       phones - it is the lead directly before the Company Timeline strip */
    .section-lead:has(+ .timeline-strip) {
        font-size: 22px;
    }

    /* Exception: the About page locations lead keeps the desktop 22px on
       phones - it is the lead directly before the locations map */
    .section-lead:has(+ .locations-map-frame) {
        font-size: 22px;
    }

    /* Locations map on phones: the desktop square artwork is swapped out for
       world-map-mobile.png - a pre-cropped wide 1152x598 render of the same
       map - filled into the 400px-tall tile (the desktop tile is 600px; the
       width still rides the frame, which the section's padding insets 16px
       from each screen edge). The cover fill crops the wide artwork's sides
       to fill the taller box, and object-position pulls that window left of
       center so the visible slice favors the left part of the map (the
       Americas side, where the US pins belong) */
    .locations-map-desktop {
        display: none;
    }

    .locations-map-mobile {
        display: block;
        height: 400px;
        object-position: 22.3% 50%;
    }

    /* The pixel-anchored route path and pin badges are desktop-only: their
       fixed px coordinates are laid out for the 1152px frame and cannot land
       on the scaled-down mobile artwork, so they travel with the square
       image instead of floating misaligned over the mobile one */
    .locations-map-path,
    .locations-map-badge {
        display: none;
    }

    /* Locations table on phones: the 4-column grid restacks into centered
       text cards, one per row - "Location, Country" title (the country text
       rides along from the row's data-country attribute, comma included),
       the description on its own 8px-gapped line flowed together with the
       translated since-word and year, and a navy-64 hairline under every
       card. The cells keep their DOM order; the country cell (flag + name)
       simply hides since the title carries the country */
    .locations-table,
    .locations-table tbody,
    .locations-table tr {
        display: block;
    }

    .locations-table thead {
        display: none;
    }

    .locations-table tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--color-navy-64);
        text-align: center;
        color: var(--color-navy);
        line-height: 1 !important;
    }

    .locations-table tr:first-child {
        padding-top: 0;
    }

    /* The last card has no divider under it - the hairlines only sit
       between cards */
    .locations-table tr:last-child {
        border-bottom: 0;
    }

    /* The desktop hairline between the column headers and the first row has
       nothing above it once the headers hide, so on phones the first card
       carries no top border - the dividers only close each card */
    .locations-table tbody tr:first-child td {
        border-top: 0;
    }

    .locations-table td {
        display: inline;
        padding: 0;
        line-height: 1 !important;
    }

    .locations-table td:first-child {
        display: none;
    }

    /* Title: the page's inherited 17px Roboto at Medium (500), as a centered
       atomic box; its 8px bottom padding is the mock's gap under the title,
       and the mobile-only <br> inside the cell ends the title line so the
       description always starts on its own line */
    .locations-table td:nth-child(2) {
        display: inline-block;
        padding: 0 0 8px;
        font-weight: 500;
        line-height: 1 !important;
    }

    .locations-table td:nth-child(2)::after {
        content: ", " attr(data-country);
    }

    /* Description: flowed inline so the translated since-word + year cell
       rides the same lines; the row's line-height: 1 is the mock's 100%
       leading */
    .locations-table .locations-table-br {
        display: inline;
    }

    .locations-table .locations-table-since-word {
        display: inline;
    }

    /* Response Expectations row on contact: the photo frame stacks on top
       of the info card (the row keeps its DOM order), both riding the
       section shell's 16px side insets; the frame keeps its 188px height
       and lower-left photo crop, the card drops the fixed 620x188 box for
       its own 32px padding rhythm */
    .response-row:has(.response-image-frame) {
        flex-direction: column;
    }

    .response-image-frame {
        width: 100%;
    }

    .response-card {
        width: 100%;
        height: auto;
        padding: 16px;
    }

    /* Response photo on phones: the desktop crop hugs the lower-left corner
       zoomed 1.35x; phones show a different part of the picture instead -
       the zoom drops and the crop centers, so the middle band of the team
       photo reads across the wide short banner */
    .response-image {
        object-position: 50% 92%;
        transform: scale(1.2);
    }

    /* Careers grid on phones: the feature photo sits on top, 16px from
       each screen edge, and the two job cards become a swipeable
       left-to-right strip under it — one line, no wrapping. The strip
       re-applies the base rule's negative side margins so the cards scroll
       edge-to-edge, with its own 16px inline padding putting the first
       card exactly 16px from the left edge and 16px after the last card
       at the scroll end */
    .careers-grid {
        flex-direction: column;
        /* stretch beats the shell's align-items: center - the grid must fill
           the shell's content box (the strip inside bleeds over its edges) */
        align-self: stretch;
        width: auto;
        margin-inline: 0;
    }

    .careers-cards-strip {
        flex-wrap: nowrap;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Feature photo: spans the shell's content box - 16px from each screen
       edge - instead of the fixed 608px desktop width, and drops the fixed
       384px height so the frame hugs the photo, which shows at its natural
       aspect ratio (height: auto) instead of being cover-cropped */
    .careers-feature {
        width: 100%;
        height: auto;
    }

    .careers-feature-image {
        height: auto;
    }

    /* Cards keep their fixed 256px width instead of shrinking */
    .careers-card {
        flex: 0 0 auto;
    }

    /* Benefits row on phones: the three lavender cards stack inside the
       shell's content box - 16px from each screen edge. align-self: stretch
       beats the shell's align-items: center (same as the grid above), the
       base rule's negative side margins are cancelled, and each card's
       flex-basis 373px then wraps it onto its own full-width row */
    .careers-benefits {
        align-self: stretch;
        width: auto;
        margin-inline: 0;
    }

    /* ====================================================================
       Jobs page
       ==================================================================== */

    /* Search bar: the two field groups stack full-width inside the lavender
       card - the keyword input's fixed 501.5px would otherwise push past
       the card's right edge on phones. The vertical hairline divider only
       reads in the horizontal row, so it drops out; the Search button keeps
       its natural width, hugging the left edge. The extra class beats the
       .job-search-query / .job-search-location width rules, which sit later
       in the file than this media query */
    .job-search {
        flex-direction: column;
        align-items: stretch;
    }

    .job-search-field {
        width: 100%;
    }

    .job-search .job-search-input {
        width: 100%;
    }

    .job-search-divider {
        display: none;
    }

    .job-search-btn {
        align-self: flex-start;
    }

    /* Category chips: one left-to-right swipeable strip under the label -
       the careers treatment: the group bleeds to the screen edges with its
       own 16px inline padding so chips scroll edge-to-edge (first chip
       16px from the left edge, 16px after the last one at the scroll end),
       and each chip keeps its natural width instead of wrapping. The extra
       class beats the base .job-filters-group's flex-wrap: wrap, which sits
       later in the file than this media query */
    .job-filters .job-filters-group {
        flex-wrap: nowrap;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .job-filter-btn {
        flex: 0 0 auto;
    }

    /* Talent Network card: grows with its content instead of the fixed
       224px card height, so the longer lead text never clips on narrow
       screens (the extra class beats the base .job-card height, which sits
       later in the file than this media query) */
    .job-grid .job-card-talent {
        height: auto;
    }

    /* Single job page: the facts card spans the shell's content box - 16px
       from each screen edge - instead of its fixed 270px desktop width, and
       its lines center instead of aligning to the card's right edge. The
       extra class beats the base .job-detail-facts width/text-align, which
       sits later in the file than this media query */
    .job-detail-body .job-detail-facts {
        width: 100%;
        text-align: center;
    }

    /* Talent network register card: the site's 16px padding on phones
       instead of the desktop 32px */
    .talent-register-card {
        padding: 16px;
    }

    /* Privacy policy / legal pages: the transparent nav column drops its
       own 16px padding and spans the shell's content box instead of its
       fixed 352px desktop width, so its entries sit flush with the 16px
       screen inset and align with the lavender body card stacked below.
       It also drops the desktop 848px min-height so it hugs its text -
       otherwise the body card would start ~16px after an 848px-tall
       mostly-empty column instead of 16px after the text */
    .privacy-policy-nav {
        width: 100%;
        min-height: 0;
        padding: 0;
    }

    /* Locations table to the FAQ heading: exactly the spacer div's 16px on
       phones - the FAQ section's own 16px top padding drops (its section
       directly follows the locations section across the 16px spacer) */
    .section:has(.locations-table) + div + .section > .section-inner {
        padding-top: 0;
    }

    /* Responsive line breaks: restored on phones/tablets (the .br-mobile
       base rule hides them on desktop) */
    .br-mobile {
        display: inline;
    }

    /* Logo overlay on the partner photo: mobile-only (hidden by the base
       rule on desktop) - exact 129x16 box on phones */
    .partner-image-logo {
        display: block;
        width: 129px;
        height: 16px;
    }

    /* Partner photo on phones: swap the desktop photo out and show
       partner-with-us-2.png in full - the fill rule's forced 100%/100%
       cover cropping is dropped so no edge of the image is ever cut off,
       and the frame hugs the photo instead of keeping the 416px floor */
    .partner-image-photo-desktop {
        display: none;
    }

    .partner-image img.partner-image-photo-mobile {
        position: static;
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
    }

    /* Partner row: stack the two columns explicitly and let the image
       column span the whole row so the photo frame sits under the
       accordion stack (the 473px fixed frame width is dropped here) */
    .partner-split {
        flex-direction: column;
        align-items: stretch;
    }

    .partner-image-col {
        width: 100%;
    }

    .partner-image {
        min-height: 0;
        width: 100%;
        /* Capped at the accordion stack's fixed 518px width: the cards keep
           that fixed width on phones/tablets, so a plain 100% frame would
           overshoot them by the spare viewport width (e.g. a 575px window
           leaves ~25px of slack that only the frame picked up) */
        max-width: 518px;
    }

    /* Contact side column (the two address cards): grown from its fixed
       342px desktop width to the accordion stack's fixed 518px width so on
       phones/tablets it reads exactly as wide as the home page's accordion
       cards; below 518px + section padding it fills the row just like the
       cards do */
    .contact-side {
        width: 100%;
        max-width: 518px;
    }

    /* Contact card interior (the two address cards only - the form card keeps
       its own rhythm and the desktop geometry is untouched): 16px of air on
       every edge - the title sits 16px from the card's top edge, the text
       16px from the left, and height: auto drops the fixed 358px/251px
       desktop heights so the card shrinks to its content and the last line
       lands 16px above the bottom edge. The divider line 8px below the
       title and 8px above the first subtitle: the negative margins shave
       8px off the card's 16px flex gap, so the spacing between the two
       address groups keeps its 16px */
    .contact-side .contact-card {
        height: auto;
        padding: 16px;
    }

    .contact-side .contact-card-divider {
        margin-top: -8px;
        margin-bottom: -8px;
    }

    /* Form card ("Contact Us"): 16px of air on every edge, height released
       from the fixed 625px desktop box so heading, fields, checkboxes and
       the button fit phones. The mobile rows sit 8px apart (gap: 8px
       replaces the desktop 16px rhythm): 8px between each label and its
       field, field and the next label, the checkbox rows, down to the
       centered button. The mobile-only heading + divider appear: the
       heading reuses .section-subtitle (Roboto 600 24px, navy) at the
       spec's 100% line-height and the divider rides the same 8px gap;
       every element starts 16px from the card's left edge, only the Send
       Message button is centered (base .contact-button already carries
       align-self: center) */
    .contact-form {
        height: auto;
        padding: 16px;
        gap: 8px;
    }

    /* Labels (Full Name, Email, Message): the shared typography rule centers
       them for the desktop card; on mobile every element starts at the
       card's left edge, so the text aligns left too */
    .contact-form .contact-label {
        text-align: left;
    }

    /* Send Message button: the card's 8px gap plus this 8px push puts it
       16px below the "Send news and product updates" checkbox row; its
       16px from the card's bottom edge comes from the card's 16px bottom
       padding (the button is the last rendered child - the status line is
       display:none until an error, the honeypot is out of flow) */
    .contact-form .contact-button {
        margin-top: 8px;
    }

    /* Consent rows: text on the left, the toggle switch 16px from the
       card's right edge (the row stretches to the card's 16px padding),
       hairline divider between the two rows riding the card's 8px gap.
       The switch is the spec's 72x24 track (4px padding, 4px radius, navy
       16% fill = --color-navy-16 #0F172A29) with the 32x16 white knob
       riding it - left when unchecked, slid right when checked; the real
       checkbox stays in the DOM (hidden) and still submits */
    .contact-check {
        justify-content: space-between;
    }

    .contact-check-text {
        flex: 1;
        text-align: left;
    }

    .contact-form .contact-checkbox {
        display: none;
    }

    .contact-toggle {
        display: block;
        position: relative;
        flex: 0 0 auto;
        width: 72px;
        height: 24px;
        padding: 4px;
        border-radius: 4px;
        background: var(--color-navy-16);
    }

    .contact-toggle::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 32px;
        height: 16px;
        border-radius: 4px;
        background: #ffffff;
        transition: transform 0.15s ease;
    }

    /* On state: the track fills green while the knob sits at its right end */
    .contact-checkbox:checked ~ .contact-toggle {
        background: #33b249;
    }

    .contact-checkbox:checked ~ .contact-toggle::after {
        transform: translateX(32px);
    }

    .contact-check-divider {
        display: block;
    }

    .contact-form-title {
        display: block;
        line-height: 1 !important;
    }

    .contact-form-divider {
        display: block;
    }

    /* Product card button: lifted out of the band's flow and pinned 8px
       above the card's bottom edge (left edge matches the band's 8px
       padding). The band keeps its fixed 111px height, so the title and
       copy sit exactly where the design puts them; on the two-line cards
       the flow stack used to overflow the band and glue the button to the
       card's bottom edge, and the one-line card left it floating mid-band */
    .product-card .card-btn {
        position: absolute;
        left: 8px;
        bottom: 8px;
    }

    /* Products page intro band (products page only — its markup carries the
       .products-page-intro modifier so the faq page's shared intro band
       keeps the two-card layout): the band turns into a full-width padded
       row so the title card sits 16px below the header and 16px from the
       viewport's left and right edges */
    .products-page-intro {
        flex-wrap: nowrap;
        min-height: 0;
        padding-inline: 16px;
    }

    /* Title card: spans the padded band and hugs its caption instead of the
       fixed 150px strip; the navy fill takes over from the hidden backdrop
       image so the light lavender caption stays readable */
    .products-page-intro .products-page-card-left {
        width: 100%;
        height: auto;
        padding: 16px;
        background-color: var(--color-navy);
    }

    /* No backdrop image on mobile — the caption sits directly on the navy
       card */
    .products-page-intro .products-page-card-image {
        display: none;
    }

    /* Caption: flows inside the card's 16px padding instead of being pinned
       to the backdrop's top-left corner */
    .products-page-intro .products-page-card-caption {
        position: static;
    }

    /* Photo card: with its image hidden only the 129x16 logo would remain,
       so the card drops out of the band entirely */
    .products-page-intro .products-page-card-right {
        display: none;
    }

    /* Product card grid: a full-width column of cards — each card runs from
       16px from the viewport's left edge to 16px from the right, stacked
       16px apart */
    .products-page-grid-inner {
        flex-direction: column;
        align-items: stretch;
        padding-inline: 16px;
    }

    /* Product card: redesigned from the fixed 252x323.25 portrait tile into
       a full-width landscape card — its absolute backdrop image follows the
       card, so it spans the same 16px-inset width; the content block
       dissolves into the card's grid so the product photo takes the left
       side while the title, divider and copy stack down the right side */
    .products-page-product-card {
        display: grid;
        grid-template-columns: 45% 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "photo title"
            "photo divider"
            "photo text";
        gap: 8px 16px;
        align-content: center;
        width: auto;
        height: auto;
        min-height: 0;
    }

    /* The content wrapper stops generating a box so its children become the
       card grid's items (each keeps its own positioning so it still paints
       above the card's absolute backdrop image) */
    .products-page-product-card-content {
        display: contents;
    }

    .products-page-product-card-title,
    .products-page-product-card-divider,
    .products-page-product-card-photo,
    .products-page-product-card-text {
        position: relative;
    }

    .products-page-product-card-title {
        grid-area: title;
    }

    /* Short titles: "BESS" / "EMS" replace the long two-line card titles
       ("Battery Energy Storage Systems" / "Energy Mgmt. System") on
       phones/tablets — the span pair inside each heading swaps over */
    .products-page-product-card-title-full {
        display: none;
    }

    .products-page-product-card-title-short {
        display: block;
    }

    /* About-products feature cards (the shared include also renders on the
       four product detail pages): the narrow container regains side padding
       so the centered heading and the cards all sit 16px from the viewport's
       left and right edges */
    .products-page-about-inner {
        padding-inline: 16px;
    }

    /* Feature grid: a full-width column of cards — each card runs from 16px
       from the viewport's left edge to 16px from the right, stacked on the
       grid's 8px rhythm */
    .products-page-about-grid {
        flex-direction: column;
        align-items: stretch;
    }

    /* Feature card: hugs its content and fills the padded container instead
       of the fixed 217.6x194 tile */
    .products-page-feature {
        width: auto;
        height: auto;
    }

    /* More-information section (the shared include also renders on the
       product detail, faq, about, projects, manufacturing, careers, legal
       and utility pages): the narrow container regains side padding so the
       heading, lead and buttons sit 16px from the viewport's left and right
       edges */
    .products-page-more-inner {
        padding-inline: 16px;
    }

    /* More-information lead: the desktop line break drops out on
       phones/tablets so the two sentences wrap naturally within the padded
       container (the same rule covers the careers page's custom lead, which
       uses the same text + <br> pattern) */
    .products-page-more-head .section-lead br {
        display: none;
    }

    /* Racking systems hero lead: sits 16px from the viewport's left and
       right edges (the centered hero column carries no side padding) */
    .racking-systems-inner .section-lead {
        margin-inline: 16px;
    }

    /* Racking systems grid: the cards become a horizontal scroller like the
       homepage's products/newsroom rows — one line, no wrapping, 16px
       between cards, scrolling from the first card on the left toward the
       right. The row's own 16px inline padding puts the first card 16px
       from the left edge and leaves 16px after the last card at the scroll
       end (no negative margins: the hero column carries no side padding to
       cancel) */
    .racking-systems-grid {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards keep their fixed 261px width instead of shrinking to fit */
    .racking-systems-card {
        flex: 0 0 auto;
    }

    /* Product detail page (fixed-pile-driven and the other product pages
       sharing the template): the narrow container regains side padding so
       the title, lead, photo and info card all sit 16px from the viewport's
       left and right edges; the container's own 16px flex gap keeps every
       element 16px below the one above it */
    .product-detail-inner {
        padding-inline: 16px;
    }

    /* Photo frame: hugs the photo instead of keeping the fixed 352px design
       height — the contained photo letterboxed inside the tall frame on
       narrow screens, which pushed the visible image far below the lead
       text and the info card far below the photo (the container's 16px gap
       and the row's 16px row-gap now put the photo 16px under the text and
       the card 16px under the photo) */
    .product-detail-media {
        height: auto;
    }

    .product-detail-media-image {
        height: auto;
    }

    /* Info card: hugs its content instead of matching the photo frame's
       fixed height — the stacked card's longer text would clip at 352px;
       the padding narrows to 16px so the text starts 16px from the card's
       top and left edges and the button keeps 16px to the bottom edge */
    .product-detail-panel {
        height: auto;
        padding: 16px;
    }

    /* Datasheet button: centered in the card, 16px below the text above it
       (the fixed margin replaces the desktop bottom-pin); inverted colors on
       mobile — dark navy fill with light lavender text */
    .product-detail-btn {
        align-self: center;
        margin-top: 5px;
        background: var(--color-navy);
        border-color: var(--color-navy);
        color: var(--color-lavender);
    }

    /* More-details specs (product pages): the container regains side
       padding so every spec line sits 16px from the viewport's left and
       right edges */
    .more-details-inner {
        padding-inline: 16px;
    }

    /* Spec list: the row stacks and the two desktop cards dissolve into it
       (display: contents), so the specs read as one list — one label row,
       then its value row, alternating. Flex order pairs the nth label with
       the nth value; the DOM stays grouped in two cards for the desktop
       layout, and the inquiry side column is pinned after the specs */
    .more-details-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .more-details-labels,
    .more-details-values {
        display: contents;
    }

    .more-details-side {
        order: 99;
        /* 8px margin + the row's 8px gap = 16px below the last spec row */
        margin-top: 8px;
    }

    .more-details-labels .more-details-label:nth-of-type(1) { order: 1; }
    .more-details-values .more-details-value:nth-of-type(1) { order: 2; }
    .more-details-labels .more-details-label:nth-of-type(2) { order: 3; }
    .more-details-values .more-details-value:nth-of-type(2) { order: 4; }
    .more-details-labels .more-details-label:nth-of-type(3) { order: 5; }
    .more-details-values .more-details-value:nth-of-type(3) { order: 6; }
    .more-details-labels .more-details-label:nth-of-type(4) { order: 7; }
    .more-details-values .more-details-value:nth-of-type(4) { order: 8; }
    .more-details-labels .more-details-label:nth-of-type(5) { order: 9; }
    .more-details-values .more-details-value:nth-of-type(5) { order: 10; }
    .more-details-labels .more-details-label:nth-of-type(6) { order: 11; }
    .more-details-values .more-details-value:nth-of-type(6) { order: 12; }
    .more-details-labels .more-details-label:nth-of-type(7) { order: 13; }
    .more-details-values .more-details-value:nth-of-type(7) { order: 14; }
    .more-details-labels .more-details-label:nth-of-type(8) { order: 15; }
    .more-details-values .more-details-value:nth-of-type(8) { order: 16; }

    /* Label rows: light lavender bands (var(--color-lavender) = #E7E6EE) so
       they read as headers between the plain value rows; 16px top/bottom
       padding gives each band its row height */
    .more-details-label {
        background: var(--color-lavender);
        padding: 16px 0 16px 16px;
    }

    /* Some labels carry trailing <br>s (e.g. "Foundation System<br><br>")
       that pad them on desktop so they line up with their taller value
       blocks — on mobile they leave empty lines that push the text to the
       band's top, so they drop out and the text centers vertically */
    .more-details-label br {
        display: none;
    }

    /* Value rows: the bullets indent one step in from the container's edge
       so they line up beside the label bands' inset text */
    .more-details-values .section-text {
        padding-left: 16px;
    }

    .products-page-product-card-divider {
        grid-area: divider;
    }

    /* Photo: fills the card's left column and centers vertically against
       the text column instead of the fixed 220x151.25 tile */
    .products-page-product-card-photo {
        grid-area: photo;
        width: 100%;
        height: auto;
        align-self: center;
    }

    .products-page-product-card-text {
        grid-area: text;
    }

    /* About-page company timeline: the 1152px horizontal strip (four fixed
       372px-tall cards side by side) cannot fit a small screen, so below the
       desktop breakpoint it becomes the design's vertical variant - one
       zigzag column. Each milestone note sits in the half opposite its year
       chip, and the chip plugs into the column center through a short
       hairline capped with a dot */
    .timeline-strip {
        position: relative;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 16px;
        padding: 0;
    }

    /* Card: drops the fixed 372px height and the absolute positioning
       scheme - each card is one self-sizing row of a two-column grid whose
       halves sit either side of the center line (the 32px column gap keeps
       content 16px clear of it on both sides) */
    .timeline-card {
        position: relative;
        flex: none;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        row-gap: 16px;
    }

    .timeline-card-wide {
        flex-basis: auto;
    }

    /* Milestone note: back in flow as a grid item stretching across its
       half. The desktop anchoring offsets are zeroed (the wide card's inline
       left:auto/right:0 style resolves to no offset on relative position)
       and the slider stem-and-dot hint drops out - the connector dots
       replace it */
    .timeline-milestone {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: 100%;
    }

    .timeline-milestone .timeline-slider {
        display: none;
    }

    /* Zigzag placement: note and chip share one grid row so the chip sits
       beside its note, vertically centered on it - the 2023 and 2025 notes
       on the right with their chips to the left, the 2024 note on the left
       with its chip to the right */
    .timeline-card:nth-child(1) .timeline-milestone,
    .timeline-card:nth-child(3) .timeline-milestone {
        grid-area: 1 / 2;
    }

    .timeline-card:nth-child(1) .timeline-year,
    .timeline-card:nth-child(3) .timeline-year {
        grid-area: 1 / 1;
        align-self: center;
    }

    .timeline-card:nth-child(2) .timeline-milestone {
        grid-area: 1 / 1;
    }

    .timeline-card:nth-child(2) .timeline-year {
        grid-area: 1 / 2;
        align-self: center;
    }

    /* The wide 2026 card keeps both of its notes on the left, stacked
       (R&D above Delaware), with the chip spanning both note rows so it
       centers on the pair as a whole - drawn without hairline or dot, and
       each note keeps a center dot of its own instead */
    .timeline-card-wide .timeline-milestone-below {
        grid-area: 1 / 1;
    }

    .timeline-card-wide .timeline-milestone:not(.timeline-milestone-below) {
        grid-area: 2 / 1;
    }

    .timeline-card-wide .timeline-year {
        grid-area: 1 / 2 / 3 / 3;
        align-self: center;
    }

    /* Left-half notes (the 2024 note and the wide card's R&D and Delaware
       notes) read right-aligned so their text hugs the column center from
       the left, mirroring the design's zigzag variant */
    .timeline-card:nth-child(2) .timeline-milestone,
    .timeline-card-wide .timeline-milestone {
        text-align: right;
    }

    /* Year chip: an in-flow grid item now (the absolute vertical centering
       is dropped), filling its half with slimmer side padding */
    .timeline-year {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        padding: 2px 16px;
    }

    /* Chip connector, per side: a hairline from the chip's edge to the
       column center, capped with a navy dot centered on it - drawn from the
       chip itself so line and dot always ride the chip's vertical center */
    .timeline-card:nth-child(1) .timeline-year::before,
    .timeline-card:nth-child(3) .timeline-year::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: 16px;
        height: 1px;
        background: var(--color-navy);
        transform: translateY(-50%);
    }

    .timeline-card:nth-child(1) .timeline-year::after,
    .timeline-card:nth-child(3) .timeline-year::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 16px);
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--color-navy);
        transform: translate(-50%, -50%);
    }

    .timeline-card:nth-child(2) .timeline-year::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 16px;
        height: 1px;
        background: var(--color-navy);
        transform: translateY(-50%);
    }

    .timeline-card:nth-child(2) .timeline-year::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(100% + 16px);
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--color-navy);
        transform: translate(50%, -50%);
    }

    /* The 2026 notes each keep a center dot of their own (the chip sits
       centered on the pair as a whole): a navy bead on the center line,
       vertically centered beside each note like every other dot */
    .timeline-card-wide .timeline-milestone::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 16px);
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--color-navy);
        transform: translate(-50%, -50%);
    }

    /* Bracket connector from the chip to those two dots: a short stub from
       the chip's left edge to a shared rail between the notes and the chip,
       drawn at the chip's vertical center */
    .timeline-card-wide .timeline-year::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 8px;
        height: 1px;
        background: var(--color-navy);
        transform: translateY(-50%);
    }

    /* Rail, upper leg: an L-shaped hairline from the R&D dot rightward to
       the rail, then down the rail to the row-gap midpoint */
    .timeline-card-wide .timeline-milestone-below::before {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 16px);
        width: 8px;
        height: calc(50% + 8px);
        border-top: 1px solid var(--color-navy);
        border-right: 1px solid var(--color-navy);
    }

    /* Rail, lower leg: mirrored L from the row-gap midpoint down to the
       Delaware dot, then leftward to the dot */
    .timeline-card-wide .timeline-milestone:not(.timeline-milestone-below)::before {
        content: "";
        position: absolute;
        top: -8px;
        left: calc(100% + 16px);
        width: 8px;
        height: calc(50% + 8px);
        border-bottom: 1px solid var(--color-navy);
        border-right: 1px solid var(--color-navy);
    }

    /* FAQ intro band: the shared .products-page-inner container gets the
       same 16px inline padding the products page gives its own band via
       the .products-page-intro modifier (the faq band carries no modifier
       of its own and is a bare section child), so the title card lands
       16px from the viewport's left and right edges */
    .products-page-inner {
        padding-inline: 16px;
    }

    /* Title card: spans the padded band so it runs 16px from each screen
       edge; its desktop internals (full-bleed backdrop image, caption
       pinned to the backdrop's top-left) are untouched */
    .faq-intro-card-left {
        width: 100%;
    }

    /* Photo card: drops out of the band entirely - with its faq-1.png
       image removed on mobile only the 129x16 overlay logo would remain
       floating in an empty card (the same call as the products page band) */
    .faq-intro-card-right {
        display: none;
    }

    /* FAQ toolbar: the band gets the 16px inline padding (bare section
       child, none of its own), and each button group becomes a
       left-to-right swipe strip - the careers/jobs treatment: the group
       bleeds 16px into the band's padding on each side with its own 16px
       inline padding so buttons scroll edge-to-edge (first button 16px
       from the screen edge, 16px after the last one at the scroll end),
       and each button keeps its natural width instead of wrapping */
    .faq-toolbar {
        padding-inline: 16px;
    }

    .faq-toolbar-group {
        flex-wrap: nowrap;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .faq-filter-btn,
    .faq-toggle-btn {
        flex: 0 0 auto;
    }

    /* FAQ question lists: the band gets the same 16px inline padding (also
       a bare section child) so the accordions run 16px from each screen
       edge */
    .faq-page-lists {
        padding-inline: 16px;
    }

    /* Newsletter artwork frame: spans the split row's full width so it
       runs 16px from each screen edge, and releases the fixed 388px
       desktop height so the artwork keeps its natural ratio instead of a
       square-ish cover crop. The column goes full width too - it hugs the
       frame otherwise, so the frame's percentage width would resolve
       against nothing and stay at the 690px desktop size on mid screens */
    .newsletter-image-col {
        width: 100%;
    }

    .newsletter-image {
        width: 100%;
        height: auto;
    }

    /* The cover-fill img follows the frame's height */
    .newsletter-image img {
        height: auto;
    }

    /* Newsletter form copy: the "Watt's Up in Solar?" heading centers, and
       the subscribe + unsubscribe paragraphs read at the 19px mobile lead
       size */
    .newsletter-title {
        text-align: center;
    }

    .newsletter-form-col .section-text {
        font-size: 19px;
    }

    /* Unsubscribe row: the Contact treatment - the real checkbox stays in
       the DOM (it still submits and the JS listens to its change event,
       fired by clicks on the label) but is hidden on phones, and the
       pure-CSS 72x24 switch takes its place; the shared mobile
       .contact-toggle rules style it. The label comes first with the
       switch 16px after it: the pair left-aligns (dropping the generic
       .contact-check space-between that would push the switch to the
       row's right edge) */
    .newsletter-unsubscribe-form .contact-checkbox {
        display: none;
    }

    .newsletter-unsubscribe-form .contact-check {
        justify-content: flex-start;
        gap: 16px;
    }

    /* Footer FAQs link: the literal "FAQs" replaces the translated label
       (the Bosnian "Često postavljana pitanja" is too long for the legal
       row on phones) */
    .footer-faq-full {
        display: none;
    }

    .footer-faq-short {
        display: inline;
    }

    /* Talent join button: the short translated "Register" replaces the
       long "Join Our Network" label on phones */
    .talent-btn-join-full {
        display: none;
    }

    .talent-btn-join-short {
        display: inline;
    }
}

/* Phones (<= 560px): tighter hero */
@media (max-width: 560px) {
    .page-hero-media,
    .page-hero-image {
        height: 420px;
    }
}

/* Slide-down feel for the folded header pieces */
@keyframes header-panel-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Location field: fills the remaining row width beside the keyword field, the divider and the button (501.5 + 1 + 69 + the three 16px gaps + the 32px padding = 1152, leaving 500.5px) */
.job-search-location {
    width: 500.5px;
    max-width: 100%;
}

/* Vertical divider: 1px dark navy hairline at 64% alpha spanning the bar's content height between the two field groups */
.job-search-divider {
    width: 0;
    border-left: 1px solid var(--color-navy-64);
    align-self: stretch;
}

/* Category filter row: 1152px row sitting 16px under the search bar via the section container's 16px gap — the "Choose categories:" label on the left and the nine location/type/experience filter chips on the right (space-between); wraps onto stacked rows on narrow viewports */
/* (merged: 2 rules that carried identical declarations) */
.job-filters, .job-sort {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Chip group: horizontal flow with the design's 6px gap between chips */
.job-filters-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Filter chip: the shared .privacy-btn base (28px tall, 4px/8px padding, 4px radius, Roboto Regular (400), 17px, 100% line height, 0% letter spacing) with the site's lavender fill and the dark navy text at 64% alpha; hugs its label's width (138px for the widest chip, "Belgrade, Serbia") */
.job-filter-btn {
    position: relative;
    background: var(--color-lavender);
    color: var(--color-navy-64);
}

/* Chip checkbox: the real input inside the chip label, visually hidden but still keyboard-focusable; the pill is the visible face and clicking it toggles the input because the whole chip is one <label> */
.job-filter-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Sort button: the shared .privacy-btn base (28px tall, 4px/8px padding, 4px radius, Roboto Regular (400), 17px) retuned with the design's 6px inner gap and a 1px dark navy outline at 64% alpha around a transparent fill; hugs its content (the design's fixed ~142.6px with both arrows) with a 98px floor so longer labels never clip */
.job-sort-btn {
    min-width: 98px;
    gap: 6px;
    border: 1px solid var(--color-navy-64);
    background: transparent;
    color: var(--color-navy-64);
}

/* Sort arrows: arrow-up.svg / arrow-down.svg beside the label as 12x12 icons (their natural stroke colors come from the assets themselves) */
.job-sort-icon {
    flex: 0 0 auto;
}

/* Arrow pair: the two direction arrows pull 4px closer than the button's 6px gap (an effective 2px between them) so they read as one tight sort indicator beside the label */
.job-sort-icon + .job-sort-icon {
    margin-left: -7px;
}

/* Direction hint: the arrow of the inactive order dims so the button shows which way the list is currently sorted */
.job-sort-icon-dim {
    opacity: 0.35;
}

/* Grid: wrapping card row with the design's 8px/16px gaps */
.job-grid {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 16px;
}

/* Card shell: fixed 378.67x224, 4px radius, 16px padding (the title lands 16px from the top and left edges), 8px vertical gap between the lines */
.job-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 378.67px;
    max-width: 100%;
    height: 224px;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    overflow: hidden;
}

/* Talent Network promo card: the same shell over the dark navy title-slide photo, cover-cropped; its title and divider flip to light lavender */
.job-card-talent {
    background: var(--color-navy) url("../images/title-slide-background.96e8e48f1502.png") center / cover no-repeat;
}

.job-card-talent .job-card-title {
    color: var(--color-lavender);
}

.job-card-talent .job-card-divider {
    border-top-color: var(--color-lavender);
}

/* Job description: Roboto Regular (400), 17px, 100% line height, 0% letter spacing, dark navy — clamped to the first 3 lines (3 x 17px = 51px) so the card never shows the whole text */
.job-card-description {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Card buttons: the shared .card-btn base (22px-high pill, 4px/8px padding, 4px radius, Roboto Regular (400), 12px) pinned 16px from the card's bottom edge (the 16px padding) and 8px+ under the copy above; widened to each design width */
.job-card-btn, .job-card-join {
    margin-top: auto;
}

.job-card-join {
    border-color: var(--color-gold-64);
    color: var(--color-gold-64);
}

/* Gold hover: brightens the border and text (keeps the ghost fill instead of the shared .card-btn's solid navy hover) */
.job-card-join:hover {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* Facts panel: the fixed 270x320 lavender card on the left; vertical flow with an 8px gap and 16px padding (the padding puts the "Requisition ID" head 16px from the top and right edges). The 320px height is a min-height so longer admin-entered facts grow the card instead of clipping; every line of text inside aligns to the panel's right edge */
.job-detail-facts {
    width: 270px;
    max-width: 100%;
    min-height: 320px;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
}

/* Content card: the design's 866px-wide lavender card beside the facts panel (270 + 16 + 866 = 1152); vertical flow with an 8px gap and 16px padding (the padding puts the "Full Job Description" head 16px from the top and left edges); the height hugs the card's content, growing or shrinking with the job text; text aligns left */
.job-detail-content {
    width: 866px;
    max-width: 100%;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-lavender);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Apply button: the design's 146x52 navy button 16px under the two cards; the 16px top margin adds the gap and the auto side margins center the fixed-width button on the body; the label is Roboto SemiBold (600), 17px, 100% line height, 0% letter spacing, lavender */
.job-detail-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    margin: 0 auto 0;
    padding: 16px 32px;
    border-radius: 4px;
    background: var(--color-navy);
    text-decoration: none;
}

/* Apply modal (job detail page): native <dialog> opened by the Apply Now button — the 610x278 step 1 card of the application flow, 16px padding, 8px gaps, 4px radius, lavender fill, over a translucent dark navy backdrop; overflow hidden keeps the 4px corners clean. The 278px height is a min-height so a wrapped consent line grows the card instead of clipping */
.apply-modal {
    width: 610px;
    max-width: calc(100vw - 32px);
    min-height: 278px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: var(--color-lavender);
    color: var(--color-navy);
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* Field label: the intro line's Regular scale but centered */
.apply-modal-field-label {
    margin: 0;
    display: block;
}

/* Email input: the 578x28 (610 - 2x16 padding) translucent navy field; the typed text is Regular dark navy, the placeholder Light translucent navy — both centered like the design */
.apply-modal-input {
    width: 578px;
    max-width: 100%;
    height: 28px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: var(--color-navy-16);
}

/* Checkbox: translucent navy 24x24 square with 4px corners; the checked state swaps to solid navy with a CSS-drawn lavender check */
.apply-modal-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 4px;
    background: var(--color-navy-16);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

.apply-modal-checkbox::before {
    content: "";
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--color-lavender);
    border-bottom: 2px solid var(--color-lavender);
    transform: translateY(-1px) rotate(-45deg);
    opacity: 0;
}

.apply-modal-consent-text {
    margin: 0;
    cursor: pointer;
}

.apply-modal-link {
    color: var(--color-navy-64);
    text-decoration: none;
}

/* Action pair: the ghost Cancel (transparent with a 1px navy border) and the solid navy Proceed, both 28px tall, side by side 8px apart */
.apply-modal-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.apply-modal-cancel, .apply-modal-proceed, .apply-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.apply-modal-cancel {
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
}

.apply-modal-proceed {
    border: none;
    background: var(--color-navy);
    color: var(--color-lavender);
}

/* Final action (step 3): the Proceed treatment without the fixed width — the longer "Submit Application" label sizes the button */
.apply-modal-submit {
    border: none;
    background: var(--color-navy);
    color: var(--color-lavender);
}

/* Step indicators: three 14x14 squares 8px apart — the current (first) step solid navy, the rest translucent navy */
.apply-modal-dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}

.apply-modal-dot {
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background: var(--color-navy-64);
}

/* Upload zones (step 3): the input-shaped drop zones for the CV and the cover letter — 578x28 translucent navy like the text fields above, with the drop hint / picked file name centered like the placeholders (mirrors the talent network's .talent-upload zones) */
.apply-modal-upload {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 578px;
    max-width: 100%;
    height: 28px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--color-navy-16);
    cursor: pointer;
}

/* Result cards (job detail page + talent network): native <dialog>s around the wizard — .apply-success-modal replaces it once the backend accepts the application, .apply-error-modal overlays the still-filled wizard when the e-mail could not be delivered, .talent-joined-modal celebrates a stored talent-network join. All three share the wizard's 16px padding, 8px gaps, 4px radius and lavender fill over the translucent dark navy backdrop; the heights are min-heights so wrapped body lines grow the card instead of clipping */
.apply-success-modal,
.apply-error-modal,
.talent-joined-modal {
    width: 610px;
    max-width: calc(100vw - 32px);
    min-height: 228px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: var(--color-lavender);
    color: var(--color-navy);
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* Talent network joined modal: the compact 512x151 variant of the result
   cards above (same padding/gap/radius/fill); the title row, minus close
   control and navy-64 divider are the shared modal classes
   (.manufacturing-modal-head/-close, .apply-success-divider) */
.talent-joined-modal {
    width: 512px;
    min-height: 151px;
}

/* Newsletter subscribed modal: the compact 512x136 variant of the result
   cards — .talent-joined-modal above supplies the 512px width, padding,
   gaps, radius, lavender fill, backdrop and [open] handling, and the
   title row, minus close control, 24px title, navy-64 divider and body
   text are the shared modal classes (.manufacturing-modal-head/-close,
   .apply-success-title, .apply-success-divider,
   .talent-joined-modal-text); only the height differs */
.newsletter-joined-modal {
    min-height: 136px;
}

/* Newsletter unsubscribed modal: the 512x124 variant of the same result
   cards — identical shared classes as .newsletter-joined-modal above;
   only the height differs */
.newsletter-unsubscribed-modal {
    min-height: 124px;
}

/* Title: Roboto SemiBold (600), 20px, 100% line height, centered dark navy */
.talent-joined-modal-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Body: Roboto Regular (400), 17px, 100% line height, dark navy */
.talent-joined-modal-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Title: Roboto SemiBold (600), 24px, 100% line height, centered dark navy */
.apply-success-title,
.apply-error-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Lead line: Roboto Medium (500), 17px, 100% line height, centered dark navy */
.apply-success-lead,
.apply-error-lead {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Body lines: Roboto Regular (400), 17px, 100% line height, centered dark navy */
.apply-success-text,
.apply-error-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-navy);
}

/* Action pair: the hero buttons (secondary on the left, primary on the right) centered side by side 8px apart like the wizard's action row */
.apply-success-actions,
.apply-error-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* The cards' buttons keep the hero shape but wear the Roboto Regular (400), 17px type the rest of the card uses */
.apply-success-actions .hero-btn,
.apply-error-actions .hero-btn {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
}

/* Talent network register form + newsletter subscribe form + contact form: status line for a rejected fetch submission — main.js reveals it with the generic translated sentence from the markup (plus the server's reason when there is one); navy like the rest of the card text since the palette has no dedicated danger color */
.talent-form-status,
.newsletter-status,
.contact-form-status {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-navy);
}

/* Talent network joined confirmation: replaces the register form inside the
   card once the backend stored the signup (the ?joined=1 banner without
   JavaScript, .talent-joined unhidden by main.js), keeping the card's 16px
   rhythm and action row */
.talent-joined-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-navy);
}

.talent-joined-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-navy);
}

/* Honeypot trap (apply modal step 1 + talent network register form + newsletter subscribe form + contact form): a text field moved far off-screen so people never see or tab into it; bots that fill it have their submission silently dropped server-side */
.apply-modal-honeypot,
.talent-honeypot,
.newsletter-honeypot,
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}