:root {
  --ink: #07080c;
  --ink-2: #0e1016;
  --ink-3: #161922;
  --line: rgba(255, 255, 255, 0.08);
  --orange: #00d4c8;
  --orange-2: #2ee6db;
  --orange-d: #00a89e;
  --paper: #f4efe7;
  --paper-2: #ebe4d8;
  --white: #f7f5f1;
  --mute: #9a958c;
  --ok: #3dd68c;
  --font: "Manrope", sans-serif;
  --display: "Space Grotesk", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header: 84px;
}

*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: 0; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: #fff; }

.wrap { width: min(1240px, calc(100% - 2.5rem)); margin: 0 auto; }
.wrap-wide { width: min(1400px, calc(100% - 2.5rem)); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ===== SHOWREEL ===== */
.reel {
  position: fixed; inset: 0; z-index: 360;
  background: #050505; overflow: hidden;
}
.reel.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s var(--ease), visibility .8s;
}
.reel-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.reel-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.reel-black { position: absolute; inset: 0; background: #050505; }
.reel-photo {
  position: absolute; inset: -4%;
  background: #000 center/cover no-repeat;
  transform: scale(1.06);
  will-change: transform;
}
.reel-slide.is-on .reel-photo[data-motion],
.reel-slide.is-on[data-motion="push"] .reel-photo { animation: reelPush 4.4s linear both; }
.reel-slide.is-on[data-motion="drift"] .reel-photo { animation: reelDrift 4.4s linear both; }
.reel-slide.is-on[data-motion="rise"] .reel-photo { animation: reelRise 4.4s linear both; }
.reel-slide.is-on[data-motion="pan"] .reel-photo { animation: reelPan 4.4s linear both; }
@keyframes reelPush {
  from { transform: scale(1.05); }
  to { transform: scale(1.14); }
}
@keyframes reelDrift {
  from { transform: scale(1.08) translate3d(-1.5%, 0, 0); }
  to { transform: scale(1.14) translate3d(1.5%, 0, 0); }
}
@keyframes reelRise {
  from { transform: scale(1.08) translate3d(0, 2%, 0); }
  to { transform: scale(1.14) translate3d(0, -1.5%, 0); }
}
@keyframes reelPan {
  from { transform: scale(1.1) translate3d(2%, 0, 0); }
  to { transform: scale(1.1) translate3d(-2%, 0, 0); }
}
.reel-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.45) 100%),
    linear-gradient(90deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.3) 52%, rgba(5,5,5,.5) 100%),
    linear-gradient(180deg, rgba(0,212,200,.06), transparent 35%);
}
.reel-center {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.reel-brand-tag {
  margin: 0 0 1.2rem;
  color: var(--orange);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  opacity: 0;
  animation: logoIn .7s var(--ease) .15s forwards;
}
.reel-brand-sub {
  margin: 1.35rem 0 0;
  color: #9a958c;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 600;
  opacity: 0;
  animation: logoIn .7s var(--ease) 1.35s forwards;
}
.reel-icon {
  position: relative;
  width: min(300px, 52vw);
  opacity: 0;
  animation: iconOpen 1.25s var(--ease) .2s forwards;
  filter: drop-shadow(0 0 28px rgba(0,212,200,.28));
}
.reel-icon img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}
.reel-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, rgba(0,212,200,.45) 58%, transparent 70%);
  background-size: 260% 100%;
  background-position: 140% 0;
  mix-blend-mode: screen;
  -webkit-mask-image: url("../assets/logo-icon-clear.png");
  mask-image: url("../assets/logo-icon-clear.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: iconShine 1.7s ease 1.2s forwards;
  pointer-events: none;
}
@keyframes iconOpen {
  from { opacity: 0; transform: scale(.72) rotate(-6deg); }
  70% { opacity: 1; transform: scale(1.04) rotate(0deg); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes iconShine {
  0% { background-position: 140% 0; opacity: 0; }
  12% { opacity: 1; }
  100% { background-position: -40% 0; opacity: 0; }
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.reel-copy {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 8% 10vh;
  max-width: 46rem;
}
.reel-copy small {
  color: var(--orange); letter-spacing: .2em; text-transform: uppercase;
  font-size: .72rem; font-weight: 700;
}
.reel-copy h2 {
  margin: .45rem 0 .5rem;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: -.03em; line-height: 1.08;
  min-height: 2.2em;
}
.reel-copy p { margin: 0; color: #d4cfc6; font-size: 1.05rem; line-height: 1.6; max-width: 34rem; }
.reel-slide.is-on .reel-copy small,
.reel-slide.is-on .reel-copy p,
.reel-slide.is-on .reel-end img,
.reel-slide.is-on .reel-end p,
.reel-slide.is-on .reel-enter {
  animation: logoIn .75s var(--ease) both;
}
.reel-slide.is-on .reel-copy small { animation-delay: .08s; }
.reel-slide.is-on .reel-copy p { animation-delay: 1.15s; }
.reel-slide.is-on .reel-end img { animation-delay: .05s; }
.reel-slide.is-on .reel-end p { animation-delay: 1.05s; }
.reel-slide.is-on .reel-enter { animation-delay: 1.35s; }
.reel-caret {
  display: inline-block;
  width: 2px;
  height: .78em;
  margin-left: .18rem;
  background: var(--orange);
  vertical-align: .02em;
  animation: caretBlink .7s steps(1) infinite;
}
.reel-caret.is-off { opacity: 0; animation: none; }
@keyframes caretBlink {
  50% { opacity: 0; }
}
.reel-end img { width: min(300px, 72vw); margin-bottom: 1.2rem; }
.reel-end h2 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  min-height: 1.3em;
}
.reel-end p { color: #c9c3b8; margin: 0 0 1.4rem; }
.reel-enter {
  opacity: 0;
  min-width: 10rem;
}
.reel-chapters {
  position: absolute; left: 1.4rem; bottom: 1.5rem; z-index: 5;
  display: flex; gap: .55rem; flex-wrap: wrap;
  max-width: calc(100% - 9rem);
}
.reel-chapters span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  border-bottom: 2px solid transparent;
  padding-bottom: .2rem;
  transition: color .35s, border-color .35s;
}
.reel-chapters span.is-on {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.reel-skip {
  position: absolute; right: 1.4rem; bottom: 1.4rem; z-index: 5;
  color: #fff; letter-spacing: .14em; text-transform: uppercase;
  font-size: .72rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.25);
  padding: .55rem 1rem; border-radius: 999px;
  backdrop-filter: blur(8px);
}
.reel-skip:hover { background: #fff; color: #111; }
.reel-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #1a1a1a; z-index: 5;
}
.reel-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange-d), var(--orange), var(--orange-2));
  box-shadow: 0 0 12px rgba(0,212,200,.45);
}
.reel-grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body.reel-on { overflow: hidden; }
body.reel-on .header, body.reel-on .topbar { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .reel-chapters { display: none; }
}

/* ===== LOADER ===== */
.loader {
  position: fixed; inset: 0; z-index: 400;
  background: #050505;
  display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-mark {
  width: 88px; height: 88px; object-fit: contain;
  margin: 0 auto 1rem;
  animation: pulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(0,212,200,.55));
}
.loader-bar { width: 160px; height: 2px; background: #222; margin: 1rem auto 0; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--orange); }
.loader-word { letter-spacing: .4em; font-size: .72rem; font-weight: 700; }

@keyframes pulse {
  50% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(0,212,200,.6)); }
}

/* ===== TOP + HEADER ===== */
.topbar {
  background: #050505;
  border-bottom: 1px solid var(--line);
  font-size: .75rem;
  color: var(--mute);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 1rem; }
.topbar a:hover { color: var(--orange); }

.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(7,8,12,.78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s;
}
.header.is-mega {
  background: rgba(7,8,12,.96);
  border-bottom-color: transparent;
}

.header-row { position: relative; }
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header); gap: 1.5rem;
}
.brand { display: flex; align-items: center; }
.brand img { height: 46px; width: auto; max-width: 210px; display: block; }

