:root {
  --ink: #16243a; --navy: #183557; --navy-deep: #102741; --brown: #4a382f;
  --gold: #bd9147; --gold-bright: #d8b871; --name-gold: #c9a75d; --gold-pale: #f8efd9; --wine: #8d3345;
  --sky: #f8f6f0; --sky-strong: #eee8da; --cream: #fdf9f0; --paper: #fff;
  --line: #d9e1e6; --muted: #647080; --shadow: 0 22px 60px rgba(24,53,87,.10);
  --ease: cubic-bezier(.2,.75,.25,1);
}

/* 2026-10-13 client revisions */
.handwritten-wide { position: relative; }
.handwritten-composite { display: block; width: 100%; height: auto; overflow: visible; }
.about-simple::after { content: ""; position: absolute; z-index: 0; inset: -18% -10% -14%; background: url("../images/hero-champagne-light-alt.jpg") center 54% / cover no-repeat; opacity: .34; pointer-events: none; }
.about-simple > * { position: relative; z-index: 1; }

.profile-summary { padding-top: 56px; padding-bottom: 68px; }
.profile-summary .sub-grid { align-items: start; }
.profile-summary .profile-panel { min-height: 510px; }
.profile-summary .profile-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.profile-name-origin { margin-bottom: 12px; }
.profile-name-origin p { font-size: clamp(23px,2.15vw,31px); line-height: 1.75; }
.profile-name-origin p span { display: inline-block; color: #9e7431; font-family: "Yuji Syuku","Noto Serif JP",serif; font-size: 2.55em; line-height: .55; vertical-align: -.16em; }
.profile-name-origin small { margin-top: 13px; color: #171717; font-size: 17px; font-weight: 700; line-height: 1.8; }
.profile-summary .profile-details { margin-top: 18px; }
.profile-summary .profile-details div { padding: 14px 0; }
.profile-summary .profile-details dt { font-size: 12px; }
.profile-summary .profile-details dd { font-size: 16px; line-height: 1.75; }

.profile-page .personal-story { grid-template-columns: minmax(0,1fr) 390px; align-items: start; }
.profile-page .personal-story .section-intro { max-width: none; }
.profile-page .personal-story .section-intro h2 { font-size: clamp(34px,4vw,56px); }
.personal-age,.career-age { color: inherit; font-size: .55em; white-space: nowrap; }
.personal-lead { margin: 22px 0 0; color: var(--navy); font-size: 19px; line-height: 1.9; font-weight: 800; }
.personal-copy { margin-top: 24px; }
.personal-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.personal-copy p + p { margin-top: 18px; }
.profile-page .personal-memories { width: 390px; height: 465px; }
.profile-page .personal-memories figure { margin: 0; }
.profile-page .personal-memory-main { width: 242px; height: auto; }
.profile-page .personal-memory-main img { width: 242px; height: 312px; display: block; object-fit: cover; object-position: center 25%; border-radius: 3px 28px 3px 3px; box-shadow: 0 18px 45px rgba(11,42,73,.13); }
.profile-page .personal-memory-main figcaption { width: 242px; padding-top: 10px; color: var(--navy); font-size: 11px; line-height: 1.6; font-weight: 700; }
.profile-page .personal-memory-sub,.profile-page .personal-memory-third { overflow: hidden; }
.profile-page .personal-memory-sub img,.profile-page .personal-memory-third img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-page .personal-memory-sub img { object-position: center 24%; }

.career-personal .container { grid-template-columns: minmax(0,.8fr) minmax(460px,1.2fr); align-items: start; }
.career-personal .section-label { margin-bottom: 18px; }
.career-map { margin: 0; padding: 4px 0 0; list-style: none; counter-reset: career; }
.career-map li { min-height: 96px; position: relative; display: grid; grid-template-columns: minmax(170px,.8fr) minmax(140px,.65fr) minmax(210px,1fr); gap: 18px; align-items: center; padding: 17px 18px 17px 54px; border-bottom: 1px solid rgba(255,255,255,.2); }
.career-map li::before { counter-increment: career; content: counter(career,decimal-leading-zero); position: absolute; left: 0; color: var(--gold-bright); font: 800 21px/1 "Montserrat",sans-serif; }
.career-map b { color: #fff; font-size: 14px; line-height: 1.65; }
.career-map span { color: var(--gold-bright); font-size: 13px; font-weight: 800; }
.career-map small { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }

.approach-qa-section .qa-list { max-width: 980px; }
.experience-relocated { padding-top: 76px; }
.experience-relocated .section-intro h2 { margin: 0; color: var(--navy); font-size: clamp(34px,4vw,54px); line-height: 1.5; }
.experience-relocated .section-intro h2 em { color: var(--wine); font-style: normal; }

@media (min-width: 901px) {
  .fv-image-variant .hero-copy { align-self: start; padding-top: clamp(52px,6.5vh,78px); }
  .fv-image-variant .hero-candidate-name { margin-bottom: 20px; }
  .fv-image-variant .hero-candidate-name strong { width: max-content; padding: .02em .12em .08em; margin-left: -.12em; font-size: clamp(78px,7.1vw,112px); letter-spacing: .08em; text-shadow: 0 0 2px #fff,0 0 7px #fff,0 0 14px #fff,0 4px 18px rgba(56,37,22,.18); }
  .fv-image-variant .hero-candidate-name span { font-size: clamp(24px,1.9vw,31px); }
}

@media (max-width: 900px) {
  .career-personal .container { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .profile-summary { padding-top: 42px; padding-bottom: 54px; }
  .profile-summary .profile-panel { width: 88%; aspect-ratio: 4 / 5; min-height: 0; }
  .profile-summary .profile-panel img { object-position: center 12%; }
  .profile-name-origin p { font-size: 21px; }
  .profile-name-origin small { font-size: 14px; }
  .profile-summary .profile-details dd { font-size: 15px; }
  .profile-page .personal-story .section-intro h2 { font-size: 31px; }
  .personal-lead { font-size: 16px; }
  .personal-copy p { font-size: 14px; line-height: 1.9; }
  .profile-page .personal-memories { width: 296px; height: 356px; }
  .profile-page .personal-memory-main { width: 184px; }
  .profile-page .personal-memory-main img { width: 184px; height: 236px; }
  .profile-page .personal-memory-main figcaption { width: 184px; font-size: 10px; }
  .profile-page .personal-memory-sub { width: 96px; height: 110px; }
  .profile-page .personal-memory-third { width: 122px; height: 92px; }
  .career-map li { grid-template-columns: 1fr; gap: 5px; padding: 17px 10px 17px 42px; }
  .career-map b { font-size: 14px; }
  .career-map span { font-size: 12px; }
  .experience-relocated { padding-top: 56px; }
}

.approach-page .sub-section { padding-top: 78px; padding-bottom: 78px; }
.approach-page .breadcrumbs + .sub-section { padding-top: 58px; }
@media (max-width: 620px) {
  .approach-page .sub-section { padding-top: 60px; padding-bottom: 60px; }
  .approach-page .breadcrumbs + .sub-section { padding-top: 42px; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans JP",sans-serif; line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
.mobile-br { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - 64px),1180px); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease),transform .75s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 10000; height: 82px; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(24,53,87,.09); backdrop-filter: blur(14px); transition: box-shadow .3s,height .3s; isolation: isolate; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg,transparent,var(--gold-bright) 20%,var(--gold-bright) 80%,transparent); opacity: .58; }
.site-header.is-scrolled { height: 72px; box-shadow: 0 10px 28px rgba(24,53,87,.08); }
.header-inner { width: min(calc(100% - 48px),1380px); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { color: var(--navy); display: grid; grid-template-columns: auto auto; align-items: end; line-height: 1.1; }
.brand-kicker { grid-column: 1 / -1; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .16em; margin-bottom: 5px; }
.brand-name { color: var(--name-gold); font-family: "Noto Sans JP",sans-serif; font-size: 22px; font-weight: 800; letter-spacing: .06em; }
.brand-ruby { margin: 0 0 2px 12px; color: var(--muted); font-family: "Montserrat",sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.global-nav { display: flex; align-items: center; gap: clamp(13px,1.8vw,27px); color: var(--navy); }
.global-nav > a { font-size: 16px; font-weight: 700; position: relative; white-space: nowrap; }
.global-nav > .nav-disabled { color: #7b8390; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: default; }
.global-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--gold); transition: right .25s; }
.global-nav > a:hover::after { right: 0; }
.global-nav .nav-cta { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 9px; color: #fff; background: var(--wine); border-radius: 999px; box-shadow: 0 8px 20px rgba(141,51,69,.18); }
.mobile-nav-social,.hero-mobile-portrait { display: none; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: transparent; padding: 10px; color: var(--navy); }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: currentColor; transition: transform .25s,opacity .25s; }

/* Hero */
.hero { height: clamp(740px,84svh,790px); min-height: 740px; padding-top: 82px; color: var(--ink); background: linear-gradient(112deg,#fff 0 45%,#f5fafc 45% 100%); overflow: hidden; display: grid; grid-template-columns: minmax(440px,.92fr) minmax(500px,1.08fr); position: relative; }
.hero::before { content: ""; position: absolute; width: 48vw; height: 48vw; min-width: 590px; min-height: 590px; right: -7vw; top: 3%; border-radius: 50%; background: radial-gradient(circle at 48% 45%,#fff 0 34%,var(--sky) 35% 62%,var(--sky-strong) 63% 100%); opacity: .92; }
.hero::after { content: "SHINAGAWA"; position: absolute; right: -2vw; top: 13%; color: rgba(24,53,87,.035); font: 900 clamp(72px,12vw,190px)/1 "Montserrat",sans-serif; letter-spacing: -.06em; writing-mode: vertical-rl; }
.hero-lines { position: absolute; z-index: 1; left: -15vw; bottom: -20vw; width: 76vw; height: 34vw; border: 10px solid rgba(216,184,113,.42); border-radius: 50%; transform: rotate(-8deg); }
.hero-lines::before,.hero-lines::after { content: ""; position: absolute; border: 3px solid rgba(216,184,113,.25); border-radius: 50%; inset: 21px; }
.hero-lines::after { inset: 48px; border-width: 1px; }
.hero-copy { z-index: 3; padding: 42px 3vw 40px max(5vw,calc((100vw - 1380px)/2)); align-self: center; }
.hero-role { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 25px; color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: .17em; }
.hero-role::before { content: ""; width: 32px; height: 3px; background: var(--gold); }
.hero-candidate-name { margin: 0 0 18px; color: #4a3425; font-family: "Noto Sans JP",sans-serif; }
.hero-candidate-name span { display: block; margin: 0 0 2px 4px; color: #a9853f; font-size: 12px; font-weight: 800; letter-spacing: .34em; }
.hero-candidate-name strong { display: block; font-size: clamp(58px,5.8vw,90px); line-height: 1.05; font-weight: 900; letter-spacing: .08em; }
.hero h1 { margin: 0; color: var(--navy-deep); font-size: clamp(66px,7vw,108px); line-height: 1.14; font-weight: 900; letter-spacing: -.055em; }
.hero h1 em { color: var(--wine); font-style: normal; position: relative; z-index: 0; }
.hero h1 em::after { content: ""; position: absolute; height: 14px; left: -1%; right: -4%; bottom: 6px; background: var(--gold-pale); border-radius: 20px; z-index: -1; transform: rotate(-2deg); }
.hero-sub { margin: 21px 0 0; color: var(--brown); font-family: "Noto Serif JP",serif; font-size: clamp(23px,2vw,32px); font-weight: 700; letter-spacing: .07em; }
.hero-lead { max-width: 610px; margin: 20px 0 0; color: #536273; font-size: 15px; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .03em; transition: transform .25s,box-shadow .25s,background .25s,color .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--navy); box-shadow: 0 12px 28px rgba(24,53,87,.19); }
.button-primary:hover { background: #20476f; }
.button-ghost { color: var(--navy); border: 1px solid rgba(24,53,87,.34); background: rgba(255,255,255,.72); }
.button-ghost:hover { background: #fff; box-shadow: 0 10px 26px rgba(24,53,87,.08); }
.hero-social { margin-top: 27px; display: flex; align-items: center; gap: 9px; color: var(--muted); }
.hero-social > span { margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.hero-social a,.footer-social a { width: 40px; height: 40px; border: 1px solid rgba(24,53,87,.22); border-radius: 50%; display: grid; place-items: center; color: var(--navy); font-size: 17px; transition: border .2s,background .2s,transform .2s; }
.hero-social a:hover { border-color: var(--gold); background: var(--gold-pale); transform: translateY(-2px); }
.hero-portrait { position: relative; z-index: 2; min-width: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hero-portrait::after { content: none; }
.hero-halo { position: absolute; z-index: 0; width: min(49vw,740px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(189,145,71,.38); top: 8%; }
.hero-halo::before,.hero-halo::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(189,145,71,.2); inset: 7%; }
.hero-halo::after { inset: 14%; }
.hero-portrait > img { width: auto; height: calc(90% + 74px); max-width: 96%; max-height: calc(90% + 74px); margin-bottom: -3px; align-self: flex-end; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 26px rgba(24,53,87,.14)); z-index: 1; }
.hero-nameplate { position: absolute; z-index: 4; right: clamp(24px,4vw,68px); bottom: clamp(48px,8vh,90px); min-width: clamp(260px,21vw,350px); padding: 17px 26px 20px; color: #fff; background: var(--navy); border-radius: 0 0 0 30px; box-shadow: 0 18px 34px rgba(16,39,65,.2); text-align: right; }
.hero-nameplate span { display: block; margin-bottom: 5px; color: var(--gold-bright); font-size: 10px; font-weight: 800; letter-spacing: .32em; }
.hero-nameplate strong { display: block; color: var(--gold-bright); font-family: "Noto Sans JP",sans-serif; font-size: clamp(31px,3vw,48px); line-height: 1.2; font-weight: 800; letter-spacing: .08em; }
.scroll-cue { position: absolute; z-index: 4; left: 24px; bottom: 27px; display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; color: var(--navy); font: 700 9px/1 "Montserrat",sans-serif; letter-spacing: .25em; }

/* Shared headings */
.section-label { display: flex; align-items: center; gap: 13px; color: var(--gold); margin-bottom: 24px; }
.section-label span { font: 800 28px/1 "Montserrat",sans-serif; }
.section-label p { margin: 0; padding-left: 13px; border-left: 1px solid currentColor; font: 800 10px/1.4 "Montserrat",sans-serif; letter-spacing: .17em; }
.section-label.light { color: var(--gold); }
.section-heading { max-width: 850px; }
.about-copy h2,.section-heading h2 { margin: 0; color: var(--navy-deep); font-size: clamp(34px,3.9vw,52px); line-height: 1.5; font-weight: 900; letter-spacing: -.025em; }
.about-copy h2,.section-heading h2,.story-heading h2,.vision-copy h2,.voice h2,.page-hero h1,.info-card h3,.topic-card h3,.page-cta h2 { text-wrap: balance; word-break: auto-phrase; }
.about-copy h2 em,.section-heading h2 em { color: var(--wine); font-style: normal; }
.section-heading > p { margin: 18px 0 0; color: var(--muted); font-size: 15px; }

/* About */
.about { overflow: hidden; background: #fff; }
.about::before { content: ""; position: absolute; left: 0; top: 12%; width: 32%; height: 72%; background: var(--sky); border-radius: 0 180px 180px 0; }
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px,8vw,112px); align-items: center; }
.about-visual { position: relative; }
.about-slider { position: relative; overflow: hidden; border: 1px solid rgba(24,53,87,.12); border-radius: 4px 32px 4px 4px; background: linear-gradient(145deg,#fff,var(--sky)); box-shadow: 0 18px 46px rgba(24,53,87,.09); }
.about-slides { position: relative; aspect-ratio: 4 / 5; }
.about-slide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease),visibility .55s; }
.about-slide.is-active { opacity: 1; visibility: visible; }
.about-slide img { width: 100%; height: 100%; padding: 3px 3px 52px; object-fit: contain; object-position: center; }
.about-slide figcaption { position: absolute; left: 22px; right: 22px; bottom: 15px; color: var(--navy); font-size: 12px; font-weight: 700; }
.slider-controls { position: absolute; right: 15px; bottom: 11px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.slider-arrow { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--navy); border: 1px solid rgba(24,53,87,.22); border-radius: 50%; background: rgba(255,255,255,.9); cursor: pointer; }
.slider-arrow:hover,.slider-arrow:focus-visible { color: #fff; background: var(--navy); }
.slider-dots { display: flex; gap: 6px; }
.slider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(24,53,87,.24); cursor: pointer; }
.slider-dots button.is-active { background: var(--wine); transform: scale(1.2); }
.about-copy { position: relative; }
.about-copy > p { margin: 22px 0 0; color: #566272; font-size: 15px; }
.about-copy > .lead { color: var(--ink); font-size: 17px; font-weight: 700; }
.about-handwritten > img { width: min(100%,560px); max-height: 590px; margin: 16px 0 20px; object-fit: contain; object-position: left center; }
.about-simple { display: block; }
.about-simple .about-copy { width: 100%; }
.handwritten-wide { margin: 28px 0 24px; }
.handwritten-wide img { display: block; width: 100%; height: auto; }
.about-profile-link { font-size: 20px; }
.about-facts { margin: 29px 0 27px; border-top: 1px solid var(--line); }
.about-facts div { display: grid; grid-template-columns: 128px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-facts dt { color: var(--gold); font: 800 9px/1.8 "Montserrat",sans-serif; letter-spacing: .13em; }
.about-facts dd { margin: 0; font-size: 13px; font-weight: 700; }
.text-link { display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--navy); padding-bottom: 5px; color: var(--navy); font-size: 13px; font-weight: 800; }
.text-link.about-profile-link { display: flex; width: max-content; margin-left: auto; }
.text-link i { color: var(--gold); transition: transform .2s; }
.text-link:hover i { transform: translateX(4px); }

/* Story */
.story { background: linear-gradient(135deg,#f4fafc 0%,#fff 54%,#fdf8ed 100%); color: var(--ink); overflow: hidden; }
.story::before { content: "STORY"; position: absolute; right: -2vw; top: 22px; color: rgba(24,53,87,.035); font: 900 17vw/1 "Montserrat",sans-serif; }
.story-heading { max-width: 820px; position: relative; }
.story-heading h2 { margin: 0; color: var(--navy-deep); font-size: clamp(38px,5vw,66px); line-height: 1.4; font-weight: 900; letter-spacing: -.035em; }
.story-heading > p { margin: 20px 0 0; color: var(--muted); font-size: 15px; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; position: relative; }
.story-card { min-height: 338px; display: block; padding: 31px; border: 1px solid rgba(24,53,87,.10); border-top: 4px solid var(--gold-bright); border-radius: 4px 28px 4px 4px; background: rgba(255,255,255,.93); box-shadow: 0 15px 38px rgba(24,53,87,.06); }
.story-icon { width: 94px; height: 94px; border-radius: 50%; overflow: hidden; background: var(--gold-pale); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gold-bright); }
.story-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center 19%; }
.question { color: var(--wine); font: 800 11px/1.5 "Montserrat",sans-serif; letter-spacing: .15em; }
.story-card h3 { margin: 5px 0 15px; color: var(--navy); font-size: 23px; line-height: 1.48; font-weight: 900; }
.story-card strong { display: block; color: var(--brown); font-size: 14px; line-height: 1.8; }
.story-card p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.story-question { min-height: 106px; }
.story-answer { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; }
.story-answer .story-icon { width: 76px; height: 76px; }
.answer-bubble { position: relative; padding: 18px 20px; border-radius: 4px 22px 22px 22px; background: var(--sky); }
.answer-bubble::before { content: ""; position: absolute; left: -11px; top: 22px; border-width: 8px 12px 8px 0; border-style: solid; border-color: transparent var(--sky) transparent transparent; }
.answer-bubble small { display: block; margin-bottom: 7px; color: var(--gold); font: 800 9px/1.4 "Montserrat",sans-serif; letter-spacing: .16em; }
.answer-bubble strong { color: var(--brown); }
.draft-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; }

/* Vision */
.vision { background: var(--cream); overflow: hidden; }
.vision::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 41%; background: linear-gradient(140deg,var(--sky),#f4fafc); }
.vision-orbit { position: absolute; left: -16vw; top: -11vw; width: 56vw; aspect-ratio: 1; border: 1px solid rgba(189,145,71,.28); border-radius: 50%; }
.vision-orbit::before,.vision-orbit::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(189,145,71,.18); border-radius: 50%; }
.vision-orbit::after { inset: 16%; }
.vision-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(60px,9vw,130px); align-items: start; position: relative; }
.vision-quote { margin: 0; color: var(--navy); font-family: "Noto Serif JP",serif; font-size: clamp(35px,4.15vw,61px); font-weight: 700; line-height: 1.5; letter-spacing: -.035em; }
.vision-quote > span { display: block; white-space: nowrap; }
.vision-quote em { color: var(--wine); font-style: normal; }
.vision-quote strong { color: var(--gold); font-size: 1.35em; }
.vision-overline { margin: 0 0 14px; color: var(--gold); font: 800 9px/1.5 "Montserrat",sans-serif; letter-spacing: .18em; }
.vision-copy { padding: 38px; background: rgba(255,255,255,.88); border-radius: 4px 36px 4px 4px; box-shadow: var(--shadow); }
.vision-copy h2 { margin: 0; color: var(--navy-deep); font-size: clamp(29px,3vw,42px); line-height: 1.5; font-weight: 900; letter-spacing: -.025em; }
.vision-copy > p:not(.vision-overline) { margin: 20px 0 0; color: #566272; font-size: 15px; }
.principles { margin-top: 29px; border-top: 1px solid var(--line); }
.principles > div { display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.principles span { grid-row: 1 / 3; color: var(--gold); font: 800 18px/1.5 "Montserrat",sans-serif; }
.principles strong { color: var(--navy); font-size: 14px; }
.principles small { margin-top: 2px; color: var(--muted); font-size: 11px; }

/* Process and phases */
.process-section { background: #fff; }
.process-list { margin: 54px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; }
.process-list li { min-height: 250px; padding: 22px 17px; border: 1px solid var(--line); border-radius: 4px 22px 4px 4px; background: #fff; display: flex; flex-direction: column; position: relative; transition: transform .25s,box-shadow .25s; }
.process-list li:nth-child(even) { background: var(--sky); }
.process-list li:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.process-list li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -9px; top: 72px; width: 8px; height: 8px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }
.process-list span { color: var(--gold); font: 800 17px/1.4 "Montserrat",sans-serif; }
.process-list i { margin: 23px 0 16px; color: var(--navy); font-size: 32px; }
.process-list strong { color: var(--navy); font-size: 17px; line-height: 1.5; }
.process-list small { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.phases { background: linear-gradient(180deg,var(--sky) 0%,#f7fbfc 100%); }
.phase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 51px; }
.phase-card { min-height: 320px; padding: 32px; border: 1px solid rgba(24,53,87,.12); border-radius: 4px 32px 4px 4px; background: #fff; position: relative; }
.phase-card::before { content: ""; position: absolute; left: 32px; right: 32px; top: 92px; height: 1px; background: var(--line); }
.phase-no { margin: 0; color: var(--gold); font: 800 10px/1.5 "Montserrat",sans-serif; letter-spacing: .14em; }
.phase-no strong { font-size: 39px; vertical-align: -7px; margin-left: 8px; }
.phase-period { position: absolute; right: 32px; top: 45px; color: var(--muted); font: 600 10px/1.5 "Montserrat",sans-serif; }
.phase-card h3 { margin: 45px 0 12px; color: var(--navy); font-size: 29px; font-weight: 900; }
.phase-card > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.phase-card.current { border: 2px solid var(--gold-bright); background: linear-gradient(145deg,#fff,#fffaf0); box-shadow: var(--shadow); transform: translateY(-12px); }
.current-tag { position: absolute; right: 0; top: 0; padding: 6px 13px; color: #fff; background: var(--wine); border-radius: 0 28px 0 13px; font: 800 8px/1.5 "Montserrat",sans-serif; letter-spacing: .15em; }
.phase-card.future { opacity: .74; }

/* Reports */
.reports { background: #fff; }
.reports-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.reports-head .section-heading h2 { font-size: clamp(38px,4vw,54px); }
.report-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 45px; }
.report-card { border: 1px solid var(--line); border-radius: 4px 26px 4px 4px; overflow: hidden; background: var(--paper); transition: transform .3s,box-shadow .3s; }
.report-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.report-visual { height: 210px; color: #fff; overflow: hidden; position: relative; background: var(--sky); }
.report-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(16,39,65,.05),rgba(16,39,65,.62)); pointer-events: none; }
.report-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.report-card:hover .report-visual img { transform: scale(1.04); }
.report-visual > span { position: absolute; z-index: 2; left: 18px; top: 17px; padding: 5px 9px; border-radius: 999px; background: rgba(16,39,65,.78); font: 800 9px/1.5 "Montserrat",sans-serif; letter-spacing: .16em; }
.report-image-credit { position: absolute; z-index: 2; right: 10px; bottom: 7px; color: rgba(255,255,255,.82); font-size: 8px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.report-body { padding: 23px; }
.report-body time,.report-body > span { color: var(--gold); font-size: 10px; font-weight: 800; }
.report-body > span::before { content: "/"; margin: 0 8px; color: var(--line); }
.report-body h3 { margin: 12px 0 0; color: var(--navy); font-size: 16px; line-height: 1.7; }

/* CTA and footer */
.voice { padding: 96px 0; color: var(--ink); background: linear-gradient(115deg,var(--gold-pale),#fff 58%,var(--sky)); position: relative; overflow: hidden; }
.voice-lines { position: absolute; width: 70vw; height: 35vw; right: -16vw; bottom: -25vw; border: 8px solid rgba(216,184,113,.28); border-radius: 50%; }
.voice-lines::before,.voice-lines::after { content: ""; position: absolute; inset: 22px; border: 2px solid rgba(216,184,113,.24); border-radius: 50%; }
.voice-lines::after { inset: 48px; border-width: 1px; }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; position: relative; }
.voice-kicker { margin: 0 0 14px; color: var(--wine); font: 800 10px/1.5 "Montserrat",sans-serif; letter-spacing: .18em; }
.voice h2 { margin: 0; color: var(--navy-deep); font-size: clamp(37px,4.3vw,58px); line-height: 1.4; font-weight: 900; letter-spacing: -.03em; }
.voice h2 em { color: var(--wine); font-style: normal; }
.voice-copy > p:first-child { margin: 0; color: #566272; font-size: 15px; }
.button-dark { margin-top: 28px; color: #fff; background: var(--wine); gap: 12px; box-shadow: 0 12px 28px rgba(141,51,69,.18); }
.voice-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.site-footer { padding: 66px 0 24px; color: #fff; background: var(--navy-deep); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.footer-role { margin: 0; color: var(--gold-bright); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.footer-name { margin: 6px 0 0; color: var(--gold-bright); font-family: "Noto Sans JP",sans-serif; font-size: 33px; font-weight: 800; letter-spacing: .07em; }
.footer-slogan { margin: 3px 0 0; color: rgba(255,255,255,.64); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { border-color: rgba(255,255,255,.28); color: #fff; }
.footer-social a:hover { border-color: var(--gold-bright); background: rgba(255,255,255,.08); }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; align-content: start; }
.footer-nav a { color: rgba(255,255,255,.7); font-size: 12px; }
.footer-nav .nav-disabled { color: rgba(255,255,255,.48); font-size: 12px; cursor: default; }
.footer-nav a:hover { color: var(--gold-bright); }
.footer-bottom { margin-top: 49px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.footer-bottom p { display: flex; justify-content: space-between; gap: 28px; margin: 0; color: rgba(255,255,255,.44); font-size: 9px; }
.footer-bottom span { flex: none; }

@media (max-width: 1100px) {
  .global-nav { gap: 11px; } .global-nav > a { font-size: 16px; }
  .hero { grid-template-columns: .92fr 1.08fr; } .hero-copy { padding-left: 4vw; padding-right: 1vw; }
  .story-card { grid-template-columns: 78px 1fr; padding: 26px; } .story-icon { width: 78px; height: 78px; }
  .process-list { grid-template-columns: repeat(3,1fr); } .process-list li:nth-child(3n)::after { display: none; }
}
@media (max-width: 900px) {
  .site-header { height: 72px; }
  .nav-toggle { display: block; position: relative; z-index: 10002; }
  .nav-toggle.is-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open > span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.nav-open { overflow: hidden; }
  .global-nav { position: fixed; z-index: 10001; inset: 72px 0 auto; width: 100%; height: calc(100dvh - 72px); padding: 28px 6vw 34px; display: none; align-items: stretch; flex-direction: column; gap: 0; color: var(--navy); background: #fff; box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain; }
  .global-nav.is-open { display: flex; } .global-nav > a,.global-nav > .nav-disabled { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .global-nav .nav-cta { margin-top: 17px; padding: 0 18px; justify-content: center; }
  .mobile-nav-social { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 12px; color: var(--muted); }
  .mobile-nav-social > span { margin-right: 4px; font-size: 12px; font-weight: 700; }
  .mobile-nav-social a { width: 46px; height: 46px; display: grid; place-items: center; color: var(--navy); border: 1px solid rgba(24,53,87,.25); border-radius: 50%; font-size: 20px; }
  .hero { min-height: 980px; padding-top: 72px; grid-template-columns: 1fr; grid-template-rows: auto 53%; }
  .hero::before { right: -20vw; top: 42%; } .hero-copy { padding: 62px 7vw 14px; }
  .hero-portrait > img { width: 74%; height: 56%; max-width: none; align-self: center; object-fit: cover; object-position: center top; }
  .hero-halo { width: 71vw; top: 0; } .scroll-cue { display: none; }
  .about-grid,.vision-grid,.voice-grid { grid-template-columns: 1fr; } .about::before { width: 54%; height: 43%; }
  .about-visual { width: min(75vw,560px); margin-inline: auto; } .story-grid { grid-template-columns: 1fr; } .story-card { min-height: auto; }
  .vision::before { width: 100%; height: 43%; bottom: auto; } .phase-grid,.report-grid { grid-template-columns: 1fr; }
  .phase-card.current { transform: none; } .report-visual { height: 175px; }
}
@media (max-width: 620px) {
  .container { width: min(calc(100% - 36px),1180px); } .section { padding: 78px 0; }
  .brand-kicker { font-size: 7px; } .brand-name { font-size: 20px; } .brand-ruby { display: none; }
  .hero { height: auto; min-height: 650px; display: block; padding-top: 72px; } .hero-copy { padding: 54px 20px 30px; align-self: auto; }
  .hero-role { margin-bottom: 14px; font-size: 10px; } .hero h1 { width: 64%; position: relative; z-index: 7; font-size: clamp(50px,14vw,66px); text-shadow: 0 1px 0 #fff,0 0 8px rgba(255,255,255,.86); }
  .hero-sub { width: 58%; margin-top: 14px; position: relative; z-index: 7; font-size: 19px; text-shadow: 0 1px 0 #fff,0 0 5px #fff,0 0 12px rgba(255,255,255,.98); }
  .hero-lead { width: 64%; margin-top: 14px; position: relative; z-index: 7; font-size: 13px; line-height: 1.75; text-shadow: 0 1px 0 #fff,0 0 5px #fff,0 0 12px #fff,0 0 20px rgba(255,255,255,.95); }
  .hero-actions { margin-top: 22px; position: relative; z-index: 5; } .button { width: 100%; min-height: 49px; } .hero-social { margin-top: 18px; }
  .hero > .hero-portrait { display: none; }
  .hero-mobile-portrait { width: min(54vw,260px); height: 343px; position: absolute; right: 0; bottom: 100%; display: flex; align-items: flex-end; justify-content: flex-end; overflow: visible; pointer-events: none; }
  .hero::before,.hero-mobile-portrait::before { content: none; }
  .hero-sub { width: auto; font-size: 18px; white-space: nowrap; }
  .hero-lines { display: none; }
  .hero-mobile-portrait img { width: 100%; height: auto; max-width: none; position: absolute; z-index: 1; right: 0; bottom: 0; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 20px rgba(24,53,87,.13)); }
  .about-grid { gap: 58px; } .about-visual { width: 92%; }
  .about-slide { display: block; }
  .about-slide img { width: auto; height: auto; max-width: calc(100% - 28px); max-height: calc(100% - 76px); position: absolute; inset: 14px 14px 62px; margin: auto; padding: 0; object-fit: contain; object-position: center; }
  .about-slide:first-child img { inset: 10px 10px 10px; max-width: calc(100% - 20px); max-height: calc(100% - 20px); }
  .about-slide figcaption { left: 15px; right: 122px; bottom: 12px; font-size: 11px; line-height: 1.45; }
  .about-handwritten { display: block; }
  .about-handwritten h2 { min-height: 0; margin-bottom: 0; }
  .about-handwritten > img { width: 100%; height: auto !important; max-width: 100%; max-height: none; aspect-ratio: 1168 / 1346; display: block; position: static; margin: 18px 0 20px; padding: 0; transform: none; object-fit: contain; object-position: left top; }
  .about-handwritten > .text-link { margin-top: 0; }
  .about-copy h2,.section-heading h2 { font-size: 30px; } .about-copy > p { font-size: 16px; }
  .about-facts div { grid-template-columns: 99px 1fr; gap: 10px; }
  .story-heading h2 { font-size: 34px; } .story-card { padding: 21px 17px; }
  .story-question { min-height: 0; margin-bottom: 16px; }
  .story-answer { grid-template-columns: 58px 1fr; gap: 14px; }
  .story-answer .story-icon { width: 58px; height: 58px; } .story-card h3 { font-size: 19px; } .story-card strong { font-size: 16px; }
  .answer-bubble { padding: 16px; }
  .vision-quote { font-size: clamp(31px,9.2vw,40px); letter-spacing: -.05em; } .vision-copy { padding: 25px 20px; } .vision-copy h2 { font-size: 27px; }
  .process-list { grid-template-columns: 1fr 1fr; } .process-list li { min-height: 230px; }
  .process-list li:nth-child(3n)::after { display: block; } .process-list li:nth-child(even)::after { display: none; }
  .phase-card { min-height: 292px; padding: 27px; } .phase-card::before { left: 27px; right: 27px; } .phase-period { right: 27px; }
  .reports-head { align-items: start; flex-direction: column; } .voice { padding: 76px 0; } .voice-grid { gap: 34px; } .voice h2 { font-size: 35px; }
  .footer-grid { grid-template-columns: 1fr; gap: 43px; } .footer-nav { grid-template-columns: 1fr; }
  .footer-bottom p { display: block; } .footer-bottom span { display: block; margin-top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Lower pages */
.subpage-main { padding-top: 82px; }
.global-nav > a[aria-current="page"]:not(.nav-cta)::after { right: 0; }
.page-hero { min-height: 430px; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(118deg,#fff 0 55%,var(--sky) 55% 100%); }
.page-hero::before { content: none; }
.page-hero::after { content: attr(data-word); position: absolute; right: 2vw; bottom: -18px; color: rgba(24,53,87,.045); font: 900 clamp(72px,10vw,150px)/1 "Montserrat",sans-serif; letter-spacing: -.05em; }
.page-hero .container { position: relative; z-index: 2; }
.page-kicker { margin: 0 0 15px; color: var(--gold); font: 800 11px/1.5 "Montserrat",sans-serif; letter-spacing: .2em; }
.page-hero h1 { margin: 0; color: var(--navy-deep); font-size: clamp(48px,6vw,78px); line-height: 1.25; font-weight: 900; letter-spacing: .08em; }
.page-hero .lead { max-width: 760px; margin: 22px 0 0; color: #536273; font-size: 17px; font-weight: 600; }
.breadcrumbs { padding: 13px 0; border-bottom: 1px solid var(--line); background: #fff; }
.breadcrumbs ol { width: min(calc(100% - 64px),1180px); margin: 0 auto; padding: 0; display: flex; gap: 10px; list-style: none; color: var(--muted); font-size: 10px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 10px; color: var(--gold); }
.sub-section { padding: 104px 0; position: relative; }
.sub-section.soft { background: linear-gradient(135deg,#f5fafc,#fff 58%,#fdf9f0); }
.sub-section.sky { background: linear-gradient(150deg,var(--sky),#f8fcfd); }
.sub-section.cream { background: var(--cream); }
.section-intro { max-width: 820px; }
.section-intro.center { margin-inline: auto; text-align: center; }
.section-intro h2,.sub-copy h2,.legal-copy h2 { margin: 0; color: var(--navy-deep); font-size: clamp(32px,4vw,51px); line-height: 1.5; font-weight: 900; letter-spacing: -.025em; text-wrap: balance; word-break: auto-phrase; }
.section-intro h2 em,.sub-copy h2 em { color: var(--wine); font-style: normal; }
.section-intro > p,.sub-copy > p { color: #566272; }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,96px); align-items: center; }
.sub-grid.top { align-items: start; }
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; }
.card-grid.four { grid-template-columns: repeat(4,1fr); }
.info-card { min-height: 260px; padding: 30px; border: 1px solid rgba(24,53,87,.12); border-radius: 4px 28px 4px 4px; background: rgba(255,255,255,.94); box-shadow: 0 16px 42px rgba(24,53,87,.055); }
.info-card .number { margin: 0 0 28px; color: var(--gold); font: 800 28px/1 "Montserrat",sans-serif; }
.info-card .icon { width: 54px; height: 54px; margin-bottom: 22px; display: grid; place-items: center; color: var(--navy); background: var(--gold-pale); border-radius: 50%; font-size: 21px; }
.info-card h3 { margin: 0; color: var(--navy); font-size: 20px; line-height: 1.55; font-weight: 900; }
.info-card p { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.profile-panel { min-height: 580px; display: flex; align-items: flex-end; justify-content: center; position: relative; overflow: hidden; border-radius: 4px 42px 4px 4px; background: linear-gradient(145deg,var(--sky),#fff 68%); }
.profile-panel::before { content: ""; position: absolute; width: 410px; height: 410px; bottom: 36px; border-radius: 50%; background: var(--gold-pale); }
.profile-panel img { width: auto; height: 94%; position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(24,53,87,.14)); }
.sub-role { display: inline-flex; padding: 6px 13px; color: var(--wine); border: 1px solid rgba(141,51,69,.25); border-radius: 99px; font-size: 11px; font-weight: 800; }
.sub-name { margin: 17px 0 0; color: var(--name-gold); font-family: "Noto Sans JP",sans-serif; font-size: clamp(39px,4vw,56px); line-height: 1.25; font-weight: 800; letter-spacing: .06em; }
.sub-name-ruby { margin: 3px 0 0; color: var(--gold); font: 700 10px/1.5 "Montserrat",sans-serif; letter-spacing: .2em; }
.profile-details { margin: 30px 0 0; border-top: 1px solid var(--line); }
.profile-details div { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.profile-details dt { color: var(--gold); font-size: 11px; font-weight: 800; }
.profile-details dd { margin: 0; color: #4f5e70; font-size: 14px; font-weight: 600; }
.profile-details dd small { display: block; margin-top: 5px; font-size: .86em; font-weight: 500; line-height: 1.65; }
.profile-name-origin { margin: 0 0 22px; padding: 18px 21px; border-left: 4px solid var(--gold); background: linear-gradient(105deg,#fff,#f8f6f0); box-shadow: 0 12px 30px rgba(74,52,37,.07); }
.profile-name-origin p { margin: 0; color: #4a3425; font-size: 18px; font-weight: 800; }
.profile-name-origin p span { color: #a9853f; font-size: 2.25em; line-height: .8; vertical-align: -.12em; }
.profile-name-origin small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.message-band { padding: 76px 0; color: #fff; background: var(--navy-deep); }
.message-band .container { display: grid; grid-template-columns: minmax(0,.95fr) minmax(340px,.72fr); gap: clamp(52px,7vw,110px); align-items: center; }
.message-band-copy { min-width: 0; }
.message-band-body { display: grid; gap: 20px; margin-top: 30px; }
.message-band h2 { margin: 0; color: #fff; font-size: clamp(30px,3vw,42px); line-height: 1.55; text-wrap: balance; word-break: auto-phrase; }
.message-band p { margin: 0; color: rgba(255,255,255,.72); }
.message-photo-swap { min-height: 480px; aspect-ratio: 4 / 5; margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 4px 38px 4px 4px; background: #f9f7f8; box-shadow: 0 24px 60px rgba(3,19,35,.26); outline: none; }
.message-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; transition: opacity .42s ease,transform .55s ease; }
.message-photo-rest { opacity: 1; transform: scale(1); }
.message-photo-dialogue { opacity: 0; transform: scale(1.025); }
.message-photo-swap:hover .message-photo-rest,.message-photo-swap:focus .message-photo-rest { opacity: 0; transform: scale(1.025); }
.message-photo-swap:hover .message-photo-dialogue,.message-photo-swap:focus .message-photo-dialogue { opacity: 1; transform: scale(1); }
.message-photo-swap:focus-visible { box-shadow: 0 0 0 4px var(--gold-bright),0 24px 60px rgba(3,19,35,.26); }
.qa-list { display: grid; gap: 18px; margin-top: 40px; }
.qa-item { padding: 30px; display: block; border: 1px solid var(--line); border-radius: 4px 26px 4px 4px; background: #fff; }
.qa-illustration { width: 78px; height: 78px; overflow: hidden; border: 2px solid var(--gold-bright); border-radius: 50%; background: var(--gold-pale); }
.qa-illustration img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.qa-item small { color: var(--wine); font: 800 10px/1.5 "Montserrat",sans-serif; letter-spacing: .15em; }
.qa-item h3 { margin: 4px 0 9px; color: var(--navy); font-size: 23px; }
.qa-item p { margin: 0; color: var(--muted); font-size: 14px; }
.qa-question { margin-bottom: 20px; }
.qa-answer { display: grid; grid-template-columns: 78px 1fr; gap: 22px; align-items: start; }
.qa-answer .answer-bubble { padding: 21px 24px; }
.current-work { margin-top: 34px; }
.current-work .answer-bubble { margin-top: 12px; }
.current-work .work-note { margin-top: 8px; font-size: 12px; }
.personal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 38px; }
.personal-gallery { grid-template-columns: repeat(3,1fr); }
.personal-card { min-height: 430px; padding: 25px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 4px 30px 4px 4px; background: #fff; }
.personal-card img { width: 100%; height: 320px; object-fit: contain; background: linear-gradient(145deg,var(--sky),#fff); }
.personal-card h3 { margin: 18px 0 0; color: var(--navy); }
.personal-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.profile-origin { margin-top: 28px; padding: 30px 34px; border-left: 4px solid var(--gold); background: #fff; box-shadow: 0 14px 36px rgba(24,53,87,.06); }
.profile-origin h3 { margin: 4px 0 8px; color: var(--navy); font-size: 24px; }
.profile-origin p:last-child { margin: 0; color: var(--muted); }
.candidate-name { color: var(--name-gold); font-family: "Noto Sans JP",sans-serif; font-weight: 800; }
.principles-intro { max-width: 980px; }
.principles-intro h2 { font-size: clamp(39px,4.8vw,62px); line-height: 1.45; }
.big-quote { margin: 0; color: var(--navy); font-family: "Noto Serif JP",serif; font-size: clamp(39px,5vw,70px); font-weight: 700; line-height: 1.55; letter-spacing: -.04em; }
.big-quote em { color: var(--wine); font-style: normal; }
.big-quote strong { color: var(--gold); font-size: 1.23em; }
.feature-list { margin: 25px 0 0; padding: 0; list-style: none; }
.feature-list li { padding: 14px 0 14px 25px; position: relative; border-bottom: 1px solid var(--line); color: #536273; }
.feature-list li::before { content: ""; width: 8px; height: 8px; position: absolute; left: 2px; top: 25px; border-radius: 50%; background: var(--gold); }
.method-flow { margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; list-style: none; }
.method-flow.four { grid-template-columns: repeat(4,1fr); }
.method-flow li { min-height: 210px; padding: 21px 15px; position: relative; border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; background: #fff; }
.method-flow li:nth-child(even) { background: var(--sky); }
.method-flow li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -7px; top: 62px; width: 8px; height: 8px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }
.method-flow i { color: var(--navy); font-size: 32px; }
.method-flow b { display: block; margin-top: 20px; color: var(--navy); font-size: 17px; line-height: 1.5; }
.method-flow span { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.regional-photo { min-height: 450px; position: relative; overflow: hidden; border-radius: 4px 38px 4px 4px; background: var(--sky); }
.regional-photo img { width: 100%; height: 450px; object-fit: cover; }
.regional-photo::after { content: "品川区の街の風景"; position: absolute; left: 20px; bottom: 18px; padding: 6px 11px; color: #fff; background: rgba(16,39,65,.78); font-size: 10px; font-weight: 700; }
.declaration-portrait { min-height: 520px; background: linear-gradient(145deg,#f8f6f0,#fff); }
.declaration-portrait img { height: 520px; object-fit: contain; object-position: center bottom; }
.declaration-portrait::after { content: none; }
.timeline-list { max-width: 900px; margin: 45px auto 0; padding: 0; list-style: none; }
.timeline-list li { padding: 0 0 50px 80px; position: relative; border-left: 1px solid rgba(189,145,71,.55); }
.timeline-list li::before { content: ""; width: 18px; height: 18px; position: absolute; left: -10px; top: 4px; border: 5px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.timeline-list time { color: var(--wine); font: 800 10px/1.5 "Montserrat",sans-serif; letter-spacing: .12em; }
.timeline-list h3 { margin: 7px 0; color: var(--navy); font-size: 29px; }
.timeline-list p { margin: 0; color: var(--muted); }
.topic-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
.topic-card { padding: 26px; border: 1px solid var(--line); border-radius: 4px 24px 4px 4px; background: #fff; }
.topic-card i { min-height: 46px; display: inline-flex; align-items: center; color: var(--gold); font-size: 38px; }
.topic-card h3 { margin: 17px 0 7px; color: var(--navy); }
.topic-card p { margin: 0; color: var(--muted); font-size: 13px; }
.voice-sample blockquote { margin: 18px 0; color: var(--navy); font-family: "Noto Serif JP",serif; font-size: 18px; font-weight: 600; }
.tag { display: inline-flex; padding: 4px 10px; color: var(--wine); background: #faedf0; border-radius: 99px; font-size: 10px; font-weight: 800; }
.voice-data-section { overflow: hidden; }
.voice-data-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.voice-slider-controls { display: flex; gap: 10px; flex: none; }
.voice-slider-arrow { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; color: var(--navy); border: 1px solid rgba(24,53,87,.25); border-radius: 50%; background: #fff; cursor: pointer; transition: color .2s,background .2s,transform .2s; }
.voice-slider-arrow:hover,.voice-slider-arrow:focus-visible { color: #fff; background: var(--navy); transform: translateY(-2px); }
.voice-data-slider { margin-top: 38px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(355px,430px); gap: 22px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; padding: 0 0 18px; }
.voice-data-card { min-height: 480px; scroll-snap-align: start; display: flex; flex-direction: column; }
.voice-data-card::before { content: "“"; margin: 15px 0 -19px auto; color: var(--gold-pale); font: 700 98px/1 "Noto Serif JP",serif; }
.voice-source { margin: 17px 0 0; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.voice-data-card blockquote { margin: 14px 0 23px; color: var(--navy-deep); font-family: "Noto Serif JP",serif; font-size: 19px; font-weight: 700; line-height: 1.9; }
.voice-follow { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.voice-follow small { color: var(--wine); font-size: 10px; font-weight: 800; }
.voice-follow p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.voice-post-link { margin-top: 20px; align-self: flex-start; color: var(--navy); border-bottom: 1px solid var(--navy); font-size: 11px; font-weight: 800; }
.voice-data-note { margin: 15px 0 0; color: var(--muted); font-size: 11px; }
.instagram-account-link { margin-top: 20px; }
.page-cta { padding: 84px 0; position: relative; overflow: hidden; background: linear-gradient(115deg,var(--gold-pale),#fff 58%,var(--sky)); }
.page-cta-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: center; }
.page-cta h2 { margin: 0; color: var(--navy-deep); font-size: clamp(32px,4vw,50px); line-height: 1.5; }
.page-cta p { color: var(--muted); }
.page-cta .button { color: #fff; background: var(--wine); }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.filter-button { min-height: 43px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; color: var(--navy); background: #fff; font-size: 12px; font-weight: 800; }
.filter-button.active { color: #fff; border-color: var(--navy); background: var(--navy); }
.report-card.is-filtered-out { display: none; }
.report-list-page .report-grid { margin-top: 38px; }
.report-placeholder { height: 100%; display: grid; place-items: center; color: var(--navy); background: linear-gradient(145deg,var(--sky),var(--gold-pale)); text-align: center; }
.report-placeholder i { display: block; margin-bottom: 9px; font-size: 34px; }
.report-placeholder span { position: static; padding: 0; color: var(--navy); background: none; font-family: "Noto Sans JP",sans-serif; font-size: 12px; letter-spacing: .03em; }
.report-card .report-body p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.contact-types .info-card { min-height: 230px; }
.contact-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.contact-social { display: flex; gap: 10px; margin-top: 22px; }
.contact-social a { width: 48px; height: 48px; display: grid; place-items: center; color: var(--navy); border: 1px solid rgba(24,53,87,.25); border-radius: 50%; font-size: 20px; }
.form-card { padding: 38px; border: 1px solid var(--line); border-radius: 4px 32px 4px 4px; background: #fff; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 7px; color: var(--navy); font-size: 13px; font-weight: 800; }
.required { margin-left: 5px; color: var(--wine); font-size: 9px; }
.form-field input:not([type="checkbox"]),.form-field select,.form-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: #fbfdfe; font: inherit; font-size: 14px; }
.form-field textarea { min-height: 180px; resize: vertical; }
.form-note { padding: 17px 19px; color: #596677; border-left: 3px solid var(--gold); background: var(--gold-pale); font-size: 12px; }
.legal-copy { max-width: 900px; margin-inline: auto; }
.legal-copy > h2 { margin-top: 58px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 25px; }
.legal-copy p,.legal-copy li { color: #536273; font-size: 14px; }
.legal-copy li + li { margin-top: 6px; }

@media (max-width: 1100px) {
  .card-grid.four { grid-template-columns: 1fr 1fr; }
  .method-flow { grid-template-columns: repeat(3,1fr); }
  .method-flow li:nth-child(3n)::after { display: none; }
}
@media (max-width: 900px) {
  .subpage-main { padding-top: 72px; }
  .page-hero { min-height: 360px; }
  .sub-grid,.message-band .container,.page-cta-grid,.contact-layout { grid-template-columns: 1fr; }
  .message-band .container { gap: 38px; }
  .message-photo-swap { width: min(100%,520px); min-height: 0; justify-self: center; }
  .card-grid,.topic-grid { grid-template-columns: 1fr 1fr; }
  .profile-panel { min-height: 520px; }
  .method-flow.four { grid-template-columns: 1fr 1fr; }
  .method-flow.four li:nth-child(even)::after { display: none; }
  .voice-data-head { align-items: start; }
}
@media (max-width: 620px) {
  .page-hero { min-height: 330px; }
  .page-hero .lead { font-size: 16px; }
  .page-hero h1 { font-size: clamp(32px,9vw,44px); word-break: keep-all; overflow-wrap: normal; }
  .breadcrumbs ol { width: min(calc(100% - 36px),1180px); }
  .sub-section { padding: 74px 0; }
  .card-grid,.card-grid.four,.topic-grid,.personal-grid { grid-template-columns: 1fr; }
  .info-card { min-height: auto; padding: 24px 21px; }
  .profile-panel { width: 100%; min-height: 0; aspect-ratio: 1; border-radius: 4px 28px 4px 4px; }
  .profile-panel::before { width: 78%; height: auto; aspect-ratio: 1; bottom: -8%; }
  .profile-panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% top; filter: none; }
  .message-band { padding: 58px 0; }
  .message-band-body { margin-top: 22px; gap: 16px; }
  .message-photo-swap { width: 100%; aspect-ratio: 4 / 5; border-radius: 4px 28px 4px 4px; }
  .qa-item { padding: 22px 18px; }
  .qa-question { margin-bottom: 16px; }
  .qa-answer { grid-template-columns: 58px 1fr; gap: 14px; }
  .qa-illustration { width: 58px; height: 58px; }
  .qa-item h3 { font-size: 19px; }
  .qa-answer .answer-bubble { padding: 16px; }
  .personal-gallery { grid-template-columns: 1fr; }
  .profile-origin { padding: 24px 21px; }
  .profile-origin h3 { font-size: 21px; }
  .principles-intro h2 { font-size: 32px; }
  .method-flow { grid-template-columns: 1fr 1fr; }
  .method-flow li:nth-child(3n)::after { display: block; }
  .method-flow li:nth-child(even)::after { display: none; }
  .timeline-list li { padding-left: 40px; }
  .form-card { padding: 25px 19px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .voice-data-head { display: block; }
  .voice-slider-controls { margin-top: 20px; }
  .voice-data-slider { grid-auto-columns: minmax(285px,88vw); }
  .voice-data-card { min-height: 450px; }

  /* Primary mobile copy remains comfortably readable; metadata stays compact. */
  .about-copy > .lead,
  .story-heading > p,
  .story-card strong,
  .story-card p,
  .vision-copy > p:not(.vision-overline),
  .principles strong,
  .phase-card > p:last-child,
  .voice-copy > p:first-child,
  .section-intro > p:not(.page-kicker),
  .sub-copy > p,
  .info-card p,
  .profile-details dd,
  .message-band p,
  .qa-item p,
  .personal-card p,
  .feature-list li,
  .timeline-list p,
  .topic-card p,
  .voice-data-card blockquote,
  .voice-follow p,
  .report-card .report-body p,
  .page-cta p,
  .legal-copy p,
  .legal-copy li,
  .form-field input:not([type="checkbox"]),
  .form-field select,
  .form-field textarea { font-size: 16px; }
  .about-facts dd,.method-flow b { font-size: 16px; }
  .draft-note,.voice-data-note,.voice-source,.form-note,.process-list small,.method-flow span,.principles small { font-size: 13px; }

  /* Phrase-based lines prevent isolated one- or two-character wraps. */
  .section-intro h2,.sub-copy h2,.message-band h2,.page-cta h2 {
    font-size: 28px;
    line-height: 1.55;
    word-break: auto-phrase;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .mobile-br { display: block; }
  .mobile-line { display: inline-block; white-space: nowrap; }
  .desktop-break { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .message-photo { transition: none; }
}

/* 2026-09-18 client revision: face/name priority and metallic-white brand system. */
@media (min-width: 901px) {
  .page-hero { min-height: 280px; }
  .hero { height: 100svh; min-height: 680px; max-height: 920px; grid-template-columns: minmax(520px,.9fr) minmax(560px,1.1fr); background: linear-gradient(118deg,#fff 0 46%,#f8f6f0 46% 72%,#fff 72%); }
  .hero::before { width: 58vw; height: 100%; min-width: 0; min-height: 0; right: -8vw; top: 0; border-radius: 0; clip-path: polygon(35% 0,100% 0,100% 100%,0 100%,29% 56%,8% 42%); background: linear-gradient(137deg,rgba(255,255,255,.96) 0 28%,rgba(243,231,195,.82) 28% 29.2%,rgba(255,255,255,.96) 29.4% 48%,rgba(220,197,138,.58) 48% 49.4%,rgba(248,246,240,.94) 49.6% 70%,rgba(169,133,63,.22) 70% 71.2%,#fff 71.4%); opacity: 1; }
  .hero::after { color: rgba(74,52,37,.026); }
  .hero-lines { left: 28%; bottom: -34%; width: 78vw; height: 48vw; border-width: 3px; border-color: rgba(201,168,91,.28); transform: rotate(-13deg); }
  .hero-copy { padding-top: 94px; padding-bottom: 26px; }
  .hero-candidate-name { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(48px,4.25vw,68px); line-height: 1.08; }
  .hero-sub { margin-top: 13px; font-family: "Noto Sans JP",sans-serif; font-size: clamp(20px,1.7vw,27px); font-weight: 600; }
  .hero-lead { margin-top: 13px; font-size: 13px; line-height: 1.7; opacity: .82; }
  .hero-actions { margin-top: 20px; }
  .hero-social { margin-top: 14px; }
  .hero-halo { display: none; }
  .hero-portrait > img { height: 91%; max-height: 91%; max-width: 100%; margin-bottom: 0; }
  .about { padding: 84px 0; }
  .about::before { width: 23%; height: 58%; top: 23%; background: linear-gradient(145deg,#f8f6f0,#eee8da); }
  .profile-summary { padding-top: 76px; padding-bottom: 82px; }
  .profile-summary .sub-grid { grid-template-columns: .72fr 1.28fr; gap: clamp(42px,5vw,74px); align-items: start; }
  .profile-summary .profile-panel { min-height: 500px; max-height: 600px; }
  .profile-summary .profile-panel img { height: 88%; align-self: end; object-fit: contain; }
  .profile-details div { grid-template-columns: 120px 1fr; padding: 10px 0; }
  .profile-details dt,.profile-details dd { font-size: 14px; }
  .qa-illustration { width: 112px; height: 112px; }
  .qa-answer { grid-template-columns: 112px 1fr; }
}

@media (max-width: 620px) {
  .hero { min-height: 680px; background: linear-gradient(123deg,#fff 0 54%,#f8f6f0 54% 77%,#fff 77%); }
  .hero-copy { padding-top: 42px; padding-bottom: 22px; }
  .hero-candidate-name { width: 64%; margin-bottom: 16px; position: relative; z-index: 8; text-shadow: 0 1px #fff,0 0 10px rgba(255,255,255,.95); }
  .hero-candidate-name span { margin-left: 2px; font-size: 9px; }
  .hero-candidate-name strong { font-size: clamp(42px,12vw,54px); line-height: 1.08; letter-spacing: .04em; }
  .hero h1 { width: 58%; font-size: clamp(40px,11vw,50px); }
  .hero-sub { width: 64%; white-space: normal; font-family: "Noto Sans JP",sans-serif; font-size: 17px; font-weight: 600; }
  .hero-lead { width: 64%; font-size: 12px; }
  .hero-actions { margin-top: 18px; }
  .hero-mobile-portrait { width: min(57vw,285px); height: 390px; }
  .hero-social { margin-top: 14px; }
  .about { padding: 66px 0; }
  .about::before { height: 38%; top: 18%; background: linear-gradient(145deg,#f8f6f0,#eee8da); }
  .handwritten-wide { margin: 20px 0 18px; }
  .about-profile-link { font-size: 18px; }
  .page-hero { min-height: 220px; }
  .profile-summary { padding-top: 56px; }
  .profile-summary .sub-grid { gap: 32px; }
  .profile-summary .profile-panel { width: 82%; margin-inline: auto; aspect-ratio: 4 / 5; }
  .profile-summary .profile-panel img { object-fit: contain; object-position: center bottom; }
  .profile-name-origin p { font-size: 16px; }
  .profile-details div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .profile-details dt,.profile-details dd { font-size: 16px; }
  .personal-gallery { gap: 16px; }
  .personal-card { min-height: 0; padding: 18px; }
  .personal-card img { height: 250px; }
  .qa-answer { grid-template-columns: 82px 1fr; }
  .qa-illustration { width: 82px; height: 82px; }
}

/* 2026-09-24 client revision: sharpen the metallic hero and keep personal photos subordinate. */
@media (min-width: 901px) {
  .hero {
    isolation: isolate;
    background:
      linear-gradient(118deg, #fff 0 44%, #fbfaf7 44% 62%, #fff 62% 100%);
  }
  .hero::before {
    right: -3vw;
    width: 66vw;
    clip-path: polygon(31% 0,100% 0,100% 100%,0 100%,20% 67%,5% 52%,25% 44%,12% 29%);
    background:
      linear-gradient(132deg, transparent 0 20%, rgba(255,255,255,.98) 20.2% 33%, transparent 33.3%),
      linear-gradient(133deg, transparent 0 42%, rgba(205,173,99,.72) 42.2% 42.8%, rgba(255,255,255,.98) 43% 57%, transparent 57.3%),
      linear-gradient(134deg, transparent 0 64%, rgba(236,224,193,.92) 64.2% 76%, transparent 76.3%),
      linear-gradient(136deg, #fff 0 28%, #f5f2ea 28.4% 57%, #fff 57.4% 100%);
  }
  .hero-lines {
    display: block;
    left: 35%;
    right: -8%;
    bottom: 0;
    width: auto;
    height: 100%;
    border: 0;
    border-radius: 0;
    transform: none;
    clip-path: polygon(0 88%,100% 8%,100% 36%,18% 100%,0 100%);
    background:
      linear-gradient(145deg, transparent 0 45%, rgba(255,255,255,.96) 45.2% 51%, rgba(202,166,82,.48) 51.2% 51.7%, rgba(255,255,255,.88) 52% 63%, transparent 63.3%);
    opacity: .9;
  }
  .hero-lines::before,
  .hero-lines::after {
    content: "";
    position: absolute;
    border: 0;
    border-radius: 0;
    inset: auto;
    transform-origin: right center;
  }
  .hero-lines::before {
    right: -4%;
    bottom: 18%;
    width: 84%;
    height: 3px;
    background: linear-gradient(90deg,transparent,rgba(201,167,90,.72) 38%,rgba(255,255,255,.98));
    transform: rotate(-30deg);
  }
  .hero-lines::after {
    right: 3%;
    bottom: 6%;
    width: 62%;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(190,151,65,.58),rgba(255,255,255,.96));
    transform: rotate(-28deg);
  }
}

.profile-page .sky .section-intro {
  max-width: 900px;
  margin-bottom: 28px;
}
.profile-page .personal-gallery {
  gap: 14px;
}
.profile-page .personal-card {
  min-height: 0;
  padding: 14px;
  border-radius: 4px 22px 4px 4px;
}
.profile-page .personal-card img {
  height: 190px;
  object-fit: cover;
  object-position: center 34%;
}
.profile-page .personal-card h3 {
  margin-top: 12px;
  font-size: 16px;
}
.profile-page .personal-card p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.7;
}
.profile-page .personal-story {
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  align-items: center;
  gap: clamp(48px,7vw,110px);
}
.profile-page .personal-story .section-intro {
  max-width: 760px;
  margin-bottom: 0;
}
.profile-page .personal-memories {
  position: relative;
  width: 390px;
  height: 370px;
  margin: 0 0 0 auto;
}
.profile-page .personal-memory-main {
  display: block;
  width: 238px;
  height: 304px;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 3px 28px 3px 3px;
  box-shadow: 0 18px 45px rgba(11,42,73,.13);
}
.profile-page .personal-memory-sub {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 132px;
  height: 150px;
  object-fit: cover;
  object-position: center 26%;
  border: 7px solid var(--sky);
  border-radius: 2px 18px 2px 2px;
  box-shadow: 0 12px 28px rgba(11,42,73,.12);
}
.profile-page .personal-memory-third {
  position: absolute;
  right: 0;
  top: 34px;
  width: 166px;
  height: 126px;
  object-fit: cover;
  object-position: center;
  border: 7px solid var(--sky);
  border-radius: 2px 18px 2px 2px;
  box-shadow: 0 12px 28px rgba(11,42,73,.12);
}

@media (max-width: 620px) {
  .hero {
    isolation: isolate;
    background:
      linear-gradient(126deg,#fff 0 50%,#faf8f2 50.3% 73%,#fff 73.3% 100%);
  }
  .hero-copy { position: relative; }
  .hero-copy > .hero-candidate-name { position: relative; z-index: 9; }
  .hero-copy > h1,
  .hero-copy > .hero-sub,
  .hero-copy > .hero-lead { position: relative; z-index: 8; }
  .hero-copy > .hero-actions { position: relative; z-index: 5; }
  .hero-copy > .hero-social { position: relative; z-index: 8; }
  .hero-candidate-name strong {
    text-shadow: 0 1px 0 #fff, 0 0 5px #fff, 0 0 14px rgba(255,255,255,.96);
  }
  .hero::after {
    color: rgba(74,52,37,.022);
  }
  .hero-copy::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 72px -22vw 0 36%;
    pointer-events: none;
    clip-path: polygon(35% 0,100% 0,100% 100%,0 100%,22% 70%,7% 55%,27% 41%,14% 24%);
    background:
      linear-gradient(137deg,transparent 0 35%,rgba(205,173,99,.46) 35.2% 36%,rgba(255,255,255,.95) 36.2% 60%,transparent 60.2%),
      linear-gradient(139deg,rgba(255,255,255,.95),rgba(242,234,214,.78) 49%,rgba(255,255,255,.96));
  }
  .profile-page .sky .section-intro {
    margin-bottom: 20px;
  }
  .profile-page .personal-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .profile-page .personal-card {
    display: grid;
    grid-template-columns: 98px minmax(0,1fr);
    grid-template-rows: auto 1fr;
    column-gap: 13px;
    row-gap: 2px;
    padding: 11px;
  }
  .profile-page .personal-card img {
    grid-row: 1 / span 2;
    width: 98px;
    height: 116px;
    object-fit: cover;
    object-position: center 30%;
  }
  .profile-page .personal-card h3 {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .profile-page .personal-card p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.65;
  }
  .profile-page .personal-story {
    display: block;
  }
  .profile-page .personal-memories {
    width: 276px;
    height: 258px;
    margin: 26px auto 0;
  }
  .profile-page .personal-memory-main {
    width: 164px;
    height: 208px;
    border-radius: 3px 22px 3px 3px;
  }
  .profile-page .personal-memory-sub {
    right: 4px;
    width: 92px;
    height: 102px;
    border-width: 5px;
  }
  .profile-page .personal-memory-third {
    top: 23px;
    width: 118px;
    height: 88px;
    border-width: 5px;
  }
}

/* 2026-09-25 client revision: a single forward-moving light and a direct profile path. */
@media (min-width: 901px) {
  .hero {
    background:
      linear-gradient(132deg, transparent 0 47%, rgba(196,153,62,.12) 47.3% 55%, transparent 55.3%),
      linear-gradient(118deg, #fff 0 46%, #faf8f2 46.2% 70%, #fff 70.3% 100%);
  }
  .hero::before {
    inset: -18% -12% -22% 38%;
    width: auto;
    height: auto;
    clip-path: none;
    border-radius: 0;
    background:
      linear-gradient(132deg,
        transparent 0 28%,
        rgba(255,255,255,.98) 34%,
        rgba(229,207,151,.88) 43%,
        rgba(255,255,255,.98) 51%,
        rgba(190,143,43,.42) 58%,
        rgba(255,255,255,.94) 65%,
        transparent 76%);
    opacity: .98;
    transform: skewX(-8deg);
    transform-origin: center;
  }
  .hero-lines {
    display: block;
    inset: -12% -18% -14% 43%;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background:
      linear-gradient(132deg,
        transparent 0 41%,
        rgba(255,255,255,.92) 45%,
        rgba(209,171,85,.52) 49%,
        rgba(255,255,255,.96) 53%,
        transparent 61%);
    opacity: .88;
    transform: skewX(-8deg);
  }
  .hero-lines::before,
  .hero-lines::after { content: none; }
  .hero-candidate-name span {
    margin-bottom: 7px;
    color: #4a3425;
    font-size: clamp(22px,1.8vw,30px);
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .24em;
  }
  .hero-lead {
    max-width: none;
    color: var(--navy-deep);
    font-size: clamp(22px,1.85vw,30px);
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: .02em;
    opacity: 1;
  }
  .about {
    padding: 48px 0 72px;
  }
  .handwritten-wide {
    margin-top: 0;
  }
}

.about-profile-link,
.text-link.about-profile-link {
  width: min(100%,760px);
  min-height: 76px;
  margin: 20px 0 0 auto;
  padding: 0 28px;
  justify-content: space-between;
  border: 0;
  border-radius: 2px 28px 2px 2px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 14px 30px rgba(24,53,87,.16);
  font-size: clamp(20px,2vw,27px);
  letter-spacing: .04em;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.about { scroll-margin-top: 82px; }
.text-link.about-profile-link i { color: var(--gold-bright); }
.text-link.about-profile-link:hover {
  color: #fff;
  background: #20476f;
  box-shadow: 0 18px 38px rgba(24,53,87,.22);
  transform: translateY(-2px);
}

@media (max-width: 620px) {
  .hero {
    background:
      linear-gradient(132deg, transparent 0 45%, rgba(203,161,68,.12) 45.4% 58%, transparent 58.4%),
      linear-gradient(126deg,#fff 0 49%,#faf8f2 49.3% 72%,#fff 72.4% 100%);
  }
  .hero-copy::before {
    inset: 40px -46vw -8% 31%;
    clip-path: none;
    background:
      linear-gradient(132deg,
        transparent 0 28%,
        rgba(255,255,255,.96) 36%,
        rgba(218,184,105,.62) 47%,
        rgba(255,255,255,.97) 56%,
        transparent 70%);
    transform: skewX(-7deg);
    opacity: .9;
  }
  .hero-candidate-name span {
    margin-bottom: 5px;
    color: #4a3425;
    font-size: clamp(18px,5.4vw,22px);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: .2em;
  }
  .hero-lead {
    width: 68%;
    color: var(--navy-deep);
    font-size: clamp(18px,5.2vw,22px);
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: .01em;
    text-shadow: 0 1px 0 #fff,0 0 6px #fff,0 0 14px rgba(255,255,255,.98);
  }
  .about {
    padding: 34px 0 54px;
    scroll-margin-top: 72px;
  }
  .handwritten-wide {
    margin-top: 0;
  }
  .about-profile-link,
  .text-link.about-profile-link {
    width: 100%;
    min-height: 64px;
    margin-top: 14px;
    padding: 0 20px;
    border-radius: 2px 22px 2px 2px;
    font-size: 19px;
  }
}

/* Final cascade for the 2026-10-13 client revisions. */
.handwritten-wide { position: relative; }
.about-simple::after { content: ""; position: absolute; z-index: 0; inset: -18% -10% -14%; background: url("../images/hero-champagne-light-alt.jpg") center 54% / cover no-repeat; opacity: .34; pointer-events: none; }
.about-simple > * { position: relative; z-index: 1; }
.profile-summary { padding-top: 56px; padding-bottom: 68px; }
.profile-summary .sub-grid { align-items: start; }
.profile-summary .profile-panel { min-height: 510px; }
.profile-summary .profile-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.profile-name-origin { margin-bottom: 12px; }
.profile-name-origin p { font-size: clamp(23px,2.15vw,31px); line-height: 1.75; }
.profile-name-origin p span { display: inline-block; color: #9e7431; font-family: "Yuji Syuku","Noto Serif JP",serif; font-size: 2.55em; line-height: .55; vertical-align: -.16em; }
.profile-name-origin small { margin-top: 13px; color: #171717; font-size: 17px; font-weight: 700; line-height: 1.8; }
.profile-summary .profile-details { margin-top: 18px; }
.profile-summary .profile-details div { padding: 14px 0; }
.profile-summary .profile-details dt { font-size: 12px; }
.profile-summary .profile-details dd { font-size: 16px; line-height: 1.75; }
.profile-page .personal-story { grid-template-columns: minmax(0,1fr) 390px; align-items: start; }
.profile-page .personal-story .section-intro { max-width: none; }
.profile-page .personal-story .section-intro h2 { font-size: clamp(34px,4vw,56px); }
.personal-age,.career-age { color: inherit; font-size: .55em; white-space: nowrap; }
.personal-lead { margin: 22px 0 0; color: var(--navy); font-size: 19px; line-height: 1.9; font-weight: 800; }
.personal-copy { margin-top: 24px; }
.personal-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.personal-copy p + p { margin-top: 18px; }
.profile-page .personal-memories { width: 390px; height: 465px; }
.profile-page .personal-memories figure { margin: 0; }
.profile-page .personal-memory-main { width: 242px; height: auto; }
.profile-page .personal-memory-main img { width: 242px; height: 312px; display: block; object-fit: cover; object-position: center 25%; border-radius: 3px 28px 3px 3px; box-shadow: 0 18px 45px rgba(11,42,73,.13); }
.profile-page .personal-memory-main figcaption { width: 242px; padding-top: 10px; color: var(--navy); font-size: 11px; line-height: 1.6; font-weight: 700; }
.profile-page .personal-memory-sub,.profile-page .personal-memory-third { overflow: hidden; }
.profile-page .personal-memory-sub img,.profile-page .personal-memory-third img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-page .personal-memory-sub img { object-position: center 24%; }
.career-personal .container { grid-template-columns: minmax(0,.8fr) minmax(460px,1.2fr); align-items: start; }
.career-personal .section-label { margin-bottom: 18px; }
.career-map { margin: 0; padding: 4px 0 0; list-style: none; counter-reset: career; }
.career-map li { min-height: 96px; position: relative; display: grid; grid-template-columns: minmax(170px,.8fr) minmax(140px,.65fr) minmax(210px,1fr); gap: 18px; align-items: center; padding: 17px 18px 17px 54px; border-bottom: 1px solid rgba(255,255,255,.2); }
.career-map li::before { counter-increment: career; content: counter(career,decimal-leading-zero); position: absolute; left: 0; color: var(--gold-bright); font: 800 21px/1 "Montserrat",sans-serif; }
.career-map b { color: #fff; font-size: 14px; line-height: 1.65; }
.career-map span { color: var(--gold-bright); font-size: 13px; font-weight: 800; }
.career-map small { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }
.approach-qa-section .qa-list { max-width: 980px; }
.experience-relocated { padding-top: 76px; }
.experience-relocated .section-intro h2 { margin: 0; color: var(--navy); font-size: clamp(34px,4vw,54px); line-height: 1.5; }
.experience-relocated .section-intro h2 em { color: var(--wine); font-style: normal; }
@media (min-width: 901px) {
  .fv-image-variant .hero-copy { align-self: start; padding-top: clamp(52px,6.5vh,78px); }
  .fv-image-variant .hero-candidate-name { margin-bottom: 20px; }
  .fv-image-variant .hero-candidate-name strong { width: max-content; padding: .02em .12em .08em; margin-left: -.12em; font-size: clamp(78px,7.1vw,112px); letter-spacing: .08em; text-shadow: 0 0 2px #fff,0 0 7px #fff,0 0 14px #fff,0 4px 18px rgba(56,37,22,.18); }
  .fv-image-variant .hero-candidate-name span { font-size: clamp(24px,1.9vw,31px); }
}
@media (max-width: 900px) { .career-personal .container { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .profile-summary { padding-top: 42px; padding-bottom: 54px; }
  .profile-summary .profile-panel { width: 88%; aspect-ratio: 4 / 5; min-height: 0; }
  .profile-summary .profile-panel img { object-fit: cover; object-position: center 12%; }
  .profile-name-origin p { font-size: 21px; }
  .profile-name-origin small { font-size: 14px; }
  .profile-summary .profile-details dd { font-size: 15px; }
  .profile-page .personal-story { display: block; }
  .profile-page .personal-story .section-intro h2 { font-size: 31px; }
  .personal-lead { font-size: 16px; }
  .personal-copy p { font-size: 14px; line-height: 1.9; }
  .profile-page .personal-memories { width: 296px; height: 356px; }
  .profile-page .personal-memory-main { width: 184px; }
  .profile-page .personal-memory-main img { width: 184px; height: 236px; }
  .profile-page .personal-memory-main figcaption { width: 184px; font-size: 10px; }
  .profile-page .personal-memory-sub { width: 96px; height: 110px; }
  .profile-page .personal-memory-third { width: 122px; height: 92px; }
  .career-map li { grid-template-columns: 1fr; gap: 5px; padding: 17px 10px 17px 42px; }
  .experience-relocated { padding-top: 56px; }
}

/* Definitive cascade for the 2026-10-15 detail corrections. */
.profile-summary .profile-panel { overflow: hidden; }
.profile-summary .profile-panel img { width: 100%; height: 100%; align-self: stretch; object-fit: cover; object-position: center 9%; transform: scale(1.38); transform-origin: center 12%; }
.career-map { position: relative; }
.career-map::before { content: ""; position: absolute; z-index: 0; left: 17px; top: 48px; bottom: 48px; width: 2px; background: linear-gradient(180deg,rgba(217,175,84,.35),var(--gold-bright),rgba(217,175,84,.35)); }
.career-map li { z-index: 1; grid-template-columns: 64px minmax(150px,.8fr) minmax(130px,.65fr) minmax(190px,1fr); padding-left: 54px; }
.career-map li::before { left: 0; z-index: 2; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-bright); color: var(--navy); font-size: 13px; box-shadow: 0 0 0 5px var(--navy); }
.career-map .career-icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--gold-bright); font-size: 38px; }
.approach-page .breadcrumbs + .sub-section { padding-top: 48px; }
@media (max-width: 620px) {
  .profile-summary .profile-panel img { object-position: center 8%; transform: scale(1.24); transform-origin: center 10%; }
  .career-map::before { left: 16px; top: 42px; bottom: 42px; }
  .career-map li { grid-template-columns: 52px 1fr; gap: 5px 10px; padding: 18px 8px 18px 48px; }
  .career-map li::before { width: 33px; height: 33px; }
  .career-map .career-icon { grid-row: 1 / 4; width: 48px; height: 48px; font-size: 31px; }
  .career-map li > b,.career-map li > span:not(.career-icon),.career-map li > small { grid-column: 2; }
  .approach-page .breadcrumbs + .sub-section { padding-top: 36px; }
}

/* Client request: make the candidate name the dominant first-view element. */
@media (min-width: 901px) {
  .fv-image-variant .hero-copy { padding-top: 14px; }
  .fv-image-variant .hero-candidate-name { margin-bottom: 16px; }
  .fv-image-variant .hero-candidate-name strong {
    padding: .01em .13em .08em;
    font-size: clamp(92px,8.3vw,128px);
    line-height: 1;
    letter-spacing: .065em;
    background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 72%,rgba(255,255,255,0) 100%);
    -webkit-text-stroke: .7px rgba(255,255,255,.96);
    text-shadow: -2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 5px 18px rgba(56,37,22,.2);
  }
}
@media (max-width: 620px) {
  .fv-image-variant .hero-copy { padding-top: 18px; }
  .about-simple::after { inset: -6% -18% -4%; background-position: 58% center; opacity: .28; }
}