.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Open Sans';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans 3';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
/* ================================================================
   NOVA CLEANING — GLOBAL STYLESHEET
   ================================================================
   For Oxygen Builder: paste into Manage > Stylesheets as a new sheet.

   Fonts load via @import. For faster loading, instead add this to your
   site <head> (Oxygen > Manage > Settings > Global Styles > Custom Code
   > Header) and delete the @import below:

     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&display=swap" rel="stylesheet">

   TYPOGRAPHY NOTE — The brand book pairs Poppins (the workhorse, matched
   to the logo wordmark) with Fraunces Italic (the soloist, used sparingly
   for italic accents and pull-quotes). `--display` and `--body` both
   resolve to Poppins. `--serif` resolves to Fraunces and should ONLY be
   used in italic contexts.

   SPARKLE PLACEMENT RULE — Sparkles are part of the Nova brand, but they
   must NEVER sit behind text, cards, photos, or interactive elements.
   They live in three safe zones only:
     1. The top 60px of a section (in the section's padding-top whitespace)
     2. The bottom 60px of a section (in the section's padding-bottom)
     3. Outside the .container max-width (in the horizontal gutters on
        wide viewports)
   Use the .deco-band class for sparkle containers — it constrains them
   to those safe zones automatically. Never inline-position a sparkle
   inside a content area "by hand."
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&display=swap');

/* ================================================================
   DESIGN TOKENS
   ================================================================ */

:root {
  /* Brand palette — sampled directly from the Nova Cleaning logo.
     See brand book sections 04 (Logo) and 05 (Color) for usage. */
  --azure:        #01ABEE;  /* Cerulean — "NOVA" blue. Primary CTAs, italic accents. */
  --teal:         #53C3CE;  /* Tidepool — "CLEANING" cyan. Secondary accents. */
  --sky:          #8CD7F6;  /* Sky — soft tint. Hovers, backgrounds. */
  --ocean:        #1C6FA3;  /* Deep ocean — anchor blue. Dark sections, headings. */

  /* Derived neutrals */
  --ink:          #0E3653;  /* Body copy — near-black blue */
  --ink-soft:     #355975;  /* Secondary text */
  --ink-mute:     #7B96AE;  /* Captions, metadata */
  --line:         #D5E5EF;  /* Hairline borders */
  --tint:         #E1F2F8;  /* Cool wash — section panels, hovers */
  --paper:        #F4FBFD;  /* Page background — barely-tinted white */
  --white:        #FFFFFF;

  /* Accent — used sparingly, mostly in social mocks. Lifted from
     the "Beyond the Timer" marketing graphic. */
  --gold:         #C9A35B;

  /* Typography */
  --display: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --body:    "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --serif:   "Fraunces", Georgia, "Times New Roman", serif; /* italic only */

  /* Geometry */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 10px 30px -12px rgba(28, 111, 163, 0.14);
  --shadow-lift: 0 24px 60px -24px rgba(28, 111, 163, 0.28);
  --shadow-deep: 0 40px 80px -30px rgba(28, 111, 163, 0.42);

  /* Sticky layout heights — single source of truth for the fixed
     nav stack. If you change .topbar or .nav padding/font-size,
     update these and everything downstream (body padding-top,
     .svc-jump top, .svc-detail scroll-margin-top, mobile menu
     overlay) stays in sync.

     --topbar-h: 18px padding + ~20px line height at 0.78rem ≈ 38px
     --nav-h:    14+14 padding + 64px logo height = 92px exact
     --svc-jump-h: 16+16 padding + ~24px font line height ≈ 56px */
  --topbar-h:    38px;
  --nav-h:       92px;
  --svc-jump-h:  56px;
}