.desk-nav {
  display: flex; align-items: stretch; align-self: stretch;
  gap: .15rem; margin: 0; padding: 0;
}
.desk-nav > li {
  list-style: none;
  display: flex; align-items: center;
}
.desk-nav > li > a, .has-mega > button {
  display: flex; align-items: center;
  height: 100%;
  padding: 0 .9rem;
  font-size: .86rem;
  font-weight: 600;
  color: #d8d3cb;
}
.desk-nav > li > a:hover, .has-mega > button:hover,
.has-mega.is-open > button { color: #fff; }
.has-mega { position: static; }
.has-mega > button { gap: .45rem; }
.has-mega > button::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .28s var(--ease);
}
.has-mega.is-open > button::after,
.has-mega:hover > button::after,
.has-mega:focus-within > button::after {
  transform: rotate(225deg) translateY(-1px);
}

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #0a0c12;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
  z-index: 210;
}
.mega::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 28px;
}
.mega::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.has-mega.is-open .mega,
.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.mega-inner {
  display: grid;
  grid-template-columns: 1fr min(280px, 26%);
  gap: 2rem;
  padding: 1.7rem 0 1.5rem;
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 1.6rem;
}
.mega-col h4 {
  margin: 0 0 .7rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
  color: var(--orange);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.mega-col a {
  display: block;
  padding: .48rem .6rem;
  margin: 0 -.6rem;
  border-radius: 10px;
  color: #c9c3b8;
}
.mega-col a b {
  display: block;
  font-size: .9rem; font-weight: 600; color: #f2eee8;
}
.mega-col a span {
  display: block;
  margin-top: .12rem;
  font-size: .75rem; color: var(--mute); line-height: 1.35;
}
.mega-col a:hover {
  background: rgba(255,255,255,.04);
  box-shadow: inset 2px 0 0 var(--orange);
}
.mega-col a:hover b { color: #fff; }
.mega-col a:hover span { color: #c4bfb6; }
.mega-feat {
  display: flex; flex-direction: column;
  background: #10131b;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 1.15rem;
}
.mega-feat img {
  width: 100%; height: 128px; object-fit: cover;
  margin-bottom: .95rem;
}
.mega-feat small, .mega-feat strong, .mega-feat p, .mega-feat .btn {
  margin-left: 1.05rem; margin-right: 1.05rem;
}
.mega-feat small {
  color: var(--orange);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mega-feat strong {
  display: block; margin-top: .35rem;
  font-family: var(--display); font-size: 1.12rem; line-height: 1.25;
}
.mega-feat p {
  margin: .4rem 0 .9rem;
  color: #b7b1a6; font-size: .82rem; line-height: 1.55;
}
.mega-feat .btn { align-self: flex-start; min-height: 40px; font-size: .75rem; }
.mega-foot {
  border-top: 1px solid var(--line);
  background: #08090e;
  padding: .7rem 0;
}
.mega-foot .wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.mega-foot a {
  font-size: .82rem; font-weight: 700; color: #fff;
}
.mega-foot a i { color: var(--orange); margin-left: .25rem; }
.mega-foot a:hover { color: var(--orange); }
.mega-foot span { font-size: .75rem; color: var(--mute); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: 0 1.2rem;
  border-radius: 999px; font-weight: 700; font-size: .82rem;
  letter-spacing: .04em;
  transition: .3s var(--ease);
}
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #2ee6db; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,212,200,.35); }
.btn-ghost { border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { border-color: #fff; background: #fff; color: #111; }
.btn-dark { background: #111; color: #fff; }
.btn-dark:hover { background: var(--orange); }

.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 4; }
.burger span, .burger span::before, .burger span::after {
  position: absolute; left: 10px; width: 24px; height: 2px; background: #fff;
  transition: transform .4s var(--ease), opacity .3s, top .4s var(--ease);
}
.burger span { top: 21px; }
.burger span::before { content: ""; top: -7px; }
.burger span::after { content: ""; top: 7px; }

.mnav-layer {
  position: fixed; inset: 0; z-index: 280;
  visibility: hidden; pointer-events: none;
}
.mnav-layer.is-on { visibility: visible; pointer-events: auto; }
.mnav-dim {
  position: absolute; inset: 0;
  background: rgba(3, 4, 8, .62);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.mnav-layer.is-on .mnav-dim { opacity: 1; }
.mnav {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(422px, 88vw);
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(0,212,200,.08), transparent 22%),
    #08090f;
  border-right: 1px solid var(--line);
  box-shadow: 30px 0 80px rgba(0,0,0,.45);
  transform: translate3d(-104%, 0, 0);
  transition: transform .58s cubic-bezier(.22, 1, .36, 1);
}
.mnav-layer.is-on .mnav { transform: none; }
.mnav::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--orange), transparent 70%);
}
.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; padding: 0 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.mnav-head .brand img { height: 38px; }
.mnav-x {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}
.mnav-x span {
  position: relative;
  width: 16px; height: 16px;
  display: block;
}
.mnav-x span::before,
.mnav-x span::after {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 1.5px;
  background: #fff;
}
.mnav-x span::before { transform: rotate(45deg); }
.mnav-x span::after { transform: rotate(-45deg); }
.mnav-x:hover { border-color: var(--orange); background: rgba(0,212,200,.12); }
.mnav-scroll {
  flex: 1; overflow: auto; padding: 1.1rem 1.15rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}
.mnav-link, .mnav-tog {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: .95rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--display);
  font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em;
  color: #f4f0ea;
  opacity: 0; transform: translateX(-18px);
}
.mnav-layer.is-on .mnav-link,
.mnav-layer.is-on .mnav-tog {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.mnav-layer.is-on .mnav-item:nth-child(1) .mnav-tog { transition-delay: .08s; }
.mnav-layer.is-on .mnav-scroll > .mnav-link:nth-of-type(1) { transition-delay: .14s; }
.mnav-layer.is-on .mnav-scroll > .mnav-link:nth-of-type(2) { transition-delay: .18s; }
.mnav-layer.is-on .mnav-scroll > .mnav-link:nth-of-type(3) { transition-delay: .22s; }
.mnav-layer.is-on .mnav-item:nth-child(5) .mnav-tog { transition-delay: .26s; }
.mnav-layer.is-on .mnav-scroll > .mnav-link:nth-of-type(4) { transition-delay: .3s; }
.mnav-link:hover, .mnav-tog:hover { color: var(--orange); }
.mnav-tog i {
  width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 1.6px solid var(--orange);
  border-bottom: 1.6px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .35s var(--ease);
}
.mnav-item.is-open .mnav-tog i { transform: rotate(225deg); }
.mnav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .48s var(--ease);
}
.mnav-item.is-open .mnav-sub { grid-template-rows: 1fr; }
.mnav-sub > div { overflow: hidden; }
.mnav-sub p {
  margin: 1rem 0 .35rem;
  color: var(--orange);
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.mnav-sub a {
  display: block;
  padding: .42rem 0 .42rem .7rem;
  color: #bdb8af; font-size: .95rem; font-weight: 600;
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(-8px); opacity: 0;
  transition: color .25s, border-color .25s, transform .4s var(--ease), opacity .4s;
}
.mnav-item.is-open .mnav-sub a {
  transform: none; opacity: 1;
}
.mnav-item.is-open .mnav-sub a:nth-child(2) { transition-delay: .04s; }
.mnav-item.is-open .mnav-sub a:nth-child(3) { transition-delay: .07s; }
.mnav-item.is-open .mnav-sub a:nth-child(4) { transition-delay: .1s; }
.mnav-item.is-open .mnav-sub a:nth-child(5) { transition-delay: .13s; }
.mnav-item.is-open .mnav-sub a:nth-child(6) { transition-delay: .16s; }
.mnav-item.is-open .mnav-sub a:nth-child(7) { transition-delay: .19s; }
.mnav-item.is-open .mnav-sub a:nth-child(8) { transition-delay: .22s; }
.mnav-item.is-open .mnav-sub a:nth-child(9) { transition-delay: .25s; }
.mnav-item.is-open .mnav-sub a:nth-child(10) { transition-delay: .28s; }
.mnav-item.is-open .mnav-sub a:nth-child(11) { transition-delay: .31s; }
.mnav-item.is-open .mnav-sub a:nth-child(12) { transition-delay: .34s; }
.mnav-item.is-open .mnav-sub a:nth-child(13) { transition-delay: .37s; }
.mnav-sub a:hover { color: #fff; border-left-color: var(--orange); padding-left: .9rem; }
.mnav-all { color: #fff !important; margin-top: .4rem; }
.mnav-foot {
  padding: 1.1rem 1.25rem 1.35rem;
  border-top: 1px solid var(--line);
  display: grid; gap: .65rem;
}
.mnav-foot .btn { width: 100%; }
.mnav-foot span { color: var(--mute); font-size: .75rem; letter-spacing: .06em; }
body.mnav-on { overflow: hidden; }
body.mnav-on .header,
body.mnav-on .topbar { visibility: hidden; pointer-events: none; }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: calc(100vh - 36px);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background: #000 center/cover no-repeat;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,8,12,.88) 0%, rgba(7,8,12,.55) 46%, rgba(7,8,12,.28) 100%),
    linear-gradient(180deg, rgba(7,8,12,.16), rgba(7,8,12,.72));
}
.hero-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(0,212,200,.07) 58%, transparent 72%);
  background-size: 240% 100%;
  animation: shine 14s linear infinite;
}
#particles { position: absolute; inset: 0; z-index: 1; }
@keyframes shine {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

.hero-mark {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  width: min(560px, 70vw);
  transform: translate(-50%, -50%);
  opacity: 0.22;
  pointer-events: none;
  animation: markFloat 8s ease-in-out infinite;
}
.hero-mark img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}
.hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.75) 50%, rgba(0,212,200,.4) 58%, transparent 70%);
  background-size: 260% 100%;
  mix-blend-mode: screen;
  -webkit-mask-image: url("../assets/logo-icon-clear.png");
  mask-image: url("../assets/logo-icon-clear.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: markShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes markFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 16px)); }
}
@keyframes markShine {
  0%, 18% { background-position: 140% 0; opacity: 0; }
  28% { opacity: 1; }
  55%, 100% { background-position: -40% 0; opacity: 0; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 5.2rem 0 2.8rem;
  min-height: calc(100vh - 220px);
}
.hero-content { position: relative; z-index: 2; }
.h-line { display: block; overflow: hidden; }
.h-line > * , .h-line { animation: lineIn 0.9s var(--ease) both; }
.h-line:nth-child(2) { animation-delay: .12s; }
@keyframes lineIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--orange); font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.2rem;
}
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(0,212,200,.5); animation: ping 1.8s infinite; }
@keyframes ping {
  70% { box-shadow: 0 0 0 10px transparent; }
}

