/*
Theme Name: BWS
Text Domain: bws
Theme URI: https://boulderwebsolutions.com
Description: Clean, Minimal Theme to start a fresh, custom design from.
Author: Cory Ballentine
Version: 1.5
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: Custom and private
License URI: For help with this file, please contact Cory@boulderwebsolutions.com
Icons - https: //pictogrammers.com/library/mdi/
*/

/* Design tokens. Colours were hardcoded across ~1000 lines; these give the
   brand palette one definition each. Values are unchanged — this is a
   refactor, not a restyle. */
:root {
	--brand-orange:        #d07c29;  /* logo mark; fails AA against white text, so not used for buttons */
	--brand-orange-cta:    #d1441f;  /* primary CTA; white text clears WCAG AA at 4.61:1 */
	--brand-orange-dark:   #b83714;  /* CTA hover / focus ring */
	--brand-navy:          #003854;  /* primary brand dark */
	--brand-blue:          #5ab1dd;  /* accent (blockquote rules, slick arrows) */
	--brand-slate:         #7893a0;  /* muted blue-grey */
	--brand-magenta:       #b95a9c;  /* secondary accent */
	--hero-text:           #dceff6;  /* hero headline on the video/gradient */
	--surface-light:       #f7f7f7;  /* light panel background */
	--surface-muted:       #eee;     /* secondary panel background */
	--border-light:        #ddd;     /* hairline borders */
	--text-muted:          #444;     /* secondary text */
	--text-heading:        #333;     /* heading text */
}


/* bitter-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/bitter-v32-latin-regular.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/bitter-v32-latin-regular.woff') format('woff');
	/* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* bitter-700 - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/bitter-v32-latin-700.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/bitter-v32-latin-700.woff') format('woff');
	/* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-300 - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/open-sans-v34-latin-300.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/open-sans-v34-latin-300.woff') format('woff');
	/* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/open-sans-v34-latin-regular.woff') format('woff');
	/* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/open-sans-v34-latin-700.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/open-sans-v34-latin-700.woff') format('woff');
	/* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {background:#fff;}
body {width:100%; font-family:'Open Sans',arial,sans-serif; font-size:18px; margin:0; padding:0; color:#000; background:#fff;}
header, nav ul, footer { margin:0 auto; }
#head {text-align:center; background:var(--brand-navy);}
.home #head {background:var(--text-muted);}
#top {width:100%; clear:both; background:var(--brand-orange); text-align:center; font-size:.85rem; padding:3px 0; position:relative; z-index:9999; display: inline-block;}
#top>div {
	max-width: 1200px;
	width: 92%;
	margin: auto;
	padding: 0 4%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-around;
	color: white;
}
#top a {display:inline-block; margin:0 50px 0 0; padding:3px 0; color:#fff;}
#top a:hover {
	text-decoration: underline;
}
header {
	display: flex;
	align-items: center;
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
	padding: 0 4%;
	position: relative;
	z-index: 99999;
}
header #logo, header h3 {line-height:1; display:inline-block; padding:0; margin:0;}
header h3 {display:block;}
header #logo a, header #logo a:hover, header #logo a:active {display:inline-block; width:135px; height:115px; margin:10px auto 0; background:url(images/Boulder-Web-Solutions-logo.png) top no-repeat; background-size:contain;
}
/* .home header #logo a, .home header #logo a:hover, .home header #logo a:active {font-size:1rem; color:#fff; width:135px; padding:94px 0 0; margin:10px auto 0;} */

