/*!
Theme Name: Teijin
Author: Teijin Frontier India Private Limited
Author URI: #
Description: TEIJIN FRONTIER is the global converting company that specializes in synthetic fibers and textiles with the integrated manufacturing system developing raw materials through to finished products.
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License: All Rights Reserved
Text Domain: teijin
Tags: synthetic-fibers,textile-manufacturing,technical-textiles,apparel-industry,automotive-textiles,sustainable-manufacturing,environmental-conservation,corporate-social,responsibility,performance-fabrics,textile-innovation

Custom WordPress theme for internal use only.

*/

/* ============================================================
 * base.css
 * Site-wide: design tokens, reset, utility classes, buttons,
 * scroll-animation utilities.
 * Loaded on every page before layout_pc.css / layout_sp.css.
 * ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colours */
  --c-primary:     #D81215;
  --c-primary-dim:  rgba(216, 18, 21, 0.10);
  --c-primary-rim:  rgba(216, 18, 21, 0.35);

  /* Dark surfaces */
  --c-dark-900: #0d0f12;
  --c-dark-800: #12141a;
  --c-dark-750: #14171c;
  --c-dark-700: #1a1c24;
  --c-dark-nav:  rgba(15, 18, 23, 0.92);

  /* Light surfaces */
  --c-light-100: #FAFAFA;
  --c-light-50:  #FAFAFA;

  /* Text */
  --c-text-white:   #ffffff;
  --c-text-dark:    #242933;
  --c-text-body:    #656C7C;
  --c-text-muted:   #8c94a3;
  --c-text-faint:   #737a87;
  --c-text-medium:  #bfc7d9;
  --c-text-news:    #ccd4de;

  /* Borders */
  --c-border:       #2e333d;
  --c-border-light: #e0e0e5;

  /* Secondary UI */
  --c-ui-bg:    #1a1f26;

  /* Typography */
  --font-main:  'Inter', 'Noto Sans CJK JP', 'Hiragino Kaku Gothic Pro',
                'Meiryo', 'Osaka', 'MS PGothic', sans-serif;
  --font-deco:  'Inter', sans-serif;

  /* Spacing */
  --container-padding: clamp(16px, 4vw, 80px);
  --section-v-pad:     clamp(60px, 7vw, 80px);

  /* Transitions */
  --ease: 0.25s ease;
}

/* ============================================================
   2. BASE / RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%; /* 1rem = 10px; body sets 1.8rem = 18px */
}

body {
  font-family: var(--font-deco);
  font-size: 1.8rem;
  line-height: 1.55;
  background-color: var(--c-light-100);
  color: var(--c-text-dark);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

figure {
  margin: 0;
}

/* ============================================================
   3. UTILITY / SHARED
   ============================================================ */

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Centred max-width container */
.container {
  width: 100%;
  max-width: 1720px;
  padding-inline: 15px;
  margin-inline: auto;
}

/* Block editor "Wide"/"Full" alignment (used by e.g. the teijin/hero block) */
.alignwide {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
}
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Surface colours */
.section-light     { background-color: var(--c-light-100); }
.section-light-alt { background-color: var(--c-light-50); }
.section-dark      { background-color: var(--c-dark-800); }

/* Section label (e.g. "OVERVIEW") */
.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-primary);
  line-height: 1;
}
.section-label--centered { text-align: center; }
.text-center { text-align: center; }
.link-primary { color: var(--c-primary); }

/* Red underline accent */
.section-label__bar {
  width: 32px;
  height: 2px;
  background-color: var(--c-primary);
  margin-top: 8px;
}
.section-label__bar--centered {
  margin-inline: auto;
}

/* Generic large heading */
.section-heading {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--c-text-dark);
  margin-top: 18px;
}
.head-center .section-heading,.head-center .process-intro__body { text-align: center; }
.head-center .section-heading{
  color:#fff;
}
.head-center .process-intro__body{
  color:#BFC7D9;
}
.py20{ padding-block: clamp(16px, 6vw, 20px); }
.py40{ padding-block: clamp(30px, 6vw, 40px); }
.py60{ padding-block: clamp(40px, 6vw, 60px); }

/* ============================================================
   4. BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0 34px;
  height: 48px;
  transition: opacity var(--ease), background-color var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.btn--primary {
  background-color: var(--c-primary);
  color: var(--c-text-white);
}
.btn--primary:hover  { background-color: #b80f12; }
.btn--outline {
  border: 1px solid #666e7a;
  color: #d1d9e0;
}
.btn--outline:hover  { border-color: #ccd4de; color: #fff; }
.btn--light {
    /* background-color: #ffffff; */
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 0 32px !important;
}
.btn--light:hover    { border-color: var(--c-primary); background-color: var(--c-primary); }
.btn--lg             { height: 56px; padding: 0 24px;
line-height: 1; }

/* ============================================================
   5. SCROLL ANIMATIONS (respect prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-in.is-visible {
    opacity: 1;
    transform: none;
  }
}
/* =========================
   Custom Auto-Hide Scrollbar
   ========================= */

/* Firefox */
html {
    scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 5px;
    transition: all 0.3s ease;
        scrollbar-color: var(--c-primary) #f3f4f6;
}

/* Show scrollbar when hovering page */


::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    background: var(--c-primary);
    border-radius: 100px;
    border: 2px solid #f3f4f6;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-primary);
}

/* Firefox Hover */
html:hover {
    scrollbar-width: thin;

}

/* ============================================================
 * parts_pc.css
 * Desktop styles for all content area components:
 * hero, overview, strengths, main products, products grid, news.
 * Responsive overrides are in parts_sp.css.
 * ============================================================
 * - Hero / Banner
 * - Stats Bar
 * - Overview
 * - Strengths
 * - Main Products
 * - Feature Bar
 * - Products Grid
 * - News
 * ============================================================ */

/* ============================================================
   HERO / BANNER  (Swiper slider)
   ============================================================ */
.hero {
  position: relative;
  background-color: #0b0f17;
  overflow: hidden;
  margin-top:45px;
}

/* ----- Slider shell ----- */
.hero__slider {
  position: relative;
  width: 100%;
  height: 940px;
  min-height: 940px;
  max-height: 940px;
  overflow: hidden;
}
.hero__slider .swiper-wrapper {
  align-items: stretch;
}
.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ----- Slide background image + overlay ----- */
.hero-slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-slide__media--banner-right {
  background-image: url("../../common-files/img/banner-right.png");
}
.hero-slide-first{
  background-image: url("../../common-files/img/bnr-main.jpg");
}
.hero-slide-first-sub{
  background-image: url("../../common-files/img/bnr-sec.jpg");
}
.hero-slide__media--banner-main {
  background-image: url("../../common-files/img/banner.jpg");
}
.hero-slide__overlay {
  position: absolute;
  inset: 0 0 0px 0;
background: linear-gradient(90deg, rgba(10, 13, 18, 0.8) 15.42%, rgba(18, 20, 28, 0.5) 61.67%);
/* background: url(../../common-files/img/bnr-over.png); */
background: url(assets/img/bnr-over.png);

}

/* ----- Slide content (uses .container for width/inline padding) ----- */
.hero-slide__content {
  position: relative;
  z-index: 2;
  padding-block: 204px;
}

.hero__pill {
    display: inline-flex;
    align-items: center;
    /* height: 30px; */
    padding: 4.5px 16.5px;
    border: 1px solid #fff;
    border-radius: 4px;
    /* background-color: rgba(255, 255, 255, 0.06); */
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-block-end: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.hero__heading {
  display: flex;
  flex-direction: column;
  max-width: 940px;
  font-size: clamp(36px, 5vw, 65px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-block-end: 22px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__heading--light { color: #ffffff; }
.hero__heading--red   { color: var(--c-primary); }
.hero__heading > span {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.hero__heading > span:nth-child(1) { transition-delay: 0.35s; }
.hero__heading > span:nth-child(2) { transition-delay: 0.5s; }

.hero__sub {
    max-width: 620px;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 400;
    line-height: 30px;
    color: #D1D9E8;
    margin-block-end: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease 0.65s, transform 0.9s ease 0.65s;
    letter-spacing: 0%;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease 0.8s, transform 0.9s ease 0.8s;
}

/* Animate-in on active slide */
.swiper-slide-active .hero__pill,
.swiper-slide-active .hero__heading > span,
.swiper-slide-active .hero__sub,
.swiper-slide-active .hero__ctas {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Decorative watermark ----- */
.hero__watermark {
    position: absolute;
    right: clamp(-60px, 3vw, 15px);
    bottom: clamp(-20px, 5vw, 110px);
    z-index: 1;
    /* font-family: "Be Vietnam Pro", sans-serif;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0%;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 15%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    leading-trim: CAP_HEIGHT; */
}

/* ----- Pagination ----- */
.hero__pagination.swiper-pagination {
    position: absolute;
    left: 50% !important;
    bottom: clamp(28px, 7vw, 238px) !important;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}
.hero__pagination .swiper-pagination-bullet {
  width: 30px;
  height: 3px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  margin: 0 !important;
  transition: background-color 0.3s ease, width 0.3s ease;
}
.hero__pagination .swiper-pagination-bullet-active {
  background-color: #FFFFFF;
}

/* ----- Values band ----- */
.hero__values {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
}

.hero__values::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 50%, rgba(216, 18, 21, 0.18) 0%, transparent 55%),
        linear-gradient(90deg, #14181f 0%, #1c2230 60%, #14181f 100%);
          background: rgb(10 13 18 / 90%);
    opacity: 0.8;          /* Sirf background layer ki opacity */
    backdrop-filter: blur(4px);
    z-index: -1;
}

.hero__values-inner {
    position: relative;
    z-index: 1;
}
/* .hero__values {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    color: #ffffff;
    background: radial-gradient(circle at 85% 50%, rgba(216, 18, 21, 0.18) 0%, transparent 55%),
    linear-gradient(90deg, #14181f 0%, #1c2230 60%, #14181f 100%);
    overflow: hidden;
    background: rgb(10 13 18 / 90%);
    backdrop-filter: blur(4px);
    opacity: 80%;
} */
/* .hero__values::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.03) 75%, transparent 75%);
  background-size: 14px 14px;
  opacity: 0.4;
  pointer-events: none;
} */
/* .hero__values::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-primary) 50%, transparent 100%);
} */

.hero__values-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 20px);
  padding-block: clamp(20px, 2.2vw, 22px);
}

.hero__values-accent {
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
  background: #D81215;
  border-radius: 2px;
}

.hero__values-body {
  flex: 1;
  min-width: 0;
}

.hero__values-title {
    font-size: clamp(16px, 4.3vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-block-end: 6px;
    color: var(--c-primary);
}

.hero__values-text {
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 720px;
}

.hero__values-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.04);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hero__values-cta svg {
  transition: transform 0.25s ease;
}
.hero__values-cta:hover {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: #ffffff;
}
.hero__values-cta:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   OVERVIEW / BUSINESS SEGMENTS
   ============================================================ */
.overview {
  padding-block: var(--section-v-pad);
}
.overview__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 50px);
    max-width: 1720px;
    padding-inline: 20px;
}
/* ----- Split header (heading left, lead right) ----- */
.overview__header {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: flex-start;
}
.overview__header-left .section-label {
  margin-block-end: 8px;
}
.overview__heading {
  font-size: clamp(22px, 2.6vw, 42px) !important;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.22;
  color: #1a1f29;
  margin-block: 18px 0;
}
.overview__header-right {
  padding-block-start: clamp(40px, 4vw, 45px);
}
.overview__lead {
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 400;
  color: #656C7C;
  line-height: 1.75;
  max-width: 750px;
}

/* ----- Centered "Our Products" header ----- */
.overview__header--center {
  display: block;
  text-align: center;
}
.overview__header--center .overview__heading {
  font-size: clamp(28px, 4vw, 60px) !important;
  margin: 0;
  font-weight: 700;
}

/* ----- Browse-all button + product search ----- */
.overview__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.overview__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 760px;
  height: 56px;
  background-color: #656C7C;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--ease);
}
.overview__more:hover { background-color: #4d4d4d; }

.product-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 920px;
    height: 52px;
    background-color: #FFFFFF0D;
    /* border: 1px solid #ffffff1f; */
    border-radius: 4px;
    overflow: hidden;
}
.product-search__input {
  flex: 1;
  width: auto;
  border: none;
  outline: none;
  padding: 0 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--c-text-faint);
  
  background: transparent;
}
.product-search__input::placeholder { color: #9aa0ab; }
.product-search__btn {
  flex-shrink: 0;
  width: 56px;
  border: none;
  background-color: var(--c-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--ease);
}
.product-search__btn:hover { background-color: #b80f12; }

/* ----- Card grid ----- */
.overview__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.segment-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20, 28, 44, 0.06);
    transition: transform var(--ease), box-shadow var(--ease);
    border: 1px solid #E0E0E5;
    text-decoration: none;
}
.segment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 28, 44, 0.12);
}