.hero h1 {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.7rem, 6.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  display: inline-block;
  background: linear-gradient(105deg, var(--orange), var(--orange-2), #ffd19a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-lead { max-width: 38rem; color: #c9c3b8; font-size: 1.12rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 2.2rem; }
.hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-pills span {
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  padding: .4rem .75rem; border-radius: 999px; font-size: .8rem; color: #d8d3cb;
}

.metrics-band {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 12% -10%, rgba(0,212,200,.14), transparent 52%),
    radial-gradient(ellipse 55% 80% at 92% 120%, rgba(0,212,200,.07), transparent 50%),
    linear-gradient(180deg, #090a0f 0%, #0c0e14 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metrics-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  pointer-events: none;
}
.metrics-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 2.15rem 0 2.3rem;
}
.metric {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.45rem 1.3rem 1.35rem;
  min-height: 236px;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.metric.is-in { animation: metricIn .65s var(--ease); }
.metric:nth-child(2).is-in { animation-delay: .08s; }
.metric:nth-child(3).is-in { animation-delay: .16s; }
.metric:nth-child(4).is-in { animation-delay: .24s; }
@keyframes metricIn {
  from { opacity: .35; }
  to { opacity: 1; }
}
.metric::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: .7;
}
.metric::after {
  content: "";
  position: absolute; right: -28px; bottom: -36px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,200,.16), transparent 70%);
  pointer-events: none;
}
.metric:hover {
  transform: translateY(-7px);
  border-color: rgba(0,212,200,.42);
  box-shadow: 0 22px 48px rgba(0,0,0,.38), 0 0 0 1px rgba(0,212,200,.12);
}
.metric-idx {
  position: absolute; top: 1.15rem; right: 1.15rem;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; color: rgba(255,255,255,.22);
}
.metric-ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 14px;
  color: var(--orange);
  background: rgba(0,212,200,.1);
  border: 1px solid rgba(0,212,200,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(0,212,200,.08);
}
.metric-ico svg { width: 24px; height: 24px; }
.metric.is-in .metric-ico { animation: icoPulse 2.8s var(--ease) .4s both; }
@keyframes icoPulse {
  0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(0,212,200,.35); }
  55% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 10px transparent; }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(0,212,200,.08); }
}
.metric b {
  display: flex; align-items: baseline; gap: .08em;
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(2.45rem, 3.8vw, 3.35rem);
  letter-spacing: -.045em;
  line-height: .95;
}
.metric b i {
  font-style: normal;
  color: var(--orange);
  font-size: .72em;
}
.metric strong {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.metric p {
  margin: 0;
  color: var(--mute);
  font-size: .84rem;
  line-height: 1.55;
  max-width: 22ch;
}

/* trust + proof (ref: official IT rails) */
.trust-sec {
  padding: 1.15rem 0;
  background: #08090e;
  border-bottom: 1px solid var(--line);
}
.trust-row {
  display: flex; align-items: center; gap: 1.6rem;
}
.trust-row > p {
  margin: 0;
  flex: 0 0 auto;
  max-width: 8.5rem;
  color: var(--orange);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.trust-logos {
  display: flex; flex-wrap: wrap; gap: .55rem; flex: 1;
}
.trust-logos span {
  min-width: 92px;
  text-align: center;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  font-family: var(--display); font-weight: 700;
  letter-spacing: .04em; color: #cfc8bc;
  font-size: .88rem;
}
.proof-rail {
  padding: 1rem 0;
  background: #0b0c11;
  border-bottom: 1px solid var(--line);
}
.proof-track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .85rem 1.8rem;
}
.proof-track span { color: #b7b1a6; font-size: .9rem; }
.proof-track b { color: #fff; font-family: var(--display); margin-right: .35rem; }

/* Intersection map — 360XCEL mastery map */
.imap-sec { background: var(--ink); }
.imap-head {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 2rem; align-items: end; margin-bottom: 1.2rem;
}
.imap-head .h2 { color: #fff; }
.imap-head p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.65; max-width: 34rem; justify-self: end; }
.imap {
  position: relative;
  height: min(720px, 88vw);
  margin: 0 auto;
}
.imap-track {
  position: absolute; left: 0; right: 0; top: 50%;
  z-index: 1;
  display: flex; align-items: center; gap: .7rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.imap-lab {
  flex: 0 0 auto;
  font-weight: 700; font-size: .95rem; color: #fff;
  line-height: 1;
}
.imap-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); flex: 0 0 auto;
}
.imap-dash {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--line);
}
.imap-rings {
  position: absolute; left: 50%; top: 50%;
  width: min(640px, 68%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.imap-ring {
  position: absolute; left: 50%; top: 50%;
  border: 1px dashed var(--line);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}
.imap-ring-out { width: 100%; }
.imap-ring-mid { width: 80%; }
.imap-ring-in { width: 58%; }
.imap-mastery {
  position: absolute; left: 50%; top: 21%;
  transform: translateX(-50%);
  font-family: var(--display); font-weight: 700;
  font-size: .95rem; line-height: 1.15; text-align: center; color: #fff;
  z-index: 2; pointer-events: none;
}
.imap-media {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 220px; height: 150px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(0,212,200,.4);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  transform: translate(-20px, -110%) scale(.92);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.imap-media.is-on { opacity: 1; transform: translate(-20px, -110%) scale(1); }
.imap-media img { width: 100%; height: 100%; object-fit: cover; }
.imap-pill {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.imap-float {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 42px;
  padding: 0 1.05rem;
  border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--line);
  animation: imapFloat 5.6s ease-in-out infinite;
}
.imap-pill.is-on .imap-float {
  background: var(--ink-2); color: #fff;
  border-color: rgba(0,212,200,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.imap-pill.is-ghost .imap-float {
  background: transparent; color: rgba(255,255,255,.45);
}
.imap-pill.is-ghost:hover .imap-float,
.imap-pill.is-on:hover .imap-float {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--orange); color: #fff;
}
.imap-pill.is-ghost:hover .imap-float { background: var(--ink-2); }
.imap-ico {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
}
.imap-ico.is-round { border-radius: 50%; }
.imap-ico.is-tri {
  width: 0; height: 0; background: none !important;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 10px solid #22c55e;
}
.imap-ico.is-heart { border-radius: 50%; }
@keyframes imapFloat {
  50% { transform: translateY(-7px); }
}

/* ===== SECTIONS ===== */
.sec { padding: clamp(4.2rem, 8vw, 7rem) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.4rem; }
.eyebrow { margin: 0 0 .55rem; color: var(--orange); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.03em; line-height: 1.08; }
.lead { color: var(--mute); line-height: 1.7; max-width: 38rem; }

.light { background: var(--paper); color: #16140f; }
.light .lead, .light p { color: #5b564e; }
.light .eyebrow { color: var(--orange-d); }
.light .h2 { color: #16140f; }

/* marquee — full-width seamless infinite (pixel-exact loop) */
.marquee {
  width: 100%;
  overflow: hidden;
  padding: 1.05rem 0;
  background: #0a0c12;
  border-bottom: 1px solid var(--line);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.marquee.is-ready .marquee-track {
  animation: marqueRun var(--marq-dur, 24s) linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: .75rem;
  padding-right: .75rem;
}
.marquee-group span {
  display: inline-flex; align-items: center; gap: .6rem;
  white-space: nowrap;
  font-family: var(--display); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  padding: .52rem 1.05rem .52rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.marquee-group span svg {
  width: 16px; height: 16px;
  color: var(--orange);
  flex: 0 0 auto;
}
@keyframes marqueRun {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--marq, 0px) * -1), 0, 0); }
}

/* Cuberto-style services */
.cub-svcs { display: grid; }
.cub-svc {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cub-svc:first-child { border-top: 1px solid var(--line); }
.cub-svc small {
  display: block; color: var(--orange);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; margin-bottom: .45rem;
}
.cub-svc h3 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 2.85rem);
  letter-spacing: -.03em;
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.cub-svc p { margin: 0; max-width: 38rem; color: var(--mute); line-height: 1.6; }
.cub-svc:hover h3 { transform: translateX(14px); color: var(--orange); }
.cub-orb {
  display: grid; place-items: center; text-align: center;
  border-radius: 50%;
  background: var(--orange); color: #fff;
  font-family: var(--display); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform .2s var(--ease), background .3s;
  will-change: transform;
}
.cub-orb-sm { width: 96px; height: 96px; font-size: .72rem; }
.cub-svc:hover .cub-orb-sm { background: #2ee6db; }

/* Cuberto-style selected work */
.cub-work { position: relative; }
.cub-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
}
.cub-row:first-of-type { border-top: 1px solid var(--line); }
.cub-row small { color: var(--orange); font-family: var(--display); font-weight: 700; }
.cub-row h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.2vw, 2.5rem);
  letter-spacing: -.03em;
  transition: transform .45s var(--ease), color .45s var(--ease);
}
.cub-row span { color: var(--mute); font-size: .88rem; }
.cub-row:hover h3 { transform: translateX(16px); color: var(--orange); }
.cub-preview {
  position: fixed; top: 0; left: 0; z-index: 190;
  width: 240px; height: 240px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  border: 3px solid rgba(0,212,200,.45);
}
.cub-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cub-preview img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ — Cuberto: big title, hairline dividers, + rotate, elastic hover */
.faq-sec { background: #000; color: #fff; }
.faq-title {
  margin: 0 0 clamp(2.5rem, 7vw, 6.5rem);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.6rem, 10vw, 7.2rem);
  letter-spacing: -.02em; line-height: 1;
}
.faq { display: block; }
.faq-line {
  position: relative;
  height: 1px;
  color: rgba(255,255,255,.2);
  z-index: 2;
}
.faq-line svg {
  position: absolute; left: 0; right: 0; top: -99px;
  width: 100%; height: 200px;
  pointer-events: none;
}
.faq-line path {
  fill: none; stroke: currentColor; stroke-width: 1;
}
.faq-item { position: relative; padding: 2.4rem 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.6rem;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.2; letter-spacing: .02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  position: relative;
  flex: 0 0 auto;
  width: 1.35rem; height: 1.35rem;
  color: #fff;
  transition: transform .5s, color .4s;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.faq-item summary i::before { top: calc(50% - 1px); left: 0; right: 0; height: 2px; }
.faq-item summary i::after { left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; }
.faq-item[open] summary i { color: var(--orange); transform: rotate(135deg); }
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s ease-out, opacity .45s ease-out;
}
.faq-item[open] .faq-content { grid-template-rows: 1fr; opacity: 1; }
.faq-text { overflow: hidden; }
.faq-text p {
  margin: 0;
  padding-top: 2.4rem;
  color: rgba(255,255,255,.7);
  font-size: 1.05rem; line-height: 1.55;
  max-width: 46rem;
}

/* Have an idea */
.cub-idea {
  position: relative; overflow: hidden;
  padding: 5.5rem 0 5.8rem;
  background:
    radial-gradient(ellipse 70% 80% at 80% 20%, rgba(0,212,200,.18), transparent 50%),
    #08090e;
  border-top: 1px solid var(--line);
}
.cub-idea-row {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.cub-idea h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 6.4rem);
  letter-spacing: -.045em; line-height: .95;
}
.cub-orb-lg {
  width: 180px; height: 180px; flex: 0 0 auto;
  font-size: .95rem; line-height: 1.25;
  box-shadow: 0 0 0 0 rgba(0,212,200,.4);
  animation: orbPulse 2.8s var(--ease) infinite;
}
@keyframes orbPulse {
  50% { box-shadow: 0 0 0 18px transparent; }
}

/* custom cursor */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 500;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.cursor {
  width: 8px; height: 8px; background: var(--orange);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(0,212,200,.7);
  transition: width .25s, height .25s, background .25s, border-color .25s;
}
.cursor.is-on, .cursor-ring.is-on { opacity: 1; }
.cursor-ring.is-grow {
  width: 68px; height: 68px;
  background: rgba(0,212,200,.12);
  border-color: var(--orange);
}

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.svc {
  position: relative; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.5rem 1.4rem 1.3rem;
  min-height: 240px;
  transition: .35s var(--ease);
}
.svc:hover { transform: translateY(-6px); border-color: rgba(0,212,200,.45); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.svc n { display: block; color: var(--orange); font-family: var(--display); font-weight: 700; margin-bottom: 1.4rem; }
.svc h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.35rem; }
.svc p { margin: 0 0 1.1rem; color: var(--mute); line-height: 1.6; font-size: .95rem; }
.svc a { color: var(--orange); font-weight: 700; font-size: .88rem; }
.svc::after {
  content: ""; position: absolute; right: -30px; bottom: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,200,.18), transparent 70%);
}

/* featured platforms */
.feat-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; }
.feat {
  position: relative; overflow: hidden; min-height: 320px;
  border-radius: 22px; padding: 1.8rem; display: flex; flex-direction: column; justify-content: flex-end;
  background: #111 center/cover;
}
.feat::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.78));
}
.feat > * { position: relative; z-index: 1; }
.feat small { color: var(--orange); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }
.feat h3 { margin: .4rem 0 .5rem; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.feat-stack { display: grid; gap: 1rem; }
.feat-mini {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 1.3rem 1.4rem; min-height: 152px;
  background: var(--ink-2) center/cover no-repeat; border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: .3s;
}
.feat-mini::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.82));
}
.feat-mini > * { position: relative; z-index: 1; }
.feat-mini:hover { border-color: var(--orange); }
.feat-mini h3 { margin: .3rem 0; font-family: var(--display); }
.feat-mini small { color: var(--orange); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }
.feat-mini .lead { color: rgba(247,245,241,.88); }

