:root {
    --brown: #86353B;
    --lightbrown: #B67988;
    --darkbrown: #86353B;
    --yellow: #FFFF00;
    --lightyellow: #FFFCF3;
    --pink: #FFE4DA;
    --gray: #EFEFEF;
}
*, ::after, ::before {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: clamp(8px, 0.715vw, 12px); scroll-behavior: smooth;}
body {background: var(--lightyellow); color: var(--brown); font-family: "area-normal", sans-serif; line-height: 1.5; font-size: 1.35rem; font-weight: 400;}
img {max-width: 100%; display: block; width: 100%;}
body.page, body.page div.page { background: var(--pink);}
body.menuopen { overflow: hidden;}
div.page {max-width: 220rem; margin: 0 auto; position: relative; background: var(--lightyellow); overflow: hidden;}
section {padding: 6rem 7rem; position: relative; scroll-margin-top: 6rem; }
section.fullheight {min-height: 100vh;}

/* --------------- HEADERS --------------- */
h1, h2 {line-height: 1; font-weight: 800; font-size: 6.25rem; margin-bottom: 1em; }
h3 {line-height: 1.3; font-weight: 800;}

/* --------------- GENERAL --------------- */
/* FLOATING CIRCLE */
.circleholder {
    position: absolute;
    right: 7rem;
    z-index: 3;
}
.circle {
    border-radius: 50%;
    aspect-ratio: 1;
    width: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.15s ease-in-out;
    top: 0;
}
.circle.brown {background: var(--brown); color: white;}
.circle span {text-transform: uppercase; font-size: 3.5rem; text-align: center; line-height: 1.2; margin-top: 1rem; font-weight: 800;}
.circle span + span {font-weight: 400; text-transform: none; font-size: 2.25rem; line-height: 1.5; margin-top: 1.5rem; max-width: 6em;}
.circle:hover {
    transform: scale(1.09);
}


/* BUTTONS */
.button {
    background: var(--yellow); 
    color: var(--brown); 
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.75rem;
    padding: 1.3rem 2.5rem 1.5rem;
    position: relative;
    z-index: 2;
    margin-top: 0.75rem;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-weight: 800;
    font-family: "area-normal", sans-serif;
    border: 0;
    cursor: pointer;
}
.button:hover {
    box-shadow: 0.8rem 1rem 0px 0px var(--pink);
    transform: scale(1.05);
}

/* ALTERNATION STYLES */
div.page.white-red { --even-color: var(--lightyellow); --odd-color: var(--brown); --odd-text-color: var(--pink);   }
div.page.red-white { --even-color: var(--brown); --odd-color: var(--lightyellow); --even-text-color: var(--pink);   }
div.page.white-pink { --even-color: var(--lightyellow); --odd-color: var(--pink);  }
div.page.pink-white { --even-color: var(--pink); --odd-color: var(--lightyellow);  }
div.page.red-pink { --even-color: var(--brown); --odd-color: var(--pink); --even-text-color: var(--pink);  }


/* --------------- HEADER --------------- */
header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: calc(100% - 7rem - 14vh); 
    padding: 2rem 3.5rem; 
    z-index: 24;
    margin-left: calc(7rem + 14vh);
    display: flex;
    justify-content: flex-end;
    transition: padding-top 333ms
}    
header ul {display: flex; align-items: center; gap: 3rem; position: relative;  isolation: isolate;}
header ul::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 5rem; background: var(--pink); z-index: -1; opacity: 0; transition: opacity 333ms;}
body.page header ul::before {background: var(--pink);}
header ul li {list-style: none;}
header ul li a {color: var(--hover-color, var(--yellow)); text-decoration: none; text-transform: uppercase; font-weight: 800; }
header ul li:not(:last-child) a {-webkit-text-stroke: 0.06rem var(--hover-color, var(--yellow)); letter-spacing: 0.075rem; transition: color 333ms, -webkit-text-stroke 333ms;}
header ul li:last-child a { padding: 0.5rem 1.25rem 0.75rem;  font-size: 1.35rem; margin: 0; }
header ul li.active a {text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 0.2rem; }
header nav > a.mobile { display: none; padding: 0.5rem 1.25rem 0.75rem;  font-size: 1.75rem;  margin: 0; }
header .button:hover {transform: none; box-shadow: none;}

