/* BUNDLED SUBPAGE STYLESHEET
   The only stylesheet a subpage loads. Sections below are the former
   swap.css, tailwind.css, style.css and media_query.css, concatenated in
   their original link order so the cascade is unchanged, followed by the
   subpage-specific rules. The preloader block has been removed.
   Edit subpage rules at the bottom; the upper sections mirror the
   homepage stylesheets. */


/* ==================================================================
   1. swap.css - webfonts
   ================================================================== */
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v14/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v14/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   2. tailwind.css
   ================================================================== */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:.75rem;padding-left:.75rem}@media (min-width:540px){.container{max-width:540px}}@media (min-width:720px){.container{max-width:720px}}@media (min-width:960px){.container{max-width:960px}}@media (min-width:1140px){.container{max-width:1140px}}@media (min-width:1320px){.container{max-width:1320px}}.fixed{position:fixed}.relative{position:relative}.col-span-12{grid-column:span 12/span 12}.grid{display:grid}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-6{gap:1.5rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.border-0{border-width:0}.pb-0{padding-bottom:0}.pt-0{padding-top:0}@media (min-width:576px){.sm\:col-span-6{grid-column:span 6/span 6}}@media (min-width:768px){.md\:col-span-6{grid-column:span 6/span 6}}@media (min-width:992px){.lg\:col-span-10{grid-column:span 10/span 10}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}}@media (min-width:1200px){.xl\:col-span-6{grid-column:span 6/span 6}}

/* ==================================================================
   3. style.css - site styles (preloader removed)
   ================================================================== */