/* cases */
.case-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
.case-tabs { display: grid; align-content: start; gap: .4rem; }
.case-tabs button {
  text-align: left; padding: 1rem 1rem;
  border-radius: 12px; border: 1px solid transparent;
  color: var(--mute); font-weight: 600;
}
.case-tabs button.is-on, .case-tabs button:hover {
  background: var(--ink-2); color: #fff; border-color: var(--line);
}
.case-view { display: none; }
.case-view.is-on { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; align-items: center; }
.case-view img { width: 100%; height: 380px; object-fit: cover; border-radius: 20px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.2rem 0 1.4rem; }
.metrics div { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.metrics b { display: block; font-family: var(--display); font-size: 1.7rem; color: var(--orange); }

/* industries */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.ind {
  min-height: 150px; padding: 1.2rem;
  border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: .3s;
}
.ind:hover { background: var(--orange); color: #fff; transform: translateY(-4px); }
.ind:hover span { color: #fff; }
.ind strong { font-family: var(--display); font-size: 1.2rem; }
.ind span { color: var(--mute); font-size: .85rem; }

/* why */
.why-sec {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 8% 0%, rgba(0,212,200,.12), transparent 50%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(0,212,200,.06), transparent 46%),
    var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.why article {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.4rem 1.35rem;
  min-height: 220px;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.why article::before {
  content: "";
  position: absolute; top: 0; left: 14%; right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: .55;
}
.why article:hover {
  transform: translateY(-6px);
  border-color: rgba(0,212,200,.42);
  box-shadow: 0 20px 44px rgba(0,0,0,.35);
}
.why article b {
  display: block;
  color: var(--orange);
  font-family: var(--display);
  font-size: 1.15rem; letter-spacing: .04em;
}
.why article h3 { margin: .7rem 0 .45rem; font-family: var(--display); font-size: 1.28rem; color: #fff; }
.why article p { margin: 0; color: var(--mute); line-height: 1.6; }
.light .why article {
  background: #fff; border-color: transparent;
  box-shadow: none;
}
.light .why article::before { opacity: .7; }
.light .why article h3 { color: #16140f; }
.light .why article p { color: #5b564e; }
.light .why article:hover { border-color: rgba(0,212,200,.28); }

/* tech */
.tech { display: flex; flex-wrap: wrap; gap: .6rem; }
.tech span {
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--ink-2);
  font-weight: 600; font-size: .88rem;
}

/* process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.step { position: relative; padding: 1.3rem 1.1rem; border-top: 2px solid var(--orange); background: var(--ink-2); border-radius: 0 0 16px 16px; }
.step n { color: var(--orange); font-family: var(--display); font-weight: 700; }
.step h3 { margin: .4rem 0; font-family: var(--display); }

/* insights */
.blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.blog article { background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: .3s; }
.blog article:hover { transform: translateY(-5px); }
.blog img { width: 100%; height: 190px; object-fit: cover; }
.blog div { padding: 1.1rem 1.15rem 1.3rem; }
.blog small { color: var(--orange); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.blog h3 { margin: .4rem 0 .5rem; font-family: var(--display); font-size: 1.2rem; }
.blog p { margin: 0; color: var(--mute); font-size: .92rem; line-height: 1.55; }

/* global */
.global { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.global img { width: 100%; height: 420px; object-fit: cover; border-radius: 22px; }
.g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.g-stats div { border-top: 1px solid var(--line); padding-top: 1rem; }
.g-stats b { display: block; font-family: var(--display); font-size: 2rem; }

/* shift compare */
.shift-sec { background: var(--ink-2); }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shift-card {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 1.8rem 1.6rem 1.5rem;
  min-height: 320px;
  border: 1px solid var(--line);
}
.shift-card.is-old { background: #10131a; }
.shift-card.is-new {
  background: linear-gradient(180deg, rgba(0,212,200,.16), rgba(14,16,22,.4));
  border-color: rgba(0,212,200,.38);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.shift-card small {
  display: block;
  color: var(--orange); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem;
}
.shift-card h3 { margin: 0 0 1.2rem; font-family: var(--display); font-size: 2rem; }
.shift-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.shift-card li {
  position: relative; padding-left: 1.4rem;
  color: #c9c3b8; line-height: 1.5;
}
.shift-card.is-old li::before { content: "–"; position: absolute; left: 0; color: #6d675e; }
.shift-card.is-new li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* Trusted by our clients — Cuberto stack */
.tcli-sec { background: #08090e; overflow: hidden; }
.tcli-nav { display: flex; gap: .6rem; }
.tcli-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2); color: #fff;
  font-size: 1.15rem; line-height: 1;
  transition: .3s var(--ease);
}
.tcli-btn:hover { background: var(--orange); border-color: var(--orange); }
.tcli-deck {
  position: relative;
  height: 380px;
  max-width: 820px;
  margin: 0 auto;
}
.tcli-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #161922, #10131a);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 2.2rem 2.3rem 1.8rem;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  transform-origin: center bottom;
  transition: transform .75s var(--ease), opacity .55s var(--ease);
}
.tcli-card[data-pos="0"] { z-index: 5; transform: translateY(0) scale(1); opacity: 1; }
.tcli-card[data-pos="1"] { z-index: 4; transform: translateY(16px) scale(.955); opacity: .55; }
.tcli-card[data-pos="2"] { z-index: 3; transform: translateY(32px) scale(.91); opacity: .28; }
.tcli-card[data-pos="3"],
.tcli-card[data-pos="4"] { z-index: 1; transform: translateY(40px) scale(.88); opacity: 0; pointer-events: none; }
.tcli-card.is-leave {
  z-index: 6;
  opacity: 0;
  transform: translateX(42%) rotate(10deg) scale(.92);
  pointer-events: none;
}
.tcli-mark {
  display: block; line-height: .7;
  font-family: var(--display);
  font-size: 4.4rem; color: var(--orange);
  margin: -.3rem 0 .4rem;
}
.tcli-card p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.4; letter-spacing: -.02em;
  color: #f2eee6;
}
.tcli-card[data-pos="0"] p { animation: tcliIn .7s var(--ease); }
@keyframes tcliIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.tcli-who {
  margin-top: auto;
  padding-top: 1.6rem;
  display: flex; align-items: center; gap: .85rem;
}
.tcli-av {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,212,200,.14);
  border: 1px solid rgba(0,212,200,.35);
  color: var(--orange); font-family: var(--display); font-weight: 700;
}
.tcli-who strong { display: block; font-size: .95rem; }
.tcli-who small { color: var(--mute); font-size: .78rem; }
.tcli-bar {
  max-width: 820px; margin: 1.4rem auto 0;
  height: 2px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden;
}
.tcli-bar i {
  display: block; height: 100%; width: 0;
  background: var(--orange);
}

/* voices */
.voices-sec { background: #08090e; }
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.voice {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.4rem 1.3rem 1.3rem;
  min-height: 240px;
  transition: .35s var(--ease);
}
.voice:hover { transform: translateY(-6px); border-color: rgba(0,212,200,.4); }
.voice-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.voice-av {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,212,200,.14); border: 1px solid rgba(0,212,200,.35);
  color: var(--orange); font-family: var(--display); font-weight: 700;
}
.voice-top strong { display: block; font-size: .95rem; }
.voice-top small { color: var(--mute); font-size: .78rem; }
.voice p { margin: 0; color: #d8d3cb; line-height: 1.65; font-size: 1.02rem; }

/* talk */
.talk-sec { background: var(--ink-2); }
.talk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.talk {
  background: #0b0d13; border: 1px solid var(--line);
  border-radius: 18px; padding: 1.5rem 1.35rem 1.4rem;
  min-height: 220px;
}
.talk n { display: block; color: var(--orange); font-family: var(--display); font-weight: 700; margin-bottom: .9rem; }
.talk h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.3rem; }
.talk p { margin: 0; color: var(--mute); line-height: 1.6; }

/* careers band */
.hire-sec { background: #08090e; border-top: 1px solid var(--line); }
.hire { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items: center; }
.hire-roles { display: grid; gap: .7rem; }
.hire-roles a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2);
  transition: .3s;
}
.hire-roles a:hover { border-color: var(--orange); transform: translateX(4px); }
.hire-roles strong { display: block; font-family: var(--display); }
.hire-roles span { color: var(--mute); font-size: .85rem; }

/* cta band */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--orange) center/cover;
  color: #fff; text-align: center; padding: 5.5rem 1.2rem;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,168,158,.75), rgba(0,212,200,.55)); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cta-band .btn { background: #111; }

/* Stack / Integrated 360 / CTA split */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.stack-card {
  position: relative;
  min-height: 280px;
  border-radius: 20px;
  overflow: hidden;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #111 center/cover no-repeat;
  border: 1px solid var(--line);
}
.stack-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.88));
}
.stack-card > * { position: relative; z-index: 1; }
.stack-ico {
  width: 2.4rem; height: 2.4rem;
  margin-bottom: .8rem;
  color: var(--orange);
}
.stack-ico svg { width: 100%; height: 100%; }
.stack-card small {
  color: var(--orange);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stack-card h3 {
  margin: .35rem 0 .45rem;
  font-family: var(--display);
  font-size: 1.35rem;
}
.stack-card p { margin: 0; color: rgba(247,245,241,.85); font-size: .92rem; line-height: 1.5; }

.integ-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.integ-node {
  flex: 1 1 140px;
  min-width: 140px;
  text-align: center;
  padding: 1.3rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink);
}
.integ-ico {
  display: inline-grid;
  place-items: center;
  width: 2.8rem; height: 2.8rem;
  margin: 0 auto .7rem;
  border-radius: 50%;
  color: var(--orange);
  border: 1px solid rgba(0,212,200,.35);
  background: rgba(0,212,200,.08);
}
.integ-ico svg { width: 1.35rem; height: 1.35rem; }
.integ-node strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: .25rem;
}
.integ-node p { margin: 0; color: var(--mute); font-size: .88rem; }
.integ-arrow {
  color: var(--orange);
  font-size: 1.4rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.integ-note {
  margin: 1.6rem 0 0;
  color: var(--mute);
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

.cta-split {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.cta-pillar {
  position: relative;
  display: block;
  min-height: 200px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cta-pillar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform .5s var(--ease);
}
.cta-pillar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85));
}
.cta-pillar span {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem; z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.cta-pillar:hover img { transform: scale(1.06); }
.cta-pillar:hover { border-color: rgba(0,212,200,.45); }

@media (max-width: 980px) {
  .stack-grid, .cta-split { grid-template-columns: repeat(2, 1fr); }
  .integ-arrow { display: none; }
}
@media (max-width: 560px) {
  .stack-grid, .cta-split { grid-template-columns: 1fr; }
}

/* page hero */
.phero { padding: 5.5rem 0 3rem; background: var(--ink-2); border-bottom: 1px solid var(--line); }
.phero h1 { margin: .4rem 0 1rem; font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -.035em; line-height: 1.05; }

/* lists / catalog */
.cat { display: grid; gap: 0; }
.cat-row {
  display: grid; grid-template-columns: 160px 1fr 220px;
  gap: 1.4rem; padding: 1.6rem 0;
  border-bottom: 1px solid var(--line); align-items: start;
}
.cat-row h3 { margin: 0 0 .4rem; font-family: var(--display); font-size: 1.45rem; }
.cat-row p { margin: 0; color: var(--mute); line-height: 1.65; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span { font-size: .75rem; padding: .28rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: #c9c3b8; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.jobs { display: grid; gap: .7rem; }
.job {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2);
}
.job:hover { border-color: var(--orange); }
.form { display: grid; gap: 1rem; }
.field label { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 12px; padding: .9rem 1rem; outline: 0;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--orange); }
.field select option { background: #111; }
.note { color: var(--orange); min-height: 1.2em; }
.card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; }

/* footer */
.footer { background: #050505; border-top: 1px solid var(--line); padding: 3.2rem 0 1.4rem; }
.f-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 1.6rem; }
.footer h4 { margin: 0 0 .8rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.footer a, .footer p { display: block; color: #b7b1a6; line-height: 1.85; margin: 0; font-size: .9rem; }
.footer a:hover { color: #fff; }
.f-end { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--mute); font-size: .8rem; }

.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in { opacity: 1; transform: none; transition: .8s var(--ease); }

@media (max-width: 1080px) {
  .desk-nav, .header-row .btn { display: none; }
  .burger { display: block; }
  .hero-grid { min-height: auto; padding: 4.2rem 0 2.4rem; }
  .hero { min-height: auto; }
  .hero-mark { width: min(420px, 86vw); opacity: 0.16; }
  .imap-head { grid-template-columns: 1fr; }
  .imap-head p { justify-self: start; }
  .imap { height: 520px; }
  .imap-media { display: none; }
  .imap-pill.is-ghost { display: none; }
  .trust-row { display: block; }
  .trust-row > p { margin-bottom: .8rem; }
  .cub-svc { grid-template-columns: 1fr; gap: .8rem; }
  .cub-orb-sm { width: 72px; height: 72px; }
  .cub-row { grid-template-columns: 40px 1fr; }
  .cub-row span { grid-column: 2; }
  .cub-preview { display: none; }
  .cub-idea-row { flex-direction: column; align-items: flex-start; }
  .cub-idea h2 { font-size: clamp(2.6rem, 12vw, 5rem); }
  .tcli-deck { height: 420px; }
  .svc-grid, .ind-grid, .why, .steps, .blog, .metrics-grid, .feat-row, .case-layout, .case-view.is-on, .global, .split, .f-grid, .cat-row, .shift-grid, .voices, .talk-grid, .hire {
    grid-template-columns: 1fr;
  }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 0; }
  .g-stats { grid-template-columns: 1fr 1fr; }
  .mega { display: none !important; }
  .has-mega > button::after { display: none; }
  .case-view img, .global img { height: 240px; }
  .proof-track { flex-wrap: wrap; }
  .form { max-width: none; }
}

@media (max-width: 640px) {
  :root { --header: 70px; }
  .topbar .wrap span:first-child { display: none; }
  .brand img { height: 38px; max-width: 168px; }
  .reel-copy { padding: 0 6% 14vh; }
  .reel-copy h2 { font-size: clamp(1.55rem, 8vw, 2.4rem); }
  .wrap, .wrap-wide { width: min(100% - 1.4rem, 1400px); }
  .sec { padding: 3.4rem 0; }
  .sec-head { display: block; }
  .phero { padding: 3.2rem 0 2rem; }
  .phero h1 { font-size: clamp(1.85rem, 9vw, 2.8rem); }
  .hero h1 { max-width: none; font-size: clamp(2.1rem, 11vw, 3.4rem); }
  .hero-lead { font-size: 1rem; }
  .hero-actions { margin: 1.3rem 0 1.5rem; }
  .hero-pills span { font-size: .68rem; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric { padding: 1.1rem 1rem 1.15rem; }
  .imap { height: 440px; }
  .imap-pill.is-on .imap-float { font-size: .68rem; padding: .35rem .65rem; }
  .tcli-deck { height: 460px; }
  .tcli-card { padding: 1.5rem 1.3rem 1.3rem; border-radius: 22px; }
  .faq-item { padding: 1.6rem 0; }
  .faq-item summary { align-items: flex-start; }
  .faq-item summary i { margin-top: .35rem; }
  .faq-text p { padding-top: 1.4rem; }
  .faq-title { font-size: clamp(4.2rem, 22vw, 7rem); }
  .f-end, .job { flex-direction: column; align-items: flex-start; }
  .cub-orb-lg { width: 150px; height: 150px; }
  .mnav { width: min(100vw, 400px); }
  .mnav-link, .mnav-tog { font-size: 1.35rem; }
}

@media (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cursor, .cursor-ring, .cub-preview { display: none !important; }
  .marquee.is-ready .marquee-track { animation: marqueRun var(--marq-dur, 24s) linear infinite !important; }
  .marquee:hover .marquee-track { animation-play-state: paused !important; }
}

/* ===== SERVICES PAGE (image-heavy) ===== */
.svc-page .phero { display: none; }
.svc-hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: flex;
  align-items: flex-end;
  padding: 7rem 0 3.5rem;
  overflow: hidden;
}
.svc-hero-media {
  position: absolute; inset: 0;
  background: #111 center/cover no-repeat;
  transform: scale(1.04);
}
.svc-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,8,12,.92) 0%, rgba(7,8,12,.55) 55%, rgba(7,8,12,.75) 100%),
    linear-gradient(180deg, transparent 40%, rgba(7,8,12,.85));
}
.svc-hero-copy { position: relative; z-index: 1; max-width: 44rem; }
.svc-hero-copy h1 {
  margin: .4rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.svc-hero-copy .lead { color: #cfc9bf; max-width: 38rem; }
.svc-jump {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: 1.6rem;
}
.svc-jump a {
  padding: .45rem .9rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(8px);
}
.svc-jump a:hover { border-color: var(--orange); color: var(--orange); }

.svc-pillars-nav { padding: 1.2rem 0 0; }
.svc-pillars-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.svc-pill {
  position: relative;
  min-height: 140px;
  border-radius: 16px;
  overflow: hidden;
  background: #111 center/cover no-repeat;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.svc-pill::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
}
.svc-pill span {
  position: relative; z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
}
.svc-pill:hover { border-color: rgba(0,212,200,.45); }

.svc-block { padding: 0 0 3.5rem; }
.svc-block.is-alt { background: var(--ink-2); padding-bottom: 3.5rem; }
.svc-banner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 4rem 0 2.4rem;
  margin-bottom: 2.5rem;
  background: #111 center/cover no-repeat;
}
.svc-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,8,12,.9) 0%, rgba(7,8,12,.35) 60%, rgba(7,8,12,.7)),
    linear-gradient(180deg, transparent 20%, rgba(7,8,12,.75));
}
.svc-banner .wrap { position: relative; z-index: 1; max-width: 42rem; }
.svc-banner h2 {
  margin: .35rem 0 .7rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -.03em;
}
.svc-banner p { margin: 0; color: #d4cfc6; line-height: 1.55; }

.svc-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
.svc-split.is-flip { grid-template-columns: .95fr 1.05fr; }
.svc-split-copy h3 {
  margin: 0 0 .8rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.svc-split-copy > p { color: var(--mute); line-height: 1.65; margin: 0 0 1rem; }
.svc-list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.svc-list li {
  position: relative;
  padding: .45rem 0 .45rem 1.2rem;
  color: #e8e4dc;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  line-height: 1.45;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .85rem;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--orange);
}
.svc-split-media {
  display: grid;
  gap: .75rem;
}
.svc-split-media img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  object-fit: cover;
}

.svc-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.8rem;
}
.svc-mosaic figure {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 180px;
}
.svc-mosaic img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}
.svc-mosaic figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .85rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  font-size: .82rem;
  font-weight: 600;
}

