/* ==========================================================================
   Sunstar Facility Services — base + home page
   Measurements follow the Figma file "Sunstar 2026 - WP" (Homepage V2),
   designed on a 1512px canvas: 116px side gutter -> 1280px content width.
   ========================================================================== */

:root {
    --ss-orange: #f26931;
    --ss-orange-dark: #e0551d;
    --ss-blue: #0b216b;     /* section titles */
    --ss-ink: #0a1925;      /* body copy on light */
    --ss-heading: #0d1631;  /* card / sub titles */
    --ss-text: #434343;
    --ss-bg: #f3f2f9;
    --ss-purple: #29275b;
    --ss-navy: #0d1840;
    --ss-font: 'Lato', sans-serif;
    --ss-font-alt: 'Roboto', sans-serif;
    --ss-container-max: 1512px;
    --ss-gutter: 116px;
    --ss-header-h: 133px;
    --ss-header-h-fixed: 88px;
}

/* ==========================================================================
   Base / resets
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
body {
    font-family: var(--ss-font);
    color: var(--ss-ink);
    background: var(--ss-bg);
    overflow-x: clip; /* clip (not hidden) so position: sticky keeps working */
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    font-weight: 400;
}
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
}
a:hover {
    color: var(--ss-orange);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
address {
    margin: 0;
    font-style: normal;
}
button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
button:focus, input:focus, textarea:focus, select:focus {
    box-shadow: none !important;
    outline: none;
}
section {
    position: relative;
}
/* Open menu locks the page; the gutter stays so the layout doesn't jump */
html {
    scrollbar-gutter: stable;
}
html.menu-opened,
body.menu-opened {
    overflow: hidden;
}

.ss-container {
    width: 100%;
    max-width: var(--ss-container-max);
    margin: 0 auto;
    padding-left: var(--ss-gutter);
    padding-right: var(--ss-gutter);
}

/* Section titles: the wrapper carries the typography, the plain tag inherits it */
.ss-title > :is(h1, h2, h3, h4, h5, h6) {
    font: 700 50px/65px var(--ss-font);
    color: var(--ss-heading);
}
.ss-title--blue > :is(h1, h2, h3, h4, h5, h6) {
    color: var(--ss-blue);
}
.ss-title--white > :is(h1, h2, h3, h4, h5, h6) {
    color: #fff;
}
.ss-title--sm > :is(h1, h2, h3, h4, h5, h6) {
    font-size: 38px;
    line-height: 54px;
}
.ss-title--xl > :is(h1, h2, h3, h4, h5, h6) {
    font-size: 53px;
    line-height: 65px;
}
/* Orange line under the heading of an editor block (.ss-has-line on the wrapper) */
.ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
    content: '';
    display: block;
    width: 173px;
    height: 2px;
    background: var(--ss-orange);
}

/* ---------- Buttons ---------- */
.ss-btn {
    display: inline-flex;
    align-items: center;
    gap: 19px;
    height: 53px;
    padding: 0 25px 0 20px;
    border: 1px solid var(--ss-orange);
    border-radius: 5px;
    background: var(--ss-orange);
    color: #fff;
    font: 900 17px/1 var(--ss-font);
    white-space: nowrap;
    transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.ss-btn:hover, .ss-btn:focus-visible {
    background: var(--ss-orange-dark);
    border-color: var(--ss-orange-dark);
    color: #fff;
    box-shadow: 0 10px 24px rgba(242,105,49,.35);
}
.ss-btn-arrow {
    flex: none;
    width: 15px;
    height: 13px;
    transition: transform .3s ease;
}
.ss-btn:hover .ss-btn-arrow {
    transform: translateX(4px);
}
.ss-btn--outline {
    border-color: #fff;
    background: transparent;
    padding: 0 27px 0 22px;
}
.ss-btn--outline:hover, .ss-btn--outline:focus-visible {
    border-color: var(--ss-orange);
    background: var(--ss-orange);
    box-shadow: none;
}
.ss-btn--md {
    height: 48.5px;
    padding: 0 26px 0 21px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 18px;
}
.ss-btn--lg {
    height: 56px;
    padding: 0 30px 0 22px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 20px;
}
.ss-btn--xl {
    height: 64px;
    padding: 0 26px;
    border-width: 2px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 20px;
    gap: 33px;
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 99;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ss-orange);
    color: #fff;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(242,105,49,.35);
    transition: background .3s, transform .3s ease;
}
.back-to-top:hover, .back-to-top:focus-visible {
    background: var(--ss-navy);
}

body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-track {
    background: #f5f5f5;
}
body::-webkit-scrollbar-thumb {
    background: var(--ss-orange);
    border-radius: 10px;
}

/* ==========================================================================
   Header — transparent over the hero, navy once the page scrolls
   ========================================================================== */
.ss-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: background .35s ease, box-shadow .35s ease;
}
/* scrolled: navy glass, the page shows through softly blurred */
.ss-header.scrolled {
    background: rgb(13 24 64 / 92%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 6px 24px rgba(5,15,47,.25);
}
/* Header container: same max width as the section container but a smaller
   gutter (32 / 44 in Figma vs 116), so it sits a little wider than the content */
.ss-header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--ss-container-max);
    height: var(--ss-header-h);
    margin: 0 auto;
    padding: 0 44px 0 32px;
    transition: height .35s ease;
}
.ss-header.scrolled .ss-header-inner {
    height: var(--ss-header-h-fixed);
}
.ss-logo {
    flex: none;
    width: 213px;
    transition: width .35s ease;
}
.ss-header.scrolled .ss-logo {
    width: 170px;
}
.ss-logo img {
    width: 100%;
}
.ss-nav {
    margin-left: 76px;
}
.ss-nav-list {
    display: flex;
    align-items: center;
    gap: 49px;
}
.ss-nav-list a {
    position: relative;
    font: 400 16px/1 var(--ss-font);
    color: #fff;
    white-space: nowrap;
}
.ss-nav-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--ss-orange);
    transition: width .3s;
}
.ss-nav-list a:hover {
    color: #fff;
}
.ss-nav-list a:hover::after {
    width: 100%;
}
.ss-btn-contact {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 143px;
    height: 48.6px;
    margin-left: auto;
    background: var(--ss-orange);
    color: #fff;
    font: 700 16px/1 var(--ss-font);
}
.ss-btn-contact:hover, .ss-btn-contact:focus-visible {
    background: #fff;
    color: var(--ss-orange);
}
.ss-burger {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    margin: 0 -10px 0 45px;
}
.ss-burger img {
    width: 21px;
    height: auto;
    transition: transform .3s ease;
}
.ss-burger:hover img {
    transform: scaleX(.8);
}

