/* ============ page canvas fx ============ */
.lime { color: #D6FE99; }
.blink { animation: blink 1.2s steps(1) infinite; }

/* ============ hero ============ */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 48px;
  box-sizing: border-box; padding: 72px 80px 132px;
}
.hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 36px;
}
.hero-tag {
  font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.12em;
  color: #747474; text-transform: uppercase; opacity: 0; transition: opacity 0.8s ease;
}
.hero-head {
  display: flex; flex-direction: column; font-weight: 400;
  font-size: clamp(44px, 6.5vw, 100px); line-height: 1.0; letter-spacing: -0.035em;
  color: #FFFFFF; white-space: nowrap; cursor: default;
}
.hero-head .scramble { color: #3E4A2B; font-family: 'VCR OSD Mono', monospace; letter-spacing: -0.06em; }
.hero-sub { margin: 0; max-width: 480px; font-size: 19px; line-height: 1.4; color: #9C9C9C; opacity: 0; transition: opacity 0.8s ease; }
.hero-ctas { display: flex; align-items: center; gap: 28px; white-space: nowrap; opacity: 0; transition: opacity 0.8s ease 0.25s; }
.cta-primary { font-family: 'VCR OSD Mono', monospace; font-size: 14px; letter-spacing: 0.08em; color: #BCFF56; text-decoration: none; }
.cta-primary:hover { text-shadow: 0 0 12px rgba(188,255,86,0.6); }
.cta-secondary { font-family: 'VCR OSD Mono', monospace; font-size: 14px; letter-spacing: 0.08em; color: #9C9C9C; text-decoration: none; }
.cta-secondary:hover { color: #FFFFFF; }

.ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52px; overflow: hidden;
  display: flex; align-items: center; z-index: 3; opacity: 0; transition: opacity 0.9s ease;
}
.ticker-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #1A1A1A 0%, transparent 12%, transparent 88%, #1A1A1A 100%);
}
.ticker-track { display: flex; width: max-content; animation: mq 32s linear infinite; }
.ticker-text {
  font-family: 'VCR OSD Mono', monospace; font-size: 14px; letter-spacing: 0.12em;
  white-space: nowrap; text-transform: uppercase;
  background: linear-gradient(90deg, #C4C4C4 0%, #9DC46E 50%, #C4C4C4 100%) 0 0 / 640px 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ section shared ============ */
.section-pad { padding: 120px 0 60px; position: relative; z-index: 2; }
.section-h {
  position: relative; margin: 0 0 60px; padding: 0 80px; max-width: 1440px;
  margin-left: auto; margin-right: auto; box-sizing: border-box;
  font-family: Inter, -apple-system, sans-serif; font-weight: 400;
  font-size: clamp(48px, 5vw, 72px); letter-spacing: -0.03em; color: #FFFFFF;
}

/* ============ pillars ============ */
.pillar { min-height: 74svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 48px 0; }
.pillar-head-wrap { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }
.pillar-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 36px; }
.pillar-num { font-family: 'VCR OSD Mono', monospace; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; }
.pillar-name {
  font-family: Inter, -apple-system, sans-serif; font-weight: 400;
  font-size: clamp(34px, 3.6vw, 54px); line-height: 1.2; letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--shine-a) 42%, var(--shine-b) 50%, var(--shine-a) 58%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s linear infinite;
}
.pillar-icon { position: absolute; right: 80px; top: -10px; width: 195px; height: 195px; image-rendering: pixelated; opacity: 0.9; pointer-events: none; }
.pillar-copy { max-width: 560px; display: flex; flex-direction: column; gap: 20px; }
.pillar-copy .lead { margin: 0; font-size: 20px; line-height: 1.35; color: #D1D1D1; }
.pillar-copy .body { margin: 0; font-size: 20px; line-height: 1.35; color: #8B8B8B; }
.explore-link { font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-decoration: none; margin-top: 8px; }
.explore-link:hover { text-shadow: 0 0 12px currentColor; }

.pillar-list-wrap { position: relative; width: 100%; max-width: 1440px; margin: 64px auto 0; padding: 0 80px; box-sizing: border-box; }
.service-list {
  margin: 0; font-family: 'VCR OSD Mono', 'Courier New', monospace;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; text-transform: uppercase; text-wrap: pretty;
}
.service-list .word {
  background: linear-gradient(100deg, var(--a) 42%, var(--b) 50%, var(--a) 58%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s linear infinite;
}

/* ============ projects (Success Stories-style type index) ============ */
@keyframes ssPreviewScan {
  0%   { top: -6%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 106%; opacity: 0; }
}
@keyframes ssGlitchSlice {
  0%, 84%   { clip-path: inset(100% 0 0 0); transform: none; opacity: 0; }
  85%       { clip-path: inset(12% 0 78% 0); transform: translateX(-8px); opacity: 1; }
  87%       { clip-path: inset(62% 0 24% 0); transform: translateX(7px); opacity: 1; }
  89%       { clip-path: inset(34% 0 52% 0); transform: translateX(-5px) skewX(-1deg); opacity: 1; }
  91%       { clip-path: inset(78% 0 6% 0); transform: translateX(9px); opacity: 1; }
  93%, 100% { clip-path: inset(100% 0 0 0); transform: none; opacity: 0; }
}

.ss-index-section { max-width: 1440px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; position: relative; z-index: 2; }
.ss-index-list { position: relative; }

.ss-row {
  position: relative; z-index: 2; display: block; border-top: 1px solid #2E2E2E;
  padding: clamp(32px, 4vw, 56px) 0; text-decoration: none; color: inherit; cursor: pointer;
}
.ss-row-last { border-bottom: 1px solid #2E2E2E; }

.ss-row-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; flex-wrap: wrap; }
.ss-row-left { display: flex; align-items: baseline; gap: clamp(16px, 2.5vw, 40px); }

.ss-row-num { font-family: 'VCR OSD Mono', monospace; font-size: 14px; color: #BCFF56; flex: none; }
.ss-row-name {
  font-weight: 400; font-size: clamp(44px, 6.5vw, 110px); letter-spacing: -0.045em;
  line-height: 0.95; color: #FFFFFF;
  transition: color 0.25s ease, letter-spacing 0.4s ease;
}
.ss-row:hover .ss-row-name, .ss-row:focus-visible .ss-row-name { color: #BCFF56; letter-spacing: -0.03em; }

.ss-row-sector {
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  color: #565656; text-transform: uppercase; white-space: nowrap;
}

.projects-more { max-width: 1440px; margin: 40px auto 0; padding: 0 80px; box-sizing: border-box; }

/* ============ floating cursor-follow preview ============ */
.ss-preview {
  position: fixed; left: 0; top: 0; width: min(30vw, 460px); aspect-ratio: 4 / 3;
  z-index: 5; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}
.ss-preview.is-active { opacity: 1; }

.ss-preview-frame {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #0E0E0E; box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(188,255,86,0.15);
}
.ss-preview-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.95);
}
.ss-preview-glitch {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.3) brightness(1.2);
  clip-path: inset(100% 0 0 0);
  animation: ssGlitchSlice 2.6s steps(1) infinite;
  will-change: clip-path, transform;
}
.ss-preview-duotone { position: absolute; inset: 0; background: #BCFF56; mix-blend-mode: multiply; opacity: 0.5; }
.ss-preview-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
}
.ss-preview-sweep {
  position: absolute; left: 0; right: 0; top: -6%; height: 3px; background: #D6FE99;
  box-shadow: 0 0 16px rgba(214,254,153,0.9);
  animation: ssPreviewScan 2.4s linear infinite;
}
.ss-preview-rec {
  position: absolute; left: 10px; top: 8px; display: flex; align-items: center; gap: 6px;
  font-family: 'VCR OSD Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.ss-rec-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #FF4D4D;
  box-shadow: 0 0 6px rgba(255,77,77,0.9);
  animation: blink 1.1s steps(1) infinite;
}
@media (hover: none) {
  .ss-preview { display: none !important; }
}
/* below 1200px the huge row name (clamp-sized) gets wide enough that the
   sector label wraps to its own line inconsistently per row/text length —
   force the stacked layout deliberately so all three rows behave the same
   at any width, instead of it looking like an accidental wrap. */
@media (max-width: 1199px) {
  .ss-row-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 760px) {
  .ss-row { padding: 26px 0; }
  .ss-row-inner { gap: 10px; }
  .ss-row-name { font-size: clamp(34px, 11vw, 56px); }
}

/* ============ clients ============ */
.clients-section { padding: 160px 0 60px; position: relative; z-index: 2; }
.clients-wrap { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }
/* Fixed column counts (always a divisor of the 8 client cells) instead of
   auto-fit/minmax, which at several common widths (e.g. 1024px, 1280px)
   resolved to 3 columns and left a stray, differently-shaded empty cell. */
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #2E2E2E; border: 1px solid #2E2E2E; }
@media (max-width: 1399px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .clients-grid { grid-template-columns: 1fr; }
}
.client-cell { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 48px 24px; background: #1A1A1A; }
.client-mark { color: #6B6B6B; cursor: default; transition: color 0.25s ease; }
.client-cell:hover .client-mark { color: #D1D1D1; }
.client-serif-italic { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 32px; letter-spacing: 0.01em; }
.client-bold-caps { font-family: Inter, -apple-system, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: 0.12em; text-transform: uppercase; }
.client-mono { font-family: 'VCR OSD Mono', 'Courier New', monospace; font-size: 26px; }
.client-tracked { font-family: Inter, -apple-system, sans-serif; font-weight: 300; font-size: 22px; letter-spacing: 0.42em; text-transform: uppercase; text-indent: 0.42em; }
.client-mixed { display: inline-flex; align-items: baseline; gap: 8px; }
.client-heavy { font-family: Inter, -apple-system, sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.02em; text-transform: uppercase; }
.client-mono-sm { font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.client-smallcaps { font-family: Georgia, 'Times New Roman', serif; font-variant: small-caps; font-size: 30px; letter-spacing: 0.06em; }
.client-serif { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; letter-spacing: 0.03em; }
.client-outline { font-family: Inter, -apple-system, sans-serif; font-weight: 800; font-size: 27px; letter-spacing: 0.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px #6B6B6B; transition: -webkit-text-stroke-color 0.25s ease; }
.client-cell:hover .client-outline { -webkit-text-stroke-color: #D1D1D1; }

/* ============ contact ============ */
.contact-section { position: relative; max-width: 1440px; margin: 0 auto; padding: 160px 80px 140px; box-sizing: border-box; z-index: 2; }
.contact-copy { margin: 0; max-width: 560px; font-size: 24px; line-height: 1.25; color: #8B8B8B; }
.contact-email {
  display: inline-block; margin-top: 56px; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(28px, 5.4vw, 80px); color: #FFFFFF; text-decoration: none;
  text-transform: uppercase; line-height: 1.1; word-break: break-all;
}
.contact-email:hover { color: #BCFF56; animation: glitch 0.35s steps(2) infinite; }

/* ============ mobile ============ */
@media (max-width: 760px) {
  .hero { padding-top: 0; padding-left: 22px; padding-right: 22px; }
  .hero-head { white-space: normal !important; }
  .pillar-icon { display: none !important; }
  .pillar-list-wrap { margin-top: 40px !important; }
  .section-h,
  .pillar-head-wrap,
  .pillar-list-wrap,
  .ss-index-section,
  .projects-more,
  .clients-wrap,
  .contact-section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}