/* completion: the contribution chapter (#achievements), the job / application chapter (#entry) and the teal footer.
   Card system: two independent circular reading panels, lake-to-teal dissolve and continuous outline text lead to folded navigation cards.
   Nothing overlaps the spread's lower edge. No-JS / reduced motion retain all text and the static marquee. */
.social,.join{--u:min(calc(100cqw / 1440),calc(100svh / 800));position:relative;color:var(--navy)}
.closing-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Preserve the photograph's upper mask and interview connection. The added water margin is below the complete spread. */
.social{padding-bottom:calc(24*var(--u));background:#e4f1f0}
.social:after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(440*var(--u));background:linear-gradient(180deg,rgba(8,127,131,0),rgba(8,127,131,.15) 20%,rgba(8,127,131,.55) 48%,rgba(8,127,131,.9) 76%,var(--teal) 96%);pointer-events:none}
/* The photograph comes up out of the page colour over --fade, along an eased curve so no starting line shows. */
.social-photo{--fade:calc(320*var(--u));position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.024) calc(var(--fade)*0.1),rgba(0,0,0,.095) calc(var(--fade)*0.2),rgba(0,0,0,.206) calc(var(--fade)*0.3),rgba(0,0,0,.345) calc(var(--fade)*0.4),rgba(0,0,0,.500) calc(var(--fade)*0.5),rgba(0,0,0,.655) calc(var(--fade)*0.6),rgba(0,0,0,.794) calc(var(--fade)*0.7),rgba(0,0,0,.905) calc(var(--fade)*0.8),rgba(0,0,0,.976) calc(var(--fade)*0.9),#000 var(--fade));mask-image:linear-gradient(transparent,rgba(0,0,0,.024) calc(var(--fade)*0.1),rgba(0,0,0,.095) calc(var(--fade)*0.2),rgba(0,0,0,.206) calc(var(--fade)*0.3),rgba(0,0,0,.345) calc(var(--fade)*0.4),rgba(0,0,0,.500) calc(var(--fade)*0.5),rgba(0,0,0,.655) calc(var(--fade)*0.6),rgba(0,0,0,.794) calc(var(--fade)*0.7),rgba(0,0,0,.905) calc(var(--fade)*0.8),rgba(0,0,0,.976) calc(var(--fade)*0.9),#000 var(--fade))}
.social-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,31,46,.32),rgba(5,31,46,.1) 60%,rgba(5,31,46,0));pointer-events:none}
.social-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.social-frame{position:relative;z-index:1;width:calc(1440*var(--u));height:calc(1140*var(--u));margin:0 auto}
.social-head{position:static}
/* The concept is the chapter headline. The handwriting introduces it; the former chapter caption is removed. */
.social-title{position:absolute;left:calc(118*var(--u));top:calc(286*var(--u));margin:0;color:#fff;font-size:calc(var(--type-message)*var(--u));line-height:1.55;font-weight:700;letter-spacing:.04em;text-shadow:0 2px 18px rgba(9,43,67,.18)}
.social-title span{display:block;white-space:nowrap}
.join-title{background:#fff;border:2px solid var(--navy);border-radius:4px}
.door{--fold:calc(32*var(--u));position:relative;isolation:isolate}
.door:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);border:2px solid var(--navy);border-radius:calc(5*var(--u));clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%)}
.door:after{content:"";position:absolute;inset:0;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}
.social-hand{position:absolute;left:calc(118*var(--u));top:calc(82*var(--u));width:calc(330*var(--u));height:auto;pointer-events:none;user-select:none}
/* white copy on the mountain shade; a soft local shade keeps it readable on any part of the photograph */
.social-lead{position:absolute;left:calc(118*var(--u));top:calc(552*var(--u));isolation:isolate;margin:0;color:#fff;font-size:calc(var(--type-lead)*var(--u));line-height:1.8;font-weight:700;letter-spacing:.03em;text-shadow:0 0 calc(12*var(--u)) rgba(9,43,67,.5)}
.social-lead:before{content:"";position:absolute;inset:calc(-80*var(--u)) calc(-140*var(--u)) calc(-80*var(--u)) calc(-110*var(--u));z-index:-1;background:radial-gradient(closest-side,rgba(9,43,67,.4),rgba(9,43,67,.22) 60%,rgba(9,43,67,0));pointer-events:none}
.social-lead span{display:block;white-space:nowrap}

/* Two compact circular evidence panels support the concept, without repeated illustrations or index numbers. */
.spread{position:absolute;inset:0;pointer-events:none}
.proof{--disc:440;--title-row:64;--body-row:78;--copy-gap:12;position:absolute;pointer-events:auto;display:grid;grid-template-rows:calc(22*var(--u)) calc(46*var(--u)) auto calc(24*var(--u));row-gap:calc(12*var(--u));align-content:center;justify-items:center;align-items:center;width:calc(var(--disc)*var(--u));height:calc(var(--disc)*var(--u));padding:calc(38*var(--u));background:var(--cream);border:1px solid rgba(9,43,67,.4);border-radius:50%;text-align:center}
.proof-hulic{--disc:368;--title-row:58;--body-row:50;--copy-gap:10;left:calc(960*var(--u));top:calc(248*var(--u));padding:calc(28*var(--u));grid-template-rows:calc(20*var(--u)) calc(40*var(--u)) auto calc(22*var(--u));row-gap:calc(10*var(--u))}
.proof-ppa{left:calc(560*var(--u));top:calc(636*var(--u))}
/* Only a short English arc rotates. The facts, logos and links remain still. */
.proof-orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;transform-origin:50% 50%;animation:orbit-turn 30s linear infinite paused}
.proof-orbit text{fill:var(--teal);font-family:Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:2.4px}
.proof-ppa .proof-orbit{animation-duration:36s;animation-delay:-17s}
.js .proof-orbit{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.proof-orbit{animation:none}}

