@font-face{
  font-family:system-ui;
  font-style:normal;
  font-weight:400;
  src:local("system-ui")
}

:root{
  --bg:#f7f4ef;
  --surface:#ffffff;
  --surface2:#fbfaf7;
  --text:#1d1a17;
  --muted:#6c625a;
  --line:rgba(29,26,23,.12);
  --brand:#c88b5a;
  --brand2:#a86f45;
  --shadow:0 14px 36px rgba(29,26,23,.10);
  --radius:18px;
  --radius2:24px;
  --container:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(900px 500px at 10% 10%, rgba(200,139,90,.14), transparent 55%),
             radial-gradient(900px 500px at 90% 20%, rgba(200,139,90,.10), transparent 55%),
             var(--bg);
  line-height:1.55;
}

a{color:inherit}
a:hover{color:var(--brand2)}

.skip{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  z-index:999
}
.skip:focus{left:12px}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(247,244,239,.78);
  border-bottom:1px solid var(--line);
}

.header__inner{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:14px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand__mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(200,139,90,.22), rgba(200,139,90,.06));
  border:1px solid rgba(200,139,90,.35);
}

.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-weight:700;letter-spacing:.2px}
.brand__city{font-size:12px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:10px}

.nav__toggle{
  display:none;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(29,26,23,.06);
}

.nav__toggle:focus-visible{outline:3px solid rgba(200,139,90,.35); outline-offset:2px}

.nav__toggleIcon{
  width:18px;
  height:12px;
  display:inline-block;
  background:
    linear-gradient(var(--text),var(--text)) 0 0/18px 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 0 5px/18px 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 0 10px/18px 2px no-repeat;
  border-radius:2px;
  opacity:.85;
}

.nav__toggleText{font-weight:600;font-size:14px}