#breadcrumbs {text-align:left; font-size:14px; text-transform:lowercase; color:var(--text-muted); padding:1em 2%; margin:0 auto; width:100%; max-width:1200px;}
#breadcrumbs a {color:var(--text-muted);}
#breadcrumbs a:hover {color:#000; text-decoration:underline;}
.breadcrumb_last {color:#000;}

.home h2 strong {line-height:1; letter-spacing:normal; transform:scale(1,1.25); -webkit-transform: scale(1,1.25); display:inline-block;}
header h3 a {color:white; display:block; font-size:1.7rem; padding:0 10px; font-weight:normal;}
header h3 a:hover {color:#97a56e; cursor:default;}
header .widget {padding-top:1em; font-size:.95rem; float:left;}
header .widget .btn {padding:10px; background:#ffffff91; font-size:1rem; position: absolute; right:4%; bottom:2em;}
header .widget .btn:hover {background:#192a15;}
header .support {color:var(--surface-light); position:absolute; right:275px; top:30px; text-decoration:underline;}
header .support:hover {color:orange;}
header h4 {position:absolute; top:0px; right:4%; text-align:center; z-index:9;background:#042035; background:rgb(42, 86, 119); padding:.5em; border-radius:5px; line-height:.4;}
header h4 a, header a[href^=tel] {color:#fff; font-weight:normal; padding:0; font-size:1.1em; line-height:1;}
header a[href^=tel]::before {padding:0 10px 10px 0; display:inline-block;}
header h4 a.small {font-size:1rem;}
header h4 a:hover {color:#a3db29;}

.icon-bar {background:black; height:7px; width:40px; margin:5px auto; display:block;}

nav.mobile, .hamburger {display:none;}
nav {margin:2px auto 0; padding:0; z-index:1500; position:relative; text-align:center; font-weight:600; -webkit-font-smoothing:antialiased; letter-spacing:.02em; text-transform:uppercase;}
.home nav {height:84px;}
 nav ul, nav2 ul {list-style:none; padding:0; margin:0 auto; width:100%; display:inline-block;}
 nav li, nav2 li {position:relative; float:left; margin:0; padding:0; font-size:.9rem;}
 nav a, nav2 a {line-height:45px; display:block; padding:0 20px; color:#fff;}
.home nav a {line-height:84px; display:block; padding:0 20px; color:#fff;}
 nav a:hover,
.current_page_parent >a {color: var(--brand-orange);}
.current_page_item >a {color: var(--brand-orange); border-bottom: 1px solid; font-weight: bold;}
nav li ul {position:absolute; left:0; top:0; padding:0; margin:-14px auto 0; width:99%; min-width:200px; border-radius:0px 10px 10px 10px; border:1px solid var(--border-light); background:#fff; opacity:0; visibility:hidden; transition: all .25s ease; box-shadow: 0 12px 30px rgba(42, 0, 100, .35);}
nav li:hover ul {opacity:1; top:65px; visibility:visible;}
 nav li li {font-weight:normal; display:block; float:none; margin:0; padding:0;}
 nav li li a {margin:0; line-height:1.3; padding:15px; border:none; text-align:center; background:none; text-transform:none; color:#000;}
 /* nav li li a:hover, nav li li.current_page_item a, nav li li.current_page_item a:hover {background: #5d4d3a; color: white;} */
 nav li:hover ul,  nav li li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul {left:0;}
 nav li li ul {display:none; background:#fbfbfb; border-left:2px solid var(--surface-muted); padding-top:10px;}
 nav li li:hover ul {left:160px; top:0; display:block; }
nav li.menu-item-has-children a:after {content:'v'; color:#fff; font-size:.9rem; transform: scale(1,.5); position:absolute; bottom:-20px; left:48%;}
nav li.menu-item-has-children a:hover:after {color:var(--brand-navy)}
nav li.menu-item-has-children li a:after {content:'';}
.home nav ul ul a {color:#000; line-height:1.1; padding:15px 10px;}
.home nav li.menu-item-has-children a:after {color:#fff;}
.home nav li.menu-item-has-children a:hover:after {color:var(--brand-blue);}

#main-wrap {float:left; width:100%;}
#main {background:#f0f0f0a6; float:left; margin:auto; width:100%;}
.home #main {
	padding: 1em 0 0;
	background: url(images/honeycomb-bg.webp);
	background-size: auto;
	background-size: contain;
}
#content {clear:both;  padding:0 3% 2em; margin:auto; line-height:1.75; font-size:1.1rem; color:var(--text-muted);
}
/* The inset box-shadow here was rgba(33,121,173,0.01) — 1% alpha, i.e. invisible.
   Removed rather than left as dead paint. This band is deliberately light: it
   separates the two full-bleed photo bands (#resp, #wp) from the portfolio. */
.home #content {padding: 2em 4%; background:#fff;}

.blog #content, .single #content, .archive #content {width: 69%; float: left;}
.blog #sidebar, .single #sidebar, .archive #sidebar {width: 20%;}
.blog #main, .single #main, .archive #main {background:none; padding-top:2em;}
.single-portfolio #main {
	padding-top: 0;
}
.single-portfolio #content {
	width: auto;
}
.blog h3 {margin-bottom:0;}
.blog p, .archive p { margin:0 auto 3em; }
.date, .author {font-size:16px; font-style:italic; margin:0; padding:0; display:inline;}
.single .cta:nth-of-type(2n) {margin:0 20px 0;}

#sidebar {float:left; width:25%; padding:1em 2% 1.5em 2%; background:var(--surface-muted); border-radius:16px 0 0 16px; border:1px solid var(--border-light); font-size:1rem;}
#sidebar ul { margin:0; padding:0;list-style:none; }
#sidebar h2 {font-size:30px; padding:0; margin:0; }
#sidebar li {list-style:none; padding:.5em 0; display:block;}
#sidebar ul.children {padding:revert;}
#sidebar a:hover {}
#sidebar #text-2 p {color:#777; margin:1rem 0; padding:0; font-size:.9rem; }
#sidebar #text-2 em {display:block; color:var(--text-muted); font-size:1rem; }

.content-block {max-width:800px; margin:0 auto 2em;}
.full,  #respond {padding:2% 3%; margin:1% 0; border-radius:5px; float:left; width:94%;}
.home .full#post-1 {width:94%; height:auto !important; padding:2%; margin:1%; background:#fff;}
.home .full#post-1 p {padding:0 2%;}
.home #post-1 a { color:#a5c525;}
.home .full { float:left; width:29.3%; margin:1%; padding:1%; text-align:center; position:relative; background:#fff;}
.home .full p {text-align:left; padding:0 4% 2%; }
.home .full .post-edit-link {position:absolute; bottom:0; right:0; }
.home .full img {margin:3% 0 0;}
.ocean-icons {background:url(images/ocean-icons.webp) no-repeat; }
section {background:var(--surface-light); clear:both;}
section:nth-of-type(even) {background:#c8dbf2;}
.home section {max-width: 1400px;
	margin: 0 auto;
	padding: 4em 2%; text-align: center;
}
.outer-wrap {max-width: 1400px; margin: 1em auto; padding: 0 2%;}

.checks {text-align:center; max-width:450px; margin:2em auto 4em;}
.checks img {float:left; padding:0 5px 0 25px;}
/*
.archive .full img {float:left; margin:2% 2% 0 0; max-width:40%; }
.archive .full {float:left; }
 */
.scroll {transition:1s ease-out;}

/* FAQ PAGE AND SECTION */
.page-id-1267 .faqs {margin:auto;}
.faqs {max-width:1100px; margin:4em auto; padding:0 4% 4em;}
.faqs .question {margin:10px 0 10px; background:var(--surface-muted); padding:10px; position:relative; cursor:pointer; font-size:1.3rem;}
.faqs .question:after {content: " +"; position:absolute; right:10px;}
.faqs .answer {font-weight:normal; visibility:hidden; opacity:0; height:0; padding: 0 12px; display:block; max-height: 0; transition: max-height 0.25s ease-out;}
.faqs .question.show:after {content: " -";}
.faqs .answer.show {display:block !important; visibility:visible; opacity:1; height:auto; max-height: 500px; padding-bottom:25px; transition: 0.3s ease-in;}
.faqs a {font-weight:bold;}

ul#home-widgets {width:94%; float:left; margin:0 auto; padding:0 3%;}
#home-widgets >div {width:100%; display:grid; grid-template-columns:30% 30% 30%; grid-column-gap:5%; grid-row-gap:2em; clear:both; float:left;}
/* #home-widgets.scroll {background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(175,206,186,1) 35%, rgba(175,206,186,1) 100%);} */
#home-widgets h3 {text-align:center; font-size:2rem; margin:2em auto 0; float:left; width:100%;}
#home-widgets li {max-height:266px; overflow:hidden; padding:0 0 10px; list-style:none; text-align:center; position:relative; transition:.5s;}
#home-widgets h2 {font-size:1.25rem; color:var(--text-muted); position:absolute; bottom:0; width:100%; background:var(--surface-light);}
#home-widgets li img {width:100%; margin:auto; float:none;}
#home-widgets li img:hover {transform:scale3d(1.05,1.05,1); transition:.5s; max-height:218px;}
#home-widgets p {overflow:hidden;}

/*
#home-widgets {width:100%; clear:both; float:left; padding:3em 0; margin:1em auto; list-style:none; text-align:center; line-height:1.5; font-size:1.2rem; background:none;}
#home-widgets.scroll {background:#afceba;}
#home-widgets .widget { background:#fff;}
#home-widgets .widget.first {border:1px solid #192a15; float:left; width:45%; margin:0 1.9217% .5%; }
#home-widgets .widget.second {}
#home-widgets .widget.third {}
#home-widgets .widget h2 {margin:0 auto;}
#home-widgets p {padding:0 2% .5em;}
 */

#foot {margin:0 auto; padding:1em 0; clear:both; float:left; width:100%; background:#222;}
footer {color:#cacaca; padding:0 2%; margin:0 auto 8em;}
footer ul ul{list-style:none; padding:0; margin:0;}
footer >ul {padding:0; margin:0; list-style:none; display:grid; grid-template-columns:auto auto auto; grid-gap:0 5%;}
footer >ul >li {margin:0; padding:2em 5% 0;}
footer .tagcloud a {display:inline-block; }
footer h2 {margin:0 0 .5em; padding:0; text-align:left; font-size:1.1rem; color:#76a9f9; text-transform:uppercase; font-family:'Bitter',serif; letter-spacing:normal; font-weight:600;}
footer a {}
footer li li a {color:#c1c1c1; font-size:14px; padding:5px 0; display:inline-block;}
footer a:hover {color:#fff;}
footer .message .nf-field-label label {color: var(--surface-light); font-weight: normal; letter-spacing: .01em;}
footer .message .nf-field-element textarea {height: 100px;}
footer .nf-response-msg {color:white !important}
footer >ul >li:last-child:nth-child(3n - 2) {grid-column-end: -1;}

a {text-decoration:none; color:var(--brand-navy);
	transition:all .1s linear;
}
 a:active {background:none;}
/* outline:none used to apply to a:focus, which removed the keyboard focus ring
   site-wide (WCAG 2.4.7). :focus-visible shows a ring for keyboard users without
   putting one on mouse clicks, which is why the outline was likely removed. */
 a:focus {outline:none;}
 a:focus-visible {outline:3px solid var(--brand-orange-cta); outline-offset:2px; border-radius:2px;}
 a:hover {color:#000;}
 a[href^=tel] {text-decoration:none;}
 a[href^=tel]::before {padding-right:8px; vertical-align:1px; font-weight:900; font-size:.8em;}
 a[href^=mailto] {color:inherit;}
 /* a[href^=mailto]::before {vertical-align:middle; content:"\f0e0"; padding-right:15px; font-weight:900;  font-size:.8em;} */

.share a {font-size:35px; margin:0 18px 0 0; background-size:cover; display:inline-block; opacity:1;}
/*
.insta {background:url(images/instagram.webp) no-repeat;}
.fb {background:url(images/facebook.webp) no-repeat; }
.twit {background:url(images/twitter.webp) no-repeat; }
 */
.share a :hover {opacity:.7;}
a.post-edit-link {display:block; background:#fff; width:auto; float:right; padding:0 3px; font-size:smaller; color:#ccc;}
.smaller {font-size:.9rem;}

img, a.img, img a {border:none; max-width:100%; height:auto;}

.cycle-prev, .cycle-next {width:48px; height:48px; background:url(images/prev.webp) no-repeat; content:'>'; color:black; left:0; top:45%; position:absolute; display:inline-block; z-index:9999; cursor:pointer;}
.cycle-next {background-image:url(images/next.webp); left:initial; right:0; z-index:9999;}
#slideshow ul {padding:0; margin:0; text-align:center; list-style:none; width:100%; height:auto; max-height:640px; overflow:hidden; display:block; z-index:888; position:relative;}
#slideshow li {width:100%; height:auto; margin:0 auto; padding:0; position:relative;}
#slideshow img {max-width:100%; height:auto; max-height:570px; margin:0 auto; padding:0;}
#slideshow .caption {display:block;}

#grid-view {display:grid; clear:both; width:96%;
 grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 1em 1em;
  grid-auto-flow: dense;}
#grid-view, .flex {display:flex; flex-flow:row wrap; flex-grow:2; flex-shrink:2; align-content:center; justify-content:space-evenly;}
#grid-view img {max-width:300px; max-height:168px;}
#lightbox #imageDetails {font-size:1rem; line-height:1.2;}
#lightbox #imageDetails a {font-size:.8rem;}

.flex-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
	margin: 30px 0;
}

.flex-gallery img {
	max-height: 300px;
	width: auto;
	height: auto;
	flex: 0 1 auto;
}

#pager2, #cycle-2 {clear:both; margin:20px auto;}
#pager2 img, #cycle-2 li {margin:0 10px; max-height:100px; width:auto !important; overflow:hidden;}
.grid-view, .slide-view {float:right; margin:0 2% 1em; background:url(images/grid-view.webp) left no-repeat; height:25px; padding-left:30px; opacity:.7; cursor:pointer;}
.slide-view {background-image:url(images/slide-view.webp);}

.pg-website-design-and-development-portfolio #content {padding:0;}
#portfolio {clear:both; float:left; text-align:center; width:100%; list-style:none; margin:0 auto;  background:var(--brand-blue);
background: radial-gradient(circle, rgba(33, 118, 167,1) 0%, rgba(183,216,255,1) 100%); }
/* Equal-width portfolio cards.
   This was display:flex with no width on the <li>, so each card sized to its own
   content and a long project title produced a wider box than a short one. The
   flex:0 0 calc(25% - 20px) that was meant to size them sat on the <a>, which is
   not a flex item (the <li> is), so it never applied. The responsive rules further
   down already used grid-template-columns, so grid was the original intent.
   1fr tracks make every card exactly one column wide at every breakpoint. */
#portfolio ul {
	clear: both;
	width: 100%;
	float: left;
	/* display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3em 3%;
	justify-content: center;
	list-style: none;
	margin: 0 auto 2em;
	padding: 0;
}

#portfolio li {
	background: var(--surface-light);
	padding: 1em 10px;
	display: flex;            /* lets the card fill the row height evenly */
	flex-direction: column;
	min-width: 0;             /* allows the card to shrink instead of overflowing */
}
#portfolio h3, #portfolio h2 {display:block; text-align:center; font-size:40px; margin:1em auto;}
/* The flex sizing that used to live here never applied (the <a> is not a flex
   item) and the 20px side margins would now eat into the grid track unevenly. */
#portfolio ul a {font-size:1rem; width:100%; margin:0; padding:5px; box-sizing:border-box; position:relative; overflow:hidden; text-align:center; display:block; color:#000; line-height:1.2;}
#portfolio a.btn {margin:0 auto 3em;}
#portfolio a.btn:hover strong {color:#000;}
/* The thumbnails are a fixed 350px wide; max-width keeps them inside narrower
   grid tracks instead of overflowing the card. */
#portfolio img {display:block; opacity:1; margin:20px auto 5px; max-width:100%; height:auto; box-shadow:3PX 3PX 5PX var(--text-muted);}
#portfolio img:hover {transform:scale3d(1.05,1.05,1); transition:.5s; opacity:.9;}
#portfolio b {color:var(--text-muted); padding:10px; display:block;}

#port-wrap {
	display: flex;
	justify-content: center;
	padding: 0 2%;
	gap: 1%;
}
.single-portfolio #hero {
	width: 1000px;
	height: 400px;
	background-size: contain;
	margin: 2em auto 0;
	border: 6px solid #bcbcbc;
	outline-offset: 12px;
}
.single-portfolio h1 span {color: inherit; text-align: right; font-size: 110%; display: block; font-style: italic; padding: .3em 0 0;}
.portfolio-cta {
	margin: 2em auto;
	padding: 20px;
	text-align: center;
	background-color: var(--brand-navy);
	color: #fff;
	border-left: 4px solid #000;
	width: 93%;
}
.portfolio-cta a {color: #fff; text-decoration: underline;}
.portfolio-cta a:hover {color: var(--brand-orange); text-decoration: none; font-style: bold;}

.page-template-temp-port-post  {margin-bottom:1em;}

#hero {text-align:center; background-size:cover; background-repeat:no-repeat; width:100%; position:relative; background-position-x:0%; background-position-y:0%; background-position:center top; height:250px; overflow:hidden;}
.home #hero {height:475px; box-shadow:inset 0 0 0 2000px var(--brand-navy);}
.home #hero video {opacity:.7; position:absolute; left:49%; transform:translateX(-50%); bottom:-1px; min-width:103%; min-height:100%;}

#hero {
	position: relative;
	/* Establishes positioning context */
	isolation: isolate;
	/* Keeps the background from overlapping content */
}

.home #hero::before {
		background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(140, 140, 140, 1) 100%);
}

#hero::before {
	content: "";
	/* Required to render the pseudo-element */
	position: absolute;
	/* Places it relative to the container */
	inset: 0;
	/* Stretches it to fill the entire container */
	z-index: -1;
	/* Pushes the image behind the text */

	/* Your background image styling */
	background-size: cover;
	background-position: center;
	background-color: #003854;
	/* Control your opacity here (0.0 to 1.0) */
	opacity: .6;
}

.single-portfolio #hero::before {
	background-color: initial;
}

.align-middle {
	gap: 2%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 94%;
	z-index: 9999;
	grid-template-columns: 1fr 1fr;
	place-items: center;
	margin: auto;
}
.align-middle a {color:#fff;}
.align-middle h1, .align-middle h3 {margin:20px 0;}
.align-middle h1 {color:var(--brand-orange); font-weight:800;}
.align-middle h1 a {color:var(--brand-orange); letter-spacing:2px;}

.align-middle h3 {font-weight:200; max-width:480px; margin:auto;}
.align-middle h3 a:hover {color:#fff; cursor:default;}
.align-middle a[href^="tel"]::before {padding-right:0;}
.align-middle .buttons-row {margin:3em auto 0; display:block;}

.home .align-middle {
	display: grid;
	position: relative;
	top: initial;
	left: initial;
	transform: none;
}

.home .align-middle>div {
	font-size: 3.5cqw;
	text-shadow: 1px 1px 3px var(--text-muted);
	color: var(--hero-text);
	font-weight: 800;
}

.home .graphic {
	background: url(images/web-design-3d.webp) center no-repeat;
	width: 100%;
	height: 300px;
	background-size: contain;
}

.home .align-middle .buttons-row {
	margin: 0em auto .5em;
}

.home .align-middle .buttons-row a {
	font-size: 1.25rem;
}

/* Hero CTAs: one clear primary action. Both buttons used to inherit the navy
   .btn style, which sat on a blue/teal hero and receded into it.
   #d1441f is the brand orange darkened just enough that white text clears
   WCAG AA (4.61:1 — the logo's #f25c35 only reaches 3.30:1). */
.home .align-middle .buttons-row a:first-child {
	background: var(--brand-orange-cta);
	border-color: var(--brand-orange-cta);
}
/* Secondary action: outline so it reads as the lesser of the two. */
.home .align-middle .buttons-row a:last-child {
	background: rgba(9, 68, 91, .55);
	border-color: #fff;
}
.home .align-middle .buttons-row a:hover {
	background: var(--hero-text);
	color: rgba(9, 68, 91, .8);
	text-shadow: none;
}

/* Trust line under the hero CTAs. */
.hero-trust {
	margin: 1.25em auto 0;
	font-size: 1rem;
	color: #fff;
	text-shadow: 1px 1px 3px var(--text-muted);
}
.hero-trust a { color: #fff; text-decoration: underline; }
.hero-trust .stars { color: #ffc233; letter-spacing: 2px; margin-right: .4em; }


#hero >a {width:320px; position:absolute; top:70%; left:50%; transform:translate(-50%, -50%); background:#f4f4f4d9; color:var(--text-muted); font-size:1.25rem; padding:15px; text-align:center;}
#hero >a:hover {background:#f4f4f4;}
#hero >a p {border:1px solid #20888f; border-left:0; border-right:0; margin:2%; padding:15px 30px;}

header form.search {width:285px; float:right; padding:0; position:relative; bottom:initial; right:initial; border-radius:5px; margin:3em auto 0;}
header form.search input {width:58%; border:1px solid var(--border-light); background:#fff url(images/search-icon.webp) 7px no-repeat; background-size:18px; padding:10px 15px 10px 37px; float:left; display:inline-block; margin:0; border-right:0;}
header form.search input.button {padding:10px 8px 12px; width:23%; border-right:1px solid var(--border-light); background:var(--surface-muted); color:var(--text-muted); font-size:1rem;}
header form.search input.button:hover {background:var(--text-muted); color:var(--surface-light);}

#testi {clear:both; background: var(--surface-light); margin:3em auto 0;}
#testi .slick-slide {margin:0 10px; padding:0 10px; height:auto;}
#testi h2 {text-align:center; padding:1em 3% 0;}
#testi blockquote {min-height:180px;}
#testi .slick-prev {
	left: 25px;
}
#testi .slick-next {
	right: 0;
}

.slick-next, .slick-prev {top:36%;}
.slick-next:before, .slick-prev:before {color:var(--brand-blue) !important;}

.slick-next::before, .slick-prev::before {color:#000;}
.slick-prev.slick-disabled, .slick-next.slick-disabled {cursor:default;}

blockquote {
 border-left:7px solid var(--brand-blue);
 padding:30px; line-height:1.4; font-size:1rem; min-height:5px; letter-spacing:normal;
}

blockquote:before { font-family:georgia,serif; letter-spacing:normal;
 display: block;
 color:#ccc;
 content:open-quote;
 font-size:10em;
 line-height:.1em;
 padding:50px 0 0;
}
blockquote span:before { font-family:georgia,serif; letter-spacing:normal;
 padding-left:5px;
 color:#ccc;
 content:close-quote;
 font-size:2em;
 line-height:.1em;
 vertical-align:-.4em
}
blockquote em { font-family:georgia,serif; letter-spacing:normal;
 float:right;
 font-size:.8em;
 padding:15px 0;
 width:100%;
 text-align:right;
}

/* maintenance_form */
.page-id-1165 h2 {font-size:28px;}
.page-id-1165 h3 {font-size:22px;}
.page-id-1165 #content {width:60%;}
/* min-height, not height: this section had a fixed 535px with overflow:hidden and
   no height:auto override at ANY breakpoint, so longer copy or a bumped font size
   was silently clipped. The background is pinned to the section rather than a
   fixed pixel height so it grows with the content. */
#resp {min-height:535px; clear:both; position:relative;}
#resp .back-img {background:url(images/mobile-design-screens.webp) center no-repeat; background-size:cover; opacity:1; position:absolute; top:0; bottom:0; height:100%; width:100%;}
#resp .text {max-width:550px; padding:2em 3%; position: absolute;}
#resp h2 {font-weight:600;}

/* Section rhythm: #seo, #resp and #wp used to run as three consecutive full-bleed
   image bands. This one is now a light tinted band, so the page alternates
   light -> photo -> light -> photo instead of stacking three heavy bands. */
#seo {margin-top: 2.5em; text-align: center; overflow:hidden; clear:both; background:var(--surface-light); padding: 3em 4%; box-shadow: 0 5px 5px rgba(128,128,128,.35); position: relative; z-index: 99999;}
#seo strong {font-size:1.5rem;}

#trust {background:#ced4df; padding: 1em 4% 3em; box-shadow: 0 5px 5px #808080; position: relative; z-index: 9999;}

.pg-responsive-web-design blockquote {border-right:7px solid var(--brand-blue);}

/* Overlay unified on the brand navy. This was rgba(41,55,8,.5) — a dark olive
   that matched nothing else on the page. min-height rather than a fixed height
   so longer copy or a larger font size cannot be clipped by overflow:hidden. */
#wp {
	display: flex;
	gap: 4%;
	place-items: center;
	justify-content: center;
	background: url(images/wp-code-comp.webp) no-repeat;
	background-size: cover;
	box-shadow: inset 0 0 0 2000px rgba(9, 68, 91, 0.8);
}
#wp >div {max-width:500px; padding:1em 3%;}
#wp >div * {color: #fff;}
#wp h3 a {color: #bcf2ff;}

/* .bws was .cwc — the footer credit link class. Renamed with the theme; it is
   not referenced by any template or by page content, so nothing else changes. */
a.copy, a.bws {display:block; text-align:center; padding:2em 2%; color:#7c7c7c; clear:both; font-size:.8rem; background:#222; }
a.copy:hover, a.bws:hover {color:#cacaca;}
a.bws {font-size:9px; padding:2em 0; color:#717171;}
a.bws:nth-last-of-type(1) {text-align:right; padding:2em 4%;}

.video-container {position:relative; padding-bottom:56.25%; padding-top:35px; height:0; overflow:hidden;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

td, th {vertical-align:top; padding:5px;}
h2,h3,h4,h5 { padding:2px 0 3px; font-weight:normal;}
h1,h2,h3 {color:var(--text-heading); font-family:'Bitter',serif; letter-spacing:normal; margin:.5em auto; font-family:'Bitter',serif; line-height:1.25; }
h1 {margin:.75em 0; font-size:42px; text-align:center; font-weight:200;}
h1 span {color:#a0e300;}
h1 a, h1 a:hover {cursor:default;}
    h1.page-title {margin:0 auto; padding:.75em; font-size:38px;}
    .single h1, h1.archive, #comments {text-align: left;}
.home h1 {font-size: 2.5rem; margin: auto;}
.home #main h2 {text-align:center; padding: 0 3%;}
h2 {font-size:42px; padding:1em 0 0;}
    #content h2 {font-size:32px;}
	.pg-contact #content h2 {
		padding: 0;
	}
h3 {font-size:26px;}
h4 {font-size:22px;}
h5 {font-size:1em;}
p.thanks {font-size:1.5em; padding:15px; display:block; text-align:center; position:absolute; top:0; background:#319dba; color:white; width:100%; padding:1em 0; margin:0 auto;}
footer p.thanks {color:white; font-size:1rem; position:relative;}
.center {text-align:center;}
b, strong {color:black;}

.iconify {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: 1rem;
	vertical-align: -0.2em !important;
}

/* FIELD ICONS (was Font Awesome)
   Font Awesome was never enqueued on this site, so every .fas/.fa-* element
   rendered as an empty box. These are inline SVG sprite symbols instead, sized
   in em so they track the field's font-size and inheriting colour via
   fill:currentColor. Spacing matches the old rules (10px gap, comment on top). */
.field-icon {
 width:1em; height:1em;
 float:none;
 padding-right:10px;
 vertical-align:-.15em;
 box-sizing:content-box;
 color:var(--brand-slate);
}
.field-icon--top {vertical-align:top; margin-top:18px;}

.col-1-2 {width:48%; float:left; margin:0 4% 0 0;}
.col-1-2:nth-of-type(even) {margin:0;}
.col-1-2 .item {margin:0 auto 1em;}

.pg-contact #content {max-width:1200px; float:none;}
/*
.pg-contact .col-1-2.grid { display:grid; grid-template-columns:1fr 1fr; margin-bottom:3em;}
.pg-contact .col-1-2.grid h3 {grid-column-start:1; grid-column-end:3; margin:1em auto; font-size:2rem;  width:100%;}
.pg-contact .col-1-2.grid strong {font-family:'Source Serif Pro',verdana,arial,sans-serif; margin:0 auto 10px; display:inline-block; letter-spacing:1px;}
.pg-contact .col-1-2.grid:nth-of-type(even) {display:inline-block;}
 */
/* .fa-map-marker-alt / .fa-business-time / .fas-fix rules removed:
   no template or database content ever used those classes. */

/* FORMS */
fieldset {
	display: inline-block;
	clear: left;
	border: 1px solid var(--brand-slate);
	background: var(--surface-light);
	padding: 10px 30px 0;
}

.nf-form-cont {
	padding: 0;
	margin: 0 auto 15px;
	max-width: 400px;
	width: auto;
	color: var(--text-heading);
}

label#nf-label-field-hp-2 {
	color: white;
}

.nf-form-hp {
	font-size: 16px;
}

#ninja_forms_required_items,
.nf-field-container {
	margin-bottom: 10px !important;
}

.label-above .nf-field-label {
	margin-bottom: 1px !important;
}

.nf-before-form-content {
	display: none;
}

.ninja-forms-field[type='submit'] {
	/* float: right; */
	border: 2px solid var(--brand-orange);
	padding: 5px 25px;
	width: auto;
	height: auto;
	color: var(--brand-orange);
	box-shadow: none;
	background: #fff;
	border-radius: 25px;
}

.ninja-forms-field[type='submit']:hover {
	background: var(--brand-orange);
	color: #fff;
}

/* #contactForm {margin:0; padding:0; margin:0 0 15px; width:100%;}
#contactForm fieldset {clear:left; border:1px solid #7893a0; background:#fff; padding:10px 30px 10px 10px;}
#contactForm label, fieldset p.full {font-size:14px; font-weight:bold; float:left; clear:left; width:150px; text-align:right; padding:5px; line-height:17px; margin:2px}
#contactForm legend {color:#7893a0; font-size:20px; color:#f25c35;}
#contactForm input, #contactForm select, #contactForm textarea {margin:2px; width:230px; outline:none; padding:5px; font-family:arial,sans; letter-spacing:1px; font-size:1rem;}
#contactForm label {width:auto;}
#contactForm input,#contactForm textarea {clear:right; margin:10px 0; height:25px; width:84%; color:#000; border:none; border-bottom:1px solid #ddd;}
#contactForm textarea {height:100px;}
#contactForm p {width:100%; color:#444; letter-spacing:1px; font-weight:normal; margin:15px 0; padding:10px 0;}
 #contactForm p span {color:#000;}
#contactForm select {float:right; border:1px solid #ddd; width:auto; margin:10px 0 10px 10px; color:#8c8c8c;}
#contactForm input.button, #messageForm input.button {float:right; border:2px solid #f25c35; padding:5px 25px; width:auto; height:auto; color:#f25c35; box-shadow:none; background:#fff; border-radius:25px;}
#contactForm input.button:hover, #messageForm input.button:hover {background:#f25c35; color:#fff;}
#contactForm .g-recaptcha {float:right;}
#contactForm p.fail {text-align:right; color:#e1346b; font-weight:bold; font-size:1.05rem;} */

.antispam {display:none;}
.ruhuman {display:flex;}
.ruhuman label {padding-top:20px !important;}
.ruhuman input {flex:1;}

input.button {background:var(--brand-orange); width:auto; outline:none; clear:both; float:left; color:#fff; border:2px solid var(--brand-orange); font-size:1.5em; border-radius:7px; margin:10px 43px 20px; }
/*
input.button:hover {background:#b95a9c; border:2px solid #b95a9c;}
 */
input.website {display:none;}
.idea {clear:both; margin:0 auto; background:url(images/honeycomb-bg.webp) no-repeat; background-size:cover; padding:2em 0 4em; float:left; text-align:center; width:100%; box-shadow:inset 0 0 0 2000px rgba(217, 126, 22, .6);}
.idea h3, .idea p {max-width:410px; margin:0 auto; line-height:1.5; padding:1.5em 2% .5em;}

form #info {float:left; width:180px; height:270px; font:18px Arial; color:var(--brand-slate);}
#info div {margin:0 0 10px; font-size:16px;}
#info #phone {color:#00679a; font-size:22px;}
#info #hours {}
#alert {width:400px; height:200px; background:white; color:black; display:none;}

#messageForm {width:300px; position:relative;}
#messageForm input, #messageForm textarea {color:#424242; font-size:1rem; width:91.5%; padding:10px; margin:0 auto 7px;}
#messageForm input.button {font-size:1rem; width:auto; margin:0 auto; display:inline-block;}
#messageForm .ruhuman * {font-size:14px; padding:5px;}
#messageForm .ruhuman input:first-of-type {color:white; background:none; border:none; border-bottom:1px solid white; }

#estimateForm {max-width:800px; margin:auto;}
#estimateForm fieldset {margin:2em 0 0;}
fieldset legend {padding:0 1%; font-size: 20px;	color: var(--brand-orange);}
#estimateForm label {width:54%; margin:10px; }
#estimateForm input, #estimateForm textarea, #estimateForm select {width:auto; padding:5px 10px; margin:10px 0; }
  #estimateForm input.sm {width:auto;}
#estimateForm #merchant p {width:54%;}
#estimateForm label[for='project_desc'] {padding:1% 0 0; color:#6d6969; display:block;}
#estimateForm textarea {width:70%;}
.grid.checks {max-width:none; display:grid; clear:both; grid-template-columns:repeat(5, 1fr); grid-auto-flow:dense;}
#estimateForm input.sm, #estimateForm label.sm {text-align:left; font-size:14px; line-height:.8; padding:5px 10px; width:auto; background:var(--surface-muted); white-space:nowrap;}
#estimateForm input[type="checkbox"] {display:table-cell; margin-right:5px;}
#estimateForm label {font-size:1rem; line-height:1;}
#estimateForm input.button {margin:2em auto 0; display:inline-block;float:none;width:100%;padding:15px 10px; text-transform:capitalize; font-size:1.2rem;}
#reg_form label {margin:5px 10px 10px; vertical-align:top; display:inline-block; width:230px; text-align:right;}
#reg_form textarea {margin:10px 0;}
#reg_form +p >a.cta {float:left;}

/* Form controls keep the quiet mouse-focus treatment, but keyboard focus is
   visible again — losing your place mid-form is where this hurt most. */
input:focus,
select:focus,
textarea:focus,
button:focus {outline:none;}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {outline:3px solid var(--brand-orange-cta); outline-offset:2px;}
input:focus {background:var(--surface-light);}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:var(--text-muted);
}
::-moz-placeholder { /* Firefox 19+ */
  color:var(--text-muted);
}
:-ms-input-placeholder { /* IE 10+ */
  color:var(--text-muted);
}
:-moz-placeholder { /* Firefox 18- */
  color:var(--text-muted);
}

.cli-plugin-button, .medium.cli-plugin-button {margin: 5px 20px;}

.validation-advice, fieldset i {display:block; clear:right; color:var(--brand-orange); float:right; text-align:center; font-size:.85em; font-style:normal;}
label.error {color:red; border:1px solid red;float: none !important; text-align:center !important;}

.btn,
button,
input.button,
a.button,
.cta,
#commentform input#submit,
#searchsubmit {
	width: auto;
	display: inline-block;
	font-size: 1rem;
	padding: 10px 20px;
	margin: 1em auto 0;
	background: white;
	color: var(--brand-navy);
	border: 3px solid var(--brand-navy);
	-webkit-appearance: none;
	letter-spacing: 1px;
	font-weight: bold;
}

.btn:nth-of-type(even),
button:nth-of-type(even),
input.button,
a.button:nth-of-type(even),
.cta:nth-of-type(even) {
	margin: 1em 20px 0;
}

.btn:hover,
button:hover,
.button:hover,
input.button:hover,
a.button:hover,
.cta:hover,
#commentform input#submit:hover,
footer .btn:hover {
	background: var(--brand-navy);
	color: white;
	opacity: .8;
}

#searchsubmit:hover {background:none; color:black; cursor:pointer; }
#searchform label {display:none;}
.btn.center {margin:0 auto; clear:both; float:none; display:block; width:200px;}
.btn strong {color:#00b7ff;}
.searchform {margin:2em auto 5em;}
.searchform input[type=image] {max-width:25px; padding:15px 10px 0;}
.searchform input[type=text] {font-size:18px; padding:10px; width:320px;}

.link {border:none; background:none;}

.wpcf7-form {max-width:400px;}

p.pager {text-align:center; width:100%; float:left; clear:both; padding:0; margin:0;}
.pager * {padding:5px 1rem; display:inline-block; }

.aligncenter, div.aligncenter {text-align:center; display:block; margin-left:auto; margin-right:auto;}
.alignleft { float:left; margin:0 1rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1rem;}
.clear {clear:both; margin:1em auto;}
.wp-caption { text-align:center; }
.wp-caption img { border:0 none; margin:4px 0 0; padding:0;}
.wp-caption p.wp-caption-text {	font-size:.8rem; line-height:1.2; margin:0; padding:0 4px 5px;}
.cats, .tags {color:#575757;}

#commentform {text-align:center;}
.commentlist, .commentlist .children {list-style:none; width:100%; padding:0; margin:0; float:left;}
.commentlist li {margin:0 2%; padding:2%; float:left;}
.comment-meta,.comment-author {float:left; width:45%; margin:0 2.5% 1% 0; display:block; line-height:32px; padding:0; font-size:1.1rem; color:var(--brand-slate)}
.comment-meta a {font-size:11px; line-height:1; color:#ccc}
.comment-author img {float:left; margin:0 10px 0 0;}
.comment-body p {width:100%; float:left; padding:3px 0; margin:0; }
.logged-in-as {
	font-style: italic;
	font-size: .9rem;
	color: #666;
	text-align: left;
}
#commentform input, #commentform textarea, #commentform label {float:left; width:45%; margin:5px 1%}
#commentform textarea {
	height: 100px;
}
#commentform label {
	width:25%;
	clear: both;
	text-align: right;
}
#commentform input.submit {border-radius:5px;}

#commentform input.submit:hover {background:#00679a;}
.form-submit {
	clear: both;
	display: flex;
}
.nocomments {display:none;}

/* WOOCOMMERE STUFF.*/
.woocommerce nav a {line-height:2; display:block; padding:initial;}
.woocommerce nav li {float:none;}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color:#a46497;}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: #a46497;background:var(--brand-navy); color:#fff; border:2px solid var(--brand-navy); }
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {background-color:#fff; color:var(--brand-navy);}


/* GRAPHIC DESIGN PAGE */
.pg-graphic-design section {display:flex; flex-wrap:wrap; width:96%;}
.pg-graphic-design section img {object-fit:contain; margin:1em 2%; flex-grow:4; max-width:600px;}

/* sidebar Woo */
.woocommerce ul.cart_list li dl dd p:last-child, .woocommerce ul.product_list_widget li dl dd p:last-child {font-size:.9rem; display:inline;}


/* RESPONSIVE
================================================== */

@media only screen and (max-width: 1180px) {
	header {padding:0 2%;}
	nav a {padding:0 13px; font-size: .8rem;}
	#resp .back-img {opacity:.4;}
}

@media only screen and (max-width: 1100px) {
	nav.mobile.active, .hamburger {display:block;}
	nav.mobile {background:#fff; background:rgba(0,0,0,.8); width:100%; height:100%;}
	nav.mobile li {float:none;}
	nav.mobile a {display:block; padding:0;}
	nav.mobile a:hover {color:grey;}
	nav.mobile li li a {padding:10px 0;}
}

@media only screen and (max-width: 1030px) {
	.home header #logo a,
	.home header #logo a:hover,
	.home header #logo a:active {
		width: 100px;
	}
}

@media only screen and (max-width: 990px) {
	header .widget {padding:0;}
	header .widget .btn {position:relative; margin:0 5% 0 0; right:initial; bottom:initial;}
	.grid.checks {grid-template-columns:auto auto auto auto; }
}

@media only screen and (max-width: 940px) {
	header #logo a,
		header #logo a:hover,
		header #logo a:active {width: 100px; height: 90px;}
	header nav a, .home header nav a {
			padding: 0 9px;}
	.align-middle h1 {font-size:36px;}
	.align-middle h3 {font-size:20px;}
	.align-middle a.btn {font-size:1rem; margin:15px 5px;}
}

@media only screen and (max-width: 890px) {
	.content-block {padding:0 4%;}
}

@media only screen and (max-width: 825px) {
	header nav, header #logo {
		display: none;
	}
}

@media only screen and (max-width: 812px) {
	.home #hero {height:auto;}
	nav, nav ul {width:100%; text-align:center;}
	nav li {float:none; display:inline-block;}
	header #logo {width:100%;}
	header #logo a {float:none; display:block; background-position:center top;}
	.wprmenu_bar .hamburger {margin-right:20px !important;}
	div#mg-wprm-wrap form.wpr-search-form button.wpr_submit {top: -7px;}
	.wpr_search .wpr-search-field {padding:5px 15px !important; width:98% !important;}
	.home .align-middle >div {float:none; width:96%; margin-top:13px;}
	#mg-wprm-wrap.cbp-spmenu-left, #mg-widgetmenu-wrap.cbp-spmenu-widget-left {padding-top:1em; max-width:100%; width:100%;}
}

@media only screen and (max-width: 799px) {
	.grid.checks {grid-template-columns:auto auto auto; }
}

@media only screen and (max-width: 767px) {
	.home #head #hero .overlay video {display:none;}
	/* .home #head #hero {background:url("images/Bokeh_Background_poster.webp");}	 */
	/* .home #head #hero {background:url("images/bokem-bg-web.webp");}	 */
	.home .align-middle {
		display: block;
	}
	.align-middle {display: block;} 
		.home .align-middle>div {font-size: 5.5cqw;}
	#portfolio ul { grid-template-columns:repeat(2, 1fr); }   /* 1fr, not auto: auto sizes to content and makes columns unequal */
	#port-wrap {
		flex-wrap: wrap;
	}
	.single-portfolio #hero {
		height: 250px;
	}
	#contact {width:100%; margin: -2.5em auto 4em;}
	#contactForm {margin:0 0 2em; width:100%;}
	#estimateForm label {margin:10px 10px 0 0; display:block; line-height:1.4;}
	#wp {height:auto;}
	.blog #sidebar,
		.single #sidebar,
		.archive #sidebar,
		.blog #content,
		.single #content,
		.archive #content {width: 96%; clear:both; padding: 0 2% 2em;}
	footer > ul {grid-template-columns:auto auto;}
}

@media only screen and (max-width: 605px) {
    header {display:block; text-align:center;}
	.home #hero {height:auto;}
	h2 {
		font-size: 35px;
		padding: 1em 2% 0;
	}
	#portfolio ul { grid-template-columns:1fr; }
	#testi blockquote {margin:auto;}
	/* .slick-next, .slick-prev {top:53%;} */
    /*
.slick-next {right:0;}
    .slick-prev {left:8px;}
 */
    header .widget {font-size:1rem; float:none;}
    header .widget .btn {width:94%; font-size:15px; margin:auto;}
	#home-widgets > div {display:block;}
  	#home-widgets li {width:100%; max-height:280px;}
  	.pg-graphic-design section img {width:100%; height:auto;}
  	/*
#portfolio {display:block;}
  	#portfolio ul {display:grid;}
  	#portfolio a {width:100%;display: block;text-align: center;margin: 0 auto;}
  	#portfolio img {margin:auto; max-height:initial; height:auto;}
  	#portfolio img:hover {max-height:initial;}
 */
  	.alignleft, .alignright {float:none; margin:auto;}
  	#contact label#appt {width:94%; text-align:left; padding:1em 10px 0;}
	.grid.checks {grid-template-columns:auto auto; }
	.col-1-2 {width:100%; float:none; margin:0 auto 3em;}
	#wp {display: block;}
}

@media only screen and (max-width: 500px) {
	footer > ul {grid-template-columns:auto;}
	footer > ul > li {padding:1em 5% 0; margin:1em 0;}
	#messageForm {width:100%;}
	#estimateForm label {width:auto;}
	#estimateForm label.sm {text-align:left; padding:5px 5px 5px 15px;}
	#estimateForm input[type="checkbox"] {margin-right:11px;}
	#estimateForm input, #estimateForm textarea, #estimateForm select {font-size:14px;}
	#resp .text {max-width: 100%; text-align: center;}
}

@media only screen and (max-width: 420px) {
	#top a, #top  >div a {margin:5px 2em;}
}

/* Quick answer lead block — short, direct answer for AI Overviews/snippets.
   Rendered from the _bws_quick_answer meta field by bws_prepend_quick_answer(). */
.quick-answer {
 background:var(--surface-light); border-left:7px solid var(--brand-orange);
 padding:20px 25px; margin:0 0 25px; line-height:1.5;
}
.quick-answer__label {
 margin:0 0 6px; font-size:.75rem; font-weight:700; letter-spacing:.08em;
 text-transform:uppercase; color:var(--brand-navy);
}
.quick-answer__text { margin:0; font-size:1.05rem; }
@media only screen and (max-width: 420px) {
 .quick-answer { padding:15px 18px; }
}

/* The responsive-menu plugin outputs its bar logo with no width/height
   attributes, so the browser cannot reserve the box before the file loads.
   aspect-ratio pins the shape from the intrinsic 400x84 without hardcoding a
   pixel width, and survives plugin updates (editing the plugin file would not).
   Selector carries an extra element to outrank the plugin's #wprmenu_bar .bar_logo. */
#wprmenu_bar img.bar_logo { height:25px; width:auto; aspect-ratio:400 / 84; }

/* AOS safety net. aos.css sets [data-aos]{opacity:0} as soon as it loads, so if
   aos.js never runs, most of the homepage stays invisible. _scripts.php adds
   .aos-off to <html> when the script is missing or the visitor prefers reduced
   motion; these rules put the content back. */
.aos-off [data-aos] {
 opacity:1 !important;
 transform:none !important;
 transition:none !important;
}
@media (prefers-reduced-motion: reduce) {
 [data-aos] {
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
 }
}

/* --- Heading level vs. visual size -------------------------------------
   The homepage headings were re-levelled (hero = H1, peer sections = H2) to
   remove an H1 -> H3 skip. Level describes structure; these rules keep the
   rendered sizes exactly as they were so the redesign is semantic only.
   Measured from the live page before the change: hero 44.8px (3.5cqw)
   #dceff6 Open Sans 800; section headings 26px #333 600. */
.home .align-middle h1 {
 font-family:'Open Sans',arial,sans-serif;
 color:inherit;          /* keeps #dceff6, not the h1 default */
 font-weight:800;
 margin:0;
 letter-spacing:normal;
 line-height:1.1;
}
/* These three were H3 and are now H2; hold their previous size. */
#resp h2, #wp h2, .home #content h2 {font-size:26px; font-weight:600;}
#wp h2 {color:#fff;}

/* Smaller background art below 900px. The originals are ~1900px wide and were
   served at full size to phones. No WebP encoder was available locally, so these
   are 900px JPEGs — still a meaningful cut on the connection type that matters
   most for local search. Swap in WebP versions if a build step is ever added. */
@media only screen and (max-width: 900px) {
 #resp .back-img {background-image:url(images/mobile-design-screens-mobile.jpg);}
 #wp {background-image:url(images/wp-code-comp-mobile.jpg);}
}

/* Skip link — offscreen until it receives keyboard focus, then pinned top-left.
   Replaces one of the few genuinely useful things the accessibility overlay
   offered, at ~0 bytes instead of 5.5MB. */
.skip-link {
 position:absolute; left:-9999px; top:0;
 z-index:100000;
 padding:12px 20px;
 background:var(--brand-navy); color:#fff;
 font-size:1rem; letter-spacing:1px;
}
.skip-link:focus {
 left:0;
 color:#fff;
 outline:3px solid var(--brand-orange-cta);
 outline-offset:2px;
}

/* Proof + pricing block on service pages (bws_service_proof).
   Sits at the end of the content, where the visitor's next step is the CTA.
   Border uses the brand orange already used for the primary button. */
.service-proof {
 clear:both; max-width:800px; margin:2.5em auto 1em;
 background:var(--surface-light); border-left:7px solid var(--brand-orange-cta);
 padding:1.5em 1.75em;
}
.service-proof__price {
 margin:0 0 1em; font-size:1.15rem; line-height:1.5; color:var(--brand-navy); font-weight:700;
}
.service-proof__price a { white-space:nowrap; }
.service-proof__quote { margin:0; padding:0; border:0; }
.service-proof__quote blockquote {
 border:0; padding:0; margin:0; font-size:1rem; line-height:1.5; font-style:italic;
}
/* the global blockquote::before sets a 10em decorative quote mark — too heavy here */
.service-proof__quote blockquote:before,
.service-proof__quote blockquote span:before { content:none; }
.service-proof__quote blockquote p { margin:0; }
.service-proof__quote figcaption {
 margin:.6em 0 0; font-size:.9rem; color:var(--text-muted); font-style:normal;
}
.service-proof__more { margin:1em 0 0; font-size:.95rem; }

@media only screen and (max-width: 605px) {
 .service-proof { padding:1.25em 1.25em; margin:2em auto 1em; }
}