.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}
.svc-cards article {
  padding: 1.2rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.svc-cards h4 {
  margin: 0 0 .45rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--orange);
}
.svc-cards p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.5; }

.svc-cta-end {
  margin-top: 2.5rem;
  padding: 2.2rem;
  border-radius: 22px;
  border: 1px solid rgba(0,212,200,.28);
  background:
    radial-gradient(ellipse 60% 80% at 10% 0%, rgba(0,212,200,.12), transparent 50%),
    var(--ink-2);
  text-align: center;
}
.svc-cta-end h3 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.svc-cta-end p { margin: 0 0 1.2rem; color: var(--mute); }
.svc-cta-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 980px) {
  .svc-pillars-row, .svc-mosaic, .svc-cards { grid-template-columns: repeat(2, 1fr); }
  .svc-split, .svc-split.is-flip { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .svc-pillars-row, .svc-mosaic, .svc-cards { grid-template-columns: 1fr; }
  .svc-banner { min-height: 260px; }
}

/* Service subnav + hub */
.svc-subnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7,8,12,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.svc-subnav-row {
  display: flex; flex-wrap: wrap; gap: .35rem .7rem;
  padding: .7rem 0;
  align-items: center;
}
.svc-subnav a {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  padding: .35rem .55rem;
  border-radius: 999px;
}
.svc-subnav a:hover, .svc-subnav a.is-on { color: var(--orange); }
.svc-subnav-home { border: 1px solid var(--line); }

.svc-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.svc-hub-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  min-height: 260px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.svc-hub-card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}
.svc-hub-card div { padding: 1.4rem 1.3rem; display: flex; flex-direction: column; justify-content: center; }
.svc-hub-card small { color: var(--orange); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; }
.svc-hub-card h2 { margin: .35rem 0 .55rem; font-family: var(--display); font-size: 1.55rem; }
.svc-hub-card p { margin: 0 0 1rem; color: var(--mute); font-size: .92rem; line-height: 1.5; }
.svc-hub-card span { color: var(--orange); font-weight: 700; font-size: .88rem; }
.svc-hub-card:hover { border-color: rgba(0,212,200,.4); }
.svc-hub-wide { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr; min-height: 280px; }
.svc-mosaic-tall { grid-template-columns: repeat(3, 1fr); }
.svc-mosaic-tall figure { min-height: 200px; }
.svc-mosaic-tall img { min-height: 200px; }