header.scrolled { padding-block: .75rem;}
header.scrolled ul::before { opacity: 1;}
header.scrolled ul li { --hover-color: var(--brown);}

button.burger { display: none; align-items: center; justify-content: center; background: var(--brown); width: 4rem; height: 4rem; box-shadow: none; border: none; padding: 0; margin: 0; position: relative;  cursor: pointer;  overflow: hidden;}
button.burger > span { position: absolute; width: 60%; height: 2px; border-radius: .5rem; background: var(--lightyellow);  transition: transform 333ms;}
button.burger > span:nth-of-type(1) { transform: translateY(-.5em); }
button.burger > span:nth-of-type(3) { transform: translateY(.5em); }

body.menuopen button.burger span:nth-of-type(1) {  transform: rotate(-45deg); }
body.menuopen button.burger span:nth-of-type(2) {  transform: rotate(-45deg) translateX(200%); }
body.menuopen button.burger span:nth-of-type(3) {  transform: rotate(-135deg); }

/* --------------- SECTIONS --------------- */

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
section.header {padding: 0;}
body.home section.header  h1 {position: absolute; bottom: 0; right: 0; background: var(--lightyellow); padding: 4rem 5rem 7rem; width: 13em; font-size: 4rem; line-height: 1.2; margin-bottom: 0; }
section.header .headerimage {margin: 0 0 22.5vh calc(7rem + 14vh); width: calc(100% - 7rem - 14vh); height: 77.5vh; object-fit: cover; object-position: 50% 70%;}
body:not(.home) section.header .headerimage {margin-left: 7rem; width: calc(100% - 7rem);}
section.header .logo {position: absolute; left: 7rem; width: 60vh; bottom: 5vh;}
section.header::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    height: 10rem;
    width: 100%;
    margin-left: calc(7rem + 14vh); 
    width: calc(100% - 7rem - 14vh);
    z-index: 1;
}
body:not(.home) section.header::before {margin-left: 7rem; width: calc(100% - 7rem);}

body:not(.home) section.header .logo { width: 20vh; left: calc(7rem - 4.5vh); top: 1.75rem; z-index: 2;  height: max-content;}
body:not(.home) section.header .headerimage { margin-bottom: calc(13rem * .75); }
body:not(.home) section.header h1 { position: absolute; font-size: 13rem; background: none; left: calc(7rem - 4.5vh); right: unset; padding: 0; color: var(--brown); bottom: 0; margin-bottom: 0; transform: translate(0, .33em);}
body:not(.home) section.header figure {  position: relative;  }


@media only screen and (max-aspect-ratio: 3/2.25) {
    body.home section.header .headerimage { height: calc(95vh - 13vw); margin-left: 21.5vw; width: calc(100% - 21.5vw); }
    body.home section.header::before { margin-left: 21.5vw; width: 100%; }
    body.home section.header .logo { width: 50.5vw; }
    body.home section.header h1 { width: calc(100vw - 50.5vw - 7rem - 2rem);  font-size: 3vw; padding: 3vw 3vw 5rem;}
}

@media only screen and (max-width: 768px) {
    body:not(.home) section.header .logo { top: 8rem;}
    body:not(.home) section.header h1 { font-size: 8rem;}
}

@media only screen and (max-width: 600px) {
    body.home section.header { min-height: 90rem;}
    body.home section.header::before { margin-left: 9rem; width: 100%; }
    body.home section.header .headerimage {  margin: 0 0 0 auto; width: calc(100% - 9rem);  height: 60vh; }
    body.home section.header .logo { width: 30rem; left: 1rem; bottom: unset; top: calc(60vh + 7.4rem); transform: translateY(-100%);}
    body.home section.header figure { display: flex; flex-direction: column; }
    body.home section.header h1 { width: auto; font-size: 3.59rem; padding: 0; position: relative; inset: unset; order: 2; background: none; margin: calc(7.4rem + 2rem) 2rem auto auto; }
}


