/* Suntomine base styles */

:root {
    --color-bg: #fafaf7;
    --color-text: #1f2933;
    --color-accent: #0f766e;
    --color-border: #e4e4e7;
}

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

/* 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 */
.section-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #0f172a;
}

/* Shared section lead: Roboto Regular (400), 22px, 100% line height, 0%
   letter spacing, centered, dark navy — the standard intro-paragraph
   scale under the section titles */
.section-lead {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #0f172a;
}

/* Shared section text: Roboto Regular (400), 17px, 100% line height, 0%
   letter spacing, dark navy — the standard body-copy scale */
.section-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 section subtitle: Roboto SemiBold (600), 24px, 100% line height,
   0% letter spacing, dark navy — the standard subheading scale (card
   headings, accordion/FAQ titles, split-section and privacy policy
   section entries) */
.section-subtitle {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Shared card title: Roboto SemiBold (600), 18px, 100% line height, 0%
   letter spacing, dark navy — the standard title scale for cards in
   grids (homepage product cards, product listing cards) */
.card-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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;
    width: 77px;
    /* height: 22px; */
    padding: 4px 8px;
    border: 1px solid #0f172a;
    border-radius: 4px;
    background: transparent;
    color: #0f172a;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    align-self: flex-start;
}

.card-btn:hover {
    background: #0f172a;
    color: #ffffff;
}

/* 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: #0f172a;
}

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

.header-logo img {
    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 */
.header-menu a {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    color: #e7e6eea3;
}

.header-menu a:hover {
    color: #ffffff;
}

/* 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 #ffd700a3;
    border-radius: 4px;
    background: transparent;
    color: #ffd700a3;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.header-cta:hover {
    border-color: #ffd700;
    color: #ffd700;
}

/* Header actions: groups the Customer Portal button and the region
   selector; horizontal flow, hug, 16px gap */
.header-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 */
.header-lang:focus-visible {
    outline: 1px solid #ffffff;
    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;
}

.header-lang-flag 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 */
.header-lang-code {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #e7e6eea3;
}

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

.header-lang:hover .header-lang-code {
    color: #ffffff;
}

.header-lang:hover .header-lang-arrow {
    color: #ffffff;
}

/* 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: #e7e6ee;
    opacity: 1;
}

/* Hidden state: keep the panel out of the layout until it is opened
   (the grid display above would otherwise override [hidden]) */
.header-lang-menu[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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #0f172aa3;
}

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

.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 {
    color: #0f172a;
}

/* Row of the language currently being browsed: fully opaque text (it is
   a passive marker, not a link, since it would lead back to the same
   page) */
.header-lang-item[data-current] .header-lang-item-region,
.header-lang-item[data-current] .header-lang-item-lang {
    color: #0f172a;
}

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

/* Pages that render all their sections outside this container (like the
   home page) leave it empty — collapse it completely so it doesn't add
   dead space between the last section and the footer */
.site-main:empty {
    display: none;
}

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

.page-hero-media .page-hero-image.is-active {
    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: #0f172a;
    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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #edcd78;
    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;
}

/* Title: Roboto Black (900), 59px, 100% line height, 0% letter spacing */
.hero-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 59px;
    line-height: 1;
    letter-spacing: 0;
    color: #ffffff;
}

/* Intro paragraph: Roboto Regular (400), 28px, 100% line height, 0% letter
   spacing, centered, light lavender fill */
.hero-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #e7e6ee;
}

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

.hero-copy.is-active {
    opacity: 1;
}

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

.hero-copy-left .hero-kicker-text {
    text-align: left;
}

.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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Start My Project: fixed 138x28, dark navy fill, light lavender text */
.hero-btn-primary {
    width: fit-content;
    background: #0f172a;
    color: #e7e6ee;
}

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

.hero-btn-primary:hover {
    background: #1d293b;
}

.hero-btn-secondary:hover {
    background: #ffffff;
}

.hero-btn:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 2px;
}

/* 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: #e7e6eea3;
    cursor: pointer;
}

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

.hero-dot:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 2px;
}

/* Products section: centered heading + lead over a row of 4 image cards;
   full-width with the same 1280px inner container as the header */

.products-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;
}

.product-card-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #e7e6ee;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card heading: Roboto SemiBold (600), 18px, 100% line height, 0% letter
   spacing, centered, dark navy */
.manufacturing-card-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    text-align: start;
    color: #0f172a;
}

/* Card text: Roboto Regular (400), 12px, 100% line height, 0% letter
   spacing, dark navy */
.manufacturing-card-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #ffffff;
    color: #0f172a;
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.manufacturing-modal[open] {
    display: flex;
}

.manufacturing-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;
}

/* Modal title: Roboto SemiBold (600), 20px, 100% line height, 0% letter
   spacing, centered, dark navy */
.manufacturing-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: #0f172a;
}

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

.manufacturing-modal-close img {
    display: block;
    width: 13px;
    height: 1px;
}

