/*
    Document   : colors
    Author     : Little Neko
    Description: template colors
*/


/* Table of Content
==================================================

#BOOSTRAP CUSTOMIZATION
#TYPOGRAPHY
#LINKS AND BUTTONS
#HEADER
#MAIN MENU
#FOOTER
#SLIDERS
#PORTFOLIO
#MISCELANIOUS
#NEKO CSS FRAMEWORK

*/

/* BOOSTRAP CUSTOMIZATION
================================================== */

/** tabs **/
.panel-default>.panel-heading {background:#4FAFC2; }
.panel-default>.panel-heading:hover {background:#fff; }
.panel-default>.panel-heading:hover a {color:#4FAFC2; }
.panel-title>a {color:#fff;}
.panel-title>a:hover {text-decoration: none;}

/* END BOOSTRAP CUSTOMIZATION
================================================== */

/* TYPOGRAPHY
================================================== */

body {
	color:#777;
	background: #fff;
}

blockquote small {
	color:inherit;
}
h1, h2, h3, h4, h5, h6 {
	color:#222;
}
h2 {
 color:#888;
}
h2 i {color:#999}
h2.subTitle:after, h1.noSubtitle:after{
	background-color:#4FAFC2;
}

/*** parallax sections ***/

.paralaxText blockquote:before, .paralaxText blockquote:after {
	color:#fff;
}
#home, #paralaxSlice1, #paralaxSlice2, #paralaxSlice3, #paralaxSlice4 {
	background-color:#4FAFC2;
}
#home {
	background-image:url('../images/theme-pics/paralax-blue-3.jpg');
}
/* The Yelp review band.
   Three things were wrong with it and none of them was the Yelp widget, which
   renders correctly once its script loads.

   1. The artwork was a 4000x2040 PNG at 848 KB, for a decorative background
      never displayed above about 1900px wide. Same photo, resized, as JPEG.
   2. layout.css gives these bands `background-attachment: fixed` above 1200px,
      which sizes the image to the VIEWPORT rather than the band and anchors it
      to the top of the screen. The slice you actually see therefore depends on
      how far down the page you have scrolled, and on this photo -- an extreme
      close-up of a mouth -- it usually landed on bare cheek. Scrolling it with
      the page instead makes the crop deterministic: covered to the band's width
      the smile sits about 80-160px down, so anchoring to the top shows it every
      time. Deliberately NOT a percentage offset -- with background-size:cover a
      percentage resolves against the scaled image, and `center 30%` computed to
      -443px, running the band off the bottom of the artwork and exposing the
      teal background colour underneath.
   3. The theme's 15% black mask left the white Yelp card fighting a busy,
      light photo. A deeper mask on this band only, so the card separates. */
#paralaxSlice1 {
	background-image: url('../images/smile4-01.jpg');
}
@media (min-width:1200px) {
	#paralaxSlice1 {background-attachment:scroll; background-position:center top; background-size:cover;}
}
#paralaxSlice1 .paralaxMask {background:rgba(8,28,36,0.34);}
#paralaxSlice2 {
	background-image: url('../images/smile5-01.png');
}
#paralaxSlice3 {
	background-image: url('../images/theme-pics/paralax-blue-3.jpg');
}
/* Same artwork as slice3 on purpose. The "Keep in touch with us" band used to be
   a second element carrying id="paralaxSlice3" -- a duplicate id, which is invalid
   and meant only one of the two could ever be addressed. It is slice4 now, but the
   theme ships paralax-4.jpg as a grey "IMAGE" placeholder, so pointing this at the
   theme default would have turned a teal band grey. */
#paralaxSlice4 {
	background-image: url('../images/theme-pics/paralax-blue-3.jpg');
}
.paralaxText blockquote, .paralaxText h1, .paralaxText h2, .paralaxText h3, .paralaxText p, .paralaxText i{
	color:#fff;
}

/* END TYPOGRAPHY
================================================== */

/* LINKS AND BUTTONS
================================================== */

a {
	color:#4FAFC2;
}
a:hover, .scrollspyNav .active a {
	color:#4FAFC2;
}
ul.iconsList li a {
	color:#555
}
ul.iconsList li a:hover, ul.iconsList i {
	color:#4FAFC2
}

