@import url("fonts.css");

:root {
  color-scheme: light;
  --bg: #f8f6ef;
  --white: #fffdf7;
  --ink: #252e26;
  --muted: #566155;
  --green: #2b3b2e;
  --line: #dedfd3;
  --accent: #a6492f;
  --soft: #e9eddf;
  font-family: Manrope, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #b3563b; outline-offset: 4px; }
img, svg { display: block; }
p, h1, h2, h3, figure { margin: 0; }
p { line-height: 1.68; }
.wrap { width: min(1248px, calc(100% - 96px)); margin-inline: auto; }
.site-head { border-bottom: 1px solid var(--line); }
.head-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; line-height: 1.1; }
.mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--green); color: #f7f5e9; }
.brand strong { display: block; font-weight: 800; font-size: 23px; letter-spacing: -.055em; }
.brand-num { color: var(--accent); margin-left: 3px; }
.brand small { font-size: 9px; letter-spacing: .12em; font-weight: 800; color: var(--muted); }
nav { display: flex; gap: clamp(17px, 2.5vw, 38px); align-items: center; font-weight: 700; font-size: 14px; }
nav a:hover, .site-foot a:hover { color: var(--accent); }
.head-phone { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; white-space: nowrap; }
.head-phone > span:first-child { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.head-phone small { display: block; color: var(--muted); font-size: 11px; }
.hero { display: grid; grid-template-columns: 1fr 1.09fr; align-items: center; gap: 34px; padding-block: 48px 36px; }
.hero-copy { padding: 8px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .15em; font-weight: 800; color: var(--muted); }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #ba644b; display: inline-block; flex: none; }
h1 { font-size: clamp(55px, 5.4vw, 85px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; margin: 24px 0; }
h1 em { color: var(--accent); font-style: normal; }
.hero-copy p { max-width: 425px; font-size: 18px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 31px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 56px; padding: 0 21px; border: 1px solid transparent; border-radius: 10px; font-weight: 800; font-size: 14px; }
.primary { background: var(--green); color: #fffdf7; }
.primary:hover { background: #405645; }
.text-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 14px; font-weight: 800; padding: 7px 0; border-bottom: 1px solid #aeb8a9; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.hero-loc { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 650; margin-top: 32px; }
.hero-visual { position: relative; height: clamp(425px, 37vw, 530px); border-radius: 22px; overflow: hidden; background: #d0b08e; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 55%; }
.hero-visual figcaption { position: absolute; bottom: 22px; right: 22px; padding: 16px 21px; border-radius: 12px; background: var(--white); box-shadow: 0 8px 32px #29291a20; font-size: 16px; font-weight: 700; }
.hero-visual figcaption > span { display: block; font-size: 10px; letter-spacing: .12em; font-weight: 800; color: var(--muted); }
.hero-visual figcaption strong { font-size: 31px; letter-spacing: -.06em; }
.hero-visual figcaption small { color: var(--muted); }
.feature-band { background: var(--soft); border-radius: 16px; }
.feature-band ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 25px 0; list-style: none; }
.feature-band li { display: flex; align-items: center; gap: 15px; padding: 0 24px; }
.feature-band li + li { border-left: 1px solid #ccd4c4; }
.feature-icon { width: 45px; height: 45px; background: var(--white); color: var(--green); border-radius: 10px; display: grid; place-items: center; flex: none; }
.feature-band b { font-size: 15px; font-weight: 800; }
.feature-band small, .review-person small { display: block; color: var(--muted); margin-top: 3px; font-size: 13px; }
.section { padding-block: 83px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 32px; }
.section-heading p { color: var(--muted); max-width: 330px; font-size: 15px; padding-bottom: 3px; }
h2 { font-size: clamp(37px, 4vw, 61px); letter-spacing: -.055em; font-weight: 800; line-height: 1.08; margin-top: 12px; }
h3 { letter-spacing: -.035em; font-weight: 800; line-height: 1.2; }
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.price-card { border-radius: 16px; border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.price-art { height: 106px; display: flex; align-items: center; justify-content: space-between; padding: 22px; color: #40513a; background: #e4eadb; position: relative; isolation: isolate; }
.price-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(45deg,transparent 0 12px,currentColor 12px 13px,transparent 13px 24px), repeating-linear-gradient(-45deg,transparent 0 12px,currentColor 12px 13px,transparent 13px 24px); opacity: .10; }
.price-art.long { color: #9b4b34; background: #f3ded2; }
.price-art.plaid { color: #796039; background: #efe5cd; }
.price-art.kids { color: #426061; background: #deebea; }
.price-art span { align-self: start; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.price-art svg { transform: rotate(26deg); margin-right: 8px; }
.price-body { padding: 22px; }
.price-body h3 { font-size: 21px; }
.price-body p { color: var(--muted); min-height: 48px; margin-top: 9px; font-size: 13px; }
.price-bottom { margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.price-bottom strong { font-size: 30px; letter-spacing: -.06em; }
.price-bottom small { color: var(--muted); }
.icon-button { width: 39px; height: 39px; display: grid; place-items: center; flex: none; padding: 0; border-radius: 50%; color: var(--ink); background: var(--soft); border: 0; }
.icon-button:hover { background: var(--green); color: white; }
.extras { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 17px; margin-top: 18px; }
.extras h3 { padding: 16px 0; align-self: center; font-size: 20px; }
.extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 15px 17px; background: transparent; color: var(--ink); border-radius: 12px; border: 1px solid var(--line); }
.extra:hover { background: var(--soft); }
.extra small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.extra svg { flex: none; }
.process { background: var(--green); color: var(--white); }
.process .eyebrow, .process p { color: #d4ded0; }
.process .eyebrow i { background: #dc9178; }
.process ol { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; border: 1px solid #627162; border-radius: 15px; }
.process li { padding: 24px; }
.process li + li { border-left: 1px solid #627162; }
.step-top { display: flex; align-items: center; justify-content: space-between; color: #e7aa94; }
.step-top span { font-size: 13px; color: #d4ded0; }
.process h3 { font-size: 20px; margin-top: 22px; }
.process li p { font-size: 13px; margin-top: 8px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.review { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; }
.review-stars { color: var(--accent); font-size: 34px; height: 36px; line-height: 1; }
.review p { font-size: 15px; flex: 1; margin-block: 9px 22px; }
.review-person { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 11px; padding-top: 16px; font-size: 14px; }
.avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--green); font-weight: 800; font-size: 12px; flex: none; }
.contact-wrap { padding-bottom: 64px; }
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; padding: 42px; border-radius: 20px; background: #ecd8cb; }
.contact h2 { font-size: clamp(33px, 3.5vw, 52px); }
.contact p { color: #4d554a; margin: 14px 0 22px; max-width: 400px; }
.contact-info { align-self: center; border-radius: 14px; background: var(--white); padding: 8px 22px; }
.contact-info > * { padding-block: 13px; display: flex; align-items: center; gap: 13px; }
.contact-info > * + * { border-top: 1px solid var(--line); }
.contact-info small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; }
.site-foot { border-top: 1px solid var(--line); color: var(--muted); }
.foot-inner { min-height: 103px; display: flex; align-items: center; gap: 20px; justify-content: space-between; font-size: 12px; }
.foot-inner .brand { color: var(--ink); }
.breadcrumbs { display: flex; align-items: center; gap: 12px; color: var(--muted); padding-block: 26px; font-size: 13px; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.policy { padding-bottom: 55px; }
.policy-head { position: relative; isolation: isolate; overflow: hidden; padding: 43px 46px; border-radius: 18px; background: var(--soft); }
.policy-head h1 { font-size: clamp(38px, 5vw, 72px); margin: 15px 0 16px; }
.policy-head p { color: var(--muted); max-width: 490px; }
.policy-graphic { position: absolute; z-index: -1; top: 50%; right: 9%; transform: translateY(-50%) rotate(-12deg); padding: 28px; border-radius: 34px; color: #586d52; background: #dce4d3; border: 1px solid #c9d5c2; }
.policy-grid { display: grid; grid-template-columns: 2fr 1fr; margin-top: 23px; gap: 23px; }
.policy-main, .policy-grid aside { border: 1px solid var(--line); background: var(--white); border-radius: 15px; padding: 27px; }
.policy-main h2 { font-size: 29px; margin: 0; letter-spacing: -.045em; }
.policy-main p { margin: 12px 0 22px; color: var(--muted); }
.policy-grid aside { background: #f0ecdf; }
.policy-grid aside h3 { font-size: 20px; margin: 11px 0 10px; }
.policy-grid aside a { display: block; width: fit-content; font-weight: 700; font-size: 14px; margin-top: 4px; }
.policy-grid aside p { font-size: 12px; margin-top: 6px; color: var(--muted); }
dialog { width: min(480px, calc(100% - 32px)); color: var(--ink); background: var(--white); border: 0; border-radius: 20px; padding: 0; box-shadow: 0 20px 80px #101a1540; }
dialog::backdrop { background: #19281fb0; backdrop-filter: blur(3px); }
.dialog-inner { padding: 36px; }
.dialog-inner h2 { font-size: 38px; }
.dialog-inner p { margin-block: 13px 19px; color: var(--muted); }
.dialog-inner .close { position: absolute; top: 13px; right: 13px; }
.dialog-inner .dialog-hours { margin-bottom: 0; font-size: 13px; }
#service { font-weight: 800; }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 48px); }
  .hero { gap: 24px; }
  nav { gap: 13px; font-size: 12px; }
  .price-body { padding: 16px; }
  .price-bottom strong { font-size: 25px; }
}
@media (max-width: 780px) {
  .head-inner { flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-block: 15px; }
  nav { order: 1; width: 100%; justify-content: space-between; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .hero-visual { height: clamp(290px, 72vw, 460px); }
  .feature-band ul { grid-template-columns: 1fr; padding: 5px 18px; }
  .feature-band li { padding: 13px 0; }
  .feature-band li + li { border-left: 0; border-top: 1px solid #ccd4c4; }
  .section { padding-block: 53px; }
  .section-heading { flex-direction: column; align-items: start; gap: 11px; }
  .prices, .extras, .process ol { grid-template-columns: repeat(2, 1fr); }
  .process li:nth-child(3) { border-left: 0; }
  .process li:nth-child(n+3) { border-top: 1px solid #627162; }
  .reviews, .contact, .policy-grid { grid-template-columns: 1fr; }
  .contact { padding: 27px; gap: 22px; }
  .foot-inner { flex-wrap: wrap; padding-block: 22px; }
  .policy-head { padding: 28px; }
  .policy-graphic { opacity: .4; right: -20px; }
}
@media (max-width: 420px) {
  .wrap { width: calc(100% - 32px); }
  .head-phone > span:first-child { display: none; }
  h1 { font-size: clamp(45px, 12vw, 55px); }
  .hero-actions { gap: 12px 16px; }
  .price-body { padding: 13px; }
  .price-body h3 { font-size: 17px; }
  .price-bottom strong { font-size: 21px; }
  .price-bottom .icon-button { width: 32px; height: 32px; }
  .process li { padding: 15px; }
  .policy-head h1 { font-size: clamp(27px, 8vw, 39px); }
}
.gallery-section { padding-bottom: 0; }
.gallery-grid { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2, 222px); gap: 16px; }
.gallery-grid figure { position: relative; border-radius: 16px; overflow: hidden; isolation: isolate; background: #dfcebb; }
.gallery-grid .gallery-feature { grid-row: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid figure::after { position: absolute; inset: 50% 0 0; z-index: 0; content: ""; background: linear-gradient(transparent, #221b16a8); pointer-events: none; }
.gallery-grid figcaption { position: absolute; z-index: 1; left: 19px; bottom: 16px; color: #fffdf7; font-size: 16px; font-weight: 800; }
.gallery-feature figcaption { font-size: 21px; left: 23px; bottom: 18px; }
.gallery-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.gallery-note > span { color: var(--muted); font-size: 12px; }
@media (max-width: 780px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: min(58vw, 350px) min(40vw, 222px); gap: 10px; }
  .gallery-grid .gallery-feature { grid-row: auto; grid-column: span 2; }
  .gallery-grid figcaption { left: 12px; bottom: 10px; font-size: 13px; }
  .gallery-note { flex-wrap: wrap; }
}