/* ================================================================
   RESET + BASE
   ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* MUST be `clip`, not `hidden`. `hidden` creates
                       a new scroll-containing block, which silently
                       breaks position: sticky on descendants — the
                       .svc-jump bar would pin to the body's hidden
                       scrollport instead of the viewport. `clip`
                       gives the same no-horizontal-scroll protection
                       without that side effect. */
  /* Compensate for the fixed .topbar + .nav stack so the hero
     isn't hiding behind them. Transitions in sync with the topbar
     collapse so content slides up smoothly when the topbar hides. */
  padding-top: calc(var(--topbar-h) + var(--nav-h));
  transition: padding-top 0.3s ease;
}
body.is-scrolled { padding-top: var(--nav-h); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ocean);
  line-height: 1.05;
}
h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h4 {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Italic accent — ALWAYS Fraunces, ALWAYS azure. Used for emphasis
   words inside headings (e.g., "Real cleaning, real results.") */
h1 em, h2 em, h3 em, .em-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--azure);
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ocean);
}
.lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  font-weight: 400;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--azure);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--ocean);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn-secondary {
  background: var(--ocean);
  color: var(--white);
}
.btn-secondary:hover {
  background: var(--ink);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ocean);
  border: 1.5px solid var(--ocean);
}
.btn-ghost:hover {
  background: var(--ocean);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-light {
  background: var(--white);
  color: var(--ocean);
}
.btn-light:hover { background: var(--tint); }

.btn .btn-sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.04em;
  margin-top: 1px;
  text-transform: none;
}
.btn .btn-sub:first-child { margin-top: 0; }

/* ================================================================
   TOPBAR + NAV
   ================================================================ */

.topbar {
  background: var(--ocean);
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  max-height: 60px;
  /* Fixed (not sticky) because Oxygen wraps each Code Block in
     its own container, and position:sticky can only stick WITHIN
     that container — which for the header is only as tall as the
     bar itself, so sticky has no room to operate. Fixed pins to
     the viewport unconditionally. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
body.is-scrolled .topbar { max-height: 0; opacity: 0; }

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-left {
  opacity: 0.92;
}
.topbar-locations { font-weight: 500; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 500;
}
.topbar-right a { transition: color 0.2s ease; }
.topbar-right a:hover { color: var(--sky); }

.nav {
  background: var(--white);
  /* Fixed (not sticky) — see note on .topbar. The nav starts
     positioned BELOW the topbar (top: --topbar-h) and slides up
     to top:0 when the topbar collapses on scroll, giving the
     visual effect of the topbar getting absorbed into the nav. */
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 0 rgba(28, 111, 163, 0);
  transition: top 0.3s ease, box-shadow 0.25s ease;
}
body.is-scrolled .nav {
  top: 0;
  box-shadow: 0 6px 24px -16px rgba(28, 111, 163, 0.35);
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-logo img {
  height: 64px;
  width: auto;
  display: block;
}
.nav-logo-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  line-height: 1;
  display: flex;
  gap: 0.28em;
  white-space: nowrap;
}
.nav-logo-nova     { color: var(--azure); }
.nav-logo-cleaning { color: var(--teal); }
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-links a {
  color: var(--ink);
  transition: color 0.2s ease;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--azure);
  transition: width 0.25s ease;
}
.nav-links a:hover { color: var(--ocean); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-cta .btn { padding: 10px 20px; font-size: 0.88rem; }

/* Mobile nav (hamburger pattern, JS-toggled) */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ocean);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer: invisible to layout on desktop (display:contents)
   so .nav-links and .nav-cta still flow into .nav-inner as direct
   flex children. The wrapper exists purely so they can be treated
   as a single panel on mobile. */
