/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 */
/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · H2 hero knobs: ratio=7/5, right=lede + actions (typography only), divider=negative space
 * theme: custom · vibe: "engineered, honest, precise, quiet confidence" · paper: oklch(98% 0.006 255) · accent: oklch(53% 0.19 258) + signal oklch(80% 0.165 85)
 * display: M PLUS 1 · body: IBM Plex Sans JP · outlier: JetBrains Mono (stage labels + step numbers only) · axes: light / geometric-sans / cool
 * enrichment: none in hero · E5 hand-built HTML/CSS lane diagram (Tier A) in #roles · nav: N5 floating pill · footer: Ft5 statement · features: F3 spec sheet, F4 step sequence
 * studied: no · context: user-provided (tone: technical/honest · palette: logo colours) · v1.1.0
 */

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-3xl);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
@supports (text-autospace: normal) {
  body { text-autospace: normal; }
}
@supports (text-spacing-trim: normal) {
  body { text-spacing-trim: normal; }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
table { width: 100%; border-collapse: collapse; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.01em;
  min-width: 0;
}
@supports (word-break: auto-phrase) {
  h1, h2, h3, h4 { word-break: auto-phrase; text-wrap: balance; }
}

:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: calc(var(--space-3xl) * -1);
  left: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
}
.skip-link:focus { top: var(--space-md); }

.page {
  width: 100%;
  max-width: calc(var(--page-max) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ---------- Type roles ---------- */

.h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.4;
}
.h3 {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.4;
}
.h4 {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-lg);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.btn-fill { background: var(--color-ink); color: var(--color-paper); }
.btn-fill:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }

.btn-outline { background: transparent; color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-paper); }

.btn-compact { min-height: 36px; padding-inline: var(--space-md); font-size: var(--text-xs); }

/* ---------- Nav · N5 floating pill ---------- */

.nav-pill {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  max-width: calc(100% - var(--page-gutter) * 2);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  transform: translateX(-50%);
  background: var(--color-glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px -14px var(--color-shadow);
}
.nav-pill__brand img { width: 104px; }
.nav-pill__links {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav-pill__links a {
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav-pill__links a:hover { color: var(--color-accent); }
.nav-pill__links a:active { color: var(--color-ink); }

@media (max-width: 40rem) {
  .nav-pill__links { display: none; }
  .nav-pill { gap: var(--space-md); }
  .nav-pill__brand img { width: 92px; }
}

/* ---------- Split Studio diptych ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-2xl) var(--space-3xl);
  align-items: start;
}
.split--media-first { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

.split__text > * + * { margin-top: var(--space-lg); }
.split__text p { color: var(--color-ink-2); max-width: 36em; }

.split__media img { width: 100%; border-radius: var(--radius-md); }

@media (max-width: 56rem) {
  .split,
  .split--media-first { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split--media-first > .split__text { order: -1; }
}

/* key–value rows */
.kv > div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.kv > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.kv dt { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-3xs); }
.kv dd { font-weight: 500; }

@media (max-width: 30rem) {
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Hero · title left, lede + actions right ---------- */

.hero { padding-block: var(--space-3xl) var(--space-4xl); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl) var(--space-3xl);
  align-items: end;
}

.hero__title {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}
.hero__title span { display: block; }
@supports (text-autospace: normal) {
  .hero__title { text-autospace: no-autospace; }
}

.hero__lede {
  max-width: 30em;
  color: var(--color-ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Lane diagram: AI makes, the engineer decides ---------- */

.lanes {
  --lane-stage: 3.5em;
  --lane-gap: var(--space-xl);
  font-size: var(--text-sm);
}

.lanes__head,
.lanes__rows li {
  display: grid;
  grid-template-columns: var(--lane-stage) minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: var(--lane-gap);
  align-items: center;
}

.lanes__head {
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-bold) solid var(--color-rule-strong);
  font-weight: 700;
}
.lanes__who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.lanes__who::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
}
.lanes__who--ai::before { background: var(--color-accent); border-radius: 2px; }
.lanes__who--human::before { background: var(--color-signal); box-shadow: 0 0 0 1px var(--color-signal-edge); transform: rotate(45deg); }

.lanes__rows li {
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.lanes__stage {
  font-family: var(--font-outlier);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.lanes__ai {
  position: relative;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  line-height: 1.6;
}
/* connector into the engineer's lane */
.lanes__ai::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--lane-gap) * -1 + 10px);
  width: calc(var(--lane-gap) - 16px);
  height: 1.5px;
  background: var(--color-muted);
}
.lanes__ai::before {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px);
  right: calc(var(--lane-gap) * -1 + 10px);
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--color-muted);
  border-right: 1.5px solid var(--color-muted);
  transform: translateY(0.5px) rotate(45deg);
}

.lanes__human {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  line-height: 1.6;
}
.lanes__human::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--color-signal);
  box-shadow: 0 0 0 1px var(--color-signal-edge);
  transform: rotate(45deg);
}

@supports (word-break: auto-phrase) {
  .lanes__ai,
  .lanes__human { word-break: auto-phrase; }
}

/* the page's one orchestrated moment: when the diagram scrolls into view,
   each stage hands off from AI to engineer (reveal once, JS adds the classes) */
.lanes.is-pending .lanes__ai,
.lanes.is-pending .lanes__human { opacity: 0; }

.lanes.is-in .lanes__ai,
.lanes.is-in .lanes__human {
  opacity: 0;
  animation: lane-in var(--dur-long) var(--ease-out) forwards;
}
.lanes.is-in .lanes__ai { animation-delay: calc(var(--i, 0) * 70ms); }
.lanes.is-in .lanes__human { animation-delay: calc(160ms + var(--i, 0) * 70ms); }

