/* np2023.css */

:root {
    --header-height:105px;
    --orange-text:#FF9E03;
    --blue-text:#1d88ca; /* from light blue in NP logo */
    --dark-blue-text:#074873; /* from dark blue in NP logo */
    --blue-zone-blue: #22B7F9;
    --interior-aqua-blue: #5CBED9;
    --mission-vision-blue: #E2F9FF;
    --nav-background:#0887C9;
    --nav-split-yellow:#C7B026;
    /* body part dimensions */
    --main-gutter-max-width:1125px; /* was 1280px */
    --main-gutter-width-percent:90%;
    /* max gutter width of 1125px hit at VW = 1250px */
    /* max gutter width of 1280px hit at VW = 1422px */

    --top-panel-min-height:max(250px,26vw);
    --top-panel-bottom-margin:2%;
    --footer-height:50px;
}

.push-footer{
    min-height:50VH;
}

.show-outlines .outline-elements,
.show-outlines .outline-elements * {
    outline:1px solid rgba(255,0,0,0.25);
}

a[href^=tel]:link,
contact-phone a:link {
    color:inherit !important;
    text-decoration: none;
}

#scroll_position_monitor {
    position:fixed;
    left:0px;
    top:50%;
    z-index:1000001;
    background-color:white;
    color:black;
    padding:5px;
    left:5px;
}
.for-seo-benefit,
body .hide {
    display:none;
}
body.inverted-colors {
    color:white;
    background-color: black;
}
.general-container,
.main-page-container {
    width:var(--main-gutter-width-percent);
    max-width:var(--main-gutter-max-width);
    margin:0px auto;
}
.general-container:not(.no-padding) {
    padding:3% 0%;
}
page-header-wrapper {
    transition: color 250ms linear, background-color 250ms linear, opacity 250ms linear;
    display: block;
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    z-index: 2;
    color:white;
}
page-header-wrapper + first-page-element {
    display:block;
    position: relative;
}
.not body:not(.home) first-page-element {
    margin-top:var(--header-height);
}

.not page-header-wrapper.fade-back {
    transition: color 250ms linear, background-color 250ms linear, opacity 250ms linear;
}
@media only screen and (min-width:768.1px) {
    /* only hide page header wrapper when not in full-page nav mode */
    page-header-wrapper.hidden {
        opacity: 0;
        pointer-events: none;
        /* display:none; */
    }
}
page-header {
    display:grid;
    grid-template-columns: 4fr 3fr 40px;
    padding:25px 0px 10px;
    position: relative;
    z-index: 1;
    height:var(--header-height);
}
/* body.lock-header page-header {
    position:fixed;
} */

#header_placeholder { /* this is used to tell when page has scrolled enough to change page header properties */
    position: absolute;
    top:0px; /* override flex centering */
    width: 1px; /* give element some dimension */
    height:var(--header-height);
}
/* --- VISIBILITY CLASSES --- */
@media only screen and (min-width:1020.1px) {
    body .hide-on-desktop {
        display:none !important;
    }
}
@media only screen and (min-width:768.1px) and (max-width:1020px) {
    body .hide-on-tablet {
        display:none !important;
    }
}
@media only screen and (max-width:768px) {
    body .hide-on-mobile {
        display:none !important;
    }
    body:not(.home) page-header-wrapper.scrolled {
        background-color:white;
    }
}

@media only screen and (min-width:768.1px) {
    .not page-header-wrapper {
        inset:0px;
    }
    page-header-wrapper.scrolled {
        box-shadow: 0px 0px 15px 0px #A0A0A0;
    }
    /* body:not(.home) page-header-wrapper, */
    /* .header-stuff-black-on-scroll */ page-header-wrapper.scrolled,
    /* .header-stuff-black-on-scroll */ page-header-wrapper.sunlight {
        color:black;
        background-color: white;
    }
    /* .header-stuff-black-on-scroll */ page-header-wrapper.scrolled .nav-item.inverted,
    /* .header-stuff-black-on-scroll */ page-header-wrapper.sunlight .nav-item.inverted {
        color:white;
        background-color:black;
    }
    /* .header-stuff-black-on-scroll */ page-header-wrapper.scrolled .search-icon svg,
    /* .header-stuff-black-on-scroll */ page-header-wrapper.scrolled .nav-burger svg,
    /* .header-stuff-black-on-scroll */ page-header-wrapper.sunlight .search-icon svg,
    /* .header-stuff-black-on-scroll */ page-header-wrapper.sunlight .nav-burger svg {
        fill:#000;
    }
}
/* .header-stuff-black-on-scroll */ page-header-wrapper.scrolled .nav-burger,
/* .header-stuff-black-on-scroll */ page-header-wrapper.sunlight .nav-burger {
    --burger-border-color:black;
}

np-logo {
    grid-area: logo;
}
np-logo img,
.footer-logo img {
    height:50px;
}
np-logo.nav-link {
    display:flex;
    align-items: center; /* vcenter logo image */
}
@media only screen and (max-width:530px) {
    np-logo img {
        height:auto;
        max-width:34vw;
    }
}

body:not(.home) page-header-wrapper.hidden:not(.scrolled) .color-logo,
body:not(.home) page-header-wrapper:not(.scrolled,.hidden) .color-logo,
body:not(.home) page-header-wrapper.hidden.scrolled .white-logo,
body.home page-header-wrapper .color-logo,
/* .header-stuff-black-on-scroll */ body.home page-header-wrapper:not(.sunlight,.scrolled) .color-logo,
/* .header-stuff-black-on-scroll */ body.home page-header-wrapper.scrolled .white-logo,
/* .header-stuff-black-on-scroll */ body.home page-header-wrapper.sunlight .white-logo {
    display:none;
}