/* ==========================================================================
   Toggle menu — dark blurred overlay + orange panel on the right
   ========================================================================== */
.ss-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    transition: visibility .5s;
}
.ss-menu.is-open {
    visibility: visible;
}
.ss-menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,18,26,.88);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
    opacity: 0;
    transition: opacity .45s ease;
}
.ss-menu.is-open .ss-menu-overlay {
    opacity: 1;
}
.ss-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 409px;
    max-width: 100%;
    padding: 28px 79px 40px 48px;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(113.15deg, rgba(242,111,48,.82) 40.76%, rgba(240,78,53,.82) 100.3%);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.ss-menu.is-open .ss-menu-panel {
    transform: none;
}
/* Slim 5px scrollbar: a soft white line on the orange panel */
.ss-menu-panel::-webkit-scrollbar {
    width: 5px;
}
.ss-menu-panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,.12);
}
.ss-menu-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.6);
    border-radius: 5px;
}
.ss-menu-panel::-webkit-scrollbar-thumb:hover {
    background: #fff;
}
.ss-menu-panel::-webkit-scrollbar-button {
    display: none;
}
/* Firefox (only where the -webkit- scrollbar is unsupported, so Chrome keeps the 5px one) */
@supports not selector(::-webkit-scrollbar) {
    .ss-menu-panel {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.6) rgba(255,255,255,.12);
    }
}
.ss-menu-deco {
    position: absolute;
    top: 2.6px;
    left: 200.1px;
    width: 206px;
    height: 366px;
    overflow: hidden;
    pointer-events: none;
}
.ss-md {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-md img {
    flex: none;
    max-width: none;
    opacity: .06;
}
.ss-md--1 {
    left: -126.3px;
    top: -293.7px;
    width: 447.3px;
    height: 303.1px;
}
.ss-md--1 img {
    width: 329.2px;
    height: 310.9px;
    transform: rotate(2.72deg) skewX(-19.68deg);
}
.ss-md--2 {
    left: -69.7px;
    top: -441px;
    width: 824.9px;
    height: 752.7px;
}
.ss-md--2 img {
    width: 529.9px;
    height: 784.9px;
    transform: rotate(2.78deg) skewX(-19.35deg);
}
.ss-menu-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: -16px;
}
.ss-menu-logo {
    display: block;
    width: 266px;
}
.ss-menu-close {
    position: absolute;
    top: 28px;
    right: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: transform .3s ease;
}
.ss-menu-close:hover {
    transform: rotate(90deg);
}
.ss-menu-close img {
    width: 17px;
}
.ss-menu-list {
    position: relative;
    margin-top: 56px;
}
.ss-menu-list > li {
    position: relative;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .2s ease, transform .2s ease;
}
.ss-menu.is-open .ss-menu-list > li {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.ss-menu.is-open .ss-menu-list > li:nth-child(1) { transition-delay: .15s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(2) { transition-delay: .19s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(3) { transition-delay: .23s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(4) { transition-delay: .27s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(5) { transition-delay: .31s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(6) { transition-delay: .35s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(7) { transition-delay: .39s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(8) { transition-delay: .43s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(9) { transition-delay: .47s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(10) { transition-delay: .51s; }
.ss-menu.is-open .ss-menu-list > li:nth-child(11) { transition-delay: .55s; }
.ss-menu-list > li > a {
    display: inline-block;
    font: 700 20px/54.3px var(--ss-font);
    color: #fff;
}
.ss-menu-list a:hover, .ss-menu-list a:focus-visible {
    color: var(--ss-navy);
}
.ss-sub-toggle {
    position: absolute;
    top: 0;
    right: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 54px;
}
.ss-sub-toggle img {
    width: 14.4px;
    transition: transform .3s ease;
}
.has-sub.is-open > .ss-sub-toggle img {
    transform: rotate(180deg);
}
.ss-sub-menu {
    display: none;
    padding: 5px 0 5px 16px;
    border-left: 1px solid rgba(255,255,255,.35);
}
.ss-sub-menu a {
    display: block;
    padding: 6px 0;
    font: 400 16px/1.4 var(--ss-font);
    color: #fff;
}
.ss-menu-bottom {
    position: relative;
    margin-top: auto;
    padding-top: 40px;
}
.ss-menu-follow {
    margin-left: -2px;
    font: 400 16px/38px var(--ss-font-alt);
    color: #e8e8e8;
}
.ss-menu .ss-social {
    margin-top: 2px;
    gap: 36px;
}
.ss-menu-copy {
    margin: 20px 0 0 -2px;
    font: 400 13px/28px var(--ss-font-alt);
    color: #fff;
}

/* Social icons (menu + footer): the Figma SVGs used as masks, filled with the
   link colour, so hover can use the exact theme orange.
   Instagram is built from its three Figma layers. */
.ss-social {
    display: flex;
    align-items: center;
    gap: 42px;
}
.ss-social a {
    display: flex;
    align-items: center;
    color: #fff;
    transition: transform .3s ease, color .3s;
}
.ss-social a:hover,
.ss-social a:focus-visible {
    transform: translateY(-3px);
    color: var(--ss-orange);
}
/* on the orange menu panel orange would vanish: navy, like the menu links */
.ss-menu .ss-social a:hover,
.ss-menu .ss-social a:focus-visible {
    color: var(--ss-navy);
}
.ss-ic,
.ss-ic-ig {
    display: block;
    background-color: currentColor;
    -webkit-mask: no-repeat center / 100% 100%;
    mask: no-repeat center / 100% 100%;
}
.ss-ic--facebook {
    width: 12.25px;
    height: 22.7px;
    -webkit-mask-image: url('../img/icons/facebook.svg');
    mask-image: url('../img/icons/facebook.svg');
}
.ss-ic--linkedin {
    width: 22.17px;
    height: 22.17px;
    -webkit-mask-image: url('../img/icons/linkedin.svg');
    mask-image: url('../img/icons/linkedin.svg');
}
.ss-ic--instagram {
    position: relative;
    width: 20.65px;
    height: 20.65px;
    background: none;
}
.ss-ic-ig {
    position: absolute;
}
.ss-ic-ig--frame {
    inset: 0;
    -webkit-mask-image: url('../img/icons/instagram-frame.svg');
    mask-image: url('../img/icons/instagram-frame.svg');
}
.ss-ic-ig--dot {
    left: 14.62px;
    top: 3.45px;
    width: 2.58px;
    height: 2.58px;
    -webkit-mask-image: url('../img/icons/instagram-dot.svg');
    mask-image: url('../img/icons/instagram-dot.svg');
}
.ss-ic-ig--lens {
    left: 5.16px;
    top: 5.17px;
    width: 10.32px;
    height: 10.32px;
    -webkit-mask-image: url('../img/icons/instagram-lens.svg');
    mask-image: url('../img/icons/instagram-lens.svg');
}

/* ==========================================================================
   Hero — slider (image or video per slide) + common help block
   ========================================================================== */
/* The banner fills the screen; of the white curve (11.1vw tall, 168 / 1518) only the
   corners peek in on load (--ss-curve-peek), the rest shows as the page scrolls.
   --ss-hero-bottom: space from the bottom of the screen to the buttons; dots and
   help block are placed from it. min-height stops the text running under the header. */
.ss-hero {
    --ss-curve-h: 11.1vw;
    --ss-curve-peek: 3.5vw;
    --ss-curve-below: calc(var(--ss-curve-h) - var(--ss-curve-peek));
    --ss-hero-bottom: clamp(96px, 13vh, 128px);
    position: relative;
    z-index: 1;
    height: calc(100vh + var(--ss-curve-below));
    height: calc(100svh + var(--ss-curve-below));
    min-height: calc(560px + var(--ss-curve-below));
    background: var(--ss-navy);
}
.ss-hero-main {
    position: relative;
    height: 100%;
}
.ss-hero-slider,
.ss-hero-slider .slick-list,
.ss-hero-slider .slick-track {
    height: 100%;
}
.ss-hero-slide {
    position: relative;
    height: calc(100vh + var(--ss-curve-below));
    height: calc(100svh + var(--ss-curve-below));
    min-height: calc(560px + var(--ss-curve-below));
}
.ss-hero-slider:not(.slick-initialized) .ss-hero-slide:not(:first-child) {
    display: none;
}
.ss-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.ss-hero-media img,
.ss-hero-media video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.ss-hero-slide.slick-active .ss-hero-media img {
    animation: ssHeroZoom 8s ease-out both;
}
@keyframes ssHeroZoom {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}
.ss-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,40,55,.39);
}
.ss-hero-slide .ss-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: calc(var(--ss-header-h) + 24px);
}
/* sits on the bottom spacing; if the screen is too short it starts below the header instead */
.ss-hero-content {
    margin-top: auto;
    padding: 0 0 calc(var(--ss-hero-bottom) + var(--ss-curve-h)) 1px;
}
.ss-hero-title > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 14.2em; /* 653px at 46px: same line breaks at every font size */
    font: 700 46px/60px var(--ss-font);
    color: #fff;
}
.ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
    max-width: 521px;
    margin-top: 31px;
}
.ss-hero-text p {
    font: 400 19px/32px var(--ss-font);
    color: #fff;
}
.ss-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 53px;
}
/* Slide text enters after the slide change */
.ss-hero-slide .ss-hero-title > :is(h1, h2, h3, h4, h5, h6),
.ss-hero-slide .ss-hero-text > :not(h1, h2, h3, h4, h5, h6),
.ss-hero-slide .ss-hero-btns {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.ss-hero-slide.is-in .ss-hero-title > :is(h1, h2, h3, h4, h5, h6),
.ss-hero-slide.is-in .ss-hero-text > :not(h1, h2, h3, h4, h5, h6),
.ss-hero-slide.is-in .ss-hero-btns {
    opacity: 1;
    transform: none;
}
.ss-hero-slide.is-in .ss-hero-text > :not(h1, h2, h3, h4, h5, h6) {
    transition-delay: .15s;
}
.ss-hero-slide.is-in .ss-hero-btns {
    transition-delay: .3s;
}

/* Slider dots: 12px grey dots, the active one an empty white ring */
.ss-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--ss-hero-bottom) + var(--ss-curve-h) - 69px);
    z-index: 3;
    max-width: var(--ss-container-max);
    margin: 0 auto;
    padding: 0 var(--ss-gutter);
    pointer-events: none;
}
.ss-hero-dots .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    gap: 27.8px;
    width: auto;
    margin: 0 0 0 38.6%;
    pointer-events: auto;
}
.ss-hero-dots .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0;
}
/* The ring is a border (not a box-shadow): the reset's button:focus rule
   removes box-shadows, which hid the ring once a dot had been clicked */
