/* BrainPunch V3. The hero rules live in style.css (approved v16). This file holds the hero chrome and
   everything below the hero. One accent color (amber). One radius scale. One shadow. One icon style. */
:root{
  --amber:#e9b66d;--ink:#071317;--ink-2:#0b191c;--ink-3:#102228;
  --cream:#f5eddb;--text:#dfe5e0;--soft:#b5c4bf;--faint:#869c95;
  --line:#f6f9f21a;--line-2:#f6f9f230;
  --r:14px;--r-sm:10px;
  --shadow:0 18px 40px -22px #000c,0 2px 6px -2px #0006;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html[lang=ja] body{font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ico{width:1.05em;height:1.05em;flex:none;vertical-align:-.14em}

/* ---- Hero chrome (nav, controls) --------------------------------------------------------- */
.header-actions{gap:26px}
.header-actions a.text-button{display:inline-flex;align-items:center;min-height:44px;padding:0}
.header-actions a.text-button:hover{color:#fff}
.text-button span{display:inline-flex;margin-left:6px;color:var(--amber)}
.text-button span .ico{width:12px;height:12px}
.language{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:var(--r-sm)}
.controls{border-top:0;padding-top:0}
.controls-top{margin-bottom:10px}
.scroll-cue{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:10px;letter-spacing:2px;color:#becfc6;text-transform:uppercase}
.scroll-cue span{display:inline-flex}
.scroll-cue:hover{color:#fff}
.play-button,.replay-button{min-height:44px;border-radius:var(--r-sm)}
.progress-line{height:2px;background:#ffffff26;overflow:hidden;border-radius:2px}
.progress-line span{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}
.scene-status{bottom:122px}
.hero-copy .contact{gap:28px;min-height:44px}
.hero-copy .contact svg{height:20px;width:20px}
.experience:not(.ready):not(.animation-unavailable):before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(110deg,#0a171c 30%,#10242b 50%,#0a171c 70%);background-size:220% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.error-message{border-radius:var(--r-sm);border-color:#e9b66d55;color:var(--cream)}
@media(max-height:800px) and (min-width:801px){.scene-status{bottom:104px}}
@media(max-width:800px){
  .header .header-actions a.text-button:not([href="#contact"]){display:none}
  .scene-status{bottom:100px}
}

/* ---- Sticky nav ---------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:30;background:#071317e8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:10px;padding-bottom:10px}
.site-header .header-actions{margin-top:0;display:flex;align-items:center}
.site-header .brand{display:block;flex-shrink:0}
.site-header .brand-image{width:92px;height:57.5px}
.site-header .brand-image img{width:217.3px;left:-62.9px;top:-.88px}
.site-header.after-hero{position:fixed;top:0;left:0;right:0;transform:translateY(-110%);transition:transform .45s var(--ease);visibility:hidden}
.site-header.after-hero.show{transform:none;visibility:visible}
.text-button[aria-current="page"]{color:var(--amber)}

/* ---- Layout -------------------------------------------------------------------------------- */
body.inner{background:var(--ink)}
.page{background:var(--ink);position:relative}
.wrap{max-width:1600px;margin:0 auto;padding:0 8%}
.section{padding:clamp(80px,10vw,152px) 0;border-top:1px solid var(--line)}
.page-intro{border-top:0;padding-top:clamp(56px,8vw,120px)}
.label{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:2.8px;color:var(--amber);margin:0 0 28px;text-transform:uppercase}
.label:before{content:"";width:28px;height:1px;background:var(--amber);flex:none}
.section h2{font-weight:500;font-size:clamp(34px,4vw,60px);letter-spacing:-.045em;line-height:1.08;margin:0 0 52px;color:var(--cream)}
.section h3{font-weight:500;color:#f8f6ef}
.page-title{font-weight:500;font-size:clamp(46px,6.2vw,90px);letter-spacing:-.055em;line-height:1.03;margin:0 0 30px;color:var(--cream)}
.page-title.name{font-size:clamp(36px,3.8vw,56px);margin:24px 0 10px}
.statement{font-size:clamp(30px,4vw,58px);line-height:1.18;letter-spacing:-.04em;font-weight:500;max-width:1100px;margin:0;color:var(--cream)}
.lead{font-size:17.5px;line-height:1.8;color:var(--soft);max-width:680px;margin:0 0 36px}
.lead.small{font-size:16px;margin-bottom:22px}
.note{font-size:13px;color:var(--faint);margin:24px 0 0}
.more{margin:40px 0 0;font-size:15px}
.more a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--amber);border-bottom:1px solid #e9b66d55;transition:color .2s,border-color .2s,gap .2s}
.more a:hover{color:#fff;border-color:#fff;gap:14px}

/* ---- Surfaces: one radius, one shadow, one glow ------------------------------------------ */
.card,.pillar,.svc{position:relative;border:1px solid var(--line);background:var(--ink-2);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;transition:border-color .3s,transform .35s var(--ease)}
.card:before,.pillar:before,.svc:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#e9b66d1f,transparent 62%)}
.card:hover:before,.pillar:hover:before,.svc:hover:before{opacity:1}
.card:hover,.pillar:hover,.svc:hover{border-color:#e9b66d4d}
.num{display:block;font-size:11px;letter-spacing:2px;color:var(--amber);font-variant-numeric:tabular-nums}

/* Home: three pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:72px}
.pillar{display:flex;flex-direction:column;padding:34px 32px 30px;min-height:250px}
.pillar:hover{transform:translateY(-3px)}
.pillar .num{margin-bottom:auto;padding-bottom:36px}
.pillar h3{font-size:23px;letter-spacing:-.025em;line-height:1.2;margin:0 0 12px}
.pillar p{margin:0;font-size:15.5px;line-height:1.7;color:var(--soft)}
.pillar .go{position:absolute;top:30px;right:30px;color:var(--amber);opacity:.7;transition:transform .3s var(--ease),opacity .3s}
.pillar:hover .go{transform:translateX(5px);opacity:1}
html[lang=ja] .pillar h3{font-size:20px}

/* Home: about teaser */
.me-teaser{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(40px,7vw,112px);align-items:start}
.portrait{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.skeleton{background:linear-gradient(110deg,#0b191c 30%,#12262c 50%,#0b191c 70%);background-size:220% 100%;animation:shimmer 1.6s linear infinite}
.me-teaser h2{margin-bottom:26px}
.xp-mini{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.xp-mini .label{margin-bottom:8px}
.xp-cap{font-size:14px;color:var(--soft);margin:0 0 24px}
.xp-mini .groups{grid-template-columns:1fr;gap:28px}

/* Services: editorial rows */
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:90px 1.25fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(34px,4vw,56px) clamp(0px,1vw,16px);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.svc:before{inset:0 -16px;border-radius:var(--r)}
.svc .num{padding-top:10px}
.svc h3{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.035em;line-height:1.12;margin:0 0 18px;color:var(--cream)}
.svc-main p{margin:0;font-size:16.5px;line-height:1.8;color:var(--soft);max-width:560px}
.mini{list-style:none;margin:0;padding:6px 0 0}
.mini li{position:relative;padding:11px 0 11px 22px;font-size:15px;line-height:1.5;color:var(--text);border-bottom:1px solid var(--line)}
.mini li:last-child{border-bottom:0}
.mini li:before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
html[lang=ja] .svc h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.02em}

/* Services: situations as large lines */
.sit-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,6vw,96px)}
.sit-line{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;margin:0;padding:28px 0;border-top:1px solid var(--line);font-size:clamp(19px,1.7vw,25px);line-height:1.4;letter-spacing:-.015em;color:var(--cream)}
html[lang=ja] .sit-line{font-size:clamp(17px,1.5vw,21px);line-height:1.65;letter-spacing:0}
.sit-line .num{font-size:11px}

.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.principles div{border-top:1px solid var(--amber);padding-top:28px}
.principles h3{font-size:21px;letter-spacing:-.02em;margin:0 0 14px}
.principles p{margin:0;font-size:15.5px;line-height:1.8;color:var(--soft)}
html[lang=ja] .principles h3{font-size:19px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,112px)}
.list{list-style:none;padding:0;margin:0}
.list li{padding:18px 0 18px 24px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.65;color:var(--text);position:relative}
.list li:first-child{border-top:1px solid var(--line)}
.list li:before{content:"";position:absolute;left:0;top:27px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.list strong{color:#fff;font-weight:500}

/* Experience */
.groups{display:grid;grid-template-columns:3fr 2fr;gap:44px}
.groups h3{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--faint);margin:0 0 18px}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badges span{border:1px solid var(--line-2);padding:10px 16px;font-size:14px;line-height:1.3;color:#e9eee9;border-radius:var(--r-sm);background:#ffffff05}

/* About */
.about{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(40px,7vw,112px);align-items:start}
.about-side .portrait{max-width:380px}
.role{font-size:14px;color:var(--soft);line-height:1.6;margin:0;max-width:380px}
.bio p{font-size:17.5px;line-height:1.9;color:var(--text);margin:0 0 24px;max-width:760px}
.company{width:100%;border-collapse:collapse;max-width:900px}
.company th,.company td{text-align:left;padding:20px 0;border-bottom:1px solid var(--line);font-size:16px;vertical-align:top}
.company th{width:200px;color:var(--soft);font-weight:500}
.company td{color:#e9eee9}
.company a{color:var(--amber)}
.site-note{max-width:780px}
.site-note p:not(.label):not(.more){font-size:17.5px;line-height:1.9;color:var(--text);margin:0 0 22px}
.site-note h2{margin-bottom:30px}

/* Contact band with the bridge behind it */
.band{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.band-bg{position:absolute;inset:-70px 0;z-index:-2;background:url(assets/golden-gate.jpeg) 55% 46%/cover no-repeat;will-change:transform}
.band:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#071317f5 6%,#071317b8 38%,#07131726 100%),linear-gradient(180deg,#071317 0,#07131700 28%,#07131700 72%,#071317 100%)}
.band-in{position:relative}
.section h2.big{font-size:clamp(46px,7vw,112px);letter-spacing:-.06em;margin-bottom:30px}
html[lang=ja] .section h2.big{font-size:clamp(38px,5.4vw,80px);letter-spacing:-.035em}
.mail-row{margin:8px 0 0}
.mail{display:inline-flex;align-items:center;gap:20px;min-height:56px;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.025em;color:#fff;border-bottom:1px solid #e9b66d99;padding-bottom:8px}
.mail .ico{color:var(--amber);width:.8em;height:.8em;transition:transform .3s var(--ease)}
.mail:hover .ico{transform:translateX(6px)}
.links{margin:26px 0 0;font-size:15px}
.links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--amber)}
.links a:hover{color:#fff}

.site-footer{border-top:1px solid var(--line);padding:44px 0 60px;background:var(--ink)}
.footer-row{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-name{margin:0 0 8px;font-size:13px;letter-spacing:.4px;color:#d0ddd4}
.footer-ai{margin:0;font-size:13.5px;color:var(--faint)}
.footer-ai a{color:var(--amber)}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:13px;color:var(--soft)}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px}
.footer-nav a:hover{color:#fff}

/* ---- Typography for Japanese ---------------------------------------------------------------- */
html[lang=ja] .section h2{font-size:clamp(28px,3.2vw,46px);letter-spacing:-.02em;line-height:1.35}
html[lang=ja] .page-title{font-size:clamp(36px,4.8vw,66px);letter-spacing:-.03em}
html[lang=ja] .statement{font-size:clamp(26px,3.2vw,46px);line-height:1.5;letter-spacing:-.02em}
html[lang=ja] .lead,html[lang=ja] .bio p,html[lang=ja] .site-note p:not(.label):not(.more){line-height:2}
html[lang=ja] .label{letter-spacing:2.4px}

/* ---- Motion (reveal only runs with JS and when motion is allowed) --------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
html.js [data-reveal].in{opacity:1;transform:none}
.card[data-reveal].in:hover,.pillar[data-reveal].in:hover{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .skeleton,.experience:not(.ready):before{animation:none}
  .site-header.after-hero{transition:none}
}

/* ---- Tablet and mobile ---------------------------------------------------------------------- */
@media(max-width:1000px){
  .pillars,.principles{grid-template-columns:1fr}
  .pillars{margin-top:48px}
  .pillar{min-height:0}
  .pillar .num{padding-bottom:22px}
  .svc{grid-template-columns:56px 1fr;grid-template-areas:"n m" ". l";row-gap:26px}
  .svc .num{grid-area:n}.svc-main{grid-area:m}.svc .mini{grid-area:l}
  .sit-list{grid-template-columns:1fr}
  .split,.groups{grid-template-columns:1fr}
  .principles{gap:36px}
}
@media(max-width:900px){
  .wrap{padding:0 6%}
  .section{padding:clamp(64px,14vw,96px) 0}
  .me-teaser,.about{grid-template-columns:1fr;gap:28px}
  .me-teaser .portrait,.about-side .portrait{width:112px;height:112px;max-width:none;border-radius:50%;object-fit:cover;object-position:62% 42%}
  .about-side .page-title.name{margin-top:18px}
  .xp-mini{margin-top:44px;padding-top:32px}
  .site-header .header-actions{gap:16px}
  .company th{width:120px}
  .lead,.bio p,.site-note p:not(.label):not(.more){font-size:16.5px}
  .band:after{background:linear-gradient(180deg,#071317 0,#071317c4 45%,#071317e6 100%)}
}
@media(max-width:560px){
  .site-header .header-actions{gap:12px}
  .site-header .header-actions .text-button{font-size:11px}
  .site-header .bar{gap:12px}
  .svc{grid-template-columns:1fr;grid-template-areas:"n" "m" "l";row-gap:18px}
  .sit-line{padding:22px 0}
  .hero-copy .eyebrow{letter-spacing:1.5px}
  html[lang=en] .hero-copy .eyebrow{font-size:7.5px}
  .footer-nav{gap:2px 22px}
}

/* ---- V4: contact actions, FAQ ------------------------------------------------------------- */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:var(--r-sm);font-size:16px;font-weight:500;letter-spacing:-.01em;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.btn .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn.primary{background:var(--amber);color:#071317;box-shadow:0 14px 30px -16px #e9b66daa}
.btn.primary:hover{background:#f2c789;transform:translateY(-1px)}
.btn.primary:hover .ico{transform:translateX(4px)}
.btn.ghost{border:1px solid var(--line-2);color:#f8f6ef;background:#07131766;backdrop-filter:blur(6px)}
.btn.ghost:hover{border-color:var(--amber);color:#fff}
.reply{margin:26px 0 0;font-size:14.5px;color:var(--text)}
.contact-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:14px 0 0;font-size:13px;color:var(--faint)}
.contact-meta a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--soft)}
.contact-meta a:hover{color:#fff}
.contact-meta .ico{width:11px;height:11px;color:var(--amber)}

.faq-wrap{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(40px,7vw,112px);align-items:start}
.faq-wrap h2{margin-bottom:0}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:24px 0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:-.01em;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq .plus{position:relative;flex:none;width:14px;height:14px}
.faq .plus:before,.faq .plus:after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--amber);transition:transform .3s var(--ease)}
.faq .plus:after{transform:rotate(90deg)}
.faq details[open] .plus:after{transform:rotate(0)}
.faq details p{margin:0 0 26px;max-width:680px;font-size:16px;line-height:1.85;color:var(--soft)}
html[lang=ja] .faq summary{font-size:clamp(16px,1.25vw,18px);line-height:1.7}
html[lang=ja] .faq details p{line-height:2}
@media(max-width:900px){
  .faq-wrap{grid-template-columns:1fr;gap:28px}
  .btn{width:100%}
  .cta-row{max-width:420px}
}
.hero-copy .intro{max-width:520px;text-wrap:balance}
html[lang=ja] .hero-copy .intro{max-width:none}
.intro .nb{display:inline-block}
html[lang=en] .band-bg{background-image:url(assets/tokyo-tower.jpg);background-position:50% 30%}
@media (max-width:760px){html[lang=en] .band-bg{background-position:38% 30%}}
.hero-copy .contact .plane{color:var(--amber);transition:transform .35s var(--ease)}
.hero-copy .contact:hover .plane{transform:translate(3px,-3px)}