.segment-card__media {
  position: relative;
  /* aspect-ratio: 4 / 3; */
  overflow: hidden;
  background-color: #f0f1f4;
}
.segment-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.segment-card__body {
  position: relative;
  padding: 20px 20px 20px 34px;
}
/*.segment-card__body::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset-block: 22px 28px;*/
/*  inset-inline-start: 16px;*/
/*  width: 3px;*/
/*  background-color: var(--c-primary);*/
/*  border-radius: 20px;*/
/*}*/
.segment-card__body::before {
    content: "";
    position: absolute;
    width: 3px;
    background-color: var(--c-primary);
    border-radius: 20px;
    height: 26px;
    left: 20px;
}
.segment-card__title {
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 700;
  color: #1a1f29;
  line-height: 1.3;
}
.segment-card__text {
  font-size: 13px;
  font-weight: 400;
  color: #656C7C;
  line-height: 1.55;
}

/* ============================================================
   STRENGTHS
   ============================================================ */
.strengths {
  background-color: #ffffff;
}
.strengths__header {
  padding-block: clamp(50px, 6vw, 80px) clamp(40px, 5vw, 40px);
  background-color: #ffffff;
}
.strengths__sub {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  color: #656C7C;
  margin-block-start: 10px;
  line-height: 1.55;
  max-width: 940px;
}

.strength {
  position: relative;
  background-color: #ffffff;
}
.strength:last-child { margin-block-end: 0; }

/* Container override so panel can extend to container's right edge */
.strength__inner {
  padding-inline: 0;
  background-color: #FAFAFA;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 25px 25px 25px 0;
  gap: 0px ;
}
.strength__inner.white-bg { background-color: #ffffff; } 
/* Left red accent bar (sits at the container's left edge) */
.strength__accent {
  position: absolute;
  inset-block: 0;
  width: 3px;
  background-color: var(--c-primary);
  pointer-events: none;
  z-index: 1;
}

.strength__accent.second{
  background-color: rgba(216, 18, 21, 0.5);
}

.strength__text {
    position: relative;
    padding: clamp(50px, 5vw, 70px) clamp(2px, 4vw, 0px) clamp(50px, 5vw, 70px) clamp(180px, 23vw, 270px);
}
.strength__number {
  position: absolute;
  inset-block-start: clamp(40px, 4.2vw, 60px);
  inset-inline-start: clamp(30px, 6vw, 120px);
  font-size: clamp(70px, 5vw, 100px);
  font-weight: 800;
  letter-spacing: -2px;
  color: #f3c4c5;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.strength__heading {
  font-size: clamp(16px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.3;
  color: #1a1f29;
  margin-block-end: 28px;
}

.strength__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.strength__list li {
  position: relative;
  padding-inline-start: 25px;
  font-size: clamp(13px, 0.95vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  color: #656C7C;
}
.strength__list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 15px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33778 11.9029C5.24004 11.7063 3.73344 8.69292 2.19192 8.31384C1.67226 8.1972 1.25592 8.30016 1.25592 8.30016C0.683699 8.4663 0.266639 8.9622 0.103919 9.3951C-0.221881 10.359 0.279059 11.0939 0.768479 11.7826C1.74732 13.1596 2.69736 14.5195 3.6762 15.8967C4.01028 16.3539 4.34994 16.8341 4.88688 17.0203C5.58528 17.2645 6.38322 16.9198 6.85824 16.3606C7.35648 15.7955 7.59498 15.0739 7.83924 14.3755L8.27538 13.1634C8.77524 11.8127 9.3273 10.4738 9.90798 9.1521C10.4887 7.83036 11.0983 6.52644 11.76 5.23386C12.4217 3.94128 13.0889 2.6721 13.8313 1.40868C14.0226 1.09134 14.1909 0.779756 14.3822 0.462416C14.4172 0.404816 14.6548 0.0759563 14.6144 0.0124163C14.5741 -0.0513037 14.2559 0.150116 14.1866 0.167216C13.5967 0.460616 13.0295 0.846356 12.5203 1.26702C11.4841 2.13678 10.6382 3.18042 9.82698 4.26474C8.11553 6.67812 6.61366 9.23347 5.33778 11.9029Z' fill='%23656C7C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.strength__image {
  overflow: hidden;
}
.strength__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 920px;
    margin-left: auto;
}

/* ============================================================
   PRODUCTS GRID
   ============================================================ */
.products {
  padding-block: var(--section-v-pad);
}
.products__header {
  margin-block-end: clamp(32px, 4vw, 40px);
}
.products__sub {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--c-text-body);
  margin-block-start: 5px;
  line-height: 1.7;
}

/* 5-column grid */
.products__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.box-parent .te-box-grid{
  padding:40px 40px 40px 40px;
  position:relative;
}
.box-parent .te-box-grid .strength__accent {
    display: none;
}
.box-parent .te-box-grid:nth-child(even) {
    background: #ffffff;
}
.box-parent .te-box-grid.first-card{
  padding-top:0;
}
.box-parent .te-box-grid:nth-child(odd) {
    background: #fafafa;
}
.box-parent .te-box-grid:nth-child(even) .strength__accent {
    background-color:rgba(216, 18, 21, 0.5);
}
/* Product card */
.product-card {
  background-color: var(--c-text-white);
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--ease), transform var(--ease);
  position: relative;
}
.product-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background-color: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
  border-radius: 8px 8px 0 0;
  z-index: 1;
}
.product-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}
.product-card:hover::before { transform: scaleX(1); }

.product-card__link {
  display: block;
  height: 100%;
}
.product-card__figure {
  height: 193px;
  overflow: hidden;
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__img { transform: scale(1.04); }

.product-card__body {
    padding: 18.5px 19px 18.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #242933;
  line-height: 1;
}

/* Diagonal arrow */
.product-card__arrow {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  border-block-start: 2px solid var(--c-primary);
  border-inline-end: 2px solid var(--c-primary  );
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: border-color var(--ease);
}
.product-card__arrow::before{
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 6px;
    background-color: var(--c-primary);
    display: block;
    transform: rotate(-45deg);
    position: absolute;
    top: 4px;
    right: -2px;
    transition: all var(--ease);
}
.product-card:hover .product-card__arrow::before{
  background-color: var(--c-primary);
}
.product-card:hover .product-card__arrow {
  border-color: var(--c-primary);
}
.product-card:hover .product-card__name{
  color: var(--c-primary);
}

/* ============================================================
   NEWS
   ============================================================ */
.news {
  padding-block: var(--section-v-pad);
  background-color: #ffffff;
}
.news__header {
  margin-block-end: clamp(32px, 4vw, 50px);
}
.news__heading {
  font-size: clamp(22px, 3.5vw, 60px);
  font-weight: 700;
  letter-spacing: -1px;
  color: #1a1f29;
  margin-block-start: 18px;
  line-height: 1.15;
}

/* ----- Latest Information: full-width news feed (homepage) ----- */
.news__header--center { text-align: center; }
.news__header--center .news__heading { margin-block-start: 0; }

.news-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid #e6e8ec;
}
.news-feed__item {
  border-block-end: 1px solid #e6e8ec;
}
.news-feed__link {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  padding-block: 20px;
  color: inherit;
}
.news-feed__links{
    display: flex;
  align-items: center;
   gap: clamp(16px, 2.5vw, 40px);
   width: 100%;
}
.news-feed__date {
  flex-shrink: 0;
  width: 120px;
  font-size: 14px;
  font-weight: 500;
  color: #656C7C;
}
.news-feed__tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 30px;
    background-color: #656C7C;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    padding: 0 10px;
}
.news-feed__title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #242933;
  line-height: 1.5;
  transition: color var(--ease);
}
.news-feed__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: #9aa0ab;
  transition: color var(--ease);
}
.news-feed__link:hover .news-feed__title,
.news-feed__link:hover .news-feed__icon { color: var(--c-primary); }

.news-feed__footer {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(28px, 4vw, 44px);
}
.news-feed__archives {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 760px;
    height: 56px;
    background-color: #656C7C;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ease);
}
.news-feed__archives:hover { background-color: #4d4d4d; }

.news__layout {
  display: grid;
  grid-template-columns: 1fr 424px;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* Featured cards */
.news__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.news-card {
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  box-shadow: 0px 4px 16px 0px #0000000D;

}
.news-card:hover {
  border-color: rgba(216, 18, 21, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 28, 44, 0.08);
}
.news-card__figure {
  height: 189px;
  overflow: hidden;
  flex-shrink: 0;
}
.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-card:hover .news-card__img { transform: scale(1.04); }

.news-card__body {
  padding: 19px 19px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 14px;
}
.news-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background-color: var(--c-primary-dim);
  background: #D812150D;
  border: 1px solid var(--c-primary-rim);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--c-primary);
  text-transform: uppercase;
  line-height: 1;
}
.news-card__date {
  font-size: 11px;
  font-weight: 600;
  color: #656C7C;
  line-height: 1;
}
.news-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #242933;
  line-height: 1.5;
  margin-block-end: 12px;
}
.news-card__excerpt {
  font-size: 13px;
  font-weight: 400;
  color: #656C7C;
  line-height: 1.54;
  flex: 1;
  margin-block-end: 16px;
}
.news-card__more {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-primary);
  margin-block-start: auto;
  transition: color var(--ease);
}
.news-card__more:hover { color: #b80f12; }

/* News list sidebar */
.news-list {
  display: flex;
  flex-direction: column;
}
.news-list__item {
  display: flex;
  gap: 14px;
  padding-block: 15px;
  border-block-end: 1px solid #e6e8ec;
  align-items: stretch;
}
.news-list__item:last-child { border-block-end: none; }

.news-list__dot {
    width: 6px;
    border-radius: 6px;
    background-color: var(--c-primary);
    flex-shrink: 0;
    height: 6px;
    margin-top: 5px;
}
.news-list__content {
  flex: 1;
}
/* .news-list__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 6px;
} */
 .news-list__meta {
    display: flex;
    flex-direction: column;
}
.news-list__meta time {
  font-size: 11px;
  color:#656C7C;
  font-weight: 600;
}
.news-list__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--c-primary);
  text-transform: capitalize;
}
.news-list__title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1f29;
  line-height: 1.5;
  transition: color var(--ease);
}
.news-list__title:hover { color: var(--c-primary); }
.news-list .news-list__item:last-child {
  padding-block-end: 0;
}
/* ============================================================
   LEGAL PAGES (privacy-policy, terms-of-use, cookies-policy,
   accessibility, sitemap)
   ============================================================ */
