[][]/* ============================================================
 * parts_sp.css
 * Responsive overrides for all content area components.
 * Breakpoints: =1400px, =1100px, =768px, =480px.
 * ============================================================ */
@media (max-width: 1440px) {
  .site-footer__logo {
      height: 18px;
      width: auto;
  }
.site-footer__policies{
  gap:12px;
}
}
/* -- Large desktop: = 1400px ------------------------------- */
@media (max-width: 1400px) {
  .products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .news__layout {
    grid-template-columns: 1fr 360px;
  }
}

/* -- Medium: = 1100px -------------------------------------- */
@media (max-width: 1440px) {
  .strength__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 18px;
  }
  .strength__text {
    padding: 34px 24px;
  }
  .strength__number {
    position: static;
    display: block;
    margin-block-end: 12px;
    font-size: clamp(58px, 6vw, 86px);
  }
  .strength__heading {
    margin-block-end: 22px;
  }
  .strength__list {
    gap: 12px;
  }
  .sit-ftr{
    gap:22px;
  }
.hero__pagination.swiper-pagination{
  bottom: clamp(28px, 8vw, 238px);
}

.segment-card__text{
  line-height: 1.3;
}
.container {
    padding-inline: 20px;
}
.hero__heading{
  margin-block-end: 20px;
}
.hero__sub{
  margin-block-end: 25px;
}
.global-bases__text{
  margin-left: 0;
}

}
@media (max-width: 1100px) {
  .overview__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .overview__header-right { padding-block-start: 0; }
  .overview__cards        { grid-template-columns: repeat(2, 1fr); }

  .strength__inner         { gap: 28px; }
  .products__grid          { grid-template-columns: repeat(3, 1fr); }

  .news__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .news__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .news__cards .news-card:last-child {
    display: none;
  }
  p.hero__watermark img {
    max-width: 440px;
    width: 100%;
}
.hero__watermark {
    bottom: clamp(-20px, 8vw, 110px);
}
.hero__heading{
  margin-block-end: 15px;
}
.hero__sub{
  margin-block-end: 20px;
}
}

/* -- Tablet: = 768px --------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero__slider {
    height: 720px;
    min-height: 720px;
    max-height: 720px;
  }
  .hero-slide__content {
    padding-block: 150px 180px;
  }
  .hero__pagination.swiper-pagination {
    bottom: 130px;
    z-index: 10;
  }
 
}
@media (max-width:991px){
    .container {
        padding-inline: 25px;
    }

  .strength__inner,.global-bases__layout{
    grid-template-columns: 1fr;
  }
  .section-map{
    padding-left: 20px;
  }
  .global-bases__text {
    margin-left: 0;
  }
   p.hero__watermark img {
    max-width: 310px;
    width: 100%;
}
.hero__watermark {
    bottom: clamp(-20px, 11vw, 110px);
}
.hero__heading{
  margin-block-end: 10px;
}
.hero__sub{
  margin-block-end: 15px;
}
.hero__sub{
  max-width: 500px;
}
}

@media (max-width: 767px) {

  /* Hero slider � compact height for tablets/phones */
  .hero__slider {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hero-slide {
    height: auto;
  }
  .hero-slide__content {
    padding-block: 160px 210px;
    padding-inline: 22px;
  }
  .hero-slide__overlay {
    background:
      linear-gradient(180deg, rgba(10, 14, 22, 0.35) 0%, rgba(10, 14, 22, 0.75) 100%),
      linear-gradient(90deg, rgba(10, 14, 22, 0.45) 0%, rgba(10, 14, 22, 0.25) 100%);
  }
  .hero__heading {
    font-size: clamp(30px, 7.5vw, 48px);
    letter-spacing: -1px;
    margin-block-end: 10px;
  }
  .hero__sub {
    font-size: 14px;
    margin-block-end: 15px;
  }
  .hero__pill {
    font-size: 10px;
    letter-spacing: 2px;
    margin-block-end: 20px;
  }
  .hero__watermark { display: none; }

  .hero__pagination.swiper-pagination {
    bottom: 140px;
  }
  .hero__pagination .swiper-pagination-bullet { width: 24px; }

  /* Values band � overlay the banner bottom (same as desktop) */
  .hero__values-inner {
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 18px;
    padding-block: 22px;

  }
  .hero__values{
    position: absolute;
    padding: 0;
  }
 
  .hero__values-cta {
    padding: 10px 18px;
    font-size: 12px;
  }

  /* Overview cards � single column on mobile */
  .overview__cards { grid-template-columns: 1fr; gap: 20px; }
  .overview__heading {
    font-size: clamp(24px, 6vw, 32px);
  }

  /* Strengths */
  .strength__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 20px;
  }
  .strength__image {
    /* order: -1; */
    aspect-ratio: 16 / 9;
  }
