:root{--navy:#092b43;--teal:#087f83;--yellow:#ffe15a;--page:#f5f5f5;--cream:#fbf8f1;--type-section:54;--type-message:48;--type-card:28;--type-statement:24;--type-lead:20;--type-body:18;--type-meta:16;--type-note:14;--hu:min(calc(100vw / 1440),1.1px)}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:calc(108*var(--hu))}
body{margin:0;background:var(--page);color:var(--navy);font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;overflow-x:hidden}
a{color:inherit}
img{display:block}
.skip-link{position:fixed;left:16px;top:-80px;z-index:40;padding:10px 16px;background:#fff;border:2px solid var(--navy);border-radius:4px;font-weight:700;text-decoration:none}
.skip-link:focus{top:16px}

/* Brand scrolls with the page; the compact navigation, ENTRY and menu remain available. */
.site-header a{text-decoration:none}
.brand{position:absolute;top:0;left:0;z-index:28;display:flex;align-items:center;gap:calc(12*var(--hu));width:calc(304*var(--hu));height:calc(100*var(--hu));padding:calc(20*var(--hu));background:#fff;border-radius:0 0 calc(20*var(--hu)) 0}
.brand img{display:block;width:calc(242*var(--hu));min-width:0;height:auto;flex:1}
.brand-caption{flex:none;font-family:Arial,sans-serif;font-size:calc(12*var(--hu));font-weight:700;line-height:1.05;letter-spacing:.08em;color:var(--navy);transform:translateY(.12em)}
.header-bar{position:fixed;left:58%;transform:translateX(-50%);top:calc(32*var(--hu));z-index:30;display:flex;align-items:center;gap:calc(20*var(--hu));width:max-content;max-width:calc(100% - 48*var(--hu));height:max(44px,calc(64*var(--hu)))}
.entry-en{font-family:Arial,sans-serif;font-weight:800;letter-spacing:.12em}
.global-nav{flex:none;display:flex;align-items:center;justify-content:center;gap:calc(40*var(--hu));height:100%;margin:0;padding:0 calc(36*var(--hu));background:#fff;border:1.5px solid var(--navy);border-radius:999px}
.global-nav a{position:relative;font-size:max(13px,calc(17*var(--hu)));font-weight:900;line-height:calc(31*var(--hu));letter-spacing:.04em;white-space:nowrap;transition:color .2s ease}
.global-nav a:hover,.global-nav a:focus-visible{color:var(--teal)}
.entry-link{flex:none;display:flex;align-items:center;justify-content:center;gap:calc(14*var(--hu));width:calc(196*var(--hu));height:100%;padding-left:calc(6*var(--hu));border:1.5px solid var(--navy);border-radius:999px;background:var(--yellow);font-size:calc(20*var(--hu));font-weight:900;line-height:1;letter-spacing:.08em;white-space:nowrap;transition:background-color .2s ease}
.entry-link-arrow{flex:none;width:calc(26*var(--hu));height:calc(15*var(--hu));overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.entry-link:hover{background:#ffea85}
.entry-link:hover .entry-link-arrow{transform:translateX(4px)}
.site-header a:focus-visible{outline:3px solid var(--teal);outline-offset:5px}

/* Shared page menu: desktop keeps the existing section navigation outside this panel. */
.menu-toggle{display:grid;place-items:center;flex:none;width:max(44px,calc(64*var(--hu)));height:100%;margin:0;padding:0;border:1.5px solid var(--navy);border-radius:50%;background:var(--navy);color:#fff;cursor:pointer}
.menu-toggle svg{width:calc(26*var(--hu));height:calc(26*var(--hu));stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}
.menu-toggle .menu-close-icon{display:none}
.menu-toggle[aria-expanded="true"] .menu-open-icon{display:none}
.menu-toggle[aria-expanded="true"] .menu-close-icon{display:block}
.menu-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.no-js .menu-toggle{display:none}
.site-menu{position:absolute;z-index:31;top:calc(100% + 14*var(--hu));right:0;width:min(440px,calc(100vw - 48px));max-height:calc(100dvh - 140*var(--hu));overflow:auto;overscroll-behavior:contain;padding:24px 28px 28px;background:var(--cream);border:1.5px solid var(--navy);border-radius:5px;box-shadow:0 18px 50px rgba(9,43,67,.14)}
.site-menu[hidden],.menu-backdrop[hidden]{display:none}
.menu-caption{margin:0 0 6px;color:var(--teal);font-size:14px;font-weight:700;letter-spacing:.08em}
.site-menu a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;padding:16px 0;border-bottom:1px solid rgba(9,43,67,.2);font-size:20px;font-weight:700;line-height:1.5;text-decoration:none}
.site-menu a:after{content:"→";flex:none;font-family:Arial,sans-serif;font-weight:400}
.site-menu a:last-child{justify-content:center;gap:20px;margin-top:24px;padding:16px;border:1.5px solid var(--navy);border-radius:999px;background:var(--yellow)}
.site-menu a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.menu-backdrop{position:fixed;inset:0;z-index:29;border:0;background:rgba(9,43,67,.18)}
.menu-open{overflow:hidden}

/* design unit: 1 design px at 1440 wide; the art scales with the width so paper edges always meet the window edges */
main{container-type:inline-size;display:block;overflow:clip}
.part{position:absolute;height:auto;pointer-events:none;user-select:none}
.cloud{position:absolute;background:#fff;border-radius:60% 55% 45% 50%;width:calc(265*var(--u));height:calc(48*var(--u))}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%;width:calc(100*var(--u));height:calc(67*var(--u));left:calc(48*var(--u));top:calc(-22*var(--u))}
.cloud:after{left:calc(117*var(--u));top:calc(-17*var(--u));width:calc(115*var(--u))}
.label{display:block;width:max-content;background:#fff;border:2px solid var(--navy);border-radius:4px;white-space:nowrap}
.eyebrow{margin:0;color:var(--teal);font-weight:700;font-size:calc(23*var(--u));line-height:1.3}

/* opening: one illustration + copy layer. Default (reduced motion / no JS) is a plain document:
   the hero art, then the company card overlapping its lower edge. .motion makes the art sticky under the scrolling copy. */
.opening{--u:calc(100cqw / 1440);--cu:min(calc(100cqw / 1440),calc(100svh / 900));--card-top:calc(850*var(--u));position:relative;height:calc(var(--card-top) + 820*var(--cu))}
/* Let the paper finish on its own illustrated contour. A rectangular stage crop cut off the lower-right curl after the zoom. */
.stage{position:relative;height:calc(900*var(--u));overflow:visible;z-index:1}
.hero-world{position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(.94);transform-origin:0 0}
.hero-cloud-a{left:calc(350*var(--u));top:calc(213*var(--u));z-index:0}
.hero-cloud-b{left:calc(1250*var(--u));top:calc(222*var(--u));transform:scale(.8);transform-origin:0 0;z-index:0}
/* Extended landscape keeps the drawing continuous beyond the right edge, throughout the shared camera move. */
.hero-bg{left:0;top:calc(-34*var(--u));width:calc(2000*var(--u));z-index:1;mask-image:url("../assets/top/background-right-extended.webp");-webkit-mask-image:url("../assets/top/background-right-extended.webp");mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.hero-land{left:calc(-5*var(--u));top:calc(133*var(--u));width:calc(405*var(--u));z-index:2}
.lead{left:calc(632*var(--u));top:calc(222*var(--u));width:calc(310*var(--u));z-index:3}
.hero-office{left:calc(1090*var(--u));top:calc(232*var(--u));width:calc(355*var(--u));z-index:4}

.opening-copy{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none}
.opening-copy>*{pointer-events:auto}
.hero{position:absolute;left:0;top:0;width:100%;height:calc(900*var(--u));pointer-events:none}
/* 390u on 16:10 screens; on wide, low windows the title rises so the third line keeps space above the window bottom */
.hero-title{position:absolute;left:calc(144*var(--u));top:min(calc(390*var(--u)),calc(100svh - 318*var(--u)));margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(18*var(--u));font-size:calc(50.4*var(--u));line-height:1;font-weight:700;letter-spacing:0;pointer-events:auto}
.hero-title .label{padding:.214em .143em}
.hero-title .label-lg{font-size:calc(60*var(--u))}
.hero-title .accent{color:var(--teal)}
/* CSS starts with the first paint; a failed script never leaves the title hidden. */
@keyframes label-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:no-preference){
  .js:not(.skip-intro) .hero-title .label{animation:label-in .64s cubic-bezier(.76,0,.18,1) backwards}
  .js:not(.skip-intro) .hero-title .label:nth-child(2){animation-delay:.16s}
  .js:not(.skip-intro) .hero-title .label:nth-child(3){animation-delay:.32s}
}
@media(max-width:1023px) and (prefers-reduced-motion:no-preference){
  .js:not(.skip-intro) .hero-title .label{animation-duration:.48s}
}

.scene-anchor{position:absolute;left:0;top:calc(var(--card-top) - 40*var(--cu));width:1px;height:1px}
/* One open editorial composition in the same illustrated landscape. The cut reading ground follows the foreground silhouette,
   leaving clean paper behind all copy without a spatial gradient. Handwriting, heading and body are never individually boxed. */
.company-card{position:absolute;isolation:isolate;left:calc(144*var(--u));top:var(--card-top);width:calc(620*var(--cu))}
.company-ground{position:absolute;left:calc(-100*var(--u));top:calc(-300*var(--u));width:calc(2000*var(--u));height:calc(1600*var(--u));z-index:2;background:var(--page);mask:url("../assets/top/company-reading-cut.svg") 0 0/100% 100% no-repeat;opacity:0;pointer-events:none}
.company-hand{width:calc(440*var(--cu));height:auto;margin:0 0 calc(30*var(--cu)) calc(-8*var(--cu));user-select:none}
.company-card .eyebrow{font-size:calc(var(--type-meta)*var(--cu));letter-spacing:.08em}
.company-title{margin:calc(20*var(--cu)) 0 0;font-size:calc(var(--type-message)*var(--cu));line-height:1.35;font-weight:700;letter-spacing:0}
.company-title span,.company-body span{display:block;white-space:nowrap}
.company-title span+span{color:var(--teal)}
.company-body{margin:calc(32*var(--cu)) 0 0;font-size:calc(var(--type-lead)*var(--cu));line-height:1.85;font-weight:500;letter-spacing:0}
.company-body .company-invitation{margin-top:calc(18*var(--cu));font-weight:700}

/* A single type system for the interview and contribution marquees. */
.marquee-track{--mu:min(calc(100cqw / 1440),calc(100svh / 800));display:flex;width:max-content;font-family:Arial,sans-serif;font-size:calc(250*var(--mu));font-weight:400;line-height:1;letter-spacing:.07em;color:transparent;-webkit-text-stroke:1.2px var(--marquee-ink,rgba(9,43,67,.55));white-space:nowrap;pointer-events:none;user-select:none;animation:marquee-loop var(--marquee-duration,80s) linear infinite paused}
.marquee-group{display:flex;gap:calc(90*var(--mu));padding-right:calc(90*var(--mu));flex:none}
.js .marquee-track{animation-play-state:running}
@keyframes marquee-loop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* A rotating lettered disc leads from the company story to the three jobs. */
.company-disc{--mu:min(calc(100cqw / 1440),calc(100svh / 800));position:relative;display:grid;place-items:center;width:calc(200*var(--mu));height:calc(200*var(--mu));margin-top:calc(56*var(--cu));border:1.2px solid var(--navy);border-radius:50%;background:var(--page);color:var(--teal);text-decoration:none}
.company-disc-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform-origin:50% 50%;animation:orbit-turn 30s linear infinite paused}
.company-disc-ring text{fill:currentColor;font-family:Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:2.2px}
.company-disc-arrow{width:calc(34*var(--mu));height:calc(46*var(--mu));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.company-disc:hover .company-disc-arrow{transform:translateY(calc(5*var(--mu)))}
.company-disc:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
.js .company-disc-ring{animation-play-state:running}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.company-disc-ring{animation:none}.company-disc-arrow{transition:none}.company-disc:hover .company-disc-arrow{transform:none}}

/* Retain the 900u shared camera push-in and natural copy scroll through one landscape. */
.motion .opening{--card-top:calc(900*var(--u));height:calc(1800*var(--u))}
.motion .stage{position:sticky;top:0}
.motion .hero-world{will-change:transform}

/* jobs: natural content height plus 96u below the cards, so the gap to the next chapter no longer depends on the viewport height */
.jobs{--u:min(calc(100cqw / 1440),calc(100svh / 800));position:relative;height:auto;min-height:0;padding-bottom:calc(96*var(--u));background:var(--page)}
.jobs-frame{position:relative;z-index:2;width:calc(1440*var(--u));margin:0 auto;padding:calc(106*var(--u)) calc(78*var(--u)) 0}
/* An editorial chapter opening: outline lettering and a printed caption, with the Japanese title on a vertical white label.
   The label stands below the hero paper's curled edge and right of the office desk, at least 18u clear of both and 30u above
   the card; it sits over the cards' link area so it never acts as part of a link. */
.jobs-head{height:calc(92*var(--u))}
.jobs-word{position:absolute;left:calc(74*var(--u));top:calc(39*var(--u));font-family:Arial,sans-serif;font-size:calc(168*var(--u));font-weight:700;line-height:1;letter-spacing:.035em;color:var(--cream);-webkit-text-stroke:1.5px var(--navy);transform:rotate(-7deg);transform-origin:30% 50%;pointer-events:none}
.jobs-caption{position:absolute;left:calc(330*var(--u));top:calc(150*var(--u));margin:0;padding:calc(7*var(--u)) calc(17*var(--u)) calc(9*var(--u));border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-size:calc(var(--type-meta)*var(--u));font-weight:900;line-height:1.25;letter-spacing:.03em;white-space:nowrap;transform:rotate(-7deg)}
.jobs-title{position:absolute;right:calc(55*var(--u));top:calc(109*var(--u));z-index:3;margin:0;padding:calc(15*var(--u)) calc(11*var(--u));writing-mode:vertical-rl;text-orientation:upright;font-size:calc(var(--type-section)*var(--u));line-height:1.05;font-weight:700;letter-spacing:.025em;white-space:nowrap;border:2px solid var(--navy);border-radius:2px;background:#fff}
.jobs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(26*var(--u));margin-top:calc(8*var(--u))}
/* each vignette stands on its own card: the image's lowest opaque row (--foot) meets the card's top line */
.job{--art:calc(262*var(--u));--row:calc(244*var(--u));position:relative;display:flex;flex-direction:column;padding-top:var(--row)}
.job[data-job="land"]{--foot:.971}
.job[data-job="energy"]{--foot:.9625}
.job[data-job="office"]{--foot:.919}
.job-img{position:absolute;left:50%;top:calc(var(--row) - var(--art) * var(--foot) + 10*var(--u));width:var(--art);height:var(--art);transform:translateX(-50%);z-index:2;pointer-events:none}
/* One row set for all three cards: title 86u (two lines only for エナジーインフラディレクター), label 30u, text 65u+, link 54u.
   Every child names its row, so 総合職 keeps the empty label row and all texts and links start on the same lines. */
.job-card{--fold:calc(28*var(--u));position:relative;isolation:isolate;flex:1;display:grid;grid-template-rows:calc(74*var(--u)) calc(30*var(--u)) minmax(calc(65*var(--u)),auto) calc(54*var(--u));row-gap:calc(12*var(--u));border:2px solid transparent;padding:calc(34*var(--u)) calc(28*var(--u)) calc(26*var(--u))}
.job-card:before{content:"";position:absolute;inset:-2px;z-index:-1;background:#fff;border:2px solid var(--navy);border-radius:4px;clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%);transition:border-color .2s ease}
.job-card:after{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--navy);clip-path:polygon(calc(100% - var(--fold)) 0,calc(100% - var(--fold)) var(--fold),100% var(--fold));pointer-events:none}
.job-name{grid-row:1;margin:0;font-size:calc(var(--type-card)*var(--u));line-height:1.18;font-weight:700;letter-spacing:.02em}
.job-name span{display:block}
.job-note{grid-row:2;display:flex;align-items:center;gap:calc(10*var(--u));margin:0;color:var(--teal);font-size:calc(var(--type-note)*var(--u));line-height:1.4;font-weight:700;letter-spacing:.02em}
.job-tag{padding:calc(3*var(--u)) calc(14*var(--u)) calc(4*var(--u));border-radius:999px;background:var(--teal);color:#fff}
.job-text{grid-row:3;margin:0;font-size:calc(var(--type-body)*var(--u));line-height:1.7;font-weight:500}
.job-text span{display:block}
/* the empty :before matches the arrow width, so the words stay centred in the pill */
.job-link{grid-row:4;display:flex;align-items:center;justify-content:space-between;padding:0 calc(26*var(--u));border:1.5px solid var(--navy);border-radius:999px;background:#fff;font-size:calc(var(--type-meta)*var(--u));line-height:1;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.job-link:before{content:"";flex:none;width:calc(26*var(--u))}
/* the illustration, the title and the whole card open the same page; the link hit area stays stable while the drawing floats */
.job-link:after{content:"";position:absolute;inset:calc(-1*var(--row) - 2px) -2px -2px;z-index:1}
.job-link .arrow{flex:none;width:calc(26*var(--u));height:calc(15*var(--u));overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.job:hover .job-card:before,.job-card:has(.job-link:focus-visible):before{border-color:var(--teal)}
.job:hover .job-link,.job-link:focus-visible{border-color:var(--teal);background:var(--teal);color:#fff}
.job:hover .job-link .arrow,.job-link:focus-visible .arrow{transform:translateX(calc(5*var(--u)))}
.job-link:focus-visible{outline:3px solid var(--teal);outline-offset:4px}

/* people: one interview at a time. A white label heads the chapter; the centre person stands on a tilted teal paper with the
   quote paper over its lower edge, the neighbours peek in from both sides. 800u frame with fixed outer space: the caption
   starts 120u below the section top (216u after the job cards), the controls end 76u above the next chapter.
   Default (no JS / script failure) is the same three cards in a plain horizontal scroller; .is-carousel turns them into a ring. */
/* The interview's own field: the same colours as the interview half of the former shared gradient, ending in the mint
   (#e4f1f0) that the contribution photograph fades in from. */
.people-social{background:linear-gradient(180deg,var(--page) 0%,#e5f2f1 48%,#e4f1f0 100%)}
.people{--u:min(calc(100cqw / 1440),calc(100svh / 800));position:relative;display:block;min-height:0;padding:calc(108*var(--u)) 0 calc(36*var(--u));overflow:clip}
.people-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--navy);stroke-width:1.1;stroke-linecap:round;opacity:.55;pointer-events:none}
.people-lines path{vector-effect:non-scaling-stroke}
.people-mobile-line{display:none}
.people-frame{position:relative;width:calc(1440*var(--u));height:calc(800*var(--u));margin:0 auto}
.people-word{position:absolute;left:calc(-220*var(--u));top:calc(488*var(--u))}
.people-head{position:absolute;left:0;right:0;top:calc(12*var(--u));z-index:2;display:flex;flex-direction:column;align-items:center}
.people-caption{position:relative;margin:0;font-size:calc(var(--type-meta)*var(--u));line-height:1.4;font-weight:900;letter-spacing:.08em}
.people-caption:before,.people-caption:after{content:"";position:absolute;top:calc(2*var(--u));width:2px;height:calc(22*var(--u));background:currentColor;transform:rotate(-28deg)}
.people-caption:before{left:calc(-26*var(--u))}
.people-caption:after{right:calc(-26*var(--u));transform:rotate(28deg)}
/* Plain heading strip; the fully clickable interview paper keeps its navigation fold. */
.pc-paper{--fold:calc(24*var(--u));isolation:isolate;filter:drop-shadow(0 calc(6*var(--u)) calc(12*var(--u)) rgba(9,43,67,.13))}
.pc-paper:before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:2px solid var(--navy);border-radius:calc(6*var(--u));clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%)}
.pc-paper:after{content:"";position:absolute;right:0;top:0;width:var(--fold);height:var(--fold);background:var(--navy);clip-path:polygon(0 0,0 100%,100% 100%);pointer-events:none}
.people-title{position:relative;margin:calc(8*var(--u)) 0 0;padding:calc(5*var(--u)) calc(42*var(--u)) calc(9*var(--u));background:#fff;border:2px solid var(--navy);border-radius:4px;font-size:calc(var(--type-section)*var(--u));line-height:1.2;font-weight:700;letter-spacing:.05em;white-space:nowrap}

/* one slide = 600 × 570u; the tilted face paper is 510 × 392u, the quote paper overlaps its lower edge */
.pc{position:absolute;inset:0}
.pc-stage{position:absolute;left:50%;top:calc(150*var(--u));width:100cqw;margin-left:-50cqw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin}
.pc-track{display:flex;gap:calc(20*var(--u));width:max-content;padding:0 calc(60*var(--u)) calc(12*var(--u))}
.pc-slide{position:relative;flex:0 0 auto;width:calc(600*var(--u));height:calc(570*var(--u));scroll-snap-align:center}
/* only the drawn parts react to the pointer, not the empty corners of the slide box */
.pc-card{position:absolute;inset:0;pointer-events:none}
.pc-face,.pc-tag,.pc-paper{pointer-events:auto}
.pc-face{position:absolute;left:calc(45*var(--u));top:calc(42*var(--u));width:calc(510*var(--u));height:calc(392*var(--u));overflow:hidden;border-radius:calc(12*var(--u));background:var(--teal);transform:skewY(-6deg);box-shadow:0 calc(8*var(--u)) calc(18*var(--u)) rgba(9,43,67,.14)}
/* counter-skewed, taller by 40u each way so the art stays upright and still fills the tilted corners */
.pc-art{position:absolute;left:0;right:0;top:calc(-40*var(--u));bottom:calc(-40*var(--u));transform:skewY(6deg)}
.pc-art img{position:absolute;max-width:none;height:auto;user-select:none}
.pc-portrait{left:calc(40*var(--u));top:calc(36*var(--u));width:calc(430*var(--u));transition:opacity .4s cubic-bezier(.785,.135,.15,.86)}
[data-person="aoki"] .pc-portrait{left:calc(45*var(--u));top:calc(26*var(--u));width:calc(420*var(--u))}
/* User-requested photo cutouts; originals retained. Match each person's eye position to their illustration. */
.pc-photo{left:calc(var(--px)*var(--u));top:calc(var(--py)*var(--u));width:calc(var(--pw)*var(--u));opacity:0;transition:opacity .4s cubic-bezier(.785,.135,.15,.86)}
[data-person="yamamoto"] .pc-photo{--px:54;--py:43;--pw:425}
[data-person="kitajima"] .pc-photo{--px:10;--py:59;--pw:490}
[data-person="aoki"] .pc-photo{--px:26;--py:18;--pw:440}
.pc-card:hover .pc-photo,.pc-card:focus-within .pc-photo,.pc.is-photo .pc-photo{opacity:1}
.pc-card:hover .pc-portrait,.pc-card:focus-within .pc-portrait,.pc.is-photo .pc-portrait{opacity:0}
.pc.is-carousel .pc-card:not(.is-photo-ready) .pc-photo{opacity:0}
.pc.is-carousel .pc-card:not(.is-photo-ready) .pc-portrait{opacity:1}
.pc-tag{position:absolute;right:calc(79*var(--u));top:calc(34*var(--u));margin:0;padding:calc(14*var(--u)) calc(8*var(--u));background:#fff;border:2px solid var(--navy);border-radius:2px;writing-mode:vertical-rl;text-orientation:upright;font-size:calc(var(--type-body)*var(--u));line-height:1;font-weight:900;letter-spacing:.14em;white-space:nowrap}
.pc-paper{position:absolute;left:calc(65*var(--u));top:calc(342*var(--u));width:calc(520*var(--u));display:grid;grid-template-columns:1fr auto;grid-template-areas:"quote quote" "who link";align-items:center;row-gap:calc(16*var(--u));padding:calc(28*var(--u)) calc(26*var(--u)) calc(22*var(--u)) calc(34*var(--u))}
/* three quote lines: the paper grows upward, still below the chin */
[data-person="aoki"] .pc-paper{top:calc(318*var(--u))}
.pc-quote{grid-area:quote;margin:0;font-size:calc(var(--type-card)*var(--u));line-height:1.5;font-weight:700;letter-spacing:.02em}
.pc-quote span{display:block;white-space:nowrap}
.pc-mobile-break{display:none}
.pc-who{grid-area:who;display:flex;align-items:center;min-width:0}
.pc-name{margin:0;font-size:calc(24*var(--u));line-height:1.3;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.pc-role{margin:0 0 0 calc(14*var(--u));padding-left:calc(14*var(--u));border-left:1.5px solid rgba(9,43,67,.4);font-size:calc(var(--type-note)*var(--u));line-height:1.3;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.pc-link{grid-area:link;display:grid;place-items:center;width:calc(54*var(--u));height:calc(54*var(--u));border-radius:50%;background:var(--teal);color:#fff;text-decoration:none;transition:background-color .2s ease}
/* the whole quote paper opens the interview; the round arrow is its visible sign */
.pc-link:after{content:"";position:absolute;inset:0;z-index:1}
.pc-link .arrow{width:calc(24*var(--u));height:calc(24*var(--u));fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.pc-card:hover .pc-link{background:#066a6e}
.pc-card:hover .pc-link .arrow{transform:translateX(3px)}
.pc-link:focus-visible{outline:3px solid var(--navy);outline-offset:4px}

/* ring layout: every slide sits at the centre and is moved by JS (translateX); only the centre paper is readable */
.pc.is-carousel .pc-stage{overflow:hidden;overflow:clip;scroll-snap-type:none;height:calc(570*var(--u))}
.pc.is-carousel .pc-track{position:relative;display:block;width:auto;height:100%;padding:0}
.pc.is-carousel .pc-slide{position:absolute;left:calc(50% - 300*var(--u));top:0;will-change:transform}
.pc.is-carousel .pc-paper{opacity:var(--near,1)}
.pc.is-carousel .pc-slide:not(.is-current) .pc-paper{pointer-events:none}
.pc.is-carousel .pc-slide:not(.is-current) .pc-face{cursor:pointer}

.pc-controls[hidden]{display:none}
.pc-count{position:absolute;left:50%;top:calc(728*var(--u));margin:0;transform:translateX(-50%);display:flex;align-items:center;gap:calc(8*var(--u));font-family:Arial,sans-serif;font-size:calc(17*var(--u));line-height:1;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.pc-count:before,.pc-count:after{content:"";width:calc(46*var(--u));height:1.5px;margin:0 calc(14*var(--u));background:currentColor}
.pc-now{font-size:calc(20*var(--u))}
.pc-sep{font-weight:400;opacity:.6}
.pc-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pc-buttons{position:absolute;right:calc(44*var(--u));bottom:calc(40*var(--u));display:flex;align-items:center;gap:calc(14*var(--u))}
.pc-btn{display:grid;place-items:center;width:calc(52*var(--u));height:calc(52*var(--u));padding:0;border:2px solid var(--navy);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.pc-btn svg{width:calc(20*var(--u));height:calc(20*var(--u));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pc-btn:hover{background:var(--navy);color:#fff}
.pc-btn:focus-visible,.pc-photo-btn:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
/* touch screens cannot hover: a toggle shows the photos instead */
.pc-photo-btn{display:none;height:calc(52*var(--u));padding:0 calc(20*var(--u));border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-size:calc(16*var(--u));font-weight:700;cursor:pointer}
.pc-photo-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
@media (hover:none){.pc-photo-btn{display:block}}

/* Reduced motion: decorative text is static and manual carousel moves are instant. */
@media (prefers-reduced-motion:reduce){.pc-portrait,.pc-photo,.pc-link,.pc-link .arrow,.pc-btn{transition:none}}

@media (prefers-reduced-motion:reduce){.global-nav a,.entry-link,.entry-link-arrow,.job-card:before,.job-link,.job-link .arrow{transition:none}
  .job:hover .job-link .arrow,.job-link:focus-visible .arrow{transform:none}}