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

/* ============ hero ============ */
.hero {
  position: relative; overflow: hidden;
  /* fixed height, not min-height: the ticker is pinned to the bottom
     of this box, so the box must always equal exactly one screen —
     never taller (which would push the ticker below the fold) or
     shorter (which would leave a gap below it). --mono-vh (mono-fx.js)
     is the real, current viewport height in px; the calc()'s own
     1svh*100 fallback only applies for the instant before that script
     runs. */
  height: calc(var(--mono-vh, 1svh) * 100 - 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: flex-start; gap: clamp(16px, 2.5vw, 40px); }

.ss-row-num { font-family: 'VCR OSD Mono', monospace; font-size: 14px; color: #BCFF56; flex: none; margin-top: 0.6em; }
.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;
}
/* color only, no letter-spacing change — see css/success-stories.css for
   why: widening tracking on hover changes the row's rendered width,
   which can tip a long name into an unwanted wrap purely from hovering. */
.ss-row:hover .ss-row-name, .ss-row:focus-visible .ss-row-name { color: #BCFF56; }

.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; }

/* real client marks: an inline SVG (fill:currentColor, so it rides the
   .client-mark color transition exactly like the text logos) and a
   raster PNG. The PNG's pixels are pre-graded (assets/clients/certadose.png)
   rather than left full-color and fought with a live CSS filter -- its
   wordmark was near-black in the source, and filter:brightness() is
   multiplicative, so it can't lift near-zero pixels into visibility no
   matter the value. Regraded so the darkest pixel lands exactly on this
   grid's #6B6B6B resting gray; grayscale() here is just a safety net. */
/* sized by height, not width -- the other 6 marks' rendered boxes run
   24-37px tall regardless of their (very different) widths, so height is
   the axis that actually reads as "size" in this grid. Fortis's crown+
   wordmark lockup is two glyphs stacked, so at equal width its bounding
   box runs taller than a single text line -- sized down accordingly
   rather than matched on width. */
.client-svg svg { display: block; height: 34px; width: auto; }
/* Blanco's own wordmark is wider/flatter (4.7:1) than Fortis's crown+text
   stack (3.6:1) -- sized independently rather than sharing one rule. */
.client-svg-blanco svg { height: 26px; }
/* Nickel & Swan's lockup is a single wide line (6.1:1, wider than Blanco's
   4.7:1) -- sized down slightly from the default so its taller lowercase
   ascenders/descenders don't read heavier than the other single-line marks. */
.client-svg-nickelswan svg { height: 24px; }
/* Reuzel's condensed wordmark (2.5:1) carries a heavy outline/drop-shadow
   detail that reads thin if matched to the plain single-line band --
   sized up slightly so the outline stays legible. */
.client-svg-reuzel svg { height: 32px; }
.client-img-wrap { display: block; }
.client-logo-img {
  /* taller than the 24-37px text-logo band on purpose: this lockup is a
     compact icon-over-wordmark stack (~1.8:1), not a single text line, so
     matching it to their height alone left it visibly narrower/lighter
     than every neighbor even though the height number was "in range" --
     tuned against Fortis (the grid's other stacked lockup) for comparable
     visual weight instead. */
  display: block; height: 52px; width: auto;
  filter: grayscale(1); transition: filter 0.25s ease;
}
.client-cell:hover .client-logo-img { filter: grayscale(1) brightness(1.45); }
/* single-line wordmarks (extracted client logotypes, flattened to the
   grid's flat gray) -- sized against the original text marks' 24-37px
   band rather than the default 52px, which was tuned specifically for
   Certadose's stacked icon-over-wordmark lockup. */
.client-logo-ziotech { height: 28px; }
.client-logo-kata { height: 39px; }
/* Wolf Yoga's lockup stacks a wordmark over a two-line "YOGA CO." caption
   (2:1), closer in spirit to Fortis/Certadose's stacked marks than to a
   single text line -- sized up accordingly so the small caption doesn't
   disappear. First pass at 44px still read visibly smaller/lighter than
   its neighbors since most of that height is thin caption text, not the
   bold wordmark -- bumped further. */
.client-logo-wolf { height: 56px; }

/* ============ contact ============ */
.contact-section { position: relative; max-width: 1440px; margin: 0 auto; padding: 160px 80px 140px; box-sizing: border-box; z-index: 2; }
/* .section-h carries its own 80px side padding + centering, which is
   correct when its parent has none (Services/Projects/Clients) — but
   .contact-section already pads itself, so nesting it here double-padded
   the heading, shifting "Contact" to the right of the copy/email below it. */
.contact-section .section-h { padding: 0; max-width: none; margin: 0 0 60px; }
.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; }
  /* sized so "We Design Products" (the longest of the 3 logical lines)
     fits on one row at any phone width up to the 760px breakpoint — lets
     home.js's own wrap-measurement in buildHead() land on exactly the
     3-line break instead of a 4th/5th row split mid-word. */
  .hero-head { white-space: normal !important; font-size: clamp(28px, 9vw, 38px) !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;
  }
  /* .contact-section already gets 22px above; .section-h is also in that
     list (needed for Services/Projects/Clients, whose parents have no
     padding of their own), so nested inside Contact it was getting a
     second 22px on top of its parent's — re-zero it here specifically. */
  .contact-section .section-h {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}