:root { --navy:#092a50; --navy-deep:#061d38; --cream:#f4f0e8; --paper:#fbfaf7; --ink:#10253a; --line:rgba(9,42,80,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",sans-serif; }
a { color:inherit; text-decoration:none; }

.site-header { position:absolute; inset:0 0 auto; z-index:20; height:112px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(28px,5vw,84px); color:white; }
.brand img { width:190px; height:auto; filter:brightness(0) invert(1); }
.site-header nav { display:flex; align-items:center; gap:34px; font-size:13px; font-weight:700; letter-spacing:.06em; }
.site-header nav a { transition:opacity .2s; }
.site-header nav a:hover { opacity:.65; }
.nav-contact { display:flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.62); border-radius:999px; padding:13px 20px; }

.hero { min-height:760px; height:100svh; position:relative; overflow:hidden; color:white; background:var(--navy); }
.hero-photo { position:absolute; inset:0; background:url('images/hero-wancoi.png') center/cover no-repeat; transform:scale(1.01); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,24,47,.9) 0%,rgba(3,24,47,.65) 38%,rgba(3,24,47,.1) 72%),linear-gradient(0deg,rgba(3,18,35,.4),transparent 45%); }
.hero-content { position:absolute; z-index:2; left:clamp(30px,8vw,132px); top:51%; transform:translateY(-44%); }
.eyebrow { margin:0 0 25px; font:700 12px/1 Arial; letter-spacing:.26em; }
.hero h1 { margin:0; font-size:clamp(47px,6.1vw,96px); line-height:1.22; letter-spacing:.025em; font-weight:600; }
.hero h1 span { position:relative; }
.hero h1 span::after { content:""; position:absolute; height:2px; background:rgba(255,255,255,.7); left:4px; right:4px; bottom:-7px; }
.hero-copy { margin:36px 0 0; font-size:clamp(14px,1.15vw,17px); line-height:2; letter-spacing:.05em; }
.scroll-cue { position:absolute; z-index:2; left:clamp(30px,5vw,84px); bottom:42px; display:flex; align-items:center; gap:12px; font:700 10px/1 Arial; letter-spacing:.23em; }
.hero-side { position:absolute; z-index:2; right:25px; top:50%; margin:0; transform:rotate(90deg) translateX(50%); transform-origin:right center; font:700 9px/1 Arial; letter-spacing:.28em; opacity:.8; }

.section { padding:clamp(90px,11vw,170px) clamp(28px,8vw,132px); }
.section-label { display:flex; gap:14px; align-items:center; color:var(--navy); font:700 11px/1 Arial; letter-spacing:.2em; }
.section-label span { opacity:.46; }
.section-label.light { color:white; }
.intro-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(60px,10vw,160px); margin-top:62px; }
.intro h2,.vision h2 { margin:0; font-size:clamp(36px,4.4vw,66px); line-height:1.45; letter-spacing:.025em; font-weight:500; }
.intro-body { padding-top:16px; border-top:1px solid var(--line); }
.intro-body p { margin:0 0 28px; font-size:16px; line-height:2.2; letter-spacing:.045em; }
.manifesto { margin-top:clamp(80px,11vw,150px); padding:58px 4vw 48px; border-block:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:2.4vw; color:var(--navy); font:400 clamp(35px,5vw,76px)/1 Arial; }
.manifesto i { font-style:normal; opacity:.25; font-size:.7em; }
.manifesto strong { font-weight:800; }
.manifesto small { flex:0 0 100%; text-align:center; font:500 13px/1.5 "Yu Gothic",sans-serif; letter-spacing:.12em; margin-top:18px; }