@media (max-width: 900px) {
  .svc-hub-grid, .svc-hub-wide, .svc-hub-card { grid-template-columns: 1fr; }
  .svc-hub-card img, .svc-hub-wide img { min-height: 180px; }
}

/* ===== INDUSTRIES PAGE (unique layout) ===== */
.ind-hero {
  position: relative;
  min-height: min(70vh, 560px);
  display: flex;
  align-items: flex-end;
  padding: 7rem 0 3rem;
  overflow: hidden;
}
.ind-hero-bg {
  position: absolute; inset: 0;
  background: #111 center/cover no-repeat;
}
.ind-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(7,8,12,.94) 0%, rgba(7,8,12,.55) 48%, rgba(7,8,12,.8) 100%),
    linear-gradient(180deg, transparent 35%, rgba(7,8,12,.9));
}
.ind-hero-inner { position: relative; z-index: 1; max-width: 42rem; }
.ind-hero-inner h1 {
  margin: .35rem 0 .9rem;
  font-family: var(--display);
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.ind-hero-inner .lead { color: #cfc9bf; margin: 0; }

.ind-jump-sec { padding: 1.5rem 0 2.5rem; background: var(--ink-2); border-bottom: 1px solid var(--line); }
.ind-jump {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
}
.ind-jump-card {
  position: relative;
  min-height: 110px;
  border-radius: 14px;
  overflow: hidden;
  background: #111 center/cover no-repeat;
  border: 1px solid var(--line);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ind-jump-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.88));
}
.ind-jump-card span,
.ind-jump-card strong { position: relative; z-index: 1; }
.ind-jump-card span {
  color: var(--orange);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.ind-jump-card strong {
  font-family: var(--display);
  font-size: .98rem;
  margin-top: .2rem;
}
.ind-jump-card:hover { border-color: rgba(0,212,200,.45); }

.ind-block {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 560px;
  border-bottom: 1px solid var(--line);
}
.ind-block.is-flip { grid-template-columns: 1fr 1.05fr; }
.ind-block.is-flip .ind-block-media { order: 2; }
.ind-block.is-flip .ind-block-panel { order: 1; }
.ind-block-media {
  background: #111 center/cover no-repeat;
  min-height: 320px;
}
.ind-block-panel {
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink);
  padding: 0;
}
.ind-block-copy {
  padding: 2.4rem 2rem 1.2rem;
}
.ind-block-copy h2 {
  margin: .3rem 0 .7rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -.03em;
}
.ind-lead {
  margin: 0 0 .75rem;
  font-size: 1.08rem;
  color: #e8e4dc;
  line-height: 1.5;
}
.ind-body {
  margin: 0 0 1rem;
  color: var(--mute);
  line-height: 1.65;
}
.ind-points {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.ind-points li {
  position: relative;
  padding: .4rem 0 .4rem 1.15rem;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
  color: #ddd8cf;
}
.ind-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .85rem;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--orange);
}
.ind-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1.2rem;
}
.ind-chips span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(0,212,200,.3);
  color: var(--orange);
}
.ind-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ind-block-side {
  padding: 0 2rem 2rem;
}
.ind-block-side img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
}