.legal-page {
  /* Fixed header: header-top(45) + two-row nav(142) + breadcrumb(~45) = 232px */
  padding-block-start: calc(232px + 48px);
  padding-block-end: 80px;
  min-height: 60vh;
  background-color: var(--c-light-100);
}

.legal-page__header {
  border-block-end: 2px solid var(--c-border-light);
  padding-block-end: 24px;
  margin-block-end: 48px;
}
.legal-page__title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--c-text-dark);
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.legal-page__updated {
  font-size: 13px;
  color: var(--c-text-muted);
}

.legal-page__body {
  max-width: 800px;
}

.legal-section {
  margin-block-end: 48px;
}
.legal-section__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-dark);
  border-inline-start: 3px solid var(--c-primary);
  padding-inline-start: 12px;
  margin: 0 0 16px;
}
.legal-section__subheading {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-dark);
  margin: 24px 0 10px;
}
.legal-section p {
  font-size: 15px;
  color: var(--c-text-body);
  line-height: 1.8;
  margin-block-end: 12px;
}
.legal-section p:last-child { margin-block-end: 0; }

.legal-list {
  padding-inline-start: 20px;
  margin-block-end: 12px;
}
.legal-list li {
  font-size: 15px;
  color: var(--c-text-body);
  line-height: 1.8;
  margin-block-end: 6px;
}

.legal-link {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--ease);
}
.legal-link:hover { opacity: 0.75; }

.legal-address {
  font-style: normal;
  font-size: 15px;
  color: var(--c-text-dark);
  line-height: 1.8;
  margin-block-start: 12px;
  padding: 16px 20px;
  background-color: var(--c-light-50);
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
}

.legal-note {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-block-start: 8px;
}

/* Legal table (terms browser matrix) */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-block: 16px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  color: var(--c-text-body);
}
.legal-table th {
  background-color: var(--c-ui-bg);
  font-weight: 600;
  color: var(--c-text-white);
}
.legal-table tr:nth-child(even) td {
  background-color: var(--c-light-50);
}

/* Sitemap layout */
.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px 48px;
}
.sitemap__section { /* intentional � each section is a grid cell */ }
.sitemap__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-block-end: 2px solid var(--c-primary);
  padding-block-end: 8px;
  margin: 0 0 16px;
}
.sitemap__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sitemap__item {
  font-size: 14px;
}
.sitemap__item--child {
  padding-inline-start: 16px;
  position: relative;
}
.sitemap__item--child::before {
  content: '�';
  position: absolute;
  inset-inline-start: 0;
  color: var(--c-text-muted);
}
.sitemap__link {
  color: var(--c-text-body);
  transition: color var(--ease);
}
.sitemap__link:hover { color: var(--c-primary); }
.sitemap__link[aria-current="page"] {
  color: var(--c-primary);
  font-weight: 600;
}

/* ============================================================
   INNER PAGE BANNER
   Short dark hero for all section / product / news / contact pages.
   Full fixed header height: header-top(45) + header-nav(80) + breadcrumb(~41) = 166px.
   Add 48px of breathing room ? 214px total.
   ===========g1053
   ================================================= */
.page-banner {
    position: relative;
    padding-block-start: 108px;
    padding-block-end: 108px;
    overflow: hidden;
    /* Clear the fixed header: header-top(45) + two-row nav(142) + breadcrumb(~45) = 232px */
     margin-top: 200px;

}
.page-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-banner__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0.25; */
}
.page-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,15,18,0.85) 40%, rgba(13,15,18,0.55) 100%);
    background: url(assets/img/auto-brd-ol.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.page-banner__content {
  position: relative;
  z-index: 1;
}
.page-banner__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-block-end: 12px;
}
.page-banner__title {
    font-size: clamp(28px, 4vw, 66px) !important;
    font-weight: 800 !important;
    color: var(--c-text-white) !important;
    line-height: 1.09 !important;
    letter-spacing: -1.55px !important;
    margin-block-end: 15px !important;
    margin-block-end: 0 !important;
}
.page-banner__sub {
  font-size: 16px;
  color: var(--c-text-medium);
  max-width: 540px;
  line-height: 1.56;
}

/* ============================================================
   SECTION PAGE LAYOUT (about, solutions, news overview)
   ============================================================ */
.section-page {
  padding-block: var(--section-v-pad);
  background-color: var(--c-light-100);
}
.section-page--dark {
  background-color: var(--c-dark-800);
}
.section-page--alt {
  background-color: var(--c-light-50);
}
.section-fab, .section-page--alte{
  background: #fff;
 }
 .section-fab{
  padding-bottom: 0;
 }
/* Two-column split: text + image */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-layout--reverse { direction: rtl; }
.split-layout--reverse > * { direction: ltr; }

.split-layout__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-block-end: 12px;
}
.split-layout__heading {
  font-size: clamp(16px, 3.5vw, 52px);
  font-weight: 700;
  color: var(--c-text-dark);
  line-height: 1.15;
  margin-block-end: 20px;
}
.split-layout__heading--light { color: var(--c-text-white); }
.split-layout__body {
  font-size: 15px;
  color: var(--c-text-body);
  line-height: 1.85;
  margin-block-end: 14px;
}
.split-layout__body:last-child { margin-block-end: 0; }
.split-layout__body--light { color: var(--c-text-medium); }
.split-layout__cta {
  margin-block-start: 28px;
}
.split-layout__image {
  border-radius: 4px;
  overflow: hidden;
  /* aspect-ratio: 4/3; */
}
.split-layout__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Value cards row */
.value-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background-color: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: 6px;
  padding: 28px 24px;
}
.value-card--dark {
  background-color: var(--c-dark-700);
  border-color: var(--c-border);
}
.value-card__number {
  font-size: 40px;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  margin-block-end: 12px;
}
.value-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 8px;
}
.value-card--dark .value-card__title { color: var(--c-text-white); }
.value-card__body {
  font-size: 13px;
  color: var(--c-text-body);
  line-height: 1.7;
}
.value-card--dark .value-card__body { color: var(--c-text-medium); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
/* Banner title red accent (e.g. "About Us") */
.page-banner__title .accent { color: var(--c-primary); }

/* Global reach: text + flag chips on the left, stat cards on the right */
.reach-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.flag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 28px;
}
.flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-dark);
}
.flag-chip__flag { font-size: 16px; line-height: 1; }
.flag-chip__flag img{
  width: 20px !important;
  border: 1px solid var(--c-border-light) !important;
    border-radius: 50px !important;
}

/* Statistic cards with a red top rule */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-top: 3px solid var(--c-primary);
  border-radius: 4px;
  padding: 38px 16px 34px;
  text-align: center;
}
.stat-card__icon {
  display: flex;
  justify-content: center;
  margin-block-end: 18px;
  color: var(--c-primary);
}
.stat-card__number {
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 800;
  color: var(--c-text-dark);
  line-height: 1;
  margin-block-end: 12px;
}
.stat-card__label {
  font-size: 13px;
  color: var(--c-text-body);
  line-height: 1.5;
}

/* "What drives us forward" driver cards */
.drivers-intro { max-width: 760px; }
.drivers-intro__sub {
  font-size: 15px;
  color: var(--c-text-body);
  line-height: 1.7;
  margin-block-start: 16px;
}
.drivers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-block-start: 40px;
}
.driver-card {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-left: 3px solid var(--c-primary);
  border-radius: 4px;
  padding: 28px 26px 34px;
}
.driver-card__num {
  font-size: 30px;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  margin-block-end: 14px;
}
.driver-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 20px;
}
.driver-card__body {
  font-size: 13px;
  color: var(--c-text-body);
  line-height: 1.7;
}

/* ============================================================
   PRODUCTS SECTION PAGE (index listing)
   ============================================================ */
.products-page__intro {
  max-width: 720px;
  margin-block-end: 56px;
}
.products-page__intro p {
  font-size: 15px;
  /* color: var(--c-text-body); */
  line-height: 1.85;
  margin-block-end: 12px;
}
/* Re-uses .products__grid and .product-card from homepage */

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.product-detail {
  padding-block: var(--section-v-pad);
  background-color: var(--c-light-100);
}
.product-detail__intro {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: start;
  margin-block-end: 72px;
}
.product-detail__text {}
.product-detail__heading {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 20px;
  line-height: 1.3;
}
.product-detail__body {
  font-size: 15px;
  color: var(--c-text-body);
  line-height: 1.85;
  margin-block-end: 14px;
}
.product-detail__body:last-child { margin-block-end: 0; }
.product-detail__image {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: sticky;
  top: 180px; /* fixed header (166px) + 14px gap */
}
.product-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Spec table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-block: 32px;
}
.spec-table caption {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-primary);
  text-align: left;
  padding-block-end: 12px;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: 12px 16px;
  border-block-end: 1px solid var(--c-border-light);
  color: var(--c-text-body);
  vertical-align: top;
}
.spec-table th {
  width: 200px;
  font-weight: 600;
  color: var(--c-text-dark);
  background-color: var(--c-light-50);
}

/* Applications grid */
.applications {
  background-color: var(--c-dark-800);
  padding-block: var(--section-v-pad);
}
.applications__heading {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--c-text-white);
  margin-block-end: 40px;
}
.applications__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.application-tag {
  background-color: var(--c-dark-700);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-medium);
  letter-spacing: 0.5px;
}

/* Related products */
.related-products {
  padding-block: var(--section-v-pad);
  background-color: var(--c-light-50);
}
.related-products__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 32px;
}
/* Re-uses .products__grid and .product-card from homepage */

/* ============================================================
   NEWS PAGE
   ============================================================ */
.news-page {
  padding-block: var(--section-v-pad);
  background-color: var(--c-dark-800);
}
.news-page__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}
.news-page__articles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Re-uses .news-card from homepage */
.news-card--listed {
  border-block-end: 1px solid var(--c-border);
  padding-block-end: 32px;
  margin-block-end: 32px;
}
.news-card--listed:last-child {
  border: none;
  margin: 0;
}
/* Sidebar */
.news-sidebar {}
.news-sidebar__section {
  margin-block-end: 40px;
}
.news-sidebar__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text-faint);
  border-block-end: 1px solid var(--c-border);
  padding-block-end: 10px;
  margin-block-end: 16px;
}
.news-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-cat-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.news-cat-list a {
  color: var(--c-text-medium);
  transition: color var(--ease);
}
.news-cat-list a:hover { color: var(--c-primary); }
.news-cat-list span {
  color: var(--c-text-faint);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page {
  padding-block: var(--section-v-pad);
  /* background-color: var(--c-light-100); */
  background-color: #fff;
}
.contact-page__layout {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 50px;
  align-items: start;
}
.contact-form__notice {
  font-size: 13px;
  color: var(--c-text-body);
  line-height: 1.7;
  padding: 14px 16px;
  background: var(--c-light-50);
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
}
.contact-form__notice a,
.contact-form__consent-text a {
  /* color: var(--c-primary); */
}
.contact-form__note .link-primary {
  color: var(--c-primary);
}
.contact-form__group {
  margin-block-end: 26px;
}
.contact-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark);
  margin-block-end: 7px;
  letter-spacing: 0;
  line-height: 100%;
}
.contact-form__required {
  color: #000000;
  margin-inline-start: 1px;
}
.contact-section__lead .link-primary{
  color: #656c7c;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E5;
  border-radius: 4px;
  padding: 16px 14px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--c-text-dark);
  transition: border-color var(--ease);
  outline: none;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: #99A1B5;
    opacity: 1;
}

