/* ============================================================
   AUTOMATA — page-specific styles
   ============================================================ */

/* Logo (homepage uses the wide A mark + custom wordmark) */
.logo__mark {
  width: 28px; height: 21px; flex: 0 0 auto;
  color: var(--ink);
}
.logo__wordmark {
  height: 16px; flex: 0 0 auto;
  color: var(--ink);
}

/* Section overrides (rich eyebrow now lives in base.css; only the plain
   variant is page-specific) */
.section__eyebrow--plain { color: var(--slate); }
.section__eyebrow--plain::before { background: var(--slate); }

.section__lede { max-width: 62ch; }

/* Hero overrides — Automata uses the full display scale + annotations */
.hero { padding-top: calc(var(--sp-4xl) + var(--sp-lg)); padding-bottom: calc(var(--sp-4xl) + var(--sp-lg)); }
.hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__title {
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 14ch;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel-blue);
  margin-bottom: var(--sp-lg);
}
.hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--steel-blue); }

/* mono annotation row under the CTAs — quiet proof, drawing-sheet style */
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg);
  margin-top: var(--sp-2xl);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta span::before {
  content: ""; width: 5px; height: 5px;
  border: 1px solid var(--steel-blue);
  transform: rotate(45deg);
}

/* ============================================================
   TRACK RECORD CARD — hero artifact, polished-sandstone treatment
   Layered: gradient base · SVG bump texture · two specular sheens
   that follow the tilt · cursor-tracked glare · perspective tilt.
   ============================================================ */
@property --rx { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --ry { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.record {
  --rx: 3deg;
  --ry: -4deg;
  --mx: 25%;
  --my: 20%;

  background:
    /* upper-left polished highlight */
    radial-gradient(ellipse at 15% -10%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
    /* primary specular sheen — wide, soft, tilt-reactive */
    linear-gradient(
      calc(130deg + var(--ry) * 5),
      transparent 30%,
      rgba(255, 255, 255, 0.18) 47%,
      rgba(255, 255, 255, 0.28) 50%,
      rgba(255, 255, 255, 0.18) 53%,
      transparent 70%
    ),
    /* secondary sheen — narrower, offset, tilt-reactive */
    linear-gradient(
      calc(118deg + var(--ry) * 4),
      transparent 60%,
      rgba(255, 255, 255, 0.10) 72%,
      rgba(255, 255, 255, 0.16) 75%,
      rgba(255, 255, 255, 0.10) 78%,
      transparent 90%
    ),
    /* warm base — paper to mist on a slight diagonal */
    linear-gradient(160deg, var(--paper) 0%, var(--mist) 100%);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 0 var(--line),
    0 32px 56px -28px rgba(74, 74, 80, 0.25);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    perspective(1200px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateY(-3px);
  transition: transform 80ms linear,
              box-shadow var(--dur-panel) var(--ease);
}
.record:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 0 var(--line),
    0 28px 52px -28px rgba(74, 74, 80, 0.32);
}
/* Polished top edge highlight */
.record::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 30%,
    rgba(255, 255, 255, 0.7) 70%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}
/* Cursor-tracked glare — soft radial highlight that follows the mouse */
.record::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 320px 320px at var(--mx) var(--my),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
  transition: opacity 200ms var(--ease);
}
.record:hover::after { opacity: 1; }

/* SVG bump-mapped sandstone texture (feTurbulence + feDiffuseLighting) */
.record__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
/* Content stacks above all decorative layers */
.record > .record__head,
.record > .record__list,
.record > .record__corners { position: relative; z-index: 4; }

/* Registration marks in the four corners — drawing-sheet cue */
.record__corners { position: absolute; inset: 8px; pointer-events: none; }
.record__corners i {
  position: absolute; width: 10px; height: 10px;
  border: 0 solid var(--steel-blue); opacity: 0.55;
}
.record__corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.record__corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.record__corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.record__corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

@media (prefers-reduced-motion: reduce) {
  .record { transition: none; }
  .record::after { display: none; }
}
/* Reveal animates the record via opacity only — .reveal's translateY/none
   would otherwise override the perspective tilt transform for good.
   (Equal specificity to .reveal[data-visible]; wins by load order.) */
.record.reveal {
  transform:
    perspective(1200px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateY(-3px);
  transition: transform 80ms linear,
              box-shadow var(--dur-panel) var(--ease),
              opacity 500ms var(--ease);
}
.record__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--hairline);
}
.record__label {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--slate); letter-spacing: 0.08em; text-transform: uppercase;
}
.record__rev {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--steel-blue); letter-spacing: 0.08em;
}

.record__list {
  display: grid;
  grid-template-columns: 28px max-content 1fr;
  column-gap: var(--sp-md);
}
.record__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding-block: 14px;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.record__row:last-child { border-bottom: 0; }
.record__idx {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--line); letter-spacing: 0.08em;
}
.record__big {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-feature-settings: 'ss01';
}
.record__big--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
}
.record__desc { font-size: 13px; color: var(--slate); line-height: 1.55; }

/* ============================================================
   SERVICE GRID — BIM consultation capabilities
   ============================================================ */
/* Drawing-sheet grid: hairline cells, no card chrome */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }

.service {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-xl) var(--sp-lg);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  transition: background-color var(--dur-in) var(--ease);
}
.service::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 100%; height: 2px; background: var(--steel-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-panel) var(--ease);
}
.service:hover { background: rgba(229, 226, 217, 0.55); }
.service:hover::before { transform: scaleX(1); }
.service__num {
  position: absolute; top: var(--sp-xl); right: var(--sp-lg);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--line); letter-spacing: 0.08em;
  transition: color var(--dur-in) var(--ease);
}
.service:hover .service__num { color: var(--steel-blue); }
.service__icon-box {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-md);
  color: var(--steel-blue);
  transition: background-color var(--dur-in) var(--ease),
              border-color var(--dur-in) var(--ease),
              color var(--dur-in) var(--ease);
}
.service:hover .service__icon-box {
  background: var(--steel-blue);
  border-color: var(--steel-blue);
  color: var(--paper);
}
.service__icon { width: 22px; height: 22px; }
.service__title {
  font-size: var(--fs-body-l);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.service__body { font-size: var(--fs-body); color: var(--slate); line-height: 1.6; }
.service__tags {
  margin-top: auto;
  padding-top: var(--sp-md);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--slate); letter-spacing: 0.06em;
}

/* ============================================================
   APPROACH — three phases
   ============================================================ */
.phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-xl);
  position: relative;
}
@media (max-width: 760px) { .phases { grid-template-columns: 1fr; } }
.phase {
  background: var(--paper);
  border: 1px solid rgba(156, 153, 144, 0.35);
  border-radius: 4px;
  padding: var(--sp-xl);
  padding-top: var(--sp-2xl);
  display: flex; flex-direction: column; gap: var(--sp-md);
  min-height: 300px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(156, 153, 144, 0.25);
  transition: transform var(--dur-in) var(--ease), box-shadow var(--dur-in) var(--ease);
}
.phase:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -32px rgba(14, 14, 16, 0.25);
}
/* oversized ghost numeral */
.phase__ghost {
  position: absolute; top: -22px; right: 6px;
  font-family: var(--font-mono);
  font-size: 7.5rem; font-weight: 400; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(76, 98, 110, 0.22);
  pointer-events: none; user-select: none;
  transition: -webkit-text-stroke-color var(--dur-in) var(--ease);
}
.phase:hover .phase__ghost { -webkit-text-stroke-color: rgba(76, 98, 110, 0.45); }
.phase__num {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--steel-blue);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.phase__num::before { content: ""; width: 20px; height: 1px; background: var(--steel-blue); }
.phase__title { font-size: var(--fs-h3); color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.phase__body { color: var(--slate); font-size: var(--fs-body); line-height: 1.6; }
.phase__list {
  margin-top: auto;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--slate); letter-spacing: 0.04em;
}
.phase__list span { display: flex; align-items: center; gap: 8px; }
.phase__list span::before {
  content: ""; width: 5px; height: 5px;
  border: 1px solid var(--steel-blue);
  transform: rotate(45deg); flex: 0 0 auto;
}

/* ============================================================
   PRODUCTS — Mainspring card + Three.js sample viewer
   ============================================================ */
.products {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-xl);
  align-items: stretch;
}
@media (max-width: 960px) { .products { grid-template-columns: 1fr; } }

/* Ink feature card — the page's focal contrast moment */
.product-card {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: var(--sp-xl);
  display: flex; flex-direction: column; gap: var(--sp-md);
  overflow: hidden;
  transition: transform var(--dur-in) var(--ease),
              box-shadow var(--dur-in) var(--ease);
  box-shadow: 0 1px 0 var(--mist);
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 24px 24px;
}
.product-card[href]:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -32px rgba(14, 14, 16, 0.5);
}
/* steel sheen sweep on hover */
.product-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(185, 198, 207, 0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}
.product-card[href]:hover::after { transform: translateX(100%); }
.product-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--graphite);
}
.product-card__brand {
  display: inline-flex; align-items: flex-end; gap: 10px;
}
.product-card__mark { width: 28px; height: 28px; display: block; }
/* wordmark SVG is currentColor (renders black in <img>) — invert for ink card */
.product-card__name { height: 23px; width: auto; display: block; filter: invert(1) brightness(1.6); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent;
  color: var(--mist-blue);
  border: 1px solid var(--slate-green);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  animation: pill-pulse 2.4s var(--ease) infinite;
}
@keyframes pill-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .pill::before { animation: none; } }
.product-card__body { flex: 1; }
.product-card__tagline {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  color: var(--paper);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-sm);
}
.product-card__desc {
  font-size: var(--fs-body);
  color: var(--mist-blue);
  line-height: 1.65;
  max-width: 46ch;
}
.product-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--graphite);
}
.product-card__cta {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-size: var(--fs-body);
  color: var(--paper);
  border-bottom: 1px solid var(--glass-blue);
  padding-bottom: 2px;
}
.product-card__cta .icon { width: 16px; height: 16px; transition: transform var(--dur-in) var(--ease); }
.product-card[href]:hover .product-card__cta .icon { transform: translateX(3px); }
.product-card__meta {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--slate); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ============================================================
   FOOTER — page-specific extras
   ============================================================ */
.foot__location {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--line);
  font-size: var(--fs-body);
}