:root { --bg:#fff9ef; --ink:#32251f; --muted:#6c5b50; --accent:#ae3e20; --surface:#f3e4cf; --card:#fffdf9; --line:#d8c9b8; --display:Georgia,serif; --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 system-ui,-apple-system,sans-serif; }
body[data-theme="barber"],body[data-theme="motor"] { --card:var(--surface); --line:#52616a; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; z-index:100; top:-100px; left:16px; background:var(--bg); padding:12px; }
.skip-link:focus { top:12px; }
.demo-banner { padding:8px 5%; background:var(--ink); color:var(--bg); font-size:.75rem; letter-spacing:.02em; text-align:center; }
.site-nav { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 5%; background:var(--bg); border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; font-weight:800; letter-spacing:-.035em; font-size:1.15rem; }
.brand img { width:38px; height:38px; border-radius:10px; }
.nav-links { display:flex; align-items:center; gap:26px; font-size:.87rem; }
.nav-links a { text-decoration:none; }
.nav-links a:hover { text-decoration:underline; text-underline-offset:5px; }
.menu-toggle { display:none; padding:8px 12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:10px; }
.nav-cta { padding:10px 16px; border:1px solid var(--accent); border-radius:999px; font-weight:750; }
.wrap { width:min(1180px,90%); margin-inline:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--display); font-weight:500; letter-spacing:-.045em; }
h1 { font-size:clamp(3rem,6.3vw,6rem); line-height:1.02; margin:18px 0 26px; text-wrap:balance; }
h2 { font-size:clamp(2.15rem,4vw,3.8rem); line-height:1.12; margin-bottom:20px; text-wrap:balance; }
h3 { font-size:1.16rem; line-height:1.4; }
.eyebrow { margin:0 0 12px; font-size:.72rem; text-transform:uppercase; font-weight:800; letter-spacing:.17em; color:var(--accent); }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:60px; padding-block:72px 64px; }
.hero-copy > p:not(.eyebrow) { max-width:540px; color:var(--muted); font-size:1.1rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 23px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:var(--bg); text-decoration:none; font-weight:750; transition:transform .22s var(--ease),box-shadow .22s ease; }
.button.secondary { background:transparent; color:var(--ink); border-color:var(--line); }
.hero-art { position:relative; margin:0; }
.hero-art > img { width:100%; aspect-ratio:5/4; object-fit:cover; background:var(--surface); border-radius:220px 220px 28px 28px; }
.hero-art figcaption { margin-top:16px; text-align:right; font:italic 1.1rem var(--display); }
.hero-note { display:flex; gap:14px; align-items:flex-start; padding-top:26px; margin-top:32px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.hero-note span:first-child { color:var(--accent); font-weight:800; white-space:nowrap; }
[data-theme="motor"] { --display:Arial,sans-serif; }
[data-theme="motor"] h1,[data-theme="motor"] h2 { font-weight:850; letter-spacing:-.055em; }
[data-theme="motor"] .hero-art > img { border-radius:8px; }
[data-theme="barber"] .hero-art > img { border-radius:180px 180px 8px 8px; }
[data-theme="vet"] .hero-art > img { border-radius:48% 48% 28px 28px; }
[data-theme="home"] .hero-art > img { border-radius:32px; }
[data-theme="stay"] .hero { grid-template-columns:1fr 1.15fr; }
[data-theme="stay"] .hero-art > img { border-radius:8px 90px 8px 8px; }
[data-theme="shop"] .hero-art > img { border-radius:0; }
.strip { border-block:1px solid var(--line); background:var(--surface); }
.strip .wrap { display:grid; grid-template-columns:repeat(3,1fr); padding-block:22px; gap:20px; }
.strip span { text-align:center; font-size:.8rem; font-weight:650; }
.section { padding-block:88px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:34px; }
.section-head h2 { max-width:690px; margin-bottom:0; }
.section-head > p { max-width:340px; color:var(--muted); margin-bottom:0; }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.filter { border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); padding:9px 17px; font-size:.85rem; }
.filter[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.catalog-card { display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.catalog-card > img { width:100%; aspect-ratio:5/3; object-fit:cover; background:var(--surface); }
.catalog-card__body { display:flex; flex-direction:column; flex:1; padding:24px; }
.catalog-card .category { color:var(--accent); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.catalog-card h3 { margin:8px 0 12px; }
.catalog-card p { color:var(--muted); font-size:.9rem; }
.card-action { margin-top:auto; padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.price { font-weight:750; white-space:nowrap; }
.add-button,.service-link { border:1px solid var(--accent); color:var(--accent); background:transparent; border-radius:999px; padding:8px 14px; font-size:.8rem; font-weight:750; text-decoration:none; }
.gallery { background:var(--surface); border-block:1px solid var(--line); }
.visual-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; }
.visual-grid figure { margin:0; }
.visual-grid img { width:100%; aspect-ratio:5/3; object-fit:cover; border-radius:20px; }
.visual-grid figcaption { margin-top:12px; color:var(--muted); font-size:.85rem; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; margin:32px 0 0; padding:0; counter-reset:steps; }
.steps li { counter-increment:steps; padding-top:22px; border-top:1px solid var(--line); }
.steps li::before { content:'0' counter(steps); color:var(--accent); font-weight:800; }
.steps h3 { margin:18px 0 12px; }
.steps p { color:var(--muted); font-size:.95rem; }
.request-section { background:var(--surface); border-block:1px solid var(--line); }
.request-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.request-copy { position:sticky; top:120px; }
.request-copy > p:not(.eyebrow) { color:var(--muted); }
.request-facts { margin:26px 0; padding:0; list-style:none; color:var(--muted); font-size:.9rem; }
.request-facts li { padding:12px 0; border-bottom:1px solid var(--line); }
.form-panel { min-width:0; padding:32px; border:1px solid var(--line); border-radius:24px; background:var(--card); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:.85rem; font-weight:650; }
.field.full { grid-column:1/-1; }
input,select,textarea { width:100%; min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); font-weight:400; }
select option { background:var(--bg); color:var(--ink); }
input[type="date"] { min-height:50px; }
textarea { resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
.form-note { color:var(--muted); font-size:.76rem; margin:18px 0 0; }
.form-submit { width:100%; margin-top:22px; }
body[data-theme] .demo-select { --select-bg:var(--bg); --select-text:var(--ink); --select-border:var(--line); --select-active-bg:var(--surface); --select-accent:var(--accent); }
body[data-theme] .demo-select__trigger { font-weight:400; }
.preview { margin-top:24px; padding:22px; border:1px solid var(--accent); border-radius:16px; background:var(--bg); }
.preview h3 { color:var(--accent); }
.preview-text { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.9rem; }
.error { color:var(--ink); border-left:3px solid var(--accent); padding-left:12px; margin-top:18px; }
.cart-panel { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:24px; }
.cart-items { list-style:none; margin:0; padding:0; }
.cart-item { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); padding:14px 0; }
.cart-item__name { display:block; font-size:.88rem; font-weight:650; }
.cart-item__price { color:var(--muted); font-size:.8rem; }
.quantity { display:flex; align-items:center; gap:10px; }
.quantity button { width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); }
.cart-total { display:flex; justify-content:space-between; padding-top:16px; margin-top:10px; border-top:1px solid var(--line); }
.cart-empty { color:var(--muted); font-size:.9rem; }
.faq-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; }
.faq { padding:20px 0; border-bottom:1px solid var(--line); }
.faq:first-child { border-top:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:18px; list-style:none; font-weight:650; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--accent); font-size:1.4rem; }
.faq[open] summary::after { content:'−'; }
.faq p { margin:18px 0 0; color:var(--muted); font-size:.93rem; }
.footer { padding:44px 5%; background:var(--ink); color:var(--bg); }
.footer-inner { max-width:1180px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.footer-title { font:1.8rem var(--display); }
.footer p { margin:10px 0; font-size:.8rem; }
.footer a:not(.garbed-signature) { font-size:.85rem; text-underline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.reveal { opacity:1; transform:none; }
.motion-ready .reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s var(--ease); transition-delay:var(--reveal-delay,0ms); }
.motion-ready .reveal.is-revealed { opacity:1; transform:none; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .button:hover { transform:translateY(-3px); box-shadow:0 8px 20px #0002; } .catalog-card { transition:transform .25s var(--ease); } .catalog-card:hover { transform:translateY(-4px); } }
@media (max-width:960px) { .hero { gap:30px; padding-block:48px; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .request-grid,.faq-layout { gap:32px; } .nav-links { gap:14px; } .brand { font-size:1rem; } }
@media (max-width:760px) { .site-nav { padding-block:12px; } .menu-toggle { display:block; } .nav-links { display:none; position:absolute; top:100%; left:5%; right:5%; padding:24px; background:var(--bg); border:1px solid var(--line); border-radius:16px; align-items:stretch; box-shadow:0 12px 30px #0002; } .nav-links.open { display:flex; flex-direction:column; gap:18px; } .hero,[data-theme="stay"] .hero { grid-template-columns:1fr; gap:36px; } h1 { font-size:clamp(3rem,11vw,4.8rem); } .hero-art > img { max-height:420px; } .section { padding-block:56px; } .section-head { display:block; } .section-head > p { max-width:none; margin-top:20px; } .steps,.request-grid,.faq-layout { grid-template-columns:1fr; } .request-copy { position:static; } .visual-grid { gap:16px; } .footer-inner { flex-direction:column; text-align:center; } .strip .wrap { gap:10px; padding-block:16px; } .strip span { font-size:.7rem; } }
@media (max-width:480px) { .catalog-grid,.visual-grid { grid-template-columns:1fr; } .form-panel { padding:20px; } .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .hero-note { font-size:.75rem; } .hero-note span:first-child { white-space:normal; } .card-action { align-items:flex-start; } .cart-item { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .motion-ready .reveal { opacity:1; transform:none; } }