@keyframes lane-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 36rem) {
  .lanes__head {
    display: flex;
    gap: var(--space-lg);
  }
  .lanes__head > span:first-child { display: none; }
  .lanes__rows li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xs);
  }
  .lanes__ai::before,
  .lanes__ai::after { display: none; }
}

/* ---------- Intro ---------- */

.intro { padding-block: 0 var(--space-3xl); }
.intro .split { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; }
.intro__photo img { aspect-ratio: 4 / 5; object-fit: cover; max-height: 600px; }
.intro__photo figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

@media (max-width: 56rem) {
  .intro .split { grid-template-columns: minmax(0, 1fr); }
  .intro__photo img { aspect-ratio: 16 / 10; }
}

/* ---------- Service ---------- */

.service {
  padding-block: var(--space-4xl) var(--space-3xl);
  background: var(--color-paper-2);
}
.service__title { margin-bottom: var(--space-2xl); }
.service .split { align-items: center; }
.service .split + .split { margin-top: var(--space-3xl); }

.service__spot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* F4 step sequence (a real order, so it is numbered) */
.steps {
  counter-reset: step;
  padding: var(--space-xl);
  background: var(--color-paper);
  border-radius: var(--radius-md);
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-md);
  padding-bottom: var(--space-lg);
  counter-increment: step;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-outlier);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-accent);
}
/* connector line between numbers */
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.1rem;
  bottom: var(--space-2xs);
  left: 0.6rem;
  width: var(--rule-hair);
  background: var(--color-rule);
}
.steps h4,
.steps h3 { font-size: var(--text-md); font-weight: 700; line-height: 1.6; }
.steps p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- Roles ---------- */

.roles { padding-block: var(--space-4xl) var(--space-3xl); }
.split--wide-media { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
@media (max-width: 56rem) {
  .split--wide-media { grid-template-columns: minmax(0, 1fr); }
}
.roles .split__text p.roles__note { color: var(--color-ink); font-weight: 700; }

/* ---------- Plans · F3 spec sheet ---------- */

.plans {
  padding-block: var(--space-3xl);
  background: var(--color-paper-2);
}

.spec { font-size: var(--text-sm); }
.spec thead th {
  padding: 0 var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-bold) solid var(--color-rule-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
  text-align: left;
}
.spec tbody th,
.spec td {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}
.spec tbody th { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); white-space: nowrap; }
.spec td { color: var(--color-ink-2); }

.plans__roles { font-size: var(--text-sm); }
.plans__roles strong { color: var(--color-ink); }

@media (max-width: 40rem) {
  .spec thead { display: none; }
  .spec tr { display: block; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .spec tr:first-child { border-top: var(--rule-bold) solid var(--color-rule-strong); }
  .spec tbody th,
  .spec td { display: block; padding: var(--space-2xs) 0; border: 0; }
  .spec td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-muted);
  }
}

/* ---------- Strengths · night band ---------- */

.strengths {
  padding-block: var(--space-3xl) var(--space-4xl);
  background: var(--color-night);
  color: var(--color-on-night);
}

.strengths__list > div {
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-night-rule);
}
.strengths__list > div:first-child { padding-top: 0; border-top: 0; }
.strengths__list dt {
  font-family: var(--font-display);
  font-feature-settings: "palt" 1;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.5;
}
.strengths__list dd {
  margin-top: var(--space-xs);
  color: var(--color-on-night-2);
  max-width: 34em;
}

/* ---------- Method ---------- */

.method { padding-block: var(--space-4xl) var(--space-3xl); }
.method .split { align-items: center; }

.method__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-xl);
}
.method__list dt {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
}
.method__list dt::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
}
.method__list dd {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

@media (max-width: 30rem) {
  .method__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Works ---------- */

.works {
  padding-block: var(--space-3xl);
  background: var(--color-paper-2);
}
.works__note { font-size: var(--text-sm); }

.works__list li {
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.works__list li:first-child { padding-top: 0; border-top: 0; }
.works__field {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}
.works__list p:not(.works__field):not(.works__tech) {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.works__tech {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ---------- Flow ---------- */

.flow { padding-block: var(--space-3xl); }
.flow .steps { background: var(--color-paper-2); }

/* ---------- Company ---------- */

.company {
  padding-block: var(--space-3xl);
  background: var(--color-paper-2);
}

/* ---------- Contact ---------- */

.contact { padding-block: var(--space-3xl) var(--space-4xl); }

.contact__form {
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
}
.contact__form iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}

/* ---------- Footer · Ft5 statement ---------- */

.foot {
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--color-night);
  color: var(--color-on-night-2);
}
.foot__line {
  font-family: var(--font-display);
  font-feature-settings: "palt" 1;
  font-size: clamp(1.75rem, 3.6vw + 0.5rem, 3.25rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-on-night);
}
.foot__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-night-rule);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.foot__meta p:first-of-type { color: var(--color-on-night); font-weight: 700; }
.foot__meta span { font-weight: 400; font-size: var(--text-xs); color: var(--color-on-night-2); }
.foot__mark { width: 48px; }
.foot__copy { font-size: var(--text-xs); }

@media (max-width: 40rem) {
  .foot__meta { grid-template-columns: auto minmax(0, 1fr); }
  .foot__copy { grid-column: 1 / -1; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lanes .lanes__ai,
  .lanes .lanes__human { opacity: 1; animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}