/* ==========================================================================
   ALTYSIER GROUP — Homepage
   UI ported from the MVP Trans-logistics reference site
   (mvplogistics.eu/en/main-en/): colors, type, spacing scale, preloader,
   pill nav + hide-on-scroll header, per-character hover flip, animation
   timing. Content and section structure follow the client's approved
   homepage brief (see WP-CONVERSION-NOTES.md) — story arc: Who We Are →
   What We Do → How We Create Value → Our Companies → Our Reach & Impact →
   Why Trust Us → Insights & FAQs → Partnership.

   Deliberately NO external animation library (no GSAP/ScrollTrigger/
   Swiper). Every effect the reference site builds with those paid/CDN
   libraries is reproduced with plain CSS transitions/keyframes plus small
   hand-written JS (native scroll-snap sliders, requestAnimationFrame,
   IntersectionObserver, CSS custom-property stagger) — same visual
   result, but nothing that can fail to load over a CDN and leave the
   page stuck or scroll-locked.

   Fluid "rem = design px" scaling: sizes are authored in `rem`, and
   html{font-size} below rescales that ratio fluidly with a floor (via
   max()) so text never drops below a comfortable minimum on narrower
   "desktop" widths (1025–1400px laptops) — a pure linear formula was
   producing sub-1px rem values there and reading as too small.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 1px; }

/* ---------------------------------------------------------------------- */
/* Fluid "rem = design px" scaling across all device viewports            */
/* ---------------------------------------------------------------------- */
/* 4K and Ultra-wide screens (> 1920px) */
@media only screen and (min-width: 1921px) {
  html { font-size: clamp(1px, 100vw / 1600, 1.25px); }
}
/* Standard 1080p Desktop (1441px – 1920px) */
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  html { font-size: clamp(0.95px, 100vw / 1600, 1.2px); }
}
/* Laptops & MacBooks (1025px – 1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  html { font-size: clamp(0.82px, 100vw / 1440, 1.0px); }
}
/* Tablets & iPads (769px – 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  html { font-size: clamp(0.80px, 100vw / 1024, 0.95px); }
}
/* Mobile Phones (<= 768px) */
@media only screen and (max-width: 768px) {
  html { font-size: clamp(0.82px, 100vw / 440, 1.05px); }
}

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media only screen and (min-width: 1025px) { html { scroll-padding-top: 110px; } }
@media only screen and (max-width: 1024px) { html { scroll-padding-top: 76px; } }

/* ---------------------------------------------------------------------- */
/* Custom Sleek Scrollbar (Brand Red, Slim Height & Width, All Browsers)  */
/* ---------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #900909 #f1f1f1;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: #900909;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #6d0606;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
p { line-height: 1.35; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea { font: inherit; color: inherit; }

:root {
  /* Brand palette: #900909 as primary brand ink, #dc080c as brighter accent */
  --ink: #900909;
  --ink-rgb: 144, 9, 9;
  --ink-2: #6d0606;
  --accent: #dc080c;
  --near-black: #141414;
  --paper: #ffffff;
  --paper-200: #f4f4f7;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-brand: cubic-bezier(0.215, 0.61, 0.355, 1);
  --t-fast: 0.35s;
  --t-med: 0.6s;
  --t-slow: 1s;
}

