@charset "UTF-8";
/*
   css-id2.css
   The site's one live stylesheet — every top-level page and every
   portfolio/*.html page loads this (css-id.css is superseded, kept only
   for reference).

   This is a refactor of css-id.css that:
   - uses CSS custom properties instead of repeated color/font literals
   - drops vendor prefixes no longer required by current browsers
   - adds a responsive layer (tablet/mobile breakpoints + a CSS-only
     hamburger menu) at the bottom of the file

   The desktop layout itself (fixed 1200px width, floats, absolute
   positioning for overlapping photos/icons) is left untouched on purpose:
   every pixel value below is copied 1:1 from css-id.css so the rendered
   page matches the original exactly above the tablet breakpoint. Swapping
   this fixed-width design for flexbox/grid would risk shifting the
   hand-tuned overlaps by a few pixels, so it's out of scope for this pass.
*/

:root {
	--color-orange: #f18700;
	--color-teal: #0089a6;
	--color-grey: #7a7a7a;
	--color-dark-grey: #404040;
	--color-light-grey: #e5e5e5;
	--color-white: #fff;
	--color-black: #000;

	--font-display: 'arteria-std-compress', sans-serif;
	--font-body: 'aktiv-grotesk', Helvetica, sans-serif;
	--font-body-condensed: 'Aktiv Grotesk Cd', Helvetica, sans-serif;
	--font-nav: 'aktiv-grotesk-condensed', sans-serif;
	--font-script: 'Shadows Into Light Two', cursive;

	/* single source of truth for the hero's fixed height so header's
	   margin-bottom (its flow-spacer for the absolutely positioned hero)
	   always stays in sync with it, at every breakpoint */
	--hero-height: 896px;
}

*, *::before, *::after {
	box-sizing: border-box;
}
html {
	font-size: 100%;
}
/*
   Kept byte-for-byte: the literal "." content (not "") is load-bearing.
   header has no other in-flow text, so this pseudo-element is what gives
   it an internal line box; without one, the inline-block's baseline
   calculation changes and every section below shifts up by the font's
   descender (~4px). Swapping this for an empty-string clearfix looked
   like a safe cleanup but silently broke the layout, so it stays as-is.
*/
.clearfix::after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
body {
	font-family: var(--font-body);
	line-height: 1.2;
	font-size: 1rem;
}

/* Typography */
h1 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-orange);
	text-align: center;
	text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.35);
	font-size: 10rem;
}
h2 {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	font-size: 4rem;
	line-height: 1.5;
	text-align: left;
}
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 3.5rem;
	text-align: center;
	color: var(--color-white);
	letter-spacing: 1px;
	text-shadow: 2.121px 2.121px 1px rgba(0, 0, 0, 0.16);
}
h4 {
	font-size: 1rem;
	font-family: var(--font-body-condensed);
	color: var(--color-orange);
	text-align: left;
	margin-top: 30px;
}
em {
	color: var(--color-teal);
}
.dienst-h3 {
	color: var(--color-orange);
	text-shadow: none;
	font-size: 2rem;
	text-align: left;
	margin-bottom: 10px;
}
p {
	font-family: var(--font-body);
	font-weight: 400;
	margin-bottom: 30px;
	line-height: 1.4rem;
}
a {
	color: var(--color-teal);
	text-decoration: none;
}
a:hover {
	color: var(--color-orange);
	text-decoration: underline;
}
/* Phone numbers only become tap-to-call links on a phone screen — on
   desktop/tablet this reads as plain text (see the ≤700px override
   below), since there's nothing to "call" from a mouse click there. */
.phone-link {
	color: inherit;
	pointer-events: none;
	cursor: default;
}
.lead {
	font-size: 1.3rem;
	line-height: 1.7rem;
}

/* Page frame */
#wrapper {
	margin: 0 auto;
	width: 1200px;
	height: auto;
}
header {
	margin: 0 auto var(--hero-height) auto;
	width: 1200px;
	position: relative;
	display: inline-block;
	padding: 0;
	z-index: 1;
}
.centerDiv {
	text-align: center;
}
.button, button {
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	background-color: var(--color-teal);
	padding: 4px 12px;
	border: 0;
	font-size: 2rem;
	text-align: center;
	text-decoration: none;
}
.button:hover, button:hover {
	color: var(--color-white);
	background-color: var(--color-orange);
	text-decoration: none;
}

