@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic|Open+Sans+Condensed:700");

/* ==========================================================================
   Black Wolf Aviation - Main Stylesheet

   Based on "TXT" by HTML5 UP (html5up.net | @ajlkn)
   Free for personal and commercial use under the CCA 3.0 license
   (html5up.net/license)

   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
    1. Design Tokens ........ colors and sizes used throughout
    2. Reset ................ browser default normalization
    3. Base ................. box model, body, global font sizes
    4. Typography ........... headings, links, inline text
    5. Layout ............... sections, container, grid
    6. Components ........... images, buttons, lists, forms, tables,
                              boxes, icons
    7. Site Header .......... logo bar at the top of every page
    8. Desktop Navigation ... fixed top nav bar and dropdown menus
    9. Mobile Navigation .... fixed hamburger bar and slide-out panel
   10. Banner ............... hero section below the nav
   11. Main ................. white content area
   12. Footer ............... about, service area, social, copyright
   13. Page: Homepage ....... inspection slideshow and spacing
   14. Page: Inspection Quote form layout and states
   15. Collapsible Sections . propeller toggle headings (homepage)

   --------------------------------------------------------------------------
   BREAKPOINTS (used in every section)
   --------------------------------------------------------------------------
   XLarge  max-width: 1680px
   Large   max-width: 1280px
   Medium  max-width:  980px   <- mobile navigation takes over here
   Small   max-width:  736px
   XSmall  max-width:  360px

   Each section keeps its own responsive rules directly beneath it, so
   everything that affects (for example) the header lives in one place.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Text */
	--color-text:          #6b7770;
	--color-text-muted:    #c1cac5;

	/* Surfaces */
	--color-bg:            #f2f5f3;
	--color-surface:       #fff;
	--color-border:        #e7eae8;

	/* Accent (green) */
	--color-accent:        #b1ddab;
	--color-accent-hover:  #c1edbb;
	--color-accent-active: #a1cd9b;

	/* Neutral (gray-green) */
	--color-neutral:       #c1cac5;

	/* Links */
	--color-link:          #006376;

	/* Fonts */
	--font-body:           'Open Sans', sans-serif;
	--font-heading:        'Open Sans Condensed', sans-serif;

	/* Fixed bar heights */
	--nav-height:          3.25em;  /* desktop nav bar */
	--titlebar-height:     44px;    /* mobile hamburger bar */

	/* Collapsible sections (section 15) */
	--toggle-icon-size:     1.2em;  /* propeller icon; em = relative to each heading's text */
	--toggle-icon-gap:      0.45em; /* space between heading text and propeller */
	--toggle-spin-duration: 0.7s;   /* one full propeller turn */
	--collapse-duration:    0.45s;  /* section open/close (the homepage script reads this too) */
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-webkit-appearance: none;
	appearance: none;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	background: var(--color-bg);
	-webkit-text-size-adjust: none;
}

/* Suppress animations until the page has loaded
   (main.js removes .is-preload from <body>). */
body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
	animation: none !important;
	transition: none !important;
}

body, input, textarea, select {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--color-text);
	font-size: 13pt;
	line-height: 2em;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 1680px) {
	body, input, textarea, select {
		font-size: 12pt;
		line-height: 1.75em;
	}
}

@media screen and (max-width: 1280px) {
	body, input, textarea, select {
		font-size: 11pt;
	}
}

@media screen and (max-width: 980px) {
	html, body {
		overflow-x: hidden;
	}
}

@media screen and (max-width: 736px) {
	body, input, textarea, select {
		font-size: 11pt;
	}
}

@media screen and (max-width: 360px) {
	body, input, textarea, select {
		font-size: 10pt;
	}
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* --- Headings ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text);
	margin: 0 0 0.5em 0;
	line-height: 1.3;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none;
	color: inherit;
}

h2 {
	font-size: 1.65em;
}

h3, h4 {
	font-size: 1.25em;
}

/* "Major" heading: centered title sitting on a horizontal rule */
h2.major {
	position: relative;
	top: 0.775em;
	border-top: solid 5px var(--color-border);
	font-size: 1.65em;
	text-align: center;
	margin: 0 0 3em 0;
}

h2.major span {
	position: relative;
	top: -0.775em;
	display: inline-block;
	background: var(--color-surface);
	padding: 0 1.25em;
}

