@font-face{
  font-family:"Archivo";
  src:url("font/archivo.woff2") format("woff2-variations"),
      url("font/archivo.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

/* ---------------------------------------------------------------
   Type ladder, written down before the page was built. Six sizes.
   12 / 16 / 19 / 26 / 40 / 62.  Three weights: 400 / 600 / 800.
   Four painted colours: paper, panel, ink, signal.
   Three inks: ink, paper-on-dark, signal.
   --------------------------------------------------------------- */
:root{
  --paper:#FBF7EF;
  --panel:#EFE7D6;
  --ink:#1A1712;
  --signal:#12379E;

  --t1:12px;
  --t2:16px;
  --t3:19px;
  --t4:26px;
  --t5:40px;
  --t6:62px;

  --gut:clamp(20px,5vw,52px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",Segoe UI,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:var(--t3);
  line-height:1.6;
  font-synthesis-weight:none;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;line-height:1.08;font-weight:800;letter-spacing:-0.02em}
h1{font-size:var(--t6)}
h2{font-size:var(--t5)}
h3{font-size:var(--t4);letter-spacing:-0.012em}
p{margin:0 0 1em;overflow-wrap:break-word}
p:last-child{margin-bottom:0}
a{color:inherit}
b,strong{font-weight:600}
ul,ol{margin:0;padding:0}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.narrow{max-width:56ch}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:800}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
}
.on-dark a:focus-visible{outline-color:var(--paper)}

/* ---------- label ---------- */
.lab{
  font-size:var(--t1);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 10px;
}

/* ---------- mockup banner ---------- */
.mockup{background:var(--ink);color:var(--paper);padding:9px 0}
.mockup .wrap{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;
  font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.mockup span{font-weight:400;letter-spacing:.02em;text-transform:none;font-size:var(--t2)}

/* ---------- header ---------- */
.site-head{border-bottom:2px solid var(--ink)}
.site-head .wrap{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:flex-end;justify-content:space-between;padding-top:20px;padding-bottom:18px}
.mark{font-size:var(--t4);font-weight:800;letter-spacing:-0.022em;line-height:1.05}
.mark b{display:block;font-weight:600;font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;margin-top:7px}
.head-nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;
  font-size:var(--t2);font-weight:600}
.head-nav a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.head-tel{font-size:var(--t4);font-weight:800;letter-spacing:-0.01em;text-decoration:none;white-space:nowrap}
.head-tel:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--signal);color:var(--paper);
  font-size:var(--t3);font-weight:800;letter-spacing:.01em;line-height:1.2;
  padding:15px 26px;text-decoration:none;border:0;border-radius:0;
  transition:background .16s ease, transform .16s ease;
}
.btn:hover{background:#0D2977}
.btn:active{transform:translateY(1px)}

/* ---------- hero ---------- */
.hero{padding:56px 0 0}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:44px 52px;align-items:start}
.hero h1{max-width:15ch}
.hero .lead{font-size:var(--t4);font-weight:400;line-height:1.34;margin-top:26px;max-width:34ch}
.hero .sub{font-size:var(--t2);margin-top:22px;max-width:46ch}
.hero .cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.hero .cta .note{font-size:var(--t2)}
.hero figure{margin:0}
.hero-note{font-size:var(--t2);max-width:44ch;margin-top:22px}
.hero figcaption{font-size:var(--t2);margin-top:10px;max-width:44ch}

/* ---------- term band (structural signal) ---------- */
.band{background:var(--signal);color:var(--paper);margin-top:56px}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 40px;padding-top:34px;padding-bottom:34px}
.band .lab{opacity:1}
.band p{font-size:var(--t3);font-weight:600;line-height:1.35}

/* ---------- generic section ---------- */
.sec{padding:72px 0}
.sec.tint{background:var(--panel)}
.sec-head{max-width:60ch;margin-bottom:38px}
.sec-head p{font-size:var(--t3);margin-top:16px}

/* ---------- the catalogue ---------- */
.cat{padding:72px 0 0}
.div-head{
  display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:start;
  border-top:2px solid var(--ink);padding-top:18px;margin-top:58px;
}
.cat > .wrap > .div-head:first-child{margin-top:0}
.div-num{
  background:var(--signal);color:var(--paper);
  font-size:var(--t5);font-weight:800;letter-spacing:-0.02em;line-height:1;
  padding:14px 0;text-align:center;
}
.div-head h2{font-size:var(--t5)}
.div-head .blurb{font-size:var(--t2);margin-top:14px;max-width:60ch}

