:root{--coral:#ff6847;--yellow:#ffd84d;--navy:#14213d;--cream:#fff8e9;--ink:#19223a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",sans-serif;line-height:1.8;overflow-x:hidden}
.sample{text-align:center;background:var(--yellow);font-size:12px;padding:4px}
header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 1280px)/2));position:relative;z-index:5;background:#fff}
.logo{text-decoration:none;color:var(--navy);display:flex;align-items:center;gap:9px}
.logo b{font-size:26px;transform:rotate(-3deg);background:var(--coral);padding:2px 9px;color:#fff}
.logo span{display:flex;flex-direction:column;line-height:1.25}.logo strong{font-size:13px;white-space:nowrap}.logo small{margin-top:3px;font-size:9px;font-weight:bold;color:var(--coral);letter-spacing:.12em}
nav{display:flex;gap:20px;align-items:center}
nav a{color:var(--navy);text-decoration:none;font-size:13px;font-weight:bold}
.menu{display:none}
.hero{min-height:680px;background:var(--cream);display:grid;grid-template-columns:45% 55%;align-items:center;padding-left:max(24px,calc((100% - 1280px)/2));position:relative}
.hero:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:var(--yellow);left:36%;top:6%}
.hero-copy{z-index:2;padding-right:30px}
.hero-copy>p:first-child,.label{font-weight:bold;letter-spacing:.12em;color:var(--coral)}
h1{font-size:clamp(48px,6vw,84px);line-height:1.22;margin:15px 0}
.hero h1 span{display:block}
.hero h1 .accent{color:var(--coral)}
.lead{font-weight:bold}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:4px;text-decoration:none;font-weight:bold;transition:.2s}
.btn:hover{transform:translateY(-3px)}
.navy{background:var(--navy);color:#fff}
.coral{background:var(--coral);color:#fff}
.yellow{background:var(--yellow);color:var(--navy)}
.outline{border:2px solid #fff;color:#fff}
.hero-photo{height:590px;clip-path:polygon(11% 0,100% 0,100% 91%,0 100%);position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-photo i{position:absolute;width:90px;height:90px;left:4%;bottom:1%;background:var(--coral);transform:rotate(12deg)}
.step{opacity:0;transform:translateY(18px);animation:in .65s forwards}
.step:nth-child(2){animation-delay:.15s}
.step:nth-child(3){animation-delay:.3s}
.step:nth-child(4){animation-delay:.45s}
.ticker{background:var(--navy);color:#fff;font-size:34px;font-weight:900;white-space:nowrap;overflow:hidden;transform:rotate(-1deg);padding:10px 0}
.ticker div{display:inline-block;animation:ticker 18s linear infinite}
.message,.about,.day,.interviews,.support,.jobs{padding:110px max(24px,calc((100% - 1180px)/2))}
.message{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:6%;align-items:center}
.message h2,.about h2,.section-head h2{font-size:clamp(36px,5vw,64px);line-height:1.35;margin:8px 0 30px}.message h2{font-size:clamp(34px,4.25vw,56px)}.message-line{display:block;white-space:nowrap}
.message em{color:var(--coral);font-style:normal}
.about{background:var(--navy);color:#fff;clip-path:polygon(0 8%,100% 0,100% 92%,0 100%);padding-top:150px;padding-bottom:150px}
.about>p:last-child{max-width:720px;font-size:18px}
.roles{padding:90px max(24px,calc((100% - 1180px)/2))}
.role{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;margin:70px 0 140px}
.role.reverse .role-img{order:2}
.role-img{height:500px;position:relative}
.role-img:before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--yellow);z-index:-1}
.reverse .role-img:before{background:var(--coral)}
.role-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.role span{display:inline-block;background:var(--coral);color:#fff;padding:3px 13px;font-weight:bold}
.role h3{font-size:clamp(30px,4vw,48px);line-height:1.35}
.role li{margin:6px}
.day{background:var(--cream)}
.section-head{text-align:center}
.tabs{display:flex;justify-content:center;margin:40px 0 30px}
.tabs button{font:inherit;font-weight:bold;border:2px solid var(--navy);background:#fff;padding:13px 45px}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.timeline{display:none;grid-template-columns:repeat(7,1fr);gap:8px}
.timeline.active{display:grid}
.timeline b{background:#fff;border-top:5px solid var(--coral);padding:22px 12px;min-height:135px}
.interviews{background:#fff}
.interview{max-width:940px;margin:70px auto;display:grid;grid-template-columns:140px 1fr;gap:45px;padding-bottom:60px;border-bottom:1px solid #ddd}
.avatar{width:130px;height:150px;overflow:hidden;transform:rotate(-4deg);box-shadow:8px 8px 0 var(--coral)}.avatar img{width:100%;height:100%;display:block;object-fit:cover}.interview:first-of-type .avatar img{object-position:64% center}.interview:nth-of-type(2) .avatar img{object-position:55% center}
.coral-bg{background:#ffb29f}
.yellow-bg{background:var(--yellow)}
.meta{font-weight:bold;color:var(--coral)}
.interview h3{font-size:30px;line-height:1.5}
.voices,.number-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.voices blockquote{margin:0;background:var(--cream);padding:25px;font-weight:bold}
.voices small{display:block;margin-top:15px;color:#777}
.numbers{padding:110px max(24px,calc((100% - 1180px)/2));background:var(--coral);color:#fff;clip-path:polygon(0 5%,100% 0,100% 95%,0 100%)}
.numbers .label{color:var(--yellow)}
.number-grid>div{text-align:center;border:1px solid #ffffff80;padding:25px 8px}
.number-grid strong{font-size:50px}
.number-grid span{font-weight:bold}
.number-grid p{margin:0}
.support{background:var(--cream)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.cards article{background:#fff;padding:38px;border-radius:8px}
.cards h3,.person h3{font-size:26px}
.cards li{margin:8px}
.person{margin-top:25px;background:var(--navy);color:#fff;padding:35px}
.jobs .job-tabs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.jobs details{border:2px solid var(--navy)}
.jobs summary{font-size:26px;font-weight:bold;padding:20px;background:var(--navy);color:#fff;cursor:pointer}
.jobs dl{padding:0 24px}
.jobs dl div{display:grid;grid-template-columns:105px 1fr;border-bottom:1px solid #ddd;padding:13px 0}
.jobs dt{font-weight:bold}
.jobs dd{margin:0;overflow-wrap:anywhere}
.entry{padding:100px 24px;text-align:center;background:var(--navy);color:#fff;font-size:20px}
.entry .buttons{justify-content:center}
footer{padding:60px max(24px,calc((100% - 1180px)/2));display:grid;grid-template-columns:1fr 1fr;gap:25px;background:#0c1528;color:#fff}
footer div{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:#fff}
footer small{grid-column:1/-1;color:#9ea5b2}
.reveal{opacity:0;transform:translateY(28px);transition:.7s}
.reveal.on{opacity:1;transform:none}
.slide{opacity:0;transform:translateX(24px);animation:slide .8s .3s forwards}
@keyframes in{to{opacity:1;transform:none}
}
@keyframes slide{to{opacity:1;transform:none}
}
@keyframes ticker{to{transform:translateX(-50%)}
}
@media(max-width:1000px){nav{gap:10px}
.timeline{grid-template-columns:repeat(4,1fr)}
.voices,.number-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){header{height:68px;padding-left:14px;padding-right:14px}.logo{gap:7px}.logo b{font-size:22px;padding:2px 7px}.logo strong{font-size:11px}.logo small{font-size:8px}
.menu{display:block;border:0;background:var(--navy);color:#fff;padding:11px}
nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:24px;box-shadow:0 8px 15px #0002}
nav.open{display:grid}
.hero{grid-template-columns:1fr;padding:48px 20px 0;min-height:auto}
.hero:before{left:auto;right:-50px}
.hero-copy{padding:0}
.hero h1{font-size:clamp(44px,14vw,58px)}
.hero-photo{height:390px;margin:35px -20px 0;clip-path:polygon(7% 0,100% 4%,100% 100%,0 94%)}
.hero-photo img{object-position:58% center}
.message,.role,.jobs .job-tabs{grid-template-columns:1fr}.message h2{font-size:clamp(30px,8.5vw,38px)}
.message,.about,.day,.interviews,.support,.jobs{padding:78px 20px}
.about{padding-top:110px;padding-bottom:110px}
.roles{padding:55px 20px}
.role{margin:50px 0 100px}
.role.reverse .role-img{order:0}
.role-img{height:360px}
.role-img img{object-position:center}
.interview{grid-template-columns:1fr;gap:18px}
.avatar{width:110px;height:125px}
.voices,.number-grid,.cards{grid-template-columns:1fr}
.timeline{grid-template-columns:1fr}
.timeline b{min-height:0}
.numbers{padding:100px 20px}
.jobs dl div{grid-template-columns:1fr;gap:4px}
.btn{width:100%}
footer{grid-template-columns:1fr}
.ticker{font-size:25px}
}
@media(max-width:390px){.sample{font-size:10px}.logo strong{font-size:10px}.logo small{display:none}.message h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.step,.slide,.ticker div,.reveal{animation:none;transition:none;opacity:1;transform:none}
}