body {
  min-width: 320px;
  line-height: 1.2;
  font-size: 20rem; /* explicit baseline so any text that ends up with no more specific
    rule inherits a readable size instead of the raw (sub-1px) html rem unit */
  font-family: 'Bebas Neue', sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: #fff; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: 100%; max-width: 1720rem; margin: 0 auto; padding: 0 80rem; }
@media only screen and (max-width: 1440px) { .container { padding: 0 48rem; } }
@media only screen and (max-width: 1024px) { .container { padding: 0 32rem; } }
@media only screen and (max-width: 768px) { .container { padding: 0 20rem; } }

.hidden { display: none !important; }
.eyebrow { font-family: Inter, sans-serif; font-size: 13rem; font-weight: 600; text-transform: none; letter-spacing: 0.08em; }
@media only screen and (max-width: 768px) {
  .eyebrow { font-size: 12rem; letter-spacing: 0.06em; }
}

/* Section titles — the primary heading of each of the 7 numbered sections */
.hero__title, .group__title, .group__statement, .sectors__title, .journey__title,
.businesses__title, .strip-title, .reach__title, .why__title, .faq__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Section photography — full-bleed background photo                       */
/* ---------------------------------------------------------------------- */
.section-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
@media only screen and (max-width: 1024px) {
  .section-photo { opacity: 0.24; }
}

/* ---------------------------------------------------------------------- */
/* Section watermark — giant subtle title watermark at top-center of each section */
/* ---------------------------------------------------------------------- */
.section-watermark {
  position: absolute;
  top: -30rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: 'Oswald', 'Bebas Neue', sans-serif;
  font-weight: 700;
  line-height: 0.8;
  font-size: clamp(64rem, 11vw, 160rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(144, 9, 9, 0.042);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}
@media only screen and (max-width: 1024px) {
  .section-watermark {
    top: -20rem;
    font-size: clamp(48rem, 12vw, 110rem);
  }
}
@media only screen and (max-width: 640px) {
  .section-watermark {
    top: -14rem;
    font-size: clamp(34rem, 13vw, 68rem);
    opacity: 0.75;
  }
}

/* Grid items default to min-width:auto */
.stat-grid > *, .sectors__grid > *, .reach__grid > *, .reach__stats > *,
.reach__pillars > *, .why__list > *, .footer__top > * { min-width: 0; }

/* ---------------------------------------------------------------------- */
/* Buttons — pill, flat, fill wipes bottom→top on hover                   */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
  font-family: 'Oswald', 'Inter', sans-serif;
  text-transform: none;
  font-weight: 600;
  line-height: 1.1;
  font-size: 17.5rem;
  letter-spacing: 0.02em;
  padding: 0 38rem;
  height: 58rem;
  background-color: var(--paper-200);
  border: 1.5rem solid transparent;
  color: var(--ink);
  border-radius: 999rem;
  transition: color 0.4s var(--ease-brand), border-color 0.4s var(--ease-brand), background-color 0.4s var(--ease-brand), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  cursor: pointer;
  user-select: none;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background-color: var(--ink);
  opacity: 0;
  border-radius: 100%;
  transform: translateY(100%);
  transition: opacity 0.65s var(--ease-brand), border-radius 0s 0.65s, transform 0s 0.65s;
  pointer-events: none;
}
.btn:hover {
  color: #fff;
  transform: translateY(-2rem);
  box-shadow: 0 6rem 20rem rgba(0, 0, 0, 0.12);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn:hover::after {
  opacity: 1;
  border-radius: 0;
  transform: translate(0);
  transition: border-radius 0.65s var(--ease-brand), transform 0.65s var(--ease-brand), opacity 0.3s ease;
}

/* 1. Accent (Solid Red) Button: Wipes with Obsidian Black and red glow */
.btn._accent {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}
.btn._accent::after {
  background-color: #141414;
}
.btn._accent:hover {
  border-color: #141414;
  color: #ffffff;
  box-shadow: 0 8rem 24rem rgba(144, 9, 9, 0.38);
}

/* 2. Outline Button ("Partner With Us"): Wipes with Crimson Red */
.btn._outline {
  background-color: rgba(255, 255, 255, 0.85);
  border: 1.5rem solid rgba(144, 9, 9, 0.45);
  color: var(--ink);
  backdrop-filter: blur(8rem);
}
.btn._outline::after {
  background-color: var(--ink);
}
.btn._outline:hover {
  border-color: var(--ink);
  color: #ffffff;
  box-shadow: 0 8rem 24rem rgba(144, 9, 9, 0.25);
}

/* 3. On-Dark Button ("Explore Our Impact"): Wipes with Crisp White */
.btn._on-dark {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1.5rem solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.btn._on-dark::after {
  background-color: #ffffff;
}
.btn._on-dark:hover {
  border-color: #ffffff;
  color: var(--ink);
  box-shadow: 0 8rem 24rem rgba(255, 255, 255, 0.2);
}

/* 4. Light Button */
.btn._light {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
}
.btn._light::after {
  background-color: var(--ink);
}
.btn._light:hover {
  border-color: var(--ink);
  color: #ffffff;
}

@media only screen and (max-width: 1024px) {
  .btn { width: 100%; height: 54rem; font-size: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Text-hover — per-character flip swap, CSS-driven stagger               */
/* ---------------------------------------------------------------------- */
.text-hover__inner { display: block; overflow: hidden; position: relative; height: 1.15em; }
.text-hover__elem { display: block; }
.text-hover__elem-2 { position: absolute; top: 100%; left: 0; }
.text-hover .char {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 15ms);
}
.text-hover:hover .text-hover__elem-1 .char { transform: translateY(-120%); }
.text-hover:hover .text-hover__elem-2 .char { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .text-hover .char { transition: none; } }

/* ---------------------------------------------------------------------- */
/* Scroll reveal — IntersectionObserver toggles .in-view (js/main.js)     */
/* ---------------------------------------------------------------------- */
.reveal.js-reveal-ready {
  opacity: 0;
  transform: translateY(24rem);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.js-reveal-ready.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal.js-reveal-ready { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Staggered reveal for card grids — each card in these four grids is its
   own .reveal element (not just the wrapper), so IntersectionObserver
   fades them in individually; the nth-child rules below just offset when
   each one starts so they cascade rather than all fade in at once. */
.stat-card.reveal:nth-child(1) { --reveal-delay: 0ms; }
.stat-card.reveal:nth-child(2) { --reveal-delay: 90ms; }
.stat-card.reveal:nth-child(3) { --reveal-delay: 180ms; }
.stat-card.reveal:nth-child(4) { --reveal-delay: 270ms; }
.reach__stat.reveal:nth-child(1) { --reveal-delay: 0ms; }
.reach__stat.reveal:nth-child(2) { --reveal-delay: 90ms; }
.reach__stat.reveal:nth-child(3) { --reveal-delay: 180ms; }
.reach__stat.reveal:nth-child(4) { --reveal-delay: 270ms; }
.pillar.reveal:nth-child(1) { --reveal-delay: 0ms; }
.pillar.reveal:nth-child(2) { --reveal-delay: 90ms; }
.pillar.reveal:nth-child(3) { --reveal-delay: 180ms; }
.pillar.reveal:nth-child(4) { --reveal-delay: 270ms; }
.principle.reveal:nth-child(1) { --reveal-delay: 0ms; }
.principle.reveal:nth-child(2) { --reveal-delay: 80ms; }
.principle.reveal:nth-child(3) { --reveal-delay: 160ms; }
.principle.reveal:nth-child(4) { --reveal-delay: 240ms; }
.principle.reveal:nth-child(5) { --reveal-delay: 320ms; }

/* ---------------------------------------------------------------------- */
/* Preloader                                                               */
/* ---------------------------------------------------------------------- */
.preloader {
  display: flex;
  align-items: flex-end;
  height: 100vh;
  padding-bottom: 60rem;
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: #000;          /* fallback while video loads */
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s var(--t-med);
  overflow: hidden;
}
/* Full-bleed background video */
.preloader__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  position: relative;
  z-index: 2;                      /* above video + scrim */
  font-size: 34rem;
  line-height: 0.9;
  text-transform: uppercase;
  padding-bottom: 20rem;
  color: #ffffff;
}
.preloader__text.js-split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30rem);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 30ms);
}
.preloader.is-revealing .preloader__text.js-split .char { opacity: 1; transform: none; }
.preloader__container-line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2rem;
  background-color: rgba(255, 255, 255, 0.45);
  width: 0%;
  transition: width 1.4s var(--ease-brand);
}
.preloader.is-counting .preloader__container-line { width: 100%; }
.preloader__progress { text-align: right; color: #ffffff; }
@media only screen and (max-width: 1024px) { .preloader__container { font-size: 24rem; } }
@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader__text.js-split .char { transition: none; opacity: 1; transform: none; }
  .preloader__container-line { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Ticker marquee                                                          */
/* ---------------------------------------------------------------------- */
.ticker { animation: ticker 22s linear infinite; white-space: nowrap; display: inline-block; padding-left: 100%; }
.ticker__item { margin-right: 60rem; }
.ticker__item:last-child { margin-right: 0; }
@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }

/* ---------------------------------------------------------------------- */
/* Header — floating pill nav, slides in on load, hides on scroll-down    */
/* ---------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transform: translateY(-140%);
  transition: transform var(--t-slow) var(--ease-out);
}
.header.is-visible { transform: translateY(0); }
.header.is-hidden-scroll { transform: translateY(-140%); }
@media (prefers-reduced-motion: reduce) { .header { transform: none; transition: none; } }
.header__container { padding: 26rem 100rem 0; max-width: 1760rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.header__logo {
  height: 68rem;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(144, 9, 9, 0.08);
  border-radius: 999rem;
  display: flex;
  align-items: center;
  gap: 12rem;
  padding: 0 28rem 0 18rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.06);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.header__logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 6rem 24rem rgba(144, 9, 9, 0.12);
}
.header__logo-icon { width: auto; height: 36rem; flex-shrink: 0; }
.header__logo span { margin-left: 8rem; font-size: 0.5em; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: 0.3em; color: rgba(144, 9, 9, 0.55); }
.header__menu {
  height: 68rem;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(144, 9, 9, 0.08);
  border-radius: 999rem;
  display: flex;
  align-items: center;
  gap: 36rem;
  padding: 0 38rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.06);
}
.header__menu-item { color: var(--ink); }

/* Header Dropdown Menu */
.header__menu-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.header__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.header__dropdown-arrow {
  width: 9rem;
  height: 6rem;
  transition: transform 0.3s ease;
  stroke: currentColor;
  display: inline-block;
  margin-left: 2rem;
}
.header__menu-dropdown:hover .header__dropdown-arrow,
.header__menu-dropdown:focus-within .header__dropdown-arrow {
  transform: rotate(180deg);
}
.header__dropdown-panel {
  position: absolute;
  top: calc(100% + 14rem);
  left: 50%;
  transform: translateX(-50%) translateY(10rem);
  width: 380rem;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  border-radius: 20rem;
  padding: 12rem;
  box-shadow: 0 16rem 40rem rgba(0, 0, 0, 0.12), 0 4rem 12rem rgba(144, 9, 9, 0.08);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s ease;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.header__dropdown-panel::before {
  content: '';
  position: absolute;
  top: -18rem;
  left: 0;
  right: 0;
  height: 18rem;
}
.header__menu-dropdown:hover .header__dropdown-panel,
.header__menu-dropdown:focus-within .header__dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.header__dropdown-link {
  display: flex;
  flex-direction: column;
  padding: 10rem 14rem;
  border-radius: 12rem;
  transition: background-color var(--t-fast), transform var(--t-fast);
  text-decoration: none;
  text-transform: none;
}
.header__dropdown-link:hover {
  background-color: #FAF4F4;
  transform: translateX(4rem);
}
.header__dropdown-name {
  font-family: 'Oswald', sans-serif;
  font-size: 15rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  transition: color var(--t-fast);
}
.header__dropdown-link:hover .header__dropdown-name {
  color: var(--accent);
}
.header__dropdown-sector {
  font-family: Inter, sans-serif;
  font-size: 11.5rem;
  color: #777777;
  margin-top: 3rem;
  line-height: 1.3;
}
.header__dropdown-all {
  margin-top: 4rem;
  padding-top: 8rem;
  border-top: 1px solid rgba(144, 9, 9, 0.1);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
  display: block;
  text-transform: uppercase;
  transition: color var(--t-fast);
  text-decoration: none;
}
.header__dropdown-all:hover {
  color: var(--accent);
}

.header__hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 52rem;
  padding: 0 22rem;
  font-size: 14rem;
  font-weight: 600;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(144, 9, 9, 0.1);
  border-radius: 999rem;
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.06);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.header__hamburger-btn:hover {
  transform: translateY(-1px);
  background-color: #ffffff;
}
@media only screen and (max-width: 1024px) {
  .header { transform: translateY(0); }
  .header.is-hidden-scroll { transform: translateY(-140%); }
  .header__container { padding: 16rem 20rem 0; }
  .header__logo { height: 52rem; padding: 0 16rem; font-size: 19rem; }
  .header__menu { display: none; }
  .header__hamburger-btn { display: flex; }
  .header__hamburger-btn .is-active { display: none; }
  .header__hamburger-btn.active .is-active { display: block; }
  .header__hamburger-btn.active .is-not-active { display: none; }
}

.header__hamburger {
  position: fixed;
  inset: 0;
  height: 100vh;
  background-color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0 24rem;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease-out), visibility var(--t-med);
  visibility: hidden;
  z-index: 40;
  overflow-y: auto;
}
.header__hamburger.active { transform: translateX(0); visibility: visible; }
.header__hamburger-menu { display: flex; flex-direction: column; gap: 14rem; padding-top: 60rem; padding-bottom: 40rem; }
.header__hamburger-menu > a { font-size: 32rem; text-transform: uppercase; color: #fff; padding-bottom: 10rem; border-bottom: 1rem solid rgba(255, 255, 255, 0.15); }

/* Mobile Hamburger Dropdown */
.header__hamburger-accordion {
  display: flex;
  flex-direction: column;
  border-bottom: 1rem solid rgba(255, 255, 255, 0.15);
  padding-bottom: 8rem;
}
.header__hamburger-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0 0 10rem;
  font-family: inherit;
  font-size: 32rem;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.header__hamburger-arrow {
  width: 18rem;
  height: 18rem;
  transition: transform var(--t-fast);
}
.header__hamburger-parent.active .header__hamburger-arrow {
  transform: rotate(180deg);
}
.header__hamburger-sub {
  display: none;
  flex-direction: column;
  gap: 8rem;
  padding: 8rem 0 6rem 12rem;
}
.header__hamburger-sub.active {
  display: flex;
}
.header__hamburger-subitem {
  font-family: Inter, sans-serif !important;
  font-size: 14rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-transform: none !important;
  padding-bottom: 6rem !important;
  border-bottom: none !important;
  line-height: 1.35 !important;
}
.header__hamburger-subitem:hover {
  color: #fff !important;
}
.header__hamburger-subitem._all {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 16rem !important;
  text-transform: uppercase !important;
  color: #ff9999 !important;
  margin-bottom: 4rem;
}

/* ---------------------------------------------------------------------- */
/* Route graphic — shared inline SVG background motif (our own artwork,   */
/* standing in for the source site's real fleet video)                   */
/* ---------------------------------------------------------------------- */
.route-bg { position: absolute; inset: 0; overflow: hidden; }
.route-bg .section-photo { z-index: 0; }
.route-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.route-bg .route-line { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; stroke-dasharray: 10 10; animation: routeDash 30s linear infinite; }
.route-bg .route-node { fill: #fff; opacity: 0.5; }
.route-bg .route-glyph { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.6; fill: none; }
@keyframes routeDash { to { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) { .route-bg .route-line { animation: none; } }

/* ---------------------------------------------------------------------- */
/* 01 — Hero                                                                */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 130rem;
  padding-bottom: 36rem;
  background-color: #ffffff;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero > .hero__bg .section-photo {
  opacity: 1;
  object-fit: cover;
  object-position: right center;
  width: 100%;
  height: 100%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(90deg, 
      #ffffff 0%, 
      #ffffff 26%, 
      rgba(255, 255, 255, 0.96) 34%, 
      rgba(255, 255, 255, 0.72) 44%, 
      rgba(255, 255, 255, 0.25) 54%, 
      rgba(255, 255, 255, 0) 66%
    ),
    linear-gradient(to top, 
      rgba(0, 0, 0, 0.35) 0%, 
      rgba(0, 0, 0, 0.08) 12%, 
      rgba(0, 0, 0, 0) 22%
    );
}
.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
}
.hero .section-watermark { top: 60rem; color: rgba(144, 9, 9, 0.04); }
.hero__eyebrow { font-family: Inter, sans-serif; font-size: 14rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: #555555; margin-bottom: 22rem; }
.hero__title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 46rem; max-width: 720rem; line-height: 1.15; color: var(--ink); margin-bottom: 22rem; letter-spacing: -0.01em; }
.hero__text { font-family: Inter, sans-serif; font-size: 15.5rem; font-weight: 400; line-height: 1.35; max-width: 580rem; color: #4a4a4a; margin-bottom: 36rem; }
.hero__marquee { display: none !important; } /* strictly hidden on desktop; shown only on mobile <= 640px */
.hero__actions { display: flex; gap: 16rem; flex-wrap: wrap; margin-bottom: 48rem; }
.hero__stats { margin-top: 0; max-width: 1160rem; width: 100%; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16rem; width: 100%; }
.stat-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 18rem;
  background: #ffffff;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  padding: 20rem 24rem;
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.03);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
  box-shadow: 0 8rem 28rem rgba(144, 9, 9, 0.08);
}
.stat-card__content { display: flex; flex-direction: column; }
.stat-card__value { font-family: 'Oswald', 'Bebas Neue', sans-serif; font-size: 44rem; font-weight: 700; color: var(--ink); line-height: 1; }
.stat-card__label {
  font-family: Inter, sans-serif;
  font-size: 12rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #555555;
  margin-top: 6rem;
}
.stat-card__icon { width: 36rem; height: 36rem; color: var(--ink); opacity: 0.85; flex-shrink: 0; margin-left: 14rem; }

.hero__scroll-cue {
  position: absolute;
  bottom: 24rem;
  right: 36rem;
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  font-family: Inter, sans-serif;
  font-size: 11.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(144, 9, 9, 0.85);
  font-weight: 600;
  padding: 8rem 18rem;
  border-radius: 999rem;
  background-color: rgba(255, 255, 255, 0.92);
  border: 1.5rem solid rgba(144, 9, 9, 0.16);
  backdrop-filter: blur(10rem);
  -webkit-backdrop-filter: blur(10rem);
  box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.05);
  transition: all var(--t-fast);
  z-index: 3;
}
.hero__scroll-cue svg { width: 14rem; height: 14rem; animation: floatDown 2s ease-in-out infinite; }
.hero__scroll-cue:hover {
  background-color: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
  transform: translateY(-2rem);
  box-shadow: 0 6rem 20rem rgba(144, 9, 9, 0.25);
}
@keyframes floatDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5rem); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-cue svg { animation: none; } }

@media only screen and (max-width: 1440px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: 110rem;
    padding-bottom: 32rem;
    justify-content: flex-end;
  }
  .hero__container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero__title { font-size: 38rem; max-width: 650rem; margin-bottom: 18rem; }
  .hero__text { font-size: 15rem; max-width: 520rem; margin-bottom: 26rem; }
  .hero__actions { margin-bottom: 36rem; }
  .stat-grid { gap: 12rem; }
  .stat-card { padding: 16rem 18rem; }
  .stat-card__value { font-size: 36rem; }
}

