/* Maison Du Bois — website (petrol-led treatment, committed) */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ---- committed colour roles: petrol leads, neutrals dominate, brass secondary ---- */
:root{
  --accent: var(--petrol);
  --accent-deep: #21383F;
  --accent-soft: var(--petrol-soft);
  --frame: var(--petrol);
  --footer-bg: #21383F;
  --cat-restauratie: var(--terracotta);
  --cat-maatwerk: var(--green);
  --cat-detail: var(--ochre);
}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.prose{max-width:680px;}

.eyebrow{font-family:var(--font-sans);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin:0;}
.serif{font-family:var(--font-display);font-weight:400;color:var(--ink);letter-spacing:-.01em;}
.italic{font-family:var(--font-display);font-style:italic;color:var(--ink);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:14px;border-radius:6px;padding:13px 24px;border:1px solid transparent;transition:all var(--dur-base) var(--ease-calm);white-space:nowrap;}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#3a3122;transform:translateY(-1px);}
.btn-primary:active{background:#211c13;transform:translateY(0);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-text{color:var(--accent);padding:6px 0;font-weight:600;}
.btn-text:hover{color:var(--accent-deep);}

/* brand double-rule divider */
.rule{display:flex;align-items:center;gap:12px;}
.rule .ln{flex:1;height:1px;background:var(--accent);opacity:.65;}
.rule .di{width:6px;height:6px;border:1px solid var(--accent);transform:rotate(45deg);}

/* arch frame */
.arch{border-radius:50% 50% 8px 8px / 22% 22% 8px 8px;overflow:hidden;}
.arch-line{position:relative;}
.arch-line::after{content:"";position:absolute;inset:0;border:1.5px solid var(--frame);border-radius:50% 50% 8px 8px / 22% 22% 8px 8px;pointer-events:none;}

/* reveal */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-calm),transform .6s var(--ease-calm);}
  .reveal.in{opacity:1;transform:none;}
}

section{padding:96px 0;}
.section-alt{background:var(--paper-deep);}
.section-petrol{background:var(--accent-deep);color:var(--paper);}

/* category chip */
.cat{font-family:var(--font-sans);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.14em;}

/* page header band (sub pages) */
.page-head{padding:140px 0 64px;border-bottom:1px solid var(--line);}

/* cards */
.proj{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm);transition:all .35s var(--ease-calm);}
.proj:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.proj .ph{aspect-ratio:4/3;overflow:hidden;background:var(--linen);}
.proj .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-calm);}
.proj:hover .ph img{transform:scale(1.04);}

/* inputs */
.field{display:flex;flex-direction:column;gap:7px;}
.field input,.field textarea{font-family:var(--font-sans);font-size:15px;padding:12px 14px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink);transition:all .2s;resize:none;width:100%;}
.field input:focus,.field textarea:focus{outline:3px solid var(--focus-ring);border-color:var(--accent);}