@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#F7F4EE; --ink-soft:#EDE6D6; --ink-card:#E3DAC5;
  --plaster:#1C1912; --brass:#8A6B3C; --brass-bright:#6B5027;
  --pine:#3D4A3E; --stone:#6b6459; --stone-line: rgba(138,107,60,0.3);
  --whatsapp:#25D366;
  --cream:#F7F4EE;
  --gold-fixed:#CBA86B;
  --header-bg: rgba(247,244,238,0.9);
  --tag-bg: rgba(247,244,238,0.88);
  --max-w: 1200px;
}
html[data-theme="dark"]{
  --ink:#171512; --ink-soft:#211e19; --ink-card:#28241d;
  --plaster:#F7F4EE; --brass:#B08D57; --brass-bright:#CBA86B;
  --stone:#8A8578; --stone-line: rgba(176,141,87,0.24);
  --header-bg: rgba(23,21,18,0.86);
  --tag-bg: rgba(23,21,18,0.8);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--ink); color:var(--plaster); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--brass); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 48px; }
@media(max-width:600px){ .wrap{ padding:0 22px; } }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em; text-transform:uppercase; }
:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:3px; }

/* plat line */
.plat-line{ position:relative; height:1px; background:var(--stone-line); margin:0 auto; max-width:var(--max-w); }
.plat-line::before,.plat-line::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--brass); }
.plat-line::before{ left:48px; } .plat-line::after{ right:48px; }
.plat-label{ position:relative; text-align:center; margin-top:-9px; }
.plat-label span{ background:var(--ink); padding:0 16px; font-size:10.5px; color:var(--brass); letter-spacing:0.18em; }

/* header */
header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--stone-line); }
nav.wrap{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; height:80px; gap:32px; }
.logo{ font-family:'Fraunces', serif; font-size:18px; display:flex; align-items:baseline; gap:8px; flex-shrink:0; white-space:nowrap; }
.logo .tag{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--brass); letter-spacing:0.16em; border:1px solid var(--stone-line); padding:3px 6px; }
.nav-links{ display:flex; justify-content:center; gap:34px; font-size:13px; color:var(--stone); align-items:center; white-space:nowrap; }
.nav-links a{ transition:color .2s ease; padding:8px 0; }
.nav-links a:hover, .nav-links a.active{ color:var(--brass-bright); }
.nav-ctas{ display:flex; gap:10px; align-items:center; flex-shrink:0; justify-self:end; }
.theme-toggle{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--stone-line); background:none; color:var(--stone); border-radius:50%; transition:border-color .2s ease, color .2s ease; flex-shrink:0; }
.theme-toggle:hover{ border-color:var(--brass); color:var(--brass-bright); }
.md-theme-toggle{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px; border:1px solid var(--stone-line); background:none; color:var(--plaster); font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; }
.btn-whatsapp{ display:flex; align-items:center; gap:7px; background:var(--whatsapp); color:#0a1f0f; padding:10px 16px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; border-radius:2px; transition:filter .2s ease; }
.btn-whatsapp:hover{ filter:brightness(1.08); }
.nav-cta{ font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); background:var(--brass); padding:10px 18px; border-radius:1px; font-family:'IBM Plex Mono', monospace; transition:background .2s ease; line-height:1.5; text-align:center; }
.nav-cta:hover{ background:var(--brass-bright); }
.nav-burger{ display:none; background:none; border:1px solid var(--stone-line); color:var(--plaster); padding:8px 11px; font-size:15px; }
@media(max-width:1080px){ .nav-links{ display:none; } .nav-burger{ display:block; } .nav-ctas .nav-cta{ display:none; } }
@media(max-width:600px){ .nav-ctas .btn-whatsapp span{ display:none; } }

