:root {
   --ink: #1a1a1a;
   --ink-light: #3b3b3b;
   --paper: #fff;
   --paper-dark: #f9f9f9;
   --ocean: #1a6bbf;
   --ocean-dark: #1255a0;
   --ocean-light: #2a7fd4;
   --ocean-pale: #e8f1fb;
   --rule: rgba(26, 26, 26, 0.09);
   --rule-mid: rgba(26, 26, 26, 0.15);
}


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

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
   font-size: 18px;
   background: var(--paper);
   color: #1a1a1a;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

#nav {
   font-size: 1rem;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 5%;
   transition: 0.3s;
}

nav.scrolled {
   background: rgba(255, 255, 255, 0.6);
   border-bottom: 1px solid var(--rule);
   backdrop-filter: blur(10px)
}

.logo {
   font-family: 'Space Mono', monospace;
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   color: #fff;
   transition: color 0.3s
}

nav.scrolled .logo {
   color: var(--ink)
}

.nav-r {
   display: flex;
   align-items: center;
   gap: 2.5rem
}

.nav-r a {
   font-family: 'Space Mono', monospace;

   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.55);
   text-decoration: none;
   transition: color 0.2s
}

nav.scrolled .nav-r a {
   color: var(--ink-light)
}

.nav-r a:hover {
   color: #fff
}

nav.scrolled .nav-r a:hover {
   color: var(--ink)
}

.nav-cta {
   border: 1px solid #fff;
   padding: 0.5rem 1.2rem;
   font-size: 14px;
}

nav.scrolled .nav-cta {
   background: var(--ink) !important;
   color: var(--paper) !important;
   border-color: var(--ink) !important
}

/* HERO */
.hero {
   min-height: 90vh;
   background: var(--ocean);
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden
}

.hero-sky {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, #0d4a8a 0%, #1a6bbf 45%, #2a85d4 72%, #4a9fe0 100%);
   z-index: 0
}

.hero-grid-svg {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none
}

.hero-sun {
   position: absolute;
   right: 12%;
   top: 16%;
   z-index: 1;
   width: 110px;
   height: 110px;
   pointer-events: none
}

.hero-content {
   position: relative;
   z-index: 3;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 800px
}

.hero-eyebrow {
   color: #fff;
   letter-spacing: .15em;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 1rem
}

.hero-eyebrow::before {
   content: '';
   display: block;
   width: 16px;
   height: 1px;
   background: #fff;
}

.hero-h1 {
   font-size: clamp(3.4rem, 6vw, 7rem);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: 0.02em;
   color: #fff;
   margin-bottom: 2.5rem
}

.hero-h1 span {
   display: block
}

.hero-sub {
   line-height: 2;
   color: #fff;
   line-height: 1.5;
   font-weight: 300;
   letter-spacing: 0.05em;
   margin-bottom: 3rem;
}

.btn-white {
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
   background: #fff;
   color: var(--ocean-dark);
   padding: 1.05rem 2.5rem;

   font-weight: 700;
   letter-spacing: 0.14em;
   text-decoration: none;
   font-family: 'Space Mono', monospace;
   transition: opacity 0.2s, gap 0.2s
}

.btn-white:hover {
   opacity: 0.88;
   gap: 1.2rem
}

.hero-coord {
   position: absolute;
   bottom: 2.5rem;
   right: 5rem;
   z-index: 4;
   font-family: 'Space Mono', monospace;
   letter-spacing: 0.14em;
   color: rgba(255, 255, 255, 0.16);
   text-align: right
}

.hero-waves {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 2
}

/* SHARED */
section {
   padding: 6rem 5%;
}

.wrap {
   max-width: 1200px;
   margin: 0 auto
}

.rule-h {
   height: 1px;
   background: var(--rule);
   margin: 0 5rem
}

.sec-eyebrow {
   font-family: 'Space Mono', monospace;
   letter-spacing: 0.15em;
   opacity: 0.85;
   text-transform: uppercase;
   color: var(--ocean);
   margin-bottom: .5rem;
}