/* Divider: 1px translucent dark navy rule (64% alpha) */
.manufacturing-modal-divider {
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Modal subtitle: Roboto Medium (500), 17px, 100% line height, 0% letter
   spacing, dark navy */
.manufacturing-modal-subtitle {
    text-align: center;
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Bullet list: disc markers like the FAQ bullets, 8px between rows */
.manufacturing-modal-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bullet row: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy */
.manufacturing-modal-item {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 */
.manufacturing-detail {
    width: 100%;
    margin-top: 16px;
}

/* manufacturing-detail-inner modifier: the shared narrow container with
   no padding */
.manufacturing-detail-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 */
.manufacturing-split-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: #e7e6ee;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Panel divider: 1px translucent dark navy rule (64% alpha) */
.manufacturing-split-divider {
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Manufacturing pillars section (manufacturing page): centered heading +
   lead over a 1152px row of four 276x111 lavender value cards; sits 16px
   under the split section */
.manufacturing-pillars {
    width: 100%;
    margin-top: 16px;
}

/* manufacturing-pillars-inner modifier: the shared narrow container with
   no padding */
.manufacturing-pillars-inner {
    padding: 0;;
}

/* 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: #e7e6ee;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

/* Card header row: the heading wraps a full-width transparent button —
   title on the left, plus icon on the title's line pinned to the card's
   right edge (16px in via the padding) — that opens the pillar modal */
.manufacturing-pillar-heading {
    margin: 0;
}

.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 title: Roboto SemiBold (600), 20px, 100% line height, 0% letter
   spacing, dark navy */
.manufacturing-pillar-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

/* 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: #e7e6ee;
    color: #0f172a;
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.pillar-modal[open] {
    display: flex;
}

.pillar-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
}

/* 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) */
.pillar-modal-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Modal title: Roboto SemiBold (600), 20px, 100% line height, 0% letter
   spacing, dark navy */
.pillar-modal-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

.pillar-modal-close img {
    display: block;
    width: 13px;
    height: 1px;
}

/* Divider: 1px translucent dark navy rule (64% alpha) */
.pillar-modal-divider {
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* 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: #e7e6ee;
    color: #0f172a;
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.portal-modal[open] {
    display: flex;
}

.portal-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
}

/* 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) */
.portal-modal-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Modal title: Roboto SemiBold (600), 20px, 100% line height, 0% letter
   spacing, dark navy */
.portal-modal-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

.portal-modal-close img {
    display: block;
    width: 13px;
    height: 1px;
}

/* Divider: 1px translucent dark navy rule (64% alpha) */
.portal-modal-divider {
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Sign-in form: vertical flow, 8px gap between the rows; method="dialog"
   so the Sign In button submits and closes the dialog natively */
.portal-modal-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* Field labels: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy */
.portal-modal-label {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a29;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Helper line: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, centered, dark navy */
.portal-modal-forgot {
    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: #0f172a;
}

/* 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 #0f172a;
    border-radius: 4px;
    background: transparent;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
    cursor: pointer;
}

.portal-modal-signin:hover {
    background: #0f172a;
    color: #ffffff;
}

/* Register line: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, centered, dark navy; the bolded action is a text button that
   opens the registration dialog */
.portal-modal-register-line {
    text-align: center;
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a;
    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;
}

/* Partner section: centered heading + lead over a two-column row — an
   accordion stack on the left half and a framed image on the right half;
   full-width with the same 1280px inner container as the other sections */

.partner-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

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

/* 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 */
.accordion-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 */
.accordion-head-row {
    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;
}

.accordion[open] .accordion-divider {
    display: block;
}

.accordion-head::-webkit-details-marker {
    display: none;
}

/* Keep keyboard focus visible on the accordion headers */
.accordion-head:focus-visible {
    outline: 1px solid #0f172a;
    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;
}

.accordion-icon-open {
    display: none;
}

.accordion[open] .accordion-icon-open {
    display: block;
}

.accordion[open] .accordion-icon-closed {
    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;
}

/* Bold lead-ins inside the paragraphs: Roboto Medium (500), 17px, 100% line
   height, 0% letter spacing — replaces the heavier default <b> weight;
   color inherits from the paragraph */
.accordion-text b {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
}

/* Image column: hugs the 473px frame; laid out as a flex row so the frame
   can stretch vertically with the accordion stack */
.partner-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: #ffffff;
    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 */
.partner-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Newsroom section: centered heading + lead over a row of 4 photos;
   full-width with the same 1280px inner container as the other sections */

.newsroom-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* 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 */
.newsroom-card {
    position: relative;
}

/* Gradient backdrop: fills the card exactly (256x128 by design) */
.newsroom-card-bg {
    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 */
.newsroom-card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
}

/* Headline: Roboto SemiBold (600), 17px, 100% line height, 0% letter
   spacing, light lavender */
.newsroom-card-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Gold accent phrase inside the headline */
.newsroom-card-title-accent {
    color: #ffd700;
}

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

/* Supporting text: Roboto Regular (400), 12px, 100% line height, 0% letter
   spacing, light lavender */
.newsroom-card-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Footer row: date on the left, button on the right */
.newsroom-card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Date: Roboto Regular (400), 12px, 100% line height, 0% letter spacing,
   light lavender */
.newsroom-card-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* 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; 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 #e7e6eea3;
    border-radius: 4px;
    background: transparent;
    color: #e7e6eea3;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.newsroom-card-btn:hover {
    border-color: #e7e6ee;
    color: #e7e6ee;
}

/* About section: centered heading + lead over a split row — image on the
   left, lavender info panel on the right; full-width with the same 1280px
   inner container as the other sections */

/* Head: title with the lead 16px beneath it (both centered) */
.about-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;
}

.about-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Panel head: title on the left, diagonal arrow on the right */
.about-panel-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Panel title: Roboto SemiBold (600), 24px, 100% line height, 0% letter
   spacing, left-aligned, dark navy */
.about-panel-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: left;
    color: #0f172a;
}

/* 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 */
.about-panel-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* FAQ section: centered heading + lead over a stack of five question rows;
   full-width with the same 1280px inner container as the other sections */

/* Head: title with the lead 16px beneath it (both centered) */
.faq-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

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

/* Accordion header: vertical flow — a title/icon row on top and a divider
   line under it; the native disclosure marker is removed so the +/- symbols
   carry the state instead */
.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 symbol on the right, 10px gap */
.faq-item-head-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

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

.faq-item-icon-open {
    display: none;
}

.faq-item[open] .faq-item-icon-open {
    display: block;
}

.faq-item[open] .faq-item-icon-closed {
    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 #0f172aa3;
}

.faq-item[open] .faq-item-divider {
    display: block;
}

.faq-item-head::-webkit-details-marker {
    display: none;
}

/* Keep keyboard focus visible on the accordion headers */
.faq-item-head:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

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

/* Bullet row: same type as the answer text — Roboto Regular (400), 17px,
   100% line height, 0% letter spacing, dark navy */
.faq-item-bullet {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Contact section: centered heading + lead over a split — two stacked
   cards on the left (358px + 251px with a 16px gap) and one tall card on
   the right (794x625); the row is 1152px wide like the FAQ list, with the
   same 1280px inner container as the other sections */

/* Head: title with the lead 16px beneath it (both centered) */
.contact-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* 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 */
.contact-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: #E7E6EE;
}

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

/* Divider line under the heading: full-width hairline with a 1px navy
   border at 64% opacity, 16px beneath the heading */
.contact-card-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Info group: a subtitle with its address lines and email, 8px apart;
   consecutive groups are 16px apart via the card's gap */
.contact-card-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Group subtitle: Roboto Medium (500), 20px, 100% line height, 0% letter
   spacing, dark navy */
.contact-card-subtitle {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Email line: Roboto Medium (500), 17px, 100% line height, 0% letter
   spacing, dark navy */
.contact-card-email {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Form label: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, centered, dark navy */
.contact-label {
    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: #0f172a;
}

/* 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: #0f172a29;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

/* Keep keyboard focus visible on the form fields */
.contact-input:focus-visible {
    outline: 1px solid #0f172a;
    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: #0f172a29;
    cursor: pointer;
}

.contact-checkbox:checked {
    background: #0f172a 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;
}

/* Checkbox label: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy */
.contact-check-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 #0f172a;
    border-radius: 4px;
    background: transparent;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #0f172a;
    cursor: pointer;
}

.contact-button:hover {
    background: #0f172a14;
}

/* 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;
    /* 16px below the contact section above */
    margin-top: 16px;
    padding: 16px 0;
    background: #e7e6ee;
    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;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #0f172aa3;
}

/* Support Center link: Roboto Regular (400), 12px, 100% line height, 0%
   letter spacing, Klein blue at ~64% opacity; solid blue on hover */
.footer-info-link {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    color: #002fa7a3;
}

.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 #0f172aa3;
}

/* 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;
    line-height: 1;
}

.footer-category-title b {
    font-size: 12px;
    font-weight: bolder;
    color: #0f172aa3;
}

/* Footer links: Roboto Regular (400), 12px, 100% line height, 0% letter
   spacing, dark navy at ~64% opacity; solid navy on hover */
.footer-link {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    color: #0f172aa3;
}

.footer-link:hover {
    color: #0f172a;
}

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

/* Legal links and copyright: Roboto Medium (500), 12px, 100% line height,
   0% letter spacing, dark navy at ~64% opacity; links go solid navy on
   hover */
.footer-legal-link,
.footer-legal-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #0f172aa3;
}

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

.footer-legal-link:hover {
    color: #0f172a;
}

/* 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;
    /* 16px below the site header */
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    /* 150px tall at desktop size; grows instead of clipping when the two
       cards wrap onto separate rows on narrow viewports */
    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;
}

