/* Site-wide formats */
.item-page p{ line-height:1.6; padding:0 0 20px; }
/* Home-page testimonial */
.testimonial{
background:url(../../../images/couple.jpg) no-repeat 0 0;
margin:60px 0 1px;
padding:10px 0 50px 315px; position:relative;
font-size:16px; line-height:1.4; /* live's body baseline - the J4 template.css baseline is tighter/smaller (added 2026-07-17) */
text-align:left;
}
.testimonial .quote{
background:url(../../../images/graphics/quote.png) no-repeat 0 0;
height:61px; width:70px;
padding:0; margin:0; float:none; position:absolute; left:230px; top:57px;
}
.testimonial h5{ font-size:1.8em; line-height:1.3; font-weight:300; color:#0BA29D; margin:40px 0 20px 0; } /* line-height 1.3 = live's global h5 */
.testimonial p{ color:#B35900; line-height:1.4; }
/* keep the whole text block right of the floated quote glyph - without a BFC the
line that falls below the float snaps back to the padding edge ("Swinton" far left) */
.testimonial h5, .testimonial p{ overflow:hidden; }
body{ font-family:'Roboto',sans-serif; font-weight:300; }
h1,h2,h3,h4,h5,h6{ font-family:'Roboto',sans-serif; }
/* Content H4s = live clock+pound time/money heading (Duncan review 2026-07-18): restore live style on Instant Quote + Specialist Conveyancing pages, replacing TCCK teal-no-icon default h4. Scoped to .item-page single-article content so About block2 + footer block6 h4s keep their own icons. Values from live style.css global h4; image at images/graphics/icon-time.png. */
.item-page h4{ background:url(../../../images/graphics/icon-time.png) no-repeat 0 0; color:#535353; font-size:1.35em; margin:10px 0 20px; padding:15px 0 10px 65px; line-height:1.2; }
a, a:hover, a:focus{ text-decoration:none; }
/* ===== About module */
#block2 .row.group::after{ content:""; display:table; clear:both; }
#block2 .six.columns{ float:left; width:50%; padding:0 10px; box-sizing:border-box; }
#block2 .six.columns:first-child h4{
background:url(../../../images/graphics/icon-search.png) no-repeat 0 0 !important;
padding:0 0 10px 65px; font-weight:200 !important; color:#0CB3AE;
}
#block2 .six.columns:last-child h4{
background:url(../../../images/graphics/icon-time.png) no-repeat 0 0 !important;
padding:0 0 10px 65px; font-weight:200 !important; color:#0CB3AE;
}
@media (max-width:768px){ #block2 .six.columns{ width:100%; } }
/* About block */
#block2 .row.group::after{ content:""; display:table; clear:both; }
#block2 .six.columns{ float:left; width:50%; padding:0 10px; box-sizing:border-box; }
#block2 .custom h4{ background:url(../../../images/graphics/icon-search.png) no-repeat 0 0 !important; padding:0 0 10px 65px; }
#block2 .custom h4{ background:url(../../../images/graphics/icon-time.png) no-repeat 0 0 !important; padding:0 0 10px 65px; font-weight:100 !important; color:#0CB3AE; }
@media (max-width:768px){ #block2 .six.columns{ width:100%; } }
/* Teal tick bullets on home page our-promise */
ul.main{ list-style:none; padding-left:0; margin-left:0; }
ul.main li{
background:url(../../../images/graphics/tick.png) no-repeat 0 6px;
padding:0 0 8px 25px;
line-height:1.6;
}
/* WHYT quote widget spacing */
#whytEmbed{ margin-top:-10px; margin-bottom:40px; }
#whytEmbed .whyt-container-fluid{ margin-left:auto; margin-right:auto; padding-left:0 !important; padding-right:0 !important; }
#whytEmbed .whyt-content-container{ padding-bottom:0 !important; }
#whytEmbed .whyt-work-tabs .whyt-work-tab-item .whyt-work-tab-item-content .whyt-work-tab-item-work-type-name{ font-weight:300 !important; text-transform:none !important; padding:0 8.37px !important; }
#whytEmbed .whyt-work-tab-item .whyt-work-tab-item-content .whyt-work-tab-item-header{ background:none; }
/* ===== Grid framework (ported from live)  global, so cloned module columns work everywhere ===== */
.column,.columns{ float:left; min-height:1px; padding:0 10px; position:relative; box-sizing:border-box; }
.group:before,.group:after{ content:""; display:table; }
.group:after{ clear:both; }
.custom::after{ content:""; display:table; clear:both; } /* contain columns that sit directly in a module */
.one{width:8.33%} .two{width:16.66%} .three{width:25%} .four{width:33.33%}
.five{width:41.66%} .six{width:50%} .seven{width:58.33%} .eight{width:66.66%}
.nine{width:75%} .ten{width:83.33%} .eleven{width:91.66%} .twelve{width:100%}
@media (max-width:768px){ .column,.columns{ width:100%; float:none; } }
/* Footer */
#wrapper5 > .inner{ max-width:none !important; }
/* ...but keep the footer (#row3) + copyright (#row1) CONTENT contained at 1000px, centered */
#row3 .flexiblecolumn,
#row1 .flexiblecolumn{ max-width:1000px !important; margin:0 auto !important; }
#block6 h3{
background:url(../../../images/graphics/icon-location.png) no-repeat 0 0 !important;
color:#999 !important; font-size:1.2em !important;
margin:10px 0 20px; padding:7px 0 10px 40px; letter-spacing:0;
}
#block6 h4{
background:url(../../../images/graphics/icon-news.png) no-repeat 0 0 !important;
color:#999 !important; font-size:1.2em !important;
margin:10px 0 20px; padding:15px 0 10px 65px; letter-spacing:0;
}
/* Copyright  house icon left of text + tighter line spacing */
#block7 .house{ float:left; padding:0 15px 0 0; }
#block7 .small{ line-height:1.4; }
#block7 .eight{ width:70% !important; }
#block7 .four{ width:30% !important; }
/* ===== MENU BAR CONTAINER (#block1): full-bleed translucent bar =====
(the pre-Maximenu menu rules that lived here were retired 2026-07-17;
their still-active properties are ported into the Maximenu block below) */
#block1{ background:rgba(0,0,0,0.30); position:relative; z-index:10; width:100vw; margin-left:calc(50% - 50vw); }
#block1 > .inner{ max-width:1000px; margin:0 auto; }
/* ===== SLIDER: icon grid under the menu ===== */
.ch-grid { margin:20px 0 0 0; padding:0; text-align:center; display:block; float:left; width:45%; }
.ch-grid-2{ margin:20px 0 0 0; padding:0; text-align:center; display:block; float:right; width:45%; }
.ch-grid:after, .ch-grid-2:after{ content:''; display:table; clear:both; }
/* button boxes */
a[class^="btn-icon-"]{ width:151px; height:142px; display:block; transition:all .9s ease-in-out; }
.btn-icon-1,.btn-icon-2,.btn-icon-3,.btn-icon-4{ float:left; margin:0 18px 18px 0; }
.btn-icon-5,.btn-icon-6,.btn-icon-7,.btn-icon-8{ float:right; margin:0 0 18px 18px; }
.btn-icon-1{ background:url(../../../images/graphics/icon-1.png) no-repeat 0 0; } .btn-icon-1:hover{ background:url(../../../images/graphics/icon-1-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-2{ background:url(../../../images/graphics/icon-2.png) no-repeat 0 0; } .btn-icon-2:hover{ background:url(../../../images/graphics/icon-2-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-3{ background:url(../../../images/graphics/icon-3.png) no-repeat 0 0; } .btn-icon-3:hover{ background:url(../../../images/graphics/icon-3-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-4{ background:url(../../../images/graphics/icon-4.png) no-repeat 0 0; } .btn-icon-4:hover{ background:url(../../../images/graphics/icon-4-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-5{ background:url(../../../images/graphics/icon-5.png) no-repeat 0 0; } .btn-icon-5:hover{ background:url(../../../images/graphics/icon-5-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-6{ background:url(../../../images/graphics/icon-6.png) no-repeat 0 0; } .btn-icon-6:hover{ background:url(../../../images/graphics/icon-6-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-7{ background:url(../../../images/graphics/icon-7.png) no-repeat 0 0; } .btn-icon-7:hover{ background:url(../../../images/graphics/icon-7-hover.png) no-repeat 0 0; opacity:1; }
.btn-icon-8{ background:url(../../../images/graphics/icon-8.png) no-repeat 0 0; } .btn-icon-8:hover{ background:url(../../../images/graphics/icon-8-hover.png) no-repeat 0 0; opacity:1; }
/* ===== SLIDER: Information popup ===== */
.box{ width:36px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.button-pop{ background:url(../../../images/graphics/information.png) no-repeat 0 0; width:36px; height:36px; cursor:pointer; display:block; font-size:0; transition:all .3s ease-out; }
.button-pop:hover{ opacity:.6; }
.overlay{ position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.7); visibility:hidden; opacity:0; transition:opacity .5s; }
.overlay:target{ visibility:visible; opacity:1; }
.popup{ margin:200px auto; padding:20px; width:30%; background:#fff; border-radius:3px; position:relative; }
.popup h2{ margin-top:0; color:#333; font-family:Tahoma,Arial,sans-serif; }
.popup .close{ position:absolute; top:20px; right:30px; font-size:30px; font-weight:bold; color:#333; text-decoration:none; transition:all .2s; }
.popup .close:hover{ color:#06D85F; }
.popup .content{ max-height:30%; overflow:auto; }
/* sales quote page-conveyancing scrollers */
h6{ background:#666666; color:#FFF; font-family:'Roboto',sans-serif; font-weight: 300;
font-size:1.2em; letter-spacing:0; margin:0 0 10px;
padding:8px 10px; border-radius:4px 4px 0 0; }
/* scroller links: grey, 2 per line, underline on hover */
a.link{ float:left; width:50%; box-sizing:border-box; padding-right:10px;
color:#666; font-size:0.9em; text-decoration:none; }
a.link:hover{ text-decoration:underline; }
/* Search box: magnifier icon left of the input (live parity, btn-search.png 30x36) */
address.search .mod-finder{
background:url(../../../images/graphics/btn-search.png) no-repeat left center;
padding-left:38px;
}
/* Testimonial: guarantee the full couple.jpg background (227x312) shows  the regenerated J4 template.css tightened h5/p spacing, cropping ~20px off the photo */
.testimonial{
min-height:312px;
box-sizing:border-box;
}
/* Menu: top-level items keep #EEE text on hover/active  the Maximenu theme emits color:#333 which vanishes against the dark bar */
div#maximenuck134 ul.maximenuck li.maximenuck.level1:hover > a span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1.active > a span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1:hover > span.separator,
div#maximenuck134 ul.maximenuck li.maximenuck.level1.active > span.separator{
color:#EEE !important;
}
/* ===== MENU (Maximenu 134)  SOURCE OF TRUTH v2 =====
Overrides the volatile Maximenu theme (custom.css loads last). Validated spec from the J3 build.
NOTE: no-link parents (Instant Quote, Specialist Conveyancing) render as span.separator, NOT a  every rule must cover both. */
/* bar: kill the theme background; #block1 carries the rgba(0,0,0,0.30) tint (single layer, live parity) */
div#maximenuck134 ul.maximenuck{ background:transparent !important; border:none !important; box-shadow:none !important; } /* the ONE translucent tint lives on #block1 - a second rgba layer here double-darkened the bar vs live (fixed 2026-07-17) */
/* slim items  a AND span.separator/nav-header (the tallest item sets bar height) */
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1 > a,
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1 > a.maximenuck,
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1 > span.separator,
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1 > span.nav-header{ padding-top:8px !important; padding-bottom:8px !important; line-height:1.2 !important; background:transparent !important; }
/* ported 2026-07-17 from the retired pre-Maximenu #block1 rules (their generic
li/a selectors were also styling the Maximenu markup - these were load-bearing):
bar height = li 5px top / 15px bottom; level1 text size set on the titreck spans below */
div#maximenuck134 ul.maximenuck li.maximenuck.level1{ margin:0; padding:10px 0; } /* symmetric = text vertically centered; was 5/15 (tuned for the old 0.9em size, sat text ~5px high). Same 20px total, bar height unchanged */
div#maximenuck134 ul.maximenuck li.maximenuck.level1 > a span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1 > span.separator span.titreck{ font-size:1.1em; } /* = 14px (menu container size); was 0.9em - bumped 2026-07-17, live is 0.9em of 15px */
/* no hover/active boxes behind top-level items */
div#maximenuck134 ul.maximenuck li.maximenuck.level1:hover,
div#maximenuck134 ul.maximenuck li.maximenuck.level1.active{ background:transparent !important; }
/* top-level text: #EEE Roboto in all states, links and separators */
div#maximenuck134 ul.maximenuck li.maximenuck.level1 > a span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1:hover > a span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1.active > a span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1 > span.separator,
div#maximenuck134 ul.maximenuck li.maximenuck.level1 > span.separator span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1:hover > span.separator,
div#maximenuck134 ul.maximenuck li.maximenuck.level1:hover > span.separator span.titreck,
div#maximenuck134 ul.maximenuck li.maximenuck.level1.active > span.separator span.titreck{ color:#EEE !important; font-family:'Roboto',sans-serif !important; }
/* non-parent items fade on hover */
div#maximenuck134 ul.maximenuck li.maximenuck.level1:not(.parent):hover > a{ opacity:.6 !important; }
/* parent arrow: teal chevron, white on hover  covers a AND span.separator (kills the default white triangle) */
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1.parent > a,
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1.parent > span.separator{ position:relative !important; padding-right:26px !important; }
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1.parent > a:after,
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1.parent > span.separator:after{
content:"" !important; border:none !important; border-width:0 !important;
width:13px !important; height:8px !important;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important;
position:absolute !important; right:8px !important; top:50% !important; margin:-4px 0 0 0 !important;
}
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1.parent:hover > a:after,
div#maximenuck134.maximenuckh ul.maximenuck li.maximenuck.level1.parent:hover > span.separator:after{
background-image:url("data:image/svg+xml;utf8,") !important;
}
/* dropdown container: 200px, no chrome */
div#maximenuck134 ul.maximenuck li.level1.parent div.floatck,
div#maximenuck134 ul.maximenuck li.level1.parent div.floatck div.maximenuck2,
div#maximenuck134 ul.maximenuck li.level1.parent div.floatck ul.maximenuck2{ background:transparent !important; padding:0 !important; margin:0 !important; width:200px !important; border:none !important; box-shadow:none !important; }
/* dropdown items: teal, #3C4349 hover (live parity), light text */
div#maximenuck134 ul.maximenuck2 li.maximenuck > a.maximenuck{ background:#18B6B2 !important; box-sizing:border-box !important; width:100% !important; border:none !important; }
div#maximenuck134 ul.maximenuck2 li.maximenuck:hover > a.maximenuck,
div#maximenuck134 ul.maximenuck2 li.maximenuck.active > a.maximenuck{ background:#3C4349 !important; }
/* the generated Maximenu theme file embeds the module Custom-CSS-box leftovers, incl. a
doubled `li.maximenuck.level2:hover > a{background:#222 !important}` that OUTGUNS the
rules above on specificity (found 2026-07-17: dropdown hover still rendered black).
Mirror its exact selector at #3C4349; custom.css loads last so source order wins.
Real cleanup = empty the module's Custom CSS box (Tim, in admin), then this stays as belt+braces. */
div#maximenuck134 ul.maximenuck li.maximenuck.level2:hover > a.maximenuck,
div#maximenuck134 ul.maximenuck li.maximenuck.level2.active > a.maximenuck{ background:#3C4349 !important; }
div#maximenuck134 ul.maximenuck2 li.maximenuck > a span.titreck{ color:#EEE !important; }
div#maximenuck134 ul.maximenuck2 li.maximenuck:hover > a span.titreck{ color:#FFF !important; }
/* v2.1  dropdowns fully opaque: Maximenu's open-effect JS writes inline opacity on the flyout;
stylesheet !important beats inline styles. Also paint the li on hover, not just the a. */
div#maximenuck134 ul.maximenuck li.maximenuck div.floatck,
div#maximenuck134 ul.maximenuck li.maximenuck:hover > div.floatck,
div#maximenuck134 div.floatck ul.maximenuck2,
div#maximenuck134 div.floatck ul.maximenuck2 li.maximenuck,
div#maximenuck134 div.floatck ul.maximenuck2 li.maximenuck > a.maximenuck,
div#maximenuck134 div.floatck ul.maximenuck2 li.maximenuck > a.maximenuck span.titreck{ opacity:1 !important; }
div#maximenuck134 ul.maximenuck2 li.maximenuck:hover,
div#maximenuck134 ul.maximenuck2 li.maximenuck.active{ background:#3C4349 !important; }
/* v2.2 (2026-07-17): dropdown refinements from live side-by-side compare
1) submenu text 1pt larger - the theme container sets 14px and both menu
levels inherit it; live's dropdown reads slightly larger.
2) flyout left edge aligned with the start of the parent word - level1
links carry 15px horizontal padding from the theme, but the flyout
opens at the li edge, so it sat 15px left of the word (live aligns
container edge with word start). Desktop only; mobile accordion untouched. */
div#maximenuck134 div.floatck ul.maximenuck2 li.maximenuck > a.maximenuck,
div#maximenuck134 div.floatck ul.maximenuck2 li.maximenuck > a.maximenuck span.titreck{ font-size:15px !important; line-height:1; }
@media (min-width:768px){
div#maximenuck134.maximenuckh ul.maximenuck li.level1.parent > div.floatck{ margin-left:15px !important; }
}
/* ==========================================================
PER-PAGE HEADER (2026-07-17) - live parity
Interior pages: showcase-2 strip under the menu (live's
.slider-lower, 2000x410 img, top 250px visible).
Grey #brands band: home page only.
TCCK wrappers/blocks have no per-page assignment; the lever
is the 'homepage' body class TCCK outputs on home only.
========================================================== */
body:not(.homepage) #wrapper2 {
background-image: url('../../../images/graphics/showcase-2.jpg');
background-position: center top;
min-height: 250px;
}
body:not(.homepage) #brands {
display: none;
}
/* ===== TELEPHONE SLIDE-OUT TAB (2026-07-17) - live parity =====
live = jQuery tabSlideOut plugin + a .slide-out-div in the template;
rebuilt dependency-free: module 167 "Telephone Slide-Out" (position
copyright, all pages) + this CSS. Handle = contact-tab.png (42x152);
3-line vanilla JS in the module toggles .open. Edit module via POST
only (carries a script - WYSIWYG will strip it). */
.slide-out-div{
position:fixed; top:176px; right:0; z-index:100000;
width:250px; background:#FFF; padding:5px 20px 15px;
box-sizing:border-box; text-align:left;
transform:translateX(100%); transition:transform .3s ease;
}
.slide-out-div.open{ transform:translateX(0); }
.slide-out-div .handle{
position:absolute; left:-42px; top:0; width:42px; height:152px;
display:block; background:url(../../../images/graphics/contact-tab.png) no-repeat 0 0;
font-size:0; overflow:hidden; cursor:pointer;
}
/* panel typography pinned (module renders inside the dark copyright band - don't inherit its colors) */
.slide-out-div h3{ background:url(../../../images/graphics/icon-house.png) no-repeat 0 0; font-size:1.35em; color:#535353; margin:10px 0 20px; padding:15px 0 10px 65px; letter-spacing:-1px; }
.slide-out-div p{ color:#666; font-size:1em; line-height:1.4; margin:0 0 10px; }
.slide-out-div h5{ font-size:1.4em; line-height:1.3; font-weight:300; color:#6C6C6C; margin:0; }
@media (max-width:768px){ .slide-out-div{ display:none; } }
/* ============================================================
MOBILE MENU + MOBILE PARITY (2026-07-17)
Live's mobile menu = Codrops cbp-spmenu (jQuery classie.js);
rebuilt dependency-free: module 168 "Mobile Menu (cbp-spmenu)"
(copyright position, all pages, script-carrying - POST-edit only).
Breakpoints translated from live style.css: 768 menu swap +
tablet icons, 640 stacking, 480 mobile icons. Selector map:
nav.menu->#block1, .search.mod_search93->address.search.
============================================================ */
/* --- mobile menu panel (all widths; hidden on desktop below) --- */
#mobile-menu.cbp-spmenu{ background:#444; position:fixed; text-align:left; }
#mobile-menu a{ display:block; color:#AAA; padding:1em !important; font-size:0.9em; border-bottom:1px solid #333; }
#mobile-menu a:hover{ color:#333; background:#FF7F00; }
#mobile-menu a:active{ background:#3C4349; color:#FFF; }
#mobile-menu.cbp-spmenu-vertical{ width:240px; height:100%; top:0; right:-240px; z-index:100001; overflow-y:auto; transform:translateY(80px); } /* closed state sits 80px low: opening slides left AND up (live's diagonal entrance, minus its -100px landing bug) */
#mobile-menu.cbp-spmenu-vertical.cbp-spmenu-open{ right:0; transform:translateY(0); }
body.cbp-spmenu-push{ overflow-x:hidden; position:relative; left:0; }
body.cbp-spmenu-push-toleft{ left:-240px; }
#mobile-menu.cbp-spmenu, body.cbp-spmenu-push{ transition:all 0.3s ease; }
#showRightPush{ display:none; }
@media (min-width:769px){ #mobile-menu{ display:none; } }
@media only screen and (max-width:1024px){
.popup{ width:80%; }
}
@media only screen and (max-width:768px){
/* menu swap */
#block1{ display:none; }
address.search{ display:none; }
#showRightPush{
display:block; position:fixed; top:35px; right:15px; z-index:100002; /* header is pinned (block below) so fixed rides inside it like live; top centers in the 108px band */
background:url(../../../images/graphics/icon-hamburger.png) #444 no-repeat 10px 50%;
font-family:'Roboto',sans-serif; color:#CCC; line-height:1.8; border:1px solid #666;
padding:8px 14px 6px 40px; font-size:0.76em; cursor:pointer; letter-spacing:0; transition:right 0.3s ease;
}
#showRightPush.active{ background:url(../../../images/graphics/icon-close.png) #444 no-repeat 10px 50%; right:255px; } /* slides left with the open panel (240px + 15px gap) like live */
/* testimonial: drop the photo (live parity) + tighten vertical space (Tim 2026-07-17):
desktop's 60px block margin, 40px h5 margin and the quote float's 80+67px
bottom box were all still propping it open on phones */
.testimonial{ background:none; min-height:0; margin:15px 0 0; padding:5px 0 0 85px; position:relative; }
/* glyph pinned top-left; text block indented structurally so the name
always aligns with the heading regardless of line counts */
.testimonial .quote{ position:absolute; left:0; top:10px; float:none; margin:0; padding:0; }
.testimonial h5{ font-size:1.4em; margin:5px 0 10px; } /* live drops 1.8em -> 1.4em on small screens */
.testimonial p{ margin:0 0 5px; }
/* slider grids + tablet icon set (110x104; hover = same img faded) */
.ch-grid, .ch-grid-2{ width:50%; }
a[class^="btn-icon-"]{ width:110px; height:104px; }
a[class^="btn-icon-"]:hover{ opacity:0.6; }
.btn-icon-1, .btn-icon-1:hover{ background-image:url(../../../images/graphics/icon-1-tablet.png); }
.btn-icon-2, .btn-icon-2:hover{ background-image:url(../../../images/graphics/icon-2-tablet.png); }
.btn-icon-3, .btn-icon-3:hover{ background-image:url(../../../images/graphics/icon-3-tablet.png); }
.btn-icon-4, .btn-icon-4:hover{ background-image:url(../../../images/graphics/icon-4-tablet.png); }
.btn-icon-5, .btn-icon-5:hover{ background-image:url(../../../images/graphics/icon-5-tablet.png); }
.btn-icon-6, .btn-icon-6:hover{ background-image:url(../../../images/graphics/icon-6-tablet.png); }
.btn-icon-7, .btn-icon-7:hover{ background-image:url(../../../images/graphics/icon-7-tablet.png); }
.btn-icon-8, .btn-icon-8:hover{ background-image:url(../../../images/graphics/icon-8-tablet.png); }
}
@media only screen and (max-width:640px){
/* copyright/footer stacking (live parity, translated to our blocks) */
#block7 .house{ display:none; }
#block7 .eight, #block7 .four{ width:100% !important; }
#block7 .small{ text-align:center; float:none; padding-bottom:2px; }
/* twitter icon centered under the text, tight gap */
#block7 .four{ text-align:center; padding-top:0; }
#block7 .four img{ display:inline-block; margin:2px 0 0; float:none; }
}
@media only screen and (max-width:480px){
h1{ font-size:1.6em; line-height:1.2; }
.box{ display:none; } /* info popup trigger off on phones */
body.homepage #brands{ display:none; }/* grey band off on phones (non-home already hidden) */
/* mobile icon set (72x68) */
a[class^="btn-icon-"]{ width:72px; height:68px; }
.btn-icon-1, .btn-icon-1:hover{ background-image:url(../../../images/graphics/icon-1-mobile.png); }
.btn-icon-2, .btn-icon-2:hover{ background-image:url(../../../images/graphics/icon-2-mobile.png); }
.btn-icon-3, .btn-icon-3:hover{ background-image:url(../../../images/graphics/icon-3-mobile.png); }
.btn-icon-4, .btn-icon-4:hover{ background-image:url(../../../images/graphics/icon-4-mobile.png); }
.btn-icon-5, .btn-icon-5:hover{ background-image:url(../../../images/graphics/icon-5-mobile.png); }
.btn-icon-6, .btn-icon-6:hover{ background-image:url(../../../images/graphics/icon-6-mobile.png); }
.btn-icon-7, .btn-icon-7:hover{ background-image:url(../../../images/graphics/icon-7-mobile.png); }
.btn-icon-8, .btn-icon-8:hover{ background-image:url(../../../images/graphics/icon-8-mobile.png); }
}
/* ===== SLIDER phone grid: match live's 4-across at <=400px (Duncan review 2026-07-18).
Live keeps the two icon grids at 2-col 50% down to 401px, then flips BOTH to 100% so each grid's 4 icons sit in one row (=> 4 across x 2 down).
Our rebuild lacked this final flip and stayed 2-col (2 across x 4 down). Values copied verbatim from live templates/lender/css/style.css @400. ===== */
@media only screen and (max-width:400px){
.ch-grid{ width:100%; margin:25px 0 0 19px; }
.ch-grid-2{ width:100%; margin:0 20px 0 0; }
.btn-icon-1,.btn-icon-2,.btn-icon-3,.btn-icon-5,.btn-icon-7,.btn-icon-8{ margin:0 6px 6px 0; }
.btn-icon-4,.btn-icon-6{ margin:0 0 6px 0; }
}
/* interior banner, phone-width tune (2026-07-17, from Tim's side-by-side):
at mobile our 250px center-anchored strip ran far taller than live's and
showed the mid-image sky slice; live shows a shorter, LEFT-anchored slice */
@media only screen and (max-width:768px){
body:not(.homepage) #wrapper2{ min-height:140px; background-position:left top; } /* mobile banner height per Tim's eyeball (was 150/108/145) */
}
/* ===== PINNED HEADER (2026-07-17, live parity) =====
live fixes `header` (z-index 99) at ALL widths - menu bar, slider and
content scroll up beneath it. Ours = #wrapper1 (#222 band, ~108px =
30px pad + 53px logo + 25px pad); #wrapper2 offsets the flow to match.
Dial both numbers together if the logo band height ever changes. */
#wrapper1{ position:fixed; top:0; left:0; width:100%; z-index:99; margin-bottom:0; }
#wrapper2{ margin-top:108px; }
/* QUOTE WIDGET GAP (2026-07-17): the search-panel wrapper sat tight under /
slightly overlapped by the About block; live shows a ~5px gap. clear:both
guards against float overflow from the About columns. */
#wrapper4{ clear:both; margin-top:5px; }
@media (max-width:768px){
/* wider visible gap on phones (the About wrapper's bg eats into small margins) */
#wrapper4{ margin-top:20px; }
/* center the widget: kill the desktop column asymmetry (65% col, 20px right pad, 10px left inset) */
#wrapper4column1, #wrapper4column2, #wrapper4column3{ width:100%; float:none; padding-right:0; }
#block3 > .inner{ margin:0 15px; } /* even breathing room around the widget like live */
}
/* ===== FAQ - simple always-open Q&A (2026-07-18, Duncan review; restyled to the J3 root "original iteration" Tim pointed to) =====
Every Q + A visible, desktop and mobile, no JS. Questions = the site's teal h4 look (#0CB3AE, 22px, normal weight, no icon, no divider lines); answers = body grey; whitespace between items (generous gap above each question). Markup kept as h2 (correct outline) - it's the styling being matched, not the tag. */
.item-page .faq-list{ margin:15px 0 0; }
.item-page .faq-list .faq-item{ margin:0; }
.item-page .faq-list .faq-q{ background:none; color:#0CB3AE; font-weight:normal; font-size:22px; line-height:1.3; letter-spacing:normal; margin:28px 0 10px; padding:0; }
.item-page .faq-list .faq-a p{ margin:0 0 10px; line-height:1.5; }
.item-page .faq-list .faq-a p:last-child{ margin-bottom:0; }
/* ===== NEWS LANDING ICONS (2026-07-17) =====
House icon on each item title - LANDING ONLY (live parity: live's K2 landing
inherited it accidentally from the global h3 house-icon rule; ours is deliberate).
view-category = the blog page; article pages are view-article and excluded. */
body.view-category.itemid-124 .page-header .tck-article-title{
background: url(../../../images/graphics/icon-house.png) no-repeat left center;
margin: 0;
padding: 15px 0 10px 65px;
}
/* intro h3s inside the blog items: NO house icon on the landing (the global template.css h3 rule paints it on every h3; the item titles above keep their deliberate icon) */
body.view-category.itemid-124 .tck-article-body h3{
background: none;
margin: 5px 0 10px;
padding: 0;
}
/* clear article separation: the blog grid has no row gap, so items ran nearly flush */
body.view-category.itemid-124 .blog-items{
row-gap: 30px;
}
/* ===== NEWS RSS FEED ICON (2026-07-21) ===== */
/* k2match.css (ported K2 css) forces div.k2FeedIcon a{background:none} + a dead
simple-line-icons glyph (content:\e03b) now that K2 is uninstalled. Beat it with
equal-specificity div.k2FeedIcon a (custom.css loads last) + !important, and
suppress the :before glyph. Image icon = images/graphics/rss.png. */
div.k2FeedIcon{padding:4px 0;overflow:hidden;}
div.k2FeedIcon a,div.k2FeedIcon a:hover{display:block;float:right;margin:0;padding:0;width:24px;height:24px;background:url('../../../images/graphics/rss.png?v=2') no-repeat center center !important;background-size:24px 24px;text-decoration:none;}
div.k2FeedIcon a:before,div.k2FeedIcon a:hover:before{content:none !important;}
div.k2FeedIcon a span{display:none;}
div.k2FeedIcon a:hover{opacity:.8;}
div.k2FeedIcon .clr{clear:both;}
/* ============================================================
Accessibility toggle (Joomla core "Sienna" widget)  added 2026-07-22
Real element = ._access-icon (JS-injected + inline-styled, hence !important).
Move it to the bottom-right + recolour the symbol to brand orange #E67300.
============================================================ */
._access-icon {
position: fixed !important;
left: auto !important;
top: auto !important;
right: 20px !important;
bottom: 20px !important;
background-color: #E67300 !important; /* orange circle (Sienna default was #4054b2) */
color: #fff !important; /* white wheelchair symbol */
}
._access-icon svg,
._access-icon svg * {
fill: #fff !important; /* fallback if it ever renders as an SVG */
}
/* Accessibility pop-out heading: kill the template's global h3 house-icon (../images/icon-house.png)
+ its 65px left indent, which were bleeding into the widget heading and colliding with the close X. */
._access-menu h3 {
background: none !important;
padding-left: 0 !important;
}
/* Slider info popup: lift the modal overlay above ALL page content.
The original .overlay rule shipped with NO z-index, so once you scroll,
the grey #brands bar + the article below (later in the DOM) painted over
the fixed backdrop. High z-index puts it on top (beats #block1 z-index:10,
the phone tab / mobile menu at 100000-100002, etc.). */
.overlay {
z-index: 100100 !important;
}