.sec-h2 {
   font-size: clamp(1.6rem, 2.8vw, 2.4rem);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: 2rem;
}

.sec-desc {
   line-height: 2;
   font-weight: 300;
}

.fade {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.75s ease, transform 0.75s ease
}

.fade.on {
   opacity: 1;
   transform: none
}

.fade.d1 {
   transition-delay: 0.1s
}

.fade.d2 {
   transition-delay: 0.2s
}

/* PROBLEM */
.problem-inner {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 5rem;
   align-items: start
}

.p-list {
   display: flex;
   flex-direction: column
}

.p-row {
   padding: 2rem 0;
   border-bottom: 1px solid var(--rule);
   display: grid;
   grid-template-columns: 2.5rem 1fr;
   gap: 1rem;
   align-items: start
}

.p-row:first-child {
   border-top: 1px solid var(--rule)
}

.p-num {
   font-family: 'Space Mono', monospace;
   color: var(--ocean);
   letter-spacing: 0.1em;
   opacity: 0.85;
}

.p-text strong {
   display: block;
   font-weight: 500;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: 0.5rem
}

.p-text p {
   line-height: 2;
   font-weight: 300;
}

/* WHO */
.who {
   background: var(--paper-dark)
}

.who-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 3.5rem;
   border-top: 1px solid var(--rule-mid);
   border-left: 1px solid var(--rule-mid)
}

.who-cell {
   padding: 2.5rem;
   border-right: 1px solid var(--rule-mid);
   border-bottom: 1px solid var(--rule-mid);
   transition: background 0.2s;
   position: relative;
   overflow: hidden
}

.who-cell::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--ocean);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s
}

.who-cell:hover {
   background: var(--paper)
}

.who-cell:hover::after {
   transform: scaleX(1)
}

.who-num {
   font-family: 'Space Mono', monospace;

   color: var(--ocean);
   margin-bottom: 0.9rem;
   opacity: 0.7
}

.who-cell strong {
   display: block;

   font-weight: 500;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: 0.5rem
}

.who-cell p {
   line-height: 2;
   font-weight: 300
}

/* SERVICES */
.svc-header {
   display: grid;
   grid-template-columns: 1fr 1.8fr;
   gap: 4rem;
   align-items: end;
   margin-bottom: 4rem;
}

.svc-note {
   line-height: 2;
   font-weight: 300;
}

.svc-main {
   background: var(--paper-dark);
   padding: 3.5rem;
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: 4rem;
   border: 1px solid var(--rule-mid);
   border-left: 3px solid var(--ocean);
   margin-bottom: 1px
}

.svc-badge {
   display: inline-block;
   font-family: 'Space Mono', monospace;

   letter-spacing: 0.14em;
   text-transform: uppercase;
   background: var(--ocean-pale);
   color: var(--ocean-dark);
   padding: 0.25rem 0.8rem;
   margin-bottom: 1.2rem
}

.svc-name {
   font-size: 1.6rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   color: var(--ink);
   line-height: 1.3;
   margin-bottom: 1rem
}

.svc-body {
   line-height: 2;
   font-weight: 300
}

.svc-price {
   margin-top: 1.5rem;
}

.svc-pts-label {
   font-family: 'Space Mono', monospace;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 1.2rem
}

.svc-pts {
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
   list-style: none;
}

.svc-pt {
   font-weight: 300;
   line-height: 1.7;
   padding-left: 1rem;
   position: relative;
}

.svc-pt::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 5px;
   height: 1px;
   background: var(--ink);
}

.svc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid var(--rule-mid);
   border-top: none;
   margin-bottom: 1px
}

.svc-item {
   padding: 2.2rem;
   border-right: 1px solid var(--rule-mid);
   position: relative;
   overflow: hidden;
   transition: background 0.2s
}

.svc-item:last-child {
   border-right: none
}

.svc-item::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--ocean);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s
}

