/* v9 — small core (7px), stronger ember glow (halo/bloom), no size change when ON */
:root{
  --surface:#121517; --surface-2:#1c2225; --ink:#e8eef2; --muted:#a5b2bb; --accent:#9fb3c8; --wood:#4a3b2d;
  --ring:0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent);
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: linear-gradient(180deg,color-mix(in oklab,var(--surface) 92%,#0e0f10) 0%,var(--surface) 60%,color-mix(in oklab,var(--surface) 92%,#0b0b0c) 100%);
  color:var(--ink);
}
/* Layout (unchanged) */
.plank{ position:fixed; inset:0 auto 0 0; width:80px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--surface-2) 88%,#000),color-mix(in oklab,var(--surface-2) 96%,#000));
  border-right:1px solid color-mix(in oklab,var(--surface-2),#000 25%);
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 10px; z-index:20 }
.plank .brand{ display:block; text-decoration:none }
.plank .brand img{ width:52px; height:auto; display:block }
.plank nav{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.plank nav a{ display:grid; place-items:center; width:52px; height:38px; border-radius:10px; color:var(--muted); text-decoration:none;
  border:1px solid color-mix(in oklab,var(--surface-2),#000 30%) }
.plank nav a:hover,.plank nav a:focus{ color:var(--ink); outline:var(--ring); background:color-mix(in oklab,var(--surface-2) 70%,#000) }
.wrap{ margin-left:80px }
.deck{ max-width:1280px; margin:0 auto; padding:clamp(18px,4vw,48px) }
.hero{ display:grid; grid-template-columns:1.08fr .92fr; gap:20px; align-items:center; border-bottom:1px solid color-mix(in oklab,var(--surface-2) 60%,black) }
.hero-text h1{ font-size:clamp(2rem,4.6vw,3.2rem); margin:.2rem 0 .4rem }
.lead{ color:var(--muted) }
.hero-cta{ display:flex; gap:10px; margin-top:10px }
.hero-scene{ position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#182022, #111517) }
.scene.layer{ position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; opacity:.9 }
.scene.cabin{ background-image:linear-gradient( to top, rgba(0,0,0,.45), transparent 60%), radial-gradient(1200px 400px at 60% 110%, rgba(212,154,58,.18), transparent 60%), url('images/placeholder_cabin.jpg') }
.scene.jeep{ background-image:radial-gradient(600px 220px at 20% 80%, rgba(255,170,70,.18), transparent 70%), url('images/placeholder_jeep.jpg'); mix-blend-mode:screen; opacity:.55 }
.scene.reeds{ background-image:url('images/placeholder_reeds.png'); opacity:.5 }
.scene.glow{ background:radial-gradient(180px 180px at 82% 82%, color-mix(in oklab,var(--accent) 55%,#fff 15%), transparent 70%) }
.section{ border-top:1px solid color-mix(in oklab,var(--surface-2) 60%,black) }
.section-head{ margin-bottom:14px }
.section h2{ margin:.2rem 0 .2rem; font-size:clamp(1.4rem,3vw,1.9rem) }
.section p{ margin:0; color:var(--muted) }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.card{ background:linear-gradient(180deg,color-mix(in oklab,var(--surface-2) 90%,#000),color-mix(in oklab,var(--surface-2) 96%,#000)); border:1px solid color-mix(in oklab,var(--surface-2),#000 25%); border-radius:16px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.20) }
.card h3{ margin:.2rem 0 .4rem }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0 }
.chips li{ border:1px solid color-mix(in oklab,var(--accent),#000 70%); border-radius:999px; padding:6px 10px; background:color-mix(in oklab,var(--surface) 60%, var(--accent) 12%) }
.list{ margin:0; padding-left:18px }
.tabs{ display:flex; gap:8px; margin:8px 0 10px }
.tab{ appearance:none; border:1px solid color-mix(in oklab,var(--surface-2),#000 30%); background:var(--surface-2); color:var(--muted); padding:8px 12px; border-radius:10px; cursor:pointer }
.tab.active{ color:var(--ink); outline:var(--ring) }
.panels .panel{{display:block}} .panels .panel[hidden]{{display:none}}
.rail{ list-style:none; margin:12px 0 0; padding:0; position:relative }
.rail li{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; padding:10px 0 }
.rail .dot{ width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 20px color-mix(in oklab,var(--accent) 45%,transparent); margin-top:6px }
.masonry{ columns:3 240px; column-gap:12px }
.tile{ break-inside:avoid; background:linear-gradient(180deg,color-mix(in oklab,var(--surface-2) 88%,#000), color-mix(in oklab,var(--surface-2) 96%,#000)); border:1px dashed color-mix(in oklab,var(--muted),#000 40%); border-radius:12px; padding:18px; margin:0 0 12px; color:var(--muted); text-align:center }
.tile.wide{ height:180px } .tile.tall{ height:280px }
.contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px }
.contact label{ display:grid; gap:6px }
.contact label.full{ grid-column:1/-1 }
input,textarea{ background:color-mix(in oklab,var(--surface-2) 86%,#000); color:var(--ink); border:1px solid color-mix(in oklab,var(--surface-2),#000 30%); border-radius:10px; padding:10px }
input:focus,textarea:focus{ outline:2px solid transparent; box-shadow:var(--ring) }
button.btn{ cursor:pointer }
.site-footer{ text-align:center; color:var(--muted); padding:24px 16px 36px }
.dock{ display:none }
.btn{ --_bg:var(--accent); --_fg:#0f1113; display:inline-block; color:var(--_fg); background:var(--_bg); padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid color-mix(in oklab,var(--accent),#000 18%); box-shadow:0 6px 18px color-mix(in oklab,var(--accent) 25%,transparent) }
.btn.ghost{ --_bg:color-mix(in oklab,var(--surface-2) 70%,#000); --_fg:var(--ink); box-shadow:none; border-color:color-mix(in oklab,var(--surface-2),#000 25%) }
.btn.small{ padding:8px 12px; font-weight:600 }
.to-top{ position:fixed; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%; border:1px solid color-mix(in oklab,var(--surface-2),#000 30%); background:var(--surface-2); color:var(--ink); cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 14px rgba(0,0,0,.25); z-index:30 }
@media (max-width: 980px){ .hero{ grid-template-columns:1fr } .hero-scene{ order:-1 } }
@media (max-width: 720px){ .plank{ width:64px } .wrap{ margin-left:64px } }