:root{
  --bg:#1d1815;
  --bg-alt:#251f1a;
  --bg-light:#f1ebdf;
  --text:#eae4d8;
  --muted:#9a8f82;
  --text-dark:#1d1815;
  --muted-dark:#5d5347;
  --accent:#c08a45;
  --accent-ink:#8a5a1c;
  --accent2:#728a63;
  --accent2-ink:#4c6440;
  --step:80px;
  --gap:28px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}

/* ---------- header ---------- */

.site-head{padding:28px 0 0}
.site-head .inner{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:14px 28px;
}
.brand{
  font-size:19px;font-weight:700;letter-spacing:-0.01em;
  color:var(--text);text-decoration:none;
}
.brand:hover{color:var(--accent)}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0}
.nav a{
  font-size:15px;color:var(--muted);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */

.hero{padding:64px 0 var(--step)}
.hero h1{
  grid-column:1 / 8;
  margin:0;
  font-size:clamp(34px,5.4vw,62px);
  line-height:1.04;
  font-weight:800;
  letter-spacing:-0.032em;
}
.hero .lead{grid-column:9 / 13;margin:10px 0 0;color:var(--muted);font-size:16px}
.hero .lead strong{color:var(--text);font-weight:600}

.axis{grid-column:1 / 8;position:relative;height:104px;margin-top:36px}
.axis::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent)}
.axis span{position:absolute;top:0;width:1px;background:var(--accent)}
.axis span::after{
  content:"";position:absolute;bottom:-7px;left:-3px;
  width:7px;height:7px;background:var(--accent);
}
.axis .a1{left:0;height:82px}
.axis .a2{left:36%;height:44px;background:var(--accent2)}
.axis .a2::after{background:var(--accent2)}
.axis .a3{left:71%;height:100px}

/* ---------- main image ---------- */

.figure-main{margin:0;padding-bottom:var(--step)}
.figure-main img{grid-column:4 / 13;width:100%}
.figure-main figcaption{
  grid-column:1 / 4;grid-row:1;
  align-self:end;
  font-size:13px;line-height:1.6;color:var(--muted);
  padding-bottom:4px;
}
.figure-main figcaption::before{
  content:"";display:block;width:8px;height:8px;background:var(--accent2);margin-bottom:12px;
}

/* ---------- sections ---------- */

.sec{padding:var(--step) 0}
.sec--a{background:var(--bg)}
.sec--b{background:var(--bg-alt)}
.sec--light{background:var(--bg-light);color:var(--text-dark)}
.sec--light a{color:var(--accent-ink)}
.sec--light a:focus-visible{outline-color:var(--accent-ink)}

.sec-head{grid-column:1 / 4}
.sec-head h2{
  margin:0;font-size:25px;line-height:1.22;font-weight:700;letter-spacing:-0.015em;
}
.sec-head::before{
  content:"";display:block;width:8px;height:8px;background:var(--accent);margin-bottom:18px;
}
.sec--light .sec-head::before{background:var(--accent-ink)}
.sec-head .kicker{
  display:block;margin-top:14px;font-size:13px;color:var(--accent2);letter-spacing:0.02em;
}
.sec--light .sec-head .kicker{color:var(--accent2-ink)}

.sec-body{grid-column:5 / 12;padding-top:7px}
.sec-body>*:first-child{margin-top:0}
.sec-body p{margin:0 0 20px}
.sec-body p:last-child{margin-bottom:0}
.sec-body h3{
  margin:34px 0 12px;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-0.005em;
}
.muted{color:var(--muted)}
.sec--light .muted{color:var(--muted-dark)}

/* lists */

.list{list-style:none;margin:0 0 20px;padding:0}
.list li{position:relative;padding-left:24px;margin-bottom:11px}
.list li::before{
  content:"";position:absolute;left:0;top:11px;width:7px;height:7px;background:var(--accent);
}
.sec--light .list li::before{background:var(--accent-ink)}
.list--check li::before{background:var(--accent2)}
.sec--light .list--check li::before{background:var(--accent2-ink)}
.list li:last-child{margin-bottom:0}

ol.list{counter-reset:n}
ol.list li::before{
  content:counter(n);counter-increment:n;
  background:none;color:var(--accent2);
  font-size:13px;font-weight:700;top:0;width:auto;height:auto;
}
.sec--light ol.list li::before{color:var(--accent2-ink);background:none}

/* ---------- detail block (light section) ---------- */

