:root { --ink:#18332d; --muted:#64736b; --paper:#f7f5ee; --cream:#ebe6d7; --leaf:#315c4b; --coral:#df7658; --sun:#e9b94e; --line:rgba(24,51,45,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; justify-content:space-between; max-width:1240px; margin:auto; padding:26px 5vw; }
.brand { align-items:center; display:inline-flex; gap:10px; font-size:14px; font-weight:600; }
.brand strong { color:var(--coral); }.brand-mark { align-items:center; background:var(--coral); border-radius:50%; color:white; display:inline-flex; font-size:11px; font-weight:700; height:31px; justify-content:center; width:31px; }
.site-nav { align-items:center; display:flex; gap:30px; font-size:13px; font-weight:600; }.site-nav a:not(.nav-action) { color:var(--muted); }.nav-action { border-bottom:1px solid var(--ink); padding-bottom:4px; }.menu-toggle { background:none; border:0; color:var(--ink); display:none; font:inherit; font-size:13px; }
.hero { display:grid; gap:5vw; grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr); margin:34px auto 0; max-width:1240px; min-height:590px; padding:5vw; }.hero-copy { align-self:center; max-width:570px; padding-bottom:3vw; }.eyebrow { color:var(--coral); font-size:11px; font-weight:700; letter-spacing:.15em; margin:0 0 18px; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces,Georgia,serif; font-weight:700; letter-spacing:-.04em; } h1 { font-size:clamp(3.4rem,6.2vw,6.1rem); line-height:.96; margin-bottom:25px; max-width:650px; } h1 em { color:var(--coral); font-style:normal; }.hero-text { color:var(--muted); font-size:16px; line-height:1.7; max-width:420px; }.primary-button { align-items:center; background:var(--leaf); border-radius:999px; color:white; display:inline-flex; font-size:13px; font-weight:700; gap:23px; margin-top:19px; padding:15px 21px; transition:transform .2s,background .2s; }.primary-button:hover { background:var(--coral); transform:translateY(-2px); }.hero-note { align-items:center; color:var(--muted); display:flex; font-size:11px; gap:8px; margin-top:34px; }.signal-dot { background:var(--sun); border-radius:50%; height:8px; width:8px; }
.hero-art { align-items:center; background:var(--cream); border-radius:46% 46% 12px 12px; display:flex; justify-content:center; min-height:530px; overflow:hidden; position:relative; }.art-glow { background:var(--sun); border-radius:50%; height:290px; opacity:.7; position:absolute; right:-42px; top:35px; width:290px; }.hero-art img { max-height:92%; max-width:92%; object-fit:contain; position:relative; z-index:1; }.image-note { background:rgba(247,245,238,.93); bottom:16px; color:var(--muted); font-size:10px; left:16px; margin:0; padding:8px 10px; position:absolute; z-index:2; }.image-note strong { color:var(--ink); }
.directory-section { background:var(--leaf); color:white; padding:92px 5vw 110px; }.section-heading,.directory-tools,.listing-grid { margin-left:auto; margin-right:auto; max-width:1140px; }.section-heading { align-items:end; display:flex; justify-content:space-between; }.section-heading .eyebrow { color:var(--sun); } h2 { font-size:clamp(2.3rem,4vw,4.5rem); line-height:1; margin-bottom:0; }.section-intro { color:rgba(255,255,255,.68); font-size:14px; line-height:1.6; max-width:240px; }.directory-tools { align-items:center; display:flex; gap:22px; margin-top:45px; }.search-box { align-items:center; background:white; border-radius:999px; color:var(--muted); display:flex; flex:1; font-size:11px; font-weight:700; gap:12px; max-width:460px; padding:5px 17px; }.search-box span { color:var(--coral); font-size:10px; text-transform:uppercase; }.search-box input { border:0; color:var(--ink); font:inherit; min-width:0; outline:0; padding:11px 0; width:100%; }.category-filters { display:flex; gap:8px; }.filter-button { background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:rgba(255,255,255,.8); cursor:pointer; font:inherit; font-size:12px; padding:11px 16px; }.filter-button.is-active,.filter-button:hover { background:var(--sun); border-color:var(--sun); color:var(--ink); }.listing-grid { display:grid; gap:13px; grid-template-columns:repeat(5,1fr); margin-top:30px; }.listing-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; min-height:305px; padding:17px; transition:background .2s,transform .2s; }.listing-card:hover { background:rgba(255,255,255,.17); transform:translateY(-5px); }.listing-icon { align-items:center; border-radius:50%; color:var(--ink); display:flex; font-family:Fraunces,Georgia,serif; font-size:21px; height:53px; justify-content:center; margin-bottom:26px; width:53px; }.room-icon { background:var(--sun); }.craft-icon { background:#cf8eb0; }.tailor-icon { background:#a7c2d3; }.iron-icon { background:#e69970; }.beauty-icon { background:#c2d89b; }.card-label { color:var(--sun); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.listing-card h3 { font-family:Fraunces,Georgia,serif; font-size:20px; letter-spacing:-.025em; line-height:1.05; margin:8px 0 10px; }.listing-card p:not(.card-label) { color:rgba(255,255,255,.68); font-size:12px; line-height:1.55; }.listing-card a { border-top:1px solid rgba(255,255,255,.2); font-size:11px; font-weight:700; margin-top:auto; padding-top:14px; }.listing-card a span { color:var(--sun); float:right; font-size:17px; line-height:10px; }.empty-state { color:rgba(255,255,255,.7); margin:30px auto 0; max-width:1140px; }
.how-section { padding:110px 5vw 120px; }.how-section > * { margin-left:auto; margin-right:auto; max-width:1140px; }.how-section h2 { max-width:640px; margin-bottom:65px; margin-left:0; }.steps { display:grid; gap:55px; grid-template-columns:repeat(3,1fr); }.steps div { border-top:1px solid var(--line); padding-top:16px; }.steps span { color:var(--coral); font-family:Fraunces,Georgia,serif; font-size:18px; }.steps h3 { font-family:Fraunces,Georgia,serif; font-size:22px; margin:30px 0 9px; }.steps p { color:var(--muted); font-size:13px; }.site-footer { border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:11px; gap:30px; justify-content:space-between; padding:24px 5vw; }.site-footer span:first-child { color:var(--ink); font-weight:700; }.site-footer a { color:var(--coral); font-weight:700; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:35px; }.hero-copy { padding-bottom:0; }.hero-art { min-height:400px; }.listing-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .site-header { padding:19px 5vw; }.menu-toggle { display:block; }.site-nav { background:var(--paper); display:none; flex-direction:column; gap:20px; left:0; padding:20px 5vw 25px; position:absolute; right:0; top:70px; z-index:5; }.site-nav.is-open { display:flex; }.site-nav a { align-self:flex-start; }.hero { margin-top:0; min-height:auto; padding:55px 5vw 65px; }.hero-art { margin-top:25px; min-height:310px; }.image-note { font-size:9px; }.image-note strong { display:block; } h1 { font-size:clamp(3.1rem,15vw,4.5rem); }.section-heading { align-items:start; flex-direction:column; gap:20px; }.directory-section { padding:70px 5vw 80px; }.directory-tools { align-items:stretch; flex-direction:column; }.search-box { max-width:none; }.category-filters { flex-wrap:wrap; }.listing-grid { grid-template-columns:1fr; }.listing-card { min-height:245px; }.how-section { padding:80px 5vw; }.steps { gap:35px; grid-template-columns:1fr; }.site-footer { align-items:flex-start; flex-direction:column; gap:9px; } }