.services { background:var(--navy); color:white; }
.section-heading { display:grid; grid-template-columns:.65fr 1.2fr 1fr; align-items:end; gap:50px; }
.section-heading h2 { margin:0; font-size:clamp(42px,5vw,74px); line-height:1.35; font-weight:500; }
.section-heading>p { margin:0 0 8px; max-width:390px; font-size:15px; line-height:2; opacity:.8; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid rgba(255,255,255,.25); margin-top:86px; }
.service-card { min-height:385px; padding:32px 28px 38px; border-right:1px solid rgba(255,255,255,.22); transition:background .25s,transform .25s; }
.service-card:first-child { border-left:1px solid rgba(255,255,255,.22); }
.service-card:hover { background:rgba(255,255,255,.075); transform:translateY(-5px); }
.service-top { display:flex; align-items:center; justify-content:space-between; opacity:.7; font:400 12px/1 Arial; }
.service-top svg { width:33px; height:33px; }
.service-en { margin:92px 0 12px; font:700 10px/1 Arial; letter-spacing:.2em; opacity:.55; }
.service-card h3 { margin:0; font-size:clamp(21px,1.8vw,28px); font-weight:500; letter-spacing:.05em; }
.service-description { margin:30px 0 0; font-size:13px; line-height:2; opacity:.73; }

.vision { min-height:750px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:9vw; overflow:hidden; background:var(--cream); }
.vision-mark { color:var(--navy); font:800 min(36vw,520px)/.75 Arial; letter-spacing:-.13em; opacity:.06; margin-left:-12vw; }
.vision-copy .section-label { margin-bottom:45px; }
.vision-copy p { max-width:620px; margin:42px 0 0; padding-top:30px; border-top:1px solid var(--line); font-size:16px; line-height:2.15; }

.contact { background:var(--navy-deep); color:white; display:flex; justify-content:space-between; align-items:flex-end; gap:60px; }
.contact h2 { margin:44px 0 0; font-size:clamp(35px,4vw,62px); line-height:1.55; font-weight:500; }
.contact-link { min-width:280px; display:flex; justify-content:space-between; align-items:center; padding:25px 5px; border-bottom:1px solid rgba(255,255,255,.6); font-weight:700; letter-spacing:.08em; transition:padding .2s; }
.contact-link:hover { padding-inline:12px; }
footer { min-height:300px; padding:68px clamp(28px,8vw,132px) 35px; background:#fff; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:40px; color:var(--navy); }
footer img { width:200px; height:auto; }
footer p { margin:21px 0 0; font-size:13px; letter-spacing:.08em; }
footer small { align-self:end; font:10px/1 Arial; letter-spacing:.12em; }

@media (max-width:900px) {
  .site-header { height:88px; }.brand img { width:145px; }.site-header nav a:not(.nav-contact) { display:none; }.nav-contact { padding:10px 15px; }
  .hero { min-height:680px; }.hero-photo { background-position:63% center; }.hero-shade { background:linear-gradient(90deg,rgba(3,24,47,.9),rgba(3,24,47,.25)),linear-gradient(0deg,rgba(3,18,35,.45),transparent); }.hero-content { top:52%; }.hero-copy br { display:none; }.hero-side { display:none; }
  .intro-grid,.section-heading,.vision { grid-template-columns:1fr; }.intro-grid { gap:45px; }.section-heading { gap:35px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }.service-card { min-height:330px; }.service-en { margin-top:55px; }
  .vision { gap:30px; }.vision-mark { display:none; }.contact { align-items:flex-start; flex-direction:column; }.contact-link { width:100%; }
}
@media (max-width:560px) {
  .section { padding-inline:24px; }.hero-content { left:24px; right:24px; }.hero h1 { font-size:45px; }.hero-copy { font-size:13px; max-width:300px; }
  .manifesto { justify-content:flex-start; gap:15px; font-size:34px; }.service-grid { grid-template-columns:1fr; }
  .service-card,.service-card:first-child { border-left:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.22); }.service-card:last-child { border-bottom:0; }
  footer { grid-template-columns:1fr; min-height:340px; }footer small { align-self:auto; margin-top:40px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }