:root {
/* — Base neutrals — */
--cream: #FBFAF5;
--cream-warm: #F6F1E6;
--sand: #EDE2CD;
/* — Greens (the new primary character) — */
--leaf: #DCFCE7; /* very light fresh-spring tint */
--moss: #86EFAC; /* bright soft green */
--grass: #22C55E; /* bright vibrant primary green */
--grass-deep: #16A34A; /* darker for hover/depth, still vibrant */
--forest: #15803D; /* deepest version, still saturated */
/* — Blues (now secondary) — */
--sky: #D4E3EB;
--sky-deep: #7FA2BA;
--blue: #4A6F8A;
--navy: #1E3A52;
--navy-soft: #2F4E68;
--mist: #93A9B9;
/* — Warm accent (now tertiary) — */
--warm: #C9A670;
--sage: #B5C3AE;
--rule: rgba(30, 58, 82, 0.10);
--rule-soft: rgba(30, 58, 82, 0.06);
--f-display: 'Cormorant Garamond', 'Times New Roman', serif;
--f-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--radius-sm: 8px;
--radius: 16px;
--radius-lg: 28px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--cream);
color: var(--navy);
font-family: var(--f-body);
font-size: 16px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--sky-deep); color: var(--cream); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.display {
font-family: var(--f-display);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--navy);
}
.display em { font-style: italic; font-weight: 300; color: var(--blue); }
.eyebrow {
font-family: var(--f-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sky-deep);
}
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 780px) { .wrap { padding: 0 22px; } }
/* ───── NAVIGATION ───── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
padding: 14px 48px;
display: flex; align-items: center; justify-content: space-between;
transition: all .4s ease;
}
nav.on-photo { color: var(--cream); }
nav.scrolled {
padding: 10px 48px;
background: rgba(251, 250, 245, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--navy);
box-shadow: 0 1px 0 var(--rule-soft);
}
@media (max-width: 780px) { nav, nav.scrolled { padding-left: 22px; padding-right: 22px; } }
.mark {
display: flex; align-items: center; gap: 12px;
font-family: var(--f-display);
font-weight: 400;
font-size: 22px;
letter-spacing: 0.005em;
line-height: 1;
color: inherit;
}
.mark .mark-icon,
.mark .vhs-mark {
width: 38px; height: 38px;
display: inline-grid; place-items: center;
flex-shrink: 0;
color: currentColor;
}
.mark .mark-icon svg,
.mark .vhs-mark svg { width: 38px; height: 38px; display: block; }
/* Force the logo SVG to inherit the nav's current text color regardless of
whether the SVG has its own fill set inline. Targets all paths/shapes inside
the inline-rendered logo wherever it appears. */
.mark .vhs-mark svg path,
.mark .vhs-mark svg polygon,
.mark .vhs-mark svg circle,
.mark .mark-icon svg path { fill: currentColor !important; }
/* Logo can also appear larger in the hero and footer — same color rule */
.vhs-mark svg path,
.vhs-mark svg polygon,
.vhs-mark svg circle { fill: currentColor !important; }
.vhs-mark { color: inherit; display: inline-block; }
.vhs-mark-small { width: 38px; height: 38px; }
.vhs-mark-medium { width: 56px; height: 56px; }
.vhs-mark-large { width: 100%; height: 100%; }
.vhs-mark-small svg, .vhs-mark-medium svg, .vhs-mark-large svg { width: 100%; height: 100%; display: block; }
.mark-text { display: flex; flex-direction: column; gap: 1px; }
.mark-text .name { font-size: 19px; font-weight: 400; letter-spacing: 0; }
.mark-text .tag {
font-family: var(--f-body); font-size: 9px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7;
}
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a:not(.nav-cta):not(.nav-portal) {
font-size: 13px; font-weight: 500;
letter-spacing: 0.02em;
position: relative; padding: 6px 0;
opacity: 0.85;
transition: opacity .3s ease;
}
.nav-links a:not(.nav-cta):not(.nav-portal):hover { opacity: 1; }
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
border-radius: 999px;
font-size: 13px; font-weight: 500;
letter-spacing: 0.01em;
transition: all .3s ease;
cursor: pointer;
border: 1px solid transparent;
}
.btn-primary {
background: var(--navy);
color: var(--cream);
}
.btn-primary:hover { background: var(--blue); transform: translateY(-1px); }
.btn-outline-light {
background: transparent;
color: var(--cream);
border-color: rgba(251,250,245,0.4);
}
.btn-outline-light:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
/* ───── DEDICATED NAV CTA ─────
A confident, premium-feeling pill button. Solid navy on photo,
inverted to cream-on-navy when scrolled. */
.nav-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 14px 12px 22px;
border-radius: 999px;
background: var(--navy);
color: var(--cream) !important;
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
border: none;
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 8px 24px rgba(15,28,42,0.28),
0 2px 8px rgba(15,28,42,0.18);
transition: all .35s cubic-bezier(.2,.6,.2,1);
opacity: 1 !important;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.nav-cta::after { display: none !important; }
.nav-cta .arrow {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--cream);
color: var(--navy);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .4s cubic-bezier(.2,.6,.2,1), background .35s ease;
}
.nav-cta .arrow svg {
width: 12px; height: 12px;
transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.nav-cta:hover {
background: var(--blue);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255,255,255,0.12) inset,
0 12px 32px rgba(30,58,82,0.35),
0 4px 12px rgba(30,58,82,0.22);
}
.nav-cta:hover .arrow { background: var(--warm); }
.nav-cta:hover .arrow svg { transform: translateX(2px); }
/* When scrolled (cream nav background), button stays navy — already high contrast */
nav.scrolled .nav-cta {
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 6px 18px rgba(15,28,42,0.18),
0 1px 4px rgba(15,28,42,0.12);
}
/* Slightly tighten on mobile */
@media (max-width: 880px) {
.nav-cta { padding: 10px 12px 10px 18px; font-size: 12px; }
.nav-cta .arrow { width: 22px; height: 22px; }
}
/* ─── Hamburger nav toggle (visible <= 880px) ─── */
.nav-toggle {
display: none;
background: transparent; border: 0; padding: 8px;
color: inherit; cursor: pointer;
border-radius: 8px;
transition: background .2s ease;
}
.nav-toggle:hover { background: rgba(255,255,255,0.10); }
nav.scrolled .nav-toggle:hover { background: rgba(30,58,82,0.06); }
.nav-toggle-bars,
.nav-toggle-bars span {
display: block;
width: 22px; height: 2px;
background: currentColor; border-radius: 2px;
position: relative;
transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars { width: 22px; height: 16px; background: transparent; }
.nav-toggle-bars span { position: absolute; left: 0; }
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 7px; }
.nav-toggle-bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 880px) {
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
/* The full nav becomes a slide-down panel pinned under the bar. */
.nav-links {
position: fixed;
top: 0; left: 0; right: 0;
padding: 92px 28px 28px;
gap: 18px;
flex-direction: column;
align-items: stretch;
background: var(--cream);
color: var(--navy);
box-shadow: 0 18px 40px rgba(15,30,42,0.20);
transform: translateY(-110%);
transition: transform .3s ease;
z-index: 50;
max-height: 100vh;
overflow-y: auto;
}
body.nav-open .nav-links { transform: translateY(0); }
body.nav-open { overflow: hidden; }
.nav-links a {
display: block;
padding: 12px 4px;
font-size: 16px !important;
letter-spacing: 0.02em;
color: var(--navy) !important;
opacity: 1 !important;
border-bottom: 1px solid var(--rule-soft);
}
.nav-links a.nav-portal,
.nav-links a.nav-cta {
border: 1px solid var(--rule);
border-radius: 999px;
text-align: center;
padding: 12px 18px;
margin-top: 8px;
background: var(--cream);
}
.nav-links a.nav-cta {
background: var(--navy);
color: var(--cream) !important;
border-color: var(--navy);
}
/* Make the hamburger readable when the nav is on a dark photo. */
nav.on-photo .nav-toggle { color: var(--cream); }
}
/* ───── HERO ───── */
.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
color: var(--cream);
}
.hero-image {
position: absolute; inset: 0;
background-image: url('https://images.unsplash.com/photo-1558904541-efa843a96f01?w=2400&q=90&auto=format&fit=crop');
background-size: cover;
background-position: center;
animation: slowZoom 30s ease-out infinite alternate;
}
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(30,58,82,0.55) 0%, rgba(30,58,82,0.45) 40%, rgba(30,58,82,0.65) 80%, rgba(30,58,82,0.85) 100%),
linear-gradient(90deg, rgba(30,58,82,0.5) 0%, rgba(30,58,82,0.15) 50%, rgba(30,58,82,0.3) 100%);
}
/* Hero stack vertically centered in the viewport. Tight 10px top/bottom
padding so total chrome around the centered stack stays small and the
stack actually fits — earlier 320px-max logo + 80px title pushed the
stack past the viewport on common 700–800px tall windows, breaking
the centering. */
.hero-content {
position: relative; z-index: 2;
min-height: 100vh;
min-height: 100dvh;
display: flex; flex-direction: column;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 880px) {
.hero-content { padding-top: 10px; padding-bottom: 10px; }
}
.hero-layout {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(4px, 0.8vh, 10px);
}
.hero-text {
width: 100%;
text-align: center;
}
.hero-text .hero-title { margin-left: auto; margin-right: auto; }
.hero-text .hero-sub { margin-left: auto; margin-right: auto; }
.hero-text .hero-ctas { justify-content: center; }
.hero-mark {
display: block;
width: clamp(120px, 18vh, 220px);
height: clamp(120px, 18vh, 220px);
min-width: clamp(120px, 18vh, 220px);
min-height: clamp(120px, 18vh, 220px);
color: var(--cream);
flex-shrink: 0;
opacity: 0.97;
filter: drop-shadow(0 4px 24px rgba(0,0,0,0.35));
animation: fadeUp 1.4s cubic-bezier(.2,.6,.2,1) both .1s;
}
.hero-mark svg { width: 100%; height: 100%; }
@media (max-width: 880px) {
.hero-sub { font-size: 16px; }
}
.hero-eyebrow {
color: rgba(251,250,245,0.85);
margin-bottom: clamp(10px, 1.6vh, 18px);
display: inline-flex; align-items: center; gap: 14px;
animation: fadeUp 1.2s ease both .2s;
}
.hero-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--warm); }
.hero-title {
font-size: clamp(38px, 5.5vw, 80px);
max-width: 14ch;
margin-bottom: clamp(8px, 1.2vh, 14px);
color: var(--cream);
text-shadow: 0 2px 24px rgba(0,0,0,0.25);
animation: fadeUp 1.2s ease both .4s;
}
.hero-title em { color: var(--cream); font-style: italic; }
.hero-title em::after {
content: "";
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--warm);
margin-left: 4px;
vertical-align: 0.2em;
}
.hero-sub {
font-size: 18px; line-height: 1.55;
max-width: 44ch;
color: var(--cream);
margin-bottom: clamp(14px, 2.5vh, 26px);
text-shadow: 0 1px 12px rgba(0,0,0,0.4);
animation: fadeUp 1.2s ease both .6s;
}
.hero-ctas {
display: flex; gap: 14px; flex-wrap: wrap;
animation: fadeUp 1.2s ease both .8s;
}
.hero-scroll {
position: absolute; bottom: 30px; right: 48px;
z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: var(--cream);
font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase;
opacity: 0.7;
animation: fadeUp 1.2s ease both 1s;
}
.hero-scroll .line {
width: 1px; height: 60px;
background: linear-gradient(to bottom, transparent, var(--cream));
position: relative; overflow: hidden;
}
.hero-scroll .line::after {
content: ""; position: absolute; top: -20px; left: 0;
width: 1px; height: 20px; background: var(--warm);
animation: scrollDrop 2.4s ease-in-out infinite;
}
@keyframes scrollDrop { 0% { top: -20px; } 100% { top: 100%; } }
@media (max-width: 780px) { .hero-scroll { right: 22px; } }
@media (max-height: 760px) { .hero-scroll { display: none; } }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ───── TRUST STRIP — bold band ───── */
.trust {
background: var(--navy);
color: var(--cream);
padding: 48px 0 !important;
position: relative;
overflow: hidden;
}
.trust::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 15% 50%, rgba(127,162,186,0.18), transparent 50%),
radial-gradient(circle at 85% 50%, rgba(201,166,112,0.10), transparent 55%);
pointer-events: none;
}
.trust .wrap { position: relative; z-index: 1; }
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
align-items: center;
}
.trust-item {
text-align: center;
padding: 8px 24px;
border-right: 1px solid rgba(251,250,245,0.14);
position: relative;
}
.trust-item:last-child { border-right: none; }
.trust-item .num {
font-family: var(--f-display);
font-weight: 300;
font-size: 56px;
line-height: 1;
color: var(--cream);
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.trust-item .num em {
font-style: italic;
color: var(--warm);
font-weight: 400;
}
.trust-item .label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(251,250,245,0.65);
}
@media (max-width: 780px) {
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.trust-item { padding: 24px 16px; border-right: 1px solid rgba(251,250,245,0.14); }
.trust-item:nth-child(2n) { border-right: none; }
.trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(251,250,245,0.14); }
.trust-item .num { font-size: 42px; }
}
/* ───── SECTIONS ───── */
section { padding: 140px 0; position: relative; }
@media (max-width: 780px) { section { padding: 90px 0; } }
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 70px;
}
.section-head .eyebrow {
margin-bottom: 22px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
content: "";
width: 22px;
height: 1px;
background: var(--warm);
opacity: 0.6;
}
.section-head .title {
font-size: clamp(36px, 4.8vw, 68px);
margin-bottom: 24px;
}
.section-head .subtitle {
font-size: 17px; line-height: 1.55;
color: var(--navy-soft);
max-width: 58ch; margin: 0 auto;
}
/* ───── ABOUT / INTRO ───── */
.about { background: var(--cream); }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 50px; } }
.about-image-wrap {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: 0 30px 80px rgba(30,58,82,0.18);
}
.about-image-wrap::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(30,58,82,0.35) 100%);
z-index: 1;
pointer-events: none;
}
.about-image-wrap img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 2s cubic-bezier(.2,.6,.2,1);
}
.about-image-wrap:hover img { transform: scale(1.04); }
.about-image-badge {
position: absolute;
bottom: 24px; left: 24px;
background: rgba(251,250,245,0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 12px 20px 12px 16px;
border-radius: 999px;
font-family: var(--f-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy);
box-shadow: 0 12px 36px rgba(30,58,82,0.18);
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 2;
}
.about-image-badge .pin {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--warm);
margin: 0;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(201,166,112,0.18);
}
/* Decorative number marker on the image */
.about-image-wrap::after {
content: "01";
position: absolute;
top: 24px;
right: 28px;
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: 64px;
line-height: 1;
color: rgba(251,250,245,0.85);
text-shadow: 0 2px 16px rgba(30,58,82,0.5);
z-index: 2;
letter-spacing: -0.02em;
}
.about-content .eyebrow { margin-bottom: 20px; }
.about-content h2 {
font-size: clamp(34px, 4.4vw, 58px);
margin-bottom: 28px;
max-width: 14ch;
}
.about-content p {
font-size: 17px; line-height: 1.7;
color: var(--navy-soft);
margin-bottom: 20px;
max-width: 52ch;
}
.about-content p:last-of-type { margin-bottom: 36px; }
.signature {
display: flex; align-items: center; gap: 18px;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.signature-mark {
font-family: var(--f-display);
font-style: italic;
font-size: 28px;
color: var(--navy);
line-height: 1;
}
.signature-info { font-size: 13px; color: var(--mist); }
.signature-info strong { display: block; color: var(--navy); font-weight: 500; margin-bottom: 2px; }
/* ───── SERVICES ───── */
.services { background: var(--cream-warm); }
.services-category {
margin-top: 80px;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.services-category:first-of-type { margin-top: 0; }
.services-category h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 38px;
line-height: 1;
color: var(--navy);
letter-spacing: -0.015em;
display: inline-flex;
align-items: center;
gap: 18px;
position: relative;
}
.services-category h3::before {
content: "";
width: 36px;
height: 4px;
background: var(--warm);
border-radius: 2px;
flex-shrink: 0;
}
.services-category h3 em {
font-style: italic;
color: var(--blue);
}
.services-category .cat-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--rule), transparent);
min-width: 30px;
}
.services-category .cat-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
background: var(--navy);
padding: 9px 18px;
border-radius: 999px;
border: none;
box-shadow: 0 4px 14px rgba(30,58,82,0.18);
}
.services-category .cat-tag::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--warm);
}
.services-category .cat-tag.muted {
color: var(--navy);
background: var(--sand);
box-shadow: 0 4px 14px rgba(201,184,150,0.35);
}
.services-category .cat-tag.muted::before {
background: var(--blue);
}
@media (max-width: 780px) {
.services-category { margin-top: 60px; margin-bottom: 28px; gap: 16px; }
.services-category h3 { font-size: 28px; }
.services-category h3::before { width: 28px; height: 3px; }
.services-category .cat-line { display: none; }
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
.service {
background: var(--cream);
padding: 36px 30px 32px;
border-radius: var(--radius);
transition: all .5s cubic-bezier(.2,.6,.2,1);
border: 1px solid var(--rule-soft);
position: relative;
overflow: hidden;
}
/* Top accent bar — appears on hover, sweeps from left in warm gold */
.service::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, var(--warm), var(--sky-deep));
transform: scaleX(0);
transform-origin: left;
transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
/* Subtle warm wash that fades in on hover */
.service::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 140px; height: 140px;
background: radial-gradient(circle at top right, rgba(201,166,112,0.10), transparent 70%);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.service:hover {
transform: translateY(-6px);
box-shadow:
0 24px 56px rgba(30,58,82,0.12),
0 4px 12px rgba(30,58,82,0.05);
border-color: var(--sky);
}
.service:hover::before { transform: scaleX(1); }
.service:hover::after { opacity: 1; }
.service-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--sky) 0%, var(--cream-warm) 100%);
display: grid; place-items: center;
margin-bottom: 24px;
color: var(--navy);
position: relative;
transition: all .5s cubic-bezier(.2,.6,.2,1);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(30,58,82,0.08);
}
.service-icon svg { width: 26px; height: 26px; stroke-width: 1.4; }
.service:hover .service-icon {
background: var(--navy);
color: var(--cream);
transform: rotate(-4deg) scale(1.05);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 20px rgba(30,58,82,0.25);
}
.service h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 26px;
line-height: 1.12;
margin-bottom: 12px;
color: var(--navy);
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.service p {
font-size: 14.5px;
line-height: 1.65;
color: var(--navy-soft);
position: relative;
z-index: 1;
}
/* Home Care tier — sand background uses warmer tone for icon */
.services-grid + .services-category + .services-grid .service-icon {
background: linear-gradient(135deg, var(--sand) 0%, var(--cream-warm) 100%);
}
.services-grid + .services-category + .services-grid .service:hover .service-icon {
background: var(--navy);
}
/* ───── PROCESS — editorial layout ───── */
.process { background: var(--cream); }
.process-stack {
max-width: 1100px;
margin: 0 auto;
}
.process-row {
display: grid;
grid-template-columns: 220px 1fr 80px;
gap: 50px;
align-items: start;
padding: 56px 0;
border-top: 1px solid var(--rule);
position: relative;
}
.process-row:last-child { border-bottom: 1px solid var(--rule); }
.process-row::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 40px;
height: 1px;
background: var(--warm);
transition: width .6s cubic-bezier(.2,.6,.2,1);
}
.process-row:hover::before { width: 120px; }
.process-num {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: 92px;
line-height: 0.85;
color: var(--sky-deep);
letter-spacing: -0.02em;
position: relative;
}
.process-num::after {
content: attr(data-step);
position: absolute;
top: 18px;
left: 0;
font-family: var(--f-body);
font-style: normal;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--warm);
transform: translateX(120px);
white-space: nowrap;
}
.process-content h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 38px;
line-height: 1.1;
color: var(--navy);
margin-bottom: 16px;
letter-spacing: -0.015em;
max-width: 18ch;
}
.process-content h3 em {
font-style: italic;
color: var(--blue);
}
.process-content p {
font-size: 17px;
line-height: 1.65;
color: var(--navy-soft);
max-width: 52ch;
}
.process-icon {
width: 60px; height: 60px;
border-radius: 50%;
background: var(--cream-warm);
color: var(--blue);
display: grid; place-items: center;
margin-left: auto;
transition: all .4s ease;
}
.process-icon svg { width: 26px; height: 26px; stroke-width: 1.3; }
.process-row:hover .process-icon {
background: var(--navy);
color: var(--cream);
transform: scale(1.05) rotate(-4deg);
}
@media (max-width: 880px) {
.process-row {
grid-template-columns: 1fr;
gap: 18px;
padding: 40px 0;
}
.process-num { font-size: 64px; }
.process-num::after { display: none; }
.process-content h3 { font-size: 28px; }
.process-icon { display: none; }
}
/* ───── TEAM — feature spread ───── */
.team {
background: var(--cream);
position: relative;
}
.team::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--rule);
}
.team-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr; gap: 28px; } }
.member {
position: relative;
background: var(--cream-warm);
border-radius: var(--radius-lg);
overflow: hidden;
padding: 56px 48px 48px;
transition: all .5s cubic-bezier(.2,.6,.2,1);
border: 1px solid transparent;
}
.member::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, var(--warm), var(--sky-deep));
transform: scaleX(0);
transform-origin: left;
transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.member:hover {
background: var(--cream);
border-color: var(--rule);
transform: translateY(-6px);
box-shadow: 0 24px 64px rgba(30,58,82,0.10);
}
.member:hover::before { transform: scaleX(1); }
.member-header {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.member-portrait {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--cream);
color: var(--blue);
display: grid; place-items: center;
flex-shrink: 0;
font-family: var(--f-display);
font-weight: 300;
font-size: 44px;
line-height: 1;
letter-spacing: -0.02em;
box-shadow: 0 0 0 1px var(--rule), 0 4px 12px rgba(30,58,82,0.08);
transition: all .4s ease;
}
.member-portrait em { font-style: italic; }
.member:hover .member-portrait {
background: var(--navy);
color: var(--cream);
transform: rotate(-4deg);
}
.member-id { flex: 1; min-width: 0; }
.member h4 {
font-family: var(--f-display);
font-weight: 400;
font-size: 38px;
line-height: 1;
color: var(--navy);
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.member .role {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sky-deep);
margin-bottom: 0;
}
.member-pull {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 1.4;
color: var(--navy);
margin-bottom: 24px;
letter-spacing: -0.005em;
}
.member-pull::before {
content: "“";
color: var(--warm);
font-size: 32px;
line-height: 0;
vertical-align: -0.15em;
margin-right: 4px;
}
.member .bio {
font-size: 15.5px;
line-height: 1.7;
color: var(--navy-soft);
margin-bottom: 32px;
}
.member-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.member-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
background: var(--cream);
border: 1px solid var(--rule);
font-size: 11.5px;
font-weight: 500;
color: var(--navy-soft);
letter-spacing: 0.02em;
transition: all .3s ease;
}
.member-tag .tag-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--warm);
}
.member:hover .member-tag {
background: var(--cream-warm);
border-color: var(--sky);
}
@media (max-width: 880px) {
.member { padding: 40px 28px 32px; }
.member-header { gap: 18px; margin-bottom: 28px; padding-bottom: 24px; }
.member-portrait { width: 68px; height: 68px; font-size: 34px; }
.member h4 { font-size: 30px; }
.member-pull { font-size: 19px; }
}
/* ───── PROMISE — confident card stack ───── */
.testimonials {
background: var(--cream);
border-top: 1px solid var(--rule);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial {
background: var(--cream);
padding: 56px 40px 44px;
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
position: relative;
transition: all .5s cubic-bezier(.2,.6,.2,1);
overflow: hidden;
}
.testimonial::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--cream-warm) 0%, transparent 60%);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.testimonial:hover {
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(30,58,82,0.10);
border-color: var(--sky);
}
.testimonial:hover::before { opacity: 1; }
.testimonial > * { position: relative; z-index: 1; }
.testimonial-mark {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: 84px;
line-height: 0.7;
color: var(--warm);
margin-bottom: 28px;
display: block;
letter-spacing: -0.02em;
}
.testimonial-text {
font-family: var(--f-display);
font-weight: 400;
font-size: 24px;
line-height: 1.35;
color: var(--navy);
margin-bottom: 36px;
letter-spacing: -0.005em;
}
.testimonial-text em {
font-style: italic;
color: var(--blue);
}
.testimonial-who {
padding-top: 24px;
border-top: 1px solid var(--rule);
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-who-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--sky);
color: var(--navy);
display: grid; place-items: center;
flex-shrink: 0;
}
.testimonial-who-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.testimonial-who strong {
display: block;
font-family: var(--f-body);
font-weight: 500;
font-size: 14px;
color: var(--navy);
margin-bottom: 2px;
}
.testimonial-who span {
font-size: 11px;
color: var(--mist);
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* ───── CTA BAND ───── */
.cta-band {
position: relative;
padding: 140px 0;
color: var(--cream);
overflow: hidden;
text-align: center;
}
.cta-band-bg {
position: absolute; inset: 0;
background-image: url('https://images.unsplash.com/photo-1594672352351-ef69ef04527f?w=2400&q=85&auto=format&fit=crop');
background-size: cover; background-position: center;
filter: brightness(0.5) saturate(0.95);
transform: scale(1.02);
transition: transform 8s ease-out;
}
.cta-band:hover .cta-band-bg { transform: scale(1.06); }
.cta-band::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 50%, rgba(30,58,82,0.4) 0%, rgba(30,58,82,0.85) 100%),
linear-gradient(180deg, rgba(30,58,82,0.4), rgba(30,58,82,0.6));
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--warm);
}
.cta-band-eyebrow::before,
.cta-band-eyebrow::after {
content: "";
width: 30px;
height: 1px;
background: var(--warm);
opacity: 0.6;
}
.cta-band h2 {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.05;
letter-spacing: -0.015em;
max-width: 20ch;
margin: 0 auto 24px;
color: var(--cream);
text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.cta-band h2 em {
color: var(--warm);
font-style: italic;
}
.cta-band p {
font-size: 18px; line-height: 1.5;
color: rgba(251,250,245,0.88);
max-width: 44ch;
margin: 0 auto 44px;
text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.cta-band .btn-primary {
background: var(--cream);
color: var(--navy);
padding: 18px 32px;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.04em;
box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.4) inset;
border-radius: 999px;
transition: all .35s cubic-bezier(.2,.6,.2,1);
}
.cta-band .btn-primary:hover {
background: var(--warm);
color: var(--navy);
transform: translateY(-2px);
box-shadow: 0 20px 48px rgba(201,166,112,0.4), 0 1px 0 rgba(255,255,255,0.4) inset;
}
/* ───── INQUIRE ───── */
.inquire { background: var(--cream); }
.inquire-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) { .inquire-grid { grid-template-columns: 1fr; gap: 50px; } }
.inquire-info .eyebrow { margin-bottom: 20px; }
.inquire-info h2 {
font-size: clamp(36px, 4.8vw, 58px);
margin-bottom: 24px;
max-width: 12ch;
}
.inquire-info p {
font-size: 17px; line-height: 1.65;
color: var(--navy-soft);
margin-bottom: 36px;
max-width: 42ch;
}
.contact-card {
background: var(--navy);
color: var(--cream);
padding: 32px;
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
box-shadow: 0 24px 56px rgba(30,58,82,0.18);
}
.contact-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 220px; height: 220px;
background: radial-gradient(circle at top right, rgba(201,166,112,0.16), transparent 70%);
pointer-events: none;
}
.contact-card > * { position: relative; z-index: 1; }
.contact-row {
display: flex; align-items: center; gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(251,250,245,0.10);
}
.contact-row:first-child { padding-top: 0; }
.contact-row:last-child { padding-bottom: 0; border-bottom: none; }
.contact-row .c-ico {
width: 44px; height: 44px; border-radius: 12px;
background: rgba(251,250,245,0.06);
border: 1px solid rgba(251,250,245,0.12);
display: grid; place-items: center;
color: var(--warm);
flex-shrink: 0;
transition: all .3s ease;
}
.contact-row:hover .c-ico {
background: var(--warm);
color: var(--navy);
border-color: var(--warm);
}
.contact-row .c-ico svg { width: 18px; height: 18px; stroke-width: 1.6; }
.contact-row .c-info .label {
font-size: 10.5px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--sand); margin-bottom: 4px;
}
.contact-row .c-info .value {
font-family: var(--f-display); font-size: 19px;
color: var(--cream); font-weight: 400;
}
.form-card {
background: var(--cream);
padding: 44px;
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
box-shadow: 0 24px 64px rgba(30,58,82,0.08), 0 4px 16px rgba(30,58,82,0.04);
position: relative;
}
.form-card::before {
content: "";
position: absolute;
top: -1px; left: 24px; right: 24px;
height: 3px;
background: linear-gradient(to right, transparent, var(--warm), var(--sky-deep), transparent);
border-radius: 0 0 4px 4px;
}
@media (max-width: 560px) { .form-card { padding: 30px 24px; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field-group { margin-bottom: 18px; }
.field-group label {
display: block;
font-size: 11px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mist); margin-bottom: 8px;
}
.field-group input, .field-group textarea, .field-group select {
width: 100%;
background: var(--cream-warm);
border: 1px solid transparent;
padding: 14px 18px;
border-radius: 10px;
font-family: var(--f-body);
font-size: 15px;
color: var(--navy);
transition: all .3s ease;
outline: none;
resize: vertical;
}
.field-group input:focus, .field-group textarea:focus, .field-group select:focus {
background: var(--cream);
border-color: var(--sky-deep);
box-shadow: 0 0 0 4px rgba(127,162,186,0.15);
}
.field-group input::placeholder, .field-group textarea::placeholder {
color: var(--mist);
}
.field-group textarea { min-height: 110px; line-height: 1.55; }
.form-submit {
width: 100%;
background: var(--navy);
color: var(--cream);
border: none;
padding: 20px;
border-radius: 12px;
font-family: var(--f-body);
font-size: 14px; font-weight: 500;
letter-spacing: 0.1em;
cursor: pointer;
transition: all .35s cubic-bezier(.2,.6,.2,1);
margin-top: 12px;
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 12px 28px rgba(15,28,42,0.22),
0 4px 10px rgba(15,28,42,0.12);
position: relative;
overflow: hidden;
}
.form-submit::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--blue), var(--navy));
opacity: 0;
transition: opacity .35s ease;
}
.form-submit > * { position: relative; }
.form-submit:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,0.12) inset,
0 16px 36px rgba(30,58,82,0.32),
0 6px 14px rgba(30,58,82,0.18);
}
.form-submit:hover::before { opacity: 1; }
/* ───── FOOTER ───── */
footer {
background: var(--navy);
color: var(--cream);
padding: 100px 0 32px;
position: relative;
overflow: hidden;
}
footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--warm), transparent);
}
footer::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 90% 0%, rgba(201,166,112,0.10), transparent 50%),
radial-gradient(circle at 0% 100%, rgba(127,162,186,0.10), transparent 60%);
pointer-events: none;
}
footer .wrap { position: relative; z-index: 1; }
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 80px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(251,250,245,0.1);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
/* Footer logo — explicit sizing since vhs_logo_mark uses .vhs-mark class */
.footer-brand .vhs-mark,
.footer-brand .mark-icon {
width: 64px;
height: 64px;
display: inline-grid;
place-items: center;
margin-bottom: 24px;
color: var(--cream);
flex-shrink: 0;
}
.footer-brand .vhs-mark svg,
.footer-brand .mark-icon svg {
width: 100%;
height: 100%;
display: block;
}
.footer-brand .vhs-mark svg path,
.footer-brand .mark-icon svg path { fill: currentColor; }
.footer-brand .brand-name {
font-family: var(--f-display);
font-weight: 300;
font-size: 36px;
line-height: 1.05;
margin-bottom: 18px;
letter-spacing: -0.015em;
}
.footer-brand .brand-name em { font-style: italic; color: var(--warm); }
.footer-brand p {
font-size: 14.5px;
line-height: 1.6;
color: rgba(251,250,245,0.72);
max-width: 34ch;
}
.footer-col h5 {
font-size: 11px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--warm);
margin-bottom: 22px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.footer-col h5::before {
content: "";
width: 14px;
height: 1px;
background: var(--warm);
opacity: 0.6;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
font-size: 14.5px;
color: rgba(251,250,245,0.72);
transition: all .3s ease;
display: inline-block;
}
.footer-col a:hover {
color: var(--cream);
transform: translateX(3px);
}
.footer-bottom {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
font-size: 12px;
color: rgba(251,250,245,0.5);
}
.footer-bottom a { color: inherit; transition: color .3s ease; }
.footer-bottom a:hover { color: var(--cream); }
@media (max-width: 620px) { .footer-bottom { flex-direction: column; text-align: center; } }
/* ───── REVEAL ───── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
/* ───── INNER PAGE STYLES ───── */
/* Skip link for accessibility */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
left: 20px;
top: 20px;
width: auto;
height: auto;
z-index: 100;
padding: 12px 20px;
background: var(--navy);
color: var(--cream);
border-radius: 8px;
}
/* Page hero — used on About, Services, Contact, etc. */
.page-hero {
padding: 180px 0 80px;
background: var(--cream-warm);
text-align: center;
border-bottom: 1px solid var(--rule);
}
.page-hero .eyebrow { display: inline-block; margin-bottom: 24px; color: var(--sky-deep); }
.page-hero h1 {
font-size: clamp(40px, 5.6vw, 80px);
margin-bottom: 24px;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
.page-hero .page-subtitle {
font-size: 19px;
line-height: 1.55;
color: var(--navy-soft);
max-width: 56ch;
margin: 0 auto;
}
.page-body { padding: 100px 0; }
.page-content {
max-width: 720px;
margin: 0 auto;
font-size: 17px;
line-height: 1.7;
color: var(--navy-soft);
}
.page-content h2 {
font-family: var(--f-display);
font-weight: 400;
font-size: 38px;
color: var(--navy);
margin: 48px 0 20px;
letter-spacing: -0.015em;
}
.page-content p { margin-bottom: 20px; }
/* Portfolio archive */
.portfolio-archive { padding: 100px 0; background: var(--cream); }
.portfolio-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 50px;
justify-content: center;
}
.filter-chip {
padding: 10px 20px;
border-radius: 999px;
background: var(--cream-warm);
color: var(--navy-soft);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
border: 1px solid var(--rule);
transition: all .3s ease;
}
.filter-chip:hover { background: var(--cream); border-color: var(--sky-deep); }
.filter-chip.active {
background: var(--navy);
color: var(--cream);
border-color: var(--navy);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .portfolio-grid { grid-template-columns: 1fr; } }
.pf-tile {
position: relative;
overflow: hidden;
border-radius: var(--radius);
aspect-ratio: 4/3;
display: block;
transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.pf-tile:hover { transform: translateY(-4px); }
.pf-tile img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.6s cubic-bezier(.2,.6,.2,1);
}
.pf-tile:hover img { transform: scale(1.06); }
.pf-tile-placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--sky), var(--sky-deep));
color: rgba(255,255,255,0.7);
display: grid; place-items: center;
font-family: var(--f-display);
font-style: italic;
font-size: 18px;
}
.pf-cap {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px 22px 18px;
background: linear-gradient(to top, rgba(30,58,82,0.85), transparent);
color: var(--cream);
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
}
.pf-cap .name {
font-family: var(--f-display);
font-style: italic;
font-size: 20px;
}
.pf-cap .town {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sand);
}
/* Project hero */
.project-hero {
min-height: 60vh;
background-size: cover;
background-position: center;
background-color: var(--navy);
position: relative;
color: var(--cream);
padding: 200px 0 80px;
display: flex;
align-items: end;
}
.project-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(30,58,82,0.4) 0%, rgba(30,58,82,0.85) 100%);
}
.project-hero .wrap { position: relative; z-index: 1; }
.project-hero h1 {
font-size: clamp(40px, 6vw, 88px);
color: var(--cream);
margin: 16px 0;
text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.project-hero .eyebrow { color: var(--warm); }
.project-location {
font-size: 18px;
color: rgba(251,250,245,0.85);
font-family: var(--f-display);
font-style: italic;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cream);
opacity: 0.7;
transition: opacity .3s;
}
.back-link:hover { opacity: 1; }
.project-meta {
background: var(--cream-warm);
padding: 50px 0;
border-bottom: 1px solid var(--rule);
}
.meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
@media (max-width: 780px) { .meta-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.meta-item .label {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 8px;
}
.meta-item .value {
font-family: var(--f-display);
font-size: 22px;
color: var(--navy);
font-weight: 400;
letter-spacing: -0.005em;
}
.project-body { padding: 100px 0; }
.project-content { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--navy-soft); }
.project-content p { margin-bottom: 20px; }
.project-content h2, .project-content h3 {
font-family: var(--f-display);
color: var(--navy);
margin: 40px 0 16px;
font-weight: 400;
}
.project-gallery { padding: 60px 0 100px; background: var(--cream-warm); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 780px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 1;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.related-projects { padding: 100px 0; background: var(--cream); border-top: 1px solid var(--rule); }
/* Town archive */
.towns-grid-section { padding: 100px 0; background: var(--cream); }
.towns-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .towns-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .towns-grid { grid-template-columns: 1fr; } }
.town-card {
background: var(--cream-warm);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--rule-soft);
transition: all .4s cubic-bezier(.2,.6,.2,1);
display: block;
}
.town-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(30,58,82,0.10);
border-color: var(--sky);
}
.town-card-image {
width: 100%;
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: var(--sky);
transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.town-card.has-image { overflow: hidden; }
.town-card.has-image:hover .town-card-image {
transform: scale(1.06);
}
.town-card-body { padding: 28px; }
.town-card-coord {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mist);
font-weight: 500;
margin-bottom: 12px;
}
.town-card h3 {
font-size: 32px;
line-height: 1;
margin-bottom: 12px;
color: var(--navy);
font-weight: 400;
}
.town-card p {
font-size: 15px;
line-height: 1.55;
color: var(--navy-soft);
margin-bottom: 18px;
}
.town-card-arrow {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--blue);
text-transform: uppercase;
}
.town-card.placeholder { opacity: 0.7; }
.town-card.placeholder .empty-tag {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--sand);
color: var(--navy);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Town single */
.town-hero {
min-height: 50vh;
background-size: cover;
background-position: center;
background-color: var(--navy);
position: relative;
color: var(--cream);
padding: 200px 0 80px;
display: flex;
align-items: end;
}
.town-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(30,58,82,0.5) 0%, rgba(30,58,82,0.85) 100%);
}
.town-hero .wrap { position: relative; z-index: 1; }
.town-hero h1 {
font-size: clamp(40px, 6vw, 88px);
color: var(--cream);
margin: 16px 0 0;
}
.town-hero .eyebrow { color: var(--warm); }
.town-body { padding: 100px 0; }
.town-content { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--navy-soft); }
.town-content h2 {
font-family: var(--f-display);
font-weight: 400;
font-size: 38px;
color: var(--navy);
margin: 48px 0 20px;
letter-spacing: -0.015em;
}
.town-service-list {
list-style: none;
margin: 24px 0 32px;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 600px) { .town-service-list { grid-template-columns: 1fr; } }
.town-service-list li {
padding: 10px 0 10px 24px;
position: relative;
border-bottom: 1px solid var(--rule-soft);
}
.town-service-list li::before {
content: "";
position: absolute;
left: 0; top: 18px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--warm);
}
.town-projects { padding: 100px 0; background: var(--cream-warm); border-top: 1px solid var(--rule); }
/* Empty state */
.empty-state {
text-align: center;
padding: 80px 20px;
max-width: 540px;
margin: 0 auto;
}
.empty-state h2 { font-size: 38px; margin-bottom: 16px; }
.empty-state p { font-size: 17px; color: var(--navy-soft); margin-bottom: 32px; }
/* Pagination */
.nav-links.pagination,
nav.pagination,
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 60px;
}
.pagination .page-numbers {
padding: 10px 16px;
border-radius: 8px;
background: var(--cream-warm);
color: var(--navy);
font-size: 14px;
font-weight: 500;
transition: all .3s ease;
text-decoration: none;
}
.pagination .page-numbers.current { background: var(--navy); color: var(--cream); }
.pagination .page-numbers:hover:not(.current) { background: var(--sky); }
/* Form flash messages */
.vhs-flash {
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 24px;
font-size: 14.5px;
line-height: 1.5;
border: 1px solid;
}
.vhs-flash-success {
background: rgba(127, 162, 186, 0.10);
border-color: var(--sky-deep);
color: var(--navy);
}
.vhs-flash-error {
background: rgba(201, 166, 112, 0.10);
border-color: var(--warm);
color: var(--navy);
}
/* ════════════════════════════════════════════════════════
THANK YOU PAGE
════════════════════════════════════════════════════════ */
.thanks-hero {
position: relative;
padding: 200px 0 100px;
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
text-align: center;
overflow: hidden;
}
.thanks-hero-bg {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
}
.thanks-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
}
.thanks-blob-1 {
top: -100px; right: -120px;
width: 480px; height: 480px;
background: radial-gradient(circle, var(--warm), transparent 70%);
animation: thanks-drift 14s ease-in-out infinite;
}
.thanks-blob-2 {
bottom: -180px; left: -80px;
width: 540px; height: 540px;
background: radial-gradient(circle, var(--sky-deep), transparent 70%);
opacity: 0.3;
animation: thanks-drift 18s ease-in-out infinite reverse;
}
@keyframes thanks-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(40px, -30px); }
}
.thanks-content {
position: relative;
max-width: 760px;
margin: 0 auto;
}
/* Animated checkmark — the moment of confirmation */
.thanks-check {
width: 96px; height: 96px;
margin: 0 auto 40px;
color: var(--blue);
background: var(--cream);
border-radius: 50%;
box-shadow:
0 0 0 8px rgba(127,162,186,0.12),
0 12px 32px rgba(30,58,82,0.10);
padding: 8px;
animation: thanks-check-in 0.8s cubic-bezier(.2,.8,.2,1) both 0.1s;
}
.thanks-check svg { width: 100%; height: 100%; }
/* Stroke-drawing animation for the circle and check */
.thanks-check-circle {
stroke-dasharray: 226;
stroke-dashoffset: 226;
animation: thanks-draw 0.7s cubic-bezier(.2,.8,.2,1) forwards 0.4s;
}
.thanks-check-mark {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: thanks-draw 0.4s cubic-bezier(.2,.8,.2,1) forwards 0.9s;
}
@keyframes thanks-draw {
to { stroke-dashoffset: 0; }
}
@keyframes thanks-check-in {
0% { transform: scale(0.4); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.thanks-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--sky-deep);
margin-bottom: 28px;
animation: thanks-fade-up 0.8s cubic-bezier(.2,.8,.2,1) both 1.0s;
}
.thanks-eyebrow::before,
.thanks-eyebrow::after {
content: "";
width: 24px; height: 1px;
background: var(--warm);
}
.thanks-headline {
font-size: clamp(40px, 5.6vw, 76px);
line-height: 1.05;
margin-bottom: 28px;
color: var(--navy);
letter-spacing: -0.02em;
animation: thanks-fade-up 1s cubic-bezier(.2,.8,.2,1) both 1.2s;
}
.thanks-headline em {
font-style: italic;
color: var(--blue);
}
.thanks-subhead {
font-size: 19px;
line-height: 1.55;
color: var(--navy-soft);
max-width: 56ch;
margin: 0 auto;
animation: thanks-fade-up 1s cubic-bezier(.2,.8,.2,1) both 1.4s;
}
.thanks-subhead em {
font-style: italic;
color: var(--navy);
font-weight: 500;
}
@keyframes thanks-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* What's next steps */
.thanks-next {
background: var(--cream);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.thanks-steps {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}
/* Connecting vertical line behind the numbers */
.thanks-steps::before {
content: "";
position: absolute;
left: 36px;
top: 60px;
bottom: 60px;
width: 1px;
background: linear-gradient(to bottom, var(--warm) 0%, var(--rule) 50%, var(--rule) 100%);
opacity: 0.5;
}
.thanks-step {
display: grid;
grid-template-columns: 88px 1fr;
gap: 28px;
align-items: start;
position: relative;
}
.thanks-step-num {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--cream-warm);
color: var(--blue);
display: grid; place-items: center;
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: 28px;
line-height: 1;
position: relative;
z-index: 1;
border: 1px solid var(--rule);
box-shadow: 0 4px 12px rgba(30,58,82,0.06);
transition: all .4s cubic-bezier(.2,.6,.2,1);
}
.thanks-step:hover .thanks-step-num {
background: var(--navy);
color: var(--cream);
transform: scale(1.05);
}
.thanks-step-content {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 32px 36px;
transition: all .4s cubic-bezier(.2,.6,.2,1);
}
.thanks-step:hover .thanks-step-content {
border-color: var(--sky);
box-shadow: 0 12px 36px rgba(30,58,82,0.08);
transform: translateY(-2px);
}
.thanks-step-content h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 26px;
line-height: 1.2;
color: var(--navy);
margin-bottom: 12px;
letter-spacing: -0.005em;
}
.thanks-step-content p {
font-size: 16px;
line-height: 1.65;
color: var(--navy-soft);
margin-bottom: 18px;
}
.thanks-step-content p em {
font-style: italic;
color: var(--navy);
font-weight: 500;
}
.thanks-step-meta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--cream-warm);
color: var(--sky-deep);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
}
.thanks-step-meta svg { color: var(--warm); }
@media (max-width: 700px) {
.thanks-steps::before { display: none; }
.thanks-step { grid-template-columns: 56px 1fr; gap: 16px; }
.thanks-step-num { width: 56px; height: 56px; font-size: 22px; }
.thanks-step-content { padding: 24px 22px; }
.thanks-step-content h3 { font-size: 22px; }
}
/* While you wait cards */
.thanks-while-you-wait {
background: var(--cream-warm);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.thanks-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 880px) { .thanks-cards { grid-template-columns: 1fr; } }
.thanks-card {
background: var(--cream);
padding: 36px 32px;
border-radius: var(--radius-lg);
border: 1px solid var(--rule-soft);
display: block;
transition: all .5s cubic-bezier(.2,.6,.2,1);
position: relative;
overflow: hidden;
}
.thanks-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, var(--warm), var(--sky-deep));
transform: scaleX(0);
transform-origin: left;
transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.thanks-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(30,58,82,0.12);
border-color: var(--sky);
}
.thanks-card:hover::before { transform: scaleX(1); }
.thanks-card-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--sky) 0%, var(--cream-warm) 100%);
display: grid; place-items: center;
color: var(--navy);
margin-bottom: 24px;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(30,58,82,0.08);
transition: all .4s cubic-bezier(.2,.6,.2,1);
}
.thanks-card-icon svg { width: 26px; height: 26px; }
.thanks-card:hover .thanks-card-icon {
background: var(--navy);
color: var(--cream);
transform: rotate(-4deg) scale(1.05);
}
.thanks-card h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 24px;
line-height: 1.15;
color: var(--navy);
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.thanks-card p {
font-size: 14.5px;
line-height: 1.6;
color: var(--navy-soft);
margin-bottom: 20px;
}
.thanks-card-arrow {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
transition: all .3s ease;
}
.thanks-card:hover .thanks-card-arrow {
color: var(--warm);
letter-spacing: 0.16em;
}
/* Direct contact card */
.thanks-direct {
background: var(--cream);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.thanks-direct-card {
background: var(--navy);
color: var(--cream);
border-radius: var(--radius-lg);
padding: 56px 64px;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
position: relative;
overflow: hidden;
box-shadow: 0 24px 64px rgba(30,58,82,0.18);
}
.thanks-direct-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 320px; height: 320px;
background: radial-gradient(circle at top right, rgba(201,166,112,0.20), transparent 70%);
pointer-events: none;
}
.thanks-direct-content {
position: relative;
z-index: 1;
}
.thanks-direct-content .eyebrow {
color: var(--warm);
margin-bottom: 16px;
}
.thanks-direct-content h2 {
font-size: clamp(28px, 3.2vw, 44px);
color: var(--cream);
margin-bottom: 16px;
letter-spacing: -0.015em;
}
.thanks-direct-content h2 em {
font-style: italic;
color: var(--warm);
}
.thanks-direct-content p {
font-size: 16px;
line-height: 1.55;
color: rgba(251,250,245,0.8);
}
.thanks-direct-actions {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
}
.thanks-contact-tile {
background: rgba(251,250,245,0.06);
border: 1px solid rgba(251,250,245,0.12);
border-radius: var(--radius);
padding: 18px 22px;
display: flex;
align-items: center;
gap: 18px;
transition: all .35s cubic-bezier(.2,.6,.2,1);
color: var(--cream);
}
.thanks-contact-tile:hover {
background: rgba(251,250,245,0.1);
border-color: var(--warm);
transform: translateX(4px);
}
.thanks-contact-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(251,250,245,0.06);
border: 1px solid rgba(251,250,245,0.14);
display: grid; place-items: center;
color: var(--warm);
flex-shrink: 0;
transition: all .3s ease;
}
.thanks-contact-tile:hover .thanks-contact-icon {
background: var(--warm);
color: var(--navy);
border-color: var(--warm);
}
.thanks-contact-info { display: flex; flex-direction: column; gap: 2px; }
.thanks-contact-info .label {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sand);
}
.thanks-contact-info .value {
font-family: var(--f-display);
font-size: 19px;
color: var(--cream);
font-weight: 400;
}
@media (max-width: 880px) {
.thanks-direct-card {
grid-template-columns: 1fr;
padding: 40px 32px;
gap: 32px;
}
}
/* ════════════════════════════════════════════════════════
CONTACT PAGE — polished build
════════════════════════════════════════════════════════ */
.contact-hero {
position: relative;
padding: 200px 0 100px;
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
overflow: hidden;
}
.contact-hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 90% 10%, rgba(201,166,112,0.10), transparent 40%),
radial-gradient(circle at 5% 100%, rgba(127,162,186,0.10), transparent 50%);
pointer-events: none;
}
.contact-hero .wrap { position: relative; z-index: 1; }
.contact-hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 980px) {
.contact-hero-grid { grid-template-columns: 1fr; gap: 56px; }
}
.contact-hero-content .eyebrow {
color: var(--sky-deep);
margin-bottom: 24px;
display: inline-block;
}
.contact-hero-content h1 {
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.05;
margin-bottom: 28px;
color: var(--navy);
letter-spacing: -0.02em;
}
.contact-hero-lede {
font-size: 19px;
line-height: 1.55;
color: var(--navy-soft);
max-width: 50ch;
margin-bottom: 48px;
}
.contact-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
border-top: 1px solid var(--rule);
padding-top: 32px;
}
@media (max-width: 600px) {
.contact-hero-stats { grid-template-columns: 1fr; gap: 16px; }
}
.contact-stat .contact-stat-value {
font-family: var(--f-display);
font-weight: 300;
font-size: 38px;
line-height: 1;
color: var(--navy);
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.contact-stat .contact-stat-value em {
font-style: italic;
color: var(--warm);
}
.contact-stat .contact-stat-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mist);
}
/* Direct contact card on the side */
.contact-direct {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 12px;
box-shadow: 0 24px 56px rgba(30,58,82,0.08);
}
.contact-direct-header {
padding: 16px 20px 8px;
}
.contact-direct-header .eyebrow {
color: var(--sky-deep);
}
.contact-direct-row {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border-radius: var(--radius);
transition: all .35s cubic-bezier(.2,.6,.2,1);
color: var(--navy);
}
.contact-direct-row:not(.contact-direct-static):hover {
background: var(--cream-warm);
transform: translateX(2px);
}
.contact-direct-row + .contact-direct-row { border-top: 1px solid var(--rule-soft); margin-top: 2px; }
.contact-direct-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--sky) 0%, var(--cream-warm) 100%);
display: grid; place-items: center;
color: var(--navy);
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 10px rgba(30,58,82,0.06);
transition: all .3s ease;
}
.contact-direct-row:hover .contact-direct-icon {
background: var(--navy);
color: var(--warm);
}
.contact-direct-info { flex: 1; min-width: 0; }
.contact-direct-info .label {
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 4px;
}
.contact-direct-info .value {
font-family: var(--f-display);
font-size: 19px;
color: var(--navy);
font-weight: 400;
}
.contact-direct-arrow {
color: var(--mist);
transition: all .3s ease;
flex-shrink: 0;
}
.contact-direct-row:hover .contact-direct-arrow {
color: var(--warm);
transform: translateX(3px);
}
/* FAQ section */
.contact-faq {
background: var(--cream-warm);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.faq-list {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
transition: all .4s cubic-bezier(.2,.6,.2,1);
}
.faq-item:hover { border-color: var(--sky); }
.faq-item[open] {
border-color: var(--sky-deep);
box-shadow: 0 12px 32px rgba(30,58,82,0.08);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 28px;
cursor: pointer;
list-style: none;
transition: all .3s ease;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--cream-warm); }
.faq-item[open] summary { padding-bottom: 12px; }
.faq-question {
font-family: var(--f-display);
font-weight: 400;
font-size: 22px;
line-height: 1.3;
color: var(--navy);
letter-spacing: -0.005em;
}
.faq-toggle {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--cream-warm);
color: var(--blue);
display: grid; place-items: center;
flex-shrink: 0;
transition: all .35s cubic-bezier(.2,.6,.2,1);
}
.faq-toggle svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.2,.6,.2,1); }
.faq-item[open] .faq-toggle {
background: var(--navy);
color: var(--cream);
}
.faq-item[open] .faq-toggle svg {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 28px 24px;
border-top: 1px solid var(--rule-soft);
padding-top: 20px;
margin-top: 0;
}
.faq-answer p {
font-size: 16px;
line-height: 1.7;
color: var(--navy-soft);
margin: 0;
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer a {
color: var(--blue);
border-bottom: 1px solid var(--sky);
transition: all .3s ease;
}
.faq-answer a:hover { color: var(--warm); border-color: var(--warm); }
@media (max-width: 600px) {
.faq-item summary { padding: 20px 22px; gap: 16px; }
.faq-question { font-size: 18px; }
.faq-answer { padding: 16px 22px 20px; }
}
/* ════════════════════════════════════════════════════════
SERVICES PAGE
════════════════════════════════════════════════════════ */
.services-page-hero {
position: relative;
padding: 200px 0 100px;
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
overflow: hidden;
text-align: center;
}
.services-page-hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 90% 10%, rgba(201,166,112,0.10), transparent 40%),
radial-gradient(circle at 5% 100%, rgba(127,162,186,0.08), transparent 50%);
pointer-events: none;
}
.services-page-hero .wrap { position: relative; z-index: 1; }
.services-page-hero-content {
max-width: 760px;
margin: 0 auto;
}
.services-page-hero-content .eyebrow {
color: var(--sky-deep);
margin-bottom: 24px;
display: inline-block;
}
.services-page-hero-content h1 {
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.05;
margin-bottom: 28px;
color: var(--navy);
letter-spacing: -0.02em;
}
.services-page-lede {
font-size: 19px;
line-height: 1.55;
color: var(--navy-soft);
max-width: 56ch;
margin: 0 auto 36px;
}
.services-page-chips {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.services-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: var(--cream);
border: 1px solid var(--rule);
font-size: 13px;
color: var(--navy);
font-weight: 500;
letter-spacing: 0.01em;
}
.services-chip-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--warm);
}
/* SEASONALITY CALENDAR */
.services-calendar {
background: var(--cream-warm);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.calendar-wrap { max-width: 1180px; margin: 0 auto; }
.calendar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 980px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .calendar-grid { grid-template-columns: 1fr; } }
.calendar-season {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 32px 28px;
transition: all .5s cubic-bezier(.2,.6,.2,1);
position: relative;
overflow: hidden;
}
.calendar-season::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--season-color, var(--warm));
transform: scaleX(0);
transform-origin: left;
transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.calendar-season:hover {
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(30,58,82,0.10);
border-color: var(--season-color, var(--sky));
}
.calendar-season:hover::before { transform: scaleX(1); }
.calendar-spring { --season-color: #8FB87E; }
.calendar-summer { --season-color: var(--warm); }
.calendar-fall { --season-color: #C97D45; }
.calendar-winter { --season-color: var(--sky-deep); }
.calendar-season-header {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--rule-soft);
}
.calendar-season-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--cream-warm);
color: var(--season-color, var(--navy));
display: grid; place-items: center;
margin-bottom: 16px;
transition: all .4s ease;
}
.calendar-season-icon svg { width: 22px; height: 22px; }
.calendar-season:hover .calendar-season-icon {
background: var(--season-color, var(--navy));
color: var(--cream);
transform: rotate(-6deg);
}
.calendar-season-name {
font-family: var(--f-display);
font-weight: 400;
font-size: 28px;
line-height: 1;
color: var(--navy);
margin-bottom: 6px;
letter-spacing: -0.015em;
}
.calendar-season-months {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mist);
}
.calendar-tasks {
list-style: none;
margin: 0;
padding: 0;
}
.calendar-tasks li {
font-size: 14.5px;
line-height: 1.5;
color: var(--navy-soft);
padding: 9px 0 9px 22px;
position: relative;
border-bottom: 1px solid var(--rule-soft);
}
.calendar-tasks li:last-child { border-bottom: none; }
.calendar-tasks li::before {
content: "";
position: absolute;
left: 0; top: 16px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--season-color, var(--warm));
opacity: 0.65;
}
.calendar-footnote {
margin-top: 32px;
text-align: center;
font-size: 13px;
color: var(--mist);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.calendar-footnote svg { color: var(--warm); }
/* SERVICES FAQ — reuses .faq-list / .faq-item from contact page */
.services-faq {
background: var(--cream);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
/* ════════════════════════════════════════════════════════
ABOUT PAGE
════════════════════════════════════════════════════════ */
.about-page-hero {
position: relative;
padding: 200px 0 100px;
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
overflow: hidden;
text-align: center;
}
.about-page-hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 90% 10%, rgba(127,162,186,0.10), transparent 40%),
radial-gradient(circle at 5% 100%, rgba(201,166,112,0.10), transparent 50%);
pointer-events: none;
}
.about-page-hero .wrap { position: relative; z-index: 1; }
.about-page-hero-content {
max-width: 820px;
margin: 0 auto;
}
.about-page-hero-content .eyebrow {
color: var(--sky-deep);
margin-bottom: 24px;
display: inline-block;
}
.about-page-hero-content h1 {
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.05;
margin-bottom: 28px;
color: var(--navy);
letter-spacing: -0.02em;
}
.about-page-lede {
font-size: 19px;
line-height: 1.55;
color: var(--navy-soft);
max-width: 56ch;
margin: 0 auto;
}
/* WHY US — comparison table */
.about-why {
background: var(--cream-warm);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.why-table {
background: var(--cream);
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
box-shadow: 0 24px 64px rgba(30,58,82,0.08);
overflow: hidden;
max-width: 1080px;
margin: 0 auto;
}
.why-row {
display: grid;
grid-template-columns: 1.1fr 1fr 1.1fr;
align-items: stretch;
}
.why-row + .why-row { border-top: 1px solid var(--rule-soft); }
.why-row-header { background: var(--cream-warm); }
.why-cell {
padding: 22px 28px;
font-size: 15.5px;
line-height: 1.5;
color: var(--navy-soft);
}
.why-cell-label {
font-family: var(--f-display);
font-style: italic;
font-size: 18px;
color: var(--navy);
background: var(--cream-warm);
border-right: 1px solid var(--rule-soft);
}
.why-cell-them {
color: var(--mist);
text-decoration: line-through;
text-decoration-color: rgba(149,158,173,0.4);
text-decoration-thickness: 1px;
border-right: 1px solid var(--rule-soft);
}
.why-cell-us {
color: var(--navy);
background: rgba(127,162,186,0.06);
}
.why-cell-us strong {
font-weight: 500;
color: var(--navy);
}
.why-col-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--cream);
color: var(--mist);
border: 1px solid var(--rule);
}
.why-col-tag-us {
background: var(--navy);
color: var(--cream);
border-color: var(--navy);
}
.why-col-tag-us svg { color: var(--warm); }
@media (max-width: 880px) {
.why-row {
grid-template-columns: 1fr;
padding: 8px 0;
}
.why-cell {
padding: 12px 22px;
border: none !important;
}
.why-cell-label {
background: var(--cream-warm);
padding-top: 22px;
font-size: 16px;
}
.why-cell-them::before {
content: "Most companies: ";
display: block;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 4px;
text-decoration: none;
}
.why-cell-us::before {
content: "Vineyard Home Services: ";
display: block;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 4px;
}
.why-row-header { display: none; }
}
/* TESTIMONIALS PLACEHOLDERS */
.about-testimonials {
background: var(--cream);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 980px) { .testimonials-grid { grid-template-columns: 1fr; max-width: 640px; } }
.quote-card {
background: var(--cream-warm);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 36px 32px 28px;
position: relative;
transition: all .5s cubic-bezier(.2,.6,.2,1);
}
.quote-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 56px rgba(30,58,82,0.10);
border-color: var(--sky);
}
.quote-mark {
position: absolute;
top: 12px; left: 24px;
font-family: var(--f-display);
font-size: 96px;
line-height: 0.8;
color: var(--warm);
opacity: 0.35;
pointer-events: none;
}
.quote-body {
position: relative;
margin: 32px 0 32px;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 19px;
line-height: 1.45;
color: var(--navy);
letter-spacing: -0.005em;
}
.quote-cite {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--rule);
}
.quote-cite-portrait {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--cream);
color: var(--mist);
display: grid; place-items: center;
flex-shrink: 0;
font-family: var(--f-display);
font-size: 22px;
font-weight: 300;
border: 1px solid var(--rule);
}
.quote-cite-portrait em { font-style: italic; }
.quote-cite-name {
font-size: 14px;
font-weight: 500;
color: var(--navy);
margin-bottom: 2px;
}
.quote-cite-loc {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mist);
}
.quote-status {
position: absolute;
top: 16px; right: 18px;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
background: var(--mist);
padding: 4px 10px;
border-radius: 999px;
opacity: 0.85;
}
.testimonials-disclaimer {
margin-top: 40px;
text-align: center;
font-size: 13px;
color: var(--mist);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.testimonials-disclaimer svg { color: var(--warm); }
/* ════════════════════════════════════════════════════════
CONTACT PAGE — embedded map
════════════════════════════════════════════════════════ */
.contact-map-section {
background: var(--cream);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
.contact-map-wrap {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 24px;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 880px) {
.contact-map-wrap { grid-template-columns: 1fr; }
}
.contact-map-frame {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--cream-warm);
aspect-ratio: 4/3;
box-shadow: 0 24px 56px rgba(30,58,82,0.10);
border: 1px solid var(--rule);
}
.contact-map-frame iframe {
width: 100%; height: 100%;
border: 0;
display: block;
filter: saturate(0.85);
}
.contact-map-card {
background: var(--navy);
color: var(--cream);
border-radius: var(--radius-lg);
padding: 40px 36px;
box-shadow: 0 24px 56px rgba(30,58,82,0.16);
position: relative;
overflow: hidden;
}
.contact-map-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 200px; height: 200px;
background: radial-gradient(circle at top right, rgba(201,166,112,0.18), transparent 70%);
pointer-events: none;
}
.contact-map-card > * { position: relative; z-index: 1; }
.contact-map-card .eyebrow {
color: var(--warm);
margin-bottom: 16px;
display: inline-block;
}
.contact-map-card h3 {
font-size: 32px;
color: var(--cream);
margin-bottom: 28px;
line-height: 1.1;
letter-spacing: -0.015em;
}
.contact-map-address,
.contact-map-hours {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 0;
border-top: 1px solid rgba(251,250,245,0.12);
font-size: 15.5px;
line-height: 1.55;
color: rgba(251,250,245,0.85);
}
.contact-map-address svg,
.contact-map-hours svg {
color: var(--warm);
flex-shrink: 0;
margin-top: 2px;
}
.contact-map-directions {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 12px 22px;
border-radius: 999px;
background: var(--warm);
color: var(--navy);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
transition: all .35s cubic-bezier(.2,.6,.2,1);
}
.contact-map-directions:hover {
background: var(--cream);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
/* ════════════════════════════════════════════════════════
SERVICE AREAS — Island map
════════════════════════════════════════════════════════ */
.areas-hero {
position: relative;
padding: 200px 0 100px;
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
overflow: hidden;
text-align: center;
}
.areas-hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 90% 10%, rgba(127,162,186,0.10), transparent 40%),
radial-gradient(circle at 5% 100%, rgba(201,166,112,0.08), transparent 50%);
pointer-events: none;
}
.areas-hero .wrap { position: relative; z-index: 1; }
.areas-hero-content { max-width: 760px; margin: 0 auto; }
.areas-hero-content .eyebrow {
color: var(--sky-deep);
margin-bottom: 24px;
display: inline-block;
}
.areas-hero-content h1 {
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.05;
margin-bottom: 28px;
color: var(--navy);
letter-spacing: -0.02em;
}
.areas-hero-lede {
font-size: 19px;
line-height: 1.55;
color: var(--navy-soft);
max-width: 56ch;
margin: 0 auto;
}
/* MAP SECTION */
.areas-map-section {
background: var(--cream);
padding: 80px 0 60px;
border-top: 1px solid var(--rule);
}
.areas-map-wrap {
max-width: 980px;
margin: 0 auto;
}
.island-map {
width: 100%;
height: auto;
background: var(--cream-warm);
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
box-shadow: 0 24px 56px rgba(30,58,82,0.08);
display: block;
}
/* SVG map text styles */
.island-map .map-sea-label {
font-family: var(--f-display);
font-style: italic;
font-size: 14px;
fill: var(--sky-deep);
opacity: 0.5;
letter-spacing: 0.02em;
}
.island-map .pin-label {
font-family: var(--f-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
fill: var(--navy);
pointer-events: none;
transition: all .35s cubic-bezier(.2,.6,.2,1);
}
.island-map .pin-dot {
fill: var(--navy);
transition: all .35s cubic-bezier(.2,.6,.2,1);
cursor: pointer;
}
.island-map .pin-halo {
fill: var(--warm);
opacity: 0;
transition: all .35s cubic-bezier(.2,.6,.2,1);
transform-origin: center;
cursor: pointer;
}
.island-map .island-pin {
cursor: pointer;
transition: all .35s cubic-bezier(.2,.6,.2,1);
}
.island-map .island-pin:hover .pin-halo,
.island-map .island-pin:focus .pin-halo {
opacity: 0.4;
transform: scale(1.4);
transform-box: fill-box;
}
.island-map .island-pin:hover .pin-dot,
.island-map .island-pin:focus .pin-dot {
fill: var(--warm);
r: 10;
}
.island-map .island-pin:hover .pin-label,
.island-map .island-pin:focus .pin-label {
fill: var(--warm);
font-weight: 600;
font-size: 14px;
}
.island-map .map-compass {
pointer-events: none;
}
.island-map .map-compass-label {
font-family: var(--f-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
fill: var(--navy);
opacity: 0.5;
}
/* Subtle pulse on the dot at idle, so it draws the eye */
@keyframes pin-pulse {
0%, 100% { opacity: 0; transform: scale(1); }
50% { opacity: 0.25; transform: scale(1.3); }
}
.island-map .island-pin:not(:hover):not(:focus) .pin-halo {
animation: pin-pulse 3s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
.island-map .island-pin:nth-of-type(2) .pin-halo { animation-delay: 0.4s; }
.island-map .island-pin:nth-of-type(3) .pin-halo { animation-delay: 0.8s; }
.island-map .island-pin:nth-of-type(4) .pin-halo { animation-delay: 1.2s; }
.island-map .island-pin:nth-of-type(5) .pin-halo { animation-delay: 1.6s; }
.island-map .island-pin:nth-of-type(6) .pin-halo { animation-delay: 2.0s; }
.island-map-legend {
margin-top: 28px;
text-align: center;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.island-map-legend p {
font-size: 14px;
color: var(--navy-soft);
line-height: 1.55;
}
.areas-grid-section {
background: var(--cream-warm);
padding: 100px 0;
border-top: 1px solid var(--rule);
}
/* ════════════════════════════════════════════════════════
PAGE HEROES WITH PHOTO BACKGROUNDS
Shared treatment for Services, About, Contact, Service Areas, Portfolio
════════════════════════════════════════════════════════ */
.services-page-hero.has-image,
.about-page-hero.has-image,
.contact-hero.has-image,
.areas-hero.has-image,
.portfolio-page-hero.has-image {
background: var(--navy);
color: var(--cream);
position: relative;
overflow: hidden;
padding: 220px 0 110px;
min-height: 60vh;
display: flex;
align-items: center;
}
.services-page-hero-image,
.about-page-hero-image,
.contact-hero-image,
.areas-hero-image,
.portfolio-page-hero-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
animation: heroSlowZoom 30s ease-out infinite alternate;
}
@keyframes heroSlowZoom {
from { transform: scale(1); }
to { transform: scale(1.06); }
}
/* Overlay that puts a calming navy wash + bottom gradient over the photo */
.services-page-hero-overlay,
.about-page-hero-overlay,
.contact-hero-overlay,
.areas-hero-overlay,
.portfolio-page-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(30,58,82,0.55) 0%, rgba(30,58,82,0.45) 40%, rgba(30,58,82,0.78) 100%),
linear-gradient(90deg, rgba(30,58,82,0.45) 0%, rgba(30,58,82,0.15) 50%, rgba(30,58,82,0.30) 100%);
z-index: 1;
}
/* Content sits above the overlay */
.services-page-hero.has-image .wrap,
.about-page-hero.has-image .wrap,
.contact-hero.has-image .wrap,
.areas-hero.has-image .wrap,
.portfolio-page-hero.has-image .wrap {
position: relative;
z-index: 2;
}
/* Text on photo gets cream color and subtle shadow for legibility */
.services-page-hero.has-image h1,
.about-page-hero.has-image h1,
.contact-hero.has-image h1,
.areas-hero.has-image h1,
.portfolio-page-hero.has-image h1 {
color: var(--cream);
text-shadow: 0 2px 24px rgba(0,0,0,0.30);
}
.services-page-hero.has-image h1 em,
.about-page-hero.has-image h1 em,
.contact-hero.has-image h1 em,
.areas-hero.has-image h1 em,
.portfolio-page-hero.has-image h1 em {
color: var(--warm);
}
.services-page-hero.has-image .eyebrow,
.about-page-hero.has-image .eyebrow,
.contact-hero.has-image .eyebrow,
.areas-hero.has-image .eyebrow,
.portfolio-page-hero.has-image .eyebrow {
color: var(--warm);
}
.services-page-hero.has-image .services-page-lede,
.about-page-hero.has-image .about-page-lede,
.contact-hero.has-image .contact-hero-lede,
.areas-hero.has-image .areas-hero-lede,
.portfolio-page-hero.has-image .portfolio-page-lede {
color: rgba(251, 250, 245, 0.9);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
/* Service chips on hero photo — translucent pills with cream text */
.services-page-hero.has-image .services-chip {
background: rgba(251, 250, 245, 0.10);
border: 1px solid rgba(251, 250, 245, 0.25);
color: var(--cream);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.services-page-hero.has-image .services-chip-dot { background: var(--warm); }
/* Contact stats on hero photo — adjust borders and label color */
.contact-hero.has-image .contact-hero-stats {
border-top-color: rgba(251, 250, 245, 0.18);
}
.contact-hero.has-image .contact-stat-value {
color: var(--cream);
}
.contact-hero.has-image .contact-stat-value em {
color: var(--warm);
}
.contact-hero.has-image .contact-stat-label {
color: rgba(251, 250, 245, 0.65);
}
/* Direct contact card on the contact hero — invert to cream-on-navy-photo treatment */
.contact-hero.has-image .contact-direct {
background: rgba(251, 250, 245, 0.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.25);
}
/* Portfolio page hero — needs lede styles since we replaced .page-subtitle */
.portfolio-page-hero-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.portfolio-page-hero-content .eyebrow {
margin-bottom: 24px;
display: inline-block;
}
.portfolio-page-hero-content h1 {
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.05;
margin-bottom: 28px;
letter-spacing: -0.02em;
}
.portfolio-page-lede {
font-size: 19px;
line-height: 1.55;
max-width: 56ch;
margin: 0 auto;
}
/* Mobile — reduce hero padding on smaller viewports */
@media (max-width: 780px) {
.services-page-hero.has-image,
.about-page-hero.has-image,
.contact-hero.has-image,
.areas-hero.has-image,
.portfolio-page-hero.has-image {
padding: 140px 0 80px;
min-height: 50vh;
}
}
/* ════════════════════════════════════════════════════════
SERVICE AREAS — Google Maps embed
════════════════════════════════════════════════════════ */
.google-map-wrap {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 24px;
max-width: 1180px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 980px) {
.google-map-wrap { grid-template-columns: 1fr; }
}
.google-map-frame {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--cream-warm);
aspect-ratio: 4/3;
box-shadow: 0 24px 56px rgba(30,58,82,0.12);
border: 1px solid var(--rule);
position: relative;
}
.google-map-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.google-map-towns {
background: var(--navy);
color: var(--cream);
border-radius: var(--radius-lg);
padding: 32px 28px;
box-shadow: 0 24px 56px rgba(30,58,82,0.16);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.google-map-towns::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 220px; height: 220px;
background: radial-gradient(circle at top right, rgba(201,166,112,0.18), transparent 70%);
pointer-events: none;
}
.google-map-towns-header {
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(251,250,245,0.14);
position: relative;
}
.google-map-towns-header .eyebrow {
color: var(--warm);
}
.google-map-towns-list {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
position: relative;
}
.google-map-town {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 10px;
color: var(--cream);
transition: all .3s cubic-bezier(.2,.6,.2,1);
}
.google-map-town:not(.google-map-town-static):hover {
background: rgba(251,250,245,0.08);
transform: translateX(3px);
}
.google-map-town .dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--warm);
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(201,166,112,0.18);
}
.google-map-town .dot-soft {
background: var(--sand);
box-shadow: 0 0 0 4px rgba(237,226,205,0.12);
}
.google-map-town .name {
font-family: var(--f-display);
font-size: 18px;
font-weight: 400;
color: var(--cream);
letter-spacing: 0.005em;
}
.google-map-town:not(.google-map-town-static):hover .name {
color: var(--warm);
}
.google-map-footnote {
position: relative;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(251,250,245,0.14);
font-size: 13px;
line-height: 1.55;
color: rgba(251,250,245,0.72);
font-style: italic;
font-family: var(--f-display);
}
/* Town card meta row — coord + side label */
.town-card-meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule-soft);
}
.town-card-meta .town-card-coord {
margin-bottom: 0;
}
.town-card-side {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
font-weight: 500;
padding: 3px 10px;
border-radius: 999px;
background: rgba(127,162,186,0.10);
}
/* ════════════════════════════════════════════════════════
GRADIENT-HERO ENHANCEMENTS (no photos)
Adds subtle visual texture to gradient hero pages
════════════════════════════════════════════════════════ */
/* Apply to all gradient page heroes */
.services-page-hero,
.about-page-hero,
.contact-hero,
.areas-hero,
.portfolio-page-hero {
position: relative;
padding: 200px 0 100px;
background:
radial-gradient(ellipse at top right, rgba(201,166,112,0.08), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(127,162,186,0.10), transparent 60%),
linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
overflow: hidden;
}
/* Decorative horizontal flourish line under each hero */
.services-page-hero::after,
.about-page-hero::after,
.contact-hero::after,
.areas-hero::after,
.portfolio-page-hero::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--rule) 20%, var(--warm) 50%, var(--rule) 80%, transparent 100%);
opacity: 0.6;
}
/* Add floating accent dots/circles to give the gradient hero some life */
.services-page-hero-pattern,
.about-page-hero-pattern,
.contact-hero-pattern,
.areas-hero-pattern,
.portfolio-page-hero-pattern {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.services-page-hero-pattern::before,
.about-page-hero-pattern::before,
.contact-hero-pattern::before,
.areas-hero-pattern::before,
.portfolio-page-hero-pattern::before {
content: "";
position: absolute;
top: 15%; right: 8%;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,166,112,0.18), transparent 70%);
filter: blur(40px);
animation: hero-float 18s ease-in-out infinite;
}
.services-page-hero-pattern::after,
.about-page-hero-pattern::after,
.contact-hero-pattern::after,
.areas-hero-pattern::after,
.portfolio-page-hero-pattern::after {
content: "";
position: absolute;
bottom: 10%; left: 5%;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(127,162,186,0.18), transparent 70%);
filter: blur(50px);
animation: hero-float 22s ease-in-out infinite reverse;
}
@keyframes hero-float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(40px, -30px); }
}
/* Make sure content sits above the decorative elements */
.services-page-hero .wrap,
.about-page-hero .wrap,
.contact-hero .wrap,
.areas-hero .wrap,
.portfolio-page-hero .wrap {
position: relative;
z-index: 2;
}
/* ════════════════════════════════════════════════════════
PORTFOLIO EMPTY STATE — polished
════════════════════════════════════════════════════════ */
.portfolio-empty {
max-width: 1080px;
margin: 0 auto;
padding: 40px 0;
}
.portfolio-empty-card {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 64px 56px;
text-align: center;
box-shadow: 0 24px 64px rgba(30,58,82,0.06);
position: relative;
overflow: hidden;
}
.portfolio-empty-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--warm) 50%, transparent 100%);
}
.portfolio-empty-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: var(--cream-warm);
border: 1px solid var(--rule);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 28px;
}
.eyebrow-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--warm);
box-shadow: 0 0 0 4px rgba(201,166,112,0.18);
animation: eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes eyebrow-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(201,166,112,0.18); }
50% { box-shadow: 0 0 0 8px rgba(201,166,112,0.06); }
}
.portfolio-empty-card h2 {
font-size: clamp(36px, 4.4vw, 56px);
line-height: 1.05;
margin-bottom: 24px;
color: var(--navy);
letter-spacing: -0.015em;
}
.portfolio-empty-lede {
font-size: 18px;
line-height: 1.6;
color: var(--navy-soft);
max-width: 56ch;
margin: 0 auto 40px;
}
.portfolio-empty-prior {
background: var(--cream-warm);
border-left: 3px solid var(--warm);
padding: 24px 28px;
border-radius: 0 12px 12px 0;
text-align: left;
max-width: 580px;
margin: 0 auto 40px;
}
.prior-eyebrow {
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 10px;
}
.portfolio-empty-prior p {
font-size: 15px;
line-height: 1.6;
color: var(--navy-soft);
margin: 0;
}
.portfolio-empty-prior strong {
color: var(--navy);
font-weight: 500;
}
.portfolio-empty-ctas {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.btn-outline {
background: transparent;
color: var(--navy);
border: 1px solid var(--rule);
padding: 12px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
transition: all .3s ease;
}
.btn-outline:hover {
background: var(--navy);
color: var(--cream);
border-color: var(--navy);
}
@media (max-width: 600px) {
.portfolio-empty-card { padding: 40px 28px; }
}
/* Preview tiles section */
.portfolio-preview {
margin-top: 80px;
}
.portfolio-preview-header {
text-align: center;
margin-bottom: 32px;
}
.portfolio-preview-header .eyebrow {
color: var(--sky-deep);
}
.portfolio-preview-note {
font-size: 13px;
font-style: italic;
font-family: var(--f-display);
color: var(--mist);
margin-top: 6px;
}
.portfolio-preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 880px) { .portfolio-preview-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.pf-preview-tile {
background: var(--cream);
border: 1px solid var(--rule-soft);
border-radius: var(--radius);
overflow: hidden;
opacity: 0.7;
transition: opacity .3s ease;
}
.pf-preview-tile:hover { opacity: 0.9; }
.pf-preview-img {
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--sky) 0%, var(--cream-warm) 50%, var(--sand) 100%);
position: relative;
}
.pf-preview-img::after {
content: "Photo coming soon";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--f-display);
font-style: italic;
color: rgba(30,58,82,0.4);
font-size: 14px;
}
.pf-preview-meta { padding: 20px 22px; }
.pf-preview-tag {
display: inline-block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 8px;
}
.pf-preview-meta h4 {
font-size: 22px;
font-weight: 400;
color: var(--navy);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.pf-preview-loc {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mist);
font-weight: 500;
}
/* ════════════════════════════════════════════════════════
INTERACTIVE GOOGLE MAP — when API key is set
════════════════════════════════════════════════════════ */
/* The interactive map container needs explicit dimensions */
#vhs-interactive-map {
width: 100%;
height: 100%;
min-height: 480px;
background: var(--cream-warm);
}
/* InfoWindow content — styled to match the brand */
.vhs-info-window {
font-family: var(--f-body);
padding: 6px 4px 8px;
max-width: 240px;
}
.vhs-info-window .vhs-info-side {
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 6px;
}
.vhs-info-window h4 {
font-family: var(--f-display);
font-weight: 400;
font-size: 22px;
line-height: 1.1;
color: var(--navy);
margin: 0 0 8px 0;
letter-spacing: -0.005em;
}
.vhs-info-window p {
font-size: 13px;
line-height: 1.5;
color: var(--navy-soft);
margin: 0 0 12px 0;
}
.vhs-info-window a {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: var(--navy);
color: var(--cream);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
transition: all .25s ease;
}
.vhs-info-window a:hover {
background: var(--warm);
color: var(--navy);
}
/* Override Google's default InfoWindow chrome a bit so it feels native */
.gm-style .gm-style-iw-c {
border-radius: 12px !important;
box-shadow: 0 12px 40px rgba(30,58,82,0.18) !important;
padding: 16px !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; }
/* ════════════════════════════════════════════════════════
POLISH PASS — airier spacing, refined typography
This block overrides earlier values; intentionally placed last
so its rules win the cascade by source order.
════════════════════════════════════════════════════════ */
/* — Airier section padding throughout — */
.trust { padding: 100px 0; }
.about { padding: 140px 0; }
.services-section { padding: 140px 0; }
.process { padding: 140px 0; }
.team { padding: 140px 0; }
.testimonials { padding: 140px 0; }
.inquire { padding: 140px 0; }
.services-calendar { padding: 140px 0; }
.services-faq { padding: 140px 0; }
.contact-faq { padding: 140px 0; }
.contact-map-section { padding: 140px 0; }
.about-why { padding: 140px 0; }
.about-testimonials { padding: 140px 0; }
.areas-map-section { padding: 100px 0 80px; }
.areas-grid-section { padding: 140px 0; }
.thanks-next, .thanks-while-you-wait, .thanks-direct { padding: 140px 0; }
/* — Bigger, more breathing-room heroes — */
.services-page-hero,
.about-page-hero,
.contact-hero,
.areas-hero,
.portfolio-page-hero {
padding: 220px 0 140px;
min-height: 70vh;
}
/* When a hero has a photo, push it taller for the cinematic feel */
.services-page-hero.has-image,
.about-page-hero.has-image,
.contact-hero.has-image,
.areas-hero.has-image,
.portfolio-page-hero.has-image {
padding: 240px 0 160px;
min-height: 78vh;
}
/* Mobile — keep it tight enough to actually use */
@media (max-width: 780px) {
.trust, .about, .services-section, .process, .team, .testimonials,
.inquire, .services-calendar, .services-faq, .contact-faq,
.contact-map-section, .about-why, .about-testimonials,
.areas-map-section, .areas-grid-section,
.thanks-next, .thanks-while-you-wait, .thanks-direct {
padding: 80px 0;
}
.services-page-hero,
.about-page-hero,
.contact-hero,
.areas-hero,
.portfolio-page-hero,
.services-page-hero.has-image,
.about-page-hero.has-image,
.contact-hero.has-image,
.areas-hero.has-image,
.portfolio-page-hero.has-image {
padding: 140px 0 80px;
min-height: 50vh;
}
}
/* — More generous .wrap on big screens — */
@media (min-width: 1400px) {
.wrap {
max-width: 1280px;
padding-left: 48px;
padding-right: 48px;
}
}
/* — Section heads: more breathing room — */
.section-head {
margin-bottom: 80px;
}
.section-head .title {
font-size: clamp(40px, 5vw, 68px);
line-height: 1.04;
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.section-head .eyebrow { margin-bottom: 24px; }
.section-head .subtitle {
font-size: 18px;
line-height: 1.65;
color: var(--navy-soft);
max-width: 60ch;
margin: 0 auto;
}
.section-head:not([class*="text-left"]) { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 780px) {
.section-head { margin-bottom: 56px; }
}
/* — Refined display headlines — */
.display, h1.display, h2.display {
letter-spacing: -0.018em;
font-feature-settings: "kern", "liga", "calt";
}
/* — Cards: more refined shadows + bigger hover lifts — */
.quote-card,
.thanks-card,
.calendar-season,
.pf-tile,
.town-card,
.faq-item,
.testimonial,
.why-table {
transition: all .55s cubic-bezier(.2, .6, .2, 1);
}
.quote-card:hover,
.thanks-card:hover,
.calendar-season:hover,
.pf-tile:hover,
.town-card:hover,
.testimonial:hover {
transform: translateY(-8px);
}
/* — Refined buttons with deeper shadow on hover — */
.btn-primary {
transition: all .35s cubic-bezier(.2, .6, .2, 1);
box-shadow: 0 4px 14px rgba(30,58,82,0.08);
}
.btn-primary:hover {
box-shadow: 0 12px 28px rgba(30,58,82,0.18);
transform: translateY(-2px);
}
/* — Form: more polished — */
.form-card {
padding: 48px 44px;
border-radius: var(--radius-lg);
background: var(--cream);
border: 1px solid var(--rule);
box-shadow: 0 24px 64px rgba(30,58,82,0.06);
}
@media (max-width: 600px) {
.form-card { padding: 32px 24px; }
}
/* — Trust band: softer, more elegant — */
.trust {
background: var(--cream);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.trust .num {
font-size: clamp(40px, 4vw, 52px);
line-height: 1;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.trust .label {
font-size: 11px;
letter-spacing: 0.24em;
color: var(--mist);
}
/* — About-image-wrap: bigger, more cinematic — */
.about-image-wrap {
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 32px 80px rgba(30,58,82,0.14);
position: relative;
}
.about-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.about-image-wrap:hover img {
transform: scale(1.04);
}
/* — Page hero text-shadow when on photo — extra polish — */
.services-page-hero.has-image h1,
.about-page-hero.has-image h1,
.contact-hero.has-image h1,
.areas-hero.has-image h1,
.portfolio-page-hero.has-image h1 {
text-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
/* — More elegant section intros: 1px gold rule above eyebrow — */
.section-head .eyebrow,
.services-page-hero-content > .eyebrow,
.about-page-hero-content > .eyebrow,
.contact-hero-content > .eyebrow,
.areas-hero-content > .eyebrow,
.portfolio-page-hero-content > .eyebrow {
position: relative;
padding-top: 16px;
}
.section-head .eyebrow::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 32px; height: 1px;
background: var(--warm);
transform: translateX(-50%);
}
/* — Footer: more airy — */
footer {
padding-top: 100px;
padding-bottom: 40px;
}
.footer-top {
gap: 80px;
padding-bottom: 80px;
}
@media (max-width: 900px) {
footer { padding-top: 80px; }
.footer-top { gap: 56px; padding-bottom: 56px; }
}
/* — Smoother reveal animation — */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .9s cubic-bezier(.2, .6, .2, 1), transform .9s cubic-bezier(.2, .6, .2, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }
/* — Lighter rule color across the board for more airy feel — */
:root {
--rule: rgba(30, 58, 82, 0.10);
--rule-soft: rgba(30, 58, 82, 0.06);
}
/* ════════════════════════════════════════════════════════
HOMEPAGE HERO — additional polish
════════════════════════════════════════════════════════ */
/* Bigger, more cinematic homepage hero */
.hero { min-height: 100vh; min-height: 100dvh; }
.hero-content { padding-top: 24px; }
@media (max-width: 780px) { .hero-content { padding-top: 14px; } }
.hero-title {
font-size: clamp(48px, 7.5vw, 108px);
line-height: 1.02;
letter-spacing: -0.025em;
margin-bottom: 32px;
}
.hero-sub {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.6;
margin-bottom: 48px;
max-width: 56ch;
}
/* Stronger overlay so text is always readable on photo */
.hero-overlay {
background:
linear-gradient(180deg, rgba(30,58,82,0.30) 0%, rgba(30,58,82,0.20) 35%, rgba(30,58,82,0.55) 100%),
linear-gradient(90deg, rgba(30,58,82,0.30) 0%, transparent 50%);
}
/* ════════════════════════════════════════════════════════
CONFIRMATION GREEN
Green is reserved exclusively for the success/confirmation
moment on the thank-you page. Everywhere else uses the
navy/cream/gold palette as before.
════════════════════════════════════════════════════════ */
/* The animated checkmark on the thank-you page — vibrant green */
.thanks-check {
color: var(--grass);
box-shadow:
0 0 0 8px rgba(34, 197, 94, 0.14),
0 12px 32px rgba(30, 58, 82, 0.10);
}
/* Form flash message: success goes green */
.vhs-flash-success {
background: rgba(34, 197, 94, 0.10);
border-color: var(--grass);
color: var(--forest);
}
/* ════════════════════════════════════════════════════════
THANK YOU CONFIRMATION — cinematic upgrade
════════════════════════════════════════════════════════ */
/* Light burst behind the checkmark — radial pulse */
.thanks-burst {
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-50%);
width: 1000px;
height: 1000px;
max-width: 130%;
border-radius: 50%;
background: radial-gradient(circle,
rgba(34, 197, 94, 0.20) 0%,
rgba(34, 197, 94, 0.10) 25%,
transparent 60%);
filter: blur(20px);
z-index: 0;
pointer-events: none;
opacity: 0;
animation: burst-in 2s cubic-bezier(.2, .8, .2, 1) forwards 0.3s;
}
@keyframes burst-in {
0% { opacity: 0; transform: translateX(-50%) scale(0.4); }
50% { opacity: 1; }
100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
}
/* Drifting particles — like dandelion seeds */
.thanks-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--grass);
opacity: 0;
bottom: -20px;
}
.particle.p1 { left: 8%; width: 4px; height: 4px; animation: drift 14s linear infinite 0.0s; }
.particle.p2 { left: 18%; width: 5px; height: 5px; background: var(--warm); animation: drift 12s linear infinite 1.5s; }
.particle.p3 { left: 28%; width: 6px; height: 6px; animation: drift 16s linear infinite 0.8s; }
.particle.p4 { left: 35%; width: 4px; height: 4px; animation: drift 11s linear infinite 3.2s; }
.particle.p5 { left: 48%; width: 7px; height: 7px; background: var(--sky-deep); animation: drift 18s linear infinite 0.5s; }
.particle.p6 { left: 60%; width: 5px; height: 5px; animation: drift 13s linear infinite 2.0s; }
.particle.p7 { left: 70%; width: 4px; height: 4px; background: var(--warm); animation: drift 15s linear infinite 1.2s; }
.particle.p8 { left: 80%; width: 6px; height: 6px; animation: drift 17s linear infinite 4.0s; }
.particle.p9 { left: 88%; width: 5px; height: 5px; animation: drift 12s linear infinite 0.0s; }
.particle.p10 { left: 95%; width: 4px; height: 4px; animation: drift 14s linear infinite 2.8s; }
@keyframes drift {
0% {
bottom: -20px;
opacity: 0;
transform: translateX(0) scale(0.6);
}
10% {
opacity: 0.8;
transform: translateX(8px) scale(1);
}
50% {
transform: translateX(-12px) scale(1);
opacity: 0.6;
}
90% {
opacity: 0.4;
transform: translateX(20px) scale(1);
}
100% {
bottom: 110%;
opacity: 0;
transform: translateX(0) scale(0.5);
}
}
/* Bigger, more dramatic checkmark with radiating rings */
.thanks-check {
position: relative;
width: 132px;
height: 132px;
margin: 0 auto 48px;
color: var(--grass);
background: var(--cream);
border-radius: 50%;
box-shadow:
0 0 0 12px rgba(34, 197, 94, 0.08),
0 24px 64px rgba(30, 58, 82, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
padding: 14px;
z-index: 2;
animation: thanks-check-in 1s cubic-bezier(.2, 1.2, .4, 1) both 0.1s;
}
.thanks-check::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, transparent 50%, rgba(34, 197, 94, 0.06) 100%);
}
/* Three radiating rings that pulse outward — the "ding" effect */
.thanks-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--grass);
pointer-events: none;
opacity: 0;
}
.thanks-ring-1 { animation: thanks-ring-out 2.4s cubic-bezier(.2, .8, .3, 1) infinite 1.6s; }
.thanks-ring-2 { animation: thanks-ring-out 2.4s cubic-bezier(.2, .8, .3, 1) infinite 2.4s; }
.thanks-ring-3 { animation: thanks-ring-out 2.4s cubic-bezier(.2, .8, .3, 1) infinite 3.2s; }
@keyframes thanks-ring-out {
0% { opacity: 0; transform: scale(1); border-width: 2px; }
20% { opacity: 0.55; }
100% { opacity: 0; transform: scale(2); border-width: 1px; }
}
/* Updated check-in animation — bigger bounce */
@keyframes thanks-check-in {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.15); opacity: 1; }
75% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; }
}
/* Stronger check stroke */
.thanks-check svg {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.thanks-check-circle {
stroke-dasharray: 226;
stroke-dashoffset: 226;
animation: thanks-draw 0.7s cubic-bezier(.2,.8,.2,1) forwards 0.5s;
}
.thanks-check-mark {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: thanks-draw 0.45s cubic-bezier(.2,.8,.2,1) forwards 1.0s;
}
@keyframes thanks-draw {
to { stroke-dashoffset: 0; }
}
/* Eyebrow with a small pulsing dot for "active confirmation" feel */
.thanks-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--grass-deep);
margin-bottom: 28px;
padding: 8px 18px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.10);
border: 1px solid rgba(34, 197, 94, 0.18);
animation: thanks-fade-up 0.8s cubic-bezier(.2,.8,.2,1) both 1.2s;
}
/* Override the old line-style eyebrow ::before/::after */
.thanks-eyebrow::before,
.thanks-eyebrow::after {
display: none;
}
.thanks-eyebrow-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--grass);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.20);
animation: thanks-eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes thanks-eyebrow-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.20); }
50% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0.05); }
}
/* Headline reveal slightly later */
.thanks-headline {
animation: thanks-fade-up 1s cubic-bezier(.2,.8,.2,1) both 1.4s;
}
.thanks-subhead {
animation: thanks-fade-up 1s cubic-bezier(.2,.8,.2,1) both 1.6s;
}
/* Receipt card — the substance of the confirmation */
.thanks-receipt {
max-width: 540px;
margin: 56px auto 0;
background: var(--cream);
border: 1px solid var(--rule);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(30, 58, 82, 0.12);
overflow: hidden;
text-align: left;
animation: thanks-fade-up 1s cubic-bezier(.2,.8,.2,1) both 1.9s;
}
.thanks-receipt-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: var(--cream-warm);
border-bottom: 1px solid var(--rule);
}
.thanks-receipt-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--cream);
display: grid;
place-items: center;
color: var(--navy);
flex-shrink: 0;
border: 1px solid var(--rule);
}
.thanks-receipt-header-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.thanks-receipt-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mist);
}
.thanks-receipt-id {
font-family: 'SF Mono', Menlo, 'Courier New', monospace;
font-size: 13px;
color: var(--navy);
font-weight: 500;
letter-spacing: 0.04em;
}
.thanks-receipt-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
color: var(--grass-deep);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
flex-shrink: 0;
}
.thanks-receipt-status .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--grass);
animation: thanks-eyebrow-pulse 2s ease-in-out infinite;
}
.thanks-receipt-body {
padding: 8px 24px 16px;
}
.thanks-receipt-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--rule-soft);
gap: 16px;
}
.thanks-receipt-row:last-child { border-bottom: none; }
.receipt-row-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--mist);
font-weight: 400;
flex-shrink: 0;
}
.receipt-row-label svg { color: var(--warm); flex-shrink: 0; }
.receipt-row-value {
font-size: 14px;
color: var(--navy);
font-weight: 500;
text-align: right;
}
/* Mobile: stack the receipt rows vertically for legibility */
@media (max-width: 540px) {
.thanks-receipt-header { padding: 16px 18px; gap: 12px; }
.thanks-receipt-status { padding: 5px 10px; font-size: 10px; }
.thanks-receipt-body { padding: 6px 18px 12px; }
.thanks-receipt-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 0;
}
.receipt-row-value { text-align: left; }
}
/* Restore reduced motion respect */
@media (prefers-reduced-motion: reduce) {
.thanks-check,
.thanks-headline,
.thanks-subhead,
.thanks-eyebrow,
.thanks-receipt,
.thanks-burst,
.thanks-ring-1,
.thanks-ring-2,
.thanks-ring-3,
.particle,
.thanks-eyebrow-dot,
.status-dot {
animation: none !important;
}
.thanks-burst { opacity: 0.7; }
}
/* ════════════════════════════════════════════════════════
STATIC CONFIRMATION OVERRIDES
Disables every animation on the thank-you confirmation hero
and shows everything in its final, settled state from page load.
════════════════════════════════════════════════════════ */
/* Hide moving background elements entirely */
.thanks-burst,
.thanks-particles,
.thanks-hero-bg,
.thanks-ring,
.thanks-eyebrow-dot {
display: none !important;
}
/* Disable all animations on confirmation moment elements */
.thanks-check,
.thanks-check-circle,
.thanks-check-mark,
.thanks-eyebrow,
.thanks-headline,
.thanks-subhead,
.thanks-receipt,
.thanks-receipt-status .status-dot {
animation: none !important;
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
/* Static status dot — solid, no pulse */
.thanks-receipt-status .status-dot {
box-shadow: none;
}
/* Make sure the eyebrow pill renders cleanly without the dot */
.thanks-eyebrow {
padding: 8px 18px;
}
/* Subtle static background for the hero (replaces the moving burst) */
.thanks-hero {
background:
radial-gradient(ellipse 800px 600px at 50% 25%,
rgba(34, 197, 94, 0.08) 0%,
transparent 70%),
linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 50%, var(--cream) 100%);
}
/* — Pull checkmark up toward the top of the viewport — */
.thanks-hero {
padding-top: 120px;
}
.thanks-check {
margin-top: 0;
margin-bottom: 32px;
}
@media (max-width: 780px) {
.thanks-hero {
padding-top: 100px;
}
}
/* ──────────────────────────────────────────────────────────────────────
OFFLINE-RESILIENT FALLBACKS
Local fallbacks so the design holds together even when external photos
(Unsplash CDN) fail to load — slow networks, ad-blockers, server CSP,
air-gapped hosts, etc. The actual photo URLs above still take precedence
when they DO load; these gradients sit underneath as the base layer.
────────────────────────────────────────────────────────────────────── */
/* Hero — green-meadow gradient under the photo URL */
.hero-image {
background-color: var(--forest);
background-image:
radial-gradient(ellipse 1200px 600px at 30% 30%, rgba(34,197,94,0.55) 0%, transparent 60%),
radial-gradient(ellipse 900px 500px at 75% 70%, rgba(21,128,61,0.7) 0%, transparent 65%),
linear-gradient(165deg, #15803D 0%, #166534 50%, #14532D 100%),
url('https://images.unsplash.com/photo-1558904541-efa843a96f01?w=2400&q=90&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
/* CTA band — warm dusk gradient under the photo URL */
.cta-band-bg {
background-color: var(--navy);
background-image:
radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(74,111,138,0.6) 0%, transparent 70%),
linear-gradient(165deg, #2F4E68 0%, #1E3A52 60%, #15283A 100%),
url('https://images.unsplash.com/photo-1594672352351-ef69ef04527f?w=2400&q=85&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
/* About image wrap — show a soft cream gradient if the ![]()
fails to load,
so the section doesn't collapse around a broken-image icon */
.about-image-wrap {
background:
linear-gradient(135deg, var(--cream-warm) 0%, var(--sand) 60%, var(--sky) 100%);
}
.about-image-wrap img {
position: relative;
z-index: 1;
}
/* Defensive — make sure nav text stays legible on homepage even if hero
photo never loads. The forest-green fallback above is dark enough that
the cream nav text is high-contrast either way. */
nav.on-photo { text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
/* ──────────────────────────────────────────────────────────────────────
CONTRAST FIX OVERRIDES
The trust band was redefined upstream with a cream background but the
original trust-item text/border colors (designed for the dark navy
version) were never updated. These overrides bring text to navy and
borders to a soft rule-color so the numbers and labels actually show.
────────────────────────────────────────────────────────────────────── */
/* Trust band — text now visible on its cream background */
.trust .trust-item {
border-right-color: var(--rule);
}
.trust .trust-item .num {
color: var(--navy);
}
.trust .trust-item .num em {
color: var(--forest);
}
.trust .trust-item .label {
color: var(--navy-soft);
}
/* Form labels — were --mist (light blue-grey), now darker for legibility */
.field-group label {
color: var(--navy-soft);
}
.field-group input::placeholder,
.field-group textarea::placeholder {
color: rgba(30, 58, 82, 0.45);
}
.field-group input,
.field-group textarea,
.field-group select {
color: var(--navy);
}
/* Logo — defensive: every shape inside any vhs-mark inherits currentColor.
Belt + suspenders so even if the upstream selectors miss, the logo paints. */
.vhs-mark,
.vhs-mark svg,
.mark .vhs-mark,
.mark .vhs-mark svg {
color: inherit;
}
.vhs-mark svg path,
.vhs-mark svg circle,
.vhs-mark svg polygon,
.vhs-mark svg rect {
fill: currentColor !important;
stroke: none;
}
/* Make sure the wrapper is never collapsed */
.vhs-mark-small { min-width: 38px; min-height: 38px; }
.vhs-mark-medium { min-width: 56px; min-height: 56px; }
.vhs-mark-large { min-width: clamp(90px, 14vh, 160px); min-height: clamp(90px, 14vh, 160px); }
/* ──────────────────────────────────────────────────────────────────────
AUTH PAGE — login, forgot password, reset
Standalone layout with no marketing nav/footer. Centered card on a
soft cream gradient with the brand mark anchored at top.
────────────────────────────────────────────────────────────────────── */
body.auth-page {
min-height: 100vh;
background:
radial-gradient(ellipse 1000px 500px at 50% 0%, rgba(34,197,94,0.06) 0%, transparent 60%),
radial-gradient(ellipse 800px 400px at 50% 100%, rgba(127,162,186,0.08) 0%, transparent 60%),
linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
display: flex; align-items: center; justify-content: center;
padding: 60px 20px;
}
.auth-shell {
width: 100%;
max-width: 440px;
display: flex; flex-direction: column;
align-items: center;
gap: 32px;
}
.auth-mark {
display: flex; flex-direction: column; align-items: center; gap: 14px;
text-decoration: none;
color: var(--navy);
}
.auth-mark .vhs-mark {
color: var(--forest);
width: 64px; height: 64px;
}
.auth-mark .vhs-mark svg {
width: 64px; height: 64px;
}
.auth-mark span {
font-family: var(--f-display);
font-size: 22px; font-weight: 400;
letter-spacing: 0.005em;
color: var(--navy);
}
.auth-card {
width: 100%;
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 44px 40px;
box-shadow: 0 24px 64px rgba(30,58,82,0.08), 0 4px 16px rgba(30,58,82,0.04);
}
.auth-card h1 {
font-family: var(--f-display);
font-size: 36px; font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.1;
color: var(--navy);
margin: 0 0 8px;
}
.auth-sub {
font-size: 14px;
color: var(--navy-soft);
margin: 0 0 28px;
line-height: 1.5;
}
.auth-card form {
display: flex; flex-direction: column; gap: 18px;
}
.auth-card form label { display: block; }
.auth-card form label > span {
display: block;
font-size: 11px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--navy-soft);
margin-bottom: 8px;
}
.auth-card form input {
width: 100%;
background: var(--cream-warm);
border: 1px solid transparent;
padding: 14px 18px;
font-family: var(--f-body);
font-size: 15px;
color: var(--navy);
border-radius: var(--radius-md);
transition: border-color .2s, background .2s, box-shadow .2s;
}
.auth-card form input::placeholder { color: rgba(30,58,82,0.45); }
.auth-card form input:focus {
outline: none;
background: var(--cream);
border-color: var(--sky-deep);
box-shadow: 0 0 0 4px rgba(127,162,186,0.15);
}
.auth-card .btn-primary {
width: 100%;
background: var(--navy);
color: var(--cream);
border: none;
padding: 16px 22px;
font-family: var(--f-body);
font-size: 14px; font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: var(--radius-md);
cursor: pointer;
transition: background .2s, transform .15s;
margin-top: 8px;
}
.auth-card .btn-primary:hover { background: #15283A; transform: translateY(-1px); }
.auth-card .btn-primary:active { transform: translateY(0); }
.auth-error {
background: #FEF2F2;
color: #991B1B;
border: 1px solid #FECACA;
border-radius: var(--radius-md);
padding: 12px 14px;
font-size: 14px;
margin-bottom: 20px;
}
.auth-help {
font-size: 13px;
color: var(--navy-soft);
margin: 16px 0 0;
text-align: center;
}
.auth-help a {
color: var(--forest);
text-decoration: none;
font-weight: 500;
}
.auth-help a:hover { text-decoration: underline; }
.auth-foot {
text-align: center;
margin-top: 8px;
}
.auth-foot a {
font-size: 13px;
color: var(--navy-soft);
text-decoration: none;
letter-spacing: 0.04em;
}
.auth-foot a:hover { color: var(--navy); }
@media (max-width: 480px) {
.auth-card { padding: 32px 24px; }
.auth-card h1 { font-size: 28px; }
}
/* Auth form: per-field error states for the signup form */
.auth-card form label.has-error input {
border-color: #DC2626 !important;
background: #FEF2F2 !important;
}
.auth-card form label small {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--navy-soft);
line-height: 1.4;
}
.auth-card form label.has-error small { color: #991B1B; }
/* ──────────────────────────────────────────────────────────────────────
INNER PAGE HERO IMAGES
Each non-home page gets a photo background behind its title section,
replacing the flat gradient. The gradient stays as a fallback when
the photo doesn't load.
────────────────────────────────────────────────────────────────────── */
.about-page-hero,
.services-page-hero,
.portfolio-page-hero,
.areas-hero,
.thanks-hero {
color: var(--cream);
min-height: 60vh;
display: flex;
align-items: center;
background-color: var(--navy);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
.about-page-hero {
background-image:
linear-gradient(180deg, rgba(30,58,82,0.55) 0%, rgba(30,58,82,0.75) 100%),
url('https://images.unsplash.com/photo-1737347606996-62db45e3cf5b?w=2400&q=85&auto=format&fit=crop');
}
.services-page-hero {
background-image:
linear-gradient(180deg, rgba(21,128,61,0.55) 0%, rgba(20,83,45,0.78) 100%),
url('https://images.unsplash.com/photo-1558904541-efa843a96f01?w=2400&q=85&auto=format&fit=crop');
}
.portfolio-page-hero {
background-image:
linear-gradient(180deg, rgba(30,58,82,0.55) 0%, rgba(30,58,82,0.75) 100%),
url('https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=2400&q=85&auto=format&fit=crop');
}
.areas-hero {
background-image:
linear-gradient(180deg, rgba(30,58,82,0.50) 0%, rgba(30,58,82,0.78) 100%),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2400&q=85&auto=format&fit=crop');
}
.thanks-hero {
background-image:
linear-gradient(180deg, rgba(21,128,61,0.50) 0%, rgba(20,83,45,0.75) 100%),
url('https://images.unsplash.com/photo-1594672352351-ef69ef04527f?w=2400&q=85&auto=format&fit=crop');
}
/* Make sure decorative pattern overlays stay subtle on top of the photo */
.about-page-hero-pattern,
.services-page-hero-pattern,
.portfolio-page-hero-pattern,
.areas-hero-pattern,
.thanks-hero-pattern {
opacity: 0.6;
}
/* Page-hero text now needs to be cream (was navy on the gradient versions) */
.about-page-hero-content h1,
.services-page-hero-content h1,
.portfolio-page-hero-content h1,
.areas-hero-content h1,
.thanks-hero h1 {
color: var(--cream);
}
.about-page-hero-content .eyebrow,
.services-page-hero-content .eyebrow,
.portfolio-page-hero-content .eyebrow,
.areas-hero-content .eyebrow {
color: var(--warm);
}
.about-page-hero-content p,
.services-page-hero-content p,
.portfolio-page-hero-content p,
.areas-hero-content p,
.thanks-hero p {
color: rgba(251,250,245,0.85);
}
.about-page-hero-content em,
.services-page-hero-content em,
.portfolio-page-hero-content em,
.areas-hero-content em {
color: var(--warm);
font-style: italic;
}
@media (max-width: 780px) {
.about-page-hero,
.services-page-hero,
.portfolio-page-hero,
.areas-hero,
.thanks-hero {
min-height: 50vh;
}
}
/* ──────────────────────────────────────────────────────────────────────
BUCKET TILES — service categories shown as cards with their services
listed inside. Replaces the per-service grid on home and services pages.
────────────────────────────────────────────────────────────────────── */
.bucket-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 56px;
}
@media (max-width: 1000px) { .bucket-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 640px) { .bucket-grid { grid-template-columns: 1fr; gap: 20px; } }
.bucket-tile {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 36px 32px;
display: flex; flex-direction: column;
gap: 22px;
transition: transform .35s cubic-bezier(.2,.6,.2,1),
box-shadow .35s cubic-bezier(.2,.6,.2,1),
border-color .25s;
position: relative;
overflow: hidden;
}
.bucket-tile::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 4px; height: 0;
background: var(--forest);
transition: height .35s cubic-bezier(.2,.6,.2,1);
}
.bucket-tile:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(30,58,82,0.08), 0 4px 12px rgba(30,58,82,0.04);
border-color: rgba(34,197,94,0.25);
}
.bucket-tile:hover::before { height: 100%; }
.bucket-tile-header {
display: flex; align-items: center; gap: 14px;
}
.bucket-tile-icon {
width: 44px; height: 44px;
display: inline-grid; place-items: center;
border-radius: 12px;
background: var(--leaf);
color: var(--forest);
flex-shrink: 0;
transition: background .25s, color .25s;
}
.bucket-tile:hover .bucket-tile-icon {
background: var(--forest);
color: var(--cream);
}
.bucket-tile-icon svg {
width: 22px; height: 22px;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
}
.bucket-tile h3 {
font-family: var(--f-display);
font-size: 24px;
font-weight: 400;
color: var(--navy);
margin: 0;
letter-spacing: -0.005em;
line-height: 1.18;
}
.bucket-tile-tagline {
margin: -8px 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--navy-soft);
}
.bucket-tile ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: 11px;
border-top: 1px solid var(--rule);
padding-top: 20px;
}
.bucket-tile li {
display: flex; align-items: flex-start;
gap: 11px;
font-family: var(--f-body);
font-size: 14.5px;
line-height: 1.5;
color: var(--navy-soft);
}
.bucket-tile li::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--forest);
flex-shrink: 0;
margin-top: 9px;
}
.bucket-tile-footer {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--forest);
}
.bucket-tile-footer svg {
width: 13px;
height: 13px;
stroke: currentColor;
}
/* ──────────────────────────────────────────────────────────────────────
SERVICE-AREAS PAGE — map section now serves as the page hero, so it
needs top padding for the fixed nav and a heroic top spacing.
────────────────────────────────────────────────────────────────────── */
.areas-map-section.areas-map-hero {
padding-top: 180px;
}
.areas-map-section.areas-map-hero .section-head {
text-align: center;
margin-bottom: 56px;
}
.areas-map-section.areas-map-hero .section-head h1.title,
.areas-map-section.areas-map-hero .section-head h2.title {
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 22px;
}
.areas-map-section.areas-map-hero .section-head .subtitle {
max-width: 620px;
margin: 0 auto;
}
@media (max-width: 780px) {
.areas-map-section.areas-map-hero { padding-top: 130px; }
}
/* ──────────────────────────────────────────────────────────────────────
SERVICE-AREAS MAP HERO (full viewport, 1/3 sidebar + 2/3 map)
Replaces the old areas-hero + map-section pattern. The map IS the hero.
────────────────────────────────────────────────────────────────────── */
.map-hero {
min-height: 100vh;
min-height: 100dvh;
background: var(--cream);
display: flex;
flex-direction: column;
padding-top: 88px; /* clear the fixed nav */
}
.map-hero-grid {
flex: 1;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 0;
min-height: 0;
}
.map-hero-side {
background: var(--cream);
border-right: 1px solid var(--rule);
padding: 56px 56px 40px;
display: flex;
flex-direction: column;
gap: 40px;
overflow-y: auto;
}
.map-hero-side .eyebrow {
color: var(--forest);
margin-bottom: 18px;
display: inline-block;
}
.map-hero-side .eyebrow-sm {
font-size: 10.5px;
margin-bottom: 0;
}
.map-hero-intro h1.display {
font-size: clamp(38px, 4.6vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--navy);
margin: 0 0 22px;
}
.map-hero-intro h1.display em {
color: var(--forest);
font-style: italic;
}
.map-hero-intro .lede {
font-size: 16px;
line-height: 1.6;
color: var(--navy-soft);
margin: 0;
max-width: 38ch;
}
.map-hero-towns {
border-top: 1px solid var(--rule);
padding-top: 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.map-hero-towns ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.map-hero-towns li a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
border-radius: 8px;
text-decoration: none;
color: var(--navy);
font-family: var(--f-display);
font-size: 17px;
font-weight: 400;
letter-spacing: -0.005em;
transition: background .2s, transform .2s;
}
.map-hero-towns li a:hover {
background: var(--leaf);
transform: translateX(2px);
}
.map-hero-towns li a .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--forest);
flex-shrink: 0;
}
.map-hero-scroll {
margin-top: auto;
padding-top: 24px;
border-top: 1px solid var(--rule);
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--navy-soft);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color .2s;
}
.map-hero-scroll:hover { color: var(--forest); }
.map-hero-scroll span { font-size: 14px; }
.map-hero-frame {
position: relative;
background: var(--sand);
overflow: hidden;
}
.map-hero-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 900px) {
.map-hero { padding-top: 72px; }
.map-hero-grid {
grid-template-columns: 1fr;
grid-template-rows: auto 50vh;
}
.map-hero-side {
border-right: none;
border-bottom: 1px solid var(--rule);
padding: 40px 32px;
gap: 28px;
overflow-y: visible;
}
.map-hero-towns ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.map-hero-towns ul { grid-template-columns: 1fr; }
.map-hero-side { padding: 32px 24px; }
}
/* ──────────────────────────────────────────────────────────────────────
STRONGER IMAGE OVERLAYS — readability
Photos with text overlaid (hero, cta-band, page heroes, thanks hero)
get a darker fade and a subtle blur on the image itself. The fade
uses a radial gradient so the photo's beauty is preserved at the
edges while the area behind text is darkened.
────────────────────────────────────────────────────────────────────── */
/* Homepage hero — strengthen the existing overlay + faint blur on photo */
.hero-image {
filter: blur(0.5px) brightness(0.92);
}
.hero-overlay {
background:
radial-gradient(ellipse 90% 70% at 50% 60%, rgba(20,30,42,0.62) 0%, rgba(20,30,42,0.45) 60%, transparent 100%),
linear-gradient(180deg, rgba(20,30,42,0.45) 0%, rgba(20,30,42,0.30) 35%, rgba(20,30,42,0.70) 100%) !important;
}
/* CTA band — stronger overlay so cream text reads cleanly */
.cta-band-bg {
filter: blur(0.5px) brightness(0.85);
}
.cta-band::after {
background:
radial-gradient(ellipse at 50% 50%, rgba(30,58,82,0.55) 0%, rgba(30,58,82,0.92) 100%),
linear-gradient(180deg, rgba(30,58,82,0.55), rgba(30,58,82,0.78)) !important;
}
/* Inner page heroes — stronger gradient + slight blur on bg image so
cream titles + lede stay legible */
.about-page-hero,
.services-page-hero,
.portfolio-page-hero,
.areas-hero,
.thanks-hero {
position: relative;
}
.about-page-hero::after,
.services-page-hero::after,
.portfolio-page-hero::after,
.areas-hero::after,
.thanks-hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 80% at 50% 55%, rgba(20,30,42,0.45) 0%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.about-page-hero > *,
.services-page-hero > *,
.portfolio-page-hero > *,
.areas-hero > *,
.thanks-hero > * {
position: relative;
z-index: 1;
}
/* Strengthen the linear-gradient overlay opacity by using higher alpha
in the gradients themselves (ramped up from 0.55-0.78 to 0.65-0.88) */
.about-page-hero {
background-image:
linear-gradient(180deg, rgba(30,58,82,0.65) 0%, rgba(30,58,82,0.88) 100%),
url('https://images.unsplash.com/photo-1737347606996-62db45e3cf5b?w=2400&q=85&auto=format&fit=crop') !important;
}
.services-page-hero {
background-image:
linear-gradient(180deg, rgba(21,128,61,0.65) 0%, rgba(20,83,45,0.90) 100%),
url('https://images.unsplash.com/photo-1558904541-efa843a96f01?w=2400&q=85&auto=format&fit=crop') !important;
}
.portfolio-page-hero {
background-image:
linear-gradient(180deg, rgba(30,58,82,0.65) 0%, rgba(30,58,82,0.88) 100%),
url('https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=2400&q=85&auto=format&fit=crop') !important;
}
.areas-hero {
background-image:
linear-gradient(180deg, rgba(30,58,82,0.62) 0%, rgba(30,58,82,0.90) 100%),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2400&q=85&auto=format&fit=crop') !important;
}
.thanks-hero {
background-image:
linear-gradient(180deg, rgba(21,128,61,0.62) 0%, rgba(20,83,45,0.88) 100%),
url('https://images.unsplash.com/photo-1594672352351-ef69ef04527f?w=2400&q=85&auto=format&fit=crop') !important;
}
/* ──────────────────────────────────────────────────────────────────────
BUCKET TILE PHOTOS — banner image at the top of each service card.
Free-license photos from Pexels (no attribution required, commercial OK).
Negative margins pull the image out to the tile's overflow:hidden edge,
so the rest of the content keeps its existing padding.
────────────────────────────────────────────────────────────────────── */
.bucket-tile-photo {
margin: -36px -32px 0;
height: 180px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--sand);
transition: transform .8s cubic-bezier(.2,.6,.2,1);
will-change: transform;
}
.bucket-tile:hover .bucket-tile-photo {
transform: scale(1.04);
}
/* Smooth bottom edge so photo blends into the cream tile */
.bucket-tile-photo::after {
content: "";
display: block;
height: 100%;
background: linear-gradient(180deg, transparent 75%, rgba(251,250,245,0.4) 100%);
}
@media (max-width: 640px) {
.bucket-tile-photo { height: 160px; }
}
/* ───── NAV PORTAL — secondary pill button ─────
Sits to the LEFT of the primary "Get in touch" CTA. Outlined,
visually subordinate but matches the CTA's height so the two read
as a paired set. */
.nav-portal {
display: inline-flex; align-items: center;
padding: 8px 20px;
border-radius: 999px;
background: transparent;
color: var(--navy) !important;
font-family: var(--f-body);
font-size: 12px; font-weight: 500;
letter-spacing: 0.06em;
border: 1px solid rgba(30,58,82,0.25);
transition: all .35s cubic-bezier(.2,.6,.2,1);
opacity: 1 !important;
white-space: nowrap;
cursor: pointer;
}
.nav-portal::after { display: none !important; }
.nav-portal:hover {
background: var(--navy);
color: var(--cream) !important;
border-color: var(--navy);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(30,58,82,0.22);
}
/* On the photo hero, the nav text is light — invert the button to match */
nav.on-photo .nav-portal {
color: var(--cream) !important;
border-color: rgba(251,250,245,0.45);
}
nav.on-photo .nav-portal:hover {
background: var(--cream);
color: var(--navy) !important;
border-color: var(--cream);
box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}
/* ───── Auth-card tabs (Sign in / Create account) ───── */
.auth-card-tabs {
padding-top: 24px; /* tabs sit at the very top with their own padding */
}
.auth-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--cream-warm);
border-radius: var(--radius-md);
margin-bottom: 28px;
}
.auth-tab {
flex: 1;
text-align: center;
padding: 11px 14px;
font-family: var(--f-body);
font-size: 13px; font-weight: 500;
letter-spacing: 0.04em;
color: var(--navy-soft);
text-decoration: none;
border-radius: 8px;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
white-space: nowrap;
}
.auth-tab:hover { color: var(--navy); }
.auth-tab.is-active {
background: var(--cream);
color: var(--navy);
box-shadow: 0 1px 2px rgba(30,58,82,0.06),
0 1px 0 rgba(30,58,82,0.04);
font-weight: 600;
}
/* In the signup form, two side-by-side fields (first / last name) */
.auth-card .auth-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 480px) {
.auth-card .auth-row-2 { grid-template-columns: 1fr; gap: 0; }
}
/* ════════════════════════════════════════════════════════
EDITORIAL HERO — used on bucket and service detail pages.
A full-bleed photo with a dark overlay, a top breadcrumb
bar, and an eyebrow + large display title near the bottom.
════════════════════════════════════════════════════════ */
.editorial-hero {
position: relative;
min-height: 600px;
color: var(--cream);
background: var(--navy);
}
.editorial-hero .hero-canvas {
position: relative;
min-height: 600px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.editorial-hero .hero-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.editorial-hero .hero-grad {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(15,30,42,0.55) 0%, rgba(15,30,42,0.25) 35%, rgba(15,30,42,0.85) 100%);
z-index: 1;
}
.editorial-hero .hero-topbar {
position: relative;
z-index: 2;
padding-top: 110px;
}
.editorial-hero .topbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.vhs-hero-back {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px 8px 12px;
border-radius: 999px;
border: 1px solid rgba(251,250,245,0.35);
background: rgba(15,30,42,0.25);
color: var(--cream);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.vhs-hero-back:hover {
background: rgba(251,250,245,0.18);
border-color: rgba(251,250,245,0.6);
transform: translateX(-2px);
}
.vhs-hero-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(251,250,245,0.78);
flex-wrap: wrap;
}
.vhs-hero-breadcrumb a {
color: rgba(251,250,245,0.78);
transition: color .2s ease;
}
.vhs-hero-breadcrumb a:hover { color: var(--cream); }
.vhs-hero-breadcrumb .current {
color: var(--cream);
font-weight: 500;
}
.editorial-hero .hero-content {
position: relative;
z-index: 2;
margin-top: auto;
padding: 80px 0 70px;
}
.editorial-hero .hero-text {
max-width: 820px;
}
.editorial-hero .hero-eyebrow {
display: inline-block;
font-family: var(--f-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(251,250,245,0.85);
margin-bottom: 22px;
}
.editorial-hero .hero-display {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(40px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--cream);
margin-bottom: 18px;
}
.editorial-hero .hero-display em {
font-style: italic;
color: var(--moss);
font-weight: 300;
}
.editorial-hero .hero-italic {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.4;
color: rgba(251,250,245,0.92);
max-width: 56ch;
margin-bottom: 28px;
}
.editorial-hero .hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.editorial-hero .hero-ctas .btn-primary {
background: var(--cream);
color: var(--navy);
}
.editorial-hero .hero-ctas .btn-primary:hover {
background: var(--moss);
color: var(--forest);
}
@media (max-width: 780px) {
.editorial-hero,
.editorial-hero .hero-canvas { min-height: 500px; }
.editorial-hero .hero-content { padding: 56px 0 50px; }
}
/* ════════════════════════════════════════════════════════
FEATURED / RELATED SERVICE CARDS
Used on /services overview ("Featured services"), bucket
detail (the services list), and service detail (related).
════════════════════════════════════════════════════════ */
.services-featured {
padding: 100px 0;
background: var(--cream-warm);
border-top: 1px solid var(--rule-soft);
}
.vhs-feat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 44px;
}
@media (max-width: 980px) { .vhs-feat-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 620px) { .vhs-feat-grid { grid-template-columns: 1fr; gap: 20px; } }
.vhs-feat-card {
display: flex;
flex-direction: column;
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
color: var(--navy);
transition: transform .35s cubic-bezier(.2,.6,.2,1),
box-shadow .35s cubic-bezier(.2,.6,.2,1),
border-color .25s ease;
}
.vhs-feat-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(30,58,82,0.10), 0 4px 12px rgba(30,58,82,0.04);
border-color: rgba(34,197,94,0.30);
}
.vhs-feat-photo {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sand);
}
.vhs-feat-photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.vhs-feat-card:hover .vhs-feat-photo img { transform: scale(1.04); }
.vhs-feat-tint {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(15,30,42,0.18) 100%);
pointer-events: none;
}
.vhs-feat-body {
padding: 26px 28px 28px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.vhs-feat-body h4 {
font-family: var(--f-display);
font-weight: 400;
font-size: 24px;
line-height: 1.15;
color: var(--navy);
letter-spacing: -0.005em;
}
.vhs-feat-body p {
font-size: 15px;
line-height: 1.55;
color: var(--navy-soft);
margin: 0;
}
.vhs-feat-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding-top: 14px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--forest);
}
.vhs-feat-cta svg { transition: transform .3s ease; }
.vhs-feat-card:hover .vhs-feat-cta svg { transform: translateX(4px); }
/* ════════════════════════════════════════════════════════
BUCKET DETAIL PAGE BODY
════════════════════════════════════════════════════════ */
.bucket-body {
padding: 80px 48px 100px;
max-width: 1240px;
}
@media (max-width: 780px) { .bucket-body { padding: 56px 22px 80px; } }
.bucket-description {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.5;
color: var(--navy-soft);
max-width: 70ch;
margin: 0 auto 64px;
text-align: center;
}
.bucket-services-head {
text-align: center;
margin-bottom: 12px;
}
.bucket-services-head .eyebrow {
display: inline-block;
margin-bottom: 14px;
}
.section-title {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
color: var(--navy);
letter-spacing: -0.01em;
}
.bucket-cta {
margin-top: 80px;
padding: 56px 48px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--leaf) 0%, var(--cream-warm) 100%);
border: 1px solid var(--rule);
text-align: center;
}
.bucket-cta h3 {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.15;
color: var(--navy);
margin-bottom: 12px;
}
.bucket-cta p {
color: var(--navy-soft);
font-size: 17px;
line-height: 1.6;
max-width: 60ch;
margin: 0 auto 24px;
}
@media (max-width: 600px) {
.bucket-cta { padding: 40px 24px; }
}
/* ════════════════════════════════════════════════════════
SERVICE DETAIL PAGE BODY
════════════════════════════════════════════════════════ */
.service-body {
padding: 80px 48px 100px;
max-width: 1240px;
}
@media (max-width: 780px) { .service-body { padding: 56px 22px 80px; } }
.service-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 64px;
align-items: start;
}
@media (max-width: 980px) {
.service-grid { grid-template-columns: 1fr; gap: 40px; }
}
.service-prose p {
font-size: 18px;
line-height: 1.75;
color: var(--navy-soft);
margin-bottom: 1.2em;
}
.service-prose p:first-child::first-letter {
font-family: var(--f-display);
font-size: 4.2em;
line-height: 0.9;
float: left;
padding: 6px 14px 0 0;
color: var(--forest);
font-weight: 400;
}
.service-sidebar { position: sticky; top: 100px; }
@media (max-width: 980px) { .service-sidebar { position: static; } }
.sidebar-card {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 32px 28px;
box-shadow: 0 4px 18px rgba(30,58,82,0.04);
}
.sidebar-card h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 22px;
color: var(--navy);
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
}
.fact { margin-bottom: 22px; }
.fact:last-of-type { margin-bottom: 28px; }
.fact-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sky-deep);
margin-bottom: 10px;
}
.fact-value {
font-size: 15px;
color: var(--navy);
line-height: 1.5;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fact-note {
flex-basis: 100%;
margin-top: 8px;
font-size: 13px;
color: var(--navy-soft);
line-height: 1.5;
}
.chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: var(--cream-warm);
border: 1px solid var(--rule);
font-size: 12px;
font-weight: 500;
color: var(--navy);
letter-spacing: 0.02em;
}
.chip.chip-pricing {
background: var(--leaf);
border-color: rgba(34,197,94,0.30);
color: var(--forest);
}
.sidebar-cta {
display: flex;
justify-content: center;
width: 100%;
margin-top: 10px;
}
.sidebar-card .sidebar-cta + .sidebar-cta { margin-top: 10px; }
.btn-ghost {
background: transparent;
color: var(--navy);
border: 1px solid var(--rule);
padding: 12px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
transition: all .25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-ghost:hover {
background: var(--cream-warm);
border-color: rgba(30,58,82,0.25);
}
.related-services {
margin-top: 96px;
padding-top: 64px;
border-top: 1px solid var(--rule);
}
.related-services .section-head { text-align: center; margin-bottom: 16px; }
.related-services .eyebrow { display: inline-block; margin-bottom: 14px; }
/* ════════════════════════════════════════════════════════
HOME SERVICES SECTION — make the dynamic bucket cards
read as the centerpiece of the page.
════════════════════════════════════════════════════════ */
.services-section-cta {
display: flex;
justify-content: center;
margin-top: 48px;
}
.services-section-cta .btn-primary {
padding: 14px 28px;
font-size: 14px;
}
.services-section-cta .btn-primary svg { transition: transform .3s ease; }
.services-section-cta .btn-primary:hover svg { transform: translateX(4px); }
/* ════════════════════════════════════════════════════════
CUSTOMER-FACING QUOTE PAGE (/quote/)
════════════════════════════════════════════════════════ */
.quote-public {
padding: 140px 0 100px;
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
min-height: 70vh;
}
.quote-public-card {
max-width: 780px;
margin: 0 auto;
background: var(--cream);
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
box-shadow: 0 24px 64px rgba(30,58,82,0.08);
padding: 48px 56px;
}
@media (max-width: 720px) { .quote-public-card { padding: 32px 24px; } }
.quote-public-head { text-align: center; margin-bottom: 32px; }
.quote-public-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.quote-public-head h1 {
font-size: clamp(30px, 4vw, 48px);
line-height: 1.1;
color: var(--navy);
margin-bottom: 10px;
}
.quote-public-head .muted { color: var(--navy-soft); font-size: 15px; }
.qp-flash {
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 20px;
}
.qp-flash--success { background: var(--leaf); color: var(--forest); border: 1px solid rgba(34,197,94,0.3); }
.qp-flash--error { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.qp-status {
padding: 14px 18px;
border-radius: 8px;
text-align: center;
margin-bottom: 24px;
font-size: 15px;
}
.qp-status--accepted, .qp-status--converted { background: var(--leaf); color: var(--forest); }
.qp-status--declined { background: #FEE2E2; color: #991B1B; }
.qp-status--expired { background: var(--cream-warm); color: var(--navy-soft); }
.qp-intro {
color: var(--navy-soft);
font-size: 16px;
line-height: 1.6;
margin-bottom: 24px;
}
.qp-items { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.qp-items th {
text-align: left;
font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sky-deep);
padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.qp-items th.num { text-align: right; }
.qp-items td { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.qp-items td.num { text-align: right; font-variant-numeric: tabular-nums; }
.qp-items .muted { color: var(--mist); font-size: 12px; }
.qp-totals {
width: 100%;
max-width: 380px;
margin: 0 0 24px auto;
font-size: 14px;
}
.qp-totals td { padding: 6px 0; }
.qp-totals td.num { text-align: right; font-variant-numeric: tabular-nums; }
.qp-totals .qp-totals-divider td { border-top: 1px solid var(--rule); padding-top: 12px; font-weight: 500; }
.qp-totals .qp-totals-final td {
border-top: 1px solid var(--rule);
padding-top: 12px; font-size: 18px; font-weight: 600; color: var(--navy);
}
.qp-block {
margin: 24px 0;
padding: 16px 20px;
background: var(--cream-warm);
border-radius: 8px;
}
.qp-block h3 {
font-family: var(--f-display);
font-weight: 400; font-size: 17px;
margin-bottom: 6px; color: var(--navy);
}
.qp-block p { color: var(--navy-soft); font-size: 14px; line-height: 1.5; margin: 0; }
.qp-expires { text-align: center; font-size: 13px; margin: 16px 0; }
.qp-actions {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.qp-accept {
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
gap: 12px;
}
.qp-accept label { display: flex; flex-direction: column; gap: 6px; }
.qp-accept label span {
font-size: 12px; font-weight: 500;
letter-spacing: 0.06em;
color: var(--navy-soft);
}
.qp-accept input {
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--rule);
font-size: 16px;
font-family: var(--f-display);
}
.qp-accept .btn { align-self: stretch; justify-content: center; padding: 14px 24px; font-size: 15px; }
.qp-decline { margin: 0; }
.qp-decline button {
background: transparent; border: 0; padding: 0;
font-size: 13px; color: var(--mist); cursor: pointer;
text-decoration: underline;
font-family: inherit;
}
.qp-decline button:hover { color: var(--navy-soft); }
/* ════════════════════════════════════════════════════════
QUOTE — branded header + print styles
════════════════════════════════════════════════════════ */
.quote-public-brand {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 22px;
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 2px solid var(--forest);
}
.quote-public-logo {
display: grid; place-items: center;
width: 64px; height: 64px;
border-radius: 14px;
background: var(--cream-warm);
color: var(--forest);
border: 1px solid var(--rule);
}
.quote-public-logo .vhs-mark { width: 44px; height: 44px; }
.quote-public-biz {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.quote-public-biz-name {
font-family: var(--f-display);
font-weight: 500;
font-size: 22px;
color: var(--navy);
letter-spacing: -0.005em;
}
.quote-public-biz-meta {
font-size: 13px;
color: var(--navy-soft);
display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.quote-public-biz-meta a { color: var(--navy-soft); }
.quote-public-biz-meta a:hover { color: var(--forest); }
.quote-public-biz-addr { font-size: 12px; color: var(--mist); }
.quote-public-no {
text-align: right;
font-size: 11px;
color: var(--mist);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.4;
}
.quote-public-no strong {
display: block;
font-family: var(--f-display);
font-size: 18px;
font-weight: 500;
color: var(--navy);
text-transform: none;
letter-spacing: 0;
margin: 2px 0;
}
@media (max-width: 600px) {
.quote-public-brand {
grid-template-columns: auto 1fr;
gap: 14px;
padding-bottom: 18px;
}
.quote-public-no { grid-column: 1 / -1; text-align: left; }
.quote-public-biz-name { font-size: 18px; }
}
/* "print-only" hidden on screen, "no-print" hidden on print. */
.print-only { display: none; }
@media print { .print-only { display: block; } .no-print { display: none !important; } }
/* ────── PRINT STYLES ────── */
@media print {
@page { margin: 0.5in; }
body, body.vhs-site {
background: #fff !important;
color: #000 !important;
font-size: 11pt;
}
/* Strip the marketing chrome on print */
nav#nav,
nav,
footer,
.skip-link,
.quote-public-actions,
.qp-actions {
display: none !important;
}
main, main#main { display: block !important; }
/* Hero/quote page should fill the page cleanly */
.quote-public {
padding: 0 !important;
background: none !important;
min-height: 0 !important;
}
.quote-public .wrap { max-width: none !important; padding: 0 !important; }
.quote-public-card {
max-width: none !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.quote-public-brand { border-bottom-color: #000 !important; }
.quote-public-biz a {
color: #000 !important;
text-decoration: none !important;
}
/* Status / flash blocks not relevant on paper */
.qp-flash, .qp-status { display: none !important; }
/* Tables — black ink, page-break safety */
.qp-items, .qp-totals { page-break-inside: avoid; }
.qp-items th, .qp-items td { color: #000 !important; }
.qp-items th { border-bottom-color: #000 !important; }
.qp-totals .qp-totals-final td { color: #000 !important; border-top-color: #000 !important; }
.qp-block {
background: none !important;
border: 1px solid #999 !important;
page-break-inside: avoid;
}
/* Make sure long quotes split across pages cleanly */
.qp-items tr { page-break-inside: avoid; }
.quote-public-head { page-break-after: avoid; }
}
.qp-attachments {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
margin: 24px 0;
}
.qp-attachments figure {
margin: 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--rule);
background: var(--cream-warm);
}
.qp-attachments img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.qp-attachments figcaption {
font-size: 12px;
color: var(--navy-soft);
padding: 6px 10px;
background: var(--cream);
border-top: 1px solid var(--rule-soft);
}
@media print { .qp-attachments { page-break-inside: avoid; } }
/* Customer notes/questions disclosure on the public quote */
.qp-notes {
margin-top: 28px;
border: 1px solid var(--rule);
border-radius: 12px;
background: var(--cream-warm);
padding: 14px 18px;
}
.qp-notes summary {
cursor: pointer;
font-weight: 500;
color: var(--navy);
font-size: 14px;
list-style: none;
}
.qp-notes summary::-webkit-details-marker { display: none; }
.qp-notes summary::before { content: "💬 "; }
.qp-notes[open] summary { color: var(--forest); margin-bottom: 12px; }
.qp-notes-history {
background: var(--cream);
border: 1px solid var(--rule-soft);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 12px;
font-size: 13px;
color: var(--navy-soft);
line-height: 1.5;
white-space: pre-wrap;
}
.qp-note-form label { display: flex; flex-direction: column; gap: 6px; }
.qp-note-form label span {
font-size: 12px; font-weight: 500;
letter-spacing: 0.06em;
color: var(--navy-soft);
}
.qp-note-form textarea {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--rule);
font-family: inherit; font-size: 14px;
background: var(--cream);
}
.qp-note-form .btn { margin-top: 10px; }