.ss-hero-dots .slick-dots li button {
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    background: #d9d9d9;
    font-size: 0;
    transition: background .3s, border-color .3s, width .3s, height .3s, margin .3s;
}
.ss-hero-dots .slick-dots li button::before {
    display: none;
}
.ss-hero-dots .slick-dots li button:hover {
    border-color: #fff;
    background: #fff;
}
.ss-hero-dots .slick-dots li.slick-active button {
    width: 16px;
    height: 16px;
    margin: -2px;
    border-color: #fff;
    background: transparent;
}
.ss-hero-dots .slick-dots li button:focus-visible {
    outline: 2px solid var(--ss-orange);
    outline-offset: 3px;
}

/* Help block */
.ss-help-wrap {
    position: absolute;
    left: 0;
    right: 0;
    /* as in Figma the box dips onto the white curve: its bottom sits 19.6% of
       the curve's height below the curve's top edge (860 vs 827 on a 168px curve) */
    bottom: calc(var(--ss-curve-h) * .804);
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.ss-help {
    width: 490px;
    margin-right: -26px;
    padding: 17px 25px 25px 24px;
    border-radius: 9px;
    background: rgba(31,29,47,.83);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: auto;
}
.ss-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 34px;
}
.ss-help-head p {
    font: 400 17px/34px var(--ss-font);
    color: #fff;
}
.ss-help-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9.3px;
    margin: 12px 0 0 2px;
}
.ss-help-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 138px;
    padding: 25px 6px 14px;
    border-radius: 6px;
    background: var(--ss-purple);
    color: #fff;
    text-align: center;
    transition: background .3s, color .3s, transform .3s ease, box-shadow .3s;
}
.ss-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}
.ss-help-icon img {
    max-height: 45px;
    width: auto;
    transition: filter .3s;
}
.ss-help-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: auto;
    font: 400 14px/18px var(--ss-font);
}
/* Hover / keyboard focus: white card with the icon in brand orange */
.ss-help-card:hover,
.ss-help-card:focus-visible {
    background: #fff;
    color: #000;
}
.ss-help-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
.ss-help-card:hover .ss-help-icon img,
.ss-help-card:focus-visible .ss-help-icon img {
    filter: brightness(0) saturate(100%) invert(51%) sepia(73%) saturate(2373%) hue-rotate(345deg) brightness(98%) contrast(92%);
}