/* Caption title: Roboto Black (900), 32px, 100% line height, 0% letter
   spacing, light lavender */
.products-page-caption-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

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

/* Caption text: Roboto Regular (400), 22px, 100% line height, 0% letter
   spacing, light lavender */
.products-page-caption-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* 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;
    /* 16px below the products-page intro band section above */
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    /* 323.25px tall at desktop size; grows instead of clipping when the
       cards wrap onto separate rows on narrow viewports */
    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 #e7e6ee;
    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: #ffd700a3;
    -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: #ffd700;
}

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

/* Card title: Roboto SemiBold (600), 24px, 100% line height, 0% letter
   spacing, light lavender */
.products-page-product-card-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

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

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

/* Card text: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, light lavender */
.products-page-product-card-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* products-page-about-inner modifier: the shared narrow container with
   a 16px top margin and no padding */
.products-page-about-inner {
    margin-top: 16px;;
    padding: 0;;
}

/* Heading group: centered title and lead, 16px apart */
.products-page-about-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* 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: #e7e6ee;
    opacity: 1;
}

/* Feature title: laid out 16px from the card's top and left edges via the
   padding; Roboto SemiBold (600), 20px, 100% line height, 0% letter
   spacing, dark navy */
.products-page-feature-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Divider line: full-width 1px dark navy rule */
.products-page-feature-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172a;
}

/* products-page-more-inner modifier: the shared narrow container with
   a 16px top margin and no padding */
.products-page-more-inner {
    margin-top: 16px;;
    padding: 0;;
}

/* Heading group: centered title and lead, 16px apart */
.products-page-more-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Button row: horizontal flow, 16px gap, centered */
.products-page-more-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 */
.products-page-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    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 */
.products-page-more-btn-primary {
    background: #0f172a;
    color: #e7e6ee;
}

/* 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 #0f172a;
    background: transparent;
    color: #0f172a;
}

.products-page-more-btn-primary:hover {
    background: #1d293b;
}

.products-page-more-btn-secondary:hover {
    background: #0f172a14;
}

.products-page-more-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* 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;
    /* 16px below the site header */
    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: #e7e6ee;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Card text: Roboto Regular (400), 12px, 100% line height, 0% letter
   spacing, dark navy */
.racking-systems-card-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    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: #0f172a;
    color: #e7e6ee;
}

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