/* Hero
   Every hero variant (tall and short) shares these base properties —
   crucially position:absolute, which takes it out of flow so header's
   margin-bottom below can act as its sole flow-space spacer. The original
   css-id.css only listed .hero-portfolio here (not .hero-design/-web/-logo/
   -promo), so those 4 rendered as normal in-flow blocks that stacked their
   own height *underneath* header's spacer — doubling the gap on every
   portfolio sub-page. Fixed by including all variants here; height itself
   is still overridden per-variant below. */
.hero, .hero-dienst, .hero-id, .hero-portfolio, .hero-contact,
.hero-design, .hero-web, .hero-logo, .hero-promo {
	width: 1200px;
	height: var(--hero-height);
	text-align: center;
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
}
.hero {
	padding-top: 360px;
	background-image: url(../images/slide-tattooed-happy-designer.jpg);
}
.hero-dienst {
	padding-top: 600px;
	background-image: url(../images/slide-man-on-chair.jpg);
}
.hero-id {
	padding-top: 600px;
	background-image: url(../images/slide-hand.jpg);
}
.hero-contact {
	padding-top: 600px;
	background-image: url(../images/slide-phone.jpg);
}
.hero-dienst h1, .hero-id h1, .hero-contact h1 {
	text-align: left;
	padding-left: 40px;
}
.hero-dienst h3, .hero-id h3, .hero-contact h3 {
	text-align: left;
	font-size: 2rem;
	color: var(--color-grey);
	font-weight: 400;
	padding-left: 40px;
}

/* Short hero (portfolio-style sub-pages): its own height variable so
   header's margin-bottom spacer can differ per page without touching
   --hero-height, which the tall hero pages depend on. */
:root {
	--hero-height-short: 400px;
}
.hero-portfolio, .hero-design, .hero-web, .hero-logo, .hero-promo {
	height: var(--hero-height-short);
	padding-top: 100px;
	background-color: var(--color-grey);
}
.hero-design {
	background-image: url(../images/slide-sm-design.jpg);
}
.hero-web {
	background-image: url(../images/slide-sm-web.jpg);
}
.hero-logo {
	background-image: url(../images/slide-sm-logo.jpg);
}
.hero-promo {
	background-image: url(../images/slide-sm-promo.jpg);
}
header.portfolio {
	margin-bottom: var(--hero-height-short);
}

/* Main menu */
#main-menu {
	top: 0;
	position: absolute;
	z-index: 9;
	width: 1200px;
	height: auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
.container-top {
	display: inline-block;
	padding: 0 13px;
	height: 95px;
}
.container-top.left {
	float: left;
	background-color: var(--color-white);
	width: 930px;
	margin-right: 0;
	margin-left: 40px;
}
.container-top.right {
	background-color: var(--color-orange);
	width: 170px;
	float: left;
	margin-left: 20px;
	margin-right: 0;
	text-align: center;
}
.container-top.right ul li {
	padding: 26px 18px;
	display: inline-block;
}
.container-top.right ul li a {
	color: var(--color-white);
	font-size: 2rem;
}
.container-top.right ul li a:hover {
	color: var(--color-teal);
	font-size: 2rem;
}
.logo-main img {
	width: 300px;
	float: left;
	margin-right: 60px;
}

/* Navigation */
nav {
	float: left;
}
nav ul {
	margin-top: 36px;
	float: left;
	margin-left: 10px;
}
nav ul li {
	display: inline-block;
	margin-right: 35px;
	position: relative;
	padding-bottom: 20px;
}
nav ul li:last-of-type {
	margin-right: 0;
}
nav ul li a {
	font-family: var(--font-nav);
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-black);
}
nav ul li a:hover {
	text-decoration: underline;
}
nav ul li a.active {
	color: var(--color-orange);
}
nav ul li ul.level2 {
	display: none;
	position: absolute;
	width: 150px;
	top: -1px;
	background-color: var(--color-white);
}
nav ul li ul.level2 li {
	float: none;
	text-align: left;
	background-color: var(--color-white);
	margin: 0 5px 10px 5px;
	width: 140px;
	padding-left: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-orange);
}
nav ul li ul.level2 li a {
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--color-black);
}
nav ul li:hover ul.level2 {
	display: block;
	color: var(--color-orange);
}

/* Section containers */
.container {
	width: 1200px;
	display: inline-block;
}
.pad40T {
	padding-top: 40px;
}
.pad40All {
	padding: 10px 40px 40px;
}
.container .left {
	width: 550px;
	margin-right: 20px;
}
.white-block,
.white-block-large {
	background-color: var(--color-white);
	padding-left: 40px;
	padding-right: 40px;
}
.grey-block {
	background-color: var(--color-light-grey);
	padding-left: 40px;
	padding-right: 40px;
}
article {
	width: 550px;
	display: inline-block;
}
/* Single-column content pages (privacy, terms, portfolio sub-pages):
   one wide article instead of the two-column layout above */
article.portfolio,
article.privacy,
article.voorwaarden {
	margin-left: 40px;
	width: 1120px;
	display: inline-block;
}
.privacy ul li {
	margin-top: 5px;
	margin-left: 40px;
	list-style-position: outside;
	list-style-type: none;
	list-style-image: url(../images/favicon/favicon-16x16.png);
}
.voorwaarden ol {
	margin-top: -20px;
	margin-bottom: 20px;
}
.voorwaarden ol li {
	margin-top: 5px;
	margin-left: 40px;
	list-style-position: outside;
	list-style-type: disc;
}
.voorwaarden ol li ol {
	margin-top: 0;
}