@media only screen and (max-width: 1024px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: 120rem;
    padding-bottom: 32rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* Top portion shows the port image clearly and naturally */
  .hero > .hero__bg .section-photo {
    opacity: 1;
    object-position: right center;
  }
  /* Soft white gradient localized specifically behind lower-middle content area */
  .hero__scrim {
    background: linear-gradient(180deg, 
      rgba(255, 255, 255, 0) 0%, 
      rgba(255, 255, 255, 0) 24%, 
      rgba(255, 255, 255, 0.32) 36%, 
      rgba(255, 255, 255, 0.76) 48%, 
      rgba(255, 255, 255, 0.90) 65%, 
      rgba(255, 255, 255, 0.95) 100%
    );
  }
  .hero__container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
  }
  /* Tablet Typography: Slightly larger heading & labels for better readability */
  .hero__eyebrow { font-size: 13rem; font-weight: 600; letter-spacing: 0.16em; margin-bottom: 12rem; color: #a45d5d; }
  .hero__title { font-size: clamp(38rem, 4.8vw, 44rem); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 18rem; max-width: 720rem; }
  .hero__text { font-size: 16rem; line-height: 1.42; color: #4a4a4a; margin-bottom: 28rem; max-width: 600rem; }
  
  /* CTAs: Side-by-side pills on tablet */
  .hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14rem;
    margin-bottom: 34rem;
  }
  .hero__actions .btn {
    width: auto;
    min-width: 190rem;
    height: 50rem;
    font-size: 15.5rem;
    padding: 0 30rem;
    border-radius: 999rem;
  }
  .hero__stats {
    margin-top: 0;
    max-width: 100%;
    width: 100%;
  }
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12rem;
  }
  .stat-card {
    padding: 16rem 18rem;
    border-radius: 14rem;
  }
  .stat-card__value { font-size: 32rem; }
  .stat-card__label { font-size: 11.5rem; line-height: 1.25; margin-top: 4rem; }
  .stat-card__icon { width: 26rem; height: 26rem; margin-left: 8rem; }
  .hero__scroll-cue { display: none; }
}

/* Tablet portrait (≤820px) — arrange stats vertically as in mockup */
@media only screen and (max-width: 820px) and (min-width: 641px) {
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 10rem;
  }
  .stat-card {
    padding: 14rem 20rem;
    border-radius: 16rem;
  }
  .stat-card__value { font-size: 28rem; }
  .stat-card__label { font-size: 12rem; }
}

@media only screen and (max-width: 640px) {
  /* Mobile: Fill viewport cleanly and anchor hero content to bottom */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: 90rem;
    padding-bottom: 24rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-x: hidden;
  }
  /* Top portion shows the port image clearly and naturally with 100% photo opacity */
  .hero > .hero__bg .section-photo {
    opacity: 1;
    object-position: 65% center;
  }
  /* Soft white gradient localized specifically behind lower-middle text area */
  .hero__scrim {
    background: linear-gradient(180deg, 
      rgba(255, 255, 255, 0) 0%, 
      rgba(255, 255, 255, 0) 20%, 
      rgba(255, 255, 255, 0.28) 30%, 
      rgba(255, 255, 255, 0.72) 42%, 
      rgba(255, 255, 255, 0.88) 55%, 
      rgba(255, 255, 255, 0.94) 100%
    );
  }
  .hero__container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 0;
    width: 100%;
  }
  .hero .section-watermark { display: none !important; }
  /* Mobile-only auto-scrolling watermark marquee above content block */
  .hero__marquee {
    display: block !important;
    width: calc(100% + 40rem);
    margin-left: -20rem;
    margin-right: -20rem;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 12rem;
  }
  .hero__marquee__track {
    display: inline-flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: heroMarqueeScroll 20s linear infinite;
  }
  .hero__marquee__track span {
    display: inline-block;
    flex-shrink: 0;
    font-family: 'Oswald', 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-size: clamp(32rem, 11vw, 44rem);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(144, 9, 9, 0.065);
    white-space: nowrap;
  }

  /* Mobile Typography: Slightly larger heading & supporting text */
  .hero__eyebrow { font-size: 12rem; font-weight: 600; letter-spacing: 0.14em; margin-bottom: 8rem; color: #a45d5d; }
  .hero__title { font-size: clamp(29rem, 7.8vw, 36rem); line-height: 1.14; letter-spacing: -0.01em; margin-bottom: 12rem; max-width: 100%; }
  .hero__text { font-size: 14.5rem; line-height: 1.38; color: #4a4a4a; margin-bottom: 20rem; max-width: 100%; }

  /* CTAs: Stacked vertically in TWO ROWS on mobile as shown in mockup */
  .hero__actions {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    width: 100%;
    margin-bottom: 20rem;
  }
  .hero__actions .btn {
    width: 100%;
    height: 48rem;
    min-height: 48rem;
    flex-shrink: 0;
    padding: 0 16rem;
    font-size: 14.5rem;
    font-weight: 600;
    border-radius: 999rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  /* Counters: Arranged vertically one by one pinned to the bottom side */
  .hero__stats {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
  }
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 8rem;
    width: 100%;
  }
  .stat-card {
    padding: 12rem 18rem;
    border-radius: 14rem;
    background: #ffffff;
    border: 1.5rem solid rgba(144, 9, 9, 0.12);
    box-shadow: 0 4rem 14rem rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stat-card__content {
    display: flex;
    flex-direction: column;
  }
  .stat-card__value { font-size: 25rem; font-weight: 700; line-height: 1; color: var(--ink); }
  .stat-card__label { font-size: 11.5rem; line-height: 1.25; margin-top: 2rem; color: #555555; font-weight: 500; }
  .stat-card__icon { width: 22rem; height: 22rem; margin-left: 8rem; opacity: 0.85; }
  .hero__scroll-cue { display: none; }
}

@media only screen and (max-width: 380px) {
  .hero {
    padding-top: 80rem;
    padding-bottom: 18rem;
    justify-content: flex-end;
  }
  .hero__container {
    justify-content: flex-end;
  }
  .hero__marquee {
    margin-bottom: 10rem;
  }
  .hero__eyebrow {
    font-size: 11.5rem;
    margin-bottom: 6rem;
  }
  .hero__title {
    font-size: 26rem;
    line-height: 1.14;
    margin-bottom: 10rem;
  }
  .hero__text {
    font-size: 13.5rem;
    line-height: 1.34;
    margin-bottom: 16rem;
  }
  .hero__actions {
    gap: 8rem;
    margin-bottom: 18rem;
  }
  .hero__actions .btn {
    height: 44rem;
    min-height: 44rem;
    flex-shrink: 0;
    font-size: 13.5rem;
    padding: 0 12rem;
  }
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 6rem;
  }
  .stat-card {
    padding: 10rem 14rem;
    border-radius: 12rem;
  }
  .stat-card__value { font-size: 23rem; }
  .stat-card__label { font-size: 10.5rem; }
  .stat-card__icon { width: 20rem; height: 20rem; }
}

@keyframes heroMarqueeScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__marquee__track { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* 02 — The Group: statement + stats + sector explorer, one section       */
/* ---------------------------------------------------------------------- */
.group { position: relative; overflow: hidden; min-height: auto; display: flex; align-items: center; padding: 70rem 0 80rem; }
.group > .container { position: relative; z-index: 1; width: 100%; }
.group__head { margin-bottom: 28rem; }
.group__head-info { max-width: 780rem; }
.group__eyebrow { font-family: Inter, sans-serif; font-size: 13rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: #a45d5d; margin-bottom: 12rem; }
.group__title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 46rem; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 16rem; }
.group__accent-line { display: block; width: 44rem; height: 2.5rem; background-color: var(--ink); margin-bottom: 20rem; border-radius: 2rem; }
.group__intro { font-family: Inter, sans-serif; font-size: 15rem; line-height: 1.35; color: #555555; max-width: 600rem; }

/* Marquee / Ticker Strip with Hover Pause */
.group__ticker-wrap {
  margin: 20rem 0 32rem;
  padding: 12rem 0;
  border-top: 1px solid rgba(144, 9, 9, 0.12);
  border-bottom: 1px solid rgba(144, 9, 9, 0.12);
  overflow: hidden;
  position: relative;
  user-select: none;
  cursor: default;
}
.group__ticker-wrap::before,
.group__ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60rem;
  z-index: 2;
  pointer-events: none;
}
.group__ticker-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.group__ticker-wrap::after {
  right: 0;
  background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.ticker {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScroll 28s linear infinite;
}
.group__ticker-wrap:hover .ticker {
  animation-play-state: paused;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  font-family: 'Oswald', sans-serif;
  font-size: 15rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(144, 9, 9, 0.55);
  padding-right: 28rem;
  transition: color 0.3s ease;
}
.group__ticker-wrap:hover .ticker__item {
  color: var(--ink);
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
}

.sectors__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24rem;
  margin-bottom: 36rem;
  flex-wrap: wrap;
}
.sectors__head-info {
  max-width: 680rem;
}
.sectors__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 38rem;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 14rem;
}
.sectors__accent-line {
  display: block;
  width: 44rem;
  height: 2.5rem;
  background-color: var(--ink);
  margin-bottom: 20rem;
  border-radius: 2rem;
}
.sectors__intro {
  font-family: Inter, sans-serif;
  font-size: 15.5rem;
  line-height: 1.36;
  color: #555555;
  max-width: 620rem;
}
.sectors__nav {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin-bottom: 4rem;
  flex-shrink: 0;
}

.sectors__track-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 34rem;
}
.sectors__track {
  display: flex;
  gap: 18rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4rem;
  padding: 6rem 4rem 14rem;
  margin: -6rem -4rem;
  scrollbar-width: none;
}
.sectors__track::-webkit-scrollbar { display: none; }

.sector-card {
  flex: 0 0 320rem;
  scroll-snap-align: start;
  border-radius: 16rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.03);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.sector-card:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
  box-shadow: 0 10rem 28rem rgba(144, 9, 9, 0.1);
}

.sector-card__photo-wrap {
  position: relative;
  height: 160rem;
  overflow: hidden;
  background-color: var(--ink);
}
.sector-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.sector-card:hover .sector-card__photo {
  transform: scale(1.06);
}
.sector-card__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 20%, rgba(14, 4, 4, 0.72) 100%);
  pointer-events: none;
}
.sector-card__badge {
  position: absolute;
  bottom: 12rem;
  right: 14rem;
  display: flex;
  align-items: center;
  z-index: 2;
}
.sector-card__icon {
  width: 38rem;
  height: 38rem;
  border-radius: 10rem;
  background-color: rgba(144, 9, 9, 0.92);
  backdrop-filter: blur(8rem);
  -webkit-backdrop-filter: blur(8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.25);
}
.sector-card__icon svg {
  width: 19rem;
  height: 19rem;
}

.sector-card__body {
  padding: 20rem 20rem 22rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}
.sector-card__name {
  font-family: 'Oswald', sans-serif;
  font-size: 23rem;
  font-weight: 600;
  text-transform: none;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 10rem;
  letter-spacing: 0.01em;
}
.sector-card__text {
  font-family: Inter, sans-serif;
  font-size: 13.5rem;
  line-height: 1.32;
  color: #555555;
  margin-bottom: 18rem;
  flex-grow: 1;
}
.sector-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.sector-card__tag {
  font-family: Inter, sans-serif;
  font-size: 11.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 5rem 12rem;
  border-radius: 999rem;
  background-color: rgba(144, 9, 9, 0.08);
  color: var(--ink);
}

.group__actions {
  display: flex;
  justify-content: flex-start;
}

@media only screen and (max-width: 1440px) {
  .group { padding: 60rem 0 70rem; }
  .group__title { font-size: 40rem; }
  .sector-card { flex: 0 0 290rem; }
}

@media only screen and (max-width: 1024px) {
  .group { padding: 50rem 0 60rem; }
  .group__title { font-size: 34rem; }
  .group__ticker-wrap { margin: 24rem 0 32rem; font-size: 14rem; }
  .sectors__title { font-size: 26rem; }
  .sector-card { flex: 0 0 270rem; }
}

@media only screen and (max-width: 640px) {
  .group__title { font-size: 28rem; }
  .group__intro { font-size: 14rem; }
  .sectors__head { flex-direction: column; align-items: flex-start; gap: 14rem; }
  .sector-card { flex: 0 0 250rem; }
}

/* ---------------------------------------------------------------------- */
/* Horizontal scroll-snap strip — shared by "How We Create Value" and     */
/* "Our Business Ecosystem". Native CSS scroll-snap: no JS required for   */
/* it to work, JS only adds prev/next buttons + a progress readout.       */
/* ---------------------------------------------------------------------- */
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20rem; margin-bottom: 24rem; flex-wrap: wrap; }
.strip-eyebrow { color: rgba(144, 9, 9, 0.5); margin-bottom: 8rem; }
.strip-eyebrow._on-dark { color: rgba(255, 255, 255, 0.5); }
.strip-title { font-size: 36rem; color: var(--ink); line-height: 1.18; }
.strip-title._on-dark { color: #fff; }
.strip-intro { margin-top: 10rem; max-width: 580rem; font-family: Inter, sans-serif; font-size: 14rem; color: rgba(144, 9, 9, 0.6); }
.strip-intro._on-dark { color: rgba(255, 255, 255, 0.6); }
.strip-nav { display: flex; gap: 10rem; align-items: center; flex-shrink: 0; }
.strip-counter { font-family: Inter, sans-serif; font-size: 14rem; color: rgba(144, 9, 9, 0.55); margin-right: 6rem; }
.strip-counter._on-dark { color: rgba(255, 255, 255, 0.55); }
.strip-nav-btn {
  width: 44rem;
  height: 44rem;
  border-radius: 999rem;
  border: 1rem solid rgba(144, 9, 9, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.strip-nav-btn._on-dark { border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.strip-nav-btn svg { width: 18rem; height: 18rem; }
.strip-nav-btn:hover { background-color: var(--ink); border-color: var(--ink); color: #fff; }
.strip-nav-btn._on-dark:hover { background-color: #fff; border-color: #fff; color: var(--ink); }
.strip-nav-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.strip-track {
  display: flex;
  gap: 14rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 40rem;
  padding: 4rem 4rem 10rem;
  margin: -4rem;
  scrollbar-width: none;
}
.strip-track::-webkit-scrollbar { display: none; height: 0; }

/* ---------------------------------------------------------------------- */
/* 03 — How We Create Value (From Opportunity to Impact)                   */
/* ---------------------------------------------------------------------- */
.journey {
  position: relative;
  overflow: hidden;
  padding: 80rem 0 90rem;
  background-color: #FAF4F4;
}
.journey > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.journey__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24rem;
  margin-bottom: 40rem;
  flex-wrap: wrap;
}
.journey__head-info {
  max-width: 680rem;
}
.journey__eyebrow {
  font-family: Inter, sans-serif;
  font-size: 13rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #a45d5d;
  margin-bottom: 12rem;
}
.journey__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 46rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 16rem;
}
.journey__accent-line {
  display: block;
  width: 44rem;
  height: 2.5rem;
  background-color: var(--ink);
  margin-bottom: 22rem;
  border-radius: 2rem;
}
.journey__intro {
  font-family: Inter, sans-serif;
  font-size: 15.5rem;
  line-height: 1.36;
  color: #555555;
  max-width: 620rem;
}

/* Connected Value Creation Process Pipeline */
.value-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16rem;
  width: 100%;
  margin-top: 48rem;
}

/* Continuous background timeline connecting line */
.value-pipeline::before {
  content: '';
  position: absolute;
  top: 42rem;
  left: 8%;
  right: 8%;
  height: 2.5rem;
  background: linear-gradient(90deg, 
    rgba(144, 9, 9, 0.12) 0%, 
    rgba(144, 9, 9, 0.45) 50%, 
    rgba(144, 9, 9, 0.12) 100%
  );
  z-index: 0;
}

.value-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6rem;
  transition: transform var(--t-fast);
}
.value-step:hover {
  transform: translateY(-5rem);
}

.value-step__node-wrap {
  position: relative;
  margin-bottom: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-step__node {
  width: 84rem;
  height: 84rem;
  border-radius: 50%;
  background: #ffffff;
  border: 2rem solid rgba(144, 9, 9, 0.22);
  box-shadow: 0 6rem 20rem rgba(144, 9, 9, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all var(--t-fast);
  position: relative;
  z-index: 2;
}
.value-step:hover .value-step__node {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 10rem 28rem rgba(144, 9, 9, 0.28);
  transform: scale(1.08);
}
.value-step__node svg {
  width: 32rem;
  height: 32rem;
  transition: color var(--t-fast);
}

.value-step__image-wrap {
  width: 100%;
  height: 125rem;
  border-radius: 16rem;
  overflow: hidden;
  margin-bottom: 18rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
  box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.03);
  background: #ffffff;
  position: relative;
}
.value-step__image {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.value-step:hover .value-step__image {
  transform: scale(1.08);
}

.value-step__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.value-step__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 21rem;
  line-height: 1.22;
  color: var(--ink);
  margin-bottom: 10rem;
  letter-spacing: -0.01em;
}
.value-step__text {
  font-family: Inter, sans-serif;
  font-size: 13.5rem;
  line-height: 1.32;
  color: #555555;
  max-width: 230rem;
}
.value-step__indicator {
  margin-top: 14rem;
  display: inline-flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 11.5rem;
  font-weight: 600;
  color: var(--ink);
  background-color: rgba(144, 9, 9, 0.07);
  border: 1px solid rgba(144, 9, 9, 0.16);
  padding: 4rem 12rem;
  border-radius: 999rem;
  letter-spacing: 0.04em;
  transition: all var(--t-fast);
}
.value-step:hover .value-step__indicator {
  background-color: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

@media only screen and (max-width: 1440px) {
  .journey__title { font-size: 40rem; }
  .value-step__title { font-size: 19rem; }
  .value-step__image-wrap { height: 110rem; }
}

@media only screen and (max-width: 1024px) {
  .journey { padding: 50rem 0 60rem; }
  .journey__title { font-size: 34rem; }
  .value-pipeline {
    grid-template-columns: 1fr;
    gap: 24rem;
    position: relative;
    padding-left: 24rem;
    margin-top: 36rem;
  }
  .value-pipeline::before {
    top: 20rem;
    bottom: 20rem;
    left: 45rem;
    right: auto;
    width: 2.5rem;
    height: auto;
    background: linear-gradient(180deg, 
      rgba(144, 9, 9, 0.15) 0%, 
      rgba(144, 9, 9, 0.45) 50%, 
      rgba(144, 9, 9, 0.15) 100%
    );
  }
  .value-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20rem;
    padding: 0;
  }
  .value-step__node-wrap {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .value-step__node {
    width: 54rem;
    height: 54rem;
  }
  .value-step__node svg { width: 22rem; height: 22rem; }
  .value-step__image-wrap {
    width: 150rem;
    height: 105rem;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .value-step__body {
    align-items: flex-start;
    flex: 1;
  }
  .value-step__text { max-width: 100%; }
}

@media only screen and (max-width: 640px) {
  .journey__title { font-size: 28rem; }
  .journey__intro { font-size: 14rem; }
  .value-pipeline {
    display: flex;
    flex-direction: column;
    gap: 18rem;
    padding-left: 0;
    margin-top: 28rem;
  }
  .value-pipeline::before { display: none; }
  .value-step {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #ffffff;
    border: 1.5rem solid rgba(144, 9, 9, 0.14);
    border-radius: 20rem;
    padding: 22rem 18rem 24rem;
    box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.03);
    gap: 0;
    width: 100%;
  }
  .value-step__node-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 14rem;
  }
  .value-step__node {
    width: 46rem;
    height: 46rem;
    border-radius: 12rem;
    border: 1.5rem solid rgba(144, 9, 9, 0.18);
    background: rgba(144, 9, 9, 0.06);
    color: var(--ink);
    box-shadow: none;
  }
  .value-step__node svg { width: 20rem; height: 20rem; }
  .value-step__image-wrap {
    width: 100%;
    height: 155rem;
    border-radius: 14rem;
    margin-bottom: 16rem;
    flex-shrink: 0;
  }
  .value-step__image {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    display: block;
  }
  .value-step__body {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  .value-step__title {
    font-size: 21rem;
    margin-bottom: 8rem;
    color: var(--ink);
    line-height: 1.25;
  }
  .value-step__text {
    font-size: 14rem;
    line-height: 1.32;
    color: #555555;
    max-width: 100%;
  }
  .value-step__indicator {
    margin-top: 14rem;
    align-self: flex-start;
  }
}

/* ---------------------------------------------------------------------- */
/* 04 — Our Business Ecosystem (horizontal, alternating light cards)      */
/* ---------------------------------------------------------------------- */
.businesses { position: relative; overflow: hidden; min-height: auto; display: flex; align-items: center; padding: 70rem 0 80rem; background-color: var(--paper); }
.businesses > .container { position: relative; z-index: 1; width: 100%; }
.businesses__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24rem;
  margin-bottom: 36rem;
}
.businesses__head-info {
  max-width: 680rem;
}
.businesses__eyebrow {
  font-family: Inter, sans-serif;
  font-size: 13rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.08em;
  color: #a45d5d;
  margin-bottom: 12rem;
}
.businesses__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 46rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 16rem;
}
.businesses__accent-line {
  display: block;
  width: 44rem;
  height: 2.5rem;
  background-color: var(--ink);
  margin-bottom: 22rem;
  border-radius: 2rem;
}
.businesses__intro {
  font-family: Inter, sans-serif;
  font-size: 15.5rem;
  line-height: 1.36;
  color: #555555;
  max-width: 620rem;
}

.strip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24rem;
  margin-bottom: 36rem;
}
.strip-nav {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin-bottom: 4rem;
  flex-shrink: 0;
}
.strip-counter {
  font-family: Inter, sans-serif;
  font-size: 14rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.05em;
  margin-right: 4rem;
}
.strip-nav-btn {
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  border: 1.5rem solid rgba(144, 9, 9, 0.2);
  background-color: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4rem 14rem rgba(0, 0, 0, 0.04);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.strip-nav-btn svg { width: 18rem; height: 18rem; }
.strip-nav-btn:hover {
  border-color: var(--ink);
  background-color: #FAF4F4;
  transform: translateY(-2rem);
}
.strip-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  transform: none;
}
.strip-track {
  display: flex;
  gap: 20rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4rem;
  padding: 6rem 4rem 18rem;
  margin: -6rem -4rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.strip-track::-webkit-scrollbar { display: none; }

.business-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 360rem;
  border-radius: 18rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  color: var(--ink);
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.03);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.business-card:hover {
  border-color: var(--ink);
  box-shadow: 0 12rem 32rem rgba(144, 9, 9, 0.12);
  transform: translateY(-5rem);
}
.business-card._accent {
  background-color: #FAF4F4;
  border-color: rgba(144, 9, 9, 0.18);
  box-shadow: 0 4rem 18rem rgba(144, 9, 9, 0.04);
}
.business-card._accent:hover {
  border-color: var(--ink);
  box-shadow: 0 12rem 32rem rgba(144, 9, 9, 0.14);
  transform: translateY(-5rem);
}
.business-card__photo-wrap { height: 135rem; flex-shrink: 0; overflow: hidden; }
.business-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.business-card:hover .business-card__photo { transform: scale(1.06); }
.business-card__body { padding: 22rem 22rem 24rem; display: flex; flex-direction: column; flex: 1; }
.business-card__top { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 14rem; }
.business-card__icon { width: 42rem; height: 42rem; border-radius: 10rem; background-color: rgba(144, 9, 9, 0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); transition: transform 0.3s ease, background-color 0.3s ease; }
.business-card._accent .business-card__icon { background-color: rgba(144, 9, 9, 0.10); color: var(--ink); }
.business-card:hover .business-card__icon { transform: scale(1.05); background-color: rgba(144, 9, 9, 0.14); }
.business-card__icon svg { width: 18rem; height: 18rem; }
.business-card__tag {
  align-self: flex-start;
  font-family: Inter, sans-serif;
  font-size: 11.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 5rem 13rem;
  border-radius: 999rem;
  background-color: rgba(144, 9, 9, 0.07);
  color: var(--ink);
  margin-bottom: 12rem;
}
.business-card._accent .business-card__tag { background-color: rgba(144, 9, 9, 0.10); color: var(--ink); }
.business-card__name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 24rem; text-transform: none; line-height: 1.18; margin-bottom: 10rem; color: var(--ink); }
.business-card__text { font-family: Inter, sans-serif; font-size: 13.5rem; line-height: 1.32; color: #555555; opacity: 0.9; flex-grow: 1; margin-bottom: 16rem; }
.business-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13rem;
  color: var(--ink);
  align-self: flex-start;
}
.business-card__link svg { width: 14rem; height: 14rem; transition: transform var(--t-fast); }
.business-card:hover .business-card__link svg,
.business-card__link:hover svg { transform: translateX(5rem); }