.nav-drawer { display: contents; }
.nav-drawer-contact { display: none; }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }

  /* Drawer becomes the actual overlay panel */
  .nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* Below the visible nav stack, extending to the viewport bottom
       so no page content can peek through underneath. */
    top: calc(var(--topbar-h) + var(--nav-h));
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    padding: 8px 24px 28px;
    z-index: 99;
    overflow-y: auto;
    /* Hidden by default — fades + slides in on body.menu-open. The
       visibility transition (with 0.25s delay when closing) keeps
       the drawer rendered during the fade-out animation, then snaps
       to hidden so keyboard tab focus and screen readers don't
       reach the offscreen links. */
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  body.menu-open .nav-drawer {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0s;
  }
  body.is-scrolled .nav-drawer { top: var(--nav-h); }

  /* Lock the document scroll behind the drawer so the page doesn't
     drift while the menu is open. Overrides the body's overflow-x
     for the duration menu-open is set. */
  body.menu-open { overflow: hidden; }

  /* Nav links — vertical, left-aligned, full-width hairline dividers
     instead of the desktop centered-pill layout. */
  .nav-drawer .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-weight: 500;
    font-size: 1.05rem;
  }
  .nav-drawer .nav-links a {
    padding: 16px 4px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer .nav-links a:last-child { border-bottom: 0; }
  /* Suppress the desktop hover-underline pseudo so it doesn't
     double-stroke against the new dividers. */
  .nav-drawer .nav-links a::after { display: none; }

  /* CTAs — full-width stacked buttons, separated from the link list
     by a top border so the visual hierarchy reads clearly. */
  .nav-drawer .nav-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-drawer .nav-cta .btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    text-align: center;
  }

  /* Contact strip — phone + email pinned to the drawer bottom via
     margin-top:auto. Surfaces the topbar info inside the drawer,
     since the topbar itself is hidden behind the menu. */
  .nav-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 24px;
    font-size: 0.92rem;
  }
  .nav-drawer-contact a {
    color: var(--ocean);
    font-weight: 500;
  }
}
}

/* ================================================================
   SPARKLES — CONFINED TO SAFE ZONES
   ================================================================
   .deco-band wraps sparkle SVGs. It is positioned absolute within a
   section, spanning the section's WIDTH but constrained vertically to
   a 60-80px strip in the top or bottom padding zone. Sparkles inside
   the band can use percentage positioning freely because the band
   itself is in a safe vertical zone.

   Z-index: sparkles are z-index 0; .container is z-index 2. As long
   as section content lives inside .container, sparkles cannot stack
   above it.
   ================================================================ */

.deco-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.deco-band.top    { top: 0; }
.deco-band.bottom { bottom: 0; }

.sparkle {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.sparkle svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sparkle.xs { width: 12px; }
.sparkle.sm { width: 18px; }
.sparkle.md { width: 26px; }
.sparkle.lg { width: 36px; }
.sparkle.xl { width: 48px; }

/* Sparkle motion — gentle drift, no scattering animations to keep
   the brand calm rather than busy */
@keyframes nova-twinkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
.sparkle.twinkle { animation: nova-twinkle 4s ease-in-out infinite; }

/* ================================================================
   SECTIONS
   ================================================================ */

/* Section padding is scoped to the SPECIFIC Nova section classes
   below — NOT to the bare <section> tag. Oxygen wraps every Code
   Block in its own <section> element; a bare `section { padding:
   110px 0 }` rule would apply to those wrappers and inject 110px
   of empty space above and below every Code Block (e.g. above the
   topbar). Listing the classes explicitly keeps the styling on
   our content and off Oxygen's structural elements.

   .hero, .trust, and the .svc-* family already define their own
   padding and don't need to be in this list. */
.promise, .services, .about, .areas, .process,
.gallery, .reviews, .faq, .contact {
  position: relative;
  padding: 110px 0;
}

/* Tight/compact modifiers — usable on any of the section classes
   above (e.g. <section class="services section-tight">). Renamed
   from `section.tight` / `section.compact` for the same scoping
   reason as above. */
.section-tight   { padding: 80px 0 !important; }
.section-compact { padding: 60px 0 !important; }

/* Dark/tint modifiers — also usable on any container. */
.section-dark {
  background: var(--ocean);
  color: var(--white);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark .lead { color: rgba(255, 255, 255, 0.85); }
.section-dark .eyebrow { color: var(--sky); }
.section-dark h2 em { color: var(--sky); }

.section-tint { background: var(--tint); }

/* Section header — standard pattern for any section heading block */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.section-header .eyebrow { margin-bottom: 14px; display: block; }
.section-header h2 { margin-bottom: 18px; }
.section-header p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }

/* Section divider — soft horizontal rule for content transitions */
.section-divider {
  height: 1px;
  background: var(--line);
  margin: 60px 0;
}

/* ================================================================
   HERO
   ================================================================ */

.hero {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--tint) 100%);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.hero-copy .eyebrow { display: block; margin-bottom: 22px; }
.hero-copy h1 {
  margin-bottom: 22px;
  line-height: 0.98;
}
.hero-copy h1 em {
  display: block;
  font-size: 0.92em;
}
.hero-copy .lead { margin-bottom: 32px; }

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-proof {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.proof-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proof-item strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ocean);
  letter-spacing: -0.005em;
}
.proof-item span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-mute);
}

