/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    "Noto Sans JP",
    sans-serif;

  color: #171717;
  background: #f7f7f5;

  line-height: 1.8;

  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --black: #151515;
  --dark: #1d1d1b;
  --gray: #686868;
  --light-gray: #deded9;
  --line: #d8d8d2;
  --bg: #f7f7f5;
  --white: #ffffff;

  --yellow: #f1d300;

  --container: 1240px;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

  width: min(
    calc(100% - 80px),
    var(--container)
  );

  margin-inline: auto;

}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: var(--black);

  display: grid;

  place-items: center;

  transition:
    opacity .7s ease,
    visibility .7s ease;

}

.page-loader.is-loaded {

  opacity: 0;
  visibility: hidden;

}

.loader-inner {

  width: 180px;

  text-align: center;

}

.loader-inner span {

  display: block;

  color: white;

  font-size: 34px;

  font-weight: 800;

  letter-spacing: .15em;

}

.loader-line {

  height: 1px;

  background: rgba(255,255,255,.2);

  margin-top: 15px;

  overflow: hidden;

}

.loader-line::after {

  content: "";

  display: block;

  width: 40%;

  height: 100%;

  background: var(--yellow);

  animation: loading 1.2s ease infinite;

}

@keyframes loading {

  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(350%);
  }

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  transition:
    background .4s ease,
    box-shadow .4s ease;

}

.site-header.is-scrolled {

  background: rgba(255,255,255,.94);

  backdrop-filter: blur(16px);

  box-shadow:
    0 1px 0 rgba(0,0,0,.08);

}

.header-inner {

  width: min(
    calc(100% - 80px),
    1400px
  );

  height: 92px;

  margin-inline: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.logo img {

  width: 100%;

  max-height: 45px;

  object-fit: contain;

  object-position: left center;

}

.global-nav {

  display: flex;

  gap: 38px;

}

.global-nav a {

  position: relative;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .16em;

}

.global-nav a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 0;
  height: 1px;

  background: var(--yellow);

  transition: width .3s ease;

}

.global-nav a:hover::after,
.global-nav a.is-active::after {

  width: 100%;

}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-button {

  display: none;

  border: none;

  background: transparent;

  width: 44px;
  height: 44px;

  cursor: pointer;

}

.menu-button span {

  display: block;

  width: 25px;

  height: 1px;

  background: var(--black);

  margin: 7px auto;

  transition:
    transform .3s ease;

}

.menu-button.is-open span:first-child {

  transform:
    translateY(4px)
    rotate(45deg);

}

.menu-button.is-open span:last-child {

  transform:
    translateY(-4px)
    rotate(-45deg);

}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {

  position: fixed;

  inset: 0;

  z-index: 900;

  background: #f7f7f5;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity .4s ease,
    visibility .4s ease;

}

.mobile-nav.is-open {

  opacity: 1;

  visibility: visible;

}

.mobile-nav-inner {

  height: 100%;

  padding:
    150px 40px 40px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}

.mobile-nav-label {

  font-size: 10px;

  letter-spacing: .25em;

  color: #888;

  margin-bottom: 30px;

}

.mobile-nav a {

  font-size: 32px;

  font-weight: 700;

  letter-spacing: -.03em;

  margin-bottom: 16px;

}


/* =========================================================
   HERO
========================================================= */

.service-hero {

  position: relative;

  min-height: 720px;

  background: #20201e;

  color: white;

  overflow: hidden;

  display: flex;

  align-items: center;

}

.hero-background {

  position: absolute;

  inset: 0;

  overflow: hidden;

}

.hero-grid {

  position: absolute;

  inset: 0;

  opacity: .08;

  background-image:
    linear-gradient(
      rgba(255,255,255,.15) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.15) 1px,
      transparent 1px
    );

  background-size: 80px 80px;

}

.signal {

  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--yellow),
      transparent
    );

  opacity: .6;

  transform-origin: left center;

}

.signal-01 {

  width: 600px;

  right: -50px;

  top: 30%;

  transform:
    rotate(-24deg);

  animation:
    signalMove 5s ease-in-out infinite;

}

.signal-02 {

  width: 480px;

  right: 80px;

  top: 53%;

  transform:
    rotate(16deg);

  animation:
    signalMove 7s ease-in-out infinite reverse;

}

.signal-03 {

  width: 380px;

  right: 170px;

  top: 68%;

  transform:
    rotate(-10deg);

  animation:
    signalMove 6s ease-in-out infinite;

}

