/* ==================================
   styles.css — reorganized
   Desktop / base rules first, responsive (tablet/mobile) sections grouped into media blocks at the end
   This reorganization moves all mobile/tablet overrides into their respective @media blocks
   (No behaviour changes intended — only reordering)
   ================================== */ /* File header and description */

/* = Base / Desktop styles = */ /* Section marker for base/desktop styles */

/* Sticky header: stays at the top of the page, full width, with shadow */ /* Header description */
header { /* Header element styling start */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center items */
    justify-content: center; /* Center nav horizontally */
    position: fixed; /* Fix header to top of viewport */
    top: 0; /* Stick to the top edge */
    left: 0; /* Align to left edge */
    width: 100%; /* Full viewport width */
    z-index: 1002; /* Ensure header is above other content */
    background: #ffffff; /* Header background color */
    padding: 8px; /* Space inside header */
    
    
} /* End header styling */

/* Add space at the top so content isn't hidden behind fixed header */ /* Body padding note */
html, body {
  height: 100%;
  /* removed global overflow:hidden so the page can scroll normally across resolutions */
}

/* Add space at the top so content isn't hidden behind fixed header */
body { /* Body element styling start */
    padding-top: 50px;
    overflow-x: hidden;
    color: #ffffff; /* Adjust if header height changes */
} /* End body styling */

/* Logo styles: left-aligned, clickable, fixed height */ /* Logo block */
/* Anchor wrapper to make the whole logo area clickable and control layout */
.logo-link {
  display: flex;               /* treat the link as a flex item */
  align-items: center;         /* vertically center the image */
  margin-left: 55px;           /* previous left offset moved from .logo to wrapper */
  margin-right: auto;          /* push rest of header content to the right */
  text-decoration: none;       /* no underline */
  position: relative;          /* enable z-index */
  z-index: 1100;               /* ensure it sits above any overlapping nav area */
}
.logo { /* Logo image */
  cursor: pointer;             /* Pointer cursor for clickability */
  height: 53px;                /* Fixed logo height */
  margin-left: 0;              /* reset, handled by .logo-link */
  display: block;              /* ensure no inline whitespace affects hit area */
}

/* Nav container: flexbox, centered, takes available space */ /* Nav container description */
nav { /* Nav element start */
    display: flex; /* Use flexbox for navigation */
    justify-content: center; /* Center nav items */
    flex: 1; /* Allow nav to grow and take space */
    margin-left: -120px; /* Adjust positioning to visually center */
} /* End nav */

/* Navigation links: horizontal list, spaced apart */ /* Nav links list */
.nav__links { /* Nav links class start */
    list-style: none; /* Remove bullets */
    display: flex; /* Horizontal layout */
    gap: 28px; /* Space between links */
} /* End .nav__links */

.nav__links li { /* Each nav list item */
    display: flex; /* Flex to align contents */
    align-items: center; /* Vertically center all nav items, including the button */
} /* End .nav__links li */