.racking-systems-btn-primary:hover {
    background: #1d293b;
}

.racking-systems-btn-secondary:hover {
    background: #0f172a14;
}

.racking-systems-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* product-detail-inner modifier: the shared narrow container with
   a 16px top margin and no padding */
.product-detail-inner {
    margin-top: 16px;;
    padding: 0;;
}

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

.product-detail-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 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: #e7e6ee;
    border-radius: 4px;
}

/* Panel title: Roboto Bold (700), 24px, 100% line height, 0% letter
   spacing, dark navy */
.product-detail-panel-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Divider line under the panel title: full-width hairline with a 1px
   navy border at 64% opacity */
.product-detail-panel-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Panel heading: Roboto SemiBold (600), 20px, 100% line height, 0%
   letter spacing, dark navy */
.product-detail-panel-heading {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Panel subheading: Roboto Medium (500), 20px, 100% line height, 0%
   letter spacing, dark navy */
.product-detail-panel-subheading {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

/* Feature row: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy */
.product-detail-feature {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 #0f172a;
    border-radius: 4px;
    background: transparent;
    color: #0f172a;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    /* keep the button at its fixed 134px width inside the flex panel and
       pin it to the card bottom: margin-top: auto soaks up the leftover
       space, leaving the button exactly 32px above the bottom edge */
    align-self: flex-start;
    margin-top: auto;
}

.product-detail-btn:hover {
    background: #0f172a14;
}

.product-detail-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* more-details-inner modifier: the shared narrow container with
   a 16px top margin and no padding */
.more-details-inner {
    margin-top: 16px;;
    padding: 0;;
}

/* Spec row: fixed 1152x354 (195 + 16 + 561 + 16 + 364), horizontal flow
   with 16px gaps; wraps on narrow viewports */
.more-details-row {
    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: #e7e6ee;
    border-radius: 4px;
}

/* Label: Roboto Medium (500), 17px, 100% line height, 0% letter
   spacing, dark navy */
.more-details-label {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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%;
    
    /* keep the image's natural aspect ratio and crop the overflow
       instead of stretching or letterboxing it inside the frame */
    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: #e7e6ee;
    border-radius: 4px;
}

/* Inquiry title: Roboto Bold (700), 24px, 100% line height, 0% letter
   spacing, dark navy */
.more-details-inquiry-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #0f172a;
}

/* Divider line under the inquiry title: full-width hairline with a 1px
   navy border at 64% opacity */
.more-details-inquiry-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Inquiry text: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, centered, dark navy */
.more-details-inquiry-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: #0f172a;
}

/* 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 #0f172a;
    border-radius: 4px;
    background: transparent;
    color: #0f172a;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.more-details-btn:hover {
    background: #0f172a14;
}

.more-details-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* Projects section (projects page): centered heading + lead over a
   horizontally scrollable row of wide project photos; the first section
   on the page, sitting 16px under the navbar */

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

.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); }

/* Centered slide: fully opaque (projects-gallery.js moves this class in
   step with the dots) */
.projects-gallery-slide-active {
    opacity: 1;
}

/* 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: #0f172aa3;
    cursor: pointer;
}

.projects-gallery-nav-btn:hover {
    background: #0f172a;
}

.projects-gallery-nav-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* Arrow icon: arrow-left.svg / arrow-right.svg at their natural 9x11
   size, already stroked in light lavender at ~64% alpha (#E7E6EEA3) */
.projects-gallery-nav-icon {
    display: block;
}

/* 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) */
.projects-gallery-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.projects-gallery-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    background: #0f172aa3;
}

.projects-gallery-dot-active {
    background: #0f172a;
}

/* "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;
    /* 16px below the gallery section above */
    margin-top: 16px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Heading group: centered title and lead, 16px apart */
.projects-more-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Button row: horizontal flow, 16px gap, centered — fixed-width buttons
   make it 272x28 (138 + 16 + 118) */
.projects-more-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 */
.projects-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
}

/* Start My Project: fixed 138x28, dark navy fill, light lavender text */
.projects-more-btn-primary {
    width: fit-content;
    background: #0f172a;
    color: #e7e6ee;
}

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

.projects-more-btn-primary:hover {
    background: #1d293b;
}

.projects-more-btn-secondary:hover {
    background: #0f172a14;
}

.projects-more-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* "Response Expectations" section (contact page): centered title + lead
   over a photo and an info card, with a note underneath; sits 16px below
   the Contact Suntomine section */

/* Heading group: centered title and lead, 16px apart */
.response-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Card row: 516px photo and 620px card, 16px apart (1152px total,
   matching the FAQ list below) */
.response-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

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

/* Logo overlay: 129x16 header logo pinned 16px from the frame's bottom
   and right corners, on top of the photo */
.response-image-logo {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 129px;
    height: 16px;
}

/* 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: #e7e6ee;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Divider line between the title and text */
.response-card-divider {
    border-top: 1px solid #0f172aa3;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #0f172a;
}

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

/* Heading group: centered title and lead, 16px apart */
.privacy-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Button row: two legal buttons, 16px apart */
.privacy-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 */
.privacy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
}

/* Terms of Use: fixed 117x28, dark navy fill, light lavender text */
.privacy-btn-primary {
    width: fit-content;
    background: #0f172a;
    color: #e7e6ee;
}

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

.privacy-btn-primary:hover {
    background: #1d293b;
}

.privacy-btn-secondary:hover {
    background: #0f172a14;
}

.privacy-btn:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* Story section (about us page): centered heading + lead over a split row —
   framed photo on the left, accordion stack on the right; the first section
   on the page, sitting 16px under the navbar */

