:root {
  --niels-ink: #121212;
  --niels-muted: #6b6b67;
  --niels-line: #deddd8;
  --niels-paper: #fbfaf7;
  --niels-soft: #f3f1ec;
  --niels-copy: #f6c63e;
  --niels-content: #42b9b3;
  --niels-catalyst: #f46e5f;
  --niels-max: 1280px;
  --niels-serif: Georgia, 'Times New Roman', serif;
  --niels-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { background: var(--niels-paper); color: var(--niels-ink); }
body, button, input, select, textarea { font-family: var(--niels-sans); }
img { max-width: 100%; height: auto; }

/* Let Blocksy own the header; make it visually match the redesign. */
#header [data-row="middle"], #header .ct-sticky-container { background: rgba(251,250,247,.97); }
#header [data-row="middle"] { border-bottom: 1px solid var(--niels-line); }
#header .ct-container { max-width: var(--niels-max); }
#header .site-title { font-size: 16px; letter-spacing: .02em; font-weight: 700; }
#header [data-id="menu"] > ul > li > a,
#header .menu > li > a { font-size: 14px; letter-spacing: .01em; }

.niels-shell { width: min(calc(100% - 56px), var(--niels-max)); margin-inline: auto; }
.niels-home, .niels-work-archive, .niels-single-work { background: var(--niels-paper); }
.niels-eyebrow { margin: 0 0 16px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; color: var(--niels-muted); }
.niels-text-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; font-size: 14px; }