/* Submenu styles (desktop + mobile) */
.has-submenu { position: relative; }
.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  /* place the submenu so it visually "sticks" to its trigger (overlap slightly to remove gaps) */
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  transition-delay: 120ms; /* delay hiding so small pointer gaps don't close it */
  z-index: 1500;
}
.nav__submenu li { display: block; }
.nav__submenu li a { display: block; padding: 8px 12px; color: #624173; text-decoration: none; white-space: nowrap; transition: color 160ms ease; font-family: "Work Sans", sans-serif; font-weight: 400; font-size: 15px; }
.nav__submenu li a:hover,
.nav__submenu li a:focus {
  /* Keep submenu item text color unchanged on hover; only parent toggles should change */
  color: #624173;
  background: transparent;
}

/* Only top-level toggle text (Coaching / IT architectuur) should change color on hover/open.
   This covers desktop hover/focus and mobile open (.open). */
.submenu-toggle:hover,
.submenu-toggle:focus,
.has-submenu.open > .submenu-toggle,
.nav__links > li > a:hover,
.nav__links > li > a:focus {
  color: #ee438b; /* pink */
  background: transparent !important; /* ensure no background highlight */
}

/* Active nav highlighting: show current page and its parent toggles in pink */
.nav__links > li > a[aria-current="page"],
.submenu-toggle.is-active {
  color: #ee438b;
}

/* Ensure the Contact pill visually indicates active state when its anchor is current */
.nav__links > li > a[aria-current="page"] button {
  background-color: #ee438b;
}

.nav__submenu a[aria-current="page"],
.nav__subsubmenu a[aria-current="page"] {
  color: #ee438b;
  font-weight: 600;
}

/* Show submenu on hover (desktop) */
@media (hover: hover) and (min-width: 701px) {
  .nav__links > li { display: inline-flex; }
  .has-submenu:focus-within > .nav__submenu,
  .has-submenu:hover > .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0ms; /* show immediately when hovering */
    pointer-events: auto;
  }
  .submenu-toggle { background: transparent; border: none; cursor: pointer; font-family: "Work Sans", sans-serif; color: #624173; padding: 8px 12px; font-weight: 500; font-size: 16px; }
  .chev { margin-left: 8px; font-size: 12px; }
  /* second-level submenu (appears to the right of the first submenu) */
  .nav__submenu .has-submenu { position: relative; }
  .nav__submenu .has-submenu:hover > .nav__subsubmenu,
  .nav__submenu .has-submenu:focus-within > .nav__subsubmenu {
    opacity: 1;
    visibility: visible;
    /* align the second-level menu so it touches the first-level menu edge */
    transform: translateX(0) translateY(0);
    pointer-events: auto;
  }
  .nav__subsubmenu {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    top: 0;
    /* move left slightly into the parent dropdown so the edges meet */
    left: calc(100% - 6px);
    transform: translateX(0);
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 1600;
  }
  .nav__subsubmenu li a { display: block; padding: 8px 12px; color: #624173; text-decoration: none; white-space: nowrap; font-family: "Work Sans", sans-serif; font-weight: 300; font-size: 14px; }
}

/* Mobile: inline expanding submenus */
@media (max-width: 760px) {
  .nav__submenu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; display: none; box-shadow: none; background: transparent; padding-left: 12px; }
  .has-submenu.open > .nav__submenu { display: block; }
  /* Hide second-level submenu on mobile by default and show when its own parent is open */
  .nav__subsubmenu { display: none; position: static; opacity: 1; visibility: visible; pointer-events: auto; padding-left: 18px; background: transparent; box-shadow: none; }
  .nav__submenu .has-submenu.open > .nav__subsubmenu { display: block; }
  /* ensure mobile nav items stack left */
  .nav__links li { justify-content: flex-start; }
  .submenu-toggle { background: transparent; border: none; color: #624173; font-family: "Work Sans", sans-serif; font-size: 16px; padding: 12px; width: 100%; text-align: left; font-weight: 500; }
  /* Target only the chevron inside the direct submenu-toggle so ancestor .open doesn't flip descendant chevs */
  .has-submenu > .submenu-toggle .chev { float: right; transform: rotate(0); transition: transform 180ms ease; }
  .has-submenu.open > .submenu-toggle .chev { transform: rotate(180deg); }
}
/* Individual nav link styles */ /* Link styling comment */
.nav__links li a { /* Anchor inside nav item */
    color: #624173; /* Link color */
    text-decoration: none; /* No underline */
    font-weight: 500; /* Medium weight */
    font-size: 16px; /* Readable size */
    font-family: "Work Sans", sans-serif; /* Font family for consistency */
    transition: color 0.3s; /* Smooth color change on hover */
} /* End nav link styles */

/* Nav link hover effect */ /* Hover state */
.nav__links li a:hover { /* Hover selector start */
    color: #ee438b; /* Highlight color on hover */
} /* End hover */

/* Button styles for nav or elsewhere */ /* Generic button */
button { /* Button element styling start */
    padding: 7px 9px; /* Button inner spacing */
    background-color: #624173; /* Button background */
    border: none; /* Remove default border */
    border-radius: 50px; /* Pill-shaped corners */
    cursor: pointer; /* Pointer cursor */
    color: #edf0f1; /* Button text color */
    font-size: 16px; /* Button font size */
    font-family: "Work Sans", sans-serif; /* Button font family */
    transition: background 0.3s; /* Smooth background change */
} /* End button */

/* Button hover effect */ /* Hover for buttons */
button:hover { /* Button hover selector */
    background-color: #ee438b; /* Lighter accent on hover */
} /* End button hover */

/* Logo title bar (the colored bar with logo image) */ /* Decorative title bar */
.logo-title { /* Logo title container start */
  background-color: #c4d1dd; /* purple background, change as you want */
  padding: 26px 0px; /* Remove left/right padding so background reaches edges */
 
  text-align: center; /* Center contents */
  width: 100vw; /* Make background span full viewport width */
  position: relative; /* For internal positioning if needed */
  left: 50%; /* Start from center */
  right: 50%; /* Complement left to allow centering transform */
  transform: translateX(-50%); /* Center the section even if inside a container */
  box-sizing: border-box; /* Include padding in width calculations */
  min-height: 55px; /* Minimum visible height */
} /* End .logo-title */

.logo-title img { /* Image inside logo-title */
  display: flex; /* Use flex display (visual only) */
  vertical-align: middle; /* Align vertically in inline contexts */
  width: 400px; /* increase this value */
  height: auto; /* Maintain aspect ratio */
  margin-top: 55px; /* Push down from top of title bar */
} /* End .logo-title img */

/* Hamburger icon styles */ /* Mobile menu icon */
.hamburger { /* Hamburger container start */
    display: none; /* Hidden by default on desktop */
    flex-direction: column; /* Stack bars vertically */
    cursor: pointer; /* Pointer cursor */
    width: 30px; /* Icon width */
    height: 30px; /* Icon height */
    justify-content: center; /* Center bars vertically */
    align-items: center; /* Center bars horizontally */
    z-index: 1003; /* Above header content */
    margin-left: 20px; /* Space from other items */
} /* End .hamburger */
.hamburger span { /* Bars inside hamburger */
    height: 4px; /* Bar thickness */
    width: 100%; /* Full width of container */
    background: #624173; /* Bar color */
    margin: 4px 0; /* Vertical spacing between bars */
    border-radius: 2px; /* Rounded bar ends */
    transition: 0.4s; /* Smooth transforms for animations */
    
} /* End .hamburger span */

/* Make hamburger bars animate color when menu opens */
.hamburger span {
  /* keep existing thickness/shape but ensure color transitions smoothly */
  transition: background-color 220ms ease, transform 220ms ease;
}

/* When JS sets an active/open state on the hamburger button */
.hamburger.active span,
.hamburger.open span,
.hamburger[aria-expanded="true"] span {
  background-color: #ee438b; /* pink when opened */
}

/* Progressive enhancement: if the header contains an active nav, color the hamburger (browser support for :has varies) */
header:has(.nav__links.active) .hamburger span {
  background-color: #ee438b;
}

/* Main content: two-column layout (text left, image right) */ /* Main layout */
.main-inner { /* Main inner container start */
  display: flex; /* Use flexbox for two-column layout */
  align-items: flex-start; /* Align items to top */
  justify-content: space-between; /* Space between columns */
  gap: 25px; /* increased gap to add more space between text and image */
  max-width: 1100px; /* Constrain overall width */
  margin: 0 auto; /* Center container */
  color: #ffffff; /* Text color */
  padding: 0 24px; /* Horizontal padding */
  box-sizing: border-box; /* Include padding in width */
} /* End .main-inner */

.main-image { /* Right column container for image */
  flex: 0 0 78%;            /* occupy the right column */
  min-width: 0;             /* allow it to shrink without overflowing */
  display: flex; /* Flex context for image alignment */
  justify-content: flex-end; /* align image to the right of its column */
  align-items: flex-start; /* Align to top of column */
} /* End .main-image */

.main-image img { /* Image styling inside right column */
  display: block; /* Remove inline whitespace */
  width: auto; /* Allow natural width scaling */
  max-width: 100%; /* Don't exceed container */
  height: auto; /* Keep aspect ratio */
  object-fit: contain; /* Ensure image contained within box */
  border-radius: 6px; /* Rounded corners */
  padding: 40px; /* Inner spacing around image */
  max-height: 60vh;         /* cap so it doesn't overflow footer/header */
} /* End .main-image img */

.main-text { /* Left text column container */
  flex: 0 0 100%;            /* allow text to occupy about 100% of the width */
  margin: 0;                /* reset centering */
  margin-right: auto;       /* keep block left-aligned and allow image to sit to the right */
  max-width: 640px;         /* constrain the readable column */
  padding: 150px 50px 250px;  /* increased right padding so there is more space before the image */
  text-align: center; /* Left-align text */
  box-sizing: border-box; /* Include padding in size */
  font-family: "Work Sans", sans-serif; /* Font family */
  color: #624173; /* Text color */
  font-size: 15px; /* Base font size */
} /* End .main-text */

/* Styles for the main heading inside the main-text block */ /* H1 styling */
.main-text h1 { /* Heading inside main-text */
  font-family: "Work Sans", "sans-serif"; /* readable UI font */
  color: #624173;               /* brand color */
  font-size: 32px;              /* base desktop size */
  line-height: 1.00;            /* tight but readable */
  font-weight: 900;             /* strong emphasis */
  margin: 0 0 20px 0;           /* space below the heading */
  text-align: center;
  
  text-rendering: optimizeLegibility; /* Improve font rendering */
} /* End .main-text h1 */

/* Pages that use a standalone main-text article (submenu item pages)
   are placed directly inside main > .container. Target those so we
   can keep the index layout (which lives inside .main-inner) unchanged. */
main > .container > .main-text {
  max-width: 760px; /* constrain line length for readability */
  margin: 60px auto; /* add space above the article */
  padding: 40px 24px; /* comfortable reading padding */
  box-sizing: border-box;
  text-align: left; /* left-align long-form text for easier reading */
  font-family: "Work Sans", sans-serif; /* ensure same font as index */
  color: #624173;
  font-size: 16px;
  line-height: 1.6;
}

main > .container > .main-text h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px 0;
  text-align: left;
}

main > .container > .main-text h2 {
  font-size: 18px;
  margin: 20px 0 8px 0;
  font-weight: 700;
  color: #624173;
}

main > .container > .main-text p {
  margin: 0 0 14px 0; /* tighten spacing between paragraphs */
  font-weight: 400;
}

/* Mobile adjustments for standalone pages */
@media (max-width: 760px) {
  main > .container > .main-text {
    margin: 28px auto;
    padding: 20px 14px;
    font-size: 15px;
  }
  main > .container > .main-text h1 { font-size: 20px; }
  main > .container > .main-text h2 { font-size: 16px; }
}

/* Two-column section used on story pages to place an image aligned to the right
   next to a specific section (used for the 'De eenzame smid' block). */
.main-text .two-col {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px; /* increased gap so images sit further from the text */
  align-items: start;
  margin-bottom: 12px;
}
.main-text .two-col .col-text { min-width: 0; }
.main-text .story-figure { margin: 0; }
.main-text .story-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  border: 2px solid #624173; /* subtle purple border around story images */
  box-sizing: border-box;
}