@keyframes signalMove {

  0%,
  100% {
    opacity: .15;
    transform:
      scaleX(.8)
      rotate(-20deg);
  }

  50% {
    opacity: .75;
    transform:
      scaleX(1)
      rotate(-20deg);
  }

}

.hero-content {

  position: relative;

  z-index: 2;

  width: min(
    calc(100% - 80px),
    var(--container)
  );

  margin-inline: auto;

  padding-top: 80px;

}

.breadcrumb {

  display: flex;

  gap: 12px;

  align-items: center;

  margin-bottom: 60px;

  font-size: 10px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.55);

}

.breadcrumb strong {

  color: white;

  font-weight: 500;

}

.hero-label {

  color: var(--yellow);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .25em;

  margin-bottom: 20px;

}

.hero-content h1 {

  font-size:
    clamp(60px, 9vw, 120px);

  line-height: 1;

  letter-spacing: -.055em;

  font-weight: 800;

}

.hero-copy {

  margin-top: 36px;

  font-size: 18px;

  line-height: 2;

  color: rgba(255,255,255,.75);

}

.hero-number {

  position: absolute;

  right: 7vw;

  bottom: 70px;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}

.hero-number span {

  font-size: 90px;

  font-weight: 700;

  line-height: 1;

  color: rgba(255,255,255,.07);

}

.hero-number small {

  font-size: 9px;

  letter-spacing: .25em;

  color: rgba(255,255,255,.4);

}


/* =========================================================
   SECTION
========================================================= */

.section {

  padding: 140px 0;

}

.eyebrow {

  display: block;

  margin-bottom: 25px;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .25em;

  color: #777;

}

.section-heading h2 {

  font-size:
    clamp(34px, 4vw, 58px);

  line-height: 1.25;

  letter-spacing: -.045em;

  font-weight: 800;

}

.section-heading > p {

  margin-top: 20px;

  color: var(--gray);

}


/* =========================================================
   INTRO
========================================================= */

.intro {

  background: var(--bg);

}

.intro-grid {

  margin-top: 80px;

  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;

  gap: 100px;

  align-items: center;

}

.intro-text {

  color: #555;

  font-size: 15px;

}

.intro-text p + p {

  margin-top: 28px;

}

.technical-card {

  position: relative;

  min-height: 430px;

  background: #20201e;

  color: white;

  padding: 30px;

  overflow: hidden;

}

.technical-top,
.technical-bottom {

  display: flex;

  justify-content: space-between;

  font-size: 9px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.5);

}

.technical-diagram {

  position: absolute;

  inset: 100px 35px 80px;

}

.diagram-node {

  position: absolute;

  width: 120px;
  height: 70px;

  border: 1px solid rgba(255,255,255,.2);

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-left: 15px;

  font-size: 10px;

  letter-spacing: .12em;

}

.diagram-node span {

  color: var(--yellow);

  font-size: 8px;

  margin-bottom: 4px;

}

.node-a {
  left: 0;
  top: 0;
}

.node-b {
  right: 0;
  top: 60px;
}

.node-c {
  left: 15%;
  bottom: 10px;
}

.node-d {
  right: 4%;
  bottom: 0;
}

.diagram-line {

  position: absolute;

  height: 1px;

  background: var(--yellow);

  opacity: .7;

  transform-origin: left;

}

.line-a {

  width: 170px;

  left: 105px;
  top: 45px;

  transform: rotate(17deg);

}

.line-b {

  width: 160px;

  right: 95px;
  top: 130px;

  transform: rotate(135deg);

}

