/* LIT Inc. redesign, option F: the service map flows into animated 3D blueprints behind the light body. */

:root {
  color-scheme: light;
  /* Dark chrome (header, hero, footer) */
  --night: #07090c;
  --night-2: #10151b;
  --night-line: #232b35;
  --on-night: #e8ecf1;
  --on-night-muted: #9aa4b1;
  /* Light body */
  --paper: #ffffff;
  --paper-2: #f3f5f7;
  --ink: #12161b;
  --ink-2: #3a4450;
  --muted: #626d7a;
  --line: #dde2e8;
  /* Brand */
  --amber: #f7a81b;
  --amber-hi: #ffc55a;
  --amber-deep: #8f5500;
  --amber-wash: #fff4de;
  --alarm: #d8383d;
  --ok: #1f8a5a;

  --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.8rem, 1.25rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.5rem, 1.4rem + 4.6vw, 4.9rem);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --radius: 6px;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.06; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.kicker {
  font: 500 0.8125rem/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.9375rem var(--f-body);
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s, transform 0.15s;
}
.btn-amber { background: var(--amber); color: #1a1102; }
.btn-amber:hover { background: var(--amber-hi); box-shadow: 0 10px 30px -10px rgba(247, 168, 27, 0.7); transform: translateY(-1px); }
.btn-ghost { background: rgba(7, 9, 12, 0.4); color: var(--on-night); border-color: #3a4552; }
.btn-ghost:hover { border-color: var(--on-night); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #28313b; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---------- Header (always dark) ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--night);
  color: var(--on-night);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.scrolled { border-bottom-color: var(--night-line); }
.nav-inner { display: flex; align-items: center; gap: 26px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--amber); }
.brand-logo { display: block; height: 52px; width: auto; }

/* Header logo: the base (L, T and name) sits still while the i's stem and dot drop in from
   above, squash as they land and bounce to rest, dot just after stem. Pointing at the logo
   makes the i hop again. Transform origins sit at the bottom of each piece. */
.logo { position: relative; display: block; height: 52px; aspect-ratio: 420 / 160; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo-full .logo-stem { transform-origin: 25.4% 79.3%; }
.logo-full .logo-dot { transform-origin: 25.4% 28%; }
.logo-mark { display: none; height: 36px; aspect-ratio: 200 / 120; }
.logo-mark .logo-stem { transform-origin: 41.3% 81.4%; }
.logo-mark .logo-dot { transform-origin: 41.3% 28.5%; }
.logo .logo-stem { animation: i-drop 1s cubic-bezier(0.5, 0, 0.75, 0) 0.35s both; }
.logo .logo-dot { animation: i-drop-dot 1.15s cubic-bezier(0.5, 0, 0.75, 0) 0.6s both; }
.logo.landed img { animation: none; }
.logo.landed.hop .logo-stem { animation: i-hop 0.55s ease-out; }
.logo.landed.hop .logo-dot { animation: i-hop-dot 0.75s ease-out; }
@keyframes i-drop {
  0% { transform: translateY(-150%); opacity: 0; }
  12% { opacity: 1; }
  42% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  52% { transform: translateY(0) scale(1.12, 0.86); animation-timing-function: ease-out; }
  66% { transform: translateY(-12%) scale(0.96, 1.05); animation-timing-function: ease-in; }
  78% { transform: translateY(0) scale(1.05, 0.95); animation-timing-function: ease-out; }
  89% { transform: translateY(-3%) scale(1, 1); animation-timing-function: ease-in; }
  100% { transform: none; }
}
@keyframes i-drop-dot {
  0% { transform: translateY(-260%); opacity: 0; }
  12% { opacity: 1; }
  40% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  48% { transform: translateY(0) scale(1.22, 0.75); animation-timing-function: ease-out; }
  62% { transform: translateY(-24%) scale(0.92, 1.1); animation-timing-function: ease-in; }
  74% { transform: translateY(0) scale(1.1, 0.88); animation-timing-function: ease-out; }
  86% { transform: translateY(-7%) scale(1, 1); animation-timing-function: ease-in; }
  100% { transform: none; }
}
@keyframes i-hop {
  30% { transform: scale(1.06, 0.92); }
  60% { transform: translateY(-5%) scale(0.98, 1.03); }
}
@keyframes i-hop-dot {
  25% { transform: translateY(-30%) scale(0.95, 1.08); }
  50% { transform: translateY(0) scale(1.15, 0.85); }
  72% { transform: translateY(-8%); }
}
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 0.9375rem; color: var(--on-night-muted); white-space: nowrap; transition: color 0.15s; }
.nav-links a:hover { color: var(--on-night); }
.nav-links .nav-menu-cta { display: none; }
/* Padded to a full 44 px tap target. */
.nav-phone { font: 500 0.875rem var(--f-mono); text-decoration: none; color: var(--on-night); white-space: nowrap; padding-block: 13px; }
.nav-phone:hover { color: var(--amber-hi); }
.nav-cta { padding: 10px 16px; }
.nav-toggle { display: none; }

/* ---------- Hero (dark, 3D) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(70% 60% at 68% 42%, rgba(247, 168, 27, 0.1), transparent 70%), var(--night);
  color: var(--on-night);
  overflow: hidden;
  min-height: min(calc(100vh - var(--header-h)), 820px);
  display: flex;
  flex-direction: column;
}
/* The 3D scene is fixed behind the whole page; the hero and sections let it show through. It is
   sized to the large viewport, so a phone's toolbar sliding in and out never resizes it. */
.bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; z-index: 0; }
main, .footer { position: relative; z-index: 1; }
/* Tilted sections and waiting cards reach past the sides; clip them so the page never scrolls
   sideways (hidden is the fallback for Safari before 16). */
main { overflow-x: hidden; overflow-x: clip; }
.has-scene .hero { background: transparent; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 9, 12, 0.97) 0%, rgba(7, 9, 12, 0.9) 34%, rgba(7, 9, 12, 0.55) 50%, rgba(7, 9, 12, 0) 66%),
    linear-gradient(0deg, rgba(7, 9, 12, 0.45) 0%, rgba(7, 9, 12, 0.43) 8%, rgba(7, 9, 12, 0.25) 22%, rgba(7, 9, 12, 0) 40%);
}
/* Auto side margins would shrink-wrap and center flex items, so pin the hero's wraps to full width. */
.hero > .wrap { width: 100%; }
.hero-inner { flex: 1; display: grid; align-content: center; gap: 24px; padding-block: clamp(48px, 9vh, 104px) 28px; }
.eyebrow { font: 500 0.8125rem/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.hero h1 { font-size: var(--step-4); font-weight: 700; text-transform: uppercase; line-height: 0.98; max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--amber); }
.lede { font-size: var(--step-1); color: #bfc7d1; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-inner > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-inner > :nth-child(2) { animation-delay: 0.08s; }
.hero-inner > :nth-child(3) { animation-delay: 0.16s; }
.hero-inner > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { transform: translateY(14px); opacity: 0.001; } }