.nav-burger {
    --burger-border-color:white; /* until scrolled, then need to invert */
    display: none;
    position:relative;
    border:none;
    background-color: transparent;
    padding:0px;
}
.nav-burger svg {
    fill: var(--heading-blue-lines);
    fill-opacity: 0; /* turn off SVG visibility */
    visibility: hidden; /* also hide it this way */
    pointer-events: none; /* no clicks! */
}
.nav-burger i.third-burger-line,
.nav-burger::before,
.nav-burger::after {
	content: '';
	border-top: 3px solid var(--burger-border-color);
	width: calc(min(30px,80%));
	top: 30%;
    left:15px;
	position: absolute;
	/* translate: 0px 10px; */
    transition: 400ms ease;
}
.nav-burger::after {
    top:auto;
	bottom: 30%;
}
.nav-burger i.third-burger-line {
    top: 47.5%;
}
.nav-burger[aria-expanded="true"]::before {
    rotate:225deg;
    translate:0px 10px;
}
.nav-burger[aria-expanded="true"]::after {
    rotate:-225deg;
    translate:0px -11px; /* this helps both lines intersect evenly */
}
.nav-burger[aria-expanded="true"] i.third-burger-line {
    opacity:0;
}

nav {
    display:flex;
    justify-content: space-around;
    align-items: center;
    min-width: 400px;
    /* override page header wrapper text color */
    color:white;
}
.nav-link,
.nav-item {
    cursor:pointer;
}
.nav-item {
    padding:20px 10px 20px 0px;
}
.nav-item.inverted {
    color:black;
    background-color:white;
}
.subnav-arrow {
    display: none;
}
.has-subnav .subnav-arrow {
	rotate: 90deg;
	display: inline-block;
	margin-left: 10px;
	translate: 0px 3px;
}
.animate-underline {
    position: relative;
}
.animate-underline::after {
    content:'';
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid gray;
    width:100%;
    max-width: 0;
    transition:max-width 250ms linear;
}
.nav-item:hover > .animate-underline::after,
.learn-more-link:hover > .animate-underline::after {
    max-width: 100%;
}

/* currently for the what-we-do nav item */
.sub-nav {
    display: none;
    position: absolute;
    left:min(0px,calc((100% - 100vw) / 2));
    right:min(0px,calc((100% - 100vw) / 2));
    translate:0px 20px;
    padding:35px 0px 20px;
    /* color:black; */
    background-color: black;
    transition: background-color 250ms linear;
}
.has-subnav:hover .sub-nav:not(.hide),
.show-subnav .sub-nav {
    display:block;
}
@media only screen and (min-width:768.1px) {
    page-header-wrapper.scrolled .sub-nav,
    page-header-wrapper.sunlight .sub-nav {
        background-color:white;
    }
}
page-header-wrapper.scrolled .sub-nav {
    box-shadow: 0px 10px 10px -5px #A0A0A0;
}
.has-subnav {
    touch-action: none; /* this will block drag-scroll action for mobile */
}
big-headline,
small-headline {
    font-size:25px;
    display:block;
}
big-headline {
    font-weight: bold;
}
small-headline {
    font-size:20px;
    position: relative;
    margin-bottom:10px;
}
.orange-text {
    color:var(--orange-text);
}
.blue-text {
    color:var(--blue-text);
}
.dark-blue-text {
    color:var(--dark-blue-text);
}
.category-body {
    font-size:14px;
    flex-grow: 1;
}
.sub-nav-list {
    list-style-type: none;
    padding-left:0px;
    margin-top:25px;
    display:grid;
    grid-template-columns: repeat(6,1fr);
    gap:10px;
}

.sub-nav-list li:not(:first-child) {
    margin-left:10px;
}

.sub-nav-list li {
    display:flex;
    flex-direction: column;
}

.learn-more-link {
    margin-top:20px;
    font-size:14px;
}

search-area {
    display: flex;
    align-items: center;
}
search-area:hover .search-entry,
search-area.show-entry .search-entry {
    display: block;
}
.search-entry {
    display:none;
    position:absolute;
    left:min(0px,calc((100% - 100vw) / 2));
    right:min(0px,calc((100% - 100vw) / 2));
    top:-18px; /* stabilize position as result element affects height */
    translate:0px 90px;
    color:black;
    background-color:white;
    padding:35px 0px 20px;
    box-shadow: 0px 10px 10px -10px #A0A0A0;
}
.search-entry input {
    border-width:0px 0px 2px 0px;
    border-color:gray;
    font-size:20px;
}
.search-icon {
    padding:15px 0px; /* 2x15px + 36px = 66px */
}
.search-icon svg {
    transform:rotateY(180deg);
}
.clear-search:not(.show),
.search-results:not(.show-results) {
    display: none;
}
.search-results {
    margin-top:10px;
}
.search-result {
    padding:5px 10px;
    cursor: pointer;
}

search-entry-form {
    display: flex;
    gap:10px;
}
.search-terms-entry {
    flex-grow:1;
}
.search-terms-entry:focus {
    outline:none;
}
.search-terms-entry:focus::placeholder {
    opacity:0;
}
phone-area {
    --phone-elements-size:24px;
    grid-area:phone;
    display:flex;
    align-items: center;
    font-size:var(--phone-elements-size);
}
.phone-icon {
    margin-right:0.5em;
    display:inline-flex; /* v-center element */
}
.phone-icon svg {
    animation: ringing 5s linear infinite;
    height:var(--phone-elements-size);
    width:var(--phone-elements-size);
}
@keyframes ringing {
    0%, 20% {
        rotate:0deg;
    }
    2%,10%,18% {
        rotate:-10deg;
    }
    6%,14% {
        rotate:10deg;
    }
}

/* back to top appears only after page scrolls down slightly */
#go_to_top {
    display: none;
    position: fixed;
    bottom: 3em;
    right:1.5em;
    z-index:200;
    height:auto;
    width: 50px;
}
#go_to_top.show {
    display: block;
}

/* page footer */
page-footer-wrapper {
    background-color:black;
    color:white;
    padding:40px 0px;
}
page-footer-wrapper,
page-footer {
    display:block;
}