@media only screen and (max-width: 1440px) {
  .businesses__title { font-size: 40rem; }
  .business-card { width: 320rem; }
}

@media only screen and (max-width: 1024px) {
  .businesses { padding: 50rem 0 60rem; }
  .businesses__title { font-size: 34rem; }
  .business-card { width: 290rem; }
  .business-card__photo-wrap { height: 120rem; }
  .business-card__body { padding: 20rem; }
  .business-card__name { font-size: 22rem; }
}

@media only screen and (max-width: 640px) {
  .businesses__title { font-size: 28rem; }
  .businesses__intro { font-size: 14rem; }
  .business-card { width: 260rem; }
}

/* ---------------------------------------------------------------------- */
/* 05 — Global Reach + Impact                                             */
/* ---------------------------------------------------------------------- */
.reach {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: 85rem 0 95rem;
  background-color: #FAF4F4;
  overflow: hidden;
}
.reach__bg { opacity: 0.7; }
.reach__bg .section-photo { opacity: 0.05; filter: grayscale(100%); }
.reach__bg .route-line {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  opacity: 0.3;
  animation: routeLineFlow 30s linear infinite;
}
@keyframes routeLineFlow {
  to { stroke-dashoffset: -360; }
}
@media (prefers-reduced-motion: reduce) {
  .route-line { animation: none; }
}
.reach__bg .route-node { fill: var(--ink); opacity: 0.38; }
.reach__container { position: relative; z-index: 1; width: 100%; }

.reach__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48rem;
  align-items: center;
}
.reach__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.reach__head { margin-bottom: 24rem; }
.reach__head-info { max-width: 620rem; }
.reach__eyebrow { font-family: Inter, sans-serif; font-size: 13rem; font-weight: 600; text-transform: none; letter-spacing: 0.08em; color: #a45d5d; margin-bottom: 12rem; }
.reach__title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 46rem; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 16rem; }
.reach__accent-line { display: block; width: 44rem; height: 2.5rem; background-color: var(--ink); margin-bottom: 22rem; border-radius: 2rem; }
.reach__intro { font-family: Inter, sans-serif; font-size: 15rem; line-height: 1.36; color: #555555; max-width: 540rem; margin-bottom: 32rem; }

/* Bigger, prominent stat cards */
.reach__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14rem;
}
.reach__stat {
  border-radius: 18rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  background: #ffffff;
  padding: 30rem 16rem 28rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 155rem;
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.025);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.reach__stat:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
  box-shadow: 0 8rem 28rem rgba(144, 9, 9, 0.08);
}
.reach__stat-value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 42rem;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 12rem;
}
.reach__stat-label {
  font-family: Inter, sans-serif;
  font-size: 12rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  color: #555555;
}

