:root{
  --paper:#efece6;
  --surface:#e4e0d8;
  --surface-2:#dad5cb;
  --ink:#16393a;
  --ink-deep:#0f2b2c;
  --ink-soft:#41605f;
  --ochre:#a8802f;
  --red:#7a2b24;
  --rule:#c6bfb2;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
}

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

a{color:var(--ink-deep);text-decoration:underline;text-underline-offset:3px;}
a:hover{color:var(--red);}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

img{max-width:100%;height:auto;display:block;}

.label{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  gap:14px 32px;
  align-items:baseline;
  justify-content:space-between;
  padding:20px 24px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
}
.brand{
  font-size:20px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink-deep);
  text-decoration:none;
}
.brand span{display:block;font-size:10px;letter-spacing:.18em;font-weight:600;color:var(--ochre);margin-top:4px;}
.site-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;
}
.site-nav a{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--red);}

/* ---------- hero ---------- */
.hero{padding:52px 0 8px;}
.hero-top{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:36px 56px;
  align-items:start;
}
.hero h1{
  font-size:clamp(30px,4.2vw,48px);
  line-height:1.12;
  margin:10px 0 0;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink-deep);
}
.hero-lede{padding-top:14px;}
.hero-lede p{margin:0 0 16px;}
.hero-lede p:first-of-type{font-size:19px;color:var(--ink-deep);}

.hero-figure{
  margin:40px 0 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 176px;
  gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.hero-figure .frame{background:var(--surface);}
.hero-index{
  border-left:1px solid var(--rule);
  padding:22px 0 22px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.hero-index dl{margin:0;}
.hero-index dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);font-weight:700;}
.hero-index dd{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft);}
.hero-figure figcaption{
  grid-column:1 / -1;
  border-top:1px solid var(--rule);
  padding:12px 0;
  font-size:13px;
  color:var(--ink-soft);
}

/* ---------- sections ---------- */
section{padding:46px 0;border-top:1px solid var(--rule);}
section:first-of-type{border-top:0;}
h2{
  font-size:clamp(22px,2.5vw,29px);
  line-height:1.22;
  font-weight:600;
  margin:0 0 18px;
  color:var(--ink-deep);
  letter-spacing:-.01em;
}
h3{font-size:17px;font-weight:700;margin:26px 0 8px;color:var(--ink-deep);}
p{margin:0 0 16px;}
.measure{max-width:66ch;}

.two-col{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px 54px;align-items:start;}
.two-col-rev{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 54px;align-items:start;}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 44px;}
.wide-narrow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:24px 54px;align-items:start;}

.note{
  border-top:2px solid var(--red);
  padding-top:12px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
}
.note strong{color:var(--ink-deep);}

.sidecol{
  border-left:1px solid var(--rule);
  padding-left:26px;
}

figure.detail{margin:0;}
figure.detail img{background:var(--surface);}
figure.detail figcaption{
  font-size:13px;color:var(--ink-soft);margin-top:12px;
  border-top:1px solid var(--rule);padding-top:10px;
}

ul.check,ul.plain,ol.steps{margin:0 0 18px;padding:0 0 0 0;}
ul.check{list-style:none;}
ul.check li{
  position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--rule);
}
ul.check li::before{
  content:"";position:absolute;left:0;top:18px;width:11px;height:2px;background:var(--ochre);
}
ul.plain{list-style:none;}
ul.plain li{padding:6px 0;border-bottom:1px solid var(--rule);}
ol.steps{padding-left:20px;}
ol.steps li{padding:6px 0;}

.data-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:8px;
}
.data-row div{padding:18px 22px 18px 0;border-right:1px solid var(--rule);}
.data-row div:last-child{border-right:0;padding-right:0;}
.data-row .k{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);font-weight:700;margin-bottom:6px;}

.band{background:var(--surface);}
.band .wrap{padding-top:8px;padding-bottom:8px;}

.pull{
  border-left:3px solid var(--red);
  padding:4px 0 4px 20px;
  font-size:19px;
  line-height:1.5;
  color:var(--ink-deep);
  margin:6px 0 0;
}

/* ---------- page head (inner pages) ---------- */
.page-head{padding:48px 0 34px;border-bottom:1px solid var(--rule);}
.page-head h1{
  font-size:clamp(28px,3.6vw,42px);line-height:1.14;margin:10px 0 0;font-weight:600;
  color:var(--ink-deep);letter-spacing:-.015em;max-width:20ch;
}
.about-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:30px 60px;align-items:end;}
.about-head p{margin:0;color:var(--ink-soft);}

.legal h2{font-size:21px;margin-top:8px;}
.legal section{padding:34px 0;}

/* ---------- footer ---------- */
.site-foot{
  margin-top:16px;
  border-top:2px solid var(--ink);
  background:var(--surface-2);
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  gap:30px 48px;
  padding:40px 0 26px;
}
.foot-grid > div{min-width:0;}
.foot-brand{font-size:22px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-deep);margin:8px 0 10px;}
.foot-grid p{font-size:14px;color:var(--ink-soft);margin:0 0 10px;}
.mail{
  display:inline-block;
  font-size:19px;
  font-weight:700;
  color:var(--ink-deep);
  border-bottom:2px solid var(--ochre);
  text-decoration:none;
  padding-bottom:2px;
  word-break:break-word;
}
.mail:hover{border-bottom-color:var(--red);}
.foot-legal ul{list-style:none;margin:8px 0 0;padding:0;}
.foot-legal li{padding:5px 0;border-bottom:1px solid var(--rule);}
.foot-legal a{font-size:13px;text-decoration:none;}
.foot-legal a:hover{text-decoration:underline;}
.foot-base{
  border-top:1px solid var(--rule);
  padding:14px 0 30px;
  font-size:12px;
  color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-top,.two-col,.two-col-rev,.wide-narrow{grid-template-columns:minmax(0,1fr);gap:26px;}
  .three-col{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-figure{grid-template-columns:minmax(0,1fr);}
  .hero-index{border-left:0;border-top:1px solid var(--rule);padding:20px 0;flex-direction:row;flex-wrap:wrap;gap:18px 40px;}
  .sidecol{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:24px;}
  .about-head{grid-template-columns:minmax(0,1fr);align-items:start;}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .foot-legal{grid-column:1 / -1;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
  .head-inner{padding:16px 18px;}
  .three-col{grid-template-columns:minmax(0,1fr);}
  .data-row{grid-template-columns:minmax(0,1fr);}
  .data-row div{border-right:0;border-bottom:1px solid var(--rule);padding:14px 0;}
  .data-row div:last-child{border-bottom:0;}
  .foot-grid{grid-template-columns:minmax(0,1fr);}
  .hero{padding-top:34px;}
  section{padding:34px 0;}
}