/* Head: title with the lead 16px beneath it (both centered) */
.story-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Split row: fixed 1152px = 620px image frame + 16px gap + 516px accordion
   column; equal heights — the open accordion card stretches to the photo
   frame and the frame grows to match a taller open card, so the two columns
   always end equal */
.story-split {
    width: 1152px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Image column: hugs the 620px frame; laid out as a flex row so the frame
   can stretch vertically with the accordion stack */
.story-image-col {
    flex: 0 0 auto;
    max-width: 100%;
    display: flex;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
    color: #ffffff;
}

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

/* === About Us: company timeline === */

/* 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;
    text-align: left;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 #e7e6ee;
    background: #0f172a;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* === About Us: locations map === */

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

/* Corner logo: header wordmark pinned 16px from the map's bottom-right
   corner, fixed 129x16 (the spec's 128.717 is Figma sub-pixel noise -
   same integer size as the other two logo badges on the site) */
.locations-map-logo {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 129px;
    height: 16px;
}

/* 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: #0f172a;
    border: 1px solid #e7e6ee;
    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;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
    text-align: left;
    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;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
    text-align: left;
    vertical-align: top;
}

/* Divider between the column titles and the content (#0F172A at 64%
   alpha, straight from the design) */
.locations-table tbody tr:first-child td {
    border-top: 1px solid #0f172aa3;
}

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

/* Privacy policy section (privacy policy page): centered title, "last
   updated" line and intro paragraph over a fixed 1152x848 split row — a
   transparent 352px nav column on the left and a lavender 784px body panel
   on the right; the first section on the page, sitting 16px under the
   navbar */

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

/* Section entry: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, left-aligned, dark navy; the closing headings (Cookies, Changes,
   Contact Us) share this style with <b> supplying the bold weight */
.privacy-policy-nav-item {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    color: #0f172a;
}

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

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1 !important;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a;
}

/* Newsletter section (newsletter page): centered title + lead over a fixed
   1152x388 split row — the newsletter-1.png frame on the left and the
   subscribe/unsubscribe form column on the right; sits 16px under the lead
   via the section container's gap */

/* Split row: fixed 1152px = 690px image frame + 16px gap + 446px form
   column; equal heights — the form column stretches to the 388px frame and
   grows if its copy needs more room; wraps on narrow viewports */
.newsletter-split {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    width: 1152px;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Image column: hugs the 690px frame; laid out as a flex row so the frame
   can stretch vertically with the form column */
.newsletter-image-col {
    flex: 0 0 auto;
    max-width: 100%;
    display: flex;
}

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

/* The artwork itself is styled by the shared framed cover photo rule
   (.manufacturing-split-image, .newsletter-image img) defined alongside the
   manufacturing split section above */

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

/* Form label: Roboto Medium (500), 17px, 100% line height, 0% letter
   spacing, left-aligned, dark navy */
.newsletter-label {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a29;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

.newsletter-input::placeholder {
    font-weight: 300;
    color: #0f172aa3;
}

/* Keep keyboard focus visible on the email fields */
.newsletter-input:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* Button row: Subscribe and Privacy Policy, 16px apart, hugged to the left
   of the form column */
.newsletter-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* Subscribe: the shared .privacy-btn base with the dark navy primary fill,
   narrowed to the design's fixed 92x28 */
.newsletter-btn-subscribe {
    width: fit-content;
}

/* Support Center hero banner (support center page): fixed 1152x150 strip of
   the contact-1.jpg photo sitting 16px under the page title via the section
   container's 16px gap and 16px padding; the frame is the relative slot for
   the photo and the corner logo badge and clips them to the site's 4px
   rounded corners. The 129x16 header wordmark itself is the shared
   .response-image-logo rule (pinned 16px from the frame's bottom-right
   corner, full opacity, no rotation) reused from the contact page */

/* 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 */
.support-hero-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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    color: #0f172aa3;
    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;
    /* 16px below the FAQ intro band section above */
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    /* 28px tall at desktop size; grows instead of clipping when the groups
       wrap onto separate rows on narrow viewports */
    min-height: 28px;
    border-radius: 4px;
    opacity: 1;
}

/* Button group: horizontal flow with the design's 8px gap between buttons */
.faq-toolbar-group {
    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: #0f172a14;
    color: #0f172aa3;
}

.faq-filter-btn:hover {
    background: #0f172a29;
}

/* 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 #0f172a;
    background: transparent;
    color: #0f172aa3;
}

.faq-toggle-btn:hover {
    background: #0f172a14;
}

/* 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;
    /* 16px below the FAQ toolbar section above */
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Hidden category lists: .faq-list's own display:flex would override the
   hidden attribute's display:none, so the hidden state is restated here */
.faq-list[hidden] {
    display: none;
}

/* Active filter button: solid navy fill with light lavender text (the
   same treatment .card-btn uses on hover), marking the visible category */
.faq-filter-btn.is-active,
.faq-filter-btn.is-active:hover {
    background: #0f172a;
    color: #e7e6ee;
}

/* Careers highlight strip (careers page): fixed 1152x384 row sitting 16px
   under the intro copy via the section container's 16px gap inside the
   shared 1152px .section-inner-narrow shell — the 608x384 feature photo on
   the left and two 256x384 job cards on the right, 16px apart
   (608 + 16 + 256 + 16 + 256 = 1152); the cards carry a cover photo over a
   fixed 111px lavender caption panel; wraps onto stacked rows on narrow
   viewports */

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

/* Feature photo: fills the frame edge to edge, cover-cropped; full
   opacity, no rotation */
.careers-feature-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

/* 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;
    /* the design's 10px inner gap is absorbed by the flush photo/caption
       seam: the photo flexes to fill the 273px left above the fixed 111px
       panel (10px + 256px card layout vestige from the design file) */
    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: #e7e6ee;
    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 text: Roboto Regular (400), 12px, 100% line height, 0% letter
   spacing, dark navy */
.careers-card-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 (careers page): fixed 1152px row of three equal lavender
   cards under the "Grow Both as a Person and Professional" heading,
   sitting 16px under the lead via the section container's 16px gap inside
   the shared 1152px .section-inner-narrow shell; the row bleeds 16px into
   the container's side padding on each side (negative side margins) to
   span the full 1152px, the same trick as .careers-grid above; the cards
   reuse the manufacturing page's pillar title (Roboto SemiBold 600, 20px,
   100% line height, 0% letter spacing, dark navy) and 1px navy divider
   rules, plus the shared .section-text body scale (Roboto Regular 17px) */

