.advice-section,
.image-copy-section,
.brochure-section {
  background: var(--ls-cream);
}

.advice-section {
  padding-top: 118px;
}

.advice-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(60px, 10vw, 140px);
}

.ls-framed-image {
	--ls-framed-image-padding-right: 30px;
	--ls-framed-image-padding-bottom: 32px;
	--ls-framed-image-radius: 70px 0 70px 0;
	--ls-framed-image-shape-right: -40px;
	--ls-framed-image-shape-bottom: -26px;
	--ls-framed-image-shape-width: 70%;
	--ls-framed-image-shape-height: 84%;

  position: relative;
	padding: 0 var(--ls-framed-image-padding-right) var(--ls-framed-image-padding-bottom) 0;
}

.ls-framed-image__media {
  position: relative;
  z-index: 2;
	display: block;
  width: 100%;
  aspect-ratio: 1;
	border-radius: var(--ls-framed-image-radius);
  object-fit: cover;
}

.ls-framed-image__shape {
  position: absolute;
	right: var(--ls-framed-image-shape-right);
	bottom: var(--ls-framed-image-shape-bottom);
	z-index: 1;
	display: block;
	width: var(--ls-framed-image-shape-width);
	height: var(--ls-framed-image-shape-height);
	pointer-events: none;
}

.ls-framed-image--compact {
	--ls-framed-image-padding-right: 28px;
	--ls-framed-image-padding-bottom: 30px;
	--ls-framed-image-radius: 72px 0 72px 0;
	--ls-framed-image-shape-bottom: -14px;
	--ls-framed-image-shape-width: 62%;
	--ls-framed-image-shape-height: 77%;
}

.advice-copy h2,
.image-copy-content h2 {
  margin-bottom: 26px;
}

.advice-copy p,
.image-copy-content p {
  margin-bottom: 28px;
}

.image-copy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: clamp(60px, 9vw, 130px);
}

.brochure-section {
	padding: 82px 0 100px;
}

.brochure-panel-shell {
	position: relative;
	isolation: isolate;
}

.brochure-panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
	align-items: center;
	gap: 36px;
	min-height: 363px;
	overflow: visible;
	padding: 48px 70px;
	border-radius: 180px 0 150px 0;
	background: var(--ls-primary);
	color: var(--ls-white);
}

.brochure-panel-shell::before,
.brochure-panel-shell::after {
	position: absolute;
	z-index: 0;
	width: 310px;
	height: 148px;
	background: var(--ls-lime);
	content: "";
}

.brochure-panel-shell::before { top: -20px; right: 96px; border-radius: 110px 0 0; }
.brochure-panel-shell::after { right: 108px; bottom: -56px; border-radius: 0 0 110px; }

.brochure-copy { position: relative; z-index: 2; padding: 0; }
.brochure-copy h2 { margin-bottom: 26px; color: var(--ls-white); }

.brochure-copy ul {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
  list-style: none;
}

.brochure-copy li { display: flex; align-items: center; gap: 14px; }
.brochure-copy li img { width: 20px; height: 20px; flex: 0 0 20px; }
.brochure-image { position: relative; z-index: 2; align-self: center; }
.brochure-image img { width: 116%; max-width: none; max-height: 480px; margin: -82px -8% -88px -8%; object-fit: contain; object-position: center; transform: rotate(5deg); }

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
	padding: 14px;
}

.dialog-layer[hidden] { display: none; }
body.has-dialog { overflow: hidden; }

.dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 21, 24, 0.78);
  backdrop-filter: blur(7px);
}

