/* ------------------------------------------------------------------
   TYPOGRAPHY
   Complete font files (full Latin character sets) replace the old
   PDF-extracted subsets, which only contained 12-40 glyphs each.
   Missing glyphs were falling back to other fonts, which caused the
   uneven / mixed-weight lettering in headings.
   ------------------------------------------------------------------ */

/* Body serif: Cormorant Garamond */
@font-face {
  font-family: Cormorant;
  src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Cormorant;
  src: url("assets/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* The brand uses the Bold Italic cut for all italic text */
@font-face {
  font-family: Cormorant;
  src: url("assets/fonts/cormorant-garamond-latin-700-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Headings: Cormorant SC Bold. Declared for every weight (100-900) so the
   browser never fakes an extra-bold on top of the real Bold file. */
@font-face {
  font-family: CormorantSC;
  src: url("assets/fonts/cormorant-sc-latin-700-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Labels / UI: Helvetica-style sans (Arimo, metric-compatible).
   Swap the src for licensed Helvetica LT Pro files if you have web licences. */
@font-face {
  font-family: Helv;
  src: url("assets/fonts/arimo-latin-700-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000;
  --gold: #b79549;
  --paper: #f0e3c6;
  --white: #f7f4ec;
  --muted: #b9b4aa;
  --line: rgba(183, 149, 73, 0.55);
  --max: 1280px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Cormorant, serif;
  line-height: 1.5;
}
body.is-loading {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font: inherit;
}
::selection {
  background: var(--gold);
  color: #000;
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 22px 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: normal;
  transition:
    background 0.4s,
    backdrop-filter 0.4s,
    padding 0.4s;
}
.site-header.scrolled {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
  padding-block: 14px;
}
.header-logo {
  width: 135px;
}
.nav {
  display: flex;
  gap: 34px;
  align-items: center;
  font-family: Helv, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav a {
  position: relative;
  padding: 8px 0;
  color: #fff;
}
.nav a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.35s;
}
.nav a:hover:after,
.nav a.active:after {
  width: 100%;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: Helv;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}
.menu-toggle span {
  display: block;
  width: 27px;
  height: 1px;
  background: var(--gold);
  margin: 5px 0;
}
.page {
  min-height: 100vh;
  overflow: hidden;
}
.container {
  width: min(var(--max), 90vw);
  margin: auto;
}
.gold {
  color: var(--gold);
}
.sc-label {
  font-family: Helv, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.display {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  font-size: clamp(3.8rem, 7.2vw, 7.7rem);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h2 {
  font-family: CormorantSC, Cormorant, serif;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: 0.92;
  font-weight: 300;
  text-transform: uppercase;
}
.lead {
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  max-width: 720px;
}
.body-copy {
  font-size: 1.08rem;
  color: #dedad1;
}
.motif {
  position: absolute;
  right: 42px;
  bottom: 28px;
  width: 62px;
  opacity: 0.95;
}
.motif img {
  width: 100%;
}
.rule {
  height: 1px;
  background: var(--line);
  width: 100%;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.delay-1 {
  transition-delay: 0.08s;
}
.delay-2 {
  transition-delay: 0.16s;
}
.delay-3 {
  transition-delay: 0.24s;
}
.preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: grid;
  place-items: center;
  transition:
    opacity 0.9s ease,
    visibility 0.9s;
}
.preloader-stage {
  position: relative;
  width: min(470px, 72vw);
  aspect-ratio: 1.08/1;
  display: grid;
  place-items: center;
}
.logo-drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--gold);
}
.logo-strokes {
  transform-origin: 50% 50%;
}
.logo-strokes .stroke {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.preloader.animate .stroke {
  animation: logoStrokeIn 1.28s cubic-bezier(0.22, 0.75, 0.2, 1) forwards;
}
.preloader.animate .stroke-1 {
  animation-delay: 0.05s;
}
.preloader.animate .stroke-2 {
  animation-delay: 0.13s;
}
.preloader.animate .stroke-3 {
  animation-delay: 0.22s;
}
.preloader.animate .stroke-4 {
  animation-delay: 0.28s;
}
.preloader.animate .stroke-5 {
  animation-delay: 0.34s;
}
.preloader.animate .stroke-6 {
  animation-delay: 0.4s;
}
.preloader.animate .stroke-7 {
  animation-delay: 0.46s;
}
.preloader.animate .stroke-8 {
  animation-delay: 0.52s;
}
.preloader.animate .stroke-9 {
  animation-delay: 0.58s;
}
.preloader-stage:after {
  content: "";
  position: absolute;
  inset: 4% 0 17%;
  border: 1px solid rgba(183, 149, 73, 0);
  transform: scale(0.72);
  opacity: 0;
}
.preloader.animate .preloader-stage:after {
  animation: logoHalo 1.45s ease-out 0.2s forwards;
}
.preloader-logo {
  position: absolute;
  width: min(420px, 100%);
  opacity: 0;
  transform: scale(0.9);
  filter: blur(5px);
  mix-blend-mode: screen;
}
.preloader.animate .preloader-logo {
  animation: logoResolve 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}
.preloader.hide {
  opacity: 0;
  visibility: hidden;
}
.preloader-logo {
  width: min(420px, 68vw);
  opacity: 0;
  transform: scale(0.94);
}
@keyframes logoStrokeIn {
  0% {
    opacity: 0;
    stroke-dashoffset: 1200;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(0.78);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes logoHalo {
  0% {
    opacity: 0;
    transform: scale(0.72);
    border-color: rgba(183, 149, 73, 0);
  }
  35% {
    opacity: 0.9;
    border-color: rgba(183, 149, 73, 0.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.14);
    border-color: rgba(183, 149, 73, 0);
  }
}
@keyframes logoResolve {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(5px);
  }
  45% {
    opacity: 1;
    transform: scale(0.985);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: #000;
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: min(1250px, 90vw);
  margin: auto;
  padding-top: 70px;
}
.hero-copy {
  width: min(710px);
}
.hero-copy .eyebrow {
  margin-bottom: 28px;
}
.hero-copy h1 {
  margin-bottom: 30px;
}
.hero-copy .lead {
  color: #d8d1c4;
}
.hero-media {
  position: absolute;
  right: -5vw;
  top: 0;
  width: 58vw;
  height: 100%;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 33% 50%, 33% 50%);
  overflow: hidden;
  opacity: 0.9;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) sepia(0.12);
}
.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 55vw;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent 45%);
  pointer-events: none;
  z-index: 2;
}
.hero-map .hero-media {
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%, 34% 50%, 34% 50%);
}
.hero-map .hero-media img {
  object-position: center 48%;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gold);
  font-family: Helv, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  transition: gap 0.3s;
}
.cta:after {
  content: "↗";
  font-size: 16px;
  color: var(--gold);
}
.cta:hover {
  gap: 24px;
}
.page-hero {
  min-height: 68vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 160px 0 90px;
  background: #000;
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero:before {
  content: "";
  position: absolute;
  right: -8%;
  top: 0;
  width: 52%;
  height: 100%;
  background: url("assets/images/p3_X4.jpg") center/cover no-repeat;
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 35% 50%, 35% 50%);
  opacity: 0.62;
}
.page-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #000 30%,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.05)
  );
}
.section {
  position: relative;
  padding: 120px 0;
}
.section.gold-section {
  background: var(--gold);
  color: #000;
}
.section.paper-section {
  background-image: url(assets/images/platform/VISION-BG.png);
  background-size: cover;
  color: #000;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: flex-end;
  margin-bottom: 30px;
}
.section-head p {
  max-width: 560px;
  font-size: 1.15rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.intro-copy {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.22;
}
.quote {
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: 1.02;
  max-width: 900px;
}
.quote em {
  color: var(--gold);
}
.architecture {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.architecture-card {
  padding: 55px 42px;
  min-height: 300px;
  border-right: 1px solid var(--line);
}
.architecture-card:last-child {
  border-right: 0;
}
.architecture-card .number {
  font-family: Helv;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 40px;
}
.architecture-card h3 {
  font-family: CormorantSC;
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.architecture-card p {
  font-size: 1.05rem;
  color: #ddd;
}
.icon-triangle {
  width: 74px;
  height: 66px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  display: grid;
  place-items: center;
  margin-bottom: 30px;
}
.icon-triangle span {
  color: #fff;
  font-family: Helv;
  font-size: 16px;
  margin-top: 15px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}
.service-card {
  background: #000;
  padding: 48px 42px;
  min-height: 260px;
  transition:
    background 0.4s,
    transform 0.4s;
}
.service-card:hover {
  background: #0b0b0b;
  transform: translateY(-4px);
}
.service-card h3 {
  font-family: CormorantSC;
  font-size: 2.1rem;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.service-card p {
  max-width: 620px;
  color: #d2cec6;
}
.service-card .service-index {
  font-family: Helv;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.lifecycle {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
}
.lifecycle-item {
  background: #000;
  padding: 28px 24px;
  min-height: 160px;
}
.lifecycle-item strong {
  display: block;
  color: var(--gold);
  font-family: Helv;
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 22px;
}
.lifecycle-item span {
  font-size: 1.2rem;
}
.split-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
}
.split-image .image-side {
  background: url("assets/images/p2_X4.jpg") center/cover;
  clip-path: polygon(0 0, 100% 0, 75% 50%, 100% 100%, 0 100%, 25% 50%);
}
.split-image .text-side {
  padding: 100px 8vw;
  display: flex;
  align-items: center;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.pillar {
  padding: 55px 38px;
  background: #000;
  min-height: 310px;
}
.pillar h3 {
  font-family: CormorantSC;
  color: var(--gold);
  font-size: 2rem;
  text-transform: uppercase;
}
.pillar p {
  color: #d6d1c7;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
}
.contact-card {
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.contact-card .label {
  font-family: Helv;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-card a:hover {
  color: var(--gold);
}
.form {
  display: grid;
  gap: 20px;
}
.form input,
.form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  color: #fff;
  font: 1.1rem Cormorant;
  outline: none;
}
.form textarea {
  min-height: 130px;
  resize: vertical;
}
.form button {
  justify-self: start;
  background: transparent;
  border: 1px solid var(--gold);
  color: #fff;
  padding: 14px 24px;
  font: 11px Helv;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
}
.form button:hover {
  background: var(--gold);
  color: #000;
}
.site-footer {
  padding: 80px 0 40px;
  background: #000;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.footer-logo {
  width: 230px;
}
.footer-links {
  display: flex;
  gap: 25px;
  font: 10px Helv;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-contact {
  text-align: right;
  color: #c9c4ba;
  font-size: 1rem;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 70px;
  padding-top: 20px;
  border-top: 1px solid rgba(183, 149, 73, 0.28);
  font: 9px Helv;
  letter-spacing: 0.15em;
  color: #777;
  text-transform: uppercase;
}
.corner-mark {
  position: absolute;
  right: 34px;
  bottom: 25px;
  width: 60px;
  opacity: 0.95;
}
.corner-mark img {
  width: 100%;
}
@media (max-width: 900px) {
  .site-header {
    padding: 18px 6vw;
  }
  .header-logo {
    width: 112px;
  }
  .menu-toggle {
    display: block;
  }
  .nav {
    position: absolute;
    right: 5vw;
    top: 68px;
    background: #000;
    border: 1px solid var(--line);
    padding: 22px;
    display: grid;
    gap: 8px;
    min-width: 190px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: 0.3s;
  }
  .nav.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .hero {
    min-height: 900px;
  }
  .hero-inner {
    padding-top: 100px;
  }
  .hero-copy {
    width: 100%;
  }
  .hero-media {
    right: -28vw;
    width: 100vw;
    height: 62%;
    top: auto;
    bottom: 0;
    clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%, 32% 50%, 32% 50%);
    opacity: 0.7;
  }
  .hero:after {
    height: 75%;
    top: auto;
    bottom: 0;
    background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.25));
  }
  .page-hero {
    min-height: 72vh;
    padding-bottom: 70px;
  }
  .page-hero:before {
    width: 100%;
    opacity: 0.35;
  }
  .grid-2,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .grid-3,
  .pillars {
    grid-template-columns: 1fr;
  }
  .architecture {
    display: grid;
    grid-template-columns: 1fr;
  }
  .architecture-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .lifecycle {
    grid-template-columns: 1fr 1fr;
  }
  .split-image {
    grid-template-columns: 1fr;
  }
  .split-image .image-side {
    min-height: 420px;
  }
  .split-image .text-side {
    padding: 70px 8vw;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-contact {
    text-align: left;
  }
  .footer-links {
    flex-wrap: wrap;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .motif {
    right: 18px;
    bottom: 18px;
    width: 45px;
  }
}

/* ABOUT — profile page 2 recreation */
.about-profile-spread {
  position: relative;
  min-height: 100vh;
  background: var(--gold);
  color: #000;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 42vw);
  align-items: stretch;
}
.about-profile-copy {
  position: relative;
  z-index: 3;
  padding: clamp(90px, 11vw, 165px) 5vw 90px 7.5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-kicker {
  display: none;
}
.about-profile-title {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 6.2vw, 6.8rem);
  line-height: 0.9;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.about-profile-tag {
  font-family: Cormorant, Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.65rem);
  margin: 0 0 clamp(70px, 9vw, 125px);
}
.about-profile-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(38px, 6vw, 95px);
  max-width: 960px;
  font-size: clamp(1.05rem, 1.35vw, 1.42rem);
  line-height: 1.35;
}
.about-profile-columns p {
  margin: 0 0 34px;
}
.about-profile-image {
  position: absolute;
  z-index: 1;
  right: -1px;
  top: 0;
  width: 52%;
  height: 100%;
  clip-path: polygon(27% 0, 100% 0, 100% 100%, 27% 100%, 50% 50%);
  overflow: hidden;
}
.about-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.9);
}
.about-profile-spread .corner-mark {
  z-index: 4;
}
.about-at-glance .architecture-card {
  border-color: rgba(0, 0, 0, 0.28);
}
.about-at-glance .number {
  color: #000;
}
@media (max-width: 900px) {
  .about-profile-spread {
    display: block;
    min-height: auto;
    padding-bottom: 0;
  }
  .about-profile-copy {
    padding: 95px 7vw 55px;
  }
  .about-profile-title {
    font-size: clamp(3rem, 12vw, 5.5rem);
  }
  .about-profile-tag {
    margin-bottom: 55px;
  }
  .about-profile-columns {
    grid-template-columns: 1fr;
    gap: 0;
    font-size: 1.18rem;
    max-width: 650px;
  }
  .about-profile-image {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 58vw;
    min-height: 300px;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  }
}
@media (max-width: 560px) {
  .about-profile-copy {
    padding: 85px 6vw 45px;
  }
  .about-profile-image {
    height: 70vw;
    min-height: 260px;
  }
  .about-profile-tag {
    font-size: 1.1rem;
  }
}


.preloader.animate .stroke-1 {
  --from-x: -34px;
  --from-y: -20px;
}
.preloader.animate .stroke-2 {
  --from-x: 42px;
  --from-y: 18px;
}
.preloader.animate .stroke-3 {
  --from-x: -48px;
  --from-y: 28px;
}
.preloader.animate .stroke-4 {
  --from-x: -20px;
  --from-y: 16px;
}
.preloader.animate .stroke-5 {
  --from-x: 24px;
  --from-y: -12px;
}
.preloader.animate .stroke-6 {
  --from-x: -24px;
  --from-y: -12px;
}
.preloader.animate .stroke-7 {
  --from-x: 20px;
  --from-y: 16px;
}
.preloader.animate .stroke-8 {
  --from-x: 48px;
  --from-y: 28px;
}
.preloader.animate .stroke-9 {
  --from-x: -42px;
  --from-y: 18px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Document-faithful AFRIMANSA Platform spreads — based on profile pages 7–9 */
.platform-spread {
  position: relative;
  overflow: hidden;
}
.platform-intro {
  min-height: 100svh;
  background: #000;
  display: flex;
  align-items: center;
  padding: 9vw 5vw;
}
.platform-intro-copy {
  position: relative;
  z-index: 3;
  width: 54%;
  max-width: 850px;
}
.platform-title {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  color: var(--gold);
  font-size: clamp(3rem, 5.3vw, 5.7rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 14px 0 10px;
}
.platform-subtitle {
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  font-style: italic;
  color: #f5f1e8;
  margin: 0 0 48px;
}
.platform-paragraph {
  font-size: clamp(1.1rem, 1.45vw, 1.55rem);
  line-height: 1.55;
  max-width: 790px;
  color: #f1eee6;
}
.platform-construction {
  position: absolute;
  right: -2%;
  top: 0;
  width: 58%;
  height: 100%;
  z-index: 1;
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 25% 50%, 25% 50%);
  overflow: hidden;
}
.platform-construction img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.78) sepia(0.16);
  transform: scale(1.02);
}
.platform-intro:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.82) 31%,
    rgba(0, 0, 0, 0.15) 58%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 2;
  pointer-events: none;
}
.platform-intro .corner-mark {
  z-index: 4;
}
.platform-architecture {
  background-image: url(assets/images/platform/PLATFORM-BG.png);
  background-size: contain;
  background-repeat: no-repeat;
  color: #000;
  text-align: center;
  padding: 95px 0 115px;
  overflow: hidden;
}
.platform-container {
  max-width: 1450px;
}
.platform-kicker {
  font-family: Cormorant, Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3e7c9;
}
.platform-architecture .platform-kicker {
  color: #f3e7c9;
}
.platform-heading {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 10px 0 12px;
}
.platform-architecture .platform-subtitle {
  color: #f4ead2;
  margin-bottom: 38px;
}
.platform-subtitle.centered {
  text-align: center;
}
.platform-lead {
  max-width: 1450px;
  margin: 0 auto 48px;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.45;
  font-weight: 700;
}
.division-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 55px;
  row-gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.division-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.division-card:nth-child(5) {
  grid-column: 2;
}
.division-card img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  mix-blend-mode: normal;
  margin-bottom: 13px;
}
.division-card h3 {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.division-card p {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
  max-width: 245px;
}
.platform-commercial {
  background: var(--gold);
  color: #000;
  padding-top: 90px;
  padding-bottom: 110px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.commercial-head {
  border-bottom: 2px solid #000;
  padding-bottom: 9px;
  margin-bottom: 85px;
}
.commercial-head h2 {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  font-size: clamp(2.2rem, 3.5vw, 3.8rem);
  text-transform: uppercase;
  line-height: 0.9;
  margin: 5px 0 4px;
}
.commercial-head p {
  margin: 0;
  color: #f3e7c9;
  font-size: 1.1rem;
  font-style: italic;
}
.commercial-table-wrap {
  overflow-x: auto;
}
.commercial-table {
  width: 100%;
  border-collapse: collapse;
  background: #000;
  color: #eee;
  font-size: 1rem;
  min-width: 880px;
}
.commercial-table th,
.commercial-table td {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
  line-height: 1.25;
}
.commercial-table th {
  font-family: CormorantSC, Cormorant, Georgia, serif;
  color: var(--gold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.commercial-table td:first-child {
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .platform-intro {
    min-height: 900px;
    padding: 120px 8vw 80px;
    align-items: flex-start;
  }
  .platform-intro-copy {
    width: 100%;
    padding-top: 35px;
  }
  .platform-construction {
    top: auto;
    bottom: 0;
    right: -18%;
    width: 110%;
    height: 55%;
    clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%, 31% 50%, 31% 50%);
    opacity: 0.68;
  }
  .platform-intro:after {
    background: linear-gradient(
      180deg,
      #000 10%,
      rgba(0, 0, 0, 0.82) 42%,
      rgba(0, 0, 0, 0.25) 72%,
      #000 100%
    );
  }
  .platform-title {
    font-size: clamp(2.8rem, 11vw, 4.4rem);
  }
  .platform-paragraph {
    font-size: 1.08rem;
    max-width: 600px;
  }
  .division-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 38px 22px;
  }
  .division-card:nth-child(5) {
    grid-column: auto;
  }
  .division-card img {
    width: 88px;
    height: 76px;
  }
  .division-card h3 {
    font-size: 1.12rem;
  }
  .division-card p {
    font-size: 0.96rem;
  }
  .platform-commercial {
    padding-left: 0;
    padding-right: 0;
  }
  .commercial-head {
    margin-inline: 6vw;
  }
  .commercial-table-wrap {
    padding-inline: 6vw;
  }
}
@media (max-width: 520px) {
  .division-grid {
    grid-template-columns: 1fr;
  }
  .division-card {
    max-width: 300px;
    margin: auto;
  }
  .platform-architecture {
    padding-top: 75px;
  }
  .platform-commercial {
    padding-top: 70px;
  }
}

/* =========================================================
   AFRIMANSA BRAND-LED REFINEMENT — 2026
   Brand colours: Gold #B79549 · Black #000000 · Navy #12223B/#0B1628 · White #FFFFFF · Light Grey #F2F2F2
   ========================================================= */
:root{
  --black:#000000;
  --gold:#B79549;
  --paper:#F2F2F2;
  --white:#FFFFFF;
  --navy:#12223B;
  --midnight:#0B1628;
  --muted:#B9B4AA;
  --line:rgba(183,149,73,.55);
}

/* Brand logo / hero */
.hero{
  min-height:100svh;
  isolation:isolate;
}
.hero-copy{
  width:min(620px);
}
.hero-title-spacer{
  display:block;
  height:clamp(28px,4vw,58px);
}
.hero-media.hero-logo-media{
  right:0;
  top:0;
  width:56vw;
  height:100%;
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,30% 50%,30% 50%);
  background:
    radial-gradient(circle at 62% 50%,rgba(183,149,73,.11),transparent 35%),
    linear-gradient(135deg,#0B1628 0%,#000 65%);
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:1;
}
.hero-logo-media:before{
  content:"";
  position:absolute;
  width:min(43vw,600px);
  aspect-ratio:1;
  border:1px solid rgba(183,149,73,.23);
  border-radius:50%;
  transform:scale(.82);
  animation:heroRing 7s ease-in-out infinite;
}
.hero-logo-media:after{
  content:"";
  position:absolute;
  width:min(29vw,400px);
  aspect-ratio:1;
  border:1px solid rgba(183,149,73,.12);
  border-radius:50%;
  animation:heroRing 9s ease-in-out -2s infinite reverse;
}
.hero-brand-logo{
  position:relative;
  z-index:2;
  width:min(37vw,500px);
  max-height:70vh;
  object-fit:contain;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.5));
  animation:heroLogoFloat 6s ease-in-out infinite;
}
.hero-logo-orbit{
  position:absolute;
  z-index:1;
  width:min(34vw,470px);
  aspect-ratio:1;
  border:1px solid rgba(183,149,73,.28);
  border-radius:50%;
  animation:heroOrbit 18s linear infinite;
}
.hero-logo-orbit:after{
  content:"";
  position:absolute;
  top:-3px;
  left:50%;
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 18px rgba(183,149,73,.8);
}
@keyframes heroLogoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.012)}}
@keyframes heroOrbit{to{transform:rotate(360deg)}}
@keyframes heroRing{0%,100%{transform:scale(.82);opacity:.45}50%{transform:scale(1);opacity:.95}}

