:root { --vx-background: #f4f0e8; --vx-color-1: #f4f0e8; --vx-color-2: #bc552e; --vx-color-3: #cfbf9d; --vx-color-4: #252b25; --ink: #252b25; --accent: #ad4927; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 25px; }
body { margin: 0; color: var(--ink); background: var(--vx-background); font-family: 'TikTok Sans', sans-serif; font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.45; font-size: 17px; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img { display: block; max-width: 100%; }
h1, h2, h3, .brand { margin: 0; font-family: 'TikTok Sans', sans-serif; font-stretch: 100%; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
.wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.opening { background: #e9e4d9; position: relative; }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 112px; border-bottom: 1px solid #252b2526; gap: 24px; }
.brand { font-size: 43px; font-weight: 600; display: flex; align-items: center; gap: 19px; }
.brand span { font-size: 13px; font-weight: 400; max-width: 110px; line-height: 1.3; letter-spacing: 0; }
nav { display: flex; gap: 38px; font-size: 15px; letter-spacing: -.02em; line-height: 1.1; }
nav a { display: flex; align-items: center; gap: 9px; }
nav img { width: 18px; }
nav a:hover, .text-link:hover { color: var(--accent); }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 42px; padding-bottom: 42px; }
.hero-copy { padding-top: 13px; min-width: 0; }
.hero > * { min-width: 0; }
.intro { font-size: 14px; margin-bottom: 26px; }
h1 { font-size: clamp(58px, 6.4vw, 92px); }
h1 span, h2 span { color: var(--accent); }
.hero-description { max-width: 390px; margin-top: 28px; margin-bottom: 30px; font-size: 18px; }
.button { display: inline-flex; gap: 36px; justify-content: space-between; align-items: center; background: var(--accent); color: #fff8ed; padding: 20px 25px; border: 0; border-radius: 4px; font-weight: 500; font-stretch: 100%; letter-spacing: -.02em; line-height: 1.1; cursor: pointer; transition: background .2s, transform .2s; }
.button:hover { background: #923d21; transform: translateY(-2px); }
.button img { width: 23px; filter: invert(1); }
.hero-image { position: relative; min-height: 580px; border-radius: 5px; overflow: hidden; }
.hero-image > img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.image-note { position: absolute; bottom: 23px; left: 23px; right: 23px; width: fit-content; background: #f4f0e8; padding: 12px 17px; border-radius: 3px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; background: var(--accent); border-radius: 50%; }
.opening-bottom { border-top: 1px solid #252b2526; display: flex; justify-content: space-between; padding-top: 23px; padding-bottom: 25px; font-size: 13px; }
.opening-bottom a { display: flex; align-items: center; gap: 15px; }
.opening-bottom img { width: 19px; }
.section { padding-block: 105px; }
h2 { font-size: clamp(37px, 3.9vw, 56px); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; margin-bottom: 42px; }
.section-head > p { max-width: 350px; color: #686c61; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 18px; }
.service-card { background: #e7e6dc; border-radius: 5px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; min-height: 410px; }
.service-number { font-size: 13px; color: #65695e; }
h3 { font-size: 34px; margin-top: 26px; margin-bottom: 22px; }
.service-card p { font-size: 16px; color: #545b50; }
.service-card a { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding-top: 30px; margin-top: auto; font-size: 15px; }
.service-card a img, .text-link img { width: 23px; }
.care { background: #dfd3bd; }
.service-photo { min-height: 410px; overflow: hidden; border-radius: 5px; }
.service-photo img { height: 100%; width: 100%; object-fit: cover; }
.direct { padding: 25px 0 105px; display: grid; grid-template-columns: 1fr 220px; gap: 70px; align-items: end; }
.direct > p { font-size: 35px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; max-width: 850px; }
.signature { border-left: 1px solid #bdbdaf; padding-left: 25px; font-size: 28px; }
.signature span { display: block; font-size: 14px; margin-top: 5px; color: #6b6c61; }
.business { background: #29352d; color: #f4f0e8; padding: 70px 0; }
.business-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }
.business-photo { height: 650px; overflow: hidden; border-radius: 5px; }
.business-photo img { width: 100%; height: 100%; object-fit: cover; }
.pill { display: inline-block; padding: 8px 12px; border: 1px solid #f4f0e855; border-radius: 30px; font-size: 12px; margin-bottom: 35px; }
.business h2 { font-size: clamp(36px, 3.7vw, 53px); margin-bottom: 26px; }
.business h2 span { color: #d8b283; }
.business-copy > p { max-width: 465px; color: #d6d9d0; }
.places { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.places span { font-size: 13px; border-radius: 3px; background: #ffffff0c; padding: 7px 12px; }
.business-small { font-size: 15px; }
.light { background: #e6ceb0; color: #29352d; margin-top: 30px; }
.light img { filter: none; }
.light:hover { background: #f5dfc4; }
.other { padding-bottom: 100px; }
.other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.other-grid article { border-top: 1px solid #bcbcaf; padding-top: 25px; }
.other-grid h3 { margin-top: 20px; }
.other-grid p { max-width: 470px; color: #64685e; }
.text-link { display: inline-flex; gap: 35px; align-items: center; margin-top: 25px; }
.contact { background: #e6e0d3; padding-block: 90px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; }
.contact-copy p { margin-top: 30px; color: #64685e; }
.contact-name { margin-top: 52px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
fieldset { border: 0; margin: 0 0 24px; padding: 0; }
legend { margin-bottom: 13px; font-size: 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choices span { display: block; border: 1px solid #afb2a4; border-radius: 4px; padding: 10px 13px; font-size: 13px; transition: background .2s; }
.choices input:checked + span { background: #29352d; color: #f4f0e8; border-color: #29352d; }
.choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 17px; font-size: 14px; }
.field input, textarea { border: 1px solid #bcbeb1; border-radius: 4px; padding: 13px 15px; width: 100%; background: #f4f0e877; color: var(--ink); font-size: 15px; line-height: 1.45; font-stretch: 100%; letter-spacing: 0; }
textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; margin: 20px 0; }
.consent input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; margin: 0; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
form .button { width: 100%; }
.button:disabled { opacity: .65; cursor: wait; }
.privacy-link { display: inline-block; font-size: 11px; color: #64685e; margin-top: 15px; text-decoration: underline; }
.form-status { margin-top: 13px; font-size: 14px; }
.form-status:empty { display: none; }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; }
.footer { padding-block: 45px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer p { font-size: 14px; color: #676b61; }
.back-top { display: flex; gap: 15px; font-size: 13px; }
.back-top img { width: 20px; }
.legal { max-width: 820px; padding-block: 65px; }
.legal h1 { font-size: 46px; margin: 30px 0; }
.legal h2 { font-size: 25px; margin: 30px 0 15px; }
.legal p { margin-bottom: 20px; }
.legal a { text-decoration: underline; }
@media (min-width: 1550px) { .hero-image { min-height: 630px; } }
@media (max-width: 1000px) { .wrap { width: calc(100% - 48px); } nav { gap: 20px; } .hero { gap: 25px; } h1 { font-size: 68px; } .hero-image { min-height: 580px; } .service-grid { grid-template-columns: 1fr 1fr; } .service-photo { display: none; } .business-grid, .contact-grid { gap: 36px; } .business-photo { height: 650px; } .direct { gap: 30px; } }
@media (max-width: 650px) { .wrap { width: calc(100% - 40px); } .header { min-height: 90px; align-items: flex-start; padding-block: 19px; } .brand { font-size: 35px; gap: 11px; } .brand span { font-size: 10px; max-width: 80px; } nav { gap: 10px; padding-top: 9px; } nav a { font-size: 12px; } nav a:not(:last-child) { display: none; } .hero { grid-template-columns: 1fr; padding-top: 26px; gap: 30px; padding-bottom: 25px; } .hero-copy { padding-top: 0; } .intro { font-size: 12px; margin-bottom: 20px; } h1 { font-size: clamp(53px, 15.8vw, 74px); } .hero-description { font-size: 16px; max-width: 340px; margin-top: 22px; margin-bottom: 24px; } .button { padding: 18px 22px; font-size: 16px; } .hero-image { min-height: 0; height: 360px; } .image-note { left: 15px; bottom: 15px; font-size: 12px; padding: 10px 13px; } .opening-bottom { font-size: 11px; gap: 25px; padding-block: 17px; } .opening-bottom > span { max-width: 180px; } .opening-bottom a { gap: 10px; } .section { padding-block: 65px; } h2 { font-size: 36px; } .section-head { display: block; margin-bottom: 30px; } .section-head > p { margin-top: 22px; font-size: 16px; } .service-grid { grid-template-columns: 1fr; gap: 14px; } .service-card { min-height: 350px; padding: 26px; } h3 { font-size: 31px; } .service-photo { display: block; min-height: 0; height: 280px; } .service-photo img { object-position: center 58%; } .direct { padding: 0 0 65px; grid-template-columns: 1fr; gap: 30px; } .direct > p { font-size: 29px; } .signature { font-size: 24px; } .business { padding-block: 45px; } .business-grid { display: flex; flex-direction: column-reverse; gap: 35px; } .business-photo { width: 100%; height: 410px; } .business h2 { font-size: 36px; } .pill { margin-bottom: 25px; font-size: 11px; } .business-copy > p { font-size: 16px; } .business .button { font-size: 15px; } .other-grid { grid-template-columns: 1fr; gap: 36px; } .other-grid p { font-size: 16px; } .contact { padding-block: 60px; } .contact-grid { grid-template-columns: 1fr; gap: 35px; } .contact-copy p { font-size: 16px; margin-top: 22px; } .contact-name { margin-top: 22px; } .form-row { grid-template-columns: 1fr; gap: 0; } .footer { flex-wrap: wrap; padding-block: 30px; gap: 25px; } .footer .brand { width: 100%; } .footer p { font-size: 13px; } .legal h1 { font-size: 34px; overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }