/* Roboto weight 300 (2026-09-14): TCCK's font manager emits a weight-400-only Google Fonts link
   (index.php L28), so every font-weight:300 in this file was silently rendering as 400. Live loads
   Roboto:100,300. @import must be the first rule in the file; this file survives TCCK regeneration. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
/* saveandconvey2026 custom.css - ported from finished lender custom.css (recoloured + repointed) + Cybersalt overrides. 2026-09-11. NOT regenerate-safe. */
/* Site-wide formats */

.item-page p{ line-height:1.6; padding:0 0 20px; }





/* Home-page testimonial */

.testimonial{

  background:url(../../../images/site/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/site/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:#535353; margin:40px 0 20px 0; }  /* line-height 1.3 = live's global h5 */

.testimonial p{ color:#007FA9; 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; }
/* h1 site-wide = live's DESKTOP rule (Tim 2026-09-14): TCCK's template.css sets h1 29px / line-height 45px
   (too airy vs live and it rewrapped the Home h1). Live desktop = h1{font-size:1.8em; margin:5px 0 25px}
   inheriting body line-height 1.4, plus the h1-h6 letter-spacing:-1px. (Live's 1.6em/1.2 is its <=480px
   rule - already ported in the mobile block below.) */
h1{ font-size:1.8em; line-height:1.4; margin:5px 0 25px; letter-spacing:-1px; }
/* h2 site-wide = live's rule (Tim 2026-09-14): TCCK gave h2 22px/36px with NO margins (text jammed under it);
   live = h2{font-size:1.35em; margin:10px 0 20px} on body line-height 1.4 + letter-spacing:-1px. Scoped
   overrides later in this file (.popup h2, .faq-q, news landing titles) still win. */
h2{ font-size:1.35em; line-height:1.4; margin:10px 0 20px; letter-spacing:-1px; }
/* Content columns: the earlier `#center/#right > .inner{padding-left:0;padding-right:0}` override
   (2026-09-14, measured against the OLD J3 live) was REMOVED 2026-09-17 — lenderconveyancing.com is now
   the live rebuild and its `#center > .inner` keeps the template's 15px-left/10px-right gutter, so to
   "mimic lender's content margins" (Tim) saveandconvey must NOT zero them. Now identical to lender. */



/* 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/site/icon-time.png. */

.item-page h4{ background:url(../../../images/site/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 = live's article.about on the dark bg-about band) =====
   Live: .about h3{icon-search} + .about h4{icon-time}, both 1.35em WHITE, margin 10px 0 20px,
   padding 0 0 10px 65px, line-height 1.2, letter-spacing 0. Module 99 = h3 (left col) + h4 (right col).
   Rewritten 2026-09-14 (Tim: headings must be #fff) - the previous lender-ported block assumed two
   h4s in #535353 and was duplicated. */
#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 h3, #block2 .custom h4{ font-size:1.35em; color:#ffffff; font-weight:300; margin:10px 0 20px; padding:0 0 10px 65px; line-height:1.2; letter-spacing:0; }
#block2 .custom h3{ background:url(../../../images/site/icon-search.png) no-repeat 0 0 !important; background-size:36px 36px !important; }  /* ring is 53px but the one-line h3 box is ~36px, so live crops it; scaled to fit (Tim 2026-09-14, trial) */
#block2 .custom h4{ background:url(../../../images/site/icon-time.png) no-repeat 0 0 !important; }
@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/site/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/site/icon-location.png) no-repeat 0 0 !important;

  color:#fff !important; font-size:1.2em !important;   /* white (Tim 2026-09-14; was #999, live is #DDD) */

  margin:10px 0 20px; padding:7px 0 10px 40px; letter-spacing:0;

}

#block6 h4{

  background:url(../../../images/site/icon-news.png) no-repeat 0 0 !important;

  color:#fff !important; font-size:1.2em !important;   /* white (Tim 2026-09-14; was #999, live is #DDD) */

  margin:10px 0 20px; padding:15px 0 10px 65px; letter-spacing:0;

}



/* Footer notches (Tim 2026-09-14, live parity): live's footer{background:url(arrow-white.png) #26323E 50% 0}
   and .copyright{background:url(arrow-grey.png) #FFF 50% 0} - a white 23x11 notch pointing down into the
   footer, and a footer-coloured (#26323E) one pointing down into the copyright strip. Ours: #row3 = footer,
   #row1 = copyright (colours from template.css, restated here so the shorthand doesn't drop them). Images
   pulled from live's template and uploaded to images/site/. */
#row3 > .inner { background:#26323E url(../../../images/site/arrow-white.png) no-repeat 50% 0; }
#row1 > .inner { background:#666666 url(../../../images/site/arrow-grey.png) no-repeat 50% 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/site/icon-1.png) no-repeat 0 0; } .btn-icon-1:hover{ background:url(../../../images/site/icon-1-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-2{ background:url(../../../images/site/icon-2.png) no-repeat 0 0; } .btn-icon-2:hover{ background:url(../../../images/site/icon-2-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-3{ background:url(../../../images/site/icon-3.png) no-repeat 0 0; } .btn-icon-3:hover{ background:url(../../../images/site/icon-3-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-4{ background:url(../../../images/site/icon-4.png) no-repeat 0 0; } .btn-icon-4:hover{ background:url(../../../images/site/icon-4-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-5{ background:url(../../../images/site/icon-5.png) no-repeat 0 0; } .btn-icon-5:hover{ background:url(../../../images/site/icon-5-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-6{ background:url(../../../images/site/icon-6.png) no-repeat 0 0; } .btn-icon-6:hover{ background:url(../../../images/site/icon-6-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-7{ background:url(../../../images/site/icon-7.png) no-repeat 0 0; } .btn-icon-7:hover{ background:url(../../../images/site/icon-7-hover.png) no-repeat 0 0; opacity:1; }

.btn-icon-8{ background:url(../../../images/site/icon-8.png) no-repeat 0 0; } .btn-icon-8:hover{ background:url(../../../images/site/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/site/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/site/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,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'><path d='M1.5 1.5 6.5 6.2 11.5 1.5' fill='none' stroke='rgb(24,182,178)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'><path d='M1.5 1.5 6.5 6.2 11.5 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>") !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:#FF7F00 !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/site/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/site/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/site/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 */

	#mod-custom95{ display:none; }   /* hide DESKTOP menu content on mobile; keep #block1 as the mobile-bar container (Tim 2026-09-15) */

	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/site/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/site/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; }









}



@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; }









}

/* ===== 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 (#535353, 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:#535353; 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: K2-look tags + read more (Tim 2026-09-14, live parity) =====
   Live (K2): "Tagged under #tag #tag ..." as inline text links, then a plain "Read more..." link.
   Ours is Joomla's stock category blog: tag pills (.btn-info) + a read-more button - restyled here. */
body.view-category .blog-item ul.tags { list-style:none; display:block; margin:0 0 16px; padding:4px 0; }
body.view-category .blog-item ul.tags::before { content:"Tagged under"; font-weight:bold; color:#535353; padding:0 4px 0 0; }
body.view-category .blog-item ul.tags li { display:inline-flex; padding:0 4px 0 0; margin:0; }   /* inline-flex: whitespace text nodes vanish, so the # hugs the tag */
body.view-category .blog-item ul.tags li::before { content:"#"; color:#00A3D9; }
body.view-category .blog-item ul.tags li a.btn { display:inline; background:none; border:0; border-radius:0; box-shadow:none; padding:0; margin:0; font:inherit; line-height:inherit; color:#00A3D9; text-transform:none; }
body.view-category .blog-item ul.tags li a.btn:hover { text-decoration:underline; }
body.view-category .blog-item p.readmore { margin:0 0 20px; }
body.view-category .blog-item p.readmore a.btn { display:inline; background:none; border:0; border-radius:0; box-shadow:none; padding:0; margin:0; font:inherit; line-height:inherit; color:#00A3D9; }
body.view-category .blog-item p.readmore a.btn:hover { text-decoration:underline; }
body.view-category .blog-item p.readmore a.btn .icon-chevron-right { display:none; }
/* ===== 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/site/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/site/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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF7F00'%3E%3Cpath d='M6.18 15.64A2.18 2.18 0 0 1 8.36 17.82C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82A2.18 2.18 0 0 1 6.18 15.64M4 4.44A15.56 15.56 0 0 1 19.56 20H16.73A12.73 12.73 0 0 0 4 7.27V4.44M4 9.05A11 11 0 0 1 15 20H12.17A7.94 7.94 0 0 0 4 11.88V9.05Z'/%3E%3C/svg%3E") 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;}

/* ===== NEWS LANDING: created date above each title (Tim 2026-09-15, live K2 catItemDateCreated parity) =====
   newsblog_item.php emits <time class="news-date"> before the title; live showed it #999 11px. Aligned
   with the title text (65px = the house-icon indent on .tck-article-title) so date + title read as a group. */
body.view-category.itemid-124 .news-date{ display:block; color:#777; font-size:10px; line-height:1.2; margin:0; padding:0 0 3px 65px; }





/* ============================================================

   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 #009FD4.

   ============================================================ */

._access-icon {

    position: fixed !important;

    left: auto !important;

    top: auto !important;

    right: 20px !important;

    bottom: 20px !important;

    background-color: #009fd400 !important; /* transparent (Tim 2026-09-17): our solid fill was the "blue shape" behind the widget's own button; alpha 00 removes it, leaving only the widget button */

    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;

}



/* Cybersalt 2026-07-28: iOS landscape safe-area - Safari letterboxes the notch/safe area in landscape and fills it with the (white) root background, which shows as a white bar above the menu on iPhone. Painting the html background dark makes that strip match the header; body stays white so page content is unchanged. */

html { background-color: #222222; }

body { background-color: #ffffff; }

/* Quote engine text colour (Tim 2026-09-14): live sets no body colour, so the WHYT widget's labels inherit
   browser-default black; ours inherited TCCK's body #666 and read washed out. Measured on both sites. */
#whytEmbed { color:#000; }
/* Cybersalt 2026-07-28: quote engine (whyt embed) - keep money amounts on one line. On narrow phone screens the fee column and the green Total band were wrapping (e.g. £1,267.65 breaking across lines - Duncan feedback). nowrap widens the fee column (table-layout auto) and keeps the total intact; amounts are short so no overflow risk. */
#whytEmbed .whyt-table-fees td.whyt-value { white-space: nowrap; }
#whytEmbed .whyt-summary-value { white-space: nowrap; }


/* ==================== Cybersalt overrides for saveandconvey (mod_custom menu, donor CTA) ==================== */
/* Menu items: saveandconvey uses a mod_custom <ul> menu, not Maximenu. Bar bg lives on #block1 (ported above). */
.menu.tck-module .tck-module-text,
.menu.tck-module .mod-custom,
.menu.tck-module .row.group,
.menu.tck-module .twelve.columns.group,
.menu.tck-module .twelve.columns.group > div { position: static; background: transparent; }
.menu.tck-module ul { margin:0; padding:0; list-style:none; }
.menu.tck-module > .tck-module-text ul > li { margin:0; padding:20px 0 15px; float:left; position:relative; list-style:none; }
.menu.tck-module ul li a { font-family:'Roboto',sans-serif; font-size:0.90em; color:#EEE; display:block; padding:0 50px 0 0; text-decoration:none; }
.menu.tck-module ul li a:hover { color:#FFF; transition:all .6s ease-out; }
.menu.tck-module ul li.arrow { background:url(../../../images/site/nav-arrow.png) no-repeat 78% 56%; cursor:pointer; }
.menu.tck-module ul li.arrow:hover { background:url(../../../images/site/nav-arrow-hover.png) no-repeat 82% 56%; color:#FFF; }
/* Guide (.arrow3) + Conveyancing Information (.arrow4) parents were missing their chevrons (Tim 2026-09-14):
   live's nav defines one class per parent with the image position tuned to that item's width. Ported verbatim
   (.arrow2 too, unused today). */
.menu.tck-module ul li.arrow2 { background:url(../../../images/site/nav-arrow.png) no-repeat 72% 56%; cursor:pointer; }
.menu.tck-module ul li.arrow2:hover { background:url(../../../images/site/nav-arrow-hover.png) no-repeat 78% 56%; color:#FFF; }
.menu.tck-module ul li.arrow3 { background:url(../../../images/site/nav-arrow.png) no-repeat 62% 56%; cursor:pointer; }
.menu.tck-module ul li.arrow3:hover { background:url(../../../images/site/nav-arrow-hover.png) no-repeat 66% 56%; color:#FFF; }
.menu.tck-module ul li.arrow4 { background:url(../../../images/site/nav-arrow.png) no-repeat 87% 56%; cursor:pointer; }
.menu.tck-module ul li.arrow4:hover { background:url(../../../images/site/nav-arrow-hover.png) no-repeat 91% 56%; color:#FFF; }
.menu.tck-module ul li ul { display:none; }
.menu.tck-module ul li:hover > ul { display:block; position:absolute; top:100%; left:0; width:280px; margin:0; padding:0; z-index:10000001; }
.menu.tck-module ul li:hover > ul li { float:none; list-style:none; padding:0; margin:0; }
.menu.tck-module ul li:hover > ul li a { width:260px; font-size:0.90em; padding:10px; display:block; background:#FF7F00; color:#FFF; text-decoration:none; }
.menu.tck-module ul li:hover > ul li a:hover { background:#BF6000; color:#FFF; }

/* Centre Instant-Quote CTA: donor orange tile (Duncan's central button -> /instant-quote), absolutely centred */
.slider.tck-module { position: relative; }
.box { width:151px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; text-align:center; z-index:5; }
.button-pop { background:url(../../../images/site/information.png) no-repeat 0 0; width:151px; height:142px; cursor:pointer; display:block; font-size:0; transition:all .9s ease-in-out; }
.button-pop:hover { opacity:.6; }

/* ===== Brands / lender strip (donor parity): grey band, names TICKER right-to-left (2026-09-14) =====
   Live = jQuery bxSlider v3 in ticker mode on ul#slider: ticker:true, tickerSpeed:9000 (x10 internally
   = 90s per loop), tickerHover:true. 10 names x 250px cells = 2500px loop, linear, pauses on hover.
   Rebuilt dependency-free: module 97 carries the 10 <li> TWICE (second set aria-hidden) so a
   0 -> -50% translate of the 5000px track loops seamlessly. Hidden <=480px (live parity, mobile block). */
#brands { background:#E1E1E1; }
#brands > .inner { max-width:1000px; margin:0 auto; }
#brands .mod-custom { overflow:hidden; }                                   /* 1000px viewport, like live's bx-window */
#brands ul#slider { list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap; align-items:center; width:max-content; min-height:85px; position:relative; animation:brands-ticker 90s linear infinite; }
/* no hover pause (Tim 2026-09-14): live's tickerHover pauses the strip, but it should keep moving */
#brands ul#slider li { flex:0 0 250px; width:250px; box-sizing:border-box; text-align:center; padding:0 8px; }
#brands ul#slider li h5 { margin:0; color:#535353; font-family:'Roboto',sans-serif; font-weight:300; font-size:1.3em; letter-spacing:-1px; white-space:nowrap; }  /* 2026-09-14 Tim: 1.3em = +4px (was 1.05em); #535353 heading grey (was #8a8a8a -> #6C6C6C); -1px letter-spacing = live's global heading rule */
/* Animate LEFT, not transform (Tim 2026-09-14, crispness): a transform animation composites the text on a
   layer and slides it at sub-pixel offsets = soft/blurry glyphs; left re-lays-out at whole pixels each
   frame, exactly what live's jQuery .animate({left}) does. -2500px = 10 names x 250px: update if the list changes. */
@keyframes brands-ticker { from { left:0; } to { left:-2500px; } }
@media (prefers-reduced-motion:reduce) { #brands ul#slider { animation:none; } }

/* ================= Cybersalt fixes 2026-09-11 (Tim review) ================= */
/* Save & Convey's header is NOT pinned (donor parity). Undo lender's fixed-header port
   that was clipping the menu bar. */
#wrapper1 { position: static !important; }
#wrapper2 { margin-top: 0 !important; }
/* Centre the Instant-Quote CTA on the slider itself. The ported grid framework made
   .columns position:relative, which stole .box's containing block (dropped it to the
   bottom over the brands strip). Neutralise inside the slider only. */
.slider.tck-module .row.group,
.slider.tck-module .twelve.columns.group { position: static; }
/* Footer: keep the Telephone/Email table on single lines, left-aligned within the column */
#block6 table { width:100%; margin:0; }
#block6 table td { padding:2px 0; text-align:left; vertical-align:top; white-space:nowrap; }
#block6 table td:first-child { width:90px; }

/* ===== Telephone slide-out tab (donor parity) =========================
   Donor uses jQuery tabSlideOut; this is a CSS-only equivalent (checkbox
   toggle) so it needs no jQuery and survives the J5/J6 staircase.
   Geometry from the donor's plugin config: right edge, topPos 176px,
   tab 42x152, panel 250px, 300ms. ===================================== */
.cs-phone-toggle { position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.slide-out-div {
    position:fixed; top:176px; right:0; z-index:100000;
    width:250px; padding:5px 20px 15px;
    background:#FFF; border:none; box-shadow:0 2px 12px rgba(0,0,0,.25);
    transform:translateX(100%); transition:transform 300ms ease;
}
.cs-phone-toggle:checked ~ .slide-out-div { transform:translateX(0); }
.slide-out-div .handle {
    position:absolute; left:-42px; top:0;
    width:42px; height:152px; display:block; cursor:pointer;
    background:url(../../../images/site/contact-tab.png) no-repeat 0 0;
}
.cs-phone-toggle:focus-visible ~ .slide-out-div .handle { outline:3px solid #007FA9; outline-offset:2px; }
.slide-out-div h3 { margin:10px 0 8px; color:#535353; font-size:1.3em; }
.slide-out-div p  { margin:0 0 8px; color:#535353; line-height:1.4; }
.slide-out-div .cs-phone-num { margin:0; font-size:1.3em; }
.slide-out-div .cs-phone-num a { color:#007FA9; text-decoration:none; }   /* 4.56:1 on white = AA */
.slide-out-div .cs-phone-num a:hover { text-decoration:underline; }
@media (max-width:768px){ .slide-out-div, .cs-phone-toggle { display:none; } }
/* panel heading keeps the global h3 house icon - live's "Let's Talk!" has it (Tim 2026-09-14; an earlier
   "suppress the icon" rule here was wrong about the donor and has been removed). */

/* ===== NEWS LANDING: title hugs the date (Tim 2026-09-15) =====
   The NEWS LANDING ICONS rule above gives the title padding-top:15px (spacing when there was no date).
   Now the created date sits above it, so drop the title's top padding; blog-items row-gap:30px still
   separates articles. End-of-file = latest source order, so this wins over the shorthand above. */
body.view-category.itemid-124 .page-header .tck-article-title{ padding-top:0; }

/* ============================================================
   MOBILE MENU v2 (Tim 2026-09-15 redesign) - full-width dropdown under the header
   Replaces the old cbp-spmenu right-slide panel (its rules above are now inert -
   module 114 was rebuilt with #m-bar / #mobile-menu / accordion markup, no cbp-* elements).
   - Module 114 moved to the "menu" position (in-flow in #block1, between header + slider).
   - Desktop menu content (#mod-custom95) hidden <=768; #block1 kept as the mobile-bar container.
   - Bar is sticky-on-scroll: module JS toggles #m-bar.m-stuck (position:fixed) once it reaches
     the top after the (unpinned) header scrolls away; #m-bar-ph reserves the height.
   - 6 items mirror desktop; Instant Quote / Guide / Conveyancing Information tap to expand.
   ============================================================ */
#m-bar{ display:none; }                      /* desktop: hidden (desktop uses mod-custom95) */
#m-bar-ph{ display:none; }

@media only screen and (max-width:768px){
	/* #block1 becomes a plain full-width mobile-bar container (drop the desktop tint/height) */
	#block1{ background:none !important; min-height:0 !important; }
	#block1 > .inner, #block1 .menu.tck-module, #block1 .tck-module-text{ padding:0 !important; margin:0 !important; }

	#m-bar-ph{ display:block; height:0; }
	#m-bar{ display:block; width:100%; background:#444; z-index:9000; }
	#m-bar.m-stuck{ position:fixed; top:0; left:0; right:0; width:100%; box-shadow:0 2px 6px rgba(0,0,0,.25); }

	/* the MENU toggle = the full-width bar itself */
	#mobileMenuToggle{
		display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
		background:#444; color:#EEE; border:0; cursor:pointer;
		font:600 0.95em/1 'Roboto',sans-serif; letter-spacing:1px; text-transform:uppercase;
		padding:11px 18px;
	}
	#mobileMenuToggle .mm-bars{ position:relative; display:inline-block; width:22px; height:2px; background:#EEE; }
	#mobileMenuToggle .mm-bars:before, #mobileMenuToggle .mm-bars:after{
		content:""; position:absolute; left:0; width:22px; height:2px; background:#EEE; }
	#mobileMenuToggle .mm-bars:before{ top:-6px; } #mobileMenuToggle .mm-bars:after{ top:6px; }
	#mobileMenuToggle.active .mm-bars{ background:transparent; }
	#mobileMenuToggle.active .mm-bars:before{ top:0; transform:rotate(45deg); }
	#mobileMenuToggle.active .mm-bars:after{ top:0; transform:rotate(-45deg); }

	/* the dropdown panel (full-width, collapsed by default) */
	#mobile-menu{ display:none; width:100%; background:#444; max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
	#mobile-menu.open{ display:block; }
	#mobile-menu .m-menu, #mobile-menu .m-sub{ list-style:none; margin:0; padding:0; }
	#mobile-menu .m-menu > li{ margin:0; border-top:1px solid #333; }
	#mobile-menu .m-menu > li > a, #mobile-menu .m-parent{
		display:block; width:100%; box-sizing:border-box; text-align:left; text-decoration:none;
		background:none; border:0; color:#EEE; font:0.95em/1.2 'Roboto',sans-serif; padding:9px 18px; cursor:pointer;
	}
	#mobile-menu .m-menu > li > a:hover, #mobile-menu .m-parent:hover{ background:#FF7F00; color:#fff; }

	/* parent chevron (rotates when open) */
	#mobile-menu .m-parent{ position:relative; padding-right:44px; }
	#mobile-menu .m-chev{ position:absolute; right:18px; top:50%; width:9px; height:9px; margin-top:-7px;
		border-right:2px solid #EEE; border-bottom:2px solid #EEE; transform:rotate(45deg); transition:transform .2s ease; }
	#mobile-menu .m-has-sub.open > .m-parent .m-chev{ transform:rotate(-135deg); margin-top:-2px; }

	/* submenu (collapsed until parent .open) */
	#mobile-menu .m-sub{ display:none; background:#3a3a3a; }
	#mobile-menu .m-has-sub.open > .m-sub{ display:block; }
	#mobile-menu .m-sub li{ margin:0; border-top:1px solid #333; }
	#mobile-menu .m-sub a{ display:block; color:#CCC; font-size:0.9em; text-decoration:none; padding:8px 18px 8px 36px; }
	#mobile-menu .m-sub a:hover{ background:#FF7F00; color:#fff; }

	/* --- search beside the logo (Tim 2026-09-15; specificity bumped 2026-09-17). TCCK mobile.css
	   stacks the header with `#bannerrow .flexiblecolumn{width:100%!important}` (1,1,0) — beat it with
	   two-ID selectors (2,0,0) so the columns sit side-by-side on one row. --- */
	#bannerrow > .inner{ display:flex !important; align-items:center; flex-wrap:nowrap; gap:10px; }   /* the column parent is #bannerrow > .inner, NOT tck-container > .inner (a <section id=bannerrow> sits between) */
	#wrapper1 #wrapper1column1{ flex:0 0 auto; width:auto !important; float:none !important; }
	#wrapper1 #wrapper1column1 .tck-logo-img{ max-width:150px; height:auto; }   /* logo down from 216px so search fits beside it */
	#wrapper1 #wrapper1column2{ display:none !important; }
	#wrapper1 #wrapper1column3{ flex:1 1 auto; width:auto !important; min-width:0; float:none !important; }
	#search{ padding:0; }
	#search .mod-finder__search{ margin:0; }
	#search .mod-finder .form-control{ width:100%; min-width:0; font-size:0.85em; }

	/* --- slider tiles: KEEP lender's float layout (the .ch-grid / btn-icon rules earlier match lender
	   exactly); just scale this site's 151x142 desktop icons into the smaller mobile boxes so the
	   baked-in word isn't cropped. Lender ships pre-sized -tablet/-mobile images; saveandconvey doesn't,
	   so background-size does the same job. (Removed the earlier inline-block/symmetric-margin deviation
	   so the box+row layout now matches lender.) --- */
	a[class^="btn-icon-"]{ background-size:contain !important; }
}

/* ============================================================
   MOBILE fixes round 2 (Tim 2026-09-17 phone review)
   ============================================================ */
@media only screen and (max-width:768px){
	/* (2) menu must stack VERTICALLY — the desktop `.menu.tck-module … ul>li{float:left}` +
	   hover-dropdown rules leak into #mobile-menu (both modules share the .menu.tck-module wrapper);
	   #mobile-menu selectors carry an ID so they win — just have to actually SET float/display. */
	#mobile-menu .m-menu, #mobile-menu .m-menu > li, #mobile-menu .m-sub, #mobile-menu .m-sub > li{
		float:none !important; display:block; width:100%; position:static; }
	#mobile-menu .m-menu > li > a, #mobile-menu .m-parent, #mobile-menu .m-sub a{
		float:none !important; display:block; width:100%; box-sizing:border-box; padding-right:44px; }
	#mobile-menu .m-sub a{ padding-left:36px; }
	#mobile-menu .m-sub{ display:none !important; }
	#mobile-menu .m-has-sub.open > .m-sub{ display:block !important; }
	#mobile-menu ul li:hover > ul{ position:static !important; }   /* neutralize desktop hover-dropdown */

	/* (Tim 2026-09-17) zero the LI padding on mobile — the desktop rule leaks `padding:20px 0 15px`
	   onto every menu li (my earlier row-height change only touched the <a>), making the rows too tall.
	   The float:left here is overridden by the #mobile-menu float:none!important rules above, so the
	   menu stays vertical; only the padding drops. */
	.menu.tck-module > .tck-module-text ul > li {
		margin: 0;
		padding: 0px 0 0px;
		float: left;
		position: relative;
		list-style: none;
	}

	/* (1) slider layout now matches lender exactly (its own float rules + background-size above);
	   the earlier symmetric-margin override was REMOVED 2026-09-17 so the ≤400 margins match lender. */

	/* (3) search: drop the "Search" button text (keep the magnifier) so it fits on the logo line */
	#search .mod-finder .btn{ font-size:0 !important; padding:6px 10px !important; }
	#search .mod-finder .btn .icon-search{ font-size:16px !important; }

	/* (4) home video full-width */
	body.homepage iframe{ width:100% !important; height:auto !important; aspect-ratio:16/9; display:block; }

	/* (5) accessibility button: strip border/shadow so it's a single clean circle (best-effort — see note) */
	._access-icon{ border:none !important; box-shadow:none !important; }
}


/* ============================================================
   HERO TILE LABELS — real text  (Duncan phone review 2026-09-18)
   ------------------------------------------------------------
   The 8 tile words were baked into icon-1..8.png (151x142 each: border
   box AND word in one raster). On phones the tile is 72x68 and the
   earlier `background-size:contain` scaled the whole PNG down — so the
   word rendered at ~48% of its designed size. That is what Duncan
   photographed on his iPhone.

   Labels are now real text in module 96 (`<span class="btn-label">`):
     · desktop / tablet — PNG unchanged, label visually hidden, but the
       links finally carry accessible names. They previously contained
       only `&nbsp;`, i.e. eight unnamed links in the homepage's primary
       navigation (WCAG 2.4.4 / 4.1.2 failure, and no anchor text for
       Google either).
     · phones — raster dropped, tile box drawn in CSS, word set as live
       text so it is crisp and sized independently of any image.
   ============================================================ */
a[class^="btn-icon-"] .btn-label{
	position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media only screen and (max-width:480px){
	a[class^="btn-icon-"]{
		background:none !important;
		border:1px solid rgba(255,255,255,.9);
		box-sizing:border-box;
		display:flex; align-items:center; justify-content:center;
		padding:3px 2px;
		text-decoration:none;
	}
	a[class^="btn-icon-"]:hover,
	a[class^="btn-icon-"]:focus{
		background:rgba(255,255,255,.2) !important; opacity:1;
	}
	a[class^="btn-icon-"] .btn-label{
		position:static; width:100%; height:auto; overflow:visible;
		clip:auto; clip-path:none; white-space:normal;
		overflow-wrap:break-word; hyphens:auto;
		font-size:13px; line-height:1.15; font-weight:600;
		color:#fff; text-align:center;
		text-shadow:0 1px 2px rgba(0,0,0,.6);
	}
}

/* ===== Hero tiles: centre both rows on phones (Tim, 2026-09-18) =====
   The tiles are floats, so the existing `text-align:center` on .ch-grid /
   .ch-grid-2 has no effect on them; at <=480px the two 50%-wide float columns
   pushed tiles hard left and hard right with a gap up the middle, and the
   <=400px rules faked centring with hardcoded 19px/20px side margins that did
   not agree with each other.

   Scope is <=480px ON PURPOSE: above that the orange .box CTA is visible and
   absolutely centred in the hero, so that middle gap is where it lives —
   centring the rows there makes the CTA overlap tiles 2,3,6,7. Below 480px the
   CTA is display:none, so the gap is just a defect. */
@media only screen and (max-width:480px){
  .ch-grid, .ch-grid-2{
    float:none; clear:both; width:100%;
    margin:0 auto; padding:0;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
    gap:6px;
  }
  .ch-grid{ margin-top:20px; }
  /* match the 6px inter-box gap between the two rows */
  .ch-grid-2{ margin-top:6px; }
  /* the float clearfix would otherwise become a stray flex item */
  .ch-grid:after, .ch-grid-2:after{ display:none; }
  .ch-grid a[class^="btn-icon-"], .ch-grid-2 a[class^="btn-icon-"]{
    float:none; margin:0;
  }
}


/* ============================================================
   ACCESSIBILITY BUTTON — square, matching the quick buttons
   (Duncan review 2026-09-18)
   ------------------------------------------------------------
   Duncan preferred lenderconveyancing's button because it is SQUARE and matches
   the quick buttons; ours rendered as a slanted, lighter-blue rounded badge.

   🔑 THE REAL FIX WAS A PLUGIN PARAMETER, NOT CSS.
   `plg_system_accessibility` (extension_id 10175) had **`useEmojis: "true"`**.
   With that on, Joomla's accessibility library renders the icon as the ♿ EMOJI
   — the system emoji glyph IS the lighter rounded square — and injects
   `._access-icon { transform: skewX(18deg) }`, which is the tilt he photographed.
   Lender has it off, gets the `material-icons` class and `transform: scale(1)`.
   Set to **false** on 2026-09-18, so ours now matches lender's shape exactly.
   ⭐ Being a plugin param, that half survives a TCCK regenerate.

   ⚠️ Historical note: the 2026-09-17 change set this fill to alpha `00` to kill
   "a blue shape behind the widget's own button". That wedge was the skew
   stretching the container to 66x50 around a 50x50 button — a symptom of
   useEmojis, not of the fill. With the param fixed, the solid fill is correct.

   Below is only brand colour + geometry (measured from lender: 50x50, radius 0,
   solid fill, soft shadow). The library's rules are JS-injected after our
   <link>, hence !important. `transform:none` is belt-and-braces in case the
   param is ever flipped back.
   ============================================================ */
._access-icon {
	transform:none !important;
	width:50px !important;
	height:50px !important;
	background-color:#009FD4 !important;   /* brand blue, solid */
	border-radius:0 !important;
	box-shadow:1px 1px 5px rgba(0,0,0,.5) !important;
}

/* ============================================================
   iPHONE PORTRAIT — final round (Duncan 2026-09-19, built 2026-10-02)
   ------------------------------------------------------------
   Duncan's sign-off asks, all PORTRAIT ONLY (he approved landscape as-is):
     1. tiles lighter, like live — less "in your face"
     2. tiles separated into groups ("groupage"): live shows two 2x2 groups
        side by side — row 1 (Help to Buy / Right to Buy / Freehold /
        Leasehold) on the left, row 2 on the right, with a wide gap between
     3. logo + MENU button placed as on live: logo left, button right, one row
     4. no search box in portrait
   Every rule here is inside an orientation:portrait query so the landscape
   layout he signed off cannot change.
   Contrast: the tile fill is a translucent dark grey, not a lightened text
   colour, and it was MEASURED: white label text against the actual photo
   pixels behind every tile (see vault STATUS 2026-10-02). No opacity on text.
   ============================================================ */

/* ---- 3 + 4: header row — logo left, MENU right, no search ---- */
@media only screen and (max-width:767px) and (orientation:portrait){
	#wrapper1 #wrapper1column3{ display:none !important; }                 /* (4) search off in portrait */
	#bannerrow > .inner{ height:84px; box-sizing:border-box; padding:0 15px !important; flex-direction:row !important; justify-content:flex-start !important; align-items:center !important; }
	#wrapper1 #wrapper1column1 .tck-logo-img{ max-width:170px; width:170px; height:auto; }
	#wrapper1 #logo, #wrapper1 #logo > .inner{ margin:0; padding:0; }

	/* the MENU button lives in #m-bar (top of #wrapper2, directly under the header);
	   lift it up into the header row's right-hand side. The dropdown panel stays where
	   it was, opening under the header and pushing the page down. */
	#wrapper2{ position:relative; }
	#m-bar{ background:transparent; }
	#mobileMenuToggle{
		position:absolute; right:15px; top:-63px; width:auto; z-index:9001;
		background:#fff; color:#535353;                                     /* 7.4:1 on white */
		border:1px solid #8a8a8a;                                            /* 3.4:1 boundary (WCAG 1.4.11) */
		font:400 0.95em/1 'Roboto',sans-serif; letter-spacing:1px;
		padding:12px 16px; gap:12px;
	}
	#mobileMenuToggle .mm-bars,
	#mobileMenuToggle .mm-bars:before,
	#mobileMenuToggle .mm-bars:after{ background:#535353; }
	#mobileMenuToggle.active .mm-bars{ background:transparent; }
	#mobileMenuToggle:focus-visible{ outline:3px solid #007FA9; outline-offset:2px; }

	/* scrolled: the bar pins to the top as before, but now it is just the button,
	   floating top-right, not a full-width grey band */
	#m-bar.m-stuck{ background:transparent; box-shadow:none; }
	#m-bar.m-stuck #mobileMenuToggle{ top:10px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
	#m-bar.m-stuck #mobile-menu.open{ padding-top:64px; }                   /* panel slides under the floating button */
}

/* ---- 1 + 2: hero tiles — two lighter 2x2 groups ---- */
@media only screen and (max-width:480px) and (orientation:portrait){
	#mod-custom96 > .row.group:first-child > .twelve.columns.group{
		display:flex !important; justify-content:space-between; align-items:flex-start;
		padding:22px 15px 24px; box-sizing:border-box; width:100%;
	}
	#mod-custom96 > .row.group:first-child > .twelve.columns.group:before,
	#mod-custom96 > .row.group:first-child > .twelve.columns.group:after{ display:none; }

	.ch-grid, .ch-grid-2{
		display:grid !important; grid-template-columns:repeat(2, var(--cs-tile)); gap:clamp(8px, 2.6vw, 12px);
		width:auto !important; margin:0 !important; padding:0 !important; float:none !important;
		--cs-tile:clamp(62px, 18vw, 78px);
	}
	.ch-grid a[class^="btn-icon-"], .ch-grid-2 a[class^="btn-icon-"]{
		width:var(--cs-tile) !important; height:calc(var(--cs-tile) * .94) !important; margin:0 !important;
		background:rgba(128,128,128,.4) !important;          /* white text >= 5.71:1 measured on every tile, 320-430px */
		border:1px solid rgba(255,255,255,.55);
		border-radius:3px;
		padding:2px 3px !important;
	}
	.ch-grid a[class^="btn-icon-"]:hover, .ch-grid-2 a[class^="btn-icon-"]:hover,
	.ch-grid a[class^="btn-icon-"]:focus-visible, .ch-grid-2 a[class^="btn-icon-"]:focus-visible{
		background:rgba(128,128,128,.6) !important; border-color:#fff;
	}
	.ch-grid a[class^="btn-icon-"]:focus-visible, .ch-grid-2 a[class^="btn-icon-"]:focus-visible{
		outline:2px solid #fff; outline-offset:2px;
	}
	a[class^="btn-icon-"] .btn-label{
		font-weight:400; font-size:clamp(11.5px, 3.3vw, 13.5px); line-height:1.2; letter-spacing:0;
		text-shadow:none;
		overflow-wrap:normal; word-break:normal; hyphens:manual;   /* never split a word mid-way ("Ownershi-p") */
	}
}

/* ---- no sideways scroll on landscape phones / small laptops (found 2026-10-02 while verifying the above) ----
   At ~844-932px wide the page was 6px wider than the screen, so iPhone landscape could wiggle sideways.
   Culprit: the sidebar's YouTube iframe has a fixed width and overran its column. The brands ticker is
   clipped as belt-and-braces. Neither changes how anything looks. */
#right iframe{ max-width:100%; }
#brands{ overflow:hidden; }

/* ============================================================
   ACCESSIBILITY PASS (Tim's ask, 2026-10-02) — every value MEASURED
   axe-core 4.10 / WCAG 2.2 AA run over 8 pages x phone + desktop.
   ============================================================ */

/* 1. Links in body copy were told apart by colour alone: #007FA9 links in #666 text = 1.26:1
      between them (WCAG 1.4.1 needs 3:1 OR a non-colour cue). Underline = the cue. */
#maincontent p a, #maincontent li a, #maincontent td a,
#right p a, #right li a, #block2 p a, #block6 p a{
	text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}

/* 2. Quote widget (portal.whyt.co.uk embed). Brand colours as shipped fail on three states.
      Overridden here for this site; the same fix belongs in the widget itself (flagged to Duncan). */
#whytEmbed .whyt-btn-next{ color:#1A1A1A !important; }                                 /* on #FF7F00: 2.53 -> 6.87:1, keeps the orange */
#whytEmbed .whyt-active .whyt-work-tab-item-header,
#whytEmbed .whyt-active .whyt-work-tab-item-content,
#whytEmbed .whyt-work-tab-item.whyt-active{ background-color:#007FA9 !important; }    /* white text: 2.90 -> 4.56:1 */
#whytEmbed .whyt-inactive .whyt-work-tab-item-work-type-name{ color:#005F7F !important; } /* on #D1D1D1: 1.90 -> 4.67:1 */
#whytEmbed .whyt-help-block, #whytEmbed .whyt-has-error label,
#whytEmbed .whyt-has-error .whyt-radio, #whytEmbed label.whyt-radio-inline{ color:#8A2E2B; } /* error red on #D1D1D1: 3.83 -> 5.49:1 */

/* 3. News: tag buttons #00A3D9 on white = 2.90:1; date #777 at 10px = 4.48:1 */
.tags .btn-info, .tags .btn-info:visited{ color:#007FA9 !important; border-color:#007FA9 !important; }  /* 4.56:1 */
.news-date{ color:#707070 !important; }                                                 /* 4.95:1 */

/* 4. Mobile menu hover/focus: white on #FF7F00 = 2.53:1 */
@media only screen and (max-width:768px){
	#mobile-menu .m-menu > li > a:hover, #mobile-menu .m-parent:hover,
	#mobile-menu .m-sub a:hover,
	#mobile-menu .m-menu > li > a:focus-visible, #mobile-menu .m-parent:focus-visible,
	#mobile-menu .m-sub a:focus-visible{ background:#B35900 !important; color:#fff !important; } /* 4.83:1, still orange-family */
}

/* 5. News article + blog (round 2 of the axe run) */
.blog-item .btn-secondary, .blog-item a.btn{ color:#007FA9 !important; border-color:#007FA9 !important; }  /* Read more: 2.90 -> 4.56:1 */
.itemHits, .itemDateModified{ color:#707070 !important; }                                /* 2.84 -> 4.95:1 */
.itemNavigationTitle{ color:#707070 !important; }                                        /* on #FAFAFA 2.72 -> 4.74:1 */
.itemPrevious, .itemNext{ color:#00739A !important; }                                    /* on #FAFAFA 4.36 -> 5.13:1 */
.cs-fbShareBtn{ background-color:#166FE5 !important; }                                   /* white 12px bold: 4.23 -> 4.73:1 (Facebook's own hover blue) */


/* LOGO AT REAL SIZE (2026-10-07, Duncan: "not as sharp as the current website"). The PNG is 156x64;
   TCCK drew it at 216px wide (upscaled 1.38x = soft). Desktop/tablet only: the <=768px rules above
   keep their own sizes. The header is static here (not pinned), so no #wrapper2 offset to re-dial. */
@media only screen and (min-width:769px){
	#wrapper1 #wrapper1column1 .tck-logo-img{ width:156px; height:64px; max-width:none; }
}

/* ============================================================
   iPHONE LANDSCAPE: telephone tab + accessibility button no longer cover the tiles
   (Cybersalt 2026-10-08; Tim: fix before go-live)
   ------------------------------------------------------------
   At 844x390 (iPhone landscape) the fixed telephone tab (802-844 x 176-328) and the
   fixed accessibility button (774-824 x 320-370) sat on the Shared Ownership and
   Transfer of Equity tiles. Short landscape screens only (height <= 500px), so
   desktop, tablets and the portrait layout Duncan approved are unchanged.
   - Telephone tab: hidden, as it already is at <= 768px. The number stays in the
     footer and on /contact.
   - Accessibility button: moved out of the fixed corner into the white header band
     (scrolls with the page). >= 769px wide: centred in the gap between logo and
     search. <= 768px (header stacks, logo centred): top-right of the header.
   ============================================================ */
@media only screen and (orientation:landscape) and (max-height:500px){
	.slide-out-div, .cs-phone-toggle{ display:none !important; }
	._access-icon{ position:absolute !important; top:37px !important; bottom:auto !important; right:auto !important; left:calc(50% - 25px) !important; }
}
@media only screen and (orientation:landscape) and (max-height:500px) and (max-width:768px){
	._access-icon{ left:auto !important; right:15px !important; top:30px !important; }
}


/* ============================================================
   NEWS ARTICLE OPENING LINE IN BLUE (Cybersalt 2026-10-09, Duncan: "the title on the current
   version is blue and the demo version is black once you open the article")
   ------------------------------------------------------------
   On the old K2 site every news article opens with its first sentence as a blue bold <h1>
   (#00A3D9). The migration made it a paragraph (one H1 per page = the article title), so it
   came out in body grey. Same look back, without a second H1: blue + bold. #007FA9 is the
   site's accessible version of #00A3D9 (4.56:1 on white; #00A3D9 is 2.90:1).
   ============================================================ */
.itemIntroText > p:first-child{ color:#007FA9; font-weight:700; font-size:1.15em; line-height:1.4; }