/* ============================================================
   AXEON STUDIO — HOME PAGE STYLES
   css/home.css
   ============================================================ */

/* ── Intro Screen ── */
#page { position: static; }

#intro {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bk);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100005;
  overflow: hidden;
}
#intro canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  display: block;
}

.ibox {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.ilogo, .idiv, .imotto, .iline { pointer-events: none; }

.ilogo {
  font-family: var(--fd);
  font-size: clamp(26px, 3.2vw, 48px);
  letter-spacing: .16em;
  color: #f2f0eb;
  opacity: 0;
  animation: fup .9s .3s ease forwards;
}
.ilogo em { color: var(--bl); font-style: normal; }

.idiv {
  width: 34px;
  height: 1px;
  background: rgba(255,255,255,.14);
  opacity: 0;
  animation: fup .6s .65s ease forwards;
}

.imotto {
  font-family: var(--fm);
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(242, 240, 235, .42);
  opacity: 0;
  animation: fup .8s .85s ease forwards;
  line-height: 2;
}
.imotto em { color: var(--bl); font-style: normal; }

#enterBtn {
  pointer-events: all;
  margin-top: 8px;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f2f0eb;
  border: 1px solid rgba(242, 240, 235, .5);
  padding: 16px 52px;
  background: transparent;
  position: relative;
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  animation: fup .8s 1.1s ease forwards;
  transition: border-color .3s;
  display: inline-block;
}
#enterBtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bl);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: -1;
}
#enterBtn:hover { border-color: var(--bl); }
#enterBtn:hover::before { transform: scaleX(1); }

.iline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  background: rgba(255,255,255,.09);
  animation: iline 1.4s .4s ease forwards;
  z-index: 1;
}
@keyframes iline { to { height: 60px; } }

/* Exit wipe */
.iov {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: 30;
  pointer-events: none;
}
#intro.out .iov { animation: wipe .7s .05s cubic-bezier(.76,0,.24,1) forwards; }
#intro.out .ibox { animation: fout .4s ease forwards; }
@keyframes wipe { to { transform: scaleY(1); } }
@keyframes fout { to { opacity: 0; transform: translateY(-14px); } }

/* Shared intro/hero animations */
@keyframes fup { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s .1s;
}
.hero.on { opacity: 1; }

.hleft {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 60px 90px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.hleft::before {
  content: 'AX';
  position: absolute;
  font-family: var(--fd);
  font-size: clamp(340px, 46vw, 620px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(13,13,13,.055);
  bottom: -60px; left: -30px;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -.02em;
  user-select: none;
}
.hleft::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13,13,13,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,13,13,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}
.hleft > * { position: relative; z-index: 2; }

.hero-side-label {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(13,13,13,.2);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}
.hero-year {
  position: absolute;
  top: 36px; right: 60px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(13,13,13,.22);
  z-index: 3;
}

.hey {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fup .8s .05s forwards;
  animation-play-state: paused;
}
.hey::before { content: ''; width: 24px; height: 1px; background: var(--bl); }

.htit {
  font-family: var(--fd);
  font-size: clamp(72px, 9.5vw, 145px);
  line-height: .91;
  color: var(--bk);
  opacity: 0;
  animation: fup .9s .2s forwards;
  animation-play-state: paused;
}
.htit .dim { color: transparent; -webkit-text-stroke: 2px rgba(26,74,255,.55); }
.htit .blu { color: var(--bl); }

.hdesc {
  margin-top: 26px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bkl);
  max-width: 400px;
  opacity: 0;
  animation: fup .8s .38s forwards;
  animation-play-state: paused;
}
.hdesc strong { color: var(--bk); font-weight: 400; }

.hact {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 38px;
  opacity: 0;
  animation: fup .8s .52s forwards;
  animation-play-state: paused;
}

.bblu {
  background: var(--bl);
  color: #fff;
  text-decoration: none;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 30px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.bblu span { position: relative; z-index: 1; }
.bblu::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--bld);
  transition: left .3s;
}
.bblu:hover::after { left: 0; }

.blin {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bkl);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}
.blin:hover { color: var(--bk); }
.blin svg { transition: transform .2s; }
.blin:hover svg { transform: translateX(5px); }

.ibadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--br);
  padding: 8px 13px;
  margin-top: 22px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bkl);
  width: fit-content;
  background: rgba(255,255,255,.4);
  opacity: 0;
  animation: fup .8s .66s forwards;
  animation-play-state: paused;
}

