/*clear*/
a, abbr, acronym, address, applet, article, b, big, blockquote,
caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font,
footer, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, ins, kbd,
label, legend, li, object, ol, p, pre, q, s, samp, section, small, span,
strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul,
var{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	vertical-align: baseline;
	font-size: 100%;
	font-style:normal;
	text-decoration:none;
	hyphens: auto;
	color:#000000;
}

body, html {
	background-color: #ffffff;
}

/* License file path for the following fonts: /fonts/SIL Open Font License.txt */
@font-face {
    font-family: 'Liberation Sans';
    src: url('/fonts/LiberationSans-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Liberation Sans';
    src: url('/fonts/LiberationSans-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Liberation Serif';
    src: url('/fonts/LiberationSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Liberation Serif';
    src: url('/fonts/LiberationSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/*general*/
body {
  line-height: 1em;
 -ms-overflow-y: scroll;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
  -webkit-text-size-adjust:100%;
  font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
}

/*theme-ish constants (from app palette)*/
:root{
	--c-black: #000000;
	--c-white: #ffffff;
	--c-beige: #E9D2AE;
	--c-beige-2: #F2EDE7;
	--c-beige-3: #FAF6F1;
	--c-red: #915452;
	--c-gray: #d8d0d0;
	--c-text: #111111;
	--c-text-muted: #444444;
	--c-text-light: #666666;
	--content-max: 58em;
}
/*decoration*/
.stripe{
	position:absolute;
	height:2px;
	width:100%;
	min-width:100%;
	left:0;
	top:0;
	background-color: var(--c-beige);
	z-index: 100;
}
/*links*/
a:link, a:visited {
	font-weight:normal;
	text-decoration: none;
	-webkit-transition: color 0.1s ease-in-out;
	-moz-transition: color 0.1s ease-in-out;
	-o-transition: color 0.1s ease-in-out;
	transition: color 0.1s ease-in-out;
}
a:hover {
	color: darkred;
	text-decoration: none;
}
a:focus-visible {
	outline: 2px solid darkred;
	outline-offset: 2px;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0.5em;
	background: #ffffff;
	color: #2A2020;
	padding: 0.5em 0.75em;
	border: 1px solid #2A2020;
	border-radius: 6px;
	z-index: 200;
}
.skip-link:focus,
.skip-link:focus-visible {
	left: 1em;
}
/*decoration*/
#mainWrapper{
	position:relative;
	width:92%;
	max-width:1800px;
	padding:1em;
	margin-left:auto;
	margin-right:auto;
}
#headerContainer{
	position:fixed;
	width: 18em;
	min-width: 12em;
	top: 2em;
	left: clamp(1em, calc(10vw - 10em), 10%);
	z-index: 50;
}

#headerContainer::before{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 5em;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 95%, rgba(255,255,255,0));
	z-index: -1;
	pointer-events: none;
}
#headerContainerTable{
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
}
#headerContainerTable td{
	vertical-align:baseline;
	padding: 0;
}
#leftLogo{
	font-size: 3.5em;
	text-align:left;
	white-space: nowrap;
}
#rightLogo{
	font-size:1.5em;
	text-align:right;
}
div#languageSelection{
	position:fixed;
	right: clamp(1em, calc(10vw - 10em), 10%);
	top: 2.5em;
	text-align:right;
	z-index: 60;
	background: transparent;
	padding: 0.3em 0.8em;
}
div#languageSelection > p{
	font-size:0.85em;
	white-space: normal;
}

*::-moz-selection {
   background: #d8d0d0; 
   #color: #FFFFFF;
}