.strength__text {
    padding: 0 0 20px;
}
  .strength__number {
    position: static;
    font-size: clamp(48px, 12vw, 72px);
    display: block;
    margin-block-end: 10px;
  }
  .strength__image img {
    height: 100%;
  }

  /* Products grid */
  .products__grid { grid-template-columns: repeat(2, 1fr); }

  /* News */
  .news__cards {
    grid-template-columns: 1fr;
  }
  .news__cards .news-card:last-child {
    display: flex;
  }

  /* Career: single-column resume form, dropzone no longer spans 2 rows */
  .resume-form__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .resume-form__group--file { grid-row: auto; }
  .resume-dropzone { min-height: 160px; }
  .resume-form__submit { width: 100%; }
}

/* -- Raw material -> final product flow: stack & rotate arrow -- */
@media (max-width: 860px) {
  .flow,
  .flow--multi {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .flow__arrow {
    align-self: center;
    height: auto;
  }
  .flow__arrow-img {
    width: 48px;
    transform: rotate(90deg);
  }
}

/* -- Mobile: = 480px --------------------------------------- */
@media (max-width: 480px) {
  :root {
    --container-padding: 20px;
  }

  /* Application & material cards stack one per line on small phones */
  .flow-app-group,
  .flow-mat-group { grid-template-columns: 1fr; }

  /* Tighter padding for the contact consent popup on small screens */
  .consent-modal { padding: 16px; }
  .consent-modal__box { padding: 24px 22px 22px; }
  .consent-modal__title { font-size: 18px; }

  .hero__slider {
    height: auto;
  }
  .hero-slide {
    height: auto;
  }
  .hero-slide__content {
    padding-block: 140px 190px;
    padding-inline: 18px;
  }
.hero__heading {
    font-size: clamp(30px, 7.5vw, 56px);
    line-height: 1.2;
}
.hero__values {
    padding: 15px 0;
}
.hero__values-inner{
    padding-block:0;
}
  .hero__pill {
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 100%;
    padding: 7px 16px;
}
    .site-footer__inner {
      gap: 20px;
    }
  .hero__ctas  { gap: 10px; width: 100%; }
  /* .hero__ctas .btn { flex: 1 1 auto; min-width: 0; } */
  .btn--lg     { height: 48px; font-size: 11px; padding-inline: 18px; }
  .btn--light{
    padding:0 28px !important;
  }
  .site-footer__nav-link{
    font-size: 12px;
    line-height: 100%;
  }
 .site-footer__policy-link{
  font-size: 10px;
}

.site-footer__nav-list{
  gap: 6px;
}
.site-footer__divider{
  display: none;
}
.site-footer__inner{
      padding-block: 30px;
}

.site-footer__bottom{
  padding-block-start: 0;
}
  .product-card__figure { height: 116px; }
  .products__grid{
    gap: 10px;
  }
  .product-card__body {
    padding: 12px 12px 12px;
}
.product-card__name {
  font-size: 10px;
}

  .news__cards { grid-template-columns: 1fr; }

  .section-heading {
    font-size: clamp(24px, 6vw, 32px);
  }
.hero__sub {
    margin-block-end: 20px;
    font-size: 13px;
    line-height: 21px;
}
  .hero__heading{
      margin-block-end:10px;
  }

}

/* ============================================================
   LEGAL PAGES � responsive overrides
   ============================================================ */
@media (max-width: 768px) {
  .legal-page {
    /* Mobile fixed header (menu row collapsed) � 135px */
    padding-block-start: calc(135px + 32px);
    padding-block-end: 60px;
  }

  .legal-page__header { margin-block-end: 32px; }

  .legal-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sitemap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ----- Latest Information feed: stack date/tag/icon over the title */
  .news-feed__link {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-block: 16px;
  }
  .news-feed__date  { width: auto; order: 1; }
  .news-feed__tag   { order: 2; }
  .news-feed__icon  { order: 3; margin-inline-start: auto; }
  .news-feed__title { order: 4; flex-basis: 100%; font-size: 15px; }
  .news-feed__archives { height: 56px; font-size: 15px; }
}

/* ============================================================
   INNER PAGE BANNER � responsive
   ============================================================ */
@media (max-width: 768px) {
  /* Menu row collapses into the hamburger, so the fixed header is shorter:
     header-top(~36) + nav row(56) + breadcrumb(~43) � 135px */
  .page-banner {
    margin-top: 140px;
    padding-block-start:48px;
    padding-block-end: 48px;
  }
  .page-banner__title { font-size: clamp(22px, 6vw, 32px); }
  .page-banner__sub { font-size: 14px; }
}

/* ============================================================
   INNER PAGE LAYOUTS � responsive
   ============================================================ */
@media (max-width: 1100px) {
  .split-layout { gap: 40px; }
  .product-detail__intro { grid-template-columns: 1fr; }
  .product-detail__image { position: static; aspect-ratio: 16/9; }
  .contact-page__layout { grid-template-columns: 1fr; }
  .news-page__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .split-layout--reverse { direction: ltr; }

  .value-cards { grid-template-columns: 1fr; }

  /* About page: stack reach layout, 2-col stats, 2-col drivers */
  .reach-layout { grid-template-columns: 1fr; gap: 32px; }
  .stat-cards { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .drivers { grid-template-columns: repeat(2, 1fr); }

  .applications__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .spec-table th { width: 140px; }

  .news-page__grid { gap: 40px; }

  /* Contact � single column; fix info card padding + its top accent bar
     (negative margins must track the reduced padding or the red bar overflows) */
  .contact-info { padding: 24px 20px; }
  .contact-info__topline { margin: -24px -20px 24px; }
  .contact-form__consent { gap: 10px; }


}

/* -- Mobile = 480px � inner pages ------------------------- */
@media (max-width: 480px) {
  .page-banner { padding-block-start: 36px; padding-block-end: 36px; }
  .page-banner__label { font-size: 10px; letter-spacing: 2px; }

  .value-cards { gap: 16px; }
  .value-card  { padding: 20px 16px; }
  .value-card__number { font-size: 32px; }

  /* About page: stack stats + drivers one per row on small phones */
  .stat-cards { grid-template-columns: 1fr; gap: 14px; }
  .stat-card { padding: 26px 16px; }
  .drivers { grid-template-columns: 1fr; }

  .applications__grid { grid-template-columns: 1fr; gap: 10px; }
  .application-tag { padding: 10px 12px; }

  .contact-page__layout { gap: 32px; }
  .news-page__grid { gap: 24px; }
  .site-footer__copyright{
    font-size: 11px;
  }
}

@media (max-width:380px){
    .products__grid { grid-template-columns: 1fr ; gap: 10px; }
}

/* ============================================================
   CONTACT PAGE � responsive polish
   ============================================================ */
/* Tablet: once the layout stacks, lay the sidebar's two cards
   side-by-side so it doesn't become one over-wide empty box. */
@media (min-width: 769px) and (max-width: 1100px) {
  .contact-page__layout > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .contact-help { margin-block-start: 0; }
}
/* Phone: tighten spacing + keep the help card's top accent bar aligned. */
@media (max-width: 480px) {
  .contact-form__group { margin-block-end: 18px; }
  .contact-section__head { margin-block-end: 24px; }
  .contact-info__heading { margin-block-end: 18px; padding-block-end: 14px; }
  .contact-info__item { margin-block-end: 18px; }
  .contact-help { margin-block-start: 20px; padding: 20px 20px; }
  .contact-help__top { margin: -20px -20px 16px; }
}
/* ============================================================
   PHASE 5 COMPONENTS � responsive
   ============================================================ */
@media (max-width: 768px) {
  /* Back-to-top � closer to edge on mobile */
  .back-to-top {
    inset-block-end: 20px;
    inset-inline-end: 16px;
    width: 42px;
    height: 42px;
  }
  .back-to-top img { width: 20px; height: 20px; }

  /* CMP banner � stack vertically on mobile */
  .cmp-banner__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cmp-banner__actions { width: 100%; }
  .cmp-banner__actions .btn { flex: 1; }

  /* Search page */
  .search-page {
    padding-block-start: calc(135px + 32px);
    padding-block-end: 60px;
  }
  .search-form-inline { flex-direction: column; }
  .search-form-inline__btn { width: 100%; }
}
@media (max-width:525px){
  .cmp-banner__actions{
    flex-direction: column;
  }
 .cmp-banner__actions .btn{
  padding: 10px 24px;
 }
   .sit-ftr {
    border-bottom: 1px solid #2E333DB2;
    padding-bottom: 20px;
}
.site-footer__brand {
    border-bottom: 1px solid #2E333DB2;
    padding-bottom: 20px;
    width: 100%;
}
.site-footer__copyright{
  margin-left: 0;
}

}

/* ============================================================
   PHASE 8 COMPONENTS � responsive
   ============================================================ */
/* Timeline � laptop widths (1101�1440px): tighten the number/marker
   columns so the number sits close to its circle and the band stays
   balanced instead of leaving a big gap on the left. */
@media (max-width: 1440px) {
  .process-step__inner {
    grid-template-columns: 110px 150px minmax(0, 1fr) clamp(300px, 28vw, 440px);
    gap: 40px;
  }
  /* Connector centred on the marker column: 15(pad)+110+40+75 = 240px */
  .process-step__inner::before,
  .process-step__inner::after { left: 240px; }
  .process-step__marker { width: 140px; height: 140px; }
  .process-step__marker::before { inset: -7px; border-width: 7px; }
  .process-step__icon { height: 60px; }
  .process-step__num { font-size: clamp(44px, 5vw, 80px); }
}

@media (max-width: 1100px) {
  .solution-grid  { grid-template-columns: repeat(2, 1fr); }
  .material-grid  { grid-template-columns: repeat(2, 1fr); }
  .process-step__inner { grid-template-columns: 70px 96px minmax(0, 1fr) 260px; gap: 24px; }
  .process-step__inner::before,
  .process-step__inner::after { left: 157px; }
  /* Marker circle must shrink to fit its narrower column */
  .process-step__marker { width: 88px; height: 88px; }
  .process-step__marker::before { inset: -6px; border-width: 6px; }
  .process-step__icon { height: 44px; }
  .process-step__num { font-size: clamp(38px, 6vw, 60px); }
  .global-bases__layout { gap: 40px; }
}

@media (max-width: 900px) {
  /* Timeline: number + marker on top row, text + image below */
  .process-step__inner {
    grid-template-columns: auto 80px 1fr;
    align-items: center;
    gap: 18px 20px;
    padding-block: 36px;
  }
  /* Connector rail only makes sense in the desktop 4-column layout */
  .process-step__inner::before,
  .process-step__inner::after { display: none; }
  /* Marker sits next to the number, not floating in the empty column */
  .process-step__marker { width: 64px; height: 64px; justify-self: start; box-shadow: 0 0 0 6px var(--c-primary-dim); }
  /* .process-step__marker::before, .process-step__marker::after { height: 36px; } */
  .process-step__icon { width: 28px; height: 28px; }
  /* .process-step__text-block { grid-column: 1 / -1; } */
  .process-step__image { grid-column: 1 / -1; aspect-ratio: 16/9; }
}

@media (max-width: 768px) {
 .solution-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
  .solution-card__figure { height: 220px; }
  .material-grid  { grid-template-columns: 1fr; gap: 20px; }

  .global-bases__layout { grid-template-columns: 1fr; gap: 28px; }

  /* CTA band stacks */


  /* Contact form collapses to single column */
  .contact-form--grid { grid-template-columns: 1fr; }
}
@media (max-width:600px){
    .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 20px; }  
  .solution-grid {
    grid-template-columns:1fr;
    gap: 20px;
}
}
@media(max-width:575px){
  .solution-card__body{
    padding: 15px 20px;
  }
  .header-top{
    padding: 8px 15px 5px;
  }
  .solution-card__title{
    font-size: 16px;
  }
  .solution-card__text{
    font-size: 14px;
  }
}
@media (max-width:575px){
  .process-step__text-block {
    grid-column: 1 / -1;
}
.process-step__inner{
  grid-template-columns: auto;
}
.process-step__text{
  font-size: 14px;
}
}
@media (max-width: 480px) {
  .solution-card__figure { height: 200px; }
  .process-step__inner { padding-block: 28px; }
  .process-step__num { font-size: 44px; }
  .back-to-top {
    inset-block-end: 50px;
}
.breadcrumb__item{
  font-size: 11px;
}
}