@media only screen and (min-width: 1921px) {
  .csr-wrap { margin-left: auto; margin-right: auto; }
}
@media only screen and (max-width: 1799px) {
  /* The copy outgrows a fixed-ratio picture from here, so the media stretches
     to the row instead of leaving a gap beneath it. */
  .division-row { align-items: stretch; }
  .division-media { aspect-ratio: auto; min-height: 100%; }
  /* The photo still stretches to the row here, but the 10px offset belongs to
     the slab alone now — margins and calc() sizing would double it up again. */
  .division-img { position: absolute; inset: 0; }
  .division-img img { width: 100%; height: 100%; }
  .division-content { justify-content: center; }
  .division-row { grid-template-columns: 710px minmax(0, 1fr); gap: 90px; }
  .overview-row { grid-template-columns: 710px minmax(0, 1fr); gap: 90px; }
  .header-nav .nav-list { gap: 26px; }
  .hero-content { width: 1100px; }
  .hero-title { font-size: 72px; line-height: 116.67%; }
  .csr-wrap { gap: 50px; }
  .csr-panel { gap: 50px; }
  .about-row { gap: 60px; }
  .about-media { flex: 0 0 780px; max-width: 780px; min-height: 620px; }
  .about-img img { width: 750px; height: 590px; }
  .about-strip { left: 100px; top: 466px; width: 680px; }
  .about-content { flex: 1 1 auto; max-width: none; }
  .facility-row { grid-template-columns: 710px minmax(0, 1fr); }
  /* Keep the slab overhang while the media box shrinks. */
  .partners-row { gap: 110px; }
  .footer-top { gap: 110px; }
  /* The fixed column widths plus these gutters exceed the container in the
     1700-1799 band, so release the columns here rather than at 1699. */
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4) { flex: 1 1 auto; max-width: none; }
  .footer-col--contact { flex: 0 1 auto; min-width: 0; }
}
@media only screen and (max-width: 1699px) {
  .division-row { grid-template-columns: 700px minmax(0, 1fr); gap: 80px; }
  .overview-row { grid-template-columns: 700px minmax(0, 1fr); gap: 80px; }
  .graspin-container { max-width: 1480px; }
  .header-nav .nav-list { gap: 22px; }
  .header-logo, .header-logo img, .header-logo svg { width: 205px; }
  .header-logo img, .header-logo svg { height: 54px; }
  .hero-content { width: 1040px; }
  .hero-title { font-size: 66px; line-height: 118.18%; }
  .csr-slab { flex: 0 0 260px; width: 260px; height: 500px; margin-right: -180px; }
  .csr-tabs { flex: 0 0 500px; max-width: 500px; }
  .csr-panel-copy { flex: 0 0 520px; max-width: 520px; }
  .csr-panel-img { flex: 0 0 390px; max-width: 390px; }
  .csr-panel-img img { height: 410px; }
  .expertise-card { height: 395px; }
  .expertise-card-title { --exp-shift: 306px; }
  .business-card { height: 460px; }
  .business-card-copy { --biz-shift: 268px; }
  .about-media { flex: 0 0 700px; max-width: 700px; min-height: 570px; }
  .about-img img { width: 675px; height: 540px; }
  .about-strip { left: 80px; top: 428px; width: 620px; padding: 26px; }
  .sec-title { font-size: 46px; line-height: 130.43%; }
  .partners-row { gap: 90px; }
  .footer-top { gap: 40px 60px; }
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4) { flex: 1 1 auto; max-width: none; }
  .footer-col--contact { flex: 0 0 auto; }
}
@media only screen and (max-width: 1679px) {
  .header-nav .nav-list { gap: 20px; }
  .header-nav .nav-list > li > a { font-size: 17px; }
  .header-cta { padding: 0 26px; }
  .hero-content { width: 1000px; }
  .hero-title { font-size: 62px; line-height: 119.35%; }
  .partners-row { gap: 75px; }
  .partner-item { height: 100px; }
  .footer-top { gap: 40px 50px; }
}
@media only screen and (max-width: 1599px) {
  .graspin-container { max-width: 1420px; }
  .header-nav .nav-list { gap: 18px; }
  .header-logo, .header-logo img, .header-logo svg { width: 195px; }
  .header-logo img, .header-logo svg { height: 51px; }
  .hero-copy { gap: 8px; }
  .hero-btn { padding: 18px 30px; }
  .hero-content { width: 950px; gap: 32px; }
  .hero-title { font-size: 58px; line-height: 117.24%; }
  .hero-text { width: 740px; font-size: 19px; }
  .csr-wrap { gap: 40px; }
  .csr-panel { gap: 40px; }
  .csr-tabs { flex: 0 0 460px; max-width: 460px; }
  .csr-tab span { font-size: 23px; }
  .csr-panel-copy { flex: 0 0 480px; max-width: 480px; }
  .expertise-card { height: 375px; }
  .expertise-card-title { --exp-shift: 288px; font-size: 24px; }
  .expertise-card-list li { font-size: 20px; }
  .business-sec { padding: 90px 0; }
  .business-card { height: 430px; }
  .business-card-copy { --biz-shift: 246px; }
  .business-card-title { font-size: 27px; line-height: 148%; }
  .about-media { flex: 0 0 620px; max-width: 620px; min-height: 520px; }
  .about-img img { width: 600px; height: 495px; }
  .about-strip { left: 60px; top: 392px; width: 560px; padding: 24px; }
  .about-strip-inner { column-gap: 32px; }
  .about-feat p { font-size: 18px; }
  .sec-title { font-size: 44px; line-height: 127.27%; }
  .about-sec { padding: 90px 0; }
  .business-sec, .world-sec, .expertise-sec,
  .csr-sec, .facility-sec, .projects-sec, .faq-sec { padding: 0 0 90px; }
  .facility-sec { padding: 90px 0; }
  .facility-row { grid-template-columns: 630px minmax(0, 1fr); }
  .project-title { font-size: 27px; }
  .site-footer { padding-top: 70px; }
  .footer-top { gap: 40px 40px; }
  .footer-logo { width: 240px; }
}
@media only screen and (max-width: 1499px) {
  .division-row { grid-template-columns: 620px minmax(0, 1fr); gap: 70px; }
  .overview-row { grid-template-columns: 620px minmax(0, 1fr); gap: 70px; }
  .graspin-container { max-width: 1280px; }
  :root { --header-h: 88px; }
  .header-inner { padding: 0 20px 0 24px; }
  .header-nav .nav-list { gap: 16px; }
  .header-nav .nav-list > li > a { font-size: 16px; }
  .header-cta { height: 52px; padding: 0 24px; font-size: 16px; }
  .header-logo, .header-logo img, .header-logo svg { width: 185px; }
  .header-logo img, .header-logo svg { height: 48px; }
  .home-page { padding-top: 88px; }
  .hero-content { width: 900px; }
  .hero-title { font-size: 54px; line-height: 118.52%; }
  .hero-text { width: 700px; font-size: 18px; }
  .csr-slab { flex: 0 0 230px; width: 230px; height: 460px; margin-right: -160px; }
  .csr-tabs { flex: 0 0 420px; max-width: 420px; }
  .csr-tab { padding: 20px 18px; }
  .csr-tab.is-active { padding: 56px 18px; }
  .csr-tab span { font-size: 21px; }
  .csr-panel-copy { flex: 0 0 440px; max-width: 440px; }
  .csr-panel-copy h3 { font-size: 27px; }
  .csr-panel-img { flex: 0 0 340px; max-width: 340px; }
  .csr-panel-img img { height: 370px; }
  .expertise-card { height: 355px; }
  .expertise-card-title { --exp-shift: 270px; }
  .expertise-card-list { margin-top: 24px; }
  .expertise-card-list li + li { margin-top: 14px; }
  .business-card { height: 405px; }
  .business-card-copy { --biz-shift: 228px; }
  .business-card-desc { font-size: 18px; }
  .business-card-btn { padding: 17px 28px; font-size: 16px; }
  .about-row { gap: 50px; }
  .about-media { flex: 0 0 560px; max-width: 560px; min-height: 480px; }
  .about-img img { width: 540px; height: 455px; }
  .about-strip { left: 50px; top: 360px; width: 510px; }
  .about-feat-icon img, .about-feat-icon svg { width: 36px; height: 36px; }
  .sec-title { font-size: 40px; line-height: 130%; }
  .sec-eyebrow { font-size: 18px; }
  .sec-sub { font-size: 17px; }
  .facility-item-copy h3 { font-size: 23px; }
  .facility-item-copy p, .project-cat, .project-loc,
  .project-value-label, .faq-a p { font-size: 16px; }
  .project-value-num { font-size: 29px; }
  .faq-q span { font-size: 20px; }
  .partners-row { gap: 60px; }
  .footer-top { gap: 45px; }
  .footer-col--intro { flex: 0 0 255px; max-width: 255px; }
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4) { flex: 1 1 auto; max-width: none; }
  .footer-col-title { font-size: 20px; margin-bottom: 16px; }
  .footer-about,
  .footer-links a,
  .footer-contact a,
  .footer-bottom p { font-size: 16px; }
  .footer-socials a { width: 56px; height: 56px; }

  /* Manufacturing facility */
  .mfinf-sec, .mfproc-sec, .mfeq-sec { padding: 80px 0; }

  /* Projects page */
  .pjgroup-sec { padding: 80px 0; }

  /* ESG page */
  .esgroad-sec, .esgcsr-sec { padding: 80px 0; }
  .esgpil-sec { padding-top: 80px; }

  /* Contact page */
  .contact-sec { padding: 80px 0; }
  .contact-row { gap: 60px; }
  .contact-form { padding: 44px; }
  .contact-map-inner { height: 460px; }

  /* Thank you + 404 */
  .err-code { font-size: 130px; }

  /* Thank you + 404 */
  .err-sec { padding: 90px 0; }
  .ty-split { gap: 60px; }
  .ty-right { padding: 40px 38px; }
  .ty-sec { padding: 100px 0; }

  /* About: core values + commitment */
  .cv-sec, .cm-sec { padding: 80px 0; }
  .cv-card { padding: 34px 28px; }
  .cm-card { padding: 38px 32px; }

  /* ESG */
  .esgintro-sec { padding: 80px 0; }
  .esgintro-row { gap: 60px; }
  .esgpillar-sec { padding: 75px 0; }
  .esgroad-sec, .esgpol-sec { padding: 80px 0; }
}
@media only screen and (max-width: 1439px) {
  .header-nav .nav-list { gap: 14px; }
  .hero-content { width: 860px; }
  .hero-title { font-size: 52px; line-height: 119.23%; }
  .facility-row { grid-template-columns: 570px minmax(0, 1fr); }
  .footer-top { gap: 40px; }
}
@media only screen and (max-width: 1399px) {
  .division-row { grid-template-columns: 560px minmax(0, 1fr); gap: 60px; }
  /* The copy grows taller than the picture from here down, so the media
     stretches to match the row instead of holding its own aspect ratio. */
  .overview-row { align-items: stretch; }
  .overview-media { aspect-ratio: auto; min-height: 100%; }
  /* Stretches to the row, but the 10px offset belongs to the slab alone —
     a margin here would stack on top of it. */
  .overview-img { position: absolute; inset: 0; }
  .overview-img img { width: 100%; height: 100%; }
  .overview-content { justify-content: center; }
  .overview-row { grid-template-columns: 560px minmax(0, 1fr); gap: 60px; }
  .graspin-container { max-width: 90%; }
  .header-nav .nav-list { gap: 30px; }
  .header-cta { padding: 0 20px; }
  .header-logo, .header-logo img, .header-logo svg { width: 175px; }
  .header-logo img, .header-logo svg { height: 46px; }
  .hero-content { width: 820px; }
  .hero-title { font-size: 48px; line-height: 120.83%; }
  .hero-text { width: 660px; font-size: 17px; }
  .csr-wrap { gap: 34px; }
  .csr-panel { gap: 34px; }
  .csr-slab { flex: 0 0 200px; width: 200px; height: 420px; margin-right: -140px; }
  .csr-tabs { flex: 0 0 370px; max-width: 370px; }
  .csr-tab span { font-size: 19px; }
  .csr-panel-copy { flex: 0 0 400px; max-width: 400px; }
  .csr-panel-copy h3 { font-size: 25px; }
  .csr-panel-img { flex: 0 0 300px; max-width: 300px; }
  .csr-panel-img img { height: 330px; }
  .expertise-card { height: 335px; }
  .expertise-card-title { --exp-shift: 252px; font-size: 22px; }
  .expertise-card-body { padding: 26px 40px 26px 26px; }
  .expertise-card-list li { font-size: 18px; }
  .expertise-card-list { padding-left: 26px; }
  .business-card { height: 380px; }
  .business-card-copy { --biz-shift: 210px; }
  .business-card-title { font-size: 25px; }
  .business-card-body { padding: 26px 32px 26px 26px; }
  .business-card-icon, .business-card-btn { left: 26px; bottom: 26px; }
  .about-media { flex: 0 0 500px; max-width: 500px; min-height: 440px; }
  .about-img img { width: 485px; height: 415px; }
  .about-strip { left: 40px; top: 328px; width: 460px; padding: 20px; }
  .about-strip-inner { column-gap: 28px; }
  .about-feat p { font-size: 16px; }
  .about-feat-icon img, .about-feat-icon svg { width: 32px; height: 32px; }
  .sec-title { font-size: 37px; line-height: 129.73%; }
  .project-title { font-size: 25px; }
  .partners-row { gap: 50px; }
  .partner-item { height: 90px; }
  .footer-top { gap: 34px; }
  .footer-col--intro { flex: 0 0 240px; max-width: 240px; }
  .footer-logo { width: 220px; }
  .footer-col-title { font-size: 19px; }
  .footer-about,
  .footer-links a,
  .footer-contact a,

  .mfov-stats { gap: 18px; }
  .mfov-stat { padding-left: 14px; }

  /* Project cards — the meta pair needs its own line once cards narrow. */
  .project-meta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media only screen and (max-width: 1299px) {
  /* Two cards per row from here so the copy is not squeezed. */
  .expdetail-card { flex: 0 0 calc((100% - 30px) / 2); max-width: calc((100% - 30px) / 2); }
  .expdetail-card:last-child:nth-child(odd) { flex: 0 0 100%; max-width: 100%; }
  /* Three columns get too narrow here — titles wrap and the cards go ragged. */
  .gc-card { flex: 0 0 calc((100% - 30px) / 2); max-width: calc((100% - 30px) / 2); }
  .team-card { flex: 0 0 calc((100% - 30px) / 2); max-width: calc((100% - 30px) / 2); }
  .gc-card:last-child:nth-child(odd),
  .team-card:last-child:nth-child(odd) { flex: 0 0 100%; max-width: 100%; }
  :root { --header-h: 80px; }
  .header-inner { padding: 0 16px 0 20px; }
  .header-logo, .header-logo img, .header-logo svg { width: 160px; }
  .header-logo img, .header-logo svg { height: 42px; }
  .header-nav .nav-list { gap: 30px; }
  .header-cta { height: 46px; padding: 0 18px; }
  .header-cta .btn-arrow { width: 13px; }
  .hero-copy { gap: 8px; }
  .hero-btn { padding: 16px 28px; }
  .home-page { padding-top: 80px; }
  .hero-content { width: 780px; gap: 28px; }
  .hero-title { font-size: 44px; line-height: 122.73%; letter-spacing: -0.5px; }
  .hero-text { width: 620px; font-size: 16px; }
  .btn-red, .btn-blue { padding: 18px 28px; font-size: 16px; }
  .csr-wrap { gap: 28px; }
  .csr-panel { gap: 28px; }
  .csr-slab { flex: 0 0 180px; width: 180px; height: 390px; margin-right: -120px; }
  .csr-tabs { flex: 0 0 330px; max-width: 330px; }
  .csr-tab { padding: 16px; }
  .csr-tab.is-active { padding: 46px 16px; }
  .csr-tab span { font-size: 18px; }
  .csr-panel-copy { flex: 0 0 360px; max-width: 360px; }
  .csr-panel-copy h3 { font-size: 23px; }
  .csr-panel-img { flex: 0 0 270px; max-width: 270px; }
  .csr-panel-img img { height: 300px; }
  .expertise-card { height: 315px; }
  .expertise-card-title { --exp-shift: 234px; font-size: 21px; }
  .expertise-card-list { margin-top: 20px; }
  .expertise-card-list li { font-size: 17px; }
  .expertise-card-list li + li { margin-top: 12px; }
  .business-sec { padding: 80px 0; }
  .business-row { gap: 16px; margin-top: 40px; }
  .business-card { height: 355px; }
  .business-card-copy { --biz-shift: 190px; }
  .business-card-title { font-size: 23px; line-height: 140%; }
  .business-card-desc { font-size: 16px; margin-top: 10px; }
  .business-card-icon { width: 44px; height: 44px; }
  .business-card-btn { padding: 15px 24px; gap: 10px; }
  .about-row { gap: 40px; }
  .about-media { flex: 0 0 460px; max-width: 460px; min-height: 400px; }
  .about-img img { width: 445px; height: 380px; }
  .about-strip { left: 30px; top: 300px; width: 430px; }
  .about-strip-inner { column-gap: 24px; }
  .sec-title { font-size: 34px; line-height: 129.41%; }
  .about-sec { padding: 80px 0; }
  .business-sec, .world-sec, .expertise-sec,
  .csr-sec, .facility-sec, .projects-sec, .faq-sec { padding: 0 0 80px; }
  .facility-sec { padding: 80px 0; }
  .partners-sec { padding: 80px 0; }
  .facility-row { gap: 40px; }
  .facility-row { grid-template-columns: 490px minmax(0, 1fr); }
  .facility-item { padding: 16px; gap: 16px; }
  .facility-item-icon img,
  .facility-item-icon svg { width: 48px; height: 48px; }
  .facility-item-copy h3 { font-size: 21px; }
  .project-photo img { height: 260px; }
  .project-copy { padding-left: 96px; }
  .project-badge { width: 76px; height: 76px; }
  .project-badge img { width: 38px; height: 38px; }
  .project-title { font-size: 23px; }
  .project-value-num { font-size: 26px; }
  .faq-q { padding: 26px 24px; }
  .faq-item.is-open .faq-q { padding: 32px 24px 12px; }
  .faq-a { padding: 0 24px 32px; }
  .partners-row { gap: 40px; }
  .partner-item { height: 80px; }
  .site-footer { padding-top: 60px; }
  .footer-top { gap: 28px; --fcol-gap: 28px; }
  .footer-col--intro { flex: 0 0 225px; max-width: 225px; }
  .footer-logo { width: 200px; }
  .footer-socials a { width: 50px; height: 50px; }
  .footer-links a,
  .footer-contact a,
  .footer-about { font-size: 16px; }

  /* Manufacturing facility */
  .mfinf-sec, .mfproc-sec, .mfeq-sec { padding: 70px 0; }
  .mfinf-card { flex: 0 0 calc((100% - 30px) / 2); max-width: calc((100% - 30px) / 2); padding: 34px; }
  .mfproc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mfov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Projects page */
  .pjgroup-sec { padding: 70px 0; }
  .pjgroup-sec .projects-row { margin-top: 40px; }

  /* ESG page */
  .esgroad-sec, .esgcsr-sec { padding: 70px 0; }
  .esgpil-sec { padding-top: 70px; }
  .esgroad-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esgcsr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Anchor the band to its right edge so the towers there stay in frame as
     object-fit: cover crops the artwork inward. */
  .cta-bg img { object-position: right; }

  /* Contact page */
  .contact-sec { padding: 70px 0; }
  .contact-row { gap: 48px; }
  .contact-form { padding: 38px; }
  .contact-map-inner { height: 420px; }

  /* Thank you + 404 */
  .err-code { font-size: 115px; letter-spacing: -5px; }

  /* Thank you + 404 */
  .err-sec { padding: 80px 0; }
  .ty-split { gap: 46px; }
  .ty-right { padding: 34px 30px; }
  .ty-mark { width: 76px; height: 76px; margin-bottom: 22px; }
  .ty-mark svg { width: 36px; height: 36px; }
  .ty-sec { padding: 100px 0; }

  /* Keep the longest link on one line as the panel narrows. */
  .ty-links a { padding: 13px 12px; gap: 8px; }
  .ty-links a svg { width: 16px; }

  /* About */
  .cv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-sec, .cm-sec { padding: 70px 0; }

  /* ESG */
  .esgintro-sec { padding: 70px 0; }
  .esgintro-row { gap: 44px; }
  .esgintro-figure { padding: 26px 22px; }
  .esgpillar-sec { padding: 65px 0; }
  .esgroad-sec, .esgpol-sec { padding: 70px 0; }
  .esgpillar-num { font-size: 42px; line-height: 127%; }
}
@media only screen and (max-width: 1199px) {
  .expdetail-sec { padding: 80px 0; }
  .expdetail-row { gap: 20px; }
  /* Stacked from here, so every division leads with its picture — the flip
     only makes sense while the columns sit side by side. */
  .division-row--flip .division-media { order: 0; }
  .division-row--flip .division-content { order: 0; }
  .division-media { margin-left: auto; margin-right: auto; width: 100%; }
  /* Stacked, so the flip no longer means anything — both variants take the
     same slab position as the unflipped rows. */
  .division-row--flip .division-slab { left: 10px; right: -10px; }
  .division-sec, .bizcap-sec { padding: 80px 0; }
  .division-row { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .division-row + .division-row { margin-top: 80px; }
  .division-media { aspect-ratio: 16 / 9; max-height: 62svh; }
  .bizcap-row { gap: 20px; }
  .gc-sec { padding: 80px 0; }
  .gc-row { gap: 20px; }
  .page-hero { padding: 90px 0; }
  .overview-sec, .mv-sec, .team-sec { padding: 80px 0; }
  .overview-row { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .overview-media { aspect-ratio: 16 / 9; max-height: 62svh; }
  .mv-row { gap: 20px; }
  .team-row { gap: 20px; }
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 16 / 9; max-height: 72svh; }
  .facility-media { aspect-ratio: 16 / 9; max-height: 62svh; }
  /* From here down the block sits inside the container instead of breaking
     out, so the tabs and copy line up with the heading above rather than
     running to the screen edge. */
  :root { --header-h: 80px; }

  .menu-toggle { display: block; }

  .header-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    transform: translateX(100%);
    width: 340px;
    max-width: 85%;
    height: 100vh;
    height: 100dvh;
    padding: 100px 30px 40px;
    background-color: var(--white);
    overflow-y: auto;
    transition: transform 0.35s ease;
    z-index: 999;
  }

  .header-nav.is-active { transform: translateX(0); }

  .header-nav .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    height: auto;
  }

  .header-nav .nav-list > li {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  }

  .header-nav .nav-list > li > a {
    display: block;
    width: 100%;
    padding: 16px 0;
    font-size: var(--fs-18);
  }

  /* Dropdown becomes an inline accordion */
  .header-nav .nav-list > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-nav .nav-list > li.menu-item-has-children > a::after {
    width: 15px;
    height: 15px;
    background-size: 9px 15px;
  }

  .header-nav .nav-list > li.submenu-open > a::after {
    transform: rotate(-90deg);
  }


  .header-nav .nav-list .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 10px 16px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition: none;
  }

  .header-nav .nav-list > li.submenu-open > .sub-menu { display: block; visibility: visible; }
  .header-nav .nav-list > li:hover > .sub-menu { opacity: 1; }
  .header-nav .nav-list .sub-menu li a { padding: 10px 0; font-size: 16px; }

  .header-cta--desktop { display: none; }

  .header-cta--mobile {
    display: inline-flex;
    width: 100%;
    margin-top: 30px;
    justify-content: center;
  }
  .hero-copy { gap: 6px; }
  .hero-content { width: 700px; gap: 24px; }
  .hero-title { font-size: 40px; line-height: 120%; }
  .hero-text { width: 560px; }
  .csr-wrap { flex-direction: column; gap: 40px; width: 90%; max-width: none; margin-left: auto; margin-right: auto; }
  .csr-left { width: 100%; }
  .csr-slab { display: none; }
  .csr-tabs { flex: 1 1 auto; max-width: 100%; flex-direction: row; flex-wrap: wrap; }
  .csr-tab { flex: 1 1 calc(50% - 7px); padding: 22px 18px; }
  .csr-tab.is-active { padding: 22px 18px; }
  .csr-tab span { font-size: 20px; }
  .csr-panels { width: 100%; }
  .csr-panel { gap: 40px; }
  .csr-panel-copy { flex: 1 1 auto; max-width: none; padding-top: 0; }
  .csr-panel-img { flex: 0 0 340px; max-width: 340px; padding-top: 0; }
  .csr-panel-img img { height: 380px; }
  .expertise-row { flex-wrap: wrap; }
  .expertise-card { flex: 0 0 calc(50% - 10px); height: 380px; }
  .expertise-card-title { --exp-shift: 292px; font-size: 24px; }
  .expertise-card-list li { font-size: 19px; }
  .world-pin { width: 20px; height: 26px; }
  .business-row { flex-wrap: wrap; }
  .business-card { flex: 0 0 calc(50% - 8px); height: 400px; }
  .business-card-copy { --biz-shift: 224px; }
  .about-watermark { display: none; }
  .about-row { flex-direction: column; align-items: stretch; gap: 50px; }
  .about-media { flex: 0 0 auto; max-width: 100%; min-height: 0; }
  .about-img img { width: 100%; height: 420px; }
  .about-strip { position: static; width: 100%; max-width: 100%; margin-top: -60px; padding: 26px; }
  .about-strip-inner { column-gap: 40px; }
  .about-content { flex: 0 0 auto; max-width: 100%; }
  .about-content .sec-title { width: 100%; }
  .sec-title { font-size: 32px; line-height: 131.25%; }
  .sec-head--center { max-width: 100%; }




  .facility-row { gap: 50px; }
  .facility-row { grid-template-columns: minmax(0, 1fr); }

  .projects-row { flex-wrap: wrap; }
  .project-card { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }

  .partners-row { flex-wrap: wrap; gap: 40px 50px; }
  .partner-item { flex: 0 0 calc(25% - 38px); height: auto; text-align: center; }
  .partner-item img { height: 80px; margin: 0 auto; }
  .footer-top { flex-wrap: wrap; gap: 40px 50px; }
  .footer-col--intro { flex: 0 0 100%; max-width: 420px; }
  .footer-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .footer-col--intro { grid-column: 1 / -1; }
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4),
  .footer-col--contact { flex: none; min-width: 0; max-width: none; }

  /* Manufacturing facility */
  .mfinf-sec, .mfproc-sec, .mfeq-sec { padding: 60px 0; }
  .mfinf-row, .mfproc-row { margin-top: 40px; }
  .mfeq-wrap { margin-top: 40px; }
  .mfcap-list { gap: 20px; }
  .mfcap-item { padding: 22px 20px; }

  /* Projects page — two to a row from here down. */
  .pjgroup-sec { padding: 60px 0; }
  .pjgroup-sec .project-card { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }

  /* Two-up cards are wide enough for the pair to sit side by side again. */
  .project-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ESG page */
  .esgroad-sec, .esgcsr-sec { padding: 60px 0; }
  .esgpil-sec { padding-top: 60px; }
  .esgroad-row, .esgcsr-row { margin-top: 40px; }
  .esgcom-list { gap: 14px; }

  /* Contact page — two columns leave the form too narrow here (the phone
     number field starts clipping), so details go above the form from 1199. */
  .contact-sec { padding: 60px 0; }
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact-list { gap: 22px; margin-top: 32px; }
  .contact-map-inner { height: 380px; }

  /* Thank you + 404 */

  /* Thank you + 404 */
  .err-sec { padding: 70px 0; }
  .err-actions { margin-top: 36px; }
  .ty-split { gap: 36px; }
  .ty-direct { margin-top: 28px; }
  .ty-actions { margin-top: 28px; }
  .ty-sec { padding: 100px 0; }

  /* About */
  .cm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-row, .cm-row { margin-top: 40px; }

  /* ESG */
  .esgpillar-head { gap: 20px; padding-bottom: 28px; }
  .esgpillar-row { margin-top: 32px; gap: 20px; }
  .esgpillar-targets { padding: 24px 26px; }
  .esgroad-wrap { margin-top: 40px; }
  .esgpol-row { margin-top: 40px; gap: 16px 20px; }
}
@media only screen and (max-width: 1023px) {
  .expdetail-row { gap: 20px; }
  .division-row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .division-media { aspect-ratio: 16 / 10; max-height: 60svh; }
  .bizcap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .gc-row { gap: 20px; }
  .gc-card-logo { height: 130px; }
  /* Below the desktop layout the overview stacks, so the picture stops
     being a tall column and takes a landscape ratio instead. */
  .overview-row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .overview-media { aspect-ratio: 16 / 10; max-height: 60svh; }
  .team-row { gap: 20px; }
  /* Below the desktop layout the hero stops being a full screen; a ratio
     keeps it proportional to the width instead. */
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 16 / 10; max-height: 70svh; }
  .facility-media { aspect-ratio: 16 / 10; max-height: 60svh; }
  .header-logo, .header-logo img, .header-logo svg { width: 155px; }
  .header-logo img, .header-logo svg { height: 41px; }
  .hero-content { width: 640px; }
  .hero-title { font-size: 36px; line-height: 122.22%; }
  .business-card { height: 370px; }
  .business-card-copy { --biz-shift: 200px; }
  .sec-title { font-size: 30px; line-height: 133.33%; }
  .partner-item img { height: 70px; }
  .footer-top { gap: 36px 40px; }
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4),
  .footer-col--contact { flex: 0 0 calc(25% - 30px); }
}
@media only screen and (max-width: 991px) {
  .expdetail-sec { padding: 70px 0; }
  .expdetail-card { flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
  .division-sec, .bizcap-sec { padding: 70px 0; }
  .division-row + .division-row { margin-top: 70px; }
  .division-media { aspect-ratio: 16 / 11; max-height: 60svh; }
  .gc-sec { padding: 70px 0; }
  .gc-card { flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
  /* Everything below this keeps the same banner height — no further
     shrinking, so the hero stays consistent down to 320px. */
  .page-hero { padding: 80px 0; }
  .overview-sec, .mv-sec, .team-sec { padding: 70px 0; }
  .overview-media { aspect-ratio: 16 / 11; max-height: 60svh; }
  .sec-head--left::after { margin: 14px 0; }
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 16 / 11; max-height: 70svh; }
  .facility-media { aspect-ratio: 16 / 10; max-height: 60svh; }
  :root { --header-h: 74px; }
  .header-nav { padding-top: 94px; }
  .header-logo, .header-logo img, .header-logo svg { width: 148px; }
  .header-logo img, .header-logo svg { height: 39px; }
  .home-page { padding-top: 74px; }
  .hero-content { width: 600px; }
  .hero-title { font-size: 34px; line-height: 123.53%; }
  .hero-text { width: 100%; }

  /* --- csr-tab accordion (mobile) ---------------------------------------
     Four identical bars gave no sign which one was selected, or that they
     were tappable at all. Below 767 the block becomes an accordion: the tab
     stack and the panel stack share one column, and matching order values
     drop each panel directly beneath its own tab, so tapping opens the
     content in place instead of changing something off-screen.
     Tabs and panels keep their existing markup and JS. */
  .csr-wrap { display: flex; flex-direction: column; gap: 0; }
  .csr-left { display: contents; }
  .csr-slab { display: none; }

  .csr-tabs { display: contents; }
  .csr-panels { display: contents; }

  /* Interleave: tab 0, panel 0, tab 1, panel 1 … */
  .csr-tab:nth-of-type(1) { order: 1; }
  .csr-panel:nth-of-type(1) { order: 2; }
  .csr-tab:nth-of-type(2) { order: 3; }
  .csr-panel:nth-of-type(2) { order: 4; }
  .csr-tab:nth-of-type(3) { order: 5; }
  .csr-panel:nth-of-type(3) { order: 6; }
  .csr-tab:nth-of-type(4) { order: 7; }
  .csr-panel:nth-of-type(4) { order: 8; }

  /* The tab reads as a control: compact, with a chevron and an open state. */
  /* The 1023 block makes tabs 2-across; under display:contents that basis
     would measure against the wrap column, so reset it to full width. */
  .csr-tab {
    flex: 0 0 auto;
    width: 100%;
    padding: 18px 46px 18px 18px;
    margin-top: 10px;
    border-left: 4px solid transparent;
    transition: border-color 0.25s ease;
  }

  .csr-tab.is-active {
    padding: 18px 46px 18px 18px;
    border-left-color: var(--red);
  }

  .csr-tab::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    z-index: 2;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .csr-tab.is-active::before {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  .csr-tab.is-active::after { background-color: rgba(3, 34, 88, 0.62); }

  .csr-tab span { font-size: var(--fs-20); }

  /* The open panel sits under its tab, indented to match the red bar. */
  .csr-panel.is-active {
    flex-direction: column;
    gap: 20px;
    padding: 22px 18px 26px;
    border-left: 4px solid var(--red);
    background-color: #f4f5fa;
  }

  /* Stacked: the picture leads, heading and copy follow beneath it. */
  .csr-panel-img { order: 0; flex: 0 0 auto; max-width: 100%; width: 100%; }
  .csr-panel-copy { order: 1; }
  .csr-panel-img img { height: 300px; }
  .csr-panel-copy h3 { margin-bottom: 4px; }
  .expertise-card { height: 340px; }
  .expertise-card-title { --exp-shift: 256px; }
  .world-pin { width: 17px; height: 22px; }
  .business-sec { padding: 60px 0; }
  .business-card { height: 340px; }
  .business-card-copy { --biz-shift: 178px; }
  .about-img img { height: 380px; }
  .about-strip { padding: 22px; }
  .about-strip-inner { column-gap: 28px; }
  .sec-title { font-size: 28px; line-height: 135.71%; }
  .about-sec { padding: 60px 0; }
  .business-sec, .world-sec, .expertise-sec,
  .csr-sec, .facility-sec, .projects-sec, .faq-sec { padding: 0 0 60px; }
  .facility-sec { padding: 60px 0; }
  .partners-sec { padding: 60px 0; }



  .facility-grid { grid-template-columns: minmax(0, 1fr); }

  .projects-bar { flex-wrap: wrap; gap: 14px; }
  .projects-bar::before { display: none; }
  .projects-tabs { flex: 1 1 auto; justify-content: flex-start; }
  .projects-viewall { margin-left: auto; }

  .partner-item { flex: 0 0 calc(50% - 25px); }
  .site-footer { padding-top: 50px; }
  .footer-top { gap: 34px 30px; }
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4),
  .footer-col--contact { flex: 0 0 calc(50% - 15px); }
  .footer-bottom { margin-top: 36px; }

  /* Manufacturing facility */
  .mfinf-sec, .mfproc-sec, .mfeq-sec { padding: 50px 0; }
  .mfinf-card { padding: 30px; }
  .mfproc-card { padding: 30px 24px; }
  .mfeq-table th, .mfeq-table td { padding: 18px 20px; }

  /* Projects page */
  .pjgroup-sec { padding: 50px 0; }

  /* ESG page */
  .esgroad-sec, .esgcsr-sec { padding: 50px 0; }
  .esgpil-sec { padding-top: 50px; }
  .esgroad-step { padding: 30px 24px; }
  .esgcsr-photo img { height: 190px; }

  /* Contact page */
  .contact-sec { padding: 50px 0; }
  .contact-form { padding: 34px; }
  .contact-map-inner { height: 340px; }

  /* Thank you + 404 — three steps become one column of two, then one. */
  .err-code { font-size: 100px; letter-spacing: -4px; }

  /* Thank you — the split stacks, message above the panel. A fixed viewport
     height stops making sense once it does, so the section sizes to content. */
  .err-sec { padding: 60px 0; min-height: 0; }
  /* The split stacks here, so the fixed viewport height goes — but the
     header is still fixed, so its clearance has to stay. */
  .ty-sec { min-height: 0; padding: 60px 0; }
  .ty-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ty-mark { width: 72px; height: 72px; }
  .ty-mark svg { width: 34px; height: 34px; }

  /* About */
  .cv-sec, .cm-sec { padding: 60px 0; }

  /* ESG */
  .esgintro-sec { padding: 60px 0; }
  .esgintro-row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .esgpillar-sec { padding: 55px 0; }
  .esgroad-sec, .esgpol-sec { padding: 60px 0; }
  .esgpillar-row { grid-template-columns: minmax(0, 1fr); }
  .esgpol-row { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 800px) {
  .header-inner { padding: 0 16px; }
  .header-logo, .header-logo img, .header-logo svg { width: 142px; }
  .header-logo img, .header-logo svg { height: 37px; }
  .hero-content { width: 560px; }
  .hero-title { font-size: 32px; line-height: 125%; }
  .business-card { flex: 0 0 100%; height: 380px; }
  .business-card-copy { --biz-shift: 206px; }
  .project-card { flex: 0 0 100%; max-width: 100%; }
  .footer-col--intro { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media only screen and (max-width: 767px) {
  .expdetail-sec { padding: 60px 0; }
  /* One per row here; the cards carry their full content so they need the
     width, and height goes auto rather than a fixed band. */
  .expdetail-card { flex: 0 0 100%; max-width: 100%; }
  .expdetail-row { gap: 20px; margin-top: 40px; }
  /* Stacked from here: the picture always leads, whichever side it took
     on the desktop layout. */
  .division-sec, .bizcap-sec { padding: 60px 0; }
  .division-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .division-row + .division-row { margin-top: 60px; }
  .division-media { aspect-ratio: 4 / 3; max-height: 55svh; }
  .division-content { gap: 24px; }
  .bizcap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
  .mv-row { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .gc-sec { padding: 60px 0; }
  .gc-row { gap: 20px; margin-top: 40px; }
  .gc-card { flex: 0 0 100%; max-width: 100%; }
  .gc-card-logo { height: 120px; padding: 24px; }
  .gc-card-body { padding: 24px; }
  .overview-sec, .mv-sec, .team-sec { padding: 60px 0; }
  .overview-row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .overview-media { aspect-ratio: 4 / 3; max-height: 55svh; }
  .overview-content { gap: 24px; }
  .team-card { flex: 0 0 100%; max-width: 100%; }
  .mv-card { padding: 34px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-col--intro { grid-column: auto; }
  .footer-col--links:nth-of-type(3) { margin-top: calc(-1 * (var(--fcol-gap, 30px) + 30px)); }
  .project-card { flex: 0 0 100%; max-width: 100%; }
  .sec-head--left::after { margin: 14px 0; }
  /* Touch devices never get :hover, so the card shows its final state up
     front: copy pinned to the bottom with the arrow beside it on one row,
     rather than the arrow dropping underneath. */
  .business-card-body { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .business-card-copy { transform: none; flex: 1 1 auto; min-width: 0; align-self: flex-end; }
  .business-card-icon { position: static; flex: 0 0 auto; align-self: flex-end; }
  .business-card-btn { display: none; }
  .business-card-desc { display: none; }
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 1 / 1; max-height: 68svh; }
  .facility-media { aspect-ratio: 4 / 3; max-height: 55svh; }
  :root { --header-h: 70px; --fs-50: 38px; }
  .header-nav { padding-top: 90px; width: 300px; }
  .header-logo, .header-logo img, .header-logo svg { width: 132px; }
  .header-logo img, .header-logo svg { height: 35px; }
  .menu-toggle { width: 40px; height: 40px; }
  .menu-toggle span:nth-child(1) { top: 13px; }
  .menu-toggle span:nth-child(2) { top: 19px; }
  .menu-toggle span:nth-child(3) { top: 25px; }
  .menu-toggle.is-active span:nth-child(1),
  .menu-toggle.is-active span:nth-child(3) { top: 19px; }
  .hero-btn { padding: 15px 26px; }
  .home-page { padding-top: 70px; }
  .hero-content { width: 92%; gap: 20px; }
  .hero-title { font-size: 30px; line-height: 126.67%; }
  .btn-red, .btn-blue { padding: 16px 26px; }

  .csr-tab { flex: 1 1 100%; padding: 18px 16px; }
  .csr-tab.is-active { padding: 18px 16px; }
  .csr-tab span { font-size: 18px; }
  .csr-panel-copy h3 { font-size: 22px; }
  .csr-panel-img img { height: 300px; }
  .expertise-card { flex: 0 0 100%; height: 340px; }
  .expertise-card-title { --exp-shift: 252px; font-size: 22px; }
  .world-pin { width: 14px; height: 18px; }
  .business-sec { padding: 50px 0; }
  .business-row { margin-top: 34px; }
  .business-card { height: 340px; }
  .business-card-copy { --biz-shift: 180px; }
  .business-card-title { font-size: 21px; }
  .about-img img { height: 320px; }
  .about-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .about-strip-inner { column-gap: 24px; }
  .sec-title { font-size: 28px; line-height: 130%; }
  .sec-eyebrow { font-size: 16px; }
  .sec-sub { font-size: 16px; }

  .about-sec { padding: 50px 0; }
  .business-sec, .world-sec, .expertise-sec,
  .csr-sec, .facility-sec, .projects-sec, .faq-sec,
  .partners-sec { padding: 50px 0; }

  .project-photo img { height: 230px; }
  .partner-item img { height: 60px; }
  .partners-row { gap: 30px; }

  .faq-q { padding: 22px 20px; }
  .faq-item.is-open .faq-q { padding: 26px 20px 10px; }
  .faq-a { padding: 0 20px 26px; }
  .faq-q span { font-size: 18px; }
  .cta-sec { padding: 60px 0; min-height: 0; }
  .site-footer { padding-top: 45px; }
  .footer-top { gap: 30px 24px; --fcol-gap: 30px; }
  .footer-logo { width: 190px; }
  .footer-about { margin-top: 18px; }
  .footer-socials { margin-top: 18px; }
  .footer-col-title { font-size: 18px; margin-bottom: 14px; }
  .footer-bottom { margin-top: 30px; text-align: left; }

  /* Manufacturing facility */
  .mfinf-sec, .mfproc-sec, .mfeq-sec { padding: 40px 0; }
  .mfinf-row, .mfproc-row { margin-top: 30px; gap: 20px; }
  .mfinf-card { flex: 0 0 100%; max-width: 100%; }
  .mfproc-row { grid-template-columns: minmax(0, 1fr); }
  .mfcap-list { grid-template-columns: minmax(0, 1fr); }

  /* The table restacks into one card per row, each cell labelled. */
  .mfeq-wrap { margin-top: 30px; overflow-x: visible; }
  .mfeq-table, .mfeq-table tbody, .mfeq-table tr, .mfeq-table td { display: block; width: 100%; }
  .mfeq-table thead { display: none; }
  .mfeq-table tr {
    margin-bottom: 20px;
    padding: 22px 20px;
    background-color: #f8f9fc;
    border-top: 4px solid var(--red);
  }
  .mfeq-table tbody tr:nth-child(even) { background-color: #f8f9fc; }
  .mfeq-table td { padding: 0; border-bottom: 0; }
  .mfeq-table td + td { margin-top: 12px; }
  /* Same as the roadmap: the label recedes, the value carries. */
  .mfeq-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-16);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--grey);
  }
  /* The equipment name is its own heading — no need to label it twice. */
  .mfeq-table td:first-child::before { display: none; }

  /* Projects page — one card per row. */
  .pjgroup-sec { padding: 40px 0; }
  .pjgroup-sec .projects-row { margin-top: 30px; }
  .pjgroup-sec .project-card { flex: 0 0 100%; max-width: 100%; }

  /* ESG page — single column from here down. */
  .esgroad-sec, .esgcsr-sec { padding: 40px 0; }
  .esgpil-sec { padding-top: 40px; }
  .esgroad-row, .esgcsr-row { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 30px; }
  .esgcsr-photo img { height: 200px; }


  /* Contact page */
  .contact-sec { padding: 40px 0; }
  .contact-form { padding: 28px 22px; }
  .contact-icon { flex: 0 0 46px; width: 46px; height: 46px; }
  .contact-map-inner { height: 300px; }

  /* The First/Last name pair is too tight side by side on a phone; Gravity
     lays it out as a grid row, so make each half take the full width. */
  .contact-form .gform_wrapper .ginput_container_name > span { flex: 0 0 100%; max-width: 100%; }

  /* Thank you + 404 */
  .err-code { font-size: 84px; letter-spacing: -3px; }
  .err-links { margin-top: 36px; padding-top: 24px; }

  /* Thank you + 404 */
  .err-sec { padding: 50px 0; }
  .ty-sec { padding: 50px 0; }
  .ty-right { padding: 30px 24px; }
  .ty-direct { padding: 20px 22px; }

  /* Two columns of link text get cramped on a phone. */
  .ty-links ul { grid-template-columns: minmax(0, 1fr); }

  /* About — one card per row from here. */
  .cv-row, .cm-row { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 30px; }
  .cv-sec, .cm-sec { padding: 50px 0; }
  .cv-card, .cm-card { padding: 30px 24px; }

  /* ESG */
  .esgintro-sec { padding: 50px 0; }
  .esgpillar-sec { padding: 45px 0; }
  .esgroad-sec, .esgpol-sec { padding: 50px 0; }
  .esgpillar-num { font-size: 34px; line-height: 127%; }
  .esgpillar-card { padding: 28px 24px; }

  /* The roadmap table restacks into one card per commitment. */
  .esgroad-wrap { overflow-x: visible; margin-top: 30px; }
  .esgroad-table, .esgroad-table tbody, .esgroad-table tr, .esgroad-table td { display: block; width: 100%; }
  .esgroad-table { border: 0; }
  .esgroad-table thead { display: none; }
  .esgroad-table tr {
    margin-bottom: 16px;
    padding: 22px 20px;
    background-color: #f8f9fc;
    border-left: 4px solid var(--red);
  }
  .esgroad-table tbody tr:nth-child(even) { background-color: #f8f9fc; }
  .esgroad-table td { padding: 0; border-bottom: 0; }
  .esgroad-table td + td { margin-top: 10px; }
  /* Grey, so the label reads as a label and the value beneath it carries. */
  .esgroad-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-16);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--grey);
  }
  .esgroad-target { white-space: normal; }
}
@media only screen and (max-width: 575px) {
  .expdetail-sec { padding: 50px 0; }
  .expdetail-card { padding: 30px; }
  .division-sec, .bizcap-sec { padding: 50px 0; }
  .division-row + .division-row { margin-top: 50px; }
  .division-content { gap: 20px; }
  .gc-sec { padding: 50px 0; }
  .gc-row { gap: 20px; margin-top: 30px; }
  .gc-card-logo { height: 120px; }
  .overview-sec, .mv-sec, .team-sec { padding: 50px 0; }
  .team-row { gap: 20px; margin-top: 30px; }
  .mv-card { padding: 30px; }
  .projects-tabs { order: 2; flex: 1 1 100%; justify-content: center; }
  .projects-viewall { order: 1; margin-left: auto; }
  /* Column 3 is the headless continuation of COMPANY. Once the columns
     stack it reads as a detached list with a gap above, so pull it flush
     under column 2 to make one continuous menu. */
  .footer-col--links:nth-of-type(3) { margin-top: calc(-1 * (var(--fcol-gap, 30px) + 30px)); }
  .about-feat { gap: 12px; }
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 66svh; }
  .facility-media { aspect-ratio: 4 / 3; max-height: 55svh; }
  .about-img img { height: 240px; }
  .header-logo, .header-logo img, .header-logo svg { width: 122px; }
  .header-logo img, .header-logo svg { height: 32px; }
  .header-nav { width: 280px; }
  .header-nav .nav-list > li > a { padding: 14px 0; }
  
  .hero-title { font-size: 27px; line-height: 125.93%; letter-spacing: -0.3px; }
  .hero-text { line-height: 150%; }
  .csr-panel-img img { height: 260px; }
  .expertise-card { height: 310px; }
  .expertise-card-title { --exp-shift: 226px; }
  .world-map { margin-top: 34px; }
  .world-pin { width: 12px; height: 16px; }
  .business-card { height: 320px; }
  .business-card-copy { --biz-shift: 166px; }
  .about-img img { height: 260px; }
  .about-strip { margin-top: -40px; padding: 20px; }
  .sec-title { font-size: 26px; line-height: 130.77%; }
  .facility-item-copy h3 { font-size: 19px; }
  .project-copy { padding-left: 0; padding-top: 50px; min-height: 0; }
  .project-badge { width: 66px; height: 66px; top: -20px; }
  .project-badge img { width: 32px; height: 32px; }
  .project-title { font-size: 21px; }
  .project-value-num { font-size: 23px; }
  .project-foot { flex-wrap: wrap; }
  .faq-icon { width: 22px; height: 22px; }
  .footer-top { gap: 28px; --fcol-gap: 28px; }
  .footer-col--links:nth-of-type(2),
  .footer-col--links:nth-of-type(3),
  .footer-col--links:nth-of-type(4),
  .footer-col--contact { flex: 0 0 100%; }
  .footer-socials a { width: 48px; height: 48px; }

  /* Manufacturing facility */
  .mfinf-sec, .mfproc-sec, .mfeq-sec { padding: 34px 0; }
  .mfinf-card { padding: 26px 22px; }
  .mfproc-card { padding: 26px 22px; }
  .mfov-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  /* Projects page */
  .pjgroup-sec { padding: 34px 0; }

  .project-meta { grid-template-columns: minmax(0, 1fr); }
  .project-status { right: 12px; top: 12px; padding: 6px 13px; }

  /* ESG page */
  .esgroad-sec, .esgcsr-sec { padding: 34px 0; }
  .esgpil-sec { padding-top: 34px; }
  .esgroad-step { padding: 26px 22px; }
  .esgcsr-copy { padding: 22px 20px; }
  .esgcom-item { padding-left: 16px; }
  .esgcsr-photo img { height: 180px; }

  /* Contact page */
  .contact-sec { padding: 34px 0; }
  .contact-form { padding: 24px 18px; }
  .contact-list { gap: 18px; }
  .contact-item { gap: 12px; }
  .contact-map-inner { height: 260px; }
  .contact-form .gform_wrapper .gform_button { width: 100%; justify-content: center; padding: 15px 24px; }

  /* Thank you + 404 — buttons go full width so they are easy to hit. */
  .err-code { font-size: 68px; letter-spacing: -2px; }
  .err-links ul { gap: 10px 20px; }

  .err-actions .btn-blue, .err-actions .btn-red { justify-content: center; width: 100%; }

  /* Thank you + 404 */
  .err-sec { padding: 40px 0; }
  .ty-sec { padding: 40px 0; }
  .ty-mark { width: 66px; height: 66px; }
  .ty-mark svg { width: 30px; height: 30px; }
  .ty-right { padding: 26px 20px; }
  .ty-direct-list { gap: 12px 20px; }
  /* The email is wider than the card here, so the pair stacks and the
     address drops to the 16px floor — enough to keep it on one line. */
  .ty-direct-list { flex-direction: column; align-items: center; }
  .ty-direct-list li { max-width: 100%; }
  .ty-direct-list a { font-size: var(--fs-16); overflow-wrap: anywhere; }
  .ty-steps { gap: 20px; }
  .ty-step { gap: 12px; }

  .ty-actions { flex-direction: column; width: 100%; gap: 12px; }
  .ty-actions .btn-blue { justify-content: center; width: 100%; }

  /* About */
  .cv-sec, .cm-sec { padding: 40px 0; }
  .cv-card, .cm-card { padding: 26px 20px; }

  /* ESG */
  .esgintro-sec { padding: 40px 0; }
  .esgintro-figures { grid-template-columns: minmax(0, 1fr); }
  .esgintro-figure { padding: 22px 20px; }
  .esgpillar-sec { padding: 38px 0; }
  .esgroad-sec, .esgpol-sec { padding: 40px 0; }
  .esgpillar-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .esgpillar-targets { padding: 22px 20px; }
  .esgpillar-targets li { padding-left: 24px; }
  .esgpol-item { padding: 22px 20px; gap: 12px; }
}
@media only screen and (max-width: 480px) {
  .expdetail-sec { padding: 40px 0; }
  .expdetail-card { padding: 28px; gap: 14px; }
  .division-sec, .bizcap-sec { padding: 40px 0; }
  .division-row + .division-row { margin-top: 40px; }
  .bizcap-item { padding: 28px 20px; }
  .bizcap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
  .gc-sec { padding: 40px 0; }
  .gc-card-logo { height: 110px; padding: 22px; }
  .gc-card-body { padding: 22px; }
  .page-hero-copy { gap: 14px; }
  .overview-sec, .mv-sec, .team-sec { padding: 40px 0; }
  .mv-card { padding: 28px; gap: 16px; }
  .mv-card-icon { width: 66px; height: 66px; }
  .mv-card-icon img, .mv-card-icon svg { width: 34px; height: 34px; }
  .team-card-body { padding: 22px; }
  .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* 3:4 was taller than the content needed at this width. */
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 66svh; }
  .about-strip-inner { row-gap: 20px; }
  .about-feat { gap: 10px; }
  .cta-sec { padding: 36px 0; }
  .facility-media { aspect-ratio: 4 / 3; max-height: 50svh; }
  .about-img img { height: 200px; }
  :root { --header-h: 64px; }
  .header-inner { padding: 0 14px; }
  .header-logo, .header-logo img, .header-logo svg { width: 112px; }
  .header-logo img, .header-logo svg { height: 30px; }
  .header-nav { padding-top: 84px; width: 100%; max-width: 100%; }
  .hero-copy { gap: 5px; }
  .hero-btn { padding: 13px 22px; }
  .home-page { padding-top: 64px; }
  .hero-content { width: 100%; padding: 0 16px; gap: 18px; }
  .hero-title { font-size: 24px; line-height: 129.17%; }
  .btn-red, .btn-blue { padding: 14px 22px; }
  .btn-red .btn-arrow, .btn-blue .btn-arrow { width: 15px; }

  .csr-wrap { gap: 28px; }
  .csr-tab { padding: 15px 14px; }
  .csr-tab.is-active { padding: 15px 14px; }
  .csr-tab span { font-size: 16px; }
  .csr-panel-copy h3 { font-size: 20px; }
  .csr-panel-img img { height: 220px; }
  .expertise-card { height: 290px; }
  .expertise-card-title { --exp-shift: 208px; font-size: 20px; }
  .expertise-card-body { padding: 20px; }
  .expertise-card-list { margin-top: 16px; padding-left: 22px; }
  .expertise-card-list li { font-size: 16px; }
  .expertise-card-list li + li { margin-top: 10px; }
  .world-map { margin-top: 28px; }
  .world-pin { width: 10px; height: 13px; }
  .business-sec { padding: 40px 0; }
  .business-card { height: 300px; }
  .business-card-copy { --biz-shift: 150px; }
  .business-card-body { padding: 20px; }
  .business-card-icon, .business-card-btn { left: 20px; bottom: 20px; }
  .business-card-title { font-size: 19px; line-height: 135%; }
  .business-card-icon { width: 40px; height: 40px; }
  .business-card-btn { padding: 13px 20px; }
  .about-img img { height: 220px; }
  .about-strip { padding: 18px; }
  .about-strip-inner { column-gap: 16px; }
  .about-feat-icon img, .about-feat-icon svg { width: 30px; height: 30px; }
  .sec-title { font-size: 24px; line-height: 133.33%; }

  .about-sec { padding: 40px 0; }
  .business-sec, .world-sec, .expertise-sec,
  .csr-sec, .facility-sec, .projects-sec, .faq-sec,
  .partners-sec { padding: 40px 0; }

  .facility-item-copy h3 { font-size: 18px; }
  .facility-item-copy p { font-size: 16px; }
  .facility-item-icon img,
  .facility-item-icon svg { width: 42px; height: 42px; }
  .project-photo img { height: 200px; }
  .project-title { font-size: 19px; }
  .project-value-num { font-size: 21px; }
  .project-cat, .project-loc, .project-value-label { font-size: 16px; }
  .proj-tab { height: 44px; padding: 0 18px; font-size: 16px; }
  .projects-viewall { font-size: 16px; }
  .faq-q { padding: 18px 16px; }
  .faq-item.is-open .faq-q { padding: 22px 16px 8px; }
  .faq-a { padding: 0 16px 22px; }
  .faq-q span { font-size: 16px; }
  .partner-item img { height: 52px; }
  .partners-row { gap: 24px; }
  .cta-sec { padding: 45px 0; }
  .site-footer { padding: 40px 0 20px; }
  .footer-logo { width: 170px; }
  .footer-col-title { font-size: 17px; }
  .footer-about,
  .footer-links a,
  .footer-contact a,
  .footer-links, .footer-contact { gap: 8px; }
}
@media only screen and (max-width: 389px) {
  .header-logo, .header-logo img, .header-logo svg { width: 104px; }
  .header-logo img, .header-logo svg { height: 27px; }
  .header-nav { padding: 80px 20px 30px; }
  .header-cta--mobile { height: 46px; padding: 0 20px; font-size: 16px; }
  .hero-title { font-size: 22px; line-height: 131.82%; }
  .sec-title { font-size: 23px; line-height: 134.78%; }
  .project-photo img { height: 185px; }
  .project-title { font-size: 18px; }
  .partner-item { flex: 0 0 100%; }
  .footer-logo { width: 160px; }
  .footer-col-title { font-size: 16px; }
  .footer-socials a { width: 46px; height: 46px; }
}
@media only screen and (max-width: 374px) {
  .expdetail-sec { padding: 34px 0; }
  .expdetail-card { padding: 24px; gap: 12px; }
  .division-sec, .bizcap-sec { padding: 34px 0; }
  .division-row + .division-row { margin-top: 34px; }
  .bizcap-item { padding: 24px 18px; }
  .bizcap-row { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .gc-sec { padding: 34px 0; }
  .gc-card-logo { height: 100px; padding: 20px; }
  .gc-card-body { padding: 20px; }
  .page-hero-copy { gap: 12px; }
  .overview-sec, .mv-sec, .team-sec { padding: 34px 0; }
  .mv-card { padding: 24px; gap: 14px; }
  .mv-card-icon { width: 60px; height: 60px; }
  .mv-card-icon img, .mv-card-icon svg { width: 30px; height: 30px; }
  .team-card-body { padding: 20px; }
  .overview-stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .project-foot { flex-wrap: wrap; gap: 12px; }
  .project-btn { flex: 0 0 auto; }
  /* One column of four stacked features made the strip 362px tall, which
     was most of the section height. Two columns keeps it compact. */
  .about-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; column-gap: 12px; }
  .about-feat { gap: 8px; }
  .cta-sec { padding: 30px 0; }
  /* Images scale with the viewport on phones so a section is never a
     screenful of picture before any text appears. */
  .hero-sec { height: auto; min-height: 0; aspect-ratio: 3 / 4; max-height: 64svh; }
  .cta-sec { min-height: 0; }
  .facility-media { aspect-ratio: 4 / 3; max-height: 50svh; }
  :root { --header-h: 60px; }
  .header-inner { padding: 0 12px; }
  .header-logo, .header-logo img, .header-logo svg { width: 94px; }
  .header-logo img, .header-logo svg { height: 25px; }
  .menu-toggle { width: 36px; height: 36px; }
  .menu-toggle span { width: 22px; margin-left: -11px; }
  .menu-toggle span:nth-child(1) { top: 11px; }
  .menu-toggle span:nth-child(2) { top: 17px; }
  .menu-toggle span:nth-child(3) { top: 23px; }
  .menu-toggle.is-active span:nth-child(1),
  .menu-toggle.is-active span:nth-child(3) { top: 17px; }
  .header-nav { padding: 74px 16px 24px; }
  .hero-btn { padding: 11px 18px; }
  .home-page { padding-top: 60px; }
  .hero-content { padding: 0 12px; gap: 16px; }
  .hero-title { font-size: 20px; line-height: 130%; }
  .btn-red, .btn-blue { padding: 12px 18px; gap: 8px; }

  .csr-panel-copy h3 { font-size: 18px; }
  .csr-panel-img img { height: 190px; }
  .expertise-card { height: 265px; }
  .expertise-card-title { --exp-shift: 188px; font-size: 18px; }
  .expertise-card-body { padding: 16px; }
  .world-pin { width: 8px; height: 11px; }
  .business-sec { padding: 34px 0; }
  .business-card { height: 270px; }
  .business-card-copy { --biz-shift: 130px; }
  .business-card-body { padding: 16px; }
  .business-card-icon, .business-card-btn { left: 16px; bottom: 16px; }
  .business-card-title { font-size: 17px; }
  .about-img img { height: 190px; }
  .about-strip { margin-top: -30px; padding: 14px; }
  .sec-title { font-size: 22px; line-height: 136.36%; }

  .about-sec { padding: 34px 0; }
  .business-sec, .world-sec, .expertise-sec,
  .csr-sec, .facility-sec, .projects-sec, .faq-sec,
  .partners-sec { padding: 34px 0; }

  .facility-item { padding: 14px; gap: 12px; }
  .facility-item-icon img,
  .facility-item-icon svg { width: 36px; height: 36px; }
  .facility-item-copy h3 { font-size: 16px; }
  .project-photo img { height: 165px; }
  .project-body { padding: 16px; }
  .project-badge { width: 58px; height: 58px; }
  .project-badge img { width: 28px; height: 28px; }
  .project-copy { padding-top: 44px; }
  .project-title { font-size: 17px; }
  .project-value-num { font-size: 19px; }
  .project-btn { padding: 6px 12px; font-size: 16px; }
  .proj-tab { height: auto; min-height: 38px; padding: 9px 14px; }
  .projects-tabs { flex-wrap: wrap; justify-content: center; }
  .faq-q { padding: 16px 14px; }
  .faq-item.is-open .faq-q { padding: 18px 14px 6px; }
  .faq-a { padding: 0 14px 18px; }
  .faq-icon { width: 20px; height: 20px; }
  .partner-item img { height: 46px; }
  .cta-sec { padding: 36px 0; }
  .site-footer { padding: 34px 0 18px; }
  .footer-logo { width: 145px; }
  .footer-top { gap: 24px; }
  .footer-about,
  .footer-links a,
  .footer-contact a,
  .footer-socials { gap: 8px; }
  .footer-socials a { width: 44px; height: 44px; }
  .footer-contact-icon { width: 18px; height: 18px; }

  /* 16px is the smallest the address may go, so the room comes from the card
     rather than the type: tighter padding, and the icon drops out on the
     email row (the label makes it obvious without one). */
  .ty-direct { padding: 18px 12px; }
  .ty-direct-list li:first-child .ty-direct-icon { display: none; }
  .ty-direct-list li { gap: 8px; }

}
/* ==========================================================================
   CAREERS — responsive

   Appended as its own block rather than threaded into the existing media
   queries, so the careers rules stay reviewable in one place. Widths match
   the breakpoints already used across the site.
   ========================================================================== */