page-footer {
    display: flex;
    align-items: center;
    gap:25px;
}
.footer-logo img {
    height:50px;
}
.footer-linked-in {
    margin-left:auto; /* right justify element */
}
page-footer img.linked-in {
	width: 48px;
}
/* hero section on home page */
.top-panel, /* for interior pages */
.video-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 35.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items:center; */
    /* margin-top:calc(-1 * var(--header-height)); */
}
.top-panel {
    min-height:var(--top-panel-min-height); /* prevent overshrinkage */
    margin-bottom:var(--top-panel-bottom-margin); /* 2%; */
    background-color: var(--interior-aqua-blue);
}
.services-page .top-panel {
    background-color: var(--orange-text);
}
#video_bg {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    width: 100%;
    height: auto;
}
.video-wrapper::before {
    content:'';
    position: absolute;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 1;
}
#hero_bg_field {
	content: '';
	display: block;
	height: calc(100% - var(--header-height));
	position: absolute;
	bottom: 0px;
	background-color: var(--blue-zone-blue);
	z-index: 1;
	opacity: 0.5;
	right: 0px;
	width: 66%;
}
hero-rotating-text.main-page-container {
    position: relative;
    display:block;
    z-index: 1;
    /* padding-left: max(5%,calc(50% - (0.5 * var(--main-gutter-max-width)))); */
    /* padding-right: max(5%,calc(50% - (0.5 * var(--main-gutter-max-width)))); */
    /* width:calc(66% - 0.5em); */
    /* margin-left:5%; */
    /* margin-right:auto; */
}
huge-headline {
    font-size:min(2.9vw,47px); /* 72px */
    display: block;
    z-index: 1;
    color:white;
    position:relative;
}
.not huge-headline > span {
    margin-left:-3.5em;
}
hero-text-blocks {
    display:flex;
    overflow:hidden;
    color:white;
    max-width: min(66%,calc(0.67 * var(--main-gutter-max-width)));
}
hero-text-blocks div {
    flex-basis: 100%;
    flex-shrink: 0; /* allow content to fill width of parent container */
    translate:0%;
    opacity: 0;
    transition: opacity 250ms linear;
}
hero-text-blocks div.show {
    opacity: 1;
}
hero-text-blocks.block2 div {
    translate:-100%;
}
hero-text-blocks.block3 div {
    translate:-200%;
}

.learn-more {
    margin-top:15px;
    font-size:20px;
    z-index:1;
}

.interior-hero-panel-text {
    text-align: center;
    font-size:clamp(20px,3.2vw,40px); /* retuned to max content width of 1125px */
    color:white;
    line-height: 1;
    margin-bottom:0px;
}
@media only screen and (max-width:625px) {
    .interior-hero-panel-text br {
        display:none;
    }
}
.thin-italic {
    font-family:Roboto;
    font-style: italic;
    font-weight: 100;
}
.content-selector {
    display:flex;
    justify-content: space-between;
    border-bottom: 2px solid lightgray;
}
.content-selector li {
    padding:5px 0px;
    color:var(--blue-text);
    cursor:pointer;
    margin-bottom:-2px;
    font-size:24px;
}
.content-selector li.active {
    border-bottom:2px solid var(--blue-text);
}

.large-heading {
    font-size:clamp(37px,4vw,68px); /* 5.5vw */
}
.large-body {
    font-size:clamp(18px,1.8vw,22px);
}
.larger-body {
    font-size:clamp(18px,1.9vw,23.75px);
}
.general-container.second-panel {
    padding-top:0%;
}
.second-panel {
    display:flex;
    justify-content: space-between;
}
.second-panel left-column {
    flex:0 0 66%;
}
.second-panel contact-form-column.fixed {
	position: fixed;
	right: calc(50vw - (0.5 * var(--main-gutter-max-width)));
	bottom: 50%;
	translate: 0px 50%;
}
.not contact-form-sb-trigger {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 250px;
  width: 20px;
  background-color: rgba(255,0,0,0.25);
  translate: 0px -100%;
}
contact-form-column {
    --shift-form-up:-100px;
    background-color: #EEE;
    translate:0px var(--shift-form-up); /* allow some kenetic of this based on VW */
    display:flex;
    flex-direction: column;
    margin-bottom:auto;
    flex:1 0 0%;
    margin-left:25px;
    padding:25px 40px;
    color:black;
}
@media only screen and (max-width:768px) {
    .second-panel {
        flex-direction: column;
    }
    contact-form-column {
        translate: 0px 0px;
        margin-left:0px;
    }
}
.cf-header {
    text-align: center;
    font-size:20px;
}

/* TYPING CSS - MOVED TO np_typing.css */

/* image rotation with slider */
.products-list-wrapper {
    background-color: white;
    color:black;
    padding:10px 0px;
}
.products-list {
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap:10px;
    overflow:hidden; /* prevent image sliding from causing scroll condition */
}

.fade-slider {
    position:relative;
    /* width:calc((90vw - 10px) * 2 / 3); */
    min-height:calc(min( (90vw - 10px) * 1 / 3, 365px ) );
}
.fade-slider img {
    position:absolute;
    width: 100%;
    opacity: 0;
    margin-left:-50%;
    transition:opacity 500ms linear, margin 500ms ease-in-out;
}
.fade-slider img.active {
    opacity:1;
    margin-left:0;
}
.fade-slider img.active.out {
    opacity:0;
    margin-left:50%;
}
.product-item {
    cursor: pointer;
}
.product-item.active {
    font-weight: bold;
}
.product-item:not(:first-child) {
    margin-top:15px;
}
.product-descriptions {
    position: relative;
    z-index:1; /* help element render above images container */
}

