:root {
  --bg: #17130f;
  --bg-soft: #201a14;
  --panel: #f4efe7;
  --panel-2: #e9e1d5;
  --ink: #211a14;
  --muted: #736a60;
  --cream: #fffaf2;
  --gold: #caa55b;
  --gold-light: #e3c987;
  --gold-dark: #95733d;
  --line: rgba(255, 255, 255, 0.13);
  --error: #a83b32;
  --success: #3b8b5b;
  --shadow: 0 25px 70px rgba(10, 7, 4, 0.22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cream);
  background: var(--bg);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 72px);
  background: rgba(23, 19, 15, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; fill: var(--cream); }
.brand-mark .brand-gold { fill: var(--gold); }
.brand strong { display: block; font-size: 15px; letter-spacing: .03em; }
.brand small { display: block; color: var(--gold-light); font-size: 10px; text-transform: uppercase; letter-spacing: .22em; margin-top: 1px; }
.header-action { color: var(--gold-light); text-decoration: none; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }

.hero {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 580px;
  padding: 88px clamp(20px, 6vw, 88px) 112px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 470px;
  height: 470px;
  right: -130px;
  top: -210px;
  border: 1px solid rgba(202, 165, 91, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 75px rgba(202, 165, 91, .025), 0 0 0 150px rgba(202, 165, 91, .02);
}

.eyebrow { color: var(--gold-light); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 800; margin: 0 0 18px; }
h1, h2 { font-family: "Playfair Display", Georgia, serif; margin: 0; line-height: 1.04; font-weight: 700; }
h1 { font-size: clamp(43px, 6vw, 76px); max-width: 820px; }
h2 { font-size: clamp(30px, 4vw, 48px); color: var(--ink); }
.hero-text { max-width: 680px; color: rgba(255, 250, 242, .7); line-height: 1.75; font-size: clamp(15px, 2vw, 18px); margin: 25px 0 31px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 11px 22px; color: rgba(255, 250, 242, .75); font-size: 13px; }
.hero-meta span { display: flex; gap: 7px; align-items: center; }
.hero-meta i { color: var(--gold); font-style: normal; }

.hero-card {
  position: relative;
  min-height: 330px;
  padding: 34px;
  border: 1px solid rgba(202, 165, 91, .35);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
  transform: rotate(1.4deg);
}
.hero-card::after { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.07); }
.hero-card-label { color: var(--gold-light); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.hero-card strong { display: block; position: relative; z-index: 1; max-width: 260px; font-family: "Playfair Display", Georgia, serif; font-size: 31px; line-height: 1.15; margin-top: 68px; }
.measure-line { display:flex; align-items:center; gap:10px; margin-top: 45px; color:var(--gold-light); font-size:11px; }
.measure-line span { height:1px; background:var(--gold-dark); flex:1; }
.mini-plan { position:absolute; right:28px; top:37px; width:100px; height:94px; border:1px solid rgba(255,255,255,.18); display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:1fr .65fr; gap:4px; padding:5px; opacity:.65; }
.mini-plan span { border:1px solid rgba(202,165,91,.55); }

.planner-section {
  background: var(--panel);
  color: var(--ink);
  padding: clamp(54px, 8vw, 98px) clamp(18px, 6vw, 88px);
}
.planner-section > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.section-heading { display:flex; justify-content:space-between; gap:32px; align-items:flex-end; margin-bottom:38px; }
.planner-section .eyebrow, .summary-card .eyebrow { color: var(--gold-dark); }
.progress-wrap { min-width: 180px; text-align:right; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.progress { height:3px; background:#d9d0c4; margin-top:10px; overflow:hidden; }
.progress span { display:block; width:33.333%; height:100%; background:var(--gold-dark); transition:width .35s ease; }
.form-step { display:none; }
.form-step.active { display:block; animation:stepIn .35s ease; }
@keyframes stepIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.step-hint { margin:0 0 14px; color:var(--muted); font-size:13px; }
fieldset { border:0; padding:0; margin:0; }
.service-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.service-option { position:relative; }
.service-option input { position:absolute; opacity:0; pointer-events:none; }
.service-option label {
  min-height: 144px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px;
  background:#fffaf2;
  border:1px solid #ded6ca;
  cursor:pointer;
  transition:.2s ease;
}
.service-option label:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 11px 25px rgba(74,52,22,.08); }
.service-option input:focus-visible + label { outline:3px solid rgba(149,115,61,.28); outline-offset:2px; }
.service-option input:checked + label { border-color:var(--gold-dark); background:#fffdf8; box-shadow:inset 0 0 0 1px var(--gold-dark); }
.service-icon { width:36px; height:36px; display:grid; place-items:center; color:var(--gold-dark); background:rgba(202,165,91,.13); font-size:18px; }
.service-title { display:block; font-weight:800; font-size:15px; }
.service-subtitle { display:block; font-size:11px; color:var(--muted); margin-top:5px; line-height:1.45; }
.service-check { position:absolute; top:16px; right:16px; width:22px; height:22px; border:1px solid #c9c0b5; border-radius:50%; display:grid; place-items:center; color:white; font-size:12px; }
.service-option input:checked + label .service-check { background:var(--gold-dark); border-color:var(--gold-dark); }
.service-option input:checked + label .service-check::after { content:"✓"; }
.field-error { color:var(--error); min-height:20px; font-size:12px; margin:10px 0 0; }

.step-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; }
.step-actions.end { justify-content:flex-end; }
.step-actions.start { justify-content:flex-start; }
.button { border:0; min-height:48px; padding:13px 20px; font-weight:800; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:.2s ease; text-decoration:none; }
.button:hover { transform:translateY(-1px); }
.button.primary { background:var(--ink); color:var(--cream); }
.button.primary:hover { background:#33271d; }
.button.ghost { color:var(--ink); background:transparent; border:1px solid #cabfae; }

.selected-overview { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.selected-pill { background:var(--ink); color:var(--cream); padding:7px 11px; font-size:11px; font-weight:700; }
.service-fields { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:16px; }
.details-card { background:#fffaf2; border:1px solid #ded6ca; padding:clamp(20px, 4vw, 30px); }
.card-heading { display:flex; gap:14px; align-items:flex-start; margin-bottom:24px; }
.card-heading .number { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; color:var(--cream); background:var(--gold-dark); font-size:12px; font-weight:800; }
.card-heading h3 { font-family:"Playfair Display", Georgia, serif; font-size:22px; margin:0; }
.card-heading p { color:var(--muted); font-size:12px; margin:5px 0 0; }
.field-grid { display:grid; gap:15px; }
.field-grid.two-col { grid-template-columns:repeat(2, 1fr); }
.field-grid label { display:grid; gap:7px; min-width:0; }
.field-grid label > span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#5e554c; font-weight:800; }
.field-grid .full-width { grid-column:1 / -1; }
input, select, textarea { width:100%; color:var(--ink); background:white; border:1px solid #d1c7ba; border-radius:0; padding:12px 13px; outline:none; }
.input-wrap { position:relative; }
.input-wrap input { padding-right:58px; }
.input-suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:11px; pointer-events:none; }
input:focus, select:focus, textarea:focus { border-color:var(--gold-dark); box-shadow:0 0 0 3px rgba(149,115,61,.13); }
input.invalid, select.invalid, textarea.invalid { border-color:var(--error); }
textarea { resize:vertical; min-height:94px; }
.privacy-note { margin:18px 0 0; color:var(--muted); font-size:11px; padding-left:20px; position:relative; }
.privacy-note::before { content:"◆"; position:absolute; left:2px; color:var(--gold-dark); font-size:9px; }
.photo-field { gap:9px !important; }
.file-picker { position:relative; min-height:86px; display:flex; align-items:center; padding:16px; border:1px dashed #b8a88f; background:#f7f1e8; cursor:pointer; }
.file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file-picker-copy { display:grid; gap:4px; pointer-events:none; }
.file-picker-copy b { color:var(--gold-dark); font-size:13px; }
.file-picker-copy small { color:var(--muted); font-size:11px; text-transform:none; letter-spacing:0; }
.photo-preview { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.photo-item { min-width:0; padding:5px; border:1px solid #ded6ca; background:white; }
.photo-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.photo-item small { display:block; margin-top:5px; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }

.contact-layout { display:grid; grid-template-columns:1fr .82fr; gap:17px; align-items:start; }
.summary-card { background:var(--ink); color:var(--cream); padding:30px; position:sticky; top:92px; }
.summary-card h3 { font-family:"Playfair Display", Georgia, serif; font-size:25px; margin:0 0 18px; }
.summary-preview { font-size:12px; line-height:1.55; color:rgba(255,250,242,.75); }
.summary-group { padding:13px 0; border-top:1px solid rgba(255,255,255,.1); }
.summary-group strong { display:block; color:var(--gold-light); font-size:10px; text-transform:uppercase; letter-spacing:.11em; margin-bottom:5px; }
.summary-group p { margin:2px 0; }
.send-panel { margin-top:17px; background:#e7ddcf; padding:20px; display:flex; justify-content:space-between; gap:24px; align-items:center; }
.send-panel strong { font-family:"Playfair Display", Georgia, serif; font-size:19px; }
.send-panel p { color:var(--muted); font-size:11px; margin:5px 0 0; }
.send-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.email-button { color:white; background:#795f37; }
.whatsapp-button { color:white; background:#267d50; }
.copy-button { color:var(--ink); background:transparent; border:1px solid #b9ac9a; }
.photo-share-button { color:white; background:#5f513f; }
.validation-message { color:var(--error); font-size:12px; min-height:20px; margin-top:10px; }

.trust-section { max-width:1140px; margin:0 auto; padding:80px clamp(20px, 6vw, 88px); display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; }
.trust-section h2 { color:var(--cream); font-size:clamp(30px, 4vw, 45px); }
.trust-section > p { color:rgba(255,250,242,.6); line-height:1.75; font-size:14px; margin:0; }
.legal-footer { max-width:1140px; margin:0 auto; padding:0 clamp(20px, 6vw, 88px) 48px; display:flex; flex-wrap:wrap; gap:22px; color:rgba(255,250,242,.55); font-size:12px; }
.legal-footer a { color:inherit; text-underline-offset:4px; }
.legal-footer a:hover { color:var(--gold-light); }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 30px); background:#2d261f; color:white; padding:11px 17px; font-size:12px; opacity:0; pointer-events:none; transition:.25s ease; z-index:30; box-shadow:var(--shadow); }
.toast.visible { opacity:1; transform:translate(-50%, 0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 850px) {
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; gap:45px; }
  .hero-card { max-width:520px; width:100%; min-height:280px; }
  .service-grid { grid-template-columns:repeat(2, 1fr); }
  .contact-layout, .trust-section { grid-template-columns:1fr; gap:28px; }
  .summary-card { position:static; }
  .send-panel { align-items:flex-start; flex-direction:column; }
  .send-actions { justify-content:flex-start; }
}

@media (max-width: 590px) {
  .site-header { padding:12px 16px; }
  .brand-mark { width:34px; height:34px; }
  .header-action { font-size:11px; }
  .hero { padding:57px 20px 78px; }
  h1 { font-size:42px; }
  .hero-card { min-height:245px; padding:25px; }
  .hero-card strong { margin-top:55px; font-size:27px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:24px; }
  .progress-wrap { width:100%; text-align:left; }
  .service-grid, .service-fields, .field-grid.two-col { grid-template-columns:1fr; }
  .photo-preview { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .service-option label { min-height:114px; }
  .field-grid .full-width { grid-column:auto; }
  .step-actions { flex-direction:column-reverse; align-items:stretch; }
  .step-actions.end { align-items:stretch; }
  .step-actions.start { align-items:stretch; }
  .send-actions { width:100%; display:grid; }
  .send-actions .button { width:100%; }
  .trust-section { padding-top:64px; padding-bottom:64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}