.contact-form__select option:disabled:checked {
    color: #99A1B5;
}

.contact-form__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.89746 3.75L0.000347137 0L7.79458 0L3.89746 3.75Z' fill='%239EA5B4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 8px 4px;

    padding-right: 40px;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--c-primary);
}
.contact-form__textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form__note {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-block-start: 6px;
}
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 24px;
}
.contact-form__consent input[type="checkbox"] {
  margin-block-start: 3px;
  flex-shrink: 0;
  accent-color: var(--c-primary);
}
.contact-form__consent-text {
  font-size: 13px;
  color: var(--c-text-body);
  line-height: 1.538;
}
.contact-form__submit {
    width: fit-content;
    padding: 22px 44px;
    height: unset;
    line-height: 1;
    position: relative;
}
.contact-form__submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
/* Spinner shown while the real AJAX submission is in flight (see main.js) — reuses the @keyframes teijin-spin defined alongside .resume-form__submit.is-loading. */
.contact-form__submit.is-loading {
  color: transparent;
}
.contact-form__submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: teijin-spin 0.6s linear infinite;
}
.contact-form__success {
  grid-column: 1 / -1;
  margin-block-start: 8px;
  padding: 16px 20px;
  border-radius: 8px;
  background-color: #F1F8F0;
  border: 1px solid #BFE0BC;
  color: #2f6b2a;
  font-size: 14px;
  font-weight: 600;
}
.contact-form__error {
  grid-column: 1 / -1;
  margin-block-start: 8px;
  padding: 16px 20px;
  border-radius: 8px;
  background-color: #FDEDED;
  border: 1px solid #F3C2C2;
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 600;
}
.contact-form__input--error,
.contact-form__select.contact-form__input--error,
.contact-form__textarea.contact-form__input--error {
  border-color: var(--c-primary);
}
/* Contact page � copyright-only footer has no inner section above it */
.site-footer__bottom--solo {
  padding-block: 28px;
}

/* Contact info panel */
.contact-info {
    background-color: var(--c-dark-800);
    border-radius: 8px;
    padding: 20px 26px 26px;
    border-top: 3px solid #D81215;
    margin-top: 20px;
}
.contact-info__heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text-white);
    margin-block-end: 15px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--c-border);
    line-height: 100%;
}
#cf-consent {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #E0E0E5;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-block-start: 0;
}

#cf-consent:checked {
    background: #D81215;
    border-color: #D81215;
}

#cf-consent:checked::after {
    content: "✔";
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -58%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.cnc-link{
  text-decoration: underline !important;
}
.contact-info__item {
    margin-block-end: 12px;
    border-bottom: 1px solid #2E333D80;
    padding-bottom: 12px;
}
.contact-info__item:last-child { margin-block-end: 0;
border: none;
padding-bottom: 0; }
.contact-info__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-primary);
  /* margin-block-end: 6px; */
}
.contact-info__value {
    font-size: 16px;
    color: var(--c-text-medium);
    line-height: 25px;
    font-weight: 400;
}
.contact-info__value a { color:  var(--c-text-medium) ;
text-decoration: underline; }
.contact-info__note {
  font-size: 12px;
  color: var(--c-text-faint);
  margin-block-start: 24px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--c-border);
  line-height: 1.6;
}

/* ============================================================
   BACK-TO-TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  inset-block-end: 32px;
  inset-inline-end: 32px;
  z-index: 300;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background-color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color var(--ease);
}
.back-to-top img {
  width: 24px;
  height: 24px;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.back-to-top:hover { background-color: #b80f12; }

/* ============================================================
   COOKIE CONSENT MODAL (CMP)
   Categorized consent (Necessary/Preferences/Statistics/Marketing),
   replacing the earlier single accept/reject bottom banner.
   Visual refresh: card surface, sticky tab bar + action bar,
   soft category tiles and light-track toggles.
   ============================================================ */
.cc-modal {
  --cc-surface:      #ffffff;
  --cc-surface-soft: #f6f7fa;
  --cc-line:         #e6e8ef;
  --cc-ink:          #1b1f2a;
  --cc-ink-soft:     #5c6474;
  --cc-radius:       16px;

  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background-color: rgba(13, 16, 24, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: cc-overlay-in 0.28s ease both;
}
.cc-modal.is-hidden {
  display: none;
}
@keyframes cc-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cc-box-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.cc-modal__box {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: min(88vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--cc-surface);
  border-radius: var(--cc-radius);
  box-shadow:
    0 2px 4px rgba(16, 20, 30, 0.04),
    0 28px 70px rgba(16, 20, 30, 0.28);
  animation: cc-box-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  scrollbar-width: thin;
  scrollbar-color: #cfd4e0 transparent;
}
.cc-modal__box::-webkit-scrollbar {
  width: 8px;
}
.cc-modal__box::-webkit-scrollbar-thumb {
  background-color: #cfd4e0;
  border-radius: 999px;
}
.cc-modal__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--cc-ink-soft);
}
.cc-modal__text:last-child {
  margin-bottom: 0;
}
.cc-modal__link {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--ease);
}
.cc-modal__link:hover {
  opacity: 0.72;
}

/* -- Tabs (sticky, so they stay in view while a panel scrolls) -- */
.cc-modal__tabs {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 6px 10px 0;
  background-color: var(--cc-surface);
  border-block-end: 1px solid var(--cc-line);
  border-start-start-radius: var(--cc-radius);
  border-start-end-radius: var(--cc-radius);
}
.cc-tab {
  position: relative;
  flex: 1;
  padding: 15px 8px 14px;
  background: none;
  border: none;
  border-radius: 8px 8px 0 0;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--cc-ink-soft);
  cursor: pointer;
  transition: color var(--ease), background-color var(--ease);
}
.cc-tab::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background-color: var(--c-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.cc-tab:hover {
  color: var(--cc-ink);
  background-color: var(--cc-surface-soft);
}
.cc-tab.is-active {
  color: var(--c-primary);
  font-weight: 700;
}
.cc-tab.is-active::after {
  transform: scaleX(1);
}
.cc-tab:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -3px;
}

/* -- Panels (Consent/Details/About) ----------------------------- */
.cc-modal__panel {
  padding: 26px 30px 28px;
}
.cc-modal__panel[hidden] {
  display: none;
}
.cc-modal__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.35;
  color: var(--cc-ink);
}

/* -- Category tiles --------------------------------------------- */
.cc-modal__categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-block-start: 20px;
}
.cc-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 8px 15px;
  background-color: var(--cc-surface-soft);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  transition: border-color var(--ease), background-color var(--ease);
}
.cc-category:hover {
  border-color: #d3d8e4;
  background-color: #f1f3f8;
}
.cc-category:has(input:checked) {
  border-color: var(--c-primary-rim);
  background-color: var(--c-primary-dim);
}
.cc-category__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-align: center;
  color: var(--cc-ink);
  cursor: pointer;
}
.cc-category:has(input:disabled) .cc-category__name {
  cursor: default;
}

/* -- Details tab ------------------------------------------------ */
.cc-details-group {
  padding: 16px 18px;
  background-color: var(--cc-surface-soft);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
}
.cc-details-group + .cc-details-group {
  margin-block-start: 12px;
}
.cc-details-group__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--cc-ink);
}
.cc-details-group__list {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cc-ink-soft);
}
.cc-details-group__list li + li {
  margin-block-start: 4px;
}

/* -- Toggle switch ---------------------------------------------- */
.cc-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.cc-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cc-toggle__track {
  position: absolute;
  inset: 0;
  background-color: #ccd2df;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(16, 20, 30, 0.12);
  transition: background-color 0.22s ease;
}
.cc-toggle__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 20, 30, 0.28);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-toggle:hover input:not(:disabled) + .cc-toggle__track {
  background-color: #bfc6d6;
}
.cc-toggle input:checked + .cc-toggle__track {
  background-color: var(--c-primary);
  box-shadow: inset 0 1px 2px rgba(120, 6, 8, 0.25);
}
.cc-toggle:hover input:checked:not(:disabled) + .cc-toggle__track {
  background-color: #c30f12;
}
.cc-toggle input:checked + .cc-toggle__track::before {
  transform: translateX(20px);
}
.cc-toggle input:disabled {
  cursor: not-allowed;
}
.cc-toggle input:disabled + .cc-toggle__track {
  opacity: 0.62;
}
.cc-toggle input:focus-visible + .cc-toggle__track {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* -- Actions (sticky footer bar) -------------------------------- */
.cc-modal__actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 30px 18px;
  background-color: var(--cc-surface);
  border-block-start: 1px solid var(--cc-line);
  border-end-start-radius: var(--cc-radius);
  border-end-end-radius: var(--cc-radius);
}
.cc-btn {
  flex: 1;
  min-width: 132px;
  padding: 13px 18px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease),
              color var(--ease), box-shadow var(--ease), transform 0.15s ease;
}
.cc-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.cc-btn:active {
  transform: translateY(1px);
}
.cc-btn--outline {
  background-color: var(--cc-surface);
  border: 1px solid #ccd2df;
  color: var(--cc-ink);
}
.cc-btn--outline:hover {
  background-color: var(--cc-surface-soft);
  border-color: var(--cc-ink);
}
.cc-btn--primary {
  background-color: var(--c-primary);
  border: 1px solid var(--c-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(216, 18, 21, 0.25);
}
.cc-btn--primary:hover {
  background-color: #b80f12;
  border-color: #b80f12;
  box-shadow: 0 8px 20px rgba(216, 18, 21, 0.32);
}
body.cc-modal-open {
  overflow: hidden;
}

/* -- Reopen button (persists once a choice has been made) ------ */
.cc-reopen {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background-color: var(--c-dark-800);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(10, 14, 25, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, background-color var(--ease),
              box-shadow var(--ease);
}
.cc-reopen:hover {
  transform: translateY(-2px) scale(1.06);
  background-color: var(--c-primary);
  box-shadow: 0 10px 24px rgba(216, 18, 21, 0.32);
}
.cc-reopen:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
.cc-reopen.is-hidden {
  display: none;
}
.cc-reopen svg {
  width: 22px;
  height: 22px;
}

/* -- Responsive ------------------------------------------------- */
@media (max-width: 640px) {
  .cc-modal {
    padding: 0;
    align-items: flex-end;
  }
  .cc-modal__box {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0;
  }
  .cc-modal__tabs {
    padding: 4px 6px 0;
  }
  .cc-tab {
    padding: 13px 6px 12px;
    font-size: 12px;
  }
  .cc-modal__panel {
    padding: 22px 20px 24px;
  }
  .cc-modal__title {
    font-size: 17px;
  }
  .cc-modal__categories {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-modal__actions {
    flex-direction: column-reverse;
    padding: 14px 20px 18px;
    border-radius: 0;
  }
  .cc-btn {
    width: 100%;
    flex: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-modal,
  .cc-modal__box {
    animation: none;
  }
  .cc-tab::after,
  .cc-toggle__track,
  .cc-toggle__track::before,
  .cc-btn,
  .cc-reopen {
    transition: none;
  }
}

/* ============================================================
   CONTACT PAGE � "Handling of Personal Information" popup
   Rendered server-side by the Contact Form widget (hidden by default),
   revealed by main.js a moment after the page loads.
   ============================================================ */
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(20, 28, 44, 0.55);
  animation: consent-fade 0.25s ease;
}
.consent-modal[hidden] {
  display: none;
}
@keyframes consent-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.consent-modal__box {
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background-color: #ffffff;
  padding: 36px 40px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.consent-modal__title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.3;
}
.consent-modal__text {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #444a55;
}
.consent-modal__link {
  color: var(--c-primary);
  text-decoration: underline;
}
.consent-modal__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block: 6px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #242933;
  cursor: pointer;
}
.consent-modal__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.consent-modal__actions {
  display: flex;
  justify-content: flex-end;
}
.consent-modal__ok {
  min-width: 88px;
}
.consent-modal__ok:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Lock background scroll while the consent popup is open */
body.consent-open {
  overflow: hidden;
}

/* ============================================================
   CAREER PAGE � "Upload Your Resume" form
   ============================================================ */
.resume-section {
  padding-block: clamp(56px, 8vw, 110px);
  background-color: #ffffff;
}
.resume-section__head {
  text-align: center;
  margin-block-end: clamp(34px, 5vw, 40px);
}
.resume-section__head .section-label { margin-block-end: 14px; }
.resume-section__head .section-label__bar { margin-block-end: 18px; }
.resume-section__heading {
  margin: 0;
  color: var(--c-text-dark);
}
.resume-card {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  background-color: #ffffff;
  border: 1px solid #ECECEF;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(20, 28, 44, 0.07);
  padding: clamp(28px, 5vw, 56px);
}
.resume-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}
.resume-form__group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* The drag-and-drop area spans the full width below the input fields */
.resume-form__group--file {
  grid-column: 1 / -1;
}
/* Inputs match the contact form exactly (font, colour, size, fill) */
.resume-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark);
  margin-block-end: 7px;
  letter-spacing: 0;
  line-height: 100%;
}
.resume-form__required {
  color: #000000;
  margin-inline-start: 1px;
}
.resume-form__input,
.resume-form__select {
  width: 100%;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E5;
  border-radius: 4px;
  padding: 16px 14px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--c-text-dark);
  transition: border-color var(--ease);
  outline: none;
}
.resume-form__input::placeholder {
  color: #99A1B5;
  opacity: 1;
}
.resume-form__input:focus,
.resume-form__select:focus {
  border-color: var(--c-primary);
}
.resume-form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.89746 3.75L0.000347137 0L7.79458 0L3.89746 3.75Z' fill='%239EA5B4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 8px 4px;
}