/*menu*/
#menu{
	float:left;
	width: 10em;
	min-width: 8em;
	position:fixed;
	top: min(12vh, 12em);
	left: clamp(1em, calc(10vw - 10em), 10%);
	text-align:left;
	border-width:1px;
	border-color:#d8d0d0;
    font-size: 1.4em;
	line-height:1.5;
	z-index: 50;
}
#menu h1,h2,h3,h4,h5{
	font-weight:normal;
}
a.menu{
	display:inline-block;
	position:relative;
	padding-bottom:0.25em;
	padding-top:0.25em;
	width:90%;
}
a.subMenu{
	width:80%;
	padding-left:10%;
}
/*content*/
h1, h2, h3, h4, h5, h6{
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
}

#contentContainer h4{
	padding-bottom:0.5em;
	font-size: 2.1em;
	line-height: 1.1;
}
#contentContainer h5{
	padding-bottom:0.25em;
	padding-top:0.5em;
	font-size: 1.4em;
	line-height: 1.2;
}
#contentContainer h6{
	font-size: 1.15em;
}

h6{
	padding-top:1em;
	padding-bottom:0.5em;
}
li{
	margin:0 0 0.25em 0; 
}
p{
	padding-bottom:0.5em;
}
ul{
	list-style-type: square;
	padding-left: inherit;
	display: table;
	margin-left: 1em;
}
p.citation{
	padding-right:1.5em;
}
p.image{
	padding-top:1.5em;
	padding-bottom:1.5em;
}
#contentContainer{
	background-color: var(--c-white);
	position:absolute;
	float:right;
	top:16em;
	left: max(9%, 11em);
	width: 80%;
	text-align:left;
	line-height:1.65;
	font-size: 1.12em;
	box-sizing: border-box;
	padding: 2.5em 3em 2em;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.subMenuContainer{
	position:absolute;
	top:45px;
	right:470px;
	text-align:right;
	float:right;
	line-height:1.5em;
	border-right:solid;
	border-width:1px;
	border-color:#d8d0d0;
	padding-right:1em;
	padding-top:5px;	
	padding-bottom:5px;
}
.sidenote{
	background-color: #ffffff;
	position:absolute;
	float:right;
	top:270px;
	left:500px;
	padding:1em;
	width: 180px;
	text-align:justify;
	line-height:1.2em;
	border-left:solid;
	border-left-width:1px;
	border-left-color:#D8D0D0;
	padding-left:1em;
	padding-bottom:1.5em;
	font-size:0.85em;
}
blockquote{
	padding:1.2em;
	padding-top:0em;
}
address{
	font-style:normal;
}
hr{
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	border-top-color:#D8D0D0;
	border-bottom-color:#D8D0D0;
	margin-bottom:1.5em;
}
.withShadow{
	-moz-box-shadow: 2px 3px 4px #A8A0A0;
	-webkit-box-shadow: 2px 3px 4px #A8A0A0;
	box-shadow: 2px 3px 6px 3px #A8A0A0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#A8A0A0')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#A8A0A0');
}
.textShadow{
	text-shadow: 0.1em 0.1em 0.2em #A8A0A0;
}
.imageContainer{
	padding-top:1.5em;
	padding-left:1.5em;
	padding-bottom:1.5em;
}
.columnContainer {
	position:relative;
	text-align:center;
}
.triColumn{
	display: inline-block;
	text-align:justify;
	width:31%;
	margin:0;
}

.biColumn{
	display: inline-block;
	text-align:justify;
	width:45%;
	margin:2%;
}
.triInnerColumn{
	display: inline-block;
	text-align:justify;
	width:31%;
	margin-left:2%;
	margin-right:2%;
}
/*fonts*/
.serif{
	font-family: "Times", "Liberation Serif", "Times New Roman", serif;
}
.sans{
	font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
}
.normal{
	font-weight:normal;
}
.large{
	font-size:1.25em;
}
.bold{
	font-weight: bold;
}
.italic{
	font-style:italic;
}
i{
	font-style:italic;
}
.right{
	text-align:right;
	float:right;
}
/*colors*/
.orange{
	color:#000000;
}
.blue{
	color:#3040FF;
}
.sand{
	color:var(--c-beige);
}
.darkred{
	color:#9B5051;
}
.whiteGray{
	color:#F9F9F9;
}
.scrollUp{
	padding-bottom:0.3em;
}
.mobile{
	visibility:hidden;
}

