:root{
  --bg: #0d0d0d;
  --bg-alt: #161616;
  --text: #f2ede4;
  --text-dim: #cec7b9;
  --accent: #e0b877;
  --line: #333333;
  --max: 1100px;
}

* { box-sizing: border-box; margin:0; padding:0; }

html { scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  font-optical-sizing: auto;
  line-height: 1.65;
}

h1,h2,h3,h4 { font-family: 'Georgia', serif; font-weight: normal; letter-spacing: 0.03em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(13,13,13,0);
  transition: background .3s ease, box-shadow .3s ease;
}
header.solid{
  background: rgba(13,13,13,0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
header .wrap{
  display:flex; align-items:center; justify-content:center; gap: 60px;
  padding-top: 14px; padding-bottom: 14px;
}
header img.logo{ height: 58px; display:block; }
header .wrap > a{ display:flex; align-items:center; }
nav ul{ list-style:none; display:flex; align-items:center; gap: 28px; }
nav a{ display:inline-block; line-height:1; color: var(--text); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }
nav a:hover{ color: var(--accent); text-decoration:none; }
#navToggle{ display:none; background:none; border:1px solid var(--text); color:var(--text); font-size:1rem; padding:6px 10px; cursor:pointer; }

@media (max-width: 720px){
  nav ul{
    position:absolute; top: 100%; right: 0; left:0;
    background: rgba(13,13,13,0.97);
    flex-direction: column; align-items:center;
    gap: 0; max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  nav ul.open{ max-height: 300px; }
  nav ul li{ width:100%; text-align:center; border-top: 1px solid var(--line); }
  nav ul li a{ display:block; padding: 14px 0; }
  #navToggle{ display:inline-block; }
}

/* ---------- Parallax section base ---------- */
.parallax{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}
.parallax::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(10,10,10,0.62);
}
.parallax .wrap{ position:relative; z-index:2; }

@media (max-width: 900px){
  .parallax{ background-attachment: scroll; } /* smoother on mobile */
}

/* ---------- Hero ---------- */
#hero{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background-image: url('img/nw3-console-angle.jpg');
}
#hero .wrap{ padding-top: 100px; }
#hero img.hero-logo{ max-width: 320px; width: 70%; margin-bottom: 24px; }
#hero h1{ font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: 0.1em; text-transform: uppercase; }
#hero .tagline{ color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.95rem; margin-top: 10px; }
#hero p.lead{ max-width: 560px; margin: 26px auto 0; color: var(--text-dim); font-size: 1.15rem; }
.btn-row{ margin-top: 34px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; padding: 12px 30px; border: 1px solid var(--accent);
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
  transition: background .25s ease, color .25s ease;
}
.btn:hover{ background: var(--accent); color:#0d0d0d; text-decoration:none; }

/* ---------- Generic section ---------- */
section{ padding: 100px 0; }
section.alt{ background: var(--bg-alt); }
.section-title{ text-align:center; margin-bottom: 50px; }
.section-title h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: 0.08em; }
.section-title span{ display:block; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.section-title .rule{ width: 60px; height:2px; background: var(--accent); margin: 18px auto 0; }

/* ---------- About ---------- */
#about{ background-image: url('img/nw5-cables.jpg'); }
#about .wrap{ max-width: 820px; }
#about p{ margin-bottom: 22px; color: var(--text-dim); font-size: 1.08rem; }
#about p strong{ color: var(--text); }

/* ---------- Services ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 40px;
}
@media (max-width: 700px){ .services-grid{ grid-template-columns: 1fr; } }
.service-card{ background: var(--bg); border: 1px solid var(--line); padding: 30px; }
.service-card img{ width:100%; height: 180px; object-fit: cover; margin-bottom: 20px; filter: grayscale(30%); }
.service-card h3{ font-size: 1.2rem; margin-bottom: 12px; color: var(--accent); }
.service-card p{ color: var(--text-dim); font-size: 1.02rem; }

/* ---------- Gear ---------- */
#gear .intro{ max-width: 780px; margin: 0 auto 40px; text-align:center; color: var(--text-dim); font-size: 1.05rem; }
#gear .console-highlight{
  max-width: 780px; margin: 0 auto 40px; text-align:center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0;
}
#gear .console-highlight h3{ color: var(--accent); font-size:1.3rem; margin-bottom: 8px; }
#gear .console-highlight img{ width:100%; max-height: 320px; object-fit: cover; margin-bottom: 20px; }
details{
  max-width: 780px; margin: 0 auto 12px; background: var(--bg-alt);
  border: 1px solid var(--line);
}
details summary{
  cursor:pointer; padding: 16px 22px; list-style:none; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text);
  display:flex; justify-content:space-between; align-items:center;
}
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:"+"; color: var(--accent); font-size:1.3rem; }
details[open] summary::after{ content:"–"; }
details .gear-body{ padding: 0 22px 20px; color: var(--text-dim); font-size: 0.92rem; }
details .gear-body h4{ color: var(--accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 16px 0 6px; }
details .gear-body h4:first-child{ margin-top:0; }
details .gear-body div{ margin-bottom: 3px; }

/* ---------- Selected work ---------- */
.work-list{ max-width: 780px; margin: 0 auto; }
.work-item{ padding: 18px 0; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.work-item .who{ color: var(--text); font-size: 1.05rem; }
.work-item .role{ color: var(--accent); font-size: 0.85rem; text-align:right; }

/* ---------- re:motes plugin cards ---------- */
.plugin-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
  max-width: 780px; margin: 0 auto;
}
@media (max-width: 700px){ .plugin-grid{ grid-template-columns: 1fr; } }
.plugin-card{
  background: var(--bg-alt); border: 1px solid var(--line); padding: 26px;
  text-align:center;
}
.plugin-card h3{ color: var(--accent); font-size: 1.1rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.plugin-card p{ color: var(--text-dim); font-size: 0.9rem; }
.plugin-card .status{ display:inline-block; margin-top:12px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line); padding: 3px 10px; }
.plugin-card .dl-links{ margin-top:16px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }

.callout{
  max-width: 780px; margin: 0 auto 40px; text-align:center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0;
  color: var(--text-dim);
}

/* ---------- Contact ---------- */
#contact{ background-image: url('img/nw5-cables.jpg'); }
#contact .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; }
@media (max-width: 800px){ #contact .contact-grid{ grid-template-columns: 1fr; } }
#contact .contact-info div{ margin-bottom: 22px; }
#contact .contact-info h4{ color: var(--accent); text-transform:uppercase; font-size:0.8rem; letter-spacing:0.15em; margin-bottom:6px; }
#contact iframe{ width:100%; height: 260px; border:0; filter: grayscale(60%) contrast(1.1); }
.map-placeholder{
  width:100%; height:260px; border:1px solid var(--line); background: var(--bg-alt);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.map-placeholder .map-hint{ color: var(--text-dim); font-size: 0.8rem; }

footer{ background:#000; color: var(--text-dim); text-align:center; padding: 34px 0; font-size: 0.85rem; }
footer a{ color: var(--text-dim); }