/* Subtitle paragraph directly inside a <header> */
header > p {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* --- Links --------------------------------------------------------------- */

a {
	color: var(--color-link);
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* --- Inline text --------------------------------------------------------- */

b, strong {
	font-weight: 700;
	color: var(--color-text);
}

i, em {
	font-style: italic;
}

sub {
	position: relative;
	top: 0.5em;
	font-size: 0.8em;
}

sup {
	position: relative;
	top: -0.5em;
	font-size: 0.8em;
}

/* --- Block text ---------------------------------------------------------- */

p, ul, ol, dl, table {
	margin-bottom: 3em;
}

hr {
	border: 0;
	border-top: solid 2px var(--color-border);
	margin: 0 0 3em 0;
}

blockquote {
	border-left: solid 5px var(--color-border);
	padding: 1em 0 1em 1.5em;
	font-style: italic;
}

br.clear {
	clear: both;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 736px) {
	h2 {
		font-size: 1.25em;
	}

	h2.major {
		font-size: 1.25em;
		margin: 0 0 2em 0;
	}

	h2.major span {
		padding: 0 1em;
	}
}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

/* --- Sections & articles ------------------------------------------------- */

section, article {
	margin-bottom: 6em;
}

section > :last-child,
section:last-child,
article > :last-child,
article:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 736px) {
	section, article {
		margin-bottom: 2em;
	}
}

/* --- Container ----------------------------------------------------------- */

.container {
	margin: 0 auto;
	max-width: 100%;
	width: 64em;
}

@media screen and (max-width: 1680px) {
	.container { width: 75em; }
}

@media screen and (max-width: 1280px) {
	.container { width: calc(100% - 100px); }
}

@media screen and (max-width: 736px) {
	.container { width: calc(100% - 40px); }
}

@media screen and (max-width: 360px) {
	.container { width: calc(100% - 30px); }
}

/* --- Grid ----------------------------------------------------------------
   12-column flexbox grid (same class names as the HTML5 UP original).

   Usage:
     <div class="row gtr-200">
       <div class="col-6 col-12-small">...</div>
     </div>

   Gutters:  gtr-0, gtr-25, gtr-50, (default = 100%), gtr-150, gtr-200
             Each is a multiple of --gutter-base, which shrinks at smaller
             breakpoints (see Responsive below).
   Columns:  col-1 ... col-12, optionally suffixed with a breakpoint name
             (col-12-small) to apply only at that size and below.
   Offsets:  off-1 ... off-12 (same suffix rules)
   Ordering: imp moves a column first.
   Align:    aln-left / aln-center / aln-right / aln-top / aln-middle /
             aln-bottom
   ------------------------------------------------------------------------ */

.row {
	--gutter-base: 50px;
	--gutter-scale: 1;
	--gutter: calc(var(--gutter-base) * var(--gutter-scale));

	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: calc(var(--gutter) * -1);
	margin-left: calc(var(--gutter) * -1);
}

.row > * {
	padding: var(--gutter) 0 0 var(--gutter);
}

.row.gtr-0   { --gutter-scale: 0; }
.row.gtr-25  { --gutter-scale: 0.25; }
.row.gtr-50  { --gutter-scale: 0.5; }
.row.gtr-150 { --gutter-scale: 1.5; }
.row.gtr-200 { --gutter-scale: 2; }

.row.gtr-uniform > * > :last-child {
	margin-bottom: 0;
}

.row.aln-left   { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right  { justify-content: flex-end; }
.row.aln-top    { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

.row > .imp { order: -1; }

.row > .col-1                 { width: 8.33333%; }
.row > .col-2                 { width: 16.66667%; }
.row > .col-3                 { width: 25%; }
.row > .col-4                 { width: 33.33333%; }
.row > .col-5                 { width: 41.66667%; }
.row > .col-6                 { width: 50%; }
.row > .col-7                 { width: 58.33333%; }
.row > .col-8                 { width: 66.66667%; }
.row > .col-9                 { width: 75%; }
.row > .col-10                { width: 83.33333%; }
.row > .col-11                { width: 91.66667%; }
.row > .col-12                { width: 100%; }

.row > .off-1                 { margin-left: 8.33333%; }
.row > .off-2                 { margin-left: 16.66667%; }
.row > .off-3                 { margin-left: 25%; }
.row > .off-4                 { margin-left: 33.33333%; }
.row > .off-5                 { margin-left: 41.66667%; }
.row > .off-6                 { margin-left: 50%; }
.row > .off-7                 { margin-left: 58.33333%; }
.row > .off-8                 { margin-left: 66.66667%; }
.row > .off-9                 { margin-left: 75%; }
.row > .off-10                { margin-left: 83.33333%; }
.row > .off-11                { margin-left: 91.66667%; }
.row > .off-12                { margin-left: 100%; }

/* --- Grid: Responsive ---------------------------------------------------- */

@media screen and (max-width: 1680px) {
	.row { --gutter-base: 50px; }

	.row > .imp-xlarge { order: -1; }

	.row > .col-1-xlarge          { width: 8.33333%; }
	.row > .col-2-xlarge          { width: 16.66667%; }
	.row > .col-3-xlarge          { width: 25%; }
	.row > .col-4-xlarge          { width: 33.33333%; }
	.row > .col-5-xlarge          { width: 41.66667%; }
	.row > .col-6-xlarge          { width: 50%; }
	.row > .col-7-xlarge          { width: 58.33333%; }
	.row > .col-8-xlarge          { width: 66.66667%; }
	.row > .col-9-xlarge          { width: 75%; }
	.row > .col-10-xlarge         { width: 83.33333%; }
	.row > .col-11-xlarge         { width: 91.66667%; }
	.row > .col-12-xlarge         { width: 100%; }

	.row > .off-1-xlarge          { margin-left: 8.33333%; }
	.row > .off-2-xlarge          { margin-left: 16.66667%; }
	.row > .off-3-xlarge          { margin-left: 25%; }
	.row > .off-4-xlarge          { margin-left: 33.33333%; }
	.row > .off-5-xlarge          { margin-left: 41.66667%; }
	.row > .off-6-xlarge          { margin-left: 50%; }
	.row > .off-7-xlarge          { margin-left: 58.33333%; }
	.row > .off-8-xlarge          { margin-left: 66.66667%; }
	.row > .off-9-xlarge          { margin-left: 75%; }
	.row > .off-10-xlarge         { margin-left: 83.33333%; }
	.row > .off-11-xlarge         { margin-left: 91.66667%; }
	.row > .off-12-xlarge         { margin-left: 100%; }
}

@media screen and (max-width: 1280px) {
	.row { --gutter-base: 40px; }

	.row > .imp-large { order: -1; }

	.row > .col-1-large           { width: 8.33333%; }
	.row > .col-2-large           { width: 16.66667%; }
	.row > .col-3-large           { width: 25%; }
	.row > .col-4-large           { width: 33.33333%; }
	.row > .col-5-large           { width: 41.66667%; }
	.row > .col-6-large           { width: 50%; }
	.row > .col-7-large           { width: 58.33333%; }
	.row > .col-8-large           { width: 66.66667%; }
	.row > .col-9-large           { width: 75%; }
	.row > .col-10-large          { width: 83.33333%; }
	.row > .col-11-large          { width: 91.66667%; }
	.row > .col-12-large          { width: 100%; }

	.row > .off-1-large           { margin-left: 8.33333%; }
	.row > .off-2-large           { margin-left: 16.66667%; }
	.row > .off-3-large           { margin-left: 25%; }
	.row > .off-4-large           { margin-left: 33.33333%; }
	.row > .off-5-large           { margin-left: 41.66667%; }
	.row > .off-6-large           { margin-left: 50%; }
	.row > .off-7-large           { margin-left: 58.33333%; }
	.row > .off-8-large           { margin-left: 66.66667%; }
	.row > .off-9-large           { margin-left: 75%; }
	.row > .off-10-large          { margin-left: 83.33333%; }
	.row > .off-11-large          { margin-left: 91.66667%; }
	.row > .off-12-large          { margin-left: 100%; }
}

@media screen and (max-width: 980px) {
	.row { --gutter-base: 50px; }

	.row > .imp-medium { order: -1; }

	.row > .col-1-medium          { width: 8.33333%; }
	.row > .col-2-medium          { width: 16.66667%; }
	.row > .col-3-medium          { width: 25%; }
	.row > .col-4-medium          { width: 33.33333%; }
	.row > .col-5-medium          { width: 41.66667%; }
	.row > .col-6-medium          { width: 50%; }
	.row > .col-7-medium          { width: 58.33333%; }
	.row > .col-8-medium          { width: 66.66667%; }
	.row > .col-9-medium          { width: 75%; }
	.row > .col-10-medium         { width: 83.33333%; }
	.row > .col-11-medium         { width: 91.66667%; }
	.row > .col-12-medium         { width: 100%; }

	.row > .off-1-medium          { margin-left: 8.33333%; }
	.row > .off-2-medium          { margin-left: 16.66667%; }
	.row > .off-3-medium          { margin-left: 25%; }
	.row > .off-4-medium          { margin-left: 33.33333%; }
	.row > .off-5-medium          { margin-left: 41.66667%; }
	.row > .off-6-medium          { margin-left: 50%; }
	.row > .off-7-medium          { margin-left: 58.33333%; }
	.row > .off-8-medium          { margin-left: 66.66667%; }
	.row > .off-9-medium          { margin-left: 75%; }
	.row > .off-10-medium         { margin-left: 83.33333%; }
	.row > .off-11-medium         { margin-left: 91.66667%; }
	.row > .off-12-medium         { margin-left: 100%; }
}

@media screen and (max-width: 736px) {
	.row { --gutter-base: 20px; }

	.row > .imp-small { order: -1; }

	.row > .col-1-small           { width: 8.33333%; }
	.row > .col-2-small           { width: 16.66667%; }
	.row > .col-3-small           { width: 25%; }
	.row > .col-4-small           { width: 33.33333%; }
	.row > .col-5-small           { width: 41.66667%; }
	.row > .col-6-small           { width: 50%; }
	.row > .col-7-small           { width: 58.33333%; }
	.row > .col-8-small           { width: 66.66667%; }
	.row > .col-9-small           { width: 75%; }
	.row > .col-10-small          { width: 83.33333%; }
	.row > .col-11-small          { width: 91.66667%; }
	.row > .col-12-small          { width: 100%; }

	.row > .off-1-small           { margin-left: 8.33333%; }
	.row > .off-2-small           { margin-left: 16.66667%; }
	.row > .off-3-small           { margin-left: 25%; }
	.row > .off-4-small           { margin-left: 33.33333%; }
	.row > .off-5-small           { margin-left: 41.66667%; }
	.row > .off-6-small           { margin-left: 50%; }
	.row > .off-7-small           { margin-left: 58.33333%; }
	.row > .off-8-small           { margin-left: 66.66667%; }
	.row > .off-9-small           { margin-left: 75%; }
	.row > .off-10-small          { margin-left: 83.33333%; }
	.row > .off-11-small          { margin-left: 91.66667%; }
	.row > .off-12-small          { margin-left: 100%; }
}

@media screen and (max-width: 360px) {
	.row { --gutter-base: 15px; }

	.row > .imp-xsmall { order: -1; }

	.row > .col-1-xsmall          { width: 8.33333%; }
	.row > .col-2-xsmall          { width: 16.66667%; }
	.row > .col-3-xsmall          { width: 25%; }
	.row > .col-4-xsmall          { width: 33.33333%; }
	.row > .col-5-xsmall          { width: 41.66667%; }
	.row > .col-6-xsmall          { width: 50%; }
	.row > .col-7-xsmall          { width: 58.33333%; }
	.row > .col-8-xsmall          { width: 66.66667%; }
	.row > .col-9-xsmall          { width: 75%; }
	.row > .col-10-xsmall         { width: 83.33333%; }
	.row > .col-11-xsmall         { width: 91.66667%; }
	.row > .col-12-xsmall         { width: 100%; }

	.row > .off-1-xsmall          { margin-left: 8.33333%; }
	.row > .off-2-xsmall          { margin-left: 16.66667%; }
	.row > .off-3-xsmall          { margin-left: 25%; }
	.row > .off-4-xsmall          { margin-left: 33.33333%; }
	.row > .off-5-xsmall          { margin-left: 41.66667%; }
	.row > .off-6-xsmall          { margin-left: 50%; }
	.row > .off-7-xsmall          { margin-left: 58.33333%; }
	.row > .off-8-xsmall          { margin-left: 66.66667%; }
	.row > .off-9-xsmall          { margin-left: 75%; }
	.row > .off-10-xsmall         { margin-left: 83.33333%; }
	.row > .off-11-xsmall         { margin-left: 91.66667%; }
	.row > .off-12-xsmall         { margin-left: 100%; }
}


/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Image ---------------------------------------------------------------- */

.image {
	position: relative;
	display: inline-block;
	border-radius: 8px;
}

.image img {
	display: block;
	width: 100%;
	border-radius: 8px;
}

.image:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("./images/overlay.png");
	border-radius: 8px;
}

.image.fit {
	display: block;
	width: 100%;
}

.image.featured {
	display: block;
	width: 100%;
	margin: 0 0 2em 0;
}

.image.left {
	float: left;
	margin: 0 2em 2em 0;
}

.image.centered {
	display: block;
	margin: 0 0 2em 0;
}

.image.centered img {
	margin: 0 auto;
	width: auto;
}

/* --- Button --------------------------------------------------------------- */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	-webkit-appearance: none;
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.25em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	line-height: 1em;
	background: var(--color-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	outline: 0;
	padding: 0.85em 1.85em;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	background: var(--color-accent-hover);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active {
	background: var(--color-accent-active);
}

/* Alternate (gray) button */
input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
button.alt,
.button.alt {
	background: var(--color-neutral);
}

input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
button.alt:hover,
.button.alt:hover {
	background: #ccd5d0;
}

input[type="button"].alt:active,
input[type="submit"].alt:active,
input[type="reset"].alt:active,
button.alt:active,
.button.alt:active {
	background: #b1bab5;
}

/* Large button */
input[type="button"].large,
input[type="submit"].large,
input[type="reset"].large,
button.large,
.button.large {
	font-size: 1.65em;
}

@media screen and (max-width: 736px) {
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		display: block;
		width: 100%;
	}

	input[type="button"].large,
	input[type="submit"].large,
	input[type="reset"].large,
	button.large,
	.button.large {
		font-size: 1.25em;
	}
}

/* --- List: default ------------------------------------------------------- */

ul {
	list-style: disc;
	padding-left: 1em;
}

ul li {
	padding-left: 0.5em;
}

ol {
	list-style: decimal;
	padding-left: 1.25em;
}

ol li {
	padding-left: 0.25em;
}

/* --- List: divided (rule between items) ---------------------------------- */

ul.divided {
	list-style: none;
	padding-left: 0;
}

ul.divided > li {
	border-top: solid 2px var(--color-border);
	padding-top: 2.35em;
	margin-top: 2.35em;
	padding-left: 0;
}

ul.divided > li:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* --- List: actions (row of buttons) -------------------------------------- */

ul.actions {
	list-style: none;
	padding-left: 0;
	text-align: center;
	margin: 2em 0 0 0;
}

ul.actions li {
	display: inline-block;
	margin: 0 0 0 1em;
	padding-left: 0;
}

ul.actions li:first-child {
	margin-left: 0;
}

@media screen and (max-width: 736px) {
	ul.actions li {
		display: block;
		margin: 1em 0 0 0;
	}

	ul.actions li:first-child {
		margin-top: 0;
	}
}

/* --- List: contact (social icon squares) --------------------------------- */

ul.contact {
	list-style: none;
	padding-left: 0;
	cursor: default;
}

ul.contact li {
	position: relative;
	display: inline-block;
	top: 0;
	margin: 0 0.25em;
	padding-left: 0;
	transition: top .15s ease-in-out;
}

ul.contact li a {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	outline: 0;
	background: var(--color-neutral);
	text-align: center;
	transition: background-color .2s ease-in-out;
}

ul.contact li a:before {
	color: var(--color-bg);
	font-size: 32px;
	line-height: 48px;
}

ul.contact li:hover {
	top: -5px;
}

ul.contact li:active {
	top: 0;
}

/* Brand colors on hover */
ul.contact li:hover a.fa-facebook,
ul.contact li:hover a.fa-facebook-f { background-color: #3C5A98; }
ul.contact li:hover a.fa-instagram  { background-color: #2E5E86; }
ul.contact li:hover a.fa-linkedin   { background-color: #006599; }
ul.contact li:hover a.fa-twitter    { background-color: #2DAAE4; }

/* Social icons inside the Contact section, below the phone and email */
ul.contact.contact-social {
	margin: 1.5em 0 0 0;
}

/* --- List: special (large round icon buttons) ---------------------------- */

ul.special {
	position: relative;
	list-style: none;
	padding-left: 0;
	margin: -2em 0 4em -2em;
	cursor: default;
}

ul.special li {
	position: relative;
	display: inline-block;
	top: 0;
	padding: 2em 0 0 2em;
	transition: top .15s ease-in-out;
}

ul.special li a {
	display: block;
	outline: 0;
}

ul.special li a:before {
	display: block;
	width: 2.25em;
	height: 2.25em;
	line-height: 2.175em;
	font-size: 3em;
	text-align: center;
	color: #fff;
	background: var(--color-neutral);
	border-radius: 100%;
	transition: background-color .2s ease-in-out;
}

ul.special li:hover {
	top: -1em;
}

ul.special li:hover a:before {
	background: #b9d2ce;
}

@media screen and (max-width: 1280px) {
	ul.special li a:before {
		font-size: 60px;
	}
}

@media screen and (max-width: 736px) {
	ul.special {
		margin: -0.75em 0 2em -0.75em;
	}

	ul.special li {
		padding: 0.75em 0 0 0.75em;
	}

	ul.special li a:before {
		font-size: 28px;
	}
}

/* --- List: meta (small inline details) ----------------------------------- */

ul.meta {
	font-size: 0.85em;
	color: #a1aaa5;
	list-style: none;
	padding-left: 0;
}

ul.meta li {
	position: relative;
	display: inline-block;
	margin-left: 1em;
	padding-left: 0;
}

ul.meta li:first-child {
	margin-left: 0;
}

ul.meta li a {
	color: inherit;
	outline: 0;
}

ul.meta li:before {
	opacity: 0.5;
	cursor: default;
	margin-right: 0.5em;
}

/* --- List: menu (inline, pipe-separated) --------------------------------- */

ul.menu {
	list-style: none;
	padding-left: 0;
}

ul.menu li {
	display: inline-block;
	border-left: solid 1px var(--color-border);
	padding: 0 0 0 0.75em;
	margin: 0 0 0 0.75em;
}

ul.menu li:first-child {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}

/* --- Forms ---------------------------------------------------------------- */

form label {
	display: block;
	margin: 0 0 1em 0;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
	-webkit-appearance: none;
	display: block;
	width: 100%;
	border: solid 2px var(--color-border);
	border-radius: 8px;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
	border-color: var(--color-accent-active);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select {
	line-height: 3em;
	padding: 0 1em;
}

form textarea {
	min-height: 9em;
	padding: 1em;
}

form ::placeholder {
	color: #555 !important;
}

form ::-moz-focus-inner {
	border: 0;
}

/* --- Tables --------------------------------------------------------------- */

table {
	width: 100%;
}

table.default tr {
	border-top: solid 2px var(--color-border);
}

table.default tr:first-child {
	border-top: 0;
}

table.default td {
	padding: 0.5em 1em;
}

table.default th {
	text-align: left;
	padding: 0.5em 1em;
	margin: 0 0 1em 0;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text);
}

table.default thead {
	background: var(--color-border);
	color: #fff;
}

/* --- Boxes ---------------------------------------------------------------- */

/* Highlight: centered feature block (homepage "Quality and Convenience") */
.box.highlight {
	text-align: center;
}

.box.highlight h2 {
	font-size: 3em;
	margin: 0 0 0.25em 0;
}

.box.highlight header > p {
	font-size: 1.65em;
	margin: 0 0 1.5em 0;
}

/* Feature */
.box.feature {
	text-align: center;
}

/* Post */
.box.post header {
	margin: 0 0 2.5em 0;
}

.box.post h3 {
	font-size: 3em;
	margin: 0 0 0.25em 0;
}

.box.post header > p {
	font-size: 1.65em;
	margin: 0 0 0.5em 0;
}

.box.post ul.meta {
	margin: 0 0 0.5em 0;
}

/* Post summary */
.box.post-summary h3 {
	line-height: 1em;
	margin: 0 0 0.75em 0;
}

.box.post-summary .meta {
	margin: 0;
	line-height: 1em;
}

/* Page content */
.box.page-content header {
	margin: 0 0 2.5em 0;
}

.box.page-content h2 {
	font-size: 3em;
	margin: 0 0 0.5em 0;
}

.box.page-content header > p {
	font-size: 1.65em;
	margin: 0 0 0.5em 0;
}

.box.page-content ul.meta {
	margin: 0 0 0.5em 0;
}

@media screen and (max-width: 1280px) {
	.box.highlight h2 {
		font-size: 2.5em;
	}

	.box.highlight header > p {
		font-size: 1.25em;
	}

	.box.post h3 {
		font-size: 2.5em;
	}

	.box.post header > p {
		font-size: 1.25em;
	}
}

@media screen and (max-width: 980px) {
	.box br {
		display: none;
	}
}

@media screen and (max-width: 736px) {
	.box.highlight h2,
	.box.post h3,
	.box.page-content h2 {
		font-size: 2em;
	}

	.box.highlight header > p,
	.box.post header > p,
	.box.page-content header > p {
		font-size: 1.25em;
	}
}

/* --- Icons (Font Awesome 6) -----------------------------------------------
   Usage: <a class="icon fa-solid fa-wrench"><span class="label">Repair</span></a>
          <a class="icon brands fa-instagram">...</a>
   The .label text is hidden; it documents what each icon link means.
   ------------------------------------------------------------------------ */

.icon {
	position: relative;
	text-decoration: none;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: inherit;
	text-transform: none !important;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: var(--fa);
}

.icon.brands:before {
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
}

.icon > .label {
	display: none;
}


/* ==========================================================================
   7. SITE HEADER (logo bar)

   The logo sits in normal page flow on every screen size, so it scrolls
   away with the page. Only the navigation bar (desktop) or hamburger bar
   (mobile) stays fixed at the top.
   ========================================================================== */

#page-wrapper > section {
	margin-bottom: 0;
}

#header {
	position: relative;
	margin: 0 auto;
	padding: 2em 0;
	background: var(--color-surface);
	text-align: center;
	font-family: var(--font-heading);
	font-size: 2em;
	font-weight: 700;
	text-transform: uppercase;
}

/* Logo row: image centered between two horizontal rules */
#header .logo {
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
}

#header .logo::before,
#header .logo::after {
	content: "";
	flex: 1;
	border-top: solid 5px var(--color-border);
}

#header .logo div {
	position: relative;
	display: inline-block;
	padding: 0 1.5em;
	background: var(--color-surface);
}

#header .logo h1 {
	display: inline;
}