#contactmap{
	width:100%;
	min-height:350px;
}


form {
  font-size: 1em;
  width: 100%;
}

form h5 {
  margin: 6em 0 0em;
  position: relative;
  padding-top: 0.5em;
  font-weight: bold;
}

form h5::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--c-beige);
}

.form-divider-survey {
  width: 100%;
  height: 20em;
  margin-top: 6em;
  background: url('/images/survey.png') center/contain no-repeat;
  background-blend-mode: lighten;
  opacity: 0.2;
}

.form-divider-living {
  width: 100%;
  height: 10em;
  margin-top: 6em;
  background: url('/images/living.png') center/contain no-repeat;
  background-blend-mode: lighten;
  opacity: 0.5;
}

.form-divider-estate {
  width: 100%;
  height: 25em;
  margin-top: 6em;
  background: url('/images/estate.png') center/contain no-repeat;
  background-blend-mode: lighten;
  opacity: 0.4;
}

form label {
  display: block;
  margin-top: 3em;
  margin-bottom: 0.3em;
  font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
}

form input[type="number"],
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 10em;
  border: 1px solid #d8d0d0;
  font-family: "Times", "Liberation Serif", "Times New Roman", serif;
  font-size: 1em;
  box-sizing: border-box;
}


form textarea {
  resize: vertical;
}

form input[type="checkbox"] {
  margin-right: 0.5em;
}

form select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 10em;
  padding: 0.4em;
  margin-top: 0.3em;
  font-size: 1em;
  font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  cursor: pointer;
}

form input[type="submit"],
form button {
  margin-top: 6em;
  padding: 0.5em 1.2em;
  background-color: var(--c-beige);
  border: none;
  font-size: 1em;
  font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  cursor: pointer;
}

form input[type="submit"]:hover,
form button:hover {
  background-color: #d8b584;
}


/* ================================================================
   HERO
   ================================================================ */
.hero-section{
	padding: 0 0 4em;
	margin-bottom: 1em;
}
.hero-headline{
	font-size: 3.4em;
	line-height: 1.08;
	font-weight: bold;
	padding-bottom: 0.4em;
	letter-spacing: -0.015em;
	font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
	max-width: 14em;
}
.hero-split{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 3em;
	align-items: center;
}
.hero-text{
	min-width: 0;
}
.hero-image{
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,0.08);
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.hero-image img{
	display: block;
	width: 100%;
	height: auto;
}
.hero-sub{
	font-size: 1.25em;
	line-height: 1.65;
	padding-bottom: 0.8em;
	color: var(--c-text-muted);
	max-width: 36em;
}
.hero-bullets{
	font-size: 1.15em;
	line-height: 1.65;
	color: var(--c-text-muted);
	max-width: 36em;
	padding-bottom: 2em;
	margin-left: 1.2em;
}
.hero-bullets li{
	margin-bottom: 0.4em;
}

.image-hero{
	width: 100%;
	margin-bottom: 2em;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.06);
}
.image-hero img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 22em;
	object-fit: cover;
}

/* ================================================================
   CTA BUTTON
   ================================================================ */
a.cta{
	display: inline-block;
	padding: 0.85em 2.2em;
	background-color: var(--c-beige);
	color: var(--c-black);
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
	font-size: 1.05em;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
a.cta:hover{
	background-color: #d8b584;
	color: var(--c-black);
}

/* ================================================================
   KICKER (section label above headlines)
   ================================================================ */
.kicker{
	font-size: 0.82em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-red);
	font-weight: bold;
	padding-bottom: 0.7em;
}

/* ================================================================
   SECTION ANCHOR (invisible target for scroll links)
   ================================================================ */
.section-anchor{
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
	visibility: hidden;
}

/* ================================================================
   MAJOR SECTIONS (generous spacing)
   ================================================================ */
