:root {
  --bg: #F8EFE3;
  --bg-alt: #F1DFC5;
  --panel: #FFFBF5;
  --ink: #4A3826;
  --ink-soft: #6F5640;
  --wood: #BA8B5F;
  --wood-dark: #9E7047;
  --clay: #DDB88F;
  --sage: #BDA47D;
  --line: rgba(74,56,38,0.1);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
.page-scroll { overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; }
button { font-family: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* PAGE ROUTER */
main#app { padding-top: 0; }
.page { display: none; animation: page-in .35s ease; }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

/* NAV */
header.site {
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
header.site.menu-open { z-index: 57; }
header.site.scrolled {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(16px);
  border-bottom-color: transparent;
}
.navrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 28px; max-width: 1080px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }
.logo img { height: 34px; width: auto; display: block; transition: transform .25s ease; }
.logo:hover img { transform: rotate(-6deg) scale(1.06); }
.logo-word { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { height: 40px; width: auto; display: block; }
.nav-center { display: flex; align-items: center; gap: 22px; font-size: 0.92rem; flex: 1; justify-content: center; }
.nav-center a { position: relative; text-decoration: none; color: var(--ink-soft); transition: color .2s; padding: 4px 0; background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; }
.nav-center a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--wood);
  transition: right .25s ease;
}
.nav-center a:hover { color: var(--ink); }
.nav-center a:hover::after { right: 0; }
.nav-center a.active { color: var(--ink); font-weight: 600; }
.nav-center a.active::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-phone { font-weight: 600; text-decoration: none; font-size: 0.94rem; white-space: nowrap; transition: color .2s; }
.nav-phone:hover { color: var(--wood); }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.burger svg { width: 24px; height: 24px; stroke: var(--ink); }
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-open { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }

.mobile-panel {
  display: none;
  position: fixed; inset: 0; z-index: 56;
  background: var(--bg);
  padding: calc(84px + env(safe-area-inset-top, 0px)) 28px 28px;
  flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
}
.mobile-panel.open { display: flex; opacity: 1; transform: translateY(0); }
.mobile-panel a, .mobile-panel button.mp-link {
  text-decoration: none; color: var(--ink); font-family: 'Fraunces', serif; font-size: 1.3rem;
  padding: 14px 0; border-bottom: 1px solid var(--line); background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer; width: 100%;
}
.mobile-panel .btn { margin-top: 18px; text-align: center; width: 100%; }

@media (max-width: 860px) {
  .nav-center { display: none; }
  .nav-phone { display: none; }
  .nav-right .btn-primary { display: none; }
  .burger { display: block; }
}

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.98rem; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s, box-shadow .2s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--wood); color: #FBF6EE; box-shadow: 0 0 0 rgba(147,104,63,0); }
.btn-primary:hover { transform: translateY(-2px); background: var(--wood-dark); box-shadow: 0 10px 20px rgba(147,104,63,0.28); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--wood); color: var(--wood); transform: translateY(-2px); }

/* HERO */
section.hero { padding: 64px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow-line { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 22px; }
.eyebrow-line .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
h1.hero-title { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-bottom: 22px; }
h1.hero-title em { font-style: italic; color: var(--wood); font-weight: 500; }
.hero-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 32px; }
.btnrow { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.hero-meta div { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--wood); }
.hero-meta span.cap { display: block; font-family: 'Manrope', sans-serif; font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }

.swatch-stack { position: relative; height: 380px; }
.swatch { position: absolute; border: 1px solid var(--line); }
.sw1 { width: 78%; height: 62%; top: 0; left: 0; background:
  repeating-linear-gradient(100deg, #D9BB92 0 3px, #CBA576 3px 7px, #BE9865 7px 9px);
}
.sw2 { width: 52%; height: 46%; bottom: 0; right: 0; background: var(--sage); opacity: 0.8; }
.sw3 { width: 34%; height: 30%; bottom: 14%; left: 8%; background: var(--panel); box-shadow: 0 6px 24px rgba(74,56,38,0.1); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); font-size: 0.9rem; text-align: center; padding: 10px; }
@media (max-width: 860px) { .swatch-stack { height: 260px; } }

/* trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 34px; margin-top: 10px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-soft); }
.trust-strip span { position: relative; padding-left: 16px; }
.trust-strip span::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--sage); border-radius: 50%; }

/* SECTION generic */
section.block { padding: 72px 0; }
section.block.alt{background:linear-gradient(180deg,var(--bg) 0,var(--bg-alt) 120px,var(--bg-alt) calc(100% - 120px),var(--bg) 100%)}
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 44px; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.section-head p { color: var(--ink-soft); max-width: 42ch; }
.page-title { padding: 44px 28px 8px; }
.page-title h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 10px; }
.page-title p { color: var(--ink-soft); max-width: 60ch; }

/* SERVICES */
.num-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--line); color: var(--wood); font-weight: 700; font-size: 0.92rem; font-family: 'Manrope', sans-serif; flex-shrink: 0; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.services-groups { display: flex; flex-direction: column; gap: 6px; }
.svc-group-title { font-size: 1.15rem; font-weight: 500; margin: 34px 0 4px; }
.svc-group-title:first-child { margin-top: 0; }
.services-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding-left .25s ease; }
.service-row:hover { padding-left: 8px; }
.service-row:hover .num-badge { background: var(--wood); color: #fff; border-color: var(--wood); }
.service-row h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 5px; }
.service-row p { color: var(--ink-soft); font-size: 0.95rem; max-width: 56ch; }
.service-row .price { text-align: right; white-space: nowrap; font-size: 0.9rem; color: var(--ink-soft); }
.service-row .price strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
@media (max-width: 700px) {
  .service-row { grid-template-columns: 1fr; gap: 8px; }
  .service-row .price { text-align: left; }
}

/* calculator */
.calc-box { margin-top: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px; max-width: 560px; }
.calc-box h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: 4px; }
.calc-sub { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 18px; }
.calc-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 480px) { .calc-row { grid-template-columns: 1fr; } }
.calc-field label { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 6px; }
.calc-field input, .calc-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-family: inherit; font-size: 0.95rem; border-radius: 8px;
}
.calc-field input:focus, .calc-field select:focus { border-color: var(--wood); outline: none; }
.calc-result {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--bg-alt); border-radius: 10px; padding: 14px 16px;
}
.calc-result span { font-size: 0.86rem; color: var(--ink-soft); }
.calc-result strong { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--wood); white-space: nowrap; }

/* PROCESS */
.tape { position: relative; padding: 34px 0 10px; }
.tape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 1px, transparent 1px 22px); opacity: .5; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step .num-badge { margin-bottom: 12px; }
.step h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.step p { font-size: 0.9rem; color: var(--ink-soft); }

/* PORTFOLIO */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .portfolio-grid { grid-template-columns: 1fr; } }
.pf-card { background: var(--panel); border: 1px solid var(--line); padding: 26px; border-radius: 14px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s ease, box-shadow .25s ease; position: relative; z-index: 1; }
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(74,56,38,0.12); z-index: 2; }
.pf-swatch { transition: transform .3s ease; border-radius: 8px; overflow: hidden; height: 110px; border: 1px solid var(--line); }
.pf-card:hover .pf-swatch { transform: scale(1.03); }
.pf1 { background: linear-gradient(135deg, #ECDAC0, #D8B98D); }
.pf2 { background: linear-gradient(135deg, #DCC9A8, #C2A47A); }
.pf3 { background: linear-gradient(135deg, #F2E6D2, #DFBE93); }
.pf4 { background: linear-gradient(135deg, #C7B296, #A88B67); }
.pf5 { background: linear-gradient(135deg, #FAF3E7, #ECDAC0); }
.pf6 { background: linear-gradient(135deg, #C39C6E, #A97C50); }
.pf-card h3 { font-size: 1.05rem; font-weight: 500; }
.pf-facts { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.pf-facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; }
.pf-facts .pf-fact-label { color: var(--ink-soft); }
.pf-facts .pf-fact-value { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pf-card .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-card .tags span { font-size: 0.78rem; color: var(--ink-soft); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.pf-card p.meta { font-size: 0.85rem; color: var(--ink-soft); }

/* ADVANTAGES */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-card { background: var(--panel); border: 1px solid var(--line); padding: 28px; border-radius: 14px; transition: transform .25s ease, box-shadow .25s ease; position: relative; z-index: 1; }
.diff-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(74,56,38,0.1); z-index: 2; }
.diff-card:hover .num-badge { background: var(--wood); color: #fff; border-color: var(--wood); }
.diff-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.diff-card p { font-size: 0.92rem; color: var(--ink-soft); }
.callout-box {
  margin-top: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.callout-box p { font-size: 0.94rem; color: var(--ink-soft); flex: 1; min-width: 220px; }
.callout-box strong { color: var(--ink); }

/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px 18px;
  text-align: center; transition: transform .25s ease, box-shadow .25s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(74,56,38,0.1); }
.team-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--wood); color: #FBF6EE;
  display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif;
  font-size: 1.3rem; font-weight: 600; margin: 0 auto 12px;
}
.team-card h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 2px; }
.team-role { font-size: 0.86rem; color: var(--ink-soft); }
.team-exp { font-size: 0.8rem; color: var(--wood); margin-top: 6px; font-weight: 600; }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p { color: var(--ink-soft); margin-bottom: 16px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.facts div { border-left: 2px solid var(--clay); padding-left: 14px; }
.facts strong { display: block; font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--ink); }
.facts span { font-size: 0.85rem; color: var(--ink-soft); }

/* REVIEWS */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 800px) { .review-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--panel); border: 1px solid var(--line); padding: 26px; border-radius: 14px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s ease, box-shadow .25s ease; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(74,56,38,0.1); }
.review-card p.quote { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.05rem; color: var(--ink); }
.review-who { font-size: 0.85rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 12px; }
.review-who strong { color: var(--ink); font-weight: 600; }

/* faq */
.faq-list { border-top: 1px solid var(--line); max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; font-family: 'Fraunces', serif; font-size: 1.08rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s ease; }
.faq-item summary:hover { color: var(--wood); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { font-size: 1.3rem; color: var(--clay); transition: transform .2s; flex-shrink: 0; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item p { padding-bottom: 20px; color: var(--ink-soft); max-width: 68ch; }

/* CONTACT */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info div.item { margin-bottom: 22px; }
.contact-info .label { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 3px; }
.contact-info .value { font-size: 1.15rem; font-weight: 600; }
.contact-info .value a { text-decoration: none; }
.contact-info .value a:hover { color: var(--wood); }
form.lead { display: flex; flex-direction: column; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
form.lead label { font-size: 0.85rem; color: var(--ink-soft); display: block; margin-bottom: 6px; }
form.lead input, form.lead textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-family: inherit; font-size: 0.98rem; border-radius: 8px;
}
form.lead input:focus, form.lead textarea:focus { border-color: var(--wood); outline: none; }
form.lead textarea { resize: vertical; min-height: 80px; }
.form-note { font-size: 0.8rem; color: var(--ink-soft); }
.form-success { display: none; padding: 14px; border: 1px solid var(--sage); color: var(--ink); background: var(--bg-alt); border-radius: 10px; font-size: 0.92rem; }
.form-success.show { display: block; }
.form-hide.hidden-after-submit { display: none; }

footer{padding:70px 0 calc(30px + env(safe-area-inset-bottom, 0px));border-top:0;background:linear-gradient(180deg,var(--bg) 0,var(--bg-alt) 110px)}
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; color: var(--ink-soft); }

/* callback fab */
.callback-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 55;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--wood); color: #FBF6EE; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(74,56,38,0.22);
  transition: transform .2s ease, background .2s ease;
}
.callback-fab:hover { transform: scale(1.08); background: var(--wood-dark); }
.callback-fab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.callback-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wood);
  animation: pulse-ring 2.4s cubic-bezier(0.2,0.6,0.4,1) infinite;
}
@media (prefers-reduced-motion: reduce) { .callback-fab::before { animation: none; } }
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 760px) { .callback-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 52px; height: 52px; } }

.modal-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(74,56,38,0.4);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-card {
  background: var(--panel); max-width: 400px; width: 100%; padding: 30px; border-radius: 16px;
  transform: translateY(10px) scale(0.98); transition: transform .2s ease; position: relative;
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.modal-card p.sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }
.modal-card input, .modal-card textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 0.98rem; border-radius: 8px; margin-bottom: 14px;
}
.modal-card textarea { resize: vertical; min-height: 70px; }
.modal-card input:focus, .modal-card textarea:focus { border-color: var(--wood); outline: none; }
.modal-card label { font-size: 0.82rem; color: var(--ink-soft); display: block; margin-bottom: 6px; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; padding: 6px; }
.modal-skip {
  display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 0.85rem; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px;
}
.modal-skip:hover { color: var(--ink); }

/* admin chat popup */
.chat-popup {
  position: fixed; right: 24px; bottom: 96px; z-index: 55;
  width: 310px; max-width: calc(100vw - 48px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px 16px; box-shadow: 0 18px 44px rgba(74,56,38,0.18);
  opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.chat-popup.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-popup::after {
  content: ""; position: absolute; right: 28px; bottom: -8px; width: 16px; height: 16px;
  background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 0 0 3px 0;
}
@media (max-width: 760px) { .chat-popup { right: 16px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } }
.chat-popup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--bg-alt); color: var(--wood);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-avatar svg { width: 20px; height: 20px; }
.chat-head-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; line-height: 1.3; }
.chat-head-text strong { font-weight: 600; }
.chat-status { font-size: 0.76rem; color: var(--sage); display: flex; align-items: center; gap: 5px; }
.chat-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; }
.chat-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 240px; overflow-y: auto; padding-right: 2px; }
.chat-popup { max-height: calc(100vh - 140px); overflow-y: auto; }
.chat-bubble-msg { background: var(--bg-alt); border-radius: 12px; padding: 10px 13px; font-size: 0.88rem; line-height: 1.45; color: var(--ink); }
.chat-bubble-msg.typing-active::after { content: "▍"; display: inline-block; margin-left: 1px; color: var(--wood); animation: caret-blink 0.9s steps(1) infinite; }
.typing-dots { display: flex; gap: 4px; padding: 8px 13px; width: fit-content; background: var(--bg-alt); border-radius: 12px; margin-bottom: 10px; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft);
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes caret-blink { 50% { opacity: 0; } }
.chat-bubble-msg.user { background: var(--wood); color: #FBF6EE; align-self: flex-end; max-width: 88%; border-bottom-right-radius: 4px; }
.chat-bubble-msg:not(.user) { align-self: flex-start; max-width: 92%; border-bottom-left-radius: 4px; }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea { flex: 1; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.9rem; border-radius: 10px; resize: none; min-height: 44px; }
.chat-compose textarea:focus { border-color: var(--wood); outline: none; }
.chat-send { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--wood); color: #FBF6EE; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .15s; }
.chat-send:hover { background: var(--wood-dark); transform: scale(1.05); }
.chat-send svg { width: 18px; height: 18px; }
.chat-form { display: flex; flex-direction: column; gap: 10px; }
.chat-form input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.92rem; border-radius: 8px; }
.chat-form input:focus { border-color: var(--wood); outline: none; }
.chat-popup .form-success { display: none; }
.chat-popup .form-success.show { display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .chat-bubble-msg.typing-active::after { display: none; } }

.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .mobile-cta a, .mobile-cta button { flex: 1; text-align: center; padding: 13px 10px; font-size: 0.92rem; }
  body { padding-bottom: 64px; }
}