/* Right side pillars */
.reach__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.reach__pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rem;
  margin-bottom: 28rem;
}
.pillar {
  border-radius: 18rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  background: #ffffff;
  padding: 22rem 20rem 22rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 140rem;
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.025);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.pillar:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
  box-shadow: 0 8rem 28rem rgba(144, 9, 9, 0.08);
}
.pillar__top {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin-bottom: 10rem;
}
.pillar__icon {
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: rgba(144, 9, 9, 0.08);
  border: 1.5rem solid rgba(144, 9, 9, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pillar__icon svg {
  width: 20rem;
  height: 20rem;
  color: var(--ink);
}
.pillar__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 21rem;
  text-transform: none;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.pillar__text {
  font-family: Inter, sans-serif;
  font-size: 13.5rem;
  line-height: 1.32;
  color: #555555;
}
.reach__action {
  display: flex;
  justify-content: flex-end;
}

@media only screen and (max-width: 1440px) {
  .reach__title { font-size: 40rem; }
  .reach__stat-value { font-size: 38rem; }
}

@media only screen and (max-width: 1024px) {
  .reach { padding: 50rem 0 60rem; }
  .reach__grid { grid-template-columns: 1fr; gap: 34rem; }
  .reach__title { font-size: 34rem; max-width: 100%; }
  .reach__intro { margin-bottom: 24rem; }
  .reach__stats { grid-template-columns: repeat(2, 1fr); gap: 12rem; }
  .reach__stat { min-height: 130rem; padding: 22rem 16rem; }
  .reach__stat-value { font-size: 32rem; }
  .reach__pillars { grid-template-columns: repeat(2, 1fr); gap: 12rem; }
  .reach__action { justify-content: flex-start; }
}

@media only screen and (max-width: 640px) {
  .reach__title { font-size: 28rem; }
  .reach__intro { font-size: 14rem; }
  .reach__stats { grid-template-columns: repeat(2, 1fr); gap: 10rem; }
  .reach__stat { min-height: 115rem; padding: 18rem 12rem; }
  .reach__stat-value { font-size: 28rem; }
  .reach__pillars { grid-template-columns: 1fr; gap: 10rem; }
}

/* ---------------------------------------------------------------------- */
/* 06 — Why Altysier + Testimonials                                       */
/* ---------------------------------------------------------------------- */
.why {
  position: relative;
  overflow: hidden;
  padding: 80rem 0 90rem;
  background-color: #ffffff;
}
.why__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.why__bg .section-photo {
  opacity: 0.04;
  filter: grayscale(100%);
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.why > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.why__head {
  margin-bottom: 54rem;
}
.why__head-info {
  max-width: 780rem;
}
.why__eyebrow {
  font-family: Inter, sans-serif;
  font-size: 13rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.08em;
  color: #a45d5d;
  margin-bottom: 12rem;
}
.why__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 46rem;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 16rem;
  letter-spacing: -0.01em;
}
.why__accent-line {
  display: block;
  width: 44rem;
  height: 2.5rem;
  background-color: var(--ink);
  margin-bottom: 22rem;
  border-radius: 2rem;
}
.why__intro {
  font-family: Inter, sans-serif;
  font-size: 15rem;
  line-height: 1.36;
  color: #555555;
  max-width: 620rem;
  text-transform: none;
}

/* Why Trust 5 Principle Cards */
.why__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14rem;
  margin-bottom: 40rem;
}

.principle {
  border-radius: 16rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  background: #FAF4F4;
  padding: 22rem 18rem;
  display: flex;
  align-items: flex-start;
  gap: 14rem;
  box-shadow: 0 4rem 18rem rgba(0, 0, 0, 0.02);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.principle:hover {
  border-color: var(--ink);
  box-shadow: 0 8rem 28rem rgba(144, 9, 9, 0.08);
  transform: translateY(-3rem);
}
.principle__icon {
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: rgba(144, 9, 9, 0.08);
  border: 1.5rem solid rgba(144, 9, 9, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.principle__icon svg {
  width: 20rem;
  height: 20rem;
  color: var(--ink);
}
.principle__content {
  flex: 1;
  min-width: 0;
}
.principle__heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 19rem;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 6rem;
  letter-spacing: -0.01em;
}
.principle__text {
  font-family: Inter, sans-serif;
  font-size: 12.5rem;
  line-height: 1.32;
  color: #666666;
}

/* ---------------------------------------------------------------------- */
/* Editorial Testimonials Showcase                                         */
/* ---------------------------------------------------------------------- */
.testimonials-editorial {
  position: relative;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  border-radius: 28rem;
  padding: 48rem 54rem 42rem;
  background: #FAF4F4;
  box-shadow: 0 6rem 28rem rgba(0, 0, 0, 0.02);
  width: 100%;
  max-width: 920rem;
  margin: 0 auto;
  overflow: hidden;
}

.editorial-watermark {
  position: absolute;
  top: 50%;
  right: -90rem;
  transform: translateY(-50%);
  width: 320rem;
  max-width: 45%;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.14;
  mix-blend-mode: multiply;
  user-select: none;
}
.editorial-watermark img {
  width: 100%;
  height: auto;
  display: block;
}

.editorial-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 32rem;
}

.editorial-index {
  font-family: 'Oswald', sans-serif;
  font-size: 110rem;
  font-weight: 300;
  line-height: 0.85;
  color: rgba(144, 9, 9, 0.14);
  user-select: none;
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.editorial-index.is-transitioning {
  opacity: 0;
  transform: translateY(-8rem);
}

.editorial-main {
  flex: 1;
  min-width: 0;
  padding-top: 10rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.editorial-main.is-transitioning {
  opacity: 0;
  transform: translateX(12rem);
}

.editorial-quote {
  font-family: Inter, sans-serif;
  font-size: 23rem;
  font-weight: 400;
  line-height: 1.38;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.editorial-author {
  display: flex;
  align-items: center;
  gap: 16rem;
  margin-top: 36rem;
  cursor: default;
}
.editorial-avatar-wrap {
  width: 52rem;
  height: 52rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2rem solid rgba(144, 9, 9, 0.18);
  box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.editorial-author:hover .editorial-avatar-wrap {
  border-color: var(--ink);
  box-shadow: 0 6rem 18rem rgba(144, 9, 9, 0.15);
}
.editorial-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.editorial-author:hover .editorial-avatar {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.editorial-meta {
  display: flex;
  flex-direction: column;
}
.editorial-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 20rem;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2rem;
}
.editorial-role {
  font-family: Inter, sans-serif;
  font-size: 13.5rem;
  color: #666666;
}
.editorial-sep {
  margin: 0 6rem;
  color: rgba(144, 9, 9, 0.25);
}
.editorial-company {
  color: #555555;
  font-weight: 500;
  transition: color 0.3s ease;
}
.editorial-author:hover .editorial-company {
  color: var(--ink);
}

/* Bottom Navigation Bar */
.editorial-nav {
  position: relative;
  z-index: 1;
  margin-top: 40rem;
  padding-top: 24rem;
  border-top: 1px solid rgba(144, 9, 9, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rem;
}

.editorial-nav-left {
  display: flex;
  align-items: center;
  gap: 18rem;
}
.editorial-lines {
  display: flex;
  align-items: center;
  gap: 8rem;
}
.editorial-line-btn {
  background: none;
  border: none;
  padding: 8rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.editorial-line {
  display: block;
  height: 2rem;
  width: 24rem;
  background-color: rgba(144, 9, 9, 0.22);
  border-radius: 2rem;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.editorial-line-btn:hover .editorial-line {
  width: 34rem;
  background-color: rgba(144, 9, 9, 0.5);
}
.editorial-line-btn.active .editorial-line {
  width: 52rem;
  background-color: var(--ink);
}

.editorial-counter {
  font-family: Inter, sans-serif;
  font-size: 12rem;
  font-weight: 600;
  color: #777777;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-nav-right {
  display: flex;
  align-items: center;
  gap: 8rem;
}
.editorial-arrow-btn {
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  border: 1.5rem solid rgba(144, 9, 9, 0.2);
  background: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.03);
  transition: all var(--t-fast);
}
.editorial-arrow-btn svg {
  width: 18rem;
  height: 18rem;
}
.editorial-arrow-btn:hover {
  border-color: var(--ink);
  color: #ffffff;
  background-color: var(--ink);
  transform: translateY(-2rem);
  box-shadow: 0 6rem 16rem rgba(144, 9, 9, 0.2);
}

@media only screen and (max-width: 1440px) {
  .why__title { font-size: 40rem; }
  .why__list { grid-template-columns: repeat(3, 1fr); }
  .editorial-quote { font-size: 21rem; }
}

@media only screen and (max-width: 1024px) {
  .why { padding: 50rem 0 60rem; }
  .why__head { margin-bottom: 42rem; }
  .why__title { font-size: 34rem; margin-bottom: 16rem; }
  .why__list { grid-template-columns: repeat(2, 1fr); gap: 12rem; }
  .testimonials-editorial { padding: 36rem 32rem 30rem; border-radius: 22rem; }
  .editorial-watermark { width: 240rem; right: -70rem; opacity: 0.11; }
  .editorial-body { gap: 24rem; }
  .editorial-index { font-size: 80rem; }
  .editorial-quote { font-size: 19rem; }
  .editorial-author { margin-top: 28rem; }
  .editorial-nav { margin-top: 32rem; padding-top: 20rem; }
}

@media only screen and (max-width: 640px) {
  .why__head { margin-bottom: 34rem; }
  .why__title { font-size: 28rem; }
  .why__intro { font-size: 14rem; }
  .why__list { grid-template-columns: 1fr; gap: 10rem; }
  .testimonials-editorial { padding: 26rem 20rem 22rem; }
  .editorial-watermark { width: 180rem; right: -55rem; opacity: 0.08; }
  .editorial-body { flex-direction: column; gap: 8rem; }
  .editorial-index { font-size: 56rem; line-height: 1; }
  .editorial-main { padding-top: 0; }
  .editorial-quote { font-size: 16.5rem; line-height: 1.35; }
  .editorial-author { margin-top: 22rem; gap: 12rem; }
  .editorial-avatar-wrap { width: 44rem; height: 44rem; }
  .editorial-name { font-size: 18rem; }
  .editorial-role { font-size: 12.5rem; }
  .editorial-nav { margin-top: 26rem; padding-top: 16rem; }
  .editorial-line-btn.active .editorial-line { width: 36rem; }
  .editorial-arrow-btn { width: 36rem; height: 36rem; }
  .editorial-arrow-btn svg { width: 16rem; height: 16rem; }
}

/* ---------------------------------------------------------------------- */
/* 07 — FAQ + Partnership CTA                                             */
/* ---------------------------------------------------------------------- */
.faq { position: relative; overflow: hidden; min-height: auto; display: flex; align-items: center; padding: 80rem 0 90rem; }
.faq > .container { position: relative; z-index: 1; width: 100%; }
.faq__grid { display: flex; gap: 48rem; align-items: flex-start; }
.faq__col-left { width: 440rem; flex-shrink: 0; }
.faq__col-right { flex: 1; min-width: 0; }
.faq__eyebrow { font-family: Inter, sans-serif; font-size: 13rem; font-weight: 600; text-transform: none; letter-spacing: 0.08em; color: #a45d5d; margin-bottom: 12rem; }
.faq__title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 38rem; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 16rem; }
.faq__accent-line { display: block; width: 44rem; height: 2.5rem; background-color: var(--ink); margin-bottom: 22rem; border-radius: 2rem; }
.faq__intro, .faq__form-text { font-family: Inter, sans-serif; font-size: 15rem; line-height: 1.35; color: #555555; max-width: 480rem; margin-bottom: 24rem; }

.contact-form { display: flex; flex-direction: column; gap: 14rem; }
.contact-form__row { display: flex; gap: 12rem; }
.contact-form__field { display: flex; flex-direction: column; gap: 6rem; flex: 1; }
.contact-form__field span { font-family: Inter, sans-serif; font-weight: 600; font-size: 11.5rem; text-transform: none; letter-spacing: 0.02em; color: rgba(144, 9, 9, 0.75); }
.contact-form__field input,
.contact-form__field textarea {
  font-family: Inter, sans-serif;
  font-size: 14rem;
  color: var(--ink);
  background-color: rgba(144, 9, 9, 0.03);
  border: 1.5rem solid rgba(144, 9, 9, 0.16);
  border-radius: 12rem;
  padding: 12rem 16rem;
  resize: none;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: rgba(144, 9, 9, 0.35); }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background-color: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(144, 9, 9, 0.12);
}
.contact-form__submit { align-self: flex-start; height: 50rem; padding: 0 34rem; font-size: 17rem; margin-top: 6rem; }
.contact-form__submit:active { transform: scale(0.98); }
.faq__list { display: flex; flex-direction: column; gap: 10rem; }
.faq__item {
  border-radius: 16rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
  padding: 0 22rem;
  background-color: #ffffff;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.faq__item:hover {
  border-color: rgba(144, 9, 9, 0.28);
  box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.03);
}
.faq__item[data-open="true"] {
  border-color: var(--ink);
  box-shadow: 0 6rem 20rem rgba(144, 9, 9, 0.06);
}
.faq__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20rem; padding: 16rem 0; text-align: left; }
.faq__question { font-family: Inter, sans-serif; font-weight: 600; font-size: 14rem; color: var(--ink); }
.faq__icon { flex-shrink: 0; width: 18rem; height: 18rem; color: var(--ink); transition: transform 0.35s var(--ease-out); }
.faq__item[data-open="true"] .faq__icon { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.faq__panel > div { overflow: hidden; }
.faq__item[data-open="true"] .faq__panel { grid-template-rows: 1fr; }
.faq__answer { font-family: Inter, sans-serif; font-size: 13.5rem; line-height: 1.35; color: #555555; max-width: 620rem; padding-bottom: 16rem; }

@media only screen and (max-width: 1024px) {
  .faq { padding: 50rem 0 60rem; }
  .faq__grid { flex-direction: column; gap: 36rem; }
  .faq__col-left { width: 100%; }
  .faq__title { font-size: 32rem; }
}

@media only screen and (max-width: 640px) {
  .faq__title { font-size: 26rem; }
  .faq__intro, .faq__form-text { font-size: 14rem; }
  .contact-form__row { flex-direction: column; gap: 12rem; }
  .contact-form__submit { width: 100%; justify-content: center; }
  .faq__item { padding: 0 16rem; }
  .faq__question { font-size: 13.5rem; }
}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.footer { padding-top: 80rem; color: #fff; background-color: var(--near-black); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 2fr 1.6fr; gap: 30rem; }
.footer__logo { font-family: 'Bebas Neue', sans-serif; font-size: 28rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 12rem; }
.footer__logo-icon { width: auto; height: 40rem; flex-shrink: 0; }
.footer__logo span { margin-left: 8rem; font-size: 0.5em; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.45); }
.footer__blurb { font-family: Inter, sans-serif; font-size: 15rem; line-height: 1.32; color: rgba(255, 255, 255, 0.55); max-width: 280rem; margin-top: 20rem; }
.footer__social { display: flex; gap: 10rem; margin-top: 26rem; }
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46rem;
  height: 46rem;
  border-radius: 999rem;
  border: 1rem solid rgba(255, 255, 255, 0.2);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.footer__social-link svg { width: 18rem; height: 18rem; }
.footer__social-link:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  transform: translateY(-2rem);
  box-shadow: 0 6rem 18rem rgba(144, 9, 9, 0.4);
}

.footer__heading-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 24rem 0;
  text-align: left;
  display: block;
  width: 100%;
  cursor: default;
}
.footer__accordion-icon { display: none; }
.footer__heading {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 22rem;
  text-transform: none;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.9);
}

.footer__panel { display: block; }
.footer__content { display: flex; flex-direction: column; gap: 13rem; }
.footer__col a, .footer__col span { font-family: Inter, sans-serif; font-size: 15rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); overflow-wrap: break-word; transition: color var(--t-fast); }
.footer__col a:hover { color: #fff; }

.footer__map-link,
.footer__contact-link {
  display: inline-flex !important;
  align-items: center;
  gap: 9rem;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color var(--t-fast), transform var(--t-fast);
}
.footer__map-link svg,
.footer__contact-link svg {
  width: 15rem;
  height: 15rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--t-fast);
}
.footer__map-link:hover,
.footer__contact-link:hover {
  color: #ffffff !important;
  transform: translateX(3rem);
}
.footer__map-link:hover svg,
.footer__contact-link:hover svg {
  color: #ff8a8a;
}

.footer__wordmark { margin-top: 60rem; padding-top: 24rem; border-top: 1rem solid rgba(255, 255, 255, 0.15); font-size: clamp(36rem, 8vw, 130rem); line-height: 0.9; text-transform: uppercase; color: rgba(255, 255, 255, 0.08); }
.footer__bottom { margin-top: 24rem; padding: 20rem 0; border-top: 1rem solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12rem; }
.footer__copyrights, .footer__tagline, .footer__credit { font-family: Inter, sans-serif; font-size: 13rem; color: rgba(255, 255, 255, 0.55); }
.footer__credit a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3rem;
  font-weight: 500;
  transition: color var(--t-fast);
}
.footer__credit a:hover {
  color: #ffffff;
}
.footer__up-btn { display: flex; align-items: center; gap: 10rem; font-family: Inter, sans-serif; font-size: 13rem; text-transform: none; color: rgba(255, 255, 255, 0.55); }
.footer__up-icon { width: 32rem; height: 32rem; border-radius: 999rem; background-color: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; transition: background-color var(--t-fast); }
.footer__up-icon svg { width: 15rem; height: 15rem; }
.footer__up-btn:hover .footer__up-icon { background-color: #fff; color: var(--near-black); }

@media only screen and (max-width: 1024px) {
  .footer { padding-top: 50rem; }
  .footer__top { grid-template-columns: repeat(2, 1fr); gap: 30rem; }
  .footer__heading-btn { margin-bottom: 18rem; }
  .footer__heading { font-size: 19rem; }
}

@media only screen and (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr; gap: 0; }
  .footer__brand-col { margin-bottom: 24rem; }
  .footer__accordion {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .footer__accordion:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .footer__heading-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16rem 0;
    margin-bottom: 0;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .footer__heading {
    font-size: 18rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.95);
  }
  .footer__accordion-icon {
    display: block;
    width: 18rem;
    height: 18rem;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
  }
  .footer__accordion[data-open="true"] .footer__accordion-icon {
    transform: rotate(180deg);
    color: #ffffff;
  }
  .footer__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .footer__panel > .footer__content {
    overflow: hidden;
    padding-bottom: 0;
    transition: padding-bottom 0.35s ease;
    gap: 12rem;
  }
  .footer__accordion[data-open="true"] .footer__panel {
    grid-template-rows: 1fr;
  }
  .footer__accordion[data-open="true"] .footer__panel > .footer__content {
    padding-bottom: 20rem;
    padding-top: 14rem;
  }
  .footer__col a, .footer__col span { font-size: 14rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14rem; }
  .footer__wordmark { font-size: 40rem; margin-top: 36rem; padding-top: 18rem; }
}

/* ---------------------------------------------------------------------- */
/* Misc                                                                     */
/* ---------------------------------------------------------------------- */
.btn-tap:active { transform: scale(0.98); }

/* ---------------------------------------------------------------------- */
/* Comprehensive Entrance & Scroll Reveal Animation System                */
/* ---------------------------------------------------------------------- */
.reveal,
.reveal-fade,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal,
.reveal-up {
  transform: translateY(32rem);
}
.reveal-fade {
  transform: none;
}
.reveal-left {
  transform: translateX(-36rem);
}
.reveal-right {
  transform: translateX(36rem);
}
.reveal-scale {
  transform: scale(0.94);
}

.reveal.in-view,
.reveal-fade.in-view,
.reveal-up.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view,
.in-view.reveal,
.in-view.stat-card,
.in-view.sector-card,
.in-view.value-step,
.in-view.business-card,
.in-view.principle__item,
.in-view.faq__item {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Stagger support on cards */
.stat-card,
.sector-card,
.value-step,
.business-card,
.principle__item,
.faq__item {
  opacity: 0;
  transform: translateY(28rem);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s),
              border-color var(--t-fast),
              box-shadow var(--t-fast),
              background-color var(--t-fast);
  will-change: opacity, transform;
}

.in-view .stat-card,
.in-view .sector-card,
.in-view .value-step,
.in-view .business-card,
.in-view .principle__item,
.in-view .faq__item,
.stat-card.in-view,
.sector-card.in-view,
.value-step.in-view,
.business-card.in-view,
.principle__item.in-view,
.faq__item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Accent Lines Expanding on Scroll Reveal */
.group__accent-line,
.sectors__accent-line,
.journey__accent-line,
.businesses__accent-line,
.reach__accent-line,
.why__accent-line,
.faq__accent-line {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.in-view .group__accent-line,
.in-view .sectors__accent-line,
.in-view .journey__accent-line,
.in-view .businesses__accent-line,
.in-view .reach__accent-line,
.in-view .why__accent-line,
.in-view .faq__accent-line,
.group__accent-line.in-view,
.sectors__accent-line.in-view,
.journey__accent-line.in-view,
.businesses__accent-line.in-view,
.reach__accent-line.in-view,
.why__accent-line.in-view,
.faq__accent-line.in-view {
  transform: scaleX(1);
}

/* ==========================================================================
   SPECIFIED IN-ANIMATIONS SYSTEM
   | Element         | Animation              | Duration |
   | Section label   | Fade + slight slide    |     0.5s |
   | Main title      | Masked slide-up        |     0.8s |
   | Each title line | Stagger                |     0.1s |
   | Description     | Fade-up                |     0.6s |
   | Buttons         | Fade-up + slight scale |     0.5s |
   | Statistic cards | Fade-up stagger        |     0.5s |
   ========================================================================== */

/* 1. Section label: Fade + slight slide (0.5s) */
.eyebrow,
.hero__eyebrow,
.group__eyebrow,
.sectors__eyebrow,
.journey__eyebrow,
.businesses__eyebrow,
.reach__eyebrow,
.why__eyebrow,
.faq__eyebrow {
  opacity: 0;
  transform: translateY(14rem);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.in-view .eyebrow,
.in-view .hero__eyebrow,
.in-view .group__eyebrow,
.in-view .sectors__eyebrow,
.in-view .journey__eyebrow,
.in-view .businesses__eyebrow,
.in-view .reach__eyebrow,
.in-view .why__eyebrow,
.in-view .faq__eyebrow,
.hero.is-revealed .hero__eyebrow,
.hero.is-revealed .eyebrow,
.eyebrow.in-view,
.hero__eyebrow.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Main title: Masked slide-up (0.8s) + Each title line stagger (0.1s) */
.title-mask-wrap {
  display: block;
  overflow: hidden;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
.title-mask-line {
  display: block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.in-view .title-mask-line,
.is-revealed .title-mask-line,
.hero.is-revealed .title-mask-line,
.hero.is-revealed .hero__title .title-mask-line,
.js-masked-title.in-view .title-mask-line {
  transform: translateY(0);
  opacity: 1;
}

/* 0.1s stagger per title line */
.title-mask-wrap:nth-child(1) .title-mask-line { transition-delay: 0s; }
.title-mask-wrap:nth-child(2) .title-mask-line { transition-delay: 0.1s; }
.title-mask-wrap:nth-child(3) .title-mask-line { transition-delay: 0.2s; }
.title-mask-wrap:nth-child(4) .title-mask-line { transition-delay: 0.3s; }
.title-mask-wrap:nth-child(5) .title-mask-line { transition-delay: 0.4s; }

/* 3. Description: Fade-up (0.6s) */
.hero__text,
.group__intro,
.sectors__intro,
.journey__intro,
.businesses__intro,
.reach__intro,
.why__intro,
.faq__intro,
.faq__form-text {
  opacity: 0;
  transform: translateY(20rem);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.in-view .hero__text,
.in-view .group__intro,
.in-view .sectors__intro,
.in-view .journey__intro,
.in-view .businesses__intro,
.in-view .reach__intro,
.in-view .why__intro,
.in-view .faq__intro,
.in-view .faq__form-text,
.hero.is-revealed .hero__text,
.hero__text.in-view,
.group__intro.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 4. Buttons: Fade-up + slight scale (0.5s) */
.hero__actions .btn,
.group__actions .btn,
.reach__action .btn,
.contact-form__submit {
  opacity: 0;
  transform: translateY(18rem) scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow var(--t-fast),
              border-color var(--t-fast),
              background-color var(--t-fast);
  will-change: opacity, transform;
}

.in-view .hero__actions .btn,
.in-view .group__actions .btn,
.in-view .reach__action .btn,
.in-view .contact-form__submit,
.hero.is-revealed .hero__actions .btn,
.hero__actions.in-view .btn,
.btn.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hero__actions .btn:nth-child(1) { transition-delay: 0.1s; }
.hero__actions .btn:nth-child(2) { transition-delay: 0.2s; }

/* 5. Statistic cards: Fade-up stagger (0.5s) */
.stat-card,
.reach__stat {
  opacity: 0;
  transform: translateY(24rem);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--stat-delay, 0s),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--stat-delay, 0s),
              border-color var(--t-fast),
              box-shadow var(--t-fast),
              background-color var(--t-fast);
  will-change: opacity, transform;
}

.in-view .stat-card,
.in-view .reach__stat,
.hero.is-revealed .stat-card,
.stat-card.in-view,
.reach__stat.in-view {
  opacity: 1;
  transform: translateY(0);
}

.hero__stats .stat-card:nth-child(1), .reach__stats .reach__stat:nth-child(1) { --stat-delay: 0s; }
.hero__stats .stat-card:nth-child(2), .reach__stats .reach__stat:nth-child(2) { --stat-delay: 0.1s; }
.hero__stats .stat-card:nth-child(3), .reach__stats .reach__stat:nth-child(3) { --stat-delay: 0.2s; }
.hero__stats .stat-card:nth-child(4), .reach__stats .reach__stat:nth-child(4) { --stat-delay: 0.3s; }

/* ==========================================================================
   INNER PAGES — Common & About Page Specific Layouts
   ========================================================================== */

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8rem;
  font-family: Inter, sans-serif;
  font-size: 13rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24rem;
  letter-spacing: 0.02em;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-fast);
}
.breadcrumb a:hover {
  color: #ffffff;
}
.breadcrumb__sep {
  opacity: 0.4;
}

/* 01. Inner Hero */
.inner-hero {
  position: relative;
  min-height: 520rem;
  display: flex;
  align-items: flex-end;
  padding: 180rem 0 70rem;
  background-color: var(--near-black);
  color: #ffffff;
  overflow: hidden;
}
.inner-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.inner-hero__bg .section-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(0.8);
}
.inner-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0.92) 100%);
}
.inner-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.inner-hero__title {
  font-family: 'Oswald', sans-serif;
  font-size: 58rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 880rem;
  margin-bottom: 20rem;
}
.inner-hero__text {
  font-family: Inter, sans-serif;
  font-size: 17rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 720rem;
}