/* Image blocks + overlapping photo/icon compositions */
.image-block {
	display: inline-block;
	float: left;
	position: relative;
	width: 550px;
}
.icoon-ontop-right {
	position: absolute;
	z-index: 20;
	margin-left: 380px;
	margin-top: 210px;
}
.icoon-ontop-left {
	position: absolute;
	z-index: 30;
	margin-left: 0;
	margin-top: 210px;
}
.icoon-ontop-right-small {
	position: absolute;
	z-index: 30;
	margin-left: 380px;
	margin-top: 110px;
}
.photo-portrait-single {
	width: 450px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.photo-portrait-on-block {
	margin-left: 95px;
	width: 400px;
	height: auto;
	position: absolute;
	z-index: 25;
	margin-top: 60px;
}
.photo-portrait-on-block-left {
	margin-left: 55px;
	width: 400px;
	height: auto;
	position: absolute;
	z-index: 25;
	margin-top: 50px;
}
.bg-orange {
	background-color: var(--color-orange);
	width: 380px;
	height: 570px;
	display: block;
	position: relative;
	float: right;
}
.bg-orange-left {
	background-color: var(--color-orange);
	width: 380px;
	height: 380px;
	display: block;
	position: relative;
	float: left;
}

/* Freepik image credits (rotated captions) */
.reference,
.reference-top,
.reference-right {
	color: var(--color-black);
	font-size: 0.5rem;
	z-index: 100;
}
.reference {
	transform: rotate(90deg) translate(50px, 0);
	transform-origin: left bottom;
	margin-left: 10px;
	max-width: 200px;
	position: relative;
}
.reference-top {
	/* Anchored to the hero's bottom-right corner and rotated in place
	   around that same point, rather than a hand-tuned translate() —
	   the fixed-pixel version only matched one specific hero height and
	   landed ~300px below the (taller) hero on index/contact/diensten/
	   over-id, well past the photo. */
	position: absolute;
	right: 10px;
	bottom: 0;
	width: 250px;
	text-align: right;
	display: block;
	transform: rotate(90deg);
	transform-origin: bottom right;
}
.reference-right {
	transform: rotate(90deg) translate(580px, 0);
	transform-origin: right bottom;
	margin-right: 50px;
	position: relative;
}
.reference-top-short {
	color: var(--color-black);
	transform: rotate(90deg) translate(280px, -930px);
	transform-origin: right bottom;
	margin-right: 10px;
	font-size: 0.5rem;
	position: absolute;
	z-index: 100;
	width: 250px;
	text-align: right;
	display: block;
}
.reference a, .reference-right a, .reference-top-short a {
	color: var(--color-teal);
	text-decoration: none;
}
.reference a:hover, .reference-right a:hover, .reference-top-short a:hover {
	color: var(--color-orange);
	text-decoration: none;
}

/* Quote */
.quote {
	margin: 0;
	background-color: var(--color-orange);
	width: 1200px;
	display: inline-block;
	padding: 15px;
	font-family: var(--font-script);
	text-align: center;
}
q {
	font-size: 3rem;
	display: inline-block;
	width: 100%;
}

/* Diensten */
.dienst-item {
	width: 550px;
}
.dienst-item .icoon {
	height: 100px;
}
.dienst-item .icoon-box {
	width: 95px;
	height: 127px;
	float: left;
	display: inline-block;
	text-align: center;
}
.dienst-item.meer-link {
	color: var(--color-teal);
	display: inline-block;
	text-decoration: none;
	padding-left: 95px;
	padding-top: 40px;
}
.short-text {
	display: block;
	float: left;
	width: 450px;
}

/* Portfolio */
.portfolio-overzicht {
	width: 1120px;
	padding: 0;
	display: inline-block;
}
.portfolio-left {
	width: 300px;
	display: inline-block;
}
.portfolio-right {
	width: 650px;
	height: 150px;
	display: inline-block;
	float: right;
}
.portfolio-right ul li {
	display: inline-block;
	color: var(--color-orange);
	font-family: var(--font-display);
	font-size: 2.5rem;
	margin-top: 25px;
	margin-right: 5px;
	text-decoration: none;
}
.portfolio-right ul li a {
	display: inline-block;
	color: var(--color-orange);
	font-family: var(--font-display);
	font-size: 2.5rem;
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
}
.portfolio-right ul li a:hover {
	color: var(--color-white);
	background-color: var(--color-teal);
}
.portfolio-col-sm, .portfolio-col-lg {
	display: inline-block;
	float: left;
	padding: 0;
	height: 520px;
}
.portfolio-col-lg {
	margin: 0 20px;
	width: 500px;
	height: 550px;
}
.portfolio-img-sm {
	border: 2px solid var(--color-grey);
	width: 290px;
	height: 265px;
	margin-bottom: 20px;
	overflow: hidden;
}
.portfolio-img-sm img {
	width: 290px;
	height: 265px;
}
.portfolio-img-lg {
	border: 2px solid var(--color-grey);
	width: 100%;
	margin-bottom: 0;
	background-color: var(--color-white);
	height: 100%;
	overflow: hidden;
}
.portfolio-img-lg img {
	width: 100%;
	height: 100%;
}
.portfolio-img-sm a, .portfolio-img-lg a {
	filter: grayscale(100%);
	opacity: 0.8;
}
.portfolio-img-sm a:hover, .portfolio-img-lg a:hover {
	filter: none;
	opacity: 1;
}

/* Socials */
.container.social {
	width: 1200px;
	height: 100px;
	margin: 0;
	display: block;
	background-color: var(--color-light-grey);
	overflow: hidden;
}
.container.social ul {
	width: 100%;
	text-align: center;
}
.container.social ul li {
	font-size: 4rem;
	padding: 15px 80px;
	display: inline-block;
}
.container.social ul li a {
	color: var(--color-teal);
	width: 110px;
}
.container.social ul li a:hover {
	color: var(--color-orange);
}
.social ul {
	display: inline-block;
}

/* Footer */
footer {
	background-color: var(--color-dark-grey);
	height: auto;
	color: var(--color-white);
}
.footer-info h2, .footer-menu h2 {
	font-family: var(--font-display);
	font-weight: 100;
	color: var(--color-white);
	width: auto;
	height: 100%;
}
.footer-menu h2 {
	text-align: center;
}
.footer-info {
	width: 420px;
	float: left;
	height: auto;
}
.footer-menu {
	width: 238px;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}
nav.navigation ul {
	margin: 0 auto;
}
nav.navigation ul li {
	display: inline-block;
	font-family: var(--font-display);
	color: var(--color-white);
	padding-bottom: 0;
	margin-top: 2px;
	margin-left: 0;
	margin-bottom: 2px;
	width: 238px;
	text-align: center;
}
nav.navigation ul li a {
	color: var(--color-white);
	font-weight: 400;
	font-size: 1.4rem;
	text-decoration: none;
}
nav.navigation ul li a:hover {
	text-decoration: underline;
}
nav.navigation ul li .active {
	color: var(--color-orange);
}
.footer-info form {
	margin-top: -20px;
}
.form-success {
	color: var(--color-teal);
	font-weight: 700;
}
.form-error {
	color: var(--color-orange);
	font-weight: 700;
}
.footer-info form fieldset input {
	width: 300px;
	height: 30px;
	margin-bottom: 7px;
}
.footer-links {
	clear: both;
	width: 1120px;
	display: block;
	margin-top: 20px;
	margin-left: 40px;
	margin-right: 40px;
	border-top: 2px solid var(--color-white);
	text-align: center;
}
.footer-links ul li, .footer-links ul li a {
	display: inline-block;
	font-family: var(--font-display);
	color: var(--color-white);
	text-decoration: none;
	margin: 10px 20px;
	font-size: 1.2rem;
}
.footer-links ul li a:hover {
	color: var(--color-white);
	text-decoration: underline;
}
footer ul li .active {
	color: var(--color-orange);
}
footer button {
	margin-left: 30px;
}
.footer-logo {
	background-color: #999;
}
.footer-logo img {
	height: 50px;
	margin-top: 5px;
	margin-bottom: 0;
	margin-left: 40px;
}
.copyright {
	color: var(--color-white);
	font-size: 0.6rem;
	display: block;
	margin-right: 40px;
	float: right;
	margin-top: 30px;
}

/* Forms (footer contact form + the larger contact.html form). Scoped to
   .site-form rather than a bare "form" selector — auth/'s login/register
   forms are plain <form> elements too and would otherwise inherit this
   layout (this previously broke input centering on those pages). */
.site-form fieldset {
	font-family: var(--font-display);
}
.site-form legend {
	font-size: 2rem;
	font-weight: 400;
}
.site-form div {
	margin-bottom: 1rem;
	width: 500px;
	margin-left: 40px;
}
.site-form div::after {
	content: "";
	display: block;
	clear: both;
}
.site-form label, .site-form input {
	display: block;
}
.site-form label {
	font-size: 1.5rem;
	width: 50px;
	float: left;
}
.site-form input, .site-form textarea {
	width: 400px;
	float: left;
	margin-left: 30px;
	font-size: inherit;
	padding: 0.4em;
	border: 1px solid var(--color-grey);
}
.site-form .required {
	color: var(--color-orange);
}
.site-form input::placeholder, .site-form textarea::placeholder {
	font-family: var(--font-nav);
	opacity: 0.5;
	color: #999;
	font-size: 1rem;
}
.site-form .button.contact {
	margin-left: 80px;
	margin-top: 20px;
	margin-bottom: 30px;
}
/* Botval: het extra veld dat includes/spam-guard.php in beide formulieren
   rendert. Bewust hier verstopt en niet met een inline style of een
   type="hidden" — allebei ziet een bot zo aankomen. Blijft daarom een
   gewoon tekstveld dat alleen buiten beeld staat; wordt het toch ingevuld,
   dan was het geen mens. Niet vervangen door display:none: sommige bots
   slaan juist dát over. De selector is specifieker dan ".site-form div"
   hierboven, dus de breedte/marge daarvan telt hier niet mee. */
.site-form .form-extra {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
}

/* portfolio/index.html "nothing here" stub */
.oeps {
	width: 600px;
	margin: 100px auto;
	height: auto;
	display: block;
	text-align: center;
}
.oepskop {
	font-size: 4rem;
}

/*
   Hamburger toggle control.
   Pure CSS (checkbox hack) — the site ships no custom JS, so the toggle
   is a hidden, still-focusable checkbox driven by its <label>; the nav
   panel is shown with a `:checked ~ ... nav` sibling selector below.
   Hidden entirely at desktop widths so it never affects the desktop
   layout verified against the original design.
*/
.nav-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 32px;
	height: 22px;
	cursor: pointer;
}
.hamburger span {
	display: block;
	height: 3px;
	width: 100%;
	background-color: var(--color-teal);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
	transform: translateY(9.5px) rotate(45deg);
}
.nav-toggle:checked ~ .hamburger span:nth-child(2) {
	opacity: 0;
}
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
	transform: translateY(-9.5px) rotate(-45deg);
}
.nav-toggle:focus-visible ~ .hamburger {
	outline: 2px solid var(--color-teal);
	outline-offset: 4px;
}