.calendly-dialog {
  position: relative;
  z-index: 2;
	width: min(100%, 1000px);
	height: min(calc(100dvh - 28px), 762px);
  overflow: hidden;
  border-radius: 34px 0 34px 0;
  background: var(--ls-cream);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
  animation: ls-dialog-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dialog-header {
  display: flex;
	height: 60px;
	min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
	padding: 6px 14px 6px 24px;
  background: var(--ls-primary);
  color: var(--ls-white);
}

.dialog-header > div { display: grid; }
.dialog-header span { color: var(--ls-lime); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.dialog-header strong { font-family: "Sansation", sans-serif; font-size: 1.3rem; }

.dialog-header button {
  display: grid;
	width: 36px;
	height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: transparent;
	color: var(--ls-white);
	transition: background-color var(--ls-motion-fast) ease, border-color var(--ls-motion-fast) ease, color var(--ls-motion-fast) ease;
}

.dialog-header button:hover { border-color: var(--ls-cyan); background: var(--ls-cyan); color: var(--ls-white); }

.dialog-header svg { width: 20px; }
.calendly-dialog iframe { display: block; width: 100%; height: calc(100% - 60px); border: 0; background: var(--ls-cream); }

@keyframes ls-dialog-in {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
}

/* Global showroom. Content and presentation are shared by every renderer. */
.showroom-section {
	position: relative;
	overflow: visible;
	padding: 105px 0 0;
	background: linear-gradient(180deg, var(--ls-primary) 71%, var(--ls-cream) 71%);
	color: var(--ls-white);
}

.showroom-inner {
	width: calc(100% - 100px);
	max-width: 1800px;
	text-align: center;
}

.showroom-copy {
	max-width: 860px;
	margin: 0 auto 100px;
}

.showroom-copy h2 {
	margin-bottom: 22px;
	color: var(--ls-white);
}

.showroom-copy h2 span { display: block; }

.showroom-copy p {
	max-width: 780px;
	margin: 0 auto 28px;
	color: rgba(255, 255, 255, 0.82);
}

.showroom-visual {
	position: relative;
	overflow: visible;
}

.showroom-photo {
	position: relative;
	z-index: 2;
	width: 100%;
	height: clamp(300px, 45vw, 565px);
	border-radius: 80px 0 80px 0;
	object-fit: cover;
}

.showroom-decoration {
	position: absolute;
	z-index: 3;
	display: block;
	height: auto;
	pointer-events: none;
}

.decoration-one {
	top: auto;
	bottom: 100%;
	left: 7%;
	width: 32%;
}

.decoration-two {
	right: 0;
	bottom: -88px;
	width: 30%;
}

@media (min-width: 821px) {
	.showroom-photo { min-height: 840px; }
}

/* Global advice popup. Content is managed once in Site-instellingen. */
.advice-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
}

.advice-popup-layer[hidden] { display: none; }

.advice-popup-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 11, 13, 0.88);
  backdrop-filter: blur(3px);
}

.advice-popup-panel {
  position: relative;
  z-index: 2;
	width: min(100%, 800px);
	height: min(calc(100vh - 48px), 620px);
	min-height: 0;
  overflow: hidden;
  border-radius: 38px;
  background-color: var(--ls-primary);
  background-image: url("../images/shapes-background.svg");
  background-position: right 28px bottom 110px;
  background-repeat: no-repeat;
  background-size: min(650px, 82vw) auto;
  color: var(--ls-white);
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.52);
  animation: ls-dialog-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.advice-popup-close {
  position: absolute;
  top: 30px;
  right: 18px;
  z-index: 5;
  display: grid;
	width: 50px;
	height: 50px;
  place-items: center;
  padding: 0;
	border: 1px solid var(--ls-cyan);
	border-radius: 50%;
  background: transparent;
	color: var(--ls-cyan);
	transition: background-color var(--ls-motion-fast) ease, color var(--ls-motion-fast) ease;
}

.advice-popup-close:hover { background: var(--ls-cyan); color: var(--ls-white); }
.advice-popup-close svg { width: 26px; height: 26px; stroke-width: 2.2; }

.advice-popup-content {
  position: relative;
  z-index: 3;
	width: calc(100% - 80px);
  margin-inline: auto;
	padding-top: clamp(48px, 6vh, 68px);
  text-align: center;
}

.advice-popup-content h2 {
  margin-bottom: 28px;
  color: var(--ls-white);
	font-size: clamp(2.35rem, 3.5vw, 3rem);
  line-height: 1.04;
}

.advice-popup-copy {
	margin: 0 auto 24px;
  color: var(--ls-white);
	font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  font-weight: 200;
  line-height: 1.45;
}

.advice-popup-copy p { margin: 0; }
.advice-popup-form { width: 100%; }
.advice-popup-form-frame {
  display: block;
  width: 100%;
  height: 180px;
  min-height: 160px;
  border: 0;
  background: transparent;
}
.advice-popup-form .gform_heading,
.advice-popup-form .gfield_label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.advice-popup-form .gform_fields { display: block !important; }
.advice-popup-form input:not([type="submit"]):not([type="hidden"]) {
  width: 100% !important;
	min-height: 64px;
	padding: 16px 24px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--ls-white) !important;
  color: var(--ls-primary) !important;
	font-size: 19px !important;
  font-weight: 200;
}
.advice-popup-form .gform_footer {
  position: relative;
  display: flex !important;
  width: fit-content;
  max-width: 100%;
  justify-content: center;
	margin: 16px auto 0 !important;
  padding: 0 !important;
}
.advice-popup-form input[type="submit"],
.advice-popup-form button[type="submit"] {
	width: auto !important;
	min-width: 0;
	min-height: 56px;
	padding: 11px 12px 11px 24px !important;
  border: 0 !important;
  border-radius: var(--ls-radius-small) !important;
  background: var(--ls-cyan) !important;
  color: var(--ls-white) !important;
	font-size: 18px !important;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--ls-motion-fast) ease;
}
.advice-popup-form input[type="submit"]:hover,
.advice-popup-form button[type="submit"]:hover { background: var(--ls-teal) !important; }
.advice-popup-form .gform_validation_errors { display: none; }
.advice-popup-form .validation_message { margin-top: 8px; color: #ffb2b2; }

.advice-popup-team {
  position: absolute;
  right: 50%;
  bottom: -2px;
  z-index: 2;
	width: min(66%, 530px);
	max-height: 38%;
  transform: translateX(50%);
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 1100px) {
  .brochure-panel { padding-inline: 48px; border-radius: 100px 0 100px 0; }
}

@media (max-width: 820px) {
	.ls-framed-image { --ls-framed-image-shape-right: -20px; }
  .advice-grid,
  .image-copy-grid { grid-template-columns: 1fr; }
  .advice-grid { gap: 72px; }
  .advice-copy,
  .image-copy-content { grid-row: 1; }
  .advice-image,
  .image-copy-visual { grid-row: 2; width: min(100%, 580px); }
	.showroom-section { padding-top: 80px; }
	.brochure-section { padding-block: 60px; }
	.brochure-panel { grid-template-columns: 1fr; gap: 20px; padding: 48px 38px 0; border-radius: 70px 0 70px 0; }
	.brochure-copy { padding-bottom: 20px; }
	.brochure-image { width: min(100%, 560px); margin-inline: auto; }
	.brochure-image img { width: 100%; margin: 0; transform: none; }
	.brochure-panel-shell::before { top: -14px; right: 26px; width: 190px; height: 90px; }
	.brochure-panel-shell::after { right: 26px; bottom: -28px; width: 190px; height: 90px; }

  .advice-popup-layer { padding: 0; }
  .advice-popup-panel { width: 100%; height: 100dvh; min-height: 0; overflow-y: auto; border-radius: 0; background-position: right bottom 80px; }
  .advice-popup-close { top: 14px; right: 14px; width: 48px; height: 48px; }
	.advice-popup-close svg { width: 24px; height: 24px; }
  .advice-popup-content { width: calc(100% - 36px); padding-top: 78px; }
  .advice-popup-content h2 { margin-bottom: 20px; font-size: 38px; }
  .advice-popup-copy { margin-bottom: 28px; font-size: 19px; }
  .advice-popup-form input:not([type="submit"]):not([type="hidden"]) { min-height: 66px; padding: 14px 18px !important; border-radius: 10px !important; font-size: 18px !important; }
  .advice-popup-form .gform_footer { margin-top: 18px !important; }
  .advice-popup-form input[type="submit"],
  .advice-popup-form button[type="submit"] { min-width: 0; min-height: 56px; padding: 11px 12px 11px 24px !important; border-radius: var(--ls-radius-small) !important; font-size: 18px !important; }
  .advice-popup-team { position: relative; right: auto; bottom: auto; width: calc(100% - 24px); max-height: none; margin: 36px auto 0; transform: none; }
}

@media (max-width: 560px) {
	.showroom-section { padding-top: var(--ls-section-space); }
	.showroom-inner { width: 100%; }
	.showroom-copy { margin-bottom: 58px; }
	.showroom-visual { width: 100vw; margin-left: calc(50% - 50vw); }
	.showroom-photo { height: 290px; border-radius: 46px 0 46px 0; }
	.decoration-one { top: -26px; left: 36%; width: 32%; }
	.decoration-two { right: 0; bottom: -28px; width: 34%; }
	.ls-framed-image { --ls-framed-image-radius: 50px 0 50px 0; }
	.ls-framed-image--contained-mobile { --ls-framed-image-shape-bottom: 4px; }
	.ls-framed-image--compact {
		--ls-framed-image-padding-right: 18px;
		--ls-framed-image-padding-bottom: 20px;
		--ls-framed-image-radius: 48px 0 48px 0;
	}
	.brochure-panel-shell { width: calc(100% - 20px); }
	.brochure-panel { width: 100%; padding: 40px 20px 0; border-radius: 50px 0 50px 0; }
  .dialog-layer { padding: 8px; }
  .calendly-dialog { height: calc(100dvh - 16px); border-radius: 22px 0 22px 0; }
}