.detail{align-items:start;row-gap:40px}
.detail .detail-figure{grid-column:1 / 6;margin:0}
.detail .detail-figure img{width:100%}
.detail .detail-figure figcaption{
  margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted-dark);
}
.detail .detail-text{grid-column:7 / 13}
.detail .detail-text h2{
  margin:0 0 20px;font-size:25px;line-height:1.22;font-weight:700;letter-spacing:-0.015em;
}
.detail .detail-text p{margin:0 0 20px}
.detail .detail-text p:last-child{margin-bottom:0}

/* ---------- about / legal layout ---------- */

.page-head{padding:56px 0 var(--step)}
.page-head h1{
  grid-column:1 / 9;margin:0;
  font-size:clamp(30px,4.4vw,50px);line-height:1.08;font-weight:800;letter-spacing:-0.03em;
}
.page-head .lead{grid-column:1 / 8;margin:26px 0 0;color:var(--muted);font-size:16px}

.axis--short{grid-column:1 / 9;height:72px;margin-top:30px}
.axis--short .a1{height:56px}
.axis--short .a2{height:30px}
.axis--short .a3{height:68px}

.split{position:relative;padding:var(--step) 0}
.split::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(((100% - 56px) / 12) * 3.5 + 28px);
  width:1px;background:rgba(154,143,130,0.32);
}
.split .grid{row-gap:var(--step)}
.split-head{grid-column:1 / 4}
.split-head h2{margin:0;font-size:23px;line-height:1.24;font-weight:700;letter-spacing:-0.015em}
.split-head::before{
  content:"";display:block;width:8px;height:8px;background:var(--accent);margin-bottom:18px;
}
.split-body{grid-column:5 / 12;padding-top:5px}
.split-body>*:first-child{margin-top:0}
.split-body p{margin:0 0 20px}
.split-body p:last-child{margin-bottom:0}
.split-body h3{margin:32px 0 12px;font-size:17px;font-weight:700;line-height:1.4}

.contact-line{font-size:17px;line-height:1.9}
.contact-line span{display:block;color:var(--muted)}
.sec--light .contact-line span{color:var(--muted-dark)}

/* ---------- footer ---------- */

.site-foot{background:var(--bg-light);color:var(--text-dark);padding:56px 0 48px}
.foot-top{
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:10px 28px;
}
.foot-top .foot-name{font-size:24px;font-weight:800;letter-spacing:-0.02em}
.foot-top a{color:var(--accent-ink);font-size:17px}
.foot-rule{height:1px;background:rgba(29,24,21,0.22);margin:26px 0 22px}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 22px;padding:0}
.foot-links a{color:var(--text-dark);font-size:15px;text-decoration:none;border-bottom:1px solid var(--accent-ink);padding-bottom:2px}
.foot-links a:hover{color:var(--accent-ink)}
.foot-links a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.foot-note{margin:0;font-size:13px;line-height:1.65;color:var(--muted-dark);max-width:62ch}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .hero h1{grid-column:1 / 10;font-size:clamp(32px,6.4vw,48px)}
  .hero .lead{grid-column:1 / 10;margin-top:26px}
  .axis{grid-column:1 / 10;height:84px}
  .figure-main img{grid-column:3 / 13}
  .figure-main figcaption{grid-column:1 / 13;grid-row:2;align-self:start;padding-top:14px}
  .figure-main figcaption::before{margin-bottom:10px}
  .sec-head{grid-column:1 / 13}
  .sec-body{grid-column:1 / 13;padding-top:20px}
  .detail .detail-figure{grid-column:1 / 8}
  .detail .detail-text{grid-column:1 / 13}
  .page-head h1,.page-head .lead,.axis--short{grid-column:1 / 13}
  .split::before{display:none}
  .split .grid{row-gap:0}
  .split-head{grid-column:1 / 13}
  .split-body{grid-column:1 / 13;padding-top:18px;margin-bottom:48px}
  .split-body:last-child{margin-bottom:0}
}

@media (max-width:640px){
  :root{--step:48px;--gap:18px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hero{padding:44px 0 var(--step)}
  .hero h1{letter-spacing:-0.022em}
  .axis{height:66px;margin-top:28px}
  .axis .a1{height:52px}
  .axis .a2{height:28px}
  .axis .a3{height:62px}
  .figure-main img{grid-column:1 / 13}
  .detail .detail-figure{grid-column:1 / 13}
  .nav ul{gap:8px 18px}
  .nav a{font-size:14px}
  .sec-head h2,.detail .detail-text h2{font-size:22px}
  .foot-top .foot-name{font-size:21px}
}