/* =========================================================== */
/* ========================== TEXT =========================== */
/* =========================================================== */
section.text {font-size: 1.75rem; display: flex; flex-direction: column; justify-content: center;}
section.text.intro {font-size: 2.25rem;}
section.text h2 {max-width: 9.5em;}
section.text p {max-width: 25em; margin-bottom: 1.5em;}
section.text.intro p {max-width: 27em;}
section.text .triangleholder {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
section.text .triangle {
    height: 100%;
    aspect-ratio: 0.5;
}
section.text .triangle::before, section.text .triangle::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0; 
    right: 0;
    background: linear-gradient(to bottom right, transparent 50%, var(--brown) 50%);
    z-index: 0;
}
section.text .triangle::after {
    top: 50%;
    background: linear-gradient(to top right, transparent 50%, var(--brown) 50%);
}
section.text .triangle img {position: absolute; width: 35%; top: 50%; right: 15%; transform: translateY(-50%); z-index: 2;}


@media only screen and (max-width: 850px) {
    section.text { padding-inline: 4rem;}
    section.text h2 { max-width: 12em;}
    
    .circleholder { position: relative; margin: -5rem auto 12rem; right: unset;  display: flex; justify-content: center; }
    .circleholder .circle { width: 27rem; }
}

@media only screen and (max-width: 768px) {
    section.text { min-height: unset; }
    section.text .triangleholder {  height: auto; width: calc(100% + 8rem); position: relative; margin: 3rem 0rem -6rem -4rem;   order: 2;}
    section.text .triangle { aspect-ratio: 2; }
    section.text .triangle img { width: 22.5%; right: unset; left: 50%; transform: translate(-50%, 0%); }
    section.text .triangle::before, section.text .triangle::after { width: 50%; height: 100%;  right: unset; left: 0;  transform: scale(1, 1); }
    section.text .triangle::after { left: 50%; top: 0; transform: scale(-1,-1); }
    section.text .textblock { max-width: 40em; }
 
    section.text .overflower { overflow: auto;  width: calc(100% + 8rem);  padding: 2rem 4rem; margin: 0 -2rem 6rem -4rem;}
    section.text .overflower { -ms-overflow-style: none; scrollbar-width: none; } section.text .overflower::-webkit-scrollbar { display: none; }
    section.text .table table { margin-bottom: 0; }
    section.text .table td a { min-width: 6em; display: inline-block; }
}


/* =========================================================== */
/* ========================== IMAGE ========================== */
/* =========================================================== */
section.image {padding: 0;}
section.image h2 {
    position: absolute; 
    max-width: 8em;
    top: 47%; 
    transform: translateY(-53%);
    left: 7rem;  
    width: 20em; 
    font-size: clamp(2rem, 12.5vw, 15vh); 
    z-index: 2;
    color: var(--yellow);
    margin: 0;
}
section.image img {height: 100vh; object-fit: cover; object-position: 50% 50%;}


@media only screen and (max-width: 768px) {
    section.image h2 { left: 2rem; }
}


/* =========================================================== */
/* ======================== IMAGETEXT ======================== */
/* =========================================================== */
section.imagetext {padding: 0; display: flex; align-items: stretch; background: var(--odd-color); }
section.imagetext > * {width: 50%;}
section.imagetext > img {object-fit: cover; object-position: 50% 50%;}
section.imagetext > div {
    padding: 8rem 0; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    font-size: 1.75rem;
}
section.imagetext > div > div {display: flex; flex-direction: column;}
section.imagetext > div > div > * {margin-inline: 7rem;}
section.imagetext > div > div > h2 {max-width: 8em;}
section.imagetext > div > div > ul { padding-left: 1em;  max-width: 28em;}
section.imagetext > div > div > ul li { margin-bottom: .2em;}
section.imagetext > div > div > ul li a { color: inherit;}
section.imagetext > div > div > ul li a:not(:hover) { text-decoration: none;}
section.imagetext > div > div > p {max-width: 28em;}
section.imagetext > div > div > p:not(:last-child) { margin-bottom: 1.2em;}
section.imagetext.icons > div {background: var(--lightyellow); color: var(--brown);}
section.imagetext.icons > div:first-child {background: var(--brown);}
section.imagetext.icons > div:first-child img {max-width: clamp(0px, 70%, 45rem);}

section.imagetext:nth-of-type(2n) { flex-direction: row-reverse; background: var(--even-color); color: var(--even-text-color, inherit);  }
section.imagetext:nth-of-type(2n + 1) { color: var(--odd-text-color, inherit);  }

@media only screen and (min-width: 768px) {
    section.faq + section.imagetext { flex-direction: row;}
}