/* More architectural, less decorative section rhythm */
.glance-section{
  background:#000;
}
.glance-grid{
  position:relative;
}
.glance-card{
  min-height:255px;
  transition:background .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.glance-card:hover{
  background:var(--navy);
  transform:translateY(-7px);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.glance-card h3{
  transition:letter-spacing .45s ease;
}
.glance-card:hover h3{
  letter-spacing:.06em;
}

/* Operating architecture / divisions */
.platform-architecture{
  position:relative;
}
.division-grid{
  align-items:start;
}
.division-card{
  position:relative;
  min-height:250px;
  padding:4px 12px 0;
  text-decoration:none;
  color:#000;
  cursor:pointer;
  overflow:visible;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.division-card:hover,
.division-card:focus-visible{
  transform:translateY(-10px);
  outline:none;
}
.division-icon-wrap{
  position:relative;
  width:112px;
  height:108px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
}
.division-card img{
  position:relative;
  z-index:2;
  width:102px;
  height:86px;
  object-fit:contain;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.division-icon-wrap:before{
  content:"";
  position:absolute;
  inset:8px;
  
  opacity:.45;
  transition:transform .7s ease,opacity .5s ease;
}
.division-icon-line{
  position:absolute;
  z-index:1;
  width:100%;
  height:1px;
  left:-50%;
  top:50%;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.45),transparent);
  transform:scaleX(.3);
  opacity:0;
  transition:transform .7s ease,opacity .5s ease;
}
.division-card:hover img,
.division-card:focus-visible img{
  transform:translateY(-6px) scale(1.1) rotate(-2deg);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.2));
}
.division-card:hover .division-icon-wrap:before,
.division-card:focus-visible .division-icon-wrap:before{
  transform:rotate(30deg) scale(1);
  opacity:.8;
}
.division-card:hover .division-icon-line,
.division-card:focus-visible .division-icon-line{
  transform:scaleX(1);
  opacity:1;
  animation:divisionScan 1.4s ease-in-out infinite;
}
@keyframes divisionScan{
  0%,100%{left:-50%}
  50%{left:50%}
}
.division-card h3{
  position:relative;
  z-index:3;
  margin-bottom:2px;
  transition:transform .45s ease,letter-spacing .45s ease;
}
.division-card:hover h3,
.division-card:focus-visible h3{
  transform:translateY(-2px);
  letter-spacing:.035em;
}
.division-hover-label{
  display:block;
  font-family:Helv,Arial,sans-serif;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.62;
  transition:opacity .35s ease;
}
.division-hover-detail{
  position:absolute;
  z-index:8;
  left:50%;
  top:calc(100% - 55px);
  width:min(300px,calc(100vw - 40px));
  padding:19px 20px 18px;
  background:#ffffff54;
  color:#000;
  border:1px solid rgba(171, 125, 28, 0.8);
  box-shadow:0 20px 45px rgba(0,0,0,.2);
  text-align:left;
  font-family:Cormorant,Georgia,serif;
  font-size:1rem;
  line-height:1.3;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-8px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
  pointer-events:none;
}
.division-hover-detail:before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  top:-6px;
  left:50%;
  background:#fff;
  border-left:1px solid rgba(183,149,73,.8);
  border-top:1px solid rgba(183,149,73,.8);
  transform:translateX(-50%) rotate(45deg);
}
.division-hover-detail strong{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.15);
  font-family:Helv,Arial,sans-serif;
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.division-hover-detail b{
  color:var(--gold);
  font-size:14px;
}
.division-card:hover .division-hover-detail,
.division-card:focus-visible .division-hover-detail{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.platform-architecture-note{
  margin:68px auto 0;
  font-family:Helv,Arial,sans-serif;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.65;
}

/* Keep the approved spread sections visually unchanged; only improve their text treatment. */
.split-image,
.platform-spread{
  isolation:isolate;
}

/* Institutional body text uses white/light grey rather than cream. */
.body-copy{color:#F2F2F2}

/* Accessibility / touch fallback */
@media (hover:none){
  .division-hover-detail{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    margin-top:10px;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  .division-hover-detail:before{display:none}
  .division-card{min-height:0;padding-bottom:8px}
}
@media (max-width:900px){
  .hero-media.hero-logo-media{
    right:-22vw;
    width:100vw;
    height:62%;
    top:auto;
    bottom:0;
    clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,30% 50%,30% 50%);
  }
  .hero-brand-logo{width:min(64vw,430px);max-height:46vh}
  .hero-logo-orbit{width:min(58vw,380px)}
  .hero-logo-media:before{width:min(70vw,460px)}
  .hero-logo-media:after{width:min(48vw,320px)}
  .hero-inner{z-index:5}
  .hero-copy{max-width:680px}
  .division-hover-detail{
    top:calc(100% - 12px);
  }
}
@media (max-width:520px){
  .hero{
    min-height:820px;
  }
  .hero-title-spacer{height:20px}
  .hero-media.hero-logo-media{
    right:-30vw;
    width:120vw;
    height:56%;
  }
  .hero-brand-logo{width:65vw}
  .hero-logo-orbit{width:60vw}
  .division-card{
    padding-left:0;
    padding-right:0;
  }
  .division-hover-detail{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    margin-top:10px;
    transform:none;
  }
}

/* ------------------------------------------------------------------
   At-a-glance cards: industrial image revealed in a chevron shape
   on the far right of the card (mirrors the profile's chevron crop)
------------------------------------------------------------------- */
.glance-card{
  --shape-w:clamp(190px,23vw,330px);
  --shape-depth:clamp(46px,5vw,84px);
  --chevron:polygon(0 0,calc(100% - var(--shape-depth)) 0,100% 50%,calc(100% - var(--shape-depth)) 100%,0 100%,var(--shape-depth) 50%);
  position:relative;
  overflow:hidden;
}
.glance-card .number,
.glance-card h3,
.glance-card p{
  position:relative;
  z-index:2;
}
.glance-card p{
  transition:max-width .7s cubic-bezier(.2,.8,.2,1);
}
.glance-shape{
  position:absolute;
  top:26px;
  bottom:26px;
  right:42px;
  width:var(--shape-w);
  z-index:1;
  pointer-events:none;
  opacity:0;
  transform:translateX(70px);
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
/* offset gold chevron – echoes the layered brand triangles */
.glance-shape:before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gold);
  clip-path:var(--chevron);
  transform:translateX(-12px);
  opacity:.9;
}
.glance-shape img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  clip-path:var(--chevron);
  transform:scale(1.22);
  filter:saturate(.92) contrast(1.04);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.glance-card:hover .glance-shape,
.glance-card:focus-within .glance-shape{
  opacity:1;
  transform:translateX(0);
}
.glance-card:hover .glance-shape img,
.glance-card:focus-within .glance-shape img{
  transform:scale(1.04);
}
.glance-card:hover p,
.glance-card:focus-within p{
  max-width:calc(100% - var(--shape-w));
}
/* Touch devices have no hover: keep the image visible */
@media (hover:none){
  .glance-shape{opacity:1;transform:none}
  .glance-shape img{transform:scale(1.04)}
  .glance-card p{max-width:calc(100% - var(--shape-w))}
}
@media (max-width:900px){
  .glance-card{--shape-w:clamp(150px,34vw,260px);--shape-depth:44px}
  .glance-shape{top:24px;bottom:24px}
}
@media (max-width:520px){
  .glance-card{--shape-w:120px;--shape-depth:30px}
}
@media (prefers-reduced-motion:reduce){
  .glance-shape,.glance-shape img,.glance-card p{transition:none}
}

/* ------------------------------------------------------------------
   About page – principle cards: image fades up from beneath the text
   (transparent at the top, strongest at the bottom of the card)
------------------------------------------------------------------- */
.pillar{
  position:relative;
  overflow:hidden;
  padding-bottom:170px;
  min-height:420px;
  transition:background-color .6s ease,opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.pillar .sc-label,
.pillar h3,
.pillar p{
  position:relative;
  z-index:2;
}
.pillar-img{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:240px;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.85) 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.85) 100%);
}
.pillar-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.12);
  filter:saturate(.9) contrast(1.04);
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1);
}
.pillar:hover,
.pillar:focus-within{
  background-color:var(--midnight);
}
.pillar:hover .pillar-img,
.pillar:focus-within .pillar-img{
  opacity:1;
  transform:translateY(0);
}
.pillar:hover .pillar-img img,
.pillar:focus-within .pillar-img img{
  transform:scale(1.02);
}
/* Touch devices have no hover: keep a softer image visible */
@media (hover:none){
  .pillar-img{opacity:.85;transform:none}
  .pillar-img img{transform:scale(1.02)}
}
@media (max-width:900px){
  .pillar{min-height:0;padding-bottom:150px}
  .pillar-img{height:200px}
}
@media (prefers-reduced-motion:reduce){
  .pillar,.pillar-img,.pillar-img img{transition:none}
}

