/* Southern Profiles brand layer - loads after style.css */
:root{--theme-color:#E31E1E;}
body.ef-loaded .preloader{display:none!important}
/* header */
.header-layout4 .header-logo img{max-height:54px;width:auto}
.mobile-logo img{max-height:44px;width:auto}
.header-layout4 .menu-area{background:rgba(21,22,28,.55);backdrop-filter:blur(6px)}
.header-layout4 .sticky-wrapper.sticky .menu-area{background:#15161C}
.header-layout4 .main-menu > ul > li > a{font-size:14px;letter-spacing:.04em}
.header-layout4 .navbar-right-desc .title{color:#fff;opacity:.7}
/* hero - backgrounds in CSS because slick fade rewrites the slide style attribute */
.sp-hero-1{background-image:url(../img/sp/hero-1.webp)}
.sp-hero-2{background-image:url(../img/sp/hero-2.webp)}
.sp-hero-3{background-image:url(../img/sp/hero-3.webp)}
.hero-slide{background-size:cover;background-position:center}
.hero-style5{padding:250px 0 200px}
.hero-style5 .hero-title{font-size:66px;line-height:1.08;letter-spacing:-.01em}
.hero-style5 .hero-title + .hero-title{color:rgba(255,255,255,.72);font-weight:600}
.hero-style5 .hero-text{margin-top:22px;margin-bottom:34px}
.sp-chips .single-rating-wrap .rating-text{font-size:12.5px;letter-spacing:.06em}
.sp-chips .single-rating-wrap .rating-text i{color:var(--theme-color);font-size:16px;vertical-align:-2px}
.hero-style5 .btn-group{display:flex;gap:14px;flex-wrap:wrap}
.sp-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}
.sp-btn-ghost:before,.sp-btn-ghost:after{background:#fff}
.sp-btn-ghost:hover{color:#15161C;border-color:#fff}
.hero-slider5 .slick-dots{bottom:38px}
@media (max-width:767px){.hero-style5{padding:170px 0 120px}.hero-style5 .hero-title{font-size:38px}}
/* supply band */
.sp-supply-band{padding:34px 0 30px;position:relative;z-index:3;background:#15161C}
.about-area-5{position:relative;z-index:1}
.sp-supply-label{font-family:var(--title-font);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-bottom:16px}
.client-logo.sp-supply{opacity:.9;padding:6px 0}
.client-logo.sp-supply span{font-family:var(--title-font);font-weight:600;font-size:17px;color:#fff;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.client-logo.sp-supply:after{right:-14px}
/* about */
.sp-phones{display:flex;gap:40px;flex-wrap:wrap}
.about-img-1 img,.about-img-2 img{width:100%}
/* products */
.why-tab-wrap .nav-link{font-size:16px}
.why-tab-thumb img{width:100%;height:auto}
.sp-btn-link{background:transparent;color:var(--title-color);padding-left:0;padding-right:0}
.sp-btn-link:before,.sp-btn-link:after{display:none}
.sp-btn-link:hover{color:var(--theme-color)}
.why-content-wrap .btn-group{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* technical */
.sp-technical{background:#15161C;position:relative;overflow:hidden}
.sp-technical:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,rgba(227,30,30,.18),transparent 70%)}
.sp-technical .container{position:relative}
.sp-muted{color:rgba(255,255,255,.65)}
.sp-profile-card{background:#1E1F26;border:1px solid rgba(255,255,255,.08);padding:26px 28px 14px;margin-bottom:22px}
.sp-profile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sp-profile-name{font-family:var(--title-font);font-weight:700;font-size:22px;color:#fff}
.sp-profile-tag{font-family:var(--title-font);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--theme-color)}
.sp-profile-svg{width:100%;height:auto;display:block}
.sp-spec-card{background:#fff;padding:34px 34px 30px;height:100%}
.sp-spec{width:100%;border-collapse:collapse}
.sp-spec th,.sp-spec td{padding:13px 0;border-bottom:1px solid rgba(21,22,28,.1);vertical-align:top;font-size:15px}
.sp-spec th{font-family:var(--title-font);font-weight:700;color:var(--title-color);width:38%;padding-right:14px;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.sp-spec td{color:#4a4f57}
.sp-spec tr:last-child th,.sp-spec tr:last-child td{border-bottom:0}
/* colours */
.sp-colours{background:#fff}
.sp-swatch{background:#fff;padding:10px 10px 14px;box-shadow:0 4px 14px rgba(21,22,28,.06);height:100%}
.sp-swatch-chip{height:96px;margin-bottom:12px;position:relative;overflow:hidden}
.sp-swatch-chip:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 14px,transparent 14px 34px)}
.sp-swatch-name{font-family:var(--title-font);font-weight:700;font-size:15px;color:var(--title-color)}
.sp-swatch-meta{font-size:12px;color:#6b7075}
/* benefits */
.benefit-img-1 img{width:100%;height:auto}
/* catalogue */
.space-bottom{padding-bottom:100px}
.portfolio-card-thumb img{width:100%;height:auto;display:block}
.sp-card-text{color:rgba(255,255,255,.85);font-size:14px;margin:8px 0 0;max-width:420px}
.portfolio-card.style5 .portfolio-card-details .media-left{max-width:100%}
/* quote form */
.sp-inline-link{color:var(--theme-color);font-weight:600}
.sp-check label{font-size:15px;color:var(--title-color);font-weight:500}
.sp-check input[type=checkbox] ~ label:before{border-color:#9aa0a6;background:#fff}
.contact-form-wrap .title-area p{margin-top:-10px;margin-bottom:26px}
/* footer */
.sp-footer-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footer-logo img{max-height:56px;width:auto}
@media (max-width:991px){.sp-phones{gap:24px}}
/* Liam's notes, 5 Oct 2026 (edit loop round 1) */
.hero-style5 .hero-title + .hero-title{color:#fff;font-weight:700}
.sp-supply-band{padding:52px 0 46px;background:#15161C;border-top:3px solid var(--theme-color)}
.sp-supply-label{font-size:14px;letter-spacing:.24em;color:var(--theme-color);font-weight:700;margin-bottom:22px}
.client-logo.sp-supply{opacity:1;padding:10px 0}
.client-logo.sp-supply span{font-size:21px;font-weight:700;letter-spacing:.05em}
.client-logo.sp-supply:after{background:rgba(227,30,30,.55)!important}
#products .why-sec-bg3-1{background-image:none!important;background:#fff}
#products .why-sec-bg3-1:after{display:none}
.sp-colours{background:#fff}
.sp-swatch{border:1px solid #E6E6E6;box-shadow:none}
.sp-colour-cycle{position:relative}
.sp-colour-cycle img{display:block;width:100%;height:auto}
.sp-colour-cycle img+img{position:absolute;inset:0;opacity:0;animation:spColour 12s infinite}
/* three FarmShield Plus colours, 4s each: Juniper Green (base), Slate Grey, Slate Blue */
.sp-colour-cycle img:nth-child(2){animation-delay:4s}.sp-colour-cycle img:nth-child(3){animation-delay:8s}
@keyframes spColour{0%{opacity:0}4%{opacity:1}33.3%{opacity:1}37.3%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-colour-cycle img+img{animation:none}}
.contact-wrap2.sp-contact-clean{background:#fff;border:1px solid #E6E6E6;box-shadow:none;padding-left:80px;padding-right:80px}
.sp-contact-clean .title-area{margin-bottom:36px}
.sp-contact-clean .row.gy-4{--bs-gutter-y:1.25rem;--bs-gutter-x:1.25rem}
@media (max-width:767px){.contact-wrap2.sp-contact-clean{padding-left:24px;padding-right:24px}}
.cta-wrap5.sp-cta-solid{background:var(--theme-color)}
.widget-about .about-year{color:#fff;-webkit-text-stroke:0;font-size:22px;font-weight:600;letter-spacing:.01em;font-family:var(--title-font)}
.header-layout4 .header-logo img{max-height:72px}
.footer-logo img{max-height:80px}
.mobile-logo img{max-height:52px}
#products .nav-link:not(.active){border:1px solid #E3E3E3}
.client-logo.sp-supply span{font-size:18px;letter-spacing:.03em}
.client-logo.sp-supply span{font-size:17px;letter-spacing:.03em}
@media (max-width:991px){.header-layout4 .header-logo img{max-height:58px}}
/* Liam's notes, 6 Oct 2026 (edit loop round 2) */
/* 1. Section titles read weak at 600: match the hero's weight and tracking, every section the same */
.sec-title{font-weight:700;letter-spacing:-.015em;line-height:1.12}
.sec-title,.h2.sec-title,h2.sec-title{font-weight:700}
/* 2. The quote panel: a strong red border and a box-profile rib band along the top, so it reads as cladding */
.contact-wrap2.sp-contact-clean{position:relative;border:2px solid var(--theme-color);padding-top:124px}
.contact-wrap2.sp-contact-clean:before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background-color:#fff;background-repeat:repeat-x;background-size:112px 22px;background-image:url("data:image/svg+xml;utf8,")}
.contact-wrap2.sp-contact-clean:after{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--theme-color)}
@media (max-width:767px){.contact-wrap2.sp-contact-clean{padding-top:96px}}
/* Inner pages, 6 Oct 2026 (built from the locked components; these rules only size them) */
.sp-inner .hero-style5{padding:210px 0 150px}
@media (max-width:767px){.sp-inner .hero-style5{padding:150px 0 100px}}
.sp-drawing{background:#fff;padding:16px;margin-top:12px}
.sp-drawing img{width:100%;height:auto;display:block}
.sp-spec-note{font-size:13px;color:#6b7075;margin:14px 0 0;line-height:1.5}
.sp-inner .sp-colours{background:#fff}
.sp-inner .hero-slide{position:relative}
.sp-inner .hero-slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,22,28,.82) 0%,rgba(21,22,28,.55) 55%,rgba(21,22,28,.25) 100%)}
.sp-inner .hero-slide .container{position:relative;z-index:1}
.sp-inner .sp-spec-card{height:auto;position:sticky;top:110px}
/* ---- 9 Oct, Liam's notes round 2 ---- */
/* products: chooser graphic + five product tiles (replaces the demo's tab block) */
#products .why-sec-bg3-1{display:none}
.sp-prod-links{margin-top:48px;padding-top:32px;border-top:1px solid var(--border-color)}
.sp-prod-links__ask{margin:0 0 14px;font-family:var(--title-font);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8A8F98}
.sp-prod-links__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sp-prod-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:84px;padding:14px 16px;background:#fff;border:1px solid rgba(21,22,28,.12);color:var(--title-color);transition:border-color .3s ease,background-color .3s ease,color .3s ease}
.sp-prod-link__no{font-family:var(--title-font);font-weight:700;font-size:15px;color:var(--theme-color);font-variant-numeric:tabular-nums}
.sp-prod-link__txt b{display:block;font-family:var(--title-font);font-weight:700;font-size:17px;line-height:1.2}
.sp-prod-link__txt span{display:block;font-size:13px;line-height:1.4;color:#5B6068;margin-top:2px}
.sp-prod-link i{font-size:18px;color:var(--title-color);transition:transform .3s ease}
.sp-prod-link:hover{background:var(--title-color);border-color:var(--title-color);color:#fff}
.sp-prod-link:hover .sp-prod-link__txt span{color:rgba(255,255,255,.7)}
.sp-prod-link:hover i{color:var(--theme-color);transform:translate(2px,-2px)}
@media (max-width:1199px){.sp-prod-links__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.sp-prod-links__grid{grid-template-columns:minmax(0,1fr)}.sp-prod-link{min-height:68px}}
/* contact: two panels inside the profile-edged card, dark contact side and the form */
.contact-wrap2.sp-contact-clean.sp-contact-split{padding:24px 0 0}
.sp-contact-split > .row{min-height:100%}
.sp-contact-side{position:relative;height:100%;background:#15161C;padding:64px 56px;display:flex;flex-direction:column;gap:36px;overflow:hidden}
.sp-contact-side:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 100% 0%,rgba(227,30,30,.2),transparent 70%);pointer-events:none}
.sp-contact-side > *{position:relative}
.sp-contact-side .sec-title{margin-bottom:14px}
.sp-contact-lines{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.sp-contact-lines li{border-bottom:1px solid rgba(255,255,255,.1)}
.sp-contact-lines a,.sp-contact-lines__plain{display:flex;align-items:center;gap:16px;padding:14px 0;color:#fff;font-family:var(--title-font);font-weight:700;font-size:20px;line-height:1.2}
.sp-contact-lines i{flex:0 0 44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--theme-color);font-size:18px;transition:background-color .3s ease,color .3s ease}
.sp-contact-lines small{display:block;font-family:var(--body-font);font-weight:400;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-bottom:2px}
.sp-contact-lines a:hover i{background:var(--theme-color);color:#fff}
.sp-contact-send__title,.sp-contact-main__title{margin:0 0 14px;font-family:var(--title-font);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sp-contact-send .checklist li{color:#fff;font-size:16px;margin-bottom:10px}
.sp-contact-main{padding:64px 56px;height:100%}
.sp-contact-main__title{color:#8A8F98;margin-bottom:22px}
@media (max-width:1199px){.sp-contact-side,.sp-contact-main{padding:48px 36px}}
@media (max-width:767px){.contact-wrap2.sp-contact-clean.sp-contact-split{padding-top:24px}.sp-contact-side,.sp-contact-main{padding:40px 22px}.sp-contact-lines a,.sp-contact-lines__plain{font-size:18px}}
/* footer: the factory on Google Maps */
.sp-footer-map{position:relative;margin:0 0 60px;height:300px;background:#1E1F26;border:1px solid rgba(255,255,255,.08)}
.sp-footer-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.sp-footer-map__btn{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--theme-color);color:#fff;font-family:var(--title-font);font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
.sp-footer-map__btn:hover{background:#fff;color:var(--title-color)}
@media (max-width:767px){.sp-footer-map{height:240px;margin-bottom:40px}}
/* reviews: Google reviews in the Elfsight widget style (header with rating and button, swipeable cards) */
.sp-reviews{background:#fff}
.sp-rv__summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 16px rgba(21,22,28,.06)}
.sp-rv__summary > .sp-rv__g{width:36px;height:36px;flex:0 0 36px}
.sp-rv__score{display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:8px;margin-right:auto}
.sp-rv__score b{grid-column:1/-1;font-family:var(--body-font);font-weight:600;font-size:15px;color:#202124;line-height:1.3}
.sp-rv__num{font-family:var(--body-font);font-weight:700;font-size:20px;color:#202124}
.sp-rv__count{font-size:14px;color:#5F6368;text-decoration:underline;text-underline-offset:2px}
.sp-rv__count:hover{color:#1A73E8}
.sp-rv__btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:21px;background:#1A73E8;color:#fff;font-family:var(--body-font);font-weight:600;font-size:15px;white-space:nowrap;transition:background-color .2s ease}
.sp-rv__btn:hover{background:#1765CC;color:#fff}
.sp-rv__stars{display:inline-flex;gap:2px;line-height:0}
.sp-rv__stars svg{width:18px;height:18px;flex:0 0 18px;fill:#FBBC04}
.sp-rv__stars--part{position:relative}
.sp-rv__stars--part > span{display:inline-flex;gap:2px}
.sp-rv__stars--part > span:first-child svg{fill:#DADCE0}
.sp-rv__stars-on{position:absolute;left:0;top:0;width:var(--fill);overflow:hidden;white-space:nowrap}
.sp-rv{position:relative}
.sp-rv__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px;outline:0}
.sp-rv__track::-webkit-scrollbar{display:none}
.sp-rv__card{scroll-snap-align:start;background:#fff;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 16px rgba(21,22,28,.06);min-width:0}
.sp-rv__head{display:flex;align-items:center;gap:12px}
.sp-rv__avatar{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--body-font);font-weight:600;font-size:19px}
.sp-rv__who{flex:1;min-width:0}
.sp-rv__who b{display:block;font-family:var(--body-font);font-weight:600;font-size:16px;color:#202124;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.sp-rv__who span{display:block;font-size:13px;color:#70757A;line-height:1.4}
.sp-rv__head .sp-rv__g{width:22px;height:22px;flex:0 0 22px;align-self:flex-start}
.sp-rv__text{margin:0;font-size:15px;line-height:1.6;color:#3C4043;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.sp-rv__card.is-open .sp-rv__text{-webkit-line-clamp:unset;display:block}
.sp-rv__more{align-self:flex-start;background:none;border:0;padding:0;margin-top:-6px;font-size:14px;font-weight:600;color:#70757A;cursor:pointer}
.sp-rv__more:hover{color:#202124}
.sp-rv__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.sp-rv__arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(21,22,28,.15);background:#fff;color:#202124;display:grid;place-items:center;font-size:18px;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease}
.sp-rv__arrow:hover{background:#202124;border-color:#202124;color:#fff}
.sp-rv__arrow:disabled{opacity:.35;pointer-events:none}
.sp-rv.is-static .sp-rv__nav{display:none}
@media (max-width:1199px){.sp-rv__track{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:991px){.sp-rv__summary{justify-content:flex-start}}
@media (max-width:767px){.sp-rv__track{grid-auto-columns:86%;gap:16px}.sp-rv__card{padding:20px}.sp-rv__summary{padding:14px 16px}.sp-rv__btn{width:100%;justify-content:center}}
/* 9 Oct round 4 (Liam): no thin red line under the profile edge on the contact box */
.contact-wrap2.sp-contact-clean:after{display:none}
.contact-wrap2.sp-contact-clean{border-top:0}
/* hero: every slide as tall as the tallest, so a shorter slide (custom flashings) never shows a white strip below it */
.hero-slider5 .slick-track{display:flex}
.hero-slider5 .slick-slide{height:auto}
/* header: Matt's new logo (wide) sits inside the dark logo panel */
/* sized to sit inside the logo panel (.logo-bg: 14.6% wide, 255px up to 1500, hidden under 1400) with ~18px either side */
.header-layout4 .header-logo img{max-height:64px;max-width:calc(14.6vw - 36px);height:auto}
@media (min-width:1700px){.header-layout4 .header-logo img{max-width:calc(14.6vw - 80px)}}
@media (max-width:1500px){.header-layout4 .header-logo img{max-width:219px}}
@media (max-width:1399px){.header-layout4 .header-logo img{max-width:200px;max-height:52px}}
@media (max-width:991px){.header-layout4 .header-logo img{max-width:176px;max-height:46px}}
/* inner technical bands (9 Oct, as on the homepage): side by side, the spec card and the left column end on one line */
@media (min-width:1200px){
.sp-inner #technical .row > .col-xl-7{display:flex;flex-direction:column}
.sp-inner #technical .row > .col-xl-7 > :last-child{flex:1 1 auto;margin-bottom:0}
.sp-inner #technical .sp-spec-card{height:100%;position:static}
}
/* benefit tiles (9 Oct): the two columns start and end level; each tile fills its share of the column */
@media (min-width:768px){
.benefit-wrap5 .row > .col-md-6{display:flex;flex-direction:column}
.benefit-wrap5 .row > .col-md-6 > .single-benefit-wrap{flex:1 1 0}
}
/* catalogue cards (9 Oct, Liam): every card image the same height, so wide and narrow cards in a row end level */
.portfolio-area-5 .portfolio-card.style5{height:100%}
.portfolio-area-5 .portfolio-card-thumb img{width:100%;height:380px;object-fit:cover}
@media (max-width:1199px){.portfolio-area-5 .portfolio-card-thumb img{height:320px}}
@media (max-width:767px){.portfolio-area-5 .portfolio-card-thumb img{height:260px}}
/* catalogue cards (9 Oct): the label and title always show (the theme hid them until hover, so phones saw bare photos);
the description and button add on hover where a mouse can hover; the whole card is one link */
.portfolio-area-5 .portfolio-card.style5{overflow:hidden;background-color:#15161C}
.portfolio-area-5 .portfolio-card.style5:before{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(to top,rgba(21,22,28,.88) 0%,rgba(21,22,28,.55) 45%,rgba(21,22,28,0) 100%);pointer-events:none;z-index:1}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-details{flex-direction:column;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;gap:14px;max-width:none;padding:28px 30px;z-index:2}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-details .media-left{opacity:1;transform:none;margin-bottom:0}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-title{font-size:26px;line-height:1.2;margin-bottom:0}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-title a{color:#fff}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-title a:after{content:"";position:absolute;inset:0;z-index:3}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-subtitle{color:rgba(255,255,255,.75)}
.portfolio-area-5 .portfolio-card.style5 .sp-card-text{color:rgba(255,255,255,.85);margin:8px 0 0;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease}
.portfolio-area-5 .portfolio-card.style5 .btn-group{margin-top:0;display:none}
@media (hover:hover){
.portfolio-area-5 .portfolio-card.style5 .btn-group{display:flex;max-height:0;overflow:hidden;margin-top:-14px;transition:max-height .4s ease,margin-top .4s ease}
.portfolio-area-5 .portfolio-card.style5:hover .btn-group{max-height:90px;margin-top:0}
.portfolio-area-5 .portfolio-card.style5 .btn{opacity:0;transform:translate(0,10px);transition:.4s}
.portfolio-area-5 .portfolio-card.style5:hover .sp-card-text{max-height:120px;opacity:1}
.portfolio-area-5 .portfolio-card.style5:hover .btn{opacity:1;transform:none}
.portfolio-area-5 .portfolio-card.style5:hover:before{height:100%}
}
@media (max-width:767px){.portfolio-area-5 .portfolio-card.style5 .portfolio-card-details{padding:20px 22px}.portfolio-area-5 .portfolio-card.style5 .portfolio-card-title{font-size:22px}}
/* quote form honeypot (9 Oct): off-screen, never seen by people */
.sp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---- pre-launch accessibility pass (9 Oct audit) ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-80px;z-index:10000;background:#fff;color:#15161C;padding:12px 16px;font-weight:700;border:2px solid #15161C}
.skip-link:focus{top:8px}
:focus-visible{outline:3px solid #15161C;outline-offset:2px}
header :focus-visible,footer :focus-visible,.hero-wrapper :focus-visible,.sp-technical :focus-visible,.cta-area-5 :focus-visible,.sp-contact-side :focus-visible,.portfolio-card :focus-visible,.btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #15161C}
.form-control,.sp-select{border:1px solid #8C8F94!important}
.form-control:focus,.sp-select:focus{border-color:#15161C!important;box-shadow:0 0 0 2px #15161C!important}
.form-control::placeholder{color:#5B6068;opacity:1}
.sp-select{height:50px;line-height:48px;width:100%;padding:0 25px;background-color:#F5F5F5;color:#5B6068;font-size:16px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 22px center;border-radius:0}
.sp-check input[type=checkbox]{display:block!important;position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.sp-check{position:relative}
.sp-check input:focus-visible ~ label:before{outline:3px solid #15161C;outline-offset:2px}
.sp-check label{min-height:44px;display:inline-flex;align-items:center}
.form-messages.is-error{color:#B3150F;font-weight:600}
.form-messages.is-ok{color:#1E7B34;font-weight:600}
/* red text on dark grounds: lighter red for contrast (fills and large text keep #E31E1E) */
footer .text-theme,.sp-technical .sub-title.text-theme,.sp-contact-side .sub-title.text-theme,.sp-supply-label,.cta-area-5 .text-theme{color:#FF5A55!important}
/* mid-grey labels on white: darker for contrast */
.spg-cc{--spg-mute:#5B6068}
.sp-prod-links__ask,.sp-contact-main__title{color:#5B6068}
.portfolio-area-5 .portfolio-card.style5 .portfolio-card-subtitle{color:#fff;background:rgba(21,22,28,.78);font-weight:600}
.sp-rv__more,.sp-rv__count{min-height:44px;display:inline-flex;align-items:center}
footer .widget_nav_menu li a{display:inline-block;padding:6px 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* mobile menu (9 Oct, Liam: burger top right, clean and easy): the drawer opens from the right, beside the burger;
quicker; roomy rows; Get a price and Call Matt as real buttons at the foot */
.mobile-menu-wrapper .mobile-menu-area{max-width:340px;margin-left:auto;left:auto;right:-110%;transition:right .35s ease,opacity .35s ease,visibility .35s}
.mobile-menu-wrapper.body-visible .mobile-menu-area{left:auto;right:0}
.mobile-menu-wrapper .mobile-menu{margin-top:8px;padding-bottom:12px;overflow-y:auto}
/* (fresh-eyes 9 Oct) the theme capped the list at 100vh-200px, so an open dropdown scrolled inside a short box and cut
the next item in half; the list now fills the drawer under the logo bar and scrolls there */
.mobile-menu-wrapper .mobile-menu-area{display:flex;flex-direction:column}
.mobile-menu-wrapper .mobile-logo{flex:0 0 auto}
.mobile-menu-wrapper .mobile-menu{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}
.mobile-menu-wrapper .mobile-menu ul li a{display:block;padding:14px 0;font-size:18px;font-weight:600;color:#15161C}
.sp-menu-actions{display:grid;gap:10px;padding:8px 20px 24px}
.sp-menu-actions .btn{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:10px;min-height:52px}
/* mobile menu: sub-items read as a level below (smaller, grey); desktop dropdown items sentence-sized */
.mobile-menu-wrapper .mobile-menu ul ul li a{font-size:16px;font-weight:500;color:#4A4F57;padding:11px 0}
.mobile-menu-wrapper .mobile-menu ul ul li a:hover{color:#E31E1E}
.main-menu ul.sub-menu a{text-transform:none}
/* Southern's own curved-sheet render: shown no bigger than its real size, so it stays sharp */
img[src*="render-curved"]{max-width:566px;width:100%;height:auto;margin:0 auto;display:block}
/* sticky contact bar on phones and tablets (Liam, 9 Oct): slim, two actions, never covers content */
.sp-mbar{display:none}
@media (max-width:991px){
.sp-mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:9990;height:calc(52px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#15161C;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.sp-mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;font-family:var(--title-font);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.sp-mbar__call{background:#15161C}
.sp-mbar__quote{background:#E31E1E}
.sp-mbar a:focus-visible{outline:3px solid #fff;outline-offset:-5px}
body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
.scroll-top{bottom:72px!important;right:16px!important}
.mobile-menu-wrapper.body-visible ~ .sp-mbar,body:has(.mobile-menu-wrapper.body-visible) .sp-mbar{display:none}
}
/* phones: the directions button sits under the map, so it never hides the pin */
@media (max-width:767px){.sp-footer-map{height:auto;border:0;background:none}.sp-footer-map iframe{height:240px;border:1px solid rgba(255,255,255,.08)}.sp-footer-map__btn{position:static;display:flex;justify-content:center;margin-top:10px}}
/* No eyebrow labels above headings, sitewide (Liam, 12 Oct 2026: "never use eyebrows in design"). Card captions (.portfolio-card-subtitle) stay. */
.sub-title.text-theme, .about-subtitle, .sp-supply-label { display: none !important; }
/* Hero headings: the reveal animation clips to the text box and the tight line height cut off descenders (g, y, p). Room below, cancelled by margin so nothing moves (Liam, 12 Oct). */
.hero-title, [class*="slider-custom-anim"], [class*="custom-anim-"] { padding-bottom: .18em !important; margin-bottom: -.18em !important; }
/* Phone hero: 170px top padding left ~95px of dead space under the 76px header; trimmed to sit the content 28px below it (Liam, 12 Oct). */
@media (max-width: 767px) { .hero-style5 { padding-top: 104px !important; padding-bottom: 64px !important; } }
@media (max-width: 767px) {
/* trust lines above the hero heading: 20px gaps between three stacked lines took 148px; tightened */
.hero-style5 .sp-chips { gap: 4px 14px !important; margin-bottom: 14px !important; }
.hero-style5 .sp-chips .rating-text, .hero-style5 .sp-chips .single-rating-wrap { line-height: 20px !important; font-size: 13px !important; }
/* heading to paragraph: 56px gap trimmed; buttons clear of the paragraph */
.hero-style5 .hero-text { margin-top: 14px !important; margin-bottom: 22px !important; }
}
/* Touchscreens: no hover states, so one tap opens the link (Liam, 12 Oct: buttons needed two taps). The theme grew two circles inside every .btn on :hover and the product cards changed their overlay on :hover; iOS treats the first tap as the hover. */
@media (hover: none) {
.btn::before, .btn::after { transition: none !important; }
.btn:hover::before, .btn:hover::after, .btn:focus::before, .btn:focus::after, .btn:active::before, .btn:active::after { width: 50px !important; height: 50px !important; }
.btn:hover, .btn:focus, .btn:active, .btn.style2:hover, .btn.style2:focus, .btn.style2:active { color: var(--white-color) !important; }
.btn.style4:hover, .btn.style4:focus, .btn.style4:active { color: var(--theme-color) !important; }
.btn.style5:hover, .btn.style5:focus, .btn.style5:active { color: var(--title-color) !important; }
.portfolio-card.style5:after, .portfolio-card.style5 .btn, .portfolio-card.style5 .portfolio-card-details .media-left { transition: none !important; }
.portfolio-card.style5:hover:after { opacity: 0 !important; }
.portfolio-card.style5:hover .portfolio-card-details .media-left { transform: none !important; }
}