/* mission-vision panel */
.mission-vision-panel {
    background-color:var(--mission-vision-blue);
}
.two-cols {
    display:flex;
    gap:25px;
}
@media only screen and (max-width:768px) {
    .two-cols {
        flex-direction: column;
    }    
}
.two-cols left-column,
.two-cols right-column {
    flex:1;
}
content-wrap {
    position:relative;
    display:flex;
    flex-direction: column;
    background-color: var(--mission-vision-blue);
    border-radius:10px;
    overflow:hidden;
}
content-border {
    position:absolute;
    inset:0px;
    border:1px solid var(--blue-text);
    border-radius:10px;
}
.two-cols .with-shadow {
    position:relative;
    flex:1;
    display:flex; /* make content flow full height of container */
}
.two-cols shadow-element {
    position:absolute;
    inset:0px;
    border-radius:12px;
    /* background-color: var(--dark-blue-text); */
    /* translate:2px 2px; */
    box-shadow: 4px 4px 10px -5px var(--dark-blue-text);
}
.mission-vision-image {
    width:calc(100% + 1px);
    position: relative;
    top:-2px;
    left:-1px;
}
padded-block {
    display:block;
    padding:20px 20px 0px;
}

/* core values panel */
.core-values-panel {
    background-color: #EEE;
}
.panel-headline {
    margin-bottom:3%;
    text-align: center;
    color:var(--blue-text);
    font-weight: 100;
}
.three-cols {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px 15px;
}
column-cell.with-shadow {
    box-shadow:10px 10px 10px 0px lightgray;
    border-radius: 0px;
}
column-cell {
    min-height: 270px;
    padding:25px 15px;
    background-color:white;
    border-radius:10px;
    border:1px solid lightgray;
    display:flex;
}
core-value-cell {
    display:flex;
    flex-direction: column;
}
cell-image {
    --img-size: min(4.8vw,60px);
    /* margin:0px auto 10px 0px; */
    /* outline:1px solid #EEE; */
    width:var(--img-size);
    height:var(--img-size);
}
cell-image img {
    display: block;
    width:100%;
    height:auto;
}
cell-heading {
    color:var(--blue-text);
    font-weight: 100;
    font-size: clamp(18px,2.4vw,30px); /* min:25.4px */
    line-height: 1;
    margin:10px 0px;
}
cell-body {
    font-size:18px;
}
@media only screen and (max-width:768px) {
    cell-image {
        --img-size:min(75px,8.2vw);
    }
    .three-cols {
        grid-template-columns: 1fr 1fr;
    }
    cell-heading {
        font-size:clamp(18px,3.625vw,30px);
    }
    cell-body {
        font-size:16px;
    }
}

/* design-dev section */
design-dev-wrapper {
    display: block;
    position: relative;
    z-index: 1;
    background-color: white;
    color:black;
}
#observerStat {
    position: absolute;
    left:10px;
    top:10px;
    background:white;
    color:black;
    padding:3px;
}
design-dev {
    display: grid;
    grid-template-columns: 50% 50%;
}

design-dev left-column {
    padding:20px 0px;
}
design-dev right-column {
    position: relative;
}
@media only screen and (min-width:768.1px) {
    design-dev left-column {
        padding:20px 50px 100px 0px;
    }
}

p.very-large-text,
p.large-text {
    font-size:clamp(16px,2.9vw,30px);
    line-height: 1.2;
}
p.very-large-text {
    font-size:clamp(22px,4vw,57px);
}
p.small-text {
    font-size:clamp(14px,2vw,16px);
}

.link-button,
.talk-button {
    padding:5px 20px;
    font-size:20px;
    background-color:var(--blue-text);
    /* margin:0px auto; */
    display: block;
    border:none;
}
.link-button {
    background-color: white;
    color:var(--blue-text);
}
.link-button:hover {
    background-color: var(--blue-text);
    color:white;
}

/* nested container to limit vertical shift from left-column height changes */
moving-images {
    display:block;
    position:relative;
    top:-15%;
}
design-dev right-column .desktop-view {
    /* position: relative; */
    width:100%;
    /* top:-12.5%; */
}
design-dev right-column .mobile-view {
    position:absolute;
    width:42%;
    top:75%;
    left:-2%;
}
design-dev right-column .laptop-view {
    position: absolute;
    width:70%;
    right:-21%;
    top:66%;
}

design-dev-wrapper:not(.gather-images) .desktop-view {
    translate: 0px -50px;
}
design-dev-wrapper:not(.gather-images) .mobile-view {
    translate: -40px 30px;
}
design-dev-wrapper:not(.gather-images) .laptop-view {
    translate: 0px 30px;
}

design-dev right-column img {
    transition:translate 500ms ease-in-out;
}

/* panel with blue chevron behind topmost image */
products-services-wrapper {
   display: block;
   color: black;
}
products-services {
    --blue-zone-blue:var(--blue-text);
    display:block;
}
.blue-zone {
    background-color: var(--blue-zone-blue);
    /* margin-bottom:25px; */
    position: relative;
    display: flex;
    /* grid-template-columns: 47% 53%; */
    padding:50px 0px;
}
/* create element to cover background edge-to-edge of browser outside page-main-column */
.blue-zone::before {
    content:'';
    position: absolute;
    height: 100%;
    top:0px; /* element has padding, set top 0 to assure position */
    left:min(0px,calc((100% - 100vw)/2)); /* reach to browser edge */
    right:min(0px,calc((100% - 100vw)/2));
    background-color: var(--blue-zone-blue);
    outline:1px solid var(--blue-zone-blue);
}
.blue-zone left-column {
    position: relative;
    /* width: calc(100% + 10vw); */
    margin-left:min(0px,calc((100% - 100vw)/2));
    /* margin-right:20px; */
}
.blue-zone img {
    width:100%;
}
.blue-zone right-column {
    z-index: 1; /* the ::before content will cover this element if not raised via z-index */
    position: relative; /* need position relative to make z-index work */
    color:white;
}
.blue-zone .padded-box {
    padding-left:40px; /* help maintain left column size while adding space between img+text */
}
/* add shapes that run edge-to-edge */
.blue-arrow,.blue-triangle {
    margin:0px min(0px,calc((100% - 100vw)/2));
    background-color:white;
}
.blue-arrow-svg,.blue-triangle-svg,.blue-arrow {
    height:50px;
}
.blue-arrow-svg,.blue-triangle-svg {
    width: 100%;
}
.blue-arrow-path,.blue-triangle-path {
    fill:var(--blue-zone-blue);
}
.blue-arrow svg {
    transform-origin: top center;
    scale:100% 100%;
    transition:scale 0.5s linear;
}
.blue-arrow:not(.show) svg {
    scale:100% 0%;
}

