/* ==========================================================================
   Responsive layouts — dedicated tablet & mobile compositions
   Desktop-first: 1440+ is the base in style.css
   ========================================================================== */

/* ---------- Large desktop ---------- */
@media (min-width: 1600px) {
  :root { --container: 1400px; }
}

/* ---------- Compact desktop ---------- */
@media (max-width: 1260px) {
  .header-cta { display: none; }
  .primary-nav__list { gap: 18px; }
  .metric { grid-template-columns: 1fr; }
  .metric__icon { grid-row: auto; margin-bottom: 16px; }
}

/* ---------- Tablet (≈1024) ---------- */
@media (max-width: 1100px) {
  :root { --header-h: 76px; }
  .primary-nav { display: none; }
  .menu-toggle { display: grid; }
  .site-header { padding-block: 16px; }

  .hero__aside { display: none; }

  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .card3d__inner { min-height: 320px; }
  .card3d__icon { margin-bottom: 40px; }

  .tech__steps { grid-template-columns: repeat(2, 1fr); }
  .tech__steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .tech__steps li:nth-child(n + 3) { margin-top: 34px; }

  .flow__inputs .flow__node { font-size: 18px; padding: 12px 14px; }
  .flow__chain { font-size: 17px; }
  .flow__note { font-size: 12px; }

  .stage__node { width: 140px; }
  .process__line { top: 70px; }

  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .site-footer__cols > div:last-child { grid-column: 1 / -1; }
}