@media only screen and (max-width: 1499px) {
  .carop-sec,
  .carwhy-sec,
  .carov-sec,
  .carpur-sec,
  .carresp-sec,
  .carprof-sec,
  .carbeh-sec,
  .caroff-sec,
  .cartree-sec,
  .carapply-sec { padding: 80px 0; }

  .carback-sec { padding: 0 0 80px; }

  .carop-card { padding: 38px 34px; }
  .carwhy-row { gap: 24px; }
  .carpur-box { padding: 50px; }
  .carapply-box { padding: 60px 50px; }
  .carprof-card { padding: 44px 38px; }
  .carov-table th { width: 240px; }
}

@media only screen and (max-width: 1199px) {
  .carwhy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .carhero-sec { padding: 60px 0 70px; }
  .carov-table th,
  .carov-table td { padding: 18px 22px; }
  .carov-table th { width: 220px; }

  .cartree-item--d1 { margin-left: 26px; }
  .cartree-item--d2 { margin-left: 52px; }
  .cartree-item--d3 { margin-left: 78px; }
  .cartree-item--d4 { margin-left: 104px; }
}

@media only screen and (max-width: 991px) {
  .carop-sec,
  .carwhy-sec,
  .carov-sec,
  .carpur-sec,
  .carresp-sec,
  .carprof-sec,
  .carbeh-sec,
  .caroff-sec,
  .cartree-sec,
  .carapply-sec { padding: 60px 0; }

  .carback-sec { padding: 0 0 60px; }

  /* One column from here down: two 44px-padded cards side by side stop
     holding a readable measure. */
  .carop-row,
  .carresp-row,
  .carprof-row,
  .carbeh-row,
  .caroff-row { grid-template-columns: minmax(0, 1fr); }

  .carop-row,
  .carwhy-row { margin-top: 40px; }

  .carresp-heading,
  .carprof-heading,
  .carbeh-heading { margin-bottom: 36px; }

  .carpur-box { padding: 40px 36px; }
  .carapply-box { padding: 50px 40px; }
  .cartree-list { padding: 36px 30px; }
}