.dot {
  width: 6px; height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: blink 2s infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.22; } }

/* Trigger hero animations after intro */
body.go .hey,
body.go .htit,
body.go .hdesc,
body.go .hact,
body.go .ibadge { animation-play-state: running; }

.hright {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--br);
}
#hcanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Floating cards */
.fc {
  position: absolute;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--br);
  padding: 16px 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.fc1 { bottom: 18%; left: 6%;  animation: float 7s ease-in-out infinite; }
.fc2 { top: 20%;   right: 8%; animation: float 8s 1.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.fclb { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--bl); margin-bottom: 5px; }
.fcv  { font-family: var(--fd); font-size: 31px; line-height: 1; color: var(--bk); }
.fcs  { font-size: 11px; color: var(--bkl); margin-top: 4px; }

.apill {
  position: absolute;
  top: 50%; right: 8%;
  transform: translateY(-50%);
  background: rgba(26,74,255,.07);
  border: 1.5px solid rgba(26,74,255,.26);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: float 9s .5s ease-in-out infinite;
}
.aplb { font-family: var(--fm); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--bl); margin-bottom: 3px; }
.apt  { font-size: 12px; color: var(--bk); }

.scrollhint {
  position: absolute;
  bottom: 36px; left: 60px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bkl);
}
.shl {
  width: 36px; height: 1px;
  background: rgba(13,13,13,.13);
  position: relative;
  overflow: hidden;
}
.shl::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--bl);
  animation: scan 2s 1s ease-in-out infinite;
}
@keyframes scan { 0% { left:-100%; } 100% { left:100%; } }

/* ── AI Section ── */
.ais { background: var(--bg); }

.aig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center;
  margin-top: 52px;
}

.aiv {
  position: relative;
  height: 400px;
  background: #fff;
  border: 1px solid var(--br);
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.06);
}
.aivg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,74,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,74,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ainodes { position: absolute; inset: 0; }
.ainode {
  position: absolute;
  width: 7px; height: 7px;
  background: var(--bl);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ainode::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(26,74,255,.1);
  animation: np 2s ease-in-out infinite;
}
@keyframes np { 0%,100% { transform:scale(1); opacity:.35; } 50% { transform:scale(2.2); opacity:0; } }

.aivl {
  position: absolute;
  bottom: 18px; left: 18px; right: 18px;
  background: rgba(242,240,235,.94);
  border: 1px solid rgba(26,74,255,.16);
  padding: 13px 16px;
}
.aivt { font-family: var(--fm); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--bl); margin-bottom: 3px; }
.aivd { font-size: 13px; color: var(--bkl); line-height: 1.6; }

.aihl { font-family: var(--fd); font-size: clamp(36px,4.6vw,62px); line-height: .93; margin-bottom: 22px; color: var(--bk); }
.aihl em { color: var(--bl); font-style: normal; }
.aibody { font-size: 15px; line-height: 1.8; color: var(--bkl); margin-bottom: 28px; }

.aifl { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.aifl li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--bkl); line-height: 1.65; }
.ck { width: 19px; height: 19px; background: var(--blp); border: 1px solid rgba(26,74,255,.27); border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--bl); margin-top: 1px; }
.aifl li strong { color: var(--bk); font-weight: 400; }

.aich { display: flex; gap: 7px; flex-wrap: wrap; }
.aic { font-family: var(--fm); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--bl); border: 1.5px solid rgba(26,74,255,.26); padding: 5px 10px; background: var(--blp); }

/* ── Services (homepage flip cards) ── */
.svcs { background: var(--bg2); }

.scg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--br);
  background: #fff;
  perspective: 1200px;
}

.sc {
  padding: 0;
  border-right: 1px solid var(--br);
  position: relative;
  overflow: hidden;
  height: 260px;
}
.sc:last-child { border-right: none; }

.sc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.sc:hover .sc-inner { transform: rotateY(180deg); }