.line-c {

  width: 140px;

  left: 100px;
  bottom: 70px;

  transform: rotate(-20deg);

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-section {

  background: white;

}

.service-grid {

  margin-top: 70px;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  border-top: 1px solid var(--line);

  border-left: 1px solid var(--line);

}

.service-card {

  position: relative;

  min-height: 390px;

  padding: 55px;

  border-right: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

  overflow: hidden;

  transition:
    background .4s ease;

}

.service-card:hover {

  background: #f3f3ef;

}

.card-number {

  font-size: 11px;

  letter-spacing: .15em;

  color: #999;

}

.card-icon {

  margin-top: 40px;

  width: 50px;
  height: 50px;

}

.card-icon svg {

  width: 100%;
  height: 100%;

  stroke: var(--black);

  stroke-width: 1.4;

}

.service-card h3 {

  margin-top: 25px;

  font-size: 25px;

  letter-spacing: -.03em;

}

.service-card p {

  max-width: 450px;

  margin-top: 15px;

  color: var(--gray);

  font-size: 14px;

}

.card-line {

  position: absolute;

  left: 55px;
  right: 55px;

  bottom: 35px;

  height: 1px;

  background: var(--line);

}

.card-line::after {

  content: "";

  display: block;

  width: 0;

  height: 1px;

  background: var(--yellow);

  transition: width .4s ease;

}

.service-card:hover .card-line::after {

  width: 100%;

}


/* =========================================================
   FLOW
========================================================= */

.flow-section {

  background: #f0f0ec;

}

.flow {

  margin-top: 70px;

  border-top: 1px solid var(--line);

}

.flow-item {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 40px;

  padding: 45px 0;

  border-bottom: 1px solid var(--line);

}

.flow-number {

  font-size: 12px;

  color: #999;

  letter-spacing: .15em;

}

.flow-content span {

  font-size: 9px;

  color: #999;

  letter-spacing: .2em;

}

.flow-content h3 {

  margin-top: 7px;

  font-size: 28px;

}

.flow-content p {

  margin-top: 7px;

  color: var(--gray);

  font-size: 14px;

}


/* =========================================================
   DELIVERABLE
========================================================= */

.deliverable-section {

  background: #20201e;

  color: white;

}

.deliverable-grid {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 100px;

}

.deliverable-copy .eyebrow {

  color: var(--yellow);

}

.deliverable-copy h2 {

  font-size:
    clamp(40px, 5vw, 70px);

  line-height: 1.2;

  letter-spacing: -.05em;

}

.deliverable-copy p {

  margin-top: 35px;

  max-width: 520px;

  color: rgba(255,255,255,.58);

  font-size: 14px;

}

.deliverable-list {

  border-top: 1px solid rgba(255,255,255,.2);

}

.deliverable-item {

  display: grid;

  grid-template-columns: 50px 1fr;

  gap: 20px;

  padding: 25px 0;

  border-bottom: 1px solid rgba(255,255,255,.2);

}

.deliverable-item > span {

  color: var(--yellow);

  font-size: 10px;

  padding-top: 5px;

}

.deliverable-item strong {

  display: block;

  font-size: 18px;

}

.deliverable-item small {

  display: block;

  margin-top: 4px;

  color: rgba(255,255,255,.45);

  font-size: 11px;

}


/* =========================================================
   STRENGTH
========================================================= */

.strength-section {

  background: white;

}

.strength-grid {

  margin-top: 70px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;

}

.strength-card {

  min-height: 330px;

  padding: 45px;

  background: #f5f5f2;

  position: relative;

}

.strength-index {

  font-size: 10px;

  letter-spacing: .15em;

  color: #999;

}

.strength-card h3 {

  margin-top: 70px;

  font-size: 28px;

  line-height: 1.4;

  letter-spacing: -.04em;

}

.strength-card p {

  margin-top: 25px;

  color: var(--gray);

  font-size: 13px;

}


/* =========================================================
   TECHNICAL SECTION
========================================================= */

.technical-section {

  position: relative;

  background: #deded8;

  padding: 120px 0;

  overflow: hidden;

}

.technical-bg {

  position: absolute;

  inset: 0;

  opacity: .25;

  background-image:
    linear-gradient(
      90deg,
      transparent 49.9%,
      #999 50%,
      transparent 50.1%
    ),
    linear-gradient(
      transparent 49.9%,
      #999 50%,
      transparent 50.1%
    );

  background-size: 80px 80px;

}

.technical-layout {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    .8fr
    1.2fr;

  align-items: center;

  gap: 100px;

}

.technical-title span {

  font-size: 10px;

  letter-spacing: .2em;

  color: #777;

}

.technical-title h2 {

  margin-top: 20px;

  font-size:
    clamp(40px, 5vw, 70px);

  line-height: 1.15;

  letter-spacing: -.05em;

}

.blueprint {

  background: #292927;

  min-height: 430px;

  padding: 25px;

  color: white;

}

.blueprint-header,
.blueprint-footer {

  display: flex;

  justify-content: space-between;

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.5);

}

.blueprint-body {

  position: relative;

  height: 320px;

  margin-top: 20px;

  border:
    1px solid rgba(255,255,255,.15);

}

.building {

  position: absolute;

  border:
    1px solid rgba(255,255,255,.3);

}

.building-a {

  width: 35%;
  height: 50%;

  left: 12%;
  top: 20%;

}

.building-b {

  width: 25%;
  height: 35%;

  right: 12%;
  bottom: 15%;

}

.cable {

  position: absolute;

  height: 1px;

  background: var(--yellow);

  transform-origin: left;

}

.cable-a {

  width: 55%;

  left: 5%;
  top: 42%;

  transform: rotate(8deg);

}

