/* ============================================================
   SONJEO GLOBAL — Enhancements: added content bands, stock
   photography layer, and motion. Loaded LAST; uses the light
   tokens already in scope.
   ============================================================ */

/* ---- stock photo layer over the schematic fallback ---- */
/* ---- imagery: blended into the page at rest, vivid + interactive on hover ---- */
.vmedia { cursor: pointer; }
.vframe .vphoto, .vframe .vimg {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.5) contrast(0.98) brightness(1.06);
  transition: filter .7s var(--ease), transform 1.1s var(--ease);
}
.vframe .vimg { z-index: 1; }
/* soft brand tint, not a dark block */
.vframe .tone {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(160deg, rgba(42,75,192,0.18), rgba(20,20,28,0.05) 60%);
  mix-blend-mode: multiply; transition: opacity .7s var(--ease);
}
/* stronger edge feather so the image dissolves into the page (not stuck on top) */
.vframe .vphoto, .vframe .vimg, .vframe .tone {
  -webkit-mask-image: radial-gradient(150% 142% at 50% 42%, #000 56%, transparent 100%);
          mask-image: radial-gradient(150% 142% at 50% 42%, #000 56%, transparent 100%);
}
.vframe::after { display: none; }
.vframe .corner, .vframe .vlive { display: none !important; }

/* hover: reveal full-colour, sharp image + lift the duotone */
.vmedia:hover .vphoto { filter: grayscale(0) contrast(1.04) brightness(1.03); transform: scale(1.03); }
.vmedia:hover .tone { opacity: 0; }

/* hover caption + call-to-action */
.vframe .vhover {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px 24px; color: #fff;
  background: linear-gradient(180deg, rgba(16,16,22,0) 0%, rgba(16,16,22,0.55) 100%);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.vmedia:hover .vhover { opacity: 1; transform: none; }
.vhover .place { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
.vhover .go { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lt); display: inline-flex; align-items: center; gap: 9px; }
.vhover .aw { transition: transform .4s var(--ease); }
.vmedia:hover .vhover .aw { transform: translateX(5px); }
/* full clickable cover */
.vframe .vcover { position: absolute; inset: 0; z-index: 6; display: block; }

/* scroll progress bar */
.scrollbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--gold); z-index: 40; transition: width .08s linear;
}

/* ============================================================
   MARQUEE — continuous motion strip
   ============================================================ */
.marquee {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--border);
  background: var(--void);
  padding-block: clamp(16px, 2.2vw, 26px);
}
.marquee .mtrack {
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee:hover .mtrack { animation-play-state: paused; }
.marquee .mtrack span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.8rem); letter-spacing: -0.01em;
  color: var(--heading); padding: 0 26px; display: inline-block;
}
.marquee .mtrack span.sep { color: var(--gold); font-family: var(--font-sans); font-weight: 400; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .mtrack { animation: none; } }

/* ============================================================
   CONTEXT band
   ============================================================ */
.ctx .ctx-lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-h2); color: var(--heading);
  max-width: 22ch; margin: 22px 0 0; line-height: 1.12;
}
.ctx .ctx-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: 52px; background: var(--border);
  border: 1px solid var(--border);
}
.ctx .ctx-split > div { background: var(--surface); padding: 38px clamp(24px,3vw,46px); }
.ctx .frag { background: var(--surface); }
.ctx .reso { background: var(--surface); }
.ctx .ctx-split h3 {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 14px;
}
.ctx .frag h3 { color: #B0492F; }
.ctx .reso h3 { color: var(--gold); }
.ctx .ctx-split p { color: var(--body); margin: 0; font-size: 1rem; line-height: 1.62; }

/* ============================================================
   PILLARS — The Model
   ============================================================ */
.pillars .phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pillars .pintro {
  font-family: var(--font-display); font-weight: 700; color: var(--heading);
  font-size: var(--text-h2); max-width: 18ch; margin: 18px 0 0;
}
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.mcard {
  background: none; border: none; border-top: 1px solid var(--border);
  border-radius: 0; padding: 28px 30px 0 0;
}
.mcard .mn { font-family: var(--font-mono); color: var(--gold); font-size: 0.9rem; letter-spacing: 0.1em; }
.mcard h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); margin: 14px 0 14px; color: var(--heading); }
.mcard p { color: var(--body); font-size: 0.97rem; margin: 0; line-height: 1.62; }