@media (max-width: 980px) {
  .ind-jump { grid-template-columns: repeat(2, 1fr); }
  .ind-block, .ind-block.is-flip { grid-template-columns: 1fr; }
  .ind-block.is-flip .ind-block-media,
  .ind-block.is-flip .ind-block-panel { order: initial; }
}
@media (max-width: 560px) {
  .ind-jump { grid-template-columns: 1fr; }
}


/* ===== WORK PAGE (portfolio) ===== */
.work-page { background: var(--ink); }
.work-hero {
  position: relative;
  min-height: min(58vh, 460px);
  display: flex; align-items: flex-end;
  padding: 7rem 0 2.5rem; overflow: hidden;
}
.work-hero-bg {
  position: absolute; inset: 0;
  background: #111 center/cover no-repeat;
}
.work-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(7,8,12,.96) 0%, rgba(7,8,12,.55) 48%, rgba(7,8,12,.82));
}
.work-hero-copy { position: relative; z-index: 1; max-width: 40rem; }
.work-hero-copy h1 {
  margin: .35rem 0 .85rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: -.035em; line-height: 1.05;
}
.work-hero-copy .lead { color: #cfc9bf; margin: 0; max-width: 34rem; }

.work-strip {
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.work-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
}
.work-strip-inner div {
  text-align: center;
  padding: .35rem .5rem;
  border-right: 1px solid var(--line);
}
.work-strip-inner div:last-child { border-right: 0; }
.work-strip-inner b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--orange);
}
.work-strip-inner span {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.work-sec-label {
  margin: 0 0 .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}
.work-featured { padding: 2.4rem 0 1rem; }
.work-feat-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.work-feat-media {
  min-height: 440px;
  background: #111 center/cover no-repeat;
}
.work-feat-copy { padding: 2rem 1.85rem; display: flex; flex-direction: column; justify-content: center; }
.work-feat-copy small { color: var(--orange); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }
.work-feat-copy h2 {
  margin: .45rem 0 .7rem;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}
.work-result { color: #e8e4dc; font-weight: 600; margin: 0 0 .7rem; }
.work-feat-copy > p { color: var(--mute); line-height: 1.6; margin: 0 0 1.1rem; }
.work-stats {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-bottom: 1.2rem;
}
.work-stats div {
  min-width: 5.5rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,212,200,.06);
}
.work-stats b { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--orange); }
.work-stats span { font-size: .72rem; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.work-stats-sm div { min-width: 4.5rem; padding: .55rem .65rem; }
.work-stats-sm b { font-size: 1rem; }

.work-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.work-list-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
}
.work-filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.work-filters button {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--mute);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
}
.work-filters button.is-on,
.work-filters button:hover {
  color: #04100f;
  background: var(--orange);
  border-color: var(--orange);
}

.work-cases { display: grid; gap: 1.35rem; }
.work-case {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.2rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.work-case.is-flip { grid-template-columns: 1.05fr 1fr; }
.work-case.is-flip .work-case-imgs { order: 2; }
.work-case.is-hide { display: none; }
.work-case-imgs {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: .55rem;
}
.work-case-imgs img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.work-case-copy { display: flex; flex-direction: column; justify-content: center; padding: .2rem .5rem .2rem 0; }
.work-case-copy small { color: var(--orange); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.work-case-copy h3 { margin: .35rem 0 .5rem; font-family: var(--display); font-size: 1.4rem; }
.work-case-copy > p { color: var(--mute); line-height: 1.55; margin: 0 0 .85rem; font-size: .94rem; }
.work-case-link {
  margin-top: .35rem;
  color: var(--orange);
  font-weight: 700;
  font-size: .9rem;
}

/* ===== INSIGHTS PAGE (editorial / magazine) ===== */
.ins-page { background: #0b0d12; }
.ins-mast {
  padding: 6.5rem 0 0;
  border-bottom: 1px solid var(--line);
}
.ins-mast-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  min-height: 340px;
  align-items: stretch;
}
.ins-mast-brand {
  padding: 1.5rem 1.5rem 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line);
}
.ins-issue {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}
.ins-mast-brand h1 {
  margin: .55rem 0 .8rem;
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 5.2rem);
  letter-spacing: -.04em;
  line-height: .95;
}
.ins-mast-brand p {
  margin: 0;
  max-width: 26rem;
  color: var(--mute);
  line-height: 1.55;
}
.ins-mast-visual {
  min-height: 280px;
  background: #111 center/cover no-repeat;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.ins-topics {
  border-bottom: 1px solid var(--line);
  background: rgba(0,212,200,.04);
}
.ins-topics-track {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  padding: .85rem 0;
}
.ins-topics-track span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b9b3a8;
}

.ins-cover { padding: 2.2rem 0 1rem; }
.ins-cover-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--line);
  background: #12151c;
  overflow: hidden;
}
.ins-cover-media {
  min-height: 420px;
  background: #111 center/cover no-repeat;
}
.ins-cover-body {
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 3px solid var(--orange);
}
.ins-kicker {
  margin: 0 0 .55rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.ins-cover-body h2 {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  line-height: 1.12;
}
.ins-dek {
  color: #e6e1d8;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 .85rem;
}
.ins-body {
  color: var(--mute);
  line-height: 1.65;
  margin: 0 0 1.2rem;
  font-size: .95rem;
}

.ins-quote-band {
  padding: 2.2rem 0;
  background: linear-gradient(90deg, rgba(0,212,200,.1), transparent 55%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ins-quote-band blockquote {
  margin: 0;
  max-width: 42rem;
}
.ins-quote-band p {
  margin: 0 0 .7rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: #f0ebe3;
}
.ins-quote-band cite {
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}

.ins-digest-head {
  margin-bottom: 1.4rem;
}
.ins-digest-head h2 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}
.ins-digest-head p { margin: 0; color: var(--mute); }
.ins-digest-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
}
.ins-note {
  display: grid;
  grid-template-columns: 3.2rem 200px 1fr;
  gap: 1rem;
  align-items: stretch;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: #10131a;
}
.ins-note:last-child { border-bottom: 0; }
.ins-note:nth-child(odd) { background: #12161f; }
.ins-note-num {
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgba(0,212,200,.55);
  padding-top: .25rem;
}
.ins-note-media img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.ins-note-copy { display: flex; flex-direction: column; justify-content: center; }
.ins-note-copy h3 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: 1.2rem;
}
.ins-note-copy p:last-child {
  margin: 0;
  color: var(--mute);
  font-size: .92rem;
  line-height: 1.5;
}

.ins-cta { padding-top: 1rem; }
.ins-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.6rem 1.5rem;
  border: 1px dashed rgba(0,212,200,.35);
  background: rgba(0,212,200,.05);
}
.ins-cta-box h3 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: 1.35rem;
}
.ins-cta-box p { margin: 0; color: var(--mute); }

@media (max-width: 980px) {
  .work-feat-grid, .work-case, .work-case.is-flip, .ins-mast-inner, .ins-cover-card {
    grid-template-columns: 1fr;
  }
  .work-case.is-flip .work-case-imgs { order: initial; }
  .work-case-imgs { grid-template-columns: 1fr 1fr; }
  .work-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .work-strip-inner div:nth-child(2) { border-right: 0; }
  .ins-mast-brand { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .ins-mast-visual { clip-path: none; min-height: 220px; }
  .ins-cover-body { border-left: 0; border-top: 3px solid var(--orange); }
  .ins-note { grid-template-columns: 2.5rem 1fr; }
  .ins-note-media { grid-column: 1 / -1; }
  .ins-note-media img { height: 180px; }
}
@media (max-width: 640px) {
  .work-case-imgs { grid-template-columns: 1fr; }
  .work-strip-inner { grid-template-columns: 1fr 1fr; }
}
/* ===== ABOUT PAGE ===== */
.about-page { background: var(--ink); }
.about-hero {
  position: relative;
  min-height: min(72vh, 560px);
  display: flex; align-items: flex-end;
  padding: 7rem 0 0; overflow: hidden;
}
.about-hero-bg {
  position: absolute; inset: 0;
  background: #111 center/cover no-repeat;
}
.about-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(7,8,12,.95) 0%, rgba(7,8,12,.72) 42%, rgba(7,8,12,.4) 70%, rgba(7,8,12,.88));
}
.about-hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 1.5rem;
  align-items: end;
  padding-bottom: 2.2rem;
}
.about-hero-copy { max-width: 38rem; }
.about-hero-copy h1 {
  margin: .35rem 0 .85rem;
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  letter-spacing: -.035em; line-height: 1.05;
}
.about-hero-copy .lead { color: #cfc9bf; margin: 0 0 1.2rem; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.about-hero-facts {
  list-style: none; margin: 0; padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(10,12,18,.72);
  backdrop-filter: blur(8px);
  display: grid; gap: .85rem;
}
.about-hero-facts li { display: grid; gap: .15rem; }
.about-hero-facts b {
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--orange);
}
.about-hero-facts span {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.about-story { padding: 3rem 0; }
.about-story-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.6rem;
  align-items: center;
}
.about-story-media {
  min-height: 420px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #111 center/cover no-repeat;
}
.about-story-copy h2 {
  margin: .35rem 0 .9rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.about-story-copy p { color: var(--mute); line-height: 1.65; margin: 0 0 .85rem; }
.about-inline { color: var(--orange); font-weight: 700; }

.about-how {
  padding: 3rem 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.about-how-head { max-width: 40rem; margin-bottom: 1.6rem; }
.about-how-head h2 {
  margin: .35rem 0 .55rem;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}
.about-how-head p { margin: 0; color: var(--mute); }
.about-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.about-steps li {
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--line);
  background: rgba(0,212,200,.04);
  border-radius: 16px;
}
.about-steps span {
  display: block;
  font-family: var(--display);
  color: var(--orange);
  font-size: 1.1rem;
  margin-bottom: .45rem;
}
.about-steps h3 { margin: 0 0 .45rem; font-family: var(--display); font-size: 1.15rem; }
.about-steps p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.5; }

