/* About page. Loaded only on this page.
*/

  .about-intro { padding-block: clamp(56px, 6.4vw, 118px) clamp(40px, 4vw, 80px); }
  .intro-text p + p { margin-top: 18px; }

  /* Mission / Vision */
  .mv { padding-block: 0 clamp(64px, 7vw, 130px); }
  .mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
  .mv-card {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 8px; background: var(--card);
    padding: clamp(26px, 3vw, 52px); min-height: clamp(220px, 16vw, 300px);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  }
  .mv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%); transform: translateY(101%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .mv-card.v::before { background: linear-gradient(160deg, #f0343a 0%, #b81f25 100%); }
  .mv-card .k { display: flex; align-items: center; gap: 14px; font-size: clamp(22px, 1.9vw, 32px); font-weight: 700; transition: color .3s ease; }
  .mv-card .k svg { width: 44px; height: 44px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
  .mv-card.v .k svg { stroke: var(--red); }
  .mv-card p { margin: 20px 0 0; max-width: 36em; font-size: clamp(14.5px, 1.05vw, 17.5px); line-height: 1.85; color: #1f2622; transition: color .3s ease; }
  .mv-card:hover { transform: translateY(-6px); box-shadow: 0 22px 34px -18px rgba(8,60,32,.55); }
  .mv-card:hover::before { transform: translateY(0); }
  .mv-card:hover .k, .mv-card:hover p { color: #fff; }
  .mv-card:hover .k svg { stroke: #fff; }

  /* Facility (navy) */
  .fac { padding-block: 0 clamp(64px, 7vw, 130px); }
  .fac-box {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0;
    border-radius: 10px; overflow: hidden; background: var(--navy); color: #fff;
  }
  .fac-img { position: relative; min-height: 420px; }
  .fac-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .fac-box:hover .fac-img img { transform: scale(1.05); }
  .fac-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27,42,56,0) 55%, rgba(27,42,56,.9) 100%); }
  .fac-img .tag { position: absolute; z-index: 2; left: 20px; bottom: 20px; background: #fff; color: var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
  .fac-body { padding: clamp(28px, 3.6vw, 64px); }
  .fac .eyebrow { color: rgba(255,255,255,.85); }
  .fac .h-big { color: #fff; font-size: clamp(30px, 2.8vw, 48px); line-height: 1.18; }
  .fac-body > p { margin: 20px 0 0; max-width: 40em; font-size: clamp(14px, .98vw, 16.5px); line-height: 1.85; color: rgba(255,255,255,.88); }
  .fac-list { list-style: none; margin: clamp(24px, 2.4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fac-list li {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 8px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    transition: background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
  }
  .fac-list li:hover { background: rgba(14,122,60,.55); border-color: rgba(255,255,255,.3); transform: translateY(-3px); }
  .fac-list .ck { flex: none; width: 34px; height: 34px; border-radius: 6px; background: var(--green); display: grid; place-items: center; }
  .fac-list .ck svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .fac-list b { display: block; font-size: 16px; font-weight: 600; }
  .fac-list span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.78); }

  /* Product range */
  .range { padding-block: 0 clamp(64px, 7vw, 130px); }
  .range .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .range .h-big { font-size: clamp(30px, 2.8vw, 48px); }
  .pgrid { margin-top: clamp(24px, 2.6vw, 44px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pgrid .tile { --w: auto; width: auto; margin: 0; height: clamp(230px, 17vw, 320px); }
  .pgrid .tile img { max-width: 78%; }

  /* Certifications */
  .certs { padding-block: 0 clamp(64px, 7vw, 130px); }
  .cert-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 56px); align-items: center; background: var(--card); border-radius: 10px; padding: clamp(26px, 3.4vw, 60px); }
  .cert-box .h-big { font-size: clamp(28px, 2.5vw, 44px); line-height: 1.18; }
  .cert-box p { margin: 18px 0 0; max-width: 36em; font-size: clamp(14px, .98vw, 16.5px); line-height: 1.85; color: #1f2622; }
  .seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .seal { background: #fff; border-radius: 8px; aspect-ratio: 1; display: grid; place-items: center; padding: 14px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
  .seal img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
  .seal:hover { transform: translateY(-6px); box-shadow: 0 18px 28px -16px rgba(0,0,0,.4); }

  /* Why choose us */
  .wcu { padding-block: 0 clamp(64px, 7vw, 130px); }
  .wcu-box { position: relative; overflow: hidden; isolation: isolate; border-radius: 10px; background: #07121b; color: #fff; padding: clamp(28px, 4.4vw, 80px); }
  .wcu-box::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
      radial-gradient(900px 420px at 8% 0%, rgba(14,122,60,.38), transparent 70%),
      radial-gradient(800px 420px at 100% 100%, rgba(240,52,58,.20), transparent 70%); }
  .wcu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .wcu .eyebrow { color: rgba(255,255,255,.88); }
  .wcu .h-big { color: #fff; font-size: clamp(34px, 3.4vw, 60px); line-height: 1.12; }
  .wcu-head p { margin: 0; max-width: 34em; font-size: clamp(14.5px, 1.05vw, 17.5px); line-height: 1.85; color: rgba(255,255,255,.88); }
  .wcards.six { width: 100%; margin: clamp(30px, 3.4vw, 60px) 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); }
  .wcards.six .wcard { min-height: clamp(260px, 18vw, 340px); }
  .wcu-cta { margin-top: clamp(28px, 3vw, 48px); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .wcu-cta span { font-size: 15px; color: rgba(255,255,255,.85); }

  @media (max-width: 1200px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 1020px) {
    .phero-in { padding-top: 150px; }
    .mv-grid, .fac-box, .cert-box { grid-template-columns: minmax(0, 1fr); }
    .fac-img { min-height: 280px; }
    .fac-img::after { background: linear-gradient(180deg, rgba(27,42,56,0) 55%, rgba(27,42,56,.9) 100%); }
    .wcards.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .phero { min-height: 400px; }
    .fac-list, .wcards.six { grid-template-columns: minmax(0, 1fr); }
    .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pgrid .tile { height: 56vw; }
    .wcards.six .wcard { min-height: 0; }
    .seals { gap: 8px; }
  }
  @media (max-width: 420px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) {
    .phero-bg img, .phero .panel, .phero .panel .rule, .phero .panel .edge { animation: none !important; }
    .phero .panel .rule { transform: translateY(-100%); } .phero .panel .edge { transform: none; }
    .mv-card, .mv-card::before, .fac-img img, .fac-list li, .seal { transition: none; }
  }