/* 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: #e7e6ee;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
}



/* ==========================================================================
   News page: feed of posts and single post detail
   ========================================================================== */

/* 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;
    /* 16px below the section lead above */
    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;
}

.news-hero-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Backdrop image: fills the whole card behind the overlay */
.news-hero-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Headline: Roboto SemiBold (600), 34px, 100% line height, 0% letter
   spacing, light lavender */
.news-hero-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Footer row: date on the left, Read More button on the right */
.news-hero-card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Date: Roboto Regular (400), 17px, 100% line height, 0% letter spacing,
   light lavender */
.news-hero-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* 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 #e7e6eea3;
    border-radius: 4px;
    background: transparent;
    color: #e7e6eea3;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.news-hero-btn:hover {
    border-color: #e7e6ee;
    color: #e7e6ee;
}

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

.news-hero-post-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Backdrop image: fills the whole card behind the overlay */
.news-hero-post-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card overlay: absolute layer spanning the whole card; the title is pinned
   to the top and the footer row to the bottom via space-between, with 8px
   padding all around */
.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;
}

/* Title: Roboto SemiBold (600), 17px, 100% line height, 0% letter spacing,
   light lavender */
.news-hero-post-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Footer row: date on the left, Read More button on the right */
.news-hero-post-card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Date: Roboto Regular (400), 12px, 100% line height, 0% letter spacing,
   light lavender */
.news-hero-post-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* 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 #e7e6eea3;
    border-radius: 4px;
    background: transparent;
    color: #e7e6eea3;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.news-hero-post-btn:hover {
    border-color: #e7e6ee;
    color: #e7e6ee;
}

/* 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;
    /* 16px below the section lead above */
    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;
}

.news-archive-post-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

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

/* Title: Roboto SemiBold (600), 22px, 100% line height, 0% letter spacing,
   dark navy */
.news-archive-post-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Date: Roboto Regular (400), 15px, 100% line height, 0% letter spacing,
   dark navy — rendered as "March 11, 2026" */
.news-archive-post-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #e7e6ee;
    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: #ffffff;
}

/* 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);
    color: #ffffff;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 18px;
    flex: none;
}

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

.post-author {
    font-family: Roboto, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #0f172a;
}

.post-date {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #52606d;
}

.post-card-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #0f172a;
}

.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;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: #0f172a;
}

.post-text p {
    margin: 0;
}

/* Image block: the framed photo with the image description (caption) 8px
   underneath — the caption sits outside the frame, mirroring how the
   featured image's credit line sits under its rounded frame */
.post-image {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 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-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Image description: italic Roboto Regular (400), 17px, 100% line height,
   0% letter spacing, dark navy, prefixed with a bold "Description:" label
   (the only bold part of the line) */
.post-image-caption {
    font-family: Roboto, sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a;
}

.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 #0f172a;
    border-radius: 4px;
    background: transparent;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}

.post-share:hover {
    background: #0f172a;
    color: #ffffff;
}

/* Post detail page: two-column row inside the shared 1152px
   .section-inner-narrow shell — the 880px reading column on the left and a
   256px side column on the right (880 + 16 + 256 = 1152); 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 same trick as .careers-grid; the matching calc() max-width keeps
   the bleed from ever overflowing the viewport on narrow screens, and the
   row wraps onto stacked columns on narrow viewports. The design's fixed
   1008px page height is content-driven here because post blocks vary */

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

/* Side author row: the same blank 20px avatar circle + author name
   treatment the byline under the featured image uses (it reuses the
   .post-detail-avatar / .post-detail-author rules) */
.post-detail-side-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Side post date: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy */
.post-detail-side-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Latest news heading: Roboto Medium (500), 17px, 100% line height, 0%
   letter spacing, dark navy */
.post-detail-side-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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 */
.post-detail-latest {
    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: #e7e6ee;
}

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

/* Card title: Roboto SemiBold (600), 17px, 100% line height, 0% letter
   spacing, light lavender on the dark gradient (the same light tone as
   the date) */
.post-detail-latest-card-title {
    position: relative;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Card date: Roboto Regular (400), 12px, 100% line height, 0% letter
   spacing, light lavender, pinned to the gradient panel's bottom */
.post-detail-latest-card-date {
    position: relative;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Title: Roboto SemiBold (600), 34px, 100% line height, 0% letter spacing,
   dark navy */
.post-detail-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

/* Featured credit: Roboto Medium (500) Italic, 17px, 100% line height, 0%
   letter spacing, dark navy */
.post-detail-featured-caption {
    font-family: Roboto, sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Byline: the author's avatar circle, the author name and the date
   (day only, no time) side by side */
.post-detail-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 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: #e7e6ee;
    flex: none;
    opacity: 1;
}

/* Author: Roboto Medium (500), 17px, 100% line height, 0% letter spacing,
   dark navy */
.post-detail-author {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Date: Roboto Regular (400), 17px, 100% line height, 0% letter spacing —
   the same muted grey the post card's date uses */
.post-detail-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #52606d;
}

/* Blocks: interleaved text paragraphs (.post-text) and images (.post-image)
   reused from the post card, 16px apart */
.post-detail-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    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: #0f172a;
    color: #e7e6ee;
}

/* 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: #0f172aa3;
}

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

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

/* Heading: Roboto Medium (500), 17px, 100% line height, 0% letter
   spacing, dark navy */
.post-detail-other-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

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

/* Column: the posts stack vertically, 8px apart */
.post-detail-other-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.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;
}

