/* ==========================================================
   LEASE-WEBSITES.CO.UK — HOMEPAGE REDESIGN
   Add to: /wp-content/themes/spacious/global.css
   Scope: .lw-redesign
   Wallpaper and bubble background code removed
========================================================== */

/* 1. GLOBAL DESIGN VARIABLES AND BASE STYLES */
.lw-redesign {
    --lw-blue: #2538df;
    --lw-blue-dark: #1828b5;
    --lw-ink: #172139;
    --lw-muted: #667187;
    --lw-line: rgba(30, 49, 93, .12);
    --lw-radius: 24px;
    --lw-shadow: 0 18px 55px rgba(39, 52, 100, .09);

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(20px, 4vw, 60px);
    overflow: clip;
    color: var(--lw-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.75;
    background: transparent;
}

.lw-redesign,
.lw-redesign * {
    box-sizing: border-box;
}

.lw-redesign img {
    display: block;
    max-width: 100%;
    height: auto;
}

.lw-redesign figure {
    margin: 0;
}

.lw-redesign a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.lw-redesign a:focus-visible {
    outline: 3px solid #6575ff;
    outline-offset: 4px;
}

/* 2. TYPOGRAPHY */
.lw-redesign h1,
.lw-redesign h2,
.lw-redesign h3 {
    margin: 0 0 20px;
    color: var(--lw-ink);
    font-family: inherit;
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.lw-redesign h1 {
    max-width: 800px;
    font-size: clamp(2.4rem, 5.2vw, 5rem);
    letter-spacing: -.055em;
}

.lw-redesign h2 {
    font-size: clamp(1.8rem, 3.4vw, 3.1rem);
}

.lw-redesign h3 {
    font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.lw-redesign p {
    margin: 0 0 18px;
    color: var(--lw-muted);
}

.lw-redesign ul {
    padding-left: 22px;
}
.lw-section {
position: relative;
width: 100%;
min-width: 0;
margin: clamp(30px, 5vw, 76px) 0;
scroll-margin-top: 35px;
}
.lw-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
color: var(--lw-blue);
font-size: .74rem;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.5;
text-transform: uppercase;
}
.lw-eyebrow::before {
content: "";
width: 25px;
height: 2px;
flex: 0 0 25px;
background: currentColor;
}
/* 3. HERO */
.lw-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
align-items: center;
gap: clamp(30px, 5vw, 78px);
min-height: 480px;
padding: clamp(24px, 4vw, 62px) 0 clamp(38px, 6vw, 85px);
}
.lw-hero-copy {
position: relative;
z-index: 2;
}
.lw-hero-lead {
max-width: 670px;
margin-bottom: 20px !important;
color: #303c5a !important;
font-size: clamp(1.2rem, 2vw, 1.65rem);
line-height: 1.5;
font-weight: 550;
}
.lw-hero-copy > p:not(.lw-hero-lead) {
max-width: 590px;
}
/* 4. BUTTON STYLES */
.lw-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.lw-redesign .lw-button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 14px;
min-height: 52px;
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 100px;
font-family: inherit;
font-size: .94rem;
font-weight: 750;
line-height: 1.4;
text-align: center;
text-decoration: none !important;
cursor: pointer;
}
.lw-redesign .lw-button-primary {
color: #fff !important;
background: var(--lw-blue);
box-shadow: 0 10px 24px rgba(37, 56, 223, .22);
}
.lw-redesign .lw-button-primary:hover {
color: #fff !important;
background: var(--lw-blue-dark);
box-shadow: 0 14px 30px rgba(37, 56, 223, .28);
transform: translateY(-2px);
}
.lw-redesign .lw-button-light {
color: var(--lw-ink) !important;
border-color: var(--lw-line);
background: rgba(255, 255, 255, .8);
}
.lw-redesign .lw-button-light:hover {
color: var(--lw-blue) !important;
background: #fff;
border-color: rgba(37, 56, 223, .35);
}
.lw-trust-line {
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
color: var(--lw-muted);
font-size: .83rem;
}
.lw-trust-dot,
.lw-live-dot {
display: inline-block;
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: #35aa81;
box-shadow: 0 0 0 4px rgba(53, 170, 129, .12);
}
/* 5. GLASS HERO GRAPHIC */
.lw-hero-visual {
position: relative;
display: grid;
place-items: center;
min-height: 370px;
isolation: isolate;
}
.lw-orbit {
position: absolute;
z-index: -1;
width: 90%;
aspect-ratio: 1;
border: 1px solid rgba(90, 109, 197, .15);
border-radius: 50%;
}
.lw-orbit-one {
transform: rotate(-22deg) scaleY(.78);
}
.lw-orbit-two {
width: 72%;
transform: rotate(36deg) scaleY(.82);
border-style: dashed;
}
.lw-glass-panel {
border: 1px solid rgba(255, 255, 255, .95);
background: linear-gradient(
145deg,
rgba(255, 255, 255, .92),
rgba(255, 255, 255, .58)
);
box-shadow:
0 30px 75px rgba(37, 51, 107, .13),
inset 0 1px 0 #fff;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.lw-hero-panel {
width: min(100%, 400px);
padding: 30px;
border-radius: 28px;
transform: rotate(-3deg);
}
.lw-panel-label {
color: var(--lw-muted);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
}
.lw-hero-graphic {
display: flex;
align-items: end;
gap: 12px;
height: 180px;
margin: 25px 0;
padding: 22px;
border: 1px solid rgba(37, 56, 223, .08);
border-radius: 18px;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 39px,
rgba(37, 56, 223, .07) 40px
);
}
.lw-graphic-bar {
flex: 1;
min-width: 8px;
height: 35%;
border-radius: 7px 7px 3px 3px;
background: linear-gradient(180deg, #8794ff, #3548e8);
}
.lw-graphic-bar:nth-child(2) { height: 50%; }
.lw-graphic-bar:nth-child(3) { height: 43%; }
.lw-graphic-bar:nth-child(4) { height: 68%; }
.lw-graphic-bar:nth-child(5) { height: 61%; }
.lw-graphic-bar:nth-child(6) { height: 82%; }
.lw-graphic-bar:nth-child(7) { height: 100%; }
.lw-panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--lw-muted);
font-size: .8rem;
}
.lw-float-chip {
position: absolute;
padding: 11px 17px;
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 100px;
color: var(--lw-ink);
background: rgba(255, 255, 255, .9);
box-shadow: 0 12px 35px rgba(31, 46, 97, .12);
font-size: .8rem;
font-weight: 750;
}
.lw-chip-top {
top: 10%;
right: -2%;
}
.lw-chip-bottom {
bottom: 9%;
left: -3%;
}
/* 6. INTRODUCTION */
.lw-intro {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(30px, 7vw, 100px);
align-items: start;
padding: clamp(28px, 5vw, 65px) 0;
border-top: 1px solid var(--lw-line);
}
.lw-intro-copy {
padding-top: 5px;
}
.lw-redesign .lw-text-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 8px;
color: var(--lw-blue) !important;
font-weight: 800;
text-decoration: none !important;
}
.lw-redesign .lw-text-link:hover {
gap: 15px;
color: var(--lw-blue-dark) !important;
}
/* 7. PERFORMANCE IMAGE */
.lw-performance {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
gap: clamp(25px, 5vw, 60px);
align-items: center;
padding: clamp(25px, 4vw, 50px);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: var(--lw-radius);
background: rgba(255, 255, 255, .65);
box-shadow: var(--lw-shadow);
}
.lw-performance-copy p {
max-width: 420px;
}
.lw-chart-card {
min-width: 0;
padding: clamp(12px, 2vw, 24px);
overflow: hidden;
border: 1px solid var(--lw-line);
border-radius: 18px;
background: #fff;
}
.lw-chart-card img {
width: 100%;
border-radius: 10px;
}
.lw-chart-card figcaption {
padding-top: 12px;
color: var(--lw-muted);
font-size: .78rem;
}
/* 8. SECTION HEADINGS */
.lw-centered-heading {
max-width: 780px;
margin: 0 auto 38px;
text-align: center;
}
.lw-centered-heading .lw-eyebrow {
justify-content: center;
}
.lw-centered-heading > p {
max-width: 580px;
margin: 0 auto;
}
/* 9. CUSTOMER REVIEWS */
.lw-reviews {
padding: clamp(30px, 5vw, 65px);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: var(--lw-radius);
background: rgba(255, 255, 255, .72);
box-shadow: var(--lw-shadow);
}
.lw-review-slot {
min-width: 0;
width: 100%;
max-width: 100%;
margin-top: 30px;
}
.lw-review-slot > * {
max-width: 100%;
}
/* 10. AGENCY IMAGE */
.lw-agency {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
align-items: center;
gap: clamp(30px, 6vw, 80px);
}
.lw-agency-visual {
position: relative;
padding: 14px;
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 28px;
background: rgba(255, 255, 255, .7);
box-shadow: var(--lw-shadow);
}
.lw-agency-visual img {
width: 100%;
aspect-ratio: 1 / .9;
object-fit: cover;
border-radius: 19px;
}
.lw-agency h3 {
margin-top: 26px;
}
/* 11. SERVICE CARDS */
.lw-services {
padding: clamp(28px, 5vw, 65px) 0;
}
.lw-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.lw-service-card {
position: relative;
min-width: 0;
padding: clamp(23px, 3vw, 34px);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 23px;
background: rgba(255, 255, 255, .8);
box-shadow: 0 14px 45px rgba(39, 52, 100, .06);
transition: transform .25s ease, box-shadow .25s ease;
}
.lw-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 23px 55px rgba(39, 52, 100, .12);
}
.lw-service-featured {
border-color: rgba(91, 107, 238, .3);
background: linear-gradient(145deg, #fff, #f1f3ff);
box-shadow: 0 18px 48px rgba(54, 69, 193, .1);
}
.lw-service-number {
position: absolute;
top: 23px;
right: 24px;
color: #a1a9bc;
font-size: .8rem;
font-weight: 800;
}
.lw-service-icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin-bottom: 27px;
border: 1px solid rgba(37, 56, 223, .12);
border-radius: 17px;
color: var(--lw-blue);
background: linear-gradient(145deg, #fff, #e9edff);
font-size: 1.5rem;
}
.lw-service-card p {
font-size: .94rem;
}
/* 12. RESPONSIVE VIDEO EMBED */
.lw-video-section {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
align-items: center;
gap: clamp(25px, 5vw, 55px);
padding: clamp(25px, 4vw, 45px);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: var(--lw-radius);
background: rgba(255, 255, 255, .68);
box-shadow: var(--lw-shadow);
}
.lw-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 18px;
background: #111a34;
box-shadow: 0 15px 40px rgba(24, 35, 76, .17);
}
.lw-video-frame iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* 13. CONTACT FORM AND WPFORMS */
.lw-contact {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
gap: clamp(30px, 5vw, 70px);
align-items: start;
padding: clamp(25px, 5vw, 65px);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 28px;
background:
radial-gradient(ellipse at 0 0, rgba(224, 230, 255, .8), transparent 55%),
linear-gradient(135deg, #fff, #f7f8ff);
box-shadow: 0 25px 70px rgba(39, 52, 100, .09);
}
.lw-contact-details {
display: grid;
gap: 20px;
margin-top: 32px;
}
.lw-detail-label {
display: block;
margin-bottom: 5px;
color: var(--lw-blue);
font-size: .7rem;
font-weight: 850;
letter-spacing: .14em;
}
.lw-contact-details p {
margin: 0 0 4px;
}
.lw-contact-details a {
color: var(--lw-ink);
text-decoration: none;
overflow-wrap: anywhere;
}
.lw-contact-details a:hover {
color: var(--lw-blue);
}
.lw-form-slot {
min-width: 0;
width: 100%;
max-width: 100%;
padding: clamp(17px, 3vw, 30px);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 20px;
background: rgba(255, 255, 255, .88);
box-shadow: 0 12px 40px rgba(39, 52, 100, .07);
}
.lw-form-slot > * {
max-width: 100%;
}
.lw-form-slot input:not([type="checkbox"]):not([type="radio"]),
.lw-form-slot select,
.lw-form-slot textarea {
width: 100%;
max-width: 100%;
border-radius: 10px;
}
.lw-form-slot button,
.lw-form-slot input[type="submit"] {
min-height: 46px;
border-radius: 100px;
}
/* 14. EDITORIAL AND SEO CONTENT */
.lw-editorial-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.lw-editorial-grid > article,
.lw-seo-details > article {
min-width: 0;
padding: clamp(22px, 3vw, 34px);
border: 1px solid var(--lw-line);
border-radius: 20px;
background: rgba(255, 255, 255, .75);
overflow-wrap: anywhere;
}
.lw-editorial-grid a,
.lw-seo-details a {
color: var(--lw-blue);
}
.lw-editorial-grid h3,
.lw-seo-details h2 {
overflow-wrap: anywhere;
}
.lw-seo-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.lw-seo-details h2 {
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}
/* 15. LONG-FORM AI SEO CONTENT */
.lw-ai-content {
max-width: 940px;
margin-right: auto;
margin-left: auto;
padding: clamp(25px, 5vw, 60px);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: var(--lw-radius);
background: rgba(255, 255, 255, .8);
box-shadow: 0 15px 50px rgba(39, 52, 100, .05);
}
.lw-ai-content h2 {
margin-top: 10px;
}
.lw-ai-content h3 {
margin-top: 32px;
font-size: 1.4rem;
}
.lw-ai-content p {
max-width: 780px;
}
/* 16. SEO CONTENT WRAPPER */
.lw-redesign .lw-seo-content {
padding: clamp(28px, 5vw, 60px) 0;
}
.lw-redesign .lw-seo-content .lw-editorial-grid > article {
min-width: 0;
}
/* 17. EMBED AND MEDIA SAFETY */
.lw-redesign iframe,
.lw-redesign video {
max-width: 100%;
}
/* 18. WIDE DESKTOP */
@media (min-width: 1450px) {
.lw-redesign {
padding-right: max(58px, calc((100% - 1380px) / 2));
padding-left: max(58px, calc((100% - 1380px) / 2));
}
}
/* 19. TABLET */
@media (max-width: 900px) {
.lw-hero {
grid-template-columns: minmax(0, 1fr) minmax(230px, .75fr);
gap: 25px;
}
.lw-hero-panel {
padding: 20px;
}
.lw-hero-graphic {
height: 140px;
gap: 7px;
padding: 15px;
}
.lw-performance,
.lw-video-section {
grid-template-columns: minmax(0, 1fr);
}
.lw-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lw-contact {
grid-template-columns: minmax(0, 1fr);
}
.lw-agency {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.lw-redesign .lw-intro {
gap: 28px;
}
}
/* 20. MOBILE */
@media (max-width: 640px) {
.lw-redesign {
padding: 18px;
}
.lw-section {
margin-top: 35px;
margin-bottom: 35px;
}
.lw-hero {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
padding-top: 30px;
}
.lw-hero-visual {
min-height: 290px;
margin: 0 5px 10px;
}
.lw-hero-panel {
width: min(88%, 360px);
}
.lw-chip-top {
right: 0;
}
.lw-chip-bottom {
left: 0;
}
.lw-actions {
align-items: stretch;
flex-direction: column;
}
.lw-redesign .lw-button {
width: 100%;
}
.lw-intro,
.lw-agency,
.lw-editorial-grid,
.lw-seo-details {
grid-template-columns: minmax(0, 1fr);
}
.lw-performance,
.lw-reviews,
.lw-contact,
.lw-video-section,
.lw-ai-content {
padding: 22px;
}
.lw-service-grid {
grid-template-columns: minmax(0, 1fr);
}
.lw-service-card {
padding: 26px;
}
.lw-chart-card {
padding: 10px;
}
.lw-centered-heading {
margin-bottom: 26px;
}
.lw-redesign .lw-seo-content {
padding-top: 20px;
padding-bottom: 20px;
}
.lw-redesign .lw-trust-line {
align-items: flex-start;
}
.lw-redesign .lw-float-chip {
max-width: 80%;
font-size: .72rem;
}
}
/* 21. ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
.lw-redesign ,
.lw-redesign ::before,
.lw-redesign ::after {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
}

/* ==========================================================
LEASE WEBSITES — PAGE-WIDE BUBBLE WALLPAPER FIX
Replace all previous wallpaper/background patches.
========================================================== */
/* Establish the full page background area */
body:has(.lw-redesign) .site-content {
position: relative;
isolation: isolate;
background-color: #f7f8ff !important;
background-image: none !important;
}
/* Apply fixed-scale bubbles across the full content height.
Bubble sizes use px so they do not stretch with page height. */
body:has(.lw-redesign) .site-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: #f7f8ff;
background-image:
radial-gradient(
circle 260px at 88% 4%,
rgba(255,255,255,.98) 0%,
rgba(218,226,255,.72) 28%,
rgba(218,226,255,.18) 58%,
transparent 100%
),
radial-gradient(
circle 220px at 10% 18%,
rgba(255,255,255,.95) 0%,
rgba(218,226,255,.50) 35%,
transparent 100%
),
radial-gradient(
circle 300px at 92% 35%,
rgba(208,219,255,.55) 0%,
rgba(225,231,255,.20) 48%,
transparent 100%
),
radial-gradient(
circle 250px at 12% 52%,
rgba(255,255,255,.98) 0%,
rgba(213,223,255,.58) 34%,
transparent 100%
),
radial-gradient(
circle 280px at 84% 70%,
rgba(210,221,255,.58) 0%,
rgba(225,231,255,.18) 48%,
transparent 100%
),
radial-gradient(
circle 230px at 18% 88%,
rgba(255,255,255,.95) 0%,
rgba(213,223,255,.48) 38%,
transparent 100%
),
linear-gradient(
145deg,
#f8f9ff 0%,
#f1f4ff 50%,
#ffffff 100%
);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
/* Keep the theme's inner containers transparent */
body:has(.lw-redesign) #primary,
body:has(.lw-redesign) #main,
body:has(.lw-redesign) .content-area {
background-color: transparent !important;
background-image: none !important;
}
/* Prevent the wrapper's old wallpaper from competing */
.lw-redesign {
position: relative;
background: transparent !important;
}
.lw-redesign::before,
.lw-redesign::after {
content: none !important;
}
/* Keep individual content sections transparent */
.lw-redesign > .lw-hero,
.lw-redesign > .lw-intro,
.lw-redesign > .lw-agency,
.lw-redesign > .lw-services,
.lw-redesign > .lw-seo-content {
background-color: transparent !important;
}
/* Preserve the white glass-card appearance */
.lw-redesign .lw-performance,
.lw-redesign .lw-reviews,
.lw-redesign .lw-contact,
.lw-redesign .lw-video-section,
.lw-redesign .lw-ai-content,
.lw-redesign .lw-service-card {
background-color: rgba(255,255,255,.76);
}
/* Mobile wallpaper adjustments */
@media (max-width: 640px) {
body:has(.lw-redesign) .site-content::before {
background-image:
radial-gradient(
circle 180px at 100% 4%,
rgba(255,255,255,.95) 0%,
rgba(213,223,255,.60) 42%,
transparent 100%
),
radial-gradient(
circle 170px at 0% 23%,
rgba(255,255,255,.92) 0%,
rgba(215,224,255,.50) 42%,
transparent 100%
),
radial-gradient(
circle 200px at 100% 44%,
rgba(210,221,255,.52) 0%,
transparent 100%
),
radial-gradient(
circle 180px at 0% 66%,
rgba(255,255,255,.95) 0%,
rgba(213,223,255,.48) 42%,
transparent 100%
),
radial-gradient(
circle 190px at 100% 88%,
rgba(210,221,255,.48) 0%,
transparent 100%
),
linear-gradient(
145deg,
#f8f9ff 0%,
#f1f4ff 50%,
#ffffff 100%
);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
}

FAQS
/* =========================================
SEO FAQ CARD — REDESIGN
Two-column layout with full-image hover zoom
========================================= */
.seo-faq-section {
width: 100%;
max-width: 1240px;
margin: 48px auto;
padding: 0 20px;
box-sizing: border-box;
}
.seo-faq-section ,
.seo-faq-section ::before,
.seo-faq-section ::after {
box-sizing: border-box;
}
/* Main card layout */
.seo-faq-card {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
gap: 38px;
align-items: start;
padding: clamp(26px, 4vw, 44px);
background: #fff;
border: 1px solid rgba(25, 43, 67, 0.10);
border-radius: 18px;
box-shadow: 0 12px 38px rgba(24, 40, 65, 0.07);
overflow: visible !important;
}
.seo-faq-content {
min-width: 0;
padding-right: 2px;
}
.seo-faq-sidebar {
min-width: 0;
position: relative;
overflow: visible !important;
background: #f4f7fb;
border: 1px solid #e8edf4;
border-radius: 14px;
padding: 0 20px 22px;
}
/* =========================================
LOGO — FLOAT RIGHT
========================================= */
.seo-faq-brand {
display: block;
width: 100%;
min-height: 90px;
padding: 16px 0 14px;
margin-bottom: 12px;
text-align: right;
background: transparent;
border: 0;
border-bottom: 1px solid #e1e8f1;
border-radius: 0;
overflow: auto;
}
.seo-faq-brand img {
float: right;
display: block;
width: auto;
max-width: 190px;
max-height: 76px;
height: auto;
object-fit: contain;
margin: 0 0 8px 16px;
}
/* =========================================
SECTION HEADINGS
========================================= */
.seo-faq-eyebrow,
.seo-faq-sidebar-label {
display: inline-block;
margin: 0 0 12px;
color: #2776c9;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1.5;
text-transform: uppercase;
}
.seo-faq-content h2 {
margin: 0 0 16px;
color: #172b46;
font-size: clamp(26px, 3vw, 35px);
font-weight: 700;
line-height: 1.2;
}
.seo-faq-intro {
margin: 0 0 26px;
color: #5b6675;
font-size: 16px;
line-height: 1.75;
}
/* =========================================
FAQ ACCORDION
========================================= */
.seo-faq-list {
border-top: 1px solid #e2e8f0;
}
.seo-faq-item {
border-bottom: 1px solid #e2e8f0;
}
.seo-faq-item summary {
position: relative;
display: block;
padding: 19px 38px 19px 0;
color: #172b46;
cursor: pointer;
font-size: 16px;
font-weight: 650;
line-height: 1.5;
list-style: none;
}
.seo-faq-item summary::-webkit-details-marker {
display: none;
}
.seo-faq-item summary::after {
content: "+";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: #edf5ff;
color: #2776c9;
font-size: 21px;
font-weight: 400;
line-height: 1;
}
.seo-faq-item[open] summary::after {
content: "\2212";
}
.seo-faq-item summary:hover {
color: #2776c9;
}
.seo-faq-answer {
padding: 0 0 20px;
}
.seo-faq-answer p {
margin: 0;
color: #5b6675;
font-size: 15px;
line-height: 1.8;
}
/* =========================================
MAIN CASE-STUDY IMAGE
Full original proportions, no thumbnail crop
========================================= */
.seo-faq-image-wrap {
position: relative;
width: 100%;
height: auto !important;
aspect-ratio: auto !important;
margin: 0 0 24px;
overflow: visible !important;
background: transparent;
border-radius: 8px;
}
.seo-faq-image-wrap img {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center;
border-radius: 8px;
cursor: zoom-in;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-origin: center center;
}
/* Hover zoom retained */
.seo-faq-image-wrap:hover img {
z-index: 999;
transform: scale(1.5);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}
/* =========================================
SIDEBAR TEXT AND CTA
========================================= */
.seo-faq-sidebar-content {
padding: 0;
}
.seo-faq-sidebar-content h3 {
margin: 0 0 12px;
color: #172b46;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
}
.seo-faq-sidebar-content > p {
margin: 0 0 22px;
color: #5b6675;
font-size: 15px;
line-height: 1.75;
}
.seo-faq-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 15px 18px;
border-radius: 8px;
background: #2776c9;
color: #fff !important;
font-size: 15px;
font-weight: 650;
line-height: 1.45;
text-decoration: none !important;
transition: background 0.2s ease, transform 0.2s ease;
}
.seo-faq-cta:hover {
background: #195da5;
transform: translateY(-1px);
}
.seo-faq-cta span {
font-size: 20px;
flex-shrink: 0;
}
/* =========================================
SECOND CASE-STUDY IMAGE
========================================= */
.seo-faq-case-study {
position: relative;
margin-top: 22px;
overflow: visible !important;
}
.seo-faq-case-study > a {
position: relative;
display: block;
overflow: visible !important;
color: #263b55;
text-decoration: none;
background: #fff;
border: 1px solid #e0e7f0;
border-radius: 10px;
}
.seo-faq-case-study img {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
border-radius: 9px 9px 0 0;
cursor: zoom-in;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-origin: center center;
}
.seo-faq-case-study > a:hover img {
z-index: 999;
transform: scale(1.5);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}
.seo-faq-case-study > a > span {
display: grid;
gap: 6px;
padding: 16px;
}
.seo-faq-case-study strong {
color: #172b46;
font-size: 15px;
}
.seo-faq-case-study > a > span > span {
color: #5b6675;
font-size: 13px;
line-height: 1.6;
}
/* =========================================
SIDEBAR LINKS
========================================= */
.seo-faq-links {
display: grid;
gap: 0;
margin-top: 20px;
border-top: 1px solid #dfe6ef;
}
.seo-faq-links a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #dfe6ef;
color: #263b55;
font-size: 14px;
line-height: 1.5;
text-decoration: none;
}
.seo-faq-links a span {
flex-shrink: 0;
color: #2776c9;
font-size: 18px;
}
.seo-faq-links a:hover,
.seo-faq-case-study > a:hover strong {
color: #2776c9;
}
/* Keyboard accessibility */
.seo-faq-section a:focus-visible,
.seo-faq-item summary:focus-visible {
outline: 2px solid #2776c9;
outline-offset: 4px;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.seo-faq-card {
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
gap: 26px;
padding: 26px;
}
.seo-faq-sidebar {
padding: 0 16px 20px;
}
.seo-faq-brand img {
max-width: 155px;
max-height: 65px;
}
.seo-faq-sidebar-content h3 {
font-size: 21px;
}
.seo-faq-image-wrap:hover img,
.seo-faq-case-study > a:hover img {
transform: scale(1.25);
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 680px) {
.seo-faq-section {
margin: 30px auto;
padding: 0 12px;
}
.seo-faq-card {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
padding: 22px 18px;
}
.seo-faq-sidebar {
padding: 0 16px 20px;
}
.seo-faq-brand {
min-height: 76px;
}
.seo-faq-brand img {
max-width: 165px;
max-height: 60px;
}
.seo-faq-content h2 {
font-size: 28px;
}
.seo-faq-item summary {
padding: 17px 36px 17px 0;
font-size: 15px;
}
.seo-faq-answer p {
font-size: 14px;
}
.seo-faq-sidebar-content h3 {
font-size: 22px;
}
/* Hover zoom is unsuitable for touchscreens */
.seo-faq-image-wrap:hover img,
.seo-faq-case-study > a:hover img {
transform: none;
box-shadow: none;
}
}
/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
.seo-faq-image-wrap img,
.seo-faq-case-study img,
.seo-faq-cta {
transition: none;
}
}
/* Hero headline: H2 semantic heading, original H1 styling */
.lw-redesign .lw-hero-title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.04em;
margin: 0 0 1.5rem;
}
.seo-faq-standalone {
--faq-navy: #101d35;
--faq-blue: #2878d4;
--faq-text: #26344a;
--faq-muted: #637187;
--faq-border: #e0e7f0;
--faq-bg: #f4f7fb;
width: 100%;
margin: 48px auto;
color: var(--faq-text);
font-family: inherit;
box-sizing: border-box;
}
.seo-faq-standalone ,
.seo-faq-standalone ::before,
.seo-faq-standalone ::after {
box-sizing: border-box;
}
.seo-faq-standalone .seo-faq-card {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
gap: 36px;
padding: clamp(22px, 4vw, 48px);
background: #fff;
border: 1px solid var(--faq-border);
border-radius: 24px;
box-shadow: 0 18px 55px rgba(16, 29, 53, 0.09);
overflow: hidden;
}
.seo-faq-standalone .seo-faq-content {
min-width: 0;
}
.seo-faq-standalone .seo-faq-eyebrow,
.seo-faq-standalone .seo-faq-sidebar-label {
display: inline-block;
margin-bottom: 12px;
color: var(--faq-blue);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.5;
text-transform: uppercase;
}
.seo-faq-standalone #seo-faq-heading {
margin: 0 0 16px;
color: var(--faq-navy);
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.035em;
}
.seo-faq-standalone .seo-faq-intro {
margin: 0 0 26px;
color: var(--faq-muted);
font-size: 1rem;
line-height: 1.75;
}
.seo-faq-standalone .seo-faq-list {
display: grid;
gap: 10px;
}
.seo-faq-standalone .seo-faq-item {
margin: 0;
border: 1px solid var(--faq-border);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.seo-faq-standalone .seo-faq-item[open] {
border-color: #b8d5f6;
background: #fbfdff;
}
.seo-faq-standalone .seo-faq-item summary {
position: relative;
padding: 18px 46px 18px 18px;
color: var(--faq-navy);
font-size: 0.96rem;
font-weight: 700;
line-height: 1.55;
cursor: pointer;
list-style: none;
}
.seo-faq-standalone .seo-faq-item summary::-webkit-details-marker {
display: none;
}
.seo-faq-standalone .seo-faq-item summary::after {
content: "+";
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
color: var(--faq-blue);
font-size: 1.45rem;
font-weight: 400;
}
.seo-faq-standalone .seo-faq-item[open] summary::after {
content: "−";
}
.seo-faq-standalone .seo-faq-item summary:focus-visible {
outline: 3px solid var(--faq-blue);
outline-offset: -3px;
border-radius: 10px;
}
.seo-faq-standalone .seo-faq-answer {
padding: 0 18px 18px;
}
.seo-faq-standalone .seo-faq-answer p {
margin: 0;
color: var(--faq-muted);
font-size: 0.94rem;
line-height: 1.8;
}
/* Sidebar */
.seo-faq-standalone .seo-faq-sidebar {
align-self: start;
min-width: 0;
padding: 18px;
border: 1px solid var(--faq-border);
border-radius: 18px;
background: var(--faq-bg);
}
.seo-faq-standalone .seo-faq-brand {
display: flex;
justify-content: center;
margin-bottom: 18px;
padding: 12px;
border-radius: 12px;
background: #fff;
}
.seo-faq-standalone .seo-faq-brand img {
display: block;
width: 100%;
max-width: 150px;
height: auto;
object-fit: contain;
}
.seo-faq-standalone .seo-faq-image-wrap {
margin-bottom: 22px;
overflow: hidden;
border-radius: 12px;
background: #e7edf5;
}
.seo-faq-standalone .seo-faq-image-wrap img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.seo-faq-standalone .seo-faq-sidebar-content h3 {
margin: 0 0 12px;
color: var(--faq-navy);
font-size: 1.4rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.025em;
}
.seo-faq-standalone .seo-faq-sidebar-content > p {
margin: 0 0 20px;
color: var(--faq-muted);
font-size: 0.94rem;
line-height: 1.75;
}
.seo-faq-standalone .seo-faq-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 10px;
background: var(--faq-blue);
color: #fff;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.seo-faq-standalone .seo-faq-cta:hover {
background: #175eae;
color: #fff;
transform: translateY(-1px);
}
.seo-faq-standalone .seo-faq-case-study {
margin-top: 20px;
overflow: hidden;
border: 1px solid var(--faq-border);
border-radius: 12px;
background: #fff;
}
.seo-faq-standalone .seo-faq-case-study > a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
color: inherit;
text-decoration: none;
}
.seo-faq-standalone .seo-faq-case-study img {
display: block;
width: 76px;
height: 76px;
flex: 0 0 76px;
border-radius: 8px;
object-fit: cover;
}
.seo-faq-standalone .seo-faq-case-study > a > span {
display: grid;
gap: 6px;
min-width: 0;
}
.seo-faq-standalone .seo-faq-case-study strong {
color: var(--faq-navy);
font-size: 0.9rem;
}
.seo-faq-standalone .seo-faq-case-study > a > span > span {
color: var(--faq-muted);
font-size: 0.8rem;
line-height: 1.5;
}
.seo-faq-standalone .seo-faq-links {
display: grid;
gap: 0;
margin-top: 18px;
}
.seo-faq-standalone .seo-faq-links a {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 12px 2px;
border-bottom: 1px solid var(--faq-border);
color: var(--faq-navy);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
.seo-faq-standalone .seo-faq-links a:last-child {
border-bottom: 0;
}
.seo-faq-standalone .seo-faq-links a:hover,
.seo-faq-standalone .seo-faq-case-study a:hover > span {
color: var(--faq-blue);
}
.seo-faq-standalone a:focus-visible {
outline: 3px solid var(--faq-blue);
outline-offset: 3px;
}
@media (max-width: 800px) {
.seo-faq-standalone .seo-faq-card {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.seo-faq-standalone .seo-faq-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 16px;
}
.seo-faq-standalone .seo-faq-brand {
grid-column: 1 / -1;
margin-bottom: 0;
}
.seo-faq-standalone .seo-faq-image-wrap {
margin-bottom: 0;
}
.seo-faq-standalone .seo-faq-sidebar-content {
min-width: 0;
}
}
@media (max-width: 520px) {
.seo-faq-standalone {
margin: 28px auto;
}
.seo-faq-standalone .seo-faq-card {
padding: 20px 14px;
gap: 24px;
border-radius: 16px;
}
.seo-faq-standalone .seo-faq-sidebar {
display: block;
padding: 14px;
}
.seo-faq-standalone .seo-faq-brand {
margin-bottom: 16px;
}
.seo-faq-standalone .seo-faq-image-wrap {
margin-bottom: 20px;
}
.seo-faq-standalone .seo-faq-image-wrap img {
aspect-ratio: 16 / 10;
}
.seo-faq-standalone .seo-faq-sidebar-content h3 {
font-size: 1.3rem;
}
}
@media (prefers-reduced-motion: reduce) {
.seo-faq-standalone .seo-faq-cta {
transition: none;
}
}
/* Match the AI SEO content width to the main redesign sections */
.lw-redesign .lw-ai-content {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 3vw, 40px);
padding-right: clamp(20px, 3vw, 40px);
box-sizing: border-box;
}
/* Keep all text within the section's available width */
.lw-redesign .lw-ai-content > h2,
.lw-redesign .lw-ai-content > h3,
.lw-redesign .lw-ai-content > p {
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 600px) {
.lw-redesign .lw-ai-content {
padding-left: 20px;
padding-right: 20px;
}
}
/* Hero logo: force a true circle and move it lower */
.lw-redesign .lw-hero-logo {
position: absolute;
z-index: 5;
top: 22%;
right: 2%;
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 12px 32px rgba(16, 29, 53, 0.18);
}
.lw-redesign .lw-hero-logo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
flex: 0 0 100%;
object-fit: contain;
border-radius: 50%;
margin: 0;
}
/* Mobile positioning */
@media (max-width: 600px) {
.lw-redesign .lw-hero-logo {
top: 18%;
right: 2%;
width: 76px;
height: 76px;
min-width: 76px;
min-height: 76px;
}
}

/* Crop whitespace from the allergy test image only */
img[src*="allergy-test-website-1-1024x620.jpg"] {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  img[src*="allergy-test-website-1-1024x620.jpg"] {
    height: 470px;
  }
}