/* ==================================================================
   Services – The Investment Lifecycle wheel
   Layout is drawn on a 1200 × 675 canvas (1em = 16px at that size)
   and scales fluidly; icons orbit the centre and pause on hover.
=================================================================== */
.lifecycle-section{
  background:#000;
  color:var(--gold);
  padding:70px 0 90px;
  overflow:hidden;
}
.lc-wrap{
  width:min(1200px,92vw);
  margin:0 auto;
  container-type:inline-size;
}
.lc-stage{
  position:relative;
  width:100%;
  aspect-ratio:1200/675;
  font-size:16px;
  font-size:calc(100cqw / 75);
}

/* wheel */
.lc-wheel{
  position:absolute;
  left:16.94em;
  top:-1.81em;
  width:40em;
  aspect-ratio:1;
  container-type:inline-size;
}
.lc-ring{
  position:absolute;
  inset:11.875%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    #b8964b 0 60deg,#8a6e38 60deg 120deg,#dcbc74 120deg 180deg,
    #b49f67 180deg 240deg,#8d7b57 240deg 300deg,#77602c 300deg 360deg);
}
.lc-ring:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(0,0,0,.14) 0deg,transparent 14deg,transparent 60deg,
    rgba(0,0,0,.5) 60deg,transparent 82deg,transparent 120deg,
    rgba(0,0,0,.1) 120deg,transparent 134deg,transparent 180deg,
    rgba(0,0,0,.1) 180deg,transparent 194deg,transparent 240deg,
    rgba(0,0,0,.45) 240deg,transparent 264deg,transparent 300deg,
    rgba(0,0,0,.42) 300deg,transparent 324deg,transparent 360deg);
}
.lc-core{
  position:absolute;
  inset:30.78%;
  border-radius:50%;
  background:#000;
  display:grid;
  place-items:center;
  z-index:1;
}
.lc-core h2{
  margin:0;
  font-family:CormorantSC,Cormorant,serif;
  font-weight:700;
  font-size:4.06cqw;
  line-height:1.42;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  color:var(--gold);
}