/* Other post title: Roboto Regular (400), 17px, 100% line height, 0%
   letter spacing, dark navy */
.post-detail-other-post-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Other post date: Roboto Regular (400), 12px, 100% line height, 0%
   letter spacing, dark navy */
.post-detail-other-post-date {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}

/* Navigation title: the neighbouring post's title, Roboto Regular (400),
   17px, 100% line height, 0% letter spacing, dark navy */
.post-detail-nav-title {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}


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

.post-featured-img {
    display: block;
    width: 100%;
    height: auto;
}


/* Talent network (talent-network page): the registration card 16px under
   the "Register for Exciting Job Opportunities" title (the section
   container's gap provides the offset) — the design's 1152x292 light
   lavender panel (grows with content so nothing can ever spill out),
   vertical flow with a 16px gap between every element; the 32px padding
   puts the first label 32px from the card's top-left corner, and the
   1088px interior (1152 - 2x32) is exactly the design's input width */

/* 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: #e7e6ee;
    opacity: 1;
}

/* Form label (also the checkbox consent text): Roboto Medium (500), 17px,
   100% line height, 0% letter spacing, left-aligned, dark navy */
.talent-label {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a29;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

.talent-input::placeholder {
    font-weight: 300;
    color: #0f172aa3;
}

/* Keep keyboard focus visible on the email field */
.talent-input:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* 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: #0f172a29;
    cursor: pointer;
}

/* The real file input: visually hidden but still focusable and announced
   by screen readers (the label's for= keeps it clickable) */
.talent-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 */
.talent-upload-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172aa3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep keyboard focus visible on the drop zone (focus lands on the hidden
   input inside the label) */
