:root {
  --bg: #f5f1e9;
  --bg-2: #ede8dc;
  --surface: rgba(255,255,255,.74);
  --surface-strong: #fffdf8;
  --ink: #1b211d;
  --mut: #667068;
  --acc: #a36d2a;
  --acc-2: #d0a265;
  --line: rgba(39,49,42,.13);
  --dark: #1d2620;
  --dark-2: #263229;
  --shadow: 0 24px 70px rgba(39,49,42,.10);
  --radius: 20px;
  --w: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121713;
    --bg-2: #172019;
    --surface: rgba(27,35,29,.78);
    --surface-strong: #1d251f;
    --ink: #edf0e8;
    --mut: #a1aaa1;
    --acc: #d0a264;
    --acc-2: #ebc88f;
    --line: rgba(238,244,235,.11);
    --dark: #e8eee6;
    --dark-2: #f2f4ee;
    --shadow: 0 24px 70px rgba(0,0,0,.24);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(163,109,42,.09), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(95,126,99,.08), transparent 23%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font: 16px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .20;
  background-image: radial-gradient(rgba(60,55,45,.10) .65px, transparent .65px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acc) 55%, transparent);
  outline-offset: 3px;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.9rem, 7vw, 5.9rem); }
h2 { font-size: clamp(2rem, 4vw, 3.15rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--mut); }
.w { width: min(var(--w), calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 700 1.2rem/1 Georgia, serif;
  letter-spacing: -.02em;
}
.logo-mark {
  width: 27px; height: 27px; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--acc-2); background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.logo-mark svg { width: 18px; height: 18px; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { display: none; cursor: pointer; }
.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav a {
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mut);
  transition: .2s ease;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}
.nav .nav-cta {
  margin-left: 8px;
  background: var(--ink);
  color: var(--bg);
  padding-inline: 16px;
}
.nav .nav-cta:hover { background: var(--acc); color: #fff; }
main { overflow: hidden; }
.hero {
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  align-items: center;
  gap: clamp(28px, 5vw, 86px);
  padding: 72px 0 86px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--mut);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow::before { content:""; width: 28px; height: 1px; background: var(--acc); }
.hero h1 { max-width: 9.5ch; }
.hero-lead {
  max-width: 41rem;
  margin-top: 28px;
  color: var(--mut);
  font-size: clamp(1.03rem, 1.5vw, 1.18rem);
}
.actions { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-flex; align-items:center; justify-content:center; gap: 9px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 13px;
  background: var(--ink); color: var(--bg);
  font-weight: 700; text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--acc); color:#fff; }
.btn.secondary {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn.secondary:hover { background: var(--surface-strong); }
.hero-visual { position: relative; min-height: 460px; }
.visual-card {
  position: absolute; inset: 26px 10px 10px 28px;
  border-radius: 34px;
  background: linear-gradient(145deg, #222c26 0%, #111712 100%);
  color: #f3ead8;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.visual-card::before, .visual-card::after {
  content:""; position:absolute; border:1px solid rgba(208,162,100,.18); border-radius: 50%;
}
.visual-card::before { width: 420px; height:420px; right:-120px; top:-100px; }
.visual-card::after { width: 280px; height:280px; right:-40px; top:-30px; }
.visual-top { display:flex; justify-content:space-between; align-items:center; padding: 22px 24px; color: rgba(255,255,255,.56); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }
.window-dots { display:flex; gap:6px; }
.window-dots i { width:7px; height:7px; display:block; border-radius:50%; background:rgba(255,255,255,.24); }
.visual-center { position:absolute; inset:0; display:grid; place-items:center; }
.rings { width:min(74%, 330px); aspect-ratio:1; position:relative; }
.rings span { position:absolute; inset:var(--i); border:1.3px solid rgba(230,190,135,.68); border-radius: 50%; transform: translate(var(--x), var(--y)); }
.rings span:nth-child(1){--i:44%;--x:-2%;--y:2%;}.rings span:nth-child(2){--i:33%;--x:3%;--y:-2%;}.rings span:nth-child(3){--i:22%;--x:-1%;--y:4%;}.rings span:nth-child(4){--i:12%;--x:2%;--y:-1%;}.rings span:nth-child(5){--i:2%;--x:0;--y:0;}
.visual-note { position:absolute; left:24px; right:24px; bottom:22px; display:flex; justify-content:space-between; gap:16px; color:rgba(255,255,255,.64); font-size:.82rem; }
.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap: 1px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--line); }
.stat { padding:20px; background:color-mix(in srgb, var(--surface) 86%, transparent); }
.stat strong { display:block; font: 700 1.55rem/1 Georgia, serif; }
.stat span { display:block; margin-top:5px; color:var(--mut); font-size:.84rem; }
.section { padding: 100px 0; border-top: 1px solid var(--line); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head p { max-width: 38rem; color:var(--mut); margin: 0; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap: 18px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap: 18px; }
.card {
  min-height: 210px;
  padding: 26px;
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(39,49,42,.04);
}
.card p { color:var(--mut); }
.card .num { color:var(--acc); font:700 .82rem/1 Georgia,serif; letter-spacing:.12em; text-transform:uppercase; }
.card h3 { margin: 30px 0 9px; }
.service-card { position:relative; overflow:hidden; }
.service-card::after { content:""; position:absolute; width:90px; height:90px; right:-26px; bottom:-26px; border:1px solid var(--line); border-radius:50%; }
.project-grid .card { min-height: 280px; display:flex; flex-direction:column; justify-content:space-between; }
.project-meta { display:flex; justify-content:space-between; gap:12px; align-items:center; color:var(--mut); font-size:.84rem; }
.project-title { font-size: clamp(1.4rem, 3vw, 2rem); }
.chip { display:inline-flex; align-items:center; padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--mut); font-size:.75rem; }
.quote { padding: 34px; border:1px solid var(--line); border-radius: var(--radius); background:var(--surface); }
.quote p { margin:0 0 18px; font: 1.17rem/1.55 Georgia, serif; }
.quote small { color:var(--mut); }
.faq { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; padding:20px 0; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:20px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--acc); font-size:1.3rem; font-weight:400; }
details[open] summary::after { content:"−"; }
details p { max-width: 48rem; color:var(--mut); padding:0 40px 22px 0; }
.page-hero { padding: 76px 0 48px; }
.page-hero h1 { max-width: 12ch; }
.page-hero p { max-width: 43rem; margin-top:20px; color:var(--mut); font-size:1.08rem; }
.breadcrumb { margin-bottom: 18px; color:var(--mut); font-size:.84rem; }
.article { max-width: 760px; padding: 0 0 90px; }
.article-header { padding: 60px 0 34px; }
.article h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.article .meta { margin-top:18px; color:var(--mut); }
.article-body { font-size:1.08rem; }
.article-body p { margin:0 0 1.35em; }
.article-body h2 { margin: 1.6em 0 .6em; font-size:2rem; }
.article-body ul { padding-left: 22px; }
.back { color:var(--mut); text-decoration:none; }
.back:hover { color:var(--ink); }
.service-table { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.service-row { display:grid; grid-template-columns:1.05fr 2fr .7fr; gap:22px; padding:22px 24px; border-bottom:1px solid var(--line); align-items:start; }
.service-row:last-child { border-bottom:0; }
.service-row strong { font: 600 1.2rem/1.2 Georgia, serif; }
.service-row p { color:var(--mut); margin:0; }
.price { color:var(--acc); font:700 1.2rem/1.2 Georgia, serif; white-space:nowrap; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.person { padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.avatar { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--ink); color:var(--bg); font:700 1.4rem Georgia,serif; }
.person h3 { margin:18px 0 6px; }
.person p { color:var(--mut); margin:0; }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:start; }
.contact-panel, .form-panel { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.contact-list { display:grid; gap:16px; margin-top:26px; }
.contact-list div { padding-top:16px; border-top:1px solid var(--line); }
.contact-list b { display:block; margin-bottom:4px; }
label { display:block; margin: 0 0 7px; font-weight:700; }
.form-field + .form-field { margin-top:16px; }
input, textarea {
  width:100%; border:1px solid var(--line); border-radius:13px; padding:12px 14px;
  background:var(--surface-strong); color:var(--ink); font:inherit;
}
textarea { min-height:160px; resize:vertical; }
.form-submit { margin-top:18px; border:0; cursor:pointer; }
.site-footer { border-top:1px solid var(--line); padding: 34px 0 46px; color:var(--mut); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
.footer-title { display:block; color:var(--ink); margin-bottom:10px; font:700 1.05rem Georgia,serif; }
.footer-links { display:grid; gap:7px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--ink); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:.83rem; }
.not-found { padding: 120px 0; text-align:center; }
.not-found h1 { font-size:clamp(4rem,12vw,8rem); }
.not-found p { max-width: 38rem; margin: 20px auto 0; color:var(--mut); }
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; min-height:unset; padding-top:58px; }
  .hero h1 { max-width:11ch; }
  .hero-visual { min-height:390px; }
  .grid-3, .team-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .w { width:min(var(--w), calc(100% - 28px)); }
  .header-inner { min-height:68px; }
  .menu-btn { display:flex; width:43px; height:43px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; }
  .hamburger, .hamburger::before, .hamburger::after { width:17px; height:1.5px; background:var(--ink); display:block; content:""; position:relative; }
  .hamburger::before { position:absolute; top:-6px; }
  .hamburger::after { position:absolute; top:6px; }
  .nav {
    position:absolute; left:14px; right:14px; top:62px; padding:10px;
    display:grid; gap:4px;
    background:var(--surface-strong); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none; transition:.2s ease;
  }
  .nav a { padding:12px 13px; }
  .nav .nav-cta { margin:4px 0 0; text-align:center; }
  .nav-toggle:checked ~ .nav { transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .hero { padding:48px 0 64px; }
  .hero-visual { min-height:330px; }
  .visual-card { inset:16px 0 0 0; border-radius:26px; }
  .visual-note { left:18px; right:18px; }
  .stat-strip { grid-template-columns:1fr; }
  .section { padding:70px 0; }
  .section-head { display:block; }
  .section-head p { margin-top:14px; }
  .grid-3, .grid-2, .team-grid, .contact-grid { grid-template-columns:1fr; }
  .service-row { grid-template-columns:1fr; gap:10px; }
  .price { white-space:normal; }
  .footer-grid { grid-template-columns:1fr; gap:22px; }
  .footer-bottom { display:block; }
  .footer-bottom span { display:block; margin-top:7px; }
  .page-hero { padding:56px 0 34px; }
  .article-header { padding-top:40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}