#header .logo p {
	display: inline;
	color: var(--color-text-muted);
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 1280px) {
	#header {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 980px) {
	#header {
		padding: 1.25em 0;
	}

	/* Shrink the logo to fit narrow screens */
	#header .logo img {
		display: block;
		max-width: 100%;
		height: auto;
		max-height: 120px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 736px) {
	#header {
		padding: 0.9em 0;
	}

	#header .logo img {
		max-height: 100px;
	}
}


/* ==========================================================================
   8. DESKTOP NAVIGATION (above 980px)

   A fixed bar pinned to the top of the window. <body> gets top padding
   equal to the bar height so the header isn't hidden underneath it.
   Hidden at 980px and below, where the mobile title bar replaces it.
   ========================================================================== */

body {
	padding-top: var(--nav-height);
}

#nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: var(--nav-height);
	line-height: var(--nav-height);
	background-color: rgba(255, 255, 255, 0.95);
	background-image: url("./images/overlay.png");
	text-align: center;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	cursor: default;
}

#nav ul {
	position: relative;
	z-index: 1001;
}

#nav li {
	position: relative;
	display: inline-block;
	top: 0;
	margin: 0 0.5em;
	transition: top .15s ease-in-out;
}

#nav li > ul {
	display: none; /* submenus are rendered by dropotron (below) */
}