.svc-item:hover {
   background: var(--paper-dark)
}

.svc-item:hover::after {
   transform: scaleX(1)
}

.svc-n {
   font-family: 'Space Mono', monospace;

   color: var(--ocean);
   opacity: 0.7;
   margin-bottom: 1rem
}

.svc-iname {

   font-weight: 700;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: 0.6rem;
   line-height: 1.4
}

.svc-idesc {
   line-height: 2;
   color: var(--ink-light);
   font-weight: 300
}

.svc-iprice {
   margin-top: 1.2rem;
   font-family: 'Space Mono', monospace;


}

.svc-row2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border: 1px solid var(--rule-mid);
   border-top: none
}

.svc-row2 .svc-item {
   border-right: 1px solid var(--rule-mid)
}

.svc-row2 .svc-item:last-child {
   border-right: none
}

/* PRICING */
.pricing {
   background: var(--paper-dark)
}

.price-tabs {
   display: flex;
   gap: 0;
   margin-bottom: 3rem;
   border-bottom: 1px solid var(--rule-mid);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}

.price-tabs::-webkit-scrollbar {
   display: none
}

.price-tab {
   font-family: 'Space Mono', monospace;
   font-size: 13px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink-light);
   padding: 0.8rem 1.4rem;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   transition: color 0.2s, border-color 0.2s;
   background: none;
   border-top: none;
   border-left: none;
   border-right: none;
   white-space: nowrap;
   flex-shrink: 0;
}

.price-tab.active {
   color: var(--ocean);
   border-bottom-color: var(--ocean)
}

.price-tab:hover {
   color: var(--ink)
}

.price-panel {
   display: none
}

.price-panel.active {
   display: block;
   opacity: 1;
}

.price-table-wrap {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.price-table {
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 15px;
}

.price-table th {
   font-family: 'Space Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   padding: 0 1rem 0.8rem;
   border-bottom: 1px solid var(--rule-mid);
   text-align: left;
   font-weight: 400;
   color: var(--ink-light);
}

.price-table td {
   padding: 1.2rem 1rem;
   border-bottom: 1px solid var(--rule);
   vertical-align: top
}

.price-table tr:last-child td {
   border-bottom: none
}

.price-table tr:hover td {
   background: rgba(26, 107, 191, 0.02)
}

.pt-name {
   font-size: 15px;
   font-weight: 500;
   color: var(--ink);
   margin-bottom: 0.3rem;
   letter-spacing: 0.02em;
}

.pt-note {
   font-size: 13px;
   color: var(--ink-light);
   font-weight: 300;
   line-height: 1.6;
   margin-top: 0.3rem
}

.pt-price {
   font-family: 'Space Mono', monospace;
   font-size: 15px;
   font-weight: 700;
   color: var(--ink);
   white-space: nowrap
}

.pt-period {
   font-size: 13px;
   color: var(--ink-light);
   font-weight: 300;
   margin-top: 0.2rem
}

.pt-badge {
   display: inline-block;
   font-family: 'Space Mono', monospace;
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 0.18rem 0.55rem;
   margin-left: 0.5rem;
   vertical-align: middle;
   border-radius: 2px;
}

.pt-badge-pop {
   background: var(--ocean-pale);
   color: var(--ocean-dark)
}

.pt-badge-core {
   background: rgba(26, 26, 26, 0.06);
   color: var(--ink-light);
}

.price-foot {
   font-size: 14px;
   color: var(--ink-light);
   font-weight: 300;
   line-height: 1.8;
   margin-top: 2rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--rule)
}

/* STRENGTH */
.strength {
   background: var(--paper)
}

.strength-inner {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 4rem;
   align-items: start
}

.str-list {
   display: flex;
   flex-direction: column
}

.str-row {
   display: grid;
   grid-template-columns: 2.8rem 1fr;
   padding: 2.2rem 0;
   border-bottom: 1px solid var(--rule);
   gap: 0.5rem;
   align-items: start
}