/* ----- Drag & drop resume area ----- */
.resume-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  min-height: 150px;
  padding: 24px;
  text-align: center;
  border: 1px solid #E4E6EA;
  border-radius: 10px;
  background-color: #FAFAFB;
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}
.resume-dropzone:hover,
.resume-dropzone.is-dragover {
  border-color: var(--c-primary);
  background-color: #FCF2F2;
}
.resume-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.resume-dropzone__icon {
  color: var(--c-primary);
  line-height: 0;
}
.resume-dropzone__text {
  max-width: 250px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #242933;
}
.resume-dropzone.has-file {
  border-color: var(--c-primary);
  border-style: solid;
}

/* ----- Submit ----- */
.resume-form__submit {
  margin-block-start: 36px;
  position: relative;
}
.resume-form__submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
/* Spinner shown while the real AJAX submission is in flight (see main.js) */
.resume-form__submit.is-loading {
  color: transparent;
}
.resume-form__submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: teijin-spin 0.6s linear infinite;
}
@keyframes teijin-spin {
  to { transform: rotate(360deg); }
}
.resume-form__success {
  margin-block-start: 24px;
  padding: 16px 20px;
  border-radius: 8px;
  background-color: #F1F8F0;
  border: 1px solid #BFE0BC;
  color: #2f6b2a;
  font-size: 14px;
  font-weight: 600;
}
/* Error feedback for the real AJAX submission — same shape as .resume-form__success above. */
.resume-form__error {
  margin-block-start: 24px;
  padding: 16px 20px;
  border-radius: 8px;
  background-color: #FDEDED;
  border: 1px solid #F3C2C2;
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 600;
}
.resume-form__input--error,
.resume-form__select.resume-form__input--error {
  border-color: var(--c-primary);
}

/* ============================================================
   RAW MATERIAL -> FINAL PRODUCT FLOW (automotive page)
   ============================================================ */
.flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 2vw, 28px);
    margin-block-start: clamp(28px, 4vw, 48px);
    max-width: 1440px;
    width: 100%;
    margin: auto;
}
.flow.flow-more{
  align-items: flex-start;
}
.flow-card {
  display: flex;
  flex-direction: column;
  /* padding: 16px; */
    background-color: var(--c-text-white);
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 16px 0px #0000000D;
    transition: box-shadow var(--ease), transform var(--ease);
}
/* Clipped frame so the corner tag's top-left rounds with the image */
.flow-card__frame {
  position: relative;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.flow-card__media {
  margin: 0;
}
.flow-card__media img {
  display: block;
  width: 100%;
  height: clamp(240px, 27vw, 400px) !important;
  object-fit: cover;
}
/* Corner banner tag with a slanted bottom-right edge */
.flow-card__tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: 10px 46px 10px 26px;
  font-size: clamp(15px, 1.4vw, 16px);
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}
.flow-card__tag--raw   { background: #656C7C; }
.flow-card__tag--final { background: #656C7C; }
.flow-card__body {
  padding: 25px 30px 25px;
}
.flow-card__title {
  margin: 0 0 0;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.flow-card__title--raw   { color: var(--c-text-dark); }
.flow-card__title--final { color: var(--c-text-dark); }
.flow-card__text {
font-size: 16px;
    color: var(--c-text-body);
    line-height: 1.5;
}

/* Connecting arrow between the two cards — its box is exactly as tall as the
   media image and top-aligned with it, so the arrow stays centered on the
   image regardless of how tall the cards/columns grow */
.flow__arrow {
  align-self: center;
  height: clamp(240px, 27vw, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-more .flow__arrow {
  align-self: flex-start;
  margin-block-start: 20px;
}
.right-multi  .flow-more .flow__arrow {
    align-self: center;
    margin-block-start: 20px;
}
.flow__arrow-img {
  width: clamp(44px, 6vw, 104px);
  height: auto;
}
/* Bulleted application list (rows with multiple applications) */
.flow-card__apps {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.flow-card__apps li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 16px;
  color: var(--c-text-body);
  line-height: 1.5;
}
.flow-card__apps li::before {
  content: "";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}
/* Small reference / know-more link inside a flow card */
.flow-card__ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
}
.flow-card__ref:hover { text-decoration: underline; }
.flow-card__note {
  margin-block-start: 8px;
  font-size: 13px;
  color: var(--c-text-body);
  opacity: 0.75;
}
.flow-col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Multi-application rows: give the application side more room (desktop) */
@media (min-width: 861px) {
  /* .flow--multi {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.7fr);
  } */
  /* Keep the left material card compact so it matches the small app cards */
  /* .flow--multi .flow-card__media img {
    height: clamp(170px, 15vw, 210px);
  } */
}
/* Group of application cards: 2 per line, wrap up/down */
.flow-app-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
  align-content: start;
}
.left-car .flow-app-group{
  grid-template-columns: 1fr;
}

/* Group of material cards (left side): 2 per line like the app cards */
.flow-mat-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
  align-content: start;
}
.right-multi .flow-mat-group {
    grid-template-columns: 1fr;
}
.right-multi .flow-mat-group  .app-card__media img {
    height: clamp(170px, 27vw, 400px) !important;
}
/* Optional short description inside a compact card */
.app-card__text {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--c-text-body);
  line-height: 1.5;
}
.app-card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-text-white);
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 16px 0px #0000000D;
  transition: box-shadow var(--ease), transform var(--ease);
}
.app-card:hover {
  box-shadow: 0px 8px 24px 0px #00000014;
  transform: translateY(-2px);
}
/* Clipped frame so the corner tag rounds with the image */
.app-card__frame {
  position: relative;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.app-card .flow-card__tag {
  padding: 8px 34px 8px 18px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.app-card__media { margin: 0; }
.app-card__media img {
  display: block;
  width: 100%;
  height: clamp(170px, 15vw, 210px) !important;
  object-fit: cover;
}
.app-card__title {
  margin: 0;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text-dark);
  position:relative;
  margin-left: 10px;
}
.flow-card__title{
  position: relative;
}
.left-car  .app-card__media img {
 height: clamp(170px, 34vw, 380px) !important
}
/* .app-card__title:before,.flow-card__title:before {
      content: "";
    position: absolute;
    width: 3px;
    background-color: var(--c-primary);
    border-radius: 20px;
    height: 26px;
    left: 5px;
} */

/* ============================================================
   WATER-BASED ADHESIVE — BEFORE / AFTER COMPARISON (automotive page)
   ============================================================ */
.wba__compare {
  margin: 0;
}
.wba__panel {
  --wba-gutter: clamp(40px, 6vw, 124px);
  position: relative;
  max-width: 1012px;
  margin-inline: auto;
  padding: 18px var(--wba-gutter);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background-color: #24344A;
  overflow: hidden;
}
/* Vertical divider between the Before / After columns.
   Fades out at both ends so it never touches the panel edges,
   and passes behind the badge. */
.wba__panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 534px;
  max-height: 100%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0) 0%,
              #FFFFFF 50%,
              rgba(255, 255, 255, 0) 100%);
  opacity: 0.5;
  pointer-events: none;
}
/* Oversized "Before" / "After" watermarks behind the images. */
.wba__ghost {
  position: absolute;
  top: 50%;
  height: 84px;
  font-family: 'Be Vietnam Pro', var(--font-main);
  font-size: 114px;
  font-weight: 800;
  line-height: 84px;
  letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.1;
  transform: translate(-50%, -50%) rotate(90deg);
  pointer-events: none;
  user-select: none;
}
.wba__ghost--before { left: calc(var(--wba-gutter) / 2); }
.wba__ghost--after  { left: calc(100% - (var(--wba-gutter) / 2)); }
.wba__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 18px;
  row-gap: 10px;
}
.wba__cell {
  aspect-ratio: 1.45;
  border-radius: 8px;
  background-color: #16202C;
  overflow: hidden;
}
.wba__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Centre chevron badge */
.wba__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--c-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
  color: var(--c-text-white);
  pointer-events: none;
}
.wba__badge svg {
  width: 26px;
  height: auto;
}
@media (max-width: 991px) {
  .wba__panel {
    --wba-gutter: clamp(30px, 8vw, 78px);
    padding-block: 14px;
  }
  .wba__ghost {
    height: 54px;
    font-size: 72px;
    line-height: 54px;
  }
  .wba__badge {
    width: 46px;
    height: 46px;
  }
  .wba__badge svg {
    width: 21px;
  }
}
@media (max-width: 767px) {
  .wba__panel {
    --wba-gutter: 34px;
    padding-block: 10px;
    border-radius: 8px;
  }
  .wba__panel::after {
    height: 100%;
    width: 1px;
  }
  .wba__grid {
    column-gap: 8px;
    row-gap: 5px;
  }
  .wba__ghost {
    height: 24px;
    font-size: 32px;
    line-height: 24px;
  }
  .wba__badge {
    width: 36px;
    height: 36px;
  }
  .wba__badge svg {
    width: 16px;
  }
}
@media (max-width: 480px) {
  .wba__panel {
    --wba-gutter: 26px;
    padding-block: 8px;
  }
  .wba__ghost {
    height: 18px;
    font-size: 24px;
    line-height: 18px;
  }
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.search-page {
  padding-block-start: calc(232px + 48px);
  padding-block-end: 80px;
  min-height: 60vh;
  background-color: var(--c-light-100);
}
.search-page__header {
  border-block-end: 2px solid var(--c-border-light);
  padding-block-end: 24px;
  margin-block-end: 48px;
}
.search-page__title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 8px;
}
.search-page__query {
  font-size: 15px;
  color: var(--c-text-body);
}
.search-page__query strong { color: var(--c-text-dark); font-weight: 600; }
.search-results { list-style: none; }
.search-result {
  padding-block: 24px;
  border-block-end: 1px solid var(--c-border-light);
}
.search-result__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 6px;
}
.search-result__title a {
  color: inherit;
  transition: color var(--ease);
}
.search-result__title a:hover { color: var(--c-primary); }
.search-result__url {
  font-size: 12px;
  color: var(--c-primary);
  margin-block-end: 8px;
  letter-spacing: 0.3px;
}
.search-result__desc {
  font-size: 14px;
  color: var(--c-text-body);
  line-height: 1.7;
}
.search-no-results {
  padding-block: 48px;
  text-align: center;
  color: var(--c-text-body);
}
.search-no-results__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 12px;
}
.search-form-inline {
  display: flex;
  gap: 12px;
  margin-block-start: 32px;
  max-width: 560px;
}
.search-form-inline__input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--c-text-dark);
  background: #fff;
  outline: none;
  transition: border-color var(--ease);
}
.search-form-inline__input:focus { border-color: var(--c-primary); }
.search-form-inline__btn {
  height: 48px;
  padding: 0 24px;
  flex-shrink: 0;
}
.search-page__output { margin-block-start: 40px; }