.sc-front, .sc-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  padding: 36px 24px 40px;
  display: flex;
  flex-direction: column;
}
.sc-front { background: #fff; }
.sc-back {
  background: var(--bl);
  transform: rotateY(180deg);
  justify-content: center;
}

.sc-back-title { font-family: var(--fd); font-size: 22px; color: #fff; margin-bottom: 12px; }
.sc-back-body  { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.75; flex: 1; }
.sc-back-cta {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color .2s;
}
.sc-back-cta:hover { color: #fff; }
.sc-back-cta::after { content: '→'; font-size: 13px; color: #fff; }

.scn    { font-family: var(--fm); font-size: 10px; letter-spacing: .17em; color: var(--bl); margin-bottom: 10px; }
.scname { font-family: var(--fd); font-size: 25px; letter-spacing: .02em; margin-bottom: 10px; line-height: 1; color: var(--bk); }
.scd    { font-size: 13px; line-height: 1.85; color: var(--bkl); }

/* ── Story Section (homepage) ── */
.story { background: var(--bk); position: relative; overflow: hidden; }
#scanv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .46; pointer-events: none; }

.stinn {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 84px;
  align-items: center;
}

.stey { font-family: var(--fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--bl); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.stey::before { content: ''; width: 20px; height: 1px; background: var(--bl); }
.sth { font-family: var(--fd); font-size: clamp(44px,5.8vw,82px); line-height: .93; color: #f2f0eb; margin-bottom: 28px; }
.sth em { color: var(--bl); font-style: normal; }
.stp { font-size: 15px; line-height: 1.9; color: rgba(242,240,235,.44); margin-bottom: 16px; }
.stp strong { color: #f2f0eb; font-weight: 400; }

.str { display: flex; flex-direction: column; gap: 2px; }
.strow {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .3s;
}
.strow:hover { background: rgba(26,74,255,.06); }
.stn  { font-family: var(--fd); font-size: 48px; line-height: 1; color: #f2f0eb; flex-shrink: 0; min-width: 100px; }
.stn em { color: var(--bl); font-style: normal; }
.sttxt { font-size: 13px; line-height: 1.7; color: rgba(242,240,235,.38); }
.sttxt strong { color: rgba(242,240,235,.74); font-weight: 400; display: block; margin-bottom: 2px; }

/* ── Iowa Section (homepage) ── */
.iowa { display: grid; grid-template-columns: 1fr 1fr; }

.iowal {
  padding: 76px 60px;
  background: var(--bk);
  position: relative;
  overflow: hidden;
}
.iowamap {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='320' viewBox='0 0 500 320'%3E%3Cpath d='M60 60L440 60 460 115 440 175 60 175Z' stroke='%23fff' stroke-width='2' fill='none'/%3E%3Ccircle cx='250' cy='117' r='8' fill='%23fff'/%3E%3Ccircle cx='250' cy='117' r='28' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.iowah { font-family: var(--fd); font-size: clamp(36px,4.6vw,62px); line-height: .93; margin-bottom: 18px; position: relative; z-index: 1; color: #f2f0eb; }
.iowah em { color: var(--bl); font-style: normal; }
.iowap { font-size: 15px; line-height: 1.8; color: rgba(242,240,235,.44); max-width: 320px; margin-bottom: 32px; position: relative; z-index: 1; }
.iowas { display: flex; gap: 28px; position: relative; z-index: 1; }
.iowasn { font-family: var(--fd); font-size: 44px; line-height: 1; color: #f2f0eb; }
.iowasn em { color: var(--bl); font-style: normal; }
.iowasl { font-family: var(--fm); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: rgba(242,240,235,.28); margin-top: 3px; }

.iowar { padding: 76px 60px; background: var(--bg); }
.iowacl { list-style: none; }
.iowaci { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--br); transition: padding .2s; }
.iowaci:first-child { border-top: 1px solid var(--br); }
.iowaci:hover { padding-left: 7px; padding-right: 7px; }
.iowacn { font-family: var(--fd); font-size: 19px; letter-spacing: .04em; color: var(--bk); }
.iowact { font-family: var(--fm); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--bkl); }
.iowatl { margin-top: 24px; font-family: var(--fm); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--bl); display: flex; align-items: center; gap: 9px; }
.iowatl::before { content: ''; width: 14px; height: 1px; background: var(--bl); }

/* ── Work Grid ── */
.work { background: var(--bg); }
.wg {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 3px;
}
.wi { position: relative; overflow: hidden; background: var(--bg2); }
.wi:first-child { grid-row: 1/3; }
.wiph { width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform .5s; }
.wi:first-child .wiph { min-height: 600px; }
.wi:hover .wiph { transform: scale(1.022); }
.wp1 { background: linear-gradient(135deg, #dddbd4, #c8c6be); }
.wp2 { background: linear-gradient(135deg, #e2e0d9, #d0cec6); }
.wp3 { background: linear-gradient(135deg, #d5d3cc, #c4c2ba); }
.wipg { position: absolute; inset: 0; background-image: linear-gradient(rgba(13,13,13,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,13,13,.07) 1px, transparent 1px); background-size: 28px 28px; }
.wim { font-family: var(--fd); font-size: 82px; color: rgba(13,13,13,.06); position: relative; z-index: 1; }
.wi:first-child .wim { font-size: 140px; }
.wime { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 23px; background: linear-gradient(to top, rgba(235,233,227,.96), transparent); transform: translateY(4px); transition: transform .3s; }
.wi:hover .wime { transform: translateY(0); }
.wicat  { font-family: var(--fm); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--bl); margin-bottom: 4px; }
.winame { font-family: var(--fd); font-size: 20px; letter-spacing: .02em; color: var(--bk); }
.wi:first-child .winame { font-size: 31px; }

/* ── Testimonials ── */
.testi { background: var(--bg2); }
.tg { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 66px; }
.tc2 { background: #fff; border: 1px solid var(--br); padding: 34px 30px; transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden; }
.tc2:hover { transform: translateY(-5px); box-shadow: 0 14px 42px rgba(0,0,0,.08); }
.tc2-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.tc2:hover .tc2-spot { opacity: 1; }
.tqm { font-family: var(--fd); font-size: 65px; line-height: .7; color: var(--bl); opacity: .1; margin-bottom: 12px; display: block; }
.tt { font-size: 14px; line-height: 1.8; color: var(--bkm); margin-bottom: 24px; font-style: italic; }
.tt strong { font-style: normal; color: var(--bk); font-weight: 400; }
.trat { display: flex; gap: 3px; margin-bottom: 17px; }
.tstar { width: 10px; height: 10px; background: var(--bl); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ta { display: flex; align-items: center; gap: 12px; }
.tav { width: 35px; height: 35px; border-radius: 50%; background: var(--blp); border: 1.5px solid rgba(26,74,255,.17); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 15px; color: var(--bl); flex-shrink: 0; }
.tan { font-family: var(--fm); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--bk); margin-bottom: 3px; }
.tar { font-size: 12px; color: var(--bkl); }

/* ── Stats Bar ── */
.stats {
  padding: 72px 60px;
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: #fff;
}
.sti { padding: 0 32px; border-right: 1px solid var(--br); }
.sti:first-child { padding-left: 0; }
.sti:last-child  { border-right: none; }
.stn2    { font-family: var(--fd); font-size: 60px; line-height: 1; color: var(--bk); }
.stn2 em { color: var(--bl); font-style: normal; }
.stl     { font-family: var(--fm); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--bkl); margin-top: 7px; }

/* ── Process ── */
.proc { background: var(--bg2); }
.psteps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--br); margin-top: 66px; }
.ps { padding: 38px 28px 34px 0; border-right: 1px solid var(--br); }
.ps:last-child { border-right: none; }
.ps:not(:first-child) { padding-left: 28px; }
.psn    { font-family: var(--fd); font-size: 58px; color: rgba(26,74,255,.07); line-height: 1; margin-bottom: 13px; }
.psname { font-family: var(--fd); font-size: 20px; letter-spacing: .02em; margin-bottom: 9px; color: var(--bk); }
.psd    { font-size: 13px; line-height: 1.85; color: var(--bkl); max-width: 190px; }

/* ── Typing effect ── */
.typed-wrap   { overflow: hidden; display: inline; }
.typed-cursor { display: inline-block; width: 3px; height: .8em; background: rgba(242,240,235,.6); margin-left: 3px; vertical-align: middle; animation: blink-c .7s step-end infinite; }
@keyframes blink-c { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ── Tilt ── */
.tilt { transform-style: preserve-3d; }

/* ============================================================
   RESPONSIVE — HOME (home.css)
   ============================================================ */

/* ── 1200px ── */
@media (max-width: 1200px) {
  .hleft { padding: 0 40px 72px; }
  .aig   { gap: 48px; }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
  /* Hero: stack columns */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hleft { padding: 120px 32px 64px; justify-content: flex-start; }
  .hleft::before { font-size: clamp(200px, 35vw, 380px); bottom: -20px; left: -10px; }
  .hero-side-label { display: none; }
  .hright { display: none; } /* hide canvas panel on tablet — too narrow */
  .scrollhint { display: none; }
  .htit { font-size: clamp(60px, 11vw, 110px); }

  /* AI section */
  .aig { grid-template-columns: 1fr; gap: 40px; }
  .aiv { height: 280px; }

  /* Services grid: 2×2 */
  .scg { grid-template-columns: repeat(2,1fr); }
  .sc:nth-child(2) { border-right: none; }
  .sc:nth-child(3) { border-right: 1px solid var(--br); border-top: 1px solid var(--br); }
  .sc:nth-child(4) { border-top: 1px solid var(--br); border-right: none; }

  /* Story */
  .stinn { grid-template-columns: 1fr; gap: 40px; }

  /* Iowa */
  .iowa { grid-template-columns: 1fr; }
  .iowal, .iowar { padding: 56px 32px; }

  /* Work grid */
  .wg { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wi:first-child { grid-row: auto; }
  .wi:first-child .wiph { min-height: 400px; }

  /* Testimonials */
  .tg { grid-template-columns: 1fr 1fr; }
  .tg .tc2:last-child { grid-column: span 2; }

  /* Stats */
  .stats { grid-template-columns: repeat(2,1fr); }
  .sti:nth-child(2) { border-right: none; }
  .sti:nth-child(3) { border-top: 1px solid var(--br); padding-top: 32px; }
  .sti:nth-child(4) { border-top: 1px solid var(--br); padding-top: 32px; border-right: none; }

  /* Process */
  .psteps { grid-template-columns: repeat(2,1fr); }
  .ps:nth-child(2) { border-right: none; }
  .ps:nth-child(3) { border-top: 1px solid var(--br); }
  .ps:nth-child(4) { border-top: 1px solid var(--br); border-right: none; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  .hleft { padding: 100px 24px 56px; }
  .htit  { font-size: clamp(54px, 13vw, 90px); }
  .hdesc { font-size: 15px; }
  .hact  { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bblu  { width: 100%; text-align: center; }

  /* AI */
  .aig { gap: 32px; }
  .aiv { height: 240px; }
  .aihl { font-size: clamp(30px, 7vw, 50px); }

  /* Services: 1 column */
  .scg { grid-template-columns: 1fr; }
  .sc { border-right: none !important; border-bottom: 1px solid var(--br); height: 200px; }
  .sc:last-child { border-bottom: none; }

  /* Story */
  .stn { font-size: 36px; min-width: 80px; }

  /* Iowa */
  .iowal, .iowar { padding: 48px 24px; }

  /* Testimonials: 1 col */
  .tg { grid-template-columns: 1fr; }
  .tg .tc2:last-child { grid-column: span 1; }

  /* Stats */
  .stats { padding: 48px 24px; }
  .sti { padding: 0 16px; }
  .sti:first-child { padding-left: 0; }
  .stn2 { font-size: 44px; }

  /* Process: 1 col */
  .psteps { grid-template-columns: 1fr; }
  .ps { border-right: none !important; border-top: 1px solid var(--br) !important; padding: 28px 0 !important; }
  .psteps .ps:first-child { border-top: none !important; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .hleft  { padding: 88px 20px 48px; }
  .htit   { font-size: clamp(48px, 14vw, 76px); }
  .ibadge { font-size: 9px; padding: 6px 10px; }
  .stats  { grid-template-columns: 1fr 1fr; padding: 40px 20px; gap: 0; }
  .sti    { padding: 24px 16px !important; border-right: none; border-top: 1px solid var(--br); }
  .sti:first-child, .sti:nth-child(2) { border-top: none; }
  .sti:nth-child(odd) { padding-left: 0 !important; }
}

/* ── Work section — View All Projects button ── */
.work-more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.btn-work-more {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bk);
  border: 1.5px solid var(--bk);
  padding: 14px 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .25s, color .25s, border-color .25s;
  transform: none !important; /* Disable magnetic effect */
}

.btn-work-more:hover {
  background: var(--bl);
  border-color: var(--bl);
  color: #fff;
  transform: none !important; /* Disable magnetic effect on hover */
}

/* ══════════════════════════════════════════════════════════════
   SERVICES PINNED SCROLL
   ══════════════════════════════════════════════════════════════ */

.svcs-pin-wrap { position: relative; }

.svcs-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Thin top shelf: eyebrow + counter + progress bar */
.svcs-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 60px 22px;
  border-bottom: 1px solid var(--br);
  flex-shrink: 0;
  gap: 32px;
}
.svcs-label {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.svcs-label .ey { margin: 0; }
.svcs-counter-wrap {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .16em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bkl);
}
.svcs-counter-cur { color: var(--bl); font-size: 10px; }
.svcs-counter-sep { opacity: .35; }
.svcs-counter-tot { opacity: .5; }

.svcs-progress-wrap {
  flex: 1;
  height: 1px;
  background: var(--br);
  border-radius: 1px;
  overflow: hidden;
}
.svcs-progress-bar {
  height: 100%;
  width: 25%;
  background: var(--bl);
  transition: width .12s linear;
  box-shadow: 0 0 6px rgba(26,74,255,.5);
}

/* Track clip area fills remaining height */
.svcs-track-clip {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.svcs-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* Individual slide */
.sv-slide {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  padding: 0 60px;
  gap: 60px;
  position: relative;
  border-right: 1px solid var(--br);
  box-sizing: border-box;
  transition: background .4s;
}
.sv-slide.sv-active { background: rgba(26,74,255,.014); }

/* Big background number */
.sv-num {
  position: absolute;
  bottom: -0.12em;
  left: 52px;
  font-family: var(--fd);
  font-size: clamp(100px, 18vw, 240px);
  line-height: 1;
  color: rgba(13,13,13,.04);
  pointer-events: none;
  user-select: none;
  letter-spacing: -.01em;
}

/* Left: title + description + link */
.sv-body {
  position: relative;
  z-index: 1;
}
.sv-title {
  font-family: var(--fd);
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: .95;
  letter-spacing: .02em;
  color: var(--bk);
  margin-bottom: 24px;
}
.sv-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--bkl);
  max-width: 400px;
  margin-bottom: 36px;
}
.sv-link {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bl);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(26,74,255,.25);
  padding-bottom: 3px;
  transition: gap .2s, border-color .2s;
}
.sv-link:hover { gap: 12px; border-color: var(--bl); }
.sv-link span { transition: transform .2s; }
.sv-link:hover span { transform: translateX(4px); }

/* Right: detail rows */
.sv-detail {
  position: relative;
  z-index: 1;
  border-left: 1px solid var(--br);
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sv-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 0;
  border-bottom: 1px solid var(--br);
}
.sv-detail-item:last-child { border-bottom: none; }
.sv-di-label {
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(13,13,13,.35);
}
.sv-di-val {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 500;
  color: var(--bk);
}

/* ── Intersection reveal classes ─────────────────────────── */
.strow {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .6s, transform .6s cubic-bezier(.22,1,.36,1);
}
.strow.sr-in { opacity: 1; transform: translateX(0); }

.iowaci {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .45s, transform .45s;
}
.iowaci.ic-in { opacity: 1; transform: translateX(0); }

.tc2 {
  opacity: 0;
  transition: opacity .65s, transform .72s cubic-bezier(.22,1,.36,1) !important;
}
.tc2.tc-in { opacity: 1 !important; transform: rotate(0deg) translateY(0) !important; }

.ps {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .55s, transform .55s cubic-bezier(.22,1,.36,1);
}
.ps.ps-in { opacity: 1; transform: translateY(0); }

.wi {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .55s, transform .55s cubic-bezier(.22,1,.36,1);
}
.wi.wi-in { opacity: 1; transform: translateY(0); }

/* ── Ambient cursor halo ─────────────────────────────────── */
#cursor-halo {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,74,255,.036) 0%, transparent 68%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
@media (max-width: 768px) { #cursor-halo { display: none; } }

/* ── Hero layers ─────────────────────────────────────────── */
.hleft, .hright { will-change: transform, opacity; }

/* ── Mobile fallback ─────────────────────────────────────── */
@media (max-width: 768px) {
  .svcs-pin-wrap { height: auto !important; }
  .svcs-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .svcs-shelf { padding: 24px; }
  .svcs-track-clip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .svcs-track { transform: none !important; }
  .sv-slide {
    width: 88vw;
    height: auto;
    grid-template-columns: 1fr;
    padding: 40px 28px;
    gap: 32px;
    border-right: 1px solid var(--br);
    border-bottom: none;
    align-items: start;
  }
  .sv-num { font-size: 80px; bottom: -8px; left: 20px; }
  .sv-detail { border-left: none; border-top: 1px solid var(--br); padding-left: 0; padding-top: 24px; }
  .sv-title { font-size: 40px; }
}