/* ============================================================
   STATS — count-up
   ============================================================ */
.statbar { border-block: 1px solid var(--border); }
.statbar .srow { display: grid; grid-template-columns: repeat(5, 1fr); }
.statbar .stat { padding: 52px 20px; text-align: center; border-left: 1px solid var(--border); }
.statbar .stat:first-child { border-left: none; }
.statbar .stat b {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-h2);
  color: var(--heading); display: block; letter-spacing: 0.01em;
}
.statbar .stat b .pre, .statbar .stat b .suf { color: var(--gold); }
.statbar .stat span {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-top: 12px; display: block;
}

/* ============================================================
   FULL-BLEED parallax band (dramatic dark moment)
   ============================================================ */
.fullband {
  position: relative; isolation: isolate;
  padding: clamp(110px, 18vw, 220px) var(--gutter);
  background-color: #16161A;
  background-size: cover; background-position: center;
  background-attachment: fixed;
}
.fullband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(15,15,19,0.86) 0%, rgba(15,15,19,0.62) 55%, rgba(15,15,19,0.40) 100%);
}
.fullband .fb-inner { max-width: var(--max-width); margin: 0 auto; }
.fullband .label { color: var(--gold-lt); }
.fullband .label::before { background: var(--gold-lt); }
.fullband h2 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: var(--text-display); max-width: 16ch; margin: 18px 0 0; line-height: 1.02;
}
.fullband p { color: rgba(255,255,255,0.78); max-width: 52ch; margin: 22px 0 0; font-size: var(--text-body-lg); line-height: 1.6; }
.fullband .fb-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.16); max-width: 760px; }
.fullband .fb-stats .m { padding: 18px 26px 0 0; margin-right: 26px; border-right: 1px solid rgba(255,255,255,0.16); }
.fullband .fb-stats .m:last-child { border-right: none; }
.fullband .fb-stats b { display: block; font-family: var(--font-mono); font-size: 1.4rem; color: #fff; font-weight: 700; }
.fullband .fb-stats span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 6px; display: block; }
@supports (-webkit-touch-callout: none) { .fullband { background-attachment: scroll; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ctx .ctx-split, .pgrid { grid-template-columns: 1fr; }
  .statbar .srow { grid-template-columns: repeat(2, 1fr); }
  .statbar .stat:nth-child(odd) { border-left: none; }
}
@media (max-width: 560px) {
  .statbar .srow { grid-template-columns: 1fr; }
  .statbar .stat { border-left: none; border-top: 1px solid var(--border); }
  .statbar .stat:first-child { border-top: none; }
}

/* ============================================================
   ELEVATION PASS — restraint, whitespace, editorial weight
   ============================================================ */
/* more air around each vertical */
.vsection { padding-block: clamp(96px, 13vw, 184px); }
.vrow { gap: clamp(40px, 6vw, 96px); align-items: center; }

/* minimal frame: feathered image melts into the page, no hard edges */
.vframe {
  aspect-ratio: 4 / 5;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* quieter, more confident type */
.vcontent .label { margin-bottom: 26px; color: var(--muted); }
.vcontent .label::before { background: var(--gold); }
.vtitle { font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.0; }
.vdesc { margin-top: 24px; font-size: 1.06rem; color: var(--body); max-width: 42ch; }
.vspecs { margin-top: 38px; }
.vlink { margin-top: 36px; }

/* hero: a touch more restraint */
.hero.site h1 { font-size: clamp(2.8rem, 8vw, 7rem); line-height: 0.98; letter-spacing: -0.02em; }
.hero.site .sub { font-size: 1.12rem; line-height: 1.7; color: var(--body); max-width: 540px; }
.hero.site { min-height: 100vh; min-height: 100svh; }
/* powerful animated accent + kinetic backdrop */
.hero.site h1 .accent {
  background: linear-gradient(100deg, var(--gold) 0%, #8FB0FF 42%, var(--gold) 60%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 220% 100%; animation: goldshimmer 7s linear infinite;
}
@keyframes goldshimmer { to { background-position: 220% 0; } }
.hero.site::before {
  content: ""; position: absolute; inset: -12% -12% auto -12%; height: 130%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 46% at 28% 32%, rgba(42,75,192,0.13), transparent 62%),
              radial-gradient(40% 40% at 78% 52%, rgba(27,33,80,0.10), transparent 62%);
  animation: herodrift 20s ease-in-out infinite alternate;
}
@keyframes herodrift { to { transform: translate3d(4%, -3%, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .hero.site h1 .accent { animation: none; } .hero.site::before { animation: none; } }

/* section labels everywhere: smaller, airier, muted */
.label { color: var(--muted); }

/* per-vertical capabilities info row (home) */
.vmore { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vmore li { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body); border: 1px solid var(--border); border-radius: 999px; padding: 8px 13px; transition: border-color .2s, color .2s; }
.vmore li:hover { border-color: var(--gold); color: var(--gold); }

/* ---- "The Model" as a dark gravitas band ---- */
.band.ink { background: #131319; }
.band.ink .label { color: var(--gold-lt); }
.band.ink .label::before { background: var(--gold-lt); }
.band.ink .pintro { color: #fff; }
.band.ink .mcard {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.10);
}
.band.ink .mcard:hover { border-color: var(--gold); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.7); }
.band.ink .mcard h3 { color: #fff; }
.band.ink .mcard p { color: rgba(255,255,255,0.66); }
.band.ink .mcard .mn { color: var(--gold-lt); }

@media (max-width: 880px) {
  .vframe { aspect-ratio: 4 / 3; }
}

/* ============================================================
   EVEN VERTICAL RHYTHM — every major section shares one scale
   ============================================================ */
.vsection { padding-block: var(--section-pad); }
.band section.pad { padding-block: var(--section-pad); }
.hero.site { padding-top: clamp(120px, 16vh, 180px); padding-bottom: var(--section-pad); }
.statbar .stat { padding-block: clamp(48px, 7vw, 72px); }

/* ============================================================
   EVEN HERO STATS — equal columns, aligned baselines
   ============================================================ */
.hero.site .metaline {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 780px; margin-top: 44px;
  border-top: 1px solid var(--border); gap: 0;
}
.hero.site .metaline .m {
  min-width: 0; padding: 20px 22px 0 22px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.hero.site .metaline .m:first-child { padding-left: 0; }
.hero.site .metaline .m:last-child { border-right: none; padding-right: 0; }
.hero.site .metaline .m b { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.05; min-height: 1.7rem; display: flex; align-items: center; }
.hero.site .metaline .m span { margin-top: 8px; }
@media (max-width: 620px) {
  .hero.site .metaline { grid-template-columns: 1fr 1fr; }
  .hero.site .metaline .m:nth-child(2) { border-right: none; }
  .hero.site .metaline .m { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
}

/* ============================================================
   INTRO ANIMATION — high-end curtain reveal
   ============================================================ */
#intro {
  position: fixed; inset: 0; z-index: 9999;
  background: #131319; display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
#intro .intro-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#intro .imk { width: 66px; height: 56px; border: 0; opacity: 0; transform: scale(0.55); animation: imk 1.1s var(--ease) forwards; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M3 3 L23 12.5 L3 22 Z' fill='%237FA0FF'/%3E%3Cpath d='M37 14 L17 23.5 L37 33 Z' fill='%23C2CEF5'/%3E%3C/svg%3E") center/contain no-repeat; }
#intro .imk::after { content: none; }
#intro .iwm { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.34em; color: #fff; font-size: 1.02rem; padding-left: 0.34em; opacity: 0; transform: translateY(12px); animation: iwm 1s var(--ease) .5s forwards; }
#intro .iline { width: 0; height: 1px; background: var(--gold); animation: iline 1s var(--ease) .9s forwards; }
#intro .itag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.5); opacity: 0; animation: itag .9s var(--ease) 1.2s forwards; }
@keyframes imk { to { opacity: 1; transform: scale(1); } }
@keyframes imkd { to { transform: scale(1); } }
@keyframes iwm { to { opacity: 1; transform: none; } }
@keyframes iline { to { width: 210px; } }
@keyframes itag { to { opacity: 1; } }
#intro.out { transform: translateY(-101%); transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1); }
#intro.out .intro-inner { opacity: 0; transition: opacity .5s ease; }
body.intro-lock { overflow: hidden; }

/* hero entrance: content stays visible (via .in); only a transform rises,
   so it can never get stranded hidden if the animation is throttled */
@media (prefers-reduced-motion: no-preference) {
  body.entered .hero.site .reveal { animation: heroRise 1s var(--ease) backwards; animation-delay: calc(0.3s + var(--i,0) * 110ms); }
}
@keyframes heroRise { from { transform: translateY(26px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #intro { display: none; }
}

/* ============================================================
   TOUCH + "LIVE" INTERACTIONS & FULL RESPONSIVENESS
   ============================================================ */
/* in-view spotlight: the centred image activates (works without hover) */
.vmedia.inview .vphoto { filter: grayscale(0.2) contrast(1.02) brightness(1.03); transform: scale(1.015); }
.vmedia.inview .tone { opacity: 0; }
.vmedia.inview .vhover { opacity: 1; transform: none; }

/* press feedback (touch + mouse) */
.vmedia:active .vphoto { transform: scale(1.02); transition-duration: .2s; }
.btn:active { transform: translateY(1px); }
.vlink:active { color: var(--gold-lt); }
.vindex a:active, .others a:active { color: var(--gold); }

/* touch devices: no hover, so keep imagery vivid and captions visible */
@media (hover: none) {
  .vframe .vphoto { filter: grayscale(0.12) contrast(1.04) brightness(1.02); }
  .vframe .tone { opacity: 0.4; }
  .vframe .vhover { opacity: 1; transform: none; background: linear-gradient(180deg, rgba(16,16,22,0) 0%, rgba(16,16,22,0.5) 100%); }
  .vmedia.inview .vphoto { filter: grayscale(0) contrast(1.05) brightness(1.02); }
  .fullband { background-attachment: scroll; }
  .vindex a { padding-block: 18px; }            /* larger tap targets */
  .nav .links a, .mobile-menu a { padding-block: 6px; }
}

/* smaller nav CTA button */
.nav .btn { padding: 9px 16px; font-size: 0.64rem; letter-spacing: 0.1em; }

/* smaller nav CTA button — keep proportionate on small screens */
.nav .row .btn { white-space: nowrap; }
.vindex a, .vlink, .nav .links a { min-height: 44px; display: inline-flex; align-items: center; }
.menu-btn { min-height: 44px; min-width: 44px; }

/* ---- responsive scaling across all sizes ---- */
@media (max-width: 1024px) {
  .vrow { gap: clamp(28px, 5vw, 56px); }
}
@media (max-width: 760px) {
  .hero.site h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .hero.site .sub { font-size: 1.04rem; }
  .vtitle { font-size: clamp(2rem, 8vw, 2.8rem); }
  .pintro { font-size: clamp(1.4rem, 6vw, 2rem); }
}
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .hero.site .metaline .m b { font-size: 1.4rem; }
  .vindex .track { gap: 2px; }
  .statbar .stat { padding-block: 30px; }
}
/* guard against any horizontal overflow on small screens */
img, .vframe, .phero { max-width: 100%; }


/* ============================================================
   CLEARER "ENTER THE VERTICAL" AFFORDANCE + small-screen polish
   ============================================================ */
.vframe { cursor: pointer; }
.vmedia:hover .vframe { border-color: var(--gold); }
.vmedia:hover .vframe, .vmedia:focus-within .vframe { transform: translateY(-4px); }
.vframe { transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
/* the explore bar is ALWAYS visible (every device), not hover-gated */
.vframe .vhover { opacity: 1 !important; transform: none !important;
  background: linear-gradient(180deg, rgba(8,10,16,0) 0%, rgba(8,10,16,0.20) 45%, rgba(8,10,16,0.72) 100%);
  padding: 46px 16px 16px; }
/* turn "Explore →" into an unmistakable button */
.vhover .go { background: var(--gold); color: #fff; padding: 10px 16px; border-radius: 5px;
  font-weight: 700; letter-spacing: 0.1em; box-shadow: 0 8px 22px -10px rgba(0,0,0,0.7);
  transition: background .25s var(--ease), gap .25s var(--ease); }
.vmedia:hover .vhover .go, .vmedia.inview .vhover .go { background: var(--gold-lt); gap: 12px; }
.vhover .place { align-self: center; }
@media (max-width: 480px) {
  .vframe .vhover { padding: 38px 12px 12px; }
  .vhover .go { padding: 9px 13px; font-size: 0.6rem; }
  .vhover .place { font-size: 0.55rem; letter-spacing: 0.16em; }
}