.section-major{
	padding: 5em 0 4em;
	border-top: 1px solid var(--c-beige);
}
.section-major:first-of-type{
	border-top: none;
}
.section-headline{
	font-size: 2.2em;
	line-height: 1.15;
	font-weight: bold;
	padding-bottom: 0.7em;
	max-width: 18em;
	letter-spacing: -0.01em;
}
.section-lead{
	font-size: 1.18em;
	line-height: 1.7;
	color: var(--c-text-muted);
	max-width: var(--content-max);
	padding-bottom: 0.8em;
}

/* ================================================================
   SPLIT LAYOUTS (text + visual, alternating)
   ================================================================ */
.split-alt{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 4em;
	align-items: center;
}
.split-alt-reverse{
	grid-template-columns: 0.9fr 1.1fr;
}
.split-alt-text .kicker{
	padding-bottom: 0.6em;
}
.split-alt-text p{
	line-height: 1.7;
	color: var(--c-text-muted);
	max-width: 38em;
}
.split-alt-visual{
	width: 100%;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,0.08);
	background: var(--c-beige-2);
	overflow: hidden;
	padding: 1em;
	box-sizing: border-box;
}
.split-alt-visual img{
	display: block;
	width: 100%;
	height: auto;
}

/* ================================================================
   STICKY SCROLL PAIR (left scrolls, right sticks)
   ================================================================ */
.sticky-pair{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 4em;
	align-items: start;
	padding: 2em 0 4em;
}
.sticky-pair-scroll{
	padding-top: 1em;
}
.sticky-pair-visual{
	position: sticky;
	top: 6em;
	align-self: start;
}

/* ================================================================
   SCROLL SHOWCASE (full-width image → sticky sidebar)
   ================================================================ */
.scroll-showcase{
	position: relative;
	padding: 2em 0 4em;
}
.scroll-showcase.fade-in,
.scroll-showcase.fade-in.is-visible{
	transform: none;
}
.scroll-showcase-media{
	width: 100%;
	margin-bottom: 2em;
}
.scroll-showcase.is-active .scroll-showcase-media{
	position: sticky;
	top: 6em;
	z-index: 2;
}
.scroll-showcase-body{
	position: relative;
	padding-top: 1em;
}
.scroll-showcase.is-active .scroll-showcase-body{
	width: 55%;
}

