:root{
  --paper:#f1efe8;
  --paper-2:#e7e3d9;
  --card:#faf8f2;
  --ink:#17201d;
  --ink-soft:#59615d;
  --pine:#264c3f;
  --pine-lt:#769687;
  --signal:#a06842;
  --bronze:#a77d4d;
  --rule:rgba(23,32,29,.12);
  --rule-strong:rgba(23,32,29,.25);
  --shadow:0 24px 70px rgba(31,38,33,.08);
  --body:"Commissioner",sans-serif;
}

body{
  background:
    radial-gradient(circle at 84% 7%,rgba(167,125,77,.09),transparent 28rem),
    linear-gradient(90deg,rgba(38,76,63,.025) 1px,transparent 1px),
    var(--paper);
  background-size:auto,72px 72px,auto;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.topbar{
  background:rgba(241,239,232,.84);
  border-bottom-color:rgba(38,76,63,.14);
  box-shadow:0 10px 35px rgba(23,32,29,.025);
}

.topbar-in{padding-top:12px;padding-bottom:12px}
.brand{gap:14px}
.brand-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--pine);
  color:var(--pine);
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.08em;
  transform:rotate(-2deg);
  transition:background .25s,color .25s,transform .25s;
}
.brand:hover .brand-mark{background:var(--pine);color:var(--paper);transform:rotate(0)}
.brand-name{font-size:19px}
.nav{gap:clamp(16px,2.2vw,30px)}
.nav a{position:relative;border:0}
.nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.header-contact{display:none}

