/* =========================================================
   VOYAGEFILMMAKER · core stylesheet
   ========================================================= */

:root {
  /* palette */
  --bg: #0c0c0c;
  --bg-2: #131312;
  --ink: #0e0e0d;
  --paper: #efeae0;
  --paper-dim: #d8d2c4;
  --orange: #e89e58;
  --coral: #d55c45;
  --sage: #9caa85;
  --gray: #b3b0a8;
  --line: rgba(239, 234, 224, 0.14);
  --line-strong: rgba(239, 234, 224, 0.32);

  /* type */
  --f-disp: "Archivo", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --f-jp: "Noto Serif JP", serif;

  /* radii */
  --r-card: 28px;
  --r-card-sm: 18px;
  --r-pill: 999px;

  /* timing */
  --eo: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; font-family: "Archivo"; font-weight: 400; }

/* film grain overlay */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: .35; mix-blend-mode: overlay;
}

/* mono helper */
.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* status dot */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--coral); }
.dot--coral { background: var(--coral); }
.dot--live { background: var(--coral); box-shadow: 0 0 0 0 rgba(213,92,69,.7); animation: pulse 1.6s infinite; vertical-align: middle; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(213,92,69,.7); }
  70% { box-shadow: 0 0 0 8px rgba(213,92,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(213,92,69,0); }
}

/* =================== top nav =================== */
.topnav {
  position: fixed; top: 14px; left: 14px; right: 14px;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 14px 10px 18px;
  border-radius: var(--r-pill);
  background: rgba(20,20,18,.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.topnav__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.01em; font-size: 14px; }
.topnav__brand .brandmark { display: inline-flex; color: var(--orange); }
.topnav__rmark { color: var(--orange); font-size: 11px; vertical-align: super; }
.topnav__links { display: flex; gap: 22px; justify-content: center; }
.topnav__links a { font-size: 13px; opacity: .8; transition: opacity .25s var(--eo), color .25s var(--eo); position: relative; }
.topnav__links a:hover { opacity: 1; }
.topnav__links a.is-active { opacity: 1; color: var(--orange); }
.topnav__links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--orange); border-radius: 1px;
}
.topnav__meta { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .01em;
  background: var(--paper);
  color: var(--ink);
  transition: transform .3s var(--eo), background .3s var(--eo);
}
.btn:hover { transform: translateY(-1px); }
.btn--pill { padding: 8px 14px; }
.btn--big {
  padding: 18px 26px; font-size: 15px;
  border-radius: 18px;
}
.btn--coral { background: var(--coral); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid var(--line-strong); }

/* =================== hero v3 (video-centric) =================== */
.hero--v3 {
  position: relative;
  padding: 76px 18px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: calc(100vh - 0px);
}
.tape--hero { margin: 0 -18px; }

.hero3__top {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 4px;
  gap: 10px;
  text-align: center;
}
.hero3__id {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border: 1.5px solid var(--paper);
  border-radius: var(--r-pill);
  letter-spacing: .14em;
  opacity: .85;
}
.dot--live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 var(--coral);
  animation: livePulse 1.6s var(--eo) infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,89,71,.7); }
  50% { box-shadow: 0 0 0 8px rgba(229,89,71,0); }
}

.hero3__title {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(28px, 5.5vw, 92px);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%;
  gap: 6px;
}
.hero3__line--brand {
  font-size: clamp(28px, 5.5vw, 92px);
  letter-spacing: -.04em;
}
.hero3__line { max-width: 100%; }
.hero3__line { position: relative; }
.hero3__line--out {
  -webkit-text-stroke: 1.5px var(--paper);
  color: transparent;
  letter-spacing: -.04em;
}
.hero3__r { color: var(--orange); font-size: .22em; vertical-align: super; -webkit-text-stroke: 0; }
.hero3__sub {
  display: flex; gap: clamp(20px, 6vw, 80px);
  opacity: .55;
  font-size: 11px;
}

/* main stage: side rails + video */
.hero3__stage {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 14px;
  align-items: stretch;
  flex: 1;
  min-height: 540px;
}
.hero3__rail { display: flex; flex-direction: column; gap: 14px; }
.hero3__rail .hcard { flex: 1; }

.hero3__rail--l .hcard {
  display: flex; flex-direction: column;
  padding: 18px 20px;
  gap: 14px;
}
.hero3__bigstat { display: flex; flex-direction: column; gap: 4px; }
.hero3__bigstat .bigstat__num {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(44px, 4vw, 76px);
  line-height: .82; letter-spacing: -.04em;
  color: var(--ink);
}
.bigstat__unit { font-size: .5em; opacity: .7; margin-left: .04em; vertical-align: top; }
.hero3__bigstat .bigstat__lbl { opacity: .75; font-size: 10px; letter-spacing: .12em; }