/* 02. Who We Are */
.about-intro {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: var(--paper);
  overflow: hidden;
}
.about-intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56rem;
  align-items: flex-start;
  margin-bottom: 50rem;
}
.about-intro__statement {
  font-family: 'Oswald', sans-serif;
  font-size: 34rem;
  font-weight: 600;
  line-height: 1.26;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.about-intro__narrative {
  font-family: Inter, sans-serif;
  font-size: 16rem;
  line-height: 1.6;
  color: #555555;
}
.about-intro__narrative p + p {
  margin-top: 16rem;
}
.about-intro__photo-wrap {
  position: relative;
  width: 100%;
  height: 480rem;
  border-radius: 24rem;
  overflow: hidden;
  box-shadow: 0 16rem 40rem rgba(0, 0, 0, 0.08);
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
}
.about-intro__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-intro__photo-wrap:hover .about-intro__photo {
  transform: scale(1.04);
}

/* 03. What Defines Altysier (Statement Banner) */
.about-statement {
  position: relative;
  padding: 120rem 0;
  background-color: var(--near-black);
  color: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-align: center;
}
.about-statement__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-statement__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.about-statement__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(144, 9, 9, 0.25) 0%, rgba(20, 20, 20, 0.95) 75%);
}
.about-statement__container {
  position: relative;
  z-index: 2;
  max-width: 960rem;
  margin: 0 auto;
}
.about-statement__heading {
  font-family: 'Oswald', sans-serif;
  font-size: 54rem;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 24rem;
}
.about-statement__text {
  font-family: Inter, sans-serif;
  font-size: 19rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 760rem;
  margin: 0 auto;
}

/* 04. Our Culture (Interactive Composition) */
.about-culture {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: #FAF4F4;
  overflow: hidden;
}
.about-culture__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rem;
  margin-top: 48rem;
}
.culture-card {
  position: relative;
  overflow: hidden;
  border-radius: 20rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  background: #ffffff;
  padding: 34rem 28rem 32rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.025);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
  z-index: 1;
}

/* Color filling inside animation */
.culture-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ink) 0%, #680505 100%);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.culture-card:hover::before {
  transform: translateY(0);
}

.culture-card:hover {
  transform: translateY(-8rem);
  border-color: var(--ink);
  box-shadow: 0 16rem 36rem rgba(144, 9, 9, 0.28);
}

.culture-card__num {
  position: relative;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 32rem;
  font-weight: 300;
  color: rgba(144, 9, 9, 0.35);
  margin-bottom: 12rem;
  line-height: 1;
  transition: color 0.35s ease, transform 0.35s ease;
}
.culture-card:hover .culture-card__num {
  color: rgba(255, 255, 255, 0.45);
  transform: translateX(2rem);
}

.culture-card__title {
  position: relative;
  z-index: 1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 12rem;
  transition: color 0.35s ease, transform 0.35s ease;
}
.culture-card:hover .culture-card__title {
  color: #ffffff;
  transform: translateX(2rem);
}

.culture-card__text {
  position: relative;
  z-index: 1;
  font-family: Inter, sans-serif;
  font-size: 14.5rem;
  line-height: 1.5;
  color: #555555;
  transition: color 0.35s ease;
}
.culture-card:hover .culture-card__text {
  color: rgba(255, 255, 255, 0.92);
}

/* 05. Vision / Mission / Motto (Three-Stage Editorial) */
.about-vmm {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: var(--paper);
  overflow: hidden;
}
.about-vmm__flow {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  margin-top: 48rem;
  max-width: 1080rem;
  margin-left: auto;
  margin-right: auto;
}
.vmm-stage {
  display: grid;
  grid-template-columns: 220rem 1fr;
  gap: 36rem;
  align-items: center;
  padding: 38rem 44rem;
  background: #ffffff;
  border-radius: 24rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  box-shadow: 0 6rem 24rem rgba(0, 0, 0, 0.02);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.vmm-stage:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
  box-shadow: 0 12rem 32rem rgba(144, 9, 9, 0.1);
}
.vmm-stage._accent {
  background: #FAF4F4;
  border-color: rgba(144, 9, 9, 0.2);
}
.vmm-stage__header {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.vmm-stage__num {
  font-family: Inter, sans-serif;
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(144, 9, 9, 0.6);
}
.vmm-stage__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38rem;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.02em;
}
.vmm-stage__statement {
  font-family: 'Oswald', sans-serif;
  font-size: 24rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* 06. Leadership Spread */
.about-leadership {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: #FAF4F4;
  overflow: hidden;
}
.leadership-spread {
  display: grid;
  grid-template-columns: 380rem 1fr;
  gap: 60rem;
  align-items: center;
  background: #ffffff;
  border-radius: 28rem;
  padding: 48rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  box-shadow: 0 10rem 36rem rgba(0, 0, 0, 0.04);
}
.leadership-spread__photo-wrap {
  position: relative;
  width: 100%;
  height: 440rem;
  border-radius: 20rem;
  overflow: hidden;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
}
.leadership-spread__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.leadership-spread__content {
  display: flex;
  flex-direction: column;
}
.leadership-spread__quote {
  font-family: Inter, sans-serif;
  font-size: 19rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 28rem;
  font-style: italic;
}
.leadership-spread__meta {
  display: flex;
  flex-direction: column;
  padding-top: 20rem;
  border-top: 1.5rem solid rgba(144, 9, 9, 0.12);
}
.leadership-spread__name {
  font-family: 'Oswald', sans-serif;
  font-size: 26rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.leadership-spread__role {
  font-family: Inter, sans-serif;
  font-size: 13.5rem;
  color: #666666;
  margin-top: 4rem;
  font-weight: 500;
}

/* 07. Business Ecosystem Overview */
.about-ecosystem {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: var(--paper);
  overflow: hidden;
}
.about-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rem;
  margin: 44rem 0 40rem;
}
.ecosystem-pill {
  display: flex;
  align-items: center;
  gap: 14rem;
  padding: 18rem 22rem;
  background: #ffffff;
  border-radius: 16rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.02);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.ecosystem-pill:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
  box-shadow: 0 8rem 24rem rgba(144, 9, 9, 0.1);
}
.ecosystem-pill__icon {
  width: 36rem;
  height: 36rem;
  border-radius: 10rem;
  background: rgba(144, 9, 9, 0.08);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ecosystem-pill__icon svg {
  width: 18rem;
  height: 18rem;
}
.ecosystem-pill__title {
  font-family: 'Oswald', sans-serif;
  font-size: 16.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

/* 08. About CTA Banner */
.about-cta {
  position: relative;
  padding: 110rem 0 120rem;
  background-color: var(--near-black);
  color: #ffffff;
  overflow: hidden;
  text-align: center;
}
.about-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.about-cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.85) 0%, rgba(144, 9, 9, 0.45) 100%);
}
.about-cta__container {
  position: relative;
  z-index: 2;
  max-width: 860rem;
  margin: 0 auto;
}
.about-cta__title {
  font-family: 'Oswald', sans-serif;
  font-size: 48rem;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 20rem;
}
.about-cta__text {
  font-family: Inter, sans-serif;
  font-size: 17rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 680rem;
  margin: 0 auto 36rem;
}