/*------------------------------------------------------------------
Project: Cleaning
Author: The_Krishna
Last change: 25/07/2025
Primary use:
------------------------------------------------------------------ */
/*-----------------------[Table of contents]------------------------
1.Default CSS
2.Preloader CSS
3.Whole Page scroll Aniamtion CSS
4.Button CSS
5.Main Header CSS
6.1.Hero Section Slider CSS
6.2.Hero Section Solid CSS
6.3.Hero Section Video CSS
6.4.Section Highlight Cards CSS
7.Section Two CSS
8.Section Three CSS
9.Section Four CSS
10.Section Five CSS
11.Section Six CSS
12.Section Seven CSS
13.Section Eight CSS
14.Section Nine CSS
15.Section Blog CSS
16.Section Contact Form CSS
17.Footer CSS
18.Bottom To Top Button CSS
19.About Page CSS
20.Team Details Page CSS
21.Pricing Plan Page CSS
22.Our Client Page CSS
23.FAQ Page CSS
24.404 Error Page CSS
25.Services Page CSS
26.Project Page CSS
27.Single Project Page CSS
28.Blog Page CSS
29.Blog Details CSS
30.Get Your Quote Page CSS
------------------------------------------------------------------ */
/*-----------------------[ 1.Default CSS ]------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-style: normal;
    scroll-behavior: smooth;
    font-family: "Outfit", sans-serif;
}
html {
    scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}
a {
    text-decoration: none;
}
dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0rem;
}
ul {
    padding-left: 0;
}
ul li {
    list-style: none;
}
button {
    border: none;
}
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-corner {
    display: none;
}
::-webkit-scrollbar-thumb {
    background: #F15A29;
    background-clip: content-box;
}
::-webkit-scrollbar-track {
    background-color: #16336B;
}
/*-----------------------[ 3.Whole Page scroll Aniamtion CSS ]------------------------*/
.fade_up,
.fade_down,
.zoom_in,
.zoom_out {
    opacity: 0;
    transition: all 2s;
}
.fade_up {
    transform: translateY(-100%);
}
.fade_down {
    transform: translateY(100%);
}
.zoom_in {
    transform: scale(0.5);
}
.zoom_out {
    transform: scale(1.5);
}
.fade_right {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 2s;
}
.fade_left {
    opacity: 0;
    transform: translateX(100%);
    transition: all 2s;
}
.flip_left {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
    transition: all 2s;
}
.flip_right {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    transition: all 2s;
}
.flip_up {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
    transition: all 2s;
}
.flip_down {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
    transition: all 2s;
}
.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/*-----------------------[ 4.Button CSS ]------------------------*/
.btn-quote {
    color: var(--5, #FFF);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    background: #F15A29;
    border-radius: 30px;
    padding: 18px 30px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    z-index: 1;
}
/* Tailwind's preflight sets img{display:block}, which dropped the arrow onto its
   own line. Keeping it inline also survives the buttons that get blockified as
   flex items, and leaves text-align:center working on the full-width variants. */
.btn-quote img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    position: relative;
    top: -1px;
}
.btn-quote::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    height: 0;
    width: 100%;
    background-color: #16336B;
    z-index: -1;
    transition: inherit;
    transition: all 0.3s ease;
}
.btn-quote:hover::after {
    height: 100%;
    top: auto;
    bottom: 0;
}
/*-----------------------[ 5.Main Header CSS ]------------------------*/
.header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0 auto;
    width: calc(70% - 60px);
    padding: 0;
    background-color: #FFF;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
    min-height: 100px;
}
.header .btn-quote {
    border: 2px solid #FFF;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 15px;
    flex-shrink: 0;
}
.logo img {
    height: 77px;
    width: auto;
    display: block;
}
.mobile-logo {
    display: none;
}
.mobile-logo img {
    height: 40px;
    width: auto;
    display: block;
}
.dsad {
    display: none;
}
.nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}
.for-mobile-menu {
    display: flex;
    align-items: stretch;
}
.menu {
    list-style: none;
    display: flex;
    align-items: stretch;
    gap: 32px;
}
.menu>li {
    display: flex;
    align-items: center;
}
.menu li {
    position: relative;
}
.menu li span {
    display: none;
    width: 8px;
    height: 8px;
    background: #F15A29;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: -35px;
}
.menu li a {
    color: #16336B;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.menu li a img {
    filter: brightness(0) saturate(100%) invert(7%) sepia(99%) saturate(2062.5%) hue-rotate(213deg) brightness(149%) contrast(88%);
}
.menu li:hover>a {
    color: #F15A29;
    filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(4003.78%) hue-rotate(349deg) brightness(105%) contrast(89%);
}
.menu>li>a.active {
    filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(4003.78%) hue-rotate(349deg) brightness(105%) contrast(89%);
}
.submenu li a.active {
    color: #F15A29 !important;
}
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    padding: 10px 0;
    border-radius: 0 0 15px 15px;
    border-top: 2px solid #F15A29;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    display: none;
    min-width: 210px;
}
.submenu li a {
    color: #16336B;
    font-size: 16px;
}
.dropdown:hover .submenu {
    display: block;
}
.submenu li {
    padding: 8px 20px;
    border-bottom: 1px solid #E5E7EB;
}
.submenu li:last-child {
    border-bottom: 0;
}
.submenu li a:hover {
    color: #F15A29;
}
.nav-actions {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.header .nav-actions .get-quote-btn {
    display: none;
}
.call {
    display: flex;
    align-items: center;
    background: #16336B;
    color: #FFF;
    padding: 6px 30px 6px 6px;
    border-radius: 40px;
    gap: 10px;
}
.call .headphone-main {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.need-help-main p {
    color: var(--5, #FFF);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.need-help-main a {
    color: var(--5, #FFF);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}
/* Header phone panel: orange block flush with the right end of the white bar */
.header .call {
    background: #F15A29;
    border-radius: 0;
    /* leading edge slopes: top-left is inset by the slant, bottom-left sits flush */
    --panel-slant: 22px;
    padding: 0 34px 0 calc(34px + var(--panel-slant) / 2);
    gap: 14px;
    align-self: stretch;
    flex-shrink: 0;
    -webkit-clip-path: polygon(var(--panel-slant) 0,
        calc(100% - 15px) 0,
        calc(100% - 10.36px) 0.73px,
        calc(100% - 6.18px) 2.86px,
        calc(100% - 2.86px) 6.18px,
        calc(100% - 0.73px) 10.36px,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 0.73px) calc(100% - 10.36px),
        calc(100% - 2.86px) calc(100% - 6.18px),
        calc(100% - 6.18px) calc(100% - 2.86px),
        calc(100% - 10.36px) calc(100% - 0.73px),
        calc(100% - 15px) 100%,
        0 100%);
    clip-path: polygon(var(--panel-slant) 0,
        calc(100% - 15px) 0,
        calc(100% - 10.36px) 0.73px,
        calc(100% - 6.18px) 2.86px,
        calc(100% - 2.86px) 6.18px,
        calc(100% - 0.73px) 10.36px,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 0.73px) calc(100% - 10.36px),
        calc(100% - 2.86px) calc(100% - 6.18px),
        calc(100% - 6.18px) calc(100% - 2.86px),
        calc(100% - 10.36px) calc(100% - 0.73px),
        calc(100% - 15px) 100%,
        0 100%);
}
.header .call .headphone-main {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
}
.header .call .headphone-main img {
    width: 26px;
    filter: brightness(0) invert(1);
}
.header .need-help-main p {
    display: none;
}
.header .need-help-main a {
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    white-space: nowrap;
}
/* Hamburger */
.hamburger {
    display: none;
}
.hamburger .close-icon {
    display: none;
}
.nav.open~.header-container .hamburger .menu-icon {
    display: none;
}
.nav.open~.header-container .hamburger .close-icon {
    display: inline;
}
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    display: none;
    opacity: 0;
    transition: 0.3s ease;
}
.overlay.active {
    display: block;
    opacity: 1;
}
/*-----------------------[ 6.1.Hero Section Slider CSS ]------------------------*/
.hero-slider-section {
    position: relative;
}
.hero-slider {
    width: 100%;
    height: min(90vh, 880px);
}
.main-swiper-slide {
    position: relative;
    overflow: hidden;
}
/* full-bleed media that drifts slowly - motion is what sells the immersion */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.03);
    will-change: transform;
}
.swiper-slide-active .hero-media {
    animation: hero-drift 26s ease-out forwards;
}
@keyframes hero-drift {
    from {
        transform: scale(1.03) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.16) translate3d(-1.4%, -1.2%, 0);
    }
}
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* directional wash: heavy where the type sits, clearing toward the light */
.main-swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg, rgba(6, 16, 38, 0.94) 0%, rgba(6, 16, 38, 0.82) 30%, rgba(6, 16, 38, 0.44) 62%, rgba(6, 16, 38, 0.16) 100%),
        linear-gradient(180deg, rgba(6, 16, 38, 0.55) 0%, rgba(6, 16, 38, 0) 26%, rgba(6, 16, 38, 0) 55%, rgba(6, 16, 38, 0.80) 100%);
}
/* vignette pulls the eye off the frame edges and onto the copy */
.main-swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(132% 108% at 26% 44%, rgba(6, 16, 38, 0) 32%, rgba(4, 11, 28, 0.66) 100%);
}
/* still sits under the video, so it covers load time and phones where video is off */
#hero-slider-img1 .hero-media {
    background-image: url('../images/seq-showcase.jpg');
    background-position: 70% center;
}
#hero-slider-img2 .hero-media {
    background-image: url('../images/seq-banner-crew.jpg');
    background-position: 58% 32%;
}
#hero-slider-img3 .hero-media {
    background-image: url('../images/seq-section-bg.jpg');
    background-position: 60% center;
}
.clearfix-space {
    margin-top: 100px;
}
.slide-content {
    position: absolute;
    z-index: 4;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.needs-text {
    color: var(--5, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    padding-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.lets-us-do {
    color: var(--5, #FFF);
    font-size: 78px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.6px;
    max-width: 15ch;
    text-shadow: 0 18px 50px rgba(4, 11, 28, 0.55);
}
.residents {
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    margin-top: 26px;
    padding: 22px 26px;
    margin-bottom: 40px;
    max-width: 540px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid #F15A29;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
}
.home-img-clening {
    display: none;
}
.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cutomer-img-main-text {
    display: flex;
    align-items: center;
    gap: 120px;
    border-radius: 40px;
    background: linear-gradient(90deg, rgba(241, 90, 41, 0.30) 0%, rgba(241, 90, 41, 0.15) 100%);
    backdrop-filter: blur(6px);
    padding: 8px 30px 8px 8px;
    position: absolute;
    bottom: -100px;
    left: -100px;
	display:none;
}
.cutomer-img-main {
    position: relative;
}
.cutomer-img-main img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.cutomers-text-main h2 {
    color: var(--5, #FFF);
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
}
.cutomers-text-main p::before {
    content: url(../images/white-star.svg);
}
.cutomers-text-main p {
    color: var(--5, #FFF);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cutome2 {
    position: absolute;
    left: 50px;
    top: 0;
}
.cutome3 {
    position: absolute;
    left: 100px;
    top: 0;
}
.animate-slide {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.swiper-slide-active .animate-slide {
    opacity: 1;
    transform: translateY(0);
}
/*-----------------------[ 6.2.Hero Section Solid CSS ]------------------------*/
.main-swiper-solid-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #16336B;
    backdrop-filter: blur(4px);
    z-index: 1;
}
.bubble_area {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}
.bubble_area div[class^=bubbles-] {
    height: 1px;
    width: 1px;
    position: absolute;
    background: url(../images/bubble_1.png) no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}
.bubbles-1 {
    bottom: -5px;
    left: 68%;
    -webkit-animation: animate 10s infinite ease-in -6.57s;
    animation: animate 10s infinite ease-in -6.57s;
}
.bubbles-2 {
    bottom: -71px;
    left: 97%;
    -webkit-animation: animate 10s infinite ease-in -5.07s;
    animation: animate 10s infinite ease-in -5.07s;
}
.bubbles-3 {
    bottom: -71px;
    left: 43%;
    -webkit-animation: animate 10s infinite ease-in -6.73s;
    animation: animate 10s infinite ease-in -6.73s;
}
.bubbles-4 {
    bottom: -30px;
    left: 82%;
    -webkit-animation: animate 10s infinite ease-in -4.04s;
    animation: animate 10s infinite ease-in -4.04s;
}
.bubbles-5 {
    bottom: -73.4px;
    left: 29%;
    -webkit-animation: animate 10s infinite ease-in -3.11s;
    animation: animate 10s infinite ease-in -3.11s;
}
.bubbles-6 {
    bottom: -71px;
    left: 41%;
    -webkit-animation: animate 10s infinite ease-in -5.95s;
    animation: animate 10s infinite ease-in -5.95s;
}
.bubbles-7 {
    bottom: -79.4px;
    left: 14%;
    -webkit-animation: animate 10s infinite ease-in -3.68s;
    animation: animate 10s infinite ease-in -3.68s;
}
.bubbles-8 {
    bottom: -115.4px;
    left: 90%;
    -webkit-animation: animate 10s infinite ease-in -3.89s;
    animation: animate 10s infinite ease-in -3.89s;
}
.bubbles-9 {
    bottom: -44.6px;
    left: 33%;
    -webkit-animation: animate 10s infinite ease-in -1.09s;
    animation: animate 10s infinite ease-in -1.09s;
}
.bubbles-10 {
    bottom: -30px;
    left: 59%;
    -webkit-animation: animate 7s infinite ease-in -.96s;
    animation: animate 7s infinite ease-in -.96s;
}
@keyframes animate {
    0% {
        transform: translate3d(-80%, 0, 0) rotate(70deg);
        width: 35px;
        height: 35px;
    }
    100% {
        transform: translate3d(-80%, -800px, 0) rotate(360deg);
        width: 75px;
        height: 75px;
    }
}
/*-----------------------[ 6.3.Hero Section Video CSS ]------------------------*/
.main-swiper-video-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.60) 100%);
    z-index: 1;
}
.video-swiper-row {
    justify-content: center;
    text-align: center;
}
.video-swiper-row .residents {
    padding-left: 0;
    border: none;
}
.video-swiper-row .cutomer-img-main-text {
    position: unset;
    width: fit-content;
    margin: 30px auto 0 auto;
}
/*-----------------------[ 6.4.Section Highlight Cards CSS ]------------------------*/
.highlight-section {
    position: relative;
    z-index: 5;
    margin-top: -60px;
}
/* staggered entrance, riding the site's existing .fade_up / .show observer */
.highlight-row>*:nth-child(2) {
    transition-delay: 0.12s;
}
.highlight-row>*:nth-child(3) {
    transition-delay: 0.24s;
}
.highlight-card {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    padding: 44px 34px 40px;
    background: linear-gradient(180deg, #FFF 0%, #FBFCFE 100%);
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 2px rgba(22, 51, 107, 0.06), 0 24px 48px -18px rgba(22, 51, 107, 0.35);
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-card:hover,
.highlight-card.active {
    transform: translateY(-10px);
    box-shadow: 0 1px 2px rgba(22, 51, 107, 0.08), 0 40px 70px -20px rgba(22, 51, 107, 0.55);
}
/* navy curtain rises from the bottom edge — same idiom as .btn-quote::after */
.highlight-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    z-index: -1;
    background: linear-gradient(180deg, #1D4184 0%, #16336B 100%);
    transition: height 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-card:hover::before,
.highlight-card.active::before {
    height: 100%;
}
/* orange rule along the bottom edge, as in the reference */
.highlight-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #F15A29;
    transition: height 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-card:hover::after,
.highlight-card.active::after {
    height: 6px;
}
.highlight-index {
    position: absolute;
    top: 14px;
    right: 26px;
    color: rgba(22, 51, 107, 0.07);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transition: color 0.55s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-card:hover .highlight-index,
.highlight-card.active .highlight-index {
    color: rgba(255, 255, 255, 0.14);
    transform: translateY(-4px);
}
.highlight-svg-main {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: rgba(241, 90, 41, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    transition: background 0.55s ease, box-shadow 0.55s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-svg-main img {
    width: 40px;
    height: 40px;
    /* source art is white line work - tint it to the accent while the tile is pale */
    filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(4003.78%) hue-rotate(349deg) brightness(105%) contrast(89%);
    transition: filter 0.55s ease;
}
.highlight-card:hover .highlight-svg-main,
.highlight-card.active .highlight-svg-main {
    background: #F15A29;
    box-shadow: 0 14px 30px -8px rgba(241, 90, 41, 0.65);
    transform: translateY(-4px) scale(1.04);
}
.highlight-card:hover .highlight-svg-main img,
.highlight-card.active .highlight-svg-main img {
    filter: none;
}
.highlight-title {
    color: #16336B;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    padding-bottom: 12px;
    transition: color 0.45s ease;
}
.highlight-text {
    color: #555555;
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    padding-bottom: 28px;
    transition: color 0.45s ease;
}
.highlight-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #16336B;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    padding: 12px 24px;
    border: 2px solid #E5E7EB;
    border-radius: 30px;
    transition: color 0.45s ease, background 0.45s ease, border-color 0.45s ease;
}
.highlight-link img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(7%) sepia(99%) saturate(2062.5%) hue-rotate(213deg) brightness(149%) contrast(88%);
    transition: filter 0.45s ease, transform 0.45s ease;
}
.highlight-card:hover .highlight-title,
.highlight-card.active .highlight-title {
    color: #FFF;
}
.highlight-card:hover .highlight-text,
.highlight-card.active .highlight-text {
    color: rgba(255, 255, 255, 0.78);
}
.highlight-card:hover .highlight-link,
.highlight-card.active .highlight-link {
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.35);
}
.highlight-card:hover .highlight-link img,
.highlight-card.active .highlight-link img {
    filter: none;
}
.highlight-link:hover {
    background: #F15A29;
    border-color: #F15A29;
    color: #FFF;
}
.highlight-link:hover img {
    filter: none;
    transform: translate(2px, -2px);
}
/*-----------------------[ 7.Section Two CSS ]------------------------*/
.section-two {
    padding: 100px 0;
}
.cap-text {
    color: var(--16, #F15A29);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.sec-text {
    color: var(--3, #16336B);
    font-size: 48px;
    font-weight: 700;
    line-height: 64px;
    padding-bottom: 30px;
}
.sec-sub-text {
    color: #555555;
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
}
.about-grid-box-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid #E5E7EB;
}
.about-box-main {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.about-svg-main {
    width: 100%;
    max-width: 64px;
    height: 64px;
    background: #F15A29;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.about-box-main:hover .about-svg-main {
    background: #16336B;
}
.about-svg-main img {
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}
.about-box-main:hover .about-svg-main img {
    transform: rotateY(180deg);
}
.expeStaff {
    color: var(--3, #16336B);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 10px;
}
.fessional {
    color: #555555;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
}
.about-sec-main {
    display: flex;
    align-items: center;
    margin-top: 60px;
    gap: 20px;
}
.about-sec-main .call {
    background: transparent;
    border: 2px solid #F15A29;
}
.about-sec-main .call .headphone-main {
    background: #F15A29;
}
.about-sec-main .call .headphone-main img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(100%) saturate(0%) hue-rotate(85deg) brightness(112%) contrast(101%);
}
.about-sec-main .call .need-help-main p,
.about-sec-main .call .need-help-main a {
    color: #16336B;
}
.about-sec-main .call .need-help-main a:hover {
    color: #F15A29;
}
.sub-img-main {
    position: relative;
    margin-top: 60px;
    /* room for the inset image to sit on the main one's bottom edge */
    padding-bottom: 52px;
}
.about-img1 {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(22, 51, 107, 0.45);
}
/* inset shot aligned to the main image's right edge, no float animation */
.about-img2 {
    position: absolute;
    right: 28px;
    bottom: 0;
    width: 230px;
    height: 176px;
    object-fit: cover;
    border-radius: 20px;
    border: 8px solid #FFF;
    box-shadow: 0 24px 48px -20px rgba(22, 51, 107, 0.5);
}
@keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-8px);
    }
}
/*-----------------------[ 8.Section Three CSS ]------------------------*/
.section-three {
    background-image: linear-gradient(180deg, rgba(22, 51, 107, 0.95) 0%, rgba(19, 44, 94, 0.97) 100%), url('../images/seq-hero-3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0;
    overflow: hidden;
}
/* header row: copy on the left, slider arrows on the right */
.services-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}
.section-three .cap-text {
    color: #F15A29;
}
.section-three .sec-text {
    color: #FFF;
}
.section-three .ornare {
    color: rgba(255, 255, 255, 0.72);
    max-width: 640px;
    padding-top: 16px;
}
.services-nav {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.services-next,
.services-prev {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 0;
    background: #1D4184;
    cursor: pointer;
    transition: background 0.35s ease-in-out;
}
.services-next {
    background: #F15A29;
}
.services-next::after,
.services-prev::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
}
.services-prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.services-next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}
.services-prev:hover {
    background: #F15A29;
}
.services-next:hover {
    background: #1D4184;
}
.services-next.swiper-button-disabled,
.services-prev.swiper-button-disabled {
    opacity: 0.45;
    cursor: default;
}
/* filter rail + slider */
.services-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 50px;
}
.services-filter {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.services-filter-btn {
    padding: 14px 12px;
    background: #1D4184;
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    transition: background 0.35s ease-in-out, color 0.35s ease-in-out;
}
.services-filter-btn:hover {
    background: #2B54A0;
}
.services-filter-btn.active {
    background: #F15A29;
}
.services-slider-wrap {
    flex: 1;
    min-width: 0;
}
.services-slider {
    margin: 0;
}
.services-empty {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 26px;
    padding: 40px 0;
}
/* card: photo with a white caption panel riding its lower edge */
.service-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    height: auto;
    display: block;
}
.service-card-img {
    overflow: hidden;
}
.service-card-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.7s ease;
}
.service-card:hover .service-card-img img {
    transform: scale(1.08);
}
.services-caption {
    position: relative;
    z-index: 2;
    margin: -140px 26px 0 26px;
    background: #FFF;
    padding: 24px 26px 22px;
    box-shadow: 0 18px 40px -16px rgba(11, 26, 56, 0.55);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s ease;
}
.service-card:hover .services-caption {
    transform: translateY(-8px);
    box-shadow: 0 28px 55px -18px rgba(11, 26, 56, 0.7);
}
.services-name {
    color: var(--3, #16336B);
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 8px;
}
.services-card-sub-text {
    color: #555555;
    text-align: left;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* margin, not padding: padding sits inside the overflow:hidden box, so a
       slice of the clamped third line shows through it */
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-learn-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    color: var(--16, #F15A29);
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    overflow: visible;
    z-index: 1;
    transition: gap 0.3s ease-in-out;
}
.card-learn-more img {
    width: 14px;
    height: 14px;
    filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(4003.78%) hue-rotate(349deg) brightness(105%) contrast(89%);
}
.card-learn-more:hover {
    gap: 12px;
}
/*-----------------------[ 9.Section Four CSS ]------------------------*/
.section-four {
    padding: 100px 0;
}
.check-box-main-sub {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
}
.check-box-main-sub h2 {
    color: var(--3, #16336B);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    padding-bottom: 5px;
}
.check-box-main-sub p {
    color: #555555;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
}
.sec-video2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.video2 {
    width: 360px;
    height: 100%;
    object-fit: cover;
    border-radius: 180px;
}
.sadas {
    width: 360px;
    height: 100%;
    border: 2px solid #F15A29;
    border-radius: 180px;
    position: absolute;
    left: 130px;
    top: 10px;
    z-index: -1;
}
.why-choose-img3 {
    position: absolute;
    right: 0;
    bottom: 12px;
    border-radius: 10px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.20);
    animation: mover 1s infinite alternate;
    width: 70%;
}
/*-----------------------[ 10.Section Five CSS ]------------------------*/
.section-five {
    /* real SEQ crew shot, navy-washed to match the services and FAQ bands */
    background-image: linear-gradient(180deg, rgba(6, 16, 38, 0.84) 0%, rgba(9, 22, 50, 0.88) 100%), url('../images/seq-cta-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0;
}
.cost-cal {
    text-align: center;
}
.fami-cal {
    text-align: center;
    max-width: 630px;
    margin: 0 auto;
    color: #FFFFFF;
}
.calculator-box-main {
    background: #FFF;
    padding: 60px;
    border-radius: 20px;
    position: relative;
    margin-top: 100px;
    margin-bottom: -200px;
}
.calculator-cta {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.calculator-cta-text {
    margin: 0 auto 30px;
    max-width: 560px;
}
.calcult-from-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.input-label-text {
    color: var(--3, #16336B);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.calcult-from-grid input,
.your-message-input input {
    border-radius: 10px;
    border: 2px solid var(--12, #E5E7EB);
    background: var(--5, #FFF);
    padding: 12px 15px;
    width: 100%;
    color: #16336B;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.calcult-from-grid input:focus,
.your-message-input input:focus {
    outline: 2px solid #F15A29;
}
.input-main {
    border-radius: 10px;
    border: 2px solid var(--12, #E5E7EB);
    background: var(--5, #FFF);
    padding: 12px 15px;
    width: 100%;
    cursor: pointer;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.formDropDown {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropdown-menu-wrap {
    position: relative;
}
.formDropDown-ul-list {
    display: none;
    margin-top: -1px;
    background: #FFFFFF;
    padding-left: 0;
    position: absolute;
    top: 15px;
    width: 100%;
    z-index: 5;
    border: 1px solid #F15A29;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.formDropDown-ul-list a {
    color: #16336B;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.formDropDown-ul-list li {
    padding: 10px 12px;
}
.formDropDown-ul-list li:hover {
    background: #F15A29;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
.formDropDown-ul-list li:hover a {
    color: #FFF;
}
.arrow-icon-form {
    transition: transform 0.3s ease-in-out;
}
.arrow-icon-form.up {
    transform: rotate(180deg);
}
.get-cost-estimate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}
.send-info {
    max-width: 300px;
}
/*-----------------------[ 11.Section Six CSS ]------------------------*/
.section-six {
    background: var(--12, #E5E7EB);
    padding: 200px 0 100px;
}
.how-to-work-bg {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: color-burn;
}
.mazing {
    max-width: 630px;
    color: #16336B;
    margin: 0 auto;
    text-align: center;
}
.scetur {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}
.how-work-step-box {
    display: grid;
    grid-template-columns: 300px auto 300px auto 300px;
    gap: 30px;
    margin-top: 60px;
    position: relative;
}
.how-work-step-box .how-work-step-box-sub {
    text-align: center;
}
.how-to-work-circle {
    text-align: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.how-to-work-circle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    height: 0;
    width: 100%;
    background-color: #F15A29;
    z-index: -1;
    transition: inherit;
    transition: all 0.3s ease;
}
.how-work-step-box-sub:hover .how-to-work-circle::after {
    height: 100%;
    top: auto;
    bottom: 0;
}
.how-to-work-circle img {
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}
.how-work-step-box-sub:hover .how-to-work-circle img {
    transform: rotateY(180deg);
    filter: brightness(0) saturate(100%) invert(82%) sepia(100%) saturate(0%) hue-rotate(85deg) brightness(112%) contrast(101%);
}
.how-work-step-box .how-work-step-box-sub h3 {
    color: var(--3, #16336B);
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    padding-bottom: 10px;
}
/*-----------------------[ 12.Section Seven CSS ]------------------------*/
.section-seven {
    padding: 100px 0;
}
.gallery-grid {
    margin-top: 20px;
}
.gallery-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.gallery-thumb img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.gallery-thumb:hover img {
    transform: scale(1.08);
}
.gallery-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F15A29;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.35s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.gallery-zoom-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
.gallery-thumb:hover .gallery-zoom-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.gallery-item-hidden {
    display: none;
}
.gallery-item-hidden.gallery-item-show {
    display: block;
}
.gallery-view-more-wrap {
    text-align: center;
    margin-top: 50px;
}
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(22, 51, 107, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}
.gallery-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.gallery-lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFF;
    color: #16336B;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.gallery-lightbox-close:hover {
    background: #F15A29;
    color: #FFF;
}
/*-----------------------[ 14.Section Nine CSS ]------------------------*/
.testimonial-section-main {
    display: flex;
    align-items: stretch;
}
.testimonial-panel-img {
    width: 50%;
    flex-shrink: 0;
    align-self: stretch;
    object-fit: cover;
    display: block;
}
.testimonials-col-main {
    background: var(--12, #E5E7EB);
    padding: 100px;
    width: 100%;
    overflow: hidden;
}
.tryse {
    max-width: 630px;
}
.testimonialSlider {
    /* was a fixed 640px inside a ~520px column, which clipped the quote */
    max-width: 100%;
    margin-left: 0;
    margin-top: 48px;
    border-radius: 24px;
    /* strip below the card for the arrows, which live inside this
       overflow:hidden container */
    padding-bottom: 84px;
}
.testimonialSlider-swiper-slide {
    background: var(--5, #FFF);
    padding: 44px 46px 38px;
    border-radius: 24px;
    border: 1px solid #DCDFE5;
    box-shadow: 0 26px 60px -28px rgba(22, 51, 107, 0.45);
    height: auto;
}
.testimonialSlider-swiper-slide > img {
    width: 46px;
    height: auto;
}
.cellent {
    color: var(--4, #16336B);
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    padding-top: 14px;
    padding-bottom: 30px;
}
.client-details-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 26px;
    border-top: 1px solid #E5E7EB;
}
.client-initial {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #1D4184 0%, #16336B 100%);
    color: #FFF;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.client-details h3 {
    color: var(--3, #16336B);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 5px;
}
.client-details p {
    color: var(--8, #A8A9AD);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.testimonial-client-img1 {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.testimonial-next,
.testimonial-prev {
    width: 48px;
    height: 48px;
    border: 2px solid #E5E7EB;
    border-radius: 50%;
    background: #FFF;
}
.testimonial-next.swiper-button-next,
.testimonial-prev.swiper-button-prev {
    position: absolute;
    top: auto;
    bottom: 10px;
    margin-top: 0;
    right: auto;
    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.testimonial-prev.swiper-button-prev {
    left: 0;
}
.testimonial-next.swiper-button-next {
    left: 64px;
}
.testimonial-next.swiper-button-next:hover,
.testimonial-prev.swiper-button-prev:hover {
    background: #F15A29;
    border-color: #F15A29;
    color: #FFF;
}
.testimonial-next.swiper-button-next,
.testimonial-prev.swiper-button-prev {
    color: #16336B;
}
.testimonial-next.swiper-button-next:after,
.testimonial-prev.swiper-button-prev:after {
    font-size: 20px;
    font-weight: 600;
}
/*-----------------------[ 15b.Section FAQ CSS ]------------------------*/
.faq-section {
    position: relative;
    padding: 100px 0;
    background-image: linear-gradient(180deg, rgba(22, 51, 107, 0.90) 0%, rgba(22, 51, 107, 0.90) 100%), url('../images/seq-gallery-4.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.faq-section .cap-text,
.faq-section .sec-text,
.faq-section .sec-sub-text {
    text-align: center;
    color: #FFF;
}
.faq-section .sec-sub-text {
    max-width: 560px;
    margin: 0 auto;
}
.faq-accordion {
    max-width: 860px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.faq-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.faq-item.active,
.faq-item:hover {
    border-color: #F15A29;
    background: rgba(255, 255, 255, 0.1);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 30px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}
.faq-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F15A29;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.faq-answer p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    padding: 0 30px 26px;
}
.faq-item.active .faq-answer {
    max-height: 300px;
}
/*-----------------------[ 15.Section Blog CSS ]------------------------*/
.blog-section {
    padding: 100px 0;
}
.home-blog-row {
    margin-top: 60px;
}
.blog-img-main {
    position: relative;
    overflow: hidden;
}
.blog-box-main {
    border-radius: 20px;
    border: 2px solid var(--12, #E5E7EB);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.blog-box-main:hover {
    border-color: #F15A29;
    box-shadow: 0 15px 30px rgba(22, 51, 107, 0.1);
}
.blog-box-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
    transition: all 0.6s ease;
}
.blog-box-main:hover::after {
    left: 100%;
}
.blog-img {
    width: 100%;
    border-radius: 20px 20px 20px 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-box-main:hover .blog-img {
    transform: scale(1.05);
    border-radius: 20px 20px 0 0;
}
.blog-date {
    color: var(--4, #16336B);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 10px 20px;
    background: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 30px;
    border-radius: 20px 20px 0 0;
    transition: all 0.4s ease;
}
.blog-box-main:hover .blog-date {
    color: #F15A29;
}
.blog-date::before,
.blog-date::after {
    content: "";
    position: absolute;
    background-color: transparent;
    height: 60px;
    width: 30px;
    box-shadow: 0 20px 0 0 #fff;
    transition: all 0.4s ease;
}
.blog-date::before {
    bottom: 0px;
    left: -30px;
    height: 60px;
    width: 30px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}
.blog-date::after {
    content: "";
    bottom: 0px;
    right: -30px;
    height: 60px;
    width: 30px;
    border-bottom-left-radius: 20px;
    transition: all 0.4s ease;
}
.blog-containe-main {
    padding: 30px;
}
.blog-containe-main h2 {
    color: var(--3, #16336B);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    transition: color 0.3s ease;
}
.blog-box-main:hover .blog-containe-main h2 {
    color: #F15A29;
}
.blog-containe-main p {
    overflow: hidden;
    color: #555555;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    padding-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.expand-img-main {
    overflow: hidden;
}
.expand-img {
    width: 100%;
    /* frame drives the band height so a different source cannot reshape it,
       and never collapses to a thin strip on narrow screens */
    height: clamp(240px, 34vw, 520px);
    object-fit: cover;
    display: block;
}
/*-----------------------[ 16.Section Contact Form CSS ]------------------------*/
.contact-form-section {
    padding: 100px 0 220px;
    background: #E5E7EB;
}
.adres-main-home {
    display: flex;
    align-items: center;
    gap: 60px;
}
.call-support-text {
    color: var(--16, #F15A29);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 8px;
    margin-top: 30px;
}
.tel-num {
    color: var(--3, #16336B);
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    transition: all 0.3s ease-in-out;
}
.tel-num:hover {
    color: #F15A29;
}
/* Contact details as cards. The phone card is the primary CTA so it carries the
   navy fill; the rest stay white on the grey section ground. */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}
.contact-info-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
    background: #FFF;
    border: 1px solid #DCDFE5;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(22, 51, 107, 0.05);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s ease, border-color 0.45s ease;
}
/* accent edge wipes down on hover */
.contact-info-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #F15A29;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
a.contact-info-card:hover {
    transform: translateY(-6px);
    border-color: #FFF;
    box-shadow: 0 22px 44px -18px rgba(22, 51, 107, 0.45);
}
a.contact-info-card:hover::before {
    transform: scaleY(1);
}
.contact-info-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(241, 90, 41, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contact-info-icon img {
    width: 24px;
    height: 24px;
    transition: filter 0.45s ease;
}
a.contact-info-card:hover .contact-info-icon {
    background: #F15A29;
    box-shadow: 0 12px 26px -8px rgba(241, 90, 41, 0.6);
    transform: translateY(-2px);
}
a.contact-info-card:hover .contact-info-icon img {
    filter: brightness(0) invert(1);
}
.contact-info-label {
    color: #F15A29;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding-bottom: 6px;
}
.contact-info-value {
    color: #16336B;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    overflow-wrap: anywhere;
    transition: color 0.45s ease;
}
.contact-info-value-email {
    font-size: 16px;
    line-height: 26px;
}
/* primary (phone) card */
.contact-info-card-primary {
    background: linear-gradient(180deg, #1D4184 0%, #16336B 100%);
    border-color: transparent;
}
.contact-info-card-primary .contact-info-icon {
    background: #F15A29;
}
.contact-info-card-primary .contact-info-icon img {
    filter: brightness(0) invert(1);
}
.contact-info-card-primary .contact-info-label {
    color: #FFD9C7;
}
.contact-info-card-primary .contact-info-value {
    color: #FFF;
    font-size: 26px;
    line-height: 34px;
}
a.contact-info-card-primary:hover .contact-info-icon {
    background: #FFF;
}
a.contact-info-card-primary:hover .contact-info-icon img {
    filter: none;
}
/* hours card is not a link, so it stays flat */
.contact-info-card-static {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}
.contac-form-main {
    border-radius: 20px;
    background: var(--5, #FFF);
    padding: 30px;
}
.addees {
    font-size: 24px;
    line-height: 34px;
}
.contac-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.your-message-input {
    margin-top: 30px;
}
.send-main-btn {
    justify-content: left;
    margin-top: 30px;
}
.contact-map-wrap {
    margin-top: 60px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.contact-map {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}
/*-----------------------[ 17.Footer CSS ]------------------------*/
footer {
    background-color: #16336B;
    color: #FFF;
}
/* The band sits on the navy footer, so a flat navy fill made it disappear.
   It now carries its own depth: an orange glow off the top-right, a diagonal
   hairline texture, a hairline border and a shadow that lifts it clear. */
.subscribe-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(241, 90, 41, 0.38) 0%, rgba(241, 90, 41, 0) 58%),
        linear-gradient(118deg, #21498F 0%, #16336B 52%, #0E2350 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 54px 60px;
    margin-top: -125px;
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 44px 90px -46px rgba(0, 0, 0, 0.9);
}
/* fine diagonal rules for texture, kept very low contrast */
.subscribe-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(122deg,
        rgba(255, 255, 255, 0.055) 0 1px,
        rgba(255, 255, 255, 0) 1px 24px);
}
/* soft orange corner bloom, bottom-left, to balance the top-right glow */
.subscribe-section::after {
    content: '';
    position: absolute;
    left: -90px;
    bottom: -130px;
    width: 320px;
    height: 320px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 90, 41, 0.28) 0%, rgba(241, 90, 41, 0) 70%);
}
/* a slow highlight travelling across the band */
.subscribe-shine {
    position: absolute;
    top: -60%;
    left: -40%;
    width: 34%;
    height: 220%;
    z-index: -1;
    pointer-events: none;
    transform: rotate(16deg);
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: subscribe-shine 9s ease-in-out infinite;
}
@keyframes subscribe-shine {
    0%, 100% { left: -40%; }
    55% { left: 118%; }
}
.subscribe-copy {
    position: relative;
    z-index: 1;
}
.subscribe-eyebrow {
    color: #FF9166;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    padding-bottom: 12px;
}
.subscribe-note {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 26px;
    max-width: 520px;
    padding-top: 14px;
}
.updat {
    font-weight: 500;
    color: #FFFFFF;
    padding-bottom: 0;
    max-width: 570px;
}
.cta-btn-group {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .subscribe-shine {
        animation: none;
    }
}
/* CTA band button pair (replaced the newsletter signup) */
.cta-btn-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
/* on the navy band both buttons wipe to white rather than to navy */
.subscribe-section .btn-quote::after {
    background-color: #FFF;
}
.subscribe-section .btn-quote:hover {
    color: #16336B;
}
.subscribe-section .btn-quote:hover img {
    filter: brightness(0) saturate(100%) invert(7%) sepia(99%) saturate(2062.5%) hue-rotate(213deg) brightness(149%) contrast(88%);
}
/* transparent border on both so the outlined one doesn't sit 4px taller */
.cta-btn-group .btn-quote {
    border: 2px solid transparent;
}
/* equal icon box on both, otherwise the taller icon grows its button's line box */
.cta-btn-group .btn-quote img {
    width: 20px;
    height: 20px;
}
.cta-btn-group .btn-quote-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
}
.cta-btn-group .btn-quote-ghost:hover {
    border-color: #FFF;
}
/* callWhite.svg is 48px natively, so pin it to the arrow icon's size */
.btn-quote-ghost img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}
.subscribe-input-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    padding: 10px 10px 10px 40px;
    width: 100%;
    max-width: 570px;
    border-radius: 42px;
}
.subscribe-input-main input {
    width: 55%;
    outline: none;
    border: none;
    color: #16336B;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}
.working-hours {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    padding-bottom: 20px;
}
.timing-hrw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
.timing-hrw p {
    color: #bfbfbf;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
}
.footer-row-quick {
    align-items: start;
}
.footer-links-col {
    display: flex;
    flex-direction: column;
}
.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-links-list li a {
    color: #bfbfbf;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
}
/* chevron before each menu item; flex-start + margin keeps it on the first line
   when a long label such as "Termite & Storm Damage Repairs" wraps */
.footer-links-list li a::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 9px;
    background: url('../images/seq-icon-chevron.svg') no-repeat center / contain;
    transition: transform 0.3s ease-in-out;
}
.footer-links-list li a:hover {
    color: #F15A29;
}
.footer-links-list li a:hover::before {
    transform: translateX(3px);
}
.footer-about-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-about-text {
    color: #bfbfbf;
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 14px;
}
.footer-contact-col {
    display: flex;
    flex-direction: column;
}
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* min-width:0 lets a flex item shrink below its content; without it the
       email address is wider than the column at ~1024-1330px and pushes the
       whole page into horizontal scroll */
    min-width: 0;
}
.footer-contact-list li a,
.footer-contact-list li {
    overflow-wrap: anywhere;
}
.footer-contact-list li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.footer-contact-list li:nth-child(1)::before {
    background-image: url('../images/callWhite.svg');
}
.footer-contact-list li:nth-child(2)::before {
    background-image: url('../images/seq-icon-mail.svg');
}
.footer-contact-list li:nth-child(3)::before {
    background-image: url('../images/seq-icon-pin.svg');
}
.footer-contact-list li,
.footer-contact-list li a {
    color: #bfbfbf;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    transition: color 0.3s ease-in-out;
}
.footer-contact-list li a:hover {
    color: #F15A29;
}
.footer-hours-heading {
    padding-top: 6px;
}
.media-logo-call-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border-radius: 30px;
    background: var(--3, #16336B);
    margin-top: 60px;
    margin-bottom: 40px;
}
.media-logo-call-footer > a img {
    height: 100px;
    width: auto;
    display: block;
}
.media-logo-call-footer .call-detl {
    border-radius: 50px;
    background: var(--14, #F15A29);
    padding: 10px 50px 10px 10px;
}
.media-logo-call-footer .call-detl .img-main-call {
    background: var(--13, #16336B);
}
.media-logo-call-footer .call-detl a {
    color: #FFFFFF;
}
.footer-med-icons-main {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-med-icons {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.footer-med-icons:hover {
    background: #F15A29;
}
.footer-med-icons img {
    width: 32px;
}
.copyrights-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 40px;
}
.copyrights-center {
    justify-content: center;
}
.copyrights-main p,
.copyrights-main a {
    color: #bfbfbf;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
}
.copyrights-main a{
	color: #F15A29;
}
.copyrights-main a:hover {
    color: #F15A29;
}
.call-detl {
    display: flex;
    align-items: center;
    gap: 20px;
}
.call-detl .img-main-call {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #F15A29;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call-detl p {
    color: var(--5, #FFF);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    padding-bottom: 10px;
}
.call-detl a {
    color: #FFF;
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
    transition: all 0.3s ease-in-out;
}
/*-----------------------[ 17b.Floating Icons CSS ]------------------------*/
.floating-icons-main {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.floating-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out;
}
.floating-icon img {
    width: 24px;
    height: 24px;
}
.floating-icon:hover {
    transform: translateY(-4px) scale(1.05);
}
.floating-icon-call {
    background: #16336B;
}
/* white glyph, matching the WhatsApp and mail buttons */
.floating-icon-call img {
    filter: brightness(0) invert(1);
}
.floating-icon-whatsapp {
    background: #25D366;
}
.floating-icon-mail {
    background: #F15A29;
}
/* message-circle.svg is stroked #F15A29, the same orange as this button, so the
   glyph was invisible - force it white like the WhatsApp icon */
.floating-icon-mail img {
    filter: brightness(0) invert(1);
}
/*-----------------------[ 18.Bottom To Top Button CSS ]------------------------*/
button.bottom-top-button {
    position: fixed;
    right: 30px;
    bottom: 20px;
    z-index: 999;
    width: 50px;
    height: 50px;
    color: #FFF;
    font-size: 30px;
    background: #F15A29;
}
/*-----------------------[ 19.About Page CSS ]------------------------*/
.heroSection {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 27.86%, rgba(0, 0, 0, 0.00) 100%), url(../images/header-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 220px 0 100px;
}
.img-header-text {
    color: #FFF;
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;
}
.breadcrumb-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 20px;
}
.breadcrumb-group a {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    text-transform: uppercase;
}
.about-section-three {
    padding: 100px 0;
}
/*-----------------------[ 20.Team Details Page CSS ]------------------------*/
.team-single-box {
    background: #FFF;
    border-radius: 25px;
    border: 2px solid #E5E7EB;
    position: sticky;
    top: 150px;
    margin-bottom: 30px;
}
.rich {
    color: var(--3, #16336B);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    padding-bottom: 8px;
}
.clane {
    color: var(--4, #16336B);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.single-team-main {
    border-radius: 20px;
    background: #E5E7EB;
}
.single-team {
    width: 100%;
}
.team-contact-1 {
    padding: 30px;
}
.team-meta {
    margin-top: 30px;
}
.team-meta li {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.team-meta li img {
    width: 25px;
}
.team-meta li span {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    color: #F15A29;
}
.team-meta li a,
.team-meta li p {
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    color: #16336B;
    transition: all .35s ease-in-out;
}
.team-meta li a:hover {
    color: #F15A29;
}
.single-team-social {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
.single-team-social a {
    background: #FFF;
    border: 2px solid #FFF;
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.08);
    border-radius: 100%;
    width: 100%;
    max-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s ease-in-out;
}
.single-team-social a img {
    width: 25px;
    filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(4003.78%) hue-rotate(349deg) brightness(105%) contrast(89%);
}
.single-team-social a:hover {
    background: #F15A29;
}
.single-team-social a:hover img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(99%) saturate(0%) hue-rotate(318deg) brightness(100%) contrast(105%);
}
.personal-main h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 50px;
    margin-bottom: 20px;
    color: #16336B;
}
.personal-main p {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 10px;
    color: #16336B;
    font-weight: 400;
    text-align: justify;
}
.contact-form-1 {
    box-shadow: rgba(183, 183, 183, 0.2) 0px 8px 24px;
}
/* ------------- Progress Bar ----------- */
#first-sec {
    margin-bottom: 30px;
}
.progress-bar {
    margin: 20px 0 10px;
    overflow: hidden;
    text-align: start;
}
.progress-title-holder {
    padding-bottom: 7px;
    position: relative;
}
.progress-title {
    color: var(--3, #16336B);
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
}
.progress-number-wrapper,
.progress-number-mark {
    color: #F15A29;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}
.progress-number-mark {
    margin-bottom: 4px;
    position: absolute;
    bottom: 0;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.progress-content-outter {
    height: 8px;
    border-radius: 10px;
    background-color: rgba(168, 169, 173, 0.2);
}
.progress-content {
    height: 8px;
    border-radius: 10px;
    background-color: #F15A29;
    width: 0%;
}
/*-----------------------[ 21.Pricing Plan Page CSS ]------------------------*/
.pricing-row {
    margin-top: 60px;
}
.pricing-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.pricing-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 50px 30px 30px;
    text-align: center;
    transition: 0.3s ease;
}
.pricing-card.enterprise {
    background-color: #F15A29;
    color: #fff;
}
.pricing-card h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 10px;
}
.price-box {
    background: transparent;
    border-radius: 12px;
    padding: 15px;
    display: inline-block;
    margin-bottom: 20px;
}
.price {
    font-size: 40px;
    font-weight: 700;
    color: #F15A29;
}
.enterprise .price {
    color: #fff;
}
.month {
    font-size: 18px;
    font-weight: 500;
    margin-left: 5px;
    color: #16336B;
}
.enterprise .month {
    color: #fff;
}
.features {
    list-style: none;
    margin-bottom: 25px;
}
.features li {
    text-align: left;
    padding-left: 30px;
    margin-bottom: 12px;
    position: relative;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #999;
}
.enterprise .features li {
    color: #FFD9C7;
}
.features li.active {
    color: #16336B;
}
.enterprise .features li.active {
    color: #fff;
}
.features li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: #F15A29;
    font-size: 16px;
}
.enterprise .features li::before {
    color: #FFF;
}
.features li:not(.active)::before {
    color: #ccc;
}
.getStarted-btn {
    width: 100%;
}
/*-----------------------[ 22.Our Client Page CSS ]------------------------*/
.clients-main {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 54px;
    margin-top: 60px;
}
.clients-main img {
    max-width: 100%;
}
.testimonial-page {
    background: #E5E7EB;
}
.testimonial-page .testimonialSlider-swiper-slide {
    border-radius: 20px;
}
.testimonial-page .testimonialSlider-swiper-slide {
    padding: 30px;
}
.testimonial-page .cellent {
    color: var(--4, #16336B);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    padding-top: 10px;
    padding-bottom: 30px;
}
.testimonial-page-row {
    gap: 30px 0;
}
/*-----------------------[ 23.FAQ Page CSS ]------------------------*/
.pulm-multi-main {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pulm-multi {
    max-width: 100%;
}
#accordionExample {
    margin-top: 40px;
}
.accordion-item {
    background: transparent;
}
.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.accordion-item:first-of-type {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.accordion-button:focus {
    box-shadow: none;
}
#accordionExample .accordion-button {
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    background: #E5E7EB;
    margin-bottom: 15px;
}
.accordion-button:not(.collapsed) {
    color: #F15A29;
    background-color: rgba(241, 90, 41, 0.1) !important;
}
#accordionExample.accordion {
    --bs-accordion-border-color: none;
}
#accordionExample .accordion-body {
    padding: 0 0 20px 0;
    color: var(--4, #16336B);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.accordion-button::after {
    background-image: url('../images/dropdown-arrow.svg');
    --bs-accordion-btn-icon-width: 2rem;
    filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(4323%) hue-rotate(216deg) brightness(97%) contrast(101%);
}
.accordion-button:not(.collapsed)::after {
    background-image: url('../images/dropdown-arrow.svg');
    filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(4003.78%) hue-rotate(349deg) brightness(105%) contrast(89%);
}
/*-----------------------[ 24.404 Error Page CSS ]------------------------*/
.error-img {
    max-width: 100%;
}
.error-img-btn {
    display: flex;
    align-items: center;
    flex-direction: column;
}
/*-----------------------[ 25.Services Page CSS ]------------------------*/
.services-page-row {
    gap: 40px 0;
}
.layers-img1 {
    width: 100%;
    margin: 30px 0;
}
.fusce {
    color: #16336B;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}
.ourServicesPrcoes {
    color: #16336B;
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
    padding-top: 30px;
    padding-bottom: 15px;
}
.singleServicesSlider {
    margin-top: 30px;
}
.singleServicesSlider img {
    width: 100%;
}
.all-service-text {
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    color: #FFF;
    text-align: center;
    padding: 30px;
    background: #16336B;
}
.roofing-services-list-main {
    padding: 30px;
    background: #E5E7EB;
    border: 2px solid #FFF;
}
.service-list-arow-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFF;
    margin-bottom: 15px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.service-list-arow-main::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    height: 0;
    width: 100%;
    background-color: #16336B;
    z-index: -1;
    transition: inherit;
    transition: all 0.3s ease;
}
.service-list-arow-main:hover::after {
    height: 100%;
    top: auto;
    left: 0;
}
.service-list-arow-main p {
    color: #16336B;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
}
.service-list-arow-main img {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(2406%) hue-rotate(189deg) brightness(98%) contrast(101%);
}
.service-list-arow-main:hover,
.service-list-arow-main.active {
    background: #F15A29;
}
.service-list-arow-main:hover p,
.service-list-arow-main.active p {
    color: #FFF;
}
.service-list-arow-main:hover img,
.service-list-arow-main.active img {
    filter: none;
}
.card-adds-main {
    margin: 40px 0;
}
.adds-img-home {
    border-radius: 20px 20px 0 0;
}
.shape-img {
    width: 100%;
    margin-top: -130px;
}
.adds-details-main {
    background: #FFF;
    padding-bottom: 20px;
    text-align: center;
    box-shadow: rgba(183, 183, 183, 0.2) 0px 8px 24px;
    border-radius: 30px;
}
.adds-details-main h3 {
    font-size: 35px;
    line-height: 45px;
    color: #16336B;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
}
.documents-box {
    background: #E5E7EB;
    padding: 15px;
    margin-top: 40px;
}
.brochure-main {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #FFFFFF;
    margin-bottom: 20px;
}
.brochure {
    width: 60px;
    height: 60px;
    background: #F15A29;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brochure-main h3 {
    color: #16336B;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}
/*-----------------------[ 26.Project Page CSS ]------------------------*/
.projectSlider2 {
    margin-top: 100px;
}
.project-two-row {
    gap: 40px 0;
}
.project-box-main-img {
    position: relative;
    display: block;
    overflow: hidden;
}
.project-box-main-img img {
    transform: scale(1.0);
    transition-duration: 0.7s;
}
.project-box-main-img:hover img {
    transform: scale(1.05) rotate(1deg);
}
.project-box-main-img:hover .project-two-img-ovelry {
    opacity: 0.80;
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
}
.project-two-img-ovelry {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(241, 90, 41, 0.85);
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    z-index: 1;
}
.project-box-main-img:hover .overlay-title {
    transform: scaleY(1.0);
    transition: all 200ms linear;
    transition-delay: 0.1s;
}
.overlay-title {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0 30px 30px;
    padding-right: 20px;
    transform: scaleY(0);
    transition: all 300ms ease 100ms;
    z-index: 2;
}
.overlay-title h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #FFF;
}
.overlay-title p {
    color: #FFF;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 10px;
}
/*-----------------------[ 27.Single Project Page CSS ]------------------------*/
.singleServicesSlider img {
    max-width: 100%;
}
.layers-img {
    max-width: 100%;
    border-radius: 20px;
}
.singleProject2 {
    margin: 20px 0;
}
.diamond-nextbtn-head {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid rgba(168, 169, 173, 0.2);
    border-bottom: 2px solid rgba(168, 169, 173, 0.2);
    margin-top: 50px;
}
.diamond-btn {
    background: #F15A29;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diamond-next-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    cursor: pointer;
}
.diamond-next-btn h3 {
    color: #16336B;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}
.send-inquiry-form {
    padding: 30px;
    background: #FFF;
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 140px;
}
.project-info-text {
    color: #16336B;
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
    margin-bottom: 30px;
    text-align: center;
}
.project-info-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #9090903b;
    padding: 20px 0;
}
.project-info-main p:nth-child(1) {
    color: #16336B;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}
.project-info-main p:nth-child(2) {
    color: #F15A29;
    font-size: 20px;
}
.project-details-icon .footer-med-icons img {
    width: 30px;
}
.project-details-icon {
    justify-content: center;
    margin-top: 30px;
    gap: 10px;
}
.project-details-icon .footer-med-icons {
    background: #F15A29;
    width: 50px;
    height: 50px;
}
.all-services-row3 {
    justify-content: center;
}
/*-----------------------[ 28.Blog Page CSS ]------------------------*/
.blogPage-row2 {
    gap: 30px 0;
}
.search-box-main {
    padding: 20px;
    background: rgba(168, 169, 173, 0.1);
}
.search-input {
    position: relative;
}
.search-input input {
    width: 100%;
    height: 60px;
    outline: none;
    border: none;
    padding: 18px 15px;
    color: var(--4, #16336B);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
.search-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
}
.single-services-black-box {
    margin-bottom: 20px;
    margin-top: 40px;
    background: #16336B;
    padding: 30px;
}
.single-services-black-box h3 {
    color: var(--5, #FFF);
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
}
.recent-post-main {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.recent-post-text-main p {
    color: var(--4, #16336B);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.recent-post-text-main h2 {
    color: var(--4, #16336B);
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    transition: all 0.3s ease-in-out;
}
.recent-post-main:hover h2 {
    color: #F15A29;
}
.adds-details-main {
    margin-top: 40px;
}
/*-----------------------[ 29.Blog Details CSS ]------------------------*/
.single-blog-img1 {
    width: 100%;
}
.tag-date {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 0 20px;
}
.tag-date-sub {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tag-date-sub p {
    color: #16336B;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}
.psum {
    margin-top: 20px;
}
.qoute-box {
    padding: 40px;
    background: #E5E7EB;
    margin: 35px 0;
    position: relative;
}
.qoute-box h2 {
    color: var(--3, #16336B);
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    font-style: italic;
}
.line_client {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.line {
    border-top: 2px solid #F15A29;
    width: 60px;
}
.jordon {
    color: #16336B;
    font-size: 16px;
    line-height: 20px;
    padding-left: 10px;
}
.req-form-main {
    margin-top: 30px;
}
.map-iframe {
    width: 100%;
    height: 400px;
    margin-top: 100px;
}
/*-----------------------[ 30.Get Your Quote Page CSS ]------------------------*/
.get-quote-page-section {
    background: #FFFFFF;
}
.get-quote-page-section .sec-text {
    color: #16336B;
}
.get-quote-calculator {
    margin-top: 60px;
    margin-bottom: 0;
    background: #E5E7EB;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* short accent rule leading the eyebrow */
.needs-text::before {
    content: '';
    flex-shrink: 0;
    width: 48px;
    height: 2px;
    background: #F15A29;
}
.hero-cta-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.hero-cta-group .btn-quote {
    border: 2px solid transparent;
}
.hero-cta-group .btn-quote img {
    width: 20px;
    height: 20px;
}
.hero-cta-group .btn-quote-ghost {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero-cta-group .btn-quote-ghost::after {
    background-color: #FFF;
}
.hero-cta-group .btn-quote-ghost:hover {
    color: #16336B;
    border-color: #FFF;
}
.hero-cta-group .btn-quote-ghost:hover img {
    filter: brightness(0) saturate(100%) invert(7%) sepia(99%) saturate(2062.5%) hue-rotate(213deg) brightness(149%) contrast(88%);
}
/* credibility strip along the foot of the stage */
/* floats above the highlight cards that overlap the foot of the stage */
.hero-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 92px;
    z-index: 5;
    pointer-events: none;
}
.hero-strip .container {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 18px;
}
.hero-strip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 48px;
}
.hero-strip-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.hero-strip-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F15A29;
}
@media (prefers-reduced-motion: reduce) {
    .swiper-slide-active .hero-media {
        animation: none;
    }
}

/* stage is shorter than the old fixed 955px block, so the centred copy drops the
   legacy top margin to leave room for the credibility strip below it */
.main-swiper-slide .clearfix-space {
    margin-top: 0;
}

/* ---- Film grain: ported from the reference component's FilmGrain layer ---- */
.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-repeat: repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* ---- Masked headline reveal + staggered entrance ---- */
.main-swiper-slide .animate-slide {
    opacity: 1;
    transform: none;
    transition: none;
}
.hero-mask {
    overflow: hidden;
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.main-swiper-slide .lets-us-do {
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.15s;
}
.main-swiper-slide .needs-text,
.main-swiper-slide .residents,
.main-swiper-slide .hero-cta-group {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.main-swiper-slide .needs-text {
    transition-delay: 0.05s;
}
.main-swiper-slide .residents {
    transition-delay: 0.4s;
}
.main-swiper-slide .hero-cta-group {
    transition-delay: 0.55s;
}
.swiper-slide-active .lets-us-do {
    transform: translateY(0);
    opacity: 1;
}
.swiper-slide-active .needs-text,
.swiper-slide-active .residents,
.swiper-slide-active .hero-cta-group {
    opacity: 1;
    transform: translateY(0);
}
/* ---- Chapter pill with progress ring, after the reference's DynamicNav ---- */
.hero-strip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.hero-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 22px;
    border-radius: 999px;
    background: rgba(6, 16, 38, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.9);
    flex-shrink: 0;
}
.hero-nav-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hero-nav-index {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hero-nav-title {
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    min-width: 160px;
}
.hero-nav-ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.hero-nav-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.hero-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 2;
}
.hero-ring-bar {
    fill: none;
    stroke: #F15A29;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
}
.hero-nav-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #F15A29;
}
@media (prefers-reduced-motion: reduce) {
    .main-swiper-slide .lets-us-do,
    .main-swiper-slide .needs-text,
    .main-swiper-slide .residents,
    .main-swiper-slide .hero-cta-group {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/*-----------------------[ 6.5.Hero Scroll Chapters CSS ]------------------------*/
.hero-chapters {
    position: relative;
    height: 300vh;
}
/* the stage pins while the chapter track scrolls past it */
.hero-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    background: #060f22;
}
.hero-chapter-media {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.2s ease-in-out;
    transform: scale(1.04);
}
.hero-chapter-media.is-active {
    opacity: 1;
    animation: hero-drift 26s ease-out forwards;
}
.hero-chapter-still {
    background-image: url('../images/seq-banner-crew.jpg');
    background-position: 58% 30%;
}
.hero-stage .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* same two-pass grade as before, now on the stage */
.hero-stage-grade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(105deg, rgba(6, 16, 38, 0.94) 0%, rgba(6, 16, 38, 0.82) 30%, rgba(6, 16, 38, 0.44) 62%, rgba(6, 16, 38, 0.16) 100%),
        linear-gradient(180deg, rgba(6, 16, 38, 0.55) 0%, rgba(6, 16, 38, 0) 26%, rgba(6, 16, 38, 0) 55%, rgba(6, 16, 38, 0.80) 100%),
        radial-gradient(132% 108% at 26% 44%, rgba(6, 16, 38, 0) 32%, rgba(4, 11, 28, 0.66) 100%);
}
.hero-stage .hero-grain {
    z-index: 3;
}
.hero-stage .hero-strip {
    bottom: 92px;
    z-index: 4;
}
/* chapter copy scrolls over the pinned stage */
.hero-chapter-track {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.hero-chapter {
    height: 100vh;
    display: flex;
    align-items: center;
}
.hero-chapter-inner {
    max-width: 720px;
    pointer-events: auto;
}
/* masked reveal + stagger, driven by .is-active rather than swiper classes */
.hero-chapter .lets-us-do {
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.12s;
}
.hero-chapter .needs-text,
.hero-chapter .residents,
.hero-chapter .hero-cta-group {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.hero-chapter .needs-text {
    transition-delay: 0.04s;
}
.hero-chapter .residents {
    transition-delay: 0.34s;
}
.hero-chapter .hero-cta-group {
    transition-delay: 0.48s;
}
.hero-chapter.is-active .lets-us-do {
    transform: translateY(0);
    opacity: 1;
}
.hero-chapter.is-active .needs-text,
.hero-chapter.is-active .residents,
.hero-chapter.is-active .hero-cta-group {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .hero-chapter-media.is-active {
        animation: none;
    }
    .hero-chapter .lets-us-do,
    .hero-chapter .needs-text,
    .hero-chapter .residents,
    .hero-chapter .hero-cta-group {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* The stage is exactly one viewport, so the headline is sized from viewport HEIGHT
   rather than width - otherwise a 4-line chapter title outgrows the space between
   the header and the credibility strip. Two classes, so it also beats the
   width-based .lets-us-do steps in media_query.css. */
.hero-chapter .lets-us-do {
    font-size: clamp(32px, 7.4vh, 74px);
    max-width: 17ch;
}
.hero-chapter .residents {
    margin-bottom: 32px;
}

/* stills sit behind each clip: they cover load time, and phones where the
   video layer is switched off entirely */
.hero-chapter-media:nth-of-type(1) {
    background-image: url('../images/seq-showcase.jpg');
    background-position: 70% center;
}
.hero-chapter-media:nth-of-type(2) {
    background-image: url('../images/seq-section-bg.jpg');
    background-position: 60% center;
}


/* ==================================================================
   4. media_query.css
   ================================================================== */
@media (min-width: 1650px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1290px !important;
    }
}
@media (max-width: 1720px) {
    .testimonials-col-main {
        padding: 100px 70px;
    }
    .section-nine {
        overflow: hidden;
    }
}
@media (max-width: 1600px) {
    .menu {
        gap: 24px;
    }
    .menu li span {
        position: absolute;
        top: 10px;
        right: -22px;
    }
    .testimonials-col-main {
        padding: 100px 30px;
    }
}
@media (max-width: 1500px) {
    .header .call {
        padding: 0 24px 0 calc(24px + var(--panel-slant) / 2);
    }
    .header .need-help-main a {
        font-size: 22px;
        line-height: 30px;
    }
}
@media (max-width:1399px) {
    .lets-us-do {
        font-size: 62px;
    }
    .highlight-card {
        padding: 40px 28px 36px;
    }
    .highlight-index {
        font-size: 56px;
        right: 20px;
    }
    .hero-slider {
        width: 100%;
        height: min(88vh, 820px);
    }
    .lets-us-do {
        font-size: 60px;
        line-height: 70px;
    }
    .home-img-clening {
        position: absolute;
        top: 10px;
    }
    .section-two,
    .section-three,
    .section-four,
    .section-five,
    .section-seven,
    .blog-section,
    .about-section-three {
        padding: 70px 0;
    }
    .testimonials-col-main {
        padding: 70px 30px;
    }
    .section-six {
        padding-bottom: 70px;
    }
    .contact-form-section {
        padding: 70px 0 220px;
    }
    .map-iframe {
        margin-top: 70px;
    }
    .calculator-box-main {
        margin-top: 70px;
        margin-bottom: -200px;
    }
    .get-quote-calculator {
        margin-bottom: 0;
    }
    .how-work-step-box {
        display: grid;
        grid-template-columns: 250px auto 250px auto 250px;
        gap: 20px;
    }
    .testimonial-panel-img {
        max-width: 40%;
        object-position: left;
    }
    .addees {
        font-size: 20px;
        line-height: 30px;
    }
    .subscribe-section {
        margin-bottom: 70px;
    }
    .projectSlider2 {
        margin-top: 70px;
    }
}
@media (max-width: 1260px) {
    .header-container {
        gap: 40px;
    }
}
@media (max-width: 1230px) {
    .header {
        padding: 10px 20px;
    }
    .header-container {
        align-items: center;
        min-height: auto;
    }
    .logo {
        padding-left: 0;
    }
    .header .nav-actions .get-quote-btn {
        display: inline-block;
    }
    .header .call {
        padding: 14px 20px;
        border-radius: 10px;
        justify-content: center;
        -webkit-clip-path: none;
        clip-path: none;
    }
    .header .need-help-main a {
        font-size: 22px;
        line-height: 30px;
    }
    .menu li span {
        display: none;
    }
    .for-mobile-menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }
    .hamburger {
        display: block;
        z-index: 1002;
        transition: all 0.3s ease;
        width: 50px;
        height: 50px;
        background: #F15A29;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
    }
    .hamburger img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 28px;
    }
    .logo img {
        height: 46px;
        width: auto;
    }
    .mobile-logo {
        display: block;
        max-width: 100%;
    }
    .mobile-logo img {
        height: 40px;
        width: auto;
    }
    .nav {
        position: fixed;
        top: 0;
        left: -100%;
        flex-direction: column;
        align-items: flex-start;
        background: #FFF;
        min-height: 100vh;
        width: 300px;
        padding: 20px;
        overflow: auto;
        transition: left 0.4s ease;
        z-index: 999;
    }
    .dsad {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: block;
        z-index: -1;
    }
    .nav.open {
        left: 0;
    }
    .menu {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
    .menu>li {
        display: block;
    }
    .menu li {
        width: 100%;
    }
    .menu li a {
        width: 100%;
        padding: 15px 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #16336B;
    }
    .menu li a img {
        filter: none;
    }
    .submenu {
        position: static;
        background: #E5E7EB;
        box-shadow: none;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        padding: 0;
        border-top: none;
        border-radius: 0;
    }
    .dropdown.open .submenu {
        max-height: 500px;
    }
    .submenu li {
        padding: 0;
    }
    .submenu li a {
        padding: 12px 15px;
    }
    .nav-actions .call {
        display: flex;
    }
    .nav-actions {
        flex-direction: column-reverse;
        margin-top: 30px;
        gap: 15px;
        width: 100%;
    }
    .get-quote-btn {
        width: 100%;
        text-align: center;
    }
    .nav-actions .call {
        width: 100%;
    }
    .home-img-clening {
        display: none;
    }
    .main-swiper-row {
        justify-content: center;
        text-align: center;
    }
    .clearfix-space {
        margin-top: 80px;
    }
    .needs-text,
    .lets-us-do,
    .residents {
        text-align: center;
    }
    .cutomer-img-main-text {
        position: unset;
        width: fit-content;
        margin: 30px auto 0 auto;
    }
    .hero-slider {
        width: 100%;
        height: 800px;
    }
    .residents {
        padding-left: 0;
        margin-bottom: 40px;
        border-left: none;
    }
    .sec-text {
        font-size: 40px;
        line-height: 50px;
        padding-bottom: 20px;
    }
}
@media (max-width: 1199px) {
    .about-grid-box-main {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .about-sec-main {
        margin-top: 40px;
        gap: 20px;
    }
    .section-main-text-flex .ornare {
        max-width: 400px;
    }
    .sadas {
        left: 80px;
    }
    .how-work-step-box {
        display: grid;
        grid-template-columns: 210px auto 210px auto 210px;
        gap: 20px;
    }
    .testimonialSlider-swiper-slide {
        padding: 40px;
    }
    .testimonialSlider {
        max-width: 540px;
        margin-left: 0;
        margin-top: 60px;
        border-radius: 20px;
    }
    .adres-main-home {
        display: flex;
        gap: 0px;
        flex-direction: column;
        align-items: flex-start;
    }
    .call-support-text {
        padding-bottom: 5px;
        margin-top: 20px;
    }
    .addees {
        font-size: 20px !important;
        line-height: 30px !important;
    }
    .tel-num {
        font-size: 25px;
        line-height: 35px;
    }
    .get-toch {
        font-size: 38px;
    }
    .subscribe-section {
        flex-direction: column;
        padding: 40px;
        margin-bottom: 50px;
    }
    .updat {
        text-align: center;
    }
    .subscribe-copy {
        text-align: center;
    }
    .subscribe-note {
        max-width: none;
    }
    .media-logo-call-footer .call-detl {
        padding: 10px 25px 10px 10px;
    }
    .heroSection {
        padding: 180px 0 80px;
    }
    .team-contact-1 {
        padding: 20px;
    }
    .pricing-row {
        gap: 50px 0;
    }
    .clients-main {
        gap: 25px;
    }
    .all-service-text {
        font-size: 30px;
        line-height: 40px;
        padding: 25px;
    }
    .roofing-services-list-main {
        padding: 25px;
    }
    .card-adds-main {
        margin: 30px 0;
    }
    .adds-details-main h3 {
        font-size: 30px;
        line-height: 40px;
    }
    .overlay-title {
        padding: 0 20px 30px;
    }
}
@media (max-width:991px) {
    .hero-strip-list {
        gap: 10px 28px;
    }
    .hero-strip-list li {
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .services-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-top: 36px;
    }
    .services-slider-wrap {
        width: 100%;
        min-width: 0;
    }
    .services-filter {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .services-filter-btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
    .highlight-section {
        margin-top: -40px;
    }
    .header {
        position: fixed;
        top: 15px;
        width: calc(100% - 30px);
    }
    .hero-slider {
        width: 100%;
        height: 740px;
    }
    .about-img2,
    .about-img3 {
        display: none;
    }
    .cap-text,
    .sec-text,
    .sec-sub-text {
        text-align: center;
    }
    .about-sec-main {
        justify-content: center;
    }
    .sub-img-main {
        margin-top: 50px;
    }
    .section-two,
    .section-three,
    .section-four,
    .section-five,
    .section-seven,
    .blog-section,
    .about-section-three {
        padding: 50px 0;
    }
    .section-six {
        padding-bottom: 50px;
    }
    .contact-form-section {
        padding: 50px 0 190px;
    }
    .map-iframe {
        margin-top: 50px;
    }
    .section-main-text-flex {
        gap: 15px;
        flex-direction: column;
    }
    .section-main-text-flex .ornare {
        max-width: 100%;
    }
    .why-choose-row {
        gap: 50px;
    }
    .sadas {
        left: 150px;
    }
    .how-to-work-arrow {
        display: none;
    }
    .how-work-step-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        align-items: start;
    }
    .calculator-box-main {
        padding: 50px;
        margin-top: 50px;
    }
    .calcult-from-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .testimonial-section-main {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }
    .testimonial-panel-img {
        display: none;
    }
    .tryse {
        margin: 0 auto;
    }
    .testimonialSlider {
        width: 100%;
        max-width: 100%;
    }
    .testimonials-col-main {
        padding: 50px 30px;
    }
    .home-blog-row {
        row-gap: 30px;
    }
    .adres-main-home {
        display: flex;
        gap: 20px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    .call-support-text {
        text-align: center;
    }
    .tel-num {
        display: block;
        text-align: center;
    }
    .form-sec-row {
        row-gap: 50px;
    }
    .media-logo-call-footer {
        gap: 30px 80px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .copyrights-main {
        padding-bottom: 30px;
        flex-direction: column-reverse;
    }
    .footer-row-quick {
        row-gap: 30px;
    }
    .working-hours {
        padding-bottom: 10px;
    }
    .media-logo-call-footer {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .img-header-text {
        font-size: 45px;
        line-height: 55px;
    }
    .breadcrumb-group {
        margin-top: 15px;
    }
    .heroSection {
        padding: 150px 0 60px;
    }
    .personal-main h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 15px;
    }
    .pricing-row {
        gap: 30px 0;
    }
    .clients-main {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 30px;
    }
    .all-services-row {
        gap: 30px;
        justify-content: center;
    }
    .projectSlider2 {
        margin-top: 50px;
    }
    .project-two-row {
        gap: 30px 0;
    }
    .diamond-nextbtn-head {
        margin-top: 30px;
    }
    .diamond-next-btn {
        margin: 15px 0;
    }
    .all-services-row2 {
        flex-direction: column-reverse;
        align-items: center
    }
    .blog-two-grid-row {
        gap: 30px;
        justify-content: center;
    }
    .single-services-black-box {
        margin-bottom: 20px;
        margin-top: 30px;
    }
    .blog-two-grid-row2 {
        flex-direction: column-reverse;
        align-items: center;
    }
}
@media (max-width:767px) {
    /* services stack vertically on phones instead of scrolling sideways;
       script.js leaves Swiper uninstantiated at this width */
    .services-slider .swiper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 18px;
        transform: none !important;
    }
    .services-slider .swiper-slide {
        width: 100% !important;
        margin: 0 !important;
    }
    .services-nav {
        display: none;
    }
    .hero-chapter .lets-us-do {
        font-size: clamp(30px, 8vw, 44px);
        max-width: 100%;
    }
    .hero-chapter-inner {
        max-width: 100%;
    }
    /* two classes so it beats .hero-stage .hero-video in style.css */
    .hero-stage .hero-video {
        display: none;
    }
    .hero-strip {
        display: none;
    }
    .cta-btn-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .cta-btn-group .btn-quote {
        text-align: center;
    }
    .services-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .service-card-img img {
        height: 300px;
    }
    .services-caption {
        margin: -120px 18px 0 18px;
        padding: 20px;
    }
    .highlight-section {
        margin-top: -30px;
    }
    .highlight-card {
        padding: 34px 24px 30px;
    }
    .highlight-title {
        font-size: 22px;
        line-height: 30px;
    }
    .cap-text {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 1.2px;
    }
    .lets-us-do {
        font-size: 50px;
        line-height: 64px;
    }
    .residents {
        margin-bottom: 28px;
        font-size: 18px;
        line-height: 28px;
    }
    .hero-slider {
        width: 100%;
        height: 650px;
    }
    .clearfix-space {
        margin-top: 60px;
    }
    .sec-text {
        font-size: 35px;
        line-height: 45px;
        padding-bottom: 15px;
    }
    .header {
        padding: 6px 10px;
    }
    .sub-img-main {
        margin-top: 30px;
    }
    .services-slider {
        margin-right: 0;
        margin-top: 0;
    }
    .sadas {
        left: 110px;
    }
    .how-work-step-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .calcult-from-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .calculator-box-main {
        padding: 30px 20px;
        margin-top: 30px;
    }
    .send-info {
        max-width: 100%;
    }
    .get-cost-estimate {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        flex-direction: column-reverse;
        text-align: center;
    }
    .how-work-step-box {
        margin-top: 30px;
    }
    .testimonialSlider {
        margin-top: 30px;
    }
    .home-blog-row {
        margin-top: 30px;
    }
    .form-sec-row {
        row-gap: 30px;
    }
    .contact-form-section {
        padding: 50px 0 170px;
    }
    .subscribe-input-main input {
        width: 100%;
        padding: 20px 20px;
        border-radius: 10px;
    }
    .subscribe-input-main {
        padding: 0;
        width: 100%;
        max-width: 570px;
        border-radius: 0;
        flex-direction: column;
        gap: 20px;
        flex-direction: column;
        background: transparent;
    }
    .copyrights-main {
        padding-bottom: 20px;
    }
    .call-detl .img-main-call {
        width: 70px;
        height: 70px;
    }
    .contac-form-main {
        padding: 30px 20px;
    }
    .team-single-box {
        margin-bottom: 20px;
    }
    .personal-main h2 {
        margin-bottom: 10px;
    }
    .pricing-row {
        gap: 30px 0;
        margin-top: 30px;
    }
    .pricing-card {
        padding: 30px;
    }
    .clients-main {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 20px;
    }
    #accordionExample {
        margin-top: 30px;
    }
    .services-page-row {
        gap: 30px 0;
    }
    .roofing-services-list-main {
        padding: 20px;
    }
    .all-service-text {
        padding: 20px;
    }
    .layers-img1 {
        margin: 20px 0;
    }
    .ourServicesPrcoes {
        font-size: 28px;
        line-height: 38px;
        padding-top: 20px;
        padding-bottom: 15px;
        text-align: center;
    }
    .your-message-input {
        margin-top: 20px;
    }
    .send-inquiry-form {
        padding: 20px;
    }
    .project-info-main {
        padding: 15px 0;
    }
    .project-info-main p:nth-child(1),
    .project-info-main p:nth-child(2) {
        font-size: 18px;
        line-height: 28px;
    }
    .project-info-text {
        font-size: 29px;
        line-height: 38px;
        margin-bottom: 15px;
    }
    .qoute-box {
        padding: 25px;
    }
}
@media (max-width:575px) {
    .contact-info-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 30px;
    }
    .contact-info-card {
        padding: 22px 20px;
    }
    .contact-info-card-primary .contact-info-value {
        font-size: 24px;
        line-height: 32px;
    }
    .lets-us-do {
        font-size: 40px;
        line-height: 50px;
    }
    .hero-slider {
        width: 100%;
        height: 530px;
    }
    .clearfix-space {
        margin-top: 70px;
    }
    .cutomer-img-main-text {
        display: none;
    }
    .about-sec-main {
        flex-direction: column;
        margin-top: 30px;
    }
    .section-two,
    .section-three,
    .section-four,
    .section-five,
    .section-seven,
    .blog-section,
    .about-section-three {
        padding: 30px 0;
    }
    .section-six {
        padding-bottom: 30px;
    }
    .projectSlider2,
    .map-iframe {
        margin-top: 30px;
    }
    .sec-text {
        font-size: 30px;
        line-height: 39px;
    }
    .sadas {
        display: none;
    }
    .services-name {
        font-size: 22px;
    }
    .why-choose-img3 {
        bottom: 0px;
        display: none;
    }
    .why-choose-row {
        gap: 30px;
    }
    .how-work-step-box {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .how-work-step-box .how-work-step-box-sub h3 {
        font-size: 22px;
        line-height: 30px;
        padding-bottom: 6px;
    }
    .send-info {
        max-width: 100%;
    }
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
    .testimonials-col-main {
        padding: 30px 12px;
    }
    .testimonialSlider-swiper-slide {
        padding: 30px;
    }
    .cellent {
        font-size: 20px;
        line-height: 32px;
        padding-top: 10px;
        padding-bottom: 25px;
    }
    .contact-form-section {
        padding: 30px 0 160px;
    }
    .addees {
        font-size: 18px !important;
        line-height: 30px !important;
    }
    .adres-main-home {
        display: flex;
        gap: 0;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .subscribe-section {
        flex-direction: column;
        padding: 30px;
        margin-bottom: 30px;
    }
    .img-header-text {
        font-size: 40px;
        line-height: 50px;
    }
    button.bottom-top-button {
        right: 18px;
        bottom: 14px;
        width: 40px;
        height: 40px;
        font-size: 25px;
    }
    .floating-icons-main {
        left: 14px;
        bottom: 14px;
        gap: 10px;
    }
    .floating-icon {
        width: 44px;
        height: 44px;
    }
    .floating-icon img {
        width: 20px;
        height: 20px;
    }
    .breadcrumb-group a {
        font-size: 16px;
        line-height: 26px;
    }
    .breadcrumb-group {
        margin-top: 10px;
    }
    .pricing-card h2,
    .price-box {
        margin-bottom: 0;
    }
    .clients-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-items: center;
    }
    .testimonial-page-row {
        gap: 20px 0;
    }
    .fusce {
        text-align: justify;
    }
    .layers-img {
        width: 100%;
    }
}
@media (max-width:425px) {
    .card-containe {
        padding: 20px;
    }
    .check-box-main-sub h2 {
        font-size: 22px;
        line-height: 32px;
        padding-bottom: 3px;
    }
    .check-box-main-sub {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
        flex-direction: column;
        text-align: center;
    }
    .blog-containe-main {
        padding: 20px;
    }
    .blog-containe-main h2 {
        font-size: 22px;
        line-height: 28px;
    }
    .call-detl .img-main-call {
        display: none;
    }
    .media-logo-call-footer .call-detl {
        padding: 10px 10px 10px 10px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .call-detl a {
        font-size: 25px;
        line-height: 30px;
    }
    .footer-med-icons-main {
        gap: 10px;
    }
    .sec-text {
        font-size: 28px;
        line-height: 39px;
    }
    .testimonial-page .cellent {
        font-size: 17px;
        line-height: 28px;
        padding-bottom: 20px;
    }
}
@media (max-width:400px) {
    .lets-us-do {
        font-size: 35px;
        line-height: 45px;
    }
    .services-slider {
        margin-right: 0;
    }
    .video2 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 200px;
    }
}

/* ==================================================================
   5. subpage.css - subpage-only styles
   ================================================================== */
/*------------------------------------------------------------------
Project: SEQ Custom Renovations - service subpages
Extends style.css. Reuses the homepage tokens (#16336B navy, #F15A29
orange, #555555 body copy, 17px) so subpages read as one site.
------------------------------------------------------------------
1. Scroll progress bar
2. Reveal animations
3. Subpage hero
4. Intro split
5. Reason cards
6. Service cards
7. Work strip
8. CTA band
9. Responsive
------------------------------------------------------------------*/

/*-----------------------[ 1. Scroll progress bar ]------------------------*/
.sp-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 1000;
    background: transparent;
    pointer-events: none;
}
.sp-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #F15A29 0%, #FF8A5B 100%);
    box-shadow: 0 0 14px rgba(241, 90, 41, 0.7);
    transition: width 0.1s linear;
}

/*-----------------------[ 2. Reveal animations ]------------------------*/
.js .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-left {
    transform: translateX(-40px);
}
.reveal-right {
    transform: translateX(40px);
}
.reveal-zoom {
    transform: scale(0.94);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* masked line reveal, same easing as the homepage hero headline */
.sp-mask {
    overflow: hidden;
    padding-bottom: 6px;
}
.js .sp-mask > * {
    transform: translateY(105%);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-mask.is-visible > * {
    transform: translateY(0);
    opacity: 1;
}

/*-----------------------[ 3. Subpage hero ]------------------------*/
.subpage-hero {
    position: relative;
    min-height: 640px;
    height: 74vh;
    max-height: 780px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #060f22;
}
.subpage-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* default only; each service page sets background-image inline on this element */
    background-image: url('../images/seq-painting-01.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    will-change: transform;
}
/* same two-pass grade as the homepage stage */
.subpage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;    
	background: #16336bbf;
}
.subpage-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(130% 108% at 26% 44%, rgba(6, 16, 38, 0) 32%, rgba(4, 11, 28, 0.62) 100%);
}
.subpage-hero .container {
    position: relative;
    z-index: 4;
}
.subpage-hero-inner {
    max-width: 720px;
    padding-top: 90px;
}
.sp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 22px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.sp-breadcrumb a {
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.3s ease-in-out;
}
.sp-breadcrumb a:hover {
    color: #F15A29;
}
.sp-breadcrumb span[aria-current] {
    color: #F15A29;
}
.sp-breadcrumb .sp-crumb-sep {
    color: rgba(255, 255, 255, 0.32);
}
.subpage-hero h1 {
    color: #FFF;
    font-size: clamp(34px, 6vh, 66px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -1.4px;
    max-width: 16ch;
    text-shadow: 0 18px 50px rgba(4, 11, 28, 0.55);
}
.subpage-hero .sp-lede {
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    max-width: 560px;
    margin-top: 24px;
    margin-bottom: 38px;
    padding: 22px 26px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid #F15A29;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
/* scroll cue */
.sp-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.sp-scroll-cue i {
    display: block;
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    animation: sp-cue 2.2s ease-in-out infinite;
}
@keyframes sp-cue {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/*-----------------------[ 4. Intro split ]------------------------*/
.sp-section {
    padding: 100px 0;
}
.sp-section-grey {
    background: #E5E7EB;
}
.sp-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 60px;
}
.sp-intro-figure {
    position: relative;
}
.sp-intro-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(22, 51, 107, 0.5);
}
/* floating credential chip over the photo */
.sp-figure-badge {
    position: absolute;
    left: -22px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 16px 18px;
    border-radius: 16px;
    background: rgba(6, 16, 38, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.8);
}
.sp-figure-badge strong {
    color: #FFF;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}
.sp-figure-badge span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 16px;
}
.sp-figure-badge i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F15A29;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-figure-badge i img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

/*-----------------------[ 5. Why-choose orbit ]------------------------*/
.sp-orbit-section {
    overflow: hidden;
}
/* 3x3 stage: nodes on the compass points, connectors in the diagonal
   cells, hub in the centre. Named areas keep the DOM in reading order
   (01-04) while the visual order runs around the ring. */
.sp-orbit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 520px) minmax(0, 1fr);
    grid-template-areas:
        "lnw node-n lne"
        "node-w hub node-e"
        "lsw node-s lse";
    align-items: center;
    gap: 24px 20px;
}
.sp-orbit-hub { grid-area: hub; }
.sp-node-n { grid-area: node-n; }
.sp-node-w { grid-area: node-w; }
.sp-node-s { grid-area: node-s; }
.sp-node-e { grid-area: node-e; }
.sp-link-nw { grid-area: lnw; }
.sp-link-ne { grid-area: lne; }
.sp-link-sw { grid-area: lsw; }
.sp-link-se { grid-area: lse; }

/*--- hub ---*/
.sp-orbit-hub {
    position: relative;
    z-index: 3;
    text-align: center;
}
.sp-hub-inner {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 24px;
    padding: 34px 30px 30px;
    background: linear-gradient(155deg, #1D4184 0%, #16336B 58%, #122A59 100%);
    box-shadow: 0 46px 92px -42px rgba(22, 51, 107, 0.8);
}
/* slow sheen travelling across the hub so the centre never sits still */
.sp-hub-inner::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 60%;
    height: 220%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(14deg);
    animation: sp-sheen 7s ease-in-out infinite;
}
@keyframes sp-sheen {
    0%, 100% { left: -60%; }
    55% { left: 130%; }
}
/* rings pulsing outward from the hub edge */
.sp-hub-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 24px;
    border: 1px solid rgba(241, 90, 41, 0.5);
    pointer-events: none;
    animation: sp-ripple 3.8s ease-out infinite;
}
.sp-hub-ring-2 {
    animation-delay: 1.9s;
}
@keyframes sp-ripple {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.14); opacity: 0; }
}
.sp-orbit-hub .cap-text {
    color: #FF8A5E;
}
.sp-orbit-hub h2 {
    color: #FFF;
    font-size: 28px;
    line-height: 37px;
    font-weight: 600;
    padding-bottom: 12px;
}
.sp-orbit-hub p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 25px;
}
.sp-hub-btn {
    margin-top: 20px;
}
.sp-hub-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.sp-hub-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease, border-radius 0.5s ease;
}
.sp-hub-dots i.is-on {
    width: 28px;
    border-radius: 4px;
    background: #F15A29;
}

/*--- nodes ---*/
.sp-orbit-node {
    position: relative;
    z-index: 2;
    border-radius: 18px;
    padding: 24px 24px 26px;
    background: #FFF;
    border: 1px solid #E1E4EA;
    box-shadow: 0 20px 46px -30px rgba(22, 51, 107, 0.42);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease,
                box-shadow 0.6s ease, background 0.6s ease, border-color 0.6s ease;
}
.sp-node-n,
.sp-node-s {
    max-width: 520px;
    justify-self: center;
}
/* each node arrives from the direction it will end up sitting in */
.js .sp-node-n { opacity: 0; transform: translateY(-52px); }
.js .sp-node-s { opacity: 0; transform: translateY(52px); }
.js .sp-node-w { opacity: 0; transform: translateX(-52px); }
.js .sp-node-e { opacity: 0; transform: translateX(52px); }
.js .sp-orbit-node.is-visible {
    opacity: 1;
    transform: none;
}
.sp-node-glow {
    position: absolute;
    inset: -6px;
    border-radius: 24px;
    border: 2px solid rgba(241, 90, 41, 0);
    pointer-events: none;
    transform: scale(0.97);
    transition: border-color 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-node-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(22, 51, 107, 0.15);
    pointer-events: none;
    transition: -webkit-text-stroke-color 0.5s ease;
}
.sp-node-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(241, 90, 41, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-node-icon img {
    width: 23px;
    height: 23px;
    transition: filter 0.5s ease;
}
.sp-orbit-node h3 {
    color: #16336B;
    font-size: 19px;
    font-weight: 600;
    line-height: 26px;
    padding-bottom: 7px;
    transition: color 0.5s ease;
}
.sp-orbit-node p {
    color: #555555;
    font-size: 16px;
    line-height: 26px;
    transition: color 0.5s ease;
}
/* the ring lights one node at a time; hovering takes over the highlight */
.js .sp-orbit-node.is-visible.is-active,
.sp-orbit-node:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 44px 74px -32px rgba(22, 51, 107, 0.62);
}
.sp-orbit-node.is-active,
.sp-orbit-node:hover {
    background: linear-gradient(150deg, #1D4184 0%, #16336B 100%);
    border-color: transparent;
}
.sp-orbit-node.is-active .sp-node-glow,
.sp-orbit-node:hover .sp-node-glow {
    border-color: rgba(241, 90, 41, 0.55);
    transform: scale(1);
}
.sp-orbit-node.is-active .sp-node-num,
.sp-orbit-node:hover .sp-node-num {
    -webkit-text-stroke-color: rgba(241, 90, 41, 0.9);
}
.sp-orbit-node.is-active .sp-node-icon,
.sp-orbit-node:hover .sp-node-icon {
    background: #F15A29;
    box-shadow: 0 16px 34px -10px rgba(241, 90, 41, 0.75);
    transform: rotate(-6deg);
}
.sp-orbit-node.is-active .sp-node-icon img,
.sp-orbit-node:hover .sp-node-icon img {
    filter: brightness(0) invert(1);
}
.sp-orbit-node.is-active h3,
.sp-orbit-node:hover h3 {
    color: #FFF;
}
.sp-orbit-node.is-active p,
.sp-orbit-node:hover p {
    color: rgba(255, 255, 255, 0.82);
}

/*--- connectors ---*/
/* fixed square so the 1:1 viewBox cannot drive the grid row height,
   and centred in its corner cell the way the arrows sit in the sketch */
.sp-link {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.sp-link svg {
    display: block;
    width: 185px;
    height: 185px;
    max-width: 100%;
    overflow: visible;
}
.sp-link-arc,
.sp-link-head,
.sp-link-pulse {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* round caps on a 2/9 dash give dots rather than dashes; the pattern
   marches one period toward the arrowhead so the route always reads as
   flowing in the direction of the cycle */
.sp-link-arc {
    stroke: #B4BFD2;
    stroke-width: 2;
    stroke-dasharray: 2 9;
    animation: sp-march 2.6s linear infinite;
    transition: stroke 0.5s ease;
}
@keyframes sp-march {
    from { stroke-dashoffset: 11; }
    to { stroke-dashoffset: 0; }
}
/* quarter arc of r=80 -> length 125.7, so 126 covers it exactly */
.sp-link-wipe {
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-link.is-drawn .sp-link-wipe {
    stroke-dashoffset: 0;
}
.sp-link-head {
    stroke: #B4BFD2;
    stroke-width: 2;
    opacity: 0;
    transition: opacity 0.45s ease 0.95s, stroke 0.5s ease;
}
.sp-link.is-drawn .sp-link-head {
    opacity: 1;
}
/* a short dash runs the arc toward the arrowhead: the flow of the cycle */
.sp-link-pulse {
    stroke: #F15A29;
    stroke-width: 5;
    stroke-dasharray: 0.01 126;
    stroke-dashoffset: 126;
    opacity: 0;
}
.sp-link.is-drawn .sp-link-pulse {
    opacity: 1;
    animation: sp-flow 2.8s linear infinite;
}
@keyframes sp-flow {
    from { stroke-dashoffset: 126; }
    to { stroke-dashoffset: 0; }
}
/* pull each arc slightly off its cell centre toward the hub so the four
   of them read as one ring rather than four loose corner marks */
.sp-link-nw svg { transform: translate(26px, 26px); }
.sp-link-ne svg { transform: translate(-26px, 26px); }
.sp-link-sw svg { transform: translate(26px, -26px); }
.sp-link-se svg { transform: translate(-26px, -26px); }
.sp-link.is-active .sp-link-arc,
.sp-link.is-active .sp-link-head {
    stroke: #F15A29;
}

/*-----------------------[ 6. Service swatch cards ]------------------------*/
.sp-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 54px;
}
/* paint-swatch metaphor: the colour chip floods the card on hover */
.sp-swatch {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #FFF;
    border: 1px solid #DCDFE5;
    box-shadow: 0 18px 44px -28px rgba(22, 51, 107, 0.45);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}
.sp-swatch:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 72px -30px rgba(241, 90, 41, 0.55);
}
.sp-swatch-chip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 74px;
    background: linear-gradient(160deg, #FF7A45 0%, #F15A29 55%, #D9451A 100%);
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-swatch:hover .sp-swatch-chip {
    width: 100%;
}
.sp-swatch-chip b {
    position: absolute;
    top: 22px;
    left: 22px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}
.sp-swatch-body {
    position: relative;
    z-index: 2;
    padding: 30px 30px 34px 104px;
}
.sp-swatch-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(241, 90, 41, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-swatch-icon img {
    width: 28px;
    height: 28px;
    transition: filter 0.55s ease;
}
.sp-swatch:hover .sp-swatch-icon {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-4px) scale(1.06);
}
.sp-swatch:hover .sp-swatch-icon img {
    filter: brightness(0) invert(1);
}
.sp-swatch-body h3 {
    color: #16336B;
    font-size: 21px;
    font-weight: 600;
    line-height: 29px;
    padding-bottom: 10px;
    transition: color 0.5s ease;
}
.sp-swatch-body p {
    color: #555555;
    font-size: 17px;
    line-height: 28px;
    transition: color 0.5s ease;
}
.sp-swatch:hover .sp-swatch-body h3,
.sp-swatch:hover .sp-swatch-body p {
    color: #FFF;
}

/*-----------------------[ 7. Work strip ]------------------------*/
.sp-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 54px;
}
.sp-work-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 3 / 4;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sp-work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s ease;
}
.sp-work-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 16, 38, 0) 45%, rgba(6, 16, 38, 0.72) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.sp-work-item:hover {
    transform: translateY(-8px);
}
.sp-work-item:hover img {
    transform: scale(1.08);
}
.sp-work-item:hover::after {
    opacity: 1;
}
.sp-work-item figcaption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    z-index: 2;
    color: #FFF;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.sp-work-item:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

/*-----------------------[ 8. CTA band ]------------------------*/
.sp-cta {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
    /* default only; each service page sets background-image inline */
    background-image: linear-gradient(180deg, rgba(6, 16, 38, 0.86) 0%, rgba(9, 22, 50, 0.9) 100%), url('../images/seq-painting-02.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.sp-cta-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.sp-cta h2 {
    color: #FFF;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.8px;
}
.sp-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 30px;
    margin: 20px 0 36px;
}
.sp-cta .hero-cta-group {
    justify-content: center;
}

/*-----------------------[ 9. Responsive ]------------------------*/
@media (max-width: 1230px) {
    .subpage-hero-inner {
        padding-top: 70px;
    }
    .sp-figure-badge {
        left: 16px;
    }
}
@media (max-width: 991px) {
    .sp-section {
        padding: 70px 0;
    }
    .sp-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .sp-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sp-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .subpage-hero {
        min-height: 560px;
        height: auto;
        padding: 150px 0 90px;
    }
    .sp-scroll-cue {
        display: none;
    }
}
@media (max-width: 767px) {
    .sp-section {
        padding: 56px 0;
    }
    .sp-service-grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 36px;
    }
    .sp-cta {
        padding: 64px 0;
        background-attachment: scroll;
    }
    .subpage-hero .sp-lede {
        padding: 18px 20px;
        font-size: 17px;
    }
}
@media (max-width: 575px) {
    .sp-work-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .sp-figure-badge {
        left: 12px;
        bottom: 12px;
        padding: 12px 18px 12px 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .sp-mask > * {
        transition: none;
        transform: none;
        opacity: 1;
    }
    .sp-scroll-cue i {
        animation: none;
    }
    .subpage-hero-media {
        transform: none;
    }
}

/*-----------------------[ 10. Subpage contact grid ]------------------------*/
/* details on the left, quote form on the right; tops aligned */
.sp-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 44px;
    align-items: start;
}
/* in a single left-hand column the info cards stack rather than sit in a row */
.sp-contact .contact-info-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 34px;
}
#quote-form[hidden] {
    display: none;
}
.sp-contact-grid .sp-form-card {
    margin-top: 0;
}
/* stacked in a single column the cards read better as rows, so the icon
   moves beside the text instead of sitting above it */
.sp-contact .contact-info-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    align-items: center;
    column-gap: 16px;
    padding: 18px 22px;
}
.sp-contact .contact-info-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    margin-bottom: 0;
}
.sp-contact .contact-info-icon img {
    width: 21px;
    height: 21px;
}
.sp-contact .contact-info-label {
    grid-area: label;
    align-self: end;
}
.sp-contact .contact-info-value {
    grid-area: value;
    align-self: start;
}
@media (max-width: 991px) {
    .sp-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .sp-contact .contact-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .sp-contact .contact-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*-----------------------[ 11. Orbit + card responsive ]------------------------*/
/* between 1200 and 1365 the container cannot give the side cards a fair
   share against a 520px hub, so the centre column gives some back */
@media (max-width: 1365px) {
    .sp-orbit {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) minmax(0, 1fr);
    }
    .sp-node-n,
    .sp-node-s {
        max-width: 400px;
    }
}
/* the side cards get too narrow to read before the ring itself breaks,
   so the diagram folds into a plain stack and the connectors are dropped */
@media (max-width: 1199px) {
    .sp-orbit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "hub hub"
            "node-n node-w"
            "node-s node-e";
        gap: 22px;
    }
    .sp-orbit-hub h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .sp-link {
        display: none;
    }
    .sp-node-n,
    .sp-node-s {
        max-width: none;
    }
    .js .sp-node-n,
    .js .sp-node-w,
    .js .sp-node-s,
    .js .sp-node-e {
        transform: translateY(34px);
    }
}
@media (max-width: 767px) {
    .sp-orbit {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hub"
            "node-n"
            "node-w"
            "node-s"
            "node-e";
    }
    .sp-hub-inner {
        padding: 32px 24px 30px;
    }
    .sp-orbit-hub h2 {
        font-size: 25px;
        line-height: 34px;
    }
    .sp-orbit-node {
        padding: 22px 20px 24px;
    }
    .sp-node-num {
        font-size: 40px;
        right: 16px;
    }
    .sp-swatch-body {
        padding: 26px 24px 30px 92px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sp-orbit-node,
    .sp-swatch {
        transform: none !important;
    }
    .sp-hub-ring,
    .sp-hub-inner::after,
    .sp-link-arc,
    .sp-link.is-drawn .sp-link-pulse {
        animation: none;
    }
    .sp-link-pulse {
        opacity: 0 !important;
    }
    .sp-link-wipe {
        stroke-dashoffset: 0;
    }
    .sp-swatch-chip {
        transition: none;
    }
}

/*-----------------------[ 12. Quote form ]------------------------*/
/* Hidden until subpage.js moves the form in on mobile, so the empty
   container never leaves a gap under the hero on wider screens. */
.sp-form-slot {
    display: none;
    padding: 44px 0 0;
}
.sp-form-slot.is-filled {
    display: block;
}
.sp-form-card {
    margin-top: 36px;
    padding: 34px;
    border-radius: 22px;
    background: #FFF;
    border: 1px solid #E1E4EA;
    box-shadow: 0 26px 62px -42px rgba(22, 51, 107, 0.55);
}
.sp-form-slot .sp-form-card {
    margin-top: 0;
}
.sp-form-head h3 {
    color: #16336B;
    font-size: 26px;
    font-weight: 600;
    line-height: 34px;
    padding-bottom: 0;
}
.sp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}
.sp-field-2 {
    grid-column: span 2;
}
.sp-field-full {
    grid-column: 1 / -1;
}
.sp-field {
    position: relative;
}
/* the placeholder is the visible cue, but the label stays in the DOM so the
   field is still announced and the for/id association holds */
.sp-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
.sp-field input,
.sp-field select,
.sp-field textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid #E5E7EB;
    background: #FFF;
    color: #16336B;
    font-size: 16px;
    line-height: 24px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}
.sp-field textarea {
    min-height: 118px;
    resize: vertical;
}
/* native arrow removed so the control matches the site's dropdowns */
.sp-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url(../images/dropdown-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 42px;
    cursor: pointer;
}
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus {
    outline: 2px solid #F15A29;
    outline-offset: 0;
    border-color: transparent;
}
.sp-field input::placeholder,
.sp-field textarea::placeholder {
    color: #697386;
}
.sp-field-error {
    display: none;
    color: #C93C13;
    font-size: 14px;
    line-height: 20px;
    padding-top: 6px;
}
.sp-field.has-error input,
.sp-field.has-error select,
.sp-field.has-error textarea {
    border-color: #C93C13;
}
.sp-field.has-error .sp-field-error {
    display: block;
}
/* honeypot: off-screen rather than display:none, which some bots skip */
.sp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.sp-form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}
.sp-form-foot .btn-quote {
    border: 0;
    cursor: pointer;
}
.sp-form-foot .btn-quote[disabled] {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}
.sp-form-status {
    font-size: 15px;
    line-height: 22px;
    margin: 0;
}
.sp-form-status.is-error {
    color: #C93C13;
}
.sp-form-status.is-ok {
    color: #16336B;
}
@media (max-width: 767px) {
    .sp-form-card {
        padding: 26px 22px 28px;
    }
    .sp-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .sp-field-2,
    .sp-field-full {
        grid-column: auto;
    }
    .sp-form-head h3 {
        font-size: 23px;
        line-height: 31px;
    }
}

/*-----------------------[ 13. Footer clearance ]------------------------*/
/* The footer CTA band is pulled up 125px (.subscribe-section margin-top),
   so the last section before the footer has to reserve that space or the
   two overlap. The homepage contact section does the same thing with
   padding: 100px 0 220px. Appended last so it wins over .sp-section. */
.sp-contact {
    padding-bottom: 220px;
}
@media (max-width: 991px) {
    .sp-contact {
        padding-bottom: 190px;
    }
}
@media (max-width: 767px) {
    .sp-contact {
        padding-bottom: 176px;
    }
}

/*-----------------------[ 14. Five-card service grid ]------------------------*/
/* Five cards leave a hole in a three-column grid. On a six-column track each
   card spans two, and the last two are offset so the trailing row sits
   centred under the first. Below 992px the base two/one-column rules apply. */
@media (min-width: 992px) {
    .sp-service-grid--five {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .sp-service-grid--five > * {
        grid-column: span 2;
    }
    .sp-service-grid--five > *:nth-child(4) {
        grid-column: 2 / span 2;
    }
    .sp-service-grid--five > *:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

/*-----------------------[ 15. Process timeline ]------------------------*/
/* Eight steps are too many for the homepage's three-across process strip,
   so subpages get a vertical timeline: cards alternate either side of a
   rail that fills as the section scrolls past. */
.sp-steps {
    position: relative;
    margin-top: 58px;
}
.sp-steps-rail {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(22, 51, 107, 0.14);
    overflow: hidden;
}
/* full height without JS; the script takes over and scrubs it on scroll */
.sp-steps-rail span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: block;
    background: linear-gradient(180deg, #F15A29 0%, #16336B 100%);
}
.js .sp-steps-rail span {
    height: 0;
    transition: height 0.25s linear;
}
.sp-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    align-items: center;
}
.sp-step + .sp-step {
    margin-top: 20px;
}
.sp-step-marker {
    grid-column: 2;
    justify-self: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FFF;
    border: 2px solid #E1E4EA;
    color: #16336B;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.sp-step.is-visible .sp-step-marker {
    background: #F15A29;
    border-color: #F15A29;
    color: #FFF;
    box-shadow: 0 14px 30px -10px rgba(241, 90, 41, 0.7);
}
.sp-step-card {
    background: #FFF;
    border: 1px solid #E1E4EA;
    border-radius: 18px;
    padding: 22px 24px 24px;
    box-shadow: 0 18px 44px -32px rgba(22, 51, 107, 0.5);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.sp-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 34px 62px -34px rgba(22, 51, 107, 0.6);
}
.sp-step-left .sp-step-card {
    grid-column: 1;
    text-align: right;
}
.sp-step-right .sp-step-card {
    grid-column: 3;
}
.sp-step-card h3 {
    color: #16336B;
    font-size: 19px;
    font-weight: 600;
    line-height: 26px;
    padding-bottom: 6px;
}
.sp-step-card p {
    color: #555555;
    font-size: 16px;
    line-height: 26px;
}
/* one column below the ring breakpoint, rail moved to the left edge */
@media (max-width: 991px) {
    .sp-steps-rail {
        left: 27px;
        transform: none;
    }
    .sp-step {
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
    }
    .sp-step-marker {
        grid-column: 1;
    }
    .sp-step-left .sp-step-card,
    .sp-step-right .sp-step-card {
        grid-column: 2;
        text-align: left;
    }
}
@media (max-width: 767px) {
    .sp-step-card {
        padding: 18px 20px 20px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sp-step-card {
        transform: none !important;
    }
    .js .sp-steps-rail span {
        transition: none;
    }
}

/*-----------------------[ Footer QR + Google rating ]------------------------*/
/* QR and Google badge sit side by side under the About column. That column is
   ~306px wide at desktop, so both are sized to fit on one row with room to
   spare; flex-wrap drops the badge below if a narrower column ever appears. */
.footer-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    /* the footer columns are flex, so this would stretch without it */
    align-self: flex-start;
    margin-top: 24px;
}
.footer-qr {
    flex-shrink: 0;
    width: 116px;
    max-width: 100%;
    background: #FFF;
    border-radius: 10px;
    padding: 7px;
}
.footer-qr img {
    display: block;
    width: 100%;
    height: auto;
}
/* the badge artwork already has a white ground, so the padding reads as one card */
.footer-google-rating {
    display: block;
    flex-shrink: 0;
    background: #FFF;
    border-radius: 8px;
    padding: 6px 8px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.footer-google-rating:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55);
}
.footer-google-rating img {
    display: block;
    width: 152px;
    height: auto;
    max-width: 100%;
}
@media (prefers-reduced-motion: reduce) {
    .footer-google-rating {
        transition: none;
    }
    .footer-google-rating:hover {
        transform: none;
    }
}

/*-----------------------[ 16. About page ]------------------------*/
/* Every band on the About page gets its own construction: a lead block with
   stat tiles, a full-bleed pull quote, an editorial numbered index, a
   credentials ribbon and a single-row contact strip. None of these are
   reused from the service pages, which run on cards and the orbit. */

/*--- 16a. lead statement + stat tiles ---*/
.ab-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: start;
}
.ab-lead-text {
    color: #555555;
    font-size: 17px;
    line-height: 30px;
    padding-top: 18px;
}
/* first line set larger, so the section opens with a statement */
.ab-lead-text::first-line {
    color: #16336B;
    font-size: 20px;
    font-weight: 500;
}
.ab-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ab-stat {
    position: relative;
    overflow: hidden;
    padding: 26px 22px 24px;
    border: 1px solid #DCDFE5;
    border-radius: 16px;
    background: #FFF;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
/* a quarter-round orange wash anchored to the corner, rotating in on hover */
.ab-stat::before {
    content: '';
    position: absolute;
    top: -46px;
    right: -46px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(241, 90, 41, 0.14);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;
}
.ab-stat:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 30px 60px -30px rgba(22, 51, 107, 0.5);
}
.ab-stat:hover::before {
    transform: scale(1.9);
    background: rgba(241, 90, 41, 0.2);
}
.ab-stat strong {
    position: relative;
    display: block;
    color: #F15A29;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}
.ab-stat span {
    position: relative;
    display: block;
    color: #16336B;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    padding-top: 10px;
}

/*--- 16b. pull quote band ---*/
.ab-quote {
    position: relative;
    overflow: hidden;
    padding: 104px 0;
    background:
        radial-gradient(90% 130% at 12% 0%, rgba(241, 90, 41, 0.3) 0%, rgba(241, 90, 41, 0) 60%),
        linear-gradient(160deg, #1D4184 0%, #16336B 55%, #0D2049 100%);
}
/* oversized quote glyph, cropped by the band */
.ab-quote::before {
    content: '\201C';
    position: absolute;
    top: -70px;
    left: 3%;
    font-size: 340px;
    line-height: 1;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.ab-quote-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.ab-quote-inner .cap-text {
    color: #FF8A5E;
}
.ab-quote blockquote {
    margin: 0;
    padding: 12px 0 0;
    color: #FFF;
    font-size: 26px;
    font-weight: 500;
    line-height: 42px;
}
.ab-quote-rule {
    display: block;
    width: 64px;
    height: 3px;
    margin: 30px auto 0;
    background: #F15A29;
    border-radius: 2px;
}
.ab-quote cite {
    display: block;
    padding-top: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-style: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/*--- 16c. numbered expertise index ---*/
.ab-index {
    margin-top: 48px;
    border-top: 1px solid #E1E4EA;
}
.ab-row {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 190px 54px;
    align-items: center;
    gap: 28px;
    padding: 26px 16px;
    border-bottom: 1px solid #E1E4EA;
    text-decoration: none;
    transition: background 0.45s ease, padding-left 0.45s ease;
}
.ab-row:hover {
    background: #F5F7FA;
    padding-left: 26px;
}
.ab-row-num {
    color: transparent;
    -webkit-text-stroke: 2px rgba(22, 51, 107, 0.22);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    transition: -webkit-text-stroke-color 0.45s ease, color 0.45s ease;
}
.ab-row:hover .ab-row-num {
    color: #F15A29;
    -webkit-text-stroke-color: transparent;
}
.ab-row-body h3 {
    color: #16336B;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 6px;
}
.ab-row-body p {
    color: #555555;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}
.ab-row-thumb {
    overflow: hidden;
    border-radius: 12px;
    height: 96px;
}
.ab-row-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-row:hover .ab-row-thumb img {
    transform: scale(1.08);
}
.ab-row-go {
    justify-self: end;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #DCDFE5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.45s ease, border-color 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-row-go img {
    width: 16px;
    height: 16px;
    transition: filter 0.45s ease;
}
.ab-row:hover .ab-row-go {
    background: #F15A29;
    border-color: #F15A29;
    transform: rotate(45deg);
}
.ab-row:hover .ab-row-go img {
    filter: brightness(0) invert(1);
}

/*--- 16d. credentials ribbon ---*/
.ab-ribbon {
    overflow: hidden;
    padding: 22px 0;
    background: #16336B;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ab-ribbon-track {
    display: flex;
    width: max-content;
    animation: ab-ribbon 34s linear infinite;
}
.ab-ribbon-track span {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    white-space: nowrap;
}
/* the diamond separates each credential */
.ab-ribbon-track span::after {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    transform: rotate(45deg);
    background: #F15A29;
}
@keyframes ab-ribbon {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*--- 16e. contact strip ---*/
.ab-contact {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 46px;
    border: 1px solid #DCDFE5;
    border-radius: 18px;
    overflow: hidden;
    background: #FFF;
}
.ab-contact-item {
    display: block;
    padding: 26px 24px;
    border-right: 1px solid #DCDFE5;
    text-decoration: none;
    transition: background 0.4s ease;
}
.ab-contact-item:last-child {
    border-right: 0;
}
.ab-contact-item:hover {
    background: #F5F7FA;
}
.ab-contact-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(241, 90, 41, 0.12);
    margin-bottom: 14px;
}
.ab-contact-item i img {
    width: 19px;
    height: 19px;
}
.ab-contact-item b {
    display: block;
    color: #F15A29;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    padding-bottom: 6px;
}
.ab-contact-item span {
    display: block;
    color: #16336B;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    overflow-wrap: anywhere;
}

/*--- 16f. responsive ---*/
@media (max-width: 1199px) {
    .ab-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
    }
    .ab-row {
        grid-template-columns: 74px minmax(0, 1fr) 150px 46px;
        gap: 20px;
    }
}
@media (max-width: 991px) {
    .ab-quote {
        padding: 78px 0;
    }
    .ab-quote blockquote {
        font-size: 21px;
        line-height: 34px;
    }
    .ab-quote::before {
        font-size: 220px;
        top: -44px;
    }
    .ab-row {
        grid-template-columns: 60px minmax(0, 1fr) 46px;
        row-gap: 14px;
    }
    .ab-row-thumb {
        display: none;
    }
    .ab-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ab-contact-item:nth-child(2n) {
        border-right: 0;
    }
    .ab-contact-item:nth-child(-n+2) {
        border-bottom: 1px solid #DCDFE5;
    }
}
@media (max-width: 767px) {
    .ab-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .ab-stat {
        padding: 20px 16px 18px;
    }
    .ab-stat strong {
        font-size: 31px;
    }
    .ab-quote blockquote {
        font-size: 19px;
        line-height: 31px;
    }
    .ab-row {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 22px 4px;
    }
    .ab-row:hover {
        padding-left: 4px;
    }
    .ab-row-num {
        font-size: 32px;
    }
    .ab-row-go {
        display: none;
    }
    .ab-contact {
        grid-template-columns: minmax(0, 1fr);
    }
    .ab-contact-item {
        border-right: 0;
        border-bottom: 1px solid #DCDFE5;
    }
    .ab-contact-item:last-child {
        border-bottom: 0;
    }
    .ab-ribbon-track span {
        font-size: 13px;
        gap: 18px;
        padding-right: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ab-ribbon-track {
        animation: none;
    }
    .ab-stat:hover,
    .ab-row:hover .ab-row-go {
        transform: none;
    }
}

/*-----------------------[ 16g. About: offset photo band ]------------------------*/
/* Three plates at alternating heights, each clipped on one corner and lifted
   by its own orange foot rule. Deliberately not the service pages' even
   four-up work grid. */
.ab-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 52px;
}
.ab-plate {
    position: relative;
}
.ab-plate:nth-child(2) {
    margin-top: 54px;
}
.ab-plate:nth-child(3) {
    margin-top: 26px;
}
.ab-plate figure {
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    /* the notched corner echoes the header's angled phone panel */
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.ab-plate img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-plate:hover img {
    transform: scale(1.06);
}
.ab-plate figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    color: #16336B;
    font-size: 16px;
    font-weight: 500;
}
/* rule grows out from the caption on hover */
.ab-plate figcaption::before {
    content: '';
    width: 26px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 2px;
    background: #F15A29;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-plate:hover figcaption::before {
    width: 54px;
}

/*-----------------------[ 16h. About: contact + form ]------------------------*/
/* One card straddling a two-tone band: navy above, light below. The service
   pages put details beside the form; here the form is the centrepiece and the
   details sit along the foot of the same card. */
.ab-connect {
    position: relative;
    padding: 96px 0 100px;
    background: linear-gradient(180deg,
        #1D4184 0%,
        #16336B 44%,
        #F5F7FA 44%,
        #F5F7FA 100%);
}
/* orange bloom and a faint dot grid, both confined to the navy half */
.ab-connect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44%;
    pointer-events: none;
    background:
        radial-gradient(70% 120% at 88% 0%, rgba(241, 90, 41, 0.34) 0%, rgba(241, 90, 41, 0) 62%),
        radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: auto, 22px 22px;
}
.ab-connect-head {
    position: relative;
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}
.ab-connect-head .cap-text {
    color: #FF8A5E;
}
.ab-connect-head h2 {
    color: #FFF;
    padding-bottom: 14px;
}
.ab-connect-head p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 28px;
}
.ab-connect-card {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    background: #FFF;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 54px 110px -50px rgba(9, 22, 50, 0.7);
}
/* the shared form card loses its own frame so it reads as part of this one */
.ab-connect .sp-form-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 44px 44px 36px;
    opacity: 1;
    transform: none;
}
/* details run along the foot of the same card */
.ab-connect .ab-contact {
    margin: 0;
    border: 0;
    border-top: 1px solid #E1E4EA;
    border-radius: 0;
    background: #FAFBFC;
}
.ab-connect .ab-contact-item {
    padding: 22px 20px;
}
.ab-connect .ab-contact-item i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.ab-connect .ab-contact-item i img {
    width: 16px;
    height: 16px;
}
.ab-connect .ab-contact-item span {
    font-size: 15px;
    line-height: 22px;
}

/*-----------------------[ 16i. About: responsive additions ]------------------------*/
@media (max-width: 991px) {
    .ab-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .ab-plate:nth-child(2),
    .ab-plate:nth-child(3) {
        margin-top: 0;
    }
    .ab-plate:nth-child(3) {
        grid-column: span 2;
    }
    .ab-plate:nth-child(3) img {
        height: 240px;
    }
    .ab-connect {
        padding: 72px 0 76px;
        background: linear-gradient(180deg, #1D4184 0%, #16336B 38%, #F5F7FA 38%, #F5F7FA 100%);
    }
    .ab-connect::before {
        height: 38%;
    }
    .ab-connect .sp-form-card {
        padding: 34px 30px 28px;
    }
}
@media (max-width: 767px) {
    .ab-mosaic {
        grid-template-columns: minmax(0, 1fr);
    }
    .ab-plate:nth-child(3) {
        grid-column: auto;
    }
    .ab-plate img,
    .ab-plate:nth-child(3) img {
        height: 230px;
    }
    .ab-connect {
        padding: 56px 0 60px;
        background: linear-gradient(180deg, #1D4184 0%, #16336B 30%, #F5F7FA 30%, #F5F7FA 100%);
    }
    .ab-connect::before {
        height: 30%;
    }
    .ab-connect-card {
        border-radius: 20px;
    }
    .ab-connect .sp-form-card {
        padding: 26px 22px 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ab-plate:hover img {
        transform: none;
    }
}

/*-----------------------[ 17. Gallery page ]------------------------*/

/*--- 17a. before / after comparison ---*/
.gl-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    margin-top: 54px;
}
.gl-compare {
    margin: 0;
}
.gl-compare-frame {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 4 / 3;
    background: #16336B;
    box-shadow: 0 30px 64px -34px rgba(22, 51, 107, 0.55);
    --pos: 50%;
}
.gl-compare-frame img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* the before shot is clipped rather than resized, so it never squashes */
.gl-before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.gl-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: #FFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
    pointer-events: none;
    z-index: 2;
}
.gl-handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #F15A29;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.3s ease;
}
/* the two chevrons on the knob */
.gl-handle i::before,
.gl-handle i::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
}
.gl-handle i::before {
    left: 12px;
    transform: translateY(-50%) rotate(-135deg);
}
.gl-handle i::after {
    right: 12px;
    transform: translateY(-50%) rotate(45deg);
}
/* a real range input drives it: keyboard, touch and pointer for free */
.gl-range {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: ew-resize;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}
.gl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 56px;
    height: 400px;
}
.gl-range::-moz-range-thumb {
    width: 56px;
    height: 400px;
    border: 0;
    border-radius: 0;
}
.gl-compare-frame:focus-within .gl-handle i {
    box-shadow: 0 0 0 4px rgba(241, 90, 41, 0.45), 0 10px 26px -8px rgba(0, 0, 0, 0.6);
}
.gl-tag {
    position: absolute;
    top: 16px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.gl-tag-before {
    left: 16px;
    background: rgba(9, 22, 50, 0.72);
    color: #FFF;
}
.gl-tag-after {
    right: 16px;
    background: rgba(241, 90, 41, 0.92);
    color: #FFF;
}
.gl-compare figcaption {
    padding-top: 18px;
}
.gl-compare figcaption b {
    display: block;
    color: #16336B;
    font-size: 19px;
    font-weight: 600;
    line-height: 27px;
}
.gl-compare figcaption span {
    display: block;
    color: #555555;
    font-size: 16px;
    line-height: 25px;
    padding-top: 4px;
}
.gl-compare-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(241, 90, 41, 0.1);
    color: #C2410C;
    font-size: 14px;
    font-weight: 500;
}
.gl-compare-hint::before {
    content: '';
    width: 22px;
    height: 2px;
    background: #F15A29;
    position: relative;
}

/*--- 17b. filter rail ---*/
.gl-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}
.gl-filter-btn {
    padding: 11px 22px;
    border: 1px solid #DCDFE5;
    border-radius: 999px;
    background: #FFF;
    color: #16336B;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.gl-filter-btn:hover {
    border-color: #F15A29;
    color: #F15A29;
}
.gl-filter-btn.active {
    background: #F15A29;
    border-color: #F15A29;
    color: #FFF;
}

/*--- 17c. mosaic grid ---*/
/* deliberately uneven: some tiles take two columns or two rows, and dense
   flow back-fills the holes. Not the even four-up strip the service pages use. */
.gl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 196px;
    grid-auto-flow: dense;
    gap: 16px;
    margin-top: 28px;
}
.gl-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #16336B;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.gl-item.is-wide { grid-column: span 2; }
.gl-item.is-tall { grid-row: span 2; }
.gl-item.is-big { grid-column: span 2; grid-row: span 2; }
.gl-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.gl-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 22, 50, 0) 40%, rgba(9, 22, 50, 0.82) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gl-item:hover img {
    transform: scale(1.07);
}
.gl-item:hover::after,
.gl-item:focus-visible::after {
    opacity: 1;
}
.gl-item-cap {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gl-item:hover .gl-item-cap,
.gl-item:focus-visible .gl-item-cap {
    opacity: 1;
    transform: none;
}
.gl-item-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(241, 90, 41, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gl-item-zoom::before {
    content: '';
    width: 13px;
    height: 13px;
    border: 2px solid #FFF;
    border-radius: 50%;
}
.gl-item-zoom::after {
    content: '';
    position: absolute;
    right: 11px;
    bottom: 11px;
    width: 7px;
    height: 2px;
    background: #FFF;
    transform: rotate(45deg);
}
.gl-item:hover .gl-item-zoom,
.gl-item:focus-visible .gl-item-zoom {
    opacity: 1;
    transform: none;
}
/* .gl-item sets display:block, which beats the user-agent [hidden] rule, so
   the filter could set the attribute without anything disappearing. These two
   put [hidden] back in charge. */
.gl-item[hidden] {
    display: none;
}
.gl-lightbox[hidden] {
    display: none;
}
.gl-empty {
    padding: 40px 0;
    color: #555555;
    font-size: 17px;
}

/*--- 17d. lightbox ---*/
.gl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(6, 14, 32, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.gl-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.gl-lightbox figure {
    margin: 0;
    max-width: 1100px;
    width: 100%;
    text-align: center;
}
.gl-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    margin: 0 auto;
    border-radius: 14px;
    object-fit: contain;
}
.gl-lightbox figcaption {
    padding-top: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
}
.gl-lb-btn {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.gl-lb-btn:hover {
    background: #F15A29;
    border-color: #F15A29;
}
.gl-lb-close {
    top: 24px;
    right: 24px;
}
.gl-lb-prev {
    left: 24px;
    top: 50%;
    margin-top: -26px;
}
.gl-lb-next {
    right: 24px;
    top: 50%;
    margin-top: -26px;
}
.gl-lb-count {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    letter-spacing: 2px;
}
body.gl-lock {
    overflow: hidden;
}

/*--- 17e. responsive ---*/
@media (max-width: 1199px) {
    .gl-grid {
        grid-auto-rows: 168px;
    }
}
@media (max-width: 991px) {
    .gl-compare-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .gl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 150px;
    }
    .gl-lb-prev { left: 10px; }
    .gl-lb-next { right: 10px; }
    .gl-lb-close { top: 14px; right: 14px; }
}
@media (max-width: 767px) {
    .gl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 132px;
        gap: 12px;
    }
    .gl-item.is-big {
        grid-column: span 2;
        grid-row: span 2;
    }
    .gl-item.is-wide {
        grid-column: span 2;
        grid-row: span 1;
    }
    .gl-handle i {
        width: 38px;
        height: 38px;
    }
    .gl-filter-btn {
        padding: 9px 16px;
        font-size: 14px;
    }
    .gl-lightbox img {
        max-height: 64vh;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gl-item img,
    .gl-item-cap,
    .gl-item-zoom {
        transition: none;
    }
    .gl-item:hover img {
        transform: none;
    }
}

/*-----------------------[ 18. Footer clearance for every page ]------------------------*/
/* The footer's CTA band is pulled up 125px (.subscribe-section margin-top),
   so whichever section ends a page has to reserve that much clear space or
   the band lands on top of its content. Scoped to the last section so each
   page gets it without having to remember. */
body > section:last-of-type {
    padding-bottom: 220px;
}
@media (max-width: 991px) {
    body > section:last-of-type {
        padding-bottom: 190px;
    }
}
@media (max-width: 767px) {
    body > section:last-of-type {
        padding-bottom: 176px;
    }
}

/*-----------------------[ 19. Blog ]------------------------*/

/*--- 19a. featured post, listing page ---*/
.bl-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    margin-top: 50px;
    background: #FFF;
    border: 1px solid #E1E4EA;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px -40px rgba(22, 51, 107, 0.5);
    text-decoration: none;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease;
}
.bl-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 46px 90px -42px rgba(22, 51, 107, 0.6);
}
.bl-featured-media {
    position: relative;
    overflow: hidden;
    min-height: 340px;
}
.bl-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.bl-featured:hover .bl-featured-media img {
    transform: scale(1.05);
}
.bl-flag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 999px;
    background: #F15A29;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.bl-featured-body {
    padding: 40px 42px 38px;
    align-self: center;
}
.bl-featured-body h2 {
    color: #16336B;
    font-size: 30px;
    font-weight: 600;
    line-height: 40px;
    padding: 14px 0 12px;
}
.bl-featured-body p {
    color: #555555;
    font-size: 17px;
    line-height: 28px;
}

/*--- 19b. post cards ---*/
.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 26px;
}
.bl-card {
    display: flex;
    flex-direction: column;
    background: #FFF;
    border: 1px solid #E1E4EA;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.bl-card:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: 0 36px 70px -36px rgba(22, 51, 107, 0.55);
}
.bl-card-media {
    position: relative;
    overflow: hidden;
    height: 210px;
    flex-shrink: 0;
}
.bl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.bl-card:hover .bl-card-media img {
    transform: scale(1.06);
}
.bl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}
.bl-card-body h3 {
    color: #16336B;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    padding: 10px 0 8px;
}
.bl-card-body p {
    color: #555555;
    font-size: 16px;
    line-height: 26px;
    flex: 1 1 auto;
}
/* meta line shared by cards, the featured block and the post header */
.bl-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #7A8398;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.bl-meta span + span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 10px;
    border-radius: 50%;
    background: #F15A29;
    vertical-align: middle;
}
.bl-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    color: #F15A29;
    font-size: 15px;
    font-weight: 600;
}
.bl-more::after {
    content: '';
    width: 18px;
    height: 2px;
    background: #F15A29;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bl-card:hover .bl-more::after,
.bl-featured:hover .bl-more::after {
    width: 34px;
}

/*--- 19c. post header ---*/
/* The featured artwork already carries the headline, so the post opens on a
   plain gradient band instead of laying the title over the picture twice. */
.bl-post-head {
    position: relative;
    overflow: hidden;
    padding: 180px 0 90px;
    background:
        radial-gradient(80% 130% at 88% 0%, rgba(241, 90, 41, 0.32) 0%, rgba(241, 90, 41, 0) 60%),
        linear-gradient(150deg, #21498F 0%, #16336B 55%, #0D2049 100%);
}
.bl-post-head::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}
.bl-post-head-inner {
    position: relative;
    max-width: 860px;
}
.bl-post-head h1 {
    color: #FFF;
    font-size: 46px;
    font-weight: 600;
    line-height: 58px;
    padding: 16px 0 22px;
}
.bl-post-head .bl-meta {
    color: rgba(255, 255, 255, 0.72);
}
.bl-post-head .bl-meta span + span::before {
    background: #FF8A5E;
}
/* lead image lifts into the band above it */
.bl-post-lead {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}
.bl-post-lead img {
    display: block;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 40px 90px -44px rgba(9, 22, 50, 0.75);
}

/*--- 19d. article body ---*/
.bl-article {
    max-width: 760px;
    margin: 0 auto;
}
.bl-article > p {
    color: #555555;
    font-size: 17px;
    line-height: 31px;
    padding-bottom: 20px;
}
/* opening paragraph reads as a stand-first; first-of-type because these
   posts open with a heading, so the paragraph is never the first child */
.bl-article > p:first-of-type {
    color: #16336B;
    font-size: 20px;
    line-height: 34px;
    font-weight: 500;
}
.bl-article h2 {
    color: #16336B;
    font-size: 25px;
    font-weight: 600;
    line-height: 34px;
    padding: 18px 0 12px;
}
.bl-article ul {
    list-style: none;
    padding: 0 0 20px;
    margin: 0;
}
.bl-article ul li {
    position: relative;
    padding: 0 0 10px 30px;
    color: #555555;
    font-size: 17px;
    line-height: 29px;
}
/* orange tick rather than a bullet */
.bl-article ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    width: 11px;
    height: 6px;
    border-left: 2px solid #F15A29;
    border-bottom: 2px solid #F15A29;
    transform: rotate(-45deg);
}
.bl-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid #E1E4EA;
    color: #7A8398;
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/*--- 19e. end-of-post call to action ---*/
.bl-cta {
    max-width: 760px;
    margin: 44px auto 0;
    padding: 34px 36px;
    border-radius: 20px;
    background: linear-gradient(140deg, #1D4184 0%, #16336B 100%);
    text-align: center;
}
.bl-cta h2 {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
    padding-bottom: 10px;
}
.bl-cta p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 26px;
    padding-bottom: 22px;
}

/*--- 19f. responsive ---*/
@media (max-width: 1199px) {
    .bl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bl-post-head h1 {
        font-size: 38px;
        line-height: 49px;
    }
}
@media (max-width: 991px) {
    .bl-featured {
        grid-template-columns: minmax(0, 1fr);
    }
    .bl-featured-media {
        min-height: 260px;
    }
    .bl-featured-body {
        padding: 28px 26px 30px;
    }
    .bl-featured-body h2 {
        font-size: 25px;
        line-height: 34px;
    }
    .bl-post-head {
        padding: 150px 0 76px;
    }
    .bl-post-lead {
        margin-top: -46px;
    }
}
@media (max-width: 767px) {
    .bl-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .bl-post-head {
        padding: 130px 0 62px;
    }
    .bl-post-head h1 {
        font-size: 29px;
        line-height: 39px;
    }
    .bl-post-lead {
        margin-top: -34px;
    }
    .bl-post-lead img {
        border-radius: 14px;
    }
    .bl-article > p:first-child {
        font-size: 18px;
        line-height: 30px;
    }
    .bl-article h2 {
        font-size: 21px;
        line-height: 30px;
    }
    .bl-cta {
        padding: 26px 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bl-card,
    .bl-featured {
        transition: none;
    }
    .bl-card:hover,
    .bl-featured:hover {
        transform: none;
    }
    .bl-card:hover .bl-card-media img,
    .bl-featured:hover .bl-featured-media img {
        transform: none;
    }
}

/*-----------------------[ 20. Contact page ]------------------------*/

/*--- 20a. sticky details panel beside the form ---*/
.ct-split {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 40px;
    align-items: start;
    margin-top: 50px;
}
/* the panel follows you down the form, which is long on this page */
.ct-panel {
    position: sticky;
    top: 120px;
    overflow: hidden;
    border-radius: 24px;
    padding: 38px 34px 32px;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(241, 90, 41, 0.34) 0%, rgba(241, 90, 41, 0) 58%),
        linear-gradient(155deg, #21498F 0%, #16336B 55%, #0E2350 100%);
    box-shadow: 0 40px 84px -44px rgba(9, 22, 50, 0.8);
}
.ct-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(122deg,
        rgba(255, 255, 255, 0.05) 0 1px,
        rgba(255, 255, 255, 0) 1px 24px);
}
.ct-panel-head {
    position: relative;
    padding-bottom: 8px;
}
.ct-panel-head .cap-text {
    color: #FF8A5E;
}
.ct-panel-head h2 {
    color: #FFF;
    font-size: 26px;
    font-weight: 600;
    line-height: 35px;
    padding-bottom: 10px;
}
.ct-panel-head p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 26px;
}
.ct-rows {
    position: relative;
    margin-top: 22px;
}
.ct-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
}
.ct-row i {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ct-row i img {
    width: 19px;
    height: 19px;
    filter: brightness(0) invert(1);
}
a.ct-row:hover i {
    background: #F15A29;
    transform: translateY(-3px);
}
.ct-row b {
    display: block;
    color: #FF8A5E;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    padding-bottom: 5px;
}
.ct-row span {
    display: block;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    overflow-wrap: anywhere;
}
a.ct-row:hover span {
    color: #FFD9C9;
}
.ct-panel-foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ct-panel-foot .footer-google-rating {
    margin: 0;
    align-self: auto;
}

/*--- 20b. form side ---*/
.ct-form-card {
    background: #FFF;
    border: 1px solid #E1E4EA;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 34px 76px -46px rgba(22, 51, 107, 0.55);
}
.ct-form-card .sp-form-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 38px 38px 32px;
    opacity: 1;
    transform: none;
}
/* a reassurance strip along the foot of the form */
.ct-assure {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #E1E4EA;
    background: #FAFBFC;
}
.ct-assure div {
    padding: 18px 20px;
    border-right: 1px solid #E1E4EA;
}
.ct-assure div:last-child {
    border-right: 0;
}
.ct-assure b {
    display: block;
    color: #16336B;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}
.ct-assure span {
    display: block;
    color: #7A8398;
    font-size: 13px;
    line-height: 20px;
    padding-top: 2px;
}

/*--- 20c. map band with an overlapping card ---*/
.ct-map {
    position: relative;
    padding-bottom: 0;
}
.ct-map-frame {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 30px 70px -44px rgba(22, 51, 107, 0.6);
}
.ct-map-frame iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    filter: saturate(0.9);
}
/* card floats over the map rather than sitting beside it */
.ct-map-card {
    position: absolute;
    left: 34px;
    bottom: 34px;
    z-index: 2;
    max-width: 330px;
    padding: 26px 28px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    box-shadow: 0 26px 60px -30px rgba(9, 22, 50, 0.6);
}
.ct-map-card b {
    display: block;
    color: #F15A29;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    padding-bottom: 8px;
}
.ct-map-card p {
    color: #16336B;
    font-size: 17px;
    font-weight: 500;
    line-height: 27px;
    padding-bottom: 16px;
}

/*--- 20d. responsive ---*/
@media (max-width: 1199px) {
    .ct-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    /* nothing left to stick to once the columns stack */
    .ct-panel {
        position: static;
    }
}
@media (max-width: 767px) {
    .ct-panel {
        padding: 28px 22px 24px;
    }
    .ct-panel-head h2 {
        font-size: 22px;
        line-height: 31px;
    }
    .ct-form-card .sp-form-card {
        padding: 26px 22px 24px;
    }
    .ct-assure {
        grid-template-columns: minmax(0, 1fr);
    }
    .ct-assure div {
        border-right: 0;
        border-bottom: 1px solid #E1E4EA;
    }
    .ct-assure div:last-child {
        border-bottom: 0;
    }
    .ct-map-frame iframe {
        height: 320px;
    }
    /* the floating card would cover the map on a phone, so it sits under it */
    .ct-map-card {
        position: static;
        max-width: none;
        margin-top: 16px;
        backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    a.ct-row:hover i {
        transform: none;
    }
}

/*-----------------------[ 21. Suburb landing pages ]------------------------*/

/*--- 21a. locality chip in the hero ---*/
.sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: rgba(241, 90, 41, 0.16);
    border: 1px solid rgba(241, 90, 41, 0.45);
    color: #FFD9C9;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.sb-chip i {
    width: 18px;
    height: 18px;
    display: block;
}
.sb-chip i img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

/*--- 21b. offerings as a definition list ---*/
/* A spec-sheet reading: term on the left, description on the right, split by
   hairlines. Deliberately not another card grid. */
.sb-offers {
    margin-top: 50px;
    border-top: 1px solid #E1E4EA;
}
.sb-offer {
    display: grid;
    grid-template-columns: 40px minmax(0, 0.62fr) minmax(0, 1fr);
    gap: 26px;
    align-items: baseline;
    padding: 26px 10px;
    border-bottom: 1px solid #E1E4EA;
    transition: background 0.45s ease, padding-left 0.45s ease;
}
.sb-offer:hover {
    background: #F5F7FA;
    padding-left: 22px;
}
.sb-offer-num {
    color: #F15A29;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
}
.sb-offer dt {
    color: #16336B;
    font-size: 20px;
    font-weight: 600;
    line-height: 29px;
    margin: 0;
}
.sb-offer dd {
    color: #555555;
    font-size: 16px;
    line-height: 27px;
    margin: 0;
}

/*--- 21c. horizontal four-step flow ---*/
.sb-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 54px;
}
/* the rail runs behind the markers, trimmed to sit between the first and last */
.sb-flow::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        rgba(22, 51, 107, 0.22) 0 7px,
        rgba(22, 51, 107, 0) 7px 15px);
}
.sb-step {
    position: relative;
    text-align: center;
}
.sb-step-num {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #FFF;
    border: 2px solid #E1E4EA;
    color: #16336B;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.sb-step.is-visible .sb-step-num {
    background: #F15A29;
    border-color: #F15A29;
    color: #FFF;
    box-shadow: 0 14px 30px -10px rgba(241, 90, 41, 0.7);
}
.sb-step h3 {
    color: #16336B;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    padding-bottom: 8px;
}
.sb-step p {
    color: #555555;
    font-size: 15px;
    line-height: 25px;
}

/*--- 21d. paired benefit / trend panels ---*/
.sb-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 50px;
}
.sb-panel {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 36px 34px 34px;
}
.sb-panel-dark {
    background:
        radial-gradient(90% 130% at 100% 0%, rgba(241, 90, 41, 0.3) 0%, rgba(241, 90, 41, 0) 58%),
        linear-gradient(155deg, #1D4184 0%, #16336B 60%, #0E2350 100%);
    box-shadow: 0 34px 74px -42px rgba(9, 22, 50, 0.8);
}
.sb-panel-light {
    background: #FFF;
    border: 1px solid #E1E4EA;
}
.sb-panel .cap-text {
    position: relative;
}
.sb-panel-dark .cap-text {
    color: #FF8A5E;
}
.sb-panel h2 {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
    padding-bottom: 18px;
}
.sb-panel-dark h2 {
    color: #FFF;
}
.sb-panel-light h2 {
    color: #16336B;
}
.sb-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sb-list li {
    position: relative;
    padding: 14px 0 14px 34px;
    font-size: 16px;
    line-height: 26px;
}
.sb-list li + li {
    border-top: 1px solid rgba(22, 51, 107, 0.1);
}
.sb-panel-dark .sb-list li + li {
    border-top-color: rgba(255, 255, 255, 0.14);
}
.sb-panel-dark .sb-list li {
    color: rgba(255, 255, 255, 0.82);
}
.sb-panel-light .sb-list li {
    color: #555555;
}
.sb-list li b {
    display: block;
    font-weight: 600;
    padding-bottom: 2px;
}
.sb-panel-dark .sb-list li b {
    color: #FFF;
}
.sb-panel-light .sb-list li b {
    color: #16336B;
}
/* orange tick marker */
.sb-list li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 21px;
    width: 11px;
    height: 6px;
    border-left: 2px solid #F15A29;
    border-bottom: 2px solid #F15A29;
    transform: rotate(-45deg);
}

/*--- 21e. responsive ---*/
@media (max-width: 1199px) {
    .sb-offer {
        grid-template-columns: 34px minmax(0, 0.7fr) minmax(0, 1fr);
        gap: 18px;
    }
    .sb-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }
    /* the rail only makes sense across a single row */
    .sb-flow::before {
        display: none;
    }
}
@media (max-width: 991px) {
    .sb-duo {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 767px) {
    .sb-offer {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px 14px;
        padding: 20px 4px;
    }
    .sb-offer:hover {
        padding-left: 4px;
    }
    .sb-offer dd {
        grid-column: 2;
    }
    .sb-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    .sb-panel {
        padding: 26px 22px 24px;
    }
    .sb-panel h2 {
        font-size: 21px;
        line-height: 30px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sb-offer {
        transition: none;
    }
}

/*-----------------------[ 22. Form relocated on mobile ]------------------------*/
/* With the form lifted into the slot below the hero, the strip left behind in
   the card is the first thing shown, so it drops its top divider. */
#quote-form[hidden] + .ab-contact,
#quote-form[hidden] + .ct-assure {
    border-top: 0;
}

/*-----------------------[ 22b. Screen-reader-only text ]------------------------*/
/* labels that must exist for assistive tech but not appear on screen */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/*-----------------------[ 23. Service areas directory ]------------------------*/

/*--- 23a. search ---*/
.ar-search {
    position: relative;
    max-width: 460px;
    margin-top: 34px;
}
.ar-search input {
    width: 100%;
    padding: 15px 18px 15px 50px;
    border-radius: 999px;
    border: 2px solid #E5E7EB;
    background: #FFF;
    color: #16336B;
    font-size: 16px;
    line-height: 24px;
    font-family: inherit;
}
.ar-search input:focus {
    outline: 2px solid #F15A29;
    border-color: transparent;
}
.ar-search input::placeholder {
    color: #697386;
}
/* magnifier drawn in CSS so the field needs no image */
.ar-search::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 19px;
    width: 13px;
    height: 13px;
    border: 2px solid #F15A29;
    border-radius: 50%;
    pointer-events: none;
}
.ar-search::after {
    content: '';
    position: absolute;
    left: 32px;
    top: 32px;
    width: 8px;
    height: 2px;
    background: #F15A29;
    transform: rotate(45deg);
    pointer-events: none;
}

/*--- 23b. one block per service ---*/
.ar-group {
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid #E1E4EA;
}
.ar-group:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.ar-group-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-bottom: 20px;
}
.ar-group-head h2 {
    color: #16336B;
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
}
.ar-count {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(241, 90, 41, 0.12);
    color: #C2410C;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.ar-group-head a {
    margin-left: auto;
    color: #F15A29;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.ar-group-head a:hover {
    text-decoration: underline;
}

/*--- 23c. suburb links ---*/
.ar-suburbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.ar-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #E1E4EA;
    border-radius: 12px;
    background: #FFF;
    color: #16336B;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ar-pill:hover {
    background: #16336B;
    border-color: #16336B;
    color: #FFF;
    transform: translateY(-3px);
}
/* chevron that slides across on hover */
.ar-pill::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-top: 2px solid #F15A29;
    border-right: 2px solid #F15A29;
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ar-pill:hover::after {
    transform: rotate(45deg) translate(3px, -3px);
}
.ar-pill[hidden],
.ar-group[hidden] {
    display: none;
}
.ar-empty {
    padding: 30px 0;
    color: #555555;
    font-size: 17px;
}

/*--- 23d. responsive ---*/
@media (max-width: 1199px) {
    .ar-suburbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .ar-suburbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ar-pill {
        padding: 12px 14px;
        font-size: 15px;
    }
    .ar-group-head h2 {
        font-size: 20px;
        line-height: 28px;
    }
    .ar-group-head a {
        margin-left: 0;
        flex-basis: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ar-pill:hover {
        transform: none;
    }
    .ar-pill:hover::after {
        transform: rotate(45deg);
    }
}