/* ==========================================================================
   Monolith — Industries page (LIGHT theme)
   Relies on /css/site.css for @font-face, resets (*, html, body base rules),
   and shared keyframes (blink, fadein). Everything page-specific — nav/foot
   recolored for light, intro, industry rows, and the "engineering-plate"
   line-art plates — lives here.
   ========================================================================== */

body.ind {
  background: #E4E3E0;
  color: #1A1A1A;
}

.ind-scan {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(26,26,26,0.04) 0, rgba(26,26,26,0.04) 1px, transparent 1px, transparent 4px);
}

/* ============ nav (light) ============ */
header.ind-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; background: rgba(228,227,224,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(26,26,26,0.11);
}
.ind-nav-word { font-size: 12px; color: #4F4F4F; text-decoration: none; letter-spacing: -0.01em; transition: color 0.2s ease; }
.ind-nav-word:hover { color: #1A1A1A; }
.ind-nav-mark { position: absolute; left: 50%; transform: translateX(-50%); display: flex; line-height: 0; cursor: pointer; }
header.ind-nav nav { display: flex; gap: 28px; }
header.ind-nav nav a, footer.ind-foot nav a {
  font-size: 12px; color: #4F4F4F; text-decoration: none; transition: color 0.2s ease;
}
header.ind-nav nav a:hover, footer.ind-foot nav a:hover { color: #1A1A1A; }
header.ind-nav nav a.current { color: #1A1A1A; }
.ind-nav-spacer { height: 52px; }

/* ============ footer (light) ============ */
footer.ind-foot {
  border-top: 1px solid #A6A6A6; padding: 36px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ind-foot-brand { display: flex; align-items: center; gap: 12px; }
.ind-foot-brand span { font-size: 12px; color: #4F4F4F; }
footer.ind-foot nav a { color: #6E6E6E; }
.ind-foot-copy { font-family: 'VCR OSD Mono', monospace; font-size: 11px; color: #6E6E6E; text-transform: uppercase; }

/* ============ intro ============ */
.ind-intro {
  max-width: 1440px; margin: 0 auto; padding: 120px 80px 60px; box-sizing: border-box;
  background-image: radial-gradient(rgba(26,26,26,0.08) 1px, transparent 1px); background-size: 28px 28px;
}
.ind-tag {
  font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.12em;
  color: #6E6E6E; text-transform: uppercase; display: inline-block; animation: fadein 0.8s ease 0.1s both;
}
.ind-tag .cursor { color: #4F7A14; animation: blink 1.2s steps(1) infinite; }
.ind-h1 {
  display: flex; flex-direction: column; margin: 28px 0 0; font-weight: 400;
  font-size: clamp(44px, 6vw, 88px); line-height: 1.03; letter-spacing: -0.035em;
  color: #1A1A1A; white-space: nowrap; cursor: default;
}
.ind-h1 .scramble { color: #8F8F8F; font-family: 'VCR OSD Mono', monospace; letter-spacing: -0.06em; }
.ind-lead { max-width: 720px; margin-top: 56px; animation: fadein 0.9s ease 0.9s both; }
.ind-lead p { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: #3A3A3A; }
.ind-lead a { color: #4F7A14; text-decoration: none; transition: color 0.2s ease; }
.ind-lead a:hover { color: #1A1A1A; }

/* ============ industries list ============ */
.ind-list { max-width: 1440px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }

.ind-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px; align-items: center; padding: 96px 0; border-top: 1px solid #A6A6A6;
  opacity: 0; transform: translateY(20px);
}
.ind-list .ind-row:last-child { border-bottom: 1px solid #A6A6A6; }
.ind-row.is-in { transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); opacity: 1; transform: none; }

.ind-copy-col { display: flex; flex-direction: column; gap: 26px; }
.ind-copy-col > * { opacity: 0; transform: translateY(16px); }
.ind-row.is-in .ind-copy-col > * { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.ind-row.is-in .ind-copy-col > *:nth-child(1) { transition-delay: 0.2s; }
.ind-row.is-in .ind-copy-col > *:nth-child(2) { transition-delay: 0.42s; }
.ind-row.is-in .ind-copy-col > *:nth-child(3) { transition-delay: 0.64s; }

.ind-title { display: flex; align-items: baseline; gap: 16px; }
.ind-num { font-family: 'VCR OSD Mono', monospace; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; color: #6E6E6E; }
.ind-name { font-weight: 400; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.03em; color: #1A1A1A; }
.ind-desc { margin: 0; max-width: 480px; font-size: 18px; line-height: 1.45; color: #3F3F3F; }

.ind-related { display: flex; flex-direction: column; margin-top: 12px; }
.ind-related-label { font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.12em; color: #6E6E6E; text-transform: uppercase; padding-bottom: 10px; }
.ind-related-item { display: grid; grid-template-columns: minmax(180px, 0.95fr) 1.25fr; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid #A6A6A6; }
.ind-related-link { font-family: 'VCR OSD Mono', monospace; font-size: 15px; text-transform: uppercase; color: #1A1A1A; text-decoration: none; transition: color 0.2s ease; }
.ind-related-link:hover { color: #4F7A14; }
.ind-related-desc { font-size: 15px; line-height: 1.45; color: #4F4F4F; }

.ind-plate { display: block; width: 100%; height: auto; }

/* ============ plate element states — JS drives the reveal ============ */
.plate-paper { opacity: 0; }
.plate-detail, .plate-guide, .plate-accent-echo { opacity: 0; }
.plate-accent-draw { opacity: 0; }

@keyframes plate-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.2; transform: scale(1.18); } }
@keyframes plate-march { to { stroke-dashoffset: -24; } }

.loop-pulse { animation: plate-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.loop-march { animation: plate-march 0.9s linear infinite; }
.loop-blink { animation: blink 1.2s steps(1) infinite; }

/* ============ contact ============ */
.ind-contact { max-width: 1440px; margin: 0 auto; padding: 100px 80px 140px; box-sizing: border-box; }
.ind-contact p { margin: 0; max-width: 560px; font-size: 24px; line-height: 1.25; color: #4F4F4F; }
.ind-contact-email {
  display: inline-block; margin-top: 48px; font-family: 'VCR OSD Mono', monospace;
  font-size: clamp(28px, 5.4vw, 72px); color: #1A1A1A; text-decoration: none;
  text-transform: uppercase; line-height: 1.1; word-break: break-all; transition: color 0.2s ease;
}
.ind-contact-email:hover { color: #4F7A14; }
.ind-contact-email .cursor { color: #4F7A14; animation: blink 1.2s steps(1) infinite; }

/* ============ tablet (761–1023px) ============
   Nav/footer/intro still have room as desktop at these widths, but the
   two-column grid squeezes .ind-copy-col down far enough that the
   related-services sub-grid wraps every word onto its own line and the
   plate shrinks to a sliver. Stack copy above plate here too — same
   ordering rule as mobile so copy always reads first. */
@media (min-width: 761px) and (max-width: 1023px) {
  .ind-row { display: flex !important; flex-direction: column !important; gap: 48px !important; padding: 80px 0 !important; }
  .ind-row .ind-plate { order: 2 !important; max-width: 560px !important; width: 100% !important; margin: 0 auto !important; }
}

/* ============ mobile ============ */
@media (max-width: 760px) {
  body.ind { overflow-x: hidden; }
  .ind-intro, .ind-list, .ind-contact { padding-left: 22px !important; padding-right: 22px !important; }
  header.ind-nav { padding-left: 18px !important; padding-right: 18px !important; }
  header.ind-nav .ind-nav-mark { display: flex !important; position: static !important; transform: none !important; }
  header.ind-nav nav { display: none !important; }
  footer.ind-foot { padding-left: 20px !important; padding-right: 20px !important; }
  footer.ind-foot nav { gap: 16px !important; }
  .ind-row { display: flex !important; flex-direction: column !important; gap: 40px !important; padding: 64px 0 !important; }
  .ind-row .ind-plate { order: 2 !important; max-width: 460px !important; }
  .ind-related-item { grid-template-columns: 1fr !important; gap: 6px !important; padding: 16px 0 !important; }
  .ind-h1 { white-space: normal !important; }
}