@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --wf-ink:#172524;
  --wf-green:#2f4b3c;
  --wf-green-dark:#1f382d;
  --wf-brass:#9c7a3c;
  --wf-paper:#ffffff;
  --wf-wash:#f2f3ef;
  --wf-line:#d8d8d0;
  --wf-muted:#5c6660;
  --wf-coral:#b85643;
  --wf-max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--wf-ink);
  background:var(--wf-paper);
  font-family:'IBM Plex Sans',sans-serif;
  line-height:1.5;
}
a:focus-visible,summary:focus-visible{
  outline:3px solid var(--wf-brass);
  outline-offset:3px;
}
.wf-shell{width:min(calc(100% - 40px),var(--wf-max));margin-inline:auto}
.wf-narrow{max-width:820px}

.wf-announcement{
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:6px 20px;
  color:#fff;
  background:var(--wf-green);
  font:500 11px/1.35 'IBM Plex Sans',sans-serif;
  text-align:center;
  text-decoration:none;
}
.wf-announcement span{
  padding:2px 7px;
  border-radius:999px;
  color:var(--wf-green-dark);
  background:#fff;
  font:600 9px/1.2 'IBM Plex Mono',monospace;
}
.wf-announcement strong{font-weight:600}

.wf-header{background:var(--wf-ink);color:#fff}
.wf-header-inner{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.wf-brand{
  flex:none;
  color:#fff;
  font:600 20px/1 'Fraunces',serif;
  text-decoration:none;
}
.wf-brand small{
  margin-left:7px;
  color:#b9c2bd;
  font:400 9px/1 'IBM Plex Mono',monospace;
  letter-spacing:.08em;
}
.wf-nav{display:flex;align-items:center;gap:24px}
.wf-nav a{
  color:#eef1ef;
  font-size:11px;
  text-decoration:none;
}
.wf-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

.wf-hero{
  min-height:560px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:88px 24px 76px;
  background:var(--wf-wash);
}
.wf-hero-copy{
  width:min(100%,780px);
  position:relative;
  z-index:2;
  text-align:center;
}
.wf-kicker{
  display:block;
  margin-bottom:14px;
  color:var(--wf-brass);
  font:500 11px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.wf-hero h1{
  margin:0;
  font-size:clamp(42px,4.4vw,68px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.wf-hero-copy>p{
  max-width:680px;
  margin:20px auto 0;
  color:#34413d;
  font-size:18px;
  line-height:1.45;
}
.wf-button{
  display:inline-flex;
  min-width:260px;
  min-height:48px;
  align-items:center;
  justify-content:center;
  margin-top:26px;
  padding:12px 24px;
  border:1px solid var(--wf-green-dark);
  border-radius:999px;
  color:#fff;
  background:var(--wf-green);
  font:600 12px/1 'IBM Plex Sans',sans-serif;
  letter-spacing:.035em;
  text-decoration:none;
}
.wf-button:hover{background:var(--wf-green-dark)}
.wf-microcopy{
  display:block;
  margin-top:10px;
  color:var(--wf-muted);
  font:400 10px/1.4 'IBM Plex Mono',monospace;
}

.wf-visual{
  width:270px;
  position:absolute;
  bottom:0;
  z-index:1;
  text-align:center;
}
.wf-visual--left{left:18px}
.wf-visual--right{right:18px}
.wf-portrait{
  width:230px;
  height:390px;
  position:relative;
  display:grid;
  place-items:center;
  margin:0 auto;
  overflow:hidden;
  border:1px dashed #9da7a1;
  border-bottom:0;
  border-radius:120px 120px 0 0;
  background:
    radial-gradient(circle at 50% 23%,#d9ddd9 0 54px,transparent 55px),
    linear-gradient(145deg,#e4e7e3 30%,#cbd2cd 100%);
}
.wf-portrait::after{
  content:'';
  width:190px;
  height:230px;
  position:absolute;
  bottom:-45px;
  border-radius:100px 100px 0 0;
  background:#b8c2bc;
}
.wf-portrait span{
  position:relative;
  z-index:2;
  color:var(--wf-green-dark);
  font:600 28px/1 'Fraunces',serif;
}
.wf-visual small{
  display:block;
  position:absolute;
  right:0;
  bottom:10px;
  left:0;
  z-index:3;
  color:#4d5953;
  font:400 9px/1.3 'IBM Plex Mono',monospace;
}

.wf-section{padding:72px 0}
.wf-section--compact{padding-top:50px;padding-bottom:50px}
.wf-section-heading{max-width:680px;margin:0 auto 42px;text-align:center}
.wf-section-heading>span{
  display:block;
  margin-bottom:7px;
  color:var(--wf-brass);
  font:600 12px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.wf-section-heading h2{
  margin:0;
  font:600 clamp(28px,3vw,40px)/1.1 'Fraunces',serif;
}
.wf-section-heading p{margin:10px 0 0;color:var(--wf-muted);font-size:14px}

.wf-resources{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.wf-resources--three{grid-template-columns:repeat(3,1fr)}
.wf-resource{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 8px;
  text-align:center;
}
.wf-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  color:#fff;
  background:var(--wf-coral);
  font:600 8px/1.3 'IBM Plex Mono',monospace;
  text-transform:uppercase;
}
.wf-resource-number{
  width:116px;
  height:116px;
  display:grid;
  place-items:center;
  margin:20px 0 18px;
  border-radius:50%;
  color:#fff;
  background:var(--wf-green-dark);
  font:600 34px/1 'Fraunces',serif;
}
.wf-resource h3{min-height:48px;margin:0;font-size:15px;line-height:1.25;text-transform:uppercase}
.wf-resource>p:not(.wf-resource-number){min-height:66px;margin:8px 0 0;color:var(--wf-muted);font-size:12px}
.wf-button--small{min-width:0;width:100%;min-height:38px;margin-top:18px;padding:10px 12px;font-size:10px}

.wf-faq{border-top:1px solid var(--wf-ink)}
.wf-faq details{border-bottom:1px dashed #7b837f}
.wf-faq summary{
  position:relative;
  padding:16px 34px 16px 0;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  list-style:none;
}
.wf-faq summary::-webkit-details-marker{display:none}
.wf-faq summary::after{content:'+';position:absolute;right:4px;font:500 18px/1 'IBM Plex Mono',monospace}
.wf-faq details[open] summary::after{content:'−'}
.wf-faq details p{margin:0;padding:0 48px 18px 0;color:var(--wf-muted);font-size:13px}

.wf-authority{max-width:620px;margin-inline:auto}
.wf-authority-visual{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  border:2px solid var(--wf-ink);
  background:var(--wf-wash);
  color:var(--wf-muted);
  font:400 10px/1.4 'IBM Plex Mono',monospace;
  text-align:center;
}
.wf-authority h3{margin:0 0 12px;font:600 23px/1.2 'Fraunces',serif}
.wf-authority p{margin:0 0 12px;color:#394641;font-size:13px}

.wf-footer{padding:28px 0;color:#d9dfdc;background:var(--wf-ink)}
.wf-footer .wf-shell{display:flex;justify-content:space-between;gap:24px;align-items:center}
.wf-footer strong{font:600 17px/1 'Fraunces',serif}
.wf-footer span{font:400 9px/1.4 'IBM Plex Mono',monospace;text-align:right}

@media (max-width:1000px){
  .wf-hero{padding-right:190px;padding-left:190px}
  .wf-visual{width:180px}
  .wf-portrait{width:165px;height:320px}
  .wf-portrait::after{width:145px}
}

@media (max-width:760px){
  .wf-header-inner{padding:14px 0;flex-direction:column;gap:12px}
  .wf-nav{max-width:100%;gap:10px 16px;justify-content:center;flex-wrap:wrap}
  .wf-hero{min-height:auto;padding:76px 24px}
  .wf-visual{display:none}
  .wf-hero h1{font-size:clamp(38px,12vw,54px)}
  .wf-resources{grid-template-columns:1fr 1fr;gap:42px 18px}
  .wf-authority{grid-template-columns:1fr;gap:24px}
  .wf-authority-visual{max-width:320px;width:100%;margin-inline:auto}
}

@media (max-width:480px){
  .wf-announcement{font-size:9px}
  .wf-nav a{font-size:10px}
  .wf-resources{grid-template-columns:1fr}
  .wf-resource{max-width:300px;margin-inline:auto}
  .wf-resource h3,.wf-resource>p:not(.wf-resource-number){min-height:0}
  .wf-footer .wf-shell{flex-direction:column;text-align:center}
  .wf-footer span{text-align:center}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}