/* orbit */
.lc-orbit{
  position:absolute;
  inset:0;
  z-index:3;
  animation:lcSpin 70s linear infinite;
}
.lc-node{
  position:absolute;
  left:50%;
  top:50%;
  width:17.19cqw;
  height:15cqw;
  margin:-7.5cqw 0 0 -8.595cqw;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:rotate(var(--a)) translateY(-40cqw) rotate(calc(-1 * var(--a)));
}
.lc-node:focus{outline:none}
.lc-node:focus-visible .lc-tri-shape{outline:2px solid var(--gold)}
.lc-tri{
  position:absolute;
  inset:0;
  display:block;
  animation:lcCounter 70s linear infinite;
}
.lc-tri-body{
  position:absolute;
  inset:0;
  display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.lc-tri-shape{
  position:absolute;
  inset:0;
  display:block;
  background:#f2f2f2;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.lc-tri-body img{
  position:absolute;
  left:50%;
  bottom:9%;
  width:47%;
  height:auto;
  transform:translateX(-50%);
  user-select:none;
  -webkit-user-drag:none;
}
.lc-node:hover .lc-tri-body,
.lc-node.is-active .lc-tri-body,
.lc-node:focus-visible .lc-tri-body{
  transform:scale(1.14);
  filter:drop-shadow(0 0 14px rgba(183,149,73,.75));
}
.lc-stage.lc-paused .lc-orbit,
.lc-stage.lc-paused .lc-tri,
.lc-wheel:has(.lc-node:hover) .lc-orbit,
.lc-wheel:has(.lc-node:hover) .lc-tri{
  animation-play-state:paused;
}
@keyframes lcSpin{to{transform:rotate(360deg)}}
@keyframes lcCounter{to{transform:rotate(-360deg)}}

/* labels around the wheel */
.lc-label{
  position:absolute;
  width:var(--w,15em);
  transition:color .4s ease;
}
.lc-label h3{
  margin:0 0 .25em;
  font-family:CormorantSC,Cormorant,serif;
  font-weight:700;
  font-size:.9em;
  line-height:1.45;
  letter-spacing:.03em;
  text-transform:none;
  color:var(--gold);
  transition:color .4s ease;
}
.lc-label p{
  margin:0;
  font-size:.82em;
  line-height:1.26;
  color:rgba(183,149,73,.88);
  transition:color .4s ease;
}
@media (min-width:901px){.lc-stage.lc-paused .lc-label:not(.is-active){opacity:.22}}
.lc-label{transition:color .4s ease,opacity .4s ease}
.lc-label.is-active h3{color:#ecd496}
.lc-label.is-active p{color:#dcc07c}
.lc-label-1{left:53.1em;top:2.1em}
.lc-label-2{left:57.6em;top:16em}
.lc-label-3{left:50.6em;top:29em}
.lc-label-4{right:51.75em;top:29em;text-align:right}
.lc-label-5{right:59.4em;top:15.7em;text-align:right}
.lc-label-6{right:54.6em;top:1.6em;text-align:right}

/* pop-up description */
.lc-pop{
  position:absolute;
  z-index:20;
  width:19em;
  padding:1.15em 1.35em 1.25em;
  background:#0b1628;
  border:1px solid var(--gold);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.96);
  transform-origin:center;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;
}
.lc-pop.show{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.lc-pop h3{
  margin:0 0 .5em;
  font-family:CormorantSC,Cormorant,serif;
  font-weight:700;
  font-size:1.05em;
  line-height:1.35;
  letter-spacing:.03em;
  text-transform:none;
  color:var(--gold);
  text-align:left;
}
.lc-pop p{
  margin:0;
  font-size:1.02em;
  line-height:1.4;
  color:#e9e4d8;
  text-align:left;
}

/* tablet / mobile: wheel on top, stages listed beneath */
@media (max-width:900px){
  .lifecycle-section{padding:50px 0 100px}
  .lc-stage{
    aspect-ratio:auto;
    font-size:15px;
    display:flex;
    flex-direction:column;
    gap:26px;
  }
  .lc-wheel{
    position:relative;
    left:auto;
    top:auto;
    width:min(100%,480px);
    margin:0 auto 6px;
  }
  .lc-label{
    position:static;
    width:auto;
    text-align:left;
    border-top:1px solid var(--line);
    padding-top:16px;
  }
  .lc-label-1,.lc-label-2,.lc-label-3,.lc-label-4,.lc-label-5,.lc-label-6{text-align:left}
  .lc-label h3{font-size:1.05em}
  .lc-label p{font-size:1.05em;line-height:1.35}
  .lc-pop{width:min(19em,calc(100% - 16px))}
}
@media (prefers-reduced-motion:reduce){
  .lc-orbit,.lc-tri{animation:none}
  .lc-tri-body,.lc-pop{transition:none}
}

/* ==========================================================================
   Index · Platform architecture — chevron decoration (from Institutional Profile p.6)
   Sits behind the content, anchored to the bottom-right, bleeding off the edges.
   Slow "breathing" zoom; the top edge is feathered so it melts into the gold.
   ========================================================================== */
.platform-architecture > .container{position:relative;z-index:1}
.deco-chevrons{
  position:absolute;
  right:0;bottom:0;
  width:clamp(170px,22vw,340px);
  aspect-ratio:880/1332;
  z-index:0;
  pointer-events:none;
  transform-origin:100% 100%;
  animation:deco-breathe 22s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%);
  will-change:transform;
}
.deco-chevrons img{display:block;width:100%;height:100%}
@keyframes deco-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.14)}
}
.platform-architecture > .corner-mark{z-index:2}
@media (max-width:900px){
  .deco-chevrons{width:clamp(120px,30vw,200px);opacity:.9}
}
@media (max-width:520px){
  .deco-chevrons{width:110px}
}
@media (prefers-reduced-motion:reduce){
  .deco-chevrons{animation:none}
}