#nav li a,
#nav li span {
	position: relative;
	display: block;
	top: -6px;
	padding: 6px 1.5em 0.25em 1.5em;
	color: var(--color-text);
	text-decoration: none;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	outline: 0;
	transition: background-color .075s ease-in-out, color .075s ease-in-out;
}

/* Hovered / open item drops down slightly as a gray tab */
#nav li:hover,
#nav li.active {
	top: 3px;
}

#nav li:hover a,
#nav li:hover span,
#nav li.active a,
#nav li.active span {
	background: var(--color-neutral);
	color: #fff;
}

/* Current page tab is green */
#nav li.current a {
	background: var(--color-accent);
	color: #fff;
}

/* --- Dropdown menus (generated by jquery.dropotron) ---------------------- */

.dropotron {
	list-style: none;
	min-width: 14em;
	margin-top: -1em;
	padding: 1em 0;
	background: #6B7770;
	color: #fff;
	border-radius: 6px;
	box-shadow: 0 1em 2em 0 rgba(0, 0, 0, 0.1);
	line-height: 2.75em;
	text-align: left;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
}

.dropotron li {
	padding-left: 0;
}

.dropotron li:first-child {
	border-top: 0;
}

.dropotron li > a,
.dropotron li > span {
	display: block;
	padding: 0 1.25em;
	color: #D7DAD8;
	text-decoration: none;
}

