:root {
  --paper: #f1efe9;
  --ink: #111111;
  --muted: #686760;
  --line: rgba(17, 17, 17, 0.22);
  --blue: #1647e8;
  --white: #fbfaf6;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: "Archivo", sans-serif;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: "IBM Plex Mono", monospace; }
.paper-noise {
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.site-header {
  width: min(calc(100% - 48px), var(--max));
  min-height: 82px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; font-weight: 800; letter-spacing: -0.03em; }
.brand-sign { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-size: 0.72rem; letter-spacing: -0.08em; }
.brand-name { font-size: 1rem; }
.main-nav { display: flex; align-items: center; gap: 35px; font-size: 0.8rem; font-weight: 600; }
.main-nav a, .header-link { position: relative; }
.main-nav a::after, .header-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor; transition: right 250ms ease; }
.main-nav a:hover::after, .header-link:hover::after { right: 0; }
.header-link { justify-self: end; display: flex; gap: 18px; font: 500 0.75rem "IBM Plex Mono", monospace; }

main, footer { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.hero {
  min-height: calc(100vh - 82px);
  padding: 50px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, 0.94fr);
  gap: 42px;
  align-items: stretch;
}
.hero-copy { display: flex; flex-direction: column; min-width: 0; padding-top: 12px; }
.overline { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font: 500 0.65rem "IBM Plex Mono", monospace; letter-spacing: 0.04em; }
.overline span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.hero-title { margin: auto 0 0; padding: 55px 0 42px; font-size: clamp(4.7rem, 7.6vw, 8.15rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.075em; }
.title-line { display: block; overflow: hidden; padding: 0 0 0.08em; }
.title-line i { display: block; font-style: normal; transform: translateY(110%); animation: titleIn 800ms cubic-bezier(.16,1,.3,1) forwards; }
.title-line:nth-child(2) i { animation-delay: 110ms; }
.title-line:nth-child(3) i { animation-delay: 220ms; }
.title-indent { padding-left: 0.52em; }
.title-outline i { color: var(--paper); -webkit-text-stroke: 2px var(--ink); }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; }
.hero-bottom > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 0.97rem; line-height: 1.7; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.button { display: flex; align-items: center; justify-content: space-between; min-width: 235px; min-height: 55px; padding: 0 19px; border: 1px solid var(--ink); font-size: 0.78rem; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease; }
.button-dark { color: var(--white); background: var(--ink); }
.button:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--blue); }
.text-link { font: 500 0.7rem "IBM Plex Mono", monospace; text-decoration: underline; text-underline-offset: 5px; }

