/* ============================================================
   REKLEINERY HOME RENOVATIONS — design system
   Palette from the work itself: charred timber, cedar, cream trim.
   Signature: drafting-sheet vernacular (title blocks, dim labels).
   ============================================================ */

:root{
  --ink:#12140f;          /* charred timber */
  --panel:#1c1e19;        /* board black */
  --panel-2:#24261f;
  --cedar:#c48b4f;        /* raised-bed cedar */
  --cedar-deep:#a06b33;
  --trim:#f3f0e7;         /* cream trim white */
  --trim-dim:#e6e1d2;
  --field:#8a8578;        /* weathered lap gray */
  --line-d:rgba(243,240,231,.16);
  --line-l:rgba(18,20,15,.14);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  font-family:"Archivo",system-ui,sans-serif;
  background:var(--trim);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
}

h1,h2,h3,.display{
  font-family:"Big Shoulders Display","Archivo",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
}
.mono{font-family:"IBM Plex Mono",monospace}

a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- dimension-line section label (signature) ---------- */
.dim{
  display:flex;align-items:center;gap:14px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--field);
  margin-bottom:28px;
}
.dim::before,.dim::after{content:"";height:1px;background:currentColor;opacity:.5;flex:0 0 34px;position:relative}
.dim::before{box-shadow:-1px -3px 0 0 currentColor,-1px 3px 0 0 currentColor}
.dim::after{box-shadow:1px -3px 0 0 currentColor,1px 3px 0 0 currentColor}
.dim--wide::after{flex:1}
.on-dark .dim{color:var(--cedar)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--line-d);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;color:var(--trim);
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.brand b{
  font-family:"Big Shoulders Display",sans-serif;
  font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.brand span{
  font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--cedar);margin-top:4px;
}
nav.links{display:flex;gap:30px}
nav.links a{
  text-decoration:none;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--trim-dim);
  padding:6px 0;border-bottom:2px solid transparent;
}
nav.links a:hover,nav.links a[aria-current]{color:var(--trim);border-bottom-color:var(--cedar)}
.nav .cta{
  background:var(--cedar);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 20px;
}
.nav .cta:hover{background:var(--trim)}
.menu-btn{display:none;background:none;border:1px solid var(--line-d);color:var(--trim);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.2em;padding:10px 14px;cursor:pointer}
@media(max-width:920px){
  nav.links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--ink);flex-direction:column;gap:0;padding:10px 24px 22px;border-bottom:1px solid var(--line-d)}
  nav.links.open{display:flex}
  nav.links a{padding:13px 0;border-bottom:1px solid var(--line-d)}
  .menu-btn{display:block}
  .nav .cta{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--trim);overflow:hidden;
}
.hero .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 65%;
  opacity:.38;filter:saturate(.72) contrast(1.05);
}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,15,.25),rgba(18,20,15,.92) 78%)}
.hero .inner{
  position:relative;max-width:var(--maxw);margin:0 auto;padding:110px 24px 150px;
}
.hero h1{font-size:clamp(46px,7.2vw,96px);max-width:13ch}
.hero h1 em{font-style:normal;color:var(--cedar)}
.hero p.lede{max-width:52ch;margin-top:26px;font-size:19px;color:var(--trim-dim)}
.hero .actions{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap}

.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 30px;border:1px solid transparent;
}
.btn-solid{background:var(--cedar);color:var(--ink)}
.btn-solid:hover{background:var(--trim)}
.btn-ghost{border-color:var(--line-d);color:var(--trim)}
.btn-ghost:hover{border-color:var(--cedar);color:var(--cedar)}
.on-light .btn-ghost{border-color:var(--line-l);color:var(--ink)}
.on-light .btn-ghost:hover{border-color:var(--cedar-deep);color:var(--cedar-deep)}

/* drafting title block, hero corner */
.titleblock{
  position:absolute;right:24px;bottom:0;z-index:2;
  display:grid;grid-template-columns:auto auto;
  border:1px solid var(--line-d);border-bottom:none;background:rgba(18,20,15,.85);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
}
.titleblock div{padding:8px 14px;border-bottom:1px solid var(--line-d)}
.titleblock div:nth-child(odd){color:var(--field);border-right:1px solid var(--line-d);text-transform:uppercase}
.titleblock div:nth-child(even){color:var(--trim)}
@media(max-width:720px){.titleblock{display:none}}