.ss-hero-curve {
    position: absolute;
    left: -6px;
    bottom: -2px;
    z-index: 2;
    width: calc(100% + 12px);
    max-width: none;
    height: auto;
    pointer-events: none;
}

/* ==========================================================================
   A cleaning partner that takes ownership
   ========================================================================== */
.ss-partner {
    z-index: 2;
    padding-top: 55px;
    background: #fff;
}
.ss-partner-grid {
    display: grid;
    grid-template-columns: 664.6fr 615.4fr;
    align-items: start;
}
.ss-partner-copy {
    padding: 0 0 40px 0;
}
.ss-partner-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 12.57em; /* 628px at 50px, as in Figma */
    margin-left: -4px;
}
.ss-partner-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
    margin: 27px 0 0 4px; /* 4px: back from the heading's -4px */
}
.ss-partner-text > :not(h1, h2, h3, h4, h5, h6) {
    max-width: 520px;
    margin: 28px 0 0 -3px;
}
.ss-partner-text p {
    font: 400 18px/30px var(--ss-font);
    color: var(--ss-ink);
}
.ss-partner-copy .ss-btn {
    margin: 43px 0 0 -2px;
}
/* Photo frame + cut-out person: the person rises above the section top */
/* sits on the bottom of the section: when the text column is the taller one
   (tab landscape) the person still stands on the section edge */
.ss-partner-visual {
    position: relative;
    align-self: end;
    width: 116.8%;
    aspect-ratio: 718.8 / 782;
    margin-top: -106px;
}
.ss-partner-bg {
    position: absolute;
    left: 0;
    top: 11.64%;
    width: 73.87%;
    height: 80.95%;
    overflow: hidden;
    border-radius: 24px;
}
.ss-partner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 60%;
}
.ss-partner-person {
    position: absolute;
    right: 0;
    top: 0;
    width: 93.2%;
    height: 100%;
    object-fit: contain;
    /* the cut-out is cropped tight at the sides: 36% keeps the girl where Figma has her
       (centre at 46.4% of this box) */
    object-position: 36% bottom;
}

/* ==========================================================================
   Why you will enjoy working with Sunstar
   ========================================================================== */
.ss-why {
    overflow: hidden;
    padding: 108px 0 104px;
    background: var(--ss-bg);
}
.ss-why-deco {
    position: absolute;
    top: -205px;
    right: 0;
    width: 683px;
    max-width: none;
    pointer-events: none;
}
.ss-why .ss-container {
    position: relative;
}
.ss-why-title {
    text-align: center;
}
.ss-why-title > * {
    font: 700 39px/55px var(--ss-font);
    color: var(--ss-ink);
}
.ss-why-title span,
.ss-why-title strong {
    font-weight: inherit;
    color: var(--ss-orange);
}
.ss-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 18px;
    margin-top: 57px;
}
.ss-why-card {
    min-height: 293px;
    padding: 35px 28px 30px 29px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 32px rgba(0,0,0,.07);
    transition: transform .4s ease, box-shadow .4s ease, opacity .8s ease;
}
.ss-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(13,22,49,.12);
}
.ss-why-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-height: 70px;
}
.ss-why-card-head h3 {
    max-width: 205px;
    font: 700 25px/35px var(--ss-font);
    color: var(--ss-heading);
}
.ss-why-card-head img {
    flex: none;
    width: auto;
    max-height: 56px;
    margin-top: 4px;
    transition: transform .4s ease;
}
.ss-why-card:hover .ss-why-card-head img {
    transform: scale(1.1);
}
.ss-why-card p {
    max-width: 255px;
    margin: 19px 0 0 4px;
    font: 400 16px/26px var(--ss-font);
    color: var(--ss-text);
}

/* ==========================================================================
   Service model (two image + text rows)
   ========================================================================== */
.ss-model {
    padding: 102px 0 120px;
    background: #fff;
}
.ss-model-row {
    display: flex;
    align-items: center; /* text block centred against the image */
}
.ss-model-row + .ss-model-row {
    margin-top: 105px;
}
.ss-model-img {
    flex: none;
    width: 51.25%;
    margin-left: .625%;
    aspect-ratio: 656 / 466;
    overflow: hidden;
}
.ss-model-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}
.ss-model-img:hover img {
    transform: scale(1.04);
}
.ss-model-copy {
    width: 35.6%;
    margin-left: 6.5%;
}
.ss-model-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 10.77em; /* 409px at 38px */
}
.ss-model-text > :not(h1, h2, h3, h4, h5, h6) {
    margin-top: 18px;
}
.ss-model-text p {
    font: 400 18px/31px var(--ss-font);
    color: var(--ss-text);
}
.ss-model-row--rev {
    flex-direction: row-reverse;
}
.ss-model-row--rev .ss-model-img {
    margin: 0 .3% 0 auto;
}
.ss-model-row--rev .ss-model-copy {
    width: 39.7%;
    margin-left: 4.06%;
}
.ss-model-row--rev .ss-title > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 13.37em; /* 508px at 38px */
}
.ss-model-row--rev .ss-model-text > :not(h1, h2, h3, h4, h5, h6) {
    max-width: 456px;
    padding-left: 3px;
}