/* ==========================================================================
   Responsive layer: tablet + mobile phones.
   Everything above this point is the untouched, pixel-verified desktop
   design. Everything below only takes effect under the breakpoints, so it
   is purely additive and never changes desktop rendering.
   ========================================================================== */

/* Tablet and phone: fluid width + hamburger navigation */
@media (max-width: 1024px) {
	#wrapper {
		width: 100%;
	}
	header {
		width: 100%;
	}
	.hero, .hero-dienst, .hero-id, .hero-portfolio, .hero-contact {
		width: 100%;
	}
	.container,
	.quote,
	.container.social {
		width: 100%;
	}
	/* At desktop this bar butts straight up against whatever section
	   precedes it, which reads fine there — but at these narrower widths
	   the preceding section's text ends up flush against the bar with no
	   breathing room, so give it a little space above here only. */
	.container.social {
		margin-top: 20px;
	}

	/* Header bar becomes a flex row: logo, hamburger, contact icons.
	   #main-menu gets the white bar (not just .container-top.left) so the
	   whole row reads clearly against the busy hero photo behind it.
	   The bar gets an explicit height (rather than auto) so nav below can
	   anchor to "100% of the bar" reliably, and so opening the nav panel
	   never stretches/re-centers the logo, hamburger or contact icons. */
	#main-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		height: 110px;
		padding: 0 20px;
		background-color: var(--color-white);
	}
	.container-top.left {
		display: flex;
		align-items: center;
		float: none;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		height: 100%;
	}
	/* logo is 30% larger than the first responsive pass (180px -> 234px);
	   .container-top.left stretches to the bar's full height so the flex
	   align-items:center below keeps the bigger logo vertically centered
	   between the bar's top edge and its bottom edge */
	.logo-main {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.logo-main img {
		width: 234px;
		float: none;
		margin-right: 0;
	}
	.hamburger {
		display: flex;
		flex-shrink: 0;
		order: 2;
		margin-left: 20px;
	}
	.container-top.right {
		float: none;
		width: auto;
		height: auto;
		flex-shrink: 0;
		margin: 0 0 0 15px;
		order: 3;
	}
	.container-top.right ul li {
		padding: 10px 10px;
	}

	/* Nav becomes a full-width dropdown panel anchored under the header
	   bar, positioned relative to #main-menu (not the flex flow), so its
	   own height never affects the bar above it.
	   Scoped to ".container-top.left nav" (not a bare "nav" selector) —
	   the footer also has a <nav class="navigation"> for the page list,
	   and a bare selector here would hide that one too with no way to
	   reveal it again. */
	.container-top.left nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		float: none;
		width: 100%;
		margin: 0;
		z-index: 50;
	}
	.nav-toggle:checked ~ .container-top.left nav {
		display: block;
	}
	.container-top.left nav ul {
		float: none;
		margin: 0;
		width: 100%;
		background-color: var(--color-white);
		border-top: 2px solid var(--color-orange);
	}
	.container-top.left nav ul li {
		display: block;
		float: none;
		margin: 0;
		padding: 14px 10px;
		border-bottom: 1px solid var(--color-light-grey);
	}
	.container-top.left nav ul li:last-of-type {
		margin-right: 0;
	}
	.container-top.left nav ul li a {
		font-size: 1.3rem;
	}
	/* the little chevron only makes sense as a hover cue on desktop; the
	   mobile submenu is always expanded, so the arrow is just noise */
	.container-top.left nav ul li a .fa-chevron-down {
		display: none;
	}

	/* Portfolio submenu: always expanded and visibly nested, never a
	   hover-only reveal (there's no hover on touch devices). No border or
	   background of its own — the indentation and smaller font are
	   enough to read as nested under "Portfolio". */
	.container-top.left nav ul li ul.level2 {
		display: block;
		position: static;
		width: auto;
		margin: 10px 0 0 0;
		padding: 4px 0;
		border-bottom: 0;
	}
	.container-top.left nav ul li ul.level2 li {
		width: auto;
		margin: 0;
		padding: 8px 8px 8px 16px;
		border-bottom: 0;
		background-color: transparent;
	}
	.container-top.left nav ul li ul.level2 li a {
		font-size: 1.1rem;
	}
	.container-top.left nav ul li:hover ul.level2 {
		color: inherit;
	}

	/* Hero */
	:root {
		--hero-height: 620px;
		--hero-height-short: 280px;
	}
	h1 {
		font-size: 5rem;
	}
	h3 {
		font-size: 2.2rem;
	}
	.hero, .hero-dienst, .hero-id, .hero-contact {
		padding-top: 220px;
	}
	.hero-portfolio, .hero-design, .hero-web, .hero-logo, .hero-promo {
		padding-top: 70px;
	}
	.hero-dienst h1, .hero-id h1, .hero-contact h1,
	.hero-dienst h3, .hero-id h3, .hero-contact h3 {
		padding-left: 20px;
	}

	/* Single-column content pages: fluid width instead of the fixed
	   1120px used at desktop (higher specificity than the two-column
	   rule below, so this needs its own explicit override) */
	article.portfolio,
	article.privacy,
	article.voorwaarden {
		width: 100%;
		margin-left: 0;
	}

	/* Mirrored overlay composition (second "onze diensten" section) */
	.icoon-ontop-right-small {
		width: 25%;
		margin-left: 65%;
		margin-top: 18%;
	}
	.photo-portrait-on-block-left {
		width: 70%;
		margin-left: 8%;
		margin-top: 10%;
	}
	.bg-orange-left {
		width: 65%;
		height: auto;
		aspect-ratio: 380 / 380;
	}

	/* Two-column sections (hulp nodig / diensten) become fluid halves */
	.container .left,
	article {
		width: 47%;
		margin-right: 3%;
	}
	.image-block {
		width: 47%;
	}
	.container .right.image-block {
		margin-right: 0;
	}
	.photo-portrait-single {
		width: 100%;
	}
	.icoon-ontop-right {
		width: 25%;
		margin-left: 65%;
		margin-top: 35%;
	}
	.icoon-ontop-left {
		width: 25%;
		margin-top: 35%;
	}
	.photo-portrait-on-block {
		width: 70%;
		margin-left: 18%;
		margin-top: 10%;
	}
	.dienst-item {
		width: 100%;
	}
	.short-text {
		width: calc(100% - 95px);
	}
	.dienst-item.meer-link {
		padding-left: 0;
	}
	.bg-orange {
		/* height:90% would resolve against .image-block's auto height,
		   which is itself indeterminate here, so the percentage is
		   dropped per spec and the box collapses to 0 height. Use the
		   original box's own ratio instead so it scales with its width. */
		width: 65%;
		height: auto;
		aspect-ratio: 380 / 570;
	}

	/* Portfolio grid */
	.portfolio-left {
		width: 100%;
	}
	.portfolio-right {
		width: 100%;
		float: none;
		height: auto;
		margin-top: 10px;
		text-align: center;
	}
	/* .portfolio-col-sm/-lg only existed to group images into desktop's
	   2-small/1-large column layout; "display: contents" unwraps them so
	   their images become direct grid items here, all sized equally */
	.portfolio-overzicht {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
	.portfolio-col-sm,
	.portfolio-col-lg {
		display: contents;
	}
	.portfolio-img-sm,
	.portfolio-img-lg {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0;
	}
	.portfolio-img-sm img,
	.portfolio-img-lg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Footer columns */
	.footer-info,
	.footer-menu {
		float: none;
		width: 100%;
		margin: 0 0 30px 0;
	}
	/* The desktop li's are a fixed 238px each so they line up in one
	   neat row at 1200px; once wrapped onto several lines at this width
	   that fixed width leaves uneven, off-center-looking rows. Flex +
	   auto-width items with justify-content:center wraps them onto
	   evenly-centered rows regardless of how many fit per line. */
	nav.navigation ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
	}
	nav.navigation ul li {
		width: auto;
		padding: 4px 14px;
	}
	.footer-links {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Phones: stack remaining two-column sections, simplify decorative overlays */
@media (max-width: 700px) {
	:root {
		--hero-height: 460px;
		--hero-height-short: 200px;
	}
	.phone-link {
		color: var(--color-teal);
		pointer-events: auto;
		cursor: pointer;
	}
	.phone-link:hover {
		color: var(--color-orange);
		text-decoration: underline;
	}
	.hero-portfolio, .hero-design, .hero-web, .hero-logo, .hero-promo {
		padding-top: 50px;
	}
	.hero-dienst h1, .hero-id h1, .hero-contact h1,
	.hero-dienst h3, .hero-id h3, .hero-contact h3 {
		padding-left: 12px;
	}

	/* logo + hamburger + contact badge no longer fit at their tablet
	   sizes on a narrow phone screen, so scale the whole bar down */
	#main-menu {
		height: 60px;
		padding: 0 12px;
	}
	.logo-main img {
		width: 120px;
	}
	.hamburger {
		width: 26px;
		height: 18px;
		margin-left: 10px;
	}
	.container-top.right {
		margin-left: 10px;
	}
	.container-top.right ul li {
		padding: 8px 6px;
	}
	.container-top.right ul li a,
	.container-top.right ul li a:hover {
		font-size: 1.3rem;
	}
	h1 {
		font-size: 3rem;
	}
	h2 {
		font-size: 2.2rem;
	}
	h3 {
		font-size: 1.5rem;
	}
	.hero {
		padding-top: 140px;
	}
	.button, button {
		font-size: 1.3rem;
	}
	q {
		font-size: 1.6rem;
	}

	.container.white-block,
	.container.grey-block {
		padding-left: 20px;
		padding-right: 20px;
	}

	.container .left,
	article,
	.image-block {
		width: 100%;
		margin-right: 0;
		float: none;
	}
	.dienst-item {
		width: 100%;
	}
	/* icon stays to the left of its text at every width, never stacked
	   above it — only the icon's own size shrinks a little for narrow
	   phones */
	.dienst-item .icoon-box {
		width: 70px;
		height: auto;
	}
	.dienst-item .icoon {
		height: 70px;
	}
	.short-text {
		width: calc(100% - 70px);
		float: left;
	}
	.dienst-item.meer-link {
		padding-left: 0;
	}

	/* Decorative corner-badge icons get in the way at this width */
	.icoon-ontop-right,
	.icoon-ontop-left,
	.icoon-ontop-right-small {
		display: none;
	}
	.photo-portrait-on-block,
	.photo-portrait-on-block-left {
		position: static;
		width: 100%;
		margin: 20px 0 0 0;
	}
	.bg-orange,
	.bg-orange-left {
		display: none;
	}

	.portfolio-overzicht {
		grid-template-columns: repeat(2, 1fr);
	}

	.container.social ul li {
		font-size: 2.5rem;
		padding: 15px 20px;
	}

	/* At this width there isn't room for a centered logo and the full
	   copyright sentence side by side on one line without them
	   overlapping, so they stack: logo centered on its own row, then
	   the copyright line right-aligned below it. */
	.footer-logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 20px;
	}
	.footer-logo img {
		height: 35px;
		margin: 0;
	}
	.copyright {
		float: none;
		align-self: flex-end;
		margin: 8px 0 0 0;
	}
	.footer-info form fieldset input,
	.footer-info form fieldset,
	.site-form input,
	.site-form textarea,
	.site-form div {
		width: 100%;
	}
	.site-form input,
	.site-form textarea {
		margin-left: 0;
	}
	.site-form div {
		margin-left: 0;
	}
	.site-form label {
		width: auto;
	}
	.site-form .button.contact {
		margin-left: 0;
	}
}