/* QuiWeb additions to the QS theme: main menu, newsletter, contact form and search. */

/* Spam-trap fields: invisible to people, filled in by robots. */
.qw-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.qw-status { display: block; margin: 6px 0; }
.qw-ok { color: #6fcf73; }
.qw-error { color: #ff7a6b; }
.qw-busy, .qw-muted { color: #999; }

#newsletter_form .qw-consent label { display: block; font-size: 11px; line-height: 1.4; margin: 6px 0; }
#newsletter_form .qw-consent input { width: auto; margin: 0 4px 0 0; vertical-align: middle; }
#newsletter_form input[type="email"] { width: 100%; box-sizing: border-box; }

#qw-search-results .itemContainer { margin-bottom: 24px; }


/* Main menu (left-hand, vertical): every top-level item is as wide as the longest one, text left-aligned.
   Replaces the theme's per-item widths and its widen-on-hover effect. */
#header.vertical #menu .jt-menu { display: inline-grid; width: auto; }
#header.vertical #menu .jt-menu > li { float: none; width: auto; }
#header.vertical #menu .jt-menu > li > a,
#header.vertical #menu .jt-menu > li.sfHover > a { display: block; width: auto !important; text-align: left; white-space: nowrap; }
#header.vertical #menu .jt-menu > li > ul.sub-menu { left: 100%; }

/* Footer "Get in touch" pop-up: a query form laid out like the newsletter one. */
#contact_details .iconWidgetContainer { height: auto; width: 260px; }
#contact_details form { margin: 0; }
#contact_details label { font-size: 10px; text-transform: uppercase; font-weight: bold; }
#contact_details input[type="text"],
#contact_details input[type="email"],
#contact_details input[type="tel"],
#contact_details textarea { display: block; width: 100%; box-sizing: border-box; margin-bottom: 10px; }
#contact_details textarea { height: 90px; resize: vertical; }
#qw-query-result { display: inline-block; margin-bottom: 10px; }

/* Home page circles: each one links to its feature page. */
#featured_boxes .boxes a { color: inherit; text-decoration: none; }
#featured_boxes .boxes h5.title { line-height: 1.25; margin-bottom: 6px; }
#featured_boxes .boxes span.description { display: block; line-height: 1.4; }

/* Feature pages (features/...), reached from the home page circles. */
.qw-tag { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 10px; }
.qw-feature .item-page h4 { margin-top: 15px; }
.qw-shots a { float: left; width: 290px; margin: 10px 20px 10px 0; text-align: center; text-decoration: none; }
.qw-shots img { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.qw-shots span { font-size: 11px; text-transform: uppercase; }
.qw-more { font-size: 11px; line-height: 1.8; }

/* Gallery: the legend sits above the large screenshot (below it, the thumbnails cover it). */
.largeContainer { position: relative; }
.largeContainer span.caption { position: absolute; left: 0; right: 0; top: -46px; padding: 0; text-align: center; font-size: 15px; line-height: 30px; text-transform: uppercase; letter-spacing: 1px; }
body.dark .largeContainer span.caption { color: #fff; }

/* ---- Light scheme ----------------------------------------------------------------------------------------------
   Every page has <body class="light">. The page background is drawn here (no photographs): near-white with a
   soft wash of the logo's blue and gold. */
body.light { background: #f4f7fb none; color: #333c4a; }
body.light #gradient,
body.light #gradient.radial,
body.light #gradient.linear {
	display: block;
	background:
		radial-gradient(900px 650px at 88% 8%, rgba(17, 131, 240, 0.18), transparent 70%),
		radial-gradient(850px 600px at 6% 96%, rgba(226, 176, 62, 0.16), transparent 70%),
		linear-gradient(180deg, #fcfdff 0%, #e8eff7 100%);
}
body.light #main { background: rgba(255, 255, 255, 0.88); box-shadow: 0 8px 30px rgba(22, 35, 58, 0.10); }
body.light #footer { background: rgba(255, 255, 255, 0.92); border-top: 1px solid #d5dde8; }
body.light #menu .jt-menu a { box-shadow: 0 1px 4px rgba(22, 35, 58, 0.12); }
body.light #menu .jt-menu li.current-menu-item > a,
body.light #menu .jt-menu a:hover { background: #1668c7; color: #fff; }
body.light #search .search { box-shadow: 0 1px 4px rgba(22, 35, 58, 0.12); }
body.light .item-page a, body.light .qw-more a { color: #1668c7; }
body.light .qw-tag { color: #6b7686; }

/* Home page headline and circles */
body.light .big_text { color: #16233a !important; text-shadow: 0 1px 0 #fff; }
body.light .big_text strong { color: #1668c7; }
body.light .featured_boxes .boxes { background: #e3f0fd; color: #2f3b4d; }
body.light #featured_boxes .boxes h5.title { color: #16233a; }
body.light #featured_boxes .border_effect .boxes { box-shadow: 0 0 0 0 #1668c7, 0 6px 22px rgba(22, 35, 58, 0.14); }
body.light #featured_boxes .border_effect .boxes:hover { box-shadow: 0 0 0 6px #1668c7, 0 6px 22px rgba(22, 35, 58, 0.14); }
body.light .featured_boxes_carousel .pagenum { background-color: #b9c4d2; }
body.light .featured_boxes_carousel .active { background-color: #1668c7; }

/* Gallery */
body.light .largeContainer span.caption { color: #16233a; text-shadow: none; }
body.light .largeContainer img { border: 4px solid #fff; box-shadow: 0 8px 30px rgba(22, 35, 58, 0.18); }
body.light ul#thumbnails { box-shadow: 0 4px 16px rgba(22, 35, 58, 0.14); }
body.light ul#thumbnails li.selected { outline: 3px solid #1668c7; }

/* Details */
body.light #footer .iconWidgetIcon { filter: brightness(0); opacity: 0.8; }
body.light #submit-form { background: #1668c7; border-color: #1668c7; color: #fff; text-shadow: none; }
body.light #submit-form:hover { background: #12569f; }
body.light .holder a { color: #4a5568; text-shadow: none; }
body.light .holder a:hover, body.light .holder a.jp-current { color: #16233a; }
body.light .holder a.jp-disabled { color: #a9b4c2; }

/* Home and Contact page backdrop: a faint ledger sheet (ruled columns and ghosted figures) across the right of the page,
   fading out towards the menu and the foot. #background is the theme's fixed layer behind the page. */
body.home #background::after,
body.page-template-page-template-contact #background::after {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 1400px);
	background: url(../theme/images/ledger.svg?v=1) right top / 1400px auto no-repeat;
	opacity: 0.32;
	-webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to bottom, #000 55%, transparent 96%);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to bottom, #000 55%, transparent 96%);
	mask-composite: intersect;
}
@media only screen and (max-width: 767px) {
	body.home #background::after,
	body.page-template-page-template-contact #background::after { display: none; }
}

/* FAQ page: questions open and close (native <details>, no script) */
.qw-faq-group { margin: 28px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #1668c7; }
details.qw-faq-item { margin: 0 0 8px; border: 1px solid #d5dde8; border-radius: 6px; background: #f6f9fd; }
details.qw-faq-item[open] { background: #fff; border-color: #1668c7; box-shadow: 0 4px 16px rgba(22, 35, 58, 0.10); }
details.qw-faq-item > summary {
	position: relative; display: block; padding: 12px 46px 12px 16px; cursor: pointer; list-style: none;
	font-family: 'Open Sans', 'Helvetica', arial, serif; font-size: 15px; font-weight: 600; color: #16233a;
}
details.qw-faq-item > summary::-webkit-details-marker { display: none; }
details.qw-faq-item > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; line-height: 1; color: #1668c7; }
details.qw-faq-item[open] > summary::after { content: "\2212"; }
details.qw-faq-item > summary:hover { color: #1668c7; }
.qw-faq-answer { padding: 0 16px 14px; }
.qw-faq-answer > :last-child { margin-bottom: 0; }

/* Pricing page: three plans side by side, stacking on narrow screens */
.qw-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: stretch; margin: 24px 0 28px; }
.qw-plan { display: flex; flex-direction: column; padding: 0 20px 20px; border: 1px solid #d5dde8; border-top: 5px solid #1668c7; border-radius: 8px; background: #fff; box-shadow: 0 6px 22px rgba(22, 35, 58, 0.10); }
body.light .qw-plan-name { margin: 18px 0 6px; font-size: 20px; line-height: 1.2; text-transform: uppercase; letter-spacing: 1px; color: #1668c7; }
.qw-plan-price { margin: 0 0 8px; font-size: 13px; color: #6b7686; }
.qw-plan-amount { font-family: 'Open Sans', 'Helvetica', arial, serif; font-size: 44px; font-weight: 600; line-height: 1.1; color: #16233a; }
.qw-plan-strap { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #e3e9f1; min-height: 2.8em; }
.qw-plan-heading { margin: 0 0 8px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #6b7686; }
.item-page ul.qw-plan-list { flex: 1 0 auto; margin: 0 0 18px; padding: 0; list-style: none; }
.qw-plan-list li { position: relative; margin: 0 0 7px; padding-left: 24px; line-height: 1.4; }
.qw-plan-list li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font-weight: bold; color: #1668c7; }
body.light a.qw-plan-button { display: block; padding: 10px 14px; border-radius: 4px; background: #1668c7; color: #fff; font-weight: bold; text-align: center; text-decoration: none; }
body.light a.qw-plan-button:hover { background: #12569f; color: #fff; }

/* ---- Responsive layout -----------------------------------------------------------------------------------------
   The theme's own layout (menu fixed down the left, footer fixed to the bottom, home page pinned above the footer)
   needs a window about 1240px wide and 700px high. Anything smaller gets the flowing layout below: header across
   the top, content, then the footer, all scrolling together. The theme switches #header between .vertical and
   .navbar by script at 1024px, so the rules here cover both. */
#mainbody img { max-width: 100%; height: auto; }
#contact_form input[type=text], #contact_form textarea { max-width: 100%; box-sizing: border-box; }
#tinynav1 { display: none !important; }
#newsletter_form .iconWidgetContainer { height: auto; }
body.light .error404_content h2 { color: #16233a; text-shadow: none; font-size: clamp(96px, 30vw, 260px); }

@media only screen and (max-width: 1240px), only screen and (max-height: 700px) {
	html, body { height: auto; min-height: 100%; }
	#page_wrapper { display: flex; flex-direction: column; min-height: 100vh; }

	/* Header: logo, menu and search in a row that wraps */
	#header, #header.vertical, #header.navbar {
		order: -1; position: relative !important; top: auto !important; left: auto !important; bottom: auto !important;
		width: auto !important; height: auto !important; margin: 0 !important; padding: 14px 16px !important;
		display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; box-sizing: border-box;
	}
	#header .clear { display: none; }
	body #header #logo, body #header.navbar #logo {
		position: static !important; float: none; flex: 0 1 220px; width: 220px; height: 75px; margin: 0 !important;
		background-size: contain; background-position: left center;
	}
	#header #menu, #header.navbar #menu { float: none; flex: 1 1 auto; width: auto !important; margin: 0 !important; }
	#header #menu .jt-menu, #header.vertical #menu .jt-menu, #header.navbar #menu .jt-menu {
		display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: auto !important; margin: 0; padding: 0;
	}
	#header #menu .jt-menu > li, #header.vertical #menu .jt-menu > li { float: none; width: auto !important; margin: 0; }
	#header #menu .jt-menu > li > a { display: block !important; width: auto !important; padding: 10px 14px !important; white-space: nowrap; }
	#header #search, #header.navbar #search { display: block !important; position: static !important; float: none; flex: 0 0 auto; margin: 0 !important; }

	/* Home page: headline, then all twelve circles in a grid (no carousel) */
	#front_centered, .header-vertical #front_centered {
		position: static !important; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
		width: 100%; max-width: 980px; margin: 0 auto !important; padding: 10px 16px 30px; box-sizing: border-box;
	}
	#front_centered .container { width: auto !important; margin: 0 !important; padding: 0 !important; }
	#front_centered .columns { float: none; width: auto !important; margin: 0 !important; }
	.big_text { font-size: clamp(26px, 5.6vw, 52px) !important; line-height: 1.3; margin: 20px 0 34px !important; }
	body #mainboxes { display: block !important; }
	.featured_boxes_carousel, .featured_boxes_carousel .viewport { width: auto !important; height: auto !important; overflow: visible; margin: 0; }
	.featured_boxes_carousel .overview {
		position: static !important; left: auto !important; width: auto !important;
		display: grid; grid-template-columns: repeat(auto-fit, 235px); justify-content: center;
	}
	.featured_boxes_carousel .overview li { float: none; width: 235px !important; height: 235px !important; }
	.featured_boxes .boxes { width: 175px !important; height: 175px !important; }
	#featured_boxes .boxes span.description { display: block !important; }
	.featured_boxes_carousel .carousel_bullets { display: none; }

	/* Inner pages */
	#main, .header-vertical #main { left: auto !important; margin: 20px auto 30px !important; }
	#main.container { padding-left: 0; }
	#mainClose { display: none !important; }
	.error404_content { flex: 1 0 auto; margin: 50px auto; }

	/* Footer: in the flow, at the bottom of the page (or of the window when the page is short) */
	#footer {
		position: relative !important; margin-top: auto; height: auto !important; padding: 14px 16px; box-sizing: border-box;
		display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
	}
	#footer > div { position: static; float: none !important; width: auto !important; height: auto; margin: 0 !important; padding: 0 !important; }
	#footer1 { display: none; }
	#footer2 { order: 1; flex: 1 1 auto; }
	#footer4 { order: 2; }
	#footer3 { order: 3; }
	body #footer3, body #footer4 { display: block !important; }
	#footer .inner { padding-top: 0; }
	#footer p { margin: 0; }
	#footer .iconWidget { position: static; padding: 0 0 0 14px; }
	#footer .iconWidgetContainer { left: 50%; right: auto; bottom: 100% !important; transform: translateX(-50%); max-width: calc(100vw - 64px); }
	#footer .iconWidgetContainer:before { display: none; }

	/* Gallery: large screenshot, then the thumbnails, in the flow */
	body.page-template-page-template-gridgallery #background { position: relative !important; z-index: 0; flex: 1 0 auto; overflow: visible; }
	#grid_gallery { width: auto !important; padding: 0 12px; }
	.largeContainer { width: auto !important; min-height: 120px; margin-top: 56px !important; }
	.largeContainer img { max-width: 100%; height: auto; box-sizing: border-box; }
	.largeContainer .closeButton { display: none !important; }
	body .thumbContainer { display: block !important; position: static !important; width: auto !important; max-width: 680px; margin: 18px auto 20px !important; }
	ul#thumbnails { display: flex; flex-wrap: wrap; justify-content: center; }
	ul#thumbnails li { float: none; flex: 0 0 calc(20% - 10px); }
	ul#thumbnails li img { width: 100%; height: auto; aspect-ratio: 8 / 5; }
}

/* Below the theme's 960px grid: one fluid column */
@media only screen and (max-width: 959px) {
	.container, #main.container { width: auto !important; margin-left: 12px !important; margin-right: 12px !important; padding: 0 14px !important; }
	.container .column, .container .columns { display: block; float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	.thedate { text-align: left; margin-top: 8px; }
	.core_team, .core_team.last { float: none; clear: both; width: auto; margin: 0 0 14px; overflow: hidden; }
}

/* Phones and small tablets */
@media only screen and (max-width: 767px) {
	#front_centered, .header-vertical #front_centered { justify-content: flex-start; }
	#arrowButton { display: none !important; }
	body #header #logo, body #header.navbar #logo { margin: 0 auto !important; background-position: center center; }
	#header #menu, #header.navbar #menu { flex-basis: 100%; }
	#header #menu .jt-menu, #header.vertical #menu .jt-menu, #header.navbar #menu .jt-menu { justify-content: center; }
	#header #menu .jt-menu > li > a { padding: 9px 11px !important; }
	#header #search, #header.navbar #search { flex: 1 1 100%; width: auto; }
	#search .search { display: flex; }
	#search .search .inputbox { flex: 1 1 auto; width: auto; }
	#footer { justify-content: center; text-align: center; }
	#footer2 { flex-basis: 100%; }
	.qw-shots a { float: none; display: block; width: auto; max-width: 420px; margin: 12px auto; }
}

/* Narrow phones: the circles become full-width cards, icon on the left */
@media only screen and (max-width: 499px) {
	.featured_boxes_carousel .overview { grid-template-columns: 1fr; gap: 10px; }
	.featured_boxes_carousel .overview li { width: auto !important; height: auto !important; }
	.featured_boxes .boxes, #featured_boxes .circle .boxes {
		display: block; float: none; width: auto !important; height: auto !important; margin: 0; padding: 14px 16px;
		border-radius: 14px; text-align: left;
	}
	.featured_boxes .boxes .inner-box { display: block; }
	.featured_boxes .boxes a { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; }
	.featured_boxes .lay1 .boxes img { grid-row: 1 / span 2; margin: 0; }
	#featured_boxes .boxes h5.title { margin: 0 0 2px; font-size: 16px; }
	#featured_boxes .boxes span.description { font-size: 12px; }
}

/* ---- FEATURES menu item and its sub-menu ------------------------------------------------------------------------
   A white panel listing the twelve feature pages: it flies out to the right of the left-hand menu, or drops down
   under the top bar in the flowing layout. On phones there is no hover, so FEATURES simply opens the Features page. */
body.light #menu .jt-menu li.current-menu-ancestor > a { background: #1668c7; color: #fff; }
#header #menu .jt-menu ul.sub-menu {
	width: 290px !important; padding: 6px 0; background: #fff; border-radius: 4px; box-shadow: 0 8px 28px rgba(22, 35, 58, 0.22);
}
#header #menu .jt-menu ul.sub-menu li { display: block; float: none; width: auto !important; margin: 0 !important; }
#header #menu .jt-menu ul.sub-menu a,
#header.navbar #menu .jt-menu ul.sub-menu a {
	display: block !important; width: auto !important; padding: 8px 16px !important; background: none; border: 0; box-shadow: none;
	font-size: 12px; line-height: 1.35; white-space: normal; text-transform: none; color: #16233a;
}
#header #menu .jt-menu ul.sub-menu a:hover,
#header #menu .jt-menu ul.sub-menu li.current-menu-item > a { background: #1668c7; color: #fff; }
#header.vertical #menu .jt-menu > li:hover > ul.sub-menu,
#header.vertical #menu .jt-menu > li.sfHover > ul.sub-menu { left: 100%; top: 0; margin-left: 4px; }
body.light .qw-faq-group { color: #1668c7; }

/* Features overview page */
.item-page ul.qw-feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 22px 0 10px; padding: 0; list-style: none; }
.qw-feature-list li { margin: 0; }
body.light .qw-feature-list a {
	display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 4px; height: 100%; box-sizing: border-box;
	padding: 14px 16px; border-radius: 10px; background: #e3f0fd; color: #2f3b4d; text-decoration: none; transition: box-shadow 0.15s ease-in;
}
body.light .qw-feature-list a:hover { box-shadow: 0 0 0 3px #1668c7; }
.qw-feature-list img { grid-row: 1 / span 2; align-self: center; }
.qw-feature-list strong { font-family: 'Open Sans', 'Helvetica', arial, serif; font-size: 15px; font-weight: 600; color: #16233a; }
.qw-feature-list span { font-size: 12px; line-height: 1.4; }

@media only screen and (max-width: 1240px), only screen and (max-height: 700px) {
	#header #menu .jt-menu > li:hover > ul.sub-menu,
	#header #menu .jt-menu > li.sfHover > ul.sub-menu { left: 0 !important; top: 100% !important; margin: 4px 0 0 !important; }
}
@media only screen and (max-width: 767px) {
	#header #menu .jt-menu ul.sub-menu, #header #menu .jt-menu .sf-sub-indicator { display: none !important; }
	#header #menu .jt-menu a.sf-with-ul { padding-right: 11px !important; }
}

/* ---- Blend with the older six-page marketing site (since deleted) -------------------------------------------
   Its character brought into this theme: Lora italic headings (the logo's lettering), Source Sans 3 body text, gold
   rules, cards with a coloured top edge, pill tags, call-out boxes and solid buttons. The home page scrolls: the
   headline and circles fill the first screen, then the marketing sections follow as white panels. */

/* Backdrop: a stronger wash of the logo's blue and gold */
body.light #gradient,
body.light #gradient.radial,
body.light #gradient.linear {
	background:
		radial-gradient(1000px 700px at 92% 2%, rgba(31, 122, 230, 0.30), transparent 70%),
		radial-gradient(700px 500px at 40% -10%, rgba(62, 160, 245, 0.16), transparent 70%),
		radial-gradient(900px 620px at 3% 100%, rgba(226, 176, 62, 0.30), transparent 70%),
		linear-gradient(180deg, #fcfdff 0%, #e4edf9 100%);
}
body.light #footer { border-top: 0; background: linear-gradient(90deg, #1668c7, #3ea0f5 55%, #c9a24e) top / 100% 3px no-repeat, rgba(255, 255, 255, 0.95); }
body.light #main { border-radius: 10px; background: linear-gradient(90deg, #1668c7, #3ea0f5 55%, #c9a24e) top / 100% 4px no-repeat, rgba(255, 255, 255, 0.95); }

/* Menu: the current item in a blue sweep; CONTACT stands out in gold, as the old site's Contact button did */
body.light #menu .jt-menu > li > a { transition: background-color 0.15s ease-in, color 0.15s ease-in; }
body.light #menu .jt-menu > li.current-menu-item > a,
body.light #menu .jt-menu > li.current-menu-ancestor > a,
body.light #menu .jt-menu > li > a:hover,
body.light #menu .jt-menu > li.sfHover > a { background: linear-gradient(90deg, #1668c7, #2f8cec); color: #fff; }
body.light #menu .jt-menu > li.qw-menu-cta > a { background: linear-gradient(90deg, #c9a24e, #e8c66a); color: #16233a; font-weight: 600; }
body.light #menu .jt-menu > li.qw-menu-cta > a:hover,
body.light #menu .jt-menu > li.qw-menu-cta.current-menu-item > a { background: linear-gradient(90deg, #1668c7, #2f8cec); color: #fff; }

/* Buttons */
body.light a.qw-btn {
	display: inline-block; padding: 12px 26px; border-radius: 8px; background: linear-gradient(135deg, #1f7ae6, #1257ad); color: #fff;
	font: 700 15px/1.2 "Source Sans 3", "Segoe UI", Arial, sans-serif; text-decoration: none; box-shadow: 0 6px 16px rgba(22, 104, 199, 0.35);
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
body.light a.qw-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22, 104, 199, 0.45); color: #fff; }
body.light a.qw-btn.secondary { background: #fff; color: #0f4f9e; box-shadow: inset 0 0 0 2px #1668c7, 0 4px 12px rgba(22, 35, 58, 0.10); }
body.light a.qw-btn.secondary:hover { background: #e8f2fe; color: #0f4f9e; }
body.light a.qw-btn.gold { background: linear-gradient(135deg, #e0b85c, #b98a2c); color: #fff; box-shadow: 0 6px 16px rgba(185, 138, 44, 0.40); }
.qw-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.qw-buttons.left { justify-content: flex-start; }
.qw-rule { width: 180px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: linear-gradient(90deg, #c9a24e, #e8cf8c, #c9a24e); }

/* Home page: the first screen */
body.light .big_text strong {
	font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 700; text-shadow: none;
	background: linear-gradient(90deg, #1257ad, #2f8cec 60%, #3ea0f5); -webkit-background-clip: text; background-clip: text; color: transparent;
	padding-right: 0.08em;
}
body.home .big_text { margin-bottom: 14px; }
.qw-hero-tag { max-width: 780px; margin: 0 auto 22px; text-align: center; font: italic 700 22px/1.4 "Lora", Georgia, serif; color: #16233a; text-shadow: 0 1px 0 #fff; }
.qw-hero #mainboxes { margin-top: 26px; }
.qw-hero .big_text, .qw-hero .qw-hero-tag, .qw-hero .qw-buttons, .qw-hero #mainboxes { animation: qw-rise 0.7s ease-out both; }
.qw-hero .qw-hero-tag { animation-delay: 0.12s; }
.qw-hero .qw-buttons { animation-delay: 0.24s; }
.qw-hero #mainboxes { animation-delay: 0.36s; }
@keyframes qw-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Circles: white to pale blue, lifting with a gold ring */
body.light .featured_boxes .boxes { background: linear-gradient(160deg, #ffffff 0%, #d9eafd 100%); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; }
body.light #featured_boxes .border_effect .boxes { box-shadow: 0 0 0 0 #c9a24e, 0 8px 24px rgba(22, 104, 199, 0.20); }
body.light #featured_boxes .border_effect .boxes:hover { transform: translateY(-5px); box-shadow: 0 0 0 5px #c9a24e, 0 14px 30px rgba(22, 104, 199, 0.28); }

/* Home page: the sections under the first screen */
.qw-home { margin-top: 10px; font: 400 15.5px/1.6 "Source Sans 3", "Segoe UI", Arial, sans-serif; color: #333c4a; }
.qw-band { position: relative; overflow: hidden; margin: 0 0 26px; padding: 34px 36px 36px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 34px rgba(22, 35, 58, 0.10); }
.qw-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #1668c7, #3ea0f5 55%, #c9a24e); }
.qw-band.gold::before { background: linear-gradient(90deg, #c9a24e, #e8cf8c 55%, #1668c7); }
.qw-band.cta { text-align: center; color: #fff; background: linear-gradient(135deg, #0f4f9e 0%, #1f7ae6 58%, #3ea0f5 100%); box-shadow: 0 14px 36px rgba(22, 104, 199, 0.35); }
.qw-band.cta::before { background: linear-gradient(90deg, #c9a24e, #e8cf8c, #c9a24e); }
body.light .qw-h2 { margin: 0 0 12px; font: italic 700 30px/1.25 "Lora", Georgia, serif; text-transform: none; color: #0f4f9e; }
body.light .qw-h2::after { content: ""; display: block; width: 90px; height: 4px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, #c9a24e, #e8cf8c); }
body.light .qw-band.cta .qw-h2 { color: #fff; }
body.light .qw-band.cta .qw-h2::after { margin-left: auto; margin-right: auto; }
.qw-lead { margin: 0 0 14px; font: 400 17px/1.6 "Source Sans 3", "Segoe UI", Arial, sans-serif; color: #55607a; }
.qw-lead strong { font-weight: 600; color: #333c4a; }
.qw-band.cta .qw-lead { color: #e6f0fd; }

.qw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 26px; }
.qw-stat { padding: 18px 14px 16px; border-radius: 14px; text-align: center; color: #fff; background: linear-gradient(135deg, #1257ad, #2f8cec); box-shadow: 0 10px 24px rgba(22, 104, 199, 0.28); }
.qw-stat:nth-child(4n+2) { background: linear-gradient(135deg, #b98a2c, #e0b85c); box-shadow: 0 10px 24px rgba(185, 138, 44, 0.30); }
.qw-stat:nth-child(4n+3) { background: linear-gradient(135deg, #0b7f86, #19b5b0); box-shadow: 0 10px 24px rgba(15, 163, 163, 0.28); }
.qw-stat:nth-child(4n+4) { background: linear-gradient(135deg, #4541b8, #7672e8); box-shadow: 0 10px 24px rgba(90, 85, 214, 0.28); }
.qw-stat b { display: block; font: italic 700 36px/1.1 "Lora", Georgia, serif; }
.qw-stat span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; }

.qw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.qw-grid.two { grid-template-columns: repeat(2, 1fr); }
body.light .qw-card {
	display: block; position: relative; padding: 18px 18px 20px; border: 1px solid #d5dde8; border-top: 4px solid #1f7ae6; border-radius: 10px;
	background: #fff; color: #333c4a; text-decoration: none; transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
body.light .qw-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22, 104, 199, 0.18); }
body.light .qw-card h3 { margin: 0 0 6px; padding: 0; border: 0; font: 600 17px/1.3 "Lora", Georgia, serif; text-transform: none; color: #16233a; }
body.light a.qw-card h3 { color: #0f4f9e; }
.qw-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #55607a; }
.qw-card li { font-size: 14.5px; line-height: 1.5; color: #55607a; }
.qw-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #1f7ae6, #3ea0f5); box-shadow: 0 6px 14px rgba(31, 122, 230, 0.35); }
.qw-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.light .qw-grid > .qw-card:nth-child(4n+2) { border-top-color: #d1a23a; }
.qw-grid > .qw-card:nth-child(4n+2) .qw-ico { background: linear-gradient(135deg, #b98a2c, #e0b85c); box-shadow: 0 6px 14px rgba(185, 138, 44, 0.35); }
body.light .qw-grid > .qw-card:nth-child(4n+3) { border-top-color: #0fa3a3; }
.qw-grid > .qw-card:nth-child(4n+3) .qw-ico { background: linear-gradient(135deg, #0b7f86, #19b5b0); box-shadow: 0 6px 14px rgba(15, 163, 163, 0.35); }
body.light .qw-grid > .qw-card:nth-child(4n+4) { border-top-color: #5a55d6; }
.qw-grid > .qw-card:nth-child(4n+4) .qw-ico { background: linear-gradient(135deg, #4541b8, #7672e8); box-shadow: 0 6px 14px rgba(90, 85, 214, 0.35); }
body.light .qw-grid > .qw-card.main { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; padding: 22px 24px; border-top: 6px solid #c9a24e; background: linear-gradient(180deg, #fdf7e6 0%, #ffffff 100%); }
body.light .qw-card.main h3 { font-style: italic; font-weight: 700; font-size: 24px; }
.qw-card.main p { font-size: 16px; }
.qw-card.main .qw-ico { width: 56px; height: 56px; margin: 2px 0 0; border-radius: 16px; background: linear-gradient(135deg, #b98a2c, #e0b85c); box-shadow: 0 6px 14px rgba(185, 138, 44, 0.35); }
.qw-card.main .qw-ico svg { width: 30px; height: 30px; }
body.light .qw-grid.optional > .qw-card,
body.light .qw-grid > .qw-card.optional { border-top-color: #c9a24e; }
body.light .qw-grid.optional > .qw-card:hover { box-shadow: 0 14px 30px rgba(185, 138, 44, 0.22); }

.qw-screen { display: block; margin: 20px 0 0; }
.qw-screen img { display: block; width: 100%; height: auto; border: 1px solid #d5dde8; border-radius: 10px; box-shadow: 0 14px 40px rgba(22, 35, 58, 0.18); }
.qw-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 0; }
.qw-thumbs a { display: block; overflow: hidden; border-radius: 8px; border: 1px solid #d5dde8; text-align: center; text-decoration: none; background: #fff; transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; }
.qw-thumbs a:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(22, 104, 199, 0.22); }
.qw-thumbs img { display: block; width: 100%; height: auto; }
.qw-thumbs span { display: block; padding: 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #0f4f9e; }
.qw-after { margin: 18px 0 0; text-align: center; }

.qw-callout { margin: 20px 0; padding: 14px 18px; border-left: 4px solid #1f7ae6; border-radius: 0 8px 8px 0; background: #e8f2fe; }
.qw-callout.gold { border-left-color: #c9a24e; background: #fbf4e2; }
.qw-callout p:last-child { margin-bottom: 0; }

/* Things that slide up as they scroll into view (assets/js/site.js adds .qw-anim, then .in) */
.qw-anim .qw-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.qw-anim .qw-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.qw-anim .qw-reveal { opacity: 1; transform: none; transition: none; }
	.qw-hero .big_text, .qw-hero .qw-hero-tag, .qw-hero .qw-buttons, .qw-hero #mainboxes { animation: none; }
}

/* Inner pages */
body.light .item-page { font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif; font-size: 15.5px; line-height: 1.6; }
body.light .item-page h2.page-title { font: italic 700 34px/1.2 "Lora", Georgia, serif; text-transform: none; color: #0f4f9e; }
body.light .item-page h2.page-title::after { content: ""; display: block; width: 110px; height: 4px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, #c9a24e, #e8cf8c); }
.item-page ul li::marker { color: #c9a24e; }
body.light p.qw-tag { display: inline-block; margin-bottom: 12px; padding: 3px 12px; border: 1px solid #cfe3fb; border-radius: 999px; background: #e8f2fe; font-size: 11px; line-height: 1.6; letter-spacing: 0.06em; color: #0f4f9e; }
body.light p.qw-tag.optional { border-color: #efdcae; background: #fbf4e2; color: #8a6412; }
body.light.qw-feature .item-page h3,
body.light .item-page h3.qw-h3 { margin-top: 24px; padding-left: 12px; border-left: 4px solid #c9a24e; font: 600 22px/1.3 "Lora", Georgia, serif; text-transform: none; color: #16233a; }
body.light.qw-feature .item-page h4 { font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; color: #0f4f9e; }
.qw-shots a { overflow: hidden; border-radius: 8px; transition: transform 0.18s ease-out; }
.qw-shots a:hover { transform: translateY(-4px); }
.qw-shots span { font-weight: 600; letter-spacing: 0.05em; }
body.light .qw-more a { display: inline-block; margin: 3px 2px; padding: 2px 11px; border: 1px solid #d5dde8; border-radius: 999px; background: #fff; text-decoration: none; }
body.light .qw-more a:hover { border-color: #1668c7; background: #e8f2fe; }
body.light .qw-more strong { display: block; margin-bottom: 4px; }

body.light .qw-feature-list a { border-top: 4px solid #1f7ae6; background: #fff; box-shadow: 0 4px 14px rgba(22, 35, 58, 0.08); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; }
body.light .qw-feature-list li:nth-child(4n+2) a { border-top-color: #d1a23a; }
body.light .qw-feature-list li:nth-child(4n+3) a { border-top-color: #0fa3a3; }
body.light .qw-feature-list li:nth-child(4n+4) a { border-top-color: #5a55d6; }
body.light .qw-feature-list a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22, 104, 199, 0.18); }
.qw-feature-list strong { font-family: "Lora", Georgia, serif; font-size: 16px; }
.qw-feature-list span { font-size: 13.5px; }

.qw-plan { transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; }
.qw-plan:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(22, 104, 199, 0.20); }
.qw-plan:nth-child(2) { border-top-color: #0fa3a3; }
.qw-plan:nth-child(3) { border-top-color: #c9a24e; }
body.light .qw-plan-name { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 24px; }
.qw-plan-amount { font-family: "Lora", Georgia, serif; font-weight: 700; }
body.light a.qw-plan-button { border-radius: 8px; background: linear-gradient(135deg, #1f7ae6, #1257ad); box-shadow: 0 6px 16px rgba(22, 104, 199, 0.30); }
details.qw-faq-item > summary { font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif; font-size: 16.5px; }
body.light .qw-faq-group { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 700; font-size: 20px; letter-spacing: 0; text-transform: none; color: #0f4f9e; }

/* Licensing and About pages: tick lists inside cards */
.item-page ul.qw-ticks { margin: 0; padding: 0; list-style: none; }
.qw-ticks li { position: relative; margin: 0 0 7px; padding-left: 24px; }
.qw-ticks li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font-weight: bold; color: #1668c7; }
.qw-card.optional .qw-ticks li::before { color: #b98a2c; }
.qw-about-logo { display: block; width: 220px; height: auto; margin: 0 0 6px; }

/* The scrolling home page on a full-size window (smaller windows use the flowing layout above) */
@media only screen and (min-width: 1241px) and (min-height: 701px) {
	body.home #front_centered { position: relative; left: auto; bottom: auto; margin: 0 40px 0 250px; padding-bottom: 96px; }
	body.home #front_centered > .container { width: 960px; margin: 0 auto; }
	.qw-hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 70px); padding: 24px 0 10px; box-sizing: border-box; }
	.qw-hero .featured_boxes_carousel .viewport { margin: 0 auto; }
}
@media only screen and (max-width: 1240px), only screen and (max-height: 700px) {
	.qw-hero-tag { font-size: clamp(17px, 2.6vw, 22px); }
	.qw-hero #mainboxes { margin-top: 30px; }
	.qw-home { margin-top: 26px; }
}
@media only screen and (max-width: 959px) {
	.qw-grid, .qw-grid.two { grid-template-columns: repeat(2, 1fr); }
	.qw-stats { grid-template-columns: repeat(2, 1fr); }
	.qw-band { padding: 26px 20px 28px; }
}
@media only screen and (max-width: 599px) {
	.qw-grid, .qw-grid.two { grid-template-columns: 1fr; }
	.qw-thumbs { grid-template-columns: repeat(2, 1fr); }
	body.light .qw-grid > .qw-card.main { grid-template-columns: 1fr; }
	.qw-card.main .qw-ico { margin-bottom: 12px; }
	body.light .qw-h2 { font-size: 25px; }
	body.light .item-page h2.page-title { font-size: 28px; }
	.qw-stat b { font-size: 30px; }
}

/* The ledger backdrop sits behind the home page's headline now, so it is fainter there */
body.home #background::after { opacity: 0.2; }
.qw-plan-strap { min-height: 3.3em; }

/* Documentation page: each manual is a card that downloads it */
.qw-card p.qw-doc-file { margin-top: 8px; font-size: 12.5px; color: #8a94a6; word-break: break-word; }
body.light a.qw-doc h3::before { content: "\2193"; display: inline-block; width: 26px; height: 26px; margin-right: 10px; border-radius: 8px; background: linear-gradient(135deg, #1f7ae6, #3ea0f5); color: #fff; font: 700 16px/26px "Source Sans 3", Arial, sans-serif; text-align: center; vertical-align: 2px; }

/* Full-size window: the search box follows the menu, however many items the menu has */
@media only screen and (min-width: 1241px) and (min-height: 701px) {
	#header.vertical #search { position: static; margin-top: 16px; }
}

/* Footer on a full-size window: the theme's 330px copyright column and 60px height cut off the
   company registration line, so the column takes the free width and the footer grows to fit. */
@media only screen and (min-width: 1241px) and (min-height: 701px) {
	#footer { height: auto; min-height: 60px; }
	#footer2 { width: auto; max-width: calc(100% - 560px); }
	#footer .inner { padding: 12px 0; }
}

/* Privacy Policy table, and the Privacy Policy / Licence Agreement links in the footer */
.qw-table-wrap { max-width: 100%; overflow-x: auto; margin: 14px 0 18px; }
.item-page table.qw-table { width: 100%; table-layout: fixed; overflow-wrap: anywhere; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.item-page table.qw-table th { padding: 9px 10px; background: #1668c7; color: #fff; font-weight: 600; text-align: left; vertical-align: bottom; }
.item-page table.qw-table td { padding: 9px 10px; border-bottom: 1px solid #dfe6f1; vertical-align: top; }
.item-page table.qw-table tr:nth-child(odd) td { background: #f5f8fd; }
#footer2 a { color: #1668c7; text-decoration: none; }
#footer2 a:hover { text-decoration: underline; }
#footer2 .qw-sep { margin: 0 6px; color: #b98a2c; }