/* === HOME PAGE - SERVICES PANEL === */
services-with-icons {
    display:flex;
    gap:3vw;
    margin:9em 0px 3em;
    position: relative;
}
services-with-icons.show-design::before {
    content:'';
    position:absolute;
    inset:0px;
	background-repeat: no-repeat;
	background-position: 110px -84px;
	background-image: url('/assets/design/circles_panel.png');
	background-size: 100%;
    opacity: 0.5;
}
services-with-icons left-column {
    color:var(--dark-blue-text);
    flex-shrink: 0;
    flex-grow:1;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
services-with-icons right-column {
    flex-grow:1;
    flex-shrink:0;
}
#drop_arrow {
	margin-top: -9em;
	position: absolute;
	top: 0px;
	left: 50%;
	height: 6em;
	border-left: 2px dotted var(--blue-zone-blue);
	transition: max-height 0.5s linear;
	max-height: 0px;
	z-index: -1;
    opacity:0;
}
#drop_arrow.show-drop {
    max-height: 6em;
    opacity:1;
}
#drop_arrow::after {
	content: '';
	position: absolute;
	bottom: 0px;
	width: 12px;
	height: 12px;
	background: var(--dark-blue-text);
	left: -7px;
	border-radius: 50%;
}
services-icons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:50px 20px;
}
service-icon-with-caption {
    display:flex;
    gap:15px;
    flex-direction: column;
    text-align: center;
}
service-icon img {
    display:block;
    width: 100%;
    height:auto;
    margin:auto; /* center icon */
}
service-icon {
    --anim-delay-factor:0;
    --anim-delay:calc( var(--anim-delay-factor) * 50ms);
    --circle-size:min(85px,6.8vw);
    background-color:var(--dark-blue-text);
    border-radius: 50%;
    padding:10%;
    flex-shrink:0;
    flex-grow:1;
    /* width:60%; */
    width:var(--circle-size);
    height:var(--circle-size);
    margin:auto;
    align-items:center;
    display:flex;
    transition:transform 0.5s cubic-bezier(.76,1.91,.47,.37) var(--anim-delay), opacity 250ms linear var(--anim-delay);
    opacity:0;
    transform:translate(0%,-50%);
}
@media only screen and (max-width:968px) {
    services-with-icons {
        flex-direction: column;
    }
    services-with-icons left-column {
        align-items: center;
    }
    service-icon {
        --circle-size:min(85px,10vw); /* adjusted for full-width column */
    }
}
@media only screen and (max-width:768px) {
    services-icons-grid {
        grid-template-columns: 1fr 1fr;
    }
    service-icon {
        --circle-size:20vw;
    }
}

service-icon-with-caption.show-icon service-icon {
    opacity:1;
    transform:translate(0%,0%);
}
.delay-1 { --anim-delay-factor:1; }
.delay-2 { --anim-delay-factor:2; }
.delay-3 { --anim-delay-factor:3; }
.delay-4 { --anim-delay-factor:4; }
.delay-5 { --anim-delay-factor:5; }
.delay-6 { --anim-delay-factor:6; }
.delay-7 { --anim-delay-factor:7; }

service-icon.lighter {
    background-color: var(--blue-text);
}
service-caption {
    line-height: 1;
    min-height: 2em;
}
service-icon:hover {
    background-color:var(--blue-text);
}
service-icon.lighter:hover {
    background-color:var(--blue-zone-blue);
}
/* THESE RULES (ABOVE) were for services panel on home page
    The services page has a different "format".
*/
.services-list,
.service-row {
    position: relative;
}
.service-row:not(.show-row) {
    opacity: 0;
}
.service-row {
    gap:min(100px,8vw);
    margin-bottom:4%;
    transition: opacity 250ms ease-in-out;
}
.service-icon,
.service-text {
    flex:1;
}
.service-icon {
    text-align: center;
}
.service-icon img {
    fill:var(--interior-aqua-blue);
    width:50%;
    min-width:225px;
    max-width:256px;
    margin-left:auto;
}
.service-header h3 {
    font-size:20px;
    font-weight: bold;
    margin-bottom:1em;
}
@media only screen and (max-width:768px) {
    .service-icon,.service-text {
        margin-bottom:2em;
    }
}
@media only screen and (min-width:768.1px) {
    .service-body {
        font-size:clamp(13px,1.2vw, 16px);
    }
    .services-list {
        padding-bottom:3%;
    }
    .services-list::before {
        content:'';
        position:absolute;
        top:0px;
        left:50%;
        height:100%;
        width:1px;
        border-left:1px solid gray;
    }
    .service-icon {
        text-align: start;
    }
    .services-list .service-row:nth-child(2n) .service-icon {
        text-align:end;
    }
    .services-list .service-row:nth-child(2n+1) .service-icon {
        order:1;
    }
    .service-row {
        display:flex;
    }
    .service-row accent-dot {
        --dot-size:3em;
        position: absolute;
        top:0px;
        left:50%;
        translate:-50% -30%;
        width:var(--dot-size);
        height:var(--dot-size);
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(/assets/images/services_accent_dot.png);
    }
}