.nav__panel{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav__link{
  text-decoration:none;
  font-weight:600;
  color:rgba(29,26,23,.82);
  padding:10px 10px;
  border-radius:12px;
}

.nav__link:focus-visible{outline:3px solid rgba(200,139,90,.35); outline-offset:2px}
.nav__link:hover{background:rgba(200,139,90,.10); color:var(--text)}

.header__cta{display:flex;align-items:center;gap:10px}

.btn{
  appearance:none;
  border:1px solid rgba(200,139,90,.45);
  background:linear-gradient(180deg, rgba(200,139,90,.96), rgba(168,111,69,.96));
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 14px 24px rgba(200,139,90,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn:hover{filter:saturate(1.05) brightness(1.02)}
.btn:focus-visible{outline:3px solid rgba(200,139,90,.35); outline-offset:2px}

.btn--ghost{
  background:rgba(255,255,255,.75);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(29,26,23,.06);
}

.btn--ghost:hover{background:#fff}

.hero{padding:44px 0 10px}

.hero__grid{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:26px;
  align-items:stretch;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:rgba(29,26,23,.75);
  margin:0 0 10px;
}

.hero__title{font-size:44px;line-height:1.08;margin:0 0 12px;letter-spacing:-.6px}
.hero__lead{margin:0 0 18px;color:rgba(29,26,23,.78);font-size:16px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}

.hero__meta{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.metaItem{
  padding:12px 12px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:16px;
}

.metaItem dt{font-size:12px;color:var(--muted);margin:0 0 4px}
.metaItem dd{margin:0;font-weight:700}
.metaItem a{text-decoration:none}
.metaItem a:hover{text-decoration:underline}

.hero__visual{display:grid;align-items:center}

.visualCard{
  border-radius:var(--radius2);
  border:1px solid rgba(200,139,90,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow:var(--shadow);
  padding:18px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.visualCard__top{display:flex;gap:10px;flex-wrap:wrap}

.chip{
  font-weight:700;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(200,139,90,.35);
  background:rgba(200,139,90,.10);
  color:rgba(29,26,23,.82);
}

.visualCard__mid{flex:1;display:grid;place-items:center}

.gridArt{
  width:min(380px, 100%);
  aspect-ratio: 4/3;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(120px 120px at 20% 25%, rgba(200,139,90,.26), transparent 70%),
    radial-gradient(140px 140px at 80% 35%, rgba(200,139,90,.18), transparent 70%),
    linear-gradient(180deg, rgba(247,244,239,.35), rgba(255,255,255,.85));
  position:relative;
  overflow:hidden;
}

.gridArt__block{
  position:absolute;
  border-radius:18px;
  border:1px solid rgba(200,139,90,.25);
  background:linear-gradient(180deg, rgba(200,139,90,.18), rgba(255,255,255,.55));
  box-shadow:0 20px 30px rgba(29,26,23,.10);
}

.gridArt__block.a{left:18px;top:18px;width:54%;height:44%}
.gridArt__block.b{right:18px;top:34px;width:34%;height:32%;background:linear-gradient(180deg, rgba(200,139,90,.12), rgba(255,255,255,.62))}
.gridArt__block.c{left:48px;bottom:18px;width:66%;height:30%}

.gridArt__line{
  position:absolute;
  left:-10%;
  top:58%;
  width:120%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(200,139,90,.8), transparent);
  transform:rotate(-8deg);
  opacity:.5;
}

.visualCard__bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.stat{
  border:1px solid var(--line);
  background:rgba(247,244,239,.65);
  border-radius:16px;
  padding:12px;
}

.stat__num{font-weight:900;letter-spacing:.2px}
.stat__label{font-size:12px;color:var(--muted)}

.section{padding:56px 0}
.section--alt{background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.15))}

.section__head{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:20px;
}

.section__head h2{font-size:28px;letter-spacing:-.3px;margin:0}
.section__head p{margin:0;color:rgba(29,26,23,.78);max-width:70ch}

.aboutGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.aboutCard{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 22px rgba(29,26,23,.06);
}

.aboutCard h3{margin:0 0 6px;font-size:16px}
.aboutCard p{margin:0;color:rgba(29,26,23,.76)}

.cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 22px rgba(29,26,23,.06);
  transition:transform .2s ease, border-color .2s ease;
}

.card:hover{transform:translateY(-2px); border-color:rgba(200,139,90,.35)}

.card__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(200,139,90,.12);
  border:1px solid rgba(200,139,90,.30);
  margin-bottom:10px;
}

.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:rgba(29,26,23,.76)}

.whyGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.whyItem{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
}

.whyItem h3{margin:0 0 6px;font-size:16px}
.whyItem p{margin:0;color:rgba(29,26,23,.76)}

.ctaBand{
  margin-top:18px;
  border-radius:var(--radius2);
  border:1px solid rgba(200,139,90,.28);
  background:linear-gradient(180deg, rgba(200,139,90,.18), rgba(255,255,255,.55));
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.ctaBand__text h3{margin:0 0 4px;font-size:18px}
.ctaBand__text p{margin:0;color:rgba(29,26,23,.76)}
.ctaBand__actions{display:flex;gap:10px;flex-wrap:wrap}

.contactGrid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:14px;
}

.contactCard{
  padding:18px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 22px rgba(29,26,23,.06);
}

.contactCard h3{margin:0 0 10px;font-size:16px}

.contactList{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.contactList__label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.contactList__value{text-decoration:none;font-weight:800}

.miniNote{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:rgba(247,244,239,.8);
  border:1px solid var(--line);
  color:rgba(29,26,23,.76);
}

.form{display:grid;gap:12px}

.field{display:grid;gap:6px}
.field__label{font-weight:700;font-size:12px;color:rgba(29,26,23,.76)}

.field__input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  color:var(--text);
  outline:none;
}

.field__input:focus{border-color:rgba(200,139,90,.55); box-shadow:0 0 0 4px rgba(200,139,90,.18)}

.form__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.form__hint{margin:0;color:var(--muted);font-size:12px}

.form__status{
  margin:0;
  min-height:20px;
  color:rgba(29,26,23,.78);
  font-weight:700;
}

.footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  background:rgba(247,244,239,.65);
}

.footer__inner{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.footer__brand{font-weight:900}
.footer__muted{color:var(--muted);font-size:12px;margin-top:4px}
.footer__right{display:flex;gap:12px;flex-wrap:wrap}
.footer__link{text-decoration:none;color:rgba(29,26,23,.82);font-weight:700;padding:8px 10px;border-radius:12px}
.footer__link:hover{background:rgba(200,139,90,.10); color:var(--text)}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__title{font-size:38px}
  .cards{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .whyGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .aboutGrid{grid-template-columns:1fr;}
  .contactGrid{grid-template-columns:1fr;}
}

@media (max-width: 760px){
  .header__inner{grid-template-columns:1fr auto;}
  .header__cta{display:none}
  .nav{justify-self:end}

  .nav__toggle{display:inline-flex}

  .nav__panel{
    position:absolute;
    right:20px;
    top:64px;
    width:min(320px, calc(100vw - 40px));
    padding:10px;
    border-radius:18px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.92);
    box-shadow:var(--shadow);
    display:grid;
    gap:6px;
  }

  .nav__link{padding:12px 12px}

  .hero__meta{grid-template-columns:1fr;}
  .ctaBand{flex-direction:column;align-items:flex-start}
}

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