@media only screen and (max-width: 768px) {
    section.imagetext { min-height: unset;}
    section.imagetext:is(:nth-of-type(2n+1), :nth-of-type(2n+2)) { flex-direction: column-reverse; }
    section.imagetext > *,
    section.imagetext > img { width: 100%; }
    section.imagetext > div { margin-inline: auto; }
    section.imagetext > div > div { width: calc(100% - 8rem);  }
    section.imagetext > div > div > * { margin-inline: 0; }
}

/* =========================================================== */
/* =========================== CTA =========================== */
/* =========================================================== */
section.cta {padding: 0; font-size: 1.6rem;}
section.cta.red-yellow {   background: var(--pink);         --block-background: var(--brown); }
section.cta.red-pink {     background: var(--lightyellow);  --block-background: var(--brown); }
section.cta.red-white {    background: var(--pink);         --block-background: var(--brown); }
section.cta.yellow-pink {  background: var(--lightyellow);  --block-background: var(--yellow); --text-color: var(--brown);  }

section.cta .textblock {
    margin-left: 20rem;
    background: var(--block-background, var(--brown));
    color: var(--text-color, var(--pink));
    padding: 6rem 7rem 6rem calc(20rem + 14vw);
}
section.cta .textblock > div {max-width: 43em;}
section.cta .textblock > div > form {margin-block: 2.5rem 10rem;}
section.cta .textblock > div > form > div {display: flex; flex-direction: column; margin-bottom: 1.5rem; gap: 0.75rem;}
section.cta .textblock > div > form > div input {
    font-family: "area-normal", sans-serif;
    padding: 0.5rem 1rem 0.75rem;
    border: 1px solid var(--text-color, var(--lightbrown));
    background: transparent;
    color: var(--pink);
    font-size: 1.6rem;
}
section.cta .textblock > div > form > div .button:hover {box-shadow: 0.8rem 1rem 0px 0px #63272b}

@media (max-width: 100rem) {
    section.cta .textblock {padding-left: calc(20rem + 7rem);}
}

@media only screen and (max-width: 768px) {
    section.cta .textblock { padding-left: clamp(4rem, 11vw, 10rem);  margin-left: clamp(4rem, 11vw, 10rem); }
}



/* =========================================================== */
/* ========================== FIRST ========================== */
/* =========================================================== */
section.first { width: calc(100% - 7rem); margin-left: 7rem; padding-top: 0; padding-left: 0; font-size: 2.3rem; padding-bottom: 7rem;}
section.first h2 {max-width: 11em; margin-top: 2em;}
section.first p { break-inside: avoid-column; line-height: 130%;} 
section.first p ~ p { font-weight: 300;}
section.first p:last-of-type:has(a:only-child) {margin-top: 2rem; }


@media only screen and (max-width: 768px) {
    section.first { column-count: 1; margin-left: 4rem; padding-right: 0; }
    section.first p:not(:last-of-type) { margin-bottom: 1.4em;}
}


/* =========================================================== */
/* ======================== PLANNING ========================= */
/* =========================================================== */
figure.planning { position: relative;  min-width: 70rem;}
figure.planning::before,figure.planning::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background: var(--brown); opacity: 1; transform: translateY(-50%);   }
figure.planning::after { width: calc(var(--perc) * 100%); background: var(--brown); height: 1px; } /* Deze aanpassen voor gele lijn binnenin */
figure.planning > ul { list-style-type: none; display: grid; grid-template-columns: repeat(4, 1fr); }
figure.planning > ul::after,figure.planning > ul::before { content: ""; position: absolute; right: 0; width: 1rem; background: var(--brown); height: 3px;  top: 50%; transform: translateY(-50%) rotate(var(--r, -45deg)) translateX(10%);   transform-origin: right; border-radius: 1rem;}
figure.planning > ul::after { --r: 45deg; }

figure.planning > ul > li {  text-align: center; display: flex; flex-direction: column; align-items: center;  position: relative;  }
figure.planning > ul > li h3 { max-width: 6em; margin: 0 auto;  font-weight: 600;}
figure.planning > ul > li span {width: 6.9rem; height: 6.9rem; display: block; border-radius: 50%; background: var(--brown); margin: 7rem auto 7rem; }
figure.planning > ul > li.geweest span { background: var(--brown);  border: 3rem solid var(--brown);} /* Deze aanpassen voor gele lijn binnenin */
figure.planning > ul > li time { font-weight: 600;}