.str-row:first-child {
   border-top: 1px solid var(--rule)
}

.str-n {
   font-family: 'Space Mono', monospace;

   color: var(--ocean);
   opacity: 0.8;
   margin-top: 3px
}

.str-text strong {
   display: block;

   font-weight: 700;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: 0.5rem
}

.str-text p {
   line-height: 1.95;
   color: var(--ink-light);
   font-weight: 300
}

.flow {
   background: var(--ocean);
   padding: 2rem;
   color: #fff;
}

.flow-ttl {
   font-weight: 500;
   letter-spacing: 0.1em;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.flow-steps {
   display: flex;
   flex-direction: column
}

.flow-step {
   display: flex;
   gap: 1.2rem;
   padding: 1.35rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   align-items: flex-start
}

.flow-step:last-child {
   border-bottom: none
}

.flow-dot {
   width: 1.8rem;
   height: 1.8rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Space Mono', monospace;
   flex-shrink: 0;
   opacity: .6;
}

.flow-con strong {
   display: block;
   font-weight: 500;
   color: #fff;
   margin-bottom: 0.5rem
}

.flow-con span {
   font-weight: 300;
   line-height: 1.7;
   font-size: 16px;
}

/* VOICE */
.voice {
   background: var(--paper-dark)
}

.voice-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--rule-mid);
   margin-top: 3.5rem
}

.voice-card {
   background: var(--paper-dark);
   padding: 2.5rem;
   transition: background 0.2s
}

.voice-card:hover {
   background: var(--paper)
}

.voice-quote {

   line-height: 2;
   font-weight: 300;
   margin-bottom: 1.5rem;
   position: relative;
   padding-top: 1.5rem
}

.voice-quote::before {
   content: '"';
   position: absolute;
   top: 0;
   left: 0;
   font-size: 2rem;
   color: var(--ocean);
   opacity: 0.3;
   line-height: 1;
   font-family: serif
}

.voice-from {
   font-family: 'Space Mono', monospace;

   letter-spacing: 0.1em;

}

.voice-coming {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 160px;
   font-family: 'Space Mono', monospace;

   letter-spacing: 0.12em;

   text-transform: uppercase;
   flex-direction: column;
   gap: 0.8rem
}

.voice-coming::before {
   content: '';
   display: block;
   width: 24px;
   height: 1px;
}

/* FAQ */
.faq {
   background: var(--paper-dark)
}

.faq-list {
   display: flex;
   flex-direction: column;
   margin-top: 3.5rem;
}

.faq-item {
   border-bottom: 1px solid var(--rule)
}

.faq-item:first-child {
   border-top: 1px solid var(--rule)
}

.faq-q {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1.5rem;
   padding: 1.8rem 0;
   cursor: pointer;
   list-style: none
}

.faq-q::-webkit-details-marker {
   display: none
}

.faq-q-text {

   font-weight: 500;
   color: var(--ink);
   letter-spacing: 0.03em;
   line-height: 1.6
}

.faq-icon {
   width: 1.4rem;
   height: 1.4rem;
   border: 1px solid var(--rule-mid);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 2px;
   transition: background 0.2s
}

.faq-icon svg {
   transition: transform 0.3s
}

details[open] .faq-icon {
   background: var(--ocean)
}

details[open] .faq-icon svg {
   transform: rotate(45deg)
}

details[open] .faq-icon path {
   stroke: #fff
}

.faq-a {
   padding: 0 0 1.8rem;
   line-height: 1.95;
   font-weight: 300;
}

/* STATEMENT */
.statement {
   background: var(--ocean);
   text-align: center;
   color: #fff;
}

.statement-inner {
   max-width: 600px;
   margin: 0 auto
}

.st-eyebrow {
   font-family: 'Space Mono', monospace;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   margin-bottom: 2rem
}

.st-q {
   font-size: clamp(1.8rem, 3.2vw, 3rem);
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: 0.07em;
   margin-bottom: 4rem;
}