/* ---------- Small tablet / large phone ---------- */
@media (max-width: 900px) {
  .section-head--split { grid-template-columns: 1fr; gap: 22px; }
  .section-head__aside { justify-self: start; }

  .about__grid { grid-template-columns: 1fr; }
  .about__visual { max-width: 560px; margin-inline: auto; width: 100%; margin-top: 16px; }
  .badge-card { left: -8px; }

  /* Technology schematic becomes a vertical story */
  .flow { aspect-ratio: auto; display: grid; gap: 0; }
  .flow__lines { display: none; }
  .flow__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .flow__inputs .flow__node { position: static; width: auto; transform: none; }
  .flow__core { position: relative; left: auto; top: auto; transform: none; width: 210px; margin: 64px auto; }
  .flow__core::before, .flow__core::after {
    content: ""; position: absolute; left: 50%; width: 1px; height: 52px;
    background: linear-gradient(var(--lime), var(--gold));
  }
  .flow__core::before { bottom: calc(100% + 26px); }
  .flow__core::after { top: calc(100% + 26px); }
  .flow__outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .flow__outputs .flow__out { position: static; width: auto; transform: none; }

  .showcase__content { grid-template-columns: 1fr; row-gap: 22px; }
  .showcase__lede { justify-self: start; }
  .showcase__media { aspect-ratio: 16 / 9; }
  .showcase__img { object-fit: contain; }   /* frame is not 3:1 here: keep the complete image visible */
  .project-card { margin: -64px auto 0; }

  .leaders__grid { grid-template-columns: 1fr 1fr; }
  .leaders__grid > li:last-child { grid-column: 1 / -1; max-width: calc(50% - 12px); justify-self: center; width: 100%; }

  .vision__grid { grid-template-columns: 1fr; }
  .globe { width: min(440px, 88%); margin-top: 24px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(n + 3) { margin-top: 30px; }

  .sustain__points { grid-template-columns: 1fr; max-width: 420px; gap: 20px; }

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

  .site-footer__top { grid-template-columns: 1fr; }
}

/* ---------- Mobile (390–767) ---------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 88px; --header-h: 68px; }

  .brand__mark { width: 40px; }
  .brand__name { font-size: 20px; }
  .brand__sub { font-size: 9px; letter-spacing: .14em; }
  .menu-toggle { width: 44px; height: 44px; }

  /* Hero */
  .hero { min-height: max(100svh, 640px); }
  .hero__shade {
    background:
      linear-gradient(0deg, rgba(4, 41, 31, .97) 0%, rgba(4, 41, 31, .82) 45%, rgba(4, 41, 31, .55) 72%, rgba(4, 41, 31, .6) 100%);
  }
  .hero__img { object-position: 30% 50%; }
  .hero__content { padding-bottom: 104px; }
  .hero__title { font-size: clamp(46px, 13.2vw, 64px); line-height: .98; }
  .hero__lede { font-size: 15px; margin-top: 22px; }
  .hero__actions { margin-top: 30px; gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .story-trigger { position: relative; right: auto; bottom: auto; margin: 0 var(--gutter) 128px; align-self: flex-start; z-index: 6; }
  .hero__content { padding-bottom: 28px; }
  .story-trigger__ring { width: 54px; height: 54px; }

  /* Metrics: 2 × 2 tiles */
  .metrics { margin-top: -96px; }
  .metrics__panel { grid-template-columns: 1fr 1fr; border-radius: 18px; }
  .metric { padding: 22px 18px; }
  .metric + .metric::before { display: none; }
  .metric:nth-child(even) { border-left: 1px solid var(--hairline-light); }
  .metric:nth-child(n + 3) { border-top: 1px solid var(--hairline-light); }
  .metric__icon { width: 38px; height: 38px; padding: 9px; margin-bottom: 12px; }
  .metric__value { font-size: 34px; }
  .metric__value small { font-size: 10px; }
  .metric__label { font-size: 11.5px; }

  .display--lg { font-size: clamp(38px, 10.6vw, 52px); }
  .display--xl { font-size: clamp(44px, 12.4vw, 62px); }
  .eyebrow { font-size: 10.5px; letter-spacing: .22em; margin-bottom: 20px; }

  /* About */
  .about { padding-top: 72px; }
  .facts { grid-template-columns: 1fr; }
  .facts__item:nth-child(n) { padding: 14px 0; border-left: 0; }
  .frame { aspect-ratio: 4 / 4.4; }
  .frame__border { transform: translate(10px, 10px); }
  .float-leaf--about { width: 64px; top: -30px; right: -6px; }
  .badge-card { left: 12px; bottom: -26px; font-size: 18px; padding: 14px 20px 14px 14px; }
  .badge-card__icon { width: 40px; height: 40px; padding: 9px; }

  /* Technology */
  .flow__inputs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .flow__inputs .flow__node { font-size: 17px; padding: 12px; }
  .flow__outputs { grid-template-columns: 1fr; }
  .flow__core { width: 180px; }
  .tech__steps { grid-template-columns: 1fr; }
  .tech__steps li, .tech__steps li + li { padding: 24px 0 0; border-left: 0; }
  .tech__steps li + li { margin-top: 24px; border-top: 1px solid var(--hairline-light); }
  .tech__steps li:nth-child(n + 3) { margin-top: 24px; }

  /* Waste-to-wealth: horizontal → vertical timeline */
  .process__line { display: none; }
  .process__line--v { display: block; position: absolute; left: 46px; top: 46px; bottom: 46px; width: 4px; height: auto; }
  .process__list { grid-template-columns: 1fr; gap: 34px; }
  .stage { display: grid; grid-template-columns: 92px 1fr; column-gap: 20px; text-align: left; padding: 0; align-items: center; }
  .stage__node { grid-row: span 3; width: 92px; padding: 5px; margin: 0; transform: none; }
  .stage__num, .stage__title, .stage__text { transform: none; }
  .stage__title { margin: 0 0 4px; font-size: 22px; }
  .stage__text { margin: 0; max-width: none; font-size: 13.5px; }

  /* Showcase */
  .showcase__media { aspect-ratio: 4 / 3.4; }
  .project-card { margin-top: -48px; padding: 26px 22px 24px; }
  .project-card__list div { grid-template-columns: 90px 1fr; }

  /* Why */
  .why__grid { grid-template-columns: 1fr; }
  .card3d__inner { min-height: 0; padding: 30px 24px 32px; }
  .card3d__icon { margin-bottom: 26px; }
  .card3d__num { font-size: 46px; }

  /* Leadership: touch friendly, details visible */
  .leaders__grid { grid-template-columns: 1fr; }
  .leaders__grid > li:last-child { max-width: none; }
  .leader__portrait { aspect-ratio: 16 / 10; }
  .leader__monogram span { width: 104px; height: 104px; font-size: 46px; }
  .leader__more { max-height: none; opacity: 1; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline-dark); }
  .leader__arrow { display: none; }
  .leader__summary { padding-right: 0; }
  .leader:hover { transform: none; }

  /* Vision */
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 24px 0 0; border-left: 0; }
  .pillar + .pillar { margin-top: 24px; border-top: 1px solid var(--hairline-dark); }
  .pillar:nth-child(n + 3) { margin-top: 24px; }
  .globe__orbit--2 { inset: -3%; }

  /* Sustainability */
  .sustain { min-height: 0; }
  .sustain::before { background: linear-gradient(0deg, rgba(4, 41, 31, .92) 0%, rgba(4, 41, 31, .74) 55%, rgba(4, 41, 31, .58)); }
  .sustain__img { object-position: 52% 50%; }   /* keeps the facility centred */
  .sustain__content { padding-block: 120px 96px; }

  /* CTA */
  .cta__actions .btn { flex: 1 1 100%; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .enquiry { padding: 26px 20px; border-radius: 18px; }

  /* Footer */
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .site-footer__bottom { flex-direction: column; }

  /* Story dialog: image on top, caption below */
  .story__ui { gap: 14px; padding: 16px var(--gutter); flex-wrap: wrap; }
  .story__title { font-size: 18px; }
  .story__progress { order: 3; flex-basis: 100%; }
  .story__count { margin-left: auto; }
  .story__stage { inset: 118px var(--gutter) 96px; }
  .story__scene, .story__scene--circle { grid-template-columns: 1fr; place-content: center; justify-items: center; gap: 24px; text-align: center; }
  .story__scene--circle figcaption { order: 0; }
  .story__scene--wide .story__frame { width: calc(100vw - var(--gutter) * 2); border-radius: 12px; }
  .story__scene--circle .story__frame { width: min(78vw, calc(100dvh - 380px)); }
  .story__scene figcaption p { font-size: 26px; }
  .story__controls { padding-bottom: 24px; }
}

/* ---------- Touch devices: no hover-dependent motion ---------- */
@media (hover: none) {
  .card3d__light { display: none; }
  .frame:hover .frame__img { transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grain, .showcase__sweep, .hero__glow, .sustain__light, .story-trigger__ring::after { animation: none !important; }
  .showcase__sweep { display: none; }
  .story__scene.is-active .story__frame img { animation: none; transform: none; }
}