/* ==========================================================================
   Technology with a practical purpose (dark card)
   ========================================================================== */
.ss-tech {
    padding-bottom: 75px;
    background: linear-gradient(#fff 0 105px, var(--ss-bg) 105px);
}
.ss-tech-card {
    position: relative;
    max-width: 1430px;
    min-height: 860px;
    margin: 0 auto;
    padding: 57px 47px;
    border-radius: 15px;
    background: #052930;
    box-shadow: 0 4px 34px 5px rgba(0,0,0,.25);
}
.ss-tech-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 15px;
    opacity: .2;
}
.ss-tech-bg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.ss-tech-grid {
    position: relative;
    display: grid;
    grid-template-columns: 708fr 628fr;
    column-gap: 59px;
    align-items: start;
}
.ss-tech-video {
    position: relative;
    display: block;
    aspect-ratio: 708 / 720;
    border-radius: 19px;
    box-shadow: 0 4px 58px 10px rgba(0,0,0,.25);
}
.ss-tech-video-img {
    width: 100%;
    height: 100%;
    border-radius: 19px;
    object-fit: cover;
}
.ss-tech-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 19px;
    background: rgba(0,0,0,.2);
    transition: background .4s;
}
.ss-tech-video:hover::before {
    background: rgba(0,0,0,.35);
}
/* Play button group, placed in % of the 708 x 720 Figma frame */
.ss-play {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.ss-play-label {
    position: absolute;
    right: 36%;
    top: 44.17%;
    width: 160px;
    font: 400 25px/33px var(--ss-font);
    color: #fff;
    text-align: right;
    text-transform: capitalize;
}
.ss-play-btn {
    position: absolute;
    left: 66.67%;
    top: 38.06%;
    width: 149px;
    height: 149px;
}
.ss-play-btn img {
    position: absolute;
    max-width: none;
}
.ss-play-outer {
    inset: 0;
    width: 149px;
    animation: ssPulse 2.4s ease-out infinite;
}
.ss-play-inner {
    left: 20.5px;
    top: 20.5px;
    width: 108px;
    transition: transform .4s ease;
}
.ss-play-tri {
    left: 64px;
    top: 63px;
    width: 25.66px;
    transform: rotate(90deg);
}
.ss-tech-video:hover .ss-play-inner {
    transform: scale(1.08);
}
@keyframes ssPulse {
    0% { transform: scale(.92); opacity: 1; }
    70% { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}
.ss-play-line {
    position: absolute;
    left: 87.85%;
    top: 49.17%;
    width: 114px;
    max-width: none;
}
.ss-tech-copy {
    padding-top: 94px;
}
.ss-tech-copy .ss-title > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 9.2em; /* 460px at 50px */
    font-size: 50px;
    line-height: 64px;
}
.ss-tech-copy .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
    margin: 42px 0 0 5px;
}
.ss-tech-text > :not(h1, h2, h3, h4, h5, h6) {
    max-width: 504px;
    margin: 27px 0 0 2px;
}
.ss-tech-text p {
    font: 400 20px/33px var(--ss-font);
    color: #fff;
}
.ss-tech-copy .ss-btn {
    margin: 54px 0 0 3px;
}

/* ==========================================================================
   Orange background shape shared by industries / people / contact.
   Positioned from the contact section (where it shows), transform as in Figma.
   ========================================================================== */
.ss-shape-zone {
    position: relative;
    z-index: 1;
}
/* Clips the (very large) shape: the tip may show 166px up into the industries
   section; nothing spills past the sides or the bottom, so no extra page height */
/* --ss-shape-shift: how far the star sits right of its Figma place. It is placed from
   the form's left edge (container + gutter + 616/1280 of the content, 732px in Figma),
   so the star's rounded end always runs a little under the form and the text stays on
   it; on wide screens more of the full star shows to the left.
   The tip above the section (--ss-tip) comes from a second copy (--tip), placed as in
   Figma against the window edge, so it is the same small corner on every screen; the
   people photo covers the join between the two copies. */
.ss-shape-clip {
    --ss-tip: 98px; /* Figma: the tip shows from 6170 to the section top at 6268 */
    --ss-shape-shift: calc(max(0px, (100% - var(--ss-container-max)) / 2) + var(--ss-gutter)
        + (min(100%, var(--ss-container-max)) - 2 * var(--ss-gutter)) * .48125 - 732px);
    position: absolute;
    top: calc(-1 * var(--ss-tip));
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(0 var(--ss-tip), 100% var(--ss-tip), 100% 100%, 0 100%);
}
.ss-shape-clip--tip {
    --ss-shape-shift: 0px;
    clip-path: polygon(0 0, 100% 0, 100% var(--ss-tip), 0 var(--ss-tip));
}
/* the tip copy is placed from the top of the people section (6268 in Figma, star top
   at 3217.05), so the same slice of the star shows whatever the sections' heights */
.ss-shape-clip--tip .ss-shape {
    top: calc(var(--ss-tip) - 3050.95px);
    bottom: auto;
}
.ss-shape {
    position: absolute;
    left: calc(var(--ss-shape-shift) - 2748.21px);
    bottom: -804.8px; /* 8209 - (3217.05 + 5796.77): anchored to the bottom of the contact section */
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3627.88px;
    height: 5796.77px;
    pointer-events: none;
}
.ss-shape-inner {
    flex: none;
    width: 3172.85px;
    height: 5073.91px;
    transform: rotate(-13.55deg) scale(1, .99) skewX(-7.52deg);
}
.ss-shape-inner img {
    width: 100%;
    height: 100%;
    max-width: none;
}

/* ==========================================================================
   Industries we serve — sticky image, points activate while scrolling
   ========================================================================== */