.dropotron li:hover > a,
.dropotron li:hover > span,
.dropotron li.active > a,
.dropotron li.active > span {
	color: #fff;
	background: #7B8780;
}

/* Top-level dropdown gets a small arrow pointing up at the nav item */
.dropotron.level-0 {
	margin-top: 1em;
	font-size: 0.9em;
}

.dropotron.level-0:before {
	content: '';
	position: absolute;
	top: -0.65em;
	left: 50%;
	margin-left: -1em;
	border-bottom: solid 1em #6B7770;
	border-left: solid 1em transparent;
	border-right: solid 1em transparent;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 980px) {
	#nav {
		display: none;
	}
}


/* ==========================================================================
   9. MOBILE NAVIGATION (980px and below)

   main.js builds two elements at runtime and appends them to <body>:
     #titleBar  - a fixed bar with the hamburger toggle
     #navPanel  - the slide-out menu, built from the links in #nav

   IMPORTANT: main.js also copies the contents of #logo into
   "#titleBar .title". Because #titleBar is position: fixed, that copy
   would float over the page while content scrolls behind it. The
   ".title" rule below hides the copy so only the real header logo shows,
   and it scrolls away like it does on desktop. The hamburger bar itself
   stays fixed, matching the fixed nav bar on desktop.
   ========================================================================== */

#navPanel,
#titleBar {
	display: none;
}

@media screen and (max-width: 980px) {

	/* Reserve space for the fixed title bar on every page */
	body {
		padding-top: var(--titlebar-height);
	}

	/* The page slides right when the nav panel opens */
	#page-wrapper {
		backface-visibility: hidden;
		transition: transform 0.5s ease;
		padding-bottom: 1px;
	}

	/* --- Title bar (fixed, hamburger only) --- */

	#titleBar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10001;
		display: block;
		width: 100%;
		height: var(--titlebar-height);
		background-color: rgba(21, 38, 23, 0.8);
		background-image: url("./images/overlay.png");
		backface-visibility: hidden;
		transition: transform 0.5s ease;
	}

	/* Hide the logo copy main.js injects (see note above) */
	#titleBar .title {
		display: none;
	}

	/* Hamburger toggle */
	#titleBar .toggle {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1001;
		width: 80px;
		height: 60px;
		text-decoration: none;
	}

	#titleBar .toggle:before {
		content: '\f0c9'; /* Font Awesome "bars" icon */
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: var(--titlebar-height);
		height: var(--titlebar-height);
		line-height: var(--titlebar-height);
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		font-size: 20px;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		text-transform: none !important;
		text-align: center;
		text-decoration: none;
		color: #fff;
		background: var(--color-accent);
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	#titleBar .toggle:active:before {
		background-color: var(--color-accent-active);
	}

	/* --- Slide-out nav panel --- */

	#navPanel {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10002;
		display: block;
		width: 275px;
		height: 100%;
		overflow-y: auto;
		background-color: #353c37;
		background-image: url("./images/overlay.png"), linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
		background-repeat: repeat, no-repeat;
		background-size: auto, 100% 100%;
		box-shadow: inset -3px 0px 10px 0px rgba(0, 0, 0, 0.25);
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 1.25em;
		text-transform: uppercase;
		transform: translateX(-275px);
		backface-visibility: hidden;
		transition: transform 0.5s ease;
	}

	#navPanel nav {
		position: relative;
		z-index: 1000;
	}

	#navPanel .link {
		display: block;
		height: 44px;
		line-height: 44px;
		padding: 0 1em;
		color: rgba(255, 255, 255, 0.5);
		text-decoration: none;
		border-top: solid 2px rgba(87, 93, 89, 0.15);
		font-size: 0.8em;
	}

	#navPanel .link:first-child {
		border-top: 0;
	}

	#navPanel .depth-0 {
		color: #fff;
	}

	/* Submenu indentation */
	#navPanel .indent-1 { display: inline-block; width: 1em; }
	#navPanel .indent-2 { display: inline-block; width: 2em; }
	#navPanel .indent-3 { display: inline-block; width: 3em; }
	#navPanel .indent-4 { display: inline-block; width: 4em; }
	#navPanel .indent-5 { display: inline-block; width: 5em; }

	/* --- Open state (main.js toggles body.navPanel-visible) --- */

	body.navPanel-visible #page-wrapper,
	body.navPanel-visible #titleBar {
		transform: translateX(275px);
	}

	body.navPanel-visible #navPanel {
		transform: translateX(0);
	}
}