.cable-b {

  width: 35%;

  left: 45%;
  top: 53%;

  transform: rotate(-25deg);

}

.cable-c {

  width: 25%;

  right: 10%;
  top: 35%;

  transform: rotate(40deg);

}

.point {

  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--yellow);

  box-shadow:
    0 0 0 5px rgba(241,211,0,.1),
    0 0 20px rgba(241,211,0,.3);

}

.point-a {

  left: 30%;
  top: 38%;

}

.point-b {

  left: 58%;
  top: 55%;

}

.point-c {

  right: 20%;
  top: 32%;

}


/* =========================================================
   CTA
========================================================= */

.cta-section {

  position: relative;

  padding: 140px 0;

  background: #f7f7f5;

  overflow: hidden;

}

.cta-grid {

  position: absolute;

  inset: 0;

  opacity: .15;

  background-image:
    linear-gradient(
      90deg,
      transparent 49.9%,
      #aaa 50%,
      transparent 50.1%
    ),
    linear-gradient(
      transparent 49.9%,
      #aaa 50%,
      transparent 50.1%
    );

  background-size: 100px 100px;

}

.cta-content {

  position: relative;

  z-index: 1;

  max-width: 800px;

}

.cta-content h2 {

  font-size:
    clamp(42px, 6vw, 78px);

  line-height: 1.2;

  letter-spacing: -.055em;

}

.cta-content p {

  margin-top: 25px;

  color: var(--gray);

}

.cta-button {

  display: inline-flex;

  align-items: center;

  gap: 40px;

  margin-top: 45px;

  padding: 20px 28px;

  border: 1px solid var(--black);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .18em;

  transition:
    background .3s ease,
    color .3s ease;

}

.cta-button svg {

  width: 20px;

  height: 20px;

  stroke: currentColor;

  stroke-width: 1.5;

}

.cta-button:hover {

  background: var(--black);

  color: white;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

  background: white;

  border-top: 1px solid var(--line);

  padding: 80px 0 35px;

}

.footer-top {

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  gap: 50px;

}

.footer-brand img {

  width: 100px;

}

.footer-brand p {

  margin-top: 20px;

  font-size: 12px;

  color: #777;

}

.footer-nav {

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.footer-nav a {

  font-size: 11px;

  letter-spacing: .15em;

}

.footer-company {

  font-size: 12px;

}

.footer-company strong {

  font-size: 15px;

}

.footer-company p {

  margin-top: 15px;

  color: #777;

}

.footer-bottom {

  margin-top: 70px;

  padding-top: 20px;

  border-top: 1px solid var(--line);

  display: flex;

  justify-content: space-between;

  font-size: 9px;

  letter-spacing: .15em;

  color: #999;

}


/* =========================================================
   REVEAL
========================================================= */

.reveal {

  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity .8s ease,
    transform .8s ease;

}

.reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .container {

    width:
      min(
        calc(100% - 40px),
        var(--container)
      );

  }

  .header-inner {

    width:
      calc(100% - 40px);

  }

  .global-nav {

    display: none;

  }

  .menu-button {

    display: block;

  }

  .service-hero {

    min-height: 650px;

  }

  .hero-content {

    width:
      calc(100% - 40px);

  }

  .hero-number {

    right: 25px;

    bottom: 35px;

  }

  .intro-grid,
  .deliverable-grid,
  .technical-layout {

    grid-template-columns: 1fr;

    gap: 60px;

  }

  .service-grid {

    grid-template-columns: 1fr;

  }

  .strength-grid {

    grid-template-columns: 1fr;

  }

  .footer-top {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 600px) {

  .section {

    padding: 90px 0;

  }

  .header-inner {

    height: 75px;

  }

  .logo img {

    width: 95px;

  }

  .service-hero {

    min-height: 600px;

  }

  .hero-content h1 {

    font-size: 58px;

  }

  .hero-copy {

    font-size: 15px;

  }

  .breadcrumb {

    margin-bottom: 40px;

  }

  .service-card {

    padding: 35px;

    min-height: 350px;

  }

  .card-line {

    left: 35px;
    right: 35px;

  }

  .flow-item {

    grid-template-columns: 50px 1fr;

    gap: 15px;

  }

  .flow-content h3 {

    font-size: 23px;

  }

  .technical-card {

    min-height: 360px;

  }

  .blueprint {

    min-height: 360px;

  }

  .blueprint-body {

    height: 250px;

  }

  .cta-section {

    padding: 100px 0;

  }

  .footer-bottom {

    flex-direction: column;

    gap: 10px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;

  }

}