.blue-dot-at-left {
    --blue-dot-size:0.35em;
    --shift-dot-left:-0.85em;
    --shift-headline-right:0.85em;
    position:relative;
    /* left:var(--shift-headline-right); */
}
.blue-dot-at-left:before {
    content:'';
    height:var(--blue-dot-size);
    width:var(--blue-dot-size);
    position:absolute;
    left:var(--shift-dot-left);
    top:0.5em;
    border-radius:50%;
    background-color:var(--orange-text);
}
client-logo-rows {
    display:grid;
    gap:max(20px,3vw);
    /* grid-template-columns: repeat(6,1fr); */
    /* align-items: center; */
    /* margin-bottom:3em; */
}
horizontal-slide img,
client-logo-rows img {
    width:100%;
}
horizontal-slide img {
    flex:1;
    height:auto;
}

services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:20px 10%;
}
service-heading,
service-subhead,
service-detail {
    display: block;
    margin-bottom:16px;
}
service-heading {
    font-size:150%;
    color:var(--dark-blue-text);
    font-weight: bold;
    margin-bottom:0px;
    line-height: 1;
}
service-subhead {
    font-size:125%;
    color:var(--blue-text);
}
service-entry img {
    width:auto;
    height: 20vw;
    max-height: 250px;
    display: block;
    margin:20px auto;
}
button.centered {
    margin:0px auto;
}


/* panel with scrolling/sliding logos in vertical column beside text block with large number in headline */
scrolling-brands-wrapper {
    display: block;
    color:black;
    background-color: white;
}
scrolling-brands {
    display: grid;
    padding:50px 0px 0px;
    grid-template-columns: 55% 45%;
}
huge-header {
    display:grid;
    justify-content: start;
    align-items: end;
    margin-bottom:15px;
    font-family: Arial, sans-serif;
}
huge-header span {
    font-size:60px;
    line-height: 0.8;
}
huge-header span:nth-child(1) {
    grid-row: span 2;
    font-size:140px;
    font-weight: bold;
    color:var(--dark-blue-text);
    width: 1.175em;  /* 162px; */
    text-align: end;
}
huge-header span:nth-child(2) {
    grid-column: 2/2;
}
huge-header span:nth-child(3) {
    font-size:40px;
    grid-column: 2/2;
    grid-row: 2/2;
    align-self: center;
}

scrolling-brands first-column-header,
scrolling-brands second-column-header {
    display: block;
    grid-column: 2/2;
    color:white;
    background-color: var(--dark-blue-text);
    text-align: center;
    line-height: 2;
    font-size: 20px;
    position: relative;
}
scrolling-brands first-column-header {
    grid-column:1/1;
}
scrolling-brands left-column,
scrolling-brands right-column {
    grid-row: 2/2;
}
scrolling-brands left-column {
    padding-top:60px;
    padding-bottom:60px;
}

scrolling-brands second-column-header::after {
    content:'';
    z-index: 1;
    border: 10px solid transparent;
    border-top-color:var(--dark-blue-text);
    left:calc(50% - 10px);
    position: absolute;
    bottom:-20px;
}

top-row.scroll-zone,
bottom-row.scroll-zone,
right-column.scroll-zone {
    overflow: hidden;
    position: relative;
}
top-row.scroll-zone,
bottom-row.scroll-zone {
    min-height:min(160px,11.815vw);
}
/* this element will slide horizontally within the scroll-zone */
horizontal-slide {
    position: absolute;
    top:0px;
    display:flex;
    align-items: center;
    width:120%;
}
bottom-row horizontal-slide {
    right:0px;
}
horizontal-slide img:not(:last-child) {
    margin-right:20px;
}
/* this element will slide vertically within the scroll-zone */
vertical-slide {
    position: absolute;
    top:0px;
    left:20%;
    right:20%;
}
vertical-slide img {
    width:100%;
    height:auto;
}
vertical-slide img:not(:last-child) {
    margin-bottom: 80px;
}

.hover-label {
    position:relative;
}
.hover-label label {
    position:absolute;
    pointer-events: none;
    transform-origin:top left;
    transform:none;
    transition:transform 100ms ease-in-out;
}
.hover-label.has-value label,
.hover-label:focus-within label {
    transform:translate(0px,-20px) scale(80%);
}

contact-form-wrapper {
    display:block;
    /* color:white; */
    min-height: 200px;
    padding:50px 0px;
    position: relative;
    background-repeat: repeat;
    background-image: url('/assets/images/body-pattern.gif');
}
contact-form-panel {
    display:grid;
    grid-template-columns: 50% 50%;
}
form[name="contact_form"].hollow-inputs-form {
    --border-color:white;
    position: relative;
}
form[name="contact_form"].hollow-inputs-form > div:not(.text-area-zone,.reqd-input,.buttons-row) {
    border-bottom: 1px solid var(--border-color);
    margin-bottom:30px;
}
body:not(.home) form[name='contact_form'].hollow-inputs-form {
    --border-color:var(--blue-text);
}
form[name="contact_form"].hollow-inputes-form input {
    border:none;
    outline:0px;
    width: 100%;
    display:block;
    background-color: transparent;
    color:white;
}
body:not(.home) form[name='contact_form'].hollow-inputs-form input {
    color:var(--dark-blue-text);
    padding-left: 0px;
    border:0px;
    width: 100%;
    background-color: transparent;
}
form[name="contact_form"] .bad_value,
form[name="contact_form"] .error {
    outline:1px solid red;
}
.phone-inputs {
    display:grid;
    grid-template-columns: 60% 40%;
}
.fold-up {
    background-color: white;
    position: relative;
}
.fold-up::before {
    content:'';
    left:calc(50% - 6px);
    border:6px solid transparent;
    border-bottom-color:white;
    position: absolute;
    top:-12px;
}
.fold-up button {
    border:0px;
    display: block;
    width: 100%;
    background-color: transparent;
    text-align: left;
}
.text-area-zone {
    overflow: hidden;
    padding:0px 2px;
    background-color:white;
    display:flex;
    flex-direction: column;
    height:0px;
    position: absolute;
    left:0px;
    right:0px;
    bottom:0px;
    transition: all 500ms ease-in-out;
}
.text-area-zone.show {
    height:100%;
    padding:2px;
}
.contact-text {
    flex-grow:1;
}
.buttons-row {
    text-align: center;
}
.submit-btn {
    margin:10px;
    display:block;
    font-size:20px;
    background-color:lightgray;
    border:1px solid lightgray;
    padding:0px 25px;
    align-self: center;
}
.submit-btn.blue {
    margin-left:auto;
    margin-right:auto;
    padding:10px 0px;
    width:100%;
    background-color: var(--blue-text);
    color:white;
}
.submit-btn.blue:hover {
    background-color:var(--blue-zone-blue);
}
.submit_result {
    color:black;
}
.submit_result:not(.show) {
    display:none;
}
.g-recaptcha > div {
    display:none; /* hide bottom corner 'bug' icon */
}