/* mobile drawer */
.mobile-drawer{ position:fixed; inset:0; z-index:1200; background:var(--ink); transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; }
.mobile-drawer.open{ transform:translateX(0); }
.md-top{ display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--stone-line); }
.md-close{ background:none; border:1px solid var(--stone-line); color:var(--plaster); padding:9px 13px; font-size:15px; }
.md-list a{ display:block; padding:20px 24px; font-size:17px; color:var(--plaster); border-bottom:1px solid var(--stone-line); }
.md-actions{ padding:24px; display:flex; flex-direction:column; gap:12px; }
.md-actions a{ text-align:center; padding:16px; border:1px solid var(--stone-line); border-radius:2px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; }

/* floating whatsapp */
.fab-whatsapp{ position:fixed; bottom:26px; right:26px; z-index:900; width:58px; height:58px; border-radius:50%; background:var(--whatsapp); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.4); transition:transform .2s ease; }
.fab-whatsapp:hover{ transform:scale(1.06); }
.fab-whatsapp svg{ width:28px; height:28px; }
@media(max-width:600px){ .fab-whatsapp{ width:50px; height:50px; bottom:18px; right:18px; } .fab-whatsapp svg{ width:24px; height:24px; } }

/* sections */
section{ padding:110px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; }
.section-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); margin-bottom:16px; display:block; }
.section-head h2{ font-size:clamp(28px,3.2vw,42px); max-width:600px; line-height:1.1; }
.section-head p{ max-width:340px; color:var(--stone); font-size:14px; line-height:1.6; padding-bottom:6px; }
@media(max-width:760px){ .section-head{ flex-direction:column; align-items:flex-start; } section{ padding:76px 0; } }

/* buttons */
.btn-primary{ background:var(--brass); color:var(--ink); padding:16px 30px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; border-radius:1px; border:none; transition:background .2s ease, transform .2s ease; display:inline-block; }
.btn-primary:hover{ background:var(--brass-bright); transform:translateY(-1px); }
.btn-ghost{ font-size:13px; color:var(--plaster); border-bottom:1px solid var(--stone-line); padding-bottom:3px; background:none; border-top:none; border-left:none; border-right:none; transition:border-color .2s ease, color .2s ease; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-bright); }
.btn-outline{ border:1px solid var(--stone-line); color:var(--plaster); background:none; padding:14px 26px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; transition:border-color .2s ease, color .2s ease; display:inline-block; }
.btn-outline:hover{ border-color:var(--brass); color:var(--brass-bright); }
.lead-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }

/* page hero */
.page-hero{ padding:168px 0 76px; position:relative; overflow:hidden; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 900px 500px at 78% 0%, rgba(176,141,87,0.12), transparent 60%), linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%); }
.page-hero .wrap{ position:relative; z-index:2; }
.breadcrumb{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); margin-bottom:20px; display:flex; gap:8px; }
.breadcrumb a{ color:var(--stone); transition:color .2s ease; } .breadcrumb a:hover{ color:var(--brass-bright); }
.page-hero h1{ font-size:clamp(36px,4.6vw,58px); line-height:1.04; max-width:800px; }
.page-hero p.lead{ margin-top:22px; max-width:560px; font-size:15.5px; line-height:1.65; color:var(--stone); }

/* filter bar */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; border:1px solid var(--stone-line); background:var(--ink-soft); padding:20px; }
.filter-bar select, .filter-bar input{ background:var(--ink-card); border:1px solid var(--stone-line); color:var(--plaster); padding:12px 14px; font-family:'Inter', sans-serif; font-size:13.5px; flex:1; min-width:140px; }
.filter-bar select:focus, .filter-bar input:focus{ outline:none; border-color:var(--brass); }
.filter-bar .btn-primary{ flex-shrink:0; padding:12px 26px; }