/* HOME extras */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left; }
@media (max-width: 760px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stats-band div { border-left: 2px solid var(--clay); padding-left: 16px; }
.stats-band strong { display: block; font-family: 'Fraunces', serif; font-size: 1.9rem; font-weight: 500; color: var(--wood); line-height: 1.1; }
.stats-band span { display: block; font-size: 0.86rem; color: var(--ink-soft); margin-top: 4px; }
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-cards { grid-template-columns: 1fr; } }
.svc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s ease, box-shadow .25s ease; }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(74,56,38,0.1); }
.svc-card:hover .num-badge { background: var(--wood); color: #fff; border-color: var(--wood); }
.svc-card h3 { font-size: 1.1rem; font-weight: 500; }
.svc-card p { font-size: 0.92rem; color: var(--ink-soft); flex: 1; }
.svc-price { font-weight: 700; color: var(--wood); font-size: 0.98rem; padding-top: 10px; border-top: 1px solid var(--line); }
.section-more { margin-top: 28px; }
.btn-light { background: #FFFBF5; color: var(--wood-dark); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.cta-band { margin-top: 24px; background: var(--wood); color: #FBF6EE; border-radius: 18px; padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; color: #FFFBF5; }
.cta-band p { color: rgba(255,251,245,0.88); max-width: 46ch; }
.cta-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-phone { color: #FFFBF5; font-weight: 700; font-size: 1.15rem; text-decoration: none; white-space: nowrap; }
.cta-phone:hover { text-decoration: underline; }
@media (max-width: 560px) { .cta-band { padding: 28px 22px; } }

/* geometry polish */
.pf-card .tags { margin-top: auto; }
.pf-card { height: 100%; }
.diff-card, .review-card, .team-card { height: 100%; }
.review-who { margin-top: auto; }
.page-title { padding-top: 48px; }
section.block:last-of-type { padding-bottom: 88px; }
.btnrow .btn, .section-more .btn { min-height: 48px; justify-content: center; }

/* button geometry: consistent height/sizing everywhere */
.btn { min-height: 48px; box-sizing: border-box; line-height: 1.2; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; min-height: 40px; }
.btn-outline-light {
  border: 1px solid rgba(255,251,245,0.55); color: #FFFBF5; background: transparent;
  min-height: 48px;
}
.btn-outline-light:hover { background: rgba(255,251,245,0.12); border-color: #FFFBF5; transform: translateY(-2px); }
.cta-actions { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.cta-actions .btn { display: inline-flex; align-items: center; }
.btnrow, .section-more, .cta-actions { align-items: center; }
form.lead button[type="submit"], .modal-card button[type="submit"], .calc-box .btn { width: 100%; }

/* comparison table */
.compare-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.compare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row > div { padding: 14px 16px; font-size: 0.9rem; display: flex; align-items: center; }
.compare-head { background: var(--bg-alt); font-weight: 600; }
.compare-label { color: var(--ink); }
.compare-col { color: var(--ink-soft); }
.compare-col-us { color: var(--wood); font-weight: 600; background: color-mix(in srgb, var(--wood) 8%, transparent); }
@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > div { padding: 8px 16px; }
  .compare-label { font-weight: 600; padding-top: 14px !important; }
  .compare-col-us, .compare-col:last-child { padding-bottom: 14px !important; }
}
.compare-note { margin-top: 14px; font-size: 0.78rem; color: var(--ink-soft); }

/* pricing tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 800px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; position: relative; }
.tier-featured { border-color: var(--wood); box-shadow: 0 14px 34px rgba(74,56,38,0.14); }
.tier-badge { position: absolute; top: -13px; left: 24px; background: var(--wood); color: #FBF6EE; font-size: 0.74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.tier-card h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: 6px; }
.tier-price { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--wood); margin-bottom: 18px; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tier-list li { font-size: 0.88rem; color: var(--ink); padding-left: 26px; position: relative; }
.tier-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.tier-list li.yes { color: var(--ink); }
.tier-list li.yes::before { content: "✓"; color: var(--sage); }
.tier-list li.no { color: var(--ink-soft); }
.tier-list li.no::before { content: "–"; color: var(--ink-soft); }

/* guide / SEO content */
.guide-layout { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; gap: 24px; } }
.guide-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
@media (max-width: 900px) { .guide-toc { position: static; } }
.guide-toc-title { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.guide-toc button { text-align: left; background: none; border: none; cursor: pointer; font-size: 0.88rem; color: var(--ink); padding: 8px 10px; border-radius: 8px; transition: background .2s, color .2s; }
.guide-toc button:hover { background: var(--bg-alt); color: var(--wood-dark); }
.guide-body { min-width: 0; }
.guide-article { scroll-margin-top: 96px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.guide-article:last-of-type { border-bottom: none; }
.guide-article h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 14px; }
.guide-article h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.guide-article p { color: var(--ink-soft); margin-bottom: 14px; max-width: 70ch; }
.guide-article ul, .guide-article ol { margin: 0 0 14px 20px; color: var(--ink-soft); max-width: 70ch; }
.guide-article li { margin-bottom: 8px; }
.guide-article li strong { color: var(--ink); }
.guide-article a, .seo-text a { color: var(--wood-dark); text-decoration: underline; text-underline-offset: 3px; }
.guide-table-wrap { overflow-x: auto; margin: 16px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; }
.guide-table th, .guide-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-table th { background: var(--bg-alt); font-weight: 600; color: var(--ink); }
.guide-table td { color: var(--ink-soft); }
.guide-table td:first-child { color: var(--ink); font-weight: 600; }
.guide-table tr:last-child td { border-bottom: none; }
.seo-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 16px; }
.seo-text p { color: var(--ink-soft); max-width: 78ch; margin-bottom: 14px; }

/* coverage */
.coverage { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; }
@media (max-width: 800px) { .coverage { grid-template-columns: 1fr; } }
.coverage h3 { font-size: 1rem; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 0.82rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; }

/* footer grid */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 28px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.foot-col { display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; color: var(--ink-soft); }
.foot-col h4 { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.foot-col a { text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.foot-col a:hover { color: var(--wood-dark); }
.foot-about p { max-width: 36ch; }
.foot-bottom{position:relative;border:0;padding-top:20px;font-size:.8rem;color:var(--ink-soft)}
.foot-bottom::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:var(--line)}

/* nav fit with 6 items */
.nav-center { gap: 18px; }
@media (max-width: 1060px) { .nav-phone { display: none; } }

/* direction cards (kitchen / bathroom) */
.direction-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 36px; }
@media (max-width: 640px) { .direction-grid { grid-template-columns: 1fr; } }
.direction-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.direction-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(74,56,38,0.1); border-color: var(--wood); }
.direction-card h3 { font-size: 1.15rem; font-weight: 500; }
.direction-card p { font-size: 0.9rem; color: var(--ink-soft); }
.direction-meta { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-soft); }
.direction-meta strong { color: var(--wood); font-size: 1.05rem; }
.direction-more { font-size: 0.85rem; font-weight: 600; color: var(--wood-dark); }
.section-more { display: flex; flex-wrap: wrap; gap: 12px; }

/* motion */
.reveal{opacity:0}
.reveal.in{animation:rise .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sheen{from{left:-70%}to{left:130%}}
@keyframes gradshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.12)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(189,164,125,.6)}100%{box-shadow:0 0 0 8px rgba(189,164,125,0)}}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-primary:hover::after{animation:sheen .9s ease}
.chat-status i{animation:ping 1.8s infinite}
@media (prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1;animation:none}.chat-status i,.btn-primary:hover::after{animation:none}}