.hero-visual {
  position: relative;
}
.hero-visual img {
  width: 100%;
  border-radius: 220px 220px 24px 24px;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  box-shadow: var(--shadow-deep);
  background: var(--white);
}

.hero-badge {
  position: absolute;
  bottom: 32px;
  left: -28px;
  background: var(--white);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  max-width: 240px;
  border: 1px solid var(--line);
}
.hero-badge .stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.hero-badge strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ocean);
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 4px;
}
.hero-badge span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ================================================================
   TRUST STRIP
   ================================================================ */

.trust {
  background: var(--white);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ocean);
  flex: 1;
  justify-content: center;
  min-width: 180px;
}
.trust-item svg { width: 22px; height: 22px; color: var(--azure); flex-shrink: 0; }

/* ================================================================
   PROMISE — Beyond the Timer + 3 pillars
   ================================================================ */

.promise {
  background: var(--ocean);
  color: var(--white);
  overflow: hidden;
}
.promise-hero {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 70px;
}
.promise-hero .eyebrow { color: var(--sky); margin-bottom: 20px; display: block; }
.promise-hero h2 {
  color: var(--white);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  margin-bottom: 22px;
}
.promise-hero h2 em { color: var(--sky); display: block; }
.promise-hero p { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; max-width: 60ch; margin: 0 auto; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  position: relative;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, background 0.25s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
}
.pillar-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--sky);
  line-height: 1;
  margin-bottom: 22px;
}
.pillar h3 {
  color: var(--white);
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.pillar p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ================================================================
   SERVICES GRID
   ================================================================ */

.services { background: var(--paper); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--azure);
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
}
.service-card h3 small {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-top: 2px;
}
.service-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 22px;
  flex: 1;
}
.service-card .more {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--azure);
  letter-spacing: 0.02em;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.service-card .more:hover { border-color: var(--azure); }

/* ================================================================
   ABOUT
   ================================================================ */

.about { background: var(--white); }
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.about-visual img {
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 16px 16px;
  aspect-ratio: 4/5;
  object-fit: cover;
  box-shadow: var(--shadow-deep);
  background: var(--tint);
}
.about-copy .eyebrow { display: block; margin-bottom: 14px; }
.about-copy h2 { margin-bottom: 22px; }
.about-copy p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
.about-signature {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.about-signature .sig-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--azure);
  font-size: 1.5rem;
  line-height: 1;
}
.about-signature .sig-title {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-top: 4px;
}

/* ================================================================
   AREAS
   ================================================================ */

.areas { background: var(--tint); }

.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.area-card {
  background: var(--white);
  padding: 40px 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.area-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.area-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--azure);
  font-size: 1.5rem;
  margin-bottom: 14px;
  letter-spacing: 0;
}
.area-card h3 {
  margin-bottom: 14px;
  font-size: 1.6rem;
  color: var(--ocean);
}
.area-card p {
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 0.98rem;
}

/* ================================================================
   PROCESS — numbered steps
   ================================================================ */