.trail-item{
	padding: 2.5em 0;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.trail-item:first-child{
	border-top: none;
	padding-top: 0;
}
.trail-item h5{
	font-size: 1.3em;
	padding-bottom: 0.4em;
	padding-top: 0;
}
.trail-item p{
	line-height: 1.7;
	color: var(--c-text-muted);
	max-width: 32em;
}

/* ================================================================
   LOOP DIAGRAM (SVG)
   ================================================================ */
.cycle-visual{
	background: var(--c-beige-3);
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,0.06);
	padding: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cycle-visual *{
	background-color: transparent;
}
.cycle-svg{
	width: 100%;
	height: auto;
}
.cycle-node{
	fill: var(--c-white);
	stroke: var(--c-black);
	stroke-width: 2.5;
}
.cycle-node-accent{
	fill: var(--c-beige);
	stroke: var(--c-red);
	stroke-width: 3;
}
.cycle-label{
	font: 600 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
	fill: var(--c-black);
	text-anchor: middle;
	dominant-baseline: middle;
}
.cycle-edge{
	stroke: var(--c-red);
	stroke-width: 2.5;
	fill: none;
}
.cycle-return{
	stroke: var(--c-red);
	stroke-width: 2;
	fill: none;
	stroke-dasharray: 6 4;
}
.cycle-return-label{
	font: 500 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
	fill: var(--c-text-light);
	text-anchor: middle;
	letter-spacing: 0.08em;
}

/* ================================================================
   WARM BAND (full-bleed warm background)
   ================================================================ */
.warm-band-full{
	background-color: var(--c-beige-3);
	margin-left: -3em;
	margin-right: -3em;
	padding: 5em 3em;
}
.warm-band-full *{
	background-color: transparent;
}
.warm-band-full .split-alt-visual{
	background: var(--c-white);
}

/* ================================================================
   STAT BAND
   ================================================================ */
.stat-band{
	background-color: var(--c-beige-3);
	margin-left: -3em;
	margin-right: -3em;
	padding: 5em 3em;
}
.stat-band *{
	background-color: transparent;
}
.stat-band-inner{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3em;
}
.stat-item{
	text-align: center;
	background: transparent;
}
.stat-number{
	font-weight: bold;
	color: var(--c-red);
	font-size: 2.8em;
	line-height: 1;
	padding-bottom: 0.1em;
	font-family: "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
}
.stat-number-word{
	font-size: 2.8em;
}
.stat-label{
	font-size: 1.1em;
	font-weight: bold;
	color: var(--c-text);
	padding-bottom: 0.6em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.stat-item p{
	color: var(--c-text-muted);
	line-height: 1.6;
	max-width: 22em;
	margin: 0 auto;
	font-size: 0.95em;
	background: transparent;
}

/* ================================================================
   CLOSING SECTION
   ================================================================ */
.closing-section{
	padding: 6em 0 4em;
	border-top: 1px solid var(--c-beige);
	text-align: left;
}
.closing-section .section-headline{
	max-width: none;
}
.closing-section .section-lead{
	max-width: 40em;
	margin: 0;
	padding-bottom: 0;
}
.closing-row{
	display: flex;
	align-items: center;
	gap: 2.5em;
}

/* ================================================================
   MARQUEE (horizontal scrolling customer names)
   ================================================================ */
.marquee{
	overflow: hidden;
	position: relative;
	padding: 2em 0;
}
.marquee::before,
.marquee::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4em;
	z-index: 2;
	pointer-events: none;
}
.marquee::before{
	left: 0;
	background: linear-gradient(to right, var(--c-white), transparent);
}
.marquee::after{
	right: 0;
	background: linear-gradient(to left, var(--c-white), transparent);
}
.marquee-track{
	display: flex;
	width: max-content;
	animation: marquee-scroll 24s linear infinite;
}
.marquee:hover .marquee-track{
	animation-play-state: paused;
}
.marquee-track span{
	display: inline-block;
	white-space: nowrap;
	font-size: 1.4em;
	font-weight: bold;
	color: var(--c-text-muted);
	padding: 0 2.5em;
}
.marquee-track span a{
	color: var(--c-text-muted);
}
.marquee-track span a:hover{
	color: var(--c-red);
}
@keyframes marquee-scroll{
	0%  { transform: translateX(0); }
	100%{ transform: translateX(-50%); }
}

/* ================================================================
   SCROLL-TRIGGERED FADE-IN
   ================================================================ */
.fade-in{
	opacity: 0;
	transform: translateY(1.2em);
	transition: opacity 0.2s ease-out, transform 0.4s ease-out;
}
.fade-in.is-visible{
	opacity: 1;
	transform: translateY(0);
}

/* ================================================================
   SMOOTH SCROLL
   ================================================================ */
html{
	scroll-behavior: smooth;
}

/* ================================================================
   CONTACT / DEMO (kept for contact page)
   ================================================================ */
.demo-block{
	padding: 2.5em 2em;
	background-color: var(--c-beige-3);
	border-radius: 14px;
	margin: 2em 0;
}
.demo-block h5{
	font-size: 1.5em;
	padding-bottom: 0.5em;
}
.demo-block p{
	line-height: 1.6;
	color: var(--c-text-muted);
}

.contact-detail{
	padding: 0.4em 0;
}
.contact-detail + .contact-detail{
	border-top: 1px solid rgba(0,0,0,0.06);
}

/* ================================================================
   LEGACY COMPAT (kept for pages that still use old classes)
   ================================================================ */
.section{
	padding: 3em 0 2.5em;
}
.section + .section{
	border-top: 1px solid var(--c-beige);
}
.section-title{
	font-size: 1.8em;
	line-height: 1.15;
	font-weight: bold;
	padding-bottom: 0.6em;
}

.content-section{
	padding: 2.5em 0 2em;
	margin-bottom: 0;
	border-top: 1px solid var(--c-beige);
}
.content-section:first-child{
	border-top: none;
}
.content-section h5{
	font-size: 1.35em;
	padding-bottom: 0.5em;
}
.split{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5em;
	align-items: start;
}
.media-split{
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2.5em;
	align-items: start;
}
.side-image{
	width: 100%;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.08);
	background: var(--c-beige-2);
	overflow: hidden;
}
.side-image img{
	display:block;
	width:100%;
	height:auto;
}
.image-placeholder{
	width: 100%;
	min-height: 14em;
	background-color: var(--c-beige-2);
	border: 2px dashed rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 0.95em;
	margin: 1.5em 0;
	border-radius: 10px;
}
.image-placeholder.has-image{
	background-color: #ffffff;
	border-style: solid;
	padding: 0.75em;
	color: transparent;
	border-color: rgba(0,0,0,0.08);
}
.image-placeholder.has-image img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}
.image-placeholder-small{
	min-height: 8em;
}
.value-point{
	padding: 1.5em 0;
}
.value-point + .value-point{
	border-top: 1px solid rgba(0,0,0,0.06);
}
.value-point h6{
	font-size: 1.15em;
	font-weight: bold;
	padding-top: 0;
	padding-bottom: 0.35em;
}
.value-point p{
	color: var(--c-text-muted);
	line-height: 1.6;
}
.value-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 3em;
}
.warm-band{
	background-color: var(--c-beige-3);
	margin-left: -3em;
	margin-right: -3em;
	padding: 2.5em 3em;
}
.customer-strip{
	padding: 2em 0;
}
.customer-strip p.customer-label{
	font-size: 0.9em;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-bottom: 0.8em;
}
.customer-strip ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em 2em;
}
.customer-strip ul li{
	font-size: 1.05em;
	color: #555;
	margin: 0;
}
.highlight{
	padding: 1.5em 0;
}
.highlight-label{
	font-size: 0.9em;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #666;
	font-weight: bold;
	padding-bottom: 0.5em;
}
.highlight p{
	line-height: 1.6;
	color: var(--c-text-muted);
}
.kpi{
	font-weight: bold;
	color: var(--c-red);
	font-size: 4.2em;
	line-height: 1;
	padding: 0.1em 0 0.2em;
}
.kpi-sub{
	color: #666;
	font-size: 1.0em;
	line-height: 1.4;
}
.indent{
	padding-left: 1.25em;
	border-left: 3px solid rgba(0,0,0,0.10);
}
.ref-list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.ref-list li{
	padding: 0.6em 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	margin: 0;
}
.ref-list li:last-child{
	border-bottom: none;
}
.ref-list a{
	color: var(--c-red);
}
.ref-list a:hover{
	color: darkred;
	text-decoration: underline;
}
.statement{
	padding: 4em 0 2em;
}
.statement-headline{
	font-size: 2.4em;
	line-height: 1.12;
	font-weight: bold;
	max-width: 18em;
}
.statement-sub{
	font-size: 1.18em;
	line-height: 1.65;
	color: var(--c-text-muted);
	max-width: 36em;
	padding-top: 0.8em;
}
.promise-split{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3em;
	align-items: start;
	padding: 2em 0;
}
.promise-side .kicker{
	padding-bottom: 1em;
}
.promise-item{
	padding: 1.2em 0;
}
.promise-item + .promise-item{
	border-top: 1px solid rgba(0,0,0,0.06);
}
.promise-item h6{
	padding-top: 0;
	padding-bottom: 0.25em;
	font-size: 1.1em;
}
.promise-item p{
	color: var(--c-text-muted);
	line-height: 1.55;
}
.section-lg{
	padding: 4.5em 0 3.5em;
}
.section-lg + .section{
	border-top: 1px solid var(--c-beige);
}
.section + .section-lg{
	border-top: 1px solid var(--c-beige);
}
.role{
	padding: 1.2em 0;
}
.role + .role{
	border-top: 1px solid rgba(0,0,0,0.06);
}
.role h6{
	padding-top: 0;
	padding-bottom: 0.3em;
}
.sep{
	border: none;
	height: 1px;
	background: var(--c-beige);
	margin: 3em 0;
}
.feature-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25em;
	padding: 1em 0;
}
.feature-item h6{
	font-size: 1.1em;
	padding-bottom: 0.3em;
	padding-top: 0;
}
.feature-item p{
	font-size: 0.95em;
	color: #444;
	line-height: 1.45;
}
.feature-item{
	padding: 0.5em 0;
}
.usecase{
	padding: 2em 0 1.5em;
	margin: 0;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.usecase:first-of-type{
	border-top: none;
}
.usecase h5{
	font-size: 1.25em;
	padding-bottom: 0.3em;
}
.usecase p{
	color: #444;
}
.panel{
	padding: 0;
}
.panel-title{
	font-size: 0.9em;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #666;
	font-weight: bold;
	padding-bottom: 0.6em;
}
.getstarted-section{
	padding: 2em 0;
}
.getstarted-section h5{
	padding-bottom: 0.5em;
}
.getstarted-actions{
	padding-top: 1em;
}
.getstarted-actions p{
	font-size: 1.05em;
}

/* ================================================================
   TABLET / NARROW LAPTOP (side menu collapses to top)
   ================================================================ */
@media all and (max-width: 1100px) {
	#mainWrapper{
		width: 94%;
		padding: 0.5em;
	}
	#headerContainer{
		position: static;
		width: 100%;
		min-width: 0;
		height: auto;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		padding: 0.8em 0;
		background: var(--c-white);
	}
	#headerContainerTable{
		position: static;
		width: auto;
		order: -1;
	}
	#leftLogo{
		font-size: 2.8em;
	}
	#headerContainerTable{
		flex: 0 0 auto;
	}
	#headerContainerTable #leftLogo,
	#headerContainerTable #leftLogo h1,
	#headerContainerTable #leftLogo a{
		white-space: nowrap;
	}
	div#languageSelection{
		position: static;
		text-align: right;
		padding: 0;
		margin: 0;
		background: none;
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	div#languageSelection > p{
		font-size: 0.85em;
		padding: 0;
		margin: 0;
		white-space: normal;
	}
	#menu{
		position: static;
		width: 100%;
		min-width: 0;
		float: none;
		display: flex;
		gap: 1.5em;
		font-size: 1.6em;
		line-height: 1;
		padding: 0.6em 0 1em;
		border-bottom: 1px solid var(--c-beige);
		margin-bottom: 0.5em;
	}
	#menu h4{
		display: inline;
	}
	a.menu{
		width: auto;
		padding: 0.2em 0;
	}
	#contentContainer{
		position: static;
		float: none;
		width: 100%;
		left: auto;
		top: auto;
		padding: 2em 2.5em;
	}
	.hero-split{
		grid-template-columns: 1fr;
		gap: 2em;
	}
	.sticky-pair-visual{
		position: static;
	}
	.scroll-showcase-media{
		width: 100% !important;
		margin-left: 0 !important;
	}
	.scroll-showcase-body{
		width: 100%;
		margin-top: 0 !important;
	}
	.stat-band,
	.warm-band-full{
		margin-left: -2.5em;
		margin-right: -2.5em;
		padding: 4em 2.5em;
	}
}