.ss-ind {
    z-index: 1;
    padding: 59px 0 110px;
}
.ss-ind-grid {
    display: grid;
    grid-template-columns: 656fr 637fr;
    align-items: start;
    margin-right: -13px;
}
.ss-ind-intro > :not(h1, h2, h3, h4, h5, h6) {
    max-width: 555px;
    margin-top: 31px;
}
.ss-ind-intro p {
    font: 400 19px/33px var(--ss-font);
    color: #171616;
}
.ss-ind-list-wrap {
    position: relative;
    margin-top: 45px;
}
/* Grey track + orange progress, sized by custom.js to run from the first to the active dot */
.ss-ind-track {
    position: absolute;
    left: 24px;
    top: 22px;
    width: 2px;
    height: calc(100% - 100px);
    background: #d3d3d3;
}
.ss-ind-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--ss-orange);
    transition: height .5s ease;
}
.ss-ind-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-bottom: 55px;
    cursor: pointer;
}
.ss-ind-dot {
    position: relative;
    z-index: 1;
    flex: none;
    width: 41.5px;
    height: 33.1px;
    margin: 5px 0 0 8px;
    background: url('../img/icons/industry-dot.svg') no-repeat left center / 41.5px 33.1px;
    transition: transform .4s ease;
}
/* passed + active points: solid orange dot */
.ss-ind-item.is-passed .ss-ind-dot,
.ss-ind-item.is-active .ss-ind-dot {
    background-image: url('../img/icons/industry-dot-active.svg');
    background-size: 32.8px 33.1px;
    background-position: 1.86px center;
}
.ss-ind-item.is-active .ss-ind-dot {
    transform: scale(1.08);
}
.ss-ind-body {
    margin-left: 23.5px;
}
.ss-ind-body h3 {
    font: 700 29px/38px var(--ss-font);
    color: var(--ss-ink);
    transition: color .4s ease;
}
.ss-ind-item:hover h3 {
    color: var(--ss-orange);
}
.ss-ind-item.is-active h3 {
    color: #d46e23;
}
.ss-ind-desc {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s ease, opacity .4s ease, margin .5s ease;
}
.ss-ind-desc-inner {
    min-height: 0;
    overflow: hidden;
}
.ss-ind-item.is-active .ss-ind-desc {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 1px;
}
.ss-ind-desc p {
    font: 400 16px/26px var(--ss-font);
    color: var(--ss-text);
}
.ss-ind-mob-img {
    display: none;
}
.ss-ind-media {
    position: relative;
    align-self: stretch; /* full row height, so the image can stay sticky the whole way */
    padding-top: 10px;
}
.ss-ind-sticky {
    position: sticky;
    top: calc(var(--ss-header-h-fixed) + 24px);
    width: 100%;
    max-width: 637px;
    height: min(747px, calc(100vh - var(--ss-header-h-fixed) - 48px));
    overflow: hidden;
    border-radius: 24px;
    background: #dcdbe6;
}
.ss-ind-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .7s ease, transform 1.2s ease;
}
.ss-ind-img.is-active {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Developing our people
   ========================================================================== */
.ss-people {
    z-index: 2;
    min-height: 826px;
    padding: 99px 0 93px;
    overflow: hidden;
}
.ss-people-bg {
    position: absolute;
    inset: 0;
}
.ss-people-bg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.ss-people-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,19,36,.14);
}
.ss-people .ss-container {
    position: relative;
}
.ss-people-card {
    width: 572.4px;
    max-width: 100%;
    margin-left: 1px;
    padding: 59px 52px 67px 58px;
    border-radius: 8px;
    background: rgba(37,31,78,.91);
    box-shadow: 0 4px 32px rgba(0,0,0,.07);
}
.ss-title--people > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 9.5em; /* keeps "Developing Our / People" on two lines, as in Figma */
    font-size: 50px;
    line-height: 58px;
}
.ss-people-card .ss-has-line > :is(h1, h2, h3, h4, h5, h6)::after {
    width: 125px;
    margin: 36px 0 0 6px;
}
.ss-people-text > :not(h1, h2, h3, h4, h5, h6) {
    margin: 21px 0 0 2px;
}
.ss-people-text p {
    font: 400 20px/34px var(--ss-font);
    color: #fff;
}
.ss-people-card .ss-btn {
    margin: 40px 0 0 2px;
}

/* ==========================================================================
   Contact — let's talk + inquiry form
   ========================================================================== */
.ss-contact {
    z-index: 1;
    padding: 116px 0 187px;
}
.ss-contact-grid {
    display: grid;
    grid-template-columns: 616fr 664fr;
    align-items: start;
}
.ss-contact-copy {
    padding: 62px 0 0 19px;
}
.ss-contact-title > :is(h1, h2, h3, h4, h5, h6) {
    max-width: 6.9em; /* 510px at 74px */
    font: 700 74px/81px var(--ss-font);
    color: #fff;
}
.ss-contact-text > :not(h1, h2, h3, h4, h5, h6) {
    max-width: 527px;
    margin: 32px 0 0 2px;
}
.ss-contact-text p {
    font: 400 24px/39px var(--ss-font);
    color: #fff;
}
.ss-contact-list {
    margin: 50px 0 0 12px;
}
.ss-contact-list li {
    display: flex;
    align-items: center;
}
.ss-contact-list li + li {
    margin-top: 19px;
}
.ss-contact-list img {
    flex: none;
    width: 35px;
}
.ss-contact-list li + li img {
    width: 32px;
    margin-left: 2px;
}
.ss-contact-list a {
    margin-left: 21px;
    font: 600 32px/30px var(--ss-font-alt);
    color: #fff;
}
.ss-contact-list li + li a {
    margin-left: 26px;
}
.ss-contact-list a:hover {
    color: var(--ss-navy);
}
.ss-contact-copy .ss-btn {
    margin: 63px 0 0 3px;
}
.ss-contact-copy .ss-btn:hover {
    border-color: #fff;
    background: #fff;
    color: var(--ss-orange);
}
.ss-contact-copy .ss-btn:hover .ss-btn-arrow {
    filter: brightness(0) saturate(100%) invert(51%) sepia(73%) saturate(2373%) hue-rotate(345deg) brightness(98%) contrast(92%);
}

