.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;
}
}
/* ================================================================
ALL TOWN CLEANING PROS — 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 (Oxygen > Manage > Settings > Global Styles
> Custom Code > Header) and delete the @import below:
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400&family=Manrope:wght@300;400;500;600;700&display=swap');
/* ================================================================
HOMEPAGE + SHARED COMPONENTS
(design tokens, typography, buttons, nav, footer, sparkles,
hero, services grid, areas, about, gallery, reviews, contact)
================================================================ */
:root {
--blue-100: #EEF4F8;
--blue-200: #D6E3EC;
--blue-300: #B6CEDC;
--blue-400: #9FBFD1; /* primary powder blue from logo */
--blue-500: #7BA5BD; /* deeper blue, hover/accent */
--blue-600: #4E7F9B;
--ink-900: #14181E; /* near-black, softer than pure */
--ink-800: #1E252D; /* matches logo dark fill */
--ink-700: #2D3640;
--ink-500: #6B7683;
--ink-300: #AEB5BE;
--paper: #FAF9F6; /* warm off-white */
--white: #FFFFFF;
--line: #E7ECF0;
--serif: "Fraunces", "Playfair Display", Georgia, serif;
--sans: "Manrope", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 28px;
--shadow-soft: 0 10px 30px -12px rgba(20, 24, 30, 0.12);
--shadow-lift: 0 24px 60px -24px rgba(20, 24, 30, 0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
color: var(--ink-800);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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;
}
/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink-900);
line-height: 1.1;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); font-variation-settings: "opsz" 90, "SOFT" 50; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-variation-settings: "opsz" 60, "SOFT" 50; }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-variation-settings: "opsz" 30; }
.eyebrow {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue-600);
}
.lead { font-size: 1.125rem; color: var(--ink-700); max-width: 60ch; }
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: 999px;
font-family: var(--sans);
font-weight: 600;
font-size: 0.95rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary {
background: var(--ink-900);
color: var(--white);
}
.btn-primary:hover { background: var(--ink-700); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-secondary {
background: var(--blue-400);
color: var(--ink-900);
}
.btn-secondary:hover { background: var(--blue-500); transform: translateY(-1px); }
.btn-ghost {
background: transparent;
color: var(--ink-900);
border: 1.5px solid var(--ink-900);
}
.btn-ghost:hover { background: var(--ink-900); color: var(--white); }
/* ---------- FIXED HEADER OFFSETS ----------
CSS variables share the nav height across the fixed nav, the
topbar's reserved space, the scroll-margin on hash-linked sections,
and the services-page chip nav offset. Tune if rendered heights
differ — inspect .nav in DevTools for the real value. */
:root {
--topbar-h: 42px;
--nav-h: 88px;
}
/* ---------- TOP BAR ----------
Normal document flow — scrolls away as the user scrolls. The
margin-bottom reserves the visual space the fixed nav will occupy,
so the hero doesn't render underneath it at scroll position 0. */
.topbar {
background: var(--ink-900);
color: var(--blue-200);
font-size: 0.85rem;
margin-bottom: var(--nav-h);
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
gap: 16px;
flex-wrap: wrap;
}
.topbar a { color: var(--white); font-weight: 500; }
.topbar a:hover { color: var(--blue-400); }
.topbar-left, .topbar-right { display: flex; gap: 20px; align-items: center; }
.topbar-dot::before {
content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--blue-400); margin-right: 8px; vertical-align: middle;
}
/* ---------- NAV ----------
Fixed. At scroll 0 it sits at top: var(--topbar-h) (below the
topbar in flow). When body gets .is-scrolled class (via the
small scroll listener in the header Code Block — see snippet
in 02-header-nav.html), top drops to 0 so the nav docks at
the viewport top. The transition smooths the handoff. */
.nav {
position: fixed;
top: var(--topbar-h);
left: 0; right: 0;
z-index: 100;
background: rgba(250, 249, 246, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
transition: top 0.2s ease;
}
body.is-scrolled .nav { top: 0; }
/* WordPress admin bar offsets — only apply for logged-in users.
WP injects `html { margin-top: 32px !important }` (or 46px on
narrow viewports) to make room for its admin toolbar, which
shifts in-flow content (topbar, page content) down by that
amount. The nav is position:fixed so it positions relative to
the viewport, not html, and doesn't pick up that shift — which
leaves a visible gap between the nav's bottom and the top of
the content. These rules push the nav down by the admin bar
height so it realigns with content. End users never see these
adjustments because they don't have the .admin-bar class. */
body.admin-bar .nav { top: calc(var(--topbar-h) + 32px); }
body.admin-bar.is-scrolled .nav { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .nav { top: calc(var(--topbar-h) + 46px); }
body.admin-bar.is-scrolled .nav { top: 46px; }
}
/* ---------- OXYGEN CONTAINING-BLOCK FIX ----------
`position: fixed` pins to the viewport UNLESS an ancestor has
transform, filter, backdrop-filter, perspective, contain, or
will-change: transform set — those create a new containing block
that traps fixed descendants. Oxygen applies these to its wrappers
in various configurations. Clear them so the nav pins to the
viewport as intended. */
.ct-section,
.ct-section > .ct-section-inner-wrap,
.ct-section > .ct-section-inner-wrap > .ct-code-block {
transform: none !important;
filter: none !important;
backdrop-filter: none !important;
perspective: none !important;
contain: none !important;
will-change: auto !important;
}
/* Hash-link anchors: when a nav link scrolls to #services etc., the
heading needs to land below the docked nav. */
#services, #who, #areas, #about, #gallery, #reviews, #contact,
#deep, #move, #post, #recurring, #solo, #extras {
scroll-margin-top: calc(var(--nav-h) + 16px);
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding-top: 18px; padding-bottom: 18px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { width: 52px; height: 52px; border-radius: 50%; }
.nav-logo .brand {
font-family: var(--serif); font-size: 1.25rem; color: var(--ink-900);
letter-spacing: -0.01em; line-height: 1.05;
}
.nav-logo .brand small {
display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.22em;
color: var(--blue-600); font-weight: 600; text-transform: uppercase; margin-top: 2px;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
font-weight: 500; font-size: 0.95rem; color: var(--ink-800);
position: relative; padding: 4px 0;
}
.nav-links a::after {
content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
background: var(--blue-400); transition: width 0.25s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-toggle { display: none; }
@media (max-width: 960px) {
.nav-links { display: none; }
.nav-cta .btn-ghost { display: none; }
}
/* ---------- HERO ---------- */
.hero {
position: relative;
padding: 0 0 80px;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 14px; display: inline-block; }
.hero-copy h1 {
margin-bottom: 18px;
font-size: clamp(2.2rem, 4.4vw, 3.8rem);
}
.hero-copy h1 em {
font-style: italic;
color: var(--blue-500);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero-copy .lead { margin-bottom: 26px; font-size: 1.05rem; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-proof {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--line);
display: flex; gap: 32px; flex-wrap: wrap;
}
.proof-item { display: flex; flex-direction: column; }
.proof-item strong {
font-family: var(--serif); font-size: 1.7rem; color: var(--ink-900);
line-height: 1;
}
.proof-item span { font-size: 0.8rem; color: var(--ink-500); margin-top: 4px; letter-spacing: 0.05em; }
.hero-visual {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(20,24,30,0.2) 100%);
}
.hero-badge {
position: absolute; right: -20px; bottom: 32px;
background: var(--white);
padding: 20px 24px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lift);
display: flex; gap: 14px; align-items: center; max-width: 260px;
}
.hero-badge .stars { color: var(--blue-500); font-size: 1.1rem; letter-spacing: 2px; }
.hero-badge strong { font-family: var(--serif); font-size: 1.1rem; display: block; }
.hero-badge span { font-size: 0.8rem; color: var(--ink-500); }
/* ---------- SPARKLES ---------- */
/* Sparkles sit in section backgrounds only — never over content.
Achieved via z-index:0 here + z-index:1 on section > .container below. */
.sparkle {
position: absolute;
width: 22px; height: 22px;
opacity: 0.6;
animation: twinkle 4s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.sparkle svg { width: 100%; height: 100%; display: block; }
.sparkle.sm { width: 12px; height: 12px; }
.sparkle.md { width: 18px; height: 18px; }
.sparkle.lg { width: 28px; height: 28px; }
.sparkle.xl { width: 40px; height: 40px; }
.sparkle.slow { animation-duration: 6s; }
.sparkle.fast { animation-duration: 2.8s; }
.sparkle.drift { animation: twinkle-drift 7s ease-in-out infinite; }
/* Hero specific positions (keep existing) */
.sparkle.s1 { top: 12%; right: 6%; animation-delay: 0s; }
.sparkle.s2 { top: 38%; left: 45%; animation-delay: 1s; width: 14px; }
.sparkle.s3 { bottom: 18%; left: 4%; animation-delay: 2s; width: 28px; }
@keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0deg); }
50% { opacity: 0.85; transform: scale(1.1) rotate(20deg); }
}
@keyframes twinkle-drift {
0% { opacity: 0.3; transform: translateY(0) scale(0.9) rotate(0deg); }
50% { opacity: 0.9; transform: translateY(-12px) scale(1.1) rotate(25deg); }
100% { opacity: 0.3; transform: translateY(0) scale(0.9) rotate(0deg); }
}
/* Ensure all section content sits above sparkles */
section > .container,
section > .hero-grid,
section > .contact-grid,
section > .about-grid {
position: relative;
z-index: 1;
}
@media (max-width: 860px) {
.hero { padding: 48px 0 60px; }
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-badge { right: 20px; bottom: 20px; }
}
/* ---------- TRUST STRIP ---------- */
.trust {
background: var(--ink-900);
color: var(--white);
padding: 32px 0;
}
.trust-inner {
display: flex; justify-content: space-around; gap: 32px; flex-wrap: wrap;
align-items: center;
}
.trust-item {
display: flex; align-items: center; gap: 12px;
font-size: 0.95rem; font-weight: 500;
}
.trust-item svg { flex-shrink: 0; color: var(--blue-400); width: 22px; height: 22px; }
/* ---------- SECTION BASE ----------
Keep this at low specificity (single element selector) so that
class-based overrides like .hero, .services, etc. can win with
a normal (0,1,0). */
section { padding: 100px 0; position: relative; overflow: hidden; }
section.tight { padding: 70px 0; }
/* Oxygen's own Sections are a tag too — explicitly zero
them out so our generic rule above doesn't stack onto whatever
Oxygen wrote via its UI. Also restore overflow so Oxygen content
isn't clipped. */
section.ct-section { padding: 0; overflow: visible; }
/* When an Oxygen Section wraps one of our Code Blocks, let the
Code Block span edge-to-edge. Oxygen's default .ct-section-inner-wrap
has max-width: 1120px baked in, which boxes in our full-bleed
strips (topbar, trust strip, dark areas section). Our own markup
uses .container internally to cap content width, so the wrap
doesn't need to do it again. */
.ct-section-inner-wrap:has(> .ct-code-block) {
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.section-header { text-align: center; max-width: 680px; margin: 0 auto 64px; position: relative; }
.section-header .eyebrow { margin-bottom: 14px; display: inline-block; }
.section-header h2 { margin-bottom: 18px; }
.section-header p { color: var(--ink-700); font-size: 1.05rem; }
/* ---------- SERVICES ----------
5-card layout: 3 on top, 2 centered on bottom.
Uses a 6-column grid where each card spans 2 columns (= 3 per row).
The 4th and 5th cards are shifted over so they center as a pair
on the second row (cols 2-3 and 4-5, leaving cols 1 and 6 empty). */
.services { background: var(--white); }
.service-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet: 2 per row, 5th card centered alone on bottom */
@media (min-width: 600px) {
.service-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.service-card { grid-column: span 2; }
.service-card:nth-child(5) { grid-column: 2 / span 2; }
}
/* Desktop: 3 per row, last 2 cards centered on bottom */
@media (min-width: 860px) {
.service-grid {
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.service-card { grid-column: span 2; }
.service-card:nth-child(4) { grid-column: 2 / span 2; }
.service-card:nth-child(5) { grid-column: 4 / span 2; }
}
.service-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 36px 28px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--blue-400);
transform: scaleX(0); transform-origin: left;
transition: transform 0.4s ease;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
background: var(--white);
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
width: 56px; height: 56px;
background: var(--blue-100);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 22px;
color: var(--blue-600);
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: 0.95rem; color: var(--ink-700); margin-bottom: 18px; }
.service-card .more {
font-size: 0.85rem; font-weight: 600; color: var(--blue-600);
letter-spacing: 0.05em; display: inline-flex; gap: 6px; align-items: center;
}
.service-card .more::after { content: "→"; transition: transform 0.2s ease; }
.service-card:hover .more::after { transform: translateX(4px); }
/* ---------- WHO WE SERVE ---------- */
.who {
background: var(--blue-100);
position: relative;
overflow: hidden;
}
.who-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 20px;
margin-top: 48px;
}
.who-card {
background: var(--white);
padding: 32px 20px;
border-radius: var(--radius-md);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.who-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.who-card .icon-wrap {
width: 64px; height: 64px; margin: 0 auto 16px;
background: var(--blue-100);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--blue-600);
}
.who-card h4 {
font-family: var(--serif); font-size: 1.15rem; color: var(--ink-900);
margin-bottom: 6px;
}
.who-card p { font-size: 0.85rem; color: var(--ink-500); }
/* ---------- AREAS ---------- */
.areas { background: var(--ink-900); color: var(--white); }
.areas .section-header h2 { color: var(--white); }
.areas .section-header .eyebrow { color: var(--blue-400); }
.areas .section-header p { color: var(--blue-200); }
.areas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.area-card {
background: var(--ink-800);
padding: 36px 32px;
border-radius: var(--radius-md);
border: 1px solid var(--ink-700);
position: relative;
transition: all 0.3s ease;
}
.area-card:hover {
border-color: var(--blue-400);
transform: translateY(-3px);
}
.area-card .num {
font-family: var(--serif); font-size: 3rem; color: var(--blue-400);
line-height: 1; font-style: italic;
font-variation-settings: "opsz" 144;
}
.area-card h3 {
color: var(--white); margin: 12px 0 10px;
font-size: 1.6rem;
}
.area-card p { color: var(--blue-200); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 800px) { .areas-grid { grid-template-columns: 1fr; } }
/* ---------- PROCESS ---------- */
.process { background: var(--paper); }
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
position: relative;
}
.process-grid::before {
content: ""; position: absolute;
top: 28px; left: 10%; right: 10%;
border-top: 2px dashed var(--blue-300);
z-index: 0;
}
.step {
text-align: center; position: relative; z-index: 1;
}
.step .circle {
width: 60px; height: 60px; border-radius: 50%;
background: var(--ink-900); color: var(--blue-400);
font-family: var(--serif); font-size: 1.6rem; font-style: italic;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 22px;
border: 4px solid var(--paper);
}
.step h4 {
font-family: var(--serif); font-size: 1.25rem;
margin-bottom: 8px; color: var(--ink-900);
}
.step p { font-size: 0.92rem; color: var(--ink-700); }
@media (max-width: 800px) {
.process-grid { grid-template-columns: 1fr 1fr; }
.process-grid::before { display: none; }
}
/* ---------- ABOUT ---------- */
.about { background: var(--white); overflow: hidden; }
.about-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 70px;
align-items: center;
}
.about-visual {
position: relative;
aspect-ratio: 5 / 6;
border-radius: var(--radius-lg);
overflow: hidden;
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-accent {
position: absolute;
inset: auto -18px -18px auto;
width: 55%; aspect-ratio: 1;
background: var(--blue-400);
border-radius: var(--radius-lg);
z-index: -1;
}
.about-copy h2 { margin-bottom: 24px; }
.about-copy h2 em { font-style: italic; color: var(--blue-500); }
.about-copy .lead { margin-bottom: 24px; }
.about-copy p { margin-bottom: 18px; color: var(--ink-700); }
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
.about-stats strong {
display: block;
font-family: var(--serif); font-size: 2.2rem; color: var(--ink-900);
font-style: italic; line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.about-stats span { font-size: 0.82rem; color: var(--ink-500); letter-spacing: 0.05em; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
/* ---------- GALLERY ---------- */
.gallery { background: var(--paper); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 240px 240px;
gap: 16px;
}
.gallery-item {
overflow: hidden;
border-radius: var(--radius-md);
position: relative;
}
.gallery-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }
@media (max-width: 860px) {
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.gallery-item.wide, .gallery-item.tall { grid-column: auto; grid-row: auto; min-height: 200px; }
}
/* ---------- REVIEWS ---------- */
.reviews { background: var(--white); }
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.review-card {
background: var(--paper);
padding: 36px 32px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
display: flex; flex-direction: column;
position: relative;
}
.review-card .quote {
font-family: var(--serif); font-size: 4rem; font-style: italic;
color: var(--blue-300); line-height: 0.5; margin-bottom: 16px;
font-variation-settings: "opsz" 144;
}
.review-card .stars { color: var(--blue-500); letter-spacing: 2px; margin-bottom: 14px; }
.review-card p {
font-size: 1rem; color: var(--ink-800); flex-grow: 1;
margin-bottom: 24px;
font-family: var(--serif); font-style: italic;
font-variation-settings: "opsz" 30;
}
.review-card .author {
display: flex; align-items: center; gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.review-card .avatar {
width: 42px; height: 42px; border-radius: 50%;
background: var(--blue-400); color: var(--ink-900);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-weight: 600;
}
.review-card .author strong { display: block; font-family: var(--sans); font-size: 0.95rem; }
.review-card .author span { font-size: 0.82rem; color: var(--ink-500); }
@media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; } }
/* ---------- CONTACT / QUOTE FORM ---------- */
.contact {
background: linear-gradient(170deg, var(--blue-100) 0%, var(--paper) 100%);
position: relative;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.contact-info h2 { margin-bottom: 20px; }
.contact-info h2 em { font-style: italic; color: var(--blue-500); }
.contact-info .lead { margin-bottom: 32px; }
.info-list { list-style: none; }
.info-list li {
padding: 18px 0;
border-bottom: 1px solid var(--line);
display: flex; gap: 14px;
align-items: flex-start;
}
.info-list .ico {
width: 40px; height: 40px; border-radius: 10px;
background: var(--ink-900); color: var(--blue-400);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.info-list strong { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; margin-bottom: 4px; }
.info-list a, .info-list span { color: var(--ink-900); font-size: 1.05rem; font-weight: 500; }
.quote-form {
background: var(--white);
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
border: 1px solid var(--line);
}
.quote-form h3 {
margin-bottom: 8px; font-size: 1.5rem;
}
.quote-form > p { color: var(--ink-500); font-size: 0.95rem; margin-bottom: 28px; }
.form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-700); }
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
font-family: var(--sans);
font-size: 0.95rem;
background: var(--paper);
transition: border 0.2s ease, background 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none; border-color: var(--blue-500); background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-group label {
flex: 1; min-width: 140px;
padding: 12px 16px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
font-size: 0.9rem; font-weight: 500; letter-spacing: 0;
text-transform: none; color: var(--ink-800);
cursor: pointer; text-align: center;
transition: all 0.2s ease;
}
.radio-group input { display: none; }
.radio-group input:checked + label { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
.radio-group label:hover { border-color: var(--blue-400); }
.quote-form .btn { width: 100%; justify-content: center; margin-top: 12px; padding: 16px; font-size: 1rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .quote-form { padding: 28px; } .form-row { grid-template-columns: 1fr; } }
/* ---------- FOOTER ---------- */
.footer {
background: var(--ink-900);
color: var(--blue-200);
padding: 80px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 60px;
}
.footer-brand img { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 20px; }
.footer-brand p { font-size: 0.92rem; max-width: 30ch; line-height: 1.7; color: var(--blue-200); }
.footer-col h5 {
font-family: var(--sans); color: var(--white);
font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase;
margin-bottom: 20px; font-weight: 600;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.95rem; color: var(--blue-200); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--blue-400); }
.socials { display: flex; gap: 12px; margin-top: 18px; }
.socials a {
width: 40px; height: 40px; border-radius: 50%;
background: var(--ink-800); border: 1px solid var(--ink-700);
display: flex; align-items: center; justify-content: center;
color: var(--blue-200);
transition: all 0.2s ease;
}
.socials a:hover { background: var(--blue-400); color: var(--ink-900); border-color: var(--blue-400); }
.footer-bottom {
border-top: 1px solid var(--ink-700);
padding-top: 28px;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
flex-wrap: wrap;
font-size: 0.85rem; color: var(--ink-500);
}
.footer-bottom a:hover { color: var(--blue-400); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
/* ---------- LOAD ANIMATION ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ================================================================
SERVICES & CHECKLISTS PAGE — page-specific components
(page hero, breadcrumb, quick nav chips, service blocks,
checklist cards, frequency cards, extras, notes, CTA banner)
================================================================ */
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--blue-600); }
section > .container { position: relative; z-index: 1; }
.page-hero {
/* Top padding equals the fixed nav height so the breadcrumb/eyebrow
sits flush against the bottom edge of the nav rather than behind
it, and the gradient padding area is exactly what the nav covers.
If you tweak --nav-h elsewhere this follows automatically. */
padding: var(--nav-h) 0 60px;
background: linear-gradient(180deg, var(--blue-100) 0%, var(--paper) 100%);
position: relative;
overflow: hidden;
text-align: center;
}
.page-hero .eyebrow { margin-bottom: 18px; display: inline-block; }
.page-hero h1 { max-width: 18ch; margin: 0 auto 20px; }
.page-hero h1 em { font-style: italic; color: var(--blue-500); font-variation-settings: "opsz" 144, "SOFT" 100; }
.page-hero p { max-width: 58ch; margin: 0 auto; color: var(--ink-700); font-size: 1.1rem; }
.breadcrumb {
margin-bottom: 28px;
font-size: 0.85rem;
color: var(--ink-500);
display: flex; gap: 8px; justify-content: center; align-items: center;
letter-spacing: 0.05em;
}
.breadcrumb a { color: var(--ink-500); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--blue-600); }
.breadcrumb span { color: var(--ink-300); }
.quick-nav {
background: var(--white);
border-bottom: 1px solid var(--line);
padding: 22px 0;
/* Stick below the sticky nav (topbar has scrolled off at this
point, so only the nav height matters). z-index below the nav
so it never overlaps if sizes are miscalculated. */
position: sticky; top: var(--nav-h); z-index: 40;
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.92);
}
/* Admin bar offsets for the chip nav — sticky uses viewport, so
same problem as with the fixed main nav. */
body.admin-bar .quick-nav { top: calc(var(--nav-h) + 32px); }
@media screen and (max-width: 782px) {
body.admin-bar .quick-nav { top: calc(var(--nav-h) + 46px); }
}
.quick-nav-inner {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.chip {
padding: 8px 18px;
border: 1.5px solid var(--line);
border-radius: 999px;
font-size: 0.9rem; font-weight: 500;
color: var(--ink-700);
transition: all 0.2s ease;
white-space: nowrap;
}
.chip:hover { border-color: var(--blue-400); color: var(--ink-900); background: var(--blue-100); }
.chip.active { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
@media (max-width: 720px) { .quick-nav { position: static; padding: 18px 0; } .quick-nav-inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 24px; } }
.service-block {
padding: 80px 0;
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.service-block:nth-child(even) { background: var(--white); }
.service-block-header {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 28px;
align-items: center;
margin-bottom: 48px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
.service-icon-lg {
width: 80px; height: 80px;
background: var(--blue-100);
border-radius: 20px;
display: flex; align-items: center; justify-content: center;
color: var(--blue-600);
flex-shrink: 0;
}
.service-icon-lg svg { width: 40px; height: 40px; }
.service-block-header .title-group h2 { margin-bottom: 8px; }
.service-block-header .title-group h2 em { font-style: italic; color: var(--blue-500); }
.service-block-header .title-group p { color: var(--ink-500); font-size: 0.95rem; letter-spacing: 0.05em; }
.service-block-header .cta-group { display: flex; gap: 10px; }
.service-description {
font-size: 1.1rem;
color: var(--ink-700);
max-width: 70ch;
margin-bottom: 40px;
line-height: 1.7;
}
@media (max-width: 760px) {
.service-block-header { grid-template-columns: auto 1fr; gap: 20px; }
.service-block-header .cta-group { grid-column: 1 / -1; }
.service-icon-lg { width: 60px; height: 60px; border-radius: 16px; }
.service-icon-lg svg { width: 30px; height: 30px; }
}
.checklist-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.checklist-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 32px 28px;
position: relative;
transition: all 0.3s ease;
}
.service-block:nth-child(even) .checklist-card { background: var(--white); border-color: var(--blue-200); }
.checklist-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-soft);
border-color: var(--blue-400);
}
.checklist-card-header {
display: flex; align-items: center; gap: 14px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--line);
}
.checklist-icon {
width: 44px; height: 44px;
background: var(--ink-900);
color: var(--blue-400);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.checklist-icon svg { width: 22px; height: 22px; }
.checklist-card h3 { font-size: 1.25rem; margin: 0; }
.checklist-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.checklist-card li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 0.95rem;
color: var(--ink-800);
line-height: 1.5;
}
.checklist-card li::before {
content: "";
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--blue-100);
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
margin-top: 2px;
}
.inline-note {
margin-top: 28px;
padding: 18px 24px;
border-left: 3px solid var(--blue-400);
background: var(--blue-100);
border-radius: var(--radius-sm);
font-size: 0.95rem;
color: var(--ink-700);
font-style: italic;
font-family: var(--serif);
font-variation-settings: "opsz" 30;
}
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 24px;
}
.feature-list li {
list-style: none;
display: flex; gap: 12px; align-items: flex-start;
padding: 16px 20px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: 0.95rem;
line-height: 1.5;
}
.service-block:nth-child(even) .feature-list li { background: var(--paper); }
.feature-list li::before {
content: "✓";
color: var(--blue-500);
font-weight: 700;
font-size: 1.1rem;
line-height: 1;
margin-top: 2px;
}
.frequency-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
margin-bottom: 32px;
}
.freq-card {
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
padding: 28px 24px;
text-align: center;
transition: all 0.3s ease;
}
.service-block:nth-child(even) .freq-card { background: var(--white); border-color: var(--blue-200); }
.freq-card:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.freq-card .period {
font-family: var(--serif); font-size: 2rem; color: var(--ink-900);
font-style: italic; line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 100;
margin-bottom: 8px;
}
.freq-card .label { font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--blue-600); margin-bottom: 14px; }
.freq-card p { font-size: 0.9rem; color: var(--ink-700); line-height: 1.5; }
@media (max-width: 720px) { .frequency-grid { grid-template-columns: 1fr; } }
.extras { background: var(--ink-900); color: var(--white); }
.extras .section-header h2 { color: var(--white); }
.extras .section-header .eyebrow { color: var(--blue-400); }
.extras .section-header p { color: var(--blue-200); }
.extras-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 48px;
}
.extra-card {
background: var(--ink-800);
border: 1px solid var(--ink-700);
border-radius: var(--radius-md);
padding: 28px 24px;
transition: all 0.3s ease;
}
.extra-card:hover { border-color: var(--blue-400); transform: translateY(-3px); }
.extra-card h4 { color: var(--white); font-size: 1.15rem; margin-bottom: 10px; }
.extra-card p { color: var(--blue-200); font-size: 0.9rem; line-height: 1.55; }
.extra-card .price-note {
display: inline-block;
margin-top: 14px;
padding: 4px 12px;
background: rgba(159, 191, 209, 0.15);
border: 1px solid rgba(159, 191, 209, 0.3);
border-radius: 999px;
color: var(--blue-400);
font-size: 0.78rem;
letter-spacing: 0.05em;
}
.notes { background: var(--paper); }
.notes-wrap {
max-width: 880px;
margin: 0 auto;
background: var(--white);
border-radius: var(--radius-lg);
padding: 56px 48px;
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
position: relative;
}
.notes-wrap h2 { margin-bottom: 12px; }
.notes-wrap h2 em { font-style: italic; color: var(--blue-500); }
.notes-wrap > p { color: var(--ink-700); margin-bottom: 32px; }
.notes-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.notes-list li { display: flex; gap: 16px; align-items: flex-start; }
.notes-list .num {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--blue-100);
color: var(--blue-600);
font-family: var(--serif); font-style: italic;
display: flex; align-items: center; justify-content: center;
font-size: 0.95rem; font-weight: 500;
}
.notes-list li > div strong { display: block; color: var(--ink-900); margin-bottom: 4px; font-size: 1rem; }
.notes-list li > div p { color: var(--ink-700); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 720px) { .notes-wrap { padding: 36px 24px; } }
.cta-banner {
background: var(--ink-900);
color: var(--white);
text-align: center;
padding: 90px 0;
position: relative;
overflow: hidden;
}
.cta-banner .eyebrow { color: var(--blue-400); margin-bottom: 16px; display: inline-block; }
.cta-banner h2 { color: var(--white); margin-bottom: 20px; max-width: 24ch; margin-left: auto; margin-right: auto; }
.cta-banner h2 em { font-style: italic; color: var(--blue-400); }
.cta-banner p { color: var(--blue-200); max-width: 50ch; margin: 0 auto 36px; font-size: 1.05rem; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn-primary { background: var(--blue-400); color: var(--ink-900); }
.cta-banner .btn-primary:hover { background: var(--white); }
.cta-banner .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.3); }
.cta-banner .btn-ghost:hover { background: var(--white); color: var(--ink-900); border-color: var(--white); }
/* ================================================================
OXYGEN BUILDER INTEGRATION
================================================================
PREFERRED FIX: In the Oxygen editor, select each Section that
wraps an All Town Code Block, go to Advanced > Size & Spacing,
and set Padding Top and Padding Bottom to 0. That writes the
override into Oxygen's own per-section generated CSS and wins
cleanly without a specificity battle.
FALLBACK: The rules below use doubled class selectors + !important
to outrank Oxygen's ID-based padding rules (e.g. #section-2-9).
Add the class "at-full" to the Section via Advanced > CSS Classes.
================================================================ */
/* Section itself — doubled class beats most single-ID selectors */
html body .ct-section.at-full.at-full,
html body section.ct-section.at-full.at-full {
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Inner wrap — where Oxygen's max-width and gutter padding live */
html body .ct-section.at-full.at-full > .ct-section-inner-wrap,
html body section.ct-section.at-full.at-full > .ct-section-inner-wrap {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* Code Block inside — no extra gutters */
html body .ct-section.at-full.at-full .ct-code-block {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Normalize any elements emitted by our Code Block markup */
.at-full section {
margin: 0 !important;
}