/* ==========================================================================
   10. BANNER (hero)
   ========================================================================== */

#banner {
	position: relative;
	z-index: 1;
	padding: 4em 0;
	background-image: url("./images/overlay.png"), url("./images/overlay.png"), url("../../images/banner.jpg");
	background-position: top left, top left, center center;
	background-repeat: repeat, repeat, no-repeat;
	background-size: auto, auto, cover;
}

/* Dark translucent strip holding the banner text */
#banner .content {
	position: relative;
	margin: 0;
	padding: 4em 0 3.5em 0;
	text-align: center;
	background-color: rgba(21, 28, 23, 0.85);
	background-image: url("./images/overlay.png"), url("./images/highlight.png");
	background-position: top left, center center;
	background-size: auto, 100% 250%;
	background-repeat: repeat, no-repeat;
}

#banner .content h2 {
	color: #fff;
	font-size: 2.75em;
	margin: 0 0 0.5em 0;
}

#banner .content p {
	display: block;
	margin: 0 0 1.25em 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.35em;
	text-transform: uppercase;
	color: #d9dddc;
}

/* Outline-style button for use inside the banner */
#banner .content .button {
	font-size: 1.5em;
	color: #b4b7b5;
	background: transparent !important;
	border: solid 4px rgba(87, 93, 89, 0.35);
	transition: border-color .2s ease-in-out, color .2s ease-in-out;
}

#banner .content .button:hover {
	color: #e4e7e5;
	border-color: rgba(87, 93, 89, 0.75);
}

#banner .content .button:active {
	color: #fff;
	border-color: #616763;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 1280px) {
	#banner {
		padding: 6em 0;
	}

	#banner .content {
		padding: 4em 0 3em 0;
	}

	#banner .content h2 {
		margin: 0 0 0.65em 0;
	}

	#banner .content p {
		margin: 0 0 1em 0;
	}
}

@media screen and (max-width: 980px) {
	#banner {
		padding: 14em 0;
	}
}

@media screen and (max-width: 736px) {
	#banner {
		padding: 6em 0;
	}

	#banner .content {
		padding: 4em 2.5em 3em 2.5em;
	}

	#banner .content h2 {
		font-size: 2em;
	}

	#banner .content p {
		font-size: 1.25em;
	}
}


/* ==========================================================================
   11. MAIN (white content area)
   ========================================================================== */

#main {
	background: var(--color-surface);
	border-top: solid 35px var(--color-accent);
	border-bottom: solid 10px var(--color-neutral);
	padding: 6em 0;
}

/* Sidebar (for future two-column pages) */
.sidebar h2.major {
	text-align: left;
	margin: 0 0 1.5em 0;
}

.sidebar h2.major span {
	padding-left: 0;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 1280px) {
	#main {
		border-top-width: 20px;
		border-bottom-width: 10px;
	}
}

@media screen and (max-width: 980px) {
	#main {
		border-top-width: 0;
	}

	.sidebar {
		border-top: solid 2px var(--color-border);
		padding-top: 50px;
	}
}

@media screen and (max-width: 736px) {
	#main {
		padding: 3em 0;
	}

	.sidebar {
		margin-top: 30px;
	}
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

#footer {
	text-align: center;
	padding: 8em 0;
}

#footer a {
	color: inherit;
}

#footer h2.major {
	margin: 0 0 1.5em 0;
}

/* Heading label background matches the footer's gray page background */
#footer h2.major span {
	background: var(--color-bg);
}

/* --- About ---------------------------------------------------------------
   Three columns on desktop: owners photo | text | certification badge.
   At 980px and below the photo and badge sit side by side above the text.
   ------------------------------------------------------------------------ */

.about-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 160px;
	grid-template-areas: "photo text badge";
	align-items: center;
	gap: 3em;
}

.about-layout figure {
	margin: 0;
}

/* Owners photo: square, rounded, white frame with a soft shadow.
   The light background shows as a placeholder until owners.jpg exists. */
.about-photo {
	grid-area: photo;
	text-align: center;
}

.about-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	background: var(--color-border);
	border: solid 6px var(--color-surface);
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.about-photo figcaption {
	margin-top: 0.9em;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--color-text);
}

/* Paragraph text reads better left-aligned beside the images */
.about-text {
	grid-area: text;
	text-align: left;
}

.about-text p {
	margin-bottom: 0;
}

/* Certification badge: shown whole (never cropped), with a subtle lift */
.about-badge {
	grid-area: badge;
}