.st-q em {
   font-style: normal;
   border-bottom: 2px solid #fff;
   padding-bottom: 15px
}

.st-body {
   line-height: 2.3;
   font-weight: 300;
}

/* CONTACT */
.contact {
   background: var(--paper-dark);
}

.contact-inner {}

.contact-ttl {
   font-size: clamp(2.2rem, 4vw, 3.8rem);
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: 1.5rem
}

.contact-desc {
   line-height: 2.2;
   color: var(--ink-light);
   font-weight: 300;
   max-width: 550px;
   margin-bottom: 3rem
}

.contact-acts {
   display: flex;
   align-items: center;
   gap: 1.6rem;
   flex-wrap: wrap
}

.btn-ocean {
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
   background: var(--ocean);
   color: #fff;
   padding: 1.1rem 2.6rem;

   font-weight: 700;
   letter-spacing: 0.14em;
   text-decoration: none;
   font-family: 'Space Mono', monospace;
   transition: background 0.2s, gap 0.2s
}

.btn-ocean:hover {
   background: var(--ocean-dark);
   gap: 1.2rem
}

.contact-note {


   font-weight: 300
}

footer {
   background: var(--ink);
   padding: 2.2rem 5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #fff;
}

.f-logo {
   font-family: 'Space Mono', monospace;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: 0.08em;
}

.f-mid p {
   opacity: .5;
   text-align: right;
   font-size: 1rem;
}

/* HAMBURGER */
.nav-hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 36px;
   height: 36px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
   z-index: 101;
}

.nav-hamburger span {
   display: block;
   width: 22px;
   height: 1.5px;
   background: #fff;
   transition: transform 0.3s, opacity 0.3s, background 0.3s;
   transform-origin: center;
}

nav.scrolled .nav-hamburger span {
   background: var(--ink);
}

.nav-hamburger.open span:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg)
}

.nav-hamburger.open span:nth-child(2) {
   opacity: 0
}

.nav-hamburger.open span:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg)
}

@media(max-width:860px) {

   nav,
   .statement,
   .contact,
   footer,
   .rule-h {
      padding-left: 1.5rem;
      padding-right: 1.5rem
   }

   section {
      padding: 5rem 1.5rem;
   }

   .rule-h {
      margin: 0 1.5rem
   }

   .nav-hamburger {
      display: flex;

      &.open span {
         background: #fff !important;
      }
   }

   .nav.scrolled .nav-hamburger.open span {
      background: #fff !important;
   }


   .nav-r {
      display: none;
      position: fixed;
      inset: 0;
      height: 100dvh;
      background: rgba(13, 37, 75, 0.97);
      backdrop-filter: blur(12px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      z-index: 99;
   }

   .nav-r.open {
      display: flex;
   }

   .nav-r a {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.75);
      letter-spacing: 0.12em;
   }

   .nav-r a:hover {
      color: #fff;
   }

   nav.scrolled .nav-r a {
      color: rgba(255, 255, 255, 0.75);
   }

   .nav-cta {
      padding: 0.8rem 2rem !important;
      font-size: 1rem !important;
      margin-top: 1em;
   }

   nav.scrolled .nav-cta {
      background: transparent !important;
      border-color: #fff !important;
   }

   .hero-h1 {
      font-size: 3rem
   }

   .problem-inner,
   .strength-inner,
   .svc-header,
   .svc-main {
      grid-template-columns: 1fr;
      gap: 2.5rem
   }

   .who-grid,
   .svc-grid,
   .svc-row2,
   .voice-grid {
      grid-template-columns: 1fr
   }

   .who-cell {
      border-right: 1px solid var(--rule-mid)
   }

   .svc-item {
      border-right: none !important;
      border-bottom: 1px solid var(--rule-mid)
   }

   .flow {
      padding: 1.8rem;
   }

   footer {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      padding: 1.8rem 1.5rem
   }

   .f-nav {
      justify-content: center
   }

   .hero-coord {
      display: none
   }
}