/* Responsive Overrides for About Page */
@media only screen and (max-width: 1024px) {
  .inner-hero { min-height: 440rem; padding: 140rem 0 50rem; }
  .inner-hero__title { font-size: 42rem; }
  .about-intro { padding: 60rem 0; }
  .about-intro__grid { grid-template-columns: 1fr; gap: 28rem; }
  .about-intro__photo-wrap { height: 340rem; }
  .about-statement { padding: 80rem 0; }
  .about-statement__heading { font-size: 38rem; }
  .about-culture { padding: 60rem 0; }
  .about-culture__grid { grid-template-columns: repeat(2, 1fr); }
  .about-vmm { padding: 60rem 0; }
  .vmm-stage { grid-template-columns: 1fr; gap: 16rem; padding: 28rem; }
  .about-leadership { padding: 60rem 0; }
  .leadership-spread { grid-template-columns: 1fr; padding: 32rem; gap: 32rem; }
  .leadership-spread__photo-wrap { height: 360rem; }
  .about-ecosystem { padding: 60rem 0; }
  .about-ecosystem__grid { grid-template-columns: repeat(2, 1fr); }
  .about-cta { padding: 80rem 0 90rem; }
  .about-cta__title { font-size: 36rem; }
}

@media only screen and (max-width: 640px) {
  .inner-hero { min-height: 380rem; padding: 120rem 0 40rem; }
  .inner-hero__title { font-size: 32rem; }
  .about-intro__statement { font-size: 24rem; }
  .about-statement__heading { font-size: 28rem; }
  .about-culture__grid { grid-template-columns: 1fr; }
  .about-ecosystem__grid { grid-template-columns: 1fr; }
  .leadership-spread__quote { font-size: 16rem; }
}

/* ==========================================================================
   COMPANY DETAIL TEMPLATE SPECIFIC STYLES
   ========================================================================== */

/* 01. Company Hero */
.company-hero {
  position: relative;
  min-height: 560rem;
  display: flex;
  align-items: flex-end;
  padding: 190rem 0 80rem;
  background-color: var(--near-black);
  color: #ffffff;
  overflow: hidden;
}
.company-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.company-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.company-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.65) 0%, rgba(20, 20, 20, 0.94) 100%);
}
.company-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.company-hero__sector-tag {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  padding: 6rem 16rem;
  border-radius: 999rem;
  background: rgba(144, 9, 9, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16rem;
}
.company-hero__title {
  font-family: 'Oswald', sans-serif;
  font-size: 56rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 980rem;
  margin-bottom: 20rem;
}
.company-hero__text {
  font-family: Inter, sans-serif;
  font-size: 18rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 760rem;
}

/* 03. Company Story / History (Origin -> Development -> Current Role) */
.company-story {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: #FAF4F4;
  overflow: hidden;
}
.story-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  margin-top: 48rem;
  position: relative;
}
.story-step {
  position: relative;
  background: #ffffff;
  border-radius: 24rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  padding: 38rem 32rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6rem 24rem rgba(0, 0, 0, 0.025);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.story-step:hover {
  transform: translateY(-6rem);
  border-color: var(--ink);
  box-shadow: 0 12rem 32rem rgba(144, 9, 9, 0.12);
}
.story-step__badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10rem;
}
.story-step__title {
  font-family: 'Oswald', sans-serif;
  font-size: 26rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14rem;
  line-height: 1.25;
}
.story-step__text {
  font-family: Inter, sans-serif;
  font-size: 15rem;
  line-height: 1.6;
  color: #555555;
}

/* 04. Key Areas (4 Large Visual Panels) */
.company-areas {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: var(--paper);
  overflow: hidden;
}
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rem;
  margin-top: 48rem;
}
.area-panel {
  position: relative;
  border-radius: 24rem;
  overflow: hidden;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  background: #ffffff;
  box-shadow: 0 8rem 28rem rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.area-panel:hover {
  transform: translateY(-6rem);
  border-color: var(--ink);
  box-shadow: 0 16rem 40rem rgba(144, 9, 9, 0.12);
}
.area-panel__photo-wrap {
  position: relative;
  width: 100%;
  height: 260rem;
  overflow: hidden;
  background: #141414;
}
.area-panel__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-panel:hover .area-panel__photo {
  transform: scale(1.06);
}
.area-panel__num {
  position: absolute;
  top: 20rem;
  right: 20rem;
  font-family: 'Oswald', sans-serif;
  font-size: 28rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(144, 9, 9, 0.85);
  backdrop-filter: blur(8px);
  width: 48rem;
  height: 48rem;
  border-radius: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rem 14rem rgba(0, 0, 0, 0.3);
}
.area-panel__body {
  padding: 32rem 30rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.area-panel__title {
  font-family: 'Oswald', sans-serif;
  font-size: 24rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12rem;
  line-height: 1.3;
}
.area-panel__desc {
  font-family: Inter, sans-serif;
  font-size: 15rem;
  line-height: 1.6;
  color: #555555;
}

/* 05. Key Capability / Value Proposition */
.company-value {
  position: relative;
  padding: 100rem 0;
  background-color: var(--near-black);
  color: #ffffff;
  overflow: hidden;
}
.company-value__box {
  position: relative;
  z-index: 2;
  border-radius: 28rem;
  background: linear-gradient(135deg, rgba(144, 9, 9, 0.4) 0%, rgba(20, 20, 20, 0.95) 100%);
  border: 1.5rem solid rgba(144, 9, 9, 0.35);
  padding: 60rem 70rem;
  box-shadow: 0 20rem 50rem rgba(0, 0, 0, 0.3);
}
.company-value__heading {
  font-family: 'Oswald', sans-serif;
  font-size: 42rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 20rem;
}
.company-value__desc {
  font-family: Inter, sans-serif;
  font-size: 17rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 820rem;
}

/* 06. Markets & Operational Reach */
.company-markets {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: #FAF4F4;
  overflow: hidden;
}
.markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  margin-top: 48rem;
}
.market-card {
  background: #ffffff;
  border-radius: 20rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.14);
  padding: 32rem 28rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.02);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.market-card:hover {
  transform: translateY(-5rem);
  border-color: var(--ink);
  box-shadow: 0 12rem 30rem rgba(144, 9, 9, 0.1);
}
.market-card__icon {
  width: 44rem;
  height: 44rem;
  border-radius: 12rem;
  background: rgba(144, 9, 9, 0.08);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18rem;
}
.market-card__icon svg {
  width: 22rem;
  height: 22rem;
}
.market-card__title {
  font-family: 'Oswald', sans-serif;
  font-size: 22rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10rem;
}
.market-card__text {
  font-family: Inter, sans-serif;
  font-size: 14.5rem;
  line-height: 1.55;
  color: #555555;
}

/* 07. Visual Showcase */
.company-showcase {
  position: relative;
  padding: 100rem 0 110rem;
  background-color: var(--paper);
  overflow: hidden;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24rem;
  margin-top: 48rem;
  height: 480rem;
}
.showcase-lead {
  position: relative;
  border-radius: 24rem;
  overflow: hidden;
  height: 100%;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
}
.showcase-lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.showcase-lead:hover img {
  transform: scale(1.04);
}
.showcase-side {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  height: 100%;
}
.showcase-side-item {
  position: relative;
  flex: 1;
  border-radius: 20rem;
  overflow: hidden;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
}
.showcase-side-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.showcase-side-item:hover img {
  transform: scale(1.05);
}

/* 08. Ecosystem Cross-Nav */
.company-ecosystem {
  position: relative;
  padding: 90rem 0 100rem;
  background-color: #FAF4F4;
  overflow: hidden;
}
.ecosystem-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rem;
  flex-wrap: wrap;
  margin: 36rem 0 44rem;
}
.ecosystem-node {
  padding: 14rem 28rem;
  background: #ffffff;
  border-radius: 999rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.16);
  font-family: 'Oswald', sans-serif;
  font-size: 17rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.03);
}
.ecosystem-arrow {
  color: var(--accent);
  font-size: 20rem;
  font-weight: 700;
}
.other-companies-strip {
  display: flex;
  gap: 14rem;
  overflow-x: auto;
  padding-bottom: 12rem;
  scrollbar-width: thin;
}
.other-company-card {
  flex: 0 0 260rem;
  background: #ffffff;
  border-radius: 16rem;
  border: 1.5rem solid rgba(144, 9, 9, 0.12);
  padding: 20rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
}
.other-company-card:hover {
  transform: translateY(-4rem);
  border-color: var(--ink);
}
.other-company-card__name {
  font-family: 'Oswald', sans-serif;
  font-size: 15.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 6rem;
}
.other-company-card__sector {
  font-family: Inter, sans-serif;
  font-size: 12rem;
  color: #777777;
}

/* Responsive Overrides */
@media only screen and (max-width: 1024px) {
  .company-hero { min-height: 460rem; padding: 150rem 0 60rem; }
  .company-hero__title { font-size: 42rem; }
  .story-timeline { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .markets-grid { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; height: auto; }
  .showcase-lead { height: 320rem; }
  .showcase-side { height: 420rem; }
  .company-value__box { padding: 40rem 32rem; }
  .company-value__heading { font-size: 32rem; }
}
@media only screen and (max-width: 640px) {
  .company-hero { min-height: 400rem; padding: 130rem 0 40rem; }
  .company-hero__title { font-size: 32rem; }
  .company-value__heading { font-size: 26rem; }
}

/* Accessibility fallback */
@media (prefers-reduced-motion: reduce) {
  .eyebrow,
  .hero__eyebrow,
  .title-mask-line,
  .hero__text,
  .group__intro,
  .sectors__intro,
  .journey__intro,
  .businesses__intro,
  .reach__intro,
  .why__intro,
  .faq__intro,
  .faq__form-text,
  .hero__actions .btn,
  .group__actions .btn,
  .reach__action .btn,
  .contact-form__submit,
  .stat-card,
  .reach__stat,
  .culture-card,
  .vmm-stage,
  .ecosystem-pill,
  .story-step,
  .area-panel,
  .market-card,
  .group__accent-line,
  .sectors__accent-line,
  .journey__accent-line,
  .businesses__accent-line,
  .reach__accent-line,
  .why__accent-line,
  .faq__accent-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}