/* gradients */
body{background:radial-gradient(1100px 500px at 12% -5%,rgba(221,184,143,.35),transparent 60%),radial-gradient(900px 480px at 100% 20%,rgba(189,164,125,.22),transparent 60%),var(--bg);background-repeat:no-repeat}
section.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,251,245,.7),transparent)}
section.hero::before,section.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
section.hero::before{width:380px;height:380px;left:-60px;top:-20px;background:radial-gradient(circle,rgba(221,184,143,.55),transparent 70%);animation:blob 14s ease-in-out infinite}
section.hero::after{width:320px;height:320px;right:-40px;bottom:36px;background:radial-gradient(circle,rgba(186,139,95,.35),transparent 70%);animation:blob 18s ease-in-out infinite reverse}
section.hero .wrap{position:relative;z-index:1}
.btn-primary{background:linear-gradient(135deg,#C99A6B,#BA8B5F 45%,#9E7047)}
.btn-primary:hover{background:linear-gradient(135deg,#BA8B5F,#9E7047 60%,#86593A)}
section.block.alt{background:linear-gradient(180deg,var(--bg) 0,var(--bg-alt) 120px,var(--bg-alt) calc(100% - 120px),var(--bg) 100%)}
.cta-band{background:linear-gradient(120deg,#BA8B5F,#9E7047,#C99A6B,#9E7047);background-size:240% 240%;animation:gradshift 12s ease infinite}
.stats-band strong,.tier-price,.calc-result strong{background:linear-gradient(120deg,#9E7047,#CFA070);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.team-avatar{background:linear-gradient(135deg,#DDB88F,#9E7047)}
.num-badge{background:linear-gradient(135deg,#FFFBF5,var(--bg-alt))}
.service-row:hover .num-badge,.diff-card:hover .num-badge,.svc-card:hover .num-badge{background:linear-gradient(135deg,#CFA070,#9E7047)}
.page-title h1{background:linear-gradient(100deg,var(--ink),#9E7047 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tier-featured{background:linear-gradient(180deg,#FFFBF5,#F6E9D6)}
.chat-send{background:linear-gradient(135deg,#CFA070,#9E7047)}
.pf-card::before,.svc-card::before,.for-card::before{content:"";display:block;height:3px;margin:-26px -26px 0;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#DDB88F,#BA8B5F,#9E7047)}
@media (prefers-reduced-motion:reduce){section.hero::before,section.hero::after,.cta-band{animation:none}}

/* visuals */
.hero-visual{position:relative;animation:float 7s ease-in-out infinite}
.hero-art{width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(74,56,38,.18))}
.paint-strip{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:paint 3.4s cubic-bezier(.5,0,.2,1) .7s forwards}
.roller{animation:roll 3.4s cubic-bezier(.5,0,.2,1) .7s forwards}
@keyframes paint{to{transform:scaleX(1)}}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(330px)}}
.hero-note{position:absolute;left:-10px;bottom:22px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:.85rem;font-weight:600;box-shadow:0 14px 30px rgba(74,56,38,.15);max-width:220px}
.chat-avatar{background:none;padding:0;width:42px;height:42px}
.chat-avatar svg{width:100%;height:100%}
@media (max-width:860px){.hero-note{left:8px}}
@media (prefers-reduced-motion:reduce){.hero-visual{animation:none}.paint-strip{transform:none;animation:none}.roller{display:none}}

/* hero lead form */
.hero-lead{display:flex;gap:10px;margin-top:20px;max-width:480px}
.hero-lead input{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font:inherit;color:var(--ink)}
.hero-lead input:focus{border-color:var(--wood);outline:none}
.hero-lead .btn{white-space:nowrap}
.hero-promise{font-size:.85rem;color:var(--ink-soft);margin-top:10px}
@media (max-width:520px){.hero-lead{flex-direction:column}}

/* text blocks */
.for-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:960px){.for-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.for-grid{grid-template-columns:1fr}}
.for-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:8px;transition:transform .25s,box-shadow .25s}
.for-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(74,56,38,.1)}
.for-card h3{font-size:1.05rem;font-weight:600}.for-card p{font-size:.9rem;color:var(--ink-soft)}
.estimate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:760px){.estimate-grid{grid-template-columns:1fr}}
.estimate-grid>div{border-left:2px solid var(--clay);padding-left:18px}
.estimate-grid h3{font-size:1.05rem;margin-bottom:6px}.estimate-grid p{font-size:.92rem;color:var(--ink-soft)}
.lead-text{color:var(--ink-soft);max-width:75ch;margin:0 0 20px}

/* illustrations */
.chat-avatar{overflow:hidden;padding:0}
.chat-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.pf-media{overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--bg-alt)}
.pf-cover,.direction-img,.landing-cover{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-cover,.direction-card:hover .direction-img,.landing-media:hover .landing-cover{transform:scale(1.06)}
.landing-media{max-width:1024px;margin:8px auto 0}
.landing-cover{aspect-ratio:5/2;max-height:340px}
.team-photo{display:block;width:80px;height:80px;border-radius:50%;margin:0 auto 12px;border:3px solid var(--panel);box-shadow:0 6px 18px rgba(74,56,38,.16);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.team-card:hover .team-photo{transform:scale(1.08) rotate(-3deg)}
.review-who{display:flex;gap:12px;align-items:center}
.rev-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:2px solid var(--panel);box-shadow:0 3px 10px rgba(74,56,38,.14)}
.contact-person{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:22px}
.contact-person img{width:64px;height:64px;border-radius:50%;flex-shrink:0}
.contact-person strong{display:block;font-weight:700}
.contact-person span{font-size:.86rem;color:var(--ink-soft)}

/* services mega-menu */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-trigger::before{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-right:7px;opacity:.6;transition:transform .25s}
.nav-dd:hover .nav-dd-trigger::before,.nav-dd:focus-within .nav-dd-trigger::before{transform:rotate(225deg) translate(-1px,-1px)}
.nav-dd-menu{position:absolute;top:100%;left:-18px;padding-top:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-inner{display:grid;gap:2px;min-width:300px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 22px 50px rgba(74,56,38,.18)}
.nav-center .nav-dd-inner a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:10px 12px;border-radius:9px;color:var(--ink);font-size:.9rem;transition:background .2s,transform .2s,color .2s}
.nav-center .nav-dd-inner a::after{display:none}
.nav-center .nav-dd-inner a span{font-size:.78rem;color:var(--ink-soft);white-space:nowrap}
.nav-center .nav-dd-inner a:hover{background:var(--bg-alt);transform:translateX(3px)}
.nav-center .nav-dd-inner a strong{font-weight:600}
.nav-center .nav-dd-inner .nav-dd-all{justify-content:center;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--wood-dark);font-weight:600}
.mobile-panel a.sub{font-family:'Manrope',sans-serif;font-size:1rem;padding:10px 0 10px 18px;color:var(--ink-soft)}
.svc-card{text-decoration:none;color:inherit}
.related-links{display:flex;flex-wrap:wrap;gap:10px}
.related-link{text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.88rem;transition:transform .2s,border-color .2s,color .2s,background .2s}
.related-link:hover{transform:translateY(-2px);border-color:var(--wood);color:var(--wood-dark);background:var(--bg-alt)}
.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ===== motion pack ===== */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--clay),var(--wood),var(--wood-dark));transform-origin:left center;transform:scaleX(0);will-change:transform;pointer-events:none}
.svc-card:hover,.diff-card:hover,.pf-card:hover,.review-card:hover,.team-card:hover,.tier-card:hover,.direction-card:hover,.contact-person:hover{background-image:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(186,139,95,.17),transparent 62%)}
.svc-card,.direction-card{position:relative}
.marquee{overflow:hidden;border:0;background:linear-gradient(180deg,transparent 0,var(--bg-alt) 34%,var(--bg-alt) 66%,transparent 100%);padding:30px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{white-space:nowrap;font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink-soft);display:flex;align-items:center;gap:44px}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay)}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero-art{overflow:visible;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ha-paint{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:ha-paint 3.2s cubic-bezier(.55,0,.2,1) .8s forwards}
.ha-roller{animation:ha-roller 3.2s cubic-bezier(.55,0,.2,1) .8s forwards,ha-fade .6s ease 4.1s forwards}
@keyframes ha-paint{to{transform:scaleX(1)}}
@keyframes ha-roller{from{transform:translateX(-18px)}to{transform:translateX(422px)}}
@keyframes ha-fade{to{opacity:0}}
.ha-lamp{transform-box:fill-box;transform-origin:50% 0;animation:ha-sway 6s ease-in-out infinite}
.ha-plant{transform-box:fill-box;transform-origin:50% 100%;animation:ha-sway 7s ease-in-out infinite reverse}
@keyframes ha-sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.ha-sun{transform-box:fill-box;transform-origin:center;animation:ha-pulse 4s ease-in-out infinite}
@keyframes ha-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:1}}
.ha-dust{animation:ha-dust 7s ease-in-out infinite}.ha-dust2{animation-delay:-2s}.ha-dust3{animation-delay:-4s}
@keyframes ha-dust{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(12px,-26px);opacity:.9}}
.ha-blob{transform-box:fill-box;transform-origin:center;animation:ha-blob 11s ease-in-out infinite}.ha-blob2{animation-delay:-5s}
@keyframes ha-blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,-12px) scale(1.08)}}
.hero-badge{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:.82rem;font-weight:600;color:var(--ink);box-shadow:0 10px 26px rgba(74,56,38,.14);animation:bob 5.5s ease-in-out infinite;white-space:nowrap}
.hb1{top:4%;left:0}.hb2{top:38%;right:-2%;animation-delay:-1.8s}.hb3{bottom:30%;left:-2%;animation-delay:-3.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:560px){.hb2{right:0}.hb3{left:0}}
@media (prefers-reduced-motion: reduce){
  .ha-paint{transform:none;animation:none}.ha-roller{display:none}
  .ha-lamp,.ha-plant,.ha-sun,.ha-dust,.ha-blob,.hero-badge,.marquee-track{animation:none}
}