.process { background: var(--paper); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 60px;
  position: relative;
}
.process-grid::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--azure) 0 6px, transparent 6px 14px);
  z-index: 0;
}
.process-step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-step .num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ocean);
  border: 2px solid var(--azure);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
}
.process-step h4 {
  font-size: 1rem;
  color: var(--ocean);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.process-step p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ================================================================
   GALLERY / BEFORE & AFTER
   ================================================================ */

.gallery { background: var(--white); }

.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: 220px;
  gap: 16px;
}
.gallery-tile {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--tint);
  position: relative;
}
.gallery-tile.tall { grid-row: span 2; }
.gallery-tile.wide { grid-column: span 2; }
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-tile .caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(14, 54, 83, 0.85);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
  font-weight: 600;
}

/* Featured videos row — two horizontal videos side-by-side above
   the still-image gallery grid. Replaces the old ba-rows (still-
   image before/after pairs) since we have video content instead of
   still pairs. Aspect-ratio 16/9 is set on the figure; object-fit:
   cover lets vertical-orientation videos still fill cleanly. */
.gallery-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.gallery-videos figure {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16/9;
}
.gallery-videos figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-videos figcaption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(14, 54, 83, 0.88);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
}
.gallery-videos figcaption span {
  opacity: 0.75;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */

.reviews { background: var(--tint); }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.review-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.review-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  margin-bottom: 22px;
}
.review-author {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-author strong {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ocean);
  font-size: 0.98rem;
}
.review-author span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ================================================================
   FAQ
   ================================================================ */

.faq { background: var(--white); }

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-q {
  width: 100%;
  text-align: left;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ocean);
  cursor: pointer;
}
.faq-q::after {
  content: "+";
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.8rem;
  color: var(--azure);
  line-height: 1;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  padding: 0;
}
.faq-item.open .faq-a {
  max-height: 500px;
  padding: 0 0 26px;
}

/* ================================================================
   CONTACT FORM
   ================================================================ */

.contact { background: var(--ocean); color: var(--white); }
.contact .section-header h2 { color: var(--white); }
.contact .section-header p  { color: rgba(255, 255, 255, 0.85); }
.contact .eyebrow { color: var(--sky); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

.contact-info p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 24px;
}
.contact-info ul {
  list-style: none;
  margin-top: 28px;
}
.contact-info li {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
}
.contact-info li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.contact-info li svg { width: 20px; height: 20px; color: var(--sky); flex-shrink: 0; }
.contact-info li a { color: var(--white); border-bottom: 1px solid rgba(140, 215, 246, 0.4); }
.contact-info li a:hover { border-bottom-color: var(--sky); }

.contact-form {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  color: var(--ink);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row.full { grid-template-columns: 1fr; }
.form-field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ocean);
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--azure);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(1, 171, 238, 0.15);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-submit { margin-top: 8px; width: 100%; justify-content: center; padding: 16px; }
.form-note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--ink-mute);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 80px 0 30px;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand img { height: 56px; width: auto; margin-bottom: 22px; }
.footer-brand p { line-height: 1.65; max-width: 36ch; color: rgba(255, 255, 255, 0.7); }

.footer-col h5 {
  font-family: var(--display);
  color: var(--sky);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 11px; }
.footer-col a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--sky); }

.socials {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: background 0.2s ease, transform 0.2s ease;
}
.socials a:hover {
  background: var(--azure);
  transform: translateY(-2px);
}

.footer-bottom {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.65); }
.footer-bottom a:hover { color: var(--sky); }

/* ================================================================
   SERVICES DETAIL PAGE
   ================================================================ */

.svc-hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--tint) 100%);
  padding: 80px 0 60px;
  text-align: center;
}
.svc-hero .eyebrow { display: block; margin-bottom: 14px; }
.svc-hero h1 { margin-bottom: 22px; }
.svc-hero p { max-width: 65ch; margin: 0 auto; color: var(--ink-soft); font-size: 1.15rem; }

