/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  global constants                                                                          //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

:root {
	--section-padding: 20px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  fonts                                                                                     //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  global page/body styling                                                                  //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	/*background-color: #f9f9f9;*/
	color: #333;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}

@media only screen and (min-width: 890px) {
	body {
		font-size: 14px;
	}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  global link styles                                                                        //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

a {
	color: inherit; /* Use the current text color */
	text-decoration: none; /* Remove the underline */
	-webkit-text-decoration: none; /* For Safari */
}

a:hover {
	color: #b11b1b; /* Change color on hover */
	text-decoration: underline; /* Add underline on hover */
	-webkit-text-decoration: underline; /* For Safari */
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  header & footer styles                                                                    //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

header {
	/* background-color: #b11b1b; */
	background-color: #274b60;
	color: #fff;
	padding: 20px 0;
	text-align: center;
	width:100%;
}

.header-logo {
	max-height: 40px;
	width: auto;
	margin:0px;
	padding:0px;
}

header h1 {
	margin-top: 10px;
	font-size: 2.5em;
}

header p {
	font-size: 1.2em;
	margin-top: 10px;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

footer {
	background: linear-gradient(90deg, #274b60, #172b30);
	color: #ffffff;
	text-align: center;
	padding: 8px 20px;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
}

footer p {
	margin: 0;
	font-size: 0.8em;
	color: #E6D9C4; /* Gold highlight */
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  navbar style                                                                              //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	/* background: linear-gradient(90deg, #1f3a56, #23476b);*/ /* Deep blue gradient */
	background-image: url("img/gradient_strip_left.png");
	background-repeat: no-repeat;
		background-position: left center;
		background-size: auto 100%;
	color: #E6D9C4; /* Gold highlight */
	padding: 8px 20px;
	z-index: 1000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-bottom: 2px solid #dddddd;
}

.navbar h1 {
	margin: 0;
	font-size: 1.5em;
}

.navbar a {
	color: #E6D9C4;
	text-decoration: none;
	margin: 0 15px;
}

.navbar a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 720px) {
	.navbar {
		background: linear-gradient(90deg, #274b60, #172b30);
	}
	.navbar nav {
		text-align: right;
	}
	.navbar nav a {
		display: block;
		padding: 5px;
	}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  usage:                                                                                    //
//                                                                                            //
//  <body>                                                                                    //
//    <header class="navbar">...</header>                                                     //
//    <div class="top-of-page">&nbsp;</div>     <!-- moves content below the navbar -->       //
//    ...                                       <!-- content goes here -->                    //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.top-of-page {
	height: 56px;
	scroll-margin-top: 56px; /* offsets scroll to avoid hiding content */
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  general/default content styling                                                           //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

section {
	padding: var(--section-padding);
	text-align: center;
}

h2 {
	margin-bottom: 20px;
	color: #b11b1b;
}

.shrink-list {
	display: inline-block;
	padding-left: 1.2em; /* or adjust to control bullet indent */
	margin: 0;
	text-align: left;
}

.wide-image {
	width: calc(100% + 2*var(--section-padding));
		margin-left: calc(-1 * var(--section-padding));
		margin-right: calc(-1 * var(--section-padding));
		margin-top: calc(-1 * var(--section-padding));
}

.section-bar {
	border-top: 2px solid rgba(200,200,200,0.5);
	width: 100%;
	height: 1px;
	margin: 0px auto;
	padding: 0px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  call-to-action styling                                                                    //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.cta-button {
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 15px;
	border: 1.5px solid grey;
	font-weight: bold;
	font-size: 20px;
}

.action-text {
	font-size: 1.2em;
	color: #36616c;
	font-style: italic;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  simple horizontal dividers for content spacing                                            //
//                                                                                            //
//  usage:                                                                                    //
//                                                                                            //
//  <p class="line-spacer">&nbsp;</p>                                                         //
//  <img class="image-spacer" src="/img/using-ai-divider.jpg"></img>                          //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.line-spacer {
	height:12px;
}

.image-spacer {
	width: calc(100% + 2*var(--section-padding));
	height: 8px;
	object-fit: cover;
		object-position: center;
		margin-left: calc(-1 * var(--section-padding));
		margin-right: calc(-1 * var(--section-padding));
		margin-top: calc(-1 * var(--section-padding));
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  hero section                                                                              //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

/* Hero section */
.hero {
	/* background: linear-gradient(90deg, #1f3a56, #23476b); */ /* Deep blue gradient */
	background-image: url("img/industrial-wheels-dark.png");
	background-size: cover;
	color: #ffffff;
	padding: 80px 20px; /* Added padding to make it larger */
	text-align: center;
}

.hero h2 {
	margin: 0;
	font-size: 2.5em;
	color: #E6D9C4; /* Gold highlight */
}

.hero p {
	margin-top: 20px;
	font-size: 1.2em;
	margin-left: 120px;
	margin-right: 120px;
}

@media screen and (max-width: 890px) {
	.hero p {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  contact elements                                                                          //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.embedded-google-map {
	width:100%;
}

.embedded-google-map iframe {
	border: 0;
	border-radius: 8px;
	aspect-ratio: 4 / 3;
	width:100%;
	max-width: 800px;
}

.embedded-ical {
	width:100%;
	height:100%;
	max-width: 800px;
		margin: 0 auto;
	overflow:scroll;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  survey elements                                                                           //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.narrow-section {
	background-color: #ffffff;
	padding: 20px 20px;
	display: block;
	max-width: 800px;
	box-sizing: border-box;
}

.aligned-form {
	text-align: left;
	max-width: 800px;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.survey-row {
	border-radius: 8px;
	background-color: #f4f4f4;
	width: 100%;
	min-height: 32px;
	margin-top: 10px;
	padding: 10px;
}

.survey-row label {
	display: inline-block;
	width: 180px;
	text-align: right;
}

.survey-row p {
	display: block;
	width: 100%;
	text-align: left;
}

.survey-row select {
	width: 240px;
}

.survey-row input {
	width: 240px;
}

.survey-row textarea {
	display: inline-block;
	width: 100%;
	text-align: left;
}

.survey-row button {
	padding:5px;
}

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

.survey-row-align-right {
	text-align: right;
}

.form-scale-options {
	display: inline-block;
}

.form-scale-options input {
	width: 16px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  main page (old format content/card styles)                                                //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

/* Middle section with responsive cards */
.middle-section {
	background-color: #ffffff;
	padding: var(--section-padding) var(--section-padding);
	display: block;     /* default for <div>, but good to be explicit */
	width: 100%;        /* take up all horizontal space */
	box-sizing: border-box; /* ensures padding/border don't break the layout */
}
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: var(--section-padding);
}
.card {
	background-color: #f4f4f4;
	border: 1px solid #dddddd;
	border-radius: 8px;
	padding: var(--section-padding);
	margin: 10px 0;
	width: 30%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: center;
}
.card img {
	width: 80px;
	height: 80px;
}
.card h3 {
	margin: 15px 0;
	font-size: 1.2em;
}
.card p {
	font-size: 1em;
	line-height: 1.5em;
}
@media screen and (max-width: 890px) {
	.card {
		width: 100%;
	}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  services & guild.tools pages (new format content/card styles)                             //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

main {
	padding: 0px;
	box-sizing: border-box;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.image-section {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
	line-height: 0;
}

.narrow-paragraph {
	padding-left: 10%;
	padding-right: 10%;
}

@media screen and (max-width: 890px) {
	.narrow-paragraph {
		padding: inherit;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.main-section {
	padding-bottom: 0;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.dark-section {
	background: linear-gradient(90deg, #274b60, #172b30);
	color: #ffffff;
}
.dark-section h2 {
	color: #E6D9C4; /* Gold highlight */
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-around;
	margin: var(--section-padding) 0;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.basic-card {
	padding: var(--section-padding);
	margin: 0;
	box-sizing: border-box;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.card-size-narrow { flex: 1 1 calc(33% - 1rem); }
.card-size-medium { flex: 1 1 calc(50% - 1rem); }
.card-size-wide { flex: 1 1 100%; }

/*////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 890px) {
	.card-size-narrow,
	.card-size-medium,
	.card-size-wide {
		flex: 1 1 100%;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.card-style-light {
	background-color: #f4f4f4;
	border: 1px solid #dddddd;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.08);
	color: inherit;
}

.card-style-dark {
	background-color: #1e1e1e;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	color: #ffffff;
}

.card-style-glass {
	background-color: rgba(200,235,255,0.2);
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	color: #dddddd;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.card-with-image {
	display: flex;
	align-items: flex-start;
}
.card-with-image .card-image {
	flex: 0 0 100px;
	height: 120px;
	max-width: 120px;
	margin-right: 20px;
}
.card-with-image .card-image img {
	width: 120px;
	height: 120px;
	object-fit: contain;
}
.card-with-image .card-content {
	flex: 1;
	text-align: left;
}
.card-with-image .card-content p {
	margin-top: 0.5em;
	line-height: 1.3em;
	font-family: "PT Serif", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	letter-spacing: 0.02em;
}
/* Stack image on narrow screens */
@media (max-width: 720px) {
.card-with-image { flex-direction: column; align-items: center; }
.card-with-image .card-image { max-width: 100%; margin: 0 0 12px 0; }
.card-with-image .card-content { text-align: inherit; } /* reset back to parent style */
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

/* === Section-based layouts (no cards) === */
.features, .deliverables, .results, .work-blocks, .trust-blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	margin: var(--section-padding) 0;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

/* === Helper resets for headings and lists inside cards === */
.card h3 { margin-top: 0; }
.card p { margin: 0; line-height: 1.6; }
.card ul { margin: 0; padding-left: 1.25rem; }

/*////////////////////////////////////////////////////////////////////////////////////////////*/

/* Optional: subtle separators between items when desired */
.deliverable + .deliverable,
.feature + .feature,
.result + .result,
.work-block + .work-block,
.trust-block + .trust-block {}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

/* Section headings polish */
.section > .container > h2 {
	text-align: center;
	margin-bottom: 1.25rem;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  print vs. screen formatting                                                               //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

@media print {
	.do-not-print {
		display:block;
		position:fixed;
		width:0;
		height:0;
		margin: 0;
		visibility: hidden;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
	.print-only {
		display:block;
		position:fixed;
		width:0;
		height:0;
		margin: 0;
		visibility: hidden;
	}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//  brochure formatting                                                                       //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

.printed-page {
	display:block;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
}

.end-of-printed-page {
	visibility: hidden;
	display: block;
	height: 0;
	margin:0;
	padding:0;
}

.top-of-printed-page {
	visibility: hidden;
	display: block;
	height: 0;
	margin:0;
	padding:0;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

@media print {

	:root { --print-resolution: 113px; }

	body { width: calc(8.5*var(--print-resolution)); }

	.navbar nav { visibility: hidden; }

	footer {
		height: 10px;
		border-top: 1px solid white;
	}

	footer p { color: rgba(0,0,0,0); }

	.printed-page {
		height: calc(11*var(--print-resolution));
		box-sizing: border-box;
		overflow: hidden;
	}

	.end-of-printed-page {
		visibility: visible;
		break-inside: avoid;
		height: inherit;
		page-break-inside: avoid;
	}

	.top-of-printed-page {
		visibility: visible;
		height: 70px;
		margin:0;
		padding:0;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.card-style-light,
	.card-style-dark,
	.card-style-glass {
		box-shadow: none;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

.brochure-contact {
	display: flex;
	align-items: center;				/* vertical centering */
	text-align: center;					/* horizontal centering */
	justify-content: space-between;		/* spread columns */
	gap: 2rem;
	--contact-side-width: 240px;		/* easy knob: change side width once here */
	height: 185px;
}
.brochure-contact-left {
	flex: 0 0 var(--contact-side-width);
	max-width: var(--contact-side-width);
	padding-left: 10px;
}
.brochure-contact-center {
	flex: 1 1 auto;
}
.brochure-contact-right {
	flex: 0 0 var(--contact-side-width);
	max-width: var(--contact-side-width);
}
.brochure-contact .brand img { height: 150px; }
.brochure-contact p {
	line-height: 2.5rem;
}
.brochure-contact .tagline {
	font-style: italic;
	opacity: 0.9;
}
.brochure-contact .qr-code {
	text-align: right;
	padding-right: 5px;
	padding-top:5px;
}
.brochure-contact .qr-code img {
	height: 170px;
	aspect-ratio: 1 / 1;
	margin-right: 0px;
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
	.brochure-contact-band {
		display:block;
		position:fixed;
		width:0;
		height:0;
		visibility: hidden;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/

@media print {
	.section { break-inside: avoid; page-break-inside: avoid; }
	.contact-band { break-inside: avoid; page-break-inside: avoid; }
	.brochure-contact {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/