:root {
  color-scheme: light;
  --ink: #101a21;
  --muted: #66747e;
  --paper: #f5f4f0;
  --white: #fff;
  --line: #cfd5d7;
  --blue: #2878d7;
  --blue-dark: #155dac;
  --motion-lift: 27%;
  --motion-overlap: 3%;
  --motion-window-y: 9%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.site-header, main > section, footer { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: relative; z-index: 2; height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.identity { display: inline-flex; align-items: center; gap: 12px; opacity: .52; transition: opacity 180ms ease; }
.identity span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.identity:hover { opacity: .76; }
.identity img { width: 44px; height: 27px; object-fit: contain; }
.site-header nav { display: flex; align-items: center; gap: 27px; color: #5d6972; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 400; letter-spacing: .035em; }
.site-header nav a:hover, footer a:hover { color: var(--blue-dark); }

.intro-note { padding: clamp(65px, 8vw, 105px) 0 38px; }
.intro-note .hero-intro { margin-top: 22px; }
.hero { min-height: 680px; padding: clamp(95px, 13vw, 165px) 0 110px; }
.overline, .section-number { margin: 0; color: #7c8992; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { max-width: 940px; margin: 28px 0 37px; font-size: clamp(4.8rem, 10.3vw, 8.9rem); font-weight: 590; line-height: .84; letter-spacing: -.078em; }
.hero-intro { max-width: 710px; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; letter-spacing: -.022em; }
.text-link { margin-top: 42px; display: inline-flex; align-items: center; gap: 12px; color: var(--blue-dark); font-size: .86rem; font-weight: 650; }

.opening { position: relative; isolation: isolate; padding: 65px 0 28px; }
.opening > .overline, .opening h1, .opening-copy, .opening-footnote { position: relative; z-index: 1; }
.opening h1 { margin: 22px 0 0; font-size: clamp(3rem, 7vw, 86px); font-weight: 620; letter-spacing: -.065em; line-height: 1.02; }
.opening-stage { display: flex; flex-direction: column; margin-top: calc(-1 * var(--motion-lift)); }
.opening-copy { max-width: 600px; padding-bottom: 38px; }
.opening-copy .hero-intro { font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.65; }
.opening-copy .text-link { margin-top: 28px; }
.opening-stage .logo-motion { position: relative; order: -1; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; border-radius: 0; pointer-events: none; z-index: 0; }
.opening-stage .logo-motion-canvas { position: absolute; inset: 0; }
.opening-stage .logo-motion { transform: translateY(var(--motion-window-y)); }
.opening-stage .opening-copy { margin-top: calc(-1 * var(--motion-overlap)); }
.opening-footnote { display: flex; justify-content: space-between; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; letter-spacing: .035em; }
.opening + .statement { padding-top: 90px; margin-top: 36px; }

.logo-motion { position: relative; height: clamp(420px, 58vw, 660px); overflow: hidden; border-radius: 30px; background: radial-gradient(circle at 55% 42%, #1b2b36 0%, #101a21 53%, #0b1319 100%); box-shadow: 0 30px 80px rgba(12, 23, 31, .15); }
.logo-motion::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 38%, rgba(43,125,218,.06)); }
.logo-motion-canvas { width: 100%; height: 100%; display: block; }
.logo-motion + .logo-motion { margin-top: 34px; }
.logo-motion-light { margin-top: 0; border-radius: 0; background: transparent; box-shadow: none; }
.logo-motion-light::after { display: none; }
.logo-motion-light .motion-caption { color: rgba(44,57,66,.5); }
.logo-motion-light + .hero { min-height: auto; padding: clamp(75px, 9vw, 115px) 0; }
.motion-caption { position: absolute; right: 29px; bottom: 24px; left: 29px; display: flex; justify-content: space-between; color: rgba(230,238,243,.54); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }

.statement, .details { padding: 130px 0; display: grid; grid-template-columns: minmax(90px, .34fr) 1fr; gap: 40px; border-top: 1px solid var(--line); }
.logo-motion + .statement { margin-top: 110px; }
.statement > div, .details > div { max-width: 850px; }
.statement h2, .details h2 { margin: 25px 0 45px; font-size: clamp(3.3rem, 7.1vw, 6rem); line-height: .92; letter-spacing: -.065em; font-weight: 570; }
.body-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }
.body-copy p, .details > div > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.72; }

.work { padding: 10px 0 0; display: grid; grid-template-columns: minmax(90px, .34fr) 1fr; gap: 40px; }
.work > .overline { padding-top: 22px; }
.work-grid { border-top: 1px solid var(--line); }
.work-grid article { padding: 20px 0; display: grid; grid-template-columns: minmax(165px, .42fr) 1fr; gap: 28px; align-items: baseline; border-bottom: 1px solid var(--line); }
.work-grid h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.025em; }
.work-grid p { max-width: 390px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.62; }
.section-drift { position: relative; z-index: 0; width: min(1180px, calc(100% - 64px)); height: clamp(520px, 48vw, 700px); margin: -160px auto -200px; overflow: hidden; pointer-events: none; }
.section-drift-canvas { width: 100%; height: 100%; display: block; }

.principles { position: relative; z-index: 1; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.principles article { min-height: 260px; padding: 38px 38px 42px 0; }
.principles article + article { padding-left: 38px; border-left: 1px solid var(--line); }
.principles span { color: #8c969d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; }
.principles h3 { margin: 54px 0 14px; font-size: 1.25rem; letter-spacing: -.035em; }
.principles p { max-width: 300px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.62; }

.product { margin-top: 110px; margin-bottom: 110px; min-height: 610px; padding: clamp(45px, 7vw, 84px); display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 65px; overflow: hidden; color: var(--white); border-radius: 30px; background: linear-gradient(142deg, #1f6fcf 0%, #287fdc 53%, #155caa 100%); box-shadow: 0 30px 80px rgba(26, 91, 158, .2); }
.overline-light { color: #c9def6; }
.product h2 { margin: 25px 0 10px; font-size: clamp(4rem, 8vw, 7rem); line-height: .9; letter-spacing: -.075em; font-weight: 590; }
.product-lead { max-width: 610px; margin: 0 0 29px; color: white !important; font-size: clamp(1.3rem, 2.8vw, 2rem) !important; line-height: 1.2 !important; letter-spacing: -.038em; }
.product-copy > p:not(.overline):not(.product-lead) { max-width: 580px; margin: 0; color: #d9e8f9; font-size: .94rem; line-height: 1.65; }
.button { margin-top: 38px; padding: 14px 18px; display: inline-flex; align-items: center; gap: 26px; color: var(--ink); border-radius: 999px; background: var(--white); font-size: .82rem; font-weight: 660; }
.product-mark { position: relative; align-self: stretch; justify-self: stretch; min-height: 100%; display: flex; flex-direction: column; align-items: flex-end; }
.product-mark img { position: absolute; right: 0; bottom: 0; width: min(87px, 100%); height: auto; border-radius: 23%; box-shadow: 0 18px 38px rgba(8,40,75,.28); }
.product-mark small { --product-status-angle: 5deg; position: absolute; top: 4px; right: -4px; width: min(388px, 125%); padding: 19px 30px 18px; overflow: hidden; color: #f5faff; border-top: 1px solid rgba(255,255,255,.42); border-bottom: 1px solid rgba(255,255,255,.42); background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.31rem, 2vw, 1.75rem); font-weight: 650; letter-spacing: .12em; text-align: center; text-transform: uppercase; white-space: nowrap; transform: rotate(var(--product-status-angle)); box-shadow: 0 12px 30px rgba(8,40,75,.1); }
.product-mark small::after { position: absolute; content: ""; inset: -50% auto -50% -70%; width: 42%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-18deg); }
.product-mark.is-waiting small { opacity: 0; }
.product-mark.is-arrived small { animation: product-status-fade-forward 320ms cubic-bezier(.2,.72,.24,1) both; }
.product-mark.is-arrived small::after { animation: product-status-sweep 12s 350ms ease-in-out infinite; }

@keyframes product-status-fade-forward {
  0% { opacity: 0; filter: blur(3px); transform: perspective(700px) translateZ(-90px) rotate(var(--product-status-angle)) scale(.88); }
  78% { opacity: 1; filter: blur(0); transform: perspective(700px) translateZ(14px) rotate(var(--product-status-angle)) scale(1.025); }
  100% { opacity: 1; filter: blur(0); transform: perspective(700px) translateZ(0) rotate(var(--product-status-angle)) scale(1); }
}

@keyframes product-status-sweep {
  0% { left: -70%; }
  10.6%, 100% { left: 135%; }
}

@media (prefers-reduced-motion: reduce) {
  .product-mark small::after { display: none; }
  .product-mark.is-waiting small { opacity: 1; }
  .product-mark.is-arrived small { animation: none; }
}

.details { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 115px; }
.details > span, .details > div { position: relative; z-index: 1; }
.section-drift-canvas-details { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.details h2 { max-width: 780px; margin-bottom: 30px; }
.details > div > p { max-width: 670px; }
dl { margin: 60px 0 0; border-top: 1px solid var(--line); }
dl div { padding: 18px 0; display: grid; grid-template-columns: 120px 1fr; border-bottom: 1px solid var(--line); font-size: .84rem; }
dt { color: #879199; }
dd { margin: 0; font-weight: 570; }
dd a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }

footer { padding: 25px 0 35px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 25px; color: #758089; border-top: 1px solid var(--ink); font-size: .72rem; }
.footer-identity { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.footer-identity img { width: 44px; height: 27px; object-fit: contain; }
.footer-legal { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.footer-legal span { color: #a0a7ac; }
.footer-legal a { text-decoration: underline; text-underline-offset: 4px; }
footer > a { text-decoration: underline; text-underline-offset: 4px; }

.company-page main { min-height: calc(100vh - 210px); }
.company-details-page { min-height: 590px; padding: 110px 0; }
.company-details-page .overline { margin-bottom: 24px; }
.company-details-page h1 { max-width: 760px; margin: 0; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .94; letter-spacing: -.064em; font-weight: 600; }
.company-record { max-width: 760px; margin-top: 65px; border-top: 1px solid var(--line); }
.company-record p { margin: 0; padding: 18px 0; color: #4f5b64; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 1.55; }
.company-record p:first-child { color: var(--ink); font-weight: 630; }
.legal-details-page { width: min(860px, calc(100% - 64px)); min-height: 590px; margin-inline: auto; padding: 78px 0 110px; }
.legal-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 58px; color: #5d6972; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .02em; }
.legal-details-page .overline { margin-bottom: 24px; }
.legal-details-page h1 { margin: 0 0 42px; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .94; letter-spacing: -.064em; font-weight: 600; }
.legal-details-page h2 { margin: 46px 0 13px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.025em; }
.legal-details-page p { margin: 0 0 17px; color: #4f5b64; font-size: .94rem; line-height: 1.72; }
.legal-details-page p strong { color: var(--ink); }
.legal-details-page a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-details-page .legal-back-link { text-decoration: none; }

@media (min-width: 721px) and (max-width: 1000px) {
  .product-mark img { right: 20px; }
  .product-mark small { right: 20px; width: min(320px, 150%); padding: 15px 20px 14px; font-size: clamp(1rem, 2.2vw, 1.3rem); }
}

@media (max-width: 720px) {
  .opening-stage { margin-top: calc(-1 * var(--motion-lift)); }
  .opening-copy { max-width: 420px; padding-bottom: 32px; }
  .opening-stage .logo-motion { min-height: 0; }
  .opening h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
  .site-header, main > section, footer { width: min(100% - 36px, 620px); }
  .site-header nav { gap: 16px; }
  .site-header nav a:first-child { display: none; }
  .hero { min-height: 590px; padding-top: 105px; }
  .hero h1 { font-size: clamp(4rem, 20vw, 6.2rem); }
  .statement, .details { padding: 85px 0; grid-template-columns: 1fr; gap: 35px; }
  .statement > span[aria-hidden="true"], .details > span[aria-hidden="true"] { display: none; }
  .logo-motion { height: 470px; border-radius: 21px; }
  .logo-motion + .statement { margin-top: 70px; }
  .motion-caption { right: 20px; bottom: 18px; left: 20px; }
  .body-copy { grid-template-columns: 1fr; gap: 20px; }
  .work { padding-bottom: 0; grid-template-columns: 1fr; gap: 28px; }
  .work > .overline { padding-top: 0; }
  .work-grid article { padding: 20px 0; grid-template-columns: 1fr; gap: 8px; }
  .section-drift { width: min(100% - 36px, 620px); height: 620px; margin-top: -140px; margin-bottom: -260px; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: 210px; padding: 30px 5px; }
  .principles article + article { padding-left: 5px; border-top: 1px solid var(--line); border-left: 0; }
  .principles h3 { margin-top: 35px; }
  .product { position: relative; min-height: 680px; margin-top: 70px; margin-bottom: 70px; padding-top: 200px; grid-template-columns: 1fr; align-items: start; }
  .product-mark { position: absolute; inset: 45px; width: auto; min-height: 0; display: block; pointer-events: none; }
  .product-mark img { position: absolute; right: 0; bottom: 0; width: min(77px, 100%); pointer-events: auto; }
  .product-mark small { position: absolute; top: 0; right: 0; width: min(220px, 100%); padding: 12px 17px 11px; border-radius: 0; font-size: clamp(1.02rem, 4.5vw, 1.17rem); letter-spacing: .1em; pointer-events: auto; }
  footer { align-items: flex-start; flex-direction: column; }
  .footer-identity { white-space: normal; }
  .company-details-page { min-height: 500px; padding: 85px 0; }
  .company-record { margin-top: 45px; }
  .legal-details-page { width: min(100% - 36px, 620px); min-height: 500px; padding: 54px 0 85px; }
  .legal-back-link { margin-bottom: 44px; }
}