/* Jordan Development Solutions. Drafting set.
   Theme = six colours and two faces. Everything else comes from scrollcraft.css.
   Light chapters are paper; the proof zone is graphite. One accent hue, two stops
   (deepened for paper, brightened for graphite) so each clears 4.5:1 on its ground. */

:root {
  --sc-canvas:      #FFFFFF;
  --sc-surface:     #F4F7FB;
  --sc-ink:         #2C2D35;
  --sc-ink-soft:    #52535A;
  --sc-accent:      #063B91;
  --sc-accent-ink:  #FFFFFF;

  --sc-font-display: "Archivo", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --sc-shadow-color: 228 22% 20%;
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);

  --rail-w: 3.5rem;
  --pl: calc(var(--rail-w) + clamp(1.25rem, 4vw, 4.5rem));
  --pr: clamp(1.25rem, 5vw, 5.5rem);
  --plate: #FFFFFF;
}

html { scroll-padding-top: 0; }
body { background: var(--sc-canvas); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--sc-ink); color: var(--sc-canvas); transition: top 160ms var(--sc-ease-out); }
.skip:focus { top: 1rem; }

/* ----------------------------------------------------------- grounds -- */
.ground-light { background: #FFFFFF; color: #2C2D35; --sc-canvas:#FFFFFF; --sc-ink:#2C2D35; --sc-ink-soft:#52535A; --sc-accent:#063B91; --sc-accent-ink:#FFFFFF; --rule: color-mix(in oklab, #2C2D35 18%, transparent); --rule-soft: color-mix(in oklab, #2C2D35 10%, transparent); }
.ground-soft  { background: #F4F7FB; color: #2C2D35; --sc-canvas:#F4F7FB; --sc-ink:#2C2D35; --sc-ink-soft:#52535A; --sc-accent:#063B91; --sc-accent-ink:#FFFFFF; --rule: color-mix(in oklab, #2C2D35 18%, transparent); --rule-soft: color-mix(in oklab, #2C2D35 10%, transparent); }
.ground-dark  { background: #2C2D35; color: #FFFFFF; --sc-canvas:#2C2D35; --sc-ink:#FFFFFF; --sc-ink-soft:#C3C9D6; --sc-accent:#5BA0EA; --sc-accent-ink:#2C2D35; --rule: color-mix(in oklab, #FFFFFF 24%, transparent); --rule-soft: color-mix(in oklab, #FFFFFF 12%, transparent); --plate:#353640; }
.ground-light .sc-body, .ground-dark .sc-body { color: var(--sc-ink-soft); }

.wrap { width: 100%; max-width: 86rem; margin-inline: auto; padding-left: var(--pl); padding-right: var(--pr); }
.sheet { position: relative; }
.sheet__title { max-width: 18ch; }
.sc-display { font-weight: 560; font-stretch: 100%; }

/* --------------------------------------------------------------- rail -- */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 1.5rem 0 1.5rem; color: var(--sc-ink); pointer-events: none;
  --sc-ink: #2C2D35; --sc-ink-soft: #52535A; --sc-accent: #063B91;
}
.rail { background: transparent; transition: background-color 200ms var(--sc-ease-out); }
.rail[data-ground="pan"] { background: #2C2D35; }
.rail > * { pointer-events: auto; }
.rail[data-ground="dark"], .rail[data-ground="pan"] { --sc-ink: #FFFFFF; --sc-ink-soft: #C3C9D6; --sc-accent: #5BA0EA; }
.rail__mark { display: block; width: 1.7rem; }
.rail__mark svg { width: 100%; height: auto; overflow: visible; }
.mark-j .a { fill: var(--sc-accent); }
.mark-j .b { fill: var(--sc-ink); }
.mark-j .c { fill: #3882D6; }
.mark-j .d { fill: #5BA0EA; }
.lockup { display: block; width: clamp(10.5rem, 14vw, 12.5rem); height: auto; overflow: visible; }
.lk-word { font: 600 40px/1 Archivo, "Geist", system-ui, sans-serif; letter-spacing: -1.4px; fill: var(--sc-ink); }
.lk-sub { font: 500 10.5px/1 Geist, system-ui, sans-serif; letter-spacing: 2.1px; fill: var(--sc-ink-soft); }
.rail__scale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.rail__scale a { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 1.6rem; position: relative; }
.rail__scale a::before {
  content: ""; width: .7rem; height: 1px; background: var(--sc-ink-soft);
  transition: transform 220ms var(--sc-ease-out), background 160ms; transform-origin: 50% 50%;
}
.rail__scale a[aria-current="true"]::before { transform: scaleX(2.4); background: var(--sc-accent); height: 2px; }
@media (hover: hover) and (pointer: fine) { .rail__scale a:hover::before { transform: scaleX(1.8); background: var(--sc-ink); } }
.rail__now {
  position: absolute; left: 50%; top: 0; margin: 0;
  writing-mode: vertical-rl;
  translate: 1.2rem var(--now-y, 50vh); transform: translateY(-50%) rotate(180deg);
  font: 500 .72rem/1 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink);
  transition: translate 280ms var(--sc-ease-out); pointer-events: none; white-space: nowrap;
}
.rail__cta {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 .8rem/1 var(--sc-font-text); letter-spacing: .02em; color: var(--sc-ink);
  text-decoration: none; padding: .5rem .4rem; border-radius: 2px;
  transition: color 160ms;
}
@media (hover: hover) and (pointer: fine) { .rail__cta:hover { color: var(--sc-accent); } }
.rail__cta:active { opacity: .7; }

/* ------------------------------------------------------------ control -- */
.cta {
  display: inline-flex; align-items: center; gap: .85rem; min-height: 3.25rem; padding: 0 1.5rem 0 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  font: 500 var(--sc-t-base)/1 var(--sc-font-text); letter-spacing: 0; white-space: nowrap; border-radius: 2px;
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.cta svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 200ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink)); }
  .cta:hover svg { transform: translateX(4px); }
}
.cta:active { transform: scale(.97); }
.cta--lg { min-height: 3.75rem; padding-inline: 1.9rem 1.7rem; font-size: var(--sc-t-lg); }

/* -------------------------------------------------------------- hero -- */
.hero__stage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: 1.5rem; padding: 1.75rem var(--pr) 1.5rem var(--pl);
  background: var(--sc-canvas); overflow: clip;
}
.hero__id { grid-column: 1 / -1; margin: 0; display: flex; align-items: baseline; gap: .7rem; padding-top: .1rem; }
.hero__id-name { font: 600 1.35rem/1 var(--sc-font-display); letter-spacing: -.03em; color: var(--sc-ink); }
.hero__id-sub { font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.hero__copy { grid-column: 1 / 10; grid-row: 2; align-self: start; padding-top: clamp(2.5rem, 9vh, 6rem); position: relative; z-index: 3; }
.hero__h1 {
  font-size: clamp(2.7rem, 0.9rem + 4.35vw, 5.2rem); line-height: .98; letter-spacing: -0.04em; font-weight: 580;
  text-wrap: balance; margin: 0; max-width: 16em;
}
.hero__h1 .l2 { display: block; }
.hero__sub { margin: clamp(1.25rem, 3.2vh, 2rem) 0 0; max-width: 31ch; font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; color: var(--sc-ink-soft); text-wrap: pretty; }
.hero__copy .cta { margin-top: clamp(1.5rem, 4vh, 2.5rem); }

.fit { position: absolute; z-index: 1; margin: 0; right: 0; top: 0; bottom: 0; width: 43%; }
.fit__plane { position: absolute; inset: -3rem 0; width: 100%; height: auto; max-width: none; will-change: transform; }
.fit__plane--grid {
  inset: -3rem 0 -3rem -34%; width: auto;
  --grid-c: color-mix(in oklab, var(--sc-ink) 10%, transparent);
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%); mask-image: linear-gradient(to right, transparent 0, #000 34%);
}
.fit__plane--photo {
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 3%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0, transparent 3%, #000 34%);
}
.fit__plane--photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.fit__plane--outline { inset: 0; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px rgb(12 12 10 / .5)); }
.contour { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke: color-mix(in oklab, #FFFFFF calc((1 - var(--t, 0)) * 100%), #5BA0EA); }
.overhang { fill: none; stroke: #5BA0EA; stroke-width: 1.6; }
/* Positioning statement: sits in the copy column under the CTA. Both states occupy
   one grid cell and cross-fade. Each state is label (PROBLEM / SOLUTION), a strong
   line, then a quieter line. */
.fit__cap {
  position: relative; display: grid; margin: clamp(2rem, 6vh, 3.5rem) 0 0; padding-top: 1.4rem; max-width: 27.5rem;
  font-family: var(--sc-font-display); letter-spacing: -.02em; text-wrap: balance;
}
.fit__cap::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2px; background: var(--sc-accent); }
.fit__cap > span { grid-area: 1 / 1; display: block; }
.fit__cap > span > span { display: block; }
.fit__label { margin-bottom: .9rem; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); }
.fit__head { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--sc-ink); }
.fit__body { margin-top: .6rem; font-size: 25px; font-weight: 400; line-height: 1.3; color: var(--sc-ink-soft); }
.fit__a { opacity: 1; }
.fit__b { opacity: 0; }

/* ------------------------------------------------------------- trust -- */
.trust { padding-block: clamp(5rem, 11vw, 11rem) clamp(5rem, 10vw, 10rem); }
.trust .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.trust .sheet__title { grid-column: 1 / 6; margin: 0; }
.ledger { grid-column: 6 / -1; margin: .4rem 0 0; }
.ledger__row { display: grid; grid-template-columns: minmax(7.5rem, 1fr) 3fr; gap: 1.25rem; padding-block: clamp(1.1rem, 2.2vw, 1.75rem); border-top: 1px solid var(--rule); }
.ledger__row:last-child { border-bottom: 1px solid var(--rule); }
.ledger dt { font: 500 var(--sc-t-xs)/1.5 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .45em; }
.ledger dd { margin: 0; font-size: var(--sc-t-xl); line-height: 1.22; letter-spacing: -.022em; text-wrap: balance; max-width: 26ch; }
.ledger .big { font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- capability -- */
.cap__stage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: 1.5rem; padding: clamp(1.75rem, 5vh, 3.5rem) var(--pr) clamp(1.5rem, 4vh, 3rem) var(--pl);
  background: var(--sc-canvas); overflow: clip;
}
.cap__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 3rem; padding-bottom: clamp(1rem, 2.5vh, 1.75rem); border-bottom: 1px solid var(--rule); }
.cap__head h2 { margin: 0; }
.cap__lede { margin: 0; max-width: 40ch; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
.cap__index { grid-column: 1 / 6; grid-row: 2; list-style: none; margin: 0; padding: 0; align-self: center; }
.cap__index li {
  font: 560 clamp(2.4rem, 0.8rem + 5.4vw, 5.6rem)/1.04 var(--sc-font-display); letter-spacing: -.04em;
  color: color-mix(in oklab, var(--sc-ink) 26%, transparent);
  display: flex; align-items: center; gap: .35em;
  transition: color 220ms var(--sc-ease-out);
}
.cap__index li::before { content: ""; width: .5em; height: 3px; background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--sc-ease-out); margin-right: -.15em; }
.cap__index li.is-on { color: var(--sc-ink); }
.cap__index li.is-on::before { transform: scaleX(1); }
.cap__panels { grid-column: 6 / -1; grid-row: 2; display: grid; align-self: center; }
.cap__panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.6vh, 1.75rem); align-content: center; }
.cap__panel svg { width: 100%; height: auto; max-height: 46svh; fill: none; overflow: visible; }
.cap__panel .k { stroke: var(--sc-ink); stroke-width: 1.3; stroke-linejoin: round; opacity: .82; }
.cap__panel .a { stroke: var(--sc-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cap__panel .legacy rect { stroke: var(--sc-ink-soft); stroke-width: 1.3; stroke-dasharray: 5 5; }
.cap__text h3 { margin: 0; font: 560 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -.03em; }
.cap__text p { margin: .5rem 0 0; max-width: 46ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.js .d { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ------------------------------------------------------------- proof -- */
.work__stage { display: flex; align-items: center; background: var(--sc-canvas); overflow: clip; }
.work__rail { display: flex; align-items: stretch; gap: clamp(2.5rem, 5vw, 5rem); padding: 0 var(--pr) 0 var(--pl); }
.work__rail > * { flex: 0 0 auto; }
.work__lead { width: clamp(17rem, 28vw, 25rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.work__lead h2 { margin: 0; }
.work__intro { margin: 0; color: var(--sc-ink-soft); max-width: 30ch; }
.case { width: clamp(19rem, 29vw, 26rem); border-top: 1px solid var(--rule); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.case__fig { width: 100%; height: auto; fill: none; }
.case__fig .k { stroke: var(--sc-ink); stroke-width: 1.2; opacity: .8; stroke-linejoin: round; }
.case__fig .a { stroke: var(--sc-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.case__fig circle.a { fill: var(--sc-canvas); }
.case__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: #353640; }
.case__tag { margin: 0; font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.case h3 { margin: 0; font: 560 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -.03em; text-wrap: balance; }
.case__schema { margin: .35rem 0 0; display: grid; gap: .85rem; }
.case__schema div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .75rem; }
.case__schema dt { font: 500 var(--sc-t-xs)/1.7 var(--sc-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-accent); }
.case__schema dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink); text-wrap: pretty; }
.work__close { width: clamp(15rem, 20vw, 19rem); display: flex; align-items: center; }
.work__close p { margin: 0; font: 560 var(--sc-t-lg)/1.25 var(--sc-font-display); letter-spacing: -.02em; color: var(--sc-ink-soft); text-wrap: balance; border-top: 1px solid var(--rule); padding-top: 1.5rem; }

/* -------------------------------------------------------- difference -- */
.why { padding-block: clamp(5rem, 11vw, 11rem) clamp(3.5rem, 7vw, 7rem); }
.why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.why__lead { grid-column: 1 / 7; }
.why__lead h2 { margin: 0; max-width: 11ch; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5.2rem); }
.why__sub { margin: clamp(1.25rem, 3vw, 2.25rem) 0 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; }
.why__list { grid-column: 8 / -1; list-style: none; margin: .5rem 0 0; padding: 0; }
.why__list li { position: relative; padding-block: clamp(1.25rem, 2.4vw, 1.9rem); }
.why__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sc-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--sc-ease-out) 120ms; }
.why__list li.sc-in::before { transform: scaleX(1); }
.why__list li:last-child { padding-bottom: 0; }
.why__list h3 { margin: 0; font: 560 var(--sc-t-lg)/1.15 var(--sc-font-display); letter-spacing: -.02em; }
.why__list p { margin: .55rem 0 0; color: var(--sc-ink-soft); max-width: 42ch; text-wrap: pretty; }

/* -------------------------------------------------------- technology -- */
.tech { padding-block: clamp(2rem, 4vw, 4rem) clamp(4.5rem, 9vw, 9rem); }
.tech__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.tech__label { grid-column: 1 / 4; margin: 0; font: 500 var(--sc-t-xs)/1.6 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tech__list { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; font-size: var(--sc-t-lg); letter-spacing: -.015em; }
.tech__list li:last-child { color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ people -- */
.people { padding-block: clamp(4.5rem, 9vw, 9rem) clamp(5rem, 11vw, 11rem); }
.people__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
.people__who { grid-column: 1 / 6; }
.people__name { margin: 2.25rem 0 0; font: 560 clamp(2rem, 1.2rem + 2.6vw, 3.6rem)/1 var(--sc-font-display); letter-spacing: -.035em; }
.people__org { margin: .6rem 0 0; color: var(--sc-ink-soft); }
.people__text { grid-column: 7 / -1; display: grid; gap: 1.5rem; align-content: start; }
.people .sc-lede { max-width: 38ch; font-size: var(--sc-t-xl); line-height: 1.25; letter-spacing: -.022em; }

/* ------------------------------------------------------------- close -- */
.close { padding-block: clamp(5rem, 10vw, 9rem); }
.close__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); column-gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }
.close__ask h2 { margin: 0; max-width: 14ch; font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4.4rem); line-height: .98; }
.close__lede { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; max-width: 36ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.close__direct { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 26rem; }
.close__direct div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; padding-block: .85rem; border-top: 1px solid var(--rule); }
.close__direct div:last-child { border-bottom: 1px solid var(--rule); }
.close__direct dt { font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.close__direct dd { margin: 0; font-size: var(--sc-t-lg); letter-spacing: -.01em; }
.close__direct a { text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .close__direct a:hover { color: var(--sc-accent); } }

.enquiry { display: grid; gap: .9rem; position: relative; background: #F4F7FB; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 2px; }
.enquiry__title { margin: 0 0 .35rem; font: 560 var(--sc-t-xl)/1.15 var(--sc-font-display); letter-spacing: -.025em; color: var(--sc-ink); }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.enquiry__field { display: grid; gap: .35rem; min-width: 0; }
.enquiry label { font: 500 var(--sc-t-xs)/1.3 var(--sc-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.enquiry label span { text-transform: none; letter-spacing: 0; }
.enquiry input, .enquiry textarea {
  width: 100%; min-height: 2.9rem; padding: .65rem .8rem; border: 1px solid color-mix(in oklab, var(--sc-ink) 58%, transparent); border-radius: 2px;
  background: #fff; color: var(--sc-ink); font: 400 var(--sc-t-base)/1.4 var(--sc-font-text); letter-spacing: 0;
  transition: border-color 140ms var(--sc-ease-out);
}
.enquiry textarea { resize: vertical; min-height: 6.5rem; }
@media (hover: hover) and (pointer: fine) { .enquiry input:hover, .enquiry textarea:hover { border-color: var(--sc-ink); } }
.enquiry input:focus-visible, .enquiry textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: var(--sc-accent); border-radius: 2px; }
.enquiry [aria-invalid="true"] { border-color: var(--sc-accent); box-shadow: inset 3px 0 0 var(--sc-accent); }
.enquiry__field .err { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-accent); }
.enquiry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__actions { margin-top: .35rem; }
.enquiry .cta { border: 0; cursor: pointer; width: 100%; justify-content: space-between; }
.enquiry .cta[disabled] { opacity: .65; cursor: progress; }
.enquiry__note { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.enquiry__status:empty { display: none; }
.enquiry__status { padding: .9rem 1rem; border-left: 3px solid var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 7%, transparent); font-size: var(--sc-t-sm); line-height: 1.5; }
.enquiry__status p { margin: 0; }
.enquiry__status button { margin-top: .6rem; padding: .55rem .9rem; border: 1px solid var(--sc-accent); border-radius: 2px; background: transparent; color: var(--sc-accent); font: 500 var(--sc-t-sm)/1 var(--sc-font-text); cursor: pointer; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .enquiry__status button:hover { background: var(--sc-accent); color: var(--sc-accent-ink); } }
.enquiry__status button:active { transform: scale(.97); }
.site-foot { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.foot {
  display: grid; grid-template-columns: minmax(10rem, 1.3fr) repeat(4, minmax(9rem, 1fr)); gap: 1.5rem 2rem;
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink);
}
.foot p, .foot address { margin: 0; font-style: normal; }
.foot__brand { line-height: 0; }
.foot__col h3 { margin: 0 0 .4rem; font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.foot__col p + p { margin-top: .15rem; }
.foot a { display: inline-block; padding-block: .1rem; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--sc-accent); text-decoration-color: currentColor; } }
@media (max-width: 1100px) and (min-width: 861px) { .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  :root { --pl: 1.25rem; --pr: 1.25rem; }
  body { padding-top: 3rem; }
  .rail { inset: 0 0 auto 0; width: 100%; height: 3rem; flex-direction: row; padding: 0 1.25rem; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); gap: 1rem; }
  .rail[data-ground="light"] { background: #FFFFFF; }
  .rail[data-ground="soft"]  { background: #F4F7FB; }
  .rail[data-ground="dark"], .rail[data-ground="pan"] { background: #2C2D35; }
  .rail__scale { display: none; }
  .rail__mark { width: 1.5rem; flex: 0 0 auto; }
  .rail__now { position: static; writing-mode: horizontal-tb; translate: none; transform: none; flex: 1 1 auto; text-align: left; font-size: .7rem; }
  .hero { height: auto !important; }
  .cap__stage.sc-stage, .work__stage.sc-stage { top: 3rem; height: calc(100svh - 3rem); }
  .work__stage { align-items: center; }
  .rail__cta { writing-mode: horizontal-tb; transform: none; padding: .5rem 0; font-size: .82rem; }

  .hero__stage { display: block; padding-top: 1.5rem; padding-bottom: 2.5rem; }
  .hero.sc-act--pinned .hero__stage.sc-stage { position: relative; height: auto; overflow: visible; }
  .hero__id { order: 0; margin-bottom: .25rem; }
  .hero__copy { padding-top: 1.25rem; }
  .hero__h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); line-height: 1; }
  .hero__h1 .l2 { display: inline; }
  .hero__stage { display: flex; flex-direction: column; }
  .hero__copy { order: 1; }
  .fit { order: 2; position: relative; right: auto; top: auto; bottom: auto; width: auto; aspect-ratio: 4 / 5; margin: 2.25rem calc(-1 * var(--pr)) 0 calc(-1 * var(--pl)); }
  .fit__plane { inset: -1.5rem 0; }
  .fit__plane--photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, transparent 6%, #000 30%); }
  .fit__plane--photo img { object-position: 70% 50%; }
  .fit__plane--grid { inset: -1.5rem 0; background-size: 32px 32px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
  .fit__plane--outline { inset: 0; }
  .fit__cap { margin-top: 2rem; max-width: none; }
  .fit__label { font-size: 12px; margin-bottom: .75rem; }
  .fit__head { font-size: clamp(24px, 7vw, 30px); }
  .fit__body { font-size: clamp(19px, 5.4vw, 22px); margin-top: .5rem; }

  .trust .sheet__title, .ledger { grid-column: 1 / -1; }
  .ledger { margin-top: 2rem; }
  .ledger__row { grid-template-columns: 1fr; gap: .4rem; }
  .ledger dd { max-width: none; }

  .cap__stage { display: flex; flex-direction: column; height: 100svh; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .cap__head { gap: .35rem; padding-bottom: .8rem; }
  .cap__lede { display: none; }
  .cap__index { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
  .cap__index li { font-size: clamp(1.55rem, 7vw, 2rem); }
  .cap__index li::before { display: none; }
  .cap__panels { flex: 1 1 auto; align-self: stretch; }
  .cap__panel svg { max-height: 30svh; }

  .work__stage { align-items: center; }
  .work__rail { align-items: flex-start; gap: 2rem; }
  .work__lead { width: 72vw; }
  .case { width: 78vw; }
  .work__close { width: 60vw; }

  .why__lead, .why__list, .people__who, .people__text { grid-column: 1 / -1; }
  .why__list { margin-top: 2.5rem; }
  .tech__label, .tech__list { grid-column: 1 / -1; }
  .tech__list { margin-top: .75rem; gap: .25rem 1.25rem; font-size: var(--sc-t-base); }

  .foot { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; padding-bottom: 1rem; }
  .foot__brand { grid-column: 1 / -1; }
  .foot a { padding-block: .5rem; }
  .close__body { grid-template-columns: 1fr; row-gap: 2.75rem; }
  .close__ask h2 { max-width: 15ch; }
  .enquiry { padding: 1.5rem 1.25rem 1.75rem; }
  .enquiry__row { grid-template-columns: 1fr; }
  .enquiry input, .enquiry textarea { min-height: 3rem; font-size: 1rem; }
}

/* a short viewport at desktop width */
@media (min-width: 861px) and (max-height: 700px) {
  .hero__copy { padding-top: 1.5rem; }

  .cap__panel svg { max-height: 36svh; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* nothing is pinned: every state is shown settled, in reading order */
  .hero, .cap { height: auto !important; }
  .hero__stage.sc-stage, .cap__stage.sc-stage { position: relative !important; height: auto !important; min-height: 0; overflow: visible; }
  .hero__stage { padding-bottom: 3rem; }
  .fit__a { opacity: 0 !important; } .fit__b { opacity: 1 !important; }
  .fit__plane { transform: none !important; }
  .cap__index { display: none; }
  .cap__stage { display: block; }
  .cap__panels { display: grid; gap: 3.5rem; margin-top: 2.5rem; }
  .cap__panel { grid-area: auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; opacity: 1 !important; }
  .cap__panel svg { max-height: none; }
  .d { stroke-dashoffset: 0 !important; }
  .why__list li::before { transform: scaleX(1); transition: none; }
  .rail__scale a::before, .cta, .cta svg { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .cap__panel { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .enquiry { gap: .65rem; }
  .enquiry textarea { min-height: 4.6rem; }
  .enquiry input { min-height: 2.6rem; }
  .enquiry .cta { min-height: 3.1rem; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .close__body { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
  .enquiry__row { grid-template-columns: 1fr; }
}