@media only screen and (max-width: 767px) {
  /* The overview table stacks into label/value pairs, matching the roadmap
     and equipment tables elsewhere on the site. */
  .carov-table,
  .carov-table tbody,
  .carov-table tr,
  .carov-table th,
  .carov-table td { display: block; width: 100%; }

  .carov-table { border: 0; }

  .carov-table tr {
    margin-bottom: 14px;
    background-color: var(--white);
    border: 1px solid #dfe3ee;
  }

  .carov-table tr:last-child { margin-bottom: 0; }

  .carov-table th {
    width: 100%;
    padding: 14px 20px;
    border-right: 0;
    border-bottom: 1px solid #dfe3ee;
  }

  .carov-table td {
    padding: 14px 20px;
    border-bottom: 0;
  }

  .carhero-title { line-height: 126%; }
  .carhero-chips { gap: 10px; }
  .carhero-chips li { padding: 8px 16px; }

  .carop-card { padding: 32px 26px; }
  .carwhy-card { padding: 32px 26px; }
  .carresp-card { padding: 34px 28px; }
  .carprof-card { padding: 36px 28px; }
  .carbeh-card { padding: 32px 26px; }
  .caroff-item { padding: 24px 22px; }
  .carpur-box { padding: 34px 28px; }
  .carapply-box { padding: 40px 30px; }

  .cartree-list { padding: 30px 24px; }
  .cartree-item--d1 { margin-left: 18px; }
  .cartree-item--d2 { margin-left: 36px; }
  .cartree-item--d3 { margin-left: 54px; }
  .cartree-item--d4 { margin-left: 72px; }
}

