/* ========================================================================
   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-white: #ffffff;
    --color-lavender-64: #e7e6eea3;
    --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;
}

/* 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;
}

/* 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);
}

/* 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);
}

/* 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: 111px;
    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) */
.partner-image img, .news-hero-card-bg, .news-hero-post-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 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;
}

/* 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 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;
}

/* 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);
}

/* 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 {
    width: 77px;
    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;
}

/* 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;
}

/* 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%;
}

/* 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;
}

/* 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;
    min-width: 134px;
    height: 28px;
    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%;
}

/* 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;
}