@media (max-width: 900px) {
  /* Slightly narrower image column on medium screens */
  .main-text .two-col { grid-template-columns: 1fr 360px; }
}
@media (max-width: 760px) {
  /* On mobile stack the image under the text for better reading flow */
  .main-text .two-col { grid-template-columns: 1fr; }
  .main-text .story-figure { order: 2; }
  .main-text .story-figure img { width: 100%; max-width: 100%; }
}

/* Nudge story images slightly to the right on wider screens for visual spacing */
@media (min-width: 761px) {
  .main-text .story-figure img {
    transform: translateX(16px);
    transition: transform 180ms ease;
  }
  /* slightly increase the grid column at larger sizes so the nudge doesn't cause overflow */
  .main-text .two-col { grid-template-columns: 1fr 460px; }
}


*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.container{
  max-width: 1150px;
  margin:auto;
}
/* Allow specific pages to use a wider container without affecting others */
.container.container-wide { max-width: 1400px; }
.row{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
.footer{
	background-color: #c4d1dd;
    padding: 95px 0;
    
    
}
.footer-col-logo{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* small gap below the logo to separate it from the list, and a tiny upward nudge */
    margin-bottom: 6px;
}

/* Size and subtly nudge the footer logo so it sits just above the first list item */
.footer-col-logo img{
    width: 50px; /* slightly smaller than header logo */
    height: auto;
    display: block;
    transform: translateY(-6px); /* move up a very small amount */
    
}

/* Mobile tweak: reduce size and nudge less so layout stays balanced */
@media (max-width: 760px) {
  .footer-col-logo img{
    width: 44px;
    transform: translateY(-4px);
  }
}

.footer-col{
   width: 25%;
   padding: 50px;
}

.footer-col h4{
	font-size: 18px;
	color: #624173;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
    font-family: "Work Sans", sans-serif; /* Ensure consistent font */
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #624173;
	height: 2px;
	box-sizing: border-box;
	width: 65px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: none;
	color: #624173;
	text-decoration: none;
	font-weight: 300;
	color: #624173;
	display: block;
    font-family: "Work Sans", sans-serif; /* Ensure consistent font */
	transition: color 0.3s;
}
.footer-col ul li a:hover{
	color: #ee438b;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: #624173;
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: color 0.3s;
    font-family: "Work Sans", sans-serif; /* Ensure consistent font */
}
.footer-col .social-links a:hover{
	color: #ffffff;
	background-color: #ee438b;
    transition: color 0.3s;
}

/* Small spacing between contact icons and the text that follows them */
.footer .fa-phone-alt,
.footer .fa-envelope,
.footer .fa-map-marker-alt {
  margin-right: 2.3px; /* nudge icons slightly away from the values */
  display: inline-block; /* ensure margin applies consistently */
  vertical-align: middle; /* keep icons vertically aligned with text */
}


/* = Responsive overrides (grouped) = */ /* Start responsive section */

/* Larger screens tweaks */ /* Wide-screen tweaks */
@media (min-width: 1200px) { /* Rules for very wide screens */
  /* Slightly larger H1 on very wide screens */ /* Comment */
  .main-text h1 { /* Bigger H1 */
    font-size: 32px; /* Increase heading size on large screens */
  } /* End .main-text h1 */
} /* End media query */

/* Desktop / wide screens specific rules */ /* Wide screen overrides */
@media (min-width: 901px) { /* Rules that apply on screens wider than 901px */
  .main-text { /* Adjust main-text for wide screens */
    max-width: 520px;    /* slightly narrower on wide screens when image is present */
  } /* End .main-text */

  /* On wider screens push the image down slightly so it aligns better with the text */ /* Note */
  .main-image img { /* Image tweaks on wide screens */
    margin-top: 24px; /* change this value to move image further down or up */
  } /* End .main-image img */
} /* End media query */

/* Tablet / medium screens: stack earlier for narrow desktops/tablets */ /* Tablet rules */
@media (max-width: 1600px) { /* Apply for screens up to 1409px */
  .main-inner { /* Stack main content */
    flex-direction: column; /* stack content earlier for tablets and narrow screens */
    gap: 18px; /* Reduce gap */
    padding: 0 18px; /* Adjust padding */
  } /* End .main-inner */
  .main-text { /* Main text adjustments for tablet */
    flex: unset; /* Remove flex sizing */
    width: 100%; /* Full width */
    text-align: center; /* Center text */
    max-width: 30vw; /* Cap width to viewport */
    padding: 40px 0px 0px; /* slightly larger right padding on tablet to preserve breathing room */
    margin: 0 auto; /* Center horizontally */
  } /* End .main-text */
  .main-image { /* Main image adjustments */
    flex: unset; /* Remove flex sizing */
    width: 100%; /* Full width */
    justify-content: center; /* Center image */
  } /* End .main-image */
  .main-image img { /* Image inside main-image for tablet */
    width: 100%; /* Fill container */
    max-width: 92vw; /* Cap width */
    height: auto; /* Maintain ratio */
    max-height: 40vh; /* cap height for tablets */
    transform: none; /* Remove transforms */
    display: block; /* Block-level image */
    margin: 0 auto; /* Center image */
  } /* End .main-image img */
} /* End media query */

/* Mobile rules collected in a single block */ /* Mobile-specific overrides */
@media (max-width: 760px) { /* Rules for screens 760px and below */
    /* Header adjustments for mobile */ /* Header mobile tweaks */
    header { /* Header in mobile */
        flex-direction: row; /* Ensure header items layout in a row */
        align-items: center; /* Vertically center header items */
        justify-content: space-between; /* Put logo and hamburger at ends */
        padding: 8px 16px; /* Adjust padding for mobile */
    } /* End header */
  .logo-link { /* ensure wrapper uses the smaller mobile left margin */
    margin-left: 10px; /* Smaller left margin on mobile */
    margin-right: auto; /* keep nav/hamburger to the right */
  }
  .logo { /* Mobile logo tweaks */
    height: 40px; /* Smaller logo height */
  } /* End .logo */

    .logo-title img { /* Logo image in title bar on mobile */
      width: 600px;     /* smaller on mobile so the full logo is visible */
      max-width: 90vw;  /* responsive cap */
      height: auto; /* Maintain aspect ratio */
      margin-top: 12px; /* reduce top margin so it fits better */
    } /* End .logo-title img */

    nav { /* Mobile nav container */
        margin-left: 0; /* Reset margin */
        flex: unset; /* Remove flex sizing */
    } /* End nav */

    /* Mobile nav / hamburger menu: hidden by default and toggled with .active */ /* Mobile menu */
    .nav__links { /* Mobile nav list - updated to avoid overly long pop-out */
        margin: 0; /* Reset margin */
        padding: 12px 12px; /* Comfortable padding */
        list-style: none; /* No bullets */

        display: none; /* hide by default so hamburger can toggle */
  flex-direction: column; /* Stack links vertically */
  gap: 12px; /* Space between items */
  align-items: stretch;        /* make items full-width */
  justify-content: flex-start;    /* start from top when opened */

        position: fixed;            /* keep menu independent of flow */
        left: 0; /* Align to left */
        right: 0; /* Align to right */
        top: 50px;                  /* sits below the header (adjust if needed) */
        width: 100%; /* Use 100% to avoid adding viewport scroll */

        height: auto;              /* Remove fixed height so menu height fits content */
        max-height: calc(100vh - 50px); /* cap menu to viewport minus header so it never becomes too long */

        background: #c4d1dd; /* Menu background */
        box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Subtle shadow */
        z-index: 2000; /* Above most content */
        overflow-y: auto; /* Allow scrolling if content exceeds height */
        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
        box-sizing: border-box;
        transform: translateY(0); /* Default transform */
        transition: transform 0.18s ease, opacity 0.12s ease;
    } /* End .nav__links */

    .nav__links.active { /* Active state when toggled */
        display: flex; /* Show menu when active */
    } /* End .nav__links.active */

  .nav__links li { /* Mobile nav list items */
    width: 100%; /* Full width items */
    display: block; /* Stack items vertically and allow full-width children */
    justify-content: flex-start;    /* align items to the left for consistent mobile layout */
    padding: 0; /* Reset padding */
  } /* End .nav__links li */

  .nav__links li a,
  .nav__links li .cta { /* Links and CTA in mobile nav */
    text-align: left;         /* left-align text inside link */
    display: block; /* Block so it fills the available width */
    padding: 12px 16px; /* Comfortable tappable area */
    width: 100%; /* full width for easy tapping */
    box-sizing: border-box;
  } /* End link styles */
    .hamburger { /* Show hamburger on mobile */
        display: flex; /* Visible on mobile */
        margin-left: 0; /* Reset left margin */
        margin-right: 28px; /* Move hamburger away from the right edge */
        z-index: 2100; /* Ensure hamburger is above the menu */
    } /* End .hamburger */

  /* Main layout stacks and image scales under the text */ /* Mobile main layout */
  .main-inner { /* Main container adjustments for mobile */
    flex-direction: column; /* Stack columns vertically */
    gap: 16px; /* Reduce gap */
    padding: 0 12px; /* Smaller horizontal padding */
  } /* End .main-inner */
  .main-image { /* Image column on mobile */
    order: 2;                /* ensure image appears under the text */
    width: 100%; /* Full width */
    justify-content: center; /* center the image on mobile */
  } /* End .main-image */
  .main-image img { /* Image styling on mobile */
    width: 110%;             /* fill the mobile column */
    max-width: 100vw; /* Cap width */
    height: auto; /* Keep ratio */
    max-height: 70vh; /* Increase cap so image shows larger on mobile */
    padding: 7px; /* Reduce padding on mobile so image can be larger */
    box-sizing: border-box; /* Include padding in size calculations */
    margin: 0 auto; /* Center horizontally */
  } /* End .main-image img */

  .main-text { /* Text block on mobile */
    flex: unset; /* Remove flex sizing */
    width: 100%; /* Full width */
    text-align: center;      /* ensure text is left-aligned on mobile */
    align-self: flex-start;/* keep block aligned to the left inside the column */
    margin-left: 12px;     /* small left gutter so it doesn't touch the edge */
    font-family: "Work Sans", sans-serif; /* Font family */
    color: #624173; /* Text color */
    margin-right: auto; /* Reset right margin */
    max-width: 92vw; /* Cap width */
    padding: 40px 12px 12px; /* added top padding for mobile so H1 sits lower */
    margin-right: 0; /* Ensure no extra right margin */
  } /* End .main-text */

  .main-text h1 { /* Heading on mobile */
    font-size: 16px; /* Smaller heading */
    text-align: center; /* Center heading */
    margin-bottom: 24px; /* Space below heading */
  } /* End .main-text h1 */
} /* End @media (max-width: 760px) */

@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 20px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

/* Center footer content and nudge it slightly to the right */
.footer .container { /* make the footer's inner container a flex row and center it, add left padding to push content visually right */
  display: flex; /* use flex so we can center the row */
  justify-content: center; /* center columns as a block */
  padding-left: 90px; /* nudge the whole footer content to the right on wide screens */
  padding-right: 40px; /* keep a smaller right gutter so content isn't flush */
  box-sizing: border-box; /* include padding in sizing calculations */
}

/* Ensure the row itself centers its children and doesn't overflow */
.footer .row {
  width: 100%; /* take full width of the container */
  max-width: 1150px; /* keep layout constrained to your container width */
  margin: 0 auto; /* center the row block */
  justify-content: center; /* center the footer columns horizontally */
  gap: 10px; /* small gap between columns */
}

/* Center the content inside each footer column and keep the same padding */
.footer-col {
  display: flex; /* enable centering of inner items */
  flex-direction: column; /* stack items vertically */
  align-items: center; /* center items horizontally inside each column */
  justify-content: flex-start; /* keep content starting at top */
  text-align: center; /* center text and links */
  /* keep existing padding but ensure box-sizing applies */
  padding: 50px; /* existing value preserved */
}

/* Responsive: progressively reduce the left nudge so content stays visually balanced */
@media (max-width: 1409px) {
  .footer .container {
    padding-left: 60px; /* less nudge on narrower screens */
    padding-right: 36px;
  }
}

@media (max-width: 900px) {
  .footer .container {
    padding-left: 36px; /* tablet and small desktop */
    padding-right: 28px;
  }
  .footer-col {
    padding: 28px; /* reduce padding so columns fit two-per-row nicely */
    width: 50%; /* match existing responsive stacking behavior */
  }
}

@media (max-width: 574px) {
  .footer .container {
    padding-left: 20px; /* minimal left padding on small phones */
    padding-right: 20px;
  }
  .footer-col {
    width: 100%; /* stack full-width columns on very small screens */
    padding: 18px; /* reduce padding for compactness */
  } /* End .footer-col */
} /* End media query */     

/* Landscape phones: enlarge main image when device is held sideways */
@media (max-width: 900px) and (orientation: landscape) {
  .main-image { /* ensure the image column centers itself in landscape */
    justify-content: center;
  }
  .main-image img {
    max-height: 80vh;     /* allow the image to be taller in landscape */
    max-width: 85vw;      /* cap width so it doesn't overflow */
    width: auto;          /* keep natural aspect ratio */
    padding: 10px;        /* slightly reduce padding so image appears bigger */
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    border-radius: 6px; /* keep same rounding */
  }
}

/* Prevent the footer address from wrapping so the city stays on the same line */
.footer .address-nowrap {
  white-space: nowrap; /* keep the full address on one line when possible */
}

/* Footer bottom copyright row */
.footer-bottom {
  width: 100%;
  background: #c4d1dd; /* slightly darker than main footer to separate visually */
  padding: 14px 0; /* vertical spacing */
  box-sizing: border-box;
}
.footer-bottom .container {
  display: flex;
  justify-content: center; /* center the text */
  align-items: center;
}
.footer-bottom p {
  margin: 0;
  color: #624173;
  font-size: 16px;
  font-family: "Work Sans", sans-serif; /* ensure copyright uses Work Sans */
  text-align: center;
  opacity: 0.95;
}

/* Make mobile images larger on narrow phones (~430px) */
@media (max-width: 480px) {
  .main-image img {
    width: 100vw;          /* nearly full viewport width */
    max-width: 100vw;      /* cap to viewport so it doesn't overflow */
    padding: 6px;         /* small padding so image fills more space */
    box-sizing: border-box;
    max-height: 75vh;     /* allow taller image on narrow phones */
    margin: 0 auto;       /* keep centered */
  }
}

/* End responsive section */ /* End of responsive styles */

/* Page-specific tweaks -------------------------------------------------- */
/* Wider reading column for the Modern Management story page. This gives
   the article more horizontal room and reduces the right image column so
   paragraphs wrap less. */
.main-text.modern-management {
  max-width: 1040px; /* increase article width a bit more */
}
.main-text.modern-management .two-col {
  grid-template-columns: 1fr 300px; /* narrower image column to free up text space */
  gap: 48px; /* a little more breathing room */
}
@media (max-width: 900px) {
  .main-text.modern-management { max-width: 820px; }
  .main-text.modern-management .two-col { grid-template-columns: 1fr 320px; }
}
@media (max-width: 760px) {
  .main-text.modern-management { max-width: 100%; padding: 20px 14px; }
  .main-text.modern-management .two-col { grid-template-columns: 1fr; }
}

/* Specialist page: widen text column and reduce image column similar to Modern Management */
.main-text.specialist {
  max-width: 1040px; /* wider article on desktop */
}
.main-text.specialist .two-col {
  grid-template-columns: 1fr 300px; /* narrower image column */
  gap: 48px; /* more breathing room between text and image */
}
@media (max-width: 900px) {
  .main-text.specialist { max-width: 820px; }
  .main-text.specialist .two-col { grid-template-columns: 1fr 320px; }
}
@media (max-width: 760px) {
  .main-text.specialist { max-width: 100%; padding: 20px 14px; }
  .main-text.specialist .two-col { grid-template-columns: 1fr; }
}

/* Align Specialist images with the start of their paragraphs/headings */
.main-text.specialist .two-col .col-text h2 {
  margin-top: 0; /* remove extra top offset so image and heading align at the top */
}

/* Lower the Specialist images slightly so they align closer to the first paragraph (desktop/tablet) */
@media (min-width: 761px) {
  .main-text.specialist .two-col .story-figure { margin-top: 32px; }
}
@media (max-width: 760px) {
  .main-text.specialist .two-col .story-figure { margin-top: 0; }
}

/* ===== Wie zijn wij (rebuilt) ===== */
.wie-zijn-wij-reset {
  max-width: 1360px;
  margin: 40px auto;
  padding: 0 24px;
  box-sizing: border-box;
  color: #624173;
  font-family: "Work Sans", sans-serif;
}

.wzw-title { margin: 0 0 16px 0; font-size: 28px; font-weight: 900; white-space: nowrap; }

.wzw-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) max-content;
  /* Align the image with the Elwin section (bottom area) instead of the bullets */
  grid-template-areas:
    "top top"
    "bottom image";
  gap: 64px;
  align-items: start;
}
.wzw-text-top { grid-area: top; }
.wzw-text-bottom { grid-area: bottom; }
.wzw-image-wrap { grid-area: image; }