/* Form card */
.ss-form-card {
    width: 626px;
    max-width: 100%;
    min-height: 812px;
    padding: 52px 58px 54px 50px;
    border-radius: 21px;
    background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(4.5px);
    backdrop-filter: blur(4.5px);
    box-shadow: 0 4px 44px rgba(0,0,0,.16);
}
.ss-form-title > :is(h1, h2, h3, h4, h5, h6) {
    margin-left: 3px;
    font: 700 37px/50px var(--ss-font);
    letter-spacing: -.37px;
    color: #4c4c58;
}
.ss-form-intro > :not(h1, h2, h3, h4, h5, h6) {
    margin: 16px 0 0 4px;
}
.ss-form-intro p {
    font: 400 16px/27px var(--ss-font);
    color: #171616;
}

/* ---------- Contact Form 7 markup ---------- */
.ss-cf-form {
    margin-top: 31px;
}
.ss-cf-field {
    position: relative;
}
.ss-cf-field + .ss-cf-field {
    margin-top: 20px;
}
.ss-cf-field:first-of-type + .ss-cf-field {
    margin-top: 17px;
}
.wpcf7-form-control-wrap {
    position: relative;
    display: block;
}
.ss-cf-input {
    display: block;
    width: 100%;
    height: 63px;
    padding: 21px 22px 0;
    border: 1px solid #a29c9c;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 23px rgba(0,0,0,.1);
    font: 400 19px/1 var(--ss-font-alt);
    color: #000;
    transition: border-color .3s;
}
.ss-cf-input:focus {
    border-color: var(--ss-orange);
}
select.ss-cf-input {
    padding-right: 48px;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url('../img/icons/select-caret.svg') no-repeat right 29px center / 13.7px 7.6px;
    cursor: pointer;
}
/* Floating label: sits in the field like a placeholder, moves up small once focused or filled */
.ss-cf-label {
    position: absolute;
    left: 23px;
    top: 21px;
    z-index: 1;
    margin: 0;
    font: 400 18px/21px var(--ss-font-alt);
    color: #514f4f;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .25s ease, color .25s ease, top .25s ease;
}
.ss-cf-field.is-focus .ss-cf-label,
.ss-cf-field.is-filled .ss-cf-label {
    top: 10px;
    transform: scale(.722);
    color: #787575;
}
.ss-cf-note {
    margin: 34px 0 0 6px;
    font: 400 15px/27px var(--ss-font-alt);
    color: #2f2d32;
}
.ss-cf-submit {
    position: relative;
    margin-top: 31px;
}
.ss-btn--submit {
    justify-content: center;
    width: 521px;
    max-width: 100%;
    height: 70px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 25px;
    cursor: pointer;
}
/* Validation tip (CF7 appends it inside the wrap) */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font: 400 13px/1.3 var(--ss-font-alt);
    color: #e0251b;
}
.wpcf7-not-valid {
    border-color: #e0251b !important;
}
.wpcf7-spinner {
    position: absolute;
    right: 20px;
    top: 50%;
    margin: -12px 0 0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: #ff0000;
    text-align: center;
    margin: 25px 0 0;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    text-align: center;
    margin: 15px 0 0;
}
.wpcf7-response-output:empty {
    display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ss-footer {
    position: relative;
    overflow: hidden;
    /* padding: 81px 0 30px; */
    padding: 81px 0 45px;
    background: linear-gradient(180deg, #0d1840 0%, #050f2f 87%);
    color: #fff;
}
.ss-footer-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Each layer: a box (size/position from Figma, top relative to the footer)
   centring the SVG, which carries the Figma rotate / scale / skew */
.ss-fd {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-fd img {
    flex: none;
    max-width: none;
    opacity: .1;
}
.ss-fd--1 {
    right: 29.9px;
    top: 139.8px;
    width: 409.06px;
    height: 305.27px;
}
.ss-fd--1 img {
    width: 280.48px;
    height: 279.27px;
    transform: rotate(-11.38deg) scale(1.01, .97) skewX(16.59deg);
}
.ss-fd--2 {
    right: -369.2px;
    top: -100.05px;
    width: 768.39px;
    height: 709.62px;
}
.ss-fd--2 img {
    width: 447.61px;
    height: 693.43px;
    transform: rotate(-11.45deg) scale(1.01, .97) skewX(16.37deg);
}
.ss-fd--3 {
    right: -407.5px;
    top: 1.74px;
    width: 480.82px;
    height: 349.81px;
}
.ss-fd--3 img {
    width: 335.17px;
    height: 316.96px;
    transform: rotate(-11.38deg) scale(1.01, .97) skewX(16.58deg);
}
.ss-footer .ss-container {
    position: relative;
}
.ss-footer-grid {
    display: grid;
    grid-template-columns: 387fr 374fr 257fr 262fr;
}
.ss-f-logo {
    padding-left: 24px;
}
.ss-f-logo img {
    width: 294px;
}
.ss-f-col {
    padding-top: 2px;
}
.ss-f-col h3 {
    font: 400 20px/34px var(--ss-font-alt);
    color: #fff;
}
.ss-f-office address {
    max-width: 15em; /* breaks after "Greens Road" as in the design, at any font size */
    margin: 17px 0 0 1px;
    font: 300 18px/31px var(--ss-font-alt);
}
.ss-f-directions {
    display: inline-block;
    margin: 7px 0 0 2px;
    font: 400 16px/29px var(--ss-font-alt);
    color: #b2adad;
    text-decoration: underline;
}
.ss-f-follow {
    margin: 31px 0 0 4px;
    font: 400 16px/60px var(--ss-font-alt);
    color: #b2adad;
}
.ss-footer .ss-social {
    margin: -4px 0 0 4px;
}
.ss-f-links {
    margin-top: 16px;
}
.ss-f-links a {
    font: 300 17px/40px var(--ss-font-alt);
    color: #fff;
}
.ss-f-links a:hover, .ss-f-directions:hover {
    color: var(--ss-orange);
}
.ss-f-services h3 {
    margin-left: 2px;
}
/* the copyright shares the Services column's cell, at its foot, its last line level
   with "Contact Us" (bottom padding matches the taller line-height of the links) */
.ss-f-services,
.ss-f-copy {
    grid-column: 4;
    grid-row: 1;
}
.ss-f-copy {
    align-self: end;
    margin: 0 0 0 7px;
    padding: 0 0 5px;
    font: 300 15px/28px var(--ss-font-alt);
}
.ss-f-copy a {
    text-decoration: none;
}
.ss-f-copy a:hover {
    color: var(--ss-orange);
}

/* 404 page */
.error-page {
    padding: 220px 0 120px;
    text-align: center;
}
.error-page h1 {
    font: 900 120px/1 var(--ss-font);
    color: var(--ss-orange);
}
.error-page h4 {
    font: 700 50px/58px var(--ss-font);
    margin: 30px 0;
    color: var(--ss-blue);
}

/* ==========================================================================
   Preloader — navy screen, the star spins in inside a turning orange ring,
   the wordmark rises, the bar follows the real page load (--p, 0..1, set by
   custom.js). Exit: the content lifts away, then the navy and orange panels
   slide up one after the other to uncover the page.
   ========================================================================== */
html.ss-loading {
    overflow: hidden;
}
.ss-preloader {
    --p: 0;
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ss-pl-panel {
    position: absolute;
    inset: 0;
    transition: transform .8s cubic-bezier(.76,0,.24,1);
}
.ss-pl-panel--orange {
    background: linear-gradient(160deg, #f2752e 0%, #ef4136 100%);
}
.ss-pl-panel--navy {
    background: radial-gradient(circle at 50% 42%, #16245a 0%, var(--ss-navy) 45%, #050f2f 100%);
}
.ss-pl-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity .45s ease, transform .6s cubic-bezier(.76,0,.24,1);
}

/* Logo: the same image twice, clipped to the star (top) and to the wordmark (bottom) */
.ss-pl-mark {
    position: relative;
    width: 220px;
    aspect-ratio: 600 / 494;
    margin-bottom: 40px; /* room for the lowered wordmark */
}
.ss-pl-star,
.ss-pl-word {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ss-pl-star {
    clip-path: inset(0 0 48% 0);
    transform-origin: 50% 28.3%; /* centre of the star */
    animation: ssPlStar 1.3s cubic-bezier(.34,1.56,.64,1) .1s both,
               ssPlFloat 3s ease-in-out 1.6s infinite;
}
.ss-pl-word {
    /* moved down 40px: space between the ring around the star and the wordmark */
    top: 40px;
    bottom: -40px;
    clip-path: inset(55% 0 0 0);
    animation: ssPlWord .9s cubic-bezier(.22,1,.36,1) .75s both;
}
@keyframes ssPlStar {
    0% { opacity: 0; transform: scale(.2) rotate(-200deg); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes ssPlFloat {
    0%, 100% { transform: none; }
    50% { transform: translateY(-5px) scale(1.03); }
}
@keyframes ssPlWord {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

/* Glow and turning ring behind the star (star centre: 50% / 28.3%) */
.ss-pl-glow,
.ss-pl-ring {
    position: absolute;
    left: 50%;
    top: 28.3%;
    border-radius: 50%;
    pointer-events: none;
}
.ss-pl-glow {
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    background: radial-gradient(circle, rgba(242,105,49,.35) 0%, rgba(242,105,49,0) 65%);
    animation: ssPlGlow 2.4s ease-in-out infinite;
}
.ss-pl-ring {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    background: conic-gradient(from 0deg, rgba(242,117,46,0) 0deg, #f2752e 200deg, #ef4136 300deg, rgba(239,65,54,0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: ssPlRingIn .8s ease .3s both, ssPlSpin 1.4s linear infinite;
}
@keyframes ssPlGlow {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}
@keyframes ssPlRingIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ssPlSpin {
    to { transform: rotate(360deg); }
}

/* Progress */
.ss-pl-bar {
    position: relative;
    width: 180px;
    height: 3px;
    margin-top: 34px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255,255,255,.12);
    animation: ssPlWord .8s ease .9s both;
}
.ss-pl-bar span {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #f2752e, #ef4136);
    transform: scaleX(var(--p));
    transform-origin: left center;
}
.ss-pl-count {
    margin-top: 12px;
    font: 500 13px/1 var(--ss-font-alt);
    letter-spacing: .14em;
    color: rgba(255,255,255,.7);
    animation: ssPlWord .8s ease 1s both;
}

/* Exit */
.ss-preloader.is-done .ss-pl-inner {
    opacity: 0;
    transform: translateY(-40px) scale(.96);
}
.ss-preloader.is-done .ss-pl-panel--navy {
    transform: translateY(-100%);
    transition-delay: .15s;
}
.ss-preloader.is-done .ss-pl-panel--orange {
    transform: translateY(-100%);
    transition-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {
    .ss-pl-star,
    .ss-pl-word,
    .ss-pl-ring,
    .ss-pl-glow,
    .ss-pl-bar,
    .ss-pl-count {
        animation: none;
    }
    .ss-pl-panel {
        transition: opacity .3s ease;
    }
    .ss-preloader.is-done .ss-pl-panel {
        transform: none;
        opacity: 0;
    }
}

/* ==========================================================================
   WordPress
   ========================================================================== */
/* Inner pages without a banner of their own: navy header bar, content below it */
body:not(.home) .ss-header {
    background: rgba(13,24,64,.96);
}
.ss-page {
    padding: calc(var(--ss-header-h) + 60px) 0 90px;
    background: #fff;
}
.ss-page-entry h1 {
    margin-bottom: 30px;
    font: 700 46px/1.25 var(--ss-font);
    color: var(--ss-blue);
}
.ss-page-content {
    font: 400 18px/1.7 var(--ss-font);
}
.ss-page-content > * + * {
    margin-top: 1em;
}

/* Admin bar (logged in): the fixed header and the menu panel sit below it */
.admin-bar .ss-header,
.admin-bar .ss-menu-panel {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .ss-header,
    .admin-bar .ss-menu-panel {
        top: 46px;
    }
}
@media (max-width: 600px) {
    /* the admin bar scrolls away on small phones */
    .admin-bar .ss-header {
        top: 0;
    }
}