/* ===== quiz ===== */
.quiz-section{padding:150px 0;color:#FFFBF5;background:radial-gradient(760px 380px at 86% 48%,rgba(255,232,196,.20),transparent 70%),linear-gradient(180deg,var(--bg) 0,var(--wood) 130px,var(--wood-dark) calc(100% - 130px),var(--bg) 100%)}
.quiz{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
@media (max-width:860px){.quiz{grid-template-columns:1fr;gap:28px}}
.quiz-side h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:#FFFBF5;margin-bottom:14px}
.quiz-side p{color:rgba(255,251,245,.9);max-width:44ch;margin-bottom:18px}
.quiz-points{list-style:none;display:grid;gap:10px}
.quiz-points li{position:relative;padding-left:26px;font-size:.95rem;color:rgba(255,251,245,.95)}
.quiz-points li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:#F4D9B2}
.quiz-card{background:var(--panel);color:var(--ink);border-radius:20px;padding:28px;box-shadow:0 28px 60px rgba(40,24,10,.32);min-height:340px;display:flex;flex-direction:column}
.quiz-progress{height:6px;border-radius:99px;background:var(--bg-alt);overflow:hidden;margin-bottom:14px}
.quiz-progress span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--clay),var(--wood));transition:width .5s cubic-bezier(.2,.7,.2,1)}
.quiz-label{font-size:.8rem;color:var(--ink-soft);margin-bottom:10px}
.quiz-body{flex:1}
.quiz-in{animation:quiz-in .38s cubic-bezier(.2,.7,.2,1)}
@keyframes quiz-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.quiz-q{font-size:1.3rem;margin-bottom:16px}
.quiz-hint{color:var(--ink-soft);font-size:.92rem;margin-bottom:16px}
.quiz-hint strong{color:var(--wood-dark)}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.quiz-opts{grid-template-columns:1fr}}
.quiz-opt{font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:15px 14px;cursor:pointer;text-align:left;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.quiz-opt:hover{transform:translateY(-3px);border-color:var(--wood);background:var(--bg-alt);box-shadow:0 10px 22px rgba(74,56,38,.12)}
.quiz-opt.on{border-color:var(--wood);background:var(--wood);color:#FFFBF5;transform:scale(.97)}
.quiz-form{display:grid;gap:10px}
.quiz-form input{font:inherit;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.quiz-form input:focus{outline:none;border-color:var(--wood)}
.quiz-err{color:#A8402A;font-size:.84rem}
.quiz-back{align-self:flex-start;margin-top:14px;background:none;border:none;color:var(--ink-soft);font:inherit;font-size:.88rem;cursor:pointer;transition:color .2s,transform .2s}
.quiz-back:hover{color:var(--wood-dark);transform:translateX(-3px)}
.quiz-done{text-align:center}
.quiz-check{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:var(--wood);color:#FFFBF5;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;animation:quiz-pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes quiz-pop{from{transform:scale(0)}to{transform:scale(1)}}
.quiz-result{background:var(--bg-alt);border-radius:14px;padding:16px;margin:0 0 16px;display:grid;gap:4px}
.quiz-result span{font-size:.84rem;color:var(--ink-soft)}
.quiz-result strong{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--wood-dark)}
.quiz-result small{font-size:.78rem;color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){.quiz-in,.quiz-check{animation:none}}

.pf-desc{font-size:.88rem;color:var(--ink-soft);line-height:1.55}

/* QA fix: the note sat on top of the illustration; keep it below the scene */
.hero-visual .hero-note{position:relative;left:auto;bottom:auto;max-width:none;margin:16px auto 0;text-align:center;border-radius:12px}

/* QA: align fact rows across cards of different text length */
.pf-card .pf-desc{flex:1}

/* geometry fix: .wrap + .page-title lost its side padding on phones (titles touched the screen edge) */
.wrap.page-title{padding-left:28px;padding-right:28px}
@media (max-width:560px){.wrap{padding-left:22px;padding-right:22px}.wrap.page-title{padding-left:22px;padding-right:22px}}

/* mobile: the spacer for the sticky bottom bar lives inside the footer, not as a plain strip under it */
@media (max-width:760px){body{padding-bottom:0}footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ===== mobile menu: scrollable panel + collapsible services group ===== */
.mobile-panel{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.mobile-panel > *{flex-shrink:0}
.m-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;cursor:pointer;background:none;border:0;border-bottom:1px solid var(--line);padding:14px 0;color:var(--ink);font-family:'Fraunces',serif;font-size:1.3rem}
.m-chev{width:10px;height:10px;border-right:2px solid var(--wood);border-bottom:2px solid var(--wood);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.m-group.open .m-chev{transform:rotate(225deg) translate(-3px,-3px)}
.m-group.open .m-toggle{color:var(--wood-dark)}
.m-sub{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
.m-sub a{display:block;opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .3s ease,color .2s}
.m-group.open .m-sub a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms)}
.m-sub a.sub-all{color:var(--wood-dark);font-weight:600}
@media (prefers-reduced-motion: reduce){.m-sub,.m-sub a,.m-chev{transition:none}.m-sub a{opacity:1;transform:none}}

.contact-person{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.contact-person:hover{transform:translateY(-3px);border-color:var(--wood);box-shadow:0 12px 26px rgba(74,56,38,.14)}
.contact-person:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
.contact-person-arrow{margin-left:auto;font-style:normal;font-size:1.3rem;color:var(--wood);transition:transform .25s ease}
.contact-person:hover .contact-person-arrow{transform:translateX(5px)}

/* ===== admin chat input: larger, padded, aligned with the bubbles; [hidden] actually hides ===== */
[hidden]{display:none!important}
.chat-compose{position:relative;display:block;margin-top:2px}
.chat-compose textarea{display:block;width:100%;min-height:84px;padding:15px 62px 15px 16px;font-family:inherit;font-size:15.5px;line-height:1.45;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;resize:none;transition:border-color .2s,box-shadow .2s}
.chat-compose textarea:focus{border-color:var(--wood);box-shadow:0 0 0 4px rgba(186,139,95,.16);outline:none}
.chat-compose textarea::placeholder{color:var(--ink-soft)}
.chat-send{position:absolute;right:10px;bottom:10px;width:46px;height:46px}
.chat-form input{min-height:50px;padding:14px 16px;font-size:15.5px;border-radius:12px}
.chat-bubble-msg{font-size:.92rem}
@media (max-width:760px){.chat-compose textarea,.chat-form input{font-size:16px}}

/* ===== navigation motion ===== */
.nav-center{position:relative;gap:6px}
.nav-center > a,.nav-dd-trigger{padding:8px 12px;border-radius:10px;transition:color .2s,transform .15s,background .25s}
.nav-center > a:hover,.nav-dd:hover .nav-dd-trigger{background:rgba(186,139,95,.10)}
.nav-center > a:active,.nav-dd-trigger:active{transform:scale(.94)}
.nav-center > a::after,.nav-dd-trigger::after{display:none}
.nav-center > a,.nav-dd-trigger,.nav-dd-menu a,.btn,.mobile-panel a,.m-toggle,.quiz-opt,.direction-card,.related-link,.svc-card{position:relative;overflow:hidden}
.direction-card,.svc-card{overflow:hidden}
.nav-ind{position:absolute;left:0;bottom:-7px;height:3px;width:0;border-radius:3px;background:linear-gradient(90deg,var(--clay),var(--wood),var(--wood-dark));opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.25,1),width .5s cubic-bezier(.2,.9,.25,1),opacity .3s}
.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(186,139,95,.38),rgba(186,139,95,0) 68%);transform:scale(0);opacity:.9;pointer-events:none;animation:ripple .65s cubic-bezier(.2,.7,.3,1) forwards}
.btn-primary .ripple,.quiz-opt.on .ripple{background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 68%)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.page-sweep{position:fixed;inset:0;z-index:95;pointer-events:none;background:linear-gradient(100deg,var(--wood-dark) 0%,var(--wood) 55%,var(--clay) 100%);transform:translateX(-101%);will-change:transform}
.page-sweep.go{transform:translateX(0);transition:transform .29s cubic-bezier(.7,0,.2,1)}
.page-sweep.go.out{transform:translateX(101%);transition:transform .42s cubic-bezier(.7,0,.2,1)}
html.sweep-cover .page-sweep{transform:translateX(0);transition:none}
.page.active .page-title > *{animation:rise-in .75s cubic-bezier(.2,.7,.2,1) both}
.page.active .page-title > :nth-child(2){animation-delay:.08s}
.page.active .page-title > :nth-child(3){animation-delay:.16s}
.page.active .landing-media,.page.active .page-title + .wrap{animation:rise-in .85s .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.page-sweep{display:none}.ripple{display:none}.page.active .page-title > *,.page.active .landing-media{animation:none}.nav-ind{transition:none}}

/* ===== phone: schedule / price tables open fully as readable cards (no sideways scrolling) ===== */
@media (max-width:640px){
  .guide-table-wrap{overflow:visible;border:0;background:none;border-radius:0;margin:14px 0 18px}
  .guide-table{min-width:0;width:100%;display:block;font-size:.92rem}
  .guide-table thead{display:none}
  .guide-table tbody{display:block}
  .guide-table tr{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(74,56,38,.06)}
  .guide-table td{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:12px;padding:7px 0;border:0;text-align:left;color:var(--ink)}
  .guide-table td::before{content:attr(data-label);color:var(--ink-soft);font-weight:500;font-size:.82rem;line-height:1.5}
  .guide-table td:first-child{display:block;font-weight:700;font-size:1.02rem;padding:2px 0 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .guide-table td:first-child::before{display:none}
  .guide-table tr:last-child td{border-bottom:0}
  .guide-table tr:last-child td:first-child{border-bottom:1px solid var(--line)}
}

/* ===== hero illustration: start (and replay) when it is actually on screen — on phones it sits below the fold ===== */
.hero-visual .ha-paint,.hero-visual .ha-roller{animation-play-state:paused}
.hero-visual.go .ha-paint,.hero-visual.go .ha-roller{animation-play-state:running}
.hero-visual.reset .ha-paint,.hero-visual.reset .ha-roller{animation:none}

/* ===== larger brand mark ===== */
header .logo{gap:12px}
header .logo img{height:54px;width:auto}
header .logo .logo-word{font-size:1.65rem}
.navrow{padding-top:12px;padding-bottom:12px}
footer .foot-brand img{height:104px;width:auto}
@media (max-width:760px){
  header .logo img{height:46px}
  header .logo .logo-word{font-size:1.4rem}
  footer .foot-brand img{height:92px}
}

/* mobile menu: the list starts exactly below the (measured) header */
.mobile-panel{padding-top:calc(var(--header-h,96px) + 18px)}

/* ===== sharp section edges, smooth colour inside every section ===== */
section.block.alt{background:linear-gradient(180deg,#F3E6D0 0%,#EDDABD 100%)}
.marquee{border:0;padding:24px 0;background:#F1E2C8;-webkit-mask-image:none;mask-image:none;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#F1E2C8,rgba(241,226,200,0))}
.marquee::after{right:0;background:linear-gradient(270deg,#F1E2C8,rgba(241,226,200,0))}
footer{border-top:0;background:linear-gradient(180deg,#EFDDC2 0%,#E7D0AE 100%)}
/* accent bands: angled, crisp cut; colour travels smoothly across the diagonal */
.quiz-section,.promo-band{--cut:56px;padding:170px 0;color:#FFFBF5;clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%);
  background:radial-gradient(760px 380px at 86% 48%,rgba(255,232,196,.22),transparent 70%),linear-gradient(135deg,var(--wood) 0%,var(--wood-dark) 100%)}
@media (max-width:760px){.quiz-section,.promo-band{--cut:28px;padding:110px 0}}
/* page sweep: angular leading and trailing edge, quick */
.page-sweep{inset:0 -170px;clip-path:polygon(170px 0,100% 0,calc(100% - 170px) 100%,0 100%);transform:translateX(-101%)}
.page-sweep.go{transform:translateX(0);transition:transform .24s cubic-bezier(.76,0,.24,1)}
.page-sweep.go.out{transform:translateX(101%);transition:transform .34s cubic-bezier(.76,0,.24,1)}
html.sweep-cover .page-sweep{transform:translateX(0);transition:none}

/* neighbours differ clearly or not at all: darker marquee band and footer, readable ink on them */
.marquee{background:#E9D2AE}
.marquee::before{background:linear-gradient(90deg,#E9D2AE,rgba(233,210,174,0))}
.marquee::after{background:linear-gradient(270deg,#E9D2AE,rgba(233,210,174,0))}
.marquee span{color:var(--ink)}
footer{background:linear-gradient(180deg,#E3CAA2 0%,#DABD90 100%)}
.foot-col,.foot-col a,.foot-about p,.foot-bottom{color:var(--ink)}
.foot-col a:hover{color:var(--wood-dark)}
.foot-bottom{opacity:.85}

/* ===== promo band (shares the quiz look) ===== */
.quiz-section,.promo-band{background:radial-gradient(760px 380px at 86% 48%,rgba(255,232,196,.20),transparent 70%),linear-gradient(135deg,#A8764A 0%,#7E5233 100%)}
.promo-inner{display:grid;grid-template-columns:1.35fr .75fr;gap:48px;align-items:center}
@media (max-width:860px){.promo-inner{grid-template-columns:1fr;gap:34px}}
.promo-tag{display:inline-block;background:rgba(255,251,245,.18);border:1px solid rgba(255,251,245,.35);color:#FFFBF5;font-size:.78rem;font-weight:700;padding:5px 14px;border-radius:99px;margin-bottom:16px}
.promo-text h2{font-size:clamp(1.8rem,3.6vw,2.7rem);color:#FFFBF5;margin-bottom:14px}
.promo-text p{color:rgba(255,251,245,.92);max-width:52ch;margin-bottom:18px}
.promo-emblem{position:relative;justify-self:center;width:230px;height:230px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#FFF6E6,#F0D5AA);color:#7E5233;box-shadow:0 26px 56px rgba(40,22,8,.35);animation:emblem-bob 5s ease-in-out infinite}
.promo-emblem i{position:absolute;inset:-14px;border-radius:50%;border:2px dashed rgba(255,251,245,.55);animation:emblem-spin 26s linear infinite}
.promo-emblem span{font-family:'Fraunces',serif;font-size:4.6rem;font-weight:600;line-height:1}
.promo-emblem small{font-size:.82rem;font-weight:600;margin-top:6px;max-width:130px;text-align:center}
@keyframes emblem-spin{to{transform:rotate(360deg)}}
@keyframes emblem-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.promo-emblem,.promo-emblem i{animation:none}}
.tier-promo{display:inline-block;background:var(--wood);color:#FFFBF5;font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:99px;margin:-8px 0 16px}
.tier-note{font-size:.78rem;color:var(--ink-soft);margin:-8px 0 14px}
.svc-chip{position:absolute;top:14px;right:14px;background:var(--wood);color:#FFFBF5;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px}

/* ===== header: one line at every desktop width; compact menu takes over earlier ===== */
.navrow{max-width:1240px}
.nav-center{gap:2px}
.nav-center > a,.nav-dd-trigger{white-space:nowrap}
.nav-center > a,.nav-dd-trigger{padding:8px 11px}
@media (max-width:1180px){.nav-phone{display:none}}
@media (max-width:1040px){.nav-center{display:none}.nav-right .btn-primary{display:none}.burger{display:block}}
.quiz-section,.promo-band{padding-top:135px;padding-bottom:135px}
@media (max-width:760px){.quiz-section,.promo-band{padding-top:96px;padding-bottom:96px}}

.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* ===== footer: deep walnut tone, darker bottom bar, compact ===== */
footer{padding:0!important;border:0!important;background:none!important}
.foot-main{background:linear-gradient(180deg,#6F4829 0%,#5A3A22 100%);color:#F1E2CB;padding:52px 0 40px}
.foot-bar{background:#3E2815;color:#D8C3A3;padding:18px 0}
footer .footer-grid{grid-template-columns:1.4fr 1fr 1fr;padding-bottom:0}
@media (max-width:900px){footer .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .footer-grid{grid-template-columns:1fr}}
.foot-main .foot-col,.foot-main .foot-col a,.foot-main .foot-about p,.foot-main .foot-col span{color:#F1E2CB}
.foot-main .foot-col h4{color:#FFF6E6}
.foot-main .foot-col a:hover{color:#FFD9A0}
.foot-brand{background:#FFFBF5;border-radius:18px;padding:8px 16px;display:inline-flex;width:fit-content;margin-bottom:6px}
footer .foot-brand img{height:84px;width:auto}
.foot-bar-row{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;font-size:.8rem}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.foot-legal a,.foot-cookie{color:#E5D2B4;text-decoration:none;font-size:.8rem;transition:color .2s}
.foot-legal a:hover,.foot-cookie:hover{color:#FFD9A0}
.foot-cookie{background:none;border:0;cursor:pointer;font-family:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.todo{background:#FFE9A8;color:#6A4A00;padding:0 4px;border-radius:4px}
.legal-note{color:var(--ink-soft);font-size:.9rem;margin-top:8px}
@media (max-width:760px){.foot-bar{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}footer .foot-brand img{height:80px}}

/* ===== consent checkbox + cookie notice ===== */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;line-height:1.45;color:var(--ink-soft);margin:2px 0;cursor:pointer}
.consent a{color:var(--wood-dark);text-decoration:underline;text-underline-offset:2px}
.consent input[type=checkbox],.cookie-row input[type=checkbox]{width:18px!important;height:18px!important;min-height:0!important;padding:0!important;margin:1px 0 0!important;flex:none;accent-color:var(--wood);border-radius:4px!important}
.hero-lead{flex-wrap:wrap}.hero-lead .consent{flex-basis:100%}
.cookie-banner{position:fixed;left:20px;bottom:20px;z-index:58;width:min(440px,calc(100vw - 40px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:0 22px 56px rgba(40,22,8,.26);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
.cookie-banner.show{opacity:1;transform:none}
.cookie-main p{font-size:.84rem;line-height:1.5;color:var(--ink-soft);margin-bottom:12px}
.cookie-main p strong{color:var(--ink)}
.cookie-main a{color:var(--wood-dark);text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cookie-actions .btn{min-height:40px}
.cookie-more{background:none;border:0;color:var(--ink-soft);font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 4px}
.cookie-more:hover{color:var(--wood-dark)}
.cookie-settings{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cookie-row{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--ink-soft)}
.cookie-row strong{color:var(--ink)}
@media (max-width:760px){
  .cookie-banner{left:12px;right:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .callback-fab{bottom:calc(78px + env(safe-area-inset-bottom,0px) + var(--cookie-h,0px))}
  .chat-popup{bottom:calc(150px + env(safe-area-inset-bottom,0px) + var(--cookie-h,0px));max-height:calc(100vh - 170px - var(--cookie-h,0px))}
}
@media (prefers-reduced-motion: reduce){.cookie-banner{transition:none}}

/* ROUND4B: clickable tariffs, emblem button, hero sequence, team of six, section bands */
.tier-card[data-order]{cursor:pointer;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.tier-card[data-order]:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(74,56,38,.16)}
.tier-card[data-order]:focus-visible,.promo-emblem:focus-visible{outline:3px solid var(--wood-dark);outline-offset:4px}
.tier-cta{margin-top:auto;padding-top:16px;font-weight:700;color:var(--wood-dark);font-size:.92rem}
.tier-card[data-order]:hover .tier-cta{text-decoration:underline}
button.promo-emblem{border:0;font:inherit;cursor:pointer;transition:transform .25s}
button.promo-emblem:hover{transform:scale(1.05) rotate(-2deg)}
.trust-strip{gap:12px 24px}
.team-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr)}}
section.block.waves{background:linear-gradient(180deg,#F3E6D0 0%,#EDDABD 22%,#F3E6D0 48%,#EDDABD 74%,#F3E6D0 100%)}
/* hero: crooked picture straightens after the roller, sofa slides in from the right, final glint */
.ha-room{transform-box:view-box;transform-origin:260px 210px;transform:rotate(-5deg);animation:ha-straight .9s cubic-bezier(.3,1.45,.5,1) 4.6s forwards}
.ha-sofa{transform:translateX(520px);animation:ha-sofa 1.1s cubic-bezier(.2,.9,.25,1.05) 5.5s forwards}
.ha-glint{animation:ha-glint 1.1s ease-in-out 6.8s forwards}
.ha-star{transform-box:fill-box;transform-origin:center;animation:ha-star 1s ease-out 7.4s forwards}
@keyframes ha-straight{to{transform:rotate(0)}}
@keyframes ha-sofa{to{transform:translateX(0)}}
@keyframes ha-glint{0%{opacity:0;transform:skewX(-18deg) translateX(0)}20%{opacity:.85}100%{opacity:0;transform:skewX(-18deg) translateX(190px)}}
@keyframes ha-star{0%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
.hero-visual .ha-room,.hero-visual .ha-sofa,.hero-visual .ha-glint,.hero-visual .ha-star{animation-play-state:paused}
.hero-visual.go .ha-room,.hero-visual.go .ha-sofa,.hero-visual.go .ha-glint,.hero-visual.go .ha-star{animation-play-state:running}
.hero-visual.reset .ha-room,.hero-visual.reset .ha-sofa,.hero-visual.reset .ha-glint,.hero-visual.reset .ha-star{animation:none}
@media (prefers-reduced-motion:reduce){.ha-room,.ha-sofa{transform:none;animation:none}.ha-glint,.ha-star{display:none}}

/* ROUND5: guide alignment, nav spacing, native page transitions, hero pictures */
@media (min-width:901px){.guide-layout{grid-template-columns:240px minmax(0,1fr);gap:40px}}
.guide-layout .guide-article p,.guide-layout .guide-article ul,.guide-layout .guide-article ol{max-width:none}
.nav-center .nav-dd > .nav-dd-trigger{padding:8px 11px}
.ha-room{transform:none;animation:none}
.ha-sofa{animation-delay:4.4s}
.ha-glint{animation-delay:6.9s}
.ha-star{animation-delay:7.5s}
.ha-pic{transform-box:fill-box;transform-origin:50% 0;animation:ha-pic 1s cubic-bezier(.3,1.6,.5,1) 5.6s forwards}
.ha-pic1{transform:rotate(-10deg)}
.ha-pic2{transform:rotate(8deg)}
@keyframes ha-pic{to{transform:rotate(0)}}
.hero-visual .ha-pic{animation-play-state:paused}
.hero-visual.go .ha-pic{animation-play-state:running}
.hero-visual.reset .ha-pic{animation:none}
@media (prefers-reduced-motion:reduce){.ha-pic{transform:none;animation:none}}

/* ROUND6: original angular colour wipe, compositor-only (transform on a static layer) */
.page-sweep{clip-path:none;inset:auto;top:0;bottom:0;left:-25vw;width:150vw;height:100%;background:none;transform:translate3d(-101%,0,0);will-change:transform;backface-visibility:hidden;contain:strict}
.page-sweep::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--wood-dark) 0%,var(--wood) 55%,var(--clay) 100%);transform:skewX(-10deg)}
.page-sweep.go{transform:translate3d(0,0,0);transition:transform .22s cubic-bezier(.65,0,.3,1)}
.page-sweep.go.out{transform:translate3d(101%,0,0);transition:transform .32s cubic-bezier(.65,0,.3,1)}
html.sweep-cover .page-sweep{transform:translate3d(0,0,0);transition:none}

/* ROUND7: contrast, tap targets, messengers, shorter phone layout */
:root{--ink-soft:#6F5640}
.hero-msg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:.88rem;color:var(--ink-soft)}
.hero-msg a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-weight:600;text-decoration:none;transition:transform .15s,border-color .2s,color .2s}
.hero-msg a:hover{border-color:var(--wood);color:var(--wood-dark);transform:translateY(-2px)}
.mobile-panel .m-msg{display:flex;gap:10px;margin-top:14px}
.mobile-panel .m-msg a{flex:1;font-size:1rem;font-family:'Manrope',sans-serif;font-weight:600;border:1px solid var(--line);border-radius:10px;text-align:center;padding:13px 8px}
.foot-col .foot-msg{display:flex;gap:16px;flex-wrap:wrap}
.contact-info .value a{display:inline-block;padding:10px 0}
@media (max-width:760px){
  .foot-col a,.foot-legal a{display:inline-flex;align-items:center;min-height:44px}
  .foot-legal{gap:0 18px}
  .foot-cookie,.cookie-more,.modal-close,.burger{min-width:44px;min-height:44px}
  .hero-meta{display:none}
}
@media (max-width:560px){section.block{padding:52px 0}section.block:last-of-type{padding-bottom:64px}}
@media (max-width:560px){
  section.hero{padding:26px 0 44px}
  .hero .eyebrow-line{display:none}
  h1.hero-title{font-size:2.05rem;margin-bottom:14px}
  .hero-lede{font-size:1rem;margin-bottom:20px}
}

/* ROUND8: compact phone menu, footer logo link, clickable admin, faster hero */
nav.mobile-panel{gap:0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
nav.mobile-panel > a,nav.mobile-panel .m-toggle{font-size:1.14rem;padding:10px 0}
nav.mobile-panel a.sub{font-size:.98rem;padding:8px 0 8px 18px}
nav.mobile-panel > .btn{margin-top:10px;padding:12px 16px}
nav.mobile-panel .m-msg{margin-top:12px}
nav.mobile-panel .m-msg a{padding:11px 8px}
footer .foot-brand a{display:block;line-height:0;min-height:0;border-radius:12px;transition:transform .2s}
footer .foot-brand a:hover{transform:scale(1.03)}
.contact-person{cursor:pointer}
#chatPopup img{cursor:default}
a[href^="tel:"],a[href^="mailto:"]{cursor:pointer}
.ha-paint{animation:ha-paint 1.7s cubic-bezier(.55,0,.2,1) .25s forwards}
.ha-roller{animation:ha-roller 1.7s cubic-bezier(.55,0,.2,1) .25s forwards,ha-fade .4s ease 2s forwards}
.ha-sofa{animation:ha-sofa .85s cubic-bezier(.2,.9,.25,1.05) 2.2s forwards}
.ha-pic{animation:ha-pic .7s cubic-bezier(.3,1.6,.5,1) 3.1s forwards}
.ha-glint{animation:ha-glint .9s ease-in-out 3.9s forwards}
.ha-star{animation:ha-star .8s ease-out 4.4s forwards}

/* ===================== round 9 ===================== */
/* Useful (guide): the article column is centred on the page, the table of contents sits in the left margin */
@media (min-width:1280px){
  .guide-layout.wrap{max-width:1280px}
  .guide-layout{grid-template-columns:minmax(0,1fr) minmax(0,740px) minmax(0,1fr)!important;gap:32px!important}
  .guide-layout .guide-toc{grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:230px}
  .guide-layout .guide-body{grid-column:2;grid-row:1}
}
@media (min-width:901px) and (max-width:1279px){
  .guide-layout{grid-template-columns:minmax(0,1fr)!important;max-width:860px;gap:18px!important}
  .guide-layout .guide-toc{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 8px;padding:14px 16px}
  .guide-layout .guide-toc-title{flex:0 0 100%;text-align:center;margin-bottom:2px}
  .guide-layout .guide-toc button{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.84rem;background:var(--bg)}
}

/* services menu: folds back after the page changes */
html.dd-shut .nav-dd .nav-dd-menu,html.dd-shut .nav-dd:hover .nav-dd-menu,html.dd-shut .nav-dd:focus-within .nav-dd-menu{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
html.dd-shut .nav-dd:hover .nav-dd-trigger::before,html.dd-shut .nav-dd:focus-within .nav-dd-trigger::before{transform:rotate(45deg) translateY(-2px)}

/* page change: while the wipe moves, the page underneath is calm; the new page starts moving as it is revealed */
html.sweeping .hero-visual,html.sweeping .hero-visual *,html.sweeping section.hero::before,html.sweeping section.hero::after,
html.sweeping .cta-band,html.sweeping .marquee-track,html.sweeping .promo-emblem i,html.sweeping .chat-status i,html.sweeping .callback-fab::before,
html.sweeping .page.active .page-title > *,html.sweeping .page.active .landing-media,html.sweeping .page.active .page-title + .wrap,
html.sweep-cover .page.active .page-title > *,html.sweep-cover .page.active .landing-media,html.sweep-cover .page.active .page-title + .wrap{animation-play-state:paused!important}
.cta-band.off-screen,.marquee.off-screen .marquee-track,.promo-emblem.off-screen i,section.hero.off-screen::before,section.hero.off-screen::after{animation-play-state:paused!important}

/* things that look like buttons but are not: a friendly little reaction on hover */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hero-badge,.chips span,.tags span,.tier-badge,.tier-promo,.promo-tag,.svc-chip,.trust-strip span,.hero-note,.num-badge,.service-row .price,
  .stats-band > div,.facts > *,.tape > *,.step,.for-card,.quiz-points li,.rev-avatar,.team-photo,.hero-meta > *{
    transition:translate .32s cubic-bezier(.2,.9,.3,1.3),scale .32s cubic-bezier(.2,.9,.3,1.3),rotate .32s ease,box-shadow .3s ease,background-color .3s ease,border-color .3s ease,color .3s ease,filter .3s ease}
  .hero-badge:hover{scale:1.07;translate:0 -3px;border-color:var(--wood);box-shadow:0 16px 34px rgba(74,56,38,.24)}
  .chips span:hover,.tags span:hover{scale:1.07;translate:0 -2px;background:var(--bg-alt);border-color:var(--wood);color:var(--wood-dark);box-shadow:0 7px 16px rgba(74,56,38,.14)}
  .tier-badge:hover,.tier-promo:hover,.promo-tag:hover,.svc-chip:hover{scale:1.09;translate:0 -2px;filter:brightness(1.08);box-shadow:0 8px 18px rgba(74,56,38,.28)}
  .trust-strip span:hover,.hero-note:hover{scale:1.04;translate:0 -2px;box-shadow:0 8px 20px rgba(74,56,38,.16)}
  .num-badge:hover{scale:1.16;rotate:-7deg;box-shadow:0 6px 14px rgba(74,56,38,.22)}
  .service-row .price{transform-origin:right center}
  .service-row .price:hover{scale:1.07;color:var(--wood-dark)}
  .stats-band > div:hover,.facts > *:hover,.tape > *:hover,.step:hover,.for-card:hover,.hero-meta > *:hover{translate:0 -4px;box-shadow:0 14px 28px rgba(74,56,38,.12)}
  .quiz-points li:hover{translate:4px 0}
  .rev-avatar:hover,.team-photo:hover{scale:1.1;rotate:-4deg}
}

/* quiz and form consent links: clearly links */
.consent a{font-weight:600;cursor:pointer;transition:color .2s,text-decoration-color .2s}
.consent a:hover{color:var(--clay);text-decoration-thickness:2px}

/* requisites */
.foot-req{margin-top:14px;font-size:.8rem;line-height:1.65;opacity:.9}
.foot-req strong{font-weight:700}
.req-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;max-width:820px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.req-card > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.req-card dt{font-size:.78rem;color:var(--ink-soft);font-weight:600}
.req-card dd{margin:0;font-size:.98rem;color:var(--ink);overflow-wrap:anywhere}
.req-card a{color:var(--wood-dark);text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.req-card{grid-template-columns:1fr;padding:20px}}

/* reviews: call to action + form */
.review-cta{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 30px}
.review-cta h2{font-size:1.3rem;margin:0 0 6px}
.review-cta p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:56ch}
.review-cta .btn{flex:none}
@media (max-width:700px){.review-cta{flex-direction:column;align-items:flex-start;padding:22px}.review-cta .btn{width:100%}}
#reviewModal .modal-card{max-width:480px}
.rv-label{display:block;font-size:.82rem;color:var(--ink-soft);margin-bottom:6px}
.rv-stars{display:inline-flex;flex-direction:row-reverse;gap:2px;margin-bottom:14px;position:relative}
#reviewModal .rv-stars input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;pointer-events:none}
#reviewModal .rv-stars label{display:inline-block;margin:0;font-size:2rem;line-height:1;color:#D9C9B0;cursor:pointer;padding:0 2px;transition:color .15s,transform .2s cubic-bezier(.2,.9,.3,1.5)}
#reviewModal .rv-stars label:hover,#reviewModal .rv-stars label:hover ~ label,#reviewModal .rv-stars input:checked ~ label{color:#E0A526}
#reviewModal .rv-stars label:hover{transform:scale(1.18) rotate(-6deg)}
#reviewModal .rv-stars input:focus-visible + label{outline:2px solid var(--wood);outline-offset:2px;border-radius:4px}
#reviewModal .consent input{margin-bottom:0}
.modal-card label.consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}

/* ===================== round 10 ===================== */
.modal-card select,form.lead select{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:.98rem;border-radius:8px;margin-bottom:14px;appearance:auto;cursor:pointer}
form.lead select{margin-bottom:0}
.modal-card select:focus,form.lead select:focus{border-color:var(--wood);outline:none}
.form-error{padding:10px 12px;border:1px solid #D9A58E;background:#FBEDE6;color:#7A3B24;border-radius:10px;font-size:.88rem;line-height:1.45}
.form-error a{color:inherit;font-weight:700;text-decoration:underline}
form.is-sending button[type="submit"]{opacity:.75;cursor:progress}
form.is-sending button[type="submit"]:disabled{transform:none}

/* ===================== round 11: portfolio viewer, before/after, contract ===================== */
html.pv-lock,html.pv-lock body{overflow:hidden}
.pv{position:fixed;inset:0;z-index:59;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .22s ease}
.pv.open{opacity:1}
.pv[hidden]{display:none}
.pv-backdrop{position:absolute;inset:0;background:rgba(36,26,17,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pv-shell{position:relative;width:min(1200px,100%);height:min(780px,calc(100vh - 48px));height:min(780px,calc(100dvh - 48px));background:var(--panel);border-radius:20px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);overflow:hidden;box-shadow:0 30px 80px rgba(20,10,0,.42);transform:translateY(14px) scale(.985);transition:transform .26s cubic-bezier(.2,.8,.2,1);outline:none}
.pv.open .pv-shell{transform:none}
.pv-x{position:absolute;top:12px;right:12px;z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .2s}
.pv-x:hover{transform:rotate(90deg)}
.pv-x svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.pv-gallery{background:#251B13;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow-y:auto}
.pv-bar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none;position:relative}
.pv-bar::-webkit-scrollbar{display:none}
.pv-step{flex:1 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px 10px;border-radius:10px;border:1px solid rgba(255,251,245,.14);background:rgba(255,251,245,.04);color:rgba(255,251,245,.66);cursor:pointer;font:inherit;text-align:left;position:relative;overflow:hidden;transition:background .2s,color .2s,border-color .2s}
.pv-step span{font-size:.84rem;font-weight:700;white-space:nowrap}
.pv-step small{font-size:.7rem;opacity:.75}
.pv-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.pv-step.done{color:rgba(255,251,245,.92)}
.pv-step.done::after{transform:scaleX(1)}
.pv-step.on{background:var(--wood);border-color:var(--wood);color:#FFFBF5}
.pv-step:hover{border-color:rgba(255,251,245,.4)}
.pv-frame{position:relative;flex:1 1 auto;min-height:220px;border-radius:12px;overflow:hidden;background:#1B140E;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s ease;-webkit-user-drag:none}
.pv-img.on{opacity:1}
.pv-badge{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:999px;background:rgba(255,251,245,.94);color:var(--ink);font-size:.8rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.pv-badge[data-stage="finish"]{background:var(--wood);color:#FFFBF5}
.pv-count{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(27,20,14,.62);color:#FFFBF5;font-size:.78rem;font-variant-numeric:tabular-nums}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,251,245,.92);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:background .2s,transform .2s}
.pv-nav:hover{background:#FFFBF5;transform:translateY(-50%) scale(1.07)}
.pv-nav svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pv-prev{left:12px}.pv-next{right:12px}
.pv-cap{color:rgba(255,251,245,.9);font-size:.93rem;line-height:1.5;min-height:2.9em;flex:none}
.pv-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;flex:none;position:relative;scrollbar-width:thin;scrollbar-color:rgba(255,251,245,.25) transparent}
.pv-th{flex:0 0 auto;width:96px;border:2px solid transparent;border-radius:9px;padding:0;background:#1B140E;cursor:pointer;position:relative;overflow:hidden;opacity:.55;transition:opacity .2s,border-color .2s}
.pv-th img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pv-th i{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:.62rem;font-weight:700;color:#FFFBF5;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:10px 6px 3px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-th:hover{opacity:.9}
.pv-th.on{opacity:1;border-color:var(--clay)}
.pv-info{padding:28px 26px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;min-width:0}
.pv-kicker{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wood-dark);padding-right:52px}
.pv-title{font-size:1.65rem;margin:-8px 0 0;padding-right:20px}
.pv-meta{color:var(--ink-soft);font-size:.92rem;margin-top:-10px}
.pv-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.pv-facts div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.pv-facts dt{font-size:.74rem;color:var(--ink-soft)}
.pv-facts dd{margin:2px 0 0;font-weight:700;font-size:1rem;white-space:nowrap}
.pv-facts .pv-fact-wide{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--bg-alt)}
.pv-note{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin-top:-6px}
.pv-block h3{font-family:'Manrope',sans-serif;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700;margin-bottom:6px}
.pv-block p{font-size:.94rem}
.pv-done{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pv-done li{position:relative;padding-left:27px;font-size:.93rem;line-height:1.45}
.pv-done li::before,.deal-list li::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;border-radius:50%;background:var(--wood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pv-review{margin:0;background:var(--bg);border-left:3px solid var(--wood);border-radius:0 12px 12px 0;padding:14px 16px}
.pv-review blockquote{margin:0;font-family:'Fraunces',serif;font-style:italic;font-size:.98rem;line-height:1.5}
.pv-review figcaption{margin-top:8px;font-size:.82rem;color:var(--ink-soft);font-weight:700}
.pv-cta{margin-top:auto;background:var(--bg-alt);border-radius:14px;padding:16px;display:grid;gap:10px}
.pv-cta p{font-size:.9rem;line-height:1.45}
.pv-cta .btn{width:100%;justify-content:center}
.pv-pn{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pv-pn button{background:none;border:none;color:var(--wood-dark);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;padding:6px 0}
.pv-pn button:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .pv{padding:0;align-items:stretch}
  .pv-shell{display:block;height:100%;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pv-x{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:10px}
  .pv-gallery{padding:64px 12px 14px;overflow:visible}
  .pv-frame{flex:none;aspect-ratio:3/2;min-height:0}
  .pv-nav{width:40px;height:40px}
  .pv-th{width:84px}
  .pv-thumbs{scrollbar-width:none}
  .pv-thumbs::-webkit-scrollbar{display:none}
  .pv-step{padding:7px 10px 9px}
  .pv-step span{font-size:.8rem}
  .pv-info{overflow:visible;padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px))}
  .pv-title{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){.pv,.pv-shell,.pv-img,.pv-step::after{transition:none}}

/* portfolio cards: the whole story behind the photo */
a.pf-media{display:block;position:relative;text-decoration:none;color:inherit}
.pf-media .pf-cover-before{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pf-chip{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700;background:var(--wood);color:#FFFBF5;transition:opacity .3s}
.pf-chip-before{background:rgba(255,251,245,.95);color:var(--ink);opacity:0}
.pf-photos{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(37,27,19,.72);color:#FFFBF5;font-size:.74rem;font-weight:600;display:flex;align-items:center;gap:6px}
.pf-photos svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){
  .pf-media:hover .pf-cover-before{opacity:1;transform:scale(1.06)}
  .pf-media:hover .pf-chip-before{opacity:1}
  .pf-media:hover .pf-chip-after{opacity:0}
}
.pf-more{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pf-more::after{content:"→";transition:transform .2s}
.pf-more:hover{border-color:var(--wood);color:var(--wood-dark)}
.pf-more:hover::after{transform:translateX(4px)}
.pf-card[hidden]{display:none}
.pf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pf-filter{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:.9rem;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pf-filter:hover{border-color:var(--wood)}
.pf-filter.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.pf-filter small{opacity:.65;margin-left:4px;font-weight:500;font-size:.8em}
.pf-howto{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px dashed var(--clay);border-radius:14px;padding:14px 18px;margin-bottom:22px;font-size:.92rem;color:var(--ink-soft)}
.pf-howto strong{color:var(--ink)}
.review-obj{margin-top:12px;background:none;border:none;padding:0;color:var(--wood-dark);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-align:left}
.review-obj:hover{text-decoration:underline;text-underline-offset:3px}

/* before / after */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.ba-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:center;margin-bottom:36px}
.ba{--pos:50%;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:var(--bg-alt);box-shadow:0 18px 40px rgba(74,56,38,.16);-webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#FFFBF5;box-shadow:0 0 0 1px rgba(74,56,38,.12);pointer-events:none}
.ba-line::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#FFFBF5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%234A3826' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.ba-range:focus-visible ~ .ba-line::after{outline:3px solid var(--clay);outline-offset:2px}
.ba-tag{position:absolute;top:12px;padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:700;background:rgba(255,251,245,.94);color:var(--ink);pointer-events:none}
.ba-tag-l{left:12px}
.ba-tag-r{right:12px;background:var(--wood);color:#FFFBF5}
.ba.ba-hint{animation:ba-hint 1.5s ease-in-out}
@keyframes ba-hint{0%{--pos:50%}35%{--pos:28%}70%{--pos:70%}100%{--pos:50%}}
.ba-kicker{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wood-dark)}
.ba-text h3{font-size:1.55rem;margin:6px 0 10px}
.ba-text p{color:var(--ink-soft);margin-bottom:16px}
.ba-steps{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:6px;counter-reset:s}
.ba-steps li{counter-increment:s;font-size:.8rem;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.ba-steps li::before{content:counter(s) " · ";color:var(--wood);font-weight:700}
@media (max-width:860px){.ba-feature{grid-template-columns:1fr;gap:20px}.ba-text .btn{width:100%;justify-content:center}}

/* service pages: a real object instead of a decorative picture */
.landing-proof .ba{aspect-ratio:16/9}
.landing-proof-cap{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-top:14px;font-size:.92rem;color:var(--ink-soft)}
.landing-proof-cap strong{color:var(--ink)}
.landing-proof-cap .pf-more{width:auto;flex:none}
@media (max-width:640px){.landing-proof .ba{aspect-ratio:3/2}.landing-proof-cap .pf-more{width:100%}}

.promo-line{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--clay);font-size:.92rem;color:var(--ink)}
.promo-line strong{background:var(--wood);color:#FFFBF5;border-radius:999px;padding:3px 10px;font-size:.85rem}

/* what the contract fixes */
.deal{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.deal-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.deal-list li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px 46px;display:flex;flex-direction:column;gap:4px}
.deal-list li::before{left:16px;top:18px}
.deal-list strong{font-size:.98rem}
.deal-list span{font-size:.88rem;color:var(--ink-soft);line-height:1.45}
.deal-card{background:var(--ink);color:#FBF6EE;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.deal-card::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(221,184,143,.35),transparent 70%);pointer-events:none}
.deal-card h3{font-size:1.35rem;color:#FFFBF5}
.deal-card p{font-size:.92rem;opacity:.86}
.deal-card .btn{justify-content:center}
.deal-card small{font-size:.76rem;opacity:.6}
.deal-doc{width:46px;height:56px;border-radius:6px;background:#FFFBF5;position:relative;box-shadow:6px 6px 0 rgba(221,184,143,.45)}
.deal-doc::before{content:"";position:absolute;left:9px;right:9px;top:12px;height:28px;background:repeating-linear-gradient(#D6C6AE 0 3px,transparent 3px 8px)}
.deal-doc::after{content:"";position:absolute;right:8px;bottom:7px;width:14px;height:14px;border-radius:50%;background:var(--wood)}
@media (max-width:860px){.deal{grid-template-columns:1fr}.deal-list{grid-template-columns:1fr}}

/* chat and contact cards show the brand mark, not an invented person */
.chat-avatar img[src$="logo-icon.png"],.contact-person img[src$="logo-icon.png"]{object-fit:contain;background:var(--bg-alt);padding:6px;border-radius:50%}
.contact-person img[src$="logo-icon.png"]{padding:10px}

/* order form: what happens after the request */
.next-steps{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;font-size:.88rem}
.form-trust{margin-top:10px;font-size:.8rem;color:var(--ink-soft);text-align:center;line-height:1.45}

/* the header is sticky by design: `overflow-x:hidden` on the wrapper turned it into a scroll box and the header scrolled away */
@supports (overflow:clip){.page-scroll{overflow-x:clip}}

/* «Полезное»: a live plan, estimate and schedule instead of a static picture (complete and readable without motion) */
.g-anim{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;margin-top:8px}
@media (max-width:820px){.g-anim{grid-template-columns:1fr}}
.g-plan{position:relative;border:1px solid var(--line);border-radius:16px;padding:44px 14px 10px;background-color:#FFFDF8;background-image:linear-gradient(#F1E5D2 1px,transparent 1px),linear-gradient(90deg,#F1E5D2 1px,transparent 1px);background-size:22px 22px}
.g-plan svg{display:block;width:100%;height:auto;overflow:visible}
.g-tag{position:absolute;left:14px;top:12px;font-size:.78rem;font-weight:700;color:var(--wood-dark);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.g-side{display:grid;gap:18px;align-content:start}
.g-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.g-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:'Fraunces',serif;font-size:1.15rem;margin-bottom:10px}
.g-card-h span,.g-card-h small{font-family:'Manrope',sans-serif;font-size:.8rem;color:var(--ink-soft);margin-left:4px}
.g-rows{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.g-rows li{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--ink-soft);padding-bottom:6px;border-bottom:1px dashed var(--line)}
.g-rows b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.g-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;font-weight:700}
.g-total b{font-family:'Fraunces',serif;font-size:1.35rem;color:var(--wood-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.g-stamp{flex:none;align-self:center;font-family:'Manrope',sans-serif;border:2px solid #4F8A55;color:#3F7546;border-radius:8px;padding:3px 9px;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;transform:rotate(-8deg);background:rgba(255,255,255,.8)}
.g-bar{display:flex;gap:4px;height:12px;margin:4px 0 12px}
.g-bar i{position:relative;overflow:hidden;border-radius:6px;background:var(--bg-alt)}
.g-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--clay),var(--wood));transform-origin:left center}
.g-legend{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:g}
.g-legend li{counter-increment:g;font-size:.78rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.g-legend li::before{content:counter(g) " · ";color:var(--wood);font-weight:700}
.g-pencil{opacity:0}
/* the sequence plays only when the script has armed it and the block is on screen */
.g-ready .g-w{stroke-dasharray:1;stroke-dashoffset:1}
.g-ready .g-fade,.g-ready .g-stamp{opacity:0}
.g-ready .g-bar i::after{transform:scaleX(0)}
.g-ready .g-legend li{opacity:.4}
.g-ready.go .g-w1{animation:g-draw 1.4s linear .2s forwards}
.g-ready.go .g-w2{animation:g-draw .55s ease-out 1.6s forwards}
.g-ready.go .g-w3{animation:g-draw .55s ease-out 1.85s forwards}
.g-ready.go .g-fade{animation:g-in .5s ease var(--d,0s) forwards}
.g-ready.go .g-pencil{animation:g-pencil 1.4s linear .2s}
.g-ready.go .g-stamp{animation:g-stamp .45s cubic-bezier(.2,1.6,.4,1) 3.9s forwards}
.g-ready.go .g-bar i::after{animation:g-fill .5s ease-out calc(4.2s + var(--n) * .35s) forwards}
.g-ready.go .g-legend li{animation:g-lit .3s ease calc(4.3s + var(--n) * .35s) forwards}
@keyframes g-draw{to{stroke-dashoffset:0}}
@keyframes g-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes g-pencil{0%{opacity:1;transform:translate(40px,30px)}32%{transform:translate(520px,30px)}50%{transform:translate(520px,300px)}82%{transform:translate(40px,300px)}97%{opacity:1;transform:translate(40px,30px)}100%{opacity:0;transform:translate(40px,30px)}}
@keyframes g-stamp{from{opacity:0;transform:rotate(-8deg) scale(1.9)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes g-fill{to{transform:scaleX(1)}}
@keyframes g-lit{to{opacity:1;border-color:var(--wood)}}

/* services menu: the repair type you are looking at stays pressed */
.nav-center .nav-dd-inner a.active{background:var(--bg-alt);color:var(--wood-dark);box-shadow:inset 3px 0 0 var(--wood);transform:none}
.nav-center .nav-dd-inner a.active strong{font-weight:700}
.nav-center .nav-dd-inner a.active span{color:var(--wood-dark)}
.nav-center .nav-dd-inner a.active:hover{background:var(--bg-alt);transform:none}
.mobile-panel a.sub.active{color:var(--wood-dark);font-weight:700;background:var(--bg-alt);border-radius:10px;padding-left:14px;box-shadow:inset 3px 0 0 var(--wood)}

/* ===================== round 12: smooth page changes on desktop (the wipe stays, the extra work under it goes) ===================== */
/* the wipe already is the page transition — a second whole-page fade on load only doubled the work underneath */
html[data-static] .page{animation:none}
/* hero lights: the same soft glow drawn by the gradient itself — a live blur filter was re-computed on the GPU every frame */
section.hero::before,section.hero::after{filter:none;border-radius:0}
section.hero::before{width:640px;height:640px;left:-190px;top:-150px;background:radial-gradient(closest-side,rgba(221,184,143,.34),rgba(221,184,143,.22) 35%,rgba(221,184,143,.08) 70%,rgba(221,184,143,0))}
section.hero::after{width:560px;height:560px;right:-160px;bottom:-84px;background:radial-gradient(closest-side,rgba(186,139,95,.22),rgba(186,139,95,.14) 35%,rgba(186,139,95,.05) 70%,rgba(186,139,95,0))}
/* hero picture: a static shadow under the room; the animated drawing gets its own layer and no per-frame drop-shadow */
.hero-visual{isolation:isolate}
.hero-art{filter:none;will-change:transform}
.hero-visual::before{content:"";position:absolute;z-index:-1;left:7.7%;right:7.7%;top:0;margin-top:6.9%;aspect-ratio:440/348;border-radius:4.5%/5.7%;box-shadow:0 24px 40px rgba(74,56,38,.18);pointer-events:none}
/* closing band: its colour drifts on the compositor instead of repainting the whole band every frame */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:#A9784F;animation:none}
.cta-band::before{content:"";position:absolute;left:0;top:-70%;width:240%;height:240%;z-index:-1;background:linear-gradient(120deg,#BA8B5F,#9E7047,#C99A6B,#9E7047);animation:cta-pan 6s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
@keyframes cta-pan{to{transform:translate3d(-58.3%,0,0)}}
html.sweeping .cta-band::before,.cta-band.off-screen::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.cta-band::before{animation:none}}
/* frosted header: one blur, never animated; off while the wipe covers the screen (nobody sees it then) */
header.site{transition:background .35s ease,border-color .35s ease}
header.site,header.site.scrolled{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.sweep-cover header.site,html.sweep-busy header.site{-webkit-backdrop-filter:none;backdrop-filter:none}
/* the new page's title is prepared on its own layer while still covered, so its rise starts without a raster hitch */
html.sweep-cover .page.active .page-title > *,html.sweeping .page.active .page-title > *{will-change:transform,opacity}

/* ===================== round 14: a quicker page change — the same wipe, one continuous stroke ===================== */
/* the wipe gathers speed while it covers and loses it while it leaves, so both halves read as a single fast swipe */
.page-sweep.go{transition:transform .18s cubic-bezier(.45,0,.85,.4)}
.page-sweep.go.out{transition:transform .3s cubic-bezier(.15,.6,.3,1)}
/* the new page settles in about half a second instead of a full one */
.page.active .page-title > *{animation-duration:.5s}
.page.active .page-title > :nth-child(2){animation-delay:.04s}
.page.active .page-title > :nth-child(3){animation-delay:.08s}
.page.active .landing-media,.page.active .page-title + .wrap{animation-duration:.5s;animation-delay:.06s}
/* cards rise a little faster, and keep their final look even if the end event never arrives (background tab) */
.reveal.in{animation-duration:.6s;animation-fill-mode:both}/* a request that could not be sent is still one tap away from the owner */
.form-fallback{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.form-fallback .wa-send{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:#1E8E4F;color:#fff;font-weight:700;text-decoration:none;line-height:1.2}
.form-fallback .wa-send:hover{background:#17773F}
.form-fallback .wa-send:focus-visible{outline:2px solid #17773F;outline-offset:2px}
/* team: quiet and compact — a small avatar beside the role, no bouncing */
.team-grid{grid-template-columns:repeat(3,1fr);gap:14px}
.team-card{display:grid;grid-template-columns:60px 1fr;column-gap:16px;align-items:center;text-align:left;padding:18px 20px}
.team-card:hover{transform:none;box-shadow:0 10px 24px rgba(74,56,38,.08)}
.team-photo{grid-row:span 2;width:60px;height:60px;margin:0;border:0;box-shadow:none}
.team-card:hover .team-photo,.team-card .team-photo:hover{transform:none;scale:none;rotate:none}
.team-card h3{margin:0;align-self:end}
.team-card .team-exp{margin-top:3px;align-self:start;color:var(--ink-soft);font-weight:500;font-size:.84rem;line-height:1.45}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}}
/* reviews from assets/reviews.js: shown only when there is at least one real review */
.rv-block{margin-bottom:48px}
.rv-card{gap:12px}
.rv-head{display:flex;align-items:center;gap:12px}
.rv-ini{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);color:var(--wood-dark);font-family:'Fraunces',Georgia,serif;font-size:1.15rem;font-weight:600}
.rv-who{display:flex;flex-direction:column;min-width:0}
.rv-who strong{font-weight:700;color:var(--ink)}
.rv-who span{font-size:.82rem;color:var(--ink-soft)}
.rv-stars{margin-left:auto;color:#D49A3A;letter-spacing:1px;white-space:nowrap}
.rv-stars i{font-style:normal;color:var(--line)}
.rv-work{font-size:.84rem;font-weight:600;color:var(--wood-dark)}
.rv-card p.quote{font-size:1rem;line-height:1.6}
.rv-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto;font-size:.86rem}
.rv-links a{color:var(--wood-dark);font-weight:600}
/* ===================== round 15: soft page changes — the same wipe, nothing reloads underneath ===================== */
.page-sweep.go{transition:transform .16s cubic-bezier(.45,0,.85,.4)}
.page-sweep.go.out{transition:transform .28s cubic-bezier(.15,.6,.3,1)}
/* the new page's heading takes focus for screen readers, without a visible ring */
#app h1:focus{outline:none}
/* ===================== round 15: animated scenes in the page heads (same spirit as «Полезное») ===================== */
.page-title.has-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:22px 48px;align-items:center}
.page-title.has-scene .pt-text{min-width:0}
@media (max-width:880px){.page-title.has-scene{grid-template-columns:minmax(0,1fr)}.page-title.has-scene .ms{max-width:460px;width:100%}}
.ms{position:relative;border:1px solid var(--line);border-radius:18px;padding:42px 12px 10px;background-color:#FFFDF8;background-image:linear-gradient(#F3E8D6 1px,transparent 1px),linear-gradient(90deg,#F3E8D6 1px,transparent 1px);background-size:20px 20px;box-shadow:0 18px 40px rgba(74,56,38,.08)}
.ms svg{display:block;width:100%;height:auto;overflow:visible}
.ms-tag{position:absolute;left:12px;top:11px;max-width:calc(100% - 24px);font-size:.76rem;font-weight:700;color:var(--wood-dark);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px;line-height:1.3}
.ms text{font-family:Manrope,Arial,sans-serif}
.ms svg *{transform-box:fill-box}
.ms .ms-pop,.ms .ms-turn,.ms .ms-pulse,.ms .ms-stamp{transform-origin:50% 50%}
.ms .ms-gx,.ms .ms-open{transform-origin:0 50%}
.ms .ms-gy{transform-origin:50% 100%}
.ms .ms-gyt{transform-origin:50% 0}
/* resting picture = the finished result; tools and "before" layers are hidden there */
.ms .ms-out,.ms .ms-drip,.ms .ms-pulse{opacity:0}
.ms .ms-turn{transform:rotate(var(--r,90deg))}
.ms .ms-open{transform:scaleX(.7)}
.ms .ms-stamp{transform:rotate(-12deg)}
/* armed by JavaScript: start from the beginning */
.ms-ready .ms-draw{stroke-dasharray:1;stroke-dashoffset:1}
.ms-ready .ms-in,.ms-ready .ms-pop,.ms-ready .ms-move,.ms-ready .ms-stamp{opacity:0}
.ms-ready .ms-gx{transform:scaleX(0)}
.ms-ready .ms-gy,.ms-ready .ms-gyt{transform:scaleY(0)}
.ms-ready .ms-out{opacity:1}
.ms-ready .ms-turn,.ms-ready .ms-open{transform:none}
.ms-ready .ms-wipe{clip-path:inset(0 100% 0 0)}
.ms-ready.go .ms-draw{animation:ms-draw var(--t,.9s) var(--e,ease-in-out) var(--d,0s) forwards}
.ms-ready.go .ms-in{animation:ms-in var(--t,.5s) ease var(--d,0s) forwards}
.ms-ready.go .ms-pop{animation:ms-pop var(--t,.45s) cubic-bezier(.2,1.6,.4,1) var(--d,0s) forwards}
.ms-ready.go .ms-gx{animation:ms-scale var(--t,.8s) var(--e,cubic-bezier(.3,.7,.3,1)) var(--d,0s) forwards}
.ms-ready.go .ms-gy,.ms-ready.go .ms-gyt{animation:ms-scale var(--t,.8s) var(--e,cubic-bezier(.3,.7,.3,1)) var(--d,0s) forwards}
.ms-ready.go .ms-move{animation:ms-move var(--t,.6s) var(--e,cubic-bezier(.2,.9,.25,1.15)) var(--d,0s) forwards}
.ms-ready.go .ms-out{animation:ms-out var(--t,.45s) ease var(--d,0s) forwards}
.ms-ready.go .ms-turn{animation:ms-turn var(--t,.5s) cubic-bezier(.3,1.4,.5,1) var(--d,0s) forwards}
.ms-ready.go .ms-open{animation:ms-open var(--t,.7s) cubic-bezier(.4,0,.2,1) var(--d,0s) forwards}
.ms-ready.go .ms-stamp{animation:ms-stamp .45s cubic-bezier(.2,1.6,.4,1) var(--d,0s) forwards}
.ms-ready.go .ms-wipe{animation:ms-wipe var(--t,1.2s) cubic-bezier(.6,0,.3,1) var(--d,0s) forwards}
.ms-ready.go .ms-roll{animation:ms-roll var(--t,1.8s) linear var(--d,0s) both}
.ms-ready.go .ms-pulse{animation:ms-pulse 1.5s ease-out var(--d,0s) 3}
.ms-ready.go .ms-drip{animation:ms-drip 1.1s ease-in var(--d,0s) infinite}
@keyframes ms-draw{to{stroke-dashoffset:0}}
@keyframes ms-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ms-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes ms-scale{to{transform:none}}
@keyframes ms-move{from{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px))}to{opacity:1;transform:none}}
@keyframes ms-out{to{opacity:0;transform:translateY(var(--fy,8px))}}
@keyframes ms-turn{to{transform:rotate(var(--r,90deg))}}
@keyframes ms-open{to{transform:scaleX(.7)}}
@keyframes ms-stamp{from{opacity:0;transform:rotate(-12deg) scale(1.9)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes ms-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes ms-roll{from{transform:translateX(0)}to{transform:translateX(var(--dx,300px))}}
@keyframes ms-pulse{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2.3)}}
@keyframes ms-drip{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(var(--dy,60px))}}
/* while the page-change wipe moves, the scenes wait for it */
html.sweeping .ms.go *,html.sweep-cover .ms.go *,html.sweeping .g-anim.go *,html.sweep-cover .g-anim.go *{animation-play-state:paused!important}/* a neutral note inside a form (used by the claude.ai preview copy) */
.form-error.is-info{background:#EEF3F7;border-color:#B9CFE0;color:#2F4A5E}
/* ===================== round 16: breadcrumbs, 404 ===================== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 14px;font-size:.82rem;line-height:1.4;color:var(--ink-soft)}
.crumbs a{color:var(--wood-dark);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.crumbs a:hover,.crumbs a:focus-visible{border-bottom-color:currentColor}
.crumbs-sep{color:var(--clay)}
.nf-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:22px}
.nf-links a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);text-decoration:none;font-weight:600;transition:border-color .2s ease,transform .2s ease}
.nf-links a:hover{border-color:var(--wood);transform:translateY(-2px)}
.nf-links small{display:block;margin-top:2px;font-weight:500;color:var(--ink-soft)}@media (min-width:760px){.nf-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ===================== round 17: webfonts from this site (no requests to Google; same faces as before) ===================== */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}