.talent-upload:focus-within {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* Drag feedback: a deeper navy tint with a dashed outline while a file is
   being dragged over the zone (class toggled by main.js) */
.talent-upload.is-dragover {
    background: #0f172a3d;
    outline: 1px dashed #0f172a;
    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;
}

/* Button row: Join Our Network and Search Jobs, 16px apart, hugged to the
   left of the card */
.talent-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* Join Our Network: the shared .privacy-btn base with the dark navy
   primary fill, widened to the design's fixed 148x28 */
.talent-btn-join {
    width: 148px;
}

/* Search Jobs: the shared .privacy-btn base with the secondary outline
   treatment, narrowed to the design's fixed 110x28 */
.talent-btn-search {
    width: 110px;
}

/* Job search bar (job list page): the fixed 1152x88 lavender band sitting
   8px under the intro lead — the keyword field group on the left, a hairline
   vertical divider, the location field group and the Search outline button
   on the right, 16px apart (501.5 + 16 + 1 + 16 + 500.5 + 16 + 69 + 32
   padding = 1152); wraps onto stacked rows on narrow viewports */

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

/* Field label: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy */
.job-search-label {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172a29;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

.job-search-input::placeholder {
    font-weight: 300;
    color: #0f172aa3;
}

/* 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 #0f172aa3;
    align-self: stretch;
}

/* Search button: the shared .privacy-btn secondary outline treatment
   (28px height, 4px radius, 4px/8px padding, 1px dark navy border, Roboto
   Regular (400), 17px, dark navy), narrowed to the design's fixed 69px; the
   25px top offset aligns it with the input row (17px label + 8px gap below
   the bar's top padding) */
.job-search-btn {
    width: fit-content;
}

/* Keep keyboard focus visible on the search fields */
.job-search-input:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* 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 */
.job-filters {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Row label: Roboto Medium (500), 17px, 100% line height, 0% letter spacing,
   dark navy at 64% alpha */
.job-filters-label {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172aa3;
}

/* 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: #e7e6ee;
    color: #0f172aa3;
}

.job-filter-btn:hover {
    background: #0f172a29;
}

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

/* Checked chip: solid navy fill with light lavender text (the same
   treatment the FAQ toolbar's is-active buttons use); the server marks the
   chips that came back with the submitted form */
.job-filter-btn.is-checked,
.job-filter-btn.is-checked:hover {
    background: #0f172a;
    color: #e7e6ee;
}

/* Keep keyboard focus visible on the chip pill (the hidden input holds it) */
.job-filter-btn:focus-within {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* Sort row: 1152px row sitting 16px under the filter row via the section
   container's 16px gap — the "Sort by:" label on the left and the sort
   order button on the right (space-between); wraps onto stacked rows on
   narrow viewports */
.job-sort {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Row label: Roboto Medium (500), 17px, 100% line height, 0% letter spacing,
   dark navy at 64% alpha — the same treatment as the filters row label */
.job-sort-label {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172aa3;
}

/* 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 #0f172aa3;
    background: transparent;
    color: #0f172aa3;
}

.job-sort-btn:hover {
    background: #0f172a14;
}

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

/* Job cards grid (job list page): the design's fixed 1152x704 block of
   3-per-row cards sitting 16px under the sort row via the section
   container's 16px gap — the always-first Talent Network promo card on the
   title-slide photo followed by one card per active job. The design's
   geometry: 378.67px cards with an 8px column gap (3 x 378.67 + 2 x 8 =
   1152) and a 16px row gap (3 x 224 + 2 x 16 = 704); wraps onto fewer
   cards per row on narrow viewports */

/* 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: #e7e6ee;
    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: #0f172a url("../images/title-slide-background.96e8e48f1502.png") center / cover no-repeat;
}

.job-card-talent .job-card-title {
    color: #e7e6ee;
}

.job-card-talent .job-card-divider {
    border-top-color: #e7e6ee;
}

/* Card title: Roboto SemiBold (600), 20px, 100% line height, 0% letter
   spacing, dark navy on the job cards (light lavender on the promo card) */
.job-card-title {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Divider line under the title: full-width hairline with a 1px dark navy
   top border (light lavender on the promo card) */
.job-card-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #0f172a;
}

/* Promo copy: Roboto SemiBold (600), 15px, 100% line height, 0% letter
   spacing, light lavender */
.job-card-lead {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
}

/* Job location: Roboto SemiBold (600), 15px, 100% line height, 0% letter
   spacing, dark navy */
.job-card-location {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* Job type: Roboto Medium (500), 12px, 100% line height, 0% letter
   spacing, dark navy */
.job-card-type {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
    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;
    width: 130px;
}

.job-card-join {
    width: 109px;
    border-color: #ffd700a3;
    color: #ffd700a3;
}

/* 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: #ffd700;
    color: #ffd700;
}


/* Job detail body (job detail page): the design's 1152px-wide block 16px
   under the intro lead (the section container's gap) — the facts panel on
   the left and the description column on the right, 16px apart (270 + 16 +
   866 = 1152); wraps onto stacked rows on narrow viewports. The block hugs
   its content: the height comes from whichever card is taller */

/* Body row: horizontal flow with the design's 16px gap; children hug their
   own heights from the top (the panel keeps its 320px design height, the
   content card grows with its text) */
.job-detail-body {
    width: 1152px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* 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: #e7e6ee;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
}

/* Fact label / section label: Roboto SemiBold (600), 17px, 100% line
   height, 0% letter spacing, dark navy — the label scale shared by the
   facts panel on the left and the section heads in the content card */
.job-detail-label {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #e7e6ee;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bullet lists (responsibilities, requirements, what we offer): disc
   markers like the FAQ bullets, 8px between rows */
.job-detail-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bullet row: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy — the shared .section-text scale on each list item */
.job-detail-list li {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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;
    width: 146px;
    height: 52px;
    margin: 0 auto 0;
    padding: 16px 32px;
    border-radius: 4px;
    background: #0f172a;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #e7e6ee;
    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: #e7e6ee;
    color: #0f172a;
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.apply-modal[open] {
    display: flex;
}

.apply-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
}

/* Modal title: Roboto SemiBold (600), 24px, 100% line height, 0% letter
   spacing, centered, dark navy */
.apply-modal-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: #0f172a;
}

/* Divider: 1px translucent dark navy rule (63% alpha) */
.apply-modal-divider {
    height: 0;
    border-top: 1px solid #0f172aa3;
}

/* Intro line: Roboto Regular (400), 17px, 100% line height, 0% letter
   spacing, dark navy — the role's title set in bold */
.apply-modal-text {
    margin: 0;
    text-align: center;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* The form flows like the dialog: vertical, 8px gaps; each step of the
   flow is a page inside it, flowing the same way, and only the active
   page is shown */
.apply-modal-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply-modal-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply-modal-page[hidden] {
    display: none;
}

/* Field label: the intro line's Regular scale but centered */
.apply-modal-field-label {
    margin: 0;
    display: block;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #0f172a;
}

/* 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: #0f172a29;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #0f172a;
}

.apply-modal-input::placeholder {
    font-weight: 300;
    color: #0f172aa3;
}

.apply-modal-input:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* Consent row: the 24x24 custom checkbox beside the Medium (500)
   consent sentence (the policy links keep the sentence's color) */
.apply-modal-consent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* 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: #0f172a29;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

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

.apply-modal-checkbox:checked {
    background: #0f172a;
}

.apply-modal-checkbox:checked::before {
    opacity: 1;
}

.apply-modal-checkbox:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

.apply-modal-consent-text {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
    cursor: pointer;
}

.apply-modal-link {
    color: #0F172AA3;
    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;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
}

.apply-modal-cancel {
    width: 68px;
    border: 1px solid #0f172a;
    background: transparent;
    color: #0f172a;
}

.apply-modal-proceed {
    width: 79px;
    border: none;
    background: #0f172a;
    color: #e7e6ee;
}

/* 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: #0f172a;
    color: #e7e6ee;
}

.apply-modal-cancel:focus-visible,
.apply-modal-proceed:focus-visible,
.apply-modal-submit:focus-visible {
    outline: 1px solid #0f172a;
    outline-offset: 2px;
}

/* Step caption: Roboto Medium (500), 17px, 100% line height, dark navy */
.apply-modal-step {
    text-align: center;
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172a;
}

/* 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: #0f172aa3;
}

.apply-modal-dot.is-active {
    background: #0f172a;
}

/* 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: #0f172a29;
    cursor: pointer;
}

/* The real file input: visually hidden but still focusable and announced
   by screen readers (the label's for= keeps it clickable) */
.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, translucent dark navy — the
   placeholder treatment */
.apply-upload-text {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: #0f172aa3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep keyboard focus visible on the drop zone (focus lands on the hidden
   input inside the label) */
.apply-modal-upload:focus-within {
    outline: 1px solid #0f172a;
    outline-offset: 1px;
}

/* Drag feedback: a deeper navy tint with a dashed outline while a file is
   being dragged over the zone (class toggled by apply-modal.js) */
.apply-modal-upload.is-dragover {
    background: #0f172a3d;
    outline: 1px dashed #0f172a;
    outline-offset: -1px;
}