.wzw-text p { margin: 0 0 12px 0; line-height: 1.6; }
.wzw-text h2 { margin: 18px 0 8px 0; font-size: 18px; }

.wzw-bullets { list-style: disc; padding-left: 1.2em; margin: 0 0 14px 0; }
.wzw-bullets li { margin: 0 0 6px 0; }

/* Links inside Wie-zijn-wij sections (e.g., Elwin) */
.wzw-section a { color: #624173; text-decoration: none; }
.wzw-section a:hover, .wzw-section a:focus { color: #ee438b; text-decoration: none; }

/* Tighten space between bullet list and first Elwin section */
.wzw-bullets { margin-bottom: 8px; }
.wzw-text-bottom .wzw-section:first-child h2 { margin-top: 6px; }

.wzw-image { display: block; width: auto; height: auto; max-width: none; border-radius: 6px; border: 2px solid #624173; box-sizing: border-box; }

/* Enable hover-driven highlight effects relative to the image */
.wzw-image-wrap { position: relative; }
/* Dim the right half of the image so the left person appears highlighted */
.wzw-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  /* transparent on left 48%, darken on right side */
  background: linear-gradient(to right, rgba(0,0,0,0) 0 48%, rgba(0,0,0,0.36) 48% 100%);
  border-radius: 6px; /* match image rounding */
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

/* When hovering the Elwin link, activate the right-half dim overlay */
.wie-zijn-wij-reset:has(.wzw-link-elwin:hover) .wzw-image-wrap::after,
.wie-zijn-wij-reset:has(.wzw-link-elwin:focus) .wzw-image-wrap::after,
.wie-zijn-wij-reset:has(.wzw-link-elwin:focus-visible) .wzw-image-wrap::after {
  opacity: 1;
}

/* Overlay for Werner (mirror: dim left half) */
.wzw-image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0) 0 48%, rgba(0,0,0,0.36) 48% 100%);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.wie-zijn-wij-reset:has(.wzw-link-werner:hover) .wzw-image-wrap::before,
.wie-zijn-wij-reset:has(.wzw-link-werner:focus) .wzw-image-wrap::before,
.wie-zijn-wij-reset:has(.wzw-link-werner:focus-visible) .wzw-image-wrap::before {
  opacity: 1;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .wie-zijn-wij-reset { max-width: 820px; }
}
/* Make layout responsive earlier so image doesn't overlap text on mid-sized screens */
@media (max-width: 1360px) {
  .wzw-title { white-space: normal; }
  .wzw-layout {
    grid-template-columns: minmax(0,1fr) clamp(320px, 32vw, 520px);
    /* keep image aligned with the Elwin section at this breakpoint */
    grid-template-areas:
      "top top"
      "bottom image";
  }
  .wzw-image { width: 100%; max-width: 100%; height: auto; }
}
@media (max-width: 1000px) {
  .wzw-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "image"
      "bottom";
    gap: 28px;
  }
  .wzw-image { width: 100%; max-width: 100%; height: auto; }
}
@media (max-width: 760px) {
  .wie-zijn-wij-reset { max-width: 100%; padding: 20px 14px; }
  .wzw-layout { grid-template-columns: 1fr; gap: 18px; }
  .wzw-image { width: 100%; height: auto; max-width: 100%; }
}

/* Nudge the Wie-zijn-wij image slightly lower relative to the Elwin paragraph (desktop only) */
@media (min-width: 1001px) {
  .wzw-image-wrap { margin-top: 32px; }
}

/* Keep the Wie-zijn-wij heading on one line on desktop */
@media (min-width: 901px) {
  .main-text.wie-zijn-wij h1 { white-space: nowrap; }
}

/* Fine-tune vertical alignment for Modern Management images 1 and 2 on larger screens */
@media (min-width: 761px) {
  .main-text.modern-management .mm-fig-1 { /* nudge image 1 down to sit around the center of first paragraph */
    align-self: flex-start;
    margin-top: 36px;
  }
  .main-text.modern-management .mm-fig-2 { /* center image 2 against the De ontmoeting text block */
    align-self: center;
  }
  /* Vertically center image 3 relative to its text block for De transformatie */
  .main-text.modern-management .transformatie-block { align-items: center; }
  .main-text.modern-management .transformatie-block .mm-fig-3 { align-self: center; }
}