.proof-hulic .proof-title{font-size:calc(20*var(--u))}
.proof-hulic .proof-body{font-size:calc(var(--type-note)*var(--u))}
.proof-hulic .proof-wordmark{font-size:calc(32*var(--u))}
.proof-tag{grid-row:1;margin:0;color:var(--teal);font-size:calc(var(--type-note)*var(--u));line-height:1.5;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.proof-logo{grid-row:2;display:flex;align-items:center;justify-content:center;height:100%;gap:calc(12*var(--u))}
.proof-wordmark{color:#151515;font-size:calc(36*var(--u));line-height:1;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.proof-smbc{width:auto;height:calc(34*var(--u))}
.proof-tepco{width:auto;height:calc(25*var(--u))}
.proof-cross{font-size:calc(18*var(--u));line-height:1;color:var(--navy);font-weight:500}
.proof-copy{grid-row:3;display:grid;grid-template-rows:calc(var(--title-row)*var(--u)) calc(var(--body-row)*var(--u));row-gap:calc(var(--copy-gap)*var(--u));align-items:center;width:max-content;max-width:100%;text-align:left}
.proof-title{text-align:center;margin:0;font-size:calc(22*var(--u));line-height:1.45;font-weight:700;letter-spacing:.02em}
.proof-title span,.proof-body span{display:block;white-space:nowrap}
.proof-body{text-align:left;margin:0;font-size:calc(var(--type-meta)*var(--u));line-height:1.6;font-weight:500;letter-spacing:0}
.proof-source{grid-row:4;display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));width:max-content;max-width:100%;text-align:center;padding-bottom:calc(3*var(--u));font-size:calc(var(--type-note)*var(--u));line-height:1.4;font-weight:700;letter-spacing:.04em;text-decoration:underline;text-underline-offset:.35em;white-space:nowrap;transition:color .2s ease}
.proof-ext{flex:none;width:calc(13*var(--u));height:calc(13*var(--u));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.proof-source:hover{color:var(--teal)}
.proof-source:focus-visible{outline:3px solid var(--teal);outline-offset:4px}

/* Same 250u outline type as the company and interview; the light stroke remains readable on water. */
.social-marquee{position:relative;z-index:1;height:calc(260*var(--u));margin-top:calc(56*var(--u));overflow:clip}
.social-marquee-track{--marquee-ink:rgba(255,255,255,.72);--marquee-duration:50s}

/* Separate the chapters with space; keep all job illustrations inside their paper. */
.join{z-index:2;padding:calc(56*var(--u)) 0 calc(80*var(--u));background:var(--teal);scroll-margin-top:calc(24*var(--u))}
.join-frame{position:relative;z-index:1;width:calc(1320*var(--u));margin:0 auto}
.join-head{position:relative;height:calc(136*var(--u))}
.join-title{display:inline-block;margin:0 0 0 calc(22*var(--u));padding:calc(12*var(--u)) calc(46*var(--u)) calc(16*var(--u)) calc(30*var(--u));font-size:calc(var(--type-section)*var(--u));line-height:1.25;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.join-num{font-size:1.24em;line-height:1}
/* the supplied handwriting is navy; this chapter shows it white */
.join-hand{position:absolute;left:calc(710*var(--u));top:calc(-12*var(--u));width:calc(310*var(--u));height:auto;filter:brightness(0) invert(1);pointer-events:none;user-select:none}
.doors{display:grid;grid-template-columns:repeat(3,1fr);column-gap:calc(24*var(--u));margin:calc(28*var(--u)) 0 0;padding:0;list-style:none}
.door{--fold:calc(30*var(--u));display:flex;flex-direction:column;height:calc(332*var(--u));padding:calc(148*var(--u)) calc(32*var(--u)) calc(26*var(--u));color:var(--navy);text-decoration:none}
.door:before{transition:background-color .2s ease}
.door-art{position:absolute;left:50%;top:calc(10*var(--u));width:calc(210*var(--u));height:calc(140*var(--u));margin-left:calc(-105*var(--u));object-fit:contain;pointer-events:none}
.door-name{display:flex;flex-direction:column;justify-content:center;height:calc(78*var(--u));font-size:calc(var(--type-card)*var(--u));line-height:1.24;font-weight:700;letter-spacing:.02em;white-space:nowrap;transition:color .2s ease}
.door-name span{display:block}
.door-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.door-tag{padding:calc(6*var(--u)) calc(18*var(--u)) calc(7*var(--u));border:1.5px solid var(--teal);border-radius:999px;background:#fff;color:var(--teal);font-size:calc(var(--type-note)*var(--u));line-height:1.3;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.door-arrow{display:grid;place-items:center;flex:none;width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%;background:var(--navy);color:#fff;transition:background-color .2s ease}
.door-arrow svg{width:calc(25*var(--u));height:calc(14*var(--u));overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.door:hover:before,.door:focus-visible:before{background:#fff}
.door:hover .door-name,.door:focus-visible .door-name{color:var(--teal)}
.door:hover .door-arrow,.door:focus-visible .door-arrow{background:var(--teal)}
.door:hover .door-arrow svg,.door:focus-visible .door-arrow svg{transform:translateX(calc(4*var(--u)))}
.door:focus-visible{outline:3px solid #fff;outline-offset:calc(5*var(--u))}
/* application paper: icon and title, the note with the quieter guide link, then the yellow entry button */
.band{position:relative;background:var(--cream);border:2px solid var(--navy);border-radius:4px;display:flex;align-items:center;height:calc(128*var(--u));margin-top:calc(30*var(--u));padding:0 calc(44*var(--u)) 0 calc(50*var(--u))}
.band-icon{flex:none;width:calc(40*var(--u));height:calc(50*var(--u));fill:#fff;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.band-title{margin:0 0 0 calc(20*var(--u));font-size:calc(24*var(--u));line-height:1.3;font-weight:900;letter-spacing:.05em;white-space:nowrap}
.band-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin-left:calc(40*var(--u));padding-left:calc(40*var(--u));border-left:1.5px solid rgba(9,43,67,.45)}
.band-note{margin:0;font-size:calc(var(--type-body)*var(--u));line-height:1.6;font-weight:500;letter-spacing:.04em}
.band-note span{display:block;white-space:nowrap}
.band-guide{margin-top:calc(6*var(--u));padding-bottom:calc(2*var(--u));border-bottom:1.5px solid currentColor;color:var(--navy);font-size:calc(var(--type-meta)*var(--u));line-height:1.4;font-weight:700;letter-spacing:.05em;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.band-cta{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:calc(400*var(--u));height:calc(80*var(--u));margin-left:auto;padding-right:calc(34*var(--u));border:2px solid var(--navy);border-radius:999px;background:var(--yellow);color:var(--navy);font-size:calc(24*var(--u));line-height:1;font-weight:900;letter-spacing:.08em;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.band-arrow{position:absolute;right:calc(44*var(--u));top:50%;width:calc(30*var(--u));height:calc(17*var(--u));margin-top:calc(-8.5*var(--u));overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.band-cta:hover{background:#ffea85}
.band-cta:hover .band-arrow{transform:translateX(calc(5*var(--u)))}
.band-guide:hover{color:var(--teal)}
.band-cta:focus-visible,.band-guide:focus-visible{outline:3px solid var(--navy);outline-offset:4px}

/* footer: continues the teal surface of the job chapter; a thin white rule (same width as the legal row's rule) marks its
   top. Brand and address on the left, two link groups behind thin white rules on the right, a static outline ADVANCE with
   the page-top button, then the legal row. */
.site-footer{--u:min(calc(100cqw / 1440),calc(100svh / 800));container-type:inline-size;position:relative;isolation:isolate;background:var(--teal);color:#fff}
.site-footer:before{content:"";position:absolute;left:50%;top:0;width:calc(1284*var(--u));height:1px;margin-left:calc(-642*var(--u));background:rgba(255,255,255,.45)}
.footer-frame{display:flex;flex-direction:column;width:calc(1440*var(--u));min-height:calc(650*var(--u));margin:0 auto;padding:calc(80*var(--u)) calc(78*var(--u)) 0}
.footer-main{display:flex;justify-content:space-between;align-items:flex-start}
.footer-brand{width:calc(530*var(--u))}
.footer-mark{display:flex;align-items:center;gap:calc(18*var(--u));width:calc(380*var(--u));margin:0;text-decoration:none}
.footer-mark img{display:block;flex:1;width:0;min-width:0;height:auto}
.footer-mark .brand-caption{font-size:calc(16*var(--u));color:#fff}
.footer-phrase{margin:calc(40*var(--u)) 0 0;font-size:calc(42*var(--u));line-height:1.4;font-weight:700;letter-spacing:.06em}
.footer-phrase span{display:block;white-space:nowrap}
.footer-address{margin-top:calc(32*var(--u));font-style:normal;font-size:calc(var(--type-body)*var(--u));line-height:1.8;font-weight:500;letter-spacing:.04em}
.footer-address span{display:block}
.footer-nav{display:flex}
.footer-group{padding:calc(2*var(--u)) 0 calc(6*var(--u)) calc(48*var(--u));border-left:1px solid rgba(255,255,255,.5)}
.footer-group:first-child{width:calc(440*var(--u))}
.footer-group+.footer-group{width:calc(250*var(--u))}
.footer-label{margin:0 0 calc(8*var(--u));font-size:calc(var(--type-note)*var(--u));line-height:1.4;font-weight:700;letter-spacing:.14em}
.footer-group ul{margin:0;padding:0;list-style:none}
.footer-group a{display:inline-flex;align-items:center;gap:calc(14*var(--u));height:calc(56*var(--u));font-size:calc(var(--type-lead)*var(--u));line-height:1.3;font-weight:700;letter-spacing:.04em;white-space:nowrap;text-decoration:none}
.footer-arrow{flex:none;width:calc(26*var(--u));height:calc(15*var(--u));overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.footer-group a:hover .footer-arrow{transform:translateX(calc(4*var(--u)))}
.footer-group a:hover,.footer-legal a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.footer-closing{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:calc(48*var(--u))}
.footer-word{margin:0 0 calc(-10*var(--u)) calc(-6*var(--u));font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(190*var(--u));line-height:.9;font-weight:700;letter-spacing:.08em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.72);white-space:nowrap;pointer-events:none;user-select:none}
.footer-top{position:relative;scroll-margin-block:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(7*var(--u));flex:none;width:calc(96*var(--u));height:calc(96*var(--u));margin-bottom:calc(14*var(--u));border-radius:50%;background:var(--yellow);color:var(--navy);text-decoration:none;box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) rgba(9,43,67,.25);transition:transform .2s ease}
.footer-top-arrow{width:calc(18*var(--u));height:calc(22*var(--u));fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.footer-top-ring{position:absolute;inset:-25%;width:150%;height:150%;pointer-events:none;user-select:none;transform-origin:50% 50%;animation:orbit-turn 30s linear infinite paused}
.footer-top-ring text{fill:#fff;stroke:none;font-family:Arial,sans-serif;font-size:9.5px;font-weight:500;letter-spacing:.65px}
.js .footer-top-ring{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.footer-top-ring{animation:none}}
.footer-top span[lang]{padding-left:.08em;font-size:calc(12*var(--u));line-height:1;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.footer-top:hover{transform:translateY(calc(-4*var(--u)))}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:calc(26*var(--u));padding:calc(24*var(--u)) 0 calc(30*var(--u));border-top:1px solid rgba(255,255,255,.45)}
.footer-legal{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.footer-legal li+li{margin-left:calc(24*var(--u));padding-left:calc(24*var(--u));border-left:1px solid rgba(255,255,255,.55)}
.footer-legal a{display:inline-flex;align-items:center;gap:calc(8*var(--u));font-size:calc(var(--type-meta)*var(--u));line-height:1.4;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.footer-external{flex:none;width:calc(15*var(--u));height:calc(15*var(--u));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-copy{margin:0;font-size:calc(var(--type-meta)*var(--u));line-height:1.4;font-weight:500;letter-spacing:.1em}
.footer-copy small{font-size:inherit}
.site-footer a:focus-visible{outline:3px solid #fff;outline-offset:4px}

@media (prefers-reduced-motion:reduce){.proof-source,.door:before,.door-name,.door-arrow,.door-arrow svg,.band-cta,.band-arrow,.band-guide,.footer-arrow,.footer-top{transition:none}
  .door:hover .door-arrow svg,.door:focus-visible .door-arrow svg,.band-cta:hover .band-arrow{transform:none}}