/* Atelier Livi — stylesheet
   Kleuren en typografie staan bovenaan in :root, daar pas je alles centraal aan. */

:root{
  --paper:#e9e6df;
  --shell:#f5f2ed;
  --ink:#5a5045;
  --muted:#7d7166;
  --taupe:#b4a99a;
  --line:#c7beb5;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --pad:clamp(1.25rem,4vw,4.5rem);
}

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

body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin-top:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1rem}
.skip:focus{left:0}

/* ---------- header ---------- */
.siteHeader{position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem var(--pad);color:#fff}
.brandLogo{display:block;width:5.5rem;aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none}
.brandLogo img{width:320%;max-width:none;height:320%;object-fit:cover;transform:translate(-34.4%,-34.4%)}
.siteHeader nav{display:flex;gap:2rem;align-items:center;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.siteHeader nav a{text-decoration:none;white-space:nowrap}
.siteHeader nav a:hover{text-decoration:underline;text-underline-offset:.35em}
.navContact{border:1px solid;padding:.55rem .9rem}
.navContact:hover{background:#fff;color:var(--ink);text-decoration:none!important}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;color:#fff;display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,29,24,.68),rgba(35,29,24,.08)),linear-gradient(0deg,rgba(35,29,24,.3),transparent 50%)}
.heroCopy{position:relative;z-index:1;padding:9rem var(--pad) 6rem;max-width:54rem}
.hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:clamp(3.4rem,8vw,8rem);line-height:.88;margin-bottom:1.5rem}
.heroCopy p{max-width:36rem;font-size:1.15rem}
.textLink{display:inline-block;margin-top:1rem;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;text-decoration:none;border-bottom:1px solid;padding-bottom:.2rem}

/* ---------- algemene secties ---------- */
.section{padding:clamp(5rem,10vw,10rem) var(--pad)}
.index,.type{text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;color:var(--muted)}
.index{margin-bottom:2rem}
h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.04em}
h2{font-size:clamp(2.6rem,6vw,6.3rem);line-height:.94;margin-bottom:0}
h2 em{color:#8f8074;font-weight:400}
.lead{font:400 clamp(1.35rem,2.5vw,2.2rem)/1.3 var(--serif)}
.twoCol,.sectionHead{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(3rem,8vw,9rem)}
.sectionHead{align-items:end;margin-bottom:7rem}

/* ---------- projecten ---------- */
.projects{background:var(--taupe)}
.projects .index{color:#4d443a}
.projectList article{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;align-items:center;margin-top:7rem}
.projectList article:first-child{margin-top:0}
.projectList img{width:100%;max-height:750px;object-fit:cover}
.projectList h3{font-size:clamp(2.2rem,5vw,5rem);line-height:.95;margin:.7rem 0 1rem}

/* ---------- diensten ---------- */
.services{background:var(--shell)}
.serviceList{border-top:1px solid var(--line)}
.serviceList article{display:grid;grid-template-columns:4rem .7fr 1fr;gap:2rem;padding:1.8rem 0;border-bottom:1px solid var(--line)}
.serviceList h3{font-size:2rem;margin:0}
.serviceList p{margin:0}

/* ---------- over ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw;align-items:center}
.aboutImage{aspect-ratio:3/4;overflow:hidden}
.aboutImage img{width:100%;height:100%;object-fit:cover}

/* ---------- contact ---------- */
.contact{background:var(--shell)}
.mail{display:block;font:400 clamp(1.25rem,2.5vw,2.2rem)/1.3 var(--serif);padding:1rem 0;border-bottom:1px solid;text-decoration:none;overflow-wrap:anywhere}
.phone{display:inline-block;margin-top:1rem;text-decoration:none}

/* ---------- footer ---------- */
footer{padding:2rem var(--pad);display:grid;grid-template-columns:1fr auto auto auto;align-items:end;gap:2rem;background:var(--ink);color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
footer p{margin:0}

/* ---------- juridische pagina ---------- */
.legal{max-width:900px;margin:auto;padding:clamp(2rem,6vw,5rem) var(--pad);background:var(--shell);min-height:100vh}
.legal .back{display:inline-block;margin-bottom:3rem}
.legal header{border-bottom:1px solid var(--line);padding-bottom:2rem}
.legal header>p:first-child{text-transform:uppercase;letter-spacing:.15em;font-size:.75rem}
.legal h1{font:400 clamp(2.8rem,8vw,7rem)/.9 var(--serif);margin:.5rem 0 1rem;letter-spacing:-.04em}
.legal nav{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;padding:1.5rem 0 0}
.legal section{padding:4rem 0;border-bottom:1px solid var(--line);scroll-margin-top:2rem}
.legal section h2{font-size:clamp(2rem,5vw,4rem);margin-bottom:2rem}
.legal section h3{font:600 1.35rem/1.3 var(--serif);margin:2rem 0 .5rem;letter-spacing:0}
.legal section p{max-width:760px}
.legalNote{margin-top:3rem;padding:1.2rem;border:1px solid var(--taupe);background:var(--paper);font-size:.9rem}

/* ---------- mobiel ---------- */
@media (max-width:800px){
  .siteHeader{flex-wrap:wrap}
  .siteHeader nav{gap:.9rem;font-size:.68rem;flex-wrap:wrap;justify-content:flex-end}
  .brandLogo{width:4.4rem}
  .hero{min-height:90svh}
  .heroShade{background:linear-gradient(0deg,rgba(35,29,24,.72),rgba(35,29,24,.08) 80%)}
  .heroCopy{padding:7rem var(--pad) 3.5rem}
  .twoCol,.sectionHead,.projectList article,.about{grid-template-columns:1fr}
  .sectionHead{gap:2rem;margin-bottom:4rem}
  .projectList article{gap:2rem;margin-top:5rem}
  .serviceList article{grid-template-columns:2.5rem 1fr}
  .serviceList p{grid-column:2}
  footer{grid-template-columns:1fr;gap:.7rem}
}
@media (max-width:420px){
  .siteHeader nav{gap:.7rem;font-size:.62rem}
  .navContact{padding:.45rem .7rem}
}