.pre-send-message,
.post-send-message {
    color:var(--blue-text);
    font-size: 60px;
    line-height: 1;
}
left-column.post-sent .pre-send-message,
left-column:not(.post-sent) .post-send-message {
    display:none;
}
.arrow-line-svg {
    width:360px;
    max-width: 100%;
}
.arrow-line {
    stroke:var(--blue-text);
}
form.form-submitted,
.post-form-submit-content:not(.show) {
    display:none;
}
form.form-submitted + .post-form-submit-content {
    display: block;
}
.quick-link-buttons button {
    background-color:transparent;
    color:white;
    margin:0px 10px 10px 0px;
    display:inline-block;
    border:1px solid lightgray;
}
.quick-link-buttons button:hover {
    background-color:white;
    color:var(--dark-blue-text);
}
.large-blue-text {
    font-size:30px;
}

/* revised contact form container styling */
contact-form-wrapper right-column form {
    background:rgba(255,255,255,0.85);
    border-radius: 10px;
    padding:20px;
}
.form-input-row {
    display: flex;
}

form-error {
    display:block;
    background-color: white;
    color:red;
    text-align: center;
    padding:5px;
    border-radius: 15px;
    position: absolute;
    width:210px;
    bottom:80px;
    left:50%;
    translate: -50%;
    z-index: 10;
}
form-error::after {
    content:'';
    left:calc(50% - 6px);
    border:6px solid transparent;
    border-top-color:white;
    position: absolute;
    bottom: -12px;
}
form-error:not(.show) {
    display:none;
}

/* more stylized version of contact form */
.form-input-block input::placeholder,
.form-input-block textarea::placeholder {
    color:#CACACA
}
.form-input-block input:not([type="radio"]),
.form-input-block textarea {
    padding:0.85em 1em;
    border:2px solid #DDDDDD;
    border-radius: 8px;
    margin-bottom:1rem;
    background-color:#FEFEFE;
    line-height: 1.5;
    /* less padding and margin */
    padding:0.5em 1em;
    margin-bottom:0px;
}
.form-input-block label,
.form-input-block input:not([type="radio"]),
.form-input-block textarea {
    display:block;
    width: 100%;
}
.form-input-block label {
    /* font-size:85%; */
    margin-bottom:0.25em;
}
form.hide-labels .form-input-block > label {
    display:none;
}
.buttons-row {
    text-align:center;
    padding:25px 0px;
    /* margin:0px auto; */
    width:100%;
}
.buttons-row button {
    display:block;
    width:100%;
    padding:10px 0px;
    /* border:none; */
    border-radius:5px;
    /* background-color:var(--green-button-icon); */
    color:white; /* black; */
    font-weight: bold;
    margin:0px;
}
.buttons-row button:hover {
    background-color:var(--green-button-hover);
}
.form-input-block {
    padding-bottom:10px;
    position:relative;
}
.contact-text {
    flex-grow:1;
}
@media only screen and (min-width:768.1px) {
    .not .form-input-row {
        padding-bottom:20px;
    }
    .form-input-block:first-of-type {
        padding-right:15px;
    }
    .form-input-block:last-of-type {
        padding-left:15px;
    }
    .form-input-row.one-col .form-input-block:first-of-type,
    .form-input-row.one-col .form-input-block:last-of-type {
        padding-left:0px;
        padding-right:0px;
    }
}

.form-input-row {
    display: flex;
}
.form-input-row .form-input-block {
    flex:1;
}
@media only screen and (max-width:768px) {
    .form-input-row {
        flex-direction: column;
    }
}

.char-counter::before {
    content:attr(data-characters);
    position: absolute;
    right:0px;
    top:0px;
}
.char-counter.near-full::before {
    color:red;
}
/* prevent vertical overlap of label with input length counter */
@media only screen and (max-width:470px), (min-width:650.1px) and (max-width:940px) {
    .char-counter::before {
        top:1.5em;
    }
    #wcwd-label {
        margin-bottom:1.5em;
    }
}