.about-badge img {
	display: block;
	/*width: 100% */
	/*height: auto; */
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

/* --- About: Responsive --------------------------------------------------- */

@media screen and (max-width: 1280px) {
	.about-layout {
		grid-template-columns: 180px minmax(0, 1fr) 130px;
		gap: 2.5em;
	}
}

@media screen and (max-width: 980px) {
	.about-layout {
		grid-template-columns: 200px 150px;
		grid-template-areas:
			"photo badge"
			"text  text";
		justify-content: center;
		gap: 2em 3em;
	}

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

@media screen and (max-width: 736px) {
	.about-layout {
		grid-template-columns: 150px 110px;
		gap: 1.5em 2em;
	}

	.about-photo img {
		border-width: 4px;
		border-radius: 14px;
	}
}

@media screen and (max-width: 360px) {
	.about-layout {
		grid-template-columns: 130px 95px;
		gap: 1.5em 1.25em;
	}
}

/* --- Service area map ----------------------------------------------------
   Close-up chart zooms out to the regional chart (script in index.html).
   Without JavaScript the wide chart and star show as a still image.
   ------------------------------------------------------------------------ */

.service-map {
	--map-star: #1f5fd1;
	max-width: 720px;
	margin: 2em auto 0 auto;
}

/* Frame matches the About photo (.about-photo img) */
.service-map-view {
	position: relative;
	box-sizing: content-box;     /* keep the chart's shape inside the border */
	aspect-ratio: 1139 / 1103;   /* same shape as sectional-wide.jpg */
	overflow: hidden;
	background: var(--color-border);
	border: solid 6px var(--color-surface);
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.service-map-view img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	transform-origin: 0 0;
}

.service-map-wide {
	height: 100%;
}

.service-map-zoom {
	height: auto;
	display: none;   /* only used by the animation */
}

.service-map.is-animated .service-map-zoom {
	display: block;
}

.service-map-star {
	position: absolute;
	width: clamp(26px, 6.5%, 42px);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.service-map-star svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: var(--map-star);
	stroke: #fff;
	stroke-width: 1.6;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* One soft ring when the star settles */
.service-map-star::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--map-star);
	border-radius: 50%;
	opacity: 0;
}

.service-map-star.is-landed::after {
	animation: service-map-ring 1.4s ease-out 1;
}

@keyframes service-map-ring {
	from { transform: scale(0.6); opacity: 0.9; }
	to   { transform: scale(2.6); opacity: 0; }
}

.service-map-replay[hidden] {
	display: none !important;
}

button.service-map-replay,
button.service-map-replay:hover {
	position: absolute;
	right: 0.75em;
	bottom: 0.75em;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.35em 0.9em;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-link);
	font-size: 0.85em;
	line-height: 1.5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

button.service-map-replay:hover {
	background: #fff;
}

button.service-map-replay:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

.service-map figcaption {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.75em;
	font-size: 0.9em;
}

.service-map-key {
	width: 1.1em;
	height: 1.1em;
	fill: var(--map-star);
}

@media (prefers-reduced-motion: reduce) {
	.service-map-star.is-landed::after {
		animation: none;
	}
}

/* --- Contact reveal ------------------------------------------------------
   Phone and email are built by a script in index.html when the visitor
   clicks the button, so they never appear in the page source.
   ------------------------------------------------------------------------ */

.contact-reveal [hidden] {
	display: none !important; /* keep hidden elements hidden even though .button sets display */
}

.contact-details {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.contact-details li {
	padding-left: 0;
	margin: 0 0 0.5em 0;
	font-size: 1.25em;
}

.contact-details li:last-child {
	margin-bottom: 0;
}

.contact-details a {
	text-decoration: none;
}

.contact-details a:hover,
.contact-details a:focus {
	text-decoration: underline;
}

/* Phone number: no underline, even when it receives focus after "Show Phone & Email".
   Keyboard users still get an outline. */
.contact-phone a,
.contact-phone a:hover,
.contact-phone a:focus {
	text-decoration: none;
}

.contact-phone a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Space between the envelope icon and the email address */
.contact-email a.icon:before {
	margin-right: 0.6em;
	color: var(--color-neutral);
}

/* Phone row: number followed by Call and Text icon buttons */
.contact-phone {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}

.contact-phone a.contact-action {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 6px;
	background: var(--color-neutral);
	color: #fff;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color .2s ease-in-out;
}

.contact-phone > a:first-child {
	margin-right: 0.25em; /* a little extra room after the number */
}

.contact-phone a.contact-action:hover,
.contact-phone a.contact-action:focus {
	background: var(--color-accent);
	text-decoration: none;
}

.contact-phone a.contact-action:before {
	line-height: 1;
}

/* --- Copyright ----------------------------------------------------------- */

#copyright {
	display: inline-block;
	margin: 4em 0 0 0;
	padding: 0.75em 2em;
	background: var(--color-border);
	border-radius: 8px;
	color: #8b9790;
}

#copyright a {
	color: inherit;
}

#copyright .menu {
	margin: 0;
}

#copyright .menu li {
	border-color: var(--color-neutral);
	border-width: 2px;
	line-height: 1em;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 1280px) {
	#footer {
		padding: 6em 0;
	}
}

@media screen and (max-width: 736px) {
	#footer {
		padding: 3em 0;
	}

	#copyright .menu li {
		display: block;
		border-left: 0;
		padding-left: 0;
		line-height: 1.75em;
	}
}


/* ==========================================================================
   13. PAGE: HOMEPAGE
   ========================================================================== */

/* --- Tighter spacing for the inspection content ------------------------- */

body.homepage #main {
	padding-top: 2.5em;
	padding-bottom: 4em;
}

body.homepage #main .homepage-main-row {
	margin-top: 0;
}

body.homepage #main .homepage-main-row > * {
	padding-top: 1.25em;
}

body.homepage #main .box.highlight {
	margin-bottom: 1.5em;
}

body.homepage #main ul.special {
	margin-top: 0;
	margin-bottom: 1.5em;
}

body.homepage #main ul.special li {
	padding-top: 0.5em;
}

/* --- Inspection slideshow ------------------------------------------------
   Images are stacked; the inline script in index.html moves the .active
   class every 5 seconds and the opacity transition cross-fades them.

   The frame keeps a fixed shape (aspect-ratio) instead of a fixed height,
   so on phones the whole frame shrinks and the photo scales down with it
   rather than being cropped at the sides. 850 x 475 on desktop is
   unchanged. If you switch to photos of a different shape (e.g. 4:3),
   change the aspect-ratio to match (e.g. 4 / 3).
   ------------------------------------------------------------------------ */

.inspection-slideshow {
	position: relative;
	width: 100%;
	max-width: 850px;
	aspect-ratio: 850 / 475;
	margin: 0 auto 1.25em auto;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
}

.inspection-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.inspection-slide.active {
	opacity: 1;
}

/* --- "Request Inspection Quote" button ----------------------------------- */

.quote-button {
	margin-bottom: 4em;
}


/* ==========================================================================
   14. PAGE: INSPECTION QUOTE (inspection-quote.html)
   ========================================================================== */

/* --- Page layout --------------------------------------------------------- */

.quote-page {
	background: var(--color-surface);
	padding: 5em 0 6em 0;
}

.quote-wrap {
	width: calc(100% - 40px);
	max-width: 950px;
	margin: 0 auto;
}

.quote-intro {
	text-align: center;
	margin-bottom: 2.5em;
}

.quote-intro h1 {
	font-size: 2em;
	margin-bottom: 0.35em;
}

.quote-intro p {
	max-width: 720px;
	margin: 0 auto;
	color: #7b8780;
}

/* --- Form card & sections ------------------------------------------------ */

.quote-card {
	background: var(--color-surface);
	border-radius: 18px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
	padding: 3em;
}

.quote-section {
	margin-bottom: 2.75em;
}

.quote-section:last-of-type {
	margin-bottom: 1.5em;
}

.quote-section h2 {
	font-size: 1.25em;
	margin-bottom: 1.25em;
	padding-bottom: 0.5em;
	border-bottom: solid 2px var(--color-border);
}

.required-note {
	font-size: 0.85em;
	color: #8d9892;
	margin: -0.5em 0 2em 0;
}

/* Two-column field grid; add .full to a field to span both columns */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.35em 1.6em;
}

.form-field.full {
	grid-column: 1 / -1;
}

/* --- Labels & inputs ----------------------------------------------------- */

.quote-card label {
	display: block;
	margin: 0 0 0.45em 0;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text);
	line-height: 1.3em;
}

.quote-card input[type="text"],
.quote-card input[type="email"],
.quote-card input[type="tel"],
.quote-card input[type="number"],
.quote-card input[type="date"],
.quote-card select,
.quote-card textarea {
	width: 100%;
	padding: 0.8em 0.9em;
	border: solid 2px var(--color-border);
	border-radius: 8px;
	outline: none;
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	line-height: 1.5em;
}

