:root{
  --ink:#0f1a1c; --ink-2:#1d2b2e; --river:#2f7f86; --river-d:#1f5d63;
  --glacier:#cfe7e6; --snow:#f5f4ef; --paper:#ffffff; --steel:#8b9699;
  --ember:#e06a2c; --ember-d:#c1541b; --text:#1b2426; --muted:#5b6769;
  --r:14px; --max:1140px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font:17px/1.6 Barlow,system-ui,sans-serif;color:var(--text);background:var(--snow);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--river-d)}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif;line-height:1.05;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,6.5vw,4.8rem);font-weight:700;text-transform:uppercase}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;text-transform:uppercase;margin-bottom:1.2rem}
h3{font-size:1.25rem;text-transform:uppercase;letter-spacing:.08em;margin:1.6rem 0 .6rem;color:var(--muted)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{font:600 .8rem/1 Barlow,sans-serif;text-transform:uppercase;letter-spacing:.22em;color:var(--glacier);margin-bottom:1rem}
.eyebrow.dark{color:var(--river)}
.hero .eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.6)}

.btn{display:inline-block;background:var(--ember);color:#fff;text-decoration:none;font:600 1rem/1 Barlow,sans-serif;letter-spacing:.04em;padding:1rem 1.5rem;border-radius:999px;border:2px solid var(--ember);cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--ember-d);border-color:var(--ember-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{background:transparent;color:var(--ember-d)}
.btn-outline:hover{color:#fff}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;color:#fff;transition:background .25s,box-shadow .25s}
.nav.solid{background:rgba(15,26,28,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:700 1.25rem/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.brand svg{width:34px;height:34px;color:var(--glacier)}
.nav ul{display:flex;gap:1.6rem;align-items:center;list-style:none;padding:0}
.nav ul a:not(.btn){color:#fff;text-decoration:none;font-weight:500;opacity:.9}
.nav ul a:not(.btn):hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.2s}
.menu-btn span:first-child{top:15px}.menu-btn span:last-child{top:23px}
.menu-btn[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,28,.55) 0%,rgba(15,26,28,.15) 35%,rgba(15,26,28,.85) 100%)}
.hero-inner{position:relative;max-width:var(--max);margin:0 auto;padding:0 20px 11vh;width:100%}
.hero h1{max-width:13ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.lede{font-size:clamp(1.05rem,2vw,1.3rem);max-width:36ch;margin:1.2rem 0 2rem;opacity:.95}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}

.strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:#fff}
.strip div{padding:1.6rem 20px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.strip strong{display:block;font:700 1.9rem/1 "Barlow Condensed",sans-serif;color:var(--glacier)}
.strip span{font-size:.85rem;opacity:.7;text-transform:uppercase;letter-spacing:.1em}

.section{padding:96px 0}
.section.alt{background:var(--paper)}

/* product */
.product{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.product-media>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs button{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:none;opacity:.7}
.thumbs button.on,.thumbs button:hover{border-color:var(--river);opacity:1}
.thumbs img{aspect-ratio:1;object-fit:cover;width:100%}
.price{font:700 3rem/1 "Barlow Condensed",sans-serif;color:var(--ink);margin-bottom:.8rem}
.specs{border-top:1px solid #dcdfdc}
.specs div{display:flex;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid #dcdfdc}
.specs dt{color:var(--muted)}.specs dd{font-weight:600}
.includes{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem;margin-bottom:2rem}
.includes b{color:var(--river)}

.custom{margin-top:96px;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;background:var(--paper);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 50px -30px rgba(15,26,28,.35)}
.custom img{height:100%;min-height:320px;object-fit:cover;width:100%}
.custom>div{padding:40px 40px 40px 0}
.custom p{margin-bottom:1.6rem;max-width:48ch}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px;grid-auto-flow:dense}
.g{border-radius:10px;overflow:hidden;display:block}
.g.tall{grid-row:span 2}.g.wide{grid-column:span 2}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.g:hover img{transform:scale(1.04)}
.more{margin-top:1.5rem;text-align:center;font-weight:600}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about img{border-radius:var(--r);aspect-ratio:1;object-fit:cover}
.about p{margin-bottom:1rem;max-width:58ch}

/* order */
.order{background:var(--ink) url(/img/raft-dark-water.webp) center/cover;position:relative;color:#fff}
.order::before{content:"";position:absolute;inset:0;background:rgba(15,26,28,.88)}
.order-wrap{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.order-copy p{opacity:.85;max-width:40ch;margin-bottom:1rem}
.order a{color:var(--glacier)}
.direct{font-size:.95rem}
form{background:var(--paper);color:var(--text);border-radius:var(--r);padding:32px;display:grid;gap:16px}
form label{display:grid;gap:6px;align-content:end;font-weight:600;font-size:.92rem}
form small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;font-weight:400;padding:.75rem .9rem;border:1.5px solid #cfd5d3;border-radius:10px;background:#fbfbf9;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--river);box-shadow:0 0 0 3px rgba(47,127,134,.18)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seg{border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg legend{font-weight:600;font-size:.92rem;margin-bottom:6px}
.seg label{display:flex;align-items:center;gap:.5rem;border:1.5px solid #cfd5d3;border-radius:10px;padding:.8rem;cursor:pointer;font-weight:500}
.seg label:has(input:checked){border-color:var(--river);background:#eef6f5}
.seg input{width:auto;accent-color:var(--river)}
.hp{position:absolute;left:-9999px}
.form-status{font-weight:600;min-height:1.4em}
.form-status.ok{color:var(--river-d)}.form-status.err{color:var(--ember-d)}
form.is-custom .std-only{display:none}
.custom-hint{display:none}form.is-custom .custom-hint{display:inline}
input.bad{border-color:var(--ember)}

footer{background:#0a1214;color:rgba(255,255,255,.6);padding:28px 0;font-size:.9rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer a{color:rgba(255,255,255,.8)}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,10,11,.94);display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:90vh;max-width:100%;border-radius:8px}
.lightbox button{position:absolute;top:12px;right:18px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer}

@media (max-width:860px){
  .menu-btn{display:block}
  .nav ul{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(15,26,28,.97);padding:8px 20px 20px;display:none}
  .nav ul.open{display:flex}
  .nav ul li a:not(.btn){display:block;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav ul .btn{margin-top:1rem;text-align:center}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(2){border-right:0}
  .strip span{font-size:.72rem;letter-spacing:.06em}
  .strip div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
  .product,.about,.order-wrap{grid-template-columns:1fr;gap:32px}
  .custom{grid-template-columns:1fr;gap:0}
  .custom>div{padding:28px}
  .custom img{min-height:220px;max-height:280px}
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .g.wide{grid-column:span 2}
  .section{padding:72px 0}
  .about img{max-width:320px}
}
@media (max-width:520px){
  .row,.seg{grid-template-columns:1fr}
  form{padding:22px}
  .includes{grid-template-columns:1fr}
}