/* utility classes to clue when main-gutter width maxes out */
first-page-element::before,
first-page-element::after {
    content:'';
    position:fixed;
    left:calc(50% - (0.5 * var(--main-gutter-max-width)));
    right:calc(50% - (0.5 * var(--main-gutter-max-width)));
    top:0px;
    height:100%;
    border-left:1px dashed purple;
    z-index: 1000;
    pointer-events: none;
    width: 1px;
}
first-page-element::before { right:auto; }
first-page-element::after { left:auto; }
body:not(.show-guides) first-page-element::before,
body:not(.show-guides) first-page-element::after {
    display:none;
}
.show-guides::before {
    content:'';
    z-index:9999;
    position: fixed;
    top:0px;
    border-left:1px dashed red;
}
/* site redesign has these elements 'always' in burger visible mode */
.nav-burger {
    grid-area: burger;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-blue-text);
    border-radius: 50%;
}
nav {
    /* min-width: 375px; /* prevent header icon shift */
    width:100%;
    left:0px;
    bottom:0px;
    top:0px;
    /* overflow: hidden; */
    /* height: 0px; */
    /* height:100%; */
    position:fixed;
    background-color: var(--nav-background);
    /* fix stuff to become more 'normal' */
    justify-content: start;
    --circle-clip-size:0%;
    --circle-clip-horz-position:min(calc(95% - 30px),calc(50% + 0.5 * var(--main-gutter-max-width) - 30px));
    clip-path:circle(var(--circle-clip-size) at var(--circle-clip-horz-position) calc(0.5 * var(--header-height)));
    z-index:-1;
    transition: clip-path 0.5s linear;
    /* transition: clip-path 0.5s cubic-bezier(0.14,1.18,0.94,-0.19); */
    padding-left:max(5%,calc(50% - 0.5 * var(--main-gutter-max-width)));
    padding-right:max(5%,calc(50% - 0.5 * var(--main-gutter-max-width)));
}
nav.old {
    grid-area: nav;
    overflow:auto;
    outline:1px solid gray; /* provide contrast to background */
    color: black;
    background-color: white; /* black; */
    flex-direction: column;
    align-items: stretch;
    width:0px;
    left:-200px;
    min-width: auto;
    top:var(--header-height);
    transition:left 250ms ease-in-out, width 250ms ease-in-out;
}
.nav-burger[aria-expanded="true"] + nav {
    /* left:0px; */
    /* width:100%; */
    /* bottom:0px; */
    /* clip-path:circle(150% at 90% calc(0.5 * var(--header-height))); */
    --circle-clip-size:150%;
}
.nav-burger[aria-expanded="true"] {
    background-color: var(--dark-blue-text);
    transition:background-color 10ms linear 500ms;
}
/* .nav-burger[aria-expanded="false"] + nav {
    display: none;
} */
nav-left, nav-right {
    display:flex;
    flex:1;
    align-items: end;
    justify-content: center;
    flex-direction: column;
}
nav-right {
    align-items:start;
}
nav-split {
    --nav-split-yellow:var(--orange-text);
    background-color:var(--nav-split-yellow);
    height:375px;
    /* width:4px; */
    flex-basis:2px;
    flex-grow: 0;
    flex-shrink: 1;
    margin:0px 4.5%;
}
nav-headline p.large-text {
    font-size:clamp(16px,4.3vw,60px);
}
nav-subhead {
    font-style: italic;
}
nav-right .nav-item {
    font-size:clamp(16px,2.9vw,40px); /* variation of p.large-text */
    width:6.5em;
    white-space: nowrap;
}

.sub-nav {
    display:block;
    position:relative;
    left:0px;
    right:0px;
    background-color: white;
    padding:0px;
}
.sub-nav .main-page-container {
    width:auto;
}
page-header {
    grid-template-columns: auto 200px 60px; /* auto 60px 40px */
    grid-template-areas: "logo phone burger" "nav nav nav"; /* "logo burger search","..." */
}
search-area {
    grid-area:search;
    display:none;
}

/* ---- MOBILE RENDER RULE SET ---- */
@media only screen and (max-width:768px) {
    .not page-header-wrapper.scrolled nav,
    .not page-header-wrapper.sunlight nav {
        background-color: white;
    }
    body:not(.home) page-header-wrapper.scrolled {
        background-color:white;
        color:black;
    }
    page-header-wrapper.scrolled .nav-burger,
    page-header-wrapper.sunlight .nav-burger {
        --burger-border-color:black;        
    }
    /* (np-logo, page-header, .nav-burger, nav, .sub-nav classes were here) */


    body.no-scroll page-header,
    body.no-scroll page-top-blue-strip {
        position:fixed; /* lock the header-elements in place, other page content can scroll still, whatever! */
    }
    .not .video-wrapper {
        margin-top: calc( var(--header-height) / -2 );
    }
    big-headline,
    .video-wrapper video {
        display: none;
    }
    .has-subnav {
        touch-action: inherit;
    }
    .sub-nav-list {
        width: 100%;
        grid-template-columns: none;
        margin:0px;
    }
    .has-subnav .subnav-arrow {
        display:none;
    }
    /* hide the 'extra' sub-nav-list stuff when viewing open mobile nav */
    .sub-nav-list .category-body,
    .sub-nav-list .learn-more-link {
        display:none;
    }
    .sub-nav-list .blue-text {
        color:black;
    }
    .sub-nav-list li:not(:first-child) {
        margin-left: 0px;
    }
    small-headline {
        font-size: 1rem;
    }

    design-dev {
        grid-template-columns: none; /* resume natural flow */
    }
    design-dev right-column {
        grid-row:1/1;
        overflow-x: scroll; /* attempt to contain horizontal content spill-out */
    }

    scrolling-brands {
        grid-template-columns: none;
    }
    scrolling-brands right-column.scroll-zone {
        width: 350px;
        height:350px;
        margin: 0px auto;
    }

    scrolling-brands second-column-header {
        grid-row:3/3;
        grid-column: auto;
    }
    scrolling-brands left-column,
    scrolling-brands right-column {
        grid-row: auto;
    }

    .blue-zone {
        /* grid-template-columns: none; */
        display:block;
    }
    .blue-zone right-column {
        margin-top:20px;
    }
    .blue-zone .padded-box {
        padding:0px;
    }
    .blue-zone left-column,
    .blue-zone right-column {
        display:block;
    }

    services-grid {
        grid-template-columns: auto;
    }
    service-entry img {
        height:45vw;
    }

    /* reduce size to prevent text from wrapping */
    huge-header span:nth-child(3) {
        font-size:35px;
    }

    contact-form-panel {
        grid-template-columns: none;
        gap:25px;
    }
    .arrow-line-svg {
        display:none;
    }

    page-footer {
        flex-direction: column;
    }
    
}