/*** buttons ***/
.btn {
	background:#4FAFC2;
	color:#fff;
	border:2px solid #fff;
}
.btn:hover {
	color:#4FAFC2;
	border-color:#eee;
	text-shadow:none;
	background:#fff
}
.btn-primary {
	background: #006dcc;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background: #555;
}
.btn-info {
	background: #49AFCD;
}
.btn-success {
	background: #5BB75B;
}
.btn-warning {
	background: #FAA732;
}
.btn-danger {
	background: #DA4F49;
}
.btn-link, .btn-link:active, .btn-link[disabled], .btn-link:hover {
	background:none;
	border:none;
	-moz-box-shadow: none;
	-webkit-box-shadow:none;
	box-shadow: none;
	color:#49AFCD;
}
.btnWrapper {
	border:1px solid #ccc;
}

/* END LINKS AND BUTTONS
================================================== */

/* MAIN MENU
================================================== */

#mainHeader{
    background-color: white;
	-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

#mainMenu ul li a, #resMainMenu ul li a {
	color:#444;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background: #4FAFC2;
	color:#fff;
}

/* END MAIN MENU
================================================== */

/* FOOTER
================================================== */

footer {
	color:#777;
	background:#eee;
}

#footerRights {
	background-color:#fff;
	color:#999;
}
p.credits {
	color:#555;
}
p.credits a {
	color:#4FAFC2;
}

/* END FOOTER
================================================== */

/* HOME
================================================== */

#home h1 {color:#FFFFFF;}

/* END HOME
================================================== */

/* SLIDERS
================================================== */

/*** FLEX ***/

.flexslider {
	box-shadow:none;
}
.slides .txt div {
	background:#444;
	color:#FFFFFF;
}
.flexslider .flex-direction-nav a {
	background-color:#4FAFC2;
}

.flexslider .flex-control-paging li a:hover, #sliderWrapper .flex-control-paging li a.flex-active{
	background: #fff;
	border:2px solid #fff;
}
.flexslider .flex-control-paging li a {
	background: transparent;
	border:2px solid rgba(255,255,255,0.5);
}
.flexslider .flex-control-nav {
	background:transparent;
}
.flexslider h1 {
	color:#fff;
	background-color:#4FAFC2;
}
.flexslider h2 {
	color:#fff;
	background-color:#333;
}
.flexslider .caption p {
	background-color:#fff;
	color:#555
}

/*** flexHome ***/
#flexHome  h1 {	color:#fff;
	background:none;
	}
#flexHome  h2 {	color:#fff;
	background:none;
}

/*** END FLEX SLIDER ***/

/* END SLIDERS
================================================== */

/* PORTFOLIO
================================================== */

