/* Theme adjustments on top of the template stylesheets. */

/* The rotating word in "We write about ..." ran 30px past the card on phones. Let the heading wrap and keep the word inside the card. */
@media (max-width: 760px) {
	.bg .sv-h2, .sv-h2 { white-space: normal; }
	.sv-rot { max-width: 100%; }
}

/* The Projects page shows every project. The 3-card cap stays on the Home "Recent work" block only. */
body.vg-projects .fc-pj .fc-stack .pj-item:nth-child(n+4) { display: block; }

/* Form errors read under the field (the screen-reader text becomes visible when the field is invalid). */
.ct-f.bad .ct-errtx {
	position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
	display: block; order: 3; margin-top: 6px; font: 600 14px/1.35 var(--body, 'Source Sans 3', sans-serif); color: #B3261E; text-transform: none; letter-spacing: 0;
}
.ct-f.bad .ct-lbl { display: flex; flex-direction: column; }
.ct-f.bad .ct-lbl .ct-errtx { order: 3; }




/* No visible text under 12px. */
.brands-lab { font-size: 12px !important; }

/* Footer links and the newsletter button change on hover like the rest of the site. */
.gf-foot a:not(.gf-key):not(.gf-emb):not(.gf-dir):hover { color: #fff; }
#nlb button:hover .disc, .nlb-go:hover .disc { transform: translateX(3px); }

/* Blog: empty state and pagination. */
.bg-empty { padding: 24px; color: #5C6E78; }
.vg-pager { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0 0; font-weight: 600; }
.vg-pager a { color: #2F444F; }

/* Post body: images and embeds from the editor stay inside the sheet. */
.bp-sheet img, .bp-sheet iframe { max-width: 100%; height: auto; border-radius: 10px; }
.bp-sheet figure { margin: 24px 0; }
.bp-sheet figcaption { font-size: 14px; color: #5C6E78; margin-top: 6px; }
.bp-sheet blockquote { margin: 24px 0; padding-left: 18px; border-left: 4px solid #EBA95E; }
.bp-sheet .wp-block-table table { width: 100%; border-collapse: collapse; }
.bp-sheet .wp-block-table td, .bp-sheet .wp-block-table th { border-bottom: 1px solid #D9E0E2; padding: 8px 10px; text-align: left; }

/* Footer fixes. */
/* Contact rows: the links (phone, email, call-outs) had 4px of extra top padding, so their text sat below the icon. Pull it back so every row lines up with its icon disc; the tap area stays the same. */
.gf-foot .gf-c li > a { margin-top: -2px; margin-bottom: -4px; }
/* Phones: the 5 Virlocept Group links run in 2 columns like the business lists (3 rows), not 3 cramped columns. */
@media (max-width: 699px) {
	.gf-grp .gf-l { grid-template-rows: repeat(3, 32px); }
}

/* Logged-in view: the WordPress admin bar (32px, 46px on tablets and phones) sat over the header's top strip. Start the header below it. Visitors never see the admin bar. */
body.admin-bar .vgm { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .vgm { top: 46px; }
}

/* Newsletter and CTA bands: the band card rises out of the footer over the last section. That section sits at z-index 2 so its stone texture painted over the top of the card, leaving a grey top and a white strip at the foot. Lift the footer above main so the whole card is clean white. */
.gf { z-index: 3; }

/* The contact form posts to the theme's enquiry endpoint. Honeypot field, failure message, reCAPTCHA note. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-fail { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--btn, #C2423D); background: rgba(194, 66, 61, .08); color: var(--navy, #26343B); font-size: 15px; line-height: 1.45; }
.ct-fail a { color: inherit; font-weight: 600; }
.ct-fail:focus { outline: 2px solid var(--btn, #C2423D); outline-offset: 2px; }
.ct-rc { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ct-rc a { color: inherit; }
.grecaptcha-badge { visibility: hidden; }

/* Newsletter deferred: the newsletter band keeps its design but cannot submit until MailerLite is connected. */
.nlb-soon .nlb-fld:disabled, .nlb-soon .nlb-go:disabled { opacity: .55; cursor: not-allowed; }

/* Empty state on a Projects tab with no projects yet. */
.pj-empty { max-width: 56ch; margin: 28px auto 0; padding: 22px 24px; border: 1px dashed rgba(47, 68, 79, .25); border-radius: 14px; text-align: center; font-size: 17px; line-height: 1.5; color: var(--navy, #2F444F); }
.pj-empty a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* "Our latest projects" fits the number of projects instead of leaving empty columns. 1 project fills the row as a feature card. */
.rw4.rw4-n1 { grid-template-columns: minmax(0, 1fr); }
.rw4.rw4-n1 .rp-card { aspect-ratio: 21 / 9; }
.rw4.rw4-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rw4.rw4-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.rw4.rw4-n1 .rp-card { aspect-ratio: 16 / 10; }
	.rw4.rw4-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.rw4.rw4-n1 .rp-card { aspect-ratio: 5 / 4; }
}

/* Titles keep every word when a visitor applies WCAG text spacing. Services card subtitles allow 3 lines. */
main.tp.pj.gs .pj-card .pj-p { -webkit-line-clamp: 3; }

/* Dropdown options stay readable at narrow widths. 1 column below 480px and labels wrap instead of truncating. */
.ct2-dd-o { white-space: normal; height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.ct2-dd-o span { overflow: visible; text-overflow: clip; }
@media (max-width: 480px) {
	.ct2-dd-l.c2 { grid-template-columns: minmax(0, 1fr); }
}

/* The hours popover is a disclosure driven by the button's aria-expanded, not by hover and focus alone. */
.ct2-hrs .ct2-hrs-pop, .ct2-hrs:hover .ct2-hrs-pop, .ct2-hrs:focus-within .ct2-hrs-pop { display: none; opacity: 1; visibility: visible; transform: none; }
.ct2-hrs.open .ct2-hrs-pop { display: block; }
.ct2-hrs:hover .ct2-hrs-b svg, .ct2-hrs:focus-within .ct2-hrs-b svg { transform: none; }
.ct2-hrs.open .ct2-hrs-b { color: #fff; }
.ct2-hrs.open .ct2-hrs-b svg { transform: rotate(180deg); }

/* Backdrop behind the open mobile drawer. Touches on it do not scroll the page; a tap closes the menu. */
.vgm-backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(28, 43, 50, .38); touch-action: none; overscroll-behavior: contain; }
.vgm-backdrop[hidden] { display: none; }
html.vgm-lock .vgm-drawer { position: relative; z-index: 2; overscroll-behavior: contain; }
html.vgm-lock .vgm-strip { position: relative; z-index: 2; }

/* Font stacks include the size-adjusted fallback faces from fonts.css, so text keeps its height until the web font arrives. */
:root{--display:'Archivo','Archivo Fallback',Arial,sans-serif;--body:'Source Sans 3','Source Sans 3 Fallback',Arial,sans-serif}
/* Footer bands set the families directly in the template stylesheets; point them at the same stacks. */
.nlb h2{font-family:var(--display)}
.nlb{font-family:var(--body)}

/* Text contrast on the rendered backgrounds. Measured with the text made transparent and the median pixel behind it. */
:root { --muted: #4A5B64; }
.nx-p { color: #4A5B64; }
.nx-eb, .lg .t3-card a { color: #8E5813; }
html body main .sv-rot .sv-w, html body main .sv-rot .sv-w.on, html body main .sv-rot .sv-w.w-v, html body main .sv-rot .sv-w.on.w-v { color: #8E5813; }
html body .pg.pg-emg { background: linear-gradient(180deg, #C2423D, #AD3B36) !important; }
html body .pg.pg-emg:hover { background: linear-gradient(180deg, #B33E39, #9E3632) !important; }

/* The footer stays in flow so the contentinfo landmark survives in older Safari. Its children keep the same layout because .gf is a block container. */
.gf-foot { display: block; }

/* Visually hidden text for live regions on every page (the template stylesheets only define it on the contact and service stylesheets). */
.ct-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* IOS Safari: a flick up that overshoots the top triggered pull-to-refresh, reloading the page. No overscroll at the top or bottom, so the scroll stays on the page. */
html { overscroll-behavior-y: none; }


/* Project cards link to the project's gallery page: pointer, lift on hover, the red disc slides in. */
.pj a.pj-card.pj-link,.pj a.pj-card.pj-link:hover{cursor:pointer}
.pj a.pj-card.pj-link:hover{box-shadow:0 0 0 1px rgba(47,68,79,.08),0 22px 40px -18px rgba(20,32,38,.6)}
a.pj-card.pj-link{text-decoration:none;color:#fff}

/* Section spacing on the 8-point grid. 1 gap between sections: 56px on phones, 72px from 840px, 96px from 1200px.
   The closing CTA or newsletter band sits the same gap below the last section, and the footer starts 48px under the band.
   --band-lift is how far the band reaches into the footer: the footer's top padding plus the 6px band holder. */
html:root:root{--g:56px;--band-lift:34px}
@media (min-width:840px){html:root:root{--g:72px}}
@media (min-width:1200px){html:root:root{--g:96px}}
@media (max-width:560px){html:root:root{--band-lift:30px}}
@media (min-width:961px){html:root:root{--band-lift:44px}}
html body main>.nlb-last.nlb-last.nlb-last{padding-bottom:calc(var(--nlb-h,260px) + var(--g) - var(--band-lift))!important}
html body main>.ctb-last.ctb-last.ctb-last{padding-bottom:calc(var(--ctb-h,260px) + var(--g) - var(--band-lift))!important}
html body .nlb-hold,html body .ctb-hold{margin-bottom:48px}

/* Hero: the line under the heading and the tagline are gone; the heading sits in the middle of the photo,
   between the breadcrumb and the card that overlaps the hero. The blog post meta line, the project facts line, the
   Thank you and 404 messages and the Group home deck stay. The hero heights are set so the longest heading of each kind
   fits. The hero sizes themselves are in the "Hero sizes" block at the end of this file. */
#hero.t3-hero .hx-h1 { max-width: 11.5em !important; }
#hero .hx-sub { margin-top: 16px !important; max-width: 46ch !important; }

/* Headings split at their natural phrases: each .h1-line starts a new line; .nowrap keeps words together;
   .nowrap-wide keeps a line together from 481px up (on phones it wraps). A .nowrap-wide line can be up to 1.2em wider
   than the heading's 11.5em, so it reaches 1em past the heading on each side and stays centred. */
.hx-h1 .h1-line { display: block; text-wrap: balance; }
.hx-h1 .nowrap { white-space: nowrap; }
@media (min-width: 481px) { .hx-h1 .nowrap-wide { white-space: nowrap; margin-inline: -1em; } }


/* Google reviews band, Home and About. Rating line: logo, divider, stars filled to the score, score, count, on 1 line at every width.
   Cards: photo and name, stars, 3 lines of review; each card is 1 fixed design in cqw, so it scales as 1 piece.
   Arrows and the screen counter sit centred under the cards, "Read all reviews" under them. Each arrow moves a full screen of cards (reviews.js).
   Cards a screen: 3 from 1024px, 2 from 700 to 1023px, 3 from 540 to 699px, 2 from 368 to 539px, 1 under 368px. Phones use their own card
   proportions, and the single card under 368px has its own. The breakpoints keep the review text at 12px or more at every width. */
.gp-main .reviews .gh3-rvt,.au-band.reviews .au-rvt{margin:0 0 14px}
.gp-main .reviews .gh3-rvh,.au-band.reviews .au-rvh{display:flex;margin:0 0 26px}
.reviews .gr-line{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;white-space:nowrap}
.reviews .gr-line .gr-logo{height:32px;width:auto}
.reviews .gr-line .gr-sep{width:1px;height:24px;background:rgba(47,68,79,.2)}
.reviews .gr-rate{position:relative;display:inline-block;line-height:0}
.reviews .gr-rs{display:inline-flex;gap:2px}
.reviews .gr-rs i{display:block;flex:none;width:18px;height:18px;background:rgba(47,68,79,.16);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.reviews .gr-rs.gr-on{position:absolute;inset:0 auto 0 0;overflow:hidden}
.reviews .gr-rs.gr-on i{background:var(--orange)}
.reviews .gr-line .gr-num{font:700 22px/1 var(--display);letter-spacing:-.01em;color:var(--navy)}
.reviews .gr-line .gr-of{font-size:15px;color:var(--muted);margin:0;padding:0;align-self:center}

.reviews .gr-row{--per:3;--g:16px;display:grid;grid-template-columns:1fr auto auto auto 1fr;column-gap:14px;row-gap:22px;align-items:center}
.reviews .gr-view{grid-column:1/-1;grid-row:1}
.reviews .gr-arr{grid-row:2;width:44px;height:44px}
.reviews .gr-prev{grid-column:2}
.reviews .gr-next{grid-column:4}
.reviews .gr-count{grid-row:2;grid-column:3;margin:0;min-width:3.2em;text-align:center;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.reviews .gr-all{margin:18px 0 0;text-align:center;font-size:15px}
.reviews .gr-all a{color:var(--muted);text-decoration:none}
.reviews .gr-note{margin:6px 0 0;text-align:center;font-size:13px;line-height:1.4;color:var(--muted)}
.reviews .gr-all a:hover,.reviews .gr-all a:focus-visible{color:var(--navy);text-decoration:underline}
.reviews .gr-track{align-items:start}
.reviews .gr-cw{display:block}

.reviews .gr-card{aspect-ratio:100/49;height:auto;min-height:0;display:flex;flex-direction:column;gap:3cqw;padding:5.4cqw;border-radius:4cqw}
.reviews .gr-card .gr-hd{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3cqw}
.reviews .gr-card .gr-ini{width:9.6cqw;height:9.6cqw;font-size:4cqw}
.reviews .gr-card .gr-name{font-size:4.4cqw;font-weight:600;line-height:1.2;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reviews .gr-card .gr-stars{grid-column:1/-1;gap:.7cqw}
.reviews .gr-card .gr-stars i{width:4.6cqw;height:4.6cqw}
.reviews .gr-card .gr-text{flex:none;margin:0;font-size:4cqw;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

@media (min-width:700px) and (max-width:1023px){.reviews .gr-row{--per:2;--g:14px}}
@media (max-width:699px){
	.gp-main .reviews .gh3-rvh,.au-band.reviews .au-rvh{margin-bottom:20px}
	.reviews .gr-line{gap:8px}
	.reviews .gr-line .gr-logo{height:26px}
	.reviews .gr-line .gr-sep{height:20px}
	.reviews .gr-rs{gap:1px}
	.reviews .gr-rs i{width:15px;height:15px}
	.reviews .gr-line .gr-num{font-size:19px}
	.reviews .gr-line .gr-of{font-size:14px}
	.reviews .gr-row{--per:3;--g:8px;grid-template-columns:1fr auto auto auto 1fr;gap:18px 14px}
	.reviews .gr-arr{width:44px;height:44px}
	.reviews .gr-count,.reviews .gr-all{font-size:14px}
	.reviews .gr-all{margin-top:16px}
	.reviews .gr-card{aspect-ratio:100/76;gap:4cqw;padding:7cqw;border-radius:6cqw}
	.reviews .gr-card .gr-hd{gap:4cqw}
	.reviews .gr-card .gr-ini{width:14cqw;height:14cqw;font-size:6cqw}
	.reviews .gr-card .gr-name{font-size:8cqw}
	.reviews .gr-card .gr-stars{gap:1cqw}
	.reviews .gr-card .gr-stars i{width:7cqw;height:7cqw}
	.reviews .gr-card .gr-text{font-size:7.6cqw;line-height:1.4}
}
@media (max-width:539px){.reviews .gr-row{--per:2}}
@media (max-width:367px){
	.reviews .gr-row{--per:1}
	.reviews .gr-card{aspect-ratio:100/56;gap:3.5cqw;padding:6cqw;border-radius:5cqw}
	.reviews .gr-card .gr-hd{gap:3.5cqw}
	.reviews .gr-card .gr-ini{width:11cqw;height:11cqw;font-size:4.8cqw}
	.reviews .gr-card .gr-name{font-size:5.2cqw}
	.reviews .gr-card .gr-stars{gap:.8cqw}
	.reviews .gr-card .gr-stars i{width:5.4cqw;height:5.4cqw}
	.reviews .gr-card .gr-text{font-size:4.6cqw;line-height:1.4}
}

/* Group home hero: the line under the heading keeps the 16px gap every hero subheader has. */
html body #hero.gh3-split .hx-h1 + .hx-sub{margin-top:16px !important}

/* Hero sizes. 1 size per kind of hero, set by the screen tier: phones to 839px, tablets 840 to 1199px, desktop from 1200px.
   --he is where the photo or navy area ends and the card starts, measured from the top of the page:
   photo heroes 400 / 440 / 480px, navy heroes (no photo: blog post, Thank you, 404, Search, legal pages) 360 / 400 / 416px.
   The hero is --he plus the depth the card overlaps it (--hl), so every card starts at --he. The heading sits centred between the
   breadcrumb (--ht) and the card, with at least --hp clear above and below. The Group home is 760px from 1001px; below that its
   business card stacks inside the photo and the hero follows its content. Landscape phones use the phone sizes.
   These rules replace the earlier hero heights in this file, overrides.css, service-card.css and the per-page stylesheets, and hero-fit.js. */
html body #hero.t3-hero.t3-hero.t3-hero, html body #hero.hero-cs.hero-cs.hero-cs {
	--he: 360px; --hl: 144px; --ht: 152px; --hp: 28px;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	--hero-h: calc(var(--he) + var(--hl)) !important;
	min-height: calc(var(--he) + var(--hl)) !important;
	height: auto !important;
	padding-top: var(--ht) !important;
	padding-bottom: var(--hl) !important;
}
html body #hero.t3-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]), html body #hero.hero-cs.hero-cs.hero-cs { --he: 400px; }
html body #hero.t3-hero.t3-hero.t3-hero > .wrap, html body #hero.hero-cs.hero-cs.hero-cs > .wrap {
	top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-block: var(--hp) !important;
}
html body #hero.hero-cs.hero-cs.hero-cs { --hl: 58px; }
@media (max-width: 760px) {
	html body #hero.t3-hero.t3-hero.t3-hero { --hl: 126px; }
	html body #hero.hero-cs.hero-cs.hero-cs { --hl: 40px; }
}
@media (max-width: 703px) {
	html body #hero.t3-hero.t3-hero.t3-hero { --hl: 194px; }
	html body #hero.hero-cs.hero-cs.hero-cs { --hl: 104px; }
}
@media (min-width: 761px) {
	/* Contact, Search, Thank you, 404 and the legal pages: the card overlaps by the larger of the 2 lap settings, which grows to 150px on wide screens. */
	html body #hero.t3-hero.t3-hero.t3-hero.ct-hero { --hl: max(144px, min(150px, 10vw)); }
}
@media (min-width: 840px) and (min-height: 521px), (min-width: 840px) and (orientation: portrait) {
	html body #hero.t3-hero.t3-hero.t3-hero, html body #hero.hero-cs.hero-cs.hero-cs { --he: 400px; --hp: 32px; }
	html body #hero.t3-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]), html body #hero.hero-cs.hero-cs.hero-cs { --he: 440px; }
}
@media (min-width: 1025px) {
	html body #hero.t3-hero.t3-hero.t3-hero, html body #hero.hero-cs.hero-cs.hero-cs { --ht: 172px; }
}
@media (min-width: 1200px) and (min-height: 521px) {
	html body #hero.t3-hero.t3-hero.t3-hero, html body #hero.hero-cs.hero-cs.hero-cs { --he: 416px; }
	html body #hero.t3-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]), html body #hero.hero-cs.hero-cs.hero-cs { --he: 480px; }
}
@media (min-width: 1001px) {
	html body #hero.gh3.gh3 { min-height: 760px !important; height: auto !important; }
}
@media (max-width: 1000px), (max-height: 520px) and (orientation: landscape) {
	html body #hero.gh3.gh3 { min-height: 0 !important; height: auto !important; --hero-h: auto !important; }
}

/* Hero headings. Group home: "Welcome to" over "Virlocept Group", larger on phones. Every other hero runs a step smaller on phones and uses the full width. From 1001px every hero takes the Group home's size. */
@media (max-width: 560px) {
	html body #hero.gh3-split .hx-h1 { font-size: clamp(38px, 10.5vw, 46px) !important; max-width: none !important; }
	html body #hero .hx-h1:not(#gp-h) { font-size: clamp(32px, 8.6vw, 35px) !important; }
	html body #hero #hero-h { text-wrap: balance; }
	html body #hero #hero-h .h1-line { display: inline; }
}
@media (min-width: 1001px) { html body #hero .hx-h1 { font-size: clamp(30px, 3.6vw, 52px) !important; } }

/* Group home hero buttons: the text sits in the middle of the whole button, the disc over the right end */
html body #hero.gh3-split .gh3-btns .pg { padding-left: var(--btn-pr) !important; padding-right: var(--btn-pr) !important; justify-content: center; }
@media (min-width: 861px) { html body #hero.gh3-split .gh3-btns .pg { width: 280px; } }

/* Group home About block: the 3 contact rows sit side by side as tiles on tablets and phones; phones show the short labels */
html body .ab-act .ab-sh { display: none; }
@media (max-width: 1000px) {
	html body .ab-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
	html body .ab-row { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 14px 6px 12px; text-align: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
	html body .ab-row + .ab-row::before { content: none; }
	html body .ab-row .ab-go { display: none; }
	html body .ab-ic { width: 40px; height: 40px; }
	html body .ab-tx { gap: 2px; justify-items: center; }
	html body .ab-act { font-size: 16px; white-space: nowrap; }
}
@media (max-width: 760px) {
	html body .ab-q { display: none; }
	html body .ab-act { font-size: 14px; }
	html body .ab-act .ab-lg { display: none; }
	html body .ab-act .ab-sh { display: inline; }
}

/* Rotating headings ("Our services", Services, Projects, Renovations): the word runs on in the sentence and only the words that do not fit wrap; rotate.js sets the space and where the first line sits */
html body .sv-h2.rot-flow-h { white-space: normal; text-wrap: wrap; }
html body .sv-h2.rot-flow-h .sv-lead { display: inline; }
html body .sv-h2.rot-flow-h .sv-rot.rot-flow { display: inline; overflow: visible; max-width: none; padding: 0; margin: 0; transition: opacity .3s ease; }
html body .sv-h2.rot-flow-h .sv-rot.rot-flow.fading { opacity: 0; }
html body .sv-h2.rot-flow-h .sv-rot.rot-flow .sv-w { display: none; transform: none; opacity: 1; transition: none; }
html body .sv-h2.rot-flow-h .sv-rot.rot-flow .sv-w.on { display: inline; }
@media (prefers-reduced-motion: reduce) { html body .sv-h2.rot-flow-h .sv-rot.rot-flow { transition: none; } }
/* Virlocept, Umbuso and Lighthaven pages keep 2 lines for the heading below 660px, so the service cards start at the same place on all 3 */
@media (max-width: 659px) { html body #services .sv-head .sv-h2 { --rot-lines: 2; } }

/* About card: the 3 business logos stay side by side on phones, like the business keys on the other pages */
@media (max-width: 760px) {
	html body .ad-biz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body .ad-bt { height: 66px; padding: 5px 6px 0; }
	html body .ad-bt + .ad-bt { border-top: 0; border-left: 1px solid rgba(47,68,79,.12); }
	html body .ad-bt .ad-bl, html body .ad-bt[data-b] .ad-bl { transform: none; height: auto; max-height: 30px; max-width: 100%; }
}

/* About card: the values as a navy band with the 3-colour strip, 4 tabs and 1 description at a time (values.js) */
.vx { background: #1F3039; color: #fff; }
.vx-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 5px; }
.vx-strip span:nth-child(1) { background: #EBA95E; }
.vx-strip span:nth-child(2) { background: #3E7D19; }
.vx-strip span:nth-child(3) { background: #004EBA; }
.vx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid rgba(255,255,255,.12); }
.vx-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 92px; margin: 0; padding: 16px 4px 20px; border: 0; border-radius: 0; background: transparent; color: #fff; font: 600 13px/1.2 var(--display); opacity: .55; cursor: pointer; transition: opacity .2s ease; }
.vx-tab + .vx-tab { border-left: 1px solid rgba(255,255,255,.10); }
.vx-tab:hover { opacity: .8; }
.vx-tab[aria-selected=true] { opacity: 1; cursor: default; }
.vx-tab[aria-selected=true]::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px; background: #fff; }
.vx-tab:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.vx-disc { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.vx-tab[aria-selected=true] .vx-disc { background: #fff; color: #1F3039; }
.vx-name { white-space: nowrap; }
.vx-pans { display: grid; padding: 18px 22px 24px; text-align: center; }
.vx-pan { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.vx-pan.on { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.vx-pan b { display: block; margin-bottom: 6px; font: 700 18px/1.2 var(--display); color: #fff; }
.vx-pan p { margin: 0 auto; max-width: 300px; font-size: 15px; line-height: 1.5; color: #B4C4CB; text-wrap: balance; }
@media (min-width: 561px) {
	.vx-tab { min-height: 104px; font-size: 15px; }
	.vx-pan b { font-size: 20px; }
	.vx-pan p { max-width: 460px; font-size: 16px; }
}
@media (min-width: 1200px) {
	.vx-tab { flex-direction: row; gap: 12px; min-height: 84px; font-size: 17px; }
	.vx-pans { padding: 22px 32px 28px; }
	.vx-pan b { font-size: 22px; }
	.vx-pan p { max-width: 720px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .vx-tab, .vx-pan, .vx-pan.on { transition: none; } }

/* Quote band above the footer: the photo fills the right half of the band and a white panel over its left edge holds the heading, line and button. bands.js measures the band, so its height follows the content. */
.ctb-hold{position:relative;z-index:2;max-width:1240px;height:6px;margin:0 auto 46px}
.gf .ctb{font-family:var(--body);position:absolute;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;display:flex;min-height:260px;padding:22px 14px 14px;border-radius:24px;background:linear-gradient(180deg,#36505c,#263842);color:#2f444f;text-align:left;box-shadow:inset 0 -1px 0 rgba(47,68,79,.1),0 0 0 1px rgba(47,68,79,.12),0 22px 34px -20px rgba(8,14,18,.75)}
.gf .ctb,.gf .ctb *{box-sizing:border-box}
.gf .ctb-bar{position:absolute;z-index:3;top:0;left:0;right:0;height:8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.gf .ctb-shot{position:absolute;top:0;right:0;bottom:0;display:block;width:50%;max-width:none;height:100%;object-fit:cover;border-radius:0}
.gf .ctb-panel{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:60%;min-height:224px;padding:28px 40px 28px 42px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -18px rgba(8,14,18,.55),0 0 0 1px rgba(47,68,79,.08)}
.gf .ctb-copy{min-width:0;max-width:100%}
.gf .ctb h2{font-family:var(--display);margin:0;padding:0;max-width:22ch;font-weight:700;font-size:clamp(27px,2.7vw,34px);line-height:1.08;letter-spacing:-.025em;color:#2f444f;text-wrap:balance}
.gf .ctb-copy p{margin:10px 0 0;font-size:18px;line-height:1.45;color:#4a5c66}
.gf .ctb-go{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;margin-top:22px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;color:#fff;background:linear-gradient(180deg,#36505c,#263842);box-shadow:0 1px 3px rgba(20,32,38,.25),0 10px 24px -8px rgba(20,32,38,.55),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.2)}
.gf .ctb-go:hover{color:#fff}
.gf .ctb-go:active{box-shadow:inset 0 2px 6px rgba(8,14,18,.5)}
.gf .ctb-disc{position:absolute;top:50%;display:grid;place-items:center;border-radius:50%}
.gf .ctb a:focus-visible{outline:3px solid #2f444f;outline-offset:3px}
html body[data-bb=group] .gf .ctb-go{max-width:320px}
@media (max-width:760px){
	.gf .ctb{flex-direction:column;min-height:0;padding:0 10px 10px}
	.gf .ctb-shot{position:relative;width:calc(100% + 20px);height:200px;margin:0 -10px}
	.gf .ctb-panel{width:auto;min-height:0;margin-top:-30px;padding:22px 18px 18px;box-shadow:0 -10px 30px -14px rgba(8,14,18,.5),0 0 0 1px rgba(47,68,79,.08)}
	.gf .ctb-copy p{font-size:17px}
	.gf .ctb-go{width:100%;max-width:440px;margin-top:20px}
}
/* Newsletter band above the footer: a navy band with the colour strip on top, the heading and line on the left and the sign-up field with its 2 notices on the right. From 1001 to 1199px the field column narrows; up to 1000px the field sits under the heading. */
html body .gf .nlb{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;gap:24px 64px;min-height:260px;overflow:hidden;box-sizing:border-box;padding:48px 64px 40px;border-radius:24px;background:linear-gradient(180deg,#36505c,#263842);color:#fff;text-align:left;font-family:var(--body);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(47,68,79,.12),0 22px 34px -20px rgba(8,14,18,.75)}
html body .gf .nlb-copy,html body .gf .nlb-side{min-width:0}
html body .gf .nlb h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(27px,2.7vw,34px);line-height:1.08;letter-spacing:-.025em;color:#fff;text-wrap:balance}
html body .gf .nlb-line{margin:10px 0 0;font-size:18px;line-height:1.45;color:#d3dce0;text-wrap:pretty}
html body .gf .nlb-form{flex:none;max-width:none;margin:0}
html body .gf .nlb .nlb-fld{background:#fff;box-shadow:inset 0 2px 5px rgba(47,68,79,.16)}
html body .gf .nlb-msg{min-height:0;margin:10px 0 0;padding:0 0 0 26px;font-size:13.5px;line-height:1.45;color:#d3dce0}
html body .gf .nlb .nlb-msg b{color:#fff}
html body .gf .nlb .nlb-legal{margin:2px 0 0;padding:0 0 0 26px;font-size:13px;line-height:1.45;color:#c5d0d5}
html body .gf .nlb .nlb-legal a{color:#fff}
html body .gf .nlb-soon .nlb-fld:disabled{opacity:1;background:#e6ebed}
html body .gf .nlb-soon .nlb-go:disabled{opacity:.75}
html body .gf .nlb .nlb-fld:focus-visible,html body .gf .nlb .nlb-go:focus-visible,html body .gf .nlb a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:1199px){
	html body .gf .nlb{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px 48px;padding:44px 48px 36px}
}
@media (max-width:1000px){
	html body .gf .nlb{grid-template-columns:minmax(0,1fr);padding:44px 40px 36px}
	html body .gf .nlb-line{font-size:17px}
}
@media (max-width:560px){
	html body .gf .nlb{padding:36px 22px 26px}
	html body .gf .nlb-msg,html body .gf .nlb .nlb-legal{padding-left:0}
}


/* Group wordmark in the footer emblem tile (26 Oct 2026). The tile keeps its size at every width, so nothing else in the footer moves. Desktop: the navy wordmark under the emblem. Phones and tablets: beside it. */
.gf-emb{gap:16px}
.gf-emb .gf-em{height:76px;width:auto}
.gf-emb .gf-wm{display:block;width:auto;height:34px}
@media (min-width:561px) and (max-width:699px){.gf-emb .gf-em{height:91px}.gf-emb .gf-wm{height:42px}}
@media (min-width:700px) and (max-width:960px){.gf-emb{gap:10px;padding:0 10px}.gf-emb .gf-em{height:52px}.gf-emb .gf-wm{height:auto;width:calc(100% - 54px);max-width:110px;min-width:0}}
@media (min-width:961px){.gf-emb{flex-direction:column;gap:12px}.gf-emb .gf-em{height:94px}.gf-emb .gf-wm{height:auto;width:148px}}

/* Phones (6 Nov 2026): the breadcrumb sits centred above the heading, clear of the logo badge, and each photo hero is as tall as its heading needs. */
@media (max-width: 703px) {
	html body #hero.t3-hero.t3-hero.t3-hero { --ht: 136px; }
	html body #hero.t3-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]) { --he: 320px; }
	/* The 16 service pages share 1 size so the Previous and Next switcher stays at the same height on screen from page to page; 372px fits a 4-line heading. */
	html body #hero.t3-hero.tc-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]) { --he: 372px; }
	html body #hero.t3-hero > .vg-crumb { position: relative; z-index: 3; top: auto; left: auto; align-self: center; max-width: calc(100% - 40px); margin: 28px 0 -16px; }
	html body #hero.t3-hero > .vg-crumb ol { justify-content: center; }
}

/* Group home on phones (6 Nov 2026): tighter business rows and buttons so all 3 businesses start on the first screen. */
@media (max-width: 560px) {
	html body #hero.gh3-split .gh3-btns { margin-top: 24px; gap: 12px; }
	html body #hero .gh3-biz .gb-row { padding-top: 12px; padding-bottom: 12px; gap: 6px 16px; }
	html body #hero .gh3-biz .gb-logo img { max-height: 22px; }
}

/* Footer link lists on phones (6 Nov 2026): rows 44px apart and a 44px tap area round each 32px link pill. */
@media (max-width: 699px) {
	html body .gf .gf-l { grid-auto-rows: 44px; gap: 0; align-items: center; }
	html body .gf .gf-umb .gf-l, html body .gf .gf-vir .gf-l { grid-template-rows: repeat(4, 44px); }
	html body .gf .gf-grp .gf-l { grid-template-rows: repeat(2, 44px); }
	html body .gf .gf-l a { position: relative; }
	html body .gf .gf-l a::after { content: ""; position: absolute; inset: -6px 0; }
}

/* Phones on their side (6 Nov 2026): the hero fits its heading so the first card shows on the first screen. The 16 service pages and the 3 business pages share 1 size (card at 320px, fits their longest heading), so their switchers stay put. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {
	html body #hero.t3-hero.t3-hero.t3-hero, html body #hero.t3-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]), html body #hero.hero-cs.hero-cs.hero-cs { --he: 0px; --ht: 136px; --hp: 24px; }
	html body #hero.t3-hero.tc-hero.t3-hero.t3-hero:has(.t3-hero-bg[style*="background-image"]) { --he: 320px; --ht: 136px; --hp: 24px; }
	html body #hero.hero-cs.hero-cs.hero-cs { --he: 320px; }
}

/* Project cards on phones: the title and location stop short of the arrow disc (disc 6cqw from the edge, 10.5cqw wide, plus a 3cqw gap), so long titles wrap instead of running under it. */
@media (max-width: 760px) {
	html body .pj .pj-item:nth-child(n) .pj-card .pj-body { right: 19.5cqw; }
}