.hero{padding-top:clamp(74px,10vw,128px)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(230px,.5fr);
  gap:clamp(50px,9vw,120px);
  align-items:center;
}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(46px,6.8vw,82px);max-width:14ch;letter-spacing:-.035em}
.hero h1 em{position:relative;color:var(--pine)}
.hero h1 em::after{
  content:"";
  position:absolute;
  right:3%;
  bottom:.04em;
  left:2%;
  height:1px;
  background:var(--bronze);
  transform:rotate(-1deg);
}
.hero-lede{max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:34px 0 8px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.button:hover{transform:translateY(-2px)}
.button--primary{background:var(--pine);border:1px solid var(--pine);color:var(--paper)}
.button--primary:hover{background:#193b30}
.button--text{padding-right:4px;padding-left:4px;border-bottom:1px solid var(--rule-strong)}
.button--text:hover{color:var(--pine);border-color:var(--bronze)}
.button--text span{font-size:15px;margin-left:8px}

.hero-seal{
  position:relative;
  min-height:390px;
  padding:42px 30px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  color:var(--paper);
  background:var(--pine);
  box-shadow:var(--shadow);
}
.hero-seal::before{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(241,239,232,.28);
}
.hero-seal::after{
  content:"§";
  position:absolute;
  top:-50px;
  right:-8px;
  font-family:var(--display);
  font-size:220px;
  line-height:1;
  color:rgba(241,239,232,.055);
}
.hero-seal > *{position:relative;z-index:1}
.seal-kicker,.seal-city{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.seal-kicker{position:absolute;top:42px;left:30px;color:rgba(241,239,232,.7)}
.hero-seal strong{font-family:var(--display);font-size:108px;font-weight:300;line-height:.72;letter-spacing:-.06em}
.seal-label{margin-top:22px;font-family:var(--display);font-size:22px;line-height:1.05;font-style:italic;color:rgba(241,239,232,.86)}
.seal-line{height:1px;background:rgba(241,239,232,.28);margin:26px 0 16px}
.seal-city{color:rgba(241,239,232,.58)}
.hero-seal--docket{min-height:330px;background:#202d29}
.hero-seal--docket strong{font-size:92px;letter-spacing:.02em}

.tags{margin-top:clamp(58px,8vw,88px);border-color:var(--rule-strong)}
.tags span{padding-top:16px;padding-bottom:16px;border-color:var(--rule)}
.band{position:relative;padding-top:clamp(76px,10vw,130px);padding-bottom:clamp(76px,10vw,130px)}
.band::before{content:"";position:absolute;top:0;left:var(--pad);width:42px;height:1px;background:var(--bronze)}
.band--ink::before{background:var(--pine-lt)}
.band--tint{background:rgba(231,227,217,.72)}
.band h2{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.025em;line-height:1.05}

.areas{gap:0;border-top:1px solid var(--rule-strong)}
.area{
  position:relative;
  padding:34px clamp(20px,3vw,38px) 38px;
  border-bottom:1px solid var(--rule);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.area:nth-child(odd){border-right:1px solid var(--rule)}
.area:hover{z-index:1;background:var(--card);box-shadow:var(--shadow);transform:translateY(-3px)}
.area .num{color:var(--bronze)}

.rail{max-width:880px;margin-left:auto}
.step{grid-template-columns:120px 1fr;padding-top:32px;padding-bottom:34px}
.step-mark b{font-size:28px}
.step-body h4{font-size:24px}
.profile{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
.creds,.proc,.legalbox{box-shadow:0 18px 55px rgba(31,38,33,.055)}
.creds{border-top:3px solid var(--bronze);padding:38px 34px;background:rgba(250,248,242,.78)}
.contact{align-items:stretch}
.cbox{margin:0;padding:8px 0}
.map{height:100%;min-height:380px;border:8px solid var(--card);box-shadow:var(--shadow);filter:grayscale(.75) sepia(.12) contrast(1.02)}
.proc{border-top:3px solid var(--pine);overflow:hidden}
.proc-head{padding:38px clamp(24px,4vw,46px) 30px}
.proc-head h3{font-size:clamp(25px,3vw,36px);max-width:28ch}
.proc-meta div,.docs{padding-left:clamp(22px,4vw,42px);padding-right:clamp(22px,4vw,42px)}
.docs a{transition:color .2s,padding-left .2s}
.docs a:hover{padding-left:8px}
.habil{box-shadow:var(--shadow)}
.habil > div{padding:clamp(28px,4vw,42px)}
footer{padding-top:70px;background:#17221f}

.reveal-ready .band .wrap > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal-ready .band.is-visible .wrap > *{opacity:1;transform:none}
.reveal-ready .band.is-visible .wrap > *:nth-child(2){transition-delay:.06s}
.reveal-ready .band.is-visible .wrap > *:nth-child(3){transition-delay:.12s}
.reveal-ready .band.is-visible .wrap > *:nth-child(4){transition-delay:.18s}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-seal{min-height:260px;max-width:520px;width:100%;margin-left:auto}
  .hero-seal strong{font-size:86px}
}

@media(max-width:820px){
  .header-contact{
    display:inline-block;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
    border-bottom:1px solid var(--bronze);
  }
}

@media(max-width:640px){
  body{font-size:16px;background-size:auto,44px 44px,auto}
  .topbar-in{padding-top:10px;padding-bottom:10px}
  .brand-mark{width:35px;height:35px;font-size:12px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:8px;letter-spacing:.1em}
  .hero{padding-top:58px}
  .hero h1{font-size:clamp(42px,13vw,58px)}
  .hero-actions{align-items:stretch;flex-direction:column;max-width:300px}
  .button--text{justify-content:flex-start}
  .hero-seal{min-height:240px;padding:34px 26px 26px}
  .seal-kicker{top:34px;left:26px}
  .hero-seal strong{font-size:76px}
  .seal-label{font-size:19px}
  .tags{display:grid;grid-template-columns:1fr 1fr}
  .tags span{border-right:0;border-bottom:1px solid var(--rule)}
  .area:nth-child(odd){border-right:0}
  .band::before{left:20px}
  .step{grid-template-columns:1fr}
  .map{min-height:300px}
  .docs a,.docs span.pend{align-items:flex-start;flex-wrap:wrap}
  .docs .dt{order:3;width:100%;margin-left:0;padding-right:0}
}

@media(prefers-reduced-motion:reduce){
  .brand-mark,.nav a::after,.button,.area,.docs a{transition:none}
  .reveal-ready .band .wrap > *{opacity:1;transform:none;transition:none}
}