.niels-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; padding: 58px 0 34px; align-items: stretch; }
.niels-hero h1, .niels-lead-case h2, .niels-section-heading h2, .niels-home-about h2, .niels-home-contact h2,
.niels-archive-header h1, .niels-single-work h1 { font-family: var(--niels-serif); font-weight: 400; letter-spacing: -.035em; }
.niels-hero h1 { font-size: clamp(44px, 5.25vw, 76px); line-height: .98; margin: 0 0 24px; max-width: 820px; }
.niels-hero__intro { font-family: var(--niels-serif); font-size: 19px; line-height: 1.5; max-width: 710px; margin: 0 0 28px; }
.niels-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.niels-button { display: inline-flex; align-items: center; gap: 16px; padding: 13px 18px; border: 1px solid var(--niels-ink); color: var(--niels-ink); text-decoration: none; font-size: 14px; }
.niels-button--dark { background: var(--niels-ink); color: #fff; }
.niels-hero__visual { min-height: 430px; position: relative; overflow: hidden; background: #eeeae2; }
.niels-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.niels-hero__fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.niels-hero__fallback span { position: absolute; width: 230px; height: 230px; border-radius: 50%; mix-blend-mode: multiply; opacity: .82; }
.niels-hero__fallback span:nth-child(1) { background: var(--niels-copy); transform: translateY(-52px); }
.niels-hero__fallback span:nth-child(2) { background: var(--niels-content); transform: translate(-80px,65px); }
.niels-hero__fallback span:nth-child(3) { background: var(--niels-catalyst); transform: translate(80px,65px); }
.niels-hero__hint { position: absolute; bottom: 14px; left: 18px; right: 18px; font-size: 12px; background: rgba(255,255,255,.9); padding: 8px; }

.niels-clients { border-top: 1px solid var(--niels-line); border-bottom: 1px solid var(--niels-line); padding: 18px 0; display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; }
.niels-clients__label { text-transform: uppercase; letter-spacing: .17em; font-size: 10px; font-weight: 700; color: var(--niels-muted); }
.niels-clients p { margin: 0; font-family: var(--niels-serif); font-size: 15px; word-spacing: 10px; }

.niels-lead-case { display: grid; grid-template-columns: 1.25fr 1fr; gap: 38px; padding: 34px 0; border-bottom: 1px solid var(--niels-line); align-items: stretch; }
.niels-lead-case__image { min-height: 360px; background: #ece9e2; overflow: hidden; }
.niels-lead-case__image img { width: 100%; height: 100%; object-fit: cover; }
.niels-lead-case__copy { padding: 20px 18px 12px 0; display: flex; flex-direction: column; align-items: flex-start; }
.niels-lead-case__copy h2 { font-size: 38px; line-height: 1.05; margin: 0 0 14px; }
.niels-lead-case__copy h2 a { color: inherit; text-decoration: none; }
.niels-lead-case__copy > p:not(.niels-eyebrow) { margin: 0 0 16px; font-family: var(--niels-serif); font-size: 18px; }
.niels-lead-case__areas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.niels-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 34px 0 16px; }
.niels-section-heading h2 { font-size: 30px; margin: 0; }
.niels-service-teasers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--niels-line); border-bottom: 1px solid var(--niels-line); }
.niels-service-teaser { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 25px 24px 25px 14px; border-right: 1px solid var(--niels-line); }
.niels-service-teaser:last-child { border-right: 0; }
.niels-service-teaser__icon img { width: 58px !important; height: 58px !important; border-radius: 50%; object-fit: cover; }
.niels-service-teaser h3 { font-family: var(--niels-serif); font-size: 25px; font-weight: 400; margin: 0 0 4px; }
.niels-service-teaser strong { font-family: var(--niels-serif); }
.niels-service-teaser p { margin: 5px 0 0; color: #555; font-size: 13px; line-height: 1.45; }

.niels-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 18px; }
.niels-work-card__image { display: block; aspect-ratio: 3 / 2; background: #ece9e2; overflow: hidden; }
.niels-work-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.niels-work-card:hover .niels-work-card__image img { transform: scale(1.02); }
.niels-work-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg,#efede7,#ddd8cd); }
.niels-work-card__meta { padding-top: 10px; }
.niels-work-card__title { font-family: var(--niels-serif); font-weight: 400; font-size: 19px; margin: 0 0 5px; line-height: 1.2; }
.niels-work-card__title a { color: inherit; text-decoration: none; }
.niels-work-card__areas { display: flex; gap: 7px; flex-wrap: wrap; }
.niels-area-label { color: var(--niels-muted); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; display: inline-flex; align-items: center; gap: 5px; }
.niels-area-label img { width: 18px !important; height: 18px !important; border-radius: 50%; }

.niels-home-about { margin-top: 38px; border-top: 1px solid var(--niels-line); border-bottom: 1px solid var(--niels-line); padding: 28px 0; display: grid; grid-template-columns: 300px 1fr; gap: 46px; align-items: center; }
.niels-home-about__visual { aspect-ratio: 4 / 3; background: #efede7; overflow: hidden; }
.niels-home-about__visual img { width: 100%; height: 100%; object-fit: cover; }
.niels-home-about__placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 18px; font-family: var(--niels-serif); font-style: italic; background: linear-gradient(135deg,#f0eee7,#d8d4cb); }
.niels-home-about h2 { font-size: 34px; line-height: 1.08; margin: 0 0 13px; }
.niels-home-about p:not(.niels-eyebrow) { font-family: var(--niels-serif); font-size: 17px; margin: 0 0 15px; }

.niels-home-contact { margin: 32px 0 56px; background: var(--niels-soft); padding: 30px; }
.niels-home-contact h2 { font-size: 38px; margin: 0 0 20px; }
.niels-home-contact__problems { display: grid; grid-template-columns: repeat(3, 1fr); }
.niels-home-contact__problems > div { padding: 0 24px; border-right: 1px solid var(--niels-line); }
.niels-home-contact__problems > div:first-child { padding-left: 0; }
.niels-home-contact__problems > div:last-child { border-right: 0; }
.niels-home-contact__problems strong, .niels-home-contact__problems em { display: block; }
.niels-home-contact__problems strong { font-family: var(--niels-serif); }
.niels-home-contact__problems em { margin-top: 5px; color: #555; font-family: var(--niels-serif); }
.niels-home-contact__details { display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--niels-line); margin-top: 24px; padding-top: 15px; font-size: 13px; }
.niels-home-contact__details a { color: inherit; text-decoration: none; border-bottom: 1px solid #aaa; }
.niels-home-contact__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--niels-line);
  margin-top: 28px;
  padding-top: 22px;
}
.niels-home-contact__cta p {
  margin: 0;
  font-family: var(--niels-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
}
.niels-home-contact__cta .niels-button { flex: 0 0 auto; }

.niels-archive-header { padding: 58px 0 30px; }
.niels-archive-header h1 { font-size: clamp(42px, 5vw, 62px); line-height: 1.04; max-width: 900px; margin: 0 0 30px; }
.niels-work-filters { display: flex; gap: 27px; border-bottom: 1px solid var(--niels-line); flex-wrap: wrap; }
.niels-work-filters a { color: inherit; text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.niels-work-filters a.is-active { border-color: var(--niels-ink); }
.niels-work-archive .niels-work-grid { padding: 30px 0 68px; }
.niels-empty-state { padding: 40px 0 80px; }

.niels-single-work__shell { width: min(calc(100% - 56px), 1120px); margin-inline: auto; padding-top: 58px; }
.niels-single-work__header { max-width: 900px; margin: 0 auto 30px; }
.niels-single-work__areas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.niels-single-work h1 { font-size: clamp(46px, 6vw, 76px); line-height: 1; margin: 0 0 18px; }
.niels-single-work__intro { font-family: var(--niels-serif); font-size: 21px; color: #444; max-width: 760px; }
.niels-single-work__hero { margin: 28px 0 38px; }
.niels-single-work__content { font-family: var(--niels-serif); font-size: 18px; line-height: 1.7; }
.niels-single-work__content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.niels-single-work__content > .alignwide { max-width: 1120px; }
.niels-single-work__content > .alignfull { max-width: none; width: 100%; }
.niels-single-work__content figure, .niels-single-work__content .wp-block-gallery { max-width: 1120px; }
.niels-single-work__content h2, .niels-single-work__content h3 { font-family: var(--niels-serif); font-weight: 400; }
.niels-single-work__footer { max-width: 780px; margin: 48px auto 74px; }

/* Keep the existing Services content intact, but make it breathe in Blocksy. */
.niels-services-page { width: min(100%, var(--niels-max)); margin-inline: auto; }
.niels-services-page .wp-block-columns { gap: clamp(28px, 5vw, 72px); }

@media (max-width: 900px) {
  .niels-shell, .niels-single-work__shell { width: min(calc(100% - 36px), var(--niels-max)); }
  .niels-hero { grid-template-columns: 1fr; gap: 30px; }
  .niels-hero__visual { min-height: 360px; order: -1; }
  .niels-lead-case { grid-template-columns: 1fr; }
  .niels-service-teasers { grid-template-columns: 1fr; }
  .niels-service-teaser { border-right: 0; border-bottom: 1px solid var(--niels-line); }
  .niels-service-teaser:last-child { border-bottom: 0; }
  .niels-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niels-home-about { grid-template-columns: 220px 1fr; }
  .niels-home-contact__problems { grid-template-columns: 1fr; }
  .niels-home-contact__problems > div { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--niels-line); }
  .niels-home-contact__problems > div:last-child { border-bottom: 0; }
  .niels-clients { grid-template-columns: 1fr; }
  .niels-clients p { word-spacing: 4px; }
}

@media (max-width: 580px) {
  .niels-hero { padding-top: 28px; }
  .niels-hero h1 { font-size: 42px; }
  .niels-hero__visual { min-height: 300px; }
  .niels-work-grid { grid-template-columns: 1fr; }
  .niels-home-about { grid-template-columns: 1fr; }
  .niels-home-about__visual { max-width: 310px; }
  .niels-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .niels-archive-header h1 { font-size: 40px; }
  .niels-home-contact { padding: 22px; }
  .niels-home-contact__cta { align-items: flex-start; flex-direction: column; }
}


/* ----------------------------------------------------------------------
   1.1.0: consistent Blocksy page geometry and reliable Work navigation
   ---------------------------------------------------------------------- */

/* The Work archive has its own deterministic header because the current
   Blocksy header conditions suppress the Global Header on this post archive. */
body.post-type-archive-work #header { display: none !important; }
.niels-work-site-header {
  width: 100%;
  background: rgba(251,250,247,.98);
  border-bottom: 1px solid var(--niels-line);
}
.niels-work-site-header__inner {
  width: min(calc(100% - 56px), var(--niels-max));
  min-height: 78px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.niels-work-site-header__brand {
  color: var(--niels-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
}
.niels-work-site-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(22px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.niels-work-site-menu li { margin: 0; padding: 0; }
.niels-work-site-menu a {
  color: var(--niels-ink);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.niels-work-site-menu .current-menu-item > a,
.niels-work-site-menu a[href$="/work/"] { font-weight: 700; }

/* One predictable page shell for Services, About me, About you, Contact and
   any future standard page. Page content no longer inherits different Blocksy
   narrow/wide settings from individual pages. */
.niels-page {
  background: var(--niels-paper);
  color: var(--niels-ink);
}
.niels-page__shell {
  width: min(calc(100% - 56px), 1120px);
  margin-inline: auto;
  padding: 58px 0 80px;
}
.niels-page__header,
.niels-page__content {
  width: min(100%, 780px);
  margin-inline: auto;
}
.niels-page__header { margin-bottom: 34px; }
.niels-page__header h1 {
  margin: 0;
  font-family: var(--niels-serif);
  font-size: clamp(46px, 5.4vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.niels-page__content { font-size: 16px; line-height: 1.65; }
.niels-page__content > :first-child { margin-top: 0; }
.niels-page__content > :last-child { margin-bottom: 0; }
.niels-page__content .alignwide {
  width: min(1120px, calc(100vw - 56px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.niels-page__content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Services stays exactly the same content-wise; only its outer geometry is
   normalized to the same 1120px shell as the rest of the site. */
.niels-page--services .niels-page__header,
.niels-page--services .niels-page__content {
  width: 100%;
  max-width: none;
}
.niels-page--services .niels-services-page {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Work singles: copy stays comfortably readable, while image/gallery blocks
   use the full portfolio canvas. This specifically fixes Cargo imports where
   gallery blocks had been unintentionally capped at the text-column width. */
.niels-single-work__content > p,
.niels-single-work__content > h2,
.niels-single-work__content > h3,
.niels-single-work__content > h4,
.niels-single-work__content > ul,
.niels-single-work__content > ol,
.niels-single-work__content > blockquote,
.niels-single-work__content > .wp-block-embed {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.niels-single-work__content > figure.wp-block-image,
.niels-single-work__content > .wp-block-image,
.niels-single-work__content > figure.wp-block-gallery,
.niels-single-work__content > .wp-block-gallery,
.niels-single-work__content > .alignwide {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.niels-single-work__content > figure.wp-block-image {
  text-align: center;
}
.niels-single-work__content > figure.wp-block-image > img,
.niels-single-work__content > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.niels-single-work__content > .wp-block-gallery .wp-block-image {
  max-width: none;
}

/* Cargo posts can also contain old classic-image markup outside a Gutenberg
   image block. Centre it without rewriting the saved project content. */
body.niels-cargo-imported-work .niels-single-work__content > img,
body.niels-cargo-imported-work .niels-single-work__content > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
}

@media (max-width: 900px) {
  .niels-work-site-header__inner,
  .niels-page__shell { width: min(calc(100% - 36px), 1120px); }
  .niels-work-site-header__inner { min-height: 68px; }
  .niels-work-site-header__brand { display: none; }
  .niels-work-site-header__nav { width: 100%; overflow-x: auto; }
  .niels-work-site-menu { justify-content: flex-start; gap: 22px; min-width: max-content; }
  .niels-page__content .alignwide { width: calc(100vw - 36px); }
}

@media (max-width: 580px) {
  .niels-page__shell { padding-top: 34px; padding-bottom: 56px; }
  .niels-page__header { margin-bottom: 24px; }
  .niels-work-site-menu a { font-size: 13px; }
}

/* ======================================================================
   1.2.0 — deterministic layout ownership
   ====================================================================== */
html { scroll-behavior: smooth; }
body.niels-child-layout { margin: 0; background: var(--niels-paper); }
body.niels-child-layout #header,
body.niels-child-layout #footer,
body.niels-child-layout .ct-footer,
body.niels-child-layout .site-header { display: none !important; }

.niels-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; }
.niels-skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 10px 14px; color: #111; }
.niels-site-header { position: relative; z-index: 30; width: 100%; background: rgba(251,250,247,.98); border-bottom: 1px solid var(--niels-line); }
.niels-site-header__inner { width: min(calc(100% - 56px), var(--niels-max)); min-height: 82px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.niels-site-brand { color: var(--niels-ink); text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: .01em; white-space: nowrap; }
.niels-primary-menu { list-style: none; display: flex; align-items: center; gap: clamp(24px, 3vw, 42px); margin: 0; padding: 0; }
.niels-primary-menu li { margin: 0; padding: 0; }
.niels-primary-menu a { color: var(--niels-ink); text-decoration: none; font-size: 14px; }
.niels-primary-menu .is-current > a, .niels-primary-menu .current-menu-item > a, .niels-primary-menu .current_page_item > a { font-weight: 700; }
.niels-menu-toggle { display: none; border: 0; background: transparent; font: inherit; padding: 8px 0; color: var(--niels-ink); }
.niels-site-main { min-height: calc(100vh - 150px); width: 100%; }
.niels-site-footer { border-top: 1px solid var(--niels-line); background: var(--niels-paper); }
.niels-site-footer__inner { width: min(calc(100% - 56px), var(--niels-max)); margin-inline: auto; padding: 22px 0; color: var(--niels-muted); font-size: 12px; }

/* Ignore parent-theme layout widths for our own templates. */
body.niels-child-layout .site-main,
body.niels-child-layout #main,
body.niels-child-layout #main-container,
body.niels-child-layout .ct-container,
body.niels-child-layout .ct-container-full { max-width: none; width: 100%; margin: 0; padding: 0; }

/* Standard pages */
.niels-page__shell { width: min(calc(100% - 56px), 1120px) !important; max-width: 1120px !important; margin: 0 auto !important; padding: 58px 0 80px !important; }
.niels-page__header,
.niels-page__content { width: min(100%, 780px) !important; max-width: 780px !important; margin-left: auto !important; margin-right: auto !important; }
.niels-page__header { margin-bottom: 34px !important; }
.niels-page__content { font-size: 16px; line-height: 1.65; }
.niels-page__content > :first-child { margin-top: 0 !important; }
.niels-page__content > :last-child { margin-bottom: 0 !important; }

/* Services is intentionally wider, but uses the same centred outer shell. */
.niels-page--services .niels-page__header,
.niels-page--services .niels-page__content { width: 100% !important; max-width: 1120px !important; }
.niels-page--services .niels-services-page,
.niels-page--services .niels-services-page.alignwide,
.niels-page--services .alignwide { width: 100% !important; max-width: 1120px !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; }
.niels-page--services .wp-block-columns { margin-left: 0 !important; margin-right: 0 !important; }

/* Work archive */
.niels-work-archive .niels-shell { width: min(calc(100% - 56px), var(--niels-max)) !important; max-width: var(--niels-max) !important; margin-inline: auto !important; }
.niels-work-filters a { cursor: pointer; }

/* Work single — the content column itself is narrow. This also constrains
   unwrapped text nodes from old Cargo HTML, which child selectors cannot. */
.niels-single-work__shell { width: min(calc(100% - 56px), 1120px) !important; max-width: 1120px !important; margin-inline: auto !important; padding: 58px 0 0 !important; }
.niels-single-work__header { width: min(100%, 780px); max-width: 780px; margin: 0 auto 30px !important; }
.niels-single-work__content { width: min(100%, 780px); max-width: 780px; margin: 0 auto; font-family: var(--niels-serif); font-size: 18px; line-height: 1.7; }
.niels-single-work__content > * { max-width: 100%; }
.niels-single-work__content img[align="left"],
.niels-single-work__content img[align="right"],
.niels-single-work__content .alignleft,
.niels-single-work__content .alignright,
body.niels-cargo-imported-work .niels-single-work__content img { float: none !important; clear: both !important; }
.niels-single-work__content > img,
.niels-single-work__content > a > img,
body.niels-cargo-imported-work .niels-single-work__content > img,
body.niels-cargo-imported-work .niels-single-work__content > a > img { display: block !important; width: auto; max-width: 100% !important; height: auto; margin: 28px auto !important; }
.niels-single-work__content > figure.wp-block-image { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.niels-single-work__content > figure.wp-block-image img { display: block; float: none !important; margin-left: auto !important; margin-right: auto !important; }
.niels-single-work__content > .wp-block-gallery,
.niels-single-work__content > figure.wp-block-gallery,
.niels-single-work__content > .alignwide { width: min(1120px, calc(100vw - 56px)) !important; max-width: none !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%) !important; }
.niels-single-work__content > .alignfull { width: 100vw !important; max-width: none !important; margin-left: 50% !important; transform: translateX(-50%) !important; }
.niels-single-work__content .wp-block-gallery .wp-block-image { max-width: none !important; }
.niels-single-work__footer { width: min(100%, 780px); max-width: 780px; margin: 48px auto 74px !important; }

@media (max-width: 760px) {
  .niels-site-header__inner { width: min(calc(100% - 36px), var(--niels-max)); min-height: 68px; }
  .niels-menu-toggle { display: block; }
  .niels-primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--niels-paper); border-bottom: 1px solid var(--niels-line); padding: 12px 18px 20px; }
  .niels-menu-open .niels-primary-nav { display: block; }
  .niels-primary-menu { align-items: flex-start; flex-direction: column; gap: 0; }
  .niels-primary-menu a { display: block; padding: 10px 0; font-size: 15px; }
  .niels-page__shell,
  .niels-single-work__shell,
  .niels-work-archive .niels-shell { width: min(calc(100% - 36px), 1120px) !important; }
  .niels-single-work__content > .wp-block-gallery,
  .niels-single-work__content > figure.wp-block-gallery,
  .niels-single-work__content > .alignwide { width: calc(100vw - 36px) !important; }
}

/* ======================================================================
   1.3.0 — pretty Work routes + one shared responsive page canvas
   ====================================================================== */

/* Home, Work and all informational pages now use the same 1280px canvas. */
.niels-page__shell {
  width: min(calc(100% - 56px), var(--niels-max)) !important;
  max-width: var(--niels-max) !important;
  margin-inline: auto !important;
  padding: 58px 0 80px !important;
}

.niels-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(52px, 7vw, 96px);
  align-items: start;
}

.niels-page__main,
.niels-page__header,
.niels-page__content,
.niels-page__media {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.niels-page__header { margin-bottom: 28px !important; }
.niels-page__header h1,
.niels-archive-header h1,
.niels-single-work__header h1 {
  font-family: var(--niels-serif);
  color: #13263a;
  font-weight: 400;
}
.niels-page__header h1 { font-size: clamp(46px, 5vw, 70px); line-height: .98; margin: 0; }
.niels-page__content { font-size: 16px; line-height: 1.65; }

.niels-page__media {
  min-height: 280px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.niels-page__media > figure,
.niels-page__media > .niels-about-artwork,
.niels-page__featured-media { margin: 0 !important; width: 100%; }
.niels-page__media img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 660px;
  height: auto !important;
  object-fit: contain;
  margin: 0 auto !important;
  float: none !important;
}
.niels-page--about-me .niels-page__media img,
.niels-page--contact .niels-page__media img { max-width: 560px !important; }

/* About you gets a visual placeholder until a Featured Image is supplied. */
.niels-page-placeholder {
  width: 100%;
  min-height: 430px;
  background: var(--niels-soft);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  color: var(--niels-muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.niels-page-placeholder__circles { position: relative; width: 220px; height: 190px; }
.niels-page-placeholder__circles i { position: absolute; width: 118px; height: 118px; border-radius: 50%; opacity: .85; }
.niels-page-placeholder__circles i:nth-child(1) { background: var(--niels-copy); left: 51px; top: 0; }
.niels-page-placeholder__circles i:nth-child(2) { background: var(--niels-content); left: 0; bottom: 0; }
.niels-page-placeholder__circles i:nth-child(3) { background: var(--niels-catalyst); right: 0; bottom: 0; }

/* Services already contains its own two-column layout; simply give it the
   same outer canvas and heading treatment as every other top-level page. */
.niels-page--services .niels-page__header--wide,
.niels-page--services .niels-page__content--wide,
.niels-page--services .niels-services-page,
.niels-page--services .niels-services-page.alignwide,
.niels-page--services .alignwide {
  width: 100% !important;
  max-width: var(--niels-max) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
.niels-page--services .niels-page__header--wide { margin-bottom: 38px !important; }

/* The Work archive starts on exactly the same x-axis as Home/pages. */
.niels-work-archive .niels-shell,
.niels-single-work__shell {
  width: min(calc(100% - 56px), var(--niels-max)) !important;
  max-width: var(--niels-max) !important;
  margin-inline: auto !important;
}

/* Legacy/Cargo Work: centre the hero/featured image itself, not just its
   containing figure. This is the element that was visibly left-aligned on
   Meadows in the Mountains and several other imported cases. */
.niels-single-work__hero {
  width: 100% !important;
  max-width: var(--niels-max) !important;
  margin: 28px auto 38px !important;
  text-align: center !important;
  clear: both !important;
}
.niels-single-work__hero img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  float: none !important;
  margin: 0 auto !important;
}

/* Centre legacy classic images even when Cargo left align="left" on an img
   nested inside a paragraph or link. Gutenberg galleries remain untouched. */
body.niels-cargo-imported-work .niels-single-work__content { display: flow-root; }
body.niels-cargo-imported-work .niels-single-work__content img[align],
body.niels-cargo-imported-work .niels-single-work__content p > img,
body.niels-cargo-imported-work .niels-single-work__content p > a > img,
body.niels-cargo-imported-work .niels-single-work__content > img,
body.niels-cargo-imported-work .niels-single-work__content > a > img {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 28px auto !important;
}
body.niels-cargo-imported-work .niels-single-work__content p:has(> img),
body.niels-cargo-imported-work .niels-single-work__content p:has(> a > img) {
  max-width: 100% !important;
  text-align: center;
  clear: both;
}

/* Old query-string filters are no longer visually or structurally required;
   pretty /work/<view>/ routes are rendered server-side by Core 2.9.1+. */
.niels-work-filters { display: flex; flex-wrap: wrap; gap: 26px; }

@media (max-width: 900px) {
  .niels-page__grid { grid-template-columns: 1fr; gap: 42px; }
  .niels-page__media { min-height: 0; justify-content: flex-start; }
  .niels-page__media img { max-height: none; }
  .niels-page-placeholder { min-height: 360px; }
  .niels-page--services .wp-block-columns { flex-wrap: wrap !important; }
}

@media (max-width: 760px) {
  .niels-page__shell,
  .niels-work-archive .niels-shell,
  .niels-single-work__shell {
    width: min(calc(100% - 36px), var(--niels-max)) !important;
  }
  .niels-page__shell { padding: 38px 0 58px !important; }
  .niels-page__header h1 { font-size: clamp(42px, 13vw, 58px); }
  .niels-page__grid { gap: 32px; }
  .niels-page-placeholder { min-height: 300px; }
}