/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.page-hero{
  padding-top:160px; padding-bottom:var(--sp-5);
  background:var(--grad-ocean); color:#fff; position:relative; overflow:hidden;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; margin-block:1rem 1rem; }
.crumb{ display:flex; gap:.5rem; align-items:center; font-size:.82rem; color:#9FC2DC; }
.crumb a:hover{ color:#fff; }

/* ============================================
   STORY
   ============================================ */
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:center; }
@media(max-width:900px){ .story-grid{ grid-template-columns:1fr; } }
.story-media{ position:relative; }
.story-media .main{ border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:5/6; }
.story-media .main img{ width:100%; height:100%; object-fit:cover; }
.story-media .badge-est{
  position:absolute; top:-18px; inset-inline-end:-18px;
  width:120px; height:120px; border-radius:50%;
  background:var(--grad-spark); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow-glow-orange);
  text-align:center; line-height:1.15;
  animation:spin-slow 22s linear infinite;
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
.story-media .badge-est b{ font-family:var(--font-display); font-size:1.5rem; animation:counter-spin 22s linear infinite reverse; }
.story-media .badge-est span{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; animation:counter-spin 22s linear infinite reverse; }
@keyframes counter-spin{ to{ transform:rotate(-360deg); } }

/* ============================================
   MISSION / VISION SPLIT
   ============================================ */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-5); }
@media(max-width:760px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{
  border-radius:var(--radius-l); padding:var(--sp-4);
  position:relative; overflow:hidden;
  color:#fff;
}
.mv-card.mission{ background:linear-gradient(150deg, var(--blue-800), var(--blue-900)); }
.mv-card.vision{ background:linear-gradient(150deg, var(--green-700), #1d4a20); }
.mv-card .ico{ width:52px; height:52px; border-radius:15px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem; }
.mv-card h3{ color:#fff; font-size:1.3rem; margin-bottom:.8rem; }
.mv-card p{ color:rgba(255,255,255,.85); font-size:.95rem; }

/* ============================================
   TIMELINE
   ============================================ */
.timeline{ position:relative; max-width:780px; margin-inline:auto; margin-top:var(--sp-5); }
.timeline::before{
  content:""; position:absolute; inset-inline-start:18px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--blue-300), var(--green-500), var(--orange-500));
}
html[dir="rtl"] .timeline::before{ inset-inline-start:auto; inset-inline-end:18px; }
.t-item{ position:relative; padding-inline-start:56px; padding-bottom:var(--sp-4); }
html[dir="rtl"] .t-item{ padding-inline-start:0; padding-inline-end:56px; }
.t-item:last-child{ padding-bottom:0; }
.t-item .dot{
  position:absolute; inset-inline-start:9px; top:2px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:4px solid var(--blue-700); box-shadow:0 0 0 5px var(--blue-100);
}
.t-item h4{ font-family:var(--font-mono); color:var(--orange-600); font-size:.8rem; letter-spacing:.06em; margin-bottom:.3rem; }
.t-item h3{ font-size:1.18rem; margin-bottom:.4rem; }
.t-item p{ color:var(--ink-soft); font-size:.92rem; max-width:54ch; }

/* ============================================
   CERTIFICATES / QUALITY
   ============================================ */
.cert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-5); }
@media(max-width:880px){ .cert-grid{ grid-template-columns:1fr 1fr; } }
.cert-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:var(--sp-3); text-align:center;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}
.cert-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.cert-card .ico{
  width:60px; height:60px; border-radius:50%; margin-inline:auto;
  background:var(--blue-100); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.cert-card h4{ font-size:.96rem; margin-bottom:.4rem; }
.cert-card p{ font-size:.8rem; color:var(--ink-soft); }

/* ============================================
   FACTORY OVERVIEW
   ============================================ */
.factory-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:var(--sp-4); }
@media(max-width:760px){ .factory-grid{ grid-template-columns:1fr 1fr; } }
.factory-grid .tall{ grid-row:span 2; }
.factory-grid figure{ border-radius:var(--radius-m); overflow:hidden; aspect-ratio:1/1; }
.factory-grid .tall{ aspect-ratio:auto; }
.factory-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.factory-grid figure:hover img{ transform:scale(1.06); }

/* ============================================
   VALUES
   ============================================ */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-5); }
@media(max-width:880px){ .values-grid{ grid-template-columns:1fr 1fr; } }
.value-card{ text-align:center; padding:var(--sp-3); }
.value-card .ico{
  width:64px; height:64px; border-radius:50%; margin-inline:auto;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--grad-ocean); margin-bottom:1.1rem;
}
.value-card h4{ font-size:1rem; margin-bottom:.4rem; }
.value-card p{ font-size:.84rem; color:var(--ink-soft); }

/* ============================================
   MANAGEMENT / CLIENTS
   ============================================ */
.clients-row{
  display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--sp-4);
}
.client-pill{
  padding:12px 20px; border-radius:var(--radius-pill);
  background:#fff; border:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--blue-800);
}