.svc-jump {
  background-color: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  position: sticky;
  top: var(--nav-h);
  z-index: 50;          /* below .nav (100), above any svc-detail content */
  isolation: isolate;   /* defensive: prevents any child stacking context
                           from punching through the bar */
  transition: box-shadow 0.25s ease;
}
body.is-scrolled .svc-jump {
  box-shadow: 0 10px 22px -18px rgba(28, 111, 163, 0.45);
}
.svc-jump-inner {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.svc-jump a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ocean);
  letter-spacing: 0.02em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.svc-jump a:hover { color: var(--azure); border-bottom-color: var(--azure); }

.svc-detail {
  padding: 90px 0;
  position: relative;
  /* Account for the stacked sticky bars (nav + svc-jump) when
     anchor links jump to a section, otherwise the heading lands
     BEHIND the bars instead of below them. +16px for breathing room. */
  scroll-margin-top: calc(var(--nav-h) + var(--svc-jump-h) + 16px);
}
.svc-detail:nth-child(even) { background: var(--paper); }
.svc-detail:nth-child(odd)  { background: var(--white); }

.svc-detail-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.svc-overview .eyebrow { display: block; margin-bottom: 14px; }
.svc-overview h2 { margin-bottom: 22px; font-size: clamp(2rem, 3.4vw, 2.8rem); }

/* Service hero image — small visual identity at the top of each
   service overview block. 16/9 aspect for visual consistency
   across services. Subtle border-radius and shadow tie it back
   to the .gallery-tile treatment elsewhere. */
.svc-image {
  margin: 0 0 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16/10;
  background: var(--tint);
}
.svc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.svc-image:hover img { transform: scale(1.04); }
.svc-overview h2 small {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 0.5em;
  letter-spacing: 0;
  margin-top: 4px;
}
.svc-overview p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

.svc-checklist {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 36px;
  box-shadow: var(--shadow-soft);
}
.svc-checklist h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocean);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.svc-checklist h3:not(:first-child) { margin-top: 30px; }
.svc-checklist ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
@media (max-width: 720px) {
  .svc-checklist ul { grid-template-columns: 1fr; }
}
.svc-checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.svc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tint);
  border: 2px solid var(--azure);
}
.svc-checklist li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 4px;
  border-left: 2px solid var(--azure);
  border-bottom: 2px solid var(--azure);
  transform: rotate(-45deg);
}

.svc-cta {
  background: var(--ocean);
  color: var(--white);
  text-align: center;
  padding: 90px 0;
}
.svc-cta h2 { color: var(--white); margin-bottom: 20px; }
.svc-cta h2 em { color: var(--sky); }
.svc-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
  margin: 0 auto 32px;
  font-size: 1.1rem;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1020px) {
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .service-grid, .pillars, .review-grid, .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .process-grid::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .svc-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .gallery-videos { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .promise, .services, .about, .areas, .process,
  .gallery, .reviews, .faq, .contact { padding: 70px 0; }
  .hero { padding: 60px 0 70px; }
  .service-grid, .pillars, .review-grid, .areas-grid,
  .gallery-grid, .footer-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; }
  .hero-badge { position: static; margin-top: -40px; margin-left: 12px; }
  .contact-form { padding: 28px; }
  .topbar .container { font-size: 0.7rem; }
  .topbar-locations { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .svc-jump { position: static; }
  .svc-jump-inner { gap: 18px; }
  /* Shrink the logo + wordmark on phones so the header stack
     (logo, wordmark, hamburger) doesn't crowd. Logo: 64→52, which
     drops the nav height from 92 → 80 — redefine --nav-h to match
     so body padding and sticky offsets stay flush, no dead gap. */
  :root { --nav-h: 80px; }
  .nav-logo img { height: 52px; }
  .nav-logo-text { font-size: 1.15rem; }
  .nav-logo { gap: 10px; }
}