:root{--blue:#1c4aa6;--deep:#0f2a63;--gray:#e4e7ea;--slate:#58626d;--tan:#d8c7a1;--ink:#101a2e;--bone:#f6f3ec;
--head:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--body:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--gray);color:var(--ink);font:400 1.1rem/1.6 var(--body)}
a{color:inherit}
img{display:block;width:100%;height:auto;object-fit:cover}
:focus-visible{outline:3px solid var(--tan);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--head)}

header{position:absolute;inset:0 0 auto;z-index:5}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:22px}
.logo{font:800 1.25rem var(--head);color:var(--bone);text-decoration:none;letter-spacing:-.01em}
nav{display:flex;gap:26px;align-items:center;font-weight:500;color:var(--bone)}
nav a{text-decoration:none}nav a:hover{text-decoration:underline;text-underline-offset:5px}
nav .book{background:var(--tan);color:var(--ink);padding:9px 20px;border-radius:999px;font-weight:600}
nav .book:hover{background:var(--bone);text-decoration:none}
@media(max-width:620px){nav a:not(.book){display:none}}

.hero{background:var(--blue);color:var(--bone);padding:150px 0 0;overflow:hidden}
.hero h1{font-weight:800;font-size:clamp(3rem,9.5vw,7.6rem);line-height:.95;letter-spacing:-.035em;max-width:11ch}
.hero p{margin-top:24px;max-width:34ch;font-size:1.3rem;color:#dbe4f7}
.course{margin-top:56px;position:relative}
.course svg{display:block;width:100%;height:clamp(120px,22vw,240px)}
.course .line{fill:none;stroke:var(--tan);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .3s ease-out forwards}
.course .fill{fill:var(--deep);opacity:.55}
@keyframes draw{to{stroke-dashoffset:0}}
.marks{display:flex;justify-content:space-between;background:var(--deep);color:var(--tan);font-weight:500;font-size:.95rem;padding:12px 24px}

figure.lead{margin:0}
figure.lead img{aspect-ratio:21/9;object-position:50% 8%}
figcaption{font-size:.95rem;color:var(--slate);padding-top:10px}
@media(max-width:700px){figure.lead img{aspect-ratio:4/3}}

section{padding:88px 0}
.k{font:700 clamp(2rem,4.6vw,3.2rem)/1.02 var(--head);letter-spacing:-.025em;margin-bottom:36px;max-width:16ch}

.tl{list-style:none;padding:0;position:relative;max-width:860px}
.tl::before{content:"";position:absolute;left:92px;top:8px;bottom:8px;width:2px;background:var(--blue)}
.tl li{display:grid;grid-template-columns:92px 1fr;padding:0 0 44px;position:relative}
.tl li::after{content:"";position:absolute;left:86px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--gray);border:3px solid var(--blue)}
.tl li:hover::after{background:var(--blue)}
.tl .yr{font:700 1.05rem var(--head);color:var(--blue);padding-top:2px}
.tl .ev{padding-left:34px}
.tl .ev img{max-width:460px;aspect-ratio:16/10;margin-bottom:14px}
.tl .ev img.tall{object-position:50% 25%}
.tl h3{font-weight:700;font-size:1.6rem;line-height:1.1;letter-spacing:-.015em}
.tl p{color:var(--slate);margin-top:4px}
@media(max-width:520px){.tl::before{left:6px}.tl li{grid-template-columns:1fr}.tl li::after{left:0}.tl .yr{padding-left:26px}.tl .ev{padding-left:26px;padding-top:8px}}

.voice{background:var(--tan)}
.voice .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.arch{aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden}
.arch img{height:100%;object-position:50% 40%}
.voice p{max-width:38em;font-size:1.15rem;margin-bottom:14px}
.voice .k{max-width:12ch}
.partners{margin-top:28px;padding-top:20px;border-top:2px solid var(--ink);font-weight:600}
.partners span{color:var(--deep)}
@media(max-width:800px){.voice .grid{grid-template-columns:1fr}.arch{max-width:340px}}

.skills{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.skills div{padding:22px 0 22px 22px;border-top:1px solid var(--slate);position:relative}
.skills div::before{content:"";position:absolute;left:0;top:32px;width:9px;height:9px;background:var(--blue)}
.skills h3{font-weight:700;font-size:1.5rem;letter-spacing:-.015em}
.skills p{color:var(--slate);margin-top:2px}
@media(max-width:760px){.skills{grid-template-columns:1fr}}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.gal img{height:380px}

.finish{background:var(--deep);color:var(--bone)}
.finish h2{font-weight:800;font-size:clamp(2.6rem,8vw,6rem);line-height:.96;letter-spacing:-.035em;max-width:13ch}
.finish a.big{display:inline-block;margin-top:34px;background:var(--tan);color:var(--ink);padding:16px 32px;border-radius:999px;font:700 1.15rem var(--head);text-decoration:none}
.finish a.big:hover{background:var(--bone)}
footer{background:var(--ink);color:#b9c0cc;padding:24px 0 34px;font-size:.98rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer a{margin-right:20px;text-decoration:none}footer a:hover{color:var(--bone)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.course .line{animation:none;stroke-dashoffset:0}}
section.wrap{padding-top:88px;padding-bottom:88px}
@media(max-width:700px){section{padding-top:64px;padding-bottom:64px}section.wrap{padding-top:64px;padding-bottom:64px}}