/* reset */
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}ul,ol{list-style:none}button{background:none;border:none;cursor:pointer}a{text-decoration:none;color:inherit}:disabled{cursor:not-allowed}fieldset{border:none}table{border-collapse:collapse;border-spacing:0}input[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}img{max-width:100%;height:auto}:focus-visible{outline:2px solid #005fcc;outline-offset:2px}

/* typography */
html{font-size:100%}body{font-family:Roboto,sans-serif;font-size:1rem;line-height:1.6;color:#333}h1{font-size:clamp(1.75rem,4vw,3rem);line-height:1.2;margin-bottom:1rem}h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.3;margin-bottom:.875rem}h3{font-size:clamp(1.25rem,2.5vw,1.875rem);line-height:1.4;margin-bottom:.75rem}h4{font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.4;margin-bottom:.625rem}h5,h6{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.5;margin-bottom:.5rem}p{font-size:1rem;line-height:1.6;margin-bottom:1rem}.lead{font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.5}small,.small{font-size:.875rem;line-height:1.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #005fcc;outline-offset:2px}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme:dark){body{background-color:#1a1a1a;color:#e0e0e0}}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.content{max-width:65ch;margin:0 auto}

/* variables */

:root {
	--color-background-light: #efefef;
	--color-background-platinum: #CDD7DC;
	--color-background-hero: #135984;
	--color-background-main: #fff;
	--color-blue-darkest: #112238;
	--color-blue-light: #4D83C7;
	--color-blue-lightest: #8AB7EF;
	--color-blue-medium: #2F5E97;
	--color-accent: #F75029;
	--color-card-border: #dde;
	--color-nav-current: #4d83c7;
	--color-text-light: #fff;
	--color-text-lighter: #44445a;
	--color-text-main: #1e1e2c;


	--font-family-heading: Roboto, sans-serif;
	--font-family-main: Roboto, sans-serif;
	--font-size-small: .8rem;
	--font-size-intro: 2rem;
	--font-weight-heading: 900;
	--font-weight-main: 400;

	--gradient-dark: linear-gradient(180deg,#31609b 0%,#000000 100% 100%);
	--gradient-dark-inverse: linear-gradient(180deg,#000 0%,#31609b 100% 100%);
	
	--line-height-intro: 3rem;

	--margins-normal: 0 auto;

	--padding-section: 2rem;
	--padding-nav-main: 0 2rem;

	--radius-primary: 5px;

	--width-block-normal: 1200px;
	--width-block-reading: 800px;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* elements */

body {
	background-color: var(--color-background-light);
	color: var(--color-text-main);
	font-weight: var(--font-weight-main);
}

footer {
	padding-bottom: 2rem;
	text-align: center;
}
footer section {
	background-color: var(--color-blue-darkest);
	color: var(--color-text-light);
	font-size: .8rem;
	padding: 1rem 2rem;
}

header {
	margin-top:2rem;
}
	@media (max-width: 1199px) {
		header {margin-top: 0;}
	}

header section {
	padding: 0;
}

h1, h2, h3, h4 {
	font-weight: var(--font-weight-heading);
	color: var(--color-blue-light);
	letter-spacing: .04em;
	text-transform: uppercase;
}
	h1 {
		font-size: clamp(20px, 5vw, 36px);
	}
	h2 {
		font-size: clamp(16px, 4vw, 18px);
	}
	h3 {
		font-size: clamp(12px, 3.5vw, 16px);
	}
	h4 {
		font-size: clamp(10px, 3vw, 14px);
	}

article,
section {
	background-color: #fff;
	margin: var(--margins-normal);
	max-width: var(--width-block-normal);
	padding: var(--padding-section);
}
	@media (max-width: 600px) {
		section {
			padding: 1em;
		}
	}


/* classes & ids */

.about-page .hero {
	background-image: url(../img/bg-about.jpg);
	background-position-y: center;
	background-size: cover;
}

.about-quote {
	background-image:url(../img/dbl-quo.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 2rem;
	padding-left: 2.5rem;
}

.area-ux {
	padding-top: 0;
}

.back-link:link, 
.back-link:active, 
.back-link:visited {
	color: var(--color-nav-current);
	display: inline;
}
.back-link:hover {
	text-decoration: underline;
}

.breadcrumb {
	margin-bottom: 1em;
	padding-left: 1em;
	font-style: italic;
}

.cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 2rem;
	gap: 2rem;
}
	.card {
		background-color: #fff;
		border: 1px solid var(--color-card-border);
		border-radius: var(--radius-primary);
		box-shadow: 0 0 24px rgba(5, 5, 60, 0.15);
		display: flex;
		flex-direction: column;
		min-height: 300px;
		overflow: hidden;
		min-width: 300px;
		max-width: 350px;
		transition: transform 0.2s ease;
		width: 30%;
	}
		.photo-lightbox .card {
			background-color: #222;
		}
		@media (max-width: 600px) {
			.card {
				width: 96%;
			}
		}
	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 0 24px var(--color-blue-lightest);
	}
	.card-image {
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   overflow: hidden;
	}

	.card-image img {
		height: auto;
		width: 100%;
	}

	.card-content {
		padding: 1rem;
	}
		.photo-lightbox .card-content {
			text-align: center;
		}
		.photo-lightbox .card-content .card-title {
			color: #ddd;
			margin-bottom: 0;
			text-transform: none;
		}
		.photo-lightbox .card-content .card-description {
			color: #bbb;
			font-style: italic;
		}

.desktop-hidden {
	visibility: hidden;
}
	@media (max-width: 799px) {
		.desktop-hidden {
			display: none;
		}
	}


.feedback {
	display: flex;
		align-items: stretch;
		justify-content: space-between;
}
	.feedback-item {
		background-color: var(--color-blue-light);
		box-shadow: 0 0 24px rgba(5, 5, 60, 0.15);
		border-radius: var(--radius-primary);
		color: #fff;
		display: flex;
			flex-direction: column;
			align-items: center;
		padding: 2rem;
		width: 48%;
	}
		@media (max-width: 600px) {
			.feedback-item {
				width: 80%;
			}
		}
	.feedback-icon {
		align-self:flex-start;
	}
	.feedback-quote {
		font-style: italic;
		padding: 1rem 0;
	}
	.feedback-attribution {
		align-self: flex-end;
		font-size: var(--font-size-small);
		text-transform: uppercase;
	}
	

.hero {
	background: var(--color-background-hero);
	color: var(--color-text-light);
	display: flex;
		flex-direction: column;
		justify-content: center;
	height: clamp(120px, 20vh, 300px);
}
	.hero h1, .hero h4 {
		color: var(--color-text-light);
		margin:0;
	}
	.hero h4 {
		font-size: clamp(12px, 2.5vw, 22px);
	}
	.design-page .hero {
		background-image: url(../img/bg-modern-geo.jpg);
		background-position-y: center;
		background-size: cover;
	}
	.homepage .hero {
		background-image: url(../img/bg-boxes.jpg);
		background-size: cover;
	}

.highlight {
	background-color: #ff9;
}

.icon-inline {
	display: inline;
   height: 1em; /* scales with text */
	vertical-align: middle; /* or text-bottom, top, etc. */
}
.icon-large {
	display: block;
   height: 3em; /* scales with text */
	margin-bottom: 2rem;
}
	

.lightbox-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.85);
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 400ms ease;
   z-index: 1000;
}

	.lightbox-overlay.show {
		opacity: 1;
		pointer-events: auto;
	}

	.lightbox-overlay img {
		max-width: min(1000px, 90%);
		max-height: 90%;
		box-shadow: 0 0 20px #000;
		border-radius: 8px;
		transition: opacity 400ms ease;
		opacity: 0;
	}
		.lightbox-large .lightbox-overlay img {
			max-width: min(1500px, 90%);
		}

	.lightbox-overlay.show img {
		opacity: 1;
	}

	.lightbox-overlay::after {
		content: '×';
		position: absolute;
		top: 20px;
		right: 30px;
		color: #fff;
		font-size: 2.5rem;
		cursor: pointer;
		transition: opacity 400ms ease;
	}

.list-special {
	margin: 1rem 2rem 1rem 6rem;
}
	.list-special li {
		margin-bottom: .6rem;
		text-indent: -4.6rem;
	}

.list-tight {
	margin-top: -.5rem;
	margin-bottom: 1rem;
	margin-left: 1rem;
}
	.list-tight li {
		list-style-type: square;
		margin-bottom: .2rem;
	}

.long-form h2 {
	/* background-color: #f3f3f3; */
	margin-top: 2rem;
}
	.long-form h2:first-of-type {
		margin-top: 0;
	}

.logo {
	margin-top: 1rem;
}

.logos-client {
	display: flex;
		flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}
	.logos-client img {
		width: clamp(140px, 18vw, 200px);
		height: 100%;
		margin: .6rem 1.4rem;
		object-fit: cover;
	}

.multicol {
   column-count: 2;
   column-gap: 2rem;
   margin: auto;
   padding: auto 2rem;
/*    line-height: 1.6;
   font-size: 1.1rem; */
}
	.multicol-force-next {
		break-before: column;
	}
	.multicol h2 {
		margin-top: 0;
	}
	@media (max-width: 799px) {
		.multicol {
			column-count: 1;
		}
		.multicol-force-next {
			break-before: auto;
		}
		.multicol h2 {
			margin-top: 2rem;
		}
		.multicol h2:first-of-type {
			margin-top: 2rem;
		}
	}


.nav-main {
background-image: var(--gradient-dark);
color: var(--color-text-light);
display: flex;
	align-items: center;
	justify-content: space-between;
font-size: clamp(.8rem, 2vw, 1rem);
padding: 0 2rem;
text-align: right;
}
	.active {
		background-color: var(--color-blue-medium);
	}
	.nav-links {
		display: flex;
	}
	.nav-links a {
		border-radius: var(--radius-primary);
		padding:0 .6em;
		margin: 0 .1em;
	}
		.nav-links a:hover {
			background-color: var(--color-blue-darkest);
		}

.page_intro p {
	color: var(--color-text-lighter);
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	font-weight: 320;
	line-height: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0 1rem;
}

.photo-page .hero {
background-image: url(../img/bg-camera.jpg);
background-position-y: center;
background-size: cover;
}

.text-center {
	text-align: center;
}

.topic-quote {
	margin: 1.8rem 3rem 3rem 5%;
	padding-left: 1.2rem;
   border-left: 2px dotted #666;
   max-width: 60ch;
   font-family: 'Caveat', cursive;
   font-size: 1.5rem;
   line-height: 2rem;
   position: relative;
}

	.topic-quote blockquote {
		margin: 0;
		quotes: "“" "”" "‘" "’";
	}

	.topic-quote blockquote::before {
		content: open-quote;
	}

	.topic-quote blockquote::after {
		content: close-quote;
	}

	.topic-quote figcaption {
		font-family: 'Roboto', sans-serif;
		font-size: 0.9rem;
		margin-top: .6rem;
		text-align: right;
	}
	.multicol > .topic-quote {
		margin-top: 0;
	}

.two-col {
	display: flex;
	gap: 2rem;
}
	.two-col > div {
		flex: 1;
	}
	@media (max-width: 768px) {
		.two-col {
			flex-direction: column;
		}
	}

.ux-page .hero {
	background-image: url(../img/bg-modern-bldg.jpg);
	background-size: cover;
}