/* ==========================================================================
   About · The AFRIMANSA Operating System (from Institutional Profile p.11)
   Ten phases with a staggered entry; black tiles fuse into the black panels.
   ========================================================================== */
.os-system{
  background:var(--gold);
  color:#000;
  padding-top:90px;
  padding-bottom:110px;
  border-top:1px solid rgba(0,0,0,.18);
}
.os-system .commercial-head{margin-bottom:46px;margin-inline:0}
.os-intro{
  max-width:60ch;
  margin:0 0 56px;
  font-size:1.05rem;
  line-height:1.55;
  color:#17130d;
}
.os-board{--os-gap:10px}

/* The ten phase tiles */
.os-phases{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:var(--os-gap);
}
.os-phase{
  --tile-bg:#000;--tile-fg:var(--gold);
  position:relative;
  min-height:158px;
  padding:22px 8px 18px;
  background:var(--tile-bg);
  color:var(--tile-fg);
  display:flex;flex-direction:column;gap:12px;
  opacity:0;
  transition:translate .45s cubic-bezier(.2,.8,.2,1),background-color .45s ease;
}
.os-phase:nth-child(even){--tile-bg:#d8dde5;--tile-fg:#000;border-top:3px solid #000}
.os-num{
  font-family:Cormorant,Georgia,serif;
  font-weight:700;
  font-size:clamp(1.3rem,1.9vw,1.75rem);
  line-height:1;
  letter-spacing:.04em;
  text-align:center;
  transition:letter-spacing .45s ease;
}
.os-name{
  font-family:CormorantSC,Cormorant,Georgia,serif;
  font-weight:700;
  font-size:clamp(.68rem,.9vw,.84rem);
  line-height:1.25;
  letter-spacing:.02em;
  text-transform:lowercase;
  font-variant:small-caps;
  hyphens:manual;
}
.os-phase:hover{translate:0 -4px}
.os-phase:hover .os-num{letter-spacing:.12em}
.os-phase:nth-child(even):hover{background:#e6e9ee}

/* Governance + reporting panels */
.os-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--os-gap);
}
.os-panel{
  background:#000;
  padding:30px 34px 34px;
  color:var(--gold);
  opacity:0;
}
.os-panel h3{
  margin:0 0 14px;
  font-family:CormorantSC,Cormorant,Georgia,serif;
  font-size:1.15rem;
  letter-spacing:.05em;
  color:#fff;
  font-weight:700;
}
.os-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.os-panel li{
  position:relative;
  padding-left:20px;
  font-size:1rem;
  line-height:1.5;
}
.os-panel li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:6px;height:6px;
  background:var(--gold);
}