/* listing cards */
.listings-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--stone-line); border:1px solid var(--stone-line); }
.listing-card{ background:var(--ink); transition:background .3s ease; }
.listing-card:hover{ background:var(--ink-soft); }
.listing-image{ height:220px; position:relative; overflow:hidden; }
.listing-image svg, .listing-image img{ width:100%; height:100%; display:block; object-fit:cover; }
.listing-tag{ position:absolute; top:16px; left:16px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; background:var(--tag-bg); color:var(--brass-bright); padding:5px 10px; border:1px solid var(--stone-line); }
.listing-price{ position:absolute; top:16px; right:16px; font-family:'IBM Plex Mono', monospace; font-size:13px; background:var(--brass); color:var(--ink); padding:6px 11px; }
.listing-body{ padding:22px 22px 26px; }
.listing-body h3{ font-size:18px; margin-bottom:5px; }
.listing-meta{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--stone); letter-spacing:0.04em; margin-bottom:14px; }
.listing-specs{ display:flex; gap:14px; border-top:1px solid var(--stone-line); padding-top:13px; flex-wrap:wrap; }
.listing-specs div{ font-size:11px; color:var(--stone); }
.listing-specs strong{ display:block; color:var(--plaster); font-family:'Fraunces', serif; font-size:15px; font-weight:400; }
@media(max-width:900px){ .listings-grid{ grid-template-columns:1fr; } }

/* area & service cards */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--stone-line); border:1px solid var(--stone-line); }
.info-card{ background:var(--ink); padding:32px 28px; }
.info-card h3{ font-family:'Fraunces', serif; font-size:20px; margin-bottom:12px; }
.info-card p{ font-size:13.5px; color:var(--stone); line-height:1.65; margin-bottom:18px; }
@media(max-width:800px){ .card-grid{ grid-template-columns:1fr; } }

/* cta banner */
.cta-banner{ background:var(--pine); padding:90px 0; position:relative; overflow:hidden; }
.cta-banner::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 700px 400px at 15% 20%, rgba(176,141,87,0.18), transparent 60%); }
.cta-inner{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:36px; flex-wrap:wrap; }
.cta-inner h2{ font-size:clamp(26px,3.2vw,40px); max-width:540px; line-height:1.12; color:var(--cream); }
.cta-inner .lead-row{ margin-top:0; }
@media(max-width:760px){ .cta-inner{ flex-direction:column; align-items:flex-start; } }

/* form */
.form-shell{ max-width:760px; border:1px solid var(--stone-line); background:var(--ink-soft); padding:44px; }
@media(max-width:600px){ .form-shell{ padding:26px 20px; } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-field{ display:flex; flex-direction:column; gap:10px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass); }
.form-field input, .form-field select, .form-field textarea{ background:var(--ink-card); border:1px solid var(--stone-line); color:var(--plaster); padding:16px 18px; font-family:'Inter', sans-serif; font-size:15px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--brass); }
.form-field textarea{ resize:vertical; min-height:110px; }
@media(max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.success-box{ display:none; text-align:center; padding:50px 20px; }
.success-box.show{ display:block; }
.success-box .mark{ font-family:'Fraunces', serif; font-size:38px; color:var(--brass-bright); margin-bottom:16px; }

/* footer */
footer{ padding:70px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 0.8fr 0.8fr 0.9fr 1fr; gap:30px; padding-bottom:50px; }
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ color:var(--stone); font-size:13px; line-height:1.65; max-width:280px; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{ width:32px; height:32px; border:1px solid var(--stone-line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--stone); transition:color .2s ease, border-color .2s ease; }
.footer-social a:hover{ color:var(--brass); border-color:var(--brass); }
.footer-col h5{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; }
.footer-col a{ display:block; color:var(--stone); font-size:13px; margin-bottom:11px; transition:color .2s ease; }
.footer-col a:hover{ color:var(--plaster); }
.footer-address{ display:block; color:var(--stone); font-size:13px; line-height:1.7; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--stone-line); font-size:11px; color:var(--stone); font-family:'IBM Plex Mono', monospace; }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-bottom{ flex-direction:column; gap:10px; } }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.fade-up{ animation:fadeUp 1s ease both; }