/* ============================================================
   PHASE 8 � SOLUTIONS SUB-PAGES (Figma)
   ============================================================ */

/* Range intro � "OUR PRODUCTS" eyebrow + heading + helper line */
.range-intro {
  margin-block-end: 40px;
  /* max-width: 760px; */
  text-align: center;
}
.range-intro__heading {
    font-size: clamp(28px, 3.2vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--c-text-dark);
    margin-block: 0;
    margin-bottom: 0px;
}
.range-intro__sub {
    font-size: 16px;
    color: var(--c-text-body);
    line-height: 1.85;
    font-weight: 400;
}
/* Solution card grid � Automotive / Special Fibers / Industrial */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.solution-card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-text-white);
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 16px 0px #0000000D;
  transition: box-shadow var(--ease), transform var(--ease);
}
.solution-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}
.solution-card__figure {
  overflow: hidden;
  background-color: var(--c-light-50);
}
.solution-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.solution-card:hover .solution-card__img { transform: scale(1.04); }
.solution-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 25px 30px 25px;
}
.solution-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text-dark);
  line-height: 1.2;
  margin-block-end: 10px;
}
.solution-card__text {
  font-size: 16px;
  color: var(--c-text-body);
  line-height: 1.5;
  margin-block-end: 15px;
}
.solution-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* margin-block-start: auto; */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-primary);
}
/* .solution-card__more::after {
  content: '?';
  font-size: 14px;
  transition: transform var(--ease);
} */
.solution-card:hover .solution-card__more::after { transform: translateX(4px); }

/* CTA band � "Ready to collaborate on your next project?" */
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--c-dark-900);
}
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-band__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0.28; */
}
.cta-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,15,18,0.88) 40%, rgba(13,15,18,0.6) 100%);
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: clamp(48px, 6vw, 72px);
}
.cta-band__heading {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.43;
  color: var(--c-text-white);
  margin-block-end: 13px;
}
.cta-band__sub {
  font-size: 15px;
  color: var(--c-text-medium);
  line-height: 1.7;
}

/* -- Functional Fabrics � process timeline ---------------- */
.process-intro {
  max-width: 1100px;
  margin-block-end: 40px;
}
.process-intro__heading {
    font-size: clamp(24px, 2.8vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--c-text-dark);
    margin-block: 18px 18px;
}
.process-intro__body {
  font-size: 16px;
  color: var(--c-text-body);
  line-height: 1.85;
}
/* Full-width alternating bands; container lives inside each step */
.process-timeline {
  display: flex;
  flex-direction: column;
}
.process-step:nth-child(odd)  { background-color: var(--c-light-50); }
.process-step:nth-child(even) { background-color: #ffffff; }
.process-step__inner {
  position: relative;
  display: grid;
  grid-template-columns: 180px 180px minmax(0, 1fr) clamp(320px, 30vw, 510px);
  gap: 52px;
  align-items: center;
  padding-block: 44px;
}
.process-step__num {
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 800;
    color: var(--c-primary-dim);
    line-height: 1;
    /* text-align: center; */
}
/* Continuous vertical connector line, aligned to the marker-column centre */
.process-step__inner::before {
  content: '';
  position: absolute;
  left: 19.5%;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color:  rgb(247 208 208);;
  z-index: 0;
}
.process-step:first-child .process-step__inner::before { top: 68%; }
.process-step:last-child  .process-step__inner::before { bottom: 68%; }
/* Red dot centred in the gap between circles (at each band boundary) */
.process-step__inner::after {
  content: '';
  position: absolute;
  left: 19.55%;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--c-primary);
  transform: translate(-50%, 50%);
  z-index: 1;
}
.process-step:last-child .process-step__inner::after { display: none; }
.cta-band__inner .btn--lg {
    height:46px;
    padding: 14px 30px;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 1.2px;
}
/* Red marker circle with soft halo ring (white gap + pink rim) */
.process-step__marker {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 0 0 6px #ffffff, 0 0 0 8px var(--c-primary-dim); */
}
.process-step__marker::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 10px solid rgb(247 208 208);
  border-radius: 50%;
  z-index: 0;
}
.process-step__icon {  height: 80px; color: #fff; }
.process-step__icon svg { width: 100%; height: 100%; display: block; }
.process-step__title {
    font-size: clamp(22px, 2.4vw, 42px);
    font-weight: 800;
    color: var(--c-primary);
    margin-block-end: 10px;
    line-height: 1.285;
}
.process-step__text {
  font-size: 17px;
  color: var(--c-text-body);
  line-height: 1.8;
  max-width: 621px;
  width: 100%;
}
.process-step__image {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.process-step__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- Functional Fabrics � key original materials ---------- */
.material-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-block-start: 40px;
}
.material-card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-text-white);
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease);
}
.material-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  transform: translateY(-3px);
}
.material-card__logo {
  /* height: 150px; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 24px; */
  /* border-block-end: 1px solid var(--c-border-light); */
}
.material-card__logo img {  width: 100%;
object-fit: cover; }
/* .material-card__logo--dark { background-color: var(--c-dark-900); } */
/* Text fallback brand mark (used until real logo assets are supplied) */
.material-card__brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c-text-dark);
}
.material-card__logo--dark .material-card__brand { color: var(--c-text-white); }
.material-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 26px;
}
.material-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 10px;
}
.material-card__text {
  font-size: 16px;
  color: var(--c-text-body);
  line-height: 1.75;
  margin-block-end: 18px;
}
sup {
    font-size: 16px;
    vertical-align: top;
    position: relative;
    top: -2px;
}
.material-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-primary);
}
.material-card__more::after { content: '?'; transition: transform var(--ease); }
.material-card:hover .material-card__more::after { transform: translateX(4px); }
.section-map{
  padding-block: 20px;
  padding-right: 20px;
  background-color: #fff;
}
/* -- Functional Fabrics � global production bases --------- */
.global-bases__layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}
.global-bases__heading {
  font-size: clamp(24px, 2.6vw, 52px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.153;
  color: var(--c-text-dark);
  margin-block: 18px 18px;
}
.global-bases__body {
    font-size: 17px;
    color: var(--c-text-body);
    line-height: 1.76;
}
.global-bases__text {
    margin-left: clamp(0px, 6vw, 100px);
}
.global-bases__map {
  border-radius: 6px;
  overflow: hidden;
}
.global-bases__map img { width: 100%; height: auto; }

/* -- Contact redesign (Figma) � 2-col form + help box ----- */
.contact-form--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.contact-form--grid .contact-form__group--full,
.contact-form--grid .contact-form__consent { grid-column: 1 / -1; }
.contact-section__head { margin-block-end: 32px; }
.contact-section__title {
    font-size: clamp(28px, 3.2vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--c-text-dark);
    margin-block: 18px 12px;
    margin-bottom: 5px;
}
.contact-section__lead {
    font-size: 16px;
    color: var(--c-text-body);
    line-height: 1.85;
    font-weight: 400;
    letter-spacing: 0%;
}
.contact-info__topline {
  height: 3px;
  background-color: var(--c-primary);
  margin: -36px -32px 28px;
}
.contact-help {
    margin-block-start: 24px;
    padding: 22px 24px;
    border: 1px solid var(--c-primary-rim);
    border-radius: 8px;
    background-color: var(--c-primary-dim);
    background: #D812150D;
    border: 1px solid #D8121538;
    border-top: 3px solid #D81215;
}
.contact-help__top {
  height: 3px;
  background-color: var(--c-primary);
  margin: -24px -28px 18px;
  border-radius: 6px 6px 0 0;
  display: none;
}
.contact-help__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 6px;
  line-height: 100%;
}
.contact-help__text {
  font-size: 13px;
  color: var(--c-text-body);
  margin-block-end: 10px;
  font-weight: 400;
  line-height: 100%;
}
.contact-help__mail {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-primary);
    letter-spacing: 0.2px;
    line-height: 100%;
}
.contact-form__group--full{
  margin-block-end: 0;
}
.last-card{
  padding-bottom:0
}
.sc-bg{
  background-color:#fff;
}


/* ============================================================
 * layout_pc.css
 * Desktop layout: site header, global nav, mobile menu,
 * and site footer.
 * Note: Uses desktop-first (max-width) breakpoints.
 * Responsive overrides for header/footer are in layout_sp.css.
 * ============================================================
 * - Header
 * - Footer
 * ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
}

/* --------------------------------------------------
 * Thin corporate-identity bar (Teijin brand logo)
 * Logo height target: 26px (PC) per GUIDE.md §3.3
 * Background: #FFFFFF only per GUIDE.md §3.3
 * -------------------------------------------------- */
.header-top {
  /* height: 45px; */
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 22px 7px 22px;
  max-height: 60px;
  overflow: hidden;
  transition: max-height var(--ease), padding var(--ease), opacity var(--ease);
}

/* On scroll: hide the white Teijin brand bar, leaving only the black nav. */
.site-header.is-scrolled .header-top {
  max-height: 0;
  padding-block: 0;
  opacity: 0;
}
/* .site-header.is-scrolled .header-nav {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
} */
.header-top__logo {
  height: 26px;
  width: auto;
}

/* --------------------------------------------------
 * Primary navigation bar
 * -------------------------------------------------- */
.header-nav {
  /* background-color: var(--c-dark-nav); */
  background-color: #1A202C;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-block-end: 1px solid var(--c-border);
}
/* Two stacked rows: [brand + actions] over [nav links] */
.header-nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Row 1 — brand on the left, actions (EN + Contact) on the right */
.header-nav__row {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.5vw, 48px);
}

/* Corporate logotype — max height 23px per GUIDE.md §3.3 */
/* h1 reset: on homepage the brand link is wrapped in <h1> (GUIDE.md §7.9) */
.header-nav__brand {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.header-nav__brand-img {
  height: 38px;
  width: auto;
}

/* Row 2 — nav links (50%) on the left, product search (50%) on the right */
.header-nav__row2 {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%;
  height: 76px;
  position: relative;
}
.header-nav__row2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    border-block-start: 1px solid var(--c-border);
}

.header-nav__menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 23vw, 80px);
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/* Product search occupies the right 50% of Row 2 */
.header-nav__search {
  flex: 1 1 50%;
  min-width: 0;
  height: 44px;
  max-width: none;
}
.header-nav__search .product-search__btn { width: 52px; }
.header-nav__link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--c-text-white);
  white-space: nowrap;
  transition: color var(--ease);
  text-transform: uppercase;
}
.header-nav__link:hover { color: var(--c-primary); }
.header-nav__link.is-active { color: var(--c-primary); }

/* Vertical divider between nav links (1px × 20px, #2E333DB2) */
.header-nav__menu > li {
  display: flex;
  align-items: center;
}
.header-nav__menu > li:not(:first-child)::before {
    content: "";
    flex-shrink: 0;
    width: 1px;
    height: 20px;
    background-color: #424249;
    margin-inline-end: clamp(14px, 3.6vw, 48px);
}

/* ----- Solutions dropdown submenu ----- */
.header-nav__item.has-submenu {
  position: relative;
  align-self: stretch;          /* fill bar height so submenu sits flush under it (no hover gap) */
  display: flex;
  align-items: center;          /* vertically center the SOLUTIONS label like the other links */
}
/* Caret arrow next to SOLUTIONS (rotates up when the dropdown opens) */
.header-nav__item.has-submenu > .header-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.header-nav__item.has-submenu > .header-nav__link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ease);
}
.header-nav__item.has-submenu:hover > .header-nav__link::after,
.header-nav__item.has-submenu:focus-within > .header-nav__link::after {
  transform: translateY(1px) rotate(-135deg);
}
.header-nav__submenu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: #1A202C;
  border: 1px solid var(--c-border);
  border-block-start: 2px solid var(--c-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 210;
}
.header-nav__item.has-submenu:hover .header-nav__submenu,
.header-nav__item.has-submenu:focus-within .header-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-nav__sublink {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--c-text-white);
  white-space: nowrap;
  transition: color var(--ease), background-color var(--ease);
}
.header-nav__sublink:hover {
  color: var(--c-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Right-side cluster: actions (language + contact) + mobile hamburger */
.header-nav__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Keep the EN pill and Contact button the same height in the top row */
.header-nav__actions .btn {
  height: 40px;
  padding: 0 24px;
}

/* Mobile-only search toggle + collapsible search bar (injected via main.js).
   Hidden on desktop; revealed at ≤768px in layout_sp.css. */
.nav-search-toggle { display: none; }
.nav-mobile-search { display: none; }

/* ----- Search ---------------------------------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--c-ui-bg);
  background: #FFFFFF0D;
  border-radius: 4px;
  padding: 0 14px;
  height: 46px;
  min-width: 200px;
}
.search-bar__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.search-bar__input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-faint);
  width: 100%;
}
.search-bar__input::placeholder { color: #656C7C; }

/* ----- Language toggle ------------------------------- */
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF0D;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  height: 40px;
  padding: 0 16px;
  color: var(--c-text-faint);
  font-size: 14px;
  font-weight: 700;
  transition: color var(--ease), border-color var(--ease);
}
.lang-btn:hover { color: var(--c-text-white); border-color: var(--c-text-faint); }
/* GTranslate renders both [en] and [ja] links (see inc/gtranslate.php); only
   the language NOT currently active is shown, toggled via the plugin's own
   .gt-current-lang class (added/removed by its js/base.js). */
.lang-btn a[data-gt-lang] {
  display: none;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.lang-btn a[data-gt-lang="ja"] { display: flex; }
.lang-btn a[data-gt-lang="ja"].gt-current-lang { display: none; }
.lang-btn a[data-gt-lang="ja"].gt-current-lang ~ a[data-gt-lang="en"] { display: flex; }
.lang-btn__icon {
  width: 15px;
  height: 15px;
}

/* ----- Hamburger (mobile only — visible via layout_sp.css) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* width: 44px;
  height: 44px;
  padding: 6px; */
  margin-inline-start: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--c-text-white);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- Mobile slide-out menu (shown via layout_sp.css) */
.mobile-menu {
  display: none;
  flex-direction: column;
  background-color: var(--c-dark-750);
  border-block-end: 1px solid var(--c-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-menu.is-open {
  /* Cap to the viewport below the nav so long menus scroll instead of clipping */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu__list {
  padding: 8px var(--container-padding) 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu__link {
  display: block;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--c-text-white);
  border-block-end: 1px solid var(--c-border);
  transition: color var(--ease);
}
.mobile-menu__link:hover { color: var(--c-primary); }

/* Contact CTA rendered as a full-width button at the bottom of the menu */
.mobile-menu__link--cta {
  margin-block-start: 16px;
  padding: 14px 20px;
  text-align: center;
  color: var(--c-text-white);
  background-color: var(--c-primary);
  border: none;
  border-radius: 4px;
  transition: opacity var(--ease);
}
.mobile-menu__link--cta:hover { color: var(--c-text-white); opacity: 0.88; }

/* Mobile Solutions submenu — collapsed by default, toggled open on tap */
.mobile-menu__item.has-submenu > .mobile-menu__link {
  position: relative;
  padding-inline-end: 24px;     /* room for the caret arrow */
}
/* Caret arrow next to SOLUTIONS (points down; rotates up when open) */
.mobile-menu__item.has-submenu > .mobile-menu__link::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--ease);
}
.mobile-menu__item.has-submenu.is-open > .mobile-menu__link::after {
  transform: translateY(-30%) rotate(-135deg);
}

.mobile-submenu {
  list-style: none;
  margin: 0;
  padding-inline: 16px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ease);
}
.mobile-menu__item.has-submenu.is-open .mobile-submenu {
  max-height: 320px;
}
.mobile-submenu__link {
  display: block;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--c-text-white);
  opacity: 0.82;
  transition: color var(--ease), opacity var(--ease);
}
.mobile-submenu__link:hover {
  color: var(--c-primary);
  opacity: 1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color:#1A202C;
  padding-block-end: 27px;
}

/* Thin top border */
.site-footer__top {
  height: 1px;
  background-color: var(--c-border);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 36px;
}