.about-pillars { padding: 3rem 0 1rem; }
.about-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.about-pillar {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding: .85rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: inherit;
}
.about-pillar:hover { border-color: rgba(0,212,200,.45); }
.about-pillar img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.about-pillar h3 { margin: .1rem 0 .35rem; font-family: var(--display); }
.about-pillar p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.45; }

.about-values {
  padding: 1.5rem 0 2.5rem;
}
.about-values-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.about-values-row article {
  padding: 1.2rem 1.15rem;
  border-top: 2px solid var(--orange);
  background: rgba(0,212,200,.04);
}
.about-values-row h3 { margin: 0 0 .45rem; font-family: var(--display); font-size: 1.1rem; }
.about-values-row p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.5; }

/* ===== CAREERS PAGE ===== */
.careers-page { background: var(--ink); }
.careers-hero {
  position: relative;
  min-height: min(60vh, 460px);
  display: flex; align-items: flex-end;
  padding: 7rem 0 3rem; overflow: hidden;
}
.careers-hero-bg {
  position: absolute; inset: 0;
  background: #111 center/cover no-repeat;
}
.careers-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(7,8,12,.94), rgba(7,8,12,.5) 55%, rgba(7,8,12,.85));
}
.careers-hero-copy { position: relative; z-index: 1; max-width: 38rem; }
.careers-hero-copy h1 {
  margin: .35rem 0 .85rem;
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  letter-spacing: -.03em; line-height: 1.06;
}
.careers-hero-copy .lead { color: #cfc9bf; margin: 0 0 1.1rem; }

.careers-perks {
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.careers-perks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.careers-perks-grid article {
  padding: 1.3rem 1.1rem;
  border-right: 1px solid var(--line);
}
.careers-perks-grid article:last-child { border-right: 0; }
.careers-perks-grid h3 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--orange);
}
.careers-perks-grid p { margin: 0; color: var(--mute); font-size: .88rem; line-height: 1.45; }

.careers-life { padding: 2.8rem 0; }
.careers-life-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
  align-items: center;
}
.careers-life-copy h2 {
  margin: .35rem 0 .8rem;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}
.careers-life-copy p { color: var(--mute); line-height: 1.6; margin: 0 0 .85rem; }
.careers-life-media {
  min-height: 360px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #111 center/cover no-repeat;
}

.careers-jobs-head { max-width: 36rem; margin-bottom: 1.4rem; }
.careers-jobs-head h2 {
  margin: .35rem 0 .45rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.careers-jobs-head p { margin: 0; color: var(--mute); }
.careers-job-list { display: grid; gap: 1rem; }
.careers-job {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.careers-team {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.careers-job h3 { margin: 0 0 .25rem; font-family: var(--display); font-size: 1.25rem; }
.careers-meta { margin: 0; color: var(--mute); font-size: .85rem; }
.careers-job > p { margin: 0; color: var(--mute); font-size: .92rem; line-height: 1.5; }

/* ===== CONTACT PAGE ===== */
.contact-page { background: var(--ink); }
.contact-hero {
  position: relative;
  min-height: min(48vh, 380px);
  display: flex; align-items: flex-end;
  padding: 7rem 0 2.5rem; overflow: hidden;
}
.contact-hero-bg {
  position: absolute; inset: 0;
  background: #111 center/cover no-repeat;
}
.contact-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(7,8,12,.93), rgba(7,8,12,.55) 50%, rgba(7,8,12,.8));
}
.contact-hero-copy { position: relative; z-index: 1; max-width: 36rem; }
.contact-hero-copy h1 {
  margin: .35rem 0 .75rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -.03em; line-height: 1.06;
}
.contact-hero-copy .lead { color: #cfc9bf; margin: 0; }

.contact-body { padding: 2.4rem 0 3rem; }
.contact-layout {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 1.5rem;
  align-items: start;
}
.contact-form {
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.contact-form-head { margin-bottom: .4rem; }
.contact-form-head h2 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: 1.45rem;
}
.contact-form-head p { margin: 0 0 .6rem; color: var(--mute); font-size: .92rem; }
.contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact-field-full { grid-column: 1 / -1; }
.contact-aside { display: grid; gap: 1rem; }
.contact-card {
  padding: 1.15rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.contact-card h3 {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: 1.1rem;
}
.contact-card p { margin: 0 0 .45rem; color: var(--mute); line-height: 1.5; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-muted { font-size: .88rem; }
.contact-steps {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--mute);
  line-height: 1.55;
}
.contact-chips {
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.contact-chips a {
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--mute);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.contact-chips a:hover {
  color: #04100f;
  background: var(--orange);
  border-color: var(--orange);
}
.contact-card-photo {
  min-height: 180px;
  background: #111 center/cover no-repeat;
  display: flex; align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.contact-card-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(transparent, rgba(7,8,12,.92));
}
.contact-card-photo > div { position: relative; z-index: 1; }
.contact-card-photo small {
  display: block;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .68rem;
  margin-bottom: .35rem;
}
.contact-card-photo p { color: #e8e4dc; }

@media (max-width: 980px) {
  .about-hero-grid, .about-story-grid, .about-steps, .about-pillar-grid,
  .about-values-row, .careers-perks-grid, .careers-life-grid,
  .careers-job, .contact-layout, .contact-fields {
    grid-template-columns: 1fr;
  }
  .careers-perks-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .careers-job .btn { justify-self: start; }
  .about-pillar { grid-template-columns: 120px 1fr; }
}

/* ===== LEGAL PAGES (Terms / Privacy) ===== */
.legal-page { background: var(--ink); }
.legal-hero {
  padding: 6.5rem 0 2.4rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 80% at 90% 10%, rgba(0,212,200,.12), transparent 55%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.legal-hero-privacy {
  background:
    radial-gradient(ellipse 70% 80% at 8% 20%, rgba(0,212,200,.1), transparent 50%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.legal-hero-inner { max-width: 44rem; }
.legal-hero h1 {
  margin: .35rem 0 .85rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.legal-hero .lead {
  margin: 0 0 1.2rem;
  color: #cfc9bf;
  line-height: 1.6;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.2rem;
  align-items: center;
  font-size: .8rem;
  color: var(--mute);
}
.legal-meta span {
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,212,200,.04);
}
.legal-meta a {
  color: var(--orange);
  font-weight: 700;
}

.legal-body { padding: 2.4rem 0 3.5rem; }
.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 6rem;
  padding: 1.1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.legal-toc p {
  margin: 0 0 .7rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.legal-toc a {
  display: block;
  padding: .3rem 0;
  color: var(--mute);
  font-size: .88rem;
  border-bottom: 1px solid transparent;
}
.legal-toc a:hover {
  color: var(--text, #f2eee6);
  border-bottom-color: rgba(0,212,200,.35);
}

.legal-prose {
  max-width: 46rem;
  padding: 1.6rem 1.7rem 1.8rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.legal-prose section {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6.5rem;
}
.legal-prose section:first-child { padding-top: .2rem; }
.legal-prose section:last-of-type { border-bottom: 0; }
.legal-prose h2 {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  letter-spacing: -.02em;
}
.legal-prose h3 {
  margin: 1rem 0 .45rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #e8e4dc;
}
.legal-prose p {
  margin: 0 0 .85rem;
  color: var(--mute);
  line-height: 1.7;
  font-size: .96rem;
}
.legal-prose ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  color: var(--mute);
  line-height: 1.65;
}
.legal-prose li { margin-bottom: .4rem; }
.legal-prose li strong { color: #e8e4dc; }
.legal-prose a { color: var(--orange); font-weight: 600; }

.legal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(0,212,200,.3);
}
.legal-foot a {
  font-weight: 700;
  color: var(--orange);
}

.f-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.2rem;
}
.f-legal a {
  color: var(--mute);
  font-size: .8rem;
}
.f-legal a:hover { color: var(--orange); }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-prose { padding: 1.2rem 1.1rem 1.4rem; }
}