/* Breakpoints: 768 / 1024 / 1440px | Fonts: Bebas Neue + Zen Kaku Gothic New | Dependencies: Google Fonts */
:root {
  --color-primary: #2558e5;
  --color-deep: #102a78;
  --color-ink: #151a23;
  --color-paper: #f4f5f2;
  --color-white: #fff;
  --color-muted: #69717c;
  --color-line: #d9dde1;
  --color-accent: #eaf43b;
  --color-footer: #07101e;
  --font-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: "Bebas Neue", "DIN Condensed", "Avenir Next Condensed", sans-serif;
  --space: 8px;
  --container: 1200px;
  --header-height: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  content: "";
  opacity: .035;
  background-image: radial-gradient(rgb(21 26 35 / 24%) .45px, transparent .45px);
  background-size: 4px 4px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, summary, a { font: inherit; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
section { scroll-margin-top: 24px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { position: relative; padding-block: 72px; border-top: 1px solid rgb(21 26 35 / 8%); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 999; top: 8px; left: 8px; padding: 8px 16px;
  color: var(--color-white); background: var(--color-deep); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
}
.eyebrow::after { width: 7px; height: 7px; flex: 0 0 auto; background: var(--color-accent); content: ""; }
.eyebrow--light { color: var(--color-white); }
.section-title {
  font-size: clamp(2rem, 7.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .12em;
  word-break: keep-all;
}

.button {
  display: inline-grid;
  grid-template-columns: 28px auto 34px;
  min-width: 254px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.button--primary { color: #f2e900; background: var(--color-footer); }
.button__icon { font-size: 1.2rem; line-height: 1; }
.button__arrow { font-size: 1.25rem; line-height: 1; transition: transform .2s ease; }
.button:hover .button__arrow, .button:focus-visible .button__arrow { transform: translateX(6px); }
.button:hover, .button:focus-visible { color: var(--color-footer); background: var(--color-accent); }

.header { position: absolute; z-index: 20; inset: 0 0 auto; height: var(--header-height); }
.header__inner { display: flex; max-width: none; min-height: var(--header-height); align-items: center; padding-inline: clamp(20px, 4vw, 64px); }
.header__brand { display: grid; min-height: 44px; align-content: center; line-height: 1.2; }
.header__company { font-size: .78rem; font-weight: 900; letter-spacing: .16em; }
.header__descriptor { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: .68rem; font-weight: 500; letter-spacing: .32em; }
.header__descriptor::after { width: 8px; height: 8px; background: var(--color-accent); content: ""; }

.hero { position: relative; min-height: max(680px, 100dvh); overflow: clip; isolation: isolate; }
.hero__inner { position: relative; z-index: 2; max-width: none; min-height: max(680px, 100dvh); padding: 114px clamp(20px, 4vw, 64px) 48px; }
.hero__copy { width: min(100%, 440px); }
.hero__eyebrow { margin: 0 0 40px; line-height: 1; }
.hero__brand-main {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 21vw, 7rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: .11em;
  white-space: nowrap;
}
.hero__brand-sub {
  display: block;
  margin-top: 10px;
  padding-left: 3px;
  font-family: var(--font-base);
  font-size: clamp(.72rem, 3.5vw, 1.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .48em;
  white-space: nowrap;
}
.hero__title {
  font-size: clamp(1.82rem, 8.4vw, 2.55rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .13em;
}
.hero__title span { display: block; white-space: nowrap; }
.hero__lead { margin: 18px 0 26px; font-size: .88rem; font-weight: 500; letter-spacing: .14em; }
.hero__media { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; overflow: hidden; transform: translateX(-50%); }
.hero__picture { display: block; width: 100%; height: 100%; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
.hero__scroll { display: none; }

.about__inner,
.benefits .container,
.requirements__inner,
.flow .container,
.faq-section__inner {
  position: relative;
  padding-left: 56px;
}
.about__inner::before,
.benefits .container::before,
.requirements__inner::before,
.flow .container::before,
.faq-section__inner::before,
.job .container::before {
  position: absolute;
  left: 28px;
  top: 0;
  width: 1px;
  height: 142px;
  background: rgb(21 26 35 / 27%);
  content: "";
}
.about__inner::after,
.benefits .container::after,
.requirements__inner::after,
.flow .container::after,
.faq-section__inner::after,
.job .container::after {
  position: absolute;
  left: 24px;
  top: -1px;
  width: 9px;
  height: 9px;
  background: linear-gradient(var(--color-paper), var(--color-paper)) center/1px 9px no-repeat,
              linear-gradient(var(--color-paper), var(--color-paper)) center/9px 1px no-repeat,
              linear-gradient(var(--color-ink), var(--color-ink)) center/1px 9px no-repeat,
              linear-gradient(var(--color-ink), var(--color-ink)) center/9px 1px no-repeat;
  opacity: .45;
  content: "";
}

.about { background: var(--color-paper); }
.about__inner { display: grid; gap: 32px; }
.about__grid { display: grid; gap: 20px; }
.about__body { max-width: 700px; color: #505761; font-size: .92rem; letter-spacing: .06em; }
.about__values { display: flex; flex-wrap: wrap; gap: 10px 15px; margin-top: 24px; color: var(--color-ink); font-size: .82rem; font-weight: 500; letter-spacing: .08em; }
.about__values li:not(:last-child)::after { margin-left: 15px; color: var(--color-muted); content: "/"; }

.job { overflow: hidden; }
.job .container { position: relative; display: grid; gap: 24px; padding-left: 56px; }
.job .eyebrow { grid-column: 1; }
.job__title { grid-column: 1; align-self: start; font-size: 1.45rem; line-height: 1.55; letter-spacing: .08em; }
.job__grid { display: grid; grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.job-card { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 12px; min-width: 0; }
.job-card__media { position: relative; overflow: hidden; }
.job-card__media::after { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 28%); content: ""; }
.job-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.job-card--materials .job-card__media img { object-position: 58% 70%; }
.job-card--longhaul .job-card__media img { object-position: 54% center; }
.job-card__copy { min-width: 0; }
.job-card__number { display: none; }
.job-card h3 { font-size: .83rem; font-weight: 700; line-height: 1.55; letter-spacing: .06em; word-break: keep-all; }
.job-card p { margin-top: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: .68rem; font-weight: 500; letter-spacing: .08em; }

.benefits { background: var(--color-paper); }
.benefits .container { display: grid; gap: 28px; }
.benefits__list { display: grid; gap: 24px; }
.benefits__item { display: grid; grid-template-columns: 42px 1fr; gap: 0 16px; align-items: baseline; }
.benefits__number { grid-row: 1 / 3; color: var(--color-ink); font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }
.benefits__number::after { display: block; width: 20px; height: 2px; margin-top: 8px; background: var(--color-accent); content: ""; }
.benefits__item h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .1em; }
.benefits__item p { margin-top: 4px; color: var(--color-muted); font-size: .78rem; letter-spacing: .06em; }

.facts { padding-block: 34px; color: var(--color-white); background: #082b54; }
.facts__inner { display: grid; gap: 22px; }
.facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts__item { min-width: 0; padding: 0 8px; border-left: 1px solid rgb(255 255 255 / 36%); text-align: center; }
.facts__item dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.facts__item dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; }
.facts__item strong { font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; line-height: 1; letter-spacing: .04em; }
.facts__item small { width: 100%; margin-top: 4px; color: rgb(255 255 255 / 64%); font-size: .54rem; white-space: nowrap; }

.requirements { background: var(--color-paper); }
.requirements__inner { display: grid; gap: 26px; }
.requirements__header .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.requirements__list { border-top: 1px solid var(--color-line); }
.requirements__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.requirements__row dt { color: var(--color-ink); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.requirements__row dd { min-width: 0; font-size: .72rem; font-weight: 500; line-height: 1.75; letter-spacing: .025em; }
.requirements__row br { display: none; }
.requirements__row small { color: inherit; font-size: inherit; font-weight: inherit; }
.requirements__row small::before { content: " ／ "; }

.flow { background: var(--color-paper); }
.flow .container { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; }
.flow .eyebrow { align-self: start; }
.flow .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.flow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.flow__item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); min-width: 0; align-items: center; gap: 7px; padding-right: 15px; }
.flow__item::after { position: absolute; right: 3px; content: "→"; color: var(--color-muted); font-size: .9rem; }
.flow__item:last-child { padding-right: 0; }
.flow__item:last-child::after { display: none; }
.flow__number { display: none; }
.flow__icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; font-size: .72rem; }
.flow__item strong { min-width: 0; font-size: .69rem; font-weight: 700; line-height: 1.45; letter-spacing: .03em; }

.faq-section { background: var(--color-paper); }
.faq-section__inner { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; }
.faq-section header .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.faq-list { min-width: 0; border-top: 1px solid var(--color-line); }
.faq { border-bottom: 1px solid var(--color-line); }
.faq__question { position: relative; min-height: 48px; padding: 13px 34px 13px 0; font-size: .74rem; font-weight: 500; line-height: 1.55; cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { position: absolute; right: 8px; top: 50%; content: "+"; font-size: 1rem; transform: translateY(-50%); }
.faq[open] .faq__question::after { content: "−"; }
.faq__answer { padding: 0 34px 14px 0; color: var(--color-muted); font-size: .72rem; }
.requirements__row dd, .faq__question, .about__body { line-break: strict; text-wrap: pretty; }

.contact { position: relative; min-height: 330px; overflow: hidden; color: var(--color-ink); background: var(--color-white); border-top: 1px solid rgb(21 26 35 / 8%); isolation: isolate; }
.contact__image { position: absolute; z-index: -3; top: 0; right: 0; width: 28%; height: 100%; object-fit: cover; object-position: 55% center; clip-path: polygon(28% 0, 100% 14%, 100% 100%, 0 100%); }
.contact__veil { position: absolute; z-index: -2; top: 12%; right: 10%; width: 22%; height: 86%; border: 1px solid rgb(37 88 229 / 32%); background: linear-gradient(135deg, rgb(255 255 255 / 52%), rgb(37 88 229 / 8%)); clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); }
.contact__inner { display: grid; grid-template-columns: 88px minmax(0, 1fr); min-height: 330px; align-content: center; gap: 12px; padding-top: 48px; padding-right: 104px; padding-bottom: 48px; }
.contact .eyebrow { display: none; }
.contact__title { align-self: center; font-size: 1rem; font-weight: 700; line-height: 1.55; letter-spacing: .06em; }
.contact__details { min-width: 0; }
.contact__phone { display: flex; width: max-content; min-height: 44px; align-items: center; font-family: var(--font-display); font-size: clamp(2rem, 8.4vw, 3.4rem); line-height: 1; letter-spacing: .045em; white-space: nowrap; }
.contact__phone::before { margin-right: 8px; font-family: var(--font-base); font-size: .55em; content: "☎"; }
.contact__details p { margin: 8px 0 16px; font-size: .67rem; font-weight: 700; letter-spacing: .12em; }
.contact .button { min-width: min(100%, 254px); }

.footer { padding-block: 34px; color: var(--color-white); background: var(--color-footer); }
.footer__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.footer p { display: grid; }
.footer strong { font-size: .76rem; letter-spacing: .18em; }
.footer p span { margin-top: 4px; color: rgb(255 255 255 / 56%); font-size: .6rem; letter-spacing: .26em; }
.footer small { color: rgb(255 255 255 / 45%); font-size: .55rem; }

.is-motion-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.is-motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 768px) {
  .container { padding-inline: 40px; }
  .header__inner, .hero__inner { max-width: none; padding-inline: clamp(40px, 4vw, 64px); }
  .section { padding-block: 84px; }
  .header__company { font-size: .84rem; }
  .hero { min-height: max(720px, 100dvh); }
  .hero__inner { display: flex; min-height: max(720px, 100dvh); align-items: center; padding-top: 110px; padding-bottom: 64px; }
  .hero__copy { width: min(60%, 540px); }
  .hero__eyebrow { margin-bottom: 68px; }
  .hero__brand-main { font-size: clamp(7rem, 12vw, 10rem); letter-spacing: .09em; }
  .hero__brand-sub { margin-top: 14px; font-size: 1.24rem; letter-spacing: .5em; }
  .hero__title { font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1.5; }
  .hero__lead { margin: 22px 0 30px; font-size: .96rem; }
  .hero .button { min-width: 330px; }
  .hero__image { object-position: center; }
  .hero__scroll { position: absolute; z-index: 4; left: max(40px, calc((100vw - var(--container)) / 2 + 40px)); bottom: 32px; display: block; width: 44px; height: 44px; font-size: 0; }
  .hero__scroll::before, .hero__scroll::after { position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--color-ink); content: ""; }
  .hero__scroll::after { transform: rotate(90deg); }
  .hero__scroll i { display: none; }

  .about__inner,
  .benefits .container,
  .requirements__inner,
  .flow .container,
  .faq-section__inner {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 0 36px;
    padding-left: 40px;
  }
  .about__inner::before,
  .benefits .container::before,
  .requirements__inner::before,
  .flow .container::before,
  .faq-section__inner::before,
  .job .container::before { left: 40px; height: 160px; }
  .about__inner::after,
  .benefits .container::after,
  .requirements__inner::after,
  .flow .container::after,
  .faq-section__inner::after,
  .job .container::after { left: 36px; }
  .about .eyebrow, .benefits .eyebrow, .requirements .eyebrow, .flow .eyebrow, .faq-section .eyebrow { margin-left: 24px; }
  .about__grid { grid-column: 2; gap: 24px; }
  .about__body { font-size: .96rem; }
  .about__values { margin-top: 30px; }

  .job .container { grid-template-columns: 260px minmax(0, 1fr); gap: 0 40px; padding-left: 40px; }
  .job .eyebrow { grid-column: 1; margin-left: 24px; }
  .job__title { grid-column: 1; margin: 54px 0 0 24px; font-size: 1.8rem; line-height: 1.65; }
  .job__grid { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1.35fr) minmax(180px, .7fr); gap: 20px 44px; }
  .job-card { display: contents; }
  .job-card__media { grid-column: 1; }
  .job-card__copy { grid-column: 2; align-self: center; }
  .job-card__media img { height: 176px; aspect-ratio: auto; }
  .job-card h3 { font-size: 1.16rem; }
  .job-card p { font-size: .78rem; }

  .benefits__list { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
  .benefits__item { display: block; }
  .benefits__item h3 { margin-top: 16px; }
  .benefits__item p { margin-top: 8px; }

  .facts { padding-block: 38px; }
  .facts__inner { grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 36px; }
  .facts__heading { padding-left: 24px; }
  .facts__item { padding-inline: 20px; }
  .facts__item dd { font-size: .82rem; }
  .facts__item strong { font-size: 2.2rem; }
  .facts__item small { font-size: .62rem; }

  .requirements__list { grid-column: 2; }
  .requirements__row { grid-template-columns: 106px minmax(0, 1fr); padding: 11px 0; }
  .requirements__row dt, .requirements__row dd { font-size: .78rem; }

  .flow .container { grid-template-columns: 160px minmax(0, 1fr); gap: 36px; }
  .flow__list { grid-column: 2; }
  .flow__item { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-right: 34px; }
  .flow__item::after { right: 12px; font-size: 1.3rem; }
  .flow__number { display: block; font-family: var(--font-display); font-size: 1.8rem; }
  .flow__icon { display: none; }
  .flow__item strong { font-size: .88rem; }

  .faq-section__inner { grid-template-columns: 160px minmax(0, 1fr); gap: 36px; }
  .faq-list { grid-column: 2; }
  .faq__question { font-size: .8rem; }

  .contact { min-height: 360px; }
  .contact__image { width: 29%; }
  .contact__veil { right: 17%; width: 16%; }
  .contact__inner { grid-template-columns: 190px minmax(0, 1fr); min-height: 360px; gap: 34px; padding-right: 33%; }
  .contact__title { font-size: 2.25rem; }
  .contact__phone { font-size: clamp(3.25rem, 5.4vw, 4.7rem); }
  .contact__details p { font-size: .8rem; }
}

@media (min-width: 1024px) {
  .section { padding-block: 96px; }
  .hero__copy { width: min(60%, 540px); }
  .hero__brand-main { font-size: clamp(8.5rem, 11vw, 10rem); }
  .job-card__media img { height: 210px; }
  .facts__inner { grid-template-columns: 170px minmax(0, 1fr); }
  .contact__inner { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (min-width: 1440px) {
  .hero__brand-main { font-size: 10rem; }
  .hero__copy { width: 540px; }
}

@media (max-width: 374px) {
  .hero__brand-main { font-size: 4.15rem; }
  .hero__title { font-size: 1.62rem; }
  .hero__lead { font-size: .78rem; }
  .button { min-width: 238px; }
  .job__title { font-size: 1.28rem; }
  .facts__item { padding-inline: 4px; }
  .facts__item dd { font-size: .58rem; }
  .facts__item strong { font-size: 1.42rem; }
  .flow__item { grid-template-columns: 18px minmax(0, 1fr); gap: 3px; padding-right: 12px; }
  .flow__item strong { font-size: .56rem; }
  .contact__inner { grid-template-columns: 80px minmax(0, 1fr); padding-right: 84px; }
  .contact__title { font-size: .92rem; }
  .contact__phone { font-size: 1.8rem; }
  .contact .button { grid-template-columns: 24px auto 24px; min-width: 100%; padding-inline: 10px; font-size: .78rem; }
}

@media (max-width: 767px) {
  .hero, .hero__inner { height: min(640px, 100dvh); min-height: min(568px, 100dvh); }
  .hero__media { background: var(--color-paper); }
  .hero__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-paper) 0 10%, rgb(244 245 242 / 72%) 30%, transparent 68%);
    content: "";
  }
  .hero__image { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
  .job-card h3, .job-card p { white-space: nowrap; }
  .contact__phone { font-size: 1.62rem; }
  .contact .button { grid-template-columns: 20px auto 20px; gap: 6px; padding-inline: 8px; font-size: .72rem; white-space: nowrap; }
  .flow .container { grid-template-columns: 1fr; gap: 22px; }
  .flow__list { grid-column: 1; }
  .flow__item { grid-template-columns: 20px minmax(0, 1fr); gap: 5px; padding-right: 16px; }
  .flow__number { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }
  .flow__icon { display: none; }
  .flow__item strong { font-size: .62rem; line-height: 1.3; white-space: nowrap; }
  .faq-section__inner { grid-template-columns: 1fr; gap: 22px; }
  .faq-list { grid-column: 1; }
}

@media (max-width: 374px) {
  .flow__item { grid-template-columns: 18px minmax(0, 1fr); gap: 3px; padding-right: 12px; }
  .flow__item strong { font-size: .56rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .is-motion-ready [data-reveal] { opacity: 1; transform: none; }
}