.hero3__rail--l .adsr { padding: 10px 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.hero3__rail--l .hcard__foot { margin-top: auto; padding-top: 12px; border-top: 1.5px solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* CENTER VIDEO */
.hero3__video { display: flex; }
.hero3__videoframe {
  background: #0e0e0d;
  border: 1.5px solid rgba(244,239,229,.18);
  border-radius: var(--r-card);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
  position: relative;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.hero3__videoframe::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--r-card);
  padding: 1.5px;
  background: linear-gradient(140deg, var(--orange), transparent 40%, transparent 60%, var(--coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
}
.hero3__videohead, .hero3__videofoot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: .12em;
  color: var(--paper); opacity: .8;
  padding: 0 4px;
}
.hero3__videowrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.hero3__iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.hero3__videofoot { gap: 14px; }
.hero3__videofoot-l, .hero3__videofoot-r { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hero3__timeline {
  flex: 1;
  height: 4px;
  background: rgba(244,239,229,.15);
  border-radius: 2px;
  overflow: hidden;
}
.hero3__timeline-bar {
  display: block;
  height: 100%;
  width: 32%;
  background: var(--orange);
  border-radius: 2px;
  animation: tlScan 6s var(--eo) infinite;
}
@keyframes tlScan {
  0% { width: 8%; }
  50% { width: 72%; }
  100% { width: 8%; }
}

/* RIGHT rail */
.hero3__rail--r .hcard { padding: 20px 22px; display: flex; flex-direction: column; }
.hero3__cta { flex: 1.2; }
.hero3__ctabig {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(40px, 3.4vw, 64px);
  line-height: .85; letter-spacing: -.04em;
  color: var(--ink);
  margin: 14px 0;
  text-decoration: none;
  flex: 1;
  display: flex; align-items: center;
}
.hero3__ctabig:hover { text-decoration: underline; }
.hero3__index { flex: .9; }
.hero3__indexbig { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.hero3__indexbig .bignum { font-size: clamp(72px, 7vw, 128px); }
.hero3__rail--r .hcard__head, .hero3__rail--l .hcard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 10px; letter-spacing: .12em;
}
.hero3__rail--r .hcard__foot { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1.5px solid var(--ink); margin-top: auto; }

@media (max-width: 1180px) {
  .hero3__stage {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .hero3__rail--l { grid-column: 1; grid-row: 2; flex-direction: row; }
  .hero3__rail--l .hcard { flex: 1; }
  .hero3__video { grid-column: 1 / span 2; grid-row: 1; }
  .hero3__rail--r { grid-column: 2; grid-row: 2; }
}
@media (max-width: 720px) {
  .hero3__stage { grid-template-columns: 1fr; }
  .hero3__rail--l { grid-column: 1; grid-row: 2; flex-direction: column; }
  .hero3__video { grid-column: 1; grid-row: 1; }
  .hero3__rail--r { grid-column: 1; grid-row: 3; }
  .hero3__sub { flex-direction: column; gap: 4px; }
}

.hero3__line--tag {
  font-size: clamp(40px, 8.5vw, 148px);
  letter-spacing: -.03em;
  margin-top: 6px;
  line-height: .9;
}
.hero3__line--tag .dot { display: inline-block; vertical-align: middle; margin-left: .12em; -webkit-text-stroke: 0; }

/* =================== how we work =================== */
.howework { padding: clamp(60px, 8vw, 120px) 18px; }
.howework__lede { max-width: 46ch; opacity: .75; line-height: 1.5; align-self: end; }
.howework__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.prinx {
  border-radius: var(--r-card);
  padding: 24px 26px 22px;
  color: var(--ink);
  display: flex; flex-direction: column;
  min-height: 240px;
  position: relative;
  transition: transform .55s var(--eo);
}
.prinx:hover { transform: translateY(-4px); }
.prinx--orange { background: var(--orange); }
.prinx--coral { background: var(--coral); }
.prinx--sage { background: var(--sage); }
.prinx--gray { background: var(--gray); }
.prinx__no { font-size: 11px; letter-spacing: .14em; opacity: .8; }
.prinx__h {
  margin: 14px 0 10px;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: -.02em; line-height: 1;
}
.prinx p { font-size: 14px; line-height: 1.5; max-width: 38ch; }
.prinx__tag { margin-top: auto; padding-top: 16px; font-size: 11px; letter-spacing: .14em; opacity: .85; }
@media (max-width: 1100px) { .howework__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .howework__grid { grid-template-columns: 1fr; } }

/* =================== faq =================== */
.faq { padding: clamp(60px, 8vw, 120px) 18px; }
.faq__lede { max-width: 46ch; opacity: .75; line-height: 1.5; align-self: end; }
.faq__list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1.5px solid rgba(244,239,229,.18); }
.faq__item { border-bottom: 1.5px solid rgba(244,239,229,.18); }
.faq__item details summary {
  list-style: none;
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--f-disp);
  font-weight: 700; font-stretch: 115%;
  font-size: clamp(20px, 1.7vw, 28px);
  letter-spacing: -.01em;
  transition: color .3s var(--eo);
}
.faq__item details summary::-webkit-details-marker { display: none; }
.faq__item details summary:hover { color: var(--orange); }
.faq__no { font-size: 11px; letter-spacing: .14em; opacity: .55; font-family: var(--f-mono); font-weight: 400; }
.faq__q { font-family: inherit; }
.faq__icon {
  font-family: var(--f-mono);
  font-size: 28px;
  font-weight: 300;
  text-align: right;
  line-height: 1;
  transition: transform .35s var(--eo);
  display: inline-block;
}
.faq__item details[open] .faq__icon { transform: rotate(45deg); color: var(--orange); }
.faq__a {
  padding: 0 4px 22px 82px;
  max-width: 70ch;
  line-height: 1.55;
  opacity: .82;
  font-size: 15px;
}
@media (max-width: 640px) {
  .faq__item details summary { grid-template-columns: 50px 1fr 30px; gap: 12px; }
  .faq__a { padding-left: 62px; }
}

/* =================== trusted by =================== */
.trustedby {
  border-top: 1.5px solid rgba(244,239,229,.16);
  border-bottom: 1.5px solid rgba(244,239,229,.16);
  padding: 22px 0;
  margin: 0 18px;
}
.trustedby__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 18px;
  font-size: 11px; letter-spacing: .14em;
  opacity: .55;
}
.trustedby__strip {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trustedby__track {
  display: inline-flex; align-items: center; gap: 48px;
  white-space: nowrap;
  animation: tbScroll 50s linear infinite;
  will-change: transform;
}
@keyframes tbScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tb__logo {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -.01em;
  color: var(--paper);
  opacity: .82;
  line-height: 1;
  transition: opacity .3s var(--eo);
}
.tb__logo:hover { opacity: 1; }
.tb__logo--serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.01em;
}
.tb__logo--script {
  font-family: "Brush Script MT", "Comic Sans MS", cursive;
  font-style: italic;
  font-weight: 400;
}
.tb__sep {
  font-family: var(--f-mono);
  font-size: 14px;
  opacity: .35;
}

/* =================== what we solve =================== */
.solve {
  padding: clamp(80px, 10vw, 160px) 18px;
  border-top: 1.5px solid rgba(244,239,229,.12);
}
.solve__head {
  max-width: 1100px;
  margin: 0 auto 80px;
  text-align: center;
}
.solve__head .section__index { display: inline-block; margin-bottom: 24px; opacity: .55; }
.solve__statement {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(40px, 6.5vw, 112px);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.solve__stmt-out {
  -webkit-text-stroke: 1.5px var(--paper);
  color: transparent;
  letter-spacing: -.025em;
}

.solve__list {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.solve__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 36px 4px;
  border-top: 1.5px solid rgba(244,239,229,.16);
  align-items: start;
}
.solve__row:last-child { border-bottom: 1.5px solid rgba(244,239,229,.16); }
.solve__no {
  font-size: 13px;
  letter-spacing: .14em;
  opacity: .55;
  padding-top: 6px;
}
.solve__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.solve__problem, .solve__answer {
  display: flex; flex-direction: column; gap: 14px;
}
.solve__lbl {
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .55;
}
.solve__lbl--ans { color: var(--orange); opacity: 1; }
.solve__problem p {
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 110%;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: -.01em;
  opacity: .65;
  text-wrap: pretty;
}
.solve__answer p {
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 115%;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .solve__row { grid-template-columns: 1fr; gap: 18px; }
  .solve__pair { grid-template-columns: 1fr; gap: 28px; }
  .solve__no { padding-top: 0; }
}

.section__sub--work { max-width: 50ch; opacity: .7; margin-top: 14px; line-height: 1.5; }

/* =================== minimal overrides =================== */

/* chip-card service grid */
.services__grid--chip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
}
@media (max-width: 1100px) { .services__grid--chip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .services__grid--chip { grid-template-columns: 1fr; } }

.chipcard {
  position: relative;
  aspect-ratio: 9/16;
  min-height: 560px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  padding: 20px;
  gap: 12px;
  background: #0e0e0d;
  color: var(--paper);
  isolation: isolate;
  transition: transform .55s var(--eo);
}
.chipcard:hover { transform: translateY(-4px); }

/* color variants on the card body itself */
.chipcard--01 { background: #0e0e0d; color: var(--paper); }
.chipcard--02 { background: var(--coral); color: var(--paper); }
.chipcard--03 { background: #0e0e0d; color: var(--paper); }
.chipcard--04 { background: #0e0e0d; color: var(--paper); }

.chipcard__circuit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  color: currentColor;
}

.chipcard__corner {
  position: absolute;
  font-size: 9px; line-height: 1.3;
  letter-spacing: .06em;
  z-index: 3;
  font-weight: 500;
}
.chipcard__corner--tl { top: 18px; left: 18px; }
.chipcard__corner--tr { top: 18px; right: 18px; text-align: right; }

.chipcard__plate {
  position: relative;
  z-index: 2;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 6px;
  color: var(--ink);
}
.chipcard__plate-tag {
  font-size: 9px; letter-spacing: .08em;
  opacity: .7;
}
.chipcard__plate-num {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
}
.chipcard__plate-num--sm { font-size: 18px; line-height: 1.1; letter-spacing: -.01em; font-weight: 700; }
.chipcard__plate-num--lg { font-size: clamp(34px, 3vw, 52px); }
.chipcard__plate-num--xl {
  font-size: clamp(80px, 8vw, 130px);
  font-stretch: 75%;
  letter-spacing: -.05em;
}
.chipcard__plate-num--script {
  font-family: 'Brush Script MT', cursive;
  font-size: clamp(44px, 4vw, 64px);
  font-weight: 400;
  letter-spacing: 0;
}
.chipcard__plate-sup { font-size: .42em; vertical-align: top; opacity: .8; margin-left: 2px; font-weight: 600; }
.chipcard__plate-meta { font-size: 9px; letter-spacing: .06em; opacity: .75; line-height: 1.3; margin-top: auto; }
.chipcard__plate-meta-r { font-size: 9px; letter-spacing: .06em; opacity: .75; line-height: 1.3; position: absolute; top: 16px; right: 18px; text-align: right; }

.chipcard__plate--cream { background: #f3ede0; color: var(--ink); }
.chipcard__plate--coral { background: var(--coral); color: var(--paper); }
.chipcard__plate--orange { background: var(--orange); color: var(--ink); }
.chipcard__plate--ink { background: #1a1a18; color: var(--paper); border: 1.5px solid rgba(244,239,229,.1); }
.chipcard__plate--midblock { background: #1a1a18; color: var(--paper); border: 1.5px solid rgba(244,239,229,.1); padding: 14px 18px; }
.chipcard__plate--gray { background: #b0b3a8; color: var(--ink); }

.chipcard__title {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
}
.chipcard__title--ink { color: var(--ink); }
.chipcard__title--md { font-size: clamp(22px, 2vw, 32px); }

.chipcard__hero {
  position: relative; z-index: 2;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--ink);
}
.chipcard__hero-tag { font-size: 11px; letter-spacing: .04em; opacity: .8; font-weight: 500; }

.chipcard__plate--top2 {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding: 18px 20px;
}
.chipcard__plate--produced {
  background: var(--coral); color: var(--paper);
  align-items: center;
  text-align: center;
  padding: 22px 18px;
  margin-top: -8px;
}
.chipcard__plate-cta { background: var(--ink); color: var(--paper); padding: 6px 14px; border-radius: 10px; font-size: 10px; letter-spacing: .12em; margin-top: 6px; }
.chipcard__plate--bignum {
  background: transparent;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 14px;
  padding: 8px 4px 0;
  color: var(--paper);
}
.chipcard__plate--bignum .chipcard__plate-meta { margin: 0 0 8px 0; max-width: 14ch; opacity: .85; }

.chipcard__foot {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.3;
  border-top: 1px solid currentColor;
  padding-top: 12px;
  opacity: .85;
}
.chipcard__foot-mid { text-align: center; }
.chipcard__foot-r { text-align: right; font-weight: 600; }

/* card-specific layouts */
.chipcard--01 {
  grid-template-rows: 60px auto auto auto 1fr 50px;
}
.chipcard--01 .chipcard__plate--cream { grid-row: 2; margin-top: 4px; }
.chipcard--01 .chipcard__plate--midblock { grid-row: 3; }
.chipcard--01 .chipcard__plate--coral { grid-row: 4; }

.chipcard--02 {
  grid-template-rows: 80px 1fr auto auto 50px;
}
.chipcard--02 .chipcard__hero { grid-row: 2; padding-top: 0; }
.chipcard--02 .chipcard__plate--mid { grid-row: 3; }
.chipcard--02 .chipcard__plate--ink { grid-row: 4; }

.chipcard--03 {
  grid-template-rows: 60px auto auto 1fr 50px;
}
.chipcard--03 .chipcard__plate--top2 { grid-row: 2; margin-top: 30px; }
.chipcard--03 .chipcard__plate--produced { grid-row: 3; }
.chipcard--03 .chipcard__plate--bignum { grid-row: 4; align-self: end; padding-bottom: 12px; }

.chipcard--04 {
  grid-template-rows: 60px auto auto auto 1fr 50px;
}
.chipcard--04 .chipcard__plate--orange { grid-row: 2; margin-top: 20px; }
.chipcard--04 .chipcard__plate--mid { grid-row: 3; }
.chipcard--04 .chipcard__plate--ink { grid-row: 4; }

/* hide old svc styles when chipcard used */
.services__grid--chip + * { margin-top: 0; }

/* footer sayhi card — orange UA 570-B style */
.foot__col--sayhi {
  background: var(--orange);
  border-radius: 18px;
  padding: 0;
  color: var(--ink);
  overflow: hidden;
  border: none;
}
.foot__col--sayhi::before { display: none; }
.sayhicard {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 18px 22px 16px;
  text-decoration: none;
  color: var(--ink);
  min-height: 100%;
  transition: filter .3s var(--eo);
}
.sayhicard:hover { filter: brightness(1.05); }
.sayhicard__top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: .18em;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
}
.sayhicard__body { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 12px; }
.sayhicard__lbl { font-size: 11px; letter-spacing: .18em; opacity: .85; }
.sayhicard__note { font-size: 10px; letter-spacing: .14em; opacity: .7; margin-top: 4px; text-transform: uppercase; }
.sayhicard__big {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 110%;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.sayhicard__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink);
  font-size: 10px; letter-spacing: .18em;
}
.sayhicard__foot .barcode {
  flex: 1;
  background: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 6px, var(--ink) 6px 9px, transparent 9px 11px);
  height: 24px;
  max-width: none;
  opacity: .9;
}

/* notch / sandisk-style service cards */
.services__grid--notch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 1100px) { .services__grid--notch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .services__grid--notch { grid-template-columns: 1fr; } }

.notchcard {
  position: relative;
  aspect-ratio: 1 / 1.05;
  min-height: 280px;
  padding: 26px 28px;
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
  border-radius: 22px;
  -webkit-mask:
    radial-gradient(28px at calc(100% - 64px) 36px, #0000 98%, #000),
    radial-gradient(28px at 100% calc(36px + 64px), #0000 98%, #000);
  mask:
    radial-gradient(28px at calc(100% - 64px) 36px, #0000 98%, #000),
    radial-gradient(28px at 100% calc(36px + 64px), #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: transform .55s var(--eo);
}
.notchcard:hover { transform: translateY(-4px); }
.notchcard--coral { background: var(--coral); color: var(--paper); }
.notchcard--cream { background: #d9d6cd; color: var(--ink); }
.notchcard--blue  { background: #2a52d9; color: var(--paper); }
.notchcard--white { background: var(--paper); color: var(--ink); }

.notchcard__icon { align-self: flex-start; color: currentColor; display: inline-flex; }
.notchcard__body { display: flex; flex-direction: column; gap: 6px; }
.notchcard__num {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 110%;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -.02em; line-height: 1;
  margin: 0;
}
.notchcard__lbl {
  font-size: 13px; line-height: 1.4;
  opacity: .85;
  max-width: 24ch;
  margin: 0;
}

/* ticket / banner cards */
.services .services__grid--ticket {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  margin: 36px auto 0;
  max-width: 1180px;
  grid-template-columns: none;
}
.services__grid--ticket > .ticket { width: 100%; }
.ticket {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 22px 32px 20px;
  border-radius: 22px;
  color: var(--paper);
  background: #1a1a18;
  border: 1.5px solid rgba(244,239,229,.14);
  transition: transform .55s var(--eo), border-color .35s var(--eo), background .4s var(--eo);
  -webkit-mask:
    radial-gradient(18px at 0 50%, #0000 98%, #000),
    radial-gradient(18px at 100% 50%, #0000 98%, #000);
  mask:
    radial-gradient(18px at 0 50%, #0000 98%, #000),
    radial-gradient(18px at 100% 50%, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.ticket:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--acc) 22%, #1a1a18);
  border-color: var(--acc);
}
.ticket:hover .ticket__title { color: var(--acc); }
.ticket:hover .ticket__corner { opacity: .9; }

/* retro accent: small color bar per category instead of full fill */
.ticket--lilac  { --acc: #8a82c9; }
.ticket--coral  { --acc: var(--coral); }
.ticket--sage   { --acc: var(--sage); }
.ticket--orange { --acc: var(--orange); }
.ticket--ink    { --acc: var(--paper); background: #0c0b09; border-color: rgba(244,239,229,.22); }
.ticket--ink:hover { background: color-mix(in oklab, var(--paper) 8%, #0c0b09); }

.ticket__corner {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: .18em;
  opacity: .55;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,239,229,.14);
  text-transform: uppercase;
  font-family: var(--f-mono);
}
.ticket__corner::after {
  content: "● " attr(data-acc);
  color: var(--acc);
  letter-spacing: .14em;
  opacity: .9;
}
.ticket__body {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 32px;
  padding: 22px 0 18px;
  align-items: center;
}
.ticket__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #0e0e0d;
  border: 1px solid rgba(244,239,229,.1);
}
.ticket__thumb .ph { position: absolute; inset: 0; border-radius: 0; }
.ticket__thumbtag {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(14,14,13,.92); color: var(--paper);
  padding: 4px 9px; border-radius: 4px;
  font-size: 9px; letter-spacing: .14em;
  z-index: 2;
  border: 1px solid rgba(244,239,229,.15);
}
.ticket__main { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.ticket__title {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700; font-stretch: 110%;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .9; letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color .35s var(--eo);
}
.ticket__title br { display: none; }
.ticket__r { font-size: .26em; vertical-align: super; color: var(--acc); margin-left: .08em; font-weight: 500; }
.ticket__pill {
  display: inline-block;
  background: transparent;
  color: var(--paper);
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-family: var(--f-mono);
  letter-spacing: .04em;
  opacity: .72;
}
.ticket__cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  border: 1px solid rgba(244,239,229,.3);
  transition: gap .35s var(--eo), background .3s var(--eo), color .3s var(--eo), border-color .3s var(--eo);
  white-space: nowrap;
}
.ticket:hover .ticket__cta {
  gap: 16px;
  background: var(--acc);
  color: var(--ink);
  border-color: var(--acc);
}
.ticket__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(244,239,229,.14);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .18em;
  opacity: .55;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .ticket { padding: 20px 22px 18px; }
  .ticket__body { grid-template-columns: 1fr; gap: 18px; padding: 18px 0; }
  .ticket__title { font-size: clamp(36px, 11vw, 56px); }
  .ticket__cta { align-self: flex-start; }
}

.hero--min { padding-top: 96px; padding-bottom: 64px; gap: 32px; min-height: auto; }
.hero--min .hero3__top { padding: 28px 0 8px; }
.hero--min .hero3__sub { opacity: .55; }

/* hide the old iframe slot when the hero is background-video mode */
.hero3__videocenter--hidden { display: none; }

/* ============== FULL-BLEED HERO BACKGROUND VIDEO ============== */
.hero--bgvid {
  position: relative;
  isolation: isolate;
  padding: 0;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100vh;
}

/* video stage — holds the bgvideo + the title + book-a-call CTA */
.hero__stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 78vh, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px clamp(18px, 4vw, 60px) clamp(40px, 6vh, 80px);
  overflow: hidden;
}
.hero--bgvid .hero3__top {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  padding: 0;
}
.hero--bgvid .hero3__sub {
  display: flex;
  gap: clamp(20px, 6vw, 80px);
  justify-content: center;
}

/* stat row sits below on solid black */
.hero--bgvid .hero3__statrow {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
  padding: clamp(20px, 3vw, 36px) clamp(18px, 4vw, 60px) clamp(28px, 4vw, 48px);
  margin-top: 0;
}

.hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
}
.hero__bgvideo-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* zoom past baked-in letterbox bars in the source file */
  transform: scale(1.22);
  transform-origin: center center;
  opacity: 0;
  will-change: opacity;
  animation: heroVidIn 900ms ease-out 150ms forwards;
  backface-visibility: hidden;
}
@keyframes heroVidIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* feather the video into the page background so any residual letterbox seam dissolves */
.hero__bgvideo {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 8%,
    #000 88%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 8%,
    #000 88%,
    transparent 100%);
}

/* shimmer loader behind the video — visible until the video fades in */
.hero__bgvideo-loader {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(217,119,87,.18), transparent 60%),
    radial-gradient(120% 80% at 80% 90%, rgba(45,90,80,.22), transparent 60%),
    linear-gradient(115deg, #141414 0%, #1d1d1d 30%, #2a2622 50%, #1d1d1d 70%, #141414 100%);
  background-size: 100% 100%, 100% 100%, 220% 100%;
  animation: heroLoaderShift 3.4s ease-in-out infinite;
}
@keyframes heroLoaderShift {
  0%, 100% { background-position: 0% 0, 0 0, 0% 0; }
  50%      { background-position: 0% 0, 0 0, 100% 0; }
}

/* darkening scrim so titles stay legible */
.hero__bgvideo-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 30%, rgba(0,0,0,.35) 65%, rgba(0,0,0,.85) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 0%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}

/* faint film-grain on top */
.hero__bgvideo-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .25;
  pointer-events: none;
}

/* brand line blends with the video underneath (inverted/difference) */
.hero--bgvid .hero3__line--brand {
  color: #f4efe5;
  mix-blend-mode: difference;
  text-shadow: none;
}
.hero--bgvid .hero3__line--out {
  -webkit-text-stroke: 1.5px rgba(244,239,229,.92);
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.hero--bgvid .hero3__sub { color: rgba(244,239,229,.85); }

/* Book-a-call CTA inside the hero */
.hero3__ctarow {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 3vw, 32px);
  position: relative;
  z-index: 2;
}
.herocta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 18px;
  border: 1.5px solid rgba(244,239,229,.45);
  border-radius: 999px;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--f-disp);
  transition: border-color .25s var(--eo), background .25s var(--eo), transform .25s var(--eo);
}
.herocta:hover {
  border-color: var(--coral);
  background: rgba(229,89,71,.18);
  transform: translateY(-2px);
}
.herocta__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(229,89,71,.7);
  animation: livePulse 1.6s var(--eo) infinite;
  flex: none;
}
.herocta__label {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
}
.herocta__arrow {
  font-size: 22px;
  margin-left: 4px;
  transition: transform .25s var(--eo);
}
.herocta:hover .herocta__arrow { transform: translate(3px, -3px); }

/* hero video peeking through the outlined title (legacy — replaced by .hero--bgvid full-bleed) */
.hero3__top--video { position: relative; }

.hero3__videocenter {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.hero3__statrow {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .hero3__statrow { grid-template-columns: 1fr; } }

/* services with bullets */
.svc--min2 {
  min-height: 360px;
  padding: 24px 24px 22px;
  display: flex; flex-direction: column;
}
.svc--min2 .svc__head { padding-bottom: 14px; border-bottom: 1.5px solid currentColor; }
.svc--min2 .svc__bullets {
  list-style: none; margin: 18px 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.svc--min2 .svc__bullets li {
  font-size: 13px;
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.svc--min2 .svc__bullets li::before {
  content: "▸";
  position: absolute; left: 0; top: 0;
  font-family: var(--f-mono); font-size: 11px;
}
.svc--min2 .svc__copy { margin: 0 0 18px; font-size: 13px; line-height: 1.5; opacity: .85; }
.svc--min2 .svc__cta {
  margin-top: auto; padding-top: 14px;
  border-top: 1.5px solid currentColor;
  font-size: 11px; letter-spacing: .14em;
}

.trustedby--min .trustedby__head {
  display: flex; justify-content: space-between;
  padding: 0 18px 14px;
  font-size: 11px; letter-spacing: .12em; opacity: .55;
}

.hcard--min {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 32px 32px 28px;
  gap: 56px;
  min-height: 0;
  text-decoration: none;
}
.hcard__minnum {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(48px, 5vw, 84px);
  line-height: .85; letter-spacing: -.04em;
  color: var(--ink);
}
.hcard__minnum--cta {
  font-size: clamp(34px, 3.4vw, 56px);
  text-transform: none;
  letter-spacing: -.02em;
}
.hcard__minlbl {
  font-size: 10px; letter-spacing: .14em; opacity: .8;
  max-width: 22ch; line-height: 1.4;
}
.hcard--cta { transition: background .3s var(--eo); }
.hcard--cta:hover { filter: brightness(1.05); }

.hero3__videoframe--min {
  background: transparent;
  border: 0; padding: 0;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.hero3__videoframe--min::before { display: none; }

/* trustedby min: no head, just the strip, fade edges */
.trustedby--min { padding: 56px 0 40px; }
.trustedby--min .trustedby__strip {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* services min */
.services--min { padding: clamp(72px, 9vw, 140px) 18px; }
.services--min .services__grid { gap: 14px; grid-template-columns: repeat(4, 1fr); }
.svc--min {
  min-height: 280px;
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.svc--min .svc__head { padding-bottom: 14px; border-bottom: 1.5px solid currentColor; }
.svc--min .svc__copy { margin-top: auto; font-size: 13px; line-height: 1.5; max-width: 28ch; }
@media (max-width: 1100px) { .services--min .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services--min .services__grid { grid-template-columns: 1fr; } }

/* work min */
.work--min { padding: clamp(72px, 9vw, 140px) 18px; }
.work__grid--min { gap: 14px; }
.reel__overlay--min .reel__overlay-r { display: none; }
.reel__meta--min { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px; }
.reel__meta--min h4 { margin: 0; font-size: 16px; font-weight: 600; }
.reel__meta--min .mono { font-size: 11px; opacity: .65; letter-spacing: .08em; }

/* howework min */
.howework--min { padding: clamp(72px, 9vw, 140px) 18px; }
.howework__grid--min { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prinx--min {
  padding: 28px 28px 32px;
  min-height: 200px;
  display: flex; flex-direction: column; gap: 12px;
}
.prinx--min .prinx__h { margin: 0; }
.prinx--min p { font-size: 14px; line-height: 1.5; max-width: 32ch; }
@media (max-width: 900px) { .howework__grid--min { grid-template-columns: 1fr; } }

/* solve min */
.solve--min { padding: clamp(96px, 12vw, 180px) 18px; }
.solve--min .solve__list { display: flex; flex-direction: column; gap: 0; }
.solve__row--min {
  display: grid; grid-template-columns: 80px 1fr; gap: 28px;
  padding: 36px 0;
  border-top: 1.5px solid rgba(244,239,229,.12);
}
.solve__row--min:last-child { border-bottom: 1.5px solid rgba(244,239,229,.12); }
.solve__row--min .solve__no {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(36px, 3vw, 48px);
  letter-spacing: -.02em; line-height: 1;
  color: var(--orange);
}
.solve__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.solve__problem-text {
  font-family: var(--f-disp); font-weight: 600; font-stretch: 110%;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25; letter-spacing: -.01em;
  opacity: .55;
  margin: 0;
  text-wrap: pretty;
}
.solve__answer-text {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 115%;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25; letter-spacing: -.01em;
  margin: 0;
  text-wrap: pretty;
  color: var(--paper);
}
@media (max-width: 800px) {
  .solve__row--min { grid-template-columns: 60px 1fr; gap: 18px; padding: 24px 0; }
  .solve__pair { grid-template-columns: 1fr; gap: 14px; }
}

/* reviews min */
.reviews--min { padding: clamp(72px, 9vw, 140px) 18px; }
.reviews__grid--min { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review--min { padding: 26px 28px 22px; min-height: 280px; display: flex; flex-direction: column; }
.review__rating { font-size: 14px; letter-spacing: .14em; color: var(--ink); margin-bottom: 14px; opacity: .9; }
.review--min .review__quote {
  margin: 0 0 20px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; flex: 1;
  font-family: var(--f-body); font-weight: 400; letter-spacing: -.005em;
  text-wrap: pretty;
}
.review--min .review__foot {
  border-top: 1.5px solid currentColor; padding-top: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.review--min .review__foot strong { font-weight: 600; font-size: 14px; }
.review--min .review__foot .mono { font-size: 10px; letter-spacing: .1em; opacity: .8; }
@media (max-width: 900px) { .reviews__grid--min { grid-template-columns: 1fr; } }

/* faq min */
.faq--min { padding: clamp(72px, 9vw, 140px) 18px; }
.faq--min .faq__list { margin-top: 28px; }
.faq--min .faq__item details summary { grid-template-columns: 1fr 40px; padding: 22px 4px; }
.faq--min .faq__a { padding: 0 4px 22px 4px; }

/* contact min */
.contact--min { padding: clamp(72px, 9vw, 140px) 18px clamp(60px, 8vw, 120px); }
.contact__inner--min { display: flex; justify-content: center; }
.contact__inner--min .contact__copy { max-width: 880px; text-align: left; }

/* footer min */
.foot--min .foot__main--min { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 28px; }
@media (max-width: 800px) { .foot--min .foot__main--min { grid-template-columns: 1fr 1fr; } }

/* legacy hero v2 fallback below */

/* =================== reviews =================== */
.reviews { padding: clamp(60px, 8vw, 120px) 18px; }
.reviews__rating { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.reviews__stars { font-size: clamp(28px, 3vw, 44px); letter-spacing: .12em; color: var(--orange); }
.reviews__ratingline { opacity: .65; letter-spacing: .12em; }

.reviews__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.review {
  border-radius: var(--r-card);
  padding: 22px 24px;
  display: flex; flex-direction: column;
  min-height: 280px;
  color: var(--ink);
  transition: transform .55s var(--eo);
  position: relative;
  overflow: hidden;
}
.review:hover { transform: translateY(-4px); }
.review--orange { background: var(--orange); }
.review--coral { background: var(--coral); }
.review--sage { background: var(--sage); }
.review--gray { background: var(--gray); }

.review__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1.5px solid currentColor;
  font-size: 11px; letter-spacing: .12em;
}
.review__quote {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 18px 0 22px;
  flex: 1;
  text-wrap: pretty;
}
.review__foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1.5px solid currentColor;
}
.review__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  flex: 0 0 auto;
}
.review__who { display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
.review__who strong { font-weight: 600; font-size: 14px; }
.review__who .mono { font-size: 10px; letter-spacing: .1em; opacity: .8; }

@media (max-width: 1100px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .reviews__grid { grid-template-columns: 1fr; }
  .section__head--split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .reviews__rating { align-items: flex-start; text-align: left; }
}
.hero--v2 {
  position: relative;
  padding: 88px 18px 0;
  min-height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
}
.hero__corners { position: absolute; inset: 78px 24px 24px 24px; pointer-events: none; z-index: 5; }
.corner {
  position: absolute;
  font-size: 9px; line-height: 1.3;
  letter-spacing: .12em;
  opacity: .5;
}
.corner--tl { top: 6px; left: 0; }
.corner--tr { top: 6px; right: 0; text-align: right; }
.corner--bl { bottom: 6px; left: 0; }
.corner--br { bottom: 6px; right: 0; text-align: right; }

.hero__wordmark {
  text-align: center;
  padding: 16px 0 6px;
  position: relative;
}
.hero__title {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(80px, 17vw, 320px);
  line-height: .82;
  letter-spacing: -.05em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
}
.hero__line { position: relative; }
.hero__line--out {
  -webkit-text-stroke: 2px var(--paper);
  color: transparent;
  letter-spacing: -.04em;
}
.hero__r { color: var(--orange); font-size: .22em; vertical-align: super; -webkit-text-stroke: 0; }
.hero__sub {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1280px;
  margin: 14px auto 0;
  padding: 0 14px;
  opacity: .6;
}
.hero__sub-r { text-align: right; }

/* 4-card collage */
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.2fr;
  grid-template-rows: 320px 240px;
  gap: 14px;
  flex: 1;
  min-height: 580px;
}
.hcard {
  border-radius: var(--r-card);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .55s var(--eo);
}
.hcard:hover { transform: translateY(-4px); }
.hcard--coral { background: var(--coral); color: var(--ink); }
.hcard--orange { background: var(--orange); color: var(--ink); }
.hcard--sage { background: var(--sage); color: var(--ink); }
.hcard--gray { background: var(--gray); color: var(--ink); }

.hcard--A { grid-column: 1; grid-row: 1 / span 2; padding: 18px; }
.hcard--B { grid-column: 2; grid-row: 1 / span 2; }
.hcard--C { grid-column: 3; grid-row: 1; }
.hcard--D { grid-column: 3; grid-row: 2; }

.hcard__topbar, .hcard__bottombar {
  display: flex; justify-content: space-between; align-items: center;
}
.hcard__topbar { padding-bottom: 12px; border-bottom: 1.5px solid currentColor; }
.hcard__bottombar { padding-top: 12px; border-top: 1.5px solid currentColor; margin-top: auto; gap: 12px; }
.hcard__art {
  position: relative;
  flex: 1;
  margin: 12px 0;
  border-radius: 14px;
  overflow: hidden;
}
.hcard__playbtn {
  position: absolute; bottom: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  z-index: 3;
}
.hcard__playbtn-i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

.hcard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1.5px solid currentColor;
}
.hcard__head .mono { letter-spacing: .12em; }
.hcard__arrow { width: 56px; height: 56px; flex: 0 0 auto; color: currentColor; }

.hcard__statgrid {
  display: grid;
  grid-template-columns: 1.4fr 100px 1.4fr;
  gap: 24px;
  padding: 24px 0;
  flex: 1;
  align-items: center;
  border-bottom: 1.5px solid currentColor;
}
.bigstat { display: flex; flex-direction: column; gap: 6px; }
.bigstat__num {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(56px, 6.5vw, 124px);
  line-height: .82; letter-spacing: -.05em;
  color: var(--ink);
}
.bigstat__lbl { opacity: .8; max-width: 14ch; line-height: 1.3; }

.hcard__copy { margin: 16px 0 12px; font-size: 13px; max-width: 56ch; line-height: 1.5; }
.hcard__foot {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding-top: 12px; border-top: 1.5px solid currentColor;
  margin-top: auto;
}

.hcard__big {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(48px, 4.5vw, 84px);
  line-height: .85; letter-spacing: -.04em;
  color: var(--ink);
  margin: 18px 0;
  text-decoration: none;
  display: block;
  flex: 1;
}
.hcard__big:hover { text-decoration: underline; }

.hcard__row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1.5px solid currentColor; margin-top: auto;
}

.hcard__bigwrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.bignum--lg { font-size: clamp(80px, 9vw, 168px); }

.hcard--coral .barcode,
.hcard--coral .speclist__row { border-color: rgba(14,14,13,.6); }

@media (max-width: 1100px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 360px 220px 220px;
  }
  .hcard--A { grid-column: 1 / span 2; grid-row: 1; }
  .hcard--B { grid-column: 1 / span 2; grid-row: 2 / span 2; }
  .hcard--C { grid-column: 1; grid-row: 4; }
  .hcard--D { grid-column: 2; grid-row: 4; }
  .hero__grid { grid-template-rows: 360px auto auto 200px; }
  .hcard__statgrid { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
}
@media (max-width: 640px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hcard--A, .hcard--B, .hcard--C, .hcard--D { grid-column: 1; }
  .hcard--A { grid-row: 1; min-height: 320px; }
  .hcard--B { grid-row: 2; }
  .hcard--C { grid-row: 3; }
  .hcard--D { grid-row: 4; min-height: 200px; }
  .hero__sub { flex-direction: column; gap: 4px; text-align: center; }
}

/* legacy hero classes stay as fallback for detail pages */
.hero {
  position: relative;
  padding: 100px 18px 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tape {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-bottom: 18px;
  overflow: hidden;
  white-space: nowrap;
}
.tape .mono { opacity: .65; font-size: 10px; }
.tape__sep { width: 6px; height: 6px; background: var(--paper); opacity: .35; border-radius: 50%; flex: 0 0 auto; }

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 2fr;
  gap: 18px;
  flex: 1;
  align-items: stretch;
}

/* Postercard (left, red) */
.postercard {
  position: relative;
  background: var(--coral);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex; flex-direction: column;
  min-height: 640px;
  overflow: hidden;
  transition: transform .6s var(--eo);
}
.postercard__topbar, .postercard__bottombar {
  display: flex; justify-content: space-between; align-items: center;
}
.postercard__topbar { padding-bottom: 14px; border-bottom: 1.5px solid rgba(14,14,13,.85); }
.postercard__bottombar { padding-top: 14px; border-top: 1.5px solid rgba(14,14,13,.85); margin-top: auto; }
.postercard__art {
  position: relative;
  flex: 1;
  margin: 14px 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(14,14,13,.08);
}
.postercard__pill {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .04em;
  background: var(--ink); color: var(--paper);
  padding: 6px 12px; border-radius: var(--r-pill);
  text-transform: uppercase;
}
.kanji {
  position: absolute;
  font-family: var(--f-jp);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 124px);
  line-height: .9;
  color: var(--ink);
  bottom: 8px; left: 12px;
  letter-spacing: -.02em;
}
.kanji--inline {
  position: static;
  font-size: 56px;
  color: var(--ink);
  align-self: center;
  padding: 0 8px;
}

/* Statcard (right, orange) */
.statcard {
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: 28px 32px;
  display: flex; flex-direction: column;
  gap: 22px;
  min-height: 640px;
  position: relative;
  overflow: hidden;
}
.statcard__row { display: flex; }
.statcard__row--head {
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1.5px solid rgba(14,14,13,.85);
  padding-bottom: 18px;
}
.bigtitle {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(64px, 9.5vw, 168px);
  line-height: .82;
  letter-spacing: -.04em;
  margin: 0;
  font-stretch: 125%;
  text-transform: none;
  position: relative;
}
.bigtitle--sm { font-size: clamp(48px, 5.5vw, 96px); }
.bigtitle__r { font-size: .25em; vertical-align: super; opacity: .65; }
.bigtitle .dot--coral { width: .12em; height: .12em; vertical-align: top; margin-left: .04em; transform: translateY(.18em); }
.statcard__arrow {
  width: 100px; height: 100px;
  flex: 0 0 auto;
  color: var(--ink);
  align-self: flex-start;
}

.statcard__row--specs {
  display: grid;
  grid-template-columns: 90px 1fr 90px 1.1fr;
  gap: 24px;
  align-items: center;
  border-bottom: 1.5px solid rgba(14,14,13,.85);
  padding-bottom: 22px;
}
.statcard__copy {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  opacity: .9;
  margin: 0;
}

/* ADSR meter */
.adsr {
  display: flex; flex-direction: column;
  gap: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 8px;
}
.adsr__bars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  height: 80px;
  align-items: end;
}
.adsr__bars span {
  display: block;
  width: 100%;
  height: calc(var(--h) * 100%);
  background: linear-gradient(to top, var(--coral) 0%, var(--coral) 50%, var(--ink) 50%, var(--ink) 100%);
  border-radius: 2px;
  animation: bar-flicker 1.6s var(--eo) infinite alternate;
}
.adsr__bars span:nth-child(2) { animation-delay: .1s; }
.adsr__bars span:nth-child(3) { animation-delay: .2s; }
.adsr__bars span:nth-child(4) { animation-delay: .3s; }
@keyframes bar-flicker {
  from { height: calc(var(--h) * 100%); }
  to { height: calc(max(.1, var(--h) - 0.1) * 100%); }
}
.adsr__labels {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}
.adsr__cap {
  font-size: 9px;
  letter-spacing: .14em;
  opacity: .7;
  text-transform: uppercase;
  padding: 0 2px 2px;
}

/* Look-dev meter — style passes preview (AI-native) */
.lookdev {
  display: flex; flex-direction: column;
  gap: 6px;
  border: 1.5px solid currentColor;
  border-radius: 10px;
  padding: 8px;
}
.lookdev__cells {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  height: 110px;
}
.lookdev__cell {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: #14110e;
}
.lookdev__cell::before {
  content: ""; position: absolute; inset: 0;
}
.lookdev__cell::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.05) 3px 4px),
    radial-gradient(60% 45% at 50% 38%, rgba(255,255,255,.18), transparent 70%);
  mix-blend-mode: screen;
  animation: lookdev-flicker 2.4s var(--eo, ease-in-out) infinite alternate;
}
/* Pass 1 — BASE: flat geometry / neutral grey roughs */
.lookdev__cell--1::before {
  background:
    linear-gradient(180deg, #1d1c1a 0%, #2c2a27 55%, #5a5650 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px);
}
/* Pass 2 — STYLE: painterly Arcane-ish */
.lookdev__cell--2::before {
  background:
    radial-gradient(70% 50% at 40% 35%, #6a3a2a 0%, transparent 65%),
    linear-gradient(180deg, #16110e 0%, #3a221a 50%, #7a3a22 100%);
}
/* Pass 3 — GRADE: coral / orange filmic */
.lookdev__cell--3::before {
  background:
    radial-gradient(60% 40% at 50% 38%, #f0c887 0%, transparent 60%),
    linear-gradient(180deg, #221814 0%, #6a2c1c 45%, #c95e3a 100%);
}
/* Pass 4 — FINAL: rich, layered, key + rim */
.lookdev__cell--4::before {
  background:
    radial-gradient(45% 35% at 55% 30%, #f5e4c8 0%, transparent 60%),
    radial-gradient(80% 60% at 20% 90%, #5a1a10 0%, transparent 65%),
    linear-gradient(180deg, #0e0b09 0%, #4a1e14 35%, #e0a15e 100%);
}
.lookdev__cell:nth-child(2)::after { animation-delay: .2s; }
.lookdev__cell:nth-child(3)::after { animation-delay: .4s; }
.lookdev__cell:nth-child(4)::after { animation-delay: .6s; }
@keyframes lookdev-flicker {
  from { opacity: .82; transform: translateY(0); }
  to   { opacity: 1;   transform: translateY(-1px); }
}
.lookdev__labels {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding-top: 4px;
  opacity: .85;
}

/* spec list */
.speclist {
  display: flex; flex-direction: column;
  gap: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
}
.speclist__id {
  position: absolute;
  top: -8px; left: 14px;
  background: inherit;
  background-color: var(--orange);
  padding: 0 6px;
  font-size: 10px;
}
.svc--coral .speclist__id { background-color: var(--coral); }
.svc--sage .speclist__id { background-color: var(--sage); }
.svc--gray .speclist__id { background-color: var(--gray); }
.statcard--sm .speclist__id, .statcard .speclist__id { background-color: var(--orange); }

.speclist__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  font-size: 11px;
  border-top: 1px dashed rgba(14,14,13,.45);
  padding-top: 6px;
}
.speclist__row:first-of-type { border-top: 0; padding-top: 0; }
.speclist__k { opacity: .75; }
.speclist__v {
  background: var(--ink); color: var(--paper);
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
}
.speclist--full { padding: 14px 16px; }
.speclist--full .speclist__row { padding: 8px 0; }

/* gauges */
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gauge {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px 4px;
}
.gauge__lbl { font-size: 9px; font-weight: 700; }
.gauge__col {
  width: 18px; height: 60px;
  border: 1px solid var(--ink);
  position: relative;
  display: flex; align-items: flex-end;
}
.gauge__bar {
  width: 100%;
  height: 35%;
  background: var(--ink);
  animation: gauge-pump 2s var(--eo) infinite alternate;
}
.gauge__bar--full { height: 80%; }
@keyframes gauge-pump {
  from { height: 35%; }
  to { height: 70%; }
}

/* footer of card */
.statcard__row--foot {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.barcode {
  flex: 1;
  height: 22px;
  background: repeating-linear-gradient(
    to right,
    var(--ink) 0 1px, transparent 1px 3px,
    var(--ink) 3px 5px, transparent 5px 6px,
    var(--ink) 6px 9px, transparent 9px 11px
  );
  max-width: 240px;
  opacity: .9;
}
.dial {
  display: inline-flex; gap: 4px;
}
.dial span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.dial span:nth-child(2) { background: linear-gradient(to right, var(--ink) 50%, transparent 50%); }
.dial span:nth-child(3) { background: linear-gradient(to right, var(--ink) 75%, transparent 75%); }

/* placeholder image block */
.ph {
  width: 100%; height: 100%;
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    rgba(14,14,13,.16) 0 12px,
    rgba(14,14,13,.08) 12px 24px
  );
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph__label {
  font-size: 10px; opacity: .65;
  background: rgba(14,14,13,.85);
  color: var(--paper);
  padding: 4px 8px;
  border-radius: 4px;
}
.ph--photo {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(180deg, #2c2a26 0%, #181715 100%);
  color: var(--paper);
}
.ph--mech {
  background:
    repeating-linear-gradient(135deg, rgba(14,14,13,.18) 0 14px, rgba(14,14,13,.06) 14px 28px),
    linear-gradient(180deg, #c45341 0%, #b04332 100%);
}
.ph--photo .ph__label { background: rgba(239,234,224,.92); color: var(--ink); }

/* marquee */
.marquee {
  margin: 26px -18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  overflow: hidden;
}
.marquee__track {
  display: inline-flex; gap: 36px; align-items: center;
  white-space: nowrap;
  animation: marq 60s linear infinite;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-stretch: 125%;
}
.marquee__track i {
  color: var(--coral);
  font-style: normal;
  font-size: .6em;
  transform: translateY(-.05em);
}
@keyframes marq {
  to { transform: translateX(-50%); }
}

/* =================== sections shared =================== */
.section__head {
  padding: 120px 18px 48px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 1280px;
}
.section__head--split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  max-width: none;
  flex-wrap: wrap;
  gap: 32px;
}
.section__index { opacity: .55; letter-spacing: .12em; }
.section__title {
  font-family: var(--f-disp);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(48px, 7vw, 120px);
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--paper);
}
.section__title em {
  font-family: var(--f-jp);
  font-style: italic;
  font-weight: 700;
  color: var(--orange);
}
.section__sub {
  max-width: 460px;
  font-size: 16px;
  opacity: .7;
  margin: 0;
}

/* =================== services =================== */
.services { padding: 0 18px 80px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.svc {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--r-card);
  color: var(--ink);
  position: relative;
  min-height: 520px;
  transition: transform .55s var(--eo), box-shadow .55s var(--eo);
  transform-style: preserve-3d;
  perspective: 1000px;
  overflow: hidden;
  cursor: pointer;
}
.svc:hover { transform: translateY(-6px) rotate3d(1,1,0,1.5deg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.svc--orange { background: var(--orange); grid-column: span 7; }
.svc--coral { background: var(--coral); color: var(--paper); grid-column: span 5; }
.svc--coral .speclist, .svc--coral .speclist__row,
.svc--coral .barcode, .svc--coral .dial span { border-color: var(--paper); }
.svc--coral .barcode { background: repeating-linear-gradient(to right, var(--paper) 0 1px, transparent 1px 3px, var(--paper) 3px 5px, transparent 5px 6px, var(--paper) 6px 9px, transparent 9px 11px); }
.svc--coral .speclist__row { border-top-color: rgba(239,234,224,.4); }
.svc--coral .speclist__id { color: var(--paper); }
.svc--coral .speclist__v { background: var(--paper); color: var(--ink); }
.svc--coral .dial span:nth-child(2) { background: linear-gradient(to right, var(--paper) 50%, transparent 50%); }
.svc--coral .dial span:nth-child(3) { background: linear-gradient(to right, var(--paper) 75%, transparent 75%); }

.svc--sage { background: var(--sage); grid-column: span 5; }
.svc--gray { background: var(--gray); grid-column: span 7; }

.svc__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 16px;
}
.svc__title {
  font-family: var(--f-disp);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(54px, 6vw, 96px);
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0;
  text-transform: uppercase;
  position: relative;
}
.svc__dot {
  display: inline-block; width: .12em; height: .12em; background: var(--coral); border-radius: 50%;
  vertical-align: top; transform: translateY(.18em); margin-left: .04em;
}
.svc--coral .svc__dot { background: var(--ink); }
.svc__arrow { color: currentColor; opacity: .9; }
.svc__meter {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: stretch;
}
.svc__copy { margin: 0; font-size: 14px; line-height: 1.5; max-width: 56ch; }
.svc__foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding-top: 14px; border-top: 1.5px solid currentColor;
}

.bignum {
  font-family: var(--f-disp); font-weight: 900;
  font-size: 96px; line-height: .8;
  letter-spacing: -.06em;
  font-stretch: 125%;
  position: relative;
  color: var(--ink);
}
.bignum::after {
  content: "5";
  position: absolute; left: .42em; top: 0;
  color: var(--coral);
  z-index: -1;
  transform: translateX(2px);
}
.bignum__r { font-size: .22em; vertical-align: super; opacity: .7; }

/* wireframe cube (3D) */
.wireframe { display: flex; align-items: center; justify-content: center; height: 100%; }
.wireframe__cube {
  position: relative;
  width: 80px; height: 80px;
  transform-style: preserve-3d;
  animation: spin 12s linear infinite;
}
.wireframe__cube .face {
  position: absolute; inset: 0;
  border: 1.5px solid var(--ink);
  background: rgba(14,14,13,.05);
}
.face--front { transform: translateZ(40px); }
.face--back { transform: rotateY(180deg) translateZ(40px); }
.face--right { transform: rotateY(90deg) translateZ(40px); }
.face--left { transform: rotateY(-90deg) translateZ(40px); }
.face--top { transform: rotateX(90deg) translateZ(40px); }
.face--bottom { transform: rotateX(-90deg) translateZ(40px); }
@keyframes spin {
  from { transform: rotateX(-25deg) rotateY(0); }
  to { transform: rotateX(-25deg) rotateY(360deg); }
}

/* =================== work =================== */
.work { padding: 0 18px 80px; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 320px;
  gap: 14px;
}
.reel {
  grid-column: span var(--span, 1);
  grid-row: span var(--h, 1);
  border-radius: var(--r-card-sm);
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .5s var(--eo);
}
.reel:hover { transform: translateY(-4px); }
.reel__media { flex: 1; position: relative; }
.reel__meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.reel__meta h4 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
.reel__meta .mono { opacity: .55; }
.reel.is-hidden { display: none; }

/* featured case-study reel */
.reel--feature { background: var(--ink); border: 1px solid var(--line); }
.reel__media--img {
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  position: relative;
  display: flex; align-items: stretch;
}
.reel__media--img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,12,.15) 0%, rgba(12,12,12,.55) 55%, rgba(12,12,12,.92) 100%);
}
.reel__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--coral); color: var(--paper);
  padding: 6px 10px; border-radius: var(--r-pill);
  font-size: 10px;
}
.reel__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: end;
  padding: 28px;
}
.reel__overlay-l { display: flex; flex-direction: column; gap: 12px; max-width: 540px; }
.reel__overlay-r { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.reel__big {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(64px, 7vw, 124px);
  line-height: .85; letter-spacing: -.04em;
  margin: 4px 0 6px;
  text-transform: none;
  color: var(--paper);
}
.reel__lead { margin: 0; max-width: 46ch; opacity: .85; font-size: 14px; }
.reel--feature .speclist { background: rgba(239,234,224,.06); border-color: var(--paper); color: var(--paper); padding: 14px 16px; }
.reel--feature .speclist__id { background: var(--coral); color: var(--paper); top: -9px; }
.reel--feature .speclist__row { border-top-color: rgba(239,234,224,.18); padding: 6px 0; }
.reel--feature .speclist__k { opacity: .75; }
.reel--feature .speclist__v { background: var(--paper); color: var(--ink); }
.reel__cta { align-self: flex-start; }

@media (max-width: 1100px) {
  .reel--feature { grid-column: span 2 !important; grid-row: span 2 !important; }
  .reel__overlay { grid-template-columns: 1fr; padding: 18px; }
}
@media (max-width: 640px) {
  .reel--feature { grid-column: span 1 !important; }
  .reel__big { font-size: 44px; }
}
.tag {
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .04em;
  flex: 0 0 auto;
}
.tag--orange { background: var(--orange); color: var(--ink); }
.tag--coral { background: var(--coral); color: var(--paper); }
.tag--sage { background: var(--sage); color: var(--ink); }
.tag--gray { background: var(--gray); color: var(--ink); }

.filterbar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.filter {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  display: inline-flex; gap: 8px; align-items: center;
  transition: background .25s var(--eo), color .25s var(--eo);
}
.filter .mono { opacity: .55; font-size: 10px; }
.filter:hover { background: rgba(239,234,224,.06); }
.filter.is-active { background: var(--paper); color: var(--ink); }
.filter.is-active .mono { opacity: .55; }

.work__cta { display: flex; justify-content: center; padding: 56px 0 0; }

/* =================== process =================== */
.process { padding: 0 18px 100px; }
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.step {
  position: relative;
  padding: 26px 24px 60px;
  border-radius: var(--r-card-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
  min-height: 280px;
  transition: transform .5s var(--eo), background .5s var(--eo);
  overflow: hidden;
}
.step:hover { transform: translateY(-4px); background: #1a1a18; }
.step__no {
  font-size: 12px; opacity: .55;
  display: block; margin-bottom: 24px;
}
.step__title {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: 44px; line-height: .9; letter-spacing: -.03em;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.step:nth-child(1) .step__title { color: var(--orange); }
.step:nth-child(2) .step__title { color: var(--coral); }
.step:nth-child(3) .step__title { color: var(--sage); }
.step:nth-child(4) .step__title { color: var(--gray); }
.step p { margin: 0; opacity: .8; font-size: 14px; }
.step__t {
  position: absolute; bottom: 24px; left: 24px;
  opacity: .55;
}

/* =================== contact =================== */
.contact { padding: 60px 18px 80px; }
.contact__inner {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.contact__big {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: clamp(80px, 14vw, 240px);
  line-height: .82;
  letter-spacing: -.05em;
  margin: 12px 0 28px;
  text-transform: uppercase;
}
.contact__big .bigtitle__r { color: var(--orange); }
.contact__copy p { font-size: 16px; opacity: .7; max-width: 460px; margin: 0 0 28px; }
.contact__row { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__card.statcard--sm { min-height: 0; }

/* =================== footer =================== */
.foot { border-top: 1px solid var(--line); margin-top: 40px; }

.foot__band {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  overflow: hidden;
}
.foot__bandtrack {
  display: inline-flex; gap: 28px; align-items: center;
  white-space: nowrap;
  animation: marq 80s linear infinite;
  font-family: var(--f-disp);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(72px, 12vw, 192px);
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--paper);
}
.foot__bandtrack sup { font-size: .25em; vertical-align: super; opacity: .55; color: var(--orange); }
.foot__bandtrack i { color: var(--coral); font-style: normal; font-size: .5em; transform: translateY(-.05em); }

.foot__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
  gap: 32px;
  padding: 56px 24px 40px;
  border-bottom: 1px solid var(--line);
}
.foot__col { display: flex; flex-direction: column; gap: 14px; }
.foot__col--lead { gap: 18px; }
.foot__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: 22px; letter-spacing: -.02em;
}
.foot__brand .brandmark { color: var(--orange); }
.foot__r { color: var(--orange); font-size: 12px; vertical-align: super; }
.foot__lede { margin: 0; opacity: .7; font-size: 14px; max-width: 38ch; line-height: 1.55; }
.foot__live { display: inline-flex; align-items: center; gap: 10px; opacity: .8; }
.foot__h { opacity: .55; letter-spacing: .12em; margin: 0 0 4px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot__col li a {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 14px; opacity: .85;
  transition: opacity .25s var(--eo), transform .25s var(--eo);
}
.foot__col li a:hover { opacity: 1; transform: translateX(3px); color: var(--orange); }

.foot__minicard {
  background: var(--orange); color: var(--ink);
  border-radius: var(--r-card-sm);
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.foot__minicard-top, .foot__minicard-bot {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 8px;
}
.foot__minicard-bot { border-bottom: 0; border-top: 1.5px solid var(--ink); padding: 8px 0 0; }
.foot__minicard-mid { display: flex; flex-direction: column; gap: 6px; }
.foot__email {
  font-family: var(--f-disp); font-weight: 900; font-stretch: 125%;
  font-size: 22px; line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
}
.foot__email:hover { text-decoration: underline; }

.foot__row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 11px; opacity: .65;
  padding: 16px 24px;
}
.foot__spacer { flex: 1; }
.foot__back { color: var(--orange); }
.foot__back:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .foot__main { grid-template-columns: 1fr 1fr; }
  .foot__col--lead, .foot__col--card { grid-column: span 2; }
}
@media (max-width: 640px) {
  .foot__main { grid-template-columns: 1fr; }
  .foot__col--lead, .foot__col--card { grid-column: span 1; }
}

/* old single-row footer (keeping for compat) */
.foot > .foot__row:only-child { padding: 18px; }

/* =================== reveal anims =================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--eo), transform .9s var(--eo);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =================== page transition curtain =================== */
/* Pre-paint ink overlay — drawn by CSS on every page before JS runs.
   Eliminates the flash between the new page painting and the JS-built
   curtain mounting. Removed instantly the moment the real curtain mounts. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998;
  background: var(--ink);
  pointer-events: none;
}
body.vfm-curtain-mounted::before { display: none; }

/* Cinematic horizontal-seam curtain. Two halves meet at center on exit,
   split open on enter. Tagline + brand mark flashes at the seam. */
.vfm-curtain {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: block;
}
.vfm-curtain__half {
  position: absolute;
  left: 0; right: 0;
  height: 51%; /* tiny overlap so the seam never shows a hairline gap */
  background: var(--ink);
  will-change: transform;
  /* OPEN ease — long release */
  transition: transform .95s cubic-bezier(.16,1,.3,1);
}
.vfm-curtain__half--top    { top: 0;    transform: translate3d(0,-101%,0); }
.vfm-curtain__half--bottom { bottom: 0; transform: translate3d(0, 101%,0); }
/* SEALED — both halves meet in the middle */
.vfm-curtain.is-sealed .vfm-curtain__half {
  /* CLOSE ease — snappier acceleration */
  transition: transform .8s cubic-bezier(.7,0,.3,1);
}
.vfm-curtain.is-sealed .vfm-curtain__half--top,
.vfm-curtain.is-sealed .vfm-curtain__half--bottom {
  transform: translate3d(0,0,0);
}
/* Faint hairline along the seam */
.vfm-curtain__half--top::after,
.vfm-curtain__half--bottom::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,158,88,.55) 20%, rgba(213,92,69,.55) 80%, transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
.vfm-curtain__half--top::after    { bottom: 0; }
.vfm-curtain__half--bottom::before { top: 0; }
.vfm-curtain.is-sealed .vfm-curtain__half--top::after,
.vfm-curtain.is-sealed .vfm-curtain__half--bottom::before { opacity: 1; }

/* Center mark — appears in the seam when sealed */
.vfm-curtain__mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--paper);
  opacity: 0;
  transition: opacity .4s ease .05s, letter-spacing 1s var(--eo);
  letter-spacing: .22em;
  text-align: center;
  padding: 0 24px;
}
.vfm-curtain__mark svg { color: var(--orange); }
.vfm-curtain__mark-line {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: min(86vw, 720px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.vfm-curtain__mark-r { color: var(--orange); font-size: 9px; vertical-align: super; }
.vfm-curtain.is-sealed .vfm-curtain__mark { opacity: 1; letter-spacing: .34em; }

/* Boot phase: curtain is mounted sealed on first paint with NO animation.
   Removed via a forced reflow before transitions are re-enabled. */
.vfm-boot .vfm-curtain__half { transition: none !important; }
.vfm-boot .vfm-curtain__mark { transition: none !important; }

/* While curtain is closed/sealing we don't want the page to scroll */
html.vfm-locked, html.vfm-locked body { overflow: hidden; }

/* Hero soft-rise — extra polish for first-fold content on each page */
.vfm-rise > * {
  opacity: 0;
  transform: translateY(18px);
  animation: vfmRise .9s var(--eo) forwards;
}
.vfm-rise > *:nth-child(1) { animation-delay: .05s; }
.vfm-rise > *:nth-child(2) { animation-delay: .15s; }
.vfm-rise > *:nth-child(3) { animation-delay: .25s; }
.vfm-rise > *:nth-child(4) { animation-delay: .35s; }
.vfm-rise > *:nth-child(5) { animation-delay: .45s; }
.vfm-rise > *:nth-child(6) { animation-delay: .55s; }
@keyframes vfmRise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vfm-curtain, .vfm-rise > * { animation: none !important; transition: none !important; }
  .vfm-curtain { display: none !important; }
}

/* =================== responsive =================== */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .postercard, .statcard { min-height: 480px; }
  .services__grid > .svc { grid-column: span 12; }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .reel { grid-column: span 1 !important; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .contact__inner { grid-template-columns: 1fr; }
  .topnav__links { display: none; }
  .topnav { grid-template-columns: 1fr auto; }
  .statcard__row--specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .work__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .steps { grid-template-columns: 1fr; }
  .topnav__meta .btn { display: none; }
  .statcard__row--specs { grid-template-columns: 1fr; }
}


/* ============================================================
   Selected projects — minimal 2+3 grid (homepage)
   ============================================================ */
.selproj__grid {
  max-width: 1280px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.selproj__tile {
  grid-column: span 2;
  display: flex; flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--paper);
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.selproj__tile--wide { grid-column: span 3; }
.selproj__tile:hover { transform: translateY(-3px); }

.selproj__thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: #131312;
  border: 1px solid rgba(244,239,229,.08);
  transition: border-color .35s var(--eo);
}
.selproj__tile:hover .selproj__thumb { border-color: rgba(244,239,229,.22); }
.selproj__thumb .ph,
.selproj__thumb .reel__media {
  position: absolute; inset: 0; border-radius: 0;
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}
.selproj__cat {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: rgba(14,14,13,.85);
  border: 1px solid rgba(244,239,229,.18);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 9px; letter-spacing: .16em;
}
.selproj__meta {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}
.selproj__name {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}
.selproj__date {
  font-size: 10px; letter-spacing: .14em; opacity: .55;
}

/* views badge — top-right of thumb */
.selproj__views {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px 6px 12px;
  background: rgba(14,14,13,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244,239,229,.22);
  border-radius: 4px;
  color: var(--paper);
  line-height: 1;
}
.selproj__views-num {
  font-family: var(--f-disp);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: .01em;
}
.selproj__views-lbl {
  font-size: 8.5px; letter-spacing: .18em; opacity: .65;
}
.selproj__tile--wide .selproj__views-num { font-size: clamp(22px, 2.2vw, 34px); }

/* keep this thumb above the global film-grain overlay */
.selproj__thumb--clean { isolation: isolate; z-index: 95; }
.selproj__thumb--clean .reel__media--img::before { display: none; }

@media (max-width: 1000px) {
  .selproj__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .selproj__tile, .selproj__tile--wide { grid-column: span 1; }
}
@media (max-width: 600px) {
  .selproj__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   ENGINE / PIPELINE WIDGET  (replaces the .adsr meter)
   Side-cutaway view of a 4-cylinder block. Pistons sit at
   different stroke heights = BRIEF / BOARDS / GEN / CUT.
   .adsr CSS above is left intact for easy revert.
   =========================================================== */
.engine {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 8px;
  border: 1.5px solid currentColor;
  border-radius: 10px;
}
.engine__cap {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
  padding: 0 2px;
}
.engine__cap b { font-weight: 700; opacity: 1; }

.engine__block {
  position: relative;
  padding: 10px 12px 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #1f1d1a 0%, #0c0b09 55%, #050402 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.35);
  overflow: hidden;
}
/* faint vertical machining grooves */
.engine__block::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 4px);
  pointer-events: none; opacity: .55;
}

.engine__plugs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 4px;
  position: relative; z-index: 1;
}
.engine__plugs i {
  display: block; height: 8px;
  margin: 0 auto;
  width: 14px;
  background: linear-gradient(180deg, #6a635a 0%, #2a2622 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.4);
  position: relative;
}
.engine__plugs i::after {
  content: ""; position: absolute; left: 50%; top: -3px;
  transform: translateX(-50%);
  width: 6px; height: 3px;
  background: currentColor;
  color: var(--engine-spark, #efeae0);
  border-radius: 1px;
  opacity: .85;
}

.engine__cylinders {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 80px;
  position: relative; z-index: 1;
}
.engine__cyl {
  position: relative;
  border-radius: 18px 18px 4px 4px;
  background:
    radial-gradient(ellipse 110% 60% at 50% 0%, #2a2723 0%, transparent 70%),
    linear-gradient(180deg, #0a0908 0%, #1a1815 50%, #0a0908 100%);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.85),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(0,0,0,.6),
    inset 0 -2px 0 rgba(0,0,0,.7);
  overflow: visible;
}
/* clip-path keeps the piston body inside the bore shape
   but still lets the connecting rod hang below into the crank */
.engine__cyl {
  clip-path: inset(0 0 -80px 0 round 18px 18px 4px 4px);
}
/* glossy bore highlight */
.engine__cyl::before {
  content: ""; position: absolute;
  left: 18%; top: 6%; width: 12%; height: 88%;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 70%);
  border-radius: 50%;
  filter: blur(.5px);
}

.engine__piston {
  position: absolute;
  left: 14%; right: 14%;
  bottom: calc(var(--s, .5) * 56%);
  height: 22%;
  border-radius: 2px;
  background:
    linear-gradient(180deg,
      var(--engine-piston-1, #d8d2c4) 0%,
      var(--engine-piston-2, #efeae0) 35%,
      var(--engine-piston-3, #8a8076) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 3px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35);
}
/* piston rings */
.engine__piston::before,
.engine__piston::after {
  content: ""; position: absolute; left: 6%; right: 6%;
  height: 1px;
  background: rgba(0,0,0,.55);
}
.engine__piston::before { top: 35%; }
.engine__piston::after  { top: 60%; }

/* connecting rod — child of the piston, slides up & down with it */
.engine__rod {
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  width: 5px;
  height: 55px;
  background:
    linear-gradient(90deg,
      #14110e 0%,
      #3a342d 30%,
      #5a544c 50%,
      #3a342d 70%,
      #14110e 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
  pointer-events: none;
  z-index: 0;
}
/* old disconnected rod — turn it off */
.engine__cyl > .engine__piston + .rod,
.engine__cyl::after { content: none; }

.engine__crank {
  position: relative; z-index: 3;
  margin-top: 6px;
  height: 14px;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(180deg, #14120f 0%, #2a2622 40%, #0a0908 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 2px 0 rgba(0,0,0,.4);
  display: flex; justify-content: space-around; align-items: center;
  padding: 0 8px;
}
.engine__crank i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7a7268 0%, #1a1815 75%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}

.engine__labels {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 12px 0;
}
.engine__labels span { color: currentColor; opacity: .85; }

/* ---- per-page accent palettes for the pistons ---- */
/* AI ADS (orange page) — cream/paper pistons, white spark */
.phero--orange .engine__piston {
  --engine-piston-1: #efeae0;
  --engine-piston-2: #ffffff;
  --engine-piston-3: #9c958a;
}


/* SOCIAL MEDIA (coral page) — sage green pistons for contrast pop */
.phero--coral .engine__piston {
  --engine-piston-1: #b8c69e;
  --engine-piston-2: #9caa85;
  --engine-piston-3: #4d5840;
}

.phero--coral .engine { border-color: var(--paper); }

/* LONG FORM (sage page) — warm amber/orange pistons */
.phero--sage .engine__piston {
  --engine-piston-1: #f0b378;
  --engine-piston-2: #e89e58;
  --engine-piston-3: #7a4f23;
}

/* ANIMATION (gray page) — coral/red pistons for warm pop on cool gray */
.phero--gray .engine__piston {
  --engine-piston-1: #e88770;
  --engine-piston-2: #d55c45;
  --engine-piston-3: #6e2818;
}


/* ---- engine running animation: pistons stroke + sparks fire ---- */
@keyframes piston-stroke {
  0%, 100% { bottom: 4%; }
  50%      { bottom: 56%; }
}
@keyframes spark-pulse {
  0%, 78%, 100% { opacity: .25; transform: translateX(-50%) scale(.9); box-shadow: none; }
  82%, 92%      { opacity: 1;   transform: translateX(-50%) scale(1.35); box-shadow: 0 0 6px currentColor, 0 0 2px #fff; }
}
@keyframes block-rumble {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-0.4px); }
  50%      { transform: translateY(0.3px); }
  75%      { transform: translateY(-0.2px); }
}

.engine__piston {
  animation: piston-stroke 1.05s linear infinite;
}
.engine__block {
  animation: block-rumble 0.18s steps(2, end) infinite;
  will-change: transform;
}
.engine__plugs i::after {
  animation: spark-pulse 1.05s linear infinite;
  color: var(--engine-spark, #efeae0);
}

/* firing order 1-3-4-2 → phase the pistons & matching sparks */
.engine__cylinders .engine__cyl:nth-child(1) .engine__piston { animation-delay: 0s; }
.engine__cylinders .engine__cyl:nth-child(2) .engine__piston { animation-delay: -0.7875s; }
.engine__cylinders .engine__cyl:nth-child(3) .engine__piston { animation-delay: -0.2625s; }
.engine__cylinders .engine__cyl:nth-child(4) .engine__piston { animation-delay: -0.525s; }

.engine__plugs i:nth-child(1)::after { animation-delay: 0s; }
.engine__plugs i:nth-child(2)::after { animation-delay: -0.7875s; }
.engine__plugs i:nth-child(3)::after { animation-delay: -0.2625s; }
.engine__plugs i:nth-child(4)::after { animation-delay: -0.525s; }

/* per-page spark color (matches the piston accent for cohesion) */
.phero--orange .engine__plugs i::after { color: #efeae0; }
.phero--coral  .engine__plugs i::after { color: #b8c69e; }
.phero--sage   .engine__plugs i::after { color: #e89e58; }
.phero--gray   .engine__plugs i::after { color: #e88770; }

@media (prefers-reduced-motion: reduce) {
  .engine__piston,
  .engine__plugs i::after,
  .engine__block { animation: none; }
}

/* ============================================================
   VPLAYER — Industrial CD player widget (Social Media hero)
   Right: realistic compact disc with concentric grooves, spectral
   sheen, brass-bolt spindle. Left: armored module with phone-style
   screen, cinematic album art, track list with JS-cycled playhead.
   Top/bottom: bolted-on ribbed armor plates with visible rivets.
   ============================================================ */
.vplayer {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse at 25% 15%, #0e0e0d 0%, #050504 65%, #020202 100%);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--f-mono);
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(0,0,0,.7);
}

/* ============== CD chassis (right side) ============== */
.vplayer__cd {
  position: absolute;
  top: 12%; right: 1.5%; bottom: 12%;
  width: 70%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #2a2a28 0%, #131312 40%, #0a0a09 75%, #050504 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 40px rgba(0,0,0,.9),
    0 6px 18px rgba(0,0,0,.7);
}

/* outer chassis subtle ridge */
.vplayer__cd::before {
  content: "";
  position: absolute; inset: 4%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.7);
  pointer-events: none;
}

/* ribbed armor plates — top + bottom, bolted on */
.vplayer__cd-ribTop,
.vplayer__cd-ribBot {
  position: absolute;
  left: 4%; right: 4%;
  height: 11%;
  background:
    linear-gradient(180deg, #1a1a18 0%, #0a0a09 50%, #050504 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0 1px,
      transparent 1px 3px);
  background-blend-mode: normal, screen;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 2px 4px rgba(0,0,0,.5);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.vplayer__cd-ribTop { top: 4%; }
.vplayer__cd-ribBot { bottom: 4%; }
.vplayer__cd-ribTop::before,
.vplayer__cd-ribBot::before {
  /* fine horizontal grille lines */
  content: "";
  position: absolute; inset: 2px;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.04) 0 1px,
      transparent 1px 2px);
  border-radius: 2px;
  pointer-events: none;
}
.vplayer__cd-stencil {
  position: relative;
  font-size: 6px;
  letter-spacing: .26em;
  color: rgba(239,234,224,.35);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}

/* rivets pinning the plates */
.vplayer__cd-screw {
  position: absolute; z-index: 5;
  width: 8px; height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      #5a5a57 0%,
      #2a2a28 40%,
      #0a0a09 75%,
      #050504 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px rgba(0,0,0,.6);
}
.vplayer__cd-screw::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 50%;
  height: 1.2px;
  background: rgba(0,0,0,.85);
  transform: translateY(-50%) rotate(38deg);
  border-radius: 1px;
}
.vplayer__cd-screw--tl { top: 5.5%; left: 7%; }
.vplayer__cd-screw--tr { top: 5.5%; right: 7%; }
.vplayer__cd-screw--bl { bottom: 5.5%; left: 7%; }
.vplayer__cd-screw--br { bottom: 5.5%; right: 7%; }

/* ============== the disc itself ============== */
.vplayer__disc {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  /* layered: spectral sheen + radial grooves + dark base */
  background:
    /* center dark */
    radial-gradient(circle at center,
      transparent 0%,
      transparent 18%,
      rgba(0,0,0,.4) 22%,
      transparent 28%),
    /* fine grooves */
    repeating-radial-gradient(circle at center,
      rgba(255,255,255,.02) 0 .8px,
      transparent .8px 2.2px),
    /* base */
    radial-gradient(circle at 38% 30%,
      #3a3a37 0%,
      #1c1c1a 25%,
      #0a0a09 60%,
      #020202 95%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 25px rgba(0,0,0,.85),
    0 2px 6px rgba(0,0,0,.5);
  overflow: hidden;
}
/* spectral conic sheen */
.vplayer__disc-sheen {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg,
      rgba(120,180,220,0) 0deg,
      rgba(150,200,230,.12) 28deg,
      rgba(220,180,150,.10) 60deg,
      rgba(200,220,180,.05) 100deg,
      rgba(255,255,255,0) 150deg,
      rgba(180,160,220,.10) 220deg,
      rgba(180,220,200,.14) 270deg,
      rgba(220,200,150,.08) 320deg,
      rgba(120,180,220,0) 360deg);
  mix-blend-mode: screen;
  filter: blur(4px);
  animation: vp-spin 22s linear infinite;
  pointer-events: none;
}
/* tight specular highlight */
.vplayer__disc::after {
  content: "";
  position: absolute;
  left: 12%; top: 8%;
  width: 35%; height: 35%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 30%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 25%,
      transparent 55%);
  filter: blur(2px);
  pointer-events: none;
}

/* curved title text using SVG */
.vplayer__disc-text {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.vplayer__disc-title,
.vplayer__disc-sub {
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(239,234,224,.6);
  letter-spacing: 0;
}
.vplayer__disc-title {
  font-size: 10.5px;
  font-weight: 700;
}
.vplayer__disc-sub {
  font-size: 5.5px;
  fill: rgba(239,234,224,.32);
}

/* badge top center */
.vplayer__disc-badge {
  position: absolute;
  top: 7%; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  background:
    linear-gradient(180deg, #1a1a18 0%, #050504 100%);
  color: rgba(239,234,224,.75);
  font-size: 6px;
  letter-spacing: .18em;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.7);
  z-index: 3;
}
.vplayer__disc-badge-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: #d55c45;
  box-shadow: 0 0 5px #d55c45, 0 0 2px rgba(255,180,160,.8);
}

/* "compact disc DIGITAL AUDIO" mark */
.vplayer__disc-logo {
  position: absolute;
  right: 9%; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: rgba(239,234,224,.5);
  font-family: 'JetBrains Mono', monospace;
  z-index: 3;
}
.vplayer__disc-logo-mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(239,234,224,.55);
  position: relative;
  margin-bottom: 2px;
}
.vplayer__disc-logo-mark::before,
.vplayer__disc-logo-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(239,234,224,.4);
}
.vplayer__disc-logo-mark::after { inset: 6px; border-color: rgba(239,234,224,.3); }
.vplayer__disc-logo-txt {
  font-size: 6px;
  letter-spacing: .04em;
  font-style: italic;
  text-transform: lowercase;
}
.vplayer__disc-logo-txt em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
}
.vplayer__disc-logo-sub {
  font-size: 5px;
  letter-spacing: .22em;
  color: rgba(239,234,224,.38);
}

/* small "RESTRICTED" tag at bottom */
.vplayer__disc-restricted {
  position: absolute;
  bottom: 8%; left: 50%; transform: translateX(-50%);
  background:
    linear-gradient(180deg, #0e0e0d 0%, #050504 100%);
  color: rgba(239,234,224,.5);
  font-size: 5.5px;
  letter-spacing: .18em;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ============== center spindle hub ============== */
.vplayer__spindle {
  position: absolute;
  top: 50%; left: calc(1.5% + 70% / 2);
  width: 17%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 4;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      #3a3a37 0%,
      #1c1c1a 35%,
      #0e0e0d 75%,
      #050504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 1px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 3px 7px rgba(0,0,0,.75);
}
/* outer ring around the bolt */
.vplayer__spindle::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #1a1a18 0%,
      #0a0a09 60%,
      #020202 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 1px rgba(0,0,0,.6);
}
/* the bolt with cross slot */
.vplayer__spindle-bolt {
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%,
      #2a2a28 0%,
      #131312 50%,
      #050504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 2px rgba(0,0,0,.85),
    0 1px 2px rgba(0,0,0,.6);
}
/* cross-slot screw */
.vplayer__spindle-bolt::before,
.vplayer__spindle-bolt::after {
  content: "";
  position: absolute;
  background:
    linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.6));
  border-radius: 1.5px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.vplayer__spindle-bolt::before {
  left: 50%; top: 18%; bottom: 18%;
  width: 3px; transform: translateX(-50%);
}
.vplayer__spindle-bolt::after {
  top: 50%; left: 18%; right: 18%;
  height: 3px; transform: translateY(-50%);
}

/* ============== Phone module fills the entire widget ============== */
.vplayer__module {
  position: relative;
  width: 100%;
  z-index: 5;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #1a1a18 0%, #0a0a09 50%, #050504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 6px 16px rgba(0,0,0,.75);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* faint vertical grooves on the casing */
.vplayer__module-ribs {
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 4px);
  pointer-events: none;
}
/* top & bottom mini grilles inside the module */
.vplayer__module::before,
.vplayer__module::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%;
  height: 5%;
  background:
    linear-gradient(180deg, #131312 0%, #050504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(0,0,0,.5);
  border-radius: 2px;
}
.vplayer__module::before {
  top: 3%;
  background:
    linear-gradient(180deg, #131312 0%, #050504 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  background-blend-mode: screen;
}
.vplayer__module::after { bottom: 3%; }

/* rivets on the module casing */
.vplayer__module-screw {
  position: absolute; z-index: 2;
  width: 7px; height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      #5a5a57 0%,
      #2a2a28 40%,
      #0a0a09 75%);
  box-shadow:
    inset 0 -1px 1px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 2px rgba(0,0,0,.6);
  left: 50%; transform: translateX(-50%);
}
.vplayer__module-screw::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 50%;
  height: 1.2px;
  background: rgba(0,0,0,.85);
  transform: translateY(-50%) rotate(38deg);
  border-radius: 1px;
}
.vplayer__module-screw--t { top: 5%; }
.vplayer__module-screw--b { bottom: 5%; }

/* phone-style face */
.vplayer__phone {
  position: relative; z-index: 2;
  width: 100%;
  background:
    radial-gradient(ellipse at 50% 0%, #1c1c1a 0%, #0a0a09 60%, #050504 100%);
  border-radius: 6px;
  padding: 8px 8px 9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 0 18px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
}

.vplayer__phone-head {
  display: flex; flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 2px;
}
.vplayer__phone-title {
  font-size: 8px;
  letter-spacing: .14em;
  color: rgba(239,234,224,.92);
  font-weight: 700;
}
.vplayer__phone-sub {
  font-size: 6px;
  letter-spacing: .22em;
  color: rgba(239,234,224,.42);
}

/* ===== cinematic album-art frame ===== */
.vplayer__phone-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3.6 / 1;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, #2c2c2a 0%, #131312 40%, #050504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.55);
}
/* the moon/orb — small spinning sphere */
.vplayer__phone-art-blob {
  position: absolute;
  left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #f4efe4 0%,
      #d8d2c4 18%,
      #b8b3a8 38%,
      #6a6864 62%,
      #1a1a18 92%,
      transparent 100%);
  box-shadow:
    inset -3px -4px 8px rgba(0,0,0,.45),
    0 0 14px rgba(244,239,228,.18);
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: vp-orb-spin 9s linear infinite;
  will-change: transform;
}
.vplayer__phone-art-blob--2 {
  width: 6%;
  left: 60%; top: 42%;
  background:
    radial-gradient(circle at 40% 35%,
      rgba(244,239,228,.55) 0%,
      rgba(184,179,168,.15) 50%,
      transparent 80%);
  mix-blend-mode: screen;
  animation: vp-orb-glint 7s ease-in-out infinite alternate;
  filter: blur(1px);
}
/* faint film grain overlay */
.vplayer__phone-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 30% 70%,
      rgba(255,255,255,.02) 0 1px,
      transparent 1px 2px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* playback controls — minimal */
.vplayer__phone-ctrl {
  display: flex; gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 3px 0 4px;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.vp-icn {
  display: inline-block;
  width: 14px; height: 14px;
  position: relative;
  opacity: .75;
}
.vp-icn--prev::before,
.vp-icn--prev::after {
  content: "";
  position: absolute;
  top: 22%; bottom: 22%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 4px 4px 0;
  border-color: transparent rgba(239,234,224,.85) transparent transparent;
}
.vp-icn--prev::before { left: 5%; }
.vp-icn--prev::after { left: 50%; }

.vp-icn--loop {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.4px solid rgba(239,234,224,.78);
  margin: 1px 0;
}
.vp-icn--loop::before {
  content: "";
  position: absolute;
  right: -2px; top: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 2.5px 0 2.5px 3.5px;
  border-color: transparent transparent transparent rgba(239,234,224,.85);
}

.vp-icn--play {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(239,234,224,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 1px rgba(0,0,0,.2),
    0 1px 3px rgba(0,0,0,.5);
  opacity: 1;
}
.vp-icn--play::before {
  content: "";
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 3px 0 3px 4.5px;
  border-color: transparent transparent transparent #050504;
}

/* ===== track list ===== */
.vplayer__phone-list {
  list-style: none;
  margin: 0; padding: 4px 0 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.vplayer__phone-list li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 7.5px;
  letter-spacing: .02em;
  color: rgba(239,234,224,.6);
  line-height: 1.2;
  padding: 2px 3px;
  border-radius: 2px;
  transition: background .25s ease, color .25s ease;
}
.vplayer__phone-list .vp-no {
  font-size: 6.5px;
  text-align: center;
  color: rgba(239,234,224,.45);
  font-weight: 700;
}
.vplayer__phone-list .vp-name {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  text-transform: lowercase;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.vplayer__phone-list .vp-name .vp-sub {
  font-size: 5.5px;
  letter-spacing: .14em;
  color: rgba(239,234,224,.35);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}
.vplayer__phone-list .vp-time {
  font-size: 6.5px;
  color: rgba(239,234,224,.5);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.vplayer__phone-list li.is-playing {
  background:
    linear-gradient(90deg,
      rgba(213,92,69,.18) 0%,
      rgba(213,92,69,.05) 70%,
      transparent 100%);
  color: rgba(239,234,224,.98);
  box-shadow: inset 2px 0 0 var(--coral);
}
.vplayer__phone-list li.is-playing .vp-no {
  color: var(--coral);
  font-size: 8px;
}
.vplayer__phone-list li.is-playing .vp-name .vp-sub {
  color: rgba(239,234,224,.65);
}
.vplayer__phone-list li.is-playing .vp-time {
  color: rgba(239,234,224,.95);
}

@keyframes vp-spin {
  to { transform: rotate(360deg); }
}
@keyframes vp-orb-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes vp-orb-glint {
  0%   { transform: translate(0, 0); opacity: .9; }
  100% { transform: translate(-4%, 3%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vplayer__disc-sheen,
  .vplayer__phone-art-blob { animation: none; }
}
}


/* ============================================================
   REEL — vertical 35mm filmstrip module on the Animation page
   Six look-dev frames (wireframe / silhouette / blocking / paint
   / cel / hyper-real) scroll infinitely behind a "projector gate".
   JS cycles the style label + frame count in sync.
   ============================================================ */
.reel {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08 / 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(160deg, #3a3a37 0%, #1a1a18 50%, #0c0c0b 100%);
  border: 1.5px solid var(--paper);
  font-family: var(--f-mono);
  overflow: hidden;
  isolation: isolate;
}
.reel::before {
  /* film-can vignette */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  border-radius: inherit;
}

.reel__cap {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--paper);
  opacity: .85;
  padding: 0 2px 4px;
  flex: 0 0 auto;
}
.reel__cap b { font-weight: 700; opacity: 1; }

/* ---- the filmstrip stage ---- */
.reel__stage {
  position: relative;
  flex: 1;
  border-radius: 4px;
  background: #050504;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.reel__strip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: reel-scroll 9s linear infinite;
  will-change: transform;
}

.reel__frame {
  position: relative;
  flex: 0 0 50%;
  min-height: 0;
  margin: 3px 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 12px rgba(0,0,0,.5);
}

.reel__frame-no {
  position: absolute;
  top: 4px; left: 5px;
  font-size: 7px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.45);
  padding: 1px 4px;
  border-radius: 1px;
  z-index: 2;
}

/* ---- sprocket-hole columns drawn on the strip so they scroll with it ---- */
.reel__strip::before,
.reel__strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 9px;
  background:
    radial-gradient(circle at center,
      #050504 0 3px,
      #1a1a18 3px 4px,
      transparent 4px 100%) 0 0 / 100% 18px repeat-y;
  pointer-events: none;
  z-index: 3;
}
.reel__strip::before { left: 0; }
.reel__strip::after  { right: 0; }

/* ---- per-frame visual treatments ---- */
.reel__frame--wire {
  background:
    linear-gradient(135deg, #1a1a18 0%, #0e0e0d 100%),
    #0a0a08;
  background-blend-mode: normal;
}
.reel__frame--wire::before {
  /* faux wireframe globe */
  content: "";
  position: absolute; inset: 12% 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 39%, rgba(232,135,112,.42) 40%, transparent 41%),
    repeating-conic-gradient(from 0deg,
      transparent 0deg 18deg,
      rgba(232,135,112,.35) 18deg 18.6deg);
  -webkit-mask: radial-gradient(circle, black 50%, transparent 52%);
          mask: radial-gradient(circle, black 50%, transparent 52%);
}
.reel__frame--wire::after {
  content: "";
  position: absolute; inset: 12% 18%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg,
      rgba(232,135,112,.0) 0 7%,
      rgba(232,135,112,.4) 7% 7.4%);
  -webkit-mask: radial-gradient(circle, black 50%, transparent 52%);
          mask: radial-gradient(circle, black 50%, transparent 52%);
}

.reel__frame--silhouette {
  background:
    radial-gradient(ellipse at 50% 70%, #3a2418 0%, #1a1108 60%, #050302 100%);
}
.reel__frame--silhouette::before {
  content: "";
  position: absolute;
  left: 30%; right: 30%; top: 22%; bottom: 8%;
  background: #050302;
  clip-path: polygon(45% 0%, 60% 4%, 68% 18%, 65% 30%, 78% 40%, 90% 60%, 78% 100%, 22% 100%, 10% 60%, 22% 40%, 35% 30%, 32% 18%, 40% 4%);
}
.reel__frame--silhouette::after {
  /* warm rim light */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 30%,
      rgba(232,135,112,.55) 0%,
      rgba(232,135,112,.0) 28%);
  mix-blend-mode: screen;
}

.reel__frame--block {
  background:
    linear-gradient(180deg, #4a3528 0%, #2a1c14 60%, #110b06 100%);
}
.reel__frame--block::before {
  content: "";
  position: absolute;
  left: 18%; right: 22%; bottom: 12%; height: 60%;
  background:
    linear-gradient(160deg, #e88770 0%, #c75a3a 55%, #6e2818 100%);
  clip-path: polygon(0% 22%, 60% 0%, 100% 18%, 100% 88%, 70% 100%, 0% 100%);
}
.reel__frame--block::after {
  content: "";
  position: absolute;
  left: 26%; right: 36%; top: 18%; width: 26%; height: 28%;
  background: #d55c45;
  border-radius: 50%;
}

.reel__frame--paint {
  background:
    radial-gradient(ellipse at 30% 25%, #d28c5e 0%, #8a4a2a 35%, #2a1408 80%),
    linear-gradient(180deg, #3a1c10 0%, #0a0503 100%);
  background-blend-mode: multiply;
}
.reel__frame--paint::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(120deg,
      rgba(255,255,255,.0) 0 3px,
      rgba(255,200,150,.12) 3px 5px,
      rgba(0,0,0,.18) 5px 8px);
  mix-blend-mode: overlay;
  opacity: .8;
}
.reel__frame--paint::after {
  content: "";
  position: absolute; inset: 20%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,180,120,.55) 0%, transparent 60%);
  mix-blend-mode: screen;
  filter: blur(1px);
}

.reel__frame--cel {
  background:
    linear-gradient(160deg, #ffb78a 0%, #e07a4a 55%, #6e2818 100%);
}
.reel__frame--cel::before {
  /* hard cel shadow */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(140deg, transparent 50%, #5a1e0e 50%);
  opacity: .55;
}
.reel__frame--cel::after {
  /* line-art accent */
  content: "";
  position: absolute;
  left: 28%; right: 28%; top: 18%; bottom: 18%;
  border: 1.5px solid #1a0a04;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, #ffdcb0 0%, #f08a52 50%, #b04a22 100%);
  box-shadow: inset -2px -3px 0 rgba(0,0,0,.35);
}

.reel__frame--hyper {
  background:
    radial-gradient(ellipse at 40% 30%, #4a4a48 0%, #1a1a18 60%, #050504 100%);
}
.reel__frame--hyper::before {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: 18%; bottom: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%,
      #ffffff 0%,
      #f0c8a8 12%,
      #d27a4a 45%,
      #6e2818 78%,
      #1a0805 100%);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.6),
    0 4px 10px rgba(0,0,0,.5);
}
.reel__frame--hyper::after {
  /* highlight */
  content: "";
  position: absolute;
  left: 30%; top: 22%; width: 18%; height: 14%;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  filter: blur(2px);
}

/* ---- projector gate overlays (top + bottom letterbox) ---- */
.reel__gate-top,
.reel__gate-bot {
  position: absolute; left: 0; right: 0;
  height: 18%;
  background:
    linear-gradient(180deg, rgba(5,5,4,1) 0%, rgba(5,5,4,.5) 70%, transparent 100%);
  pointer-events: none;
  z-index: 4;
}
.reel__gate-bot {
  bottom: 0;
  transform: scaleY(-1);
  background:
    linear-gradient(180deg, rgba(5,5,4,1) 0%, rgba(5,5,4,.5) 70%, transparent 100%);
}
.reel__gate-top { top: 0; }

/* projector beam — soft amber sweep across the gate */
.reel__beam {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 14%;
  transform: translateY(-50%);
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255, 180, 120, 0.04) 20%,
      rgba(255, 180, 120, 0.18) 50%,
      rgba(255, 180, 120, 0.04) 80%,
      transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 5;
}

/* center crosshair (camera framing reticle) */
.reel__crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
  opacity: .55;
}
.reel__crosshair-h,
.reel__crosshair-v {
  position: absolute;
  background: var(--paper);
}
.reel__crosshair-h {
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.reel__crosshair-v {
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

/* ---- bottom labels ---- */
.reel__labels {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--paper);
  opacity: .9;
  padding: 4px 2px 0;
  flex: 0 0 auto;
}
.reel__style,
.reel__count {
  transition: opacity .18s ease;
  font-weight: 700;
}
.reel__style {
  background: var(--paper);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 2px;
}

@keyframes reel-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

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


/* =================== WhatsApp floating CTA =================== */
.wabtn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    0 2px 6px rgba(0,0,0,.3);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  animation: wabtn-pulse 2.4s ease-out infinite;
  overflow: hidden;
}
.wabtn:hover {
  background: #1ebe57;
  transform: scale(1.06);
  box-shadow:
    0 12px 30px rgba(0,0,0,.5),
    0 4px 10px rgba(0,0,0,.35);
  animation: none;
}
.wabtn:active { transform: scale(.98); }
.wabtn__svg {
  width: 32px;
  height: 32px;
  display: block;
  color: #fff;
}
.wabtn__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@keyframes wabtn-pulse {
  0%   { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 720px) {
  .wabtn {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
  .wabtn__svg { width: 28px; height: 28px; }
}