figure.planning > span { position: absolute; left: calc(var(--perc, 0) * 100%); font-size: 1.1rem; background: var(--yellow); width: auto;  height: auto; top: 51%; transform: translate(-50%, calc(-100% - 1rem)); font-weight: 800;  padding: .2em .5em .3em; border-radius: 0;}
figure.planning > span::before { content: ""; width: .7em; height: .7em; background: var(--yellow); position: absolute; left: 50%; transform: translate(-50%, 50%) rotate(45deg); bottom: 0;  }


/* =========================================================== */
/* =========================== FAQ =========================== */
/* =========================================================== */
section.faq { background: var(--brown); color: var(--pink); padding-bottom: 9rem; }
ul.faq { list-style: none; padding: 0; width: 100%; }
ul.faq button { color: inherit; background: inherit; border: inherit;  font-size: inherit; display: block; line-height: inherit; width: 100%; text-align: left; font-weight: 500; font-variation-settings: "wght" 500;}
ul.faq > li { border-bottom: 1px solid var(--pink); list-style: none;}
ul.faq > li button { padding: 1.5rem 0 1.5rem; display: flex; align-items: center; cursor: pointer;  transition: padding 333ms, color 333ms; font-family: "area-normal", sans-serif; font-weight: 800;}
ul.faq > li button span { width: 2rem; height: 2rem; margin-right: .5rem;  border-radius: .25rem;  display: flex; align-items: center; justify-content: center;  transition: background 333ms;}
ul.faq > li button span::before,ul.faq > li button span::after { content: ""; position: absolute;  width: .9rem; height: 2px; border-radius: 1rem; background: currentColor; transform: rotate(var(--r, 0deg));  transition: transform 333ms, color 333ms;}
ul.faq > li button span::before { --r: -90deg;}
ul.faq > li button:hover { color: var(--pink); }

ul.faq > li > div { transition: padding 333ms, max-height 333ms; overflow: hidden;  width: calc(100% - 3rem); padding-left: 2.5rem; }
ul.faq > li > div[aria-hidden=true] { max-height: 0px; }

/* Opened */
ul.faq > li > div[aria-hidden=false] { padding-bottom: 2.5rem;  max-height: var(--height, unset); }
ul.faq > li button[aria-expanded=true] { padding-bottom: 1rem;}
ul.faq > li button[aria-expanded=true] span::before { --r: 0deg; }



/* =========================================================== */
/* =========================== MAP =========================== */
/* =========================================================== */
section.map { height: 60rem; padding: 0; }
section.map #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}

/* Leaflet overrides */
.leaflet-control-attribution { display: none; }
.leaflet-pane.leaflet-tile-pane { filter: grayscale(1); }
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar.leaflet-bar { border: none;}
.leaflet-bar.leaflet-bar a span { margin: 0px 1px 5px 0px;}
.leaflet-touch .leaflet-bar a { border: none;  line-height: 28px !important; background: var(--pink); display: flex; align-items: center; justify-content: center;  transition: color 250ms, background 250ms;}
.leaflet-touch .leaflet-bar a:hover { background: var(--brown); color: var(--lightyellow);}


/* --------------- FOOTER --------------- */
footer.pink { --own-color: var(--pink);  }
footer.white { --own-color: var(--lightyellow); }
footer {
    --own-color: var(--yellow);
    background: var(--own-color, var(--yellow)); 
    padding: 6rem 7rem; 
    position: relative;
}
footer > div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8rem 6rem;
    font-size: 1.75rem;
    max-width: 140rem;
    margin-inline: auto;
}
footer::before {
    content: "Onze partners";
    background:  var(--own-color, var(--yellow));
    position: absolute;
    transform: translateY(-100%);
    top: 0;
    width: 40rem;
    aspect-ratio: 1;
    left: 0;
    text-align: center;
    clip-path: polygon(0% 25rem, 50% 0%, 100% 25rem, 100% 100%, 0% 100%);
    line-height: 1; 
    font-weight: 800; 
    font-size: 6.25rem;
    padding-top: 20rem;
    padding-inline: 5rem;
}

footer > div h3 {text-transform: uppercase; font-weight: 600; height: 5rem;}
footer > div img {width: auto; height: 10rem; margin-bottom: 2rem;}
@media (max-width: 60rem) {
    footer > div {grid-template-columns: 1fr 1fr;}
}