/* Entry animation — triggered by script.js adding .is-visible to .os-board */
@keyframes os-rise{
  from{opacity:0;transform:translateY(26px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes os-fade{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.os-board.is-visible .os-phase{
  opacity:1;
  animation:os-rise .75s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 85ms) backwards;
}
.os-board.is-visible .os-panel{
  opacity:1;
  animation:os-fade .8s cubic-bezier(.2,.7,.2,1) calc(10 * 85ms + 150ms) backwards;
}
.os-board.is-visible .os-panel + .os-panel{animation-delay:calc(10 * 85ms + 300ms)}

@media (max-width:1100px){
  .os-phases{grid-template-columns:repeat(5,minmax(0,1fr))}
  .os-phase{min-height:140px;padding:22px 14px 18px}
  .os-name{font-size:.86rem}
  .os-num{font-size:1.6rem}
  /* 5 columns: default odd/even colouring already forms a checkerboard */
  .os-panels{margin-top:var(--os-gap)}
}
@media (max-width:760px){
  .os-system{padding-top:70px;padding-bottom:80px}
  .os-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-phase{min-height:0;flex-direction:row;align-items:baseline;gap:14px;padding:16px 16px}
  .os-phase:nth-child(n){--tile-bg:#000;--tile-fg:var(--gold);border-top:0}
  .os-phase:nth-child(4n+2),.os-phase:nth-child(4n+3){--tile-bg:#d8dde5;--tile-fg:#000;border-top:3px solid #000}
  .os-num{text-align:left}
  .os-name{font-size:.88rem}
  .os-panels{grid-template-columns:1fr}
  .os-panel{padding:26px 22px 28px}
}
@media (prefers-reduced-motion:reduce){
  .os-phase,.os-panel{opacity:1}
  .os-board.is-visible .os-phase,
  .os-board.is-visible .os-panel{animation:none}
  .os-phase:hover{translate:none}
}

/* =========================================================
   Services · "What each division does" — entry + hover roll-out
   Divisions slide in (staggered) once the table scrolls into view.
   Primary Activity / How Value Is Earned stay masked until the row is
   hovered, focused or (on touch) tapped, then wipe out to the right.
   ========================================================= */
.commercial-table.is-interactive{table-layout:fixed}
.commercial-table.is-interactive th:nth-child(1){width:30%}
.commercial-table.is-interactive th:nth-child(2),
.commercial-table.is-interactive th:nth-child(3){width:35%}

.commercial-table.is-interactive tbody tr{cursor:default;outline:none}
.commercial-table.is-interactive td{
  position:relative;
  transition:border-color .5s ease,background-color .5s ease;
}

/* Entry: division names glide in from the left, one after another */
.commercial-table.is-interactive td:first-child{
  opacity:0;
  transform:translateX(-34px);
  clip-path:inset(0 100% 0 0);
  padding-right:44px;
}
.commercial-table-wrap.visible .commercial-table.is-interactive td:first-child{
  animation:divisionEnter .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.25s + var(--i,0) * .11s);
}
@keyframes divisionEnter{
  0%{opacity:0;transform:translateX(-34px);clip-path:inset(0 100% 0 0)}
  60%{opacity:1}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

/* Gold accent bar + arrow cue on the division cell */
.commercial-table.is-interactive td:first-child:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.commercial-table.is-interactive td:first-child:after{
  content:"\2192";
  position:absolute;right:16px;top:50%;
  color:var(--gold);font-weight:400;
  transform:translate(-6px,-50%);opacity:.55;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease;
}

/* Hidden detail cells: faint placeholder borders, content masked */
.commercial-table.is-interactive td:nth-child(n+2){border-color:rgba(255,255,255,.12)}
.commercial-table.is-interactive .cell-roll{
  display:block;
  opacity:0;
  transform:translateX(-22px);
  clip-path:inset(0 100% 0 0);
  transition:
    clip-path .75s cubic-bezier(.65,0,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1),
    opacity .45s ease;
}
.commercial-table.is-interactive td:nth-child(3) .cell-roll{transition-delay:.12s,.12s,.12s}

/* Revealed state */
.commercial-table.is-interactive tbody tr:hover td:nth-child(n+2),
.commercial-table.is-interactive tbody tr.is-open td:nth-child(n+2){border-color:rgba(255,255,255,.5)}
.commercial-table.is-interactive tbody tr:hover .cell-roll,
.commercial-table.is-interactive tbody tr.is-open .cell-roll{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
}
.commercial-table.is-interactive tbody tr:hover td:first-child,
.commercial-table.is-interactive tbody tr.is-open td:first-child{background:var(--midnight,#0B1628)}
.commercial-table.is-interactive tbody tr:hover td:first-child:before,
.commercial-table.is-interactive tbody tr.is-open td:first-child:before{transform:scaleY(1)}
.commercial-table.is-interactive tbody tr:hover td:first-child:after,
.commercial-table.is-interactive tbody tr.is-open td:first-child:after{transform:translate(0,-50%);opacity:1}
.commercial-table.is-interactive tbody tr:hover td:nth-child(n+2),
.commercial-table.is-interactive tbody tr.is-open td:nth-child(n+2){background:rgba(11,22,40,.55)}

@media (prefers-reduced-motion:reduce){
  .commercial-table.is-interactive td:first-child{opacity:1;transform:none;clip-path:none;animation:none!important}
  .commercial-table.is-interactive .cell-roll{transform:none;clip-path:none;transition:opacity .2s ease}
}

/* Pinned rows: keyboard focus ring (Enter / Space toggles a row) */
.commercial-table.is-interactive tbody tr{cursor:pointer}
.commercial-table.is-interactive tbody tr:focus-visible td:first-child{box-shadow:inset 0 0 0 2px var(--gold)}


/* =====================================================================
   RESPONSIVE PASS — 2026
   Consolidated final overrides for tablet / mobile.
   The desktop composition remains unchanged.
   ===================================================================== */

html, body { max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
img, svg, video, iframe { max-width: 100%; }

/* Prevent fixed/absolute artwork from creating accidental page width. */
.site-header,
.hero,
.page-hero,
.about-profile-spread,
.platform-spread,
.split-image,
.lifecycle-section,
.section,
.site-footer { max-width: 100%; }

/* ------------------------------ TABLET ------------------------------ */
@media (max-width: 900px) {
  .container { width: min(88vw, 760px); }
  .section { padding: 82px 0; }
  .section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 36px;
  }
  .section-head h2 { margin-bottom: 0; }
  .section-head p {
    max-width: 680px;
    font-size: 1.08rem;
    line-height: 1.45;
  }

  /* Header / mobile menu */
  .site-header { padding: 17px 6vw; }
  .site-header.scrolled { padding-block: 12px; }
  .header-logo { width: 112px; }
  .nav {
    right: 6vw;
    top: calc(100% + 10px);
    width: min(260px, 88vw);
    min-width: 0;
    padding: 14px 18px;
    gap: 2px;
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
  }
  .nav a { padding: 12px 2px; }
  .menu-toggle { padding: 6px 0; }

  /* Hero */
  .hero {
    min-height: max(760px, 100svh);
    align-items: flex-start;
  }
  .hero-inner {
    width: 88vw;
    padding-top: 116px;
  }
  .hero-copy {
    width: min(100%, 660px);
    position: relative;
    z-index: 6;
  }
  .hero-copy .lead {
    max-width: 600px;
    font-size: clamp(1.3rem, 3vw, 1.55rem);
  }
  .hero-copy .body-copy {
    max-width: 560px;
    font-size: 1rem;
  }
  .hero-title-spacer { height: 16px; }
  .hero-media.hero-logo-media {
    right: -18vw;
    width: 104vw;
    height: 58%;
  }
  .hero-brand-logo { width: min(58vw, 390px); max-height: 40vh; }
  .hero-logo-orbit { width: min(54vw, 350px); }
  .hero-logo-media:before { width: min(64vw, 430px); }
  .hero-logo-media:after { width: min(44vw, 300px); }
  .hero:after { z-index: 3; }

  /* Generic page heroes */
  .page-hero {
    min-height: 620px;
    padding: 140px 0 70px;
  }
  .page-hero:before {
    right: -12%;
    width: 112%;
    opacity: .32;
  }
  .page-hero:after {
    background: linear-gradient(180deg, #000 8%, rgba(0,0,0,.72) 48%, #000 100%);
  }
  .page-hero .display { font-size: clamp(3.2rem, 12vw, 5.6rem); }

  /* Two/three-column content */
  .grid-2,
  .grid-3,
  .architecture,
  .services-grid,
  .pillars,
  .contact-grid,
  .split-image,
  .footer-grid { grid-template-columns: 1fr; }

  .architecture-card {
    min-height: 0;
    padding: 38px 28px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .architecture-card:last-child { border-bottom: 0; }

  .services-grid { gap: 1px; }
  .service-card { min-height: 0; padding: 38px 28px; }

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

  .split-image { min-height: 0; }
  .split-image .image-side {
    min-height: clamp(300px, 48vw, 430px);
    clip-path: polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);
  }
  .split-image .text-side {
    padding: 58px 7vw 70px;
  }

  .contact-grid { gap: 48px; }

  .site-footer { padding: 62px 0 30px; }
  .footer-grid { gap: 34px; align-items: start; }
  .footer-contact { text-align: left; }
  .footer-links { gap: 18px 24px; }
  .footer-bottom { gap: 12px; margin-top: 46px; }

  /* About profile */
  .about-profile-spread {
    display: block;
    min-height: 0;
  }
  .about-profile-copy {
    padding: 105px 7vw 58px;
  }
  .about-profile-title {
    font-size: clamp(3rem, 12vw, 5.6rem);
    line-height: .9;
    max-width: 680px;
  }
  .about-profile-tag {
    margin-bottom: 48px;
    max-width: 600px;
  }
  .about-profile-columns {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 680px;
    font-size: clamp(1.08rem, 2.5vw, 1.22rem);
  }
  .about-profile-columns p { margin-bottom: 28px; }
  .about-profile-image {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: min(58vw, 480px);
    min-height: 300px;
    clip-path: polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);
  }

  /* Platform */
  .platform-intro {
    min-height: 820px;
    padding: 120px 7vw 70px;
    align-items: flex-start;
  }
  .platform-intro-copy {
    width: min(100%, 680px);
    padding-top: 25px;
  }
  .platform-title {
    font-size: clamp(2.9rem, 10vw, 5rem);
  }
  .platform-subtitle { margin-bottom: 30px; }
  .platform-paragraph { font-size: 1.05rem; }
  .platform-construction {
    right: -15%;
    width: 110%;
    height: 52%;
    top: auto;
    bottom: 0;
    clip-path: polygon(28% 0,100% 0,100% 100%,0 100%,28% 50%,28% 50%);
  }
  .platform-architecture {
    padding: 76px 0 90px;
    background-size: auto 100%;
    background-position: center;
  }
  .platform-container { width: min(88vw, 760px); }
  .platform-heading { font-size: clamp(2.8rem, 9vw, 4.8rem); }
  .platform-lead { margin-bottom: 40px; }
  .division-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: 24px;
    row-gap: 48px;
  }
  .division-card {
    min-height: 0;
    padding: 0 6px 12px;
  }
  .division-card:nth-child(5) { grid-column: auto; }
  .division-card img {
    width: 96px;
    height: 82px;
    object-fit: contain;
  }
  .division-card h3 {
    font-size: 1.15rem;
    line-height: 1.1;
  }
  .division-card p { font-size: .98rem; }
  .division-hover-detail {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 320px;
    margin: 12px auto 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    font-size: .98rem;
  }
  .division-hover-detail:before { display: none; }
  .division-hover-label { margin-bottom: 2px; }

  /* Lifecycle: the wheel becomes a compact visual followed by readable steps. */
  .lifecycle-section { padding: 58px 0 80px; }
  .lc-wrap { width: min(88vw, 760px); }
  .lc-stage {
    aspect-ratio: auto;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .lc-wheel {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 500px);
    margin: 0 auto 26px;
  }
  .lc-label {
    position: static;
    width: auto;
    text-align: left !important;
    border-top: 1px solid var(--line);
    padding: 17px 0;
  }
  .lc-label h3 { font-size: 1.05em; }
  .lc-label p { font-size: 1em; line-height: 1.4; }
  .lc-pop {
    width: min(19em, calc(100% - 16px));
  }

  /* At-a-glance / pillars */
  .glance-card { min-height: 225px; }
  .glance-card p { max-width: calc(100% - var(--shape-w)); }
  .pillar {
    min-height: 0;
    padding: 40px 28px 150px;
  }
  .pillar-img { height: 200px; }

  /* Operating system */
  .os-system { padding: 68px 0 80px; }
  .os-phases { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .os-phase {
    min-height: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 16px;
  }
  .os-name { font-size: .88rem; }
  .os-panels { grid-template-columns: 1fr; }
}

/* ------------------------------ PHONE ------------------------------- */
@media (max-width: 600px) {
  .container { width: 88vw; }
  .section { padding: 66px 0; }
  .sc-label { font-size: 9px; letter-spacing: .2em; }

  .site-header { padding: 15px 6vw; }
  .header-logo { width: 98px; }
  .nav { top: calc(100% + 8px); right: 6vw; width: min(280px, 88vw); }
  .nav a { font-size: 10px; padding: 13px 2px; }

  .hero {
    min-height: 790px;
  }
  .hero-inner {
    width: 88vw;
    padding-top: 100px;
  }
  .hero-copy .lead {
    font-size: 1.24rem;
    line-height: 1.28;
    max-width: 95%;
  }
  .hero-copy .body-copy {
    font-size: .96rem;
    line-height: 1.45;
    max-width: 92%;
  }
  .hero-media.hero-logo-media {
    right: -25vw;
    width: 120vw;
    height: 53%;
  }
  .hero-brand-logo {
    width: 62vw;
    max-height: 34vh;
  }
  .hero-logo-orbit { width: 58vw; }
  .hero-logo-media:before { width: 70vw; }
  .hero-logo-media:after { width: 47vw; }
  .hero:after {
    height: 66%;
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35) 45%, #000 100%);
  }

  .page-hero {
    min-height: 540px;
    padding: 125px 0 58px;
  }
  .page-hero .display { font-size: clamp(2.8rem, 14vw, 4.5rem); }

  .section-head { gap: 15px; margin-bottom: 28px; }
  .section-head h2 {
    font-size: clamp(2.35rem, 11vw, 3.5rem);
    line-height: .92;
  }
  .section-head p { font-size: 1rem; }

  .lead { font-size: 1.18rem; }
  .body-copy { font-size: 1rem; }
  .quote { font-size: clamp(1.9rem, 9vw, 2.8rem); }

  .architecture-card { padding: 32px 0; }
  .architecture-card h3 { font-size: 1.75rem; }
  .service-card { padding: 34px 24px; }
  .service-card h3 { font-size: 1.75rem; }
  .lifecycle { grid-template-columns: 1fr; }

  .split-image .image-side {
    min-height: 270px;
  }
  .split-image .text-side { padding: 48px 6vw 58px; }

  .about-profile-copy {
    padding: 88px 6vw 48px;
  }
  .about-profile-title {
    font-size: clamp(2.8rem, 14vw, 4.7rem);
  }
  .about-profile-tag {
    font-size: 1.08rem;
    margin-bottom: 38px;
  }
  .about-profile-columns {
    font-size: 1.08rem;
    line-height: 1.42;
  }
  .about-profile-image {
    height: 74vw;
    min-height: 250px;
  }

  .platform-intro {
    min-height: 760px;
    padding: 105px 6vw 50px;
  }
  .platform-title {
    font-size: clamp(2.7rem, 12.5vw, 4.1rem);
  }
  .platform-subtitle {
    font-size: 1.05rem;
    margin-bottom: 25px;
  }
  .platform-paragraph {
    font-size: 1rem;
    line-height: 1.48;
  }
  .platform-construction {
    right: -28%;
    width: 125%;
    height: 47%;
  }
  .platform-architecture {
    padding: 64px 0 76px;
  }
  .platform-heading { font-size: clamp(2.55rem, 12vw, 4rem); }
  .platform-lead { font-size: 1rem; margin-bottom: 34px; }
  .division-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .division-card {
    max-width: 330px;
    width: 100%;
    margin: 0 auto;
  }
  .division-card img { width: 92px; height: 78px; }
  .division-card h3 { font-size: 1.12rem; }
  .division-card p { font-size: .96rem; }
  .division-hover-detail {
    max-width: 100%;
    padding: 15px 16px;
    font-size: .96rem;
  }

  .commercial-head {
    margin-inline: 0;
    margin-bottom: 38px;
  }
  .commercial-head h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); }

  /* Services comparison table: turn each row into a readable card.
     This removes the need for sideways scrolling on phones. */
  .commercial-table-wrap {
    padding-inline: 0;
    overflow: visible;
  }
  .commercial-table.is-interactive {
    min-width: 0;
    width: 100%;
    display: block;
    background: transparent;
  }
  .commercial-table.is-interactive thead { display: none; }
  .commercial-table.is-interactive tbody,
  .commercial-table.is-interactive tr,
  .commercial-table.is-interactive td {
    display: block;
    width: 100%;
  }
  .commercial-table.is-interactive tbody tr {
    margin-bottom: 14px;
    background: #000;
    border: 1px solid rgba(255,255,255,.25);
  }
  .commercial-table.is-interactive td {
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
    padding: 15px 17px;
    white-space: normal;
  }
  .commercial-table.is-interactive td:last-child { border-bottom: 0 !important; }
  .commercial-table.is-interactive td:first-child {
    opacity: 1;
    transform: none;
    clip-path: none;
    padding: 17px 40px 14px 17px;
    background: #0b1628;
    color: var(--gold);
    font-size: 1.02rem;
    font-weight: 700;
  }
  .commercial-table.is-interactive td:first-child:before {
    transform: scaleY(1);
  }
  .commercial-table.is-interactive td:first-child:after {
    right: 15px;
    opacity: 1;
    transform: translate(0,-50%);
  }
  .commercial-table.is-interactive td:nth-child(2),
  .commercial-table.is-interactive td:nth-child(3) {
    min-height: 0;
    background: #000;
  }
  .commercial-table.is-interactive td:nth-child(2)::before {
    content: "Primary activity";
  }
  .commercial-table.is-interactive td:nth-child(3)::before {
    content: "How value is earned";
  }
  .commercial-table.is-interactive td:nth-child(2)::before,
  .commercial-table.is-interactive td:nth-child(3)::before {
    display: block;
    margin-bottom: 7px;
    color: var(--gold);
    font: 9px/1.2 Helv, Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .commercial-table.is-interactive .cell-roll {
    opacity: 1;
    transform: none;
    clip-path: none;
    display: block;
    font-size: .98rem;
    line-height: 1.4;
  }

  .lifecycle-section { padding: 48px 0 66px; }
  .lc-wrap { width: 88vw; }
  .lc-wheel { width: min(100%, 390px); }
  .lc-label { padding: 15px 0; }
  .lc-label h3 { font-size: 1rem; }
  .lc-label p { font-size: .96rem; }

  .glance-card {
    min-height: 205px;
    padding: 30px 24px;
  }
  .glance-card p {
    max-width: calc(100% - var(--shape-w));
    font-size: .96rem;
  }
  .glance-card .number { font-size: .9rem; }
  .glance-shape { right: 22px; top: 22px; bottom: 22px; }

  .pillar { padding: 34px 24px 140px; }
  .pillar h3 { font-size: 1.72rem; }
  .pillar p { font-size: .98rem; }
  .pillar-img { height: 185px; }

  .os-system { padding: 58px 0 68px; }
  .os-intro { font-size: 1rem; }
  .os-phases { grid-template-columns: 1fr; gap: 1px; }
  .os-phase { padding: 15px 14px; gap: 12px; }
  .os-name { font-size: .9rem; }
  .os-panel { padding: 24px 20px 26px; }
  .os-panel li { font-size: .96rem; }

  .footer-logo { width: 180px; }
  .footer-links { gap: 15px 20px; }
  .footer-bottom { font-size: 8px; }
  .corner-mark { right: 18px; bottom: 18px; width: 42px; }
}

/* Very narrow devices */
@media (max-width: 380px) {
  .hero { min-height: 745px; }
  .hero-inner { padding-top: 92px; }
  .hero-media.hero-logo-media { height: 49%; }
  .hero-brand-logo { width: 66vw; }
  .hero-copy .lead { font-size: 1.16rem; }
  .platform-intro { min-height: 730px; }
  .about-profile-title { font-size: 2.65rem; }
  .section-head h2 { font-size: 2.25rem; }
  .quote { font-size: 1.8rem; }
}