/* ---------- sections ---------- */
section{padding:96px 0}
.on-dark{background:var(--panel);color:var(--trim)}
.on-dark h2,.on-dark h3{color:var(--trim)}
h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:18px}
.sub{max-width:60ch;color:var(--field);font-size:18px}
.on-dark .sub{color:var(--trim-dim);opacity:.85}

/* batten rhythm divider */
.battens{height:64px;background:var(--ink);display:flex;justify-content:center;gap:clamp(28px,6vw,80px);align-items:stretch}
.battens i{width:3px;background:var(--panel-2)}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);margin-top:54px}
.on-dark .cards{background:var(--line-d);border-color:var(--line-d)}
.card{background:var(--trim);padding:38px 32px 42px;display:flex;flex-direction:column;gap:14px}
.on-dark .card{background:var(--panel)}
.card .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cedar-deep)}
.on-dark .card .tag{color:var(--cedar)}
.card h3{font-size:27px}
.card p{font-size:15.5px;color:#4c4a41}
.on-dark .card p{color:var(--trim-dim);opacity:.85}
.card a.more{margin-top:auto;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--cedar-deep)}
.on-dark .card a.more{color:var(--cedar)}
.card a.more::after{content:" →"}
@media(max-width:920px){.cards{grid-template-columns:1fr}}

/* ---------- spec/process rows ---------- */
.spec-rows{margin-top:50px;border-top:1px solid var(--line-l)}
.on-dark .spec-rows{border-color:var(--line-d)}
.spec-row{
  display:grid;grid-template-columns:150px 1fr 2fr;gap:26px;
  padding:30px 0;border-bottom:1px solid var(--line-l);align-items:baseline;
}
.on-dark .spec-row{border-color:var(--line-d)}
.spec-row .no{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.2em;color:var(--cedar-deep)}
.on-dark .spec-row .no{color:var(--cedar)}
.spec-row h3{font-size:24px}
.spec-row p{font-size:15.5px;color:#4c4a41}
.on-dark .spec-row p{color:var(--trim-dim);opacity:.85}
@media(max-width:820px){.spec-row{grid-template-columns:1fr;gap:8px;padding:26px 0}}

/* ---------- gallery ---------- */
.g-hero{margin-top:50px}
.g-hero img{width:100%;height:auto}
.g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px}
.g-grid figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
figcaption{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--field);padding-top:10px}
@media(max-width:720px){.g-grid{grid-template-columns:1fr}}

/* ---------- warranty band ---------- */
.band{
  display:flex;gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:56px;flex-wrap:wrap;
}
.band>div{flex:1 1 200px;background:var(--panel);padding:30px 26px;text-align:center}
.band b{display:block;font-family:"Big Shoulders Display",sans-serif;font-size:56px;font-weight:800;color:var(--cedar);line-height:1}
.band span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--trim-dim)}

/* ---------- forms ---------- */
form.assess{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px}
form.assess .full{grid-column:1/-1}
label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--field);margin-bottom:8px}
input,select,textarea{
  width:100%;padding:15px 16px;font-family:"Archivo",sans-serif;font-size:16px;
  background:#fff;border:1px solid var(--line-l);color:var(--ink);border-radius:0;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cedar-deep);outline-offset:1px;border-color:var(--cedar-deep)}
textarea{min-height:130px;resize:vertical}
form.assess button{grid-column:1/-1;justify-self:start;cursor:pointer;font-family:"Archivo",sans-serif}
@media(max-width:720px){form.assess{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--trim-dim);padding:70px 0 44px;border-top:3px solid var(--cedar)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px}
.f-grid h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cedar);margin-bottom:16px}
.f-grid a{color:var(--trim-dim);text-decoration:none;display:block;padding:5px 0;font-size:15px}
.f-grid a:hover{color:var(--trim)}
.f-brand b{font-family:"Big Shoulders Display",sans-serif;font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--trim);display:block}
.f-brand p{font-size:14.5px;margin-top:14px;max-width:38ch;opacity:.8}
.legal{max-width:var(--maxw);margin:54px auto 0;padding:26px 24px 0;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--field)}
@media(max-width:820px){.f-grid{grid-template-columns:1fr}}

/* utility */
.mt-lg{margin-top:56px}
.center{text-align:center}
.measure{max-width:62ch}
.g-hero--render figure{max-width:880px;margin:0 auto;background:#f5f7f6}
.g-grid--render figure img{object-fit:contain;aspect-ratio:1/1;background:#f5f7f6}
.legend{display:flex;gap:22px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:14px;justify-content:center}
.legend i{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px}