.rows{list-style:none;margin:26px 0 0}
.row{
  display:grid;
  grid-template-columns:96px minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,.72fr);
  gap:8px 26px;align-items:start;
  border-top:1px solid rgba(26,23,18,.28);
  padding:20px 0;
}
.row:last-child{border-bottom:1px solid rgba(26,23,18,.28)}
.row-idx{
  font-size:var(--t2);font-weight:800;letter-spacing:.08em;
  background:var(--signal);color:var(--paper);text-align:center;padding:5px 0;
  align-self:start;
}
.row h3{margin-bottom:6px}
.row .who{font-size:var(--t2);font-weight:600}
.row .desc{font-size:var(--t2);margin-top:8px}
.row .facts{list-style:none;font-size:var(--t2)}
.row .facts li{display:flex;gap:10px;padding:2px 0;align-items:baseline}
.row .facts b{font-weight:600;flex:0 0 auto;min-width:5.4em}
.row .money{text-align:right}
.row .fee{font-size:var(--t4);font-weight:800;letter-spacing:-0.015em;display:block;line-height:1.1}
.row .per{font-size:var(--t1);font-weight:800;letter-spacing:.13em;text-transform:uppercase;display:block;margin-top:6px}
.status{
  display:inline-block;margin-top:12px;
  font-size:var(--t1);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;
}
.status.open{background:var(--signal);color:var(--paper)}
.status.wait{background:var(--ink);color:var(--paper)}
.status.full{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);padding:3px 8px}

.cat-fig{margin:52px 0 0;display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:end}
.cat-fig figcaption{font-size:var(--t2);max-width:38ch}

.cat-note{font-size:var(--t2);margin-top:30px;max-width:66ch}

/* ---------- full bleed ---------- */
.bleed{margin:80px 0 0;position:relative}
.bleed img{width:100%;height:auto}
.bleed figcaption{
  background:var(--ink);color:var(--paper);padding:22px 0;
}
.bleed figcaption .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:14px 40px;align-items:baseline}
.bleed figcaption p{font-size:var(--t2)}

/* ---------- money ledger ---------- */
.ledger{list-style:none;margin-top:8px;border-top:2px solid var(--ink)}
.ledger li{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(26,23,18,.28);padding:15px 0}
.ledger .item{font-size:var(--t3);font-weight:600;flex:1 1 16ch}
.ledger .item span{display:block;font-size:var(--t2);font-weight:400;margin-top:3px}
.ledger .amt{font-size:var(--t4);font-weight:800;letter-spacing:-0.015em;white-space:nowrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px 56px}

/* ---------- picture pair ---------- */
.pair{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;margin-top:52px}
.pair figure{margin:0}
.pair figcaption{font-size:var(--t2);margin-top:10px}

/* ---------- procedure ---------- */
.steps{list-style:none;counter-reset:s;margin-top:8px}
.steps li{counter-increment:s;display:grid;grid-template-columns:66px 1fr;gap:22px;
  border-top:1px solid rgba(26,23,18,.28);padding:20px 0}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-size:var(--t4);font-weight:800;color:var(--signal);letter-spacing:-0.02em;line-height:1.1;
}
.steps h3{margin-bottom:6px}
.steps p{font-size:var(--t2)}

/* ---------- plain list ---------- */
.plain{list-style:none;margin-top:8px}
.plain li{border-top:1px solid rgba(26,23,18,.28);padding:14px 0;font-size:var(--t3)}

/* ---------- visit ---------- */
.visit{background:var(--ink);color:var(--paper)}
.visit .wrap{padding-top:72px;padding-bottom:72px;display:grid;grid-template-columns:1fr 1fr;gap:44px 56px}
.visit h2{font-size:var(--t5)}
.visit dl{margin:0;font-size:var(--t3)}
.visit dt{font-size:var(--t1);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:22px}
.visit dd{margin:5px 0 0}
.visit a{color:var(--paper)}
.visit .btn{background:var(--paper);color:var(--ink);margin-top:30px}
.visit .btn:hover{background:#E4DCCA}
.visit .fine{font-size:var(--t2);margin-top:26px}
.visit-fig{margin:0 0 30px}
.visit-fig figcaption{font-size:var(--t2);margin-top:10px;max-width:42ch}

/* ---------- footer ---------- */
.site-foot{background:var(--panel);padding:60px 0 72px}
.site-foot h2{font-size:var(--t4);margin-bottom:16px}
.site-foot p{font-size:var(--t2);max-width:78ch}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .62s ease,transform .62s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .band .wrap{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:72px minmax(0,1.5fr) minmax(0,1.1fr);}
  .row .money{grid-column:2 / -1;text-align:left;margin-top:4px}
  .pair{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:38px}
  .visit .wrap{grid-template-columns:1fr}
  .bleed figcaption .wrap{grid-template-columns:1fr}
  .cat-fig{grid-template-columns:1fr;gap:12px;align-items:start}
}
@media (max-width:720px){
  :root{--t6:40px;--t5:26px}
  h3{font-size:var(--t3)}
  .hero .lead{font-size:var(--t3)}
  .mark{font-size:var(--t3)}
  .head-tel{font-size:var(--t3)}
  .div-head{grid-template-columns:66px 1fr;gap:18px}
  .div-num{font-size:var(--t4);padding:10px 0}
  .row{grid-template-columns:56px minmax(0,1fr);gap:6px 16px}
  .row .facts{grid-column:2 / -1;margin-top:10px}
  .row .money{grid-column:2 / -1}
  .row .fee{font-size:var(--t3)}
  .steps li{grid-template-columns:48px 1fr;gap:14px}
  .steps li::before{font-size:var(--t3)}
  .ledger .amt{font-size:var(--t3)}
  .band .wrap{grid-template-columns:1fr}
  .sec,.cat{padding-top:52px;padding-bottom:52px}
  .bleed{margin-top:52px}
}