@media only screen and (max-width: 575px) {
  .carwhy-row { grid-template-columns: minmax(0, 1fr); }

  .carop-card-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .carop-meta { gap: 8px 18px; }

  /* Indents stop being readable at this width; the tag and weight carry the
     hierarchy instead. */
  .cartree-item--d1,
  .cartree-item--d2,
  .cartree-item--d3,
  .cartree-item--d4 { margin-left: 14px; }

  .cartree-item { padding-left: 18px; }
}

@media only screen and (max-width: 480px) {
  .carhero-sec { padding: 50px 0 60px; }
  .carhero-copy { gap: 14px; }

  .carop-card,
  .carwhy-card,
  .carresp-card,
  .carbeh-card { padding: 28px 22px; }

  .carprof-card { padding: 30px 24px; }
  .carpur-box { padding: 28px 24px; }
  .carapply-box { padding: 34px 24px; }
  .cartree-list { padding: 26px 20px; }

  .caroff-mark {
    width: 28px;
    height: 28px;
  }

  .caroff-mark svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   CAREERS — type scale

   The careers classes were authored with fixed sizes and never scaled down,
   so the single-job hero held 50px at every width: 61px tall on desktop and
   252px at 320px, four lines filling the banner. The site's font-size
   variables are not rescaled at breakpoints, so each class needs its own
   step down. Nothing here goes below the 16px floor.
   ========================================================================== */

@media only screen and (max-width: 1499px) {
  .carhero-title { font-size: 44px; }
  .carop-title { font-size: 26px; }
  .carwhy-num { font-size: 42px; }
  .carprof-title { font-size: 24px; }
  .carresp-num { font-size: 26px; }
}

@media only screen and (max-width: 1199px) {
  .carhero-title { font-size: 40px; letter-spacing: -0.8px; }
  .carhero-text { font-size: var(--fs-18); }
  .carpur-text { font-size: var(--fs-18); }
  .carop-title { font-size: 24px; }
  .carwhy-num { font-size: 38px; }
  .carresp-title { font-size: var(--fs-20); }
  .carprof-title { font-size: 22px; }
}

@media only screen and (max-width: 991px) {
  .carhero-title { font-size: 36px; }
  .carwhy-num { font-size: 34px; }
  .carresp-num { font-size: 24px; }
  .cartree-item--d0 { font-size: var(--fs-18); }
}

@media only screen and (max-width: 767px) {
  .carhero-text { font-size: var(--fs-16); }
  .carpur-text { font-size: var(--fs-16); }
  .carop-title { font-size: 22px; }
  .carprof-title { font-size: var(--fs-20); }
  .carresp-title { font-size: var(--fs-18); }
  .carbeh-title { font-size: var(--fs-18); }
  .carwhy-title { font-size: var(--fs-20); }
  .cartree-item { font-size: var(--fs-16); }
}

@media only screen and (max-width: 575px) {
  .carop-title { font-size: var(--fs-20); }
  .carprof-title { font-size: var(--fs-18); }
  .carresp-num { font-size: var(--fs-22); }
}

@media only screen and (max-width: 480px) {
  .carhero-chips li { padding: 7px 14px; }
}

@media only screen and (max-width: 389px) {
}

@media only screen and (max-width: 374px) {
}

/* --------------------------------------------------------------------------
   Required asterisks

   Orbital sizes these from its own scale and was rendering them at 12px, under
   the theme's 16px minimum, on every breakpoint.
   -------------------------------------------------------------------------- */

.carapply-form .gform_wrapper .gfield_required,
.carapply-form .gform_wrapper .gfield_required_asterisk,
.contact-form .gform_wrapper .gfield_required,
.contact-form .gform_wrapper .gfield_required_asterisk {
  font-size: var(--fs-16) !important;
}

/* --------------------------------------------------------------------------
   Footer social icons — mobile legibility

   Stroke weight is held by vector-effect in style.css. These raise the icon
   back up within its pill and lift the pill off the blue, so the mark reads
   at a glance rather than sitting as a faint outline.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .footer-socials a { background-color: rgba(255, 255, 255, 0.12); }
}

@media only screen and (max-width: 575px) {
}

@media only screen and (max-width: 389px) {
}

@media only screen and (max-width: 374px) {
}

/* --------------------------------------------------------------------------
   CAREERS — breadcrumb and hero chips

   Both break the moment their text wraps, which on a long job title and a
   long location means every phone width.
   -------------------------------------------------------------------------- */

/* The crumb is a flex row centred on its tallest child, so once the job title
   wrapped to two lines the "Careers /" prefix floated to the middle of that
   block. Top-aligning keeps the prefix on the first line where it belongs. */
.carhero-crumb {
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 2px;
  line-height: 150%;
}

@media only screen and (max-width: 767px) {
  /* A 40px radius is half the height of a one-line chip but nowhere near half
     of a wrapped one, so a two-line chip rendered as a warped lozenge. A small
     fixed radius reads as a tag at any number of lines. */
  .carhero-chips li {
    padding: 8px 16px;
    line-height: 150%;
    border-radius: 8px;
  }
}

@media only screen and (max-width: 575px) {
  .carhero-chips { gap: 8px; }

  .carhero-chips li {
    padding: 8px 14px;
    border-radius: 6px;
  }
}