/* Footer logo — height 21px (≤ 23px max per GUIDE.md §3.3) */
.site-footer__logo {
  height: 21px;
  width: auto;
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.site-footer__nav-link {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.2px;
  /* color: var(--c-text-faint); */
  color: rgba(214, 219, 232, 1);
  color: #D1D9E8;
  text-transform: uppercase;
  transition: color var(--ease);
}
.site-footer__nav-link:hover { color: var(--c-text-white); }

/* ----- Footer Solutions dropdown submenu (opens upward) ----- */
.site-footer__nav-item.has-submenu {
  position: relative;
}
.site-footer__nav-item.has-submenu > .site-footer__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* Caret arrow next to SOLUTIONS (rotates up when the dropdown opens) */
.site-footer__nav-item.has-submenu > .site-footer__nav-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ease);
}
.site-footer__nav-item.has-submenu:hover > .site-footer__nav-link::after,
.site-footer__nav-item.has-submenu:focus-within > .site-footer__nav-link::after,
.site-footer__nav-item.has-submenu.is-open > .site-footer__nav-link::after {
  transform: translateY(1px) rotate(-135deg);
}
.site-footer__submenu {
  position: absolute;
  inset-block-end: 100%;          /* open UPWARD — footer sits at page bottom */
  inset-inline-start: 0;
  min-width: 240px;
  margin: 0 0 12px;
  padding: 8px 0;
  list-style: none;
  background-color: #232A38;
  border: 1px solid var(--c-border);
  border-block-end: 2px solid var(--c-primary);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 20;
}
.site-footer__nav-item.has-submenu:hover .site-footer__submenu,
.site-footer__nav-item.has-submenu:focus-within .site-footer__submenu,
.site-footer__nav-item.has-submenu.is-open .site-footer__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-footer__sublink {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--c-text-white);
  white-space: nowrap;
  transition: color var(--ease), background-color var(--ease);
}
.site-footer__sublink:hover {
  color: var(--c-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Inner divider */
.site-footer__divider {
  height: 1px;
  background-color: rgba(46, 51, 61, 0.7);
  margin-inline: var(--container-padding);
}
.sit-ftr {
    display: flex;
    align-items: center;
    gap: 62px;
    flex-wrap: wrap;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-block-start: 27px;
}

.site-footer__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.site-footer__policy-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  /* color: var(--c-text-faint); */
  color: rgba(214, 219, 232, 1);
  color: #D1D9E8;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--ease);
  text-transform: uppercase;
}
.site-footer__policy-link:hover { color: var(--c-text-white); }

.site-footer__copyright {
  font-size: 13px;
  font-weight: 400;
  color: #99A1B5;
  line-height: 1.5;
  margin-left: 30px;
}

/* ============================================================
   BREADCRUMB — hidden on homepage via [hidden], shown on sub-pages
   ============================================================ */
.breadcrumb {
  background-color: var(--c-light-50);
  border-block-end: 1px solid var(--c-border-light);
  padding-block: 14px;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding-block: 0;
}
.breadcrumb__item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--c-text-body);
    font-weight: 600;
    text-transform: uppercase;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  margin-inline-end: 4px;
  color: var(--c-text-muted);
}
.breadcrumb__link {
  color: var(--c-text-body);
  transition: color var(--ease);
}
.breadcrumb__link:hover { color: var(--c-primary); }
.breadcrumb__current { color:#242933; font-weight: 600; }

/* ============================================================
 * layout_sp.css
 * Mobile/responsive overrides for site header and footer.
 * Breakpoints: ≤1100px (nav tighten), ≤768px (mobile layout).
 * ============================================================ */

 /* ── Large desktops: ≤ 1680px — tighten nav so it never wraps ── */
 @media (max-width: 1680px) {
     .header-nav__brand{
         flex-shrink: inherit;
     }
     .header-nav__menu{
         gap: clamp(14px, 1.8vw, 28px);
     }
     .header-nav__link{
         font-size: 13px;
         letter-spacing: 0.6px;
         white-space: nowrap;
     }
 }

 /* ── Laptops: ≤ 1280px — tighten the top-row actions ─────────── */
 @media (max-width: 1280px) {
   .header-nav__row     { gap: 20px; }
   .header-nav__actions { gap: 8px; }
   .lang-btn            { padding-inline: 12px; }
 }

 /* ── Small laptops: ≤ 1100px — give the (non-wrapping) nav links
       priority and let the search shrink so nothing overflows ──── */
 @media (max-width: 1100px) {
   .header-nav__row2  { gap: clamp(16px, 2.5vw, 32px); }
   .header-nav__menu  { flex: 0 1 auto; }
   /* .header-nav__search{ flex: 1 1 auto; } */
 }
@media(max-width:991px){
  .header-nav__menu > li:not(:first-child)::before {
    margin-inline-end: clamp(14px, 0.6vw, 68px);
  }
  .site-footer__copyright{
    margin-left: 0;
  }
}
 /* ── Tablet / small laptop: ≤ 1100px — switch to hamburger ──── */
@media (max-width: 768px) {
  /* Hide the inline nav links + row-2 search, reveal the hamburger + slide-out */
  .header-nav__menu      { display: none; }
  .header-nav__search    { display: none; }
  .header-nav__row2      { display: none; }
  .hamburger             { display: flex; }
  .mobile-menu           { display: flex; }
  .header-nav__brand     { flex-shrink: inherit; margin-inline-end: auto; }

  /* Keep the actions row visible, but only for the language toggle +
     search icon — the Contact button lives in the slide-out menu. */
  .header-nav__actions          { display: flex; gap: 8px; }
  .header-nav__actions .btn--primary { display: none; }

  /* ----- Mobile search icon (tap to expand the input) ----- */
  .nav-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: #FFFFFF0D;
    color: var(--c-text-white);
    cursor: pointer;
    transition: background-color var(--ease);
  }
  .nav-search-toggle:hover { background: rgba(255, 255, 255, 0.12); }
  .nav-search-toggle svg { display: block; }

  /* ----- Collapsible search bar that slides open below row 1 ----- */
  .nav-mobile-search {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  .nav-mobile-search.is-open { max-height: 80px; }
  .nav-mobile-search .product-search {
    margin: 10px 0 14px;
    height: 46px;
    max-width: none;
  }
}

/* ── Mobile: ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Slightly shorter top row so more of the page shows above the fold */
  .header-nav__row { height: 56px; }

  /* ----- Logo sizes on smartphone (GUIDE.md §3.3) */
  .header-top__logo      { height: 17px; }     /* Teijin brand logo: 17px SP (client requirement) */
  .header-nav__brand-img { height: 14px; }   /* Corporate logotype: 14px SP */
  .site-footer__logo     { height: 14px; }

  /* ----- Footer */
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .site-footer__nav{
    width: 100%;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .site-footer__policies { gap: 16px; }
}

/* ── Footer submenu: desktop-style upward dropdown stays down to 600px;
   switch to inline accordion only below 600px ───────────── */
@media (max-width: 599px) {
  .site-footer__submenu {
    position: static;
    min-width: 0;
    margin: 0;
    padding-inline: 12px 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ease);
  }
  .site-footer__nav-item.has-submenu.is-open .site-footer__submenu {
    max-height: 320px;
    margin-block-start: 10px;
  }
  .site-footer__sublink {
    padding: 8px 0;
    white-space: normal;
  }
}
@media(max-width:575px){
    .site-footer__nav-list {
    gap: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
  /* SOLUTIONS accordion spans the full grid width so its submenu stays
     identical to the larger breakpoints (not squeezed into one column) */

}

/* ============================================================
 * 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__title{
  margin-bottom: 6px;
}
.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; }
.segment-card__body::before {
    height: 44px;
}

}

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

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

/* ============================================================
   DEFAULT WP TEMPLATES (index/single/archive/search/404) —
   boxed layout with an optional right sidebar.

   No 1:1 design exists for these in teijin-html (a brochure site,
   not a blog) — this reuses the site's own tokens/box language
   (border-radius, shadow, colours) rather than inventing something
   unrelated. The sidebar column only appears when the "Sidebar"
   widget area actually has widgets in it — see teijin_has_sidebar()
   in inc/template-tags.php; it's the toggle, no separate setting.
   ============================================================ */
.teijin-page {
  padding-block: clamp(40px, 6vw, 80px);
}
.teijin-page {
    padding-block: clamp(40px, 13vw, 250px);
}
.teijin-page-header {
  margin-block-end: 32px;
}
.teijin-page-header__bar {
  width: 48px;
  height: 3px;
  background-color: var(--c-primary);
  margin-block-end: 16px;
}
.teijin-page-header__title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--c-text-dark);
  line-height: 1.15;
}
.teijin-page-header__desc {
  margin-block-start: 10px;
  color: var(--c-text-body);
  font-size: 16px;
  line-height: 1.7;
}
.teijin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.teijin-layout.has-sidebar {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.teijin-content-box {
  background-color: #ffffff;
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  box-shadow: 0px 4px 16px 0px #0000000D;
  padding: clamp(24px, 4vw, 48px);
}
.teijin-content-box .widget + .widget {
  margin-block-start: 32px;
  padding-block-start: 32px;
  border-top: 1px solid var(--c-border-light);
}
.teijin-content-box .widget-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 16px;
}
.teijin-content-box .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.teijin-content-box .widget li {
  padding-block: 6px;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 14px;
}
.teijin-content-box .widget li:last-child {
  border-bottom: none;
}
@media (max-width: 900px) {
  .teijin-layout.has-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* .page-content (404 / "Nothing Found") had zero CSS before — rendered as
   unstyled default browser text. get_search_form()'s output has been
   replaced everywhere with teijin_search_form() (inc/template-tags.php),
   which reuses .search-form-inline below instead of WP's default
   .search-form/.search-field/.search-submit markup (also unstyled here). */
.page-content {
  margin-block-start: 8px;
  color: var(--c-text-body);
  font-size: 15px;
  line-height: 1.7;
}
.page-content p {
  margin: 0 0 12px;
}
.no-results .search-form-inline,
.error-404 .search-form-inline {
  margin-block-start: 20px;
  margin-block-end: 8px;
}
/* 404 page's extra widgets (Recent Posts, Categories, Archives, Tag Cloud) */
.error-404 .widget {
  margin-block-start: 32px;
  padding-block-start: 32px;
  border-top: 1px solid var(--c-border-light);
}
.error-404 .widget-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-dark);
  margin-block-end: 12px;
}
.error-404 .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.error-404 .widget li {
  padding-block: 6px;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 14px;
}
.error-404 .widget li:last-child {
  border-bottom: none;
}
/* Any OTHER use of WP's default search form (e.g. a "Search" widget
   dropped into the sidebar) — same treatment as .search-form-inline
   above, so it's never left unstyled regardless of where it's used. */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search-form label {
  flex: 1;
  min-width: 0;
}
.search-field {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--c-text-dark);
  background: #fff;
  outline: none;
  transition: border-color var(--ease);
}
.search-field:focus {
  border-color: var(--c-primary);
}
.search-submit {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 4px;
  background-color: var(--c-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--ease);
}
.search-submit:hover {
  opacity: 0.9;
}

/* ============================================================
   BLOG / SINGLE POST CONTENT — entry-header/-content/-footer,
   post navigation, comments. Built from scratch: none of these
   stock WP classes had ANY CSS before (teijin-html is a brochure
   site, not a blog, so there was no existing design to reuse) —
   the whole single-post view was rendering as unstyled browser
   defaults inside the .teijin-content-box added earlier.
   ============================================================ */
.entry-header {
  margin-block-end: 24px;
}
.entry-category {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  margin-block-end: 14px;
  border-radius: 3px;
  background-color: var(--c-primary-dim);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
}
.entry-category:hover {
  background-color: var(--c-primary);
  color: #fff;
}
.entry-title {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.2;
  color: var(--c-text-dark);
  margin: 0 0 14px;
}
.entry-title a {
  color: inherit;
  text-decoration: none;
}
.entry-title a:hover {
  color: var(--c-primary);
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--c-text-body);
}
.entry-meta .byline::before {
  content: '•';
  margin-inline-end: 8px;
  color: var(--c-border-light);
}
.entry-meta a {
  color: var(--c-text-body);
  text-decoration: none;
}
.entry-meta a:hover {
  color: var(--c-primary);
}
.post-thumbnail {
  display: block;
  margin-block-end: 32px;
  border-radius: 8px;
  overflow: hidden;
}
.post-thumbnail img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

/* Prose typography for the post body itself */
.entry-content {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text-body);
}
.entry-content > * + * {
  margin-block-start: 22px;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--c-text-dark);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.3;
  margin-block-start: 40px;
  margin-block-end: 4px;
}
.entry-content h2 { font-size: clamp(22px, 2.2vw, 28px); }
.entry-content h3 { font-size: clamp(19px, 1.8vw, 22px); }
.entry-content h4 { font-size: 17px; }
.entry-content a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content ul,
.entry-content ol {
  padding-inline-start: 22px;
}
.entry-content li + li {
  margin-block-start: 8px;
}
.entry-content blockquote {
  border-inline-start: 3px solid var(--c-primary);
  padding-inline-start: 20px;
  color: var(--c-text-dark);
  font-style: italic;
}
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.entry-content figcaption {
  font-size: 13px;
  color: var(--c-text-body);
  text-align: center;
  margin-block-start: 8px;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.entry-content table th,
.entry-content table td {
  padding: 10px 14px;
  border: 1px solid var(--c-border-light);
  text-align: start;
}
.entry-content .page-links {
  margin-block-start: 32px;
  font-weight: 700;
  color: var(--c-text-dark);
}

.entry-footer {
  margin-block-start: 32px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--c-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--c-text-body);
}
.entry-footer a {
  color: var(--c-text-body);
  text-decoration: none;
}
.entry-footer a:hover {
  color: var(--c-primary);
}
.entry-footer .cat-links::before,
.entry-footer .tags-links::before {
  content: '';
}

/* Prev / Next post navigation */
.post-navigation {
  margin-block-start: 40px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--c-border-light);
}
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  display: flex;
}
.post-navigation .nav-next {
  justify-content: end;
  text-align: end;
  grid-column: 2;
}
.post-navigation a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  width: 100%;
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.post-navigation a:hover {
  border-color: var(--c-primary);
  box-shadow: 0px 4px 16px 0px #0000000D;
}
.post-navigation .nav-subtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-primary);
}
.post-navigation .nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-dark);
}
@media (max-width: 600px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }
  .post-navigation .nav-next {
    grid-column: 1;
    justify-content: start;
    text-align: start;
  }
}

/* Comments */
.comments-area {
  margin-block-start: 48px;
  padding-block-start: 40px;
  border-block-start: 1px solid var(--c-border-light);
}
.comments-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-text-dark);
  margin: 0 0 24px;
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list .children {
  list-style: none;
  margin: 24px 0 0;
  padding-inline-start: clamp(20px, 5vw, 48px);
}
.comment-list > li + li,
.comment-list .children > li + li {
  margin-block-start: 24px;
}
.comment-body {
  padding-block-end: 24px;
  border-block-end: 1px solid var(--c-border-light);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 8px;
}
.comment-author .avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.comment-author .fn {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-dark);
  font-style: normal;
}
.comment-metadata {
  font-size: 12px;
  color: var(--c-text-body);
  margin-block-end: 10px;
}
.comment-metadata a {
  color: inherit;
  text-decoration: none;
}
.comment-content p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-body);
}
.comment-reply-link,
.comment-edit-link {
  display: inline-flex;
  margin-block-start: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--c-primary);
  text-decoration: none;
}
.comment-reply-link:hover,
.comment-edit-link:hover {
  text-decoration: underline;
}
.no-comments {
  color: var(--c-text-body);
  font-style: italic;
}

/* Comment form */
.comment-respond {
  margin-block-start: 40px;
}
.comment-reply-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-text-dark);
  margin: 0 0 16px;
}
.comment-reply-title small a {
  margin-inline-start: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-primary);
}
.comment-notes,
.comment-form p {
  margin: 0 0 16px;
}
.comment-form label {
  display: block;
  margin-block-end: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--c-text-dark);
  background: #fff;
  outline: none;
  transition: border-color var(--ease);
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--c-primary);
}
.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
}
.comment-form .form-submit {
  margin-block-start: 24px;
}
.comment-form .form-submit input[type="submit"] {
  height: 48px;
  padding: 0 32px;
  border: none;
  border-radius: 4px;
  background-color: var(--c-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--ease);
}
.comment-form .form-submit input[type="submit"]:hover {
  opacity: 0.9;
}
.privc ul {
  list-style: disc;
  padding-inline-start: 20px;
}