.quote-card input[type="text"],
.quote-card input[type="email"],
.quote-card input[type="tel"],
.quote-card input[type="number"],
.quote-card input[type="date"],
.quote-card select {
	height: 3.15em;
}

.quote-card textarea {
	min-height: 8em;
	resize: vertical;
}

/* --- Input states -------------------------------------------------------- */

/* Example text shown in empty fields */
.quote-card input::placeholder,
.quote-card textarea::placeholder {
	font-style: italic;
	color: #9aa39e;
	opacity: 1;
}

/* Required field that has been filled in correctly */
.quote-card input:required:valid,
.quote-card textarea:required:valid,
.quote-card select:required:valid {
	font-style: normal;
	color: #4f7f49;
	border-color: #9fc997;
}

.quote-card input:focus,
.quote-card select:focus,
.quote-card textarea:focus {
	border-color: var(--color-accent-active);
	box-shadow: 0 0 0 3px rgba(161, 205, 155, 0.16);
}

/* --- Radio button rows --------------------------------------------------- */

.choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em 1.5em;
	padding-top: 0.25em;
}

.choice-row label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: none;
	color: var(--color-text);
}

.choice-row input[type="radio"] {
	-webkit-appearance: radio;
	appearance: auto;
}

/* Selected choice */
.choice-row label:has(input[type="radio"]:checked) {
	color: #4f7f49;
	font-weight: 600;
}

/* --- Spam protection (hCaptcha) ----------------------------------------- */

.form-captcha {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}

/* The hCaptcha widget is a fixed 303px wide. On the narrowest phones,
   shrink it slightly so it doesn't overflow the form card. */
@media screen and (max-width: 360px) {
	.form-captcha .h-captcha {
		transform: scale(0.9);
		transform-origin: center top;
	}
}

/* --- Submit & result message --------------------------------------------- */

.form-actions {
	text-align: center;
	margin-top: 2em;
}

.form-actions button {
	min-width: 240px;
}

#form-result {
	display: none;
	margin-top: 1.5em;
	padding: 1em 1.25em;
	border-radius: 8px;
	text-align: center;
	line-height: 1.5em;
}

#form-result.success {
	display: block;
	background: #eef8ec;
	border: solid 2px var(--color-accent);
	color: #4f684a;
}

#form-result.error {
	display: block;
	background: #fff2f2;
	border: solid 2px #d9a2a2;
	color: #8a4c4c;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 736px) {
	.quote-page {
		padding: 3em 0 4em 0;
	}

	.quote-card {
		padding: 2em 1.4em;
		border-radius: 12px;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.form-field.full {
		grid-column: auto;
	}
}


/* ==========================================================================
   15. COLLAPSIBLE SECTIONS (index.html)

   Each section heading holds a <button class="section-toggle"> with the
   propeller icon. The button opens/closes the matching .collapsible-body.
   The script at the bottom of index.html adds/removes these classes:

     .collapsible-body.is-open     section is open
     .collapsible-body.is-settled  finished opening (content may overflow)
     .is-collapsed                 on the section around a closed body
     .is-spinning-open / -close    on the icon for one propeller turn

   Collapsing only happens when <html> has the .js class (set in the page
   <head>), so with JavaScript off every section simply stays open.

   Sizes and timing: see --toggle-* and --collapse-duration in section 1.
   ========================================================================== */

/* Off-screen holder for the shared propeller drawing */
.svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* --- Heading button ----------------------------------------------------------
   Resets the template's green button styles so the heading looks exactly
   like it did before, just clickable.
   ------------------------------------------------------------------------ */

button.section-toggle,
button.section-toggle:hover,
button.section-toggle:active {
	display: inline-flex;
	align-items: center;
	gap: var(--toggle-icon-gap);
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: inherit;
	cursor: pointer;
}

button.section-toggle:focus-visible {
	outline: 2px dashed var(--color-link);
	outline-offset: 0.2em;
	border-radius: 4px;
}

#banner button.section-toggle:focus-visible {
	outline-color: var(--color-accent);
}

/* --- Propeller icon ------------------------------------------------------ */

.section-toggle-icon {
	flex: none;
	width: var(--toggle-icon-size);
	height: var(--toggle-icon-size);
	transform-origin: 50% 50%;   /* spin around the hub */
	transition: color .2s ease-in-out;
}

button.section-toggle:hover .section-toggle-icon {
	color: var(--color-link);
}

#banner button.section-toggle:hover .section-toggle-icon {
	color: var(--color-accent);
}

@keyframes propeller-spin-open {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes propeller-spin-close {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Quick start, gentle wind-down, like a prop being hand-swung */
.section-toggle-icon.is-spinning-open {
	animation: propeller-spin-open var(--toggle-spin-duration) cubic-bezier(.3, .1, .25, 1);
}

.section-toggle-icon.is-spinning-close {
	animation: propeller-spin-close var(--toggle-spin-duration) cubic-bezier(.3, .1, .25, 1);
}

/* --- Open / close animation ----------------------------------------------
   The body is a one-row grid whose row animates between 0 and its natural
   height, so no fixed heights are needed.
   ------------------------------------------------------------------------ */

html.js .collapsible-body {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;   /* keeps hidden links out of the tab order */
	transition:
		grid-template-rows var(--collapse-duration) ease,
		visibility 0s linear var(--collapse-duration);
}

html.js .collapsible-body.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var(--collapse-duration) ease,
		visibility 0s linear 0s;
}

html.js .collapsible-inner {
	min-height: 0;
	overflow: hidden;
}

html.js .collapsible-body.is-settled > .collapsible-inner {
	overflow: visible;
}

/* The wrapper is now the section's last child, so trim its last item instead */
.collapsible-inner > :last-child {
	margin-bottom: 0;
}

/* Headings land below the fixed nav when a menu link scrolls to them */
[data-section] {
	scroll-margin-top: calc(var(--nav-height) + 1em);
}

@media screen and (max-width: 980px) {
	[data-section] {
		scroll-margin-top: calc(var(--titlebar-height) + 1em);
	}
}

/* --- Closed-state spacing ------------------------------------------------ */

/* Inspections: the white area shrinks to just its green and gray borders */
body.homepage #main {
	transition: padding var(--collapse-duration) ease;
}

html.js body.homepage #main.is-collapsed {
	padding-top: 0;
	padding-bottom: 0;
}

/* Footer: closed headings sit closer together */
#footer section h2.major {
	transition: margin-bottom var(--collapse-duration) ease;
}

html.js #footer section.is-collapsed h2.major {
	margin-bottom: 0;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.section-toggle-icon.is-spinning-open,
	.section-toggle-icon.is-spinning-close {
		animation: none;
	}

	html.js .collapsible-body,
	html.js .collapsible-body.is-open,
	body.homepage #main,
	#footer section h2.major {
		transition: none;
	}
}