.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; padding-bottom: 24px; }
.hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; color: #c9d0d9; }
.hero-points li { display: flex; gap: 10px; align-items: center; }
.hero-points li::before { content: ""; width: 7px; height: 7px; background: var(--amber); flex: none; }

/* ---------- Light body sections ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: transparent; }
.has-scene main > .section:not(.section-alt) { background: transparent; }
.section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2 { font-size: var(--step-3); }
.section-head > p:not(.kicker) { color: var(--ink-2); font-size: var(--step-1); max-width: 62ch; }

/* Services */
.services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.service {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.service:hover { border-color: #c4ccd5; box-shadow: 0 18px 40px -24px rgba(18, 22, 27, 0.35); }
.service-wide { grid-column: span 3; }
.service-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.service-icon { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-icon .accent { stroke: var(--amber); }
.service-icon .fill { fill: var(--amber); stroke: none; }
.service-tag { font: 500 0.6875rem var(--f-mono); letter-spacing: 0.1em; color: var(--muted); padding: 4px 7px; border: 1px solid var(--line); border-radius: 3px; }
.service h3 { font-size: var(--step-2); }
.service > p { color: var(--ink-2); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.9375rem; color: var(--ink-2); }
.service-wide .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.checks li { display: flex; gap: 10px; align-items: baseline; }
.checks li::before { content: ""; flex: none; width: 6px; height: 6px; transform: translateY(-2px); background: var(--amber); }
.service-note { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }

/* Industries */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.industry { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 10px; }
.industry h3 { font-size: 1.375rem; transform: translateZ(22px); }
.industry p { color: var(--ink-2); font-size: 0.9688rem; }
.industry-icon { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: translateZ(34px); }
.industry-icon .accent { stroke: var(--amber); }
.industry-icon .fill { fill: var(--amber); stroke: none; }
.industry-icon .fill.ok { fill: var(--ok); }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; transform: translateZ(14px); }
.chips li { font: 500 0.75rem var(--f-mono); letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; background: rgba(247, 168, 27, 0.14); color: #6b4200; }
.industries-more { margin-top: 26px; color: var(--ink-2); }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li {
  display: grid; gap: 8px; align-content: start; padding: 18px 18px 22px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  border: 1px solid rgba(160, 176, 194, 0.45); border-top: 2px solid var(--ink); border-radius: 0 0 10px 10px;
  box-shadow: 0 22px 50px -38px rgba(18, 22, 27, 0.45);
}
.step-n { font: 500 0.8125rem var(--f-mono); color: var(--amber-deep); }
.steps h3 { font-size: var(--step-1); }
.steps p { color: var(--ink-2); font-size: 0.9375rem; }

/* Why LIT */
.why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.why-copy { display: grid; gap: 16px; }
.why-copy h2 { font-size: var(--step-3); }
.why-copy > p:not(.kicker) { color: var(--ink-2); font-size: var(--step-1); }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.why-list li { padding: 22px; border-radius: 10px; display: grid; gap: 8px; align-content: start; }
.why-list h3 { font-size: 1.125rem; }
.why-list p { color: var(--ink-2); font-size: 0.9375rem; }

/* CTA band */
.cta-band { background: var(--night); color: var(--on-night); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(40px, 6vw, 64px); }
.cta-inner h2 { font-size: var(--step-3); max-width: 22ch; }
.cta-inner p { color: #bfc7d1; margin-top: 10px; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-info { display: grid; gap: 18px; }
.contact-info h2 { font-size: var(--step-3); }
.contact-info > p:not(.kicker) { color: var(--ink-2); font-size: var(--step-1); }
.info-list { margin: 6px 0 0; display: grid; }
.info-list div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.info-list dt { font: 500 0.75rem/1.9 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.info-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.info-list a { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.email-wait { color: var(--muted); font-weight: 400; }
.email-check:not(:empty) { margin-top: 14px; }

.form { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; box-shadow: 0 24px 60px -40px rgba(18, 22, 27, 0.45); }
.field { display: grid; gap: 6px; align-content: start; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label, legend { font: 600 0.875rem var(--f-body); color: var(--ink); }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks-row { display: flex; flex-wrap: wrap; gap: 8px; }
.checks-row label { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--paper-2); }
.checks-row input { accent-color: var(--amber-deep); margin: 0; }
.checks-row label:has(input:checked) { border-color: var(--ink); background: var(--amber-wash); }
/* A native checkbox ignores the focus border, so the whole chip gets the ring instead. */
.checks-row label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.checks-row label:has(input:focus-visible) input { outline: none; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 110px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:not([type="checkbox"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); background: var(--paper); box-shadow: 0 0 0 3px rgba(247, 168, 27, 0.25); }
/* Amber rings are too faint on white; the light contact area uses ink. */
.contact :focus-visible { outline-color: var(--ink); }
[aria-invalid="true"] { border-color: var(--alarm) !important; background: #fdf3f3 !important; }
.field-error { font-size: 0.875rem; font-weight: 500; color: var(--alarm); }
.form-status { min-height: 1.4em; font-size: 0.9375rem; color: var(--muted); }
.form-status.error { color: var(--alarm); }
.form-status.ok { color: var(--ok); }
.plan-progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--line); overflow: hidden; }
.plan-progress::-webkit-progress-bar { background: var(--line); }
.plan-progress::-webkit-progress-value { background: var(--amber-deep); }
.plan-progress::-moz-progress-bar { background: var(--amber-deep); }
.form-nojs { font-size: 0.9375rem; color: var(--ink); background: var(--amber-wash); border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px; }
.form-nojs a { font-weight: 600; white-space: nowrap; text-decoration-color: var(--amber-deep); text-underline-offset: 3px; }
.form .btn { justify-self: start; }
/* Disabled until main.js runs; while a request is on its way the button keeps focus and only looks busy. */
.form .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.form .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.form .btn:is(:disabled, [aria-disabled="true"]):hover { background: var(--ink); }

/* Footer & dialog */
.footer { background: var(--night); color: var(--on-night-muted); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 28px; padding-block: 48px 28px; font-size: 0.9375rem; }
.footer .brand { margin-bottom: 16px; }
.footer .brand-logo { height: 66px; }
.footer h2 { font: 500 0.75rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer a, .linklike { color: var(--on-night-muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer a:hover, .linklike:hover { color: var(--on-night); }
.footer-base { border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; font-size: 0.875rem; }
.privacy { max-width: 640px; width: calc(100% - 32px); background: var(--paper); color: var(--ink); border: 0; border-radius: 10px; padding: 28px; }
.privacy::backdrop { background: rgba(7, 9, 12, 0.6); }
.privacy h2 { font-size: var(--step-2); margin-bottom: 14px; }
.privacy p { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: 10px; }
.privacy form { margin-top: 18px; }
/* Without JavaScript the policy cannot open as a dialog: it sits in the page, after the footer. */
html:not(.js) #privacy { display: block; position: static; margin: 0 auto 40px; }
html:not(.js) #privacy form { display: none; }
dialog :focus-visible { outline-color: var(--ink); }
.sent { max-width: 460px; text-align: center; }
.sent-icon { width: 56px; height: 56px; margin: 4px auto 14px; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sent-icon circle { fill: var(--amber); }
.sent-icon path { stroke: var(--ink); stroke-width: 4; }
.sent a { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: 3px; white-space: nowrap; }
.sent .sent-plans { color: var(--ink); background: var(--amber-wash); border-radius: var(--radius); padding: 10px 14px; }
/* The trap field is off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-check:empty { display: none; }
.plans-field input[type="file"] { width: 100%; min-width: 0; font: inherit; font-size: 0.9375rem; color: var(--ink-2); padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--paper-2); cursor: pointer; }
.plans-field input[type="file"]:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(247, 168, 27, 0.25); }
.plans-field input[type="file"]::file-selector-button { font: 600 0.875rem var(--f-body); margin-right: 12px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
.form .optional { font-weight: 400; color: var(--muted); }
.field-hint { font-size: 0.8125rem; color: var(--muted); margin: 0; }

/* ---------- Motion & 3D ---------- */
/* Cards tilt toward the pointer, with their icon and title floating above the face. */
.tilt {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, border-color 0.2s;
}
.tilt.is-tilting { transition: transform 0.08s linear, box-shadow 0.3s, border-color 0.2s; }
.tilt::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(247, 168, 27, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
}
.tilt:hover::after { opacity: 1; }
.service-top, .service h3 { transform: translateZ(26px); }
.why-list h3 { transform: translateZ(18px); }
.service-icon .accent { transition: stroke 0.2s; }
.service:hover .service-icon { animation: nudge 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes nudge { 40% { transform: translateY(-3px) rotate(-4deg); } }

/* Cards are frosted panes rather than solid boards: the drawings show through as soft shapes,
   but the blur and a mostly-white fill keep moving particles from fighting the text.
   They drift gently on their own and lean back as they enter from the bottom of the screen. */
.glass {
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  border: 1px solid rgba(160, 176, 194, 0.55);
  box-shadow: 0 22px 50px -34px rgba(18, 22, 27, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.glass:hover { background: rgba(255, 255, 255, 0.93); }
.glass.tilt { transform: perspective(1200px) rotateX(calc(var(--rx) + var(--sx, 0deg))) rotateY(var(--ry)); }
.js .glass { animation: drift 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
@keyframes drift { 50% { translate: 0 -7px; } }
.services .glass:nth-child(2n), .why-list .glass:nth-child(2n) { animation-delay: -2.6s; }
.services .glass:nth-child(3n), .why-list .glass:nth-child(3n) { animation-delay: -4.1s; }
.form { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Section intros get a soft wash of paper behind the words themselves, line by line, rather
   than a box: main.js lays an invisible copy of each text block underneath it, and each line of
   that copy carries a white background, and the whole copy is blurred so the edges feather. The wash only appears
   as the page turns to paper (--light), so it never shows over the night map. */
.has-scene .wash { position: relative; isolation: isolate; }
.wash-under {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; user-select: none;
  color: transparent; opacity: calc((var(--light, 1) - 0.25) * 1.6); transition: opacity 0.4s ease;
  filter: blur(14px);
}
.wash-under * { color: transparent !important; border-color: transparent !important; text-decoration: none !important; }
.wash-under > span {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.9);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* The hero's shade carries on past its bottom edge and fades out down the next section, so
   there is no seam where the hero ends. Both clear away together as the page turns to paper. */
.has-scene #services { position: relative; }
.has-scene #services::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: min(70vh, 640px);
  background:
    linear-gradient(90deg, rgba(7, 9, 12, 0.97) 0%, rgba(7, 9, 12, 0.9) 34%, rgba(7, 9, 12, 0.55) 50%, rgba(7, 9, 12, 0) 66%),
    linear-gradient(rgba(7, 9, 12, 0.45), rgba(7, 9, 12, 0.45));
  /* Light and flat where it meets the hero's shade, so the two read as one fade with no dark line. */
  --fade: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.96) 8%, rgba(0,0,0,0.78) 22%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.08) 82%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.has-scene .hero::before, .has-scene #services::before { opacity: calc(1 - var(--light, 0) * 2.5); transition: opacity 0.3s ease; }

/* Text over the background follows the page: light on the night map, then ink once the page
   has turned to paper (main.js sets .paper a quarter of the way through, which is about halfway by eye since the scene blends in linear light, as the text wash fades in). */
.has-scene .hero :is(h1, .lede, .eyebrow, .hero-points),
.has-scene #services .section-head > * { transition: color 0.45s ease, text-shadow 0.45s ease; }
.has-scene:not(.paper) #services .section-head h2 { color: var(--on-night); }
.has-scene:not(.paper) #services .section-head > p:not(.kicker) { color: #bfc7d1; }
/* The shade under the hero is light, so the night-time heading carries its own soft shadow. */
.has-scene:not(.paper) #services .section-head > * { text-shadow: 0 1px 14px rgba(7, 9, 12, 0.9), 0 0 2px rgba(7, 9, 12, 0.8); }
.has-scene:not(.paper) #services .section-head .kicker { color: var(--amber); }
.paper .hero h1 { color: var(--ink); }
.paper .hero h1 em { color: var(--amber-deep); }
.paper .hero .lede { color: var(--ink-2); }
.paper .hero .eyebrow { color: var(--amber-deep); }
.paper .hero .hero-points { color: var(--ink-2); }
.paper .hero .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

/* Cards stand up out of the drawing as you reach them: they start tipped back flat against
   the blueprint, faded and slightly small, then rise to face you, one after another. */
.services, .industry-grid, .why-list { perspective: 1600px; }
.js .glass.pending { opacity: 0; scale: 0.9; rotate: x 62deg; transform-origin: 50% 100%; }
.js .glass.entering {
  transform-origin: 50% 100%;
  transition: opacity 0.7s ease var(--d, 0s), scale 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s), rotate 1.1s cubic-bezier(0.2, 0.8, 0.25, 1.05) var(--d, 0s), transform 0.5s, box-shadow 0.3s;
}

/* Sections rise and settle into place as they scroll in. They are fully visible at rest;
   only the transform animates. */
.js .reveal { transform: perspective(1200px) translateY(34px) rotateX(7deg); transform-origin: 50% 0; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { transform: none; }

/* The process steps share one amber line that fills as you scroll past them. */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--amber); z-index: 1; }
.steps li { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.steps li.on { transform: translateY(-4px); }
.steps li.on .step-n { color: var(--ink); background: var(--amber); padding: 1px 6px; margin-left: -6px; justify-self: start; border-radius: 3px; }

/* An amber scan sweeps across the CTA band. It moves by transform, which the compositor runs
   without touching layout; its left edge travels from -40% to 110% of the band. */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(247, 168, 27, 0.14), transparent);
  transform: translateX(-100%);
  will-change: transform;
  animation: scan 7s linear infinite;
  pointer-events: none;
}
@keyframes scan { to { transform: translateX(275%); } }

/* A drawing title block naming the blueprint behind the current section. It stands on end in
   the page's right margin, so it only appears when that margin is wide enough to hold it. */
.sheet-tag {
  position: fixed;
  right: 14px;
  top: 50%;
  z-index: 5;
  display: none;
  writing-mode: vertical-rl;
  border: 1px solid #9fb1c4;
  background: rgba(255, 255, 255, 0.92);
  font: 500 0.6875rem/1.2 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
  opacity: var(--hud, 0);
  transform: translate(calc((1 - var(--hud, 0)) * 10px), -50%);
}
.sheet-no { padding: 10px 7px; border-bottom: 1px solid #9fb1c4; font-weight: 600; color: var(--ink); font-size: 0.8125rem; }
.sheet-title { padding: 12px 7px; white-space: nowrap; }
@media (min-width: 1340px) { .sheet-tag { display: grid; grid-template-rows: auto auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service, .service-wide { grid-column: span 1; }
  .service:last-child { grid-column: span 2; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { gap: 18px; }
}
/* The section links fold into a menu before they would crowd the phone number and button. */
@media (max-width: 1040px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    background: var(--night);
    border-bottom: 1px solid var(--night-line);
    padding: 6px var(--gutter) 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--night-line); font-size: 1.0625rem; }
  .nav-phone { margin-left: auto; }
  .nav-toggle {
    display: inline-grid; place-items: center;
    width: 42px; height: 40px;
    background: none; border: 1px solid #3a4552; border-radius: var(--radius);
    color: var(--on-night); cursor: pointer;
  }
  .bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -6px; }
  .bars::after { top: 6px; }
  /* Without JavaScript the menu can't open, so leave the sections to scrolling. */
  html:not(.js) .nav-toggle { display: none; }
}
@media (max-width: 900px) {
  .has-scene #services::before { background: rgba(7, 9, 12, 0.56); }
  .wash-under > span { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.9); }
  .wash-under { filter: blur(10px); }
  /* Phones stack the headline over the map, so keep the text on a dark ground. */
  .hero::before { background: linear-gradient(180deg, rgba(7, 9, 12, 0.15) 0%, rgba(7, 9, 12, 0.42) 26%, rgba(7, 9, 12, 0.46) 66%, rgba(7, 9, 12, 0.55) 92%, rgba(7, 9, 12, 0.56) 100%); }
  .hero h1, .hero .lede, .hero .eyebrow, .hero-points { text-shadow: 0 1px 14px rgba(7, 9, 12, 0.9), 0 0 2px rgba(7, 9, 12, 0.8); }
  .paper .hero :is(h1, .lede, .eyebrow, .hero-points) { text-shadow: none; }
  .why, .contact { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* The header button moves into the menu, as its last item. */
  .nav-cta { display: none; }
  .nav-links .nav-menu-cta { display: flex; margin-top: 16px; padding: 13px 22px; border: 0; font-size: 0.9375rem; }
  .nav-links .nav-menu-cta, .nav-links .nav-menu-cta:hover { color: #1a1102; }
  .site-header .logo-full { display: none; }
  .site-header .logo-mark { display: block; }
  .services, .steps, .why-list, .industry-grid, .field-row { grid-template-columns: 1fr; }
  .service, .service-wide, .service:last-child { grid-column: auto; }
  .service-wide .checks { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  /* Room for "No file chosen" beside the button at 320 px. */
  .plans-field input[type="file"] { padding: 10px; font-size: 0.875rem; }
  .plans-field input[type="file"]::file-selector-button { margin-right: 8px; padding: 8px 10px; }
}
/* Short phone screens: pull the hero up so its button is on the first screen. */
@media (max-width: 620px) and (max-height: 700px) {
  .hero-inner { padding-top: 24px; gap: 18px; }
  .lede { font-size: 1.0625rem; }
}
/* Narrow ones too: the lede wraps to more lines at 320 px. */
@media (max-width: 360px) and (max-height: 700px) {
  .hero-inner { padding-top: 12px; gap: 14px; }
  .hero .lede { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 360px) and (max-height: 520px) {
  .hero h1 { font-size: 2.125rem; }
  .hero .lede { font-size: 0.9375rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .logo img { animation: none !important; }
}

/* ---------- Print ---------- */
/* A printed or saved copy is ink on white paper: no scene, motion or form, every card standing,
   the logos swapped for the dark-text version, and the phone number and mailing address kept. */
@media print {
  .bg-canvas, .sheet-tag, .wash-under, .nav-links, .nav-toggle, .nav-cta, .hero-cta, .cta-actions,
  #contact-form, .email-check, .form-check, .footer-base .linklike { display: none !important; }
  /* Email slots still waiting on the human check only point at the form, so they go too. */
  .info-list div:has(a[href="#contact-form"], .email-wait),
  .footer li[data-email]:has(a[href="#contact"], .email-wait) { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero::before, .cta-band::before, #services::before { content: none !important; }

  html, body { background: #fff !important; }
  .site-header, .hero, .cta-band, .footer, main > .section { background: none !important; color: #000 !important; }
  .site-header { position: static; border-bottom: 1px solid #bbb; }
  .hero { min-height: 0 !important; }
  .hero-inner { padding-block: 20px 12px; }
  .hero :is(h1, .lede, .eyebrow, .hero-points), #services .section-head > *, .cta-inner :is(h2, p),
  .nav-phone, .footer :is(p, h2, a, li) { color: #000 !important; text-shadow: none !important; }
  .hero h1 em, .hero .eyebrow, .kicker, #services .section-head .kicker { color: var(--amber-deep) !important; }
  .cta-band { border-block: 1px solid #bbb; }
  .footer-base { border-top-color: #bbb; }

  .site-header .logo-mark { display: none !important; }
  .site-header .logo-full { display: block !important; }
  .site-header .logo-full .logo-stem, .site-header .logo-full .logo-dot { display: none; }
  .site-header .logo-full img:first-child, .footer .brand-logo { content: url(assets/logo-on-light.png); }

  .js .glass.pending { opacity: 1 !important; scale: none !important; rotate: none !important; }
  .js .reveal, .tilt, .glass.tilt, .steps li { transform: none !important; translate: none !important; }
  .glass, .steps li { background: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass { border-color: #bbb !important; }
  .section { padding-block: 28px; }
  .contact { grid-template-columns: 1fr; }
  .service, .industry, .why-list li, .steps li, .cta-inner, .info-list div, .footer-inner > div { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}