@media only screen and (max-width: 768px) {
    footer { padding: 6rem 4rem; }
    footer > div { grid-template-columns: 1fr;}
    footer > div h3 { height: auto; margin-bottom: 2rem; }
    footer::before {  top: 1px; width: clamp(8rem, 22vw, 20rem); padding-top: clamp(4rem, 11vw, 10rem); padding-inline: 0; clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 100% 100%, 0% 100%);  font-size: 4vw;}
}


/* --------------- TABLE --------------- */
table {border-collapse: collapse; border: 1px solid var(--brown); margin-bottom: 6rem;}
table th, table td {padding: 0.5rem 1.25rem 0.75rem; text-align: left; border-bottom: 1px solid var(--lightgray); border: 1px solid var(--brown);}
table th, table td:first-child {font-weight: 800;}
table td a {color: var(--brown);}
table td a::after {
    content: "›";
    margin-left: 0.5rem;
    display: inline-block;
}




/* --------------- MEDIA QUERIES --------------- */
:root {
    --marginleft: 25vh;
    --marginright: 25vh;
}
body.extramargin.home section.header .headerimage {margin-left: calc(var(--marginleft) + 14vh); width: calc(100% - var(--marginleft) - 14vh);}
body.extramargin.home section.header .logo {left: var(--marginleft);}
body.extramargin section.header::before {
    margin-left: calc(var(--marginleft) + 14vh);
    width: calc(100% - var(--marginleft) - 14vh);
}
body.extramargin section.text {padding-left: var(--marginleft); padding-right: var(--marginright);}
body.extramargin section.image h2 {left: calc(1.5 * var(--marginleft));}
body.extramargin .circleholder {right: calc(5rem + var(--marginright));}
body.extramargin section.header h1 {border-right: var(--marginright) solid var(--lightyellow); width: calc(13em + var(--marginright)); padding-bottom: calc(7rem + 3vh);}
body.extramargin header {padding-right: calc(5rem + var(--marginright));}
body.extramargin .triangleholder {border-right: calc(1 * var(--marginright)) solid var(--brown);}
body.extramargin .circleholder {margin-right: calc(0.5 * var(--marginright));}
body.extramargin .triangleholder + .textblock {position: relative; left: calc(0.5 * var(--marginleft));}
body.extramargin .circleholder + .textblock {position: relative;}
body.extramargin:not(.home) section.header h1 {border-right: none; padding: 0; }
body.extramargin:not(.home) section.first { width: calc(100% - var(--marginleft)); margin-left: var(--marginleft);}
body.extramargin:not(.home) section.header::before {margin-left: var(--marginleft); width: calc(100% - var(--marginleft));}
body.extramargin:not(.home) section.header .headerimage {margin-left: var(--marginleft); width: calc(100% - var(--marginleft));}
body.extramargin:not(.home) section.header .logo {left: calc(var(--marginleft) - 4.5vh);}
body.extramargin:not(.home) section.header h1 {left: calc(var(--marginleft) - 4.5vh);}

@media only screen and (max-width: 768px) {
    h1,h2 { font-size: 3.59rem; }
    
    header { width: 100%; margin: 0;   padding: 1.25rem 2rem;}
    header.scrolled { padding-block: 1.25rem; }
    header nav {display: flex; align-items: center; width: 100%;  }
    header nav ul { position: fixed; left: 0; top: calc(2rem + 4rem);  height: calc(100vh - 2rem - 4rem - 1rem); height: calc(100dvh - 2rem - 4rem - 1rem); background: var(--lightyellow); transition: transform 333ms, background 333ms; width: calc(100% - 4rem);  margin: 0 auto; right: 0;  flex-direction: column; align-items: flex-start; padding: 4rem; font-size: 2.5rem;  transform: translateX(calc(-100% - 2rem));  }
    header nav ul li a { --hover-color: var(--brown); color: var(--lightyellow); }
    header nav ul li:last-of-type { margin-top: auto;  display: flex;justify-content: center; width: 100%; }
    header nav ul a.button { font-size: 2.25rem; padding: 0.5em 1.25em 0.75em;}
    header nav ul::before { display: none; }
    header nav > a.mobile { display: inline-block; }
    button.burger { display: flex;  flex-shrink: 0;}

    body.menuopen header nav ul { transform: none; background: var(--brown);}
}

@media only screen and (max-width: 320px) {
    html { font-size: 2.5vw;}
}