.hero-board {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--blue);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(0.7deg);
}
.board-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 44px 44px; }
.board-label { position: absolute; top: 20px; left: 22px; padding: 8px 10px; border: 1px solid var(--white); color: var(--white); font-size: 0.58rem; }
.system-map { position: absolute; inset: 55px 0 0; }
.system-map svg { width: 100%; height: 100%; overflow: visible; }
.map-line { fill: none; stroke: var(--white); stroke-width: 2; stroke-dasharray: 7 8; opacity: 0.65; vector-effect: non-scaling-stroke; }
.line-one { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 2s .7s ease forwards; }
.line-two { animation: dashMove 12s linear infinite; }
.line-three { animation: dashMove 9s linear infinite reverse; }
.map-pulse { fill: var(--white); stroke: var(--blue); stroke-width: 5; }
.pulse-two { animation: mapPulse 2.3s ease-in-out infinite; }
.map-node { position: absolute; width: 90px; height: 64px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); font-size: 0.78rem; }
.map-node small { color: var(--blue); font: 500 0.55rem "IBM Plex Mono", monospace; }
.node-idea { left: 7%; top: 14%; transform: rotate(-5deg); }
.node-design { left: 43%; top: 37%; transform: rotate(3deg); }
.node-build { right: 5%; top: 16%; transform: rotate(5deg); }
.node-ship { right: 4%; bottom: 23%; transform: rotate(-3deg); background: var(--ink); color: var(--white); box-shadow: 5px 5px 0 var(--white); }
.board-ticket { position: absolute; border: 2px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.ticket-one { left: 7%; bottom: 7%; width: 210px; padding: 17px; transform: rotate(-4deg); animation: ticketFloat 5s ease-in-out infinite; }
.ticket-one > span { color: var(--muted); font-size: 0.55rem; }
.ticket-one strong { display: block; margin-top: 12px; font-size: 0.88rem; }
.ticket-one small { font: 500 0.58rem "IBM Plex Mono", monospace; }
.ticket-bar { height: 8px; margin: 17px 0 9px; border: 1px solid var(--ink); }
.ticket-bar i { display: block; width: 78%; height: 100%; background: var(--blue); animation: ticketProgress 3s ease-in-out infinite alternate; }
.ticket-two { right: 5%; bottom: 5%; min-width: 172px; padding: 13px; display: flex; align-items: center; gap: 11px; transform: rotate(2deg); }
.ticket-two strong, .ticket-two small { display: block; }
.ticket-two strong { font-size: 0.72rem; }.ticket-two small { margin-top: 3px; color: var(--muted); font: 0.5rem "IBM Plex Mono", monospace; }
.ticket-status { width: 13px; height: 13px; border-radius: 50%; background: var(--blue); animation: statusBlink 1.4s steps(1) infinite; }
.rotating-stamp { position: absolute; right: 9%; top: 42%; width: 118px; height: 118px; color: var(--white); }
.rotating-stamp svg { position: absolute; inset: 0; animation: rotate 14s linear infinite; }
.rotating-stamp text { fill: currentColor; font: 500 8px "IBM Plex Mono", monospace; letter-spacing: 1px; }
.rotating-stamp > span { position: absolute; inset: 34px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-weight: 900; }
.board-note { position: absolute; right: 20px; top: 74px; margin: 0; color: var(--white); font-size: 0.58rem; line-height: 1.6; text-align: right; }

.ticker { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; border-block: 2px solid var(--ink); background: var(--ink); color: var(--white); transform: rotate(-0.65deg); }
.ticker-track { width: max-content; padding: 13px 0; display: flex; align-items: center; gap: 28px; animation: marquee 25s linear infinite; }
.ticker-track span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.ticker-track i { color: #84a2ff; font-style: normal; }

.section { padding-top: 145px; }
.section-index { font-size: 0.63rem; letter-spacing: 0.04em; }
.statement { display: grid; grid-template-columns: 0.28fr 1fr; gap: 50px; }
.statement-copy { max-width: 980px; margin: -12px 0 0; font-size: clamp(2.5rem, 5.3vw, 5.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.055em; }
.statement-copy em { color: var(--blue); font-style: normal; }

.service-list { padding-top: 95px; }
.service-row { min-height: 215px; display: grid; grid-template-columns: 0.11fr 0.9fr 0.68fr 40px; gap: 25px; align-items: center; border-top: 1px solid var(--ink); transition: background 250ms ease, padding 250ms ease; }
.service-row:last-child { border-bottom: 1px solid var(--ink); }
.service-row:hover { padding-inline: 18px; background: var(--white); }
.service-number { align-self: start; padding-top: 29px; color: var(--muted); font-size: 0.62rem; }
.service-copy h2 { margin: 0; font-size: clamp(2rem, 4vw, 4.25rem); letter-spacing: -0.055em; }
.service-copy p { max-width: 550px; margin: 14px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.service-visual { justify-self: center; position: relative; width: 210px; height: 120px; }
.service-arrow { justify-self: end; font-size: 1.7rem; transition: transform 250ms ease; }
.service-row:hover .service-arrow { transform: rotate(45deg); }
.visual-design { perspective: 500px; }
.wireframe { position: absolute; width: 130px; height: 82px; border: 2px solid var(--ink); background: var(--paper); }
.wire-one { top: 10px; left: 15px; transform: rotate(-8deg); }
.wire-two { right: 8px; bottom: 5px; padding: 15px; transform: rotate(6deg); box-shadow: 5px 5px 0 var(--blue); }
.wire-two i { display: block; height: 5px; margin-bottom: 8px; background: var(--ink); }.wire-two i:nth-child(2) { width: 73%; }.wire-two i:nth-child(3) { width: 45%; background: var(--blue); }
.visual-code { padding: 24px 22px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); transform: rotate(-3deg); box-shadow: 6px 6px 0 var(--blue); }
.visual-code span, .visual-code strong { display: block; font-size: 0.7rem; font-weight: 400; }.visual-code strong { margin: 11px 0 0 25px; color: #9bb2ff; }
.visual-code i { display: inline-block; width: 7px; height: 13px; margin-left: 85px; background: var(--white); animation: statusBlink 1s steps(1) infinite; }
.visual-flow { display: flex; align-items: center; }
.visual-flow span { width: 43px; height: 43px; display: block; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.visual-flow span:nth-of-type(2) { background: var(--blue); }.visual-flow span:nth-of-type(3) { border-radius: 0; background: var(--ink); transform: rotate(45deg); }
.visual-flow i { width: 32px; height: 1px; background: var(--ink); transform-origin: left; animation: connector 2s ease-in-out infinite; }

.method { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 90px; align-items: start; }
.method-heading { position: sticky; top: 35px; }
.method-heading h2 { margin: 30px 0 0; font-size: clamp(3.5rem, 6.2vw, 6.2rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.065em; }
.method-heading h2 i { color: var(--blue); font-style: normal; }
.method-panel { position: relative; overflow: hidden; min-height: 820px; padding: 48px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); }
.method-intro { display: flex; justify-content: space-between; gap: 30px; align-items: start; }
.method-intro p { max-width: 420px; margin: 0; color: #b9b9b4; line-height: 1.75; }
.method-intro span { color: #83837d; font-size: 0.56rem; }
.steps { position: relative; z-index: 2; margin: 75px 0 0; padding: 0; list-style: none; }
.steps li { padding: 22px 0; display: grid; grid-template-columns: 52px 0.5fr 1fr; gap: 18px; align-items: baseline; border-top: 1px solid rgba(255,255,255,.25); }
.steps li > span { color: #73736e; font-size: 0.57rem; }
.steps strong { font-size: 1.4rem; }.steps p { margin: 0; color: #a5a59f; font-size: 0.78rem; line-height: 1.6; }
.method-figure { position: absolute; left: -7px; right: -7px; bottom: 23px; display: flex; justify-content: space-between; gap: 5px; color: var(--ink); font-size: clamp(2.8rem, 5.8vw, 5.5rem); font-weight: 900; letter-spacing: -0.07em; }
.method-figure span { padding: 5px 7px; background: var(--white); transform: rotate(-2deg); }.method-figure span:nth-child(2) { transform: rotate(2deg); background: #9bb2ff; }.method-figure span:nth-child(3) { transform: rotate(-1deg); }.method-figure span:nth-child(4) { transform: rotate(1.5deg); color: var(--white); background: var(--blue); }

.numbers { display: grid; grid-template-columns: repeat(3, 1fr); }
.number-item { min-height: 310px; padding: 30px; border: 1px solid var(--ink); border-right: 0; }
.number-item:last-child { border-right: 1px solid var(--ink); }
.number-item > span { color: var(--muted); font-size: 0.6rem; }
.number-item strong { display: block; margin-top: 53px; font-size: clamp(3.2rem, 6vw, 6.4rem); line-height: 1; letter-spacing: -0.07em; }.number-item strong b { font: inherit; }
.number-item p { max-width: 290px; margin: 27px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.6; }

.contact { margin-top: 145px; padding: 35px 42px 38px; border: 2px solid var(--ink); background: var(--blue); color: var(--white); box-shadow: 10px 10px 0 var(--ink); }
.contact-top, .contact-footer { display: flex; justify-content: space-between; gap: 30px; font-size: 0.58rem; }
.contact-main { min-height: 540px; padding: 80px 0 45px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-main h2 { margin: 0; font-size: clamp(3.8rem, 8vw, 8rem); line-height: 0.9; letter-spacing: -0.075em; }.contact-main h2 i { color: var(--blue); font-style: normal; -webkit-text-stroke: 2px var(--white); }
.contact-mail { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--white); font-size: clamp(1.2rem, 2.5vw, 2.2rem); font-weight: 700; }.contact-mail span { transition: transform 250ms ease; }.contact-mail:hover span { transform: translate(6px, -6px); }
.contact-footer { align-items: end; }.contact-footer p { margin: 0; }

footer { min-height: 145px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; }
footer > span, footer > a:last-child { font-size: 0.55rem; }footer > a:last-child { justify-self: end; }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes titleIn { to { transform: translateY(0); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes dashMove { to { stroke-dashoffset: -90; } }
@keyframes mapPulse { 50% { r: 13; } }
@keyframes ticketFloat { 50% { transform: rotate(-2deg) translateY(-8px); } }
@keyframes ticketProgress { to { width: 100%; } }
@keyframes statusBlink { 50% { opacity: .25; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes connector { 50% { transform: scaleX(.5); } }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(5.2rem, 12vw, 8.5rem); }
  .hero-board { width: min(100%, 760px); min-height: 680px; margin-inline: auto; }
  .method { grid-template-columns: 1fr; }
  .method-heading { position: static; }
  .service-row { grid-template-columns: 55px 1fr .6fr 30px; }
}

@media (max-width: 740px) {
  .site-header, main, footer { width: min(calc(100% - 30px), var(--max)); }
  .site-header { min-height: 72px; grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .brand-sign { width: 35px; height: 35px; }
  .header-link { font-size: .62rem; gap: 8px; }
  .hero { min-height: auto; padding: 45px 0 60px; gap: 48px; }
  .hero-title { padding: 48px 0 35px; font-size: clamp(3.45rem, 17vw, 5.5rem); line-height: .84; }
  .title-indent { padding-left: .28em; }.title-outline i { -webkit-text-stroke-width: 1.3px; }
  .hero-bottom { grid-template-columns: 1fr; gap: 28px; }.hero-actions { width: 100%; }.button { width: 100%; }
  .hero-board { min-height: 540px; box-shadow: 7px 7px 0 var(--ink); transform: rotate(.3deg); }
  .system-map { inset: 52px -80px 0 -40px; }.map-node { width: 76px; height: 56px; font-size: .65rem; }.node-idea { left: 11%; }.node-design { left: 44%; }.node-build { right: 8%; }.node-ship { right: 8%; bottom: 25%; }
  .rotating-stamp { width: 90px; height: 90px; right: 7%; top: 48%; }.rotating-stamp > span { inset: 27px; font-size: .72rem; }
  .ticket-one { width: 170px; left: 4%; }.ticket-two { min-width: 145px; right: 3%; }.board-note { display: none; }
  .section { padding-top: 100px; }
  .statement { grid-template-columns: 1fr; gap: 42px; }.statement-copy { margin: 0; font-size: clamp(2.25rem, 10.8vw, 3.6rem); }
  .service-list { padding-top: 70px; }.service-row { min-height: 310px; padding: 25px 0; grid-template-columns: 35px 1fr 25px; grid-template-rows: auto auto; gap: 15px; }.service-row:hover { padding-inline: 0; }.service-copy h2 { font-size: 2.25rem; }.service-visual { grid-column: 2; justify-self: start; margin-top: 15px; }.service-arrow { grid-column: 3; grid-row: 1; }.service-number { grid-row: 1 / span 2; }
  .method { gap: 45px; }.method-heading h2 { font-size: clamp(3.7rem, 15vw, 5rem); }.method-panel { min-height: 870px; padding: 28px 20px; }.method-intro { flex-direction: column; }.steps { margin-top: 55px; }.steps li { grid-template-columns: 35px 1fr; }.steps p { grid-column: 2; }.method-figure { flex-wrap: wrap; justify-content: flex-start; font-size: 3.2rem; }
  .numbers { grid-template-columns: 1fr; }.number-item { min-height: 250px; border-right: 1px solid var(--ink); border-bottom: 0; }.number-item:last-child { border-bottom: 1px solid var(--ink); }.number-item strong { margin-top: 30px; }
  .contact { margin-top: 100px; padding: 25px 20px; box-shadow: 7px 7px 0 var(--ink); }.contact-main { min-height: 550px; padding-top: 70px; }.contact-main h2 { font-size: clamp(3.4rem, 16vw, 5rem); }.contact-main h2 i { -webkit-text-stroke-width: 1.3px; }.contact-top span:last-child { display: none; }.contact-footer { flex-direction: column; align-items: flex-start; }
  footer { min-height: 170px; grid-template-columns: 1fr auto; }footer > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }.title-line i { transform: none; }
}