nav#filter a {
	background-color: #EEE;
	color:#555;
}
nav#filter a:hover, nav#filter a.current {
	background-color: #4FAFC2;
	color:#fff;
}
li.filterTitle {
	color:#4F6266;
}
section#projectDescription {
	background-color:#F8F8F8
}
.mask{background-color: #4FAFC2;}
/* END PORTFOLIO
================================================== */

/* MISCELANIOUS
================================================== */
/*** hover images ***/
.iconLinks a span {color:#fff;}

/*** pricing table ***/
.pricingBloc {
	background-color:#fff;
	border:1px solid rgba(0, 0, 0, 0.2);

}
.pricingBloc ul li {
	border-bottom:1px solid #ddd;
	color:#444!important;
}
.pricingBloc ul li:last-child {
	border-bottom:none;
}
.pricingBloc h2 {
	background-color:#555;
	color:#888!important;
	border:none;
}
.pricingBloc h3 {
	background-color:#777;
	color:#fff!important;

}
.pricingBloc p {
	background-color:#eee;
	color:#444!important;
}
.pricingBloc.focusPlan {
	margin-top:0;
	border-color:#D1D1D1;
}
.pricingBloc.focusPlan h2{
	background-color:#333;
	color:#fff!important;
}
.pricingBloc.focusPlan h3 {
	background-color:#4FAFC2;
	padding:1.25em;
	color:#fff!important;
}

/*** Form ***/
.form-control:focus{
	border: none;
	background-color:#ddd;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}
.form-control {
	color: #444;
	background-color:#ededed;
    border:none;
}
.error {color: #B94A48;
background-color: #F2DEDE;
border-color: #EED3D7;}

label.error {color:#fff;
background-color: #B94A48;
border:none}

#projectQuote, #projectQuote h3{background:#ddd;color:#444;}

/* END MISCELANIOUS
================================================== */

/* NEKO CSS FRAMEWORK
================================================== */

/*** Feature box **/

.boxFeature i{color:#4FAFC2;}

/*** slices ***/
.slice{
	background-color:#fff;
}

/*** call to action ***/
.ctaBox {border:2px solid rgba(0,0,0,0.05);}
.ctaBoxFullwidth{border:none}

.ctaBox blockquote {
	color:#fff;
}

/*color1*/
.color1, .slice.color1, .bulle.color1, .ctaBox.color1{
	background-color:#F7F7F7;
	color:#444;
}

.color1 h1, .color1 h2, .color1 h3, .color1 h4, .color1 blockquote, .color1 a{
	color:#444;
}
.color1 a.btn{color:#fff;}
.color1 a.btn:hover{color:#4FAFC2;}

/*color4*/
.color4, .slice.color4, .bulle.color4, .ctaBox.color4{
	background-color:#4FAFC2;
	color:#fff;
}

.color4 h1, .color4 h2, .color4 h3, .color4 h4, .color4 blockquote, .color4 a {
	color:#fff;
}

.color4 h2.subTitle:after, .color4 h1.noSubtitle:after {
	background:#fff;
}

/*** icons ***/
.iconRounded {border:2px solid #4FAFC2;color:#4FAFC2;background-color:#fff;}
.iconRounded:hover, .color1 .iconRounded:hover{background-color:#4FAFC2;color:#fff;}
.color1 .iconRounded {color:#4FAFC2;}
.color4 .iconRounded {background-color:#FFF;color:#4FAFC2;}

/* END NEKO CSS FRAMEWORK
================================================== */

/* GOOGLE REVIEW BADGE
================================================== */
.googleReviewsWrap {margin:5px 0 0;}
.googleReviews {
	display:inline-block;
	padding:9px 16px;
	background:#fff;
	border:1px solid #e2e2e2;
	border-radius:4px;
	line-height:1;
	text-decoration:none;
	box-shadow:0 1px 2px rgba(0,0,0,.06);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.googleReviews:hover, .googleReviews:focus {
	border-color:#4FAFC2;
	box-shadow:0 2px 7px rgba(0,0,0,.13);
	text-decoration:none;
}
.googleReviews .grGoogle {color:#4285F4;font-size:17px;margin-right:9px;vertical-align:middle;}
.googleReviews .grScore  {color:#222;font-size:20px;font-weight:700;margin-right:7px;vertical-align:middle;}
.googleReviews .grStars  {color:#FBBC04;font-size:14px;margin-right:9px;vertical-align:middle;letter-spacing:1px;}
.googleReviews .grCount  {color:#777;font-size:13px;vertical-align:middle;}

@media (max-width:480px) {
	.googleReviews {padding:9px 12px;}
	.googleReviews .grCount {display:block;margin-top:7px;}
}

/* HERO SLIDE BOX -- fixed height to min-height
================================================== */
/* layout.css sets a hardcoded per-breakpoint height on `.flexslider .slides > li`
   (110 / 120 / 160 / 200 / 250px). #flexHome holds a single static slide whose real
   content is ~300px tall at phone widths, so the box is far shorter than what is in
   it and the surplus paints straight over the "We're open Monday through Thursday"
   band below. Nothing clips it: flexslider never initialises here (no .flex-viewport
   is ever added to the DOM), so the <li> is a plain overflowing block.
   Converting height -> min-height for THIS slider only lets the box grow with its
   content while keeping every breakpoint's original spacing. The global rule is left
   alone -- the portfolio/project/app sliders rely on the fixed heights. */
#flexHome .slides > li {height:auto; min-height:110px;}
@media (max-width:400px) {#flexHome .slides > li {min-height:120px;}}
@media (min-width:768px)  {#flexHome .slides > li {min-height:160px;}}
@media (min-width:992px)  {#flexHome .slides > li {min-height:200px;}}
@media (min-width:1200px) {#flexHome .slides > li {min-height:250px;}}

/* ADDRESS -> MAPS APP LINK
================================================== */
/* layout.css scopes two rules to `.ctaBox a` that were written for the only link that
   used to live in that box, the "Make an appointment" button: a 22px top margin, and
   `float:right` from 992px up. The address is a link now too, so without this it
   inherits both and shunts itself to the right edge of its column on desktop.
   Re-scoped here rather than narrowing the originals -- the button still needs them. */
.ctaBox a.mapLink {float:none; margin-top:0;}

/* The address reads as part of the sentence, not as a link: it keeps the band's own
   colour and carries no underline at rest, and only underlines on hover or keyboard
   focus. The pin is what marks it as somewhere you can go -- which matters, because
   touch devices have no hover state and never see the underline at all.
   The footer copy is deliberately left alone: there the address should match the
   phone and email links sitting directly beneath it. */
.ctaBox a.mapLink {color:inherit; text-decoration:none;}
.ctaBox a.mapLink span {text-decoration:none;}
.ctaBox a.mapLink:hover span, .ctaBox a.mapLink:focus span {text-decoration:underline;}

/* The underline lives on the inner <span>, not the <a>, for one reason: a parent's
   underline is painted straight through its children, so putting it on the anchor
   drew a stray dash under the pin and the gap in front of the street number.
   Scoping it to the text is the only way to keep the icon out of the rule. */

/* light.css:54 sets `h2 i {color:#999}` for the small grey glyphs the theme puts in
   section headings. This address is a link inside an <h2>, so its pin inherited that
   grey and sat washed out on the teal band while the words next to it stayed white.
   Re-inherit the anchor colour instead of hardcoding #fff, so the pin keeps tracking
   the text if the band is ever recoloured. */
.ctaBox a.mapLink i {color:inherit;}

/* TEAM GRID ON PHONES -- deterministic card height
================================================== */
/* The team cards are Bootstrap floats. A float only drops to the next line when
   it cannot fit beside the one before it, so if two cards in a row differ in
   height by even a pixel, the next card snags on the taller one and lands in the
   wrong column with a hole beside it. Nothing guaranteed the heights matched:
   layout.css sizes `.hovereffect` to an <img> whose height is unknown until it
   loads, so on a phone the grid settled differently depending on which photo
   arrived first -- and settled again as the rest arrived.

   layout.css also blows the image up to `calc(100% + 60px)` and shifts it left
   40px so it can slide on hover. There is no hover on a touch screen, so on a
   phone that only crops 60px off a photo for an effect nobody can trigger.

   Dropping the zoom below the hover breakpoint makes the image exactly as wide
   as its box, so its height is exactly 4:3 of the width. Pinning the box to that
   same ratio then reserves the space before the photo loads: every card is
   identical height from first paint, the floats cannot snag, and the grid does
   not reflow as images arrive. Every team photo is 480x640, so the ratio holds. */
@media (max-width:767px) {
	#team .hovereffect {height:0; padding-bottom:133.333%;}
	#team .hovereffect img {position:absolute; top:0; left:0; width:100%;
		-webkit-transform:none; transform:none;}
}

/* SERVICE CARDS
================================================== */
/* The card is one anchor wrapping the image and the title, so first it has to
   stop behaving like body text: no underline, no theme-blue on the heading. */
.serviceCard, .serviceCard:hover, .serviceCard:focus {display:block; text-decoration:none; color:inherit;}

/* The title sits ON the photograph rather than under it.
   That is not only a compactness decision. The twenty source images do not
   belong to one set -- clinical close-ups, medical diagrams, and two product
   shots on pure black -- and no frame drawn around them fixes that. Laying the
   same dark scrim across the bottom of every tile does: the black crown shot and
   the pink gum diagram end up sharing an edge treatment, so they read as one
   grid instead of a pile of stock photos. */
.serviceCard {
	position:relative;
	display:block;
	height:198px;
	border-radius:8px;
	overflow:hidden;
	background:#22323a;
	-webkit-transition:box-shadow 0.25s ease, -webkit-transform 0.25s ease;
	transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.serviceCard .imgWrapper {height:100%; overflow:hidden;}
.serviceCard .imgWrapper img {
	width:100%; height:100%;
	object-fit:cover;              /* mixed source ratios all fill the same window */
	display:block;
	-webkit-transition:-webkit-transform 0.4s ease;
	transition:transform 0.4s ease;
}

/* The gradient carries a solid floor rather than fading to nothing at the
   bottom. Tiles like Periodontal Treatment are diagrams that go white exactly
   where the caption sits, and a pure fade left the text on near-white there
   while looking heavy on the dark tiles. A floor plus a shorter fade holds
   contrast on the light ones without burying the dark ones. */
.serviceCard .boxContent {
	position:absolute;
	left:0; right:0; bottom:0;
	margin:0;
	padding:14px 14px 13px;
	background:-webkit-linear-gradient(bottom, rgba(12,29,36,0.90) 0%, rgba(12,29,36,0.68) 42%, rgba(12,29,36,0) 100%);
	background:linear-gradient(to top, rgba(12,29,36,0.90) 0%, rgba(12,29,36,0.68) 42%, rgba(12,29,36,0) 100%);
}
.serviceCard .boxContent h3 {
	margin:0;
	min-height:0;                  /* no reserved second line -- nothing sits below it now */
	color:#fff;
	font-size:15px;
	line-height:1.3;
	text-shadow:0 1px 3px rgba(0,0,0,0.55);
}

/* Scoped to .serviceCard rather than .isotopeItem so the same card works on the
   service pages, where the related-services strip reuses it outside the isotope
   grid. layout.css still sets `.isotopeItem .boxContent{margin-top:22px}`; these
   rules load later and win on the homepage.

   "Read more" is gone from the markup: the whole tile is the link, and twenty
   repetitions of the same phrase was noise. The link text is now the service
   name, which is what a screen reader should announce anyway. */

/* The cards carried an `imgHover` class but nothing visible ever happened.
   Hover is desktop-only by nature; on touch the full-tile target is the point. */
.serviceCard:hover, .serviceCard:focus {box-shadow:0 8px 22px rgba(0,0,0,0.22);
	-webkit-transform:translateY(-3px); transform:translateY(-3px);}
.serviceCard:hover .imgWrapper img, .serviceCard:focus .imgWrapper img {
	-webkit-transform:scale(1.06); transform:scale(1.06);}
.serviceCard:focus {outline:2px solid rgba(79,175,194,0.75); outline-offset:3px;}

/* Phones get two across, and a shorter tile so a full row is not one photo. */
@media (max-width:767px) {
	.serviceCard {height:152px;}
	.serviceCard .boxContent {padding:11px 11px 10px;}
	.serviceCard .boxContent h3 {font-size:13px;}
}

/* Four across from the medium breakpoint up.
   col-md-3 is 25%, which at the 1170px container is 292.5px -- a half pixel.
   isotope lays out with integer maths, rounds that up, finds 4x293 wider than
   the container it measured, and drops the fourth tile to the next row, leaving
   a quarter of every row empty. Shaving the width a fraction under 25% keeps
   four per row without touching the theme's isotope call, which reads its
   column count from the wrapper's id attribute and ignores it under fitRows. */
@media (min-width:992px) {
	#works .isotopeItem {width:24.94%;}
}

/* SERVICE PAGE
================================================== */
/* The head band. layout.css gave `header#project` 22px of padding and nothing
   else, so the service name opened the page hard against the fixed navbar with
   no sense of where you were. */
.svcHead {background:#F4F8F9; border-bottom:1px solid rgba(0,0,0,0.06); padding:34px 0 30px;}
.svcHead h1 {margin:0; text-align:left; font-size:34px; line-height:1.18; color:#222;}
.svcKicker {margin:0 0 4px; font-size:13px; letter-spacing:.10em; text-transform:uppercase; color:#4FAFC2;}
.svcCrumb {font-size:13px; color:#8d989c; margin-bottom:14px;}
.svcCrumb a {color:#8d989c;}
.svcCrumb a:hover {color:#4FAFC2;}
.svcCrumb span {margin:0 7px; color:#c2cbcd;}
.svcCrumb em {font-style:normal; color:#5c686c;}

.svcBody {padding-top:38px;}

/* The service copy is written with `align="justify"` on all 46 paragraphs, which
   forces the browser to stretch word spacing to reach both margins and opens
   rivers of white down the column. Overridden here rather than edited out of the
   copy: the alternative is touching 46 attributes across twenty content blobs in
   routes/web.php for a purely presentational change. */
.svcProse p, .svcProse li {text-align:left !important;}
.svcProse {font-size:15px; line-height:1.68; color:#5f6b6e; max-width:44em;}
.svcProse h2 {font-size:23px; color:#222; margin:0 0 14px;}
.svcProse h2 ~ h2 {margin-top:34px;}
.svcProse p {margin-bottom:16px;}
.svcProse ul {margin:0 0 18px; padding-left:20px;}
.svcProse li {margin-bottom:6px;}
.svcProse strong {color:#3f4b4e;}

.svcBackWrap {margin-top:30px; padding-top:18px; border-top:1px solid rgba(0,0,0,0.07);}
.svcBack {font-size:14px;}

/* The right column held one small framed image and then ran empty for the rest
   of the page. It carries the call to action now, which is the thing the page
   was missing entirely: someone who has just read what the procedure involves is
   the likeliest caller the site gets, and the number was three scrolls away. */
.svcAsideImg {width:100%; border-radius:6px; margin-bottom:20px;}
.svcCta {background:#fff; border:1px solid rgba(0,0,0,0.09); border-radius:8px;
	padding:20px 20px 22px; box-shadow:0 1px 3px rgba(0,0,0,0.05); text-align:center;}
.svcCta h3 {margin:0 0 6px; font-size:17px; line-height:1.35; color:#222;}
.svcHours {margin:0 0 15px; font-size:13px; color:#8d989c;}
.svcCta .svcCall {display:block; margin:0 0 12px; white-space:normal;}
.svcContactLink {font-size:14px;}

/* Sticks alongside the copy on tall pages instead of scrolling away at the top.
   position:sticky degrades to static wherever it is unsupported, so no fallback
   is needed -- the column simply behaves as it does today. */
@media (min-width:992px) {
	.svcAside > .svcCta, .svcAside {position:relative;}
	.svcAside {position:-webkit-sticky; position:sticky; top:96px;}
}

/* Related services. Reuses .serviceCard from the homepage grid unchanged, so the
   two surfaces cannot drift apart. */
.svcRelated {background:#F7FAFA; border-top:1px solid rgba(0,0,0,0.06); padding:34px 0 12px;}
.svcRelatedTitle {font-size:15px; letter-spacing:.09em; text-transform:uppercase;
	color:#8d989c; margin:0 0 20px;}
.svcRelItem {margin-bottom:22px;}

@media (max-width:767px) {
	.svcHead {padding:24px 0 22px;}
	.svcHead h1 {font-size:26px;}
	.svcBody {padding-top:26px;}
	.svcAside {margin-top:30px;}
	.svcProse {max-width:none;}
}

/* GOOGLE reCAPTCHA BADGE
================================================== */
/* Google's badge is injected on every page by recaptcha/api.js and positioned
   `position:fixed; right:-186px; width:256px` -- it deliberately parks 186px
   outside the right edge and slides in on hover. It is the only element on the
   site that sits outside the viewport, and it is present on all 22 pages.

   Hidden rather than repositioned. Google's terms permit hiding the badge only
   if the attribution appears in the user flow instead, so the notice under the
   contact form's Submit button is doing that job -- un-hiding this rule and
   deleting that notice go together.

   visibility:hidden rather than display:none: the widget still has to lay out
   and run for the token to be issued, and display:none has been known to stop
   it resolving. This keeps it working and merely unseen. */
/* right:0 as well as hidden. visibility:hidden removes the badge from view but
   NOT from layout -- its box still measured 186px past the right edge, which is
   the thing we are actually trying to get rid of. Pinning it flush brings the
   whole 256px box inside the viewport while leaving it laid out and working. */
.grecaptcha-badge {visibility:hidden; right:0 !important;}

.recaptchaNotice {
	clear:both;
	margin:14px 0 0;
	font-size:11px;
	line-height:1.5;
	color:#9aa4a8;
}
.recaptchaNotice a {color:#8d989c; text-decoration:underline;}
.recaptchaNotice a:hover {color:#4FAFC2;}

/* GOOGLE REVIEW TRIO -- #paralaxSlice1
================================================== */
/* Extends the hero badge's tokens (.googleReviews above): four-colour Google G,
   #FBBC04 stars, #e2e2e2 border, 4px radius. Two rules inherited from the band
   have to be undone inside the card, both from .paralaxText: `color:#fff` on p
   and span, and the 33px uppercase blockquote treatment. Body copy is a
   <p class="gwText"> so the blockquote rule never applies, and .gwCard .gwText
   (0,2,0) out-specifies .paralaxText p (0,1,1) for the colour. */
.gwWrap {max-width:1080px; margin:0 auto;}

.gwBar {
    display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:6px 12px; margin:0 0 22px;
}
.gwBar .gwG      {width:26px; height:26px; flex:0 0 26px;}
.gwBar .gwScore  {color:#fff; font-size:27px; font-weight:700; line-height:1; text-shadow:1px 1px 0 rgba(0,0,0,.25);}
.gwBar .gwStars  {color:#FBBC04; font-size:17px; letter-spacing:2px; line-height:1;}
.gwBar .gwMeta   {color:#fff; font-size:14px; text-shadow:1px 1px 0 rgba(0,0,0,.25);}
.gwBar .gwAll    {color:#fff; font-size:13px; text-decoration:underline; text-underline-offset:3px;}
.gwBar .gwAll:hover, .gwBar .gwAll:focus {color:#FBBC04;}

.gwTrio {display:flex; flex-wrap:wrap; justify-content:center; gap:18px;}

.gwCard {
    flex:1 1 300px; max-width:340px;
    display:flex; flex-direction:column;
    background:#fff; border:1px solid #e2e2e2; border-radius:4px;
    box-shadow:0 2px 10px rgba(0,0,0,.14);
    padding:20px 22px; text-align:left; position:relative;
}
.gwCard .gwMark  {position:absolute; top:16px; right:18px; width:17px; height:17px;}
.gwCard .gwStars {color:#FBBC04; font-size:14px; letter-spacing:1.5px; display:block; margin-bottom:9px;}

/* The clamp is sized to the longest of the three reviews currently in the page
   (Chris C., which runs about seven lines at this width). It is a guard against a
   future longer review, not a trim of these -- all three display in full today.
   Raise it if you paste in something longer. */
.gwCard .gwText {
    color:#444; font-size:14.5px; line-height:1.62; font-weight:400;
    margin:0 0 14px; text-align:left; text-transform:none; letter-spacing:normal;
    flex:1 1 auto; overflow-wrap:break-word;
    display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden;
}

.gwCard .gwWho    {display:flex; align-items:center; gap:11px;}
.gwCard .gwAvatar {
    width:38px; height:38px; flex:0 0 38px; border-radius:50%;
    background:#4FAFC2; color:#fff; font-size:16px; font-weight:600;
    display:flex; align-items:center; justify-content:center; line-height:1;
}
.gwCard .gwName {color:#222; font-size:14.5px; font-weight:600; line-height:1.3;}
.gwCard .gwWhen {color:#777; font-size:12.5px; font-weight:400; display:block;}

@media (max-width:767px) {
    .gwCard  {flex:1 1 100%; max-width:100%;}
    .gwBar   {gap:5px 9px;}
    .gwBar .gwMeta {flex:1 1 100%;}
}

/* GOOGLE REVIEW TRIO -- light variant, for service pages
================================================== */
/* The band version paints the summary line white with a text-shadow because it
   sits on a photograph. Service pages have no parallax slice and no tinted
   section in layout.css, so dropped in unchanged the whole summary line renders
   white on white. This re-colours only that line; the cards themselves are
   already white-on-anything and need nothing. */
.svcReviews {background:#f6f9fa; border-top:1px solid #e8eef0;}

.gwWrap--light .gwScore {color:#222; text-shadow:none;}
.gwWrap--light .gwMeta  {color:#777; text-shadow:none;}
.gwWrap--light .gwAll   {color:#4FAFC2;}
.gwWrap--light .gwAll:hover, .gwWrap--light .gwAll:focus {color:#33808f;}
.gwWrap--light .gwCard  {box-shadow:0 1px 5px rgba(0,0,0,.07);}