/* Optical balance: match the wordmark, not the surrounding frame. */
.brand-opening{--opening-word:min(44vw,400px)}
.brand-opening .opening-logo-exit{box-sizing:content-box;width:var(--opening-word);flex-shrink:0}
.brand-opening>.opening-object{width:var(--opening-word)}
.brand-opening .opening-logo-exit .opening-object{width:100%}
.opening-d .opening-logo-exit{width:calc(var(--opening-word) * 1.06)}
.opening-f .opening-logo-exit{padding:24px}
.opening-h .opening-logo-exit{box-sizing:border-box;width:calc(var(--opening-word) / .72);max-width:82vw;max-height:80svh}
.opening-h .opening-logo-exit .opening-object{width:72%}
.opening-i .opening-logo-exit{width:calc(var(--opening-word) / .672)}
/* Shared navigation height; per-design header signatures are styled below. */
header.u-header{position:sticky;top:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:24px;box-sizing:border-box;width:100%;height:88px;padding:16px max(32px,calc((100vw - 1200px)/2));background:#fffffff5;color:#191919;border-bottom:2px solid #191919;backdrop-filter:blur(12px)}
header.u-header .u-brand{display:flex;align-items:center;flex-shrink:0;width:112px;color:inherit;text-decoration:none}
header.u-header .u-brand svg{display:block;width:100%;height:auto}
html[data-design=i] header.u-header .u-brand{width:167px}
.u-skip{position:fixed;top:8px;left:8px;z-index:300;transform:translateY(-160%);padding:12px;background:#191919;color:#fff}
.u-skip:focus{transform:none}
header.u-header .u-menu-panel a{color:inherit;text-decoration:none}
header.u-header .u-menu-panel h2{margin-top:0}
/* Keep large graphic compositions spacious rather than edge-to-edge. */
html[data-design=c] .c-logo-stage .bloom-parallax{width:78%;max-width:860px;margin-inline:auto}
html[data-design=e] .signature-e .x-logo{width:62%;max-width:800px}
html[data-design=i] .x-hero-i .x-signature{width:min(54vw,560px)}
html[data-design=i] .x-hero-meta{justify-content:space-between;gap:24px;margin-bottom:44px}
html[data-design=i] .x-hero-copy{margin-top:44px}
/* Long labels should wrap as phrases, without forcing the other columns narrow. */
html[lang=ja] .item-en{overflow-wrap:normal;word-break:normal}
@media(max-width:740px){
 .brand-opening{--opening-word:min(54vw,220px)}
 .opening-f .opening-logo-exit{padding:18px}
 header.u-header{height:76px;padding:12px 22px;gap:16px}
 header.u-header .u-brand{width:96px}
 html[data-design=i] header.u-header .u-brand{width:143px}
 header.u-header .u-menu-panel{max-height:calc(100dvh - 76px)}
 html[data-design=c] .c-logo-stage .bloom-parallax{width:80%}
 html[data-design=e] .signature-e .x-logo{width:78%}
 html[data-design=g] .signature-g .x-logo{width:78%}
 html[data-design=i] .x-hero-i .x-signature{width:min(88%,360px)}
 html[data-design=i] .x-hero-meta{font-size:11px;margin-bottom:36px;gap:16px;text-align:left}
 html[data-design=i] .x-hero-meta span:last-child{max-width:160px;text-align:right}
 html[data-design=i] .x-hero-copy{margin-top:32px}
}

.person-role>span,.member-role>span{display:block}
.person-role,.member-role{line-height:1.65}

.person-role>span,.member-role>span{display:block}
.person-role,.member-role{line-height:1.65}

/* Keep in-page navigation continuous across every design and service page. */
html:root{scroll-behavior:smooth}
html:root.motion-off{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html:root:not(.motion-on){scroll-behavior:auto}}

.faq .a{transition:grid-template-rows .78s cubic-bezier(.4,0,.2,1)}

html:root.anchor-gliding{scroll-behavior:auto!important}

/* Keep CTA labels readable when a design inherits link colors. */
html[data-page] main :is(a,button).btn,
html[data-page] main :is(a,button).btn:visited,
html[data-page] main :is(a,button).btn:hover,
html[data-page] main :is(a,button).btn:active{background-color:#191919;color:#fff}
html[data-page] main .btn :is(span,.arrow){color:inherit}

/* Career adviser: a monochrome portrait and clear identity before the biography. */
#coach>.wrap>.label{display:block;margin-bottom:16px}
#coach>.wrap>h2{margin:0 0 36px;line-height:1.45}
#coach .coach-profile{grid-template-areas:"intro bio" "facts facts";grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:40px 56px}
#coach .coach-intro{grid-area:intro;display:grid;gap:22px;min-width:0;align-self:start}
#coach .coach-portrait{width:100%;margin:0}
#coach .coach-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1);border-radius:12px}
#coach .coach-identity{min-width:0}
#coach .coach-name{margin:0;font-size:30px;font-weight:700;line-height:1.4;letter-spacing:.02em}
#coach .coach-reading{margin:6px 0 0;font-size:12px;line-height:1.6;letter-spacing:.06em;color:#595959}
#coach .coach-role{margin:16px 0 0;font-size:14px;line-height:1.8;color:#595959}
#coach .coach-role>span{display:block}
#coach .coach-bio{grid-area:bio;min-width:0;max-width:48em}
#coach .coach-bio>p{margin:0 0 20px;line-height:1.95}
#coach .coach-bio>p:last-of-type{margin-bottom:0}
#coach .coach-facts{grid-area:facts;min-width:0;margin:0;grid-template-columns:112px minmax(0,1fr)}
@media(max-width:740px){
 #coach>.wrap>.label{margin-bottom:12px}
 #coach>.wrap>h2{margin-bottom:28px;font-size:clamp(24px,6.6vw,30px)}
 #coach .coach-profile{grid-template-areas:"intro" "bio" "facts";grid-template-columns:minmax(0,1fr);gap:28px}
 #coach .coach-intro{grid-template-columns:128px minmax(0,1fr);gap:20px;align-items:center}
 #coach .coach-name{font-size:24px}
 #coach .coach-reading{font-size:11px}
 #coach .coach-role{margin-top:12px;font-size:12px}
 #coach .coach-bio>p{margin-bottom:18px}
 #coach .coach-facts{grid-template-columns:76px minmax(0,1fr)}
}
@media(max-width:360px){
 #coach .coach-intro{grid-template-columns:108px minmax(0,1fr);gap:16px}
 #coach .coach-name{font-size:22px}
}

/* Header signatures echo each opening while keeping the wordmark equally legible. */
html[data-design] header.u-header .u-brand.header-brand{
 --header-wordmark-width:112px;
 width:auto;min-height:44px;flex-shrink:0;justify-content:flex-start;
}
header.u-header .header-mark{
 position:relative;display:flex;align-items:center;justify-content:center;
 flex-shrink:0;box-sizing:border-box;
}
header.u-header .header-wordmark{
 display:block;position:relative;flex-shrink:0;width:var(--header-wordmark-width);line-height:0;
}
header.u-header .header-wordmark svg{display:block;width:100%;height:auto}
/* B: the dark logo panel; C: the spaced typographic wordmark. */
header.u-header .header-mark-b{padding:9px 12px;background:#191919;color:#fff;border-radius:3px}
header.u-header .header-mark-c .header-wordmark{width:calc(var(--header-wordmark-width) * 1.089736)}
/* D: a small, static extrusion carries the dimensional opening into navigation. */
header.u-header .header-mark-d .header-wordmark{width:calc(var(--header-wordmark-width) * 1.022434)}
/* E: parallel rules; F: assembled planes; G: an editorial vertical rule. */
header.u-header .header-mark-e{padding:7px 9px;border-block:1.5px solid #191919}
header.u-header .header-mark-f{
 padding:8px 12px;background:#fff;border:1px solid #bcbcbc;
 box-shadow:4px 4px 0 #dedede;transform:rotate(-2deg);
}
header.u-header .header-mark-g{padding:5px 0 5px 12px;border-left:2px solid #191919}
/* H: the circular motif sits beside readable lettering; I uses the approved capsule. */
header.u-header .header-mark-h{gap:11px}
header.u-header .header-orbit{position:relative;width:32px;height:32px;border:1.5px solid #aaa;border-radius:50%;flex-shrink:0}
header.u-header .header-orbit:after{content:"";position:absolute;inset:5px;border:1.5px solid #c7c7c7;border-right-color:#191919;border-radius:50%}
header.u-header .header-mark-i .header-wordmark{width:calc(var(--header-wordmark-width) / .672)}
@media(max-width:740px){
 html[data-design] header.u-header .u-brand.header-brand{--header-wordmark-width:96px}
 header.u-header .header-mark-b{padding:8px 11px}
 header.u-header .header-mark-f{padding:8px 10px;box-shadow:3px 3px 0 #dedede}
 header.u-header .header-mark-g{padding-left:10px}
 header.u-header .header-mark-h{gap:9px}
 header.u-header .header-orbit{width:28px;height:28px}
}
/* Preserve contrast and recognizable silhouettes in Windows high-contrast mode. */
@media(forced-colors:active){
 header.u-header .header-mark-b{background:Canvas;color:CanvasText;border:1px solid CanvasText}
 header.u-header .header-mark-d .header-depth{display:none}
 header.u-header .header-mark-f{box-shadow:none;border-color:CanvasText}
 header.u-header .header-orbit,header.u-header .header-orbit:after{border-color:CanvasText}
}