/* ================================================================
   MOBILE
   ================================================================ */
@media all and (max-width: 700px) {
	#mainWrapper, #rightLogo, #leftLogo, #contentContainer, .subMenuContainer,#headerContainer,#headerContainerTable td,
	#headerContainerTable,table, #menu, .sidenote, div#languageSelection, div#languageSelection > p{
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		width:auto;
		min-width:0;
		float:none;
		position:static;
	}
	body{padding:0.25em;}

	#headerContainer{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		padding: 0.5em 0;
		width: 100%;
	}
	#headerContainerTable{order: -1;}
	#headerContainerTable #leftLogo{font-size:2.2em;padding-top:0.5em;}
	#headerContainerTable #leftLogo,
	#headerContainerTable #leftLogo h1,
	#headerContainerTable #leftLogo a{white-space: nowrap;}
	#headerContainerTable #rightLogo{font-size:1.5em;padding-top:3.0em;float:right;text-align:right;}
	div#languageSelection{
		text-align: right;
		background: none;
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	div#languageSelection > p{font-size:0.85em;white-space: normal;}
	.stripe{min-width:100%;}
	#menu{
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		font-size: 1.3em;
		line-height: 1;
		padding: 0.5em 0 0.8em;
		border-bottom: 1px solid var(--c-beige);
		margin-bottom: 0.5em;
	}
	#menu h4{ display: inline; }
	a.menu{ width: auto; padding: 0.2em 0; }
	.sidenote{display:none;}
	#contentContainer{font-size:1.12em;padding:1em 0.75em;border:none;box-shadow:none;border-radius:0;}
	div#contentContainer > p{padding-left:0;padding-right:0;}
	blockquote{font-size:1em;padding:0.3em;padding-bottom:1em;}
	.subMenuContainer{padding-top:0.5em;padding-bottom:0.5em;margin-bottom:0.5em;border-bottom:solid; border-width:2px; border-right:none;font-size:1.5em;}
	.mobile{ visibility:visible; }
	ul { list-style-type: square; }
	li { display: list-item; }

	.hero-headline{font-size:2em;line-height:1.12;}
	.hero-split{grid-template-columns:1fr;gap:2em;}
	.hero-sub{font-size:1.05em;}
	.section-headline{font-size:1.5em;}
	.section-major{padding:2.5em 0 2em;}

	.split-alt{grid-template-columns:1fr;gap:2em;}
	.split-alt-reverse{grid-template-columns:1fr;}
	.sticky-pair{grid-template-columns:1fr;gap:2em;}
	.sticky-pair-visual{position:static;}
	.scroll-showcase-media{width:100% !important;margin-left:0 !important;}
	.scroll-showcase-body{width:100%;margin-top:0 !important;}
	.stat-band-inner{grid-template-columns:1fr;gap:2.5em;}
	.stat-band{margin-left:-0.75em;margin-right:-0.75em;padding:2.5em 0.75em;}
	.warm-band-full{margin-left:-0.75em;margin-right:-0.75em;padding:2.5em 0.75em;}
	.stat-number{font-size:2.8em;}
	.stat-number-word{font-size:1.8em;}

	.feature-grid{grid-template-columns:1fr;}
	.customer-strip ul{flex-direction:column;gap:0.5em;}
	.image-placeholder{min-height:8em;}
	.image-hero{border-radius:8px;}
	.warm-band{margin-left:-0.75em;margin-right:-0.75em;padding:1.5em 0.75em;}
	.split{grid-template-columns:1fr;}
	.media-split{grid-template-columns:1fr;}
	.value-grid{grid-template-columns:1fr;}
	.demo-block{margin-left:-0.75em;margin-right:-0.75em;padding:1.5em 0.75em;}
	.promise-split{grid-template-columns:1fr;}
	.statement-headline{font-size:1.5em;}
	.section-lg{padding:2.5em 0 2em;}
	.marquee-track span{font-size:1.1em;padding:0 1em;}
	.closing-section{padding:2.5em 0 2em;}
	.closing-row{flex-direction:column;align-items:flex-start;gap:1em;}

	.fade-in{
		opacity: 1;
		transform: none;
		transition: none;
	}
}