/*
Theme Name: Kanna Recruit
Theme URI: https://example.com/
Author: SPINOVA
Description: 株式会社カンナ 採用サイト用テーマ。縦スナップ型LP。応募フォームは Contact Form 7 を使用。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kanna
*/

:root{--orange:#ff9933;--green:#6ec36a;--ink:#171713;--cream:#fffaf2;--white:#fff;--header:74px;--ease:cubic-bezier(.76,0,.24,1)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--cream);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.site-header{position:fixed;z-index:50;left:0;right:0;top:0;height:var(--header);display:flex;align-items:center;padding:0 22px;gap:16px;pointer-events:none}.brand,.menu-button{pointer-events:auto}.brand{width:128px;filter:drop-shadow(0 2px 8px #fff8)}.brand img{display:block;width:100%}.recruit-label{margin-left:auto;font:700 10px/1 "DM Sans";letter-spacing:.15em}.menu-button{width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);display:grid;place-content:center;gap:6px}.menu-button span{width:18px;height:2px;background:white;display:block;transition:.3s}.menu-button[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.menu{position:fixed;z-index:45;inset:0;background:var(--orange);padding:110px 9vw 50px;visibility:hidden;opacity:0;transition:.5s var(--ease);overflow:auto}.menu.open{visibility:visible;opacity:1}.menu-kicker,.eyebrow{font:700 11px/1 "DM Sans";letter-spacing:.18em}.menu ol{list-style:none;margin:24px 0;padding:0}.menu li{border-top:1px solid #17171333}.menu a{display:flex;padding:13px 0;color:inherit;text-decoration:none;font-weight:700}.menu small{margin-left:auto;font-family:"DM Sans"}.slider{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain}.page{position:relative;min-height:100dvh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;padding:calc(var(--header) + 28px) 8vw 60px;display:flex;align-items:center;background:var(--cream)}.page.dark{background:var(--ink);color:white}.page.orange{background:var(--orange)}.page.green{background:var(--green)}.content{position:relative;z-index:3;max-width:600px}.content.narrow{max-width:720px;margin:auto}.eyebrow{margin:0 0 20px}.page h2{font-size:clamp(34px,9vw,80px);line-height:1.12;letter-spacing:-.055em;margin:0 0 28px;font-weight:900}.page p{font-size:15px;line-height:2;margin:0;max-width:620px}.page h2 span,.page h2 em{color:var(--orange);font-style:normal}.orange h2 span,.green h2 span{color:white}.page-no{position:absolute;right:7vw;bottom:22px;font:700 10px/1 "DM Sans";letter-spacing:.16em}.page-video{padding:0}.video-frame{position:absolute;inset:0}.video-frame video{width:100%;height:100%;object-fit:cover}
.video-shade{position:absolute;inset:0;}
.video-note{position:absolute!important;top:92px;left:8vw;font:700 10px/1 "DM Sans"!important;letter-spacing:.18em}.video-note span{display:block;margin-top:8px;font-family:inherit;color:#fff9}.video-copy{position:absolute;left:8vw;bottom:15vh}.video-copy small{font:700 11px/1 "DM Sans";letter-spacing:.2em}.video-copy h1{font-size:clamp(42px,11vw,96px);line-height:1.03;letter-spacing:-.06em;margin:16px 0 0}.video-copy em{color:var(--orange);font-style:normal}.scroll-cue{position:absolute;right:6vw;bottom:4vh;border:0;background:none;color:white;font:700 9px "DM Sans";letter-spacing:.15em}

.scroll-cue i{
  display:block;
  width:auto;
  height:auto;
  margin:8px auto 0;
  background:none;
  font-style:normal;
  font-size:14px;
  line-height:1;
  animation:triangleMove 1.4s ease-in-out infinite;
}

.scroll-cue i::before{
  content:"▼";
}

@keyframes triangleMove{
  0%, 100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(7px);
  }
}

@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}.blob{position:absolute;border-radius:46% 54% 64% 36%/41% 38% 62% 59%;filter:saturate(1.05);animation:float 7s ease-in-out infinite}.blob-orange{width:58vw;height:58vw;background:var(--orange);right:-22vw;top:-12vw}.blob-green{width:35vw;height:35vw;background:var(--green);left:-20vw;bottom:-8vw;animation-delay:-3s}@keyframes float{50%{transform:translate(2vw,2vh) rotate(8deg)}}.hero-grid{width:100%;display:grid;gap:5vh}.hero-copy h2 span{color:var(--orange)}.photo-stack{position:relative;width:72%;height:31vh;margin-left:auto;transform:rotate(3deg)}.photo-stack img{width:100%;height:100%;object-fit:cover;border-radius:120px 120px 24px 24px}.sticker{position:absolute;left:-55px;bottom:18px;background:var(--green);padding:13px 18px;border-radius:50%;font-weight:900;transform:rotate(-10deg)}.giant-word{position:absolute;font:900 45vw/1 "DM Sans";letter-spacing:-.1em;color:#fff2;right:-10vw;bottom:-8vw}.split-photo{position:absolute;inset:0 0 48%}.split-photo img{width:100%;height:100%;object-fit:cover}.card{margin-top:35vh;background:var(--cream);padding:26px;border-radius:26px}.card h2{font-size:clamp(30px,7.8vw,65px)}mark{background:linear-gradient(transparent 58%,#ff993380 58%);color:inherit}.orbit{position:absolute;border:2px solid #fff8;border-radius:50%;width:70vw;height:70vw}.orbit-a{right:-35vw;top:-10vw}.orbit-b{left:-38vw;bottom:-10vw;width:55vw;height:55vw}.page-workstyle{align-items:flex-start}.feature-list{list-style:none;padding:0;margin:28px 0;display:grid;gap:10px}.feature-list li{background:white;border:1px solid #171713;border-radius:100px;padding:12px 18px;font-weight:700;box-shadow:4px 4px 0 var(--ink)}.feature-list b{display:inline-block;color:var(--orange);font:700 11px "DM Sans";width:34px}.round-photo{position:absolute;width:55vw;height:55vw;max-width:360px;max-height:360px;right:-10vw;bottom:-5vw;object-fit:cover;border-radius:50%;border:12px solid var(--green)}.salary-card{margin-top:28px;background:var(--orange);color:var(--ink);padding:22px;border-radius:24px;display:flex;flex-direction:column;transform:rotate(-2deg)}.salary-card small,.salary-card span{font-weight:700}.salary-card strong{font:700 clamp(42px,13vw,72px)/1 "DM Sans";letter-spacing:-.06em;margin:8px 0}.salary-card em{font:900 18px "Zen Kaku Gothic New"}.page-job{align-items:flex-end}.job-photo{position:absolute;left:0;right:0;top:0;height:48%;overflow:hidden}.job-photo img{width:100%;height:100%;object-fit:cover}.job-number{position:absolute;z-index:2;right:5vw;top:35%;font:900 22vw/1 "DM Sans";color:var(--orange);text-shadow:3px 3px 0 white}.page-job .content{padding-bottom:2vh}.page-job h2{font-size:clamp(36px,10vw,72px);margin-bottom:16px}.tag{display:inline-block;margin-top:18px;border:1px solid;border-radius:100px;padding:7px 15px;font-weight:700}.reverse{background:#eff8ec}.reverse .job-number{color:var(--green)}.support-lines{position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 45px,#fff2 45px 48px)}.mini-badge{position:absolute;right:7vw;bottom:10vh;background:var(--green);width:95px;height:95px;border-radius:50%;display:grid;place-content:center;text-align:center;font:900 15px/1.1 "DM Sans";transform:rotate(9deg)}.page-person{background:#f6f0ff}.page-person .content{align-self:flex-start}.people-shapes{position:absolute;bottom:0;left:0;right:0;height:28vh;display:flex;align-items:flex-end;justify-content:center;gap:3vw}.people-shapes i{display:block;width:22vw;max-width:180px;border-radius:100px 100px 0 0;background:var(--orange);height:85%}.people-shapes i:nth-child(2){background:var(--green);height:110%}.people-shapes i:nth-child(3){background:#ffd445;height:70%}.scroll-page{height:100dvh;display:block;padding:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-align:start;scrollbar-width:thin}.scroll-inner{padding:110px 7vw 80px;min-height:120vh}.scroll-page h2{margin-bottom:12px}.scroll-hint{font-size:11px!important;color:#666}.requirements-list{margin:36px 0}.requirements-list div{display:grid;grid-template-columns:95px 1fr;border-top:1px solid #17171333;padding:20px 0;gap:14px}.requirements-list div:last-child{border-bottom:1px solid #17171333}.requirements-list dt{font-weight:900}.requirements-list dd{margin:0;line-height:1.8}.requirements-list strong{font-size:20px;color:#e57300}.primary-button,.submit-button{border:0;background:var(--ink);color:white;border-radius:100px;padding:18px 24px;font:700 13px "DM Sans";letter-spacing:.12em;display:flex;justify-content:space-between;width:100%}.primary-button span,.submit-button span{font-size:20px}.fixed{position:fixed}.page-company{background:var(--green)}.page-company dl{margin:26px 0}.page-company dl div{display:grid;grid-template-columns:90px 1fr;border-top:1px solid #17171344;padding:12px 0}.page-company dt{font-weight:900}.page-company dd{margin:0}.company-sign{position:absolute;right:-5vw;bottom:3vh;font:900 23vw/.72 "DM Sans";color:#fff3;letter-spacing:-.08em}.company-sign small{font-size:4vw;letter-spacing:.05em}.page-closing{align-items:flex-end}.closing-photo{position:absolute;inset:0}.closing-photo img{width:100%;height:100%;object-fit:cover}.closing-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0002,#000d)}.page-closing .content{padding-bottom:4vh}.page-closing h2 em{color:var(--orange)}.page-closing .primary-button{margin-top:24px;background:var(--orange);color:var(--ink)}.page-entry{background:#fff7ed}.form-lead{font-size:13px!important}.entry-form{display:grid;gap:24px;margin-top:38px}.entry-form label{font-weight:700}.entry-form label>.badge{background:var(--orange);font-size:10px;padding:3px 8px;border-radius:20px;margin-left:8px}.entry-form label>.badge.optional{background:#ddd}.entry-form input,.entry-form select,.entry-form textarea{display:block;width:100%;margin-top:9px;padding:16px;border:1px solid #17171344;border-radius:12px;background:white}.entry-form textarea{resize:vertical}.entry-form .privacy label{display:flex;align-items:center;font-size:13px;margin:0}.privacy input{width:18px;margin:0 10px 0 0}.submit-button{background:var(--orange);color:var(--ink)}footer{text-align:center;margin-top:70px;padding-top:40px;border-top:1px solid #17171322}footer img{width:150px}footer p{font-size:12px!important}.side-progress{position:fixed;z-index:20;right:8px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;align-items:center;gap:8px;font:700 9px "DM Sans"}.side-progress>div{width:1px;height:100px;background:#17171333}.side-progress i{display:block;width:1px;height:10%;background:var(--orange);transition:.4s}.floating-entry{position:fixed;z-index:25;right:18px;bottom:18px;border:0;border-radius:100px;background:var(--orange);padding:13px 17px;font:700 11px "DM Sans";box-shadow:0 8px 28px #0003}.floating-entry span{margin-left:12px}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s .2s,transform .8s .2s var(--ease)}.page.active .reveal{opacity:1;transform:none}@media(min-width:800px){:root{--header:92px}.site-header{padding:0 42px}.brand{width:170px}.page{padding-left:12vw;padding-right:12vw}.hero-grid{grid-template-columns:1.1fr .9fr;align-items:center}.photo-stack{width:90%;height:65vh}.split-photo{inset:0 50% 0 0}.card{margin:0 0 0 47%;padding:5vw}.page-workstyle{align-items:center}.round-photo{right:8vw;bottom:14vh}.page-job{align-items:center;padding-left:55%}.job-photo{inset:0 50% 0 0;height:auto}.job-number{right:43%;top:20%;font-size:13vw}.page-job .content{padding:0}.page-person .content{align-self:center}.people-shapes{left:auto;width:46%;height:60vh}.scroll-inner{max-width:920px;margin:auto}.requirements-list div{grid-template-columns:180px 1fr}.side-progress{display:flex;right:26px}.floating-entry{right:38px;bottom:28px}.menu{padding-left:20vw;padding-right:20vw}.menu a{font-size:22px}.page-company .content{width:60%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}
.desktop-rail{display:none}
@media(min-width:1000px){
  html,body{background-color:#fffdf3;background-image:linear-gradient(#ffd76a40 0 0),linear-gradient(#ffb75a2b 0 0),linear-gradient(#fff0b852 0 0),linear-gradient(#f4bd6630 0 0),linear-gradient(#ffe59a35 0 0),linear-gradient(#efaa5126 0 0);background-size:19vw 15vh,14vw 23vh,21vw 11vh,17vw 18vh,12vw 14vh,20vw 10vh;background-position:0 0,0 33vh,8vw 76vh,100% 7vh,100% 47vh,88vw 82vh;background-repeat:no-repeat;background-attachment:fixed}
  .slider,.site-header,.menu{width:480px;left:50%;right:auto;transform:translateX(-50%)}
  .slider{position:relative;background:var(--cream);box-shadow:0 0 0 1px #17171318,0 18px 60px #17171320}
  .site-header{padding:0 20px;background:linear-gradient(180deg,#fffdf9e8 0%,#fffdf900 100%)}
  .brand{width:132px}.recruit-label{font-size:9px}
  .menu{padding:105px 34px 45px}.menu a{font-size:15px}
  .page{padding:calc(74px + 28px) 38px 60px}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:4vh}.photo-stack{width:72%;height:31vh}
  .split-photo{inset:0 0 48%}.card{margin:35vh 0 0;padding:26px}
  .page-workstyle{align-items:flex-start}.round-photo{right:-48px;bottom:-35px}
  .page-job{align-items:flex-end;padding-left:38px}.job-photo{inset:0 0 auto;height:48%}.job-number{right:24px;top:35%;font-size:105px}.page-job .content{padding-bottom:2vh}
  .page-person .content{align-self:flex-start}.people-shapes{left:0;width:auto;height:28vh}
  .scroll-inner{max-width:none;margin:0;padding-left:34px;padding-right:34px}.requirements-list div{grid-template-columns:96px 1fr}
  .page-company .content{width:auto}.company-sign{font-size:110px}.company-sign small{font-size:19px}
  .side-progress{display:none}.floating-entry{display:none}
  .desktop-rail{position:fixed;z-index:10;top:0;bottom:0;display:flex;align-items:center;width:calc((100vw - 480px)/2);pointer-events:none}
  .desktop-rail-left{left:0;justify-content:center}.desktop-rail-right{right:0;justify-content:center;flex-direction:column;gap:14px}
  .rail-logo-card{pointer-events:auto;width:min(240px,65%);padding:30px 26px;border:2px solid var(--ink);background:#fffdf9;box-shadow:8px 8px 0 #6ec36a;transform:rotate(-2deg)}
  .rail-logo-card img{display:block;width:100%;height:auto}.rail-logo-card span{display:block;margin-top:15px;text-align:center;font:700 10px/1 "DM Sans";letter-spacing:.2em}
  .rail-copy{position:relative;width:min(250px,65%);margin:0 0 20px;padding-top:17px}
  .rail-copy:before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--orange)}
  .rail-copy-en{display:block;margin-bottom:15px;font:700 10px/1 "DM Sans";letter-spacing:.18em;color:#e87812}
  .rail-copy p{margin:0;font-size:18px;line-height:1.7;font-weight:900;letter-spacing:.06em}
  .rail-copy-sub{display:block;margin-top:12px;font-size:11px;line-height:1.8;font-weight:700;letter-spacing:.08em;color:#171713a8}
  .rail-cta{pointer-events:auto;width:min(250px,65%);height:64px;border:0;padding:0 22px;display:flex;align-items:center;justify-content:space-between;font-weight:900;box-shadow:0 8px 25px #17171318;transition:transform .25s,box-shadow .25s}
  .rail-cta:hover{transform:translateY(-3px);box-shadow:0 12px 30px #1717132b}.rail-cta span{font-size:20px}
  .rail-cta-requirements{background:var(--orange);color:var(--ink)}.rail-cta-entry{background:var(--ink);color:white;font-family:"DM Sans";letter-spacing:.12em}
}

/* Center job copy within the space below its photograph. */
.page.page-job{align-items:center;padding-top:45vh}
.page.page-job .content{padding-top:0;padding-bottom:0}
@media(max-height:700px){.page.page-job{padding-top:42vh}}
@media(min-width:1000px){.page.page-job{padding-top:45vh}}

/* No diagonal styling: all cards, images, labels and decorative lines stay level. */
.photo-stack,.sticker,.salary-card,.mini-badge,.rail-logo-card{transform:none!important}
.blob{animation:none}
.support-lines{background:repeating-linear-gradient(180deg,transparent 0 45px,#fff2 45px 48px)}
.feature-list li{box-shadow:0 4px 0 var(--ink)}
.job-number{text-shadow:0 3px 0 white}
.rail-logo-card{box-shadow:0 8px 0 #6ec36a}
.menu-button[aria-expanded=true] span:first-child{transform:translateY(2px)}
.menu-button[aria-expanded=true] span:last-child{transform:translateY(-2px)}

/* Final typography rhythm — intentionally overrides compact viewport defaults. */
.page h1{line-height:1.2;letter-spacing:4px}
.page h2{line-height:1.25;letter-spacing:5px}
.page p{line-height:2;letter-spacing:.065em}
.requirements-list,.page-company dl{line-height:1.9;letter-spacing:.065em}
.requirements-list dd{line-height:2}
.entry-form{line-height:1.8;letter-spacing:.055em}
.entry-form input,.entry-form select,.entry-form textarea{line-height:1.7;letter-spacing:.04em}

/* Device-specific editorial line breaks and identical phone canvas on desktop. */
.page h1 br,.page h2 br{display:none}
.page h1 br.sp,.page h2 br.sp{display:inline}
@media(min-width:1000px){
  .page h1 br.sp,.page h2 br.sp{display:none}
  .page h1 br.pc,.page h2 br.pc{display:inline}
  .page{padding-left:24px;padding-right:24px}
  .page h2{font-size:40px}.page-job h2{font-size:40px}.card h2{font-size:36px}
  .video-copy h1{font-size:58px}
  .photo-stack{width:67%;height:28vh}
}

/* Device-specific editorial line breaks. */
.page h1 br,.page h2 br{display:none}
.page h1 br.sp,.page h2 br.sp{display:inline}
@media(min-width:1000px){
  .page h1 br.sp,.page h2 br.sp{display:none}
  .page h1 br.pc,.page h2 br.pc{display:inline}
  .page{padding-left:24px;padding-right:24px}
  .page h2{font-size:40px}
  .page-job h2{font-size:40px}.card h2{font-size:36px}
  .video-copy h1{font-size:58px}
  .photo-stack{width:67%;height:28vh}
}

/* Let Japanese headings balance naturally instead of forcing desktop line breaks. */
.page h1,.page h2{text-wrap:balance;line-break:strict}
.page h1 br,.page h2 br{display:none}
.page h1 em,.page h2 em,.page h1 span,.page h2 span,.page h1 mark,.page h2 mark{display:inline}
.scroll-page{position:relative}
.scroll-page .page-no.fixed{position:sticky;z-index:20;float:right;right:auto;bottom:18px;margin:0 80px 0 0}
@media(max-width:370px){.page h2{font-size:27px}.page p{font-size:12px}.page{padding-left:20px;padding-right:20px}.card{padding:16px}.salary-card strong{font-size:36px}}
@media(min-width:1000px){.page h2{max-width:100%}}
.video-copy .hero-lead{margin-top:18px;max-width:330px;color:white;font-size:13px;line-height:1.75;text-shadow:0 2px 12px #000}
.video-copy h1{max-width:430px;text-shadow:0 3px 20px #0008}
.video-copy h1 em{color:var(--orange)}
@media(max-height:700px){.video-copy{bottom:10vh}.video-copy .hero-lead{margin-top:12px;font-size:12px}.video-copy h1{font-size:38px}}
html,body{font-feature-settings:"palt"}
html,body,button,input,select,textarea{font-family:"Noto Sans CJK JP","Noto Sans JP",sans-serif}
body{letter-spacing:.045em}
.page h1{line-height:1.2;letter-spacing:4px}
.page h2{line-height:1.25;letter-spacing:5px}
.page p{line-height:2;letter-spacing:.065em}
.requirements-list,.page-company dl{line-height:1.9;letter-spacing:.065em}
.requirements-list dd{line-height:2}
.entry-form{line-height:1.8;letter-spacing:.055em}
.entry-form input,.entry-form select,.entry-form textarea{line-height:1.7;letter-spacing:.04em}
@media(min-width:1000px) and (max-width:1260px){.rail-copy{display:none}.rail-logo-card{padding:22px 16px}.rail-cta{width:76%;padding:0 16px}}

/* Mobile-first sizing pass: keep every slide readable inside a real phone viewport. */
.page{padding:calc(var(--header) + 18px) 24px 48px}
.page h2{font-size:clamp(29px,8.4vw,43px);line-height:1.13;letter-spacing:-.045em;margin-bottom:18px}
.page p{font-size:13px;line-height:1.78}
.eyebrow{font-size:9px;margin-bottom:14px}
.page-no{right:22px;bottom:15px}
.video-copy{left:24px;right:24px;bottom:13vh}.video-copy h1{font-size:clamp(38px,11vw,58px)}.video-note{left:24px;top:82px}
.photo-stack{width:67%;height:28vh}.sticker{left:-42px;padding:10px 13px;font-size:12px}
.card{padding:20px;margin-top:34vh}.card h2{font-size:clamp(27px,7.3vw,38px)}
.feature-list{margin:20px 0;gap:8px}.feature-list li{padding:10px 14px;font-size:12px}
.round-photo{width:48vw;height:48vw;border-width:8px}
.salary-card{margin-top:20px;padding:18px}.salary-card strong{font-size:clamp(38px,12vw,54px)}
.page-job h2{font-size:clamp(30px,8.7vw,42px);margin-bottom:12px}.page-job .content{padding-bottom:1vh}.tag{margin-top:12px;padding:6px 12px;font-size:11px}
.job-photo{height:45%}.job-number{top:33%;font-size:20vw}
.mini-badge{width:76px;height:76px;font-size:12px;bottom:8vh}
.page-person .content{align-self:center;padding-bottom:23vh}.people-shapes{height:22vh}
.page-company dl{margin:18px 0}.page-company dl div{grid-template-columns:78px 1fr;padding:9px 0;font-size:12px}
.page-closing .content{padding-bottom:2vh}.page-closing .primary-button{margin-top:17px}
.primary-button,.submit-button{padding:15px 20px}

@media(max-height:700px){
  :root{--header:62px}.site-header{height:62px}.brand{width:112px}.menu-button{width:40px;height:40px}
  .page{padding:74px 22px 38px}.page h2{font-size:clamp(26px,7.5vw,35px);margin-bottom:12px}.page p{font-size:12px;line-height:1.65}.eyebrow{margin-bottom:10px}
  .photo-stack{height:24vh}.card{margin-top:31vh;padding:16px}.card h2{font-size:29px}
  .feature-list{margin:12px 0}.feature-list li{padding:8px 12px}.round-photo{width:39vw;height:39vw}
  .salary-card{margin-top:12px;padding:14px}.salary-card strong{font-size:40px}
  .page-job h2{font-size:31px}.job-photo{height:42%}.job-number{top:31%}
  .page-person .content{padding-bottom:19vh}.people-shapes{height:18vh}
}

@media(min-width:1000px){
  .page{padding:92px 34px 48px}
  .page h2{font-size:41px}.page p{font-size:13px}.page-job h2{font-size:40px}.card h2{font-size:36px}
  .video-copy{left:34px;right:34px}.video-copy h1{font-size:56px}.video-note{left:34px}
  .photo-stack{width:68%;height:30vh}.salary-card strong{font-size:52px}.job-number{font-size:96px}
  .round-photo{width:225px;height:225px}.scroll-inner{padding-top:100px}
  .blob-orange{width:280px;height:280px;right:-105px;top:-58px}.blob-green{width:170px;height:170px;left:-95px;bottom:-35px}
  .orbit{width:340px;height:340px}.orbit-a{right:-170px;top:-48px}.orbit-b{left:-185px;bottom:-48px;width:265px;height:265px}
  .people-shapes i{width:105px}.company-sign{right:-24px}
}

/* Final typography rhythm — intentionally overrides compact viewport defaults. */
.page h1{line-height:1.2;letter-spacing:4px}
.page h2{line-height:1.25;letter-spacing:5px}
.page p{line-height:2;letter-spacing:.065em}
.requirements-list,.page-company dl{line-height:1.9;letter-spacing:.065em}
.requirements-list dd{line-height:2}
.entry-form{line-height:1.8;letter-spacing:.055em}
.entry-form input,.entry-form select,.entry-form textarea{line-height:1.7;letter-spacing:.04em}

/* Final responsive breaks: SP by default, PC inside the centered phone canvas. */
.page h1 br,.page h2 br{display:none}
.page h1 br.sp,.page h2 br.sp{display:inline}
@media(min-width:1000px){
  .page h1 br.sp,.page h2 br.sp{display:none}
  .page h1 br.pc,.page h2 br.pc{display:inline}
  .page{padding-left:24px;padding-right:24px}
  .page h2{font-size:40px}.page-job h2{font-size:40px}.card h2{font-size:36px}
  .video-copy h1{font-size:58px}
  .photo-stack{width:67%;height:28vh}
}

/* Unified spacing system */
:root{--screen-x:28px;--screen-top:88px;--screen-bottom:52px;--space-xs:10px;--space-sm:16px;--space-md:24px;--space-lg:32px;--space-xl:44px}
.page:not(.page-video):not(.scroll-page){padding:var(--screen-top) var(--screen-x) var(--screen-bottom)}
.page .content{width:100%;margin-left:auto;margin-right:auto}
.page .eyebrow{margin:0 0 var(--space-sm)}
.page h1,.page h2{margin-top:0;margin-bottom:var(--space-md)}
.page p{margin-top:0;margin-bottom:0}
.feature-list{margin:var(--space-md) 0 0;gap:var(--space-xs)}
.salary-card{margin-top:var(--space-md)}
.tag{margin-top:var(--space-sm)}
.primary-button{margin-top:var(--space-md)}
.page-closing .primary-button{margin-top:var(--space-md)}
.page-workstyle{align-items:center}
.page-workstyle .content{padding-bottom:150px}
.page-pay .content{padding-bottom:8px}
.page-job .content{padding:0 0 8px}
.page-person .content{align-self:center;padding-bottom:180px}
.card{margin-top:36vh}
.scroll-inner{padding:96px var(--screen-x) 112px;min-height:120vh}
.scroll-inner>.eyebrow{margin-bottom:var(--space-sm)}
.scroll-inner>h2{margin-bottom:var(--space-xs)}
.scroll-hint{margin-bottom:0!important}
.requirements-list{margin:var(--space-lg) 0}
.requirements-list div{padding:18px 0;gap:var(--space-sm)}
.entry-form{margin-top:var(--space-lg);gap:var(--space-md)}
.entry-form input,.entry-form select,.entry-form textarea{margin-top:var(--space-xs);padding:15px}
.submit-button{margin-top:var(--space-xs)}
.page-entry footer{margin-top:var(--space-xl);padding-top:var(--space-lg)}
.video-copy{left:var(--screen-x);right:var(--screen-x);bottom:12vh}
.video-copy h1{margin:var(--space-sm) 0 0}
.video-copy .hero-lead{margin-top:var(--space-md)}
@media(max-height:700px){
  :root{--screen-x:22px;--screen-top:70px;--screen-bottom:38px;--space-sm:12px;--space-md:18px;--space-lg:24px;--space-xl:34px}
  .page-workstyle .content{padding-bottom:105px}
  .page-person .content{padding-bottom:125px}
  .card{margin-top:32vh;padding:18px}
  .scroll-inner{padding-top:76px;padding-bottom:90px}
  .video-copy{bottom:9vh}
}
@media(min-width:1000px){
  :root{--screen-x:28px;--screen-top:88px;--screen-bottom:52px}
  .page:not(.page-video):not(.scroll-page){padding:var(--screen-top) var(--screen-x) var(--screen-bottom)}
  .scroll-inner{padding:96px var(--screen-x) 112px}
  .video-copy{left:var(--screen-x);right:var(--screen-x)}
}

/* Job copy starts with a deliberate gap below the photograph. */
.page.page-job{align-items:flex-start;padding-top:calc(45vh + 52px)!important}
.page.page-job .content{padding-top:0;padding-bottom:0}
@media(max-height:700px){.page.page-job{padding-top:calc(42vh + 52px)!important}}
@media(min-width:1000px){.page.page-job{padding-top:calc(45vh + 52px)!important}}

/* Workstyle image becomes a stable horizontal media card. */
.page.page-workstyle{align-items:flex-start}
.page.page-workstyle .content{padding-bottom:0}
.page.page-workstyle .round-photo{left:var(--screen-x)!important;right:var(--screen-x)!important;bottom:var(--screen-bottom)!important;width:auto!important;height:170px!important;max-width:none;max-height:none;border:0;border-radius:20px;object-position:center 55%}
@media(max-height:700px){.page.page-workstyle .round-photo{height:145px!important}}
@media(min-width:1000px){.page.page-workstyle .round-photo{height:170px!important}}

.scroll-inner{padding:96px 0 112px;min-height:120vh}
@media(max-height:700px){
  .scroll-inner{padding-top:0;padding-bottom:90px}
}

.primary-button,.submit-button,.floating-entry,.rail-cta{align-items:center;line-height:1.2}
.primary-button,.submit-button{min-height:60px}
.primary-button span,.submit-button span,.floating-entry span,.rail-cta span{display:inline-flex;align-items:center;justify-content:center;line-height:1}

.page.page-workstyle .round-photo{left:28px!important;right:auto!important;width:calc(100% - 56px)!important;height:210px!important;object-fit:cover!important;object-position:center 55%;border:5px solid var(--green)!important}
@media(max-height:700px){.page.page-workstyle .round-photo{left:22px!important;width:calc(100% - 44px)!important;height:180px!important}}
@media(min-width:1000px){.page.page-workstyle .round-photo{left:28px!important;width:424px!important;height:210px!important}}

/* Salary copy sits directly on a bright white overlay; no large floating panel. */
.page.page-pay::before{background:linear-gradient(90deg,rgba(255,252,246,.97) 0%,rgba(255,252,246,.88) 58%,rgba(255,252,246,.28) 100%),linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,250,242,.72) 100%);backdrop-filter:none}
.page.page-pay .content{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.page.page-pay .content>p{font-weight:500}
.page.page-pay .salary-card{background:rgba(255,255,255,.94);backdrop-filter:none}

/* Bright salary treatment */
.page.page-pay{background-color:#f8f4ec;color:var(--ink)}
.page.page-pay::before{background:linear-gradient(180deg,rgba(255,252,246,.04) 0%,rgba(255,250,242,.28) 42%,rgba(255,248,238,.94) 100%);backdrop-filter:blur(.5px)}
.page.page-pay .content{color:var(--ink);text-shadow:none}
.page.page-pay h2 span{color:#e87700}
.page.page-pay .salary-card{background:rgba(255,255,255,.9);border-color:var(--orange);box-shadow:0 10px 26px rgba(113,80,38,.14);backdrop-filter:blur(10px)}
.page.page-pay .content{padding:24px;background:rgba(255,250,242,.82);border:1px solid rgba(255,255,255,.9);border-radius:26px;box-shadow:0 14px 38px rgba(92,69,38,.13);backdrop-filter:blur(10px)}
.page.page-pay .content>p{font-weight:500}
.page.page-pay .salary-card{margin-top:20px;background:rgba(255,255,255,.96)}
@media(max-height:700px){.page.page-pay .content{padding:20px;border-radius:22px}}

/* Salary section: bright portrait background with a soft cream overlay. */
.page.page-pay{background:#f8f4ec url("assets/salary-evaluation-v2.jpg") center/cover no-repeat;color:var(--ink)}
.page.page-pay::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,252,246,.04) 0%,rgba(255,250,242,.28) 42%,rgba(255,248,238,.94) 100%);backdrop-filter:blur(.5px)}
.page.page-pay .content{position:relative;z-index:2;color:var(--ink);text-shadow:none}
.page.page-pay .salary-card{background:rgba(255,255,255,.9);color:var(--ink);border:2px solid var(--orange);border-radius:20px;box-shadow:0 10px 26px rgba(113,80,38,.14);backdrop-filter:blur(10px);text-shadow:none}
.page.page-pay .salary-card strong{color:#dd6f00}

/* Final salary layout: white overlay only, without a large copy panel. */
.page.page-pay::before{background:linear-gradient(90deg,rgba(255,252,246,.97) 0%,rgba(255,252,246,.88) 58%,rgba(255,252,246,.28) 100%),linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,250,242,.72) 100%);backdrop-filter:none}
.page.page-pay .content{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.page.page-pay .salary-card{margin-top:20px;background:rgba(255,255,255,.94);backdrop-filter:none}
@media(max-height:700px){.page.page-pay .content{padding:0;border-radius:0}}

/* White editorial pages with soft, rounded corner objects. */
.page.orange,.page.green,.page-company{background:#fff;color:var(--ink)}
.page.orange::before,.page.green::before,.page-company::before,
.page.orange::after,.page.green::after,.page-company::after{content:"";position:absolute;z-index:0;pointer-events:none}
.page.orange::before,.page.green::before,.page-company::before{width:132px;height:150px;right:-58px;top:82px;border-radius:44% 56% 62% 38% / 37% 44% 56% 63%;background:var(--orange)}
.page.orange::after,.page.green::after,.page-company::after{width:150px;height:168px;left:-72px;bottom:-54px;border-radius:58% 42% 35% 65% / 52% 43% 57% 48%;background:var(--green)}
.page.green::before,.page-company::before{background:var(--green)}
.page.green::after,.page-company::after{background:var(--orange)}
.page.orange::before{box-shadow:52px 34px 0 -32px #ffc044,78px 2px 0 -51px #79cee0}
.page.green::before,.page-company::before{box-shadow:54px 30px 0 -34px #ffc044,82px 6px 0 -54px #79cee0}
.page.orange::after{box-shadow:-42px -24px 0 -44px #ffc044}
.page.green::after,.page-company::after{box-shadow:-42px -24px 0 -44px #79cee0}
.page.orange::before,.page.green::before,.page-company::before{animation:corner-wiggle-a 8s ease-in-out infinite alternate}
.page.orange::after,.page.green::after,.page-company::after{animation:corner-wiggle-b 10s ease-in-out -2s infinite alternate}
@keyframes corner-wiggle-a{
  0%{transform:translate3d(0,0,0) scale(1);border-radius:44% 56% 62% 38% / 37% 44% 56% 63%}
  50%{transform:translate3d(8px,7px,0) scale(1.05,.96);border-radius:57% 43% 48% 52% / 50% 61% 39% 50%}
  100%{transform:translate3d(-3px,14px,0) scale(.97,1.04);border-radius:39% 61% 55% 45% / 61% 42% 58% 39%}
}
@keyframes corner-wiggle-b{
  0%{transform:translate3d(0,0,0) scale(1);border-radius:58% 42% 35% 65% / 52% 43% 57% 48%}
  50%{transform:translate3d(-10px,-8px,0) scale(.96,1.05);border-radius:41% 59% 54% 46% / 63% 38% 62% 37%}
  100%{transform:translate3d(-3px,-15px,0) scale(1.04,.97);border-radius:64% 36% 44% 56% / 40% 58% 42% 60%}
}
.orange h2 span,.green h2 span{color:var(--orange)}

/* Original, featureless-face illustrations for the editorial message pages. */
.page-statement .giant-word,#voice .orbit,.page-support .support-lines,.page-support .mini-badge{display:none}
.page-statement,#voice,.page-support{align-items:flex-start}
.page-statement .content,#voice .content,.page-support .content{margin:0;max-width:none;z-index:3}
.section-illustration{position:absolute;z-index:2;left:50%;bottom:48px;transform:translateX(-50%);display:block;width:calc(100% - 56px);height:300px;object-fit:contain;object-position:center;background:transparent}
.page-statement .section-illustration{height:292px}
#voice .section-illustration{height:278px}
.page-support .section-illustration{height:284px}
@media(max-height:700px){
  .section-illustration{bottom:34px;width:calc(100% - 44px);height:220px}
  .page-statement .section-illustration{height:214px}
  #voice .section-illustration{height:202px}
  .page-support .section-illustration{height:208px}
  .page-statement p,#voice p,.page-support p{font-size:13px;line-height:1.8}
}
@media(min-width:1000px){
  .section-illustration{width:424px}
}
@media(prefers-reduced-motion:reduce){
  .page.orange::before,.page.green::before,.page-company::before,
  .page.orange::after,.page.green::after,.page-company::after{animation:none}
}

/* Keep copy and illustration together as one vertically centered composition. */
.page-statement,#voice,.page-support{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:30px}
.page-statement .content,#voice .content,.page-support .content{flex:0 0 auto}
.page-person{background:#fafafa}
.page-closing .eyebrow{margin-bottom:40px}
.menu{background:#fff}

/* Prominent recruitment-status badges on both job pages. */
.page-job .tag{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:10px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--orange);color:var(--ink);font-size:14px;font-weight:900;line-height:1;letter-spacing:.08em;box-shadow:4px 4px 0 var(--ink)}
.page-job .tag::before{content:"";display:block;width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid var(--ink)}
.page-job.reverse .tag{background:var(--green)}
@media(max-height:700px){.page-job .tag{margin-top:16px;padding:9px 14px;font-size:13px}}

/* Circular status badge beside each job title. */
.page-job .job-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.page-job .job-heading-row h2{flex:1;min-width:0;margin-bottom:0}
.page-job .job-heading-row .tag{display:grid;place-items:center;flex:0 0 82px;width:82px;height:82px;margin:0;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--orange);font-size:13px;line-height:1.2;letter-spacing:.06em;text-align:center;box-shadow:none}
.page-job .job-heading-row .tag::before{display:none}
.page-job.reverse .job-heading-row .tag{background:var(--green)}
@media(max-height:700px){
  .page-job .job-heading-row{gap:10px;margin-bottom:14px}
  .page-job .job-heading-row .tag{flex-basis:72px;width:72px;height:72px;margin:0;padding:0;font-size:12px}
}

/* Reset job labels to the original understated treatment. */
.page-job .tag,.page-job.reverse .tag{display:inline-block;width:auto;height:auto;margin-top:18px;padding:7px 15px;border:1px solid var(--ink);border-radius:100px;background:transparent;color:var(--ink);font-size:inherit;font-weight:700;line-height:inherit;letter-spacing:inherit;box-shadow:none}
.page-job .tag::before{display:none}
@media(max-height:700px){.page-job .tag,.page-job.reverse .tag{width:auto;height:auto;margin-top:18px;padding:7px 15px;font-size:inherit}}
.page-job .eyebrow+.tag,.page-job.reverse .eyebrow+.tag{display:table;margin-top:0;margin-bottom:18px}
.page-job .tag+h2{margin-top:0}
@media(max-height:700px){.page-job .eyebrow+.tag,.page-job.reverse .eyebrow+.tag{margin-top:0;margin-bottom:14px}}

/* Gentle organic motion for WHO WE WANT shapes. */
.page-person .people-shapes i{transform-origin:50% 100%;animation:people-shape-float 5.8s ease-in-out infinite alternate;will-change:transform,border-radius}
.page-person .people-shapes i:nth-child(2){animation-delay:-2.1s;animation-duration:6.6s}
.page-person .people-shapes i:nth-child(3){animation-delay:-4s;animation-duration:5.2s}
@keyframes people-shape-float{
  0%{transform:translateY(0) scaleY(1) scaleX(1);border-radius:100px 100px 0 0}
  50%{transform:translateY(-8px) scaleY(1.05) scaleX(.96);border-radius:70px 110px 0 0}
  100%{transform:translateY(-2px) scaleY(.97) scaleX(1.04);border-radius:115px 72px 0 0}
}
@media(prefers-reduced-motion:reduce){.page-person .people-shapes i{animation:none}}

/* WHO WE WANT: grow upward once when the page becomes active. */
.page-person .people-shapes i,.page-person .people-shapes i:nth-child(2),.page-person .people-shapes i:nth-child(3){transform:scaleY(0);transform-origin:50% 100%;animation:none;border-radius:100px 100px 0 0;will-change:transform}
.page-person.active .people-shapes i{animation:people-shape-grow .9s cubic-bezier(.22,1,.36,1) .12s forwards}
.page-person.active .people-shapes i:nth-child(2){animation-delay:.28s;animation-duration:1.05s}
.page-person.active .people-shapes i:nth-child(3){animation-delay:.44s;animation-duration:.85s}
@keyframes people-shape-grow{
  0%{transform:scaleY(0)}
  70%{transform:scaleY(1.06)}
  100%{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){.page-person .people-shapes i,.page-person.active .people-shapes i{transform:scaleY(1);animation:none}}
.site-header .menu-button{margin-left:auto}

/* Requirements compliance: no tilted decorative components. */
.rail-logo-card,.photo-stack,.sticker,.salary-card,.mini-badge{transform:none!important}
.workstyle-note{margin-top:14px!important;font-size:12px!important;line-height:1.75!important}
.person-kicker{display:table;margin:0 0 14px!important;padding:6px 12px;border:1px solid var(--ink);border-radius:999px;font-size:12px!important;font-weight:700;line-height:1.2!important;letter-spacing:.06em!important}

/* Fit the complete supplied copy into short mobile swipe pages. */
@media(max-height:700px){
  .video-copy{bottom:17vh}
  .video-copy h1{font-size:38px;line-height:1.12}
  .video-copy .hero-lead{margin-top:14px;font-size:12px;line-height:1.75;letter-spacing:.035em}
  .page-statement,#voice,.page-support{gap:12px;padding-top:72px!important;padding-bottom:32px!important}
  .page-statement .section-illustration{height:214px}
  #voice .section-illustration{height:202px}
  .page-support .section-illustration{height:208px}
  .page-statement p,#voice p,.page-support p{font-size:12px;line-height:1.68}
  .page-culture .card{margin-top:29vh;padding:0}
  .page-culture .card h2{font-size:28px;line-height:1.18;margin-bottom:12px}
  .page-culture .card p{font-size:12px;line-height:1.65}
  .page-workstyle .content{padding-bottom:0}
  .page-workstyle h2{font-size:28px;line-height:1.18;margin-bottom:12px}
  .page-workstyle .feature-list{margin:12px 0 0;gap:6px}
  .page-workstyle .feature-list li{padding:8px 13px;font-size:12px}
  .page-workstyle .workstyle-note{margin-top:20px!important;font-size:11.5px!important;line-height:1.55!important}
  .page.page-workstyle .round-photo{height:180px!important;bottom:30px!important}
  .page-pay h2{font-size:29px;line-height:1.2;margin-bottom:12px}
  .page-pay .content>p{font-size:11.5px;line-height:1.65}
  .page-pay .salary-card{margin-top:12px;padding:15px}
  .page-pay .salary-card strong{font-size:38px}
  .page.page-job{padding-top:calc(42vh + 36px)!important}
  .page-job h2{font-size:31px;line-height:1.18;margin-bottom:10px}
  .page-job .eyebrow+.tag,.page-job.reverse .eyebrow+.tag{margin-bottom:10px}
  .page-job .content>p:last-child{font-size:11.5px;line-height:1.62}
  .page-person .content{padding-bottom:104px}
  .page-person h2{font-size:28px;line-height:1.17;margin-bottom:12px}
  .page-person .content>p:last-child{font-size:11.5px;line-height:1.62}
  .page-person .person-kicker{margin-bottom:10px!important}
  .page-company{padding-top:76px!important;padding-bottom:34px!important}
  .page-company h2{font-size:30px;margin-bottom:12px}
  .page-company dl{margin:10px 0;font-size:11.5px;line-height:1.55}
  .page-company dl div{grid-template-columns:70px 1fr;padding:7px 0}
}
.floating-entry{transition:opacity .25s ease,transform .25s ease}
.floating-entry.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none}

/* P1 message moved out of the movie-only HERO. */
.page-message{background:#fff;align-items:center}
.page-message::before,.page-message::after{content:"";position:absolute;pointer-events:none;border-radius:50%}
.page-message::before{width:150px;height:150px;right:-72px;top:92px;background:var(--green)}
.page-message::after{width:118px;height:118px;left:-58px;bottom:54px;background:var(--orange)}
.page-message .message-copy{width:100%}
.page-message .message-copy h2 span{color:var(--orange)}
@media(max-height:700px){
  .page-message{padding-top:84px!important;padding-bottom:54px!important}
  .page-message .message-copy h2{font-size:35px;line-height:1.2;margin-bottom:20px}
  .page-message .message-copy>p:last-child{font-size:13px;line-height:1.85}
}

/* P1 inherits the former HERO composition over its poster image. */
.page.page-message{padding:0;display:block;background:#111;color:#fff}
.page-message::before,.page-message::after{display:none}
.message-bg{position:absolute;inset:0}
.message-bg img{display:block;width:100%;height:100%;object-fit:cover}
.page-message .video-copy{position:absolute;z-index:3;left:var(--screen-x);right:var(--screen-x);bottom:12vh;width:auto}
.page-message .video-copy h1{font-size:clamp(42px,11vw,58px);line-height:1.03;letter-spacing:-.06em;margin:0}
.page-message .video-copy .hero-lead{margin-top:var(--space-md)}
@media(max-height:700px){
  .page.page-message{padding:0!important}
  .page-message .video-copy{bottom:14vh}
  .page-message .video-copy h1{font-size:38px;line-height:1.12}
  .page-message .video-copy .hero-lead{margin-top:14px;font-size:12px;line-height:1.75;letter-spacing:.035em}
}

/* Apply Japanese proportional alternate metrics to every text element. */
html,body,body *,body *::before,body *::after{
  font-feature-settings:"palt" 1!important;
  -webkit-font-feature-settings:"palt" 1!important;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

/* Do not cancel palt with the former tightly tracked HERO heading. */
.page-message .video-copy h1{letter-spacing:.08em}
.page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{position:relative;left:auto;bottom:auto;transform:none;width:100%;flex:0 0 auto;margin:0 auto}
@media(max-height:700px){
  .page-statement,#voice,.page-support{gap:22px;padding-top:82px!important;padding-bottom:46px!important}
}
@media(min-width:1000px){
  .page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{width:100%}
}

.scroll-cue.next-trigger{left:50%;right:auto;transform:translateX(-50%)}

/* iOS Safari: stable viewport, safe areas, native control reset and JP font fallback. */
html{height:-webkit-fill-available}
body{min-height:100svh;min-height:-webkit-fill-available;-webkit-text-size-adjust:100%}
.slider,.page,.scroll-page{height:100svh;min-height:100svh}
.slider,.scroll-page{-webkit-overflow-scrolling:touch}
.site-header{top:env(safe-area-inset-top,0px)}
.menu{padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))}
button,input,select,textarea{-webkit-appearance:none;appearance:none;border-radius:0;font-family:"Noto Sans CJK JP","Noto Sans JP",sans-serif;font-synthesis:none}
button{color:inherit;-webkit-text-fill-color:currentColor}
.primary-button,.submit-button{font-family:"Noto Sans CJK JP","Noto Sans JP",sans-serif}
.floating-entry{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;font-family:"DM Sans","Noto Sans CJK JP","Noto Sans JP",sans-serif}
.salary-card em{font-family:"Noto Sans CJK JP","Noto Sans JP",sans-serif}
.menu-kicker,.eyebrow,.recruit-label,.video-copy small,.page-no,.feature-list b,.job-number,.company-sign,.side-progress,.rail-copy-en,.rail-cta-entry{font-family:"DM Sans","Noto Sans CJK JP","Noto Sans JP",sans-serif}
@supports(height:100dvh){
  @media(min-width:1000px){.slider,.page,.scroll-page{height:100dvh;min-height:100dvh}}
}

/* Job pages: anchor copy to the photo edge instead of Safari's variable vh. */
.page.page-job{display:block;padding:0 var(--screen-x) var(--screen-bottom)!important}
.page.page-job .content{position:absolute;z-index:3;top:calc(45% + 28px);left:var(--screen-x);right:var(--screen-x);width:auto;margin:0;padding:0}
@media(max-height:700px){
  .page.page-job .job-photo{height:42%}
  .page.page-job .job-number{top:31%}
  .page.page-job .content{top:calc(42% + 22px)}
}
@media(min-width:1000px){
  .page.page-job .content{top:calc(45% + 28px)}
}

/* Compact menu with a single, prominent application path. */
.menu{display:flex;flex-direction:column}
.menu ol{margin:22px 0 26px}
.menu a{align-items:center;min-height:54px;padding:13px 2px;font-size:15px;letter-spacing:.08em}
.menu a small{font-size:16px;line-height:1}
.menu-entry{width:100%;min-height:86px;margin-top:auto;padding:17px 20px;border:0;border-radius:18px;background:var(--orange);color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;display:flex;align-items:center;justify-content:space-between;text-align:left;box-shadow:0 10px 28px #9b541d26}
.menu-entry span{display:flex;flex-direction:column;gap:7px;font:700 21px/1 "DM Sans","Noto Sans CJK JP","Noto Sans JP",sans-serif;letter-spacing:.14em}
.menu-entry small{font:700 11px/1.2 "Noto Sans CJK JP","Noto Sans JP",sans-serif;letter-spacing:.1em}
.menu-entry b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;font-size:20px}
@media(min-width:1000px){.menu-entry{min-height:82px}}

/* Job pages: compact service labels bridge photography and copy. */
.page-job::after{content:"WATER WORKS";position:absolute;z-index:0;right:-5px;bottom:3px;color:#ff99330c;font:900 54px/.85 "DM Sans",sans-serif;letter-spacing:-.07em;white-space:nowrap;pointer-events:none}
.page-job.reverse::after{content:"MAINTENANCE";color:#6ec36a10;font-size:45px}
.job-photo-labels{position:absolute;z-index:5;top:calc(45% - 17px);left:var(--screen-x);display:flex;gap:6px;margin:0;padding:0;list-style:none}
.job-photo-labels li{display:flex;align-items:center;min-height:34px;padding:0 11px;border:1px solid #17171326;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 6px 18px #17171314;font-size:10px;font-weight:700;letter-spacing:.06em}
.job-photo-labels li:first-child{border-color:var(--orange)}
.page-job.reverse .job-photo-labels li:first-child{border-color:var(--green)}
@media(max-height:700px){
  .job-photo-labels{top:calc(42% - 15px);gap:5px}
  .job-photo-labels li{min-height:30px;padding:0 9px;font-size:9px}
}

/* Illustration-led closing CTA. */
.page.page-closing{display:block;padding:var(--screen-top) var(--screen-x) var(--screen-bottom);background:#fff;color:var(--ink)}
.page-closing .content{position:relative;z-index:4;padding:0}
.page-closing .eyebrow{margin-bottom:18px}
.page-closing h2{margin-bottom:13px;font-size:clamp(32px,8.8vw,42px)}
.page-closing h2 em{color:var(--orange)}
.page-closing .content>p:not(.eyebrow){font-weight:700}
.page-closing .primary-button{width:100%;min-height:78px;margin-top:20px;padding:14px 18px;border-radius:18px;background:var(--orange);color:var(--ink);box-shadow:0 10px 28px #9b541d24}
.page-closing .primary-button>span{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:700 20px/1 "DM Sans","Noto Sans CJK JP","Noto Sans JP",sans-serif;letter-spacing:.14em}
.page-closing .primary-button small{font:700 10px/1.2 "Noto Sans CJK JP","Noto Sans JP",sans-serif;letter-spacing:.1em}
.page-closing .primary-button b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;font-size:18px}
.closing-illustration{position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);width:calc(100% - 64px);height:245px;object-fit:contain;object-position:center bottom}
.closing-orb{position:absolute;z-index:1;border-radius:50%;pointer-events:none;animation:corner-wiggle-a 8s ease-in-out infinite alternate}
.closing-orb-a{width:122px;height:122px;right:-52px;top:76px;background:var(--orange)}
.closing-orb-b{width:138px;height:138px;left:-70px;bottom:-42px;background:var(--green);animation-name:corner-wiggle-b}
@media(max-height:700px){
  .page.page-closing{padding-top:72px}
  .page-closing h2{font-size:30px;line-height:1.18}
  .page-closing .primary-button{min-height:68px;margin-top:15px}
  .closing-illustration{height:195px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.closing-orb{animation:none}}

/* Wide illustration crops: prioritize faces, hands and work motifs. */
.page-statement .section-illustration,
#voice .section-illustration,
.page-support .section-illustration{width:calc(100% + 40px);height:190px;margin-left:-20px;object-fit:cover;border-radius:24px}
.page-statement .section-illustration{object-position:center 35%}
#voice .section-illustration{object-position:center 44%}
.page-support .section-illustration{object-position:center 42%}
.closing-illustration{width:calc(100% - 40px);height:210px;object-fit:cover;object-position:center 42%;border-radius:24px}
@media(max-height:700px){
  .page-statement .section-illustration,
  #voice .section-illustration,
  .page-support .section-illustration{height:158px}
  .closing-illustration{height:168px}
}
@media(min-width:1000px){
  .page-statement .section-illustration,
  #voice .section-illustration,
  .page-support .section-illustration{width:calc(100% + 40px)}
}

/* Larger editorial illustrations and organic job-page accents. */
.page-statement .section-illustration,
#voice .section-illustration,
.page-support .section-illustration{width:calc(100% + 96px);height:220px;margin-left:-48px}
.closing-illustration{width:calc(100% + 8px);height:230px}
.page-job::after{content:none}
.job-orb{position:absolute;z-index:1;display:block;pointer-events:none;will-change:transform,border-radius;animation:job-orb-wiggle 8s ease-in-out infinite alternate}
.job-orb-a{right:-54px;top:53%;width:126px;height:112px;background:var(--orange);border-radius:48% 52% 62% 38% / 40% 46% 54% 60%}
.job-orb-b{left:-62px;bottom:-34px;width:136px;height:126px;background:var(--green);border-radius:58% 42% 38% 62% / 55% 39% 61% 45%;animation-delay:-3.5s;animation-duration:10s}
.page-job.reverse .job-orb-a{background:var(--green)}
.page-job.reverse .job-orb-b{background:var(--orange)}
@keyframes job-orb-wiggle{
  0%{transform:translate3d(0,0,0) scale(1);border-radius:48% 52% 62% 38% / 40% 46% 54% 60%}
  50%{transform:translate3d(-8px,7px,0) scale(1.06,.95);border-radius:61% 39% 45% 55% / 56% 38% 62% 44%}
  100%{transform:translate3d(4px,14px,0) scale(.96,1.05);border-radius:40% 60% 54% 46% / 38% 58% 42% 62%}
}
@media(max-height:700px){
  .page-statement .section-illustration,
  #voice .section-illustration,
  .page-support .section-illustration{height:178px}
  .closing-illustration{height:185px}
  .job-orb-a{top:51%;width:110px;height:98px}
}
@media(min-width:1000px){
  .page-statement .section-illustration,
  #voice .section-illustration,
  .page-support .section-illustration{width:calc(100% + 96px)}
}
@media(prefers-reduced-motion:reduce){.job-orb{animation:none}}

/* Keep the regenerated landscape illustrations at their intrinsic ratio. */
.page-statement .section-illustration,
#voice .section-illustration,
.page-support .section-illustration{height:auto;max-height:none}

/* Editorial illustrations sit on the bottom edge; copy keeps its own rhythm above. */
.page-statement,#voice,.page-support{display:block;padding-top:var(--screen-top)!important;padding-bottom:0!important}
.page-statement .content,#voice .content,.page-support .content{position:relative;z-index:3;top:32px;width:100%;margin:0}
.page-statement .section-illustration,
#voice .section-illustration,
.page-support .section-illustration{position:absolute;z-index:2;left:50%;bottom:-30px;width:calc(100% + 56px);height:auto;margin:0;transform:translateX(-50%);object-fit:contain;object-position:center bottom;border-radius:0}
.page-statement::before{top:132px;right:-76px}
.closing-illustration{bottom:-18px;width:calc(100% + 8px);height:auto;max-height:none;object-fit:contain;object-position:center bottom;border-radius:0}
@media(max-height:700px){
  .page-statement,#voice,.page-support{padding-top:92px!important}
  .page-statement .content,#voice .content,.page-support .content{top:40px}
  .page-statement .section-illustration,
  #voice .section-illustration,
  .page-support .section-illustration{bottom:-30px;width:calc(100% + 40px);height:auto}
  .closing-illustration{bottom:-28px;height:auto}
}

.page.orange::after,.page.green::after,.page-company::after{bottom:-30px}

/* Job-specific character art may overlap the copy while remaining readable. */
.job-illustration{position:absolute;z-index:2;right:-44px;bottom:-18px;width:230px;height:230px;object-fit:contain;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
.page-job .content{z-index:3}
@media(max-height:700px){.job-illustration{right:-38px;bottom:-22px;width:205px;height:205px}}

/* Job-page composition: character at copy top, organic accent and footer word. */
.job-illustration{z-index:2;top:calc(45% + 32px);right:18px;bottom:auto;width:132px;height:132px;-webkit-mask-image:none;mask-image:none;filter:none}
.page-job::after{content:"CONSTRUCTION";z-index:0;right:-4px;bottom:-3px;color:#fd993426;font:900 42px/.85 "DM Sans",sans-serif;letter-spacing:-.055em;white-space:nowrap}
.page-job.reverse::after{content:"MAINTENANCE";color:#6ec36a2e;font-size:43px}
.page-job .job-orb-b{display:block;z-index:1;left:-62px;bottom:-30px;width:136px;height:126px;background:var(--green)}
.page-job.reverse .job-orb-b{background:var(--orange)}
@media(max-height:700px){
  .job-illustration{top:calc(39% + 34px);right:18px;bottom:auto;width:134px;height:134px}
  .page-job::after{font-size:38px;bottom:-2px}
  .page-job.reverse::after{font-size:39px}
}

/* Closing headline follows the same jump scale and rhythm as P1. */
.page-closing h2{font-size:clamp(42px,11vw,58px);line-height:1.03;letter-spacing:.08em;margin-bottom:18px}
.page-closing h2 em{font-size:1em;line-height:inherit;letter-spacing:inherit}
@media(max-height:700px){.page-closing h2{font-size:38px;line-height:1.12;letter-spacing:.08em}}

/* Vertically balance the closing copy between the header and illustration. */
.page-closing .content{top:clamp(38px,6.5vh,58px)}
@media(max-height:700px){.page-closing .content{top:38px}}
.closing-orb-b{bottom:68px}
.page.orange::after,.page.green::after,.page-company::after{bottom:110px}
@media(min-width:1000px){
  .page-statement .content,#voice .content,.page-support .content{top:clamp(90px,13vh,130px)}
}
@media(min-width:1000px){
  .page-closing h2{white-space:nowrap}
}

/* 2026-09-07 supplied illustration set: keep source PNGs untouched. */
.page.page-message{background:#fff;color:var(--ink)}
.page-message .message-bg{inset:auto 0 -22px;height:70%;background:#fff}
.page-message .message-bg img{object-fit:contain;object-position:center bottom}
.page-message .video-copy{top:clamp(92px,13vh,124px);bottom:auto;color:var(--ink)}
.page-message .video-copy h1{font-size:clamp(38px,10.2vw,52px);text-shadow:0 2px 14px #fff,0 0 4px #fff}
.page-message .video-copy .hero-lead{max-width:94%;padding:10px 12px;background:#fffffff0;border-radius:12px}

.page-culture{background:#fff}
.page-culture .split-photo{background:#fff}
.page-culture .split-photo img{object-fit:contain;object-position:center bottom;padding:12px 20px 0}

.page-workstyle .round-photo{left:0!important;right:0!important;bottom:-18px!important;width:100%!important;height:245px!important;max-width:none!important;max-height:none!important;padding:0 14px;object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:transparent}

.page.page-pay{background:#fff;color:var(--ink)}
.page.page-pay::before{background:linear-gradient(180deg,#fff 0%,#fffffff5 58%,#fffaf2c9 100%)}
.pay-illustration{position:absolute;z-index:1;right:-52px;bottom:-40px;width:72%;height:52%;object-fit:contain;object-position:right bottom;pointer-events:none}
.page.page-pay .content{z-index:2}
.page.page-pay .content>p{max-width:92%;padding-right:5px}

.page-job .job-photo{background:#fffaf4}
.page-job.reverse .job-photo{background:#f4fbf2}
.page-job .job-photo img{object-fit:contain;object-position:center bottom;padding:14px 28px 0}
.page-job .job-number{z-index:4;text-shadow:2px 2px 0 #fff}

.page-person .content{z-index:3}
.page-person .people-shapes{z-index:1;opacity:.7}
.person-illustration{position:absolute;z-index:2;right:-32px;bottom:-22px;width:82%;height:38%;object-fit:contain;object-position:right bottom;pointer-events:none}

/* Small editorial motifs inspired by the supplied faucet / clock / idea cards. */
.page-statement::after,#voice::after,.page-support::after{box-shadow:-42px -24px 0 -44px #79cee0,35px -18px 0 -48px #2d7de0}
.page-culture::after,.page-workstyle::after,.page-pay::after{content:"";position:absolute;z-index:1;width:74px;height:74px;border-radius:50%;pointer-events:none;animation:corner-wiggle-a 8s ease-in-out infinite alternate}
.page-culture::after{right:-28px;top:31%;background:#fd9934}
.page-workstyle::after{right:-24px;top:17%;background:#6ec36a;box-shadow:-42px 34px 0 -29px #79cee0}
.page-pay::after{left:-30px;bottom:15%;background:#fd9934;box-shadow:46px 30px 0 -30px #6ec36a}

.geo-decor{position:absolute;z-index:1;width:118px;height:96px;pointer-events:none;opacity:.68}
.geo-decor i{position:absolute;display:block}
.geo-decor i:nth-child(1){width:66px;height:66px;border-radius:50%;background:repeating-linear-gradient(135deg,#79cee0 0 3px,transparent 3px 8px)}
.geo-decor i:nth-child(2){width:13px;height:13px;right:10px;top:8px;background:#fd9934;transform:rotate(45deg)}
.geo-decor i:nth-child(3){right:0;bottom:8px;width:42px;height:8px;background:repeating-linear-gradient(90deg,#6ec36a 0 4px,transparent 4px 9px)}
.geo-decor-culture{left:18px;top:12%}
.geo-decor-workstyle{right:12px;top:40%;transform:scale(.82)}
.geo-decor-pay{left:16px;bottom:8%;transform:rotate(-8deg) scale(.84)}
.geo-decor-person{right:8px;top:11%;transform:scale(.76)}
@media(prefers-reduced-motion:no-preference){
  .geo-decor{animation:geo-float 7s ease-in-out infinite alternate}
  .geo-decor-workstyle,.geo-decor-person{animation-delay:-3s}
}
@keyframes geo-float{to{translate:0 9px;rotate:3deg}}

@media(max-height:700px){
  .page-message .message-bg{height:64%}
  .page-message .video-copy{top:82px}
  .page-message .video-copy h1{font-size:35px}
  .page-workstyle .round-photo{height:205px!important}
  .pay-illustration{width:62%;height:43%;right:-38px;bottom:-28px}
  .page-job .job-photo img{padding-top:8px}
  .person-illustration{right:-24px;bottom:-18px;width:76%;height:31%}
  .geo-decor{transform:scale(.7)}
}
@media(min-width:1000px){
  .page-message .video-copy{top:clamp(110px,14vh,145px)}
  .page-workstyle .round-photo{height:270px!important}
}

/* Geometric ornaments belong to the section background, never to image assets. */
.geo-decor,.geo-decor-culture,.geo-decor-workstyle,.geo-decor-pay,.geo-decor-person{
  position:absolute;z-index:0;inset:0;width:auto;height:auto;opacity:.56;transform:none;overflow:hidden;pointer-events:none;animation:none
}
.geo-decor i:nth-child(1){left:-18px;top:19%;width:82px;height:82px}
.geo-decor i:nth-child(2){right:28px;top:14%;width:13px;height:13px}
.geo-decor i:nth-child(3){right:-8px;bottom:27%;width:104px;height:9px}
.geo-decor-culture i:nth-child(1),.geo-decor-pay i:nth-child(1){left:auto;right:-25px;top:18%}
.geo-decor-culture i:nth-child(2),.geo-decor-pay i:nth-child(2){right:auto;left:30px;top:13%;background:#6ec36a}
.geo-decor-culture i:nth-child(3),.geo-decor-pay i:nth-child(3){right:auto;left:-6px;bottom:23%;background:repeating-linear-gradient(90deg,#fd9934 0 4px,transparent 4px 9px)}
.page-culture>.content,.page-workstyle>.content,.page-pay>.content,.page-person>.content{position:relative;z-index:3}
.page-culture>.split-photo,.page-workstyle>.round-photo,.page-pay>.pay-illustration,.page-person>.person-illustration{z-index:2}
@media(prefers-reduced-motion:no-preference){
  .geo-decor i:nth-child(1){animation:geo-bg-float 7s ease-in-out infinite alternate}
  .geo-decor i:nth-child(2){animation:geo-bg-float 5s ease-in-out -2s infinite alternate-reverse}
}
@keyframes geo-bg-float{to{translate:0 8px;rotate:5deg}}

/* Bolder, section-scale graphic backgrounds. */
.page-statement{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 108% 18%,#fd9934 0 104px,transparent 106px),
    linear-gradient(90deg,#79cee02e 0 100%) center 55%/100% 34% no-repeat,
    repeating-linear-gradient(135deg,#6ec36a80 0 3px,transparent 3px 10px) 18px 82%/86px 86px no-repeat!important
}
#voice{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at -9% 22%,#6ec36a 0 112px,transparent 114px),
    linear-gradient(90deg,#fff 0 14%,#dff4ef 14% 86%,#fff 86%) center 58%/100% 31% no-repeat,
    repeating-linear-gradient(90deg,#fd993490 0 4px,transparent 4px 11px) right 28px bottom 24%/108px 10px no-repeat!important
}
.page-support{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 111% 19%,#79cee0 0 96px,transparent 98px),
    linear-gradient(90deg,#fff5e8 0 78%,transparent 78%) center 57%/100% 39% no-repeat,
    repeating-linear-gradient(135deg,#fd99348c 0 3px,transparent 3px 10px) 20px 84%/90px 90px no-repeat!important
}
.page-culture{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 110% -2%,transparent 0 72px,#79cee06b 74px 126px,transparent 128px),
    linear-gradient(#e8f5f7 0 100%) center 31%/100% 25% no-repeat,
    repeating-linear-gradient(90deg,#6ec36a82 0 4px,transparent 4px 11px) left bottom 22%/116px 10px no-repeat!important
}
.page-workstyle{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at -8% 14%,#fd9934 0 92px,transparent 94px),
    linear-gradient(90deg,transparent 0 16%,#fff2df 16% 100%) center 58%/100% 38% no-repeat,
    repeating-linear-gradient(135deg,#79cee08a 0 3px,transparent 3px 10px) right 24px top 35%/82px 82px no-repeat!important
}
.page-pay{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 109% 14%,#6ec36a 0 100px,transparent 102px),
    linear-gradient(90deg,#eef8e9 0 82%,transparent 82%) center 56%/100% 34% no-repeat,
    repeating-linear-gradient(90deg,#fd99348c 0 4px,transparent 4px 11px) left 20px bottom 18%/116px 10px no-repeat!important
}
.page-person{
  background-color:#fafafa!important;
  background-image:
    radial-gradient(circle at -10% 17%,transparent 0 68px,#79cee077 70px 122px,transparent 124px),
    linear-gradient(90deg,transparent 0 12%,#e9f5fb 12% 88%,transparent 88%) center 59%/100% 32% no-repeat,
    repeating-linear-gradient(135deg,#6ec36a91 0 3px,transparent 3px 10px) right 18px bottom 25%/88px 88px no-repeat!important
}
.page-company{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 108% 13%,#6ec36a 0 102px,transparent 104px),
    linear-gradient(90deg,#eff8ec 0 84%,transparent 84%) center 58%/100% 37% no-repeat,
    repeating-linear-gradient(90deg,#79cee095 0 4px,transparent 4px 11px) 22px 86%/120px 10px no-repeat!important
}
.page-closing{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 110% 10%,#fd9934 0 112px,transparent 114px),
    linear-gradient(90deg,transparent 0 10%,#fff0df 10% 90%,transparent 90%) center 57%/100% 32% no-repeat,
    repeating-linear-gradient(135deg,#79cee085 0 3px,transparent 3px 10px) left 18px bottom 21%/92px 92px no-repeat!important
}

/* Let background ornaments occupy the frame boldly while staying behind content. */
.geo-decor i:nth-child(1){width:112px;height:112px;opacity:.8}
.geo-decor i:nth-child(2){width:18px;height:18px;box-shadow:34px 42px 0 -4px #79cee0,-24px 70px 0 -5px #6ec36a}
.geo-decor i:nth-child(3){width:148px;height:12px}
@media(min-width:1000px){
  .geo-decor i:nth-child(1){width:132px;height:132px}
  .geo-decor i:nth-child(3){width:180px}
}

/* Reference-led art direction: broad off-canvas curves, breathing room and scale contrast. */
.page-statement,#voice,.page-support,.page-culture,.page-workstyle,.page-pay,.page-person,.page-company,.page-closing{
  --scene-main:#79cee0;
  --scene-soft:#edf4f5;
  --scene-pop:#fd9934;
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 112% 4%,transparent 0 92px,var(--scene-main) 94px 154px,transparent 156px),
    radial-gradient(ellipse 78% 43% at -18% 96%,var(--scene-soft) 0 68%,transparent 69%),
    radial-gradient(circle,var(--scene-pop) 0 2.5px,transparent 3px)!important;
  background-size:auto,auto,38px 38px!important;
  background-position:center,center,right 18px top 43%!important;
  background-repeat:no-repeat,no-repeat,repeat-y!important
}
.page-statement{--scene-main:#fd9934;--scene-soft:#eaf6f1;--scene-pop:#2d7de0}
#voice{--scene-main:#6ec36a;--scene-soft:#eef7fb;--scene-pop:#fd9934}
.page-support{--scene-main:#79cee0;--scene-soft:#fff1df;--scene-pop:#6ec36a}
.page-culture{--scene-main:#2d7de0;--scene-soft:#edf2f4;--scene-pop:#fd9934}
.page-workstyle{--scene-main:#fd9934;--scene-soft:#eaf5f8;--scene-pop:#6ec36a}
.page-pay{--scene-main:#6ec36a;--scene-soft:#fff1df;--scene-pop:#2d7de0}
.page-person{--scene-main:#79cee0;--scene-soft:#f0f1f1;--scene-pop:#fd9934}
.page-company{--scene-main:#6ec36a;--scene-soft:#edf6f8;--scene-pop:#fd9934}
.page-closing{--scene-main:#fd9934;--scene-soft:#ebf5ef;--scene-pop:#2d7de0}

/* Offset panels create the layered paper-like depth seen in the references. */
.page-statement .content,#voice .content,.page-support .content{
  padding:22px 20px 24px;
  border-radius:0 28px 28px 0;
  background:#fffffff0;
  box-shadow:12px 14px 0 #1717130a
}

/* P3 copy-side accents, matching the visual vocabulary used on the other pages. */
.page-culture .geo-decor-culture{
  z-index:1;
  opacity:.9
}
.page-culture .geo-decor-culture::before{
  content:"";position:absolute;left:-76px;bottom:-34px;
  width:178px;height:142px;
  border-radius:58% 42% 0 0 / 72% 48% 0 0;
  background:#6ec36a8f
}
.page-culture .geo-decor-culture::after{
  content:"";position:absolute;z-index:0;left:-8%;bottom:-26px;
  width:116%;height:96px;
  background:linear-gradient(180deg,#79cee086 0 48%,#2d7de05c 49% 100%);
  clip-path:ellipse(94% 64% at 3% 100%)
}
.page-culture .geo-decor-culture i:nth-child(1){
  left:auto;right:-78px;top:56%;
  width:108px;height:108px;
  background:repeating-linear-gradient(90deg,#79cee0 0 6px,transparent 6px 14px)
}
.page-culture .geo-decor-culture i:nth-child(1)::after{
  content:"";position:absolute;left:-8px;bottom:-82px;
  width:52px;height:52px;border:8px solid #2d7de0;border-radius:50%
}
.page-culture .geo-decor-culture i:nth-child(2){
  left:auto;right:-2px;top:74%;width:14px;height:14px;
  background:#6ec36a;
  box-shadow:27px 20px 0 -3px #fd9934,48px -17px 0 -4px #2d7de0
}
.page-culture .geo-decor-culture i:nth-child(3){
  left:-68px;right:auto;bottom:16%;width:94px;height:16px;
  background:repeating-linear-gradient(90deg,#fd9934 0 5px,transparent 5px 13px)
}

/* Editorial treatment for the English labels on P2 and P3. */
.page-statement .eyebrow,.page-culture .eyebrow{
  position:relative;display:block;width:max-content;
  padding:8px 16px 16px;margin-bottom:0;
  color:#171713;font-size:12px;line-height:1;
  letter-spacing:.26em
}
.page-statement .eyebrow::before,.page-culture .eyebrow::before{
  content:"";position:absolute;left:8px;top:-17px;
  width:2px;height:42px;border-radius:0;
  background:#79cee0;box-shadow:none;
  transform:rotate(24deg);transform-origin:center
}
.page-statement .eyebrow::after,.page-culture .eyebrow::after{
  position:absolute;left:0;top:27px;right:auto;height:auto;
  color:#7c8588;background:none;
  font:500 7px/1.4 "Zen Kaku Gothic New",sans-serif;
  letter-spacing:.08em;white-space:nowrap
}
.page-statement .eyebrow::after{content:none}
.page-culture .eyebrow::before{background:#2d7de0}
.page-culture .eyebrow::after{content:none}

.page-culture .split-photo img{
  padding:0 4px;
  transform:scale(1);
  transform-origin:center bottom
}

/* Visible two-layer wave behind the P3 illustration. */
.decor-p3::before{
  bottom:-4px;
  height:122px;
  background:#79cee0a8;
  clip-path:ellipse(96% 72% at 2% 100%)
}
.decor-p3::after{
  bottom:-30px;
  height:112px;
  background:#2d7de073;
  clip-path:ellipse(100% 66% at -8% 100%)
}

/* Layer order: section scenery < ornaments < supplied illustration < copy. */
.illustration-decor{z-index:1}
.page-message .message-bg,
.page-statement .section-illustration,
.page-culture .split-photo{z-index:2}
.page-message .video-copy,
.page-statement .content,
.page-culture .content{z-index:4}

/* Layered wave ornaments behind the P1–P3 illustrations. */
.illustration-decor::before,.illustration-decor::after{
  content:"";position:absolute;z-index:0;left:-18%;bottom:-26px;width:136%;height:132px;
  pointer-events:none;transform-origin:50% 100%
}
.illustration-decor::before{
  border-radius:48% 52% 0 0 / 72% 88% 0 0;
  background:#79cee07a
}
.illustration-decor::after{
  left:-28%;bottom:-58px;width:154%;height:142px;
  border-radius:57% 43% 0 0 / 86% 64% 0 0;
  background:#6ec36a66
}
.decor-p1::before{bottom:3%;background:#79cee078}
.decor-p1::after{bottom:-5%;background:#fd99345c}
.decor-p2::before{bottom:1%;background:#6ec36a70}
.decor-p2::after{bottom:-7%;background:#79cee063}
.decor-p3::before{bottom:42%;background:#79cee06b}
.decor-p3::after{bottom:35%;background:#fd993457}
@media(prefers-reduced-motion:no-preference){
  .illustration-decor::before{animation:wave-drift-a 8s ease-in-out infinite alternate}
  .illustration-decor::after{animation:wave-drift-b 10s ease-in-out -4s infinite alternate}
}
@keyframes wave-drift-a{to{translate:18px 4px;scale:1.04 .94;border-radius:56% 44% 0 0 / 84% 68% 0 0}}
@keyframes wave-drift-b{to{translate:-16px -3px;scale:.98 1.06;border-radius:45% 55% 0 0 / 62% 92% 0 0}}

/* Shallow tapered waves: high on the left, fading toward the right edge. */
.illustration-decor::before,.illustration-decor::after{
  left:0;width:112%;height:154px;border-radius:0;
  clip-path:ellipse(96% 76% at 2% 100%)
}
.illustration-decor::after{
  left:-8%;width:116%;height:132px;
  clip-path:ellipse(100% 68% at -8% 100%)
}
.decor-p1::before{bottom:1%;background:#79cee08f}
.decor-p1::after{bottom:-4%;background:#2d7de05e}
.decor-p2::before{bottom:0;background:#6ec36a85}
.decor-p2::after{bottom:-5%;background:#79cee064}
.decor-p3::before{bottom:41%;background:#79cee082}
.decor-p3::after{bottom:35%;background:#2d7de052}
@keyframes wave-drift-a{to{translate:12px 3px;scale:1.03 .96}}
@keyframes wave-drift-b{to{translate:-10px -2px;scale:.99 1.04}}

/* P3: keep the waves inside the illustration field so they never cut through copy. */
.decor-p3{
  inset:0;
  height:auto;
  overflow:hidden
}
.decor-p3::before{bottom:-4px}
.decor-p3::after{bottom:-30px}
.page-culture .card{border-radius:28px 0 0 28px;box-shadow:-12px 14px 0 #2d7de012}
.page-workstyle .content{padding:22px 18px;background:#fffffff2;border-radius:0 28px 28px 0;box-shadow:12px 14px 0 #fd993414}
.page-closing .content{padding:20px!important;background:#fffffff2;border-radius:26px 0 26px 0;box-shadow:12px 14px 0 #6ec36a1f}

/* Make the background geometry read as one composition rather than small stickers. */
.geo-decor{opacity:.5}
.geo-decor i:nth-child(1){left:-42px;top:37%;width:138px;height:138px}
.geo-decor i:nth-child(2){right:34px;top:25%;width:16px;height:16px}
.geo-decor i:nth-child(3){right:-24px;bottom:18%;width:174px;height:12px}
.geo-decor-culture i:nth-child(1),.geo-decor-pay i:nth-child(1){left:auto;right:-48px;top:35%}
.geo-decor-culture i:nth-child(3),.geo-decor-pay i:nth-child(3){left:-24px;right:auto;bottom:17%}
@media(max-height:700px){
  .page-statement .content,#voice .content,.page-support .content{padding:16px 16px 18px}
  .page-workstyle .content{padding:16px 14px}
  .page-closing .content{padding:16px!important}
}

/* Final collision pass: loud edges, calm reading zones. */
.page-statement .content,#voice .content,.page-support .content{background:#fff;box-shadow:12px 14px 0 #1717130d}
.page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{z-index:2;bottom:-42px;width:calc(100% + 28px)}
.page-statement .content,#voice .content,.page-support .content{z-index:4}

.page-workstyle .content{position:relative;z-index:4;background:#fff}
.page-workstyle .round-photo{z-index:2;bottom:-26px!important;height:180px!important}

.page.page-pay .content{z-index:4}
.page.page-pay .salary-card{position:relative;z-index:4;background:#fff;backdrop-filter:none}
.page.page-pay .content>p{max-width:64%}
.pay-illustration{z-index:2;top:44%;right:-28px;bottom:auto;width:44%;height:29%;object-position:right top}

.page-closing .content{z-index:4;background:#fff;top:24px}
.closing-illustration{z-index:2;bottom:-44px;width:calc(100% + 8px)}

@media(max-height:700px){
  .page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{bottom:-38px;width:calc(100% + 12px)}
  .page-workstyle .round-photo{height:164px!important;bottom:-24px!important}
  .page.page-pay .content>p{max-width:67%}
  .pay-illustration{top:46%;right:-24px;width:42%;height:25%}
  .page-closing .content{top:12px}
  .closing-illustration{bottom:-50px}
}
@media(min-width:1000px){
  .page-statement .content,#voice .content,.page-support .content{top:22px!important}
  .page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{bottom:-48px;width:calc(100% + 12px)}
  .page-workstyle .round-photo{height:178px!important}
  .page-closing .content{top:22px}
}

/* WORK STYLE: asymmetrical lower illustration, clear of the reading column. */
.page.page-workstyle .round-photo{
  left:auto!important;right:-46px!important;bottom:-24px!important;
  width:66%!important;height:184px!important;padding:0!important;
  border:0!important;border-radius:0!important;object-fit:contain!important;object-position:right bottom!important
}

/* Carry the energetic background language through utility and job pages. */
.page-job{
  background-image:
    radial-gradient(circle at -10% 90%,#6ec36a 0 112px,transparent 114px),
    radial-gradient(circle,#fd9934 0 2.5px,transparent 3px)!important;
  background-size:auto,38px 38px!important;
  background-position:center,right 16px top 68%!important;
  background-repeat:no-repeat,repeat-y!important
}
.page-job.reverse{
  background-color:#f3faef!important;
  background-image:
    radial-gradient(circle at -10% 90%,#fd9934 0 112px,transparent 114px),
    radial-gradient(circle,#2d7de0 0 2.5px,transparent 3px)!important
}
.page-requirements,.page-entry{
  background-color:#fffaf2!important;
  background-image:
    radial-gradient(circle at 108% 7%,transparent 0 88px,#79cee066 90px 146px,transparent 148px),
    radial-gradient(ellipse 68% 22% at -14% 78%,#eaf5ed 0 72%,transparent 73%),
    radial-gradient(circle,#fd993470 0 2px,transparent 2.5px)!important;
  background-size:auto,auto,40px 40px!important;
  background-position:center,center,right 14px top 24%!important;
  background-repeat:no-repeat,no-repeat,repeat-y!important
}
.page-requirements .scroll-inner,.page-entry .scroll-inner{position:relative;z-index:2}
@media(max-height:700px){
  .page.page-workstyle .round-photo{right:-42px!important;width:62%!important;height:158px!important}
}

/* Supplied illustrations stay large; viewport cropping replaces thumbnail treatment. */
.page-message .message-bg{height:76%;bottom:-64px}
.page-culture .split-photo img{padding:0 4px;transform:scale(1);transform-origin:center bottom}
.page-culture .split-photo{isolation:isolate}
.page-culture .split-photo .decor-p3{z-index:1}
.page-culture .split-photo img{position:relative;z-index:2}
.page-culture .decor-p3 i:nth-child(1){left:-54px;top:24%;background:#6ec36ac9}
.page-culture .decor-p3 i:nth-child(2){right:-42px;top:17%}
.page-culture .decor-p3 i:nth-child(3){right:24px;top:37%}
.page-culture .decor-p3 i:nth-child(4){left:-14px;top:12%;border-color:#2d7de0}
.page-culture .decor-p3::before,.page-culture .decor-p3::after{display:none}
.page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{
  width:calc(100% + 96px);max-width:none;bottom:-72px
}
.page.page-workstyle .round-photo{
  left:auto!important;right:-74px!important;bottom:-94px!important;
  width:112%!important;height:278px!important;max-width:none!important
}
.pay-illustration{
  top:auto;right:-118px;bottom:-90px;width:88%;height:54%;max-width:none;object-position:right bottom
}
.page-job .job-photo img{padding:0 8px;transform:scale(1);transform-origin:center bottom}
.person-illustration{right:-88px;bottom:-86px;width:112%;height:50%;max-width:none}
.closing-illustration{bottom:-92px;width:calc(100% + 112px);max-width:none}

/* Copy blocks sit near the optical centre, above the cropped illustration plane. */
.page-statement .content,#voice .content,.page-support .content{top:clamp(58px,8vh,82px)!important}
.page-workstyle .content,.page-pay .content,.page-person .content{align-self:center}
.page-closing .content{top:clamp(46px,7vh,70px)}

/* Extra-bold section scenery: circles, rings, blocks and orthogonal stripes only. */
.page-statement,#voice,.page-support,.page-culture,.page-workstyle,.page-pay,.page-person,.page-company,.page-closing{
  background-image:
    radial-gradient(circle at 112% 3%,transparent 0 72px,var(--scene-main) 74px 154px,transparent 156px),
    radial-gradient(circle at -14% 84%,var(--scene-pop) 0 102px,transparent 104px),
    radial-gradient(ellipse 88% 38% at 48% 106%,var(--scene-soft) 0 70%,transparent 71%),
    linear-gradient(90deg,transparent 0 12%,color-mix(in srgb,var(--scene-main) 18%,transparent) 12% 42%,transparent 42%) center 48%/100% 118px no-repeat,
    radial-gradient(circle,var(--scene-pop) 0 3px,transparent 3.5px)!important;
  background-size:auto,auto,auto,100% 118px,34px 34px!important;
  background-position:center,center,center,center,right 13px top 38%!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-y!important
}
.geo-decor i:nth-child(1){
  width:158px;height:158px;
  background:repeating-linear-gradient(90deg,var(--scene-main) 0 5px,transparent 5px 13px)
}
.geo-decor i:nth-child(3){
  width:208px;height:16px;
  background:repeating-linear-gradient(90deg,var(--scene-pop) 0 6px,transparent 6px 14px)
}
.page-culture::after,.page-workstyle::after,.page-pay::after{width:118px;height:118px}

@media(max-height:700px){
  .page-message .message-bg{height:72%;bottom:-66px}
  .page-statement .section-illustration,#voice .section-illustration,.page-support .section-illustration{width:calc(100% + 80px);bottom:-70px}
  .page.page-workstyle .round-photo{right:-66px!important;bottom:-86px!important;width:108%!important;height:246px!important}
  .pay-illustration{right:-106px;bottom:-88px;width:84%;height:50%}
  .person-illustration{right:-78px;bottom:-78px;width:108%;height:47%}
  .closing-illustration{bottom:-88px;width:calc(100% + 96px)}
  .page-statement .content,#voice .content,.page-support .content{top:38px!important}
}

/* MESSAGE: high-impact illustrated scene with a calm, readable copy area. */
.page.page-message{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 112% 13%,transparent 0 68px,#fd9934 70px 150px,transparent 152px),
    radial-gradient(circle at -13% 58%,#6ec36a 0 104px,transparent 106px),
    radial-gradient(ellipse 92% 32% at 50% 106%,#e7f5f7 0 72%,transparent 73%),
    linear-gradient(90deg,#79cee032 0 31%,transparent 31%) left 0 top 35%/100% 126px no-repeat,
    radial-gradient(circle,#2d7de0 0 3px,transparent 3.5px)!important;
  background-size:auto,auto,auto,100% 126px,34px 34px!important;
  background-position:center,center,center,center,right 12px top 38%!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-y!important
}
.page-message .message-bg{background:transparent}
.page-message .video-copy{z-index:4}
.page-message .video-copy .hero-lead{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  text-shadow:none!important;
  background:#fffffff2;
  border-left:6px solid var(--orange);
  border-radius:0 16px 16px 0;
  box-shadow:10px 12px 0 #79cee026
}
.page-message .video-copy::before{
  content:"";position:absolute;z-index:-1;left:-54px;top:-34px;width:108px;height:108px;border-radius:50%;
  background:repeating-linear-gradient(90deg,#79cee0 0 5px,transparent 5px 13px);opacity:.58
}
.page-message .video-copy::after{
  content:"";position:absolute;right:-8px;top:43%;width:16px;height:16px;background:#6ec36a;transform:rotate(45deg);
  box-shadow:-28px -42px 0 -3px #fd9934,12px 48px 0 -4px #2d7de0
}

/* Softer scenery and a mostly borderless visual language. */
.page-statement{--scene-main:#fd99349c;--scene-soft:#eaf6f1;--scene-pop:#2d7de08a}
#voice{--scene-main:#6ec36a99;--scene-soft:#eef7fb;--scene-pop:#fd99348a}
.page-support{--scene-main:#79cee099;--scene-soft:#fff1df;--scene-pop:#6ec36a85}
.page-culture{--scene-main:#2d7de08f;--scene-soft:#edf2f4;--scene-pop:#fd993485}
.page-workstyle{--scene-main:#fd993494;--scene-soft:#eaf5f8;--scene-pop:#6ec36a85}
.page-pay{--scene-main:#6ec36a91;--scene-soft:#fff1df;--scene-pop:#2d7de080}
.page-person{--scene-main:#79cee091;--scene-soft:#f0f1f1;--scene-pop:#fd993480}
.page-company{--scene-main:#6ec36a91;--scene-soft:#edf6f8;--scene-pop:#fd993480}
.page-closing{--scene-main:#fd993491;--scene-soft:#ebf5ef;--scene-pop:#2d7de080}
.geo-decor{opacity:.34}
.page.orange::before,.page.green::before,.page-company::before,
.page.orange::after,.page.green::after,.page-company::after{opacity:.72}

.page.page-message{
  background-image:
    radial-gradient(circle at 112% 13%,transparent 0 68px,#fd99349c 70px 150px,transparent 152px),
    radial-gradient(circle at -13% 58%,#6ec36a8c 0 104px,transparent 106px),
    radial-gradient(ellipse 92% 32% at 50% 106%,#e7f5f7 0 72%,transparent 73%),
    linear-gradient(90deg,#79cee020 0 31%,transparent 31%) left 0 top 35%/100% 126px no-repeat,
    radial-gradient(circle,#2d7de08c 0 2.5px,transparent 3px)!important
}
.page-message .video-copy .hero-lead{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#ffffffdb;
  padding-left:0
}
.page-message .video-copy::before{opacity:.36}
.page-message .video-copy::after{opacity:.65}

.page-statement .content,#voice .content,.page-support .content,
.page-culture .card,.page-workstyle .content,.page-pay .content,.page-closing .content{
  border:0!important
}
.page-workstyle .feature-list li{
  border:0;
  background:#fff;
  box-shadow:0 5px 0 #17171314
}
.page-job .tag,.page-job.reverse .tag{
  border:0;
  background:#fd993424;
  padding:8px 15px
}
.page-job.reverse .tag{background:#6ec36a29}
.page.page-pay .salary-card{border:0;box-shadow:0 12px 28px #17171312}
.rail-logo-card{border:0;box-shadow:0 8px 0 #6ec36a66}

/* Remove panel-like frames; typography sits directly on the section canvas. */
.page-statement .content,#voice .content,.page-support .content,
.page-culture .card,.page-workstyle .content,.page-pay .content,.page-closing .content{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}
.page-message .video-copy .hero-lead{background:transparent!important}

/* Mid-strength scenery: between the bold v09 treatment and the softened v10 pass. */
.page-statement{--scene-main:#fd9934b8;--scene-soft:#e5f3ed;--scene-pop:#2d7de09f}
#voice{--scene-main:#6ec36ab5;--scene-soft:#e8f4f8;--scene-pop:#fd99349f}
.page-support{--scene-main:#79cee0b5;--scene-soft:#ffecd4;--scene-pop:#6ec36a9c}
.page-culture{--scene-main:#2d7de0aa;--scene-soft:#e8edef;--scene-pop:#fd99349c}
.page-workstyle{--scene-main:#fd9934b0;--scene-soft:#e4f2f6;--scene-pop:#6ec36a9c}
.page-pay{--scene-main:#6ec36aae;--scene-soft:#ffecd4;--scene-pop:#2d7de096}
.page-person{--scene-main:#79cee0ad;--scene-soft:#ebeded;--scene-pop:#fd993496}
.page-company{--scene-main:#6ec36aae;--scene-soft:#e8f2f4;--scene-pop:#fd993496}
.page-closing{--scene-main:#fd9934ae;--scene-soft:#e5f2ea;--scene-pop:#2d7de096}
.geo-decor{opacity:.44}
.page.orange::before,.page.green::before,.page-company::before,
.page.orange::after,.page.green::after,.page-company::after{opacity:.82}
.page-message .video-copy::before{opacity:.48}
.page-message .video-copy::after{opacity:.76}
.page.page-message{
  background-image:
    radial-gradient(circle at 112% 13%,transparent 0 68px,#fd9934b8 70px 150px,transparent 152px),
    radial-gradient(circle at -13% 58%,#6ec36aa8 0 104px,transparent 106px),
    radial-gradient(ellipse 92% 32% at 50% 106%,#e2f2f5 0 72%,transparent 73%),
    linear-gradient(90deg,#79cee02b 0 31%,transparent 31%) left 0 top 35%/100% 126px no-repeat,
    radial-gradient(circle,#2d7de09c 0 2.5px,transparent 3px)!important
}

/* One-step stronger ornaments, keeping all copy areas borderless. */
.page-statement{--scene-main:#fd9934cf;--scene-soft:#dcefe6;--scene-pop:#2d7de0b5}
#voice{--scene-main:#6ec36acb;--scene-soft:#deeff5;--scene-pop:#fd9934b5}
.page-support{--scene-main:#79cee0cb;--scene-soft:#ffe5c3;--scene-pop:#6ec36ab2}
.page-culture{--scene-main:#2d7de0c0;--scene-soft:#dfe6e9;--scene-pop:#fd9934b2}
.page-workstyle{--scene-main:#fd9934c6;--scene-soft:#d9edf3;--scene-pop:#6ec36ab2}
.page-pay{--scene-main:#6ec36ac4;--scene-soft:#ffe5c3;--scene-pop:#2d7de0ac}
.page-person{--scene-main:#79cee0c3;--scene-soft:#e1e5e5;--scene-pop:#fd9934ac}
.page-company{--scene-main:#6ec36ac4;--scene-soft:#deecef;--scene-pop:#fd9934ac}
.page-closing{--scene-main:#fd9934c4;--scene-soft:#dcece2;--scene-pop:#2d7de0ac}
.geo-decor{opacity:.56}
.page.orange::before,.page.green::before,.page-company::before,
.page.orange::after,.page.green::after,.page-company::after{opacity:.92}
.page-message .video-copy::before{opacity:.58}
.page-message .video-copy::after{opacity:.86}
.page.page-message{
  background-image:
    radial-gradient(circle at 112% 13%,transparent 0 68px,#fd9934cc 70px 150px,transparent 152px),
    radial-gradient(circle at -13% 58%,#6ec36ac2 0 104px,transparent 106px),
    radial-gradient(ellipse 92% 32% at 50% 106%,#d9eef2 0 72%,transparent 73%),
    linear-gradient(90deg,#79cee040 0 31%,transparent 31%) left 0 top 35%/100% 126px no-repeat,
    radial-gradient(circle,#2d7de0b5 0 3px,transparent 3.5px)!important
}

/* P1–P3 stronger art direction pass. */
.page.page-message{
  background-image:
    radial-gradient(circle at 112% 10%,transparent 0 58px,#fd9934 60px 166px,transparent 168px),
    radial-gradient(circle at -15% 60%,#6ec36ae8 0 126px,transparent 128px),
    radial-gradient(ellipse 104% 38% at 50% 108%,#cfeaf0 0 72%,transparent 73%),
    linear-gradient(90deg,#79cee066 0 38%,transparent 38%) left top 34%/100% 148px no-repeat,
    radial-gradient(circle,#176ed1 0 3.5px,transparent 4px)!important;
  background-size:auto,auto,auto,100% 148px,32px 32px!important;
  background-position:center,center,center,center,right 10px top 34%!important
}
.page-message .video-copy::before{opacity:.82}
.page-message .video-copy::after{opacity:1}

.page-statement{
  --scene-main:#fd9934;
  --scene-soft:#cfe9de;
  --scene-pop:#176ed1;
  background-image:
    radial-gradient(circle at 112% 7%,transparent 0 58px,#fd9934 60px 168px,transparent 170px),
    radial-gradient(circle at -18% 88%,#6ec36ae8 0 138px,transparent 140px),
    radial-gradient(ellipse 98% 38% at 54% 108%,#d8edf1 0 72%,transparent 73%),
    linear-gradient(90deg,transparent 0 58%,#79cee061 58% 100%) center 46%/100% 156px no-repeat,
    radial-gradient(circle,#176ed1 0 3.5px,transparent 4px)!important;
  background-size:auto,auto,auto,100% 156px,32px 32px!important;
  background-position:center,center,center,center,right 10px top 34%!important
}
.page-statement::before,.page-statement::after{opacity:1}

.page-culture{
  --scene-main:#176ed1;
  --scene-soft:#dce7eb;
  --scene-pop:#fd9934;
  background-image:
    radial-gradient(circle at 110% -2%,transparent 0 62px,#176ed1e8 64px 164px,transparent 166px),
    radial-gradient(circle at -15% 76%,#fd9934e8 0 122px,transparent 124px),
    radial-gradient(ellipse 100% 34% at 48% 104%,#d7ede4 0 72%,transparent 73%),
    linear-gradient(90deg,#79cee05c 0 44%,transparent 44%) center 52%/100% 146px no-repeat,
    radial-gradient(circle,#6ec36a 0 3.5px,transparent 4px)!important;
  background-size:auto,auto,auto,100% 146px,32px 32px!important;
  background-position:center,center,center,center,right 10px top 38%!important
}
.geo-decor-culture{opacity:.76}

/* P1–P3 illustration-side ornaments: fluid shapes, dots, rings and vertical stripes. */
.illustration-decor{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.illustration-decor i{position:absolute;display:block;will-change:transform}
.illustration-decor i:nth-child(1){
  width:132px;height:104px;border-radius:62% 38% 56% 44% / 48% 58% 42% 52%;
  background:#fd9934c9
}
.illustration-decor i:nth-child(2){
  width:92px;height:92px;border-radius:50%;
  background:repeating-linear-gradient(90deg,#79cee0 0 5px,transparent 5px 12px)
}
.illustration-decor i:nth-child(3){
  width:14px;height:14px;border-radius:50%;background:#6ec36a;
  box-shadow:26px 14px 0 -2px #fd9934,48px -8px 0 -4px #2d7de0,66px 22px 0 -5px #79cee0
}
.illustration-decor i:nth-child(4){
  width:44px;height:44px;border:7px solid #2d7de0;border-radius:50%
}
.decor-p1 i:nth-child(1){left:-40px;bottom:15%}
.decor-p1 i:nth-child(2){right:-20px;bottom:28%}
.decor-p1 i:nth-child(3){right:32px;bottom:12%}
.decor-p1 i:nth-child(4){left:32px;bottom:34%}
.decor-p2 i:nth-child(1){right:-34px;bottom:17%;background:#6ec36ac9}
.decor-p2 i:nth-child(2){left:-28px;bottom:31%}
.decor-p2 i:nth-child(3){left:30px;bottom:12%}
.decor-p2 i:nth-child(4){right:40px;bottom:35%;border-color:#fd9934}
.decor-p3 i:nth-child(1){left:-36px;top:16%;background:#79cee0c9}
.decor-p3 i:nth-child(2){right:-22px;top:23%;background:repeating-linear-gradient(90deg,#fd9934 0 5px,transparent 5px 12px)}
.decor-p3 i:nth-child(3){right:26px;top:10%}
.decor-p3 i:nth-child(4){left:38px;top:34%;border-color:#6ec36a}
@media(prefers-reduced-motion:no-preference){
  .illustration-decor i:nth-child(1){animation:illust-ornament-a 7s ease-in-out infinite alternate}
  .illustration-decor i:nth-child(2),.illustration-decor i:nth-child(4){animation:illust-ornament-b 8s ease-in-out -3s infinite alternate}
}
@keyframes illust-ornament-a{to{translate:8px -7px;scale:1.06 .95;border-radius:44% 56% 39% 61% / 56% 40% 60% 44%}}
@keyframes illust-ornament-b{to{translate:-5px 8px;scale:.95 1.05}}
@media(max-height:700px){
  .illustration-decor i:nth-child(1){width:112px;height:88px}
  .illustration-decor i:nth-child(2){width:76px;height:76px}
  .illustration-decor i:nth-child(4){width:38px;height:38px;border-width:6px}
}

.page-message .video-copy h1{
  font-size:clamp(42px,11vw,58px);
  line-height:1.25;
  letter-spacing:.15em;
  margin:0
}

.page-statement .content,#voice .content,.page-support .content{
  padding:0;
  border-radius:0 28px 28px 0;
  background:#fffffff0;
  box-shadow:12px 14px 0 #1717130a
}

/* Optically centre the P2 copy between the header and bottom illustration. */
.page-statement .content{top:clamp(108px,13vh,138px)!important}
@media(max-height:700px){.page-statement .content{top:72px!important}}

/* Mobile ornament spacing: fewer collisions around copy and illustrations. */
@media(max-width:799px){
  .page-statement .decor-p2 i:nth-child(1){
    right:-62px;bottom:20%;width:102px;height:78px
  }
  .page-statement .decor-p2 i:nth-child(2),
  .page-statement .decor-p2 i:nth-child(3){display:none}
  .page-statement .decor-p2 i:nth-child(4){
    right:28px;bottom:37%;width:40px;height:40px;border-width:6px
  }
  .page-culture .decor-p3 i:nth-child(1){
    left:-72px;top:28%;width:112px;height:84px
  }
  .page-culture .decor-p3 i:nth-child(2){
    right:-62px;top:19%;width:78px;height:78px
  }
  .page-culture .decor-p3 i:nth-child(3){right:12px;top:42%}
  .page-culture .decor-p3 i:nth-child(4){
    left:-24px;top:10%;width:38px;height:38px;border-width:6px
  }
  .page-culture .geo-decor-culture i:nth-child(1){right:-88px}
  .page-culture .geo-decor-culture i:nth-child(2){right:-8px;top:77%}
  .page-culture .geo-decor-culture i:nth-child(3){left:-76px}
}

/* P4 onward: one consistent editorial ornament system. */
#voice{--accent-a:#6ec36a;--accent-b:#79cee0;--accent-c:#fd9934}
.page-workstyle{--accent-a:#fd9934;--accent-b:#79cee0;--accent-c:#6ec36a}
.page-pay{--accent-a:#6ec36a;--accent-b:#fd9934;--accent-c:#2d7de0}
#job1{--accent-a:#fd9934;--accent-b:#79cee0;--accent-c:#2d7de0}
#job2{--accent-a:#6ec36a;--accent-b:#79cee0;--accent-c:#fd9934}
.page-support{--accent-a:#79cee0;--accent-b:#fd9934;--accent-c:#6ec36a}
.page-person{--accent-a:#79cee0;--accent-b:#6ec36a;--accent-c:#fd9934}
.page-requirements{--accent-a:#fd9934;--accent-b:#79cee0;--accent-c:#6ec36a}
.page-company{--accent-a:#6ec36a;--accent-b:#79cee0;--accent-c:#fd9934}
.page-closing{--accent-a:#fd9934;--accent-b:#79cee0;--accent-c:#6ec36a}
.page-entry{--accent-a:#fd9934;--accent-b:#79cee0;--accent-c:#6ec36a}
.page-accent{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.page-accent::before{
  content:"";position:absolute;right:-72px;top:17%;width:142px;height:116px;
  border-radius:58% 42% 63% 37% / 45% 61% 39% 55%;background:var(--accent-a);opacity:.62
}
.page-accent.accent-wave::after{
  content:"";position:absolute;left:-8%;bottom:-34px;width:116%;height:104px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-b) 62%,transparent) 0 50%,color-mix(in srgb,var(--accent-a) 44%,transparent) 51% 100%);
  clip-path:ellipse(94% 64% at 3% 100%)
}

/* SP: keep the striped edge ornaments out of the copy area. */
@media(max-width:799px){
  .page-support>.page-accent i:nth-child(1){
    left:-50px!important;
    top:56%!important;
  }
  .page-person>.page-accent i:nth-child(1){
    left:-52px!important;
    top:55%!important;
  }
  .page-support>.content,.page-person>.content{
    position:relative;
    z-index:5;
  }
}
.page-accent i{position:absolute;display:block}
.page-accent i:nth-child(1){
  left:-46px;top:43%;width:88px;height:88px;border-radius:50%;
  background:repeating-linear-gradient(90deg,var(--accent-b) 0 5px,transparent 5px 12px)
}
.page-accent i:nth-child(2){
  right:-20px;top:57%;width:48px;height:48px;border:7px solid var(--accent-c);border-radius:50%
}
.page-accent i:nth-child(3){
  left:22px;bottom:18%;width:12px;height:12px;border-radius:50%;background:var(--accent-c);
  box-shadow:24px 13px 0 -3px var(--accent-a),45px -9px 0 -4px var(--accent-b)
}
.accent-top::before{top:8%}.accent-top i:nth-child(1){top:27%}.accent-top i:nth-child(2){top:39%}
.accent-scroll::before{top:120px}.accent-scroll i:nth-child(1){top:360px}.accent-scroll i:nth-child(2){top:540px}
.page-accent~.content,.page-accent~.scroll-inner{position:relative;z-index:3}
.page-accent~img,.page-accent~.round-photo,.page-accent~.pay-illustration,.page-accent~.person-illustration,.page-accent~.closing-illustration{z-index:2}

#voice .eyebrow,.page-workstyle .eyebrow,.page-pay .eyebrow,.page-job .eyebrow,
.page-support .eyebrow,.page-person .eyebrow,.page-requirements .eyebrow,
.page-company .eyebrow,.page-closing .eyebrow,.page-entry .eyebrow{
  position:relative;display:block;width:max-content;padding:8px 16px 16px;
  margin-bottom:0;color:inherit;font-size:12px;line-height:1;letter-spacing:.26em
}
#voice .eyebrow::before,.page-workstyle .eyebrow::before,.page-pay .eyebrow::before,
.page-job .eyebrow::before,.page-support .eyebrow::before,.page-person .eyebrow::before,
.page-requirements .eyebrow::before,.page-company .eyebrow::before,
.page-closing .eyebrow::before,.page-entry .eyebrow::before{
  content:"";position:absolute;left:8px;top:-17px;width:2px;height:42px;
  background:var(--accent-b);transform:rotate(24deg);transform-origin:center
}
@media(max-width:799px){
  .page-accent::before{right:-86px;width:128px;height:98px;opacity:.5}
  .page-accent i:nth-child(1){left:-64px;width:78px;height:78px}
  .page-accent i:nth-child(2){right:-30px;width:42px;height:42px;border-width:6px}
  .page-accent i:nth-child(3){left:8px;bottom:12%}
  .page-accent.accent-wave::after{bottom:-45px;height:88px}
  .accent-top i:nth-child(3),.accent-scroll i:nth-child(3){display:none}
}

/* SALARY mobile: reserve a clean reading zone and keep the portrait below the card. */
@media(max-width:799px){
  .page-pay .geo-decor-pay{display:none}
  .page-pay .page-accent i{display:none}
  .page-pay .page-accent::before{
    right:-94px;top:17%;width:132px;height:96px;opacity:.42
  }
  .page-pay .page-accent.accent-wave::after{bottom:-48px;height:76px}
  .page.page-pay .content>p{max-width:100%;padding-right:0}
  .page-pay .pay-illustration{
    top:auto!important;right:-58px!important;bottom:-82px!important;
    width:64%!important;height:31%!important;object-position:right bottom
  }
  .page.page-pay .salary-card{position:relative;z-index:5}
}

/* Reuse the airy REQUIREMENTS motif where the copy leaves safe edge space. */
#voice>.page-accent,.page-workstyle>.page-accent,.page-support>.page-accent,
.page-person>.page-accent,.page-company>.page-accent,.page-entry>.page-accent{
  background-image:
    radial-gradient(circle at 114% 7%,transparent 0 76px,color-mix(in srgb,var(--accent-b) 48%,transparent) 78px 126px,transparent 128px),
    radial-gradient(ellipse 42% 24% at -12% 82%,color-mix(in srgb,var(--accent-a) 24%,white) 0 72%,transparent 73%)
}
.page-workstyle>.page-accent,.page-person>.page-accent{
  background-position:center,center 34px
}
.page-support>.page-accent,.page-company>.page-accent{
  background-image:
    radial-gradient(circle at 114% 9%,transparent 0 82px,color-mix(in srgb,var(--accent-b) 44%,transparent) 84px 132px,transparent 134px),
    radial-gradient(ellipse 38% 22% at -10% 78%,color-mix(in srgb,var(--accent-c) 20%,white) 0 72%,transparent 73%)
}
@media(max-width:799px){
  #voice>.page-accent,.page-workstyle>.page-accent,.page-support>.page-accent,
  .page-person>.page-accent,.page-company>.page-accent,.page-entry>.page-accent{
    background-image:
      radial-gradient(circle at 119% 8%,transparent 0 70px,color-mix(in srgb,var(--accent-b) 44%,transparent) 72px 112px,transparent 114px),
      radial-gradient(ellipse 46% 20% at -18% 84%,color-mix(in srgb,var(--accent-a) 20%,white) 0 72%,transparent 73%)
  }
}

/* WORK STYLE: keep one large arc at the upper-right; remove stacked circles. */
.page-workstyle::after,.page-workstyle>.page-accent::before{display:none}

/* Larger illustrations, while retaining a clean copy zone. */
@media(max-width:799px){
  #voice .section-illustration,.page-support .section-illustration{
    width:calc(100% + 118px);max-width:none;bottom:-76px
  }
  .page.page-workstyle .round-photo{
    right:-88px!important;bottom:-98px!important;
    width:122%!important;height:294px!important
  }
  .page-pay .pay-illustration{
    right:-66px!important;bottom:-88px!important;
    width:70%!important;height:33%!important
  }
  .page-person .person-illustration{
    right:-96px;bottom:-88px;width:120%;height:52%
  }
  .page-closing .closing-illustration{
    left:50%;bottom:-98px;width:calc(100% + 132px);
  }
}

/* Avoid stacking the older motif set beneath the new edge ornaments. */
#voice>.page-accent::before,.page-support>.page-accent::before,
.page-person>.page-accent::before,.page-company>.page-accent::before,
.page-entry>.page-accent::before{display:none}
@media(max-width:799px){
  .geo-decor-workstyle,.geo-decor-person{display:none}
  .page-pay::after{display:none}
  .page-accent i:nth-child(1){top:46%}
  .page-accent i:nth-child(2){top:63%}
  .page-accent i:nth-child(3){bottom:9%}
}

/* WORK STYLE mobile: scale the artwork itself, not only its transparent canvas. */
@media(max-width:799px){
  .page.page-workstyle .round-photo{
    left:auto!important;right:-34px!important;bottom:-42px!important;
    width:78%!important;height:214px!important;
    max-width:none!important;max-height:none!important;
    object-fit:contain!important;object-position:right bottom!important;
    transform:none!important
  }
  .page-workstyle>.page-accent i:nth-child(1){display:none}
  .page-workstyle>.page-accent i:nth-child(2){top:66%;right:-32px}
  .page-workstyle>.page-accent i:nth-child(3){left:18px;bottom:16%}
}

/* A clean WORK STYLE canvas: one arc, one soft plane and separated small accents. */
.page-workstyle{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 106% 10%,transparent 0 58px,#79cee066 60px 90px,transparent 92px),
    radial-gradient(ellipse 35% 18% at -10% 84%,#fd993426 0 72%,transparent 73%)!important;
  background-size:auto!important;background-position:center!important
}
.page-workstyle>.page-accent{background-image:none}
.page-workstyle>.page-accent::after{bottom:-52px;height:78px}
.page-workstyle>.page-accent i:nth-child(1),.geo-decor-workstyle{display:none}
.page-workstyle>.page-accent i:nth-child(2){right:-18px;top:59%;width:38px;height:38px;border-width:6px}
.page-workstyle>.page-accent i:nth-child(3){left:22px;bottom:17%}

/* WORK STYLE list: bold, flat orange bands. */
.page-workstyle .feature-list{gap:10px;width:100%}
.page-workstyle .feature-list li{
  display:flex;align-items:center;
  min-height:48px;padding:10px 14px;
  border:0;border-radius:0;background:#fd9934;color:#fff;
  box-shadow:none;font-weight:700
}
.page-workstyle .feature-list b{
  flex:0 0 38px;width:38px;margin-right:0;
  color:#fff;font:700 22px/1 "DM Sans",sans-serif;
  letter-spacing:-.03em
}

/* JOB pages use the same restrained edge motifs as the editorial pages. */
.page-job{
  background-color:#fffaf4!important;
  background-image:
    radial-gradient(circle at 108% 9%,transparent 0 62px,#79cee05f 64px 98px,transparent 100px),
    radial-gradient(circle at 1% 58%,#6ec36a5c 0 54px,transparent 56px),
    radial-gradient(circle at 92% 22%,#fd9934 0 5px,transparent 6px),
    radial-gradient(ellipse 34% 15% at 2% 92%,#fd993429 0 72%,transparent 73%),
    radial-gradient(circle,#fd99347d 0 2px,transparent 2.5px)!important;
  background-size:auto,auto,auto,auto,8px 34px!important;
  background-position:center,center,center,center,right 14px top 52%!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-y!important
}
.page-job.reverse{
  background-color:#f4fbf2!important;
  background-image:
    radial-gradient(circle at 108% 9%,transparent 0 62px,#79cee05f 64px 98px,transparent 100px),
    radial-gradient(circle at 1% 58%,#fd993454 0 54px,transparent 56px),
    radial-gradient(circle at 92% 22%,#6ec36a 0 5px,transparent 6px),
    radial-gradient(ellipse 34% 15% at 2% 92%,#6ec36a2b 0 72%,transparent 73%),
    radial-gradient(circle,#6ec36a7d 0 2px,transparent 2.5px)!important
}
.page-job .job-orb-b{display:none}
.page-job>.page-accent::before{
  display:block;right:-46px;top:16%;width:128px;height:104px;opacity:.48
}
.page-job>.page-accent i:nth-child(1){left:-34px;top:29%;width:82px;height:82px;opacity:.72}
.page-job>.page-accent i:nth-child(2){
  display:block;left:8px;right:auto;top:14%;width:39px;height:39px;
  border-width:6px;opacity:.8
}
.page-job>.page-accent i:nth-child(3){
  display:block;left:auto;right:22px;top:26%;bottom:auto;
  width:11px;height:11px;opacity:.82
}
.page-job>.page-accent::after{
  content:"";position:absolute;left:-8%;bottom:-48px;width:116%;height:82px;
  background:linear-gradient(180deg,#79cee05e 0 50%,#6ec36a40 51% 100%);
  clip-path:ellipse(94% 62% at 3% 100%)
}
.page-job.reverse>.page-accent::after{
  background:linear-gradient(180deg,#79cee05e 0 50%,#fd99343d 51% 100%)
}
.page-job .job-photo{z-index:2;background:transparent!important}
.page-job .job-number{z-index:4}
.page-job>.content{z-index:5}
.page-job>.page-accent{z-index:1}
.page-job>.page-accent i:nth-child(1)::before{
  content:"";position:absolute;left:54px;top:-74px;width:24px;height:24px;
  border:4px solid var(--accent-c);border-radius:50%
}
.page-job>.page-accent i:nth-child(1)::after{
  content:"";position:absolute;left:72px;top:106px;width:9px;height:9px;
  border-radius:50%;background:var(--accent-c);
  box-shadow:18px 10px 0 -2px var(--accent-b),34px -7px 0 -3px var(--accent-a)
}

/* SALARY mobile composition: portrait beside the salary card, clear of its copy. */
@media(max-width:799px){
  .page.page-pay .salary-card{
    min-height:128px;padding-right:30%;overflow:visible
  }
  .page-pay .pay-illustration{
    z-index:6;top:64%!important;right:-92px!important;bottom:auto!important;
    width:79%!important;height:53%!important;
    object-fit:contain!important;object-position:right top!important
  }
  .page-pay .page-accent::before{
    display:block;right:-78px;top:18%;width:118px;height:90px;opacity:.44
  }
  .page-pay .page-accent::after,.page-pay .page-accent i,.page-pay .geo-decor-pay{display:none}
}

@media(max-width:799px){
  .page-workstyle .content{top:-36px!important}
}

/* Keep the SALARY composition identical inside the desktop centre rail. */
@media(min-width:800px){
  .page.page-pay .content>p{max-width:100%;padding-right:0}
  .page.page-pay .salary-card{
    position:relative;z-index:5;min-height:128px;
    padding-right:30%;overflow:visible
  }
  .page-pay .pay-illustration{
    z-index:6;top:64%!important;right:-92px!important;bottom:auto!important;
    width:79%!important;height:53%!important;
    object-fit:contain!important;object-position:right top!important
  }
  .page-pay .page-accent::before{
    display:block;right:-78px;top:18%;width:118px;height:90px;opacity:.44
  }
  .page-pay .page-accent::after,.page-pay .page-accent i,
  .page-pay .geo-decor-pay,.page-pay::after{display:none}
}

/* SALARY accents live below the card, around the portrait, never behind body copy. */
.page-pay .page-accent::after{
  display:block;content:"";position:absolute;left:-8%;bottom:-34px;
  width:116%;height:96px;
  background:linear-gradient(180deg,#79cee073 0 48%,#6ec36a52 49% 100%);
  clip-path:ellipse(94% 64% at 3% 100%)
}
.page-pay .page-accent i:nth-child(1){
  display:block;left:-28px;top:78%;width:82px;height:82px;opacity:.72
}
.page-pay .page-accent i:nth-child(2){
  display:block;left:34px;right:auto;top:86%;width:38px;height:38px;
  border-width:6px;opacity:.8
}
.page-pay .page-accent i:nth-child(3){
  display:block;left:104px;right:auto;top:auto;bottom:8%;opacity:.86
}

/* Centre the P4 copy in the open area above its illustration. */
#voice .content{top:clamp(120px,14vh,150px)!important}
@media(max-height:700px){#voice .content{top:80px!important}}

/* WORK STYLE: extra accents occupy only the unused upper field. */
.page-workstyle>.page-accent::before{
  display:block;right:22px;top:20%;width:66px;height:52px;
  background:#6ec36a;opacity:.46
}
.page-workstyle>.page-accent i:nth-child(1){
  display:block;left:16px;top:21%;width:42px;height:42px;
  border:6px solid #fd9934;border-radius:50%;background:transparent;opacity:.82
}
.page-workstyle>.page-accent i:nth-child(1)::after{
  content:"";position:absolute;left:58px;top:7px;width:9px;height:9px;
  border-radius:50%;background:#2d7de0;
  box-shadow:19px 12px 0 -2px #79cee0,36px -5px 0 -3px #fd9934
}
@media(max-width:799px){
  .page-workstyle>.page-accent::before{right:16px;top:19%;width:58px;height:46px}
  .page-workstyle>.page-accent i:nth-child(1){left:14px;top:20%;width:38px;height:38px;border-width:5px}
}

/* SUPPORT: centre the copy and decorate only the open middle field. */
.page-support .content{top:clamp(112px,13vh,142px)!important}
.page-support>.page-accent::before{
  display:block;right:-34px;top:48%;width:86px;height:68px;
  background:#79cee0;opacity:.42
}
.page-support>.page-accent i:nth-child(1){left:-42px;top:45%;width:76px;height:76px}
.page-support>.page-accent i:nth-child(2){right:-14px;top:61%;width:40px;height:40px;border-width:6px}
.page-support>.page-accent i:nth-child(3){left:26px;bottom:14%}
@media(max-height:700px){.page-support .content{top:76px!important}}

/* WHO WE WANT: lift the title-side diamond detail into the open header field. */
.page-person .geo-decor-person i:nth-child(2){top:15%!important}
.page-person>.page-accent i:nth-child(1){top:25%}

/* JOIN OUR TEAM: enrich the empty middle without crossing the CTA or people. */
.page-closing>.page-accent i:nth-child(3){
  display:block;left:30px;top:57%;bottom:auto;width:12px;height:12px
}
.page-closing>.page-accent i:nth-child(1)::after{
  content:"";position:absolute;left:74px;top:38px;width:34px;height:34px;
  border:5px solid #2d7de0;border-radius:50%
}
.page-closing>.page-accent i:nth-child(2)::after{
  content:"";position:absolute;right:58px;top:-52px;width:72px;height:54px;
  border-radius:59% 41% 48% 52% / 45% 62% 38% 55%;
  background:#79cee080
}

/* SALARY: fill the open header field without touching the copy. */
.salary-top-accent{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.salary-top-accent i{position:absolute;display:block}
.salary-top-accent i:nth-child(1){
  left:-26px;top:13%;width:78px;height:78px;border-radius:50%;
  background:repeating-linear-gradient(90deg,#79cee0 0 5px,transparent 5px 12px);opacity:.72
}
.salary-top-accent i:nth-child(2){
  left:68px;top:17%;width:36px;height:36px;border:6px solid #fd9934;border-radius:50%;opacity:.82
}
.salary-top-accent i:nth-child(3){
  left:142px;top:12%;width:11px;height:11px;border-radius:50%;background:#6ec36a;
  box-shadow:25px 13px 0 -2px #2d7de0,48px -6px 0 -3px #fd9934,68px 19px 0 -4px #79cee0
}

/* Frame-by-frame block wipe for every section heading. */
.heading-line{position:relative;display:block;width:max-content;max-width:100%;font-style:normal}
.heading-line-text{display:block;font:inherit;color:inherit;opacity:0}
.heading-line::after{
  content:"";position:absolute;z-index:2;inset:3% 0;
  background:var(--heading-wipe,#fd9934);transform:scaleX(0);transform-origin:left center
}
.page-statement{--heading-wipe:#fd9934}
.page-culture{--heading-wipe:#2d7de0}
#voice{--heading-wipe:#6ec36a}
.page-workstyle{--heading-wipe:#fd9934}
.page-pay{--heading-wipe:#6ec36a}
#job1{--heading-wipe:#fd9934}
#job2{--heading-wipe:#6ec36a}
.page-support{--heading-wipe:#79cee0}
.page-person{--heading-wipe:#79cee0}
.page-requirements{--heading-wipe:#fd9934}
.page-company{--heading-wipe:#6ec36a}
.page-closing{--heading-wipe:#fd9934}
.page-entry{--heading-wipe:#fd9934}
.page-closing h2{
  font-size:clamp(42px,11vw,58px);
  line-height:1.25;
  letter-spacing:.08em;
  margin-bottom:18px
}

/* Layered motion direction: label, copy, UI parts, artwork, then ambient scenery. */
@media(prefers-reduced-motion:no-preference){
  .page .eyebrow{opacity:0;translate:0 12px}
  .page.active .eyebrow{animation:label-arrive .7s .04s cubic-bezier(.22,1,.36,1) both}
  .page .eyebrow::before{scale:1 0;transform-origin:center bottom}
  .page.active .eyebrow::before{animation:slash-draw .55s .12s cubic-bezier(.22,1,.36,1) both}

  .page .content>p:not(.eyebrow):not(.person-kicker){opacity:0;translate:0 18px;filter:blur(5px)}
  .page.active .content>p:not(.eyebrow):not(.person-kicker){animation:copy-arrive .75s .62s cubic-bezier(.22,1,.36,1) both}

  .feature-list li,.salary-card,.page-job .tag,.primary-button{opacity:0;translate:0 18px}
  .page.active .feature-list li,.page.active .salary-card,.page-job.active .tag,.page.active .primary-button{
    animation:ui-rise .65s .72s cubic-bezier(.22,1,.36,1) both
  }
  .page.active .feature-list li:nth-child(2){animation-delay:.82s}
  .page.active .feature-list li:nth-child(3){animation-delay:.92s}

  .section-illustration,.round-photo,.pay-illustration,.job-photo img,.person-illustration,.closing-illustration{
    opacity:0;translate:0 26px;filter:saturate(.82)
  }
  .page.active .section-illustration,.page.active .round-photo,.page.active .pay-illustration,
  .page.active .job-photo img,.page.active .person-illustration,.page.active .closing-illustration{
    animation:art-arrive .95s .48s cubic-bezier(.16,1,.3,1) both,art-breathe 7s 1.5s ease-in-out infinite alternate
  }

  .page.active .page-accent i:nth-child(1){animation:ambient-a 6.8s ease-in-out infinite alternate}
  .page.active .page-accent i:nth-child(2){animation:ambient-b 8.2s -2.7s ease-in-out infinite alternate}
  .page.active .page-accent i:nth-child(3){animation:ambient-c 5.6s -1.4s ease-in-out infinite alternate}
  .page.active .page-accent::before{animation:ambient-blob 9s -3s ease-in-out infinite alternate}
  .page.active .page-accent::after{animation:ambient-wave 8s ease-in-out infinite alternate}

  .floating-entry{animation:entry-pulse 3.2s ease-in-out infinite}
  .primary-button{position:relative}
  .primary-button,.floating-entry{overflow:hidden}
  .primary-button::after,.floating-entry::after{
    content:"";position:absolute;inset:-40% auto -40% -45%;width:28%;
    background:linear-gradient(90deg,transparent,#ffffff73,transparent);
    transform:skewX(-18deg);animation:cta-glint 4.8s 1.8s ease-in-out infinite
  }
}
@keyframes label-arrive{to{opacity:1;translate:0 0}}
@keyframes slash-draw{to{scale:1 1}}
@keyframes copy-arrive{to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes ui-rise{to{opacity:1;translate:0 0}}
@keyframes art-arrive{to{opacity:1;translate:0 0;filter:saturate(1)}}
@keyframes art-breathe{to{translate:0 -7px;filter:saturate(1.04)}}
@keyframes ambient-a{to{translate:8px -9px;rotate:3deg;scale:1.04 .96}}
@keyframes ambient-b{to{translate:-7px 8px;rotate:-4deg;scale:.96 1.04}}
@keyframes ambient-c{to{translate:6px -5px;scale:1.12}}
@keyframes ambient-blob{to{translate:-10px 9px;rotate:5deg;scale:1.04 .97}}
@keyframes ambient-wave{to{translate:12px 2px;scale:1.03 .97}}
@keyframes entry-pulse{50%{box-shadow:0 12px 34px #fd99345c}}
@keyframes cta-glint{0%,68%{left:-45%}88%,100%{left:125%}}
.page.active .heading-line-text{
  animation:heading-copy-in .78s steps(1,end) both;
  animation-delay:calc(.16s + var(--line-index) * .14s)
}
.page.active .heading-line::after{
  animation:heading-block-wipe .78s cubic-bezier(.77,0,.18,1) both;
  animation-delay:calc(.16s + var(--line-index) * .14s)
}
@keyframes heading-copy-in{0%,52%{opacity:0}53%,100%{opacity:1}}
@keyframes heading-block-wipe{
  0%{transform:scaleX(0);transform-origin:left center}
  48%{transform:scaleX(1);transform-origin:left center}
  52%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@media(prefers-reduced-motion:reduce){
  .heading-line-text{opacity:1!important;animation:none!important}
  .heading-line::after{display:none}
}

/* Keep every bottom wave as substantial as the P1–P3 wave treatment. */
.page-accent.accent-wave::after{
  bottom:-10px!important;
  height:132px!important;
  clip-path:ellipse(96% 68% at 3% 100%)!important
}
@media(max-height:700px){
  .page-accent.accent-wave::after{bottom:-12px!important;height:116px!important}
}

/* JOB 01 / 02: lower only the artwork slightly on phones. */
@media(max-width:799px){
  .page-job .job-photo img{
    position:relative;
    top:12px;
  }
}

.job-photo{
  position:absolute;
  left:0;
  right:0;
  top:10px;
  height:48%;
  overflow:hidden;
}
@media(max-height:700px){
  .page.page-job .job-photo{
    height:38%;
  }
}

/* ---- Contact Form 7 ---------------------------------------------------- */
/* CF7 の出力（span.wpcf7-form-control-wrap 等）に合わせた最小限の調整。 */
.entry-form .wpcf7-form-control-wrap{display:block}
.entry-form input[type=checkbox]{-webkit-appearance:checkbox;appearance:checkbox;width:18px;height:18px;padding:0;margin:0 10px 0 0;border-radius:0;flex:none}
.entry-form .wpcf7-list-item{margin:0}
.entry-form .wpcf7-acceptance .wpcf7-list-item-label{font-weight:700}
.entry-form input.submit-button{display:block;text-align:center;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.entry-form input.submit-button:disabled{opacity:.5;cursor:default}
.entry-form .wpcf7-spinner{display:block;margin:12px auto 0}
.entry-form .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:12px;font-weight:700;color:#d0342c;letter-spacing:.04em}
.entry-form .wpcf7-response-output{margin:0;padding:14px 18px;border:1px solid var(--ink);border-radius:12px;font-size:13px;font-weight:700;line-height:1.7}
.entry-form.sent .wpcf7-response-output{background:var(--green);border-color:transparent}
.entry-form.invalid .wpcf7-response-output,.entry-form.failed .wpcf7-response-output,.entry-form.aborted .wpcf7-response-output,.entry-form.spam .wpcf7-response-output{background:#ffe3e0;border-color:#d0342c}
.entry-form .wpcf7-response-output:empty{display:none}
.entry-form-missing{margin-top:38px;padding:18px;border:1px dashed #d0342c;border-radius:12px;font-size:13px;color:#d0342c;font-weight:700}

/* ---- 応募完了ページ / 固定ページ ---------------------------------------- */
a.primary-button{text-decoration:none;color:white}
.page-thanks{background:#fff7ed}
.page-thanks .scroll-inner{min-height:100dvh;display:flex;flex-direction:column}
.page-thanks .thanks-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.page-thanks .thanks-body>p,.page-thanks .page-body{margin-top:8px}
.page-thanks .thanks-illustration{display:block;width:min(70%,320px);height:auto;margin:32px auto 0}
.page-thanks .thanks-button{margin-top:36px;background:var(--orange);color:var(--ink)}
.page-body{line-height:2;font-size:15px}
.page-body p{margin:0 0 1.5em}
.page-body h3{font-size:20px;margin:2em 0 .6em}
.page-body ul,.page-body ol{padding-left:1.4em;margin:0 0 1.5em}
.page-body a{color:#e57300}



/* SWIPE UP の三角を上下に動かす */
.scroll-cue.next-trigger i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 8px auto 0 !important;
  background: none !important;

  animation-name: triangleMove !important;
  animation-duration: 1.2s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

.scroll-cue.next-trigger i::before {
  content: "▼";
  display: block;
  font-size: 14px;
  line-height: 1;
}

@keyframes triangleMove {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}