:root{
  --paper:#fff; --ink:#000; --rule:#d4d4d4;
  --ok:#2F7A55; --warn:#E0A526; --clip:#D8362B;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}

.bar{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--ink)}
.bar nav,.lang{display:flex;gap:1.5rem}
.bar a{text-decoration:none;font-weight:700}
.bar a:hover,.lang a[aria-current]{text-decoration:underline}

.hero{display:grid;gap:2.5rem;padding:clamp(2.5rem,7vw,5rem) 0}
@media(min-width:860px){.hero{grid-template-columns:1fr 20rem;align-items:end}}
.hero>div:first-child{container-type:inline-size}
h1{margin:0;font-weight:700;font-size:clamp(2.8rem,12vw,5rem);font-size:clamp(2.8rem,19cqw,8rem);line-height:.92;text-transform:uppercase;letter-spacing:-.025em}
h1 span{display:block}
.meter{position:relative;height:14px;max-width:560px;margin:1.75rem 0 2rem;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 14px);
  mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 14px)}
.meter::before,.meter::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ok) 0 68%,var(--warn) 68% 86%,var(--clip) 86%)}
.meter::before{opacity:.16}
.meter::after{clip-path:inset(0 100% 0 0);animation:level 1.4s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes level{to{clip-path:inset(0 14% 0 0)}}
@media(prefers-reduced-motion:reduce){.meter::after{animation:none;clip-path:inset(0 14% 0 0)}}

.role{margin:0 0 1.25rem;font-size:1.375rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.copy p{max-width:38rem;margin:0 0 1rem}
.btn{display:inline-block;margin-top:1rem;padding:.8rem 1.4rem;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.btn:hover{background:#333}
.btn:focus-visible{outline-color:var(--clip)}
.photo{margin:0}
.photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--rule)}

.section{display:grid;gap:2rem;padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--ink)}
@media(min-width:860px){.section{grid-template-columns:20rem 1fr;gap:3rem}}
h2{margin:0 0 1rem;font-size:2.25rem;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.logo img{display:block;width:100%;max-width:20rem;height:auto}
.section p{max-width:38rem;margin:0 0 1rem}

footer{padding:2rem 0 3rem;border-top:1px solid var(--ink);font-size:.9rem}