:root{ --paper:#FBF7EE; --bark:#2E1F14; --amber:#C97B2B; --forest:#2F4A3C; --stone:#C9BFA8; --stonedark:#8A8066; }
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--bark);}
::selection{background:var(--amber); color:var(--paper);}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

.eyebrow{ font-family:'Source Sans 3',sans-serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--forest); }
.btn-primary{ background:var(--amber); color:var(--paper); font-weight:700; font-size:.9rem; padding:.9rem 1.6rem; border-radius:3px; transition:transform .15s ease, box-shadow .15s ease; display:inline-block; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(46,31,20,.2); }
.btn-secondary{ border:1px solid var(--forest); color:var(--forest); font-weight:600; font-size:.9rem; padding:.85rem 1.55rem; border-radius:3px; transition:background .15s ease; display:inline-block; }
.btn-secondary:hover{ background:rgba(47,74,60,.06); }

.draw{ stroke-dasharray:700; stroke-dashoffset:700; animation:draw 1.8s ease forwards; }
.d1{animation-delay:.1s} .d2{animation-delay:.35s} .d3{animation-delay:.6s} .d4{animation-delay:.85s} .d5{animation-delay:1.1s}
.leaf{opacity:0; animation:fadeIn .5s ease forwards;}
.l1{animation-delay:1.5s} .l2{animation-delay:1.65s} .l3{animation-delay:1.8s} .l4{animation-delay:1.95s} .l5{animation-delay:2.1s} .l6{animation-delay:2.25s}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .draw{animation:none; stroke-dashoffset:0;} .leaf{animation:none; opacity:1;} }

.card{ border:1px solid var(--stone); border-radius:4px; background:rgba(255,255,255,.5); transition:border-color .15s ease, transform .15s ease; }
.card:hover{ border-color:var(--forest); transform:translateY(-2px); }

input, select, textarea{ background:transparent; border:1px solid var(--stonedark); border-radius:3px; padding:.75rem .85rem; font-family:'Source Sans 3',sans-serif; font-size:.95rem; width:100%; }
input:focus, select:focus, textarea:focus{ border-color:var(--forest); }
label{ font-family:'Source Sans 3',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stonedark); }

.step-dot{ width:10px; height:10px; border-radius:50%; background:var(--stone); }
.step-dot.active{ background:var(--amber); }
.step-panel{ display:none; }
.step-panel.active{ display:block; }

.choice-btn{ border:1px solid var(--stonedark); border-radius:4px; padding:.9rem 1rem; cursor:pointer; transition:all .15s ease; }
.choice-btn:hover{ border-color:var(--forest); }
.choice-btn.selected{ border-color:var(--amber); background:rgba(201,123,43,.1); }

details summary{ cursor:pointer; list-style:none; }
details summary::-webkit-details-marker{ display:none; }

.lightbox{ position:fixed; inset:0; background:rgba(46,31,20,.85); z-index:60; display:flex; align-items:center; justify-content:center; padding:2rem; }

/* Multi-page additions */
.page-hero{ background:var(--forest); color:var(--paper); padding:3.5rem 0; }
nav a.active{ color:var(--forest); border-bottom:2px solid var(--amber); padding-bottom:2px; }

/* Drag-to-compare before/after slider */
.compare-slider{ position:relative; height:300px; border-radius:4px; overflow:hidden; --pos:50%; }
.compare-before, .compare-after{ position:absolute; inset:0; }
.compare-after{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:var(--paper); transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 8px rgba(251,247,238,.25); }
.compare-handle::after{ content:'\2194'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--paper); color:var(--bark); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.compare-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; -webkit-appearance:none; }
.compare-label{ position:absolute; top:12px; background:rgba(46,31,20,.65); color:var(--paper); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .6rem; border-radius:2px; pointer-events:none; }
.compare-label-before{ left:12px; }
.compare-label-after{ right:12px; }