/* ========================================================================
FlowCraft Web — styles-v2.css
"Editorial Studio" design system (V2.0 redesign)
────────────────────────────────────────────────────────────────────────
This stylesheet is a complete visual rewrite. It is loaded AFTER
styles.css so the dark Gloss Garage demo (.demo-slide / .dg-*) keeps
its custom automotive theme. Everything else is replaced by this layer.
To revert to V1: remove this from index.html and contact.html.
STRUCTURE
1. Tokens & reset overrides
2. Typography
3. Layout utilities
4. Buttons + links
5. Navbar
6. Hero (editorial)
7. Typographic marquee
8. Problem (editorial spread)
9. Services (numbered list)
10. Packages (featured panel + comparison)
11. Industries marquee
12. Demo showcase frame (dg-* dark theme survives from base CSS)
13. Inbox / dashboard moment
14. Automation timeline
15. How It Works (numbered list)
16. Why FlowCraft (2-col editorial)
17. FAQ (inline)
18. Final CTA (editorial)
19. Footer
20. Chat widget (restyled)
21. Contact page
22. Animations
23. Responsive
======================================================================== */
/* ────────────────────────────────────────────────────────────────────────
1. TOKENS — palette, type, space
──────────────────────────────────────────────────────────────────────── */
:root {
/* Core palette (Editorial Studio) */
--ink: #0B0B0F;
--ink-soft: #1A1A20;
--paper: var(--bg);
--bone: var(--surface-alt);
--charcoal: #16161B;
--steel: #1E3A8A;
--steel-2: #2543A4;
--coral: #E85D33;
--coral-soft: #F2A98F;
--sage: #6B7A5A;
--hairline: #E5E0D6;
--hairline-2: var(--hairline);
--muted: #6B6B72;
--muted-2: #8A8A92;
/* === Premium editorial v7 — Studio Sage (clean white + soft green + emerald accent) === */
--bg: #FBFAF6; /* Bright ivory white — luminous, premium, low warmth */
--surface: #FFFFFF; /* Cards, mockup canvases */
--surface-alt: #F0F2EB; /* Soft sage band — elegant green-tinted neutral */
--surface-warm: #F6F7F1; /* Faintest sage wash for breathing surfaces */
--ink: #0B1220; /* Deep midnight — cooler, more atmospheric */
--ink-2: #3A4358; /* Cool graphite — body copy, AA-passing */
--ink-3: #6F7388; /* Cool stone-gray — meta, AA-passing */
--hairline: #E4E7DE; /* Cool sage hairline — quiet rule lines */
--hairline-soft: rgba(11,18,32,0.08);
--accent: #0E7A65; /* Emerald — richer, more luminous */
--accent-ink: #FFFFFF;
--accent-hover: #0A5C4D;
--accent-soft: rgba(14,122,101,0.10);
--accent-bright: #14B89B; /* Brighter emerald for accents on midnight */
--accent-wash: #E8EFEA; /* Lightest sage wash — soft pill / chip backgrounds */
--glow: #2DE3B5; /* Electric teal — for glow halos only */
--pop: #B85333; /* Warm clay — typographic micro-pop */
--gold: #A88652; /* Aurum — premium gold accent */
--gold-soft: rgba(168,134,82,0.18);
--gold-deep: #6F5530; /* Aurum text on light bg */
--sapphire: #3D6FE0; /* Refined royal blue — premium hairlines */
--sapphire-soft: rgba(61,111,224,0.10);
--midnight: #0B1220; /* Same as --ink, named for dark surfaces */
--midnight-2: #131C30; /* Layered midnight — for cards on dark */
--midnight-3: #1B2740; /* Lifted midnight — for hover on dark */
--shadow-sm: 0 2px 6px rgba(11,18,32,0.04);
--shadow-md: 0 14px 36px rgba(11,18,32,0.07);
--shadow-lg: 0 36px 88px rgba(11,18,32,0.10);
--shadow-glow: 0 0 0 1px rgba(14,122,101,0.16), 0 24px 60px rgba(45,227,181,0.18);
--shadow-glow-soft: 0 0 0 1px rgba(14,122,101,0.08), 0 18px 40px rgba(45,227,181,0.08);
--shadow-gold: 0 0 0 1px rgba(168,134,82,0.20), 0 24px 60px rgba(168,134,82,0.20);
/* Compatibility aliases (so legacy rules keep rendering correctly) */
--coral: #B85333;
--coral-soft: #E8A99A;
--paper: #FBFAF6;
--bone: #F0F2EB;
--steel: #0E7A65;
--steel-2: #0A5C4D;
/* Type scale (fluid) */
--type-eyebrow: clamp(0.68rem, 0.72vw + 0.5rem, 0.78rem);
--type-body: clamp(0.95rem, 0.4vw + 0.86rem, 1.05rem);
--type-lede: clamp(1.1rem, 0.6vw + 0.95rem, 1.25rem);
--type-h3: clamp(1.4rem, 1vw + 1.1rem, 1.85rem);
--type-h2: clamp(2rem, 2.6vw + 1.3rem, 3.4rem);
--type-display: clamp(2.6rem, 5.5vw + 1rem, 6.4rem);
--type-mega: clamp(3rem, 8vw + 1rem, 8.5rem);
/* Space — generous editorial rhythm */
--pad-x: clamp(20px, 4vw, 40px);
--section-y: clamp(88px, 9.6vw, 156px);
--section-y-sm: clamp(64px, 7.5vw, 108px);
/* Grid container */
--container: 1240px;
--container-text: 760px;
/* Shadows (subtle, editorial — not SaaS halo) */
--shadow-1: 0 1px 0 rgba(11,11,15,0.04), 0 6px 24px -8px rgba(11,11,15,0.10);
--shadow-2: 0 1px 0 rgba(11,11,15,0.06), 0 18px 48px -16px rgba(11,11,15,0.18);
--shadow-coral: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(232,93,51,0.30);
/* Type families */
--font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--font-italic: 'Instrument Serif', 'Bricolage Grotesque', serif;
--font-body: 'Sora', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}
/* ────────────────────────────────────────────────────────────────────────
2. RESET + BASE OVERRIDES (against styles.css)
──────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
max-width: 100%;
}
p { color: var(--ink); }
a { color: inherit; text-decoration: none; }
/* Hide V1 hero glow blobs etc. The new hero builds its own atmosphere. */
.hero-grid-bg, .hero-glow-1, .hero-glow-2 { display: none !important; }
/* Hide V1 contact-page glow blobs */
.contact-hero .hero-grid-bg,
.contact-hero .hero-glow-1,
.contact-hero .hero-glow-2 { display: none !important; }
/* ────────────────────────────────────────────────────────────────────────
3. TYPOGRAPHY
──────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5,
.section-headline,
.hero-headline,
.contact-hero-headline {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
}
h3, h4, h5 { font-weight: 600; letter-spacing: -0.02em; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 22px;
}
.eyebrow .eyebrow-num {
color: var(--accent);
font-family: var(--font-mono);
font-weight: 500;
letter-spacing: 0.18em;
}
.eyebrow .eyebrow-arrow { color: var(--ink); opacity: 0.4; }
/* Refined editorial mark — quiet emerald hairline replaces the old number
prefix on eyebrows without a leading span. Other pages (contact, support,
packages) still get their arrow span and stay untouched. */
.eyebrow:not(:has(.eyebrow-num))::before {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: var(--accent);
opacity: 0.55;
vertical-align: middle;
flex-shrink: 0;
}
.italic-accent {
color: var(--ink);
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
/* Big editorial display */
.display {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-display);
letter-spacing: -0.04em;
line-height: 1.02;
color: var(--ink);
}
/* H2 base */
.h2,
section .section-headline {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-h2);
letter-spacing: -0.03em;
line-height: 1.05;
}
/* Lede */
.lede {
font-size: var(--type-lede);
line-height: 1.55;
color: var(--ink);
max-width: 60ch;
}
/* Mono caption */
.mono {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--muted);
}
/* Terracotta period accent — used inside headlines */
.dot { color: var(--pop); }
/* ────────────────────────────────────────────────────────────────────────
4. LAYOUT UTILITIES (override V1 .container + .section)
──────────────────────────────────────────────────────────────────────── */
.container {
max-width: var(--container) !important;
width: 100%;
margin: 0 auto !important;
padding: 0 var(--pad-x) !important;
}
.container-text { max-width: var(--container-text); }
.section {
padding: var(--section-y) 0 !important;
background: transparent !important;
}
.section-tight { padding: var(--section-y-sm) 0 !important; }
.section-bone { background: var(--bone) !important; }
.section-paper { background: var(--paper) !important; }
.section-ink { background: var(--charcoal) !important; color: var(--bg); }
.section-ink * { color: inherit; }
/* Hairline divider between sections */
.section-rule {
border: 0;
height: 1px;
background: var(--hairline);
margin: 0;
opacity: 0.7;
}
/* Flex row helpers */
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.row-between { justify-content: space-between; }
/* ────────────────────────────────────────────────────────────────────────
5. BUTTONS — restrained, agency-style
──────────────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 22px;
border-radius: 100px;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: -0.005em;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
white-space: nowrap;
line-height: 1;
min-height: 46px;
}
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 22px rgba(11,11,15,0.18);
}
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 14px 30px rgba(11,11,15,0.22);
}
.btn-coral {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
box-shadow: var(--shadow-coral);
}
.btn-coral:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--hairline);
}
.btn-ghost:hover {
border-color: var(--ink);
background: rgba(11,11,15,0.04);
}
.btn-link {
background: transparent;
color: var(--ink);
padding: 6px 0;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--ink);
min-height: auto;
}
.btn-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
.btn-lg { padding: 16px 26px; font-size: 0.96rem; min-height: 52px; }
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(232,93,51,0.35);
}
/* Arrow icon inside CTAs slides on hover */
.btn .arrow { transition: transform 0.22s ease; }
.btn:hover .arrow { transform: translateX(4px); }
/* ────────────────────────────────────────────────────────────────────────
6. NAVBAR — architectural, FC. mark + wordmark
──────────────────────────────────────────────────────────────────────── */
.navbar {
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 18px 0 !important;
background: transparent !important;
border-bottom: 1px solid transparent !important;
transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease !important;
}
.navbar.scrolled {
background: rgba(244,239,230,0.85) !important;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
padding: 12px 0 !important;
border-bottom: 1px solid var(--hairline) !important;
box-shadow: none !important;
}
.nav-container {
display: flex !important;
align-items: center;
gap: 24px;
}
/* Logo: FC. mark + custom wordmark */
.logo {
display: inline-flex !important;
align-items: center;
gap: 12px;
font-family: var(--font-display);
text-decoration: none;
transition: opacity 0.2s ease;
}
.logo:hover { opacity: 0.75; transform: none !important; }
.logo-mark {
width: 30px !important;
height: 30px !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: block;
}
.logo-mark::after { content: none !important; }
.logo-text {
display: inline-flex;
align-items: baseline;
gap: 8px;
line-height: 1;
}
.logo-main {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 1.05rem !important;
letter-spacing: -0.03em !important;
color: var(--ink) !important;
}
.logo-divider {
display: inline-block;
width: 5px !important;
height: 5px !important;
background: var(--coral) !important;
margin: 0 !important;
align-self: center;
flex-shrink: 0;
}
.logo-accent {
font-family: var(--font-mono) !important;
font-weight: 500 !important;
font-size: 0.72rem !important;
letter-spacing: 0.06em !important;
color: var(--muted) !important;
text-transform: uppercase;
position: relative;
top: -1px;
}
/* Live "Boston" status indicator */
.nav-status {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-left: 18px;
}
.nav-status::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sage);
box-shadow: 0 0 0 3px rgba(11,18,32,0.18);
animation: nav-pulse 2.4s ease-in-out infinite;
}
@keyframes nav-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* Nav links */
.nav-links {
list-style: none;
margin: 0 0 0 auto !important;
padding: 0 !important;
display: flex;
align-items: center;
gap: 4px;
}
.nav-links li a.nav-link,
.nav-links li > a:not(.btn) {
font-family: var(--font-body) !important;
font-size: 0.84rem !important;
font-weight: 500 !important;
letter-spacing: 0.005em !important;
color: var(--ink) !important;
padding: 8px 14px !important;
border-radius: 0 !important;
position: relative;
transition: color 0.2s ease;
}
.nav-links li a.nav-link::after,
.nav-links li > a:not(.btn)::after {
content: '' !important;
position: absolute;
left: 14px; right: 14px;
bottom: 4px;
height: 1px;
background: var(--ink) !important;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s ease;
}
.nav-links li a.nav-link:hover::after,
.nav-links li > a:not(.btn):hover::after,
.nav-links li a.nav-link.active::after { transform: scaleX(1); }
.nav-cta-desktop {
margin-left: 8px !important;
padding: 11px 18px !important;
font-size: 0.82rem !important;
min-height: 40px;
box-shadow: none !important;
}
.hamburger { gap: 4px !important; }
.hamburger span { background: var(--ink) !important; }
/* ────────────────────────────────────────────────────────────────────────
7. HERO — editorial spread (no split-pane mockup)
──────────────────────────────────────────────────────────────────────── */
.hero {
padding: clamp(120px, 14vh, 180px) 0 clamp(60px, 8vh, 100px) !important;
background:
radial-gradient(900px 540px at 88% 4%, rgba(14,122,101,0.08), transparent 62%),
radial-gradient(700px 420px at 6% 92%, rgba(168,134,82,0.07), transparent 60%),
radial-gradient(1100px 700px at 50% 50%, rgba(11,18,32,0.03), transparent 70%),
var(--bg) !important;
position: relative !important;
overflow: hidden !important;
}
.hero-container {
display: block !important;
grid-template-columns: none !important;
}
.hero-content { max-width: 100% !important; text-align: left !important; }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: clamp(20px, 3vw, 40px);
}
.hero-eyebrow .num {
color: var(--coral);
font-weight: 600;
}
.hero-eyebrow .sep {
width: 24px; height: 1px;
background: var(--hairline);
}
.hero-headline {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: var(--type-display) !important;
letter-spacing: -0.04em !important;
line-height: 0.98 !important;
color: var(--ink) !important;
margin-bottom: clamp(24px, 3vw, 36px);
max-width: 17ch;
}
.hero-headline .italic-accent {
font-family: var(--font-italic) !important;
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
}
.hero-headline .dot {
color: var(--coral);
font-weight: 600;
}
.hero-sub {
font-family: var(--font-body);
font-size: var(--type-lede) !important;
line-height: 1.55 !important;
color: var(--ink) !important;
max-width: 56ch;
margin: 0 0 clamp(28px, 3vw, 40px) !important;
}
.hero-ctas {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
margin-bottom: clamp(28px, 3.5vw, 44px);
justify-content: flex-start !important;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
align-items: center;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: uppercase;
}
.hero-meta-pin {
display: inline-flex;
align-items: center;
gap: 7px;
}
.hero-meta-pin::before {
content: '●';
color: var(--coral);
font-size: 0.6rem;
}
.hero-meta-sep {
width: 18px; height: 1px;
background: var(--hairline);
}
/* Decorative architectural lines crossing the hero corner */
.hero::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 38vw; height: 1px;
background: var(--hairline);
transform: translateY(180px);
pointer-events: none;
opacity: 0.6;
}
.hero::after {
content: '';
position: absolute;
top: 180px; right: 0;
width: 1px; height: 60vh;
background: var(--hairline);
pointer-events: none;
opacity: 0.4;
}
/* Hide V1 hero badge, dashboard, floats, trust dots, V1 location pill */
.hero-badge,
.hero-visual,
.hero-trust,
.hero-location,
.hero .float-card { display: none !important; }
/* Benefit bar from V1: hide — replaced by typographic marquee */
.benefit-bar { display: none !important; }
/* ────────────────────────────────────────────────────────────────────────
8. TYPOGRAPHIC MARQUEE — replaces icon benefit bar
──────────────────────────────────────────────────────────────────────── */
.type-marquee {
background: var(--ink);
color: var(--paper);
overflow: hidden;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 16px 0;
}
.type-marquee-track {
display: inline-flex;
white-space: nowrap;
animation: marquee-scroll 38s linear infinite;
will-change: transform;
}
.type-marquee-item {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(0.95rem, 1.4vw, 1.2rem);
letter-spacing: -0.01em;
padding: 0 28px;
display: inline-flex;
align-items: center;
gap: 22px;
color: var(--paper);
}
.type-marquee-item::after {
content: '';
width: 4px; height: 4px;
background: var(--coral);
border-radius: 0;
display: inline-block;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.type-marquee-track { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
9. PROBLEM — editorial spread (pull quote + narrative)
──────────────────────────────────────────────────────────────────────── */
.problem-section {
background: var(--paper) !important;
padding: var(--section-y) 0 !important;
}
.problem-layout {
display: grid !important;
grid-template-columns: 1.05fr 1fr !important;
gap: clamp(40px, 6vw, 96px) !important;
align-items: start !important;
}
.problem-quote {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
font-size: clamp(1.7rem, 3.2vw, 2.6rem);
letter-spacing: -0.015em;
line-height: 1.18;
color: var(--ink);
border-left: 2px solid var(--coral);
padding: 8px 0 8px 28px;
}
.problem-quote-attr {
display: block;
margin-top: 18px;
font-family: var(--font-mono);
font-style: normal;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.problem-body p {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.7;
color: var(--ink);
margin-bottom: 18px;
}
.problem-body p:last-child { margin-bottom: 0; }
.problem-body p strong { font-weight: 600; }
/* hide V1 pain cards — replaced by single editorial spread */
.pain-cards { display: none !important; }
/* ────────────────────────────────────────────────────────────────────────
10. SERVICES — numbered horizontal list
──────────────────────────────────────────────────────────────────────── */
.services-section {
background: var(--bone) !important;
padding: var(--section-y) 0 !important;
}
.services-section .section-headline {
text-align: left;
max-width: 24ch;
margin-bottom: clamp(24px, 3vw, 40px);
}
.services-section .section-sub {
text-align: left;
margin: 0 0 clamp(40px, 5vw, 72px) !important;
font-size: var(--type-lede) !important;
color: var(--ink) !important;
max-width: 56ch !important;
}
/* Hide V1 services-grid; we provide our own list below */
.services-grid { display: none !important; }
.svc-list {
margin-top: clamp(36px, 5vw, 64px);
border-top: 1px solid var(--hairline);
}
.svc-row {
display: grid;
grid-template-columns: 60px 1fr auto 28px;
gap: clamp(16px, 2.4vw, 32px);
align-items: center;
padding: clamp(22px, 3vw, 36px) 0;
border-bottom: 1px solid var(--hairline);
cursor: default;
transition: background 0.25s ease, padding 0.25s ease;
position: relative;
}
.svc-row:hover {
background: rgba(11,11,15,0.025);
padding-left: 12px;
padding-right: 12px;
}
.svc-num {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--coral);
}
.svc-row:nth-child(odd) .svc-num { color: var(--coral); }
.svc-row:nth-child(even) .svc-num { color: var(--ink); }
.svc-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.2rem, 1.8vw, 1.7rem);
letter-spacing: -0.025em;
margin: 0 0 6px;
color: var(--ink);
}
.svc-body p {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.5;
color: var(--muted);
margin: 0;
max-width: 60ch;
}
.svc-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-align: right;
white-space: nowrap;
align-self: center;
}
.svc-arrow {
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid var(--hairline);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.svc-row:hover .svc-arrow {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
transform: translateX(4px);
}
/* ────────────────────────────────────────────────────────────────────────
11. PACKAGES — featured panel + comparison strip
──────────────────────────────────────────────────────────────────────── */
.packages-section {
background: var(--paper) !important;
padding: var(--section-y) 0 !important;
position: relative;
overflow: hidden;
}
.packages-section::before { display: none !important; }
.packages-section .section-headline {
text-align: left;
max-width: 22ch;
margin-bottom: 16px;
}
.packages-section .section-sub {
text-align: left;
font-size: var(--type-lede) !important;
margin: 0 0 clamp(40px, 5vw, 64px) !important;
color: var(--ink) !important;
max-width: 56ch !important;
}
/* Hide V1 packages-grid + V1 alt card. We render our own below. */
.packages-grid { display: none !important; }
.pkg-alt { display: none !important; }
.packages-note { display: none !important; }
/* FEATURED panel — Most Popular as the hero of the section */
.pkg-featured {
background: var(--ink);
color: var(--paper);
padding: clamp(28px, 4vw, 56px);
border-radius: 0;
position: relative;
overflow: hidden;
margin-bottom: clamp(28px, 4vw, 56px);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(28px, 4vw, 64px);
align-items: start;
}
.pkg-featured::before {
content: '';
position: absolute;
top: 24px; right: 24px;
width: 8px; height: 8px;
background: var(--coral);
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(232,93,51,0.18);
animation: nav-pulse 2.4s ease-in-out infinite;
}
.pkg-featured-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pop);
margin-bottom: 18px;
}
.pkg-featured-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 3.6vw, 3rem);
letter-spacing: -0.035em;
line-height: 1.02;
margin: 0 0 16px;
color: var(--paper);
max-width: 14ch;
}
.pkg-featured-name .italic-accent { color: var(--ink); }
.pkg-featured-tag-line {
font-size: var(--type-lede);
color: rgba(244,239,230,0.78);
line-height: 1.55;
margin-bottom: clamp(20px, 2.5vw, 28px);
max-width: 38ch;
}
.pkg-featured-price {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--paper);
margin-bottom: 6px;
}
.pkg-featured-price-sub {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--coral-soft);
margin-bottom: clamp(20px, 2.5vw, 28px);
}
.pkg-featured-cta {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.pkg-featured-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pkg-featured-list {
list-style: none;
margin: 0;
padding: 0;
column-count: 1;
}
.pkg-featured-list li {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.5;
color: rgba(244,239,230,0.85);
padding: 10px 0 10px 22px;
position: relative;
border-bottom: 1px solid rgba(244,239,230,0.10);
}
.pkg-featured-list li:last-child { border-bottom: 0; }
.pkg-featured-list li::before {
content: '';
position: absolute;
left: 0; top: 18px;
width: 10px; height: 1px;
background: var(--coral);
}
/* COMPARISON STRIP — other 3 monthly + One-Time, scannable rows */
.pkg-strip {
border-top: 1px solid var(--hairline);
}
.pkg-strip-row {
display: grid;
grid-template-columns: 100px 1fr 200px 220px 120px;
gap: clamp(12px, 2vw, 28px);
padding: clamp(22px, 3vw, 32px) 0;
align-items: center;
border-bottom: 1px solid var(--hairline);
transition: background 0.22s ease;
}
.pkg-strip-row:hover { background: rgba(11,11,15,0.025); }
.pkg-strip-tag {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--surface-alt);
border: 1px solid var(--hairline);
color: var(--pop);
}
.pkg-strip-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 4px;
}
.pkg-strip-tagline {
font-family: var(--font-body);
font-size: 0.86rem;
color: var(--muted);
margin: 0;
line-height: 1.45;
}
.pkg-strip-feature {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--ink);
text-transform: uppercase;
}
.pkg-strip-feature span {
display: block;
color: var(--muted);
margin-bottom: 2px;
font-size: 0.66rem;
letter-spacing: 0.1em;
}
.pkg-strip-price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.02em;
color: var(--ink);
}
.pkg-strip-price small {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted);
font-weight: 400;
letter-spacing: 0.04em;
margin-left: 4px;
}
.pkg-strip-cta {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 3px;
transition: color 0.22s ease, border-color 0.22s ease;
}
.pkg-strip-cta:hover { color: var(--pop); border-color: var(--pop); }
.pkg-strip-row.is-onetime {
background: var(--bone);
margin-top: 4px;
padding-left: 12px;
padding-right: 12px;
}
.pkg-strip-row.is-onetime:hover { background: var(--hairline-2); }
.pkg-strip-row.is-onetime .pkg-strip-tag {
color: var(--pop);
}
.pkg-fineprint {
margin-top: clamp(32px, 4vw, 48px);
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.pkg-fineprint-item::before {
content: '+ ';
color: var(--coral);
font-weight: 600;
}
/* ────────────────────────────────────────────────────────────────────────
12. INDUSTRIES MARQUEE — replaces logo marquee
──────────────────────────────────────────────────────────────────────── */
.brands-section {
background: var(--charcoal) !important;
padding: 0 !important;
color: var(--paper);
border: 0;
overflow: hidden;
}
.brands-section .container,
.brands-section .brands-container { display: none !important; }
.brands-section .brands-marquee {
margin: 0 !important;
padding: 0 !important;
display: block;
}
.brands-section .brands-fade { display: none !important; }
.brands-section .brands-track { display: none !important; }
.industries-marquee {
background: var(--charcoal);
color: var(--paper);
padding: clamp(38px, 6vw, 56px) 0;
overflow: hidden;
position: relative;
border-top: 1px solid rgba(244,239,230,0.06);
border-bottom: 1px solid rgba(244,239,230,0.06);
}
.industries-track {
display: inline-flex;
white-space: nowrap;
animation: marquee-scroll 48s linear infinite;
will-change: transform;
}
.industries-item {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 4.2vw, 3.6rem);
letter-spacing: -0.035em;
line-height: 1;
color: var(--paper);
padding: 0 36px;
display: inline-flex;
align-items: center;
gap: 36px;
}
.industries-item::after {
content: '';
width: 8px; height: 8px;
background: var(--coral);
border-radius: 0;
display: inline-block;
}
.industries-item.is-italic {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
}
/* ────────────────────────────────────────────────────────────────────────
13. DEMO SHOWCASE FRAME (Gloss Garage dark theme survives from base CSS)
──────────────────────────────────────────────────────────────────────── */
.demo-section {
background: var(--paper) !important;
padding: var(--section-y) 0 !important;
}
.demo-section .container { max-width: var(--container) !important; }
.demo-section .section-headline {
text-align: left;
max-width: 22ch;
margin-bottom: 14px;
}
.demo-section .section-sub {
text-align: left;
font-size: var(--type-lede) !important;
color: var(--ink) !important;
max-width: 56ch !important;
margin: 0 0 clamp(36px, 5vw, 56px) !important;
}
/* "Case credit" header replaces V1 demo-brand card */
.demo-credit {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: clamp(20px, 3vw, 48px);
padding: clamp(20px, 3vw, 32px) 0 !important;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
margin-bottom: clamp(28px, 3.5vw, 40px) !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.demo-credit-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.demo-credit-row dt,
.demo-credit-row .label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.demo-credit-row dd,
.demo-credit-row .value {
font-family: var(--font-display);
font-weight: 500;
font-size: 1rem;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em;
}
/* Wrapper around the showcase to preserve dark theme inside */
.demo-showcase {
margin-top: 0 !important;
}
/* Tabs strip: pill style */
.demo-section .demo-tabs {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 4px !important;
box-shadow: none !important;
}
.demo-section .demo-tab {
background: transparent !important;
border: 1px solid var(--hairline) !important;
border-radius: 999px !important;
padding: 10px 16px !important;
color: var(--ink-2) !important;
display: inline-flex !important;
gap: 8px !important;
align-items: center !important;
font-size: 13px !important;
font-family: inherit !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: 200ms cubic-bezier(0.2,0.7,0,1) !important;
}
.demo-section .demo-tab:hover { color: var(--ink) !important; border-color: var(--ink) !important; }
.demo-section .demo-tab.is-active {
background: var(--ink) !important;
color: var(--surface) !important;
border-color: var(--ink) !important;
box-shadow: none !important;
}
.demo-section .demo-tab.is-active .demo-tab-num { color: inherit !important; opacity: 0.7; }
.demo-section .demo-tab-num { font-family: var(--font-mono) !important; font-size: 11px !important; opacity: 0.7; }
/* Browser chrome: rounded light editorial */
.demo-section .demo-browser-window {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-lg) !important;
overflow: hidden !important;
}
.demo-section .demo-browser-bar { background: var(--surface-alt) !important; border-bottom: 1px solid var(--hairline) !important; border-color: var(--hairline) !important; }
.demo-section .demo-browser-url { background: transparent !important; border-radius: 0 !important; border: none !important; font-family: var(--font-mono) !important; color: var(--ink-3) !important; font-size: 12px !important; }
.demo-section .demo-expand-btn { background: var(--surface) !important; border: 1px solid var(--hairline) !important; color: var(--ink) !important; border-radius: 8px !important; padding: 6px 10px !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: 0; }
.demo-section .demo-expand-btn:hover { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
/* Browser dot colors (macOS traffic lights) */
.demo-section .browser-dots .b-dot:nth-child(1) { background: #FF6058 !important; }
.demo-section .browser-dots .b-dot:nth-child(2) { background: #FFBD2D !important; }
.demo-section .browser-dots .b-dot:nth-child(3) { background: #28C941 !important; }
/* Caption + arrows */
.demo-section .demo-caption strong { color: var(--ink) !important; }
.demo-section .demo-caption span { color: var(--ink-2) !important; }
.demo-section .demo-arrow { background: var(--surface) !important; border: 1px solid var(--hairline) !important; color: var(--ink) !important; }
.demo-section .demo-arrow:hover { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
/* ────────────────────────────────────────────────────────────────────────
14. INBOX (Lead Dashboard) — light editorial
──────────────────────────────────────────────────────────────────────── */
.inbox-section { background: var(--surface-alt); padding: var(--section-y) 0; }
.inbox-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.inbox-copy .section-headline { max-width: 14ch; }
.inbox-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; list-style: none; padding: 0; }
.inbox-chip {
background: var(--surface);
border: 1px solid var(--hairline);
color: var(--ink);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
padding: 8px 12px;
border-radius: 999px;
}
.inbox-mock {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 16px;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.inbox-mock-header {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--hairline);
background: var(--surface-alt);
}
.inbox-mock-header > span:nth-child(2) { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.inbox-mock-header .dots span { width: 10px; height: 10px; border-radius: 999px; display: inline-block; margin-right: 4px; }
.inbox-mock-header .dots span:nth-child(1) { background: #FF6058; }
.inbox-mock-header .dots span:nth-child(2) { background: #FFBD2D; }
.inbox-mock-header .dots span:nth-child(3) { background: #28C941; }
.inbox-mock-header .live { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--pop); display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--pop); animation: livePulse 1.6s infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.inbox-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hairline); }
.inbox-mock-stats > div { padding: 18px 18px 16px; border-right: 1px solid var(--hairline); }
.inbox-mock-stats > div:last-child { border-right: 0; }
.inbox-mock-stats strong { font-family: var(--font-display); font-size: 28px; color: var(--ink); display: block; }
.inbox-mock-stats span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.inbox-mock-list { padding: 6px; }
.inbox-mock-row { display: grid; grid-template-columns: 1.4fr 1.6fr auto auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; }
.inbox-mock-row:hover { background: var(--surface-alt); }
.inbox-mock-row .name { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.inbox-mock-row .svc { color: var(--ink-2); font-size: 13px; }
.inbox-mock-row .badge { font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.inbox-mock-row .badge.new { background: rgba(184,67,26,0.10); color: var(--pop); }
.inbox-mock-row .badge.contacted { background: var(--surface-alt); color: var(--ink-2); }
.inbox-mock-row .badge.booked { background: var(--gold-soft); color: #6F5530; }
.inbox-mock-row .time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
@media (max-width: 768px) {
.inbox-layout { grid-template-columns: 1fr; }
.inbox-mock-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
AUTOMATION FLOW — horizontal timeline + connector draw
──────────────────────────────────────────────────────────────────────── */
.automation-section { background: var(--bg); padding: var(--section-y) 0; }
.flow-track {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin-top: clamp(36px, 5vw, 64px);
}
.flow-track::before {
content: "";
position: absolute;
left: 6%; right: 6%; top: 28px;
height: 1px;
background: linear-gradient(90deg, var(--hairline), var(--accent), var(--hairline));
clip-path: inset(0 100% 0 0);
transition: clip-path 900ms cubic-bezier(0.2,0.7,0,1);
}
.flow-track.is-in-view::before { clip-path: inset(0 0 0 0); }
.flow-step {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 18px 18px 20px;
text-align: left;
box-shadow: var(--shadow-sm);
position: relative;
}
.flow-icon-wrap {
display: inline-grid; place-items: center;
width: 56px; height: 56px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 999px;
margin-bottom: 14px;
color: var(--accent);
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
position: relative;
z-index: 1;
}
.flow-num { font-family: var(--font-mono); font-size: 13px; }
.flow-content h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.flow-content p { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
.flow-track { grid-template-columns: 1fr; gap: 12px; }
.flow-track::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.flow-track::before { transition: none; clip-path: inset(0 0 0 0); }
}
.automation-section .flow-connector { display: none !important; }
.automation-section .flow-emoji { display: none !important; }
/* ────────────────────────────────────────────────────────────────────────
16. HOW IT WORKS — numbered list (matches services style)
──────────────────────────────────────────────────────────────────────── */
.how-section {
background: var(--bone) !important;
padding: var(--section-y) 0 !important;
}
.how-section .section-headline { text-align: left; max-width: 22ch; margin-bottom: clamp(28px, 4vw, 48px); }
.how-section .how-steps {
display: block !important;
grid-template-columns: none !important;
margin-top: clamp(32px, 4vw, 56px);
border-top: 1px solid var(--hairline);
}
.how-section .how-steps::before { display: none !important; }
.how-section .how-step {
display: grid !important;
grid-template-columns: 60px 220px 1fr !important;
gap: clamp(16px, 2.4vw, 32px) !important;
align-items: start !important;
padding: clamp(22px, 3vw, 36px) 0 !important;
border-bottom: 1px solid var(--hairline);
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.how-section .how-step-num {
font-family: var(--font-mono) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
color: var(--coral) !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.how-section .how-step-num::before {
content: '0';
margin-right: 0;
}
.how-section .how-step-body { padding: 0 !important; }
.how-section .how-step-body h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
letter-spacing: -0.025em !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
}
.how-step-desc {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--muted);
margin: 0;
}
.how-section .step-badge {
display: inline-block;
margin-left: 8px;
font-family: var(--font-mono) !important;
font-size: 0.66rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(232,93,51,0.12) !important;
color: var(--coral) !important;
padding: 2px 7px !important;
border-radius: 0 !important;
}
/* ────────────────────────────────────────────────────────────────────────
17. WHY FLOWCRAFT — 2-col editorial
──────────────────────────────────────────────────────────────────────── */
.why-section {
background: var(--paper) !important;
padding: var(--section-y) 0 !important;
}
.why-section .section-headline {
text-align: left;
max-width: 14ch;
}
.why-layout {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
margin-top: clamp(24px, 3vw, 36px);
}
.why-layout .why-grid {
display: block !important;
grid-template-columns: none !important;
}
.why-section .why-card {
display: grid !important;
grid-template-columns: 60px 1fr !important;
gap: clamp(14px, 2vw, 24px) !important;
align-items: start !important;
padding: clamp(20px, 2.6vw, 28px) 0 !important;
border-bottom: 1px solid var(--hairline) !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
border-color: var(--hairline) !important;
text-align: left !important;
}
.why-section .why-card:last-child { border-bottom: 0 !important; }
.why-section .why-card:hover { transform: none !important; }
.why-section .why-icon {
font-family: var(--font-mono) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
color: var(--coral) !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
.why-section .why-card h4 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
margin: 0 0 6px !important;
}
.why-section .why-card p {
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
line-height: 1.55 !important;
color: var(--muted) !important;
margin: 0 !important;
max-width: 56ch;
}
/* ────────────────────────────────────────────────────────────────────────
18. FAQ — inline Q+A
──────────────────────────────────────────────────────────────────────── */
.faq-section {
background: var(--bone) !important;
padding: var(--section-y) 0 !important;
}
.faq-section .section-headline {
text-align: left;
max-width: 16ch;
margin-bottom: clamp(28px, 4vw, 48px);
}
.faq-list { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--hairline); }
.faq-section .faq-item {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--hairline) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.faq-section .faq-q {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
background: transparent !important;
border: 0 !important;
padding: clamp(18px, 2.5vw, 26px) 0 !important;
width: 100% !important;
text-align: left !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
cursor: pointer;
}
.faq-section .faq-q:hover { color: var(--coral) !important; }
.faq-section .faq-toggle {
font-family: var(--font-mono) !important;
font-size: 1rem !important;
color: var(--coral) !important;
font-weight: 500 !important;
transition: transform 0.22s ease;
}
.faq-section .faq-item[open] .faq-toggle,
.faq-section .faq-q[aria-expanded="true"] .faq-toggle { transform: rotate(45deg); }
.faq-section .faq-a {
padding: 0 !important;
}
.faq-section .faq-a p {
font-family: var(--font-body) !important;
font-size: 0.96rem !important;
line-height: 1.7 !important;
color: var(--muted) !important;
padding-bottom: clamp(20px, 2.5vw, 28px) !important;
max-width: 70ch;
}
/* ────────────────────────────────────────────────────────────────────────
19. FINAL CTA — (moved to light editorial block at end of file)
──────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────
20. FOOTER — (moved to light editorial block at end of file)
──────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────
21. CHAT WIDGET — restyled
──────────────────────────────────────────────────────────────────────── */
.chat-toggle {
background: var(--ink) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 14px 28px -8px rgba(11,11,15,0.40) !important;
border-radius: 50% !important;
}
.chat-toggle:hover { background: var(--ink-soft) !important; }
.chat-toggle-pulse {
background: rgba(232,93,51,0.55) !important;
}
.chat-panel {
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 0 !important;
box-shadow: var(--shadow-2) !important;
}
.chat-header {
background: var(--bone) !important;
border-bottom: 1px solid var(--hairline) !important;
}
.chat-avatar {
background: var(--ink) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.chat-avatar img { border-radius: 0 !important; }
.chat-headline strong {
font-family: var(--font-display) !important;
font-size: 0.96rem !important;
color: var(--ink) !important;
}
.chat-status {
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
letter-spacing: 0.04em !important;
color: var(--muted) !important;
}
.chat-status .status-dot {
background: var(--sage) !important;
}
.chat-msg-bot {
background: var(--bone) !important;
border-radius: 0 !important;
border: 1px solid var(--hairline) !important;
color: var(--ink) !important;
font-family: var(--font-body) !important;
}
.chat-msg-bot p { color: var(--ink) !important; }
.chat-msg-user {
background: var(--ink) !important;
color: var(--paper) !important;
border-radius: 0 !important;
}
.chat-quick {
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 0 !important;
color: var(--ink) !important;
transition: border-color 0.2s ease, color 0.2s ease;
}
.chat-quick:hover { border-color: var(--ink) !important; color: var(--coral) !important; }
.chat-input {
font-family: var(--font-body) !important;
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 0 !important;
color: var(--ink) !important;
}
.chat-input:focus {
outline: none;
border-color: var(--ink) !important;
}
.chat-send {
background: var(--accent) !important;
border-radius: 0 !important;
color: var(--accent-ink) !important;
}
.chat-send:hover { background: var(--accent-hover) !important; }
.chat-foot {
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
color: var(--muted) !important;
background: var(--bone) !important;
border-top: 1px solid var(--hairline) !important;
letter-spacing: 0.04em;
}
.chat-foot a { color: var(--coral) !important; border-bottom-color: var(--coral) !important; }
/* ────────────────────────────────────────────────────────────────────────
22. CONTACT PAGE — two-column editorial
──────────────────────────────────────────────────────────────────────── */
body.contact-page {
background: var(--paper);
}
.contact-hero {
padding: clamp(110px, 14vh, 170px) 0 clamp(40px, 6vh, 72px) !important;
background: var(--paper) !important;
text-align: left !important;
}
.contact-hero .hero-grid-bg,
.contact-hero .hero-glow-1,
.contact-hero .hero-glow-2 { display: none !important; }
.contact-hero-inner {
max-width: var(--container-text) !important;
margin: 0 !important;
text-align: left !important;
}
.contact-hero-badge,
.contact-hero .hero-badge {
display: inline-flex !important;
margin: 0 0 clamp(20px, 3vw, 32px) !important;
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
letter-spacing: 0.12em !important;
background: transparent !important;
border: 1px solid var(--hairline) !important;
color: var(--muted) !important;
text-transform: uppercase;
padding: 6px 12px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.contact-hero-badge .badge-dot,
.contact-hero .badge-dot {
background: var(--coral) !important;
box-shadow: 0 0 0 3px rgba(232,93,51,0.18);
}
.contact-hero-headline {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(2.2rem, 5vw, 4rem) !important;
letter-spacing: -0.04em !important;
line-height: 1 !important;
color: var(--ink) !important;
margin: 0 0 clamp(20px, 2.5vw, 28px) !important;
text-align: left !important;
max-width: 18ch;
}
.contact-hero-headline .italic-accent { color: var(--ink); }
.contact-hero-headline .dot { color: var(--coral); }
.contact-hero-sub {
font-family: var(--font-body) !important;
font-size: var(--type-lede) !important;
line-height: 1.55 !important;
color: var(--ink) !important;
margin: 0 0 clamp(24px, 3vw, 36px) !important;
max-width: 56ch !important;
text-align: left;
}
.contact-hero-meta {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
flex-wrap: wrap;
gap: 6px 22px !important;
font-family: var(--font-mono) !important;
font-size: 0.74rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase;
color: var(--muted) !important;
}
.contact-hero-meta .meta-item {
color: var(--ink) !important;
}
.contact-hero-meta svg { color: var(--coral) !important; }
.contact-section {
background: var(--bone) !important;
padding: var(--section-y) 0 !important;
}
.contact-layout {
display: grid !important;
grid-template-columns: 1.3fr 1fr !important;
gap: clamp(40px, 6vw, 80px) !important;
align-items: start !important;
}
.contact-form {
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 0 !important;
padding: clamp(28px, 4vw, 48px) !important;
box-shadow: var(--shadow-1) !important;
}
.contact-form .form-row,
.contact-form .form-group { margin-bottom: 18px !important; }
.contact-form label {
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
color: var(--muted) !important;
margin-bottom: 6px !important;
display: block;
}
.contact-form .req { color: var(--coral); }
.contact-form input,
.contact-form select,
.contact-form textarea {
font-family: var(--font-body) !important;
font-size: 0.96rem !important;
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 0 !important;
padding: 12px 14px !important;
color: var(--ink) !important;
transition: border-color 0.2s ease, background 0.2s ease;
width: 100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--ink) !important;
background: #FBF7EE !important;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .checkbox-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 8px 16px !important;
margin-top: 6px !important;
}
.contact-form .cb-label {
display: flex !important;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--hairline);
background: var(--paper);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
font-family: var(--font-body);
font-size: 0.86rem;
color: var(--ink);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.contact-form .cb-label:hover { border-color: var(--ink); }
.contact-form .cb-label input[type="checkbox"] {
width: auto !important;
accent-color: var(--coral);
}
.contact-form .consent-group {
margin-top: 8px;
padding: 14px;
background: var(--bone);
border: 1px solid var(--hairline);
}
.contact-form .consent-label {
display: flex;
gap: 10px;
align-items: flex-start;
font-family: var(--font-body);
font-size: 0.84rem;
line-height: 1.5;
color: var(--ink);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
cursor: pointer;
}
.contact-form .consent-label input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--coral);
width: auto !important;
}
.contact-form .btn-submit {
margin-top: 8px;
width: 100%;
background: var(--accent) !important;
color: var(--paper) !important;
border-radius: 0 !important;
border: 0 !important;
}
.contact-form .btn-submit:hover { background: var(--accent-hover) !important; }
.contact-form .form-status {
margin-top: 12px;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.02em;
min-height: 1.4em;
}
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Sidebar */
.contact-sidebar {
display: grid !important;
gap: clamp(16px, 2.4vw, 24px) !important;
grid-template-columns: 1fr !important;
}
.sidebar-card {
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: clamp(20px, 3vw, 28px) !important;
}
.sidebar-card h4 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
}
.sidebar-card p {
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
line-height: 1.55 !important;
color: var(--muted) !important;
margin: 0 0 12px !important;
}
.sidebar-card p:last-child { margin-bottom: 0 !important; }
.sidebar-card .sidebar-btn,
.sidebar-card .btn {
display: inline-flex;
margin-top: 4px;
background: var(--accent) !important;
color: var(--paper) !important;
border-radius: 0 !important;
}
.sidebar-card .sidebar-email {
font-family: var(--font-mono);
font-size: 0.86rem;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 1px;
}
.sidebar-card .sidebar-email:hover { color: var(--coral); border-bottom-color: var(--coral); }
.sidebar-card-icon {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--hairline);
margin-bottom: 12px;
background: var(--bone);
}
.sidebar-card-icon svg { color: var(--coral) !important; }
/* Trust strip on contact page */
.contact-trust {
background: var(--paper) !important;
padding: clamp(56px, 8vw, 96px) 0 !important;
}
.trust-strip {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: clamp(16px, 2.4vw, 32px) !important;
border-top: 1px solid var(--hairline);
padding-top: clamp(28px, 4vw, 40px);
}
.trust-item {
display: grid !important;
gap: 12px !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.trust-item-icon {
width: 36px; height: 36px;
border: 1px solid var(--hairline);
background: var(--bone);
display: flex; align-items: center; justify-content: center;
}
.trust-item-icon svg { color: var(--coral) !important; }
.trust-item strong {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 1rem !important;
letter-spacing: -0.015em !important;
color: var(--ink) !important;
display: block;
margin-bottom: 4px;
}
.trust-item p {
font-family: var(--font-body) !important;
font-size: 0.86rem !important;
line-height: 1.45 !important;
color: var(--muted) !important;
margin: 0 !important;
}
/* ────────────────────────────────────────────────────────────────────────
23. ANIMATIONS
──────────────────────────────────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(0.2,0.7,0,1), transform 600ms cubic-bezier(0.2,0.7,0,1); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.fade-up { transition: none; opacity: 1; transform: none; }
}
/* ────────────────────────────────────────────────────────────────────────
24. RESPONSIVE
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.navbar .nav-status { display: none; }
.problem-layout,
.why-layout {
grid-template-columns: 1fr !important;
gap: clamp(28px, 4vw, 48px) !important;
}
.pkg-featured {
grid-template-columns: 1fr !important;
gap: clamp(20px, 3vw, 32px) !important;
}
.pkg-strip-row {
grid-template-columns: 80px 1fr 160px 100px !important;
}
.pkg-strip-row .pkg-strip-cta { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 40px !important;
}
.footer-brand { grid-column: 1 / -1; }
.how-section .how-step {
grid-template-columns: 50px 1fr !important;
}
.how-section .how-step h3 { grid-column: 2; }
.how-section .how-step .how-step-desc { grid-column: 2; }
.how-section .how-step-body { grid-column: 1 / -1; }
.how-section .how-step {
grid-template-columns: 50px 1fr !important;
}
.contact-layout {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.contact-sidebar {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
:root {
--section-y: clamp(56px, 10vw, 80px);
--section-y-sm: clamp(40px, 7vw, 64px);
--pad-x: 18px;
}
/* Mobile nav: closed by default, shown when JS adds .open */
.nav-links {
display: none !important;
position: fixed;
top: 64px;
left: 0; right: 0;
margin: 0 !important;
padding: 18px var(--pad-x) 26px !important;
background: rgba(244,239,230,0.98) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
flex-direction: column;
align-items: stretch !important;
gap: 4px;
border-bottom: 1px solid var(--hairline);
box-shadow: var(--shadow-1);
z-index: 99;
}
.nav-links.open { display: flex !important; }
.nav-links li a.nav-link,
.nav-links li > a:not(.btn) {
padding: 12px 14px !important;
font-size: 0.95rem !important;
}
.nav-links li a.nav-link::after,
.nav-links li > a:not(.btn)::after { display: none !important; }
.nav-links li a.nav-link:hover,
.nav-links li > a:not(.btn):hover {
background: rgba(11,11,15,0.04);
}
.nav-cta-mobile {
display: block !important;
margin-top: 10px !important;
padding-top: 12px !important;
border-top: 1px solid var(--hairline);
}
.nav-cta-mobile a {
display: block !important;
text-align: center;
padding: 14px !important;
}
.nav-cta-desktop { display: none !important; }
.hamburger { display: flex !important; margin-left: auto; }
.nav-status { display: none !important; }
.hero {
padding: 110px 0 56px !important;
}
.hero-headline {
font-size: clamp(2rem, 9vw, 3rem) !important;
line-height: 1.02 !important;
}
.hero-sub { font-size: 1rem !important; }
.hero-eyebrow { font-size: 0.66rem; gap: 8px; margin-bottom: 18px; }
.hero-meta { font-size: 0.7rem; gap: 8px 16px; }
.hero-meta-sep { display: none; }
.hero::before, .hero::after { display: none; }
.type-marquee { padding: 13px 0; }
.type-marquee-item {
font-size: 0.95rem;
padding: 0 18px;
gap: 18px;
}
.industries-marquee { padding: 36px 0; }
.industries-item {
font-size: clamp(1.6rem, 6vw, 2.2rem);
padding: 0 22px;
gap: 22px;
}
.problem-quote {
font-size: 1.4rem !important;
padding-left: 18px;
}
.svc-row {
grid-template-columns: 40px 1fr 32px !important;
padding: 18px 0 !important;
gap: 14px !important;
}
.svc-row:hover { padding-left: 0; padding-right: 0; }
.svc-num { font-size: 0.74rem; }
.svc-body h3 { font-size: 1.1rem !important; }
.svc-body p { font-size: 0.88rem; }
.svc-tag { display: none; }
/* Packages: featured stacks, strip becomes a vertical card list */
.pkg-featured {
padding: 24px 22px !important;
}
.pkg-featured-name { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; }
.pkg-featured-price { font-size: 1.5rem !important; }
.pkg-strip-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 18px 0 !important;
position: relative;
}
.pkg-strip-row .pkg-strip-tag {
position: absolute;
top: 18px; right: 0;
}
.pkg-strip-row .pkg-strip-feature { display: none; }
.pkg-strip-row .pkg-strip-name { font-size: 1.1rem !important; }
.pkg-strip-row .pkg-strip-price { font-size: 1rem; }
.pkg-strip-row .pkg-strip-cta {
justify-self: start;
margin-top: 4px;
}
.pkg-strip-row.is-onetime {
padding-left: 12px !important;
padding-right: 12px !important;
}
.pkg-fineprint {
flex-direction: column;
gap: 6px;
font-size: 0.7rem;
}
.demo-credit {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.how-section .how-step {
grid-template-columns: 40px 1fr !important;
padding: 18px 0 !important;
}
.how-section .how-step-num { font-size: 0.74rem !important; }
.how-section .how-step-body { grid-column: 1 / -1; }
.why-section .why-card {
grid-template-columns: 40px 1fr !important;
padding: 18px 0 !important;
}
.faq-section .faq-q { font-size: 1rem !important; padding: 16px 0 !important; }
.cta-section .section-headline {
font-size: clamp(2.4rem, 12vw, 4rem) !important;
}
.footer-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.footer-bottom {
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.footer-legal a { margin-left: 0; margin-right: 18px; }
.contact-sidebar {
grid-template-columns: 1fr !important;
}
.trust-strip {
grid-template-columns: 1fr 1fr !important;
}
.contact-form .checkbox-row {
grid-template-columns: 1fr !important;
}
/* inbox-mock responsive — handled by canonical block in section 14 */
}
@media (max-width: 480px) {
.hero-headline {
font-size: 2rem !important;
line-height: 1.05 !important;
}
.cta-section .section-headline {
font-size: 2.4rem !important;
}
.industries-item { font-size: 1.5rem; padding: 0 16px; gap: 16px; }
.industries-item::after { width: 5px; height: 5px; }
.pkg-featured { padding: 22px 18px !important; }
.nav-cta-desktop { display: none !important; }
.navbar.scrolled { padding: 10px 0 !important; }
}
/* ========================================================================
V2.1 REFINEMENT LAYER
────────────────────────────────────────────────────────────────────────
Polish pass on top of V2:
· Softened color tokens (warmer ink, muted coral)
· Hero leads panel (CSS-only "live inbox" animation)
· Packages: Starter promoted to featured panel
· Demo showcase: compact width, tighter chrome
· Chat panel: bigger + mascot first-visit pop
· Package detail page system
· Support page
· Terms / Privacy page system
======================================================================== */
/* ── Token softening (now aligned with v7 Studio Sage) ───────── */
:root {
--ink: #0B1220; /* deep midnight */
--ink-soft: #1B2740;
--coral: #B85333;
--coral-soft: #E8A99A;
--hairline: #E4E7DE; /* cool sage hairline */
}
/* ── Hero: 2-column grid (content left, leads panel right) ───────── */
.hero {
padding: clamp(120px, 14vh, 170px) 0 clamp(60px, 8vh, 96px) !important;
}
.hero .hero-container {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 360px) !important;
gap: clamp(36px, 5vw, 80px) !important;
align-items: start !important;
}
.hero .hero-content { max-width: 100% !important; }
/* Soften decorative architectural lines */
.hero::before, .hero::after { display: none !important; }
/* ── Hero leads panel ────────────────────────────────────────────── */
.hero-leads {
background: var(--paper);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-1);
overflow: hidden;
position: relative;
margin-top: clamp(8px, 2vw, 24px);
}
.hero-leads-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--bone);
border-bottom: 1px solid var(--hairline);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.hero-leads-live {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-weight: 500;
}
.hero-leads-pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sage);
box-shadow: 0 0 0 4px rgba(11,18,32,0.16);
animation: hero-leads-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-leads-pulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
.hero-leads-count { color: var(--coral); font-weight: 500; }
.hero-leads-list {
display: flex;
flex-direction: column;
}
.hero-leads-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 8px 12px;
padding: 13px 18px;
border-bottom: 1px solid var(--hairline);
font-family: var(--font-body);
font-size: 0.86rem;
color: var(--ink);
position: relative;
}
.hero-leads-row:last-of-type { border-bottom: 0; }
.hero-leads-name {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
}
.hero-leads-svc {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
grid-column: 1;
grid-row: 2;
margin-top: 2px;
}
.hero-leads-time {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted);
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
/* "Just arrived" — top row gets a coral edge that pulses */
.hero-leads-row-fresh::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--coral);
animation: hero-leads-fresh 4.4s ease-in-out infinite;
}
@keyframes hero-leads-fresh {
0%, 12% { opacity: 0; }
20%, 70% { opacity: 1; }
85%, 100% { opacity: 0.25; }
}
/* "New lead just arrived" toast — fades through */
.hero-leads-foot {
background: var(--paper);
border-top: 1px solid var(--hairline);
padding: 10px 18px;
overflow: hidden;
min-height: 38px;
position: relative;
}
.hero-leads-toast {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--coral);
animation: hero-leads-toast 6s ease-in-out infinite;
}
.hero-leads-toast-dot {
width: 6px; height: 6px;
background: var(--coral);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(217,88,58,0.18);
}
@keyframes hero-leads-toast {
0%, 12% { opacity: 0; transform: translateY(8px); }
22%, 60% { opacity: 1; transform: translateY(0); }
75%, 100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-leads-pulse,
.hero-leads-row-fresh::before,
.hero-leads-toast { animation: none !important; }
}
/* ── Packages: featured panel polish + Starter takes the slot ───── */
.pkg-featured {
grid-template-columns: 1fr 1.15fr !important;
gap: clamp(24px, 4vw, 56px) !important;
border: 1px solid var(--ink) !important;
}
.pkg-strip-row {
grid-template-columns: 110px 1.1fr 200px 200px 130px !important;
padding: clamp(20px, 2.4vw, 28px) 0 !important;
}
.pkg-strip-tagline { max-width: 38ch; }
/* ── Demo showcase: compact ──────────────────────────────────────── */
.demo-section .demo-showcase {
max-width: 880px;
margin: 0 auto;
}
.demo-section .demo-credit {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.demo-section .demo-browser-bar { padding: 8px 12px !important; }
.demo-section .demo-browser-url { padding: 4px 12px !important; }
.demo-section .demo-expand-btn { padding: 5px 10px !important; }
.demo-slides-track { min-height: 380px !important; }
.demo-section .demo-controls { max-width: 880px; margin-left: auto; margin-right: auto; }
/* ── Chat panel: bigger + refined ────────────────────────────────── */
.chat-panel {
width: 400px !important;
max-height: min(560px, calc(100dvh - 110px)) !important;
}
.chat-header { padding: 16px !important; gap: 12px !important; }
.chat-headline strong { font-size: 1rem !important; }
.chat-messages { padding: 18px !important; gap: 12px !important; }
.chat-msg { padding: 12px 14px !important; font-size: 0.92rem !important; line-height: 1.55 !important; }
.chat-quick-row { gap: 8px !important; margin-top: 10px !important; flex-wrap: wrap; }
.chat-quick { padding: 8px 12px !important; font-size: 0.72rem !important; }
.chat-input-row { padding: 12px 14px !important; gap: 10px !important; }
.chat-input { padding: 10px 12px !important; font-size: 0.92rem !important; }
.chat-send { width: 38px !important; height: 38px !important; }
.chat-foot { padding: 10px 14px !important; font-size: 0.72rem !important; }
.chat-toggle {
width: 60px !important;
height: 60px !important;
}
.chat-toggle-pulse {
background: rgba(217,88,58,0.55) !important;
width: 60px !important;
height: 60px !important;
}
/* Stronger pulse to draw attention */
.chat-toggle::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1.5px solid rgba(217,88,58,0.55);
animation: chat-ring-pulse 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes chat-ring-pulse {
0%, 100% { opacity: 0; transform: scale(0.9); }
50% { opacity: 0.8; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.chat-toggle::before { animation: none; opacity: 0; }
}
/* ── Chat mascot: tiny first-visit helper ───────────────────────── */
.chat-mascot {
position: fixed;
bottom: 96px;
right: 24px;
z-index: 95;
background: var(--paper);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-2);
padding: 14px 16px 14px 14px;
max-width: 240px;
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
transform: translateY(8px) scale(0.96);
transform-origin: bottom right;
pointer-events: none;
transition: opacity 0.32s ease, transform 0.32s ease;
}
.chat-mascot.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
animation: chat-mascot-bob 2.4s ease-in-out 1;
}
@keyframes chat-mascot-bob {
0%, 100% { transform: translateY(0) scale(1); }
25% { transform: translateY(-5px) scale(1); }
50% { transform: translateY(0) scale(1); }
}
.chat-mascot::after {
/* tail pointer toward the chat toggle */
content: '';
position: absolute;
right: 18px;
bottom: -7px;
width: 14px; height: 14px;
background: var(--paper);
border-right: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
transform: rotate(45deg);
}
.chat-mascot-glyph {
width: 32px; height: 32px;
background: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.chat-mascot-glyph::before {
/* tiny speech bubble inside */
content: '';
width: 14px; height: 10px;
background: var(--paper);
border-radius: 2px;
position: relative;
}
.chat-mascot-glyph::after {
/* coral period — the "wave" indicator */
content: '';
position: absolute;
bottom: 6px; right: 6px;
width: 5px; height: 5px;
background: var(--coral);
animation: chat-mascot-blink 1.4s ease-in-out infinite;
}
@keyframes chat-mascot-blink {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.chat-mascot-text {
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.35;
color: var(--ink);
margin: 0;
}
.chat-mascot-text strong {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
display: block;
}
.chat-mascot-close {
position: absolute;
top: 6px;
right: 6px;
width: 20px; height: 20px;
background: transparent;
border: 0;
color: var(--muted);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
border-radius: 0;
}
.chat-mascot-close:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.chat-mascot.is-visible { animation: none; }
.chat-mascot-glyph::after { animation: none; opacity: 1; }
}
/* ── Footer Terms/Privacy alignment ──────────────────────────────── */
.footer-legal a { color: rgba(244,239,230,0.55) !important; }
.footer-legal a:hover { color: var(--coral) !important; }
/* ────────────────────────────────────────────────────────────────────────
PACKAGE DETAIL PAGES
──────────────────────────────────────────────────────────────────────── */
body.package-page {
background: var(--paper);
}
.pkg-page-hero {
padding: clamp(110px, 14vh, 170px) 0 clamp(40px, 6vw, 72px) !important;
background: var(--paper);
border-bottom: 1px solid var(--hairline);
}
.pkg-page-hero .container { max-width: var(--container) !important; }
.pkg-page-hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: end;
}
.pkg-page-headline {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 5vw, 4.4rem);
letter-spacing: -0.04em;
line-height: 1;
color: var(--ink);
margin: 18px 0 16px;
max-width: 14ch;
}
.pkg-page-headline .italic-accent { color: var(--ink); }
.pkg-page-headline .dot { color: var(--coral); }
.pkg-page-tag {
font-family: var(--font-body);
font-size: var(--type-lede);
line-height: 1.5;
color: var(--ink);
max-width: 50ch;
margin: 0 0 clamp(20px, 3vw, 28px);
}
.pkg-page-pricing {
background: var(--ink);
color: var(--paper);
padding: clamp(20px, 3vw, 32px);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.pkg-page-pricing[data-popular="true"]::before {
content: '★ Most popular';
position: absolute;
top: 12px;
right: 12px;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--coral);
}
.pkg-page-price {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--paper);
}
.pkg-page-price small {
font-family: var(--font-mono);
font-size: 0.7rem;
color: rgba(244,239,230,0.55);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-left: 6px;
font-weight: 400;
}
.pkg-page-monthly {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--coral-soft);
}
.pkg-page-pricing-cta {
margin-top: 8px;
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
align-self: flex-start;
}
.pkg-page-pricing-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pkg-page-meta {
margin-top: clamp(28px, 3vw, 40px);
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
border-top: 1px solid var(--hairline);
padding-top: clamp(20px, 2.5vw, 28px);
}
.pkg-page-meta strong { color: var(--ink); font-weight: 500; }
.pkg-section {
padding: clamp(56px, 8vw, 100px) 0;
}
.pkg-section.is-bone { background: var(--bone); }
.pkg-section.is-paper { background: var(--paper); }
.pkg-grid-2 {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.pkg-grid-2 h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-h3);
letter-spacing: -0.025em;
margin: 14px 0 16px;
color: var(--ink);
max-width: 16ch;
}
.pkg-grid-2 p {
font-size: var(--type-body);
line-height: 1.65;
color: var(--ink);
max-width: 56ch;
margin-bottom: 14px;
}
.pkg-grid-2 ul {
list-style: none;
padding: 0;
margin: 0;
}
.pkg-grid-2 ul li {
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink);
padding: 12px 0 12px 24px;
border-bottom: 1px solid var(--hairline);
position: relative;
}
.pkg-grid-2 ul li:last-child { border-bottom: 0; }
.pkg-grid-2 ul li::before {
content: '';
position: absolute;
left: 0;
top: 19px;
width: 12px;
height: 1px;
background: var(--coral);
}
.pkg-included-list {
list-style: none;
padding: 0;
margin: clamp(24px, 3vw, 36px) 0 0;
border-top: 1px solid var(--hairline);
}
.pkg-included-list li {
display: grid;
grid-template-columns: 30px 1fr;
gap: 14px;
align-items: start;
padding: 16px 0;
border-bottom: 1px solid var(--hairline);
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink);
}
.pkg-included-list li::before {
content: '+';
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--coral);
font-weight: 600;
}
.pkg-faq h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 8px;
}
.pkg-faq p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--muted);
margin: 0;
}
.pkg-faq-item {
padding: 18px 0;
border-bottom: 1px solid var(--hairline);
}
.pkg-faq-item:last-child { border-bottom: 0; }
/* ── Package inquiry form (organized fieldsets) ─────────────────── */
.pkg-inquiry {
background: var(--paper);
padding: clamp(56px, 8vw, 100px) 0;
}
.pkg-inquiry-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.pkg-inquiry-intro h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-h2);
letter-spacing: -0.03em;
line-height: 1.05;
margin: 14px 0 16px;
color: var(--ink);
max-width: 14ch;
}
.pkg-inquiry-intro h2 .dot { color: var(--coral); }
.pkg-inquiry-intro p {
font-size: var(--type-body);
line-height: 1.6;
color: var(--ink);
max-width: 44ch;
}
.package-form {
background: var(--paper);
border: 1px solid var(--hairline);
padding: clamp(24px, 3.5vw, 40px);
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
gap: clamp(18px, 2.5vw, 28px);
}
.pf-group {
border: 0;
padding: 0;
margin: 0;
}
.pf-group legend {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 12px;
display: block;
}
.pf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
margin-bottom: 12px;
}
.pf-row:last-child { margin-bottom: 0; }
.pf-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.pf-field-full { grid-column: 1 / -1; }
.pf-field label {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.pf-field label .req { color: var(--coral); }
.pf-field input,
.pf-field select,
.pf-field textarea {
font-family: var(--font-body);
font-size: 0.96rem;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: 0;
padding: 12px 14px;
color: var(--ink);
transition: border-color 0.2s ease, background 0.2s ease;
width: 100%;
}
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
outline: none;
border-color: var(--ink);
background: #FBF7EE;
}
.pf-field textarea { resize: vertical; min-height: 110px; }
.pf-consent {
display: flex;
gap: 10px;
align-items: flex-start;
background: var(--bone);
border: 1px solid var(--hairline);
padding: 14px;
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink);
cursor: pointer;
}
.pf-consent input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--coral);
}
.pf-submit {
align-self: flex-start;
background: var(--ink);
color: var(--paper);
border: 0;
padding: 14px 26px;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
border-radius: 100px;
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 22px rgba(11,11,15,0.18);
transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.pf-submit:hover {
background: var(--ink-soft);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 14px 30px rgba(11,11,15,0.22);
}
.pf-status {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted);
min-height: 1.4em;
}
.pf-status.success { color: var(--sage); }
.pf-status.error { color: var(--coral); }
.pkg-page-cta-strip {
background: var(--charcoal);
color: var(--paper);
padding: clamp(48px, 7vw, 80px) 0;
text-align: left;
}
.pkg-page-cta-strip h3 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.6rem);
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--paper);
margin: 0 0 16px;
max-width: 22ch;
}
.pkg-page-cta-strip h3 .dot { color: var(--coral); }
.pkg-page-cta-strip p {
font-size: var(--type-body);
color: rgba(244,239,230,0.7);
max-width: 40ch;
margin-bottom: 20px;
}
/* ────────────────────────────────────────────────────────────────────────
SUPPORT PAGE
──────────────────────────────────────────────────────────────────────── */
body.support-page { background: var(--paper); }
.support-hero {
padding: clamp(110px, 14vh, 170px) 0 clamp(36px, 5vw, 60px);
background: var(--paper);
border-bottom: 1px solid var(--hairline);
}
.support-hero .container { max-width: var(--container-text); }
.support-hero-headline {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.2rem, 5vw, 4rem);
letter-spacing: -0.04em;
line-height: 1;
margin: 18px 0 16px;
color: var(--ink);
max-width: 16ch;
}
.support-hero-headline .italic-accent { color: var(--ink); }
.support-hero-headline .dot { color: var(--coral); }
.support-hero p {
font-size: var(--type-lede);
line-height: 1.55;
color: var(--ink);
max-width: 56ch;
}
.support-hero .help-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: clamp(20px, 2.5vw, 28px);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.support-hero .help-meta strong { color: var(--ink); font-weight: 500; }
.support-section {
background: var(--bone);
padding: clamp(60px, 8vw, 100px) 0;
}
.support-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.support-aside h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-h3);
letter-spacing: -0.025em;
margin: 14px 0 14px;
color: var(--ink);
max-width: 14ch;
}
.support-aside h3 .dot { color: var(--coral); }
.support-aside p {
font-size: var(--type-body);
line-height: 1.6;
color: var(--ink);
margin-bottom: 14px;
max-width: 44ch;
}
.support-aside ul {
list-style: none;
padding: 0;
margin: clamp(20px, 3vw, 28px) 0 0;
border-top: 1px solid var(--hairline);
}
.support-aside ul li {
padding: 14px 0 14px 22px;
border-bottom: 1px solid var(--hairline);
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink);
position: relative;
}
.support-aside ul li::before {
content: '+';
position: absolute;
left: 0;
top: 14px;
color: var(--coral);
font-family: var(--font-mono);
font-weight: 600;
}
/* ────────────────────────────────────────────────────────────────────────
TERMS / PRIVACY PAGES
──────────────────────────────────────────────────────────────────────── */
body.legal-page { background: var(--paper); }
.legal-hero {
padding: clamp(110px, 14vh, 170px) 0 clamp(28px, 4vw, 48px);
background: var(--paper);
border-bottom: 1px solid var(--hairline);
}
.legal-hero .container { max-width: var(--container-text); }
.legal-hero h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 4.5vw, 3.4rem);
letter-spacing: -0.04em;
line-height: 1;
margin: 18px 0 14px;
color: var(--ink);
max-width: 16ch;
}
.legal-hero h1 .dot { color: var(--coral); }
.legal-hero p.legal-meta {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.legal-hero p.legal-intro {
font-size: var(--type-body);
line-height: 1.6;
color: var(--ink);
max-width: 56ch;
margin: 14px 0 0;
}
.legal-template-note {
background: var(--bone);
border: 1px solid var(--hairline);
border-left: 3px solid var(--coral);
padding: 14px 18px;
margin-top: clamp(22px, 3vw, 32px);
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.55;
color: var(--ink);
}
.legal-template-note strong { font-weight: 600; }
.legal-body {
padding: clamp(48px, 7vw, 80px) 0 clamp(60px, 8vw, 100px);
background: var(--paper);
}
.legal-body .container { max-width: var(--container-text); }
.legal-section {
padding: clamp(28px, 3.5vw, 44px) 0;
border-bottom: 1px solid var(--hairline);
}
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.3rem, 1.8vw, 1.7rem);
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 14px;
display: flex;
align-items: baseline;
gap: 14px;
}
.legal-section h2 .legal-num {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--coral);
flex-shrink: 0;
}
.legal-section p,
.legal-section li {
font-family: var(--font-body);
font-size: 0.96rem;
line-height: 1.7;
color: var(--ink);
margin: 0 0 12px;
max-width: 70ch;
}
.legal-section ul,
.legal-section ol {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
.legal-section ul li {
padding-left: 22px;
position: relative;
margin-bottom: 8px;
}
.legal-section ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--coral);
}
.legal-section strong { font-weight: 600; }
/* ────────────────────────────────────────────────────────────────────────
V2.1 RESPONSIVE
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero .hero-container {
grid-template-columns: 1fr !important;
}
.hero-leads { max-width: 460px; }
.pkg-strip-row {
grid-template-columns: 90px 1fr 160px 130px !important;
}
.pkg-page-hero-grid,
.pkg-grid-2,
.pkg-inquiry-grid,
.support-grid {
grid-template-columns: 1fr !important;
gap: clamp(28px, 4vw, 48px) !important;
}
}
@media (max-width: 768px) {
/* Hide the lead panel on phones — the inbox section below is plenty */
.hero-leads { display: none; }
.demo-section .demo-showcase,
.demo-section .demo-credit,
.demo-section .demo-controls { max-width: 100%; }
.chat-panel {
width: auto !important;
max-height: min(560px, calc(100dvh - 110px)) !important;
}
.chat-mascot {
right: 16px;
bottom: 90px;
max-width: 220px;
padding: 12px 14px;
}
/* Package detail mobile */
.pkg-page-headline { font-size: clamp(1.85rem, 9vw, 2.6rem) !important; }
.pkg-page-pricing { padding: 20px !important; }
.pf-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.package-form {
padding: 22px 18px !important;
}
/* Support / legal mobile */
.support-hero,
.legal-hero {
padding-top: 96px;
padding-bottom: 32px;
}
.support-hero-headline { font-size: clamp(1.85rem, 9vw, 2.4rem); }
.legal-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
.legal-section { padding: 24px 0; }
.legal-section h2 {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* Strip rows already stack via base V2 mobile rules */
}
/* ========================================================================
V2.2 REFINEMENT LAYER
────────────────────────────────────────────────────────────────────────
Three focused changes:
· Stone + Slate + Muted Teal palette (replaces cream + black + coral)
· Hero right-side: layered desktop + mobile mockup (replaces leads panel)
· Demo project: Aria Aesthetics med spa (replaces Gloss Garage)
──────────────────────────────────────────────────────────────────────── */
/* ── Cascade-final palette overrides — Studio Sage v7 ──────────── */
:root {
/* Cascade-final values for v7: clean ivory white + soft sage band +
refined emerald accent. Token names kept stable so existing rules
continue to resolve. */
--paper: #FBFAF6; /* bright ivory — matches --bg */
--bone: #F0F2EB; /* soft sage band — matches --surface-alt */
--ink: #0B1220; /* deep midnight */
--ink-soft: #1B2740;
--charcoal: #0B1220;
--coral: #B85333;
--coral-soft: #E8A99A;
--copper: #A88652;
--hairline: #E4E7DE; /* cool sage hairline */
--hairline-2: #EDEFE7; /* even softer pairing rule */
--muted: #3A4358; /* matches --ink-2 */
--sage: #0E7A65; /* emerald */
/* Glow-aware shadow stack — slightly cooler against the brighter base */
--shadow-1: 0 2px 6px rgba(11,18,32,0.04);
--shadow-2: 0 14px 36px rgba(11,18,32,0.07);
--shadow-cta: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(14,122,101,0.28);
--shadow-cta-hover: 0 1px 0 rgba(255,255,255,0.22) inset, 0 18px 40px rgba(45,227,181,0.28);
}
/* Buttons: primary + coral now use forest accent */
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
box-shadow: var(--shadow-cta);
}
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
box-shadow: var(--shadow-cta-hover);
}
.btn-coral {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.btn-coral:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Hardcoded coral references — retune to teal/copper */
.btn-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
/* Eyebrow accent number: terracotta typographic accent. */
.eyebrow .eyebrow-num,
.hero-eyebrow .num {
color: var(--pop);
}
.hero-headline .dot,
.section-headline .dot,
.contact-hero-headline .dot,
.cta-section .section-headline .dot,
.pkg-page-headline .dot,
.support-hero-headline .dot,
.legal-hero h1 .dot,
.pkg-inquiry-intro h2 .dot,
.pkg-page-cta-strip h3 .dot,
.support-aside h3 .dot {
color: var(--copper); /* warm period — keeps personality without coral */
}
.hero-meta-pin::before { color: var(--copper); }
.faq-section .faq-q:hover { color: var(--coral) !important; }
.faq-section .faq-toggle { color: var(--coral) !important; }
.problem-quote { border-left-color: var(--copper); }
/* Type marquee + industries marquee dots — teal */
.type-marquee-item::after,
.industries-item::after { background: var(--copper); }
/* "Most popular" tag — terracotta typographic accent */
.pkg-featured-tag { color: var(--pop) !important; }
.pkg-strip-row.is-onetime .pkg-strip-tag,
.pkg-page-pricing[data-popular="true"]::before { color: var(--pop) !important; }
/* Featured panel + comparison strip retunes */
.pkg-featured {
background: var(--ink) !important;
color: var(--paper);
border: 0 !important;
}
.pkg-featured::before {
background: var(--copper);
box-shadow: 0 0 0 6px rgba(168,134,82,0.18);
}
.pkg-featured-name { color: var(--paper); }
.pkg-featured-name .italic-accent { color: var(--ink); }
.pkg-featured-tag-line { color: rgba(245,244,240,0.78); }
.pkg-featured-price { color: var(--paper); }
.pkg-featured-price-sub { color: var(--coral-soft); }
.pkg-featured-cta {
background: var(--accent) !important;
color: var(--accent-ink) !important;
border-color: var(--accent) !important;
}
.pkg-featured-cta:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.pkg-featured-list li { color: rgba(245,244,240,0.85); border-bottom-color: rgba(245,244,240,0.10); }
.pkg-featured-list li::before { background: var(--coral); }
.pkg-strip-cta { color: var(--ink); border-bottom-color: var(--ink); }
.pkg-strip-cta:hover { color: var(--pop); border-color: var(--pop); }
/* Service rows + how rows — coral became teal */
.svc-num { color: var(--coral) !important; }
.svc-row:nth-child(odd) .svc-num { color: var(--coral) !important; }
.svc-row:nth-child(even) .svc-num { color: var(--ink) !important; }
.svc-row:hover .svc-arrow { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.how-section .how-step-num { color: var(--coral) !important; }
.how-section .step-badge {
background: var(--gold-soft) !important;
color: #6F5530 !important;
}
.why-section .why-icon { color: var(--coral) !important; }
/* CTA + Footer dark legacy rules removed — see light editorial block at end of file */
/* Logo divider in nav becomes copper */
.logo-divider { background: var(--copper) !important; }
/* Nav status pulse — sage stays */
.nav-status::before { background: var(--sage); box-shadow: 0 0 0 3px rgba(11,18,32,0.18); }
/* Chat widget retunes */
.chat-toggle::before { border-color: rgba(11,18,32,0.55); }
.chat-toggle-pulse { background: rgba(11,18,32,0.55) !important; }
.chat-send { background: var(--accent) !important; }
.chat-send:hover { background: var(--accent-hover) !important; }
.chat-foot a { color: var(--coral) !important; border-bottom-color: var(--coral) !important; }
/* Mascot retunes */
.chat-mascot-glyph::after { background: var(--copper); }
/* Form inputs background tint on focus */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
background: #FBFAF6 !important;
}
.contact-form .req,
.pf-field label .req { color: var(--copper); }
.contact-form .cb-label input[type="checkbox"],
.contact-form .consent-label input[type="checkbox"],
.pf-consent input[type="checkbox"] { accent-color: var(--coral); }
.sidebar-card .sidebar-email:hover { color: var(--coral); border-bottom-color: var(--coral); }
.sidebar-card-icon svg { color: var(--copper) !important; }
.trust-item-icon svg { color: var(--copper) !important; }
/* Contact-hero badge dot recolor */
.contact-hero-badge .badge-dot,
.contact-hero .badge-dot {
background: var(--copper) !important;
box-shadow: 0 0 0 3px rgba(168,134,82,0.18);
}
.contact-hero-meta svg { color: var(--copper) !important; }
/* Demo section — surface tones lift */
.demo-section .demo-tab.is-active .demo-tab-num { color: inherit !important; opacity: 0.7; }
/* Inbox / dashboard moment — old overrides removed; new rules in section 14 */
/* Body of cta-strip on package pages */
.pkg-page-cta-strip { background: var(--charcoal) !important; }
/* Legal pages: coral period accents already use --coral; keep, but
the eyebrow num should now read teal too. No change needed. */
/* Dormant: hide V2.1 hero-leads (we're replacing the markup but
defensive in case it's still rendered somewhere). */
.hero-leads { display: none !important; }
/* ========================================================================
HERO MOCKUP — layered desktop + mobile preview
Replaces the V2.1 leads panel. CSS-only animation: a slow scroll
loop in the desktop content, gentle float on the phone.
======================================================================== */
.hero-mockup {
position: relative;
margin-top: clamp(8px, 2vw, 24px);
width: 100%;
max-width: 460px;
justify-self: end;
}
.hero-mockup-caption {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
.hero-mockup-caption::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sage);
box-shadow: 0 0 0 3px rgba(11,18,32,0.18);
animation: hero-mockup-live 2.4s ease-in-out infinite;
}
@keyframes hero-mockup-live {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
/* Desktop browser frame */
.hero-mockup-browser {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-lg);
border-radius: 14px;
overflow: hidden;
/* aspect ratio 16:10 desktop feel */
aspect-ratio: 16 / 10;
}
.hero-mockup-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--surface-alt);
border-bottom: 1px solid var(--hairline);
}
.hero-mockup-bar-dots {
display: inline-flex;
gap: 5px;
}
.hero-mockup-bar-dots span {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--hairline);
}
.hero-mockup-bar-dots span:nth-child(1) { background: #FF6058; }
.hero-mockup-bar-dots span:nth-child(2) { background: #FFBD2D; }
.hero-mockup-bar-dots span:nth-child(3) { background: #28C941; }
.hero-mockup-bar-url {
flex: 1;
background: var(--paper);
border: 1px solid var(--hairline);
padding: 4px 10px;
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--ink-3);
letter-spacing: 0.02em;
}
/* Inner viewport — clips the scroll-loop */
.hero-mockup-viewport {
position: relative;
overflow: hidden;
height: calc(100% - 32px);
background: #FFFFFF;
}
.hero-mockup-scroll {
position: relative;
will-change: transform;
animation: hero-mockup-scroll 22s ease-in-out infinite;
}
@keyframes hero-mockup-scroll {
0%, 12% { transform: translateY(0); }
44%, 56% { transform: translateY(-32%); }
88%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-mockup-scroll { animation: none; }
.hero-mockup-caption::before { animation: none; }
}
/* Mockup content — abstracted "fictional service site" */
.hero-mockup-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--hairline-2);
}
.hero-mockup-nav-brand {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: -0.02em;
color: var(--ink);
}
.hero-mockup-nav-brand .dot { color: var(--copper); }
.hero-mockup-nav-links {
display: inline-flex;
gap: 14px;
list-style: none;
padding: 0; margin: 0;
}
.hero-mockup-nav-links li {
width: 24px; height: 4px;
background: var(--hairline-2);
border-radius: 1px;
}
.hero-mockup-nav-cta {
width: 48px; height: 16px;
background: var(--ink);
border-radius: 100px;
}
.hero-mockup-hero {
padding: 22px 18px;
background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF6 100%);
border-bottom: 1px solid var(--hairline-2);
}
.hero-mockup-hero-eyebrow {
width: 68px; height: 6px;
background: var(--copper);
border-radius: 1px;
margin-bottom: 10px;
opacity: 0.6;
}
.hero-mockup-hero-h {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 8px;
max-width: 16ch;
}
.hero-mockup-hero-h .italic-accent { color: var(--gold); }
.hero-mockup-hero-sub {
width: 80%; height: 5px;
background: var(--hairline-2);
border-radius: 1px;
margin-bottom: 6px;
}
.hero-mockup-hero-sub.short { width: 50%; }
.hero-mockup-hero-cta {
width: 84px; height: 22px;
background: var(--ink);
border-radius: 100px;
margin-top: 12px;
display: inline-block;
}
.hero-mockup-feat {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 18px;
}
.hero-mockup-feat-item {
background: #FBFAF6;
border: 1px solid var(--hairline-2);
padding: 10px 9px;
}
.hero-mockup-feat-icon {
width: 18px; height: 18px;
background: var(--coral);
opacity: 0.85;
margin-bottom: 7px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.hero-mockup-feat-line {
width: 70%; height: 4px;
background: var(--hairline);
border-radius: 1px;
margin-bottom: 4px;
}
.hero-mockup-feat-line.short { width: 45%; }
.hero-mockup-form {
padding: 18px;
background: var(--paper);
border-top: 1px solid var(--hairline-2);
}
.hero-mockup-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.hero-mockup-form-input {
height: 22px;
background: #FFFFFF;
border: 1px solid var(--hairline);
}
.hero-mockup-form-cta {
width: 90px;
height: 24px;
background: var(--coral);
margin-top: 4px;
}
/* Phone overlay — sits bottom-left of the desktop frame */
.hero-mockup-phone {
position: absolute;
bottom: -28px;
left: -36px;
width: 38%;
max-width: 168px;
aspect-ratio: 9 / 19;
background: var(--charcoal);
border-radius: 22px;
border: 5px solid var(--charcoal);
box-shadow: 0 18px 40px -12px rgba(22,22,27,0.40), 0 6px 16px -4px rgba(22,22,27,0.18);
overflow: hidden;
animation: hero-mockup-phone-float 4.6s ease-in-out infinite;
z-index: 2;
}
@keyframes hero-mockup-phone-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-mockup-phone { animation: none; }
}
.hero-mockup-phone::before {
/* notch */
content: '';
position: absolute;
top: 6px; left: 50%;
transform: translateX(-50%);
width: 36%; height: 12px;
background: var(--charcoal);
border-radius: 0 0 8px 8px;
z-index: 4;
}
.hero-mockup-phone-screen {
position: absolute;
inset: 0;
background: #FFFFFF;
border-radius: 16px;
overflow: hidden;
}
.hero-mockup-phone-nav {
height: 26px;
background: #FBFAF6;
border-bottom: 1px solid var(--hairline-2);
display: flex;
align-items: center;
justify-content: center;
padding-top: 14px;
}
.hero-mockup-phone-nav span {
width: 38%; height: 4px;
background: var(--ink);
border-radius: 1px;
margin-top: 4px;
}
.hero-mockup-phone-hero {
padding: 14px 12px 12px;
}
.hero-mockup-phone-h {
width: 80%; height: 7px;
background: var(--ink);
border-radius: 1px;
margin-bottom: 5px;
}
.hero-mockup-phone-h.short { width: 55%; }
.hero-mockup-phone-sub {
width: 70%; height: 4px;
background: var(--hairline);
border-radius: 1px;
margin-bottom: 4px;
}
.hero-mockup-phone-cta {
width: 70%; height: 18px;
background: var(--coral);
margin: 10px 0 14px;
border-radius: 100px;
}
.hero-mockup-phone-card {
background: var(--paper);
border: 1px solid var(--hairline-2);
padding: 10px;
margin: 10px 12px;
}
.hero-mockup-phone-card-row {
display: flex; gap: 6px; align-items: center;
margin-bottom: 6px;
}
.hero-mockup-phone-card-row:last-child { margin-bottom: 0; }
.hero-mockup-phone-card-icon {
width: 14px; height: 14px;
background: var(--copper);
opacity: 0.8;
flex-shrink: 0;
border-radius: 2px;
}
.hero-mockup-phone-card-line {
flex: 1; height: 4px;
background: var(--hairline);
border-radius: 1px;
}
.hero-mockup-phone-card-line.short { flex: 0 1 60%; }
/* ========================================================================
ARIA AESTHETICS — DEMO LIGHT THEME
Scoped to .demo-slide .aa-page so it does not leak elsewhere.
New light-toned palette specific to the fictional med spa client
to demonstrate FlowCraft can build for a different aesthetic.
======================================================================== */
.demo-section .demo-slides-track { background: #FAF6F0 !important; }
.demo-section .aa-page,
.demo-modal-body .aa-page {
background: #FAF6F0;
color: #2A1F2D;
padding: 22px 24px;
font-family: var(--font-body);
min-height: 380px;
}
/* Aria scoped tokens — blush + gold + aubergine */
.aa-page {
--aa-ivory: #FAF6F0;
--aa-cream: #F5EDE3;
--aa-blush: #EFD8CB;
--aa-aubergine: #2A1F2D;
--aa-aubergine-soft: #514354;
--aa-gold: #B89968;
--aa-gold-soft: #D7BD93;
--aa-sage: #B6BFA8;
--aa-hairline: #E4D9C9;
}
.aa-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0 18px;
border-bottom: 1px solid var(--aa-hairline);
margin-bottom: 18px;
}
.aa-logo {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
font-size: 1.05rem;
letter-spacing: -0.015em;
color: var(--aa-aubergine);
}
.aa-logo-accent {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
color: var(--aa-gold);
text-transform: uppercase;
margin-left: 8px;
}
.aa-nav-links {
display: flex;
gap: 18px;
list-style: none;
padding: 0; margin: 0;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aa-aubergine-soft);
}
.aa-btn {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 14px;
background: var(--aa-aubergine);
color: var(--aa-ivory);
border: 0;
cursor: pointer;
transition: background 0.2s ease;
}
.aa-btn:hover { background: #1B1320; }
.aa-btn-gold {
background: var(--aa-gold);
color: #FFFFFF;
}
.aa-btn-gold:hover { background: #9F825A; }
.aa-btn-ghost {
background: transparent;
color: var(--aa-aubergine);
border: 1px solid var(--aa-aubergine);
}
.aa-btn-ghost:hover { background: rgba(42,31,45,0.04); }
.aa-eyebrow {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--aa-gold);
margin: 0 0 12px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.aa-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: var(--aa-gold);
}
/* ── Slide 1: Landing ─────────────────────────────────── */
.aa-page-landing { padding: 22px 24px 26px; }
.aa-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 24px;
align-items: center;
padding: 18px 0 26px;
border-bottom: 1px solid var(--aa-hairline);
}
.aa-hero-h {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
font-size: clamp(1.4rem, 3.2vw, 2.4rem);
letter-spacing: -0.025em;
line-height: 1.0;
color: var(--aa-aubergine);
margin: 8px 0 14px;
max-width: 14ch;
}
.aa-hero-h em {
font-style: italic;
color: var(--aa-gold);
}
.aa-hero-sub {
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.55;
color: var(--aa-aubergine-soft);
margin: 0 0 16px;
max-width: 36ch;
}
.aa-hero-ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.aa-hero-art {
height: 100%;
min-height: 180px;
background:
radial-gradient(ellipse 70% 60% at 30% 30%, rgba(168,134,82,0.32), transparent 60%),
radial-gradient(ellipse 80% 70% at 80% 80%, rgba(239,216,203,0.65), transparent 65%),
linear-gradient(135deg, #F5EDE3 0%, #EFD8CB 60%, #E4C8B6 100%);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.aa-hero-art::before,
.aa-hero-art::after {
/* organic blobs to suggest skin imagery without using photos */
content: '';
position: absolute;
border-radius: 50%;
filter: blur(18px);
}
.aa-hero-art::before {
width: 60%; height: 60%;
top: -10%; left: 25%;
background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
}
.aa-hero-art::after {
width: 40%; height: 40%;
bottom: 12%; right: 12%;
background: radial-gradient(circle, rgba(168,134,82,0.40), transparent 70%);
}
.aa-tile-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 22px 0;
}
.aa-tile {
background: #FFFFFF;
border: 1px solid var(--aa-hairline);
padding: 14px 12px 12px;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.aa-tile:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(42,31,45,0.10);
}
.aa-tile-icon {
width: 22px; height: 22px;
background: rgba(168,134,82,0.16);
border: 1px solid rgba(168,134,82,0.35);
margin-bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--aa-gold);
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
}
.aa-tile h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.76rem;
letter-spacing: -0.015em;
color: var(--aa-aubergine);
margin: 0 0 4px;
}
.aa-tile-spec {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
color: var(--aa-gold);
text-transform: uppercase;
font-weight: 600;
}
.aa-stat-strip {
display: flex;
align-items: center;
justify-content: space-around;
gap: 14px;
padding: 18px 0 4px;
border-top: 1px solid var(--aa-hairline);
}
.aa-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.aa-stat strong {
font-family: var(--font-italic);
font-style: italic;
font-size: 1.2rem;
color: var(--aa-aubergine);
line-height: 1;
}
.aa-stat span {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
color: var(--aa-aubergine-soft);
text-transform: uppercase;
margin-top: 4px;
}
/* ── Slide 2: Treatments ──────────────────────────────── */
.aa-page-treatments {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 28px;
padding: 24px;
}
.aa-page-treatments .aa-side h2 {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
font-size: 1.65rem;
line-height: 1;
color: var(--aa-aubergine);
margin: 8px 0 12px;
max-width: 8ch;
}
.aa-page-treatments .aa-side p {
font-size: 0.84rem;
color: var(--aa-aubergine-soft);
line-height: 1.5;
margin: 0;
max-width: 28ch;
}
.aa-treatments-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--aa-hairline);
}
.aa-treatment-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--aa-hairline);
gap: 14px;
}
.aa-treatment-row .name {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.92rem;
color: var(--aa-aubergine);
letter-spacing: -0.015em;
}
.aa-treatment-row .desc {
grid-column: 1;
grid-row: 2;
font-size: 0.74rem;
color: var(--aa-aubergine-soft);
margin-top: 2px;
}
.aa-treatment-row .price {
font-family: var(--font-italic);
font-style: italic;
font-size: 1rem;
color: var(--aa-gold);
grid-row: 1 / span 2;
align-self: center;
text-align: right;
}
/* ── Slide 3: Booking ─────────────────────────────────── */
.aa-page-booking {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 22px;
padding: 22px 24px;
}
.aa-steps {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aa-aubergine-soft);
flex-wrap: wrap;
}
.aa-steps .aa-step {
display: inline-flex;
align-items: center;
gap: 6px;
}
.aa-steps .aa-step.is-active { color: var(--aa-gold); }
.aa-steps .aa-step i {
font-style: normal;
width: 16px; height: 16px;
border: 1px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.55rem;
font-weight: 600;
}
.aa-steps .aa-step-line {
width: 16px; height: 1px;
background: var(--aa-hairline);
}
.aa-cal {
background: #FFFFFF;
border: 1px solid var(--aa-hairline);
padding: 14px;
}
.aa-cal-head {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: -0.015em;
color: var(--aa-aubergine);
margin-bottom: 10px;
}
.aa-cal-head span {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
color: var(--aa-aubergine-soft);
text-transform: uppercase;
}
.aa-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
font-family: var(--font-mono);
font-size: 0.66rem;
text-align: center;
}
.aa-cal-grid .day-h {
color: var(--aa-aubergine-soft);
font-size: 0.55rem;
letter-spacing: 0.08em;
padding: 4px 0;
}
.aa-cal-grid .day {
padding: 6px 0;
color: var(--aa-aubergine);
border-radius: 100px;
}
.aa-cal-grid .day.muted { color: var(--aa-hairline); }
.aa-cal-grid .day.selected {
background: var(--aa-aubergine);
color: var(--aa-ivory);
}
.aa-cal-grid .day.has-slot { font-weight: 600; }
.aa-times {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 12px;
}
.aa-time {
font-family: var(--font-mono);
font-size: 0.66rem;
text-align: center;
padding: 6px 0;
border: 1px solid var(--aa-hairline);
color: var(--aa-aubergine);
}
.aa-time.selected {
background: var(--aa-gold);
border-color: var(--aa-gold);
color: #FFFFFF;
}
.aa-summary {
background: #FFFFFF;
border: 1px solid var(--aa-hairline);
padding: 14px;
display: flex;
flex-direction: column;
}
.aa-summary h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.84rem;
letter-spacing: -0.015em;
color: var(--aa-aubergine);
margin: 0 0 10px;
}
.aa-summary-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.04em;
color: var(--aa-aubergine-soft);
border-bottom: 1px solid var(--aa-hairline);
}
.aa-summary-row:last-of-type { border-bottom: 0; }
.aa-summary-row strong {
color: var(--aa-aubergine);
font-family: var(--font-body);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.aa-summary-total {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--aa-hairline);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
color: var(--aa-aubergine);
}
.aa-summary-total strong {
font-family: var(--font-italic);
font-style: italic;
color: var(--aa-gold);
}
.aa-summary .aa-btn { margin-top: 12px; }
/* ── Slide 4: Membership ──────────────────────────────── */
.aa-page-membership {
padding: 22px 24px 26px;
}
.aa-mem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 14px;
}
.aa-mem-card {
background: #FFFFFF;
border: 1px solid var(--aa-hairline);
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.aa-mem-card.is-featured {
background: var(--aa-aubergine);
color: var(--aa-ivory);
border-color: var(--aa-aubergine);
}
.aa-mem-card.is-featured .aa-mem-name,
.aa-mem-card.is-featured .aa-mem-price { color: var(--aa-ivory); }
.aa-mem-card.is-featured .aa-mem-feat li { color: rgba(250,246,240,0.78); border-bottom-color: rgba(250,246,240,0.10); }
.aa-mem-card.is-featured .aa-mem-tag {
background: var(--aa-gold);
color: #FFFFFF;
position: absolute;
top: -10px;
left: 14px;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 8px;
}
.aa-mem-name {
font-family: var(--font-italic);
font-style: italic;
font-size: 1.05rem;
color: var(--aa-aubergine);
line-height: 1;
}
.aa-mem-price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.3rem;
color: var(--aa-aubergine);
letter-spacing: -0.025em;
}
.aa-mem-price small {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--aa-aubergine-soft);
font-weight: 400;
letter-spacing: 0.04em;
margin-left: 4px;
}
.aa-mem-card.is-featured .aa-mem-price small { color: var(--aa-gold-soft); }
.aa-mem-feat {
list-style: none;
padding: 0; margin: 0;
}
.aa-mem-feat li {
font-family: var(--font-body);
font-size: 0.74rem;
line-height: 1.45;
color: var(--aa-aubergine-soft);
padding: 6px 0 6px 14px;
border-bottom: 1px solid var(--aa-hairline);
position: relative;
}
.aa-mem-feat li:last-child { border-bottom: 0; }
.aa-mem-feat li::before {
content: '';
position: absolute;
left: 0; top: 14px;
width: 8px; height: 1px;
background: var(--aa-gold);
}
.aa-mem-card .aa-btn { margin-top: auto; }
/* ── Slide 5: Contact ─────────────────────────────────── */
.aa-page-contact {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 24px;
padding: 22px 24px;
}
.aa-team {
display: grid;
gap: 8px;
}
.aa-team-card {
background: #FFFFFF;
border: 1px solid var(--aa-hairline);
padding: 12px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 10px;
align-items: center;
}
.aa-team-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background:
linear-gradient(135deg, var(--aa-blush) 0%, var(--aa-gold-soft) 100%);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-italic);
font-style: italic;
color: var(--aa-aubergine);
font-size: 0.92rem;
}
.aa-team-info strong {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: -0.015em;
color: var(--aa-aubergine);
}
.aa-team-info span {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aa-aubergine-soft);
}
.aa-form {
background: #FFFFFF;
border: 1px solid var(--aa-hairline);
padding: 18px;
}
.aa-form h3 {
font-family: var(--font-italic);
font-style: italic;
font-size: 1.15rem;
color: var(--aa-aubergine);
margin: 0 0 12px;
line-height: 1;
}
.aa-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.aa-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.aa-field label {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aa-aubergine-soft);
}
.aa-input {
font-family: var(--font-body);
font-size: 0.74rem;
background: var(--aa-ivory);
border: 1px solid var(--aa-hairline);
padding: 8px 10px;
color: var(--aa-aubergine);
}
.aa-textarea {
min-height: 50px;
resize: vertical;
}
.aa-form .aa-btn-gold {
margin-top: 8px;
width: 100%;
text-align: center;
}
.aa-hours {
margin-top: 14px;
background: var(--aa-cream);
border: 1px solid var(--aa-hairline);
padding: 12px;
display: grid;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--aa-aubergine-soft);
}
.aa-hours strong {
color: var(--aa-aubergine);
font-family: var(--font-body);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 0.76rem;
display: block;
margin-bottom: 4px;
}
/* ========================================================================
V2.2 RESPONSIVE
======================================================================== */
@media (max-width: 1024px) {
.hero-mockup {
max-width: 100%;
justify-self: stretch;
}
.hero-mockup-phone {
left: -16px;
bottom: -20px;
width: 32%;
}
}
@media (max-width: 768px) {
/* Hide the entire hero mockup on phones — keeps the hero focused on copy */
.hero-mockup { display: none; }
/* Aria mobile adjustments */
.demo-section .aa-page,
.demo-modal-body .aa-page { padding: 16px 14px; }
.aa-hero { grid-template-columns: 1fr; gap: 14px; padding: 12px 0 18px; }
.aa-hero-art { min-height: 110px; }
.aa-hero-h { font-size: clamp(1.2rem, 7vw, 1.6rem); max-width: none; }
.aa-tile-grid { grid-template-columns: repeat(2, 1fr); padding: 14px 0; }
.aa-stat-strip { flex-wrap: wrap; gap: 10px; }
.aa-stat strong { font-size: 1rem; }
.aa-page-treatments { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px; }
.aa-page-booking { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px; }
.aa-page-membership { padding: 16px 14px; }
.aa-mem-grid { grid-template-columns: 1fr; }
.aa-mem-card { padding: 14px; }
.aa-page-contact { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px; }
.aa-form-row { grid-template-columns: 1fr; }
.aa-nav-links { display: none; }
.aa-nav { padding: 4px 0 12px; margin-bottom: 12px; }
}
/* ========================================================================
V2.3 REFINEMENT LAYER
────────────────────────────────────────────────────────────────────────
Two focused fixes:
· Checkbox / radio inputs now render natively (fixes broken visual
check state on the contact form caused by the broad
.contact-form input rule applying padding/background/border to
checkboxes).
· Chat assistant: new Mia avatar + wave chip + larger panel.
────────────────────────────────────────────────────────────────────────
Why checkboxes were broken
──────────────────────────
The earlier broad rule
.contact-form input { padding/background/border !important }
applied to every input including type="checkbox". The narrow override
only reset width, leaving the bg+border interfering with the native
check indicator. Users would tap, the underlying state would change,
but the visual didn't update — so it felt broken.
── This layer fixes it for every form context on the site. */
/* ── 1. Checkbox + radio reset (every form context) ───────────────── */
.contact-form input[type="checkbox"],
.contact-form input[type="radio"],
.pf-field input[type="checkbox"],
.pf-field input[type="radio"],
.cb-label input[type="checkbox"],
.consent-label input[type="checkbox"],
.pf-consent input[type="checkbox"] {
/* Reset all interfering box-model & cosmetic styles */
width: 18px !important;
height: 18px !important;
min-width: 18px;
min-height: 18px;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
/* Restore native rendering with brand-tinted check */
appearance: auto;
-webkit-appearance: auto;
accent-color: var(--coral);
cursor: pointer;
flex-shrink: 0;
/* Ensure the input itself catches the click cleanly */
pointer-events: auto;
position: relative;
z-index: 1;
}
/* Restore the consent checkbox top-margin nudge for vertical alignment */
.contact-form .consent-label input[type="checkbox"],
.pf-consent input[type="checkbox"] {
margin-top: 3px !important;
}
/* Make the wrapping labels behave as obvious tap targets */
.cb-label,
.consent-label,
.pf-consent {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(11,18,32,0.18);
}
.cb-label:focus-within,
.pf-consent:focus-within,
.consent-label:focus-within {
border-color: var(--ink) !important;
box-shadow: 0 0 0 3px rgba(11,18,32,0.18);
}
/* Mobile tap-target padding bump */
@media (max-width: 768px) {
.contact-form .cb-label {
padding: 12px 14px !important;
min-height: 48px;
}
.contact-form .consent-label,
.pf-consent {
padding: 14px !important;
}
}
/* Z-index defense: ensure the form interaction layer sits above
any fixed overlays that might collide with the consent area on
small viewports. */
.contact-form,
.package-form,
#supportForm {
position: relative;
z-index: 2;
}
/* Visible :checked feedback on the wrapping label (subtle confirmation) */
.cb-label:has(input[type="checkbox"]:checked) {
border-color: var(--ink) !important;
background: rgba(31,41,55,0.04) !important;
}
.cb-label:has(input[type="checkbox"]:checked) {
/* Same rule kept simple — modern browsers support :has(); older
fallback: still functional via the native :checked indicator. */
}
/* ── 2. CHAT ASSISTANT — Mia avatar + wave + bigger panel ─────────── */
/* Larger, more comfortable chat panel */
.chat-panel {
width: 420px !important;
max-height: min(620px, calc(100dvh - 120px)) !important;
}
.chat-header { padding: 18px !important; }
.chat-headline strong { font-size: 1.02rem !important; }
.chat-messages { padding: 22px !important; gap: 14px !important; }
.chat-msg { padding: 13px 15px !important; font-size: 0.95rem !important; line-height: 1.55 !important; }
.chat-quick-row {
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
margin-top: 12px !important;
}
.chat-quick {
padding: 9px 13px !important;
font-size: 0.74rem !important;
transition: border-color 0.2s ease, color 0.2s ease, transform 0.18s ease, background 0.2s ease;
}
.chat-quick:hover {
transform: translateY(-1px);
background: var(--bone) !important;
}
.chat-input-row { padding: 14px 16px !important; gap: 12px !important; }
.chat-input { padding: 11px 13px !important; font-size: 0.94rem !important; }
.chat-send { width: 40px !important; height: 40px !important; }
.chat-foot { padding: 12px 16px !important; font-size: 0.74rem !important; }
/* Replace the geometric speech-bubble glyph with a real avatar */
.chat-mascot {
padding: 16px 18px 16px 14px !important;
max-width: 280px !important;
gap: 12px !important;
align-items: flex-start;
}
.chat-mascot-glyph {
/* Hide the previous abstract glyph — superseded by .chat-mascot-avatar */
display: none !important;
}
.chat-mascot-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
background: transparent;
border-radius: 50%;
overflow: visible;
}
.chat-mascot-avatar img {
width: 48px;
height: 48px;
display: block;
border-radius: 50%;
box-shadow: 0 4px 12px -2px rgba(31,41,55,0.18);
}
/* Wave chip: small cream circle with 👋, rotates 3 times then settles */
.chat-mascot-wave {
position: absolute;
bottom: -4px;
right: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--paper);
border: 1.5px solid var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
transform-origin: 50% 90%;
box-shadow: 0 2px 6px rgba(31,41,55,0.18);
}
.chat-mascot.is-visible .chat-mascot-wave {
animation: chat-mascot-wave 1.4s ease-in-out 3;
}
@keyframes chat-mascot-wave {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-18deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
.chat-mascot.is-visible .chat-mascot-wave { animation: none; }
}
/* Greeting text — slightly more breathing room */
.chat-mascot-text {
font-size: 0.88rem !important;
line-height: 1.4 !important;
}
.chat-mascot-text strong {
font-size: 0.98rem !important;
margin-bottom: 2px !important;
}
/* Mobile: keep mascot tucked, slightly tighter */
@media (max-width: 768px) {
.chat-mascot {
max-width: 260px !important;
padding: 14px 16px 14px 12px !important;
}
.chat-mascot-avatar,
.chat-mascot-avatar img {
width: 44px !important;
height: 44px !important;
}
.chat-mascot-wave {
width: 20px;
height: 20px;
font-size: 11px;
}
.chat-panel {
width: auto !important;
}
}
/* ========================================================================
V2.4 REFINEMENT LAYER — Mobile pass + packages organization
────────────────────────────────────────────────────────────────────────
Targets the "compacted on iPhone Safari" feel by:
· Increasing horizontal + vertical breathing room
· Killing Safari auto-zoom on form focus (16px min input font-size)
· Adding env(safe-area-inset-*) for notch / home-indicator devices
· Raising touch-target sizes on key interactive elements
· Reorganizing packages strip rows so the plan tag no longer
overlaps the title on narrow viewports
────────────────────────────────────────────────────────────────────────
Tested viewport breakpoints:
· 390px (iPhone 14/15 Pro)
· 430px (iPhone 17 Pro Max)
· 480px (small Android landscape)
· 768px (tablet portrait)
· ≥ 1024px (desktop unaffected)
──────────────────────────────────────────────────────────────────────── */
/* ── 1. Iframe-safe overflow guard (defensive) ───────────────────── */
html, body { overflow-x: hidden; }
html, body { max-width: 100%; }
/* ── 2. Tablet (≤ 1024px) — gentle breathing room ────────────────── */
@media (max-width: 1024px) {
:root {
--pad-x: clamp(22px, 4vw, 32px);
--section-y: clamp(80px, 9vw, 110px);
--section-y-sm: clamp(56px, 7vw, 80px);
}
}
/* ── 3. Mobile (≤ 768px) — REWORKED breathing room ───────────────── */
@media (max-width: 768px) {
:root {
--pad-x: 22px; /* was 18px — content felt squeezed */
--section-y: clamp(72px, 11vw, 96px); /* was clamp(56,10vw,80) */
--section-y-sm: clamp(56px, 8vw, 72px);
}
/* Hero — give the headline real room above + below */
.hero {
padding: 96px 0 64px !important;
}
.hero-headline {
font-size: clamp(2.05rem, 8.6vw, 2.85rem) !important;
line-height: 1.05 !important;
}
.hero-sub {
font-size: 1.02rem !important;
line-height: 1.6 !important;
}
.hero-eyebrow {
font-size: 0.72rem !important;
gap: 10px;
margin-bottom: 22px;
}
.hero-meta {
font-size: 0.78rem !important; /* was 0.7rem (~11px) */
gap: 10px 18px;
line-height: 1.45;
}
/* Section sub copy slightly more readable */
.section-sub {
font-size: 1rem !important;
line-height: 1.6;
}
/* Eyebrow labels site-wide — bump for legibility */
.eyebrow {
font-size: 0.72rem !important;
letter-spacing: 0.12em;
}
/* CTA section big headline — refine wrap target */
.cta-section .section-headline {
font-size: clamp(2.4rem, 11vw, 3.6rem) !important;
line-height: 0.98 !important;
}
.cta-section .cta-note {
font-size: 0.74rem !important;
line-height: 1.45;
}
/* Footer — comfortable spacing + safe-area bottom */
.footer {
padding: 64px 0 max(40px, env(safe-area-inset-bottom)) !important;
}
.footer-tagline {
font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
line-height: 1.15;
}
.footer-desc { font-size: 0.96rem !important; line-height: 1.55; }
.footer-bottom {
font-size: 0.74rem !important;
gap: 16px;
}
/* Type marquee + industries — less cramped */
.type-marquee { padding: 16px 0; }
.type-marquee-item {
font-size: 1rem !important;
padding: 0 22px;
gap: 22px;
}
.industries-marquee { padding: 44px 0; }
.industries-item {
font-size: clamp(1.7rem, 6.4vw, 2.4rem) !important;
padding: 0 26px;
}
/* Service rows — more comfortable */
.svc-row {
grid-template-columns: 44px 1fr 32px !important;
padding: 22px 0 !important;
gap: 16px !important;
}
.svc-num { font-size: 0.78rem !important; }
.svc-body h3 { font-size: 1.15rem !important; }
.svc-body p { font-size: 0.94rem !important; line-height: 1.55; }
/* How / Why row breathing */
.how-section .how-step {
grid-template-columns: 44px 1fr !important;
padding: 22px 0 !important;
gap: 16px !important;
}
.why-section .why-card {
grid-template-columns: 44px 1fr !important;
padding: 22px 0 !important;
gap: 16px !important;
}
/* FAQ — tap-friendly, more readable */
.faq-section .faq-q {
font-size: 1.05rem !important;
padding: 20px 0 !important;
min-height: 56px;
}
.faq-section .faq-a p {
font-size: 0.96rem !important;
line-height: 1.65;
}
/* Inbox section — readable on mobile (handled by canonical block in section 14) */
/* Demo showcase — internal Aria slides need more padding */
.demo-section .aa-page,
.demo-modal-body .aa-page { padding: 20px 18px !important; }
/* Buttons — comfortable touch targets, not huge */
.btn { min-height: 48px; padding: 14px 22px; }
.btn-lg { min-height: 52px; }
.pf-submit { min-height: 48px; padding: 14px 24px; }
/* Form inputs — 16px MIN to prevent Safari auto-zoom on focus */
.contact-form input,
.contact-form select,
.contact-form textarea,
.pf-field input,
.pf-field select,
.pf-field textarea,
.aa-input,
.chat-input {
font-size: 16px !important;
}
/* Extra: prevent iOS from styling selects with native chrome jankily */
.contact-form select,
.pf-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231F2937' d='M6 8 L0 0 H12 Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 10px;
padding-right: 36px !important;
}
/* Container padding flowing through */
.container { padding: 0 var(--pad-x) !important; }
/* Chat widget — respect home-indicator safe area */
.chat-widget {
bottom: max(16px, env(safe-area-inset-bottom)) !important;
right: max(16px, env(safe-area-inset-right)) !important;
left: auto !important;
}
.chat-mascot {
bottom: max(86px, calc(70px + env(safe-area-inset-bottom))) !important;
right: max(16px, env(safe-area-inset-right)) !important;
}
.chat-toggle {
width: 58px !important;
height: 58px !important;
}
}
/* ── 4. Small phones (≤ 480px) — hold breathing, refine sizes ────── */
@media (max-width: 480px) {
:root {
--pad-x: 20px; /* slightly tighter than 768 to keep more text per line */
--section-y: clamp(64px, 11vw, 80px);
}
.hero { padding: 88px 0 56px !important; }
.hero-headline {
font-size: clamp(1.95rem, 9vw, 2.4rem) !important;
}
.hero-sub { font-size: 1rem !important; }
.hero-meta {
font-size: 0.74rem !important;
gap: 8px 14px;
}
.cta-section .section-headline {
font-size: clamp(2.2rem, 12vw, 3rem) !important;
}
.footer-tagline { font-size: 1.4rem !important; }
}
/* ── 5. PACKAGES — improved organization (mobile + small mobile) ── */
@media (max-width: 768px) {
/* Featured panel: more breathing, better typography */
.pkg-featured {
padding: 28px 24px !important;
gap: 22px !important;
}
.pkg-featured-tag {
font-size: 0.7rem !important;
margin-bottom: 14px !important;
}
.pkg-featured-name {
font-size: clamp(1.6rem, 7vw, 2.05rem) !important;
line-height: 1.05 !important;
margin-bottom: 14px !important;
}
.pkg-featured-tag-line {
font-size: 1rem !important;
line-height: 1.55;
margin-bottom: 22px !important;
}
.pkg-featured-price {
font-size: 1.45rem !important;
line-height: 1.2;
}
.pkg-featured-price-sub {
font-size: 0.72rem !important;
margin-bottom: 22px !important;
}
.pkg-featured-cta {
width: 100% !important;
justify-content: center !important;
min-height: 50px;
}
.pkg-featured-list { margin-top: 4px; }
.pkg-featured-list li {
font-size: 0.96rem !important;
line-height: 1.5;
padding: 12px 0 12px 22px !important;
}
/* Strip rows — plan tag flows naturally at top, not absolute. */
.pkg-strip-row {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 24px 22px !important;
position: relative !important;
background: var(--paper);
border: 1px solid var(--hairline) !important;
border-bottom: 1px solid var(--hairline) !important;
margin-bottom: 12px;
}
.pkg-strip-row:last-of-type { margin-bottom: 0; }
.pkg-strip-row .pkg-strip-tag {
position: static !important;
top: auto !important;
right: auto !important;
font-size: 0.7rem !important;
letter-spacing: 0.12em;
}
.pkg-strip-row .pkg-strip-name {
font-size: 1.2rem !important;
line-height: 1.15;
}
.pkg-strip-row .pkg-strip-tagline {
font-size: 0.94rem !important;
line-height: 1.5;
}
.pkg-strip-row .pkg-strip-price {
font-size: 1.15rem !important;
line-height: 1.25;
}
.pkg-strip-row .pkg-strip-price small {
font-size: 0.74rem !important;
margin-left: 6px;
}
/* Strip CTA: pill-style button on mobile (was underline link) */
.pkg-strip-row .pkg-strip-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 18px !important;
background: var(--accent);
color: var(--paper) !important;
border: 0 !important;
border-bottom: 0 !important;
border-radius: 100px;
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
text-transform: none;
letter-spacing: 0;
margin-top: 6px !important;
align-self: flex-start;
min-height: 44px;
transition: background 0.2s ease, transform 0.18s ease;
}
.pkg-strip-row .pkg-strip-cta:hover {
background: var(--accent-hover) !important;
color: var(--paper) !important;
border-color: transparent !important;
transform: translateY(-1px);
}
/* One-time row keeps its bone tint to read as alternative */
.pkg-strip-row.is-onetime {
background: var(--bone) !important;
padding-left: 22px !important;
padding-right: 22px !important;
}
.pkg-strip-row.is-onetime .pkg-strip-cta {
background: var(--accent);
color: var(--accent-ink) !important;
}
.pkg-strip-row.is-onetime .pkg-strip-cta:hover {
background: var(--accent-hover) !important;
}
/* Strip wrapper: remove the top border (each card has its own now) */
.pkg-strip { border-top: 0 !important; }
/* Fineprint pill: friendlier line-height on mobile */
.pkg-fineprint {
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-size: 0.74rem;
margin-top: 24px;
}
.pkg-fineprint-item { line-height: 1.45; }
}
/* ── 6. Packages — extra small phones tweak ────────────────────── */
@media (max-width: 430px) {
.pkg-featured {
padding: 24px 20px !important;
}
.pkg-featured-name {
font-size: clamp(1.5rem, 8vw, 1.9rem) !important;
}
.pkg-featured-price {
font-size: 1.35rem !important;
}
.pkg-strip-row {
padding: 22px 20px !important;
}
.pkg-strip-row .pkg-strip-name {
font-size: 1.1rem !important;
}
}
/* ── 7. Package detail pages — mobile breathing ──────────────────── */
@media (max-width: 768px) {
.pkg-page-hero {
padding: 96px 0 48px !important;
}
.pkg-page-headline {
font-size: clamp(2rem, 9vw, 2.8rem) !important;
line-height: 1.02 !important;
}
.pkg-page-tag {
font-size: 1.02rem !important;
line-height: 1.55;
}
.pkg-page-pricing {
padding: 22px 20px !important;
gap: 14px !important;
}
.pkg-page-price {
font-size: clamp(1.6rem, 6vw, 2.05rem) !important;
}
.pkg-page-pricing-cta {
width: 100% !important;
justify-content: center !important;
min-height: 50px;
}
.pkg-page-meta {
gap: 8px 18px;
padding-top: 22px !important;
font-size: 0.74rem !important;
}
.pkg-section { padding: 56px 0 !important; }
.pkg-grid-2 h2,
.pkg-inquiry-intro h2 {
font-size: clamp(1.6rem, 6vw, 2rem) !important;
line-height: 1.1 !important;
}
.pkg-grid-2 p { font-size: 1rem !important; line-height: 1.65; }
.pkg-included-list li {
font-size: 1rem !important;
line-height: 1.55;
padding: 18px 0 !important;
}
.pkg-faq h3 { font-size: 1.05rem !important; }
.pkg-faq p { font-size: 0.96rem !important; line-height: 1.6; }
.package-form { padding: 24px 22px !important; }
.pf-row { gap: 14px !important; }
.pf-group + .pf-group { margin-top: 20px !important; }
.pkg-page-cta-strip { padding: 56px 0 !important; }
.pkg-page-cta-strip h3 {
font-size: clamp(1.5rem, 7vw, 2rem) !important;
line-height: 1.1 !important;
}
}
/* ── 8. Contact + Support page — mobile breathing ────────────────── */
@media (max-width: 768px) {
.contact-hero { padding: 96px 0 40px !important; }
.contact-hero-headline {
font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
line-height: 1.05 !important;
}
.contact-hero-sub { font-size: 1rem !important; }
.contact-hero-meta {
font-size: 0.78rem !important;
gap: 8px 18px;
}
.contact-form { padding: 24px 22px !important; }
.contact-form .form-row,
.contact-form .form-group { margin-bottom: 16px !important; }
.contact-form .checkbox-row { gap: 10px !important; }
.contact-form .cb-label {
padding: 14px 16px !important;
font-size: 0.94rem !important;
}
.support-hero { padding: 96px 0 40px !important; }
.support-hero-headline {
font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
}
.support-hero p { font-size: 1rem !important; }
.trust-strip {
grid-template-columns: 1fr 1fr !important;
gap: 18px !important;
}
}
/* ── 9. Legal pages — mobile breathing ───────────────────────────── */
@media (max-width: 768px) {
.legal-hero { padding: 96px 0 32px !important; }
.legal-hero h1 {
font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
line-height: 1.05 !important;
}
.legal-hero p.legal-intro {
font-size: 1rem !important;
line-height: 1.6;
}
.legal-template-note {
font-size: 0.92rem !important;
line-height: 1.5;
padding: 16px !important;
}
.legal-section { padding: 26px 0 !important; }
.legal-section h2 {
font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
gap: 10px;
}
.legal-section h2 .legal-num { font-size: 0.78rem !important; }
.legal-section p,
.legal-section li { font-size: 1rem !important; line-height: 1.7; }
}
/* ── 10. Demo modal — mobile sheet behavior ──────────────────────── */
@media (max-width: 768px) {
.demo-modal-content {
max-height: 100dvh;
height: 100dvh;
}
.demo-modal-body {
max-height: calc(100dvh - 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ── 11. Touch device default — disable hover translateY effects
that can leave elements stuck "lifted" on tap then leave ─────── */
@media (hover: none) and (pointer: coarse) {
.btn:hover { transform: none !important; }
.pkg-strip-row .pkg-strip-cta:hover { transform: none !important; }
.service-card:hover { transform: none !important; }
.why-card:hover { transform: none !important; }
}
/* ────────────────────────────────────────────────────────────────────────
PROOF CAROUSEL · Stellar Auto Detail (premium dark glossy)
──────────────────────────────────────────────────────────────────────── */
.sd-page {
background: linear-gradient(180deg, #0E0F11 0%, #16181C 100%);
color: #F0EEE8;
font-family: var(--font-body);
padding: 26px 28px 28px;
min-height: 580px;
position: relative;
}
.sd-page::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(600px 300px at 80% 0%, rgba(255,107,69,0.18), transparent 60%);
pointer-events: none;
}
.sd-nav {
display: flex; align-items: center; gap: 32px;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 16px; margin-bottom: 28px;
position: relative;
}
.sd-logo { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 14px; }
.sd-logo-dot { color: #FF6B45; }
.sd-nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 12px; color: rgba(240,238,232,0.68); list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.sd-cta {
background: #FF6B45; color: #0E0F11; border: 0;
padding: 10px 16px; border-radius: 999px;
font-family: var(--font-body); font-weight: 600; font-size: 12px;
cursor: pointer;
}
.sd-cta-ghost { background: transparent; color: #F0EEE8; border: 1px solid rgba(255,255,255,0.18); }
.sd-hero { position: relative; padding: 40px 0 36px; max-width: 80%; }
.sd-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: #FF6B45; text-transform: uppercase; }
.sd-h { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 0.98; margin: 14px 0 12px; letter-spacing: -0.02em; color: #F0EEE8; }
.sd-h em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: #FF6B45; }
.sd-sub { color: rgba(240,238,232,0.72); margin-bottom: 22px; max-width: 50ch; }
.sd-hero-ctas { display: flex; gap: 12px; }
.sd-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.sd-tier {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 18px 18px 20px;
position: relative;
display: grid; gap: 6px;
}
.sd-tier strong { font-family: var(--font-display); font-size: 18px; color: #F0EEE8; }
.sd-tier > span:not(.sd-tier-tag) { font-family: var(--font-mono); font-size: 13px; color: #FF6B45; }
.sd-tier em { font-style: normal; font-size: 12px; color: rgba(240,238,232,0.55); }
.sd-tier-feat { background: rgba(255,107,69,0.12); border-color: rgba(255,107,69,0.40); }
.sd-tier-tag { position: absolute; top: -10px; right: 14px; background: #FF6B45; color: #0E0F11; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 999px; }
.sd-stat-strip {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px;
}
.sd-stat-strip > div { display: grid; gap: 2px; }
.sd-stat-strip strong { font-family: var(--font-display); font-size: 22px; color: #F0EEE8; }
.sd-stat-strip span { font-family: var(--font-mono); font-size: 11px; color: rgba(240,238,232,0.55); }
/* ────────────────────────────────────────────────────────────────────────
PROOF CAROUSEL · Bedrock Carpentry (utility / contractor)
──────────────────────────────────────────────────────────────────────── */
.bc-page {
background: #F8F6F1;
color: #1A1B1E;
font-family: var(--font-body);
padding: 24px 26px 28px;
min-height: 580px;
display: grid; gap: 22px;
}
.bc-nav { display: flex; align-items: center; gap: 28px; padding-bottom: 14px; border-bottom: 1px solid #DAD1BE; }
.bc-logo { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; font-size: 18px; color: #1A1B1E; }
.bc-logo em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: #C24A1F; }
.bc-nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 13px; color: #5C5347; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.bc-cta {
background: #1A1B1E; color: #F8F6F1; border: 0;
padding: 10px 16px; border-radius: 6px;
font-family: var(--font-body); font-weight: 600; font-size: 13px;
cursor: pointer;
}
.bc-cta-lg { padding: 14px 22px; font-size: 14px; }
.bc-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: end; padding-top: 8px; }
.bc-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #C24A1F; text-transform: uppercase; margin-bottom: 12px; }
.bc-h { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 0.98; margin-bottom: 10px; letter-spacing: -0.02em; color: #1A1B1E; }
.bc-h em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: #C24A1F; }
.bc-sub { color: #5C5347; max-width: 42ch; margin-bottom: 16px; }
.bc-card { background: #1A1B1E; color: #F8F6F1; border-radius: 10px; padding: 16px; display: grid; gap: 4px; }
.bc-card-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: #C24A1F; text-transform: uppercase; }
.bc-card strong { font-family: var(--font-display); font-size: 18px; color: #F8F6F1; }
.bc-card > span { color: rgba(248,246,241,0.72); font-size: 13px; }
.bc-card-meta { font-family: var(--font-mono); font-size: 11px; color: rgba(248,246,241,0.5); margin-top: 6px; }
.bc-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bc-svc { background: #fff; border: 1px solid #DAD1BE; border-radius: 8px; padding: 16px; display: grid; gap: 6px; }
.bc-svc-num { font-family: var(--font-mono); font-size: 11px; color: #C24A1F; letter-spacing: 0.14em; }
.bc-svc strong { font-family: var(--font-display); font-size: 16px; color: #1A1B1E; }
.bc-svc em { font-style: normal; font-size: 12px; color: #5C5347; }
.bc-form { background: #1A1B1E; color: #F8F6F1; padding: 18px; border-radius: 10px; display: grid; gap: 10px; }
.bc-form > strong { font-family: var(--font-display); font-size: 16px; color: #F8F6F1; }
.bc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); padding: 9px 12px; border-radius: 6px; font-size: 12px; color: rgba(248,246,241,0.55); }
/* ────────────────────────────────────────────────────────────────────────
AI ASSISTANT PREVIEW
──────────────────────────────────────────────────────────────────────── */
.ai-section { background: var(--bg); padding: var(--section-y) 0; }
.ai-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ai-copy .section-headline { max-width: 18ch; }
.ai-checks { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 10px; }
.ai-checks li { display: flex; gap: 12px; align-items: baseline; color: var(--ink); font-size: 15px; }
.ai-check { color: var(--accent); font-weight: 600; }
.ai-mock {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 16px;
box-shadow: var(--shadow-lg);
padding: 18px;
display: grid; gap: 12px;
}
.ai-mock-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.ai-mock-avatar {
width: 36px; height: 36px; border-radius: 999px;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
display: inline-grid; place-items: center;
position: relative;
font-size: 0;
color: transparent;
}
.ai-mock-avatar::after { content: "M"; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 16px; position: absolute; }
.ai-mock-head strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.ai-mock-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.ai-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); display: inline-block; box-shadow: 0 0 0 4px rgba(11,18,32,0.10); }
.ai-mock-body { display: grid; gap: 10px; }
.ai-msg {
max-width: 80%;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.45;
}
.ai-msg-bot { background: var(--surface-alt); color: var(--ink); border-bottom-left-radius: 4px; align-self: start; }
.ai-msg-user { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; align-self: end; }
.ai-chip {
margin-top: 10px;
display: inline-flex;
background: var(--ink); color: var(--surface);
border: 0; padding: 8px 12px; border-radius: 999px;
font-family: var(--font-body); font-size: 12px;
cursor: pointer;
}
.ai-typing { display: inline-flex; gap: 4px; padding: 12px 14px; align-self: start; }
.ai-typing span {
width: 6px; height: 6px; background: var(--ink-3); border-radius: 999px;
animation: aiTypingBounce 1.4s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: 0.16s; }
.ai-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes aiTypingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 768px) {
.ai-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ai-typing span { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
SERVICES — icon cards (replaces svc-list)
──────────────────────────────────────────────────────────────────────── */
.svc-list { display: none !important; } /* legacy list hidden */
.svc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: clamp(36px, 5vw, 64px);
}
.svc-card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 24px 22px 26px;
box-shadow: var(--shadow-sm);
transition: 220ms cubic-bezier(0.2,0.7,0,1);
}
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.svc-card-icon {
display: inline-grid; place-items: center;
width: 44px; height: 44px;
background: var(--surface-alt);
color: var(--accent);
border-radius: 10px;
margin-bottom: 18px;
}
.svc-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.svc-card p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .svc-grid { grid-template-columns: 1fr; } }
/* ────────────────────────────────────────────────────────────────────────
PACKAGES — featured + strip (light editorial v3)
──────────────────────────────────────────────────────────────────────── */
.pkg-featured {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
box-shadow: var(--shadow-md);
padding: clamp(28px, 4vw, 48px);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: start;
margin-top: clamp(36px, 5vw, 64px);
position: relative;
overflow: hidden;
}
.pkg-featured::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--accent));
}
.pkg-featured-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--pop); text-transform: uppercase; }
.pkg-featured-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3.5vw, 3rem); color: var(--ink); margin: 14px 0 14px; line-height: 1; }
.pkg-featured-name .italic-accent { color: var(--accent); }
.pkg-featured-tag-line { color: var(--ink-2); margin-bottom: 18px; max-width: 42ch; }
.pkg-featured-price { font-family: var(--font-display); font-size: 28px; color: var(--ink); }
.pkg-featured-price-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); margin-top: 4px; margin-bottom: 18px; }
.pkg-featured-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent); color: var(--accent-ink);
border: 0;
padding: 14px 22px;
border-radius: 10px;
font-family: var(--font-body); font-weight: 600;
text-decoration: none;
transition: 200ms cubic-bezier(0.2,0.7,0,1);
}
.pkg-featured-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.pkg-featured-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.pkg-featured-list li { padding-left: 24px; position: relative; color: var(--ink); font-size: 14px; }
.pkg-featured-list li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: var(--accent); font-weight: 600;
}
@media (max-width: 900px) { .pkg-featured { grid-template-columns: 1fr; } }
.pkg-strip {
margin-top: 24px;
display: grid;
gap: 10px;
}
.pkg-strip-row {
display: grid;
grid-template-columns: auto 2.4fr 1.6fr 1fr auto;
align-items: center;
gap: 18px;
background: var(--surface);
border: 1px solid var(--hairline);
border-left: 4px solid var(--accent);
border-radius: 12px;
padding: 18px 22px;
box-shadow: var(--shadow-sm);
transition: 220ms cubic-bezier(0.2,0.7,0,1);
}
.pkg-strip-row:hover { box-shadow: var(--shadow-md); border-color: var(--hairline); border-left-color: var(--accent); transform: translateY(-1px); }
.pkg-strip-row.is-onetime { border-left-color: var(--gold); }
.pkg-strip-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-2); background: var(--surface-alt); border: 1px solid var(--hairline); padding: 6px 10px; border-radius: 999px; text-transform: uppercase; }
.pkg-strip-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.pkg-strip-tagline { color: var(--ink-2); font-size: 13px; line-height: 1.45; margin-top: 4px; }
.pkg-strip-feature { font-size: 13px; color: var(--ink-2); }
.pkg-strip-feature span { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }
.pkg-strip-price { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.pkg-strip-price small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 6px; font-weight: 400; }
.pkg-strip-cta {
color: var(--accent);
font-family: var(--font-body); font-weight: 600; font-size: 13px;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: 200ms;
}
.pkg-strip-cta:hover { border-bottom-color: var(--accent); }
.pkg-fineprint {
margin-top: 26px; display: flex; flex-wrap: wrap; gap: 24px;
color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}
.pkg-fineprint-item::before { content: "·\00a0"; color: var(--pop); }
.pkg-fineprint-item:first-child::before { display: none; }
@media (max-width: 900px) {
.pkg-strip-row { grid-template-columns: 1fr; gap: 8px; }
.pkg-strip-row > div, .pkg-strip-row > a { justify-self: start; }
}
/* ────────────────────────────────────────────────────────────────────────
PROCESS / HOW IT WORKS — compact chips
──────────────────────────────────────────────────────────────────────── */
.how-section { background: var(--surface-alt); padding: var(--section-y) 0; }
.how-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: clamp(36px, 5vw, 64px);
}
.how-step {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 22px 22px 24px;
box-shadow: var(--shadow-sm);
display: grid; gap: 10px;
}
.how-step-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 56px;
line-height: 1;
color: var(--pop);
letter-spacing: -0.02em;
}
.how-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.step-badge { font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: rgba(11,18,32,0.10); padding: 3px 8px; border-radius: 999px; letter-spacing: 0.12em; text-transform: uppercase; }
.how-step-desc { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .how-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .how-steps { grid-template-columns: 1fr; } }
/* ────────────────────────────────────────────────────────────────────────
INDUSTRIES MARQUEE — light editorial
──────────────────────────────────────────────────────────────────────── */
.brands-section { background: var(--bg); padding: clamp(36px, 5vw, 64px) 0; }
.industries-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.industries-track {
display: flex; gap: 56px;
white-space: nowrap;
animation: marqueeRoll 40s linear infinite;
list-style: none; padding: 0; margin: 0;
}
.industries-track:hover { animation-play-state: paused; }
.industries-item {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: -0.02em;
color: var(--accent);
}
.industries-item.is-italic {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
color: var(--pop);
}
@keyframes marqueeRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.industries-track { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
STAT TILES (replaces why-cards)
──────────────────────────────────────────────────────────────────────── */
.why-grid, .why-card, .why-icon { display: none !important; }
.why-layout { display: contents; } /* legacy wrapper neutralized */
.why-section { background: var(--bg); padding: var(--section-y) 0; }
.stat-grid {
margin-top: clamp(36px, 5vw, 64px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.stat-tile {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 28px);
box-shadow: var(--shadow-sm);
display: grid; gap: 12px;
align-content: end;
min-height: 200px;
overflow: hidden;
transition: 240ms cubic-bezier(0.2,0.7,0,1);
}
.stat-tile::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
border-radius: 14px 14px 0 0;
background: var(--accent);
}
.stat-grid > .stat-tile:nth-child(1)::before { background: var(--accent); }
.stat-grid > .stat-tile:nth-child(2)::before { background: var(--gold); }
.stat-grid > .stat-tile:nth-child(3)::before { background: var(--ink); }
.stat-grid > .stat-tile:nth-child(4)::before { background: var(--pop); }
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-num {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(48px, 6vw, 96px);
line-height: 0.95;
color: var(--ink);
letter-spacing: -0.02em;
display: flex; align-items: baseline; gap: 8px;
}
.stat-unit { font-family: var(--font-italic); font-style: italic; font-size: 0.45em; color: var(--gold); font-weight: 400; }
.stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-2); text-transform: uppercase; }
[data-stagger] > .fade-up { transition-delay: 0ms; }
[data-stagger] > .fade-up:nth-child(2) { transition-delay: 100ms; }
[data-stagger] > .fade-up:nth-child(3) { transition-delay: 200ms; }
[data-stagger] > .fade-up:nth-child(4) { transition-delay: 300ms; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
/* ────────────────────────────────────────────────────────────────────────
FAQ — trimmed + light editorial
──────────────────────────────────────────────────────────────────────── */
.faq-section { background: var(--surface-alt); padding: var(--section-y) 0; }
.faq-list { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
width: 100%;
background: transparent; border: 0;
text-align: left;
padding: 22px 0;
display: flex; justify-content: space-between; align-items: center; gap: 24px;
font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.4vw, 19px);
color: var(--ink);
cursor: pointer;
}
.faq-toggle {
font-family: var(--font-mono);
color: var(--pop);
font-size: 22px;
line-height: 1;
transition: transform 220ms cubic-bezier(0.2,0.7,0,1);
}
.faq-q[aria-expanded="true"] .faq-toggle { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 280ms cubic-bezier(0.2,0.7,0,1); }
.faq-q[aria-expanded="true"] + .faq-a { max-height: 320px; }
.faq-a p { color: var(--ink-2); padding-bottom: 22px; max-width: 70ch; }
/* ────────────────────────────────────────────────────────────────────────
FINAL CTA — light editorial (replaces dark version)
──────────────────────────────────────────────────────────────────────── */
.cta-section {
background: var(--surface-alt);
color: var(--ink);
padding: clamp(80px, 10vw, 140px) 0;
text-align: center;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.cta-section .eyebrow { color: var(--ink-3); justify-content: center; display: inline-flex; gap: 12px; align-items: baseline; }
.cta-section .eyebrow-num { color: var(--pop); }
.cta-h {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(56px, 9vw, 144px);
line-height: 0.95;
letter-spacing: -0.03em;
margin-top: 18px;
color: var(--ink);
}
.cta-h .dot { color: var(--pop); animation: ctaDotPulse 2.4s ease-in-out infinite; }
@keyframes ctaDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.cta-sub { color: var(--ink-2); max-width: 56ch; margin: 18px auto 28px; }
.cta-btns { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 22px; }
.cta-note { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
.cta-h .dot { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
FOOTER — light editorial
──────────────────────────────────────────────────────────────────────── */
.footer { background: var(--bg); color: var(--ink); padding: clamp(60px, 8vw, 120px) 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); padding-bottom: 36px; border-bottom: 1px solid var(--hairline); }
.footer-tagline { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); margin-top: 18px; line-height: 1.05; }
.footer-tagline .italic-accent { color: var(--gold); }
.footer-desc { color: var(--ink-2); margin-top: 14px; max-width: 46ch; }
.footer-location { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.footer-links-col h5, .footer-contact-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 14px; }
.footer-links-col a, .footer-contact-col a { color: var(--ink); transition: color 200ms; }
.footer-links-col a:hover, .footer-contact-col a:hover { color: var(--accent); }
.footer-links-col li { margin-bottom: 10px; }
.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-ico {
width: 36px; height: 36px;
display: inline-grid; place-items: center;
background: var(--surface); border: 1px solid var(--hairline);
border-radius: 999px; color: var(--ink-2);
transition: 200ms;
}
.social-ico:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px;
color: var(--ink-3);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 12px; }
}
/* ────────────────────────────────────────────────────────────────────────
PACKAGES v4 — premium editorial (replaces strip layout)
──────────────────────────────────────────────────────────────────────── */
.packages-section { background: var(--bg); padding: var(--section-y) 0 calc(var(--section-y) + 32px); }
/* === FEATURED STARTER === */
.pkg-featured {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 22px;
box-shadow: var(--shadow-md);
margin-top: clamp(36px, 5vw, 64px);
overflow: hidden;
position: relative;
}
.pkg-featured::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--ink));
}
.pkg-featured-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 22px clamp(28px, 4vw, 48px) 0;
}
.pkg-featured-tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--pop);
text-transform: uppercase;
}
.pkg-featured-badge {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-2);
background: var(--surface-alt);
border: 1px solid var(--hairline);
padding: 6px 12px;
border-radius: 999px;
text-transform: uppercase;
}
.pkg-featured-body {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(28px, 4vw, 64px);
padding: 22px clamp(28px, 4vw, 48px) clamp(28px, 4vw, 44px);
align-items: start;
}
.pkg-featured-name {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.2rem, 4vw, 3.4rem);
line-height: 0.98;
color: var(--ink);
margin: 6px 0 16px;
letter-spacing: -0.02em;
}
.pkg-featured-name .italic-accent { color: var(--ink); }
.pkg-featured-tagline {
color: var(--ink-2);
font-size: 15px;
line-height: 1.55;
max-width: 44ch;
margin-bottom: 24px;
}
.pkg-featured-list {
list-style: none; padding: 0; margin: 8px 0 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
}
.pkg-featured-list li {
padding-left: 22px;
position: relative;
color: var(--ink);
font-size: 14px;
line-height: 1.45;
}
.pkg-featured-list li::before {
content: "";
position: absolute; left: 0; top: 0.65em;
width: 14px; height: 1px;
background: var(--ink);
opacity: 0.55;
}
/* === PRICE BLOCK (shared) === */
.pkg-price-block {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
margin-bottom: 16px;
padding-top: 4px;
}
.pkg-price-amount {
font-family: var(--font-display);
font-weight: 600;
font-size: 30px;
line-height: 1;
color: var(--ink);
letter-spacing: -0.02em;
}
.pkg-price-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.10em;
color: var(--ink-2);
text-transform: uppercase;
}
.pkg-price-divider {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
color: var(--ink-3);
margin: 0 2px;
}
.pkg-price-block--featured {
margin-top: 8px; margin-bottom: 26px;
padding-bottom: 20px;
border-bottom: 1px solid var(--hairline);
gap: 6px 10px;
}
.pkg-price-block--featured .pkg-price-amount {
font-size: clamp(36px, 4vw, 48px);
}
.pkg-price-block--featured .pkg-price-meta {
font-size: 12px;
}
/* === SHARED CTAs === */
.pkg-card-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px;
border-radius: 10px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: 200ms cubic-bezier(0.2,0.7,0,1);
align-self: flex-start;
}
.pkg-card-cta:hover {
background: var(--ink);
color: var(--accent-ink);
transform: translateY(-1px);
border-bottom-color: var(--ink); /* override inherited 1px transparent */
}
.pkg-card-cta--filled {
background: var(--ink);
color: var(--accent-ink);
padding: 14px 22px;
font-size: 14px;
}
.pkg-card-cta--filled:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.pkg-card-cta--gold {
border-color: var(--gold);
color: #6F5530;
}
.pkg-card-cta--gold:hover {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
/* === GRID (4-up) === */
.pkg-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 14px;
}
.pkg-card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 16px;
padding: 24px 22px 22px;
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 12px;
transition: 220ms cubic-bezier(0.2,0.7,0,1);
}
.pkg-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--ink);
}
.pkg-card-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-2);
background: var(--surface-alt);
border: 1px solid var(--hairline);
padding: 5px 10px;
border-radius: 999px;
text-transform: uppercase;
align-self: flex-start;
}
.pkg-card-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
color: var(--ink);
line-height: 1.2;
margin-top: 4px;
letter-spacing: -0.01em;
}
.pkg-card-tagline {
color: var(--ink-2);
font-size: 13.5px;
line-height: 1.5;
min-height: calc(1.5em * 2);
}
.pkg-card-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 8px;
border-top: 1px solid var(--hairline);
padding-top: 14px;
margin-top: 4px;
}
.pkg-card-list li {
padding-left: 20px;
position: relative;
color: var(--ink);
font-size: 13px;
line-height: 1.45;
}
.pkg-card-list li::before {
content: "";
position: absolute; left: 0; top: 0.65em;
width: 12px; height: 1px;
background: var(--ink);
opacity: 0.45;
}
.pkg-card .pkg-card-cta {
margin-top: auto;
}
/* === ONE-TIME · CHAMPAGNE TREATMENT === */
.pkg-card.pkg-card--alt {
border-color: var(--gold);
background:
linear-gradient(180deg, rgba(168,134,82,0.06), transparent 38%),
var(--surface);
box-shadow: var(--shadow-sm), 0 0 0 1px var(--gold-soft) inset;
position: relative;
}
.pkg-card.pkg-card--alt::after {
content: "";
position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
background: var(--gold);
opacity: 0.85;
border-radius: 0 0 999px 999px;
}
.pkg-card.pkg-card--alt:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-gold), 0 0 0 1px var(--gold) inset;
border-color: var(--gold);
}
.pkg-card-tag.pkg-card-tag--gold {
color: #6F5530;
background: var(--gold-soft);
border-color: rgba(168,134,82,0.30);
}
/* === FINEPRINT === */
.pkg-fineprint {
margin-top: 28px;
display: flex; flex-wrap: wrap; gap: 22px;
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
}
.pkg-fineprint-item::before { content: "·\00a0"; color: var(--pop); }
.pkg-fineprint-item:first-child::before { display: none; }
/* === HIDE LEGACY V1+V3 STRIP === */
.pkg-strip,
.pkg-strip-row,
.pkg-strip-tag,
.pkg-strip-name,
.pkg-strip-tagline,
.pkg-strip-feature,
.pkg-strip-price { display: none !important; }
.pkg-strip-cta:not(.pkg-card-cta) { display: none !important; }
/* === RESPONSIVE === */
@media (max-width: 1100px) {
.pkg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.pkg-featured-body { grid-template-columns: 1fr; }
.pkg-featured-list { grid-template-columns: 1fr; }
.pkg-featured-name { font-size: clamp(1.9rem, 6vw, 2.6rem); }
}
@media (max-width: 540px) {
.pkg-grid { grid-template-columns: 1fr; gap: 12px; }
.pkg-featured-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.pkg-card-tagline { min-height: 0; }
.packages-section { padding-bottom: calc(var(--section-y) + 96px); } /* clear chat FAB */
}
/* ════════════════════════════════════════════════════════════════════════
PACKAGES v5 — pearl + emerald + aurum, layered & premium
.pkg-v5 selector boosts specificity over all legacy .pkg-* rules.
═══════════════════════════════════════════════════════════════════════════ */
.packages-section.pkg-v5 {
background: var(--bg) !important;
padding: clamp(80px, 9vw, 140px) 0 calc(var(--section-y) + 32px) !important;
position: relative;
overflow: hidden;
}
.packages-section.pkg-v5 .pkg-v5-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 480px at 18% 12%, rgba(14,122,101,0.07), transparent 60%),
radial-gradient(700px 420px at 82% 92%, rgba(168,134,82,0.07), transparent 60%);
z-index: 0;
}
.packages-section.pkg-v5 > .container { position: relative; z-index: 1; }
.pkg-v5 .pkg-ornament {
display: flex; align-items: center; justify-content: center; gap: 18px;
margin: 28px auto 36px;
max-width: 480px;
color: var(--gold);
}
.pkg-v5 .pkg-ornament-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.pkg-v5 .pkg-ornament-mark { font-size: 18px; line-height: 1; opacity: 0.85; }
/* === HERO STARTER CARD === */
.pkg-v5 .pkg-hero {
position: relative;
background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 26px !important;
box-shadow: var(--shadow-lg) !important;
margin: 0 auto;
overflow: hidden;
isolation: isolate;
color: var(--ink);
}
.pkg-v5 .pkg-hero::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 60%, var(--accent) 100%);
z-index: 2;
}
.pkg-v5 .pkg-hero-glow {
position: absolute;
width: 540px; height: 540px;
top: -180px; right: -180px;
background: radial-gradient(closest-side, rgba(14,122,101,0.10), transparent 70%);
pointer-events: none;
z-index: 0;
}
.pkg-v5 .pkg-hero-head {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding: 26px clamp(28px, 4vw, 48px) 0;
}
.pkg-v5 .pkg-hero-tag {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent-soft);
color: var(--accent);
border: 1px solid rgba(14,122,101,0.20);
border-radius: 999px;
padding: 7px 14px 7px 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
}
.pkg-v5 .pkg-hero-tag svg { color: var(--accent); }
.pkg-v5 .pkg-hero-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ink-2);
text-transform: uppercase;
}
.pkg-v5 .pkg-hero-body {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(28px, 4vw, 56px);
padding: 26px clamp(28px, 4vw, 48px) clamp(32px, 4vw, 48px);
align-items: stretch;
}
.pkg-v5 .pkg-hero-name {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important;
line-height: 0.98 !important;
color: var(--ink) !important;
margin: 6px 0 14px !important;
letter-spacing: -0.02em !important;
}
.pkg-v5 .pkg-hero-name .italic-accent { color: var(--accent) !important; }
.pkg-v5 .pkg-hero-tagline {
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.6;
max-width: 46ch;
margin: 0 0 22px;
}
.pkg-v5 .pkg-hero-price {
display: flex; align-items: center; gap: 16px;
padding: 18px 22px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
box-shadow: var(--shadow-sm);
margin-bottom: 22px;
width: fit-content;
max-width: 100%;
}
.pkg-v5 .pkg-hero-price-col { display: grid; gap: 4px; }
.pkg-v5 .pkg-hero-price-num {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(28px, 3.5vw, 38px);
line-height: 1;
color: var(--ink);
letter-spacing: -0.02em;
}
.pkg-v5 .pkg-hero-price-cycle {
font-family: var(--font-display);
font-weight: 400;
font-size: 0.5em;
color: var(--ink-2);
margin-left: 2px;
}
.pkg-v5 .pkg-hero-price-meta {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
color: var(--ink-3);
text-transform: uppercase;
}
.pkg-v5 .pkg-hero-price-plus {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
color: var(--gold);
}
.pkg-v5 .pkg-hero-cta {
display: inline-flex; align-items: center; gap: 10px;
background: var(--accent);
color: var(--accent-ink);
border: 1px solid var(--accent);
padding: 15px 26px;
border-radius: 12px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
transition: 220ms cubic-bezier(0.2,0.7,0,1);
box-shadow: 0 12px 28px rgba(14,122,101,0.20);
}
.pkg-v5 .pkg-hero-cta:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(14,122,101,0.28);
}
.pkg-v5 .pkg-hero-fineprint {
margin-top: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.10em;
color: var(--ink-3);
text-transform: uppercase;
}
.pkg-v5 .pkg-hero-right {
background: rgba(14,122,101,0.04);
border-left: 1px solid var(--accent-soft);
padding: 22px clamp(20px, 2.5vw, 32px);
border-radius: 16px;
display: flex; flex-direction: column;
align-self: stretch;
}
.pkg-v5 .pkg-hero-list-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--accent-soft);
font-weight: 600;
}
.pkg-v5 .pkg-hero-list {
list-style: none !important;
padding: 0 !important; margin: 0 !important;
display: grid; gap: 11px;
}
.pkg-v5 .pkg-hero-list li {
position: relative;
padding-left: 26px;
color: var(--ink) !important;
font-size: 14px;
line-height: 1.5;
}
.pkg-v5 .pkg-hero-list li::before {
content: "";
position: absolute; left: 0; top: 0.5em;
width: 16px; height: 16px;
background: url("data:image/svg+xml;utf8,") center/16px no-repeat;
transform: translateY(-2px);
}
/* === TIER GRID (2x2) === */
.pkg-v5 .pkg-tier-grid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.pkg-v5 .pkg-tier {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
padding: 26px 26px 24px;
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 14px;
transition: 240ms cubic-bezier(0.2,0.7,0,1);
overflow: hidden;
}
.pkg-v5 .pkg-tier:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(14,122,101,0.40);
}
.pkg-v5 .pkg-tier::before {
content: "";
position: absolute; top: 0; left: 26px; right: 26px; height: 2px;
background: var(--accent);
opacity: 0;
transition: opacity 240ms;
}
.pkg-v5 .pkg-tier:hover::before { opacity: 0.85; }
.pkg-v5 .pkg-tier-head {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding-bottom: 4px;
}
.pkg-v5 .pkg-tier-tag {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.20);
padding: 5px 11px;
border-radius: 999px;
text-transform: uppercase;
font-weight: 600;
}
.pkg-v5 .pkg-tier-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.10em;
color: var(--ink-3);
text-transform: uppercase;
}
.pkg-v5 .pkg-tier-name {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.2 !important;
color: var(--ink) !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
}
.pkg-v5 .pkg-tier-tagline {
color: var(--ink-2);
font-size: 13.5px;
line-height: 1.55;
margin: 0;
}
.pkg-v5 .pkg-tier-price {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding: 14px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
margin-top: 2px;
}
.pkg-v5 .pkg-tier-price-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 28px;
line-height: 1;
color: var(--ink);
letter-spacing: -0.02em;
}
.pkg-v5 .pkg-tier-price-meta {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.10em;
color: var(--ink-2);
text-transform: uppercase;
}
.pkg-v5 .pkg-tier-list {
list-style: none !important;
padding: 0 !important; margin: 0 !important;
display: grid; gap: 9px;
}
.pkg-v5 .pkg-tier-list li {
position: relative;
padding-left: 22px;
color: var(--ink) !important;
font-size: 13.5px;
line-height: 1.5;
}
.pkg-v5 .pkg-tier-list li::before {
content: "";
position: absolute; left: 0; top: 0.5em;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") center/14px no-repeat;
transform: translateY(-2px);
}
.pkg-v5 .pkg-tier-cta {
align-self: flex-start;
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
color: var(--accent) !important;
background: transparent;
border: 1px solid rgba(14,122,101,0.30);
padding: 11px 18px;
border-radius: 10px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: 220ms cubic-bezier(0.2,0.7,0,1);
}
.pkg-v5 .pkg-tier-cta:hover {
background: var(--accent);
color: var(--accent-ink) !important;
border-color: var(--accent);
transform: translateY(-1px);
}
/* === ONE-TIME · AURUM TREATMENT === */
.pkg-v5 .pkg-tier--alt {
background:
linear-gradient(180deg, rgba(168,134,82,0.07), transparent 50%),
var(--surface);
border: 1px solid var(--gold);
box-shadow: var(--shadow-sm), 0 0 0 1px var(--gold-soft) inset;
}
.pkg-v5 .pkg-tier--alt::before {
background: var(--gold);
opacity: 0.8;
}
.pkg-v5 .pkg-tier--alt:hover {
box-shadow: var(--shadow-gold), 0 0 0 1px var(--gold) inset;
border-color: var(--gold);
transform: translateY(-3px);
}
.pkg-v5 .pkg-tier-ribbon {
position: absolute;
top: 0; right: 26px;
width: 12px; height: 28px;
background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 60%, transparent 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
z-index: 1;
}
.pkg-v5 .pkg-tier-tag.pkg-tier-tag--gold {
color: var(--gold-deep);
background: var(--gold-soft);
border-color: rgba(168,134,82,0.40);
}
.pkg-v5 .pkg-tier--alt .pkg-tier-list li::before {
background-image: url("data:image/svg+xml;utf8,");
}
.pkg-v5 .pkg-tier-cta--gold {
color: var(--gold-deep) !important;
border-color: rgba(168,134,82,0.50) !important;
}
.pkg-v5 .pkg-tier-cta--gold:hover {
background: var(--gold) !important;
color: var(--ink) !important;
border-color: var(--gold) !important;
}
/* === TRUST STRIP === */
.pkg-v5 .pkg-trust {
margin-top: 36px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
padding: 22px clamp(20px, 3vw, 32px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px clamp(16px, 3vw, 32px);
box-shadow: var(--shadow-sm);
}
.pkg-v5 .pkg-trust-item {
display: flex; align-items: center; gap: 14px;
}
.pkg-v5 .pkg-trust-icon {
flex-shrink: 0;
display: inline-grid; place-items: center;
width: 38px; height: 38px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 10px;
}
.pkg-v5 .pkg-trust-text { display: grid; gap: 2px; }
.pkg-v5 .pkg-trust-text strong {
font-family: var(--font-display);
font-weight: 600;
font-size: 13.5px;
color: var(--ink);
}
.pkg-v5 .pkg-trust-text span {
font-size: 12px;
color: var(--ink-2);
line-height: 1.4;
}
/* === HIDE LEGACY PACKAGE MARKUP if any survives === */
.pkg-v5 .pkg-featured,
.pkg-v5 .pkg-grid,
.pkg-v5 .pkg-card,
.pkg-v5 .pkg-strip,
.pkg-v5 .pkg-strip-row,
.pkg-v5 .pkg-fineprint { display: none !important; }
/* === RESPONSIVE === */
@media (max-width: 1100px) {
.pkg-v5 .pkg-hero-body { grid-template-columns: 1fr; }
.pkg-v5 .pkg-hero-right { border-left: 0; border-top: 1px solid var(--accent-soft); padding-top: 22px; }
.pkg-v5 .pkg-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.pkg-v5 .pkg-tier-grid { grid-template-columns: 1fr; }
.pkg-v5 .pkg-hero-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.pkg-v5 .pkg-hero-name { font-size: clamp(2rem, 7vw, 2.6rem) !important; }
.pkg-v5 .pkg-hero-price { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
.pkg-v5 .pkg-hero-price-num { font-size: 26px; }
.pkg-v5 .pkg-hero-cta { width: 100%; justify-content: center; }
}
@media (max-width: 540px) {
.pkg-v5 .pkg-trust { grid-template-columns: 1fr; padding: 18px 20px; }
.packages-section.pkg-v5 { padding-bottom: calc(var(--section-y) + 110px) !important; }
}
/* ════════════════════════════════════════════════════════════════════════
FINAL CTA v5 — ornament + atmospheric backdrop
═══════════════════════════════════════════════════════════════════════════ */
.cta-section.cta-v5 {
position: relative;
overflow: hidden;
background: var(--surface-alt) !important;
}
.cta-section.cta-v5 .cta-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(700px 360px at 18% 20%, rgba(14,122,101,0.10), transparent 60%),
radial-gradient(700px 360px at 82% 80%, rgba(168,134,82,0.08), transparent 60%);
z-index: 0;
}
.cta-section.cta-v5 .container { position: relative; z-index: 1; }
.cta-v5 .cta-ornament {
display: flex; align-items: center; justify-content: center; gap: 18px;
margin: 22px auto 0;
max-width: 320px;
color: var(--gold);
}
.cta-v5 .cta-ornament-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.cta-v5 .cta-ornament-mark { font-size: 16px; line-height: 1; opacity: 0.85; }
/* ====================================================================
PACKAGE DETAIL PAGES v6 - Aurora Studio
==================================================================== */
body.package-page { background: var(--bg) !important; color: var(--ink); }
/* === HERO with aurora backdrop === */
body.package-page .pkg-page-hero {
position: relative;
padding: clamp(120px, 14vh, 180px) 0 clamp(40px, 6vw, 72px) !important;
background:
radial-gradient(900px 540px at 88% 4%, rgba(14,122,101,0.10), transparent 60%),
radial-gradient(700px 420px at 6% 96%, rgba(61,111,224,0.08), transparent 60%),
var(--bg) !important;
overflow: hidden;
}
body.package-page .pkg-page-hero-grid {
display: grid !important;
grid-template-columns: 1.25fr 1fr !important;
gap: clamp(28px, 5vw, 80px) !important;
align-items: center !important;
}
body.package-page .pkg-page-hero .eyebrow { color: var(--ink-2); }
body.package-page .pkg-page-headline {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
line-height: 0.98 !important;
color: var(--ink) !important;
letter-spacing: -0.02em !important;
margin: 18px 0 18px !important;
}
body.package-page .pkg-page-headline .italic-accent { color: var(--accent) !important; }
body.package-page .pkg-page-tag {
color: var(--ink-2) !important;
font-size: 16px !important;
line-height: 1.6 !important;
max-width: 50ch !important;
margin-bottom: 24px !important;
}
body.package-page .pkg-page-meta {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px 26px !important;
margin-top: clamp(20px, 3vw, 32px) !important;
padding: 18px 22px !important;
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-sm);
flex-wrap: initial !important;
}
body.package-page .pkg-page-meta span {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
color: var(--ink-2) !important;
letter-spacing: 0 !important;
text-transform: none !important;
border: 0 !important;
padding: 0 !important;
}
body.package-page .pkg-page-meta strong {
font-family: var(--font-mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--accent) !important;
font-weight: 600 !important;
}
/* === GLASS PRICING CARD === */
body.package-page .pkg-page-pricing {
position: relative !important;
background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-warm) 100%) !important;
color: var(--ink) !important;
border: 1px solid rgba(14,122,101,0.20) !important;
border-radius: 22px !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
overflow: hidden !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 30px 80px rgba(14,122,101,0.18),
0 8px 24px rgba(11,18,32,0.06) !important;
isolation: isolate;
}
body.package-page .pkg-page-pricing::before {
content: "" !important;
position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important;
background: linear-gradient(90deg, var(--sapphire) 0%, var(--accent) 50%, var(--glow) 100%) !important;
z-index: 2 !important;
color: transparent !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body.package-page .pkg-page-pricing::after {
content: "";
position: absolute;
inset: -120px -120px auto auto;
width: 320px; height: 320px;
background: radial-gradient(closest-side, rgba(45,227,181,0.18), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
body.package-page .pkg-page-pricing-ribbon {
position: relative; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
align-self: flex-start;
margin: 22px 26px 0;
padding: 7px 13px 7px 11px;
background: var(--accent-soft);
color: var(--accent);
border: 1px solid rgba(14,122,101,0.20);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
font-weight: 600;
text-transform: uppercase;
}
body.package-page .pkg-page-pricing-ribbon svg { color: var(--accent); }
body.package-page .pkg-page-price-block {
position: relative; z-index: 1;
padding: 18px 26px 22px;
}
body.package-page .pkg-page-price {
font-family: var(--font-display) !important;
font-size: clamp(2.6rem, 4vw, 3.6rem) !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
color: var(--ink) !important;
line-height: 1 !important;
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
flex-wrap: wrap;
}
body.package-page .pkg-page-price small {
font-family: var(--font-mono) !important;
font-size: 11px !important;
color: var(--ink-3) !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
margin-left: 0 !important;
font-weight: 500 !important;
}
body.package-page .pkg-page-monthly {
margin-top: 8px;
font-family: var(--font-body) !important;
font-size: 13.5px !important;
letter-spacing: 0 !important;
color: var(--ink-2) !important;
}
body.package-page .pkg-page-monthly strong {
font-family: var(--font-display);
font-weight: 600;
color: var(--ink);
}
body.package-page .pkg-page-glance {
position: relative; z-index: 1;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1px;
background: var(--hairline);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
body.package-page .pkg-page-glance > div {
background: var(--surface);
padding: 14px 18px;
display: grid; gap: 4px;
}
body.package-page .pkg-page-glance strong {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
body.package-page .pkg-page-glance span {
font-family: var(--font-display);
font-size: 14.5px;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.01em;
}
body.package-page .pkg-page-pricing-cta {
position: relative; z-index: 1;
margin: 18px 22px 22px !important;
padding: 14px 22px !important;
background: var(--accent) !important;
color: var(--accent-ink) !important;
border: 1px solid var(--accent) !important;
border-radius: 12px !important;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
align-self: stretch !important;
transition: 220ms cubic-bezier(0.2,0.7,0,1);
box-shadow: 0 12px 28px rgba(14,122,101,0.30);
}
body.package-page .pkg-page-pricing-cta:hover {
background: var(--accent-hover) !important;
border-color: var(--accent-hover) !important;
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(45,227,181,0.36);
}
/* === SECTION SHELL === */
body.package-page .pkg-section {
background: var(--bg) !important;
padding: clamp(56px, 8vw, 100px) 0 !important;
position: relative;
}
body.package-page .pkg-section.is-bone {
background: var(--surface-alt) !important;
}
body.package-page .pkg-section h2 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important;
color: var(--ink) !important;
letter-spacing: -0.02em !important;
line-height: 1.05 !important;
margin: 16px 0 12px !important;
}
body.package-page .pkg-section h2 .italic-accent { color: var(--accent) !important; }
body.package-page .pkg-section .eyebrow { color: var(--ink-2); }
body.package-page .pkg-section .eyebrow-num { color: var(--pop); }
body.package-page .pkg-section p { color: var(--ink-2) !important; }
/* === BENEFIT GRID === */
body.package-page .pkg-grid-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: clamp(22px, 3vw, 40px) !important;
align-items: start !important;
}
body.package-page .pkg-grid-2 > div {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
padding: clamp(22px, 3vw, 32px);
box-shadow: var(--shadow-sm);
position: relative;
}
body.package-page .pkg-grid-2 > div::before {
content: "";
position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
background: var(--accent);
opacity: 0;
transition: opacity 220ms;
}
body.package-page .pkg-grid-2 > div:hover::before { opacity: 0.85; }
body.package-page .pkg-grid-2 > div h2 {
font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
margin: 12px 0 14px !important;
}
body.package-page .pkg-grid-2 ul {
list-style: none !important;
padding: 0 !important; margin: 12px 0 0 !important;
display: grid; gap: 10px;
}
body.package-page .pkg-grid-2 ul li {
position: relative;
padding-left: 26px;
color: var(--ink) !important;
font-size: 14.5px;
line-height: 1.55;
border: 0 !important;
}
body.package-page .pkg-grid-2 ul li::before {
content: "";
position: absolute; left: 0; top: 0.5em;
width: 16px; height: 16px;
background: url("data:image/svg+xml;utf8,") center/16px no-repeat;
transform: translateY(-2px);
}
/* === WHAT'S INCLUDED tile grid === */
body.package-page .pkg-included-list {
list-style: none !important;
padding: 0 !important;
margin: clamp(28px, 4vw, 44px) 0 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
body.package-page .pkg-included-list li {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 16px 18px 16px 50px;
color: var(--ink) !important;
font-size: 14.5px;
line-height: 1.5;
box-shadow: var(--shadow-sm);
transition: 200ms cubic-bezier(0.2,0.7,0,1);
}
body.package-page .pkg-included-list li::before {
content: "";
position: absolute; left: 16px; top: 18px;
width: 22px; height: 22px;
background-color: var(--accent-soft);
border-radius: 7px;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-size: 14px;
background-repeat: no-repeat;
}
body.package-page .pkg-included-list li:hover {
border-color: rgba(14,122,101,0.30);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* === FAQ === */
body.package-page .pkg-faq {
margin-top: clamp(28px, 4vw, 44px);
border-top: 1px solid var(--hairline);
}
body.package-page .pkg-faq-item {
border-bottom: 1px solid var(--hairline);
padding: 22px 0;
}
body.package-page .pkg-faq-item h3 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(16px, 1.4vw, 19px) !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
letter-spacing: -0.01em !important;
position: relative;
padding-left: 24px;
}
body.package-page .pkg-faq-item h3::before {
content: "";
position: absolute; left: 0; top: 0.5em;
width: 12px; height: 12px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 0 4px var(--accent-soft);
transform: translateY(-2px);
}
body.package-page .pkg-faq-item p {
color: var(--ink-2) !important;
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 0 24px !important;
max-width: 70ch;
}
/* === INQUIRY === */
body.package-page .pkg-inquiry {
background: var(--surface-alt) !important;
padding: clamp(56px, 8vw, 100px) 0 !important;
position: relative;
}
body.package-page .pkg-inquiry::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(700px 360px at 92% 8%, rgba(14,122,101,0.08), transparent 60%),
radial-gradient(700px 360px at 8% 92%, rgba(168,134,82,0.07), transparent 60%);
z-index: 0;
}
body.package-page .pkg-inquiry > .container { position: relative; z-index: 1; }
body.package-page .pkg-inquiry-grid {
display: grid !important;
grid-template-columns: 1fr 1.4fr !important;
gap: clamp(32px, 5vw, 72px) !important;
align-items: start !important;
}
body.package-page .pkg-inquiry-intro h2 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
color: var(--ink) !important;
letter-spacing: -0.02em !important;
margin: 16px 0 14px !important;
line-height: 1 !important;
}
body.package-page .pkg-inquiry-intro h2 .italic-accent { color: var(--accent) !important; }
body.package-page .pkg-inquiry-intro p { color: var(--ink-2) !important; max-width: 38ch; }
body.package-page .package-form {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: 22px !important;
padding: clamp(24px, 3vw, 36px) !important;
box-shadow: var(--shadow-md) !important;
}
body.package-page .package-form .pf-group { border: 0; padding: 0; margin-bottom: 24px; }
body.package-page .package-form legend {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 12px;
}
body.package-page .package-form .pf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 12px;
}
body.package-page .package-form .pf-field-full { grid-column: 1 / -1; }
body.package-page .package-form label {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 6px;
font-weight: 600;
}
body.package-page .package-form label .req { color: var(--pop); }
body.package-page .package-form input,
body.package-page .package-form select,
body.package-page .package-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--hairline);
border-radius: 10px;
background: var(--surface-warm);
color: var(--ink);
font-family: var(--font-body);
font-size: 14px;
transition: 200ms;
}
body.package-page .package-form input:focus,
body.package-page .package-form select:focus,
body.package-page .package-form textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
background: #FFF;
}
body.package-page .package-form .pf-consent {
display: flex; gap: 10px; align-items: flex-start;
font-size: 13px; color: var(--ink-2);
margin: 14px 0 18px;
line-height: 1.5;
}
body.package-page .package-form .pf-submit {
display: inline-flex; align-items: center; gap: 10px;
background: var(--accent) !important;
color: var(--accent-ink) !important;
border: 1px solid var(--accent) !important;
padding: 14px 24px;
border-radius: 12px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
transition: 220ms cubic-bezier(0.2,0.7,0,1);
box-shadow: 0 12px 28px rgba(14,122,101,0.30);
}
body.package-page .package-form .pf-submit:hover {
background: var(--accent-hover) !important;
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(45,227,181,0.36);
}
/* === BOTTOM CTA STRIP - midnight closer === */
body.package-page .pkg-page-cta-strip {
background: linear-gradient(135deg, var(--midnight) 0%, var(--midnight-2) 100%) !important;
color: #FFF !important;
padding: clamp(60px, 8vw, 100px) 0 !important;
text-align: center;
position: relative;
overflow: hidden;
}
body.package-page .pkg-page-cta-strip::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(600px 360px at 80% 10%, rgba(45,227,181,0.20), transparent 60%),
radial-gradient(600px 360px at 20% 90%, rgba(61,111,224,0.18), transparent 60%);
pointer-events: none;
}
body.package-page .pkg-page-cta-strip > .container { position: relative; }
body.package-page .pkg-page-cta-strip h3 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(2rem, 3.6vw, 3rem) !important;
color: #FFF !important;
letter-spacing: -0.02em !important;
line-height: 1 !important;
margin-bottom: 14px !important;
}
body.package-page .pkg-page-cta-strip h3 .dot { color: var(--glow); }
body.package-page .pkg-page-cta-strip p {
color: rgba(255,255,255,0.72) !important;
font-size: 16px;
max-width: 56ch;
margin: 0 auto 26px;
}
body.package-page .pkg-page-cta-strip .btn-primary {
background: var(--accent) !important;
color: var(--accent-ink) !important;
border-color: var(--accent) !important;
box-shadow:
0 0 0 1px rgba(45,227,181,0.40),
0 18px 40px rgba(45,227,181,0.36) !important;
}
body.package-page .pkg-page-cta-strip .btn-primary:hover {
background: var(--accent-hover) !important;
border-color: var(--accent-hover) !important;
box-shadow:
0 0 0 1px rgba(45,227,181,0.60),
0 24px 56px rgba(45,227,181,0.50) !important;
transform: translateY(-2px);
}
/* === RESPONSIVE === */
@media (max-width: 1024px) {
body.package-page .pkg-page-hero-grid { grid-template-columns: 1fr !important; }
body.package-page .pkg-page-pricing { max-width: 520px; }
body.package-page .pkg-grid-2 { grid-template-columns: 1fr !important; }
body.package-page .pkg-inquiry-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
body.package-page .pkg-included-list { grid-template-columns: 1fr !important; }
body.package-page .pkg-page-glance { grid-template-columns: 1fr !important; }
body.package-page .package-form .pf-row { grid-template-columns: 1fr; }
body.package-page .pkg-page-meta { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px) {
body.package-page .pkg-page-cta-strip { padding-bottom: calc(clamp(60px, 8vw, 100px) + 80px) !important; }
}
/* ====================================================================
SITE-WIDE PREMIUM POLISH v6 - emerald glow on key CTAs
==================================================================== */
.btn-primary.btn-lg,
.pkg-v5 .pkg-hero-cta {
box-shadow: 0 12px 28px rgba(14,122,101,0.26);
transition: 240ms cubic-bezier(0.2,0.7,0,1);
}
.btn-primary.btn-lg:hover,
.pkg-v5 .pkg-hero-cta:hover {
box-shadow:
0 0 0 1px rgba(45,227,181,0.30),
0 22px 50px rgba(45,227,181,0.36);
transform: translateY(-2px);
}
.pkg-v5 .pkg-tier:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.20),
0 22px 50px rgba(14,122,101,0.18) !important;
}
/* === GOLD VARIANT for One-Time package detail page === */
body.package-page .pkg-page-pricing.pkg-page-pricing--gold {
border-color: var(--gold) !important;
box-shadow:
0 0 0 1px rgba(168,134,82,0.10),
0 30px 80px rgba(168,134,82,0.22),
0 8px 24px rgba(11,18,32,0.06) !important;
}
body.package-page .pkg-page-pricing.pkg-page-pricing--gold::before {
background: linear-gradient(90deg, var(--gold) 0%, #E2C68B 50%, var(--gold) 100%) !important;
}
body.package-page .pkg-page-pricing.pkg-page-pricing--gold::after {
background: radial-gradient(closest-side, rgba(168,134,82,0.20), transparent 70%);
}
body.package-page .pkg-page-pricing-ribbon.pkg-page-pricing-ribbon--gold {
background: var(--gold-soft);
color: var(--gold-deep);
border-color: rgba(168,134,82,0.40);
}
body.package-page .pkg-page-pricing-ribbon--gold svg { color: var(--gold-deep); }
body.package-page .pkg-page-pricing.pkg-page-pricing--gold .pkg-page-glance strong {
color: var(--gold-deep);
}
body.package-page .pkg-page-pricing-cta.pkg-page-pricing-cta--gold {
background: var(--gold) !important;
color: var(--ink) !important;
border-color: var(--gold) !important;
box-shadow: 0 12px 28px rgba(168,134,82,0.30) !important;
}
body.package-page .pkg-page-pricing-cta.pkg-page-pricing-cta--gold:hover {
background: #C4A472 !important;
border-color: #C4A472 !important;
box-shadow: 0 18px 40px rgba(168,134,82,0.40) !important;
}
/* ====================================================================
HERO v6.5 — Aurora Studio premium upgrade
==================================================================== */
/* Stronger atmospheric backdrop */
.hero {
padding: clamp(120px, 14vh, 180px) 0 clamp(60px, 8vh, 100px) !important;
background:
radial-gradient(820px 540px at 88% 0%, rgba(14,122,101,0.16), transparent 62%),
radial-gradient(640px 420px at 4% 92%, rgba(61,111,224,0.14), transparent 62%),
radial-gradient(960px 520px at 50% 50%, rgba(45,227,181,0.06), transparent 70%),
var(--bg) !important;
position: relative !important;
overflow: hidden !important;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(14,122,101,0.08) 1px, transparent 1px);
background-size: 28px 28px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
pointer-events: none;
opacity: 0.4;
z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
/* Live indicator pill */
.hero-content .hero-live-pill {
display: inline-flex !important;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 14px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
color: var(--ink-2);
margin-bottom: 26px;
box-shadow:
0 0 0 1px rgba(14,122,101,0.06),
0 8px 22px rgba(14,122,101,0.10);
position: relative;
isolation: isolate;
}
.hero-content .hero-live-pill::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent) 0%, var(--glow) 50%, var(--sapphire) 100%);
opacity: 0.20;
z-index: -1;
filter: blur(6px);
}
.hero-content .hero-live-dot {
width: 8px; height: 8px;
border-radius: 999px;
background: var(--glow);
box-shadow:
0 0 0 4px rgba(45,227,181,0.20),
0 0 12px rgba(45,227,181,0.55);
animation: heroLivePulse 1.8s ease-in-out infinite;
}
@keyframes heroLivePulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(45,227,181,0.20), 0 0 12px rgba(45,227,181,0.55); }
50% { box-shadow: 0 0 0 6px rgba(45,227,181,0.10), 0 0 18px rgba(45,227,181,0.85); }
}
.hero-content .hero-live-text {
color: var(--ink);
font-weight: 600;
letter-spacing: 0.06em;
}
.hero-content .hero-live-sep {
width: 1px; height: 12px;
background: var(--hairline);
}
.hero-content .hero-live-meta {
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.14em;
}
/* Hide legacy .hero-eyebrow if it still exists */
.hero-content .hero-eyebrow { display: none !important; }
/* Hero typography emphasis */
.hero-content .hero-headline {
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(2.6rem, 6vw, 5.4rem) !important;
line-height: 0.96 !important;
letter-spacing: -0.025em !important;
color: var(--ink) !important;
margin-bottom: 22px !important;
}
.hero-content .hero-headline .italic-accent { color: var(--accent) !important; }
.hero-content .hero-headline .dot { color: var(--glow); }
.hero-content .hero-sub {
color: var(--ink-2) !important;
font-size: clamp(16px, 1.2vw, 18px) !important;
line-height: 1.55 !important;
max-width: 50ch !important;
margin-bottom: 28px !important;
}
/* CTAs — emerald primary with electric-teal halo */
.hero-content .hero-ctas { gap: 14px !important; }
.hero-content .hero-ctas .btn-primary {
background: var(--accent) !important;
color: var(--accent-ink) !important;
border: 1px solid var(--accent) !important;
padding: 16px 26px !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 14.5px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.30),
0 14px 32px rgba(14,122,101,0.30) !important;
transition: 240ms cubic-bezier(0.2,0.7,0,1) !important;
}
.hero-content .hero-ctas .btn-primary:hover {
background: var(--accent-hover) !important;
border-color: var(--accent-hover) !important;
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(45,227,181,0.50),
0 22px 50px rgba(45,227,181,0.40) !important;
}
.hero-content .hero-ctas .btn-ghost {
background: var(--surface) !important;
color: var(--ink) !important;
border: 1px solid var(--hairline) !important;
padding: 16px 26px !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 14.5px !important;
transition: 240ms cubic-bezier(0.2,0.7,0,1) !important;
}
.hero-content .hero-ctas .btn-ghost:hover {
border-color: var(--accent) !important;
color: var(--accent) !important;
box-shadow: 0 8px 22px rgba(14,122,101,0.16) !important;
transform: translateY(-1px);
}
/* Hero meta refinement */
.hero-content .hero-meta {
color: var(--ink-3) !important;
font-family: var(--font-mono) !important;
font-size: 11.5px !important;
letter-spacing: 0.10em !important;
}
.hero-content .hero-meta strong { color: var(--ink) !important; font-weight: 600; }
.hero-content .hero-meta-pin strong { color: var(--accent) !important; }
/* Hero mockup with emerald glow ring */
.hero-mockup { position: relative !important; }
.hero-mockup .hero-mockup-glow {
position: absolute;
inset: -40px;
background:
radial-gradient(closest-side, rgba(14,122,101,0.18), transparent 70%),
radial-gradient(closest-side at 80% 20%, rgba(45,227,181,0.16), transparent 60%),
radial-gradient(closest-side at 20% 80%, rgba(61,111,224,0.16), transparent 60%);
filter: blur(10px);
border-radius: 40px;
z-index: 0;
pointer-events: none;
}
.hero-mockup .hero-mockup-caption,
.hero-mockup .hero-mockup-browser,
.hero-mockup .hero-mockup-phone { position: relative; z-index: 1; }
/* Hero mockup browser refinement */
.hero-mockup .hero-mockup-browser {
box-shadow:
0 0 0 1px var(--hairline),
0 40px 80px rgba(14,122,101,0.18),
0 8px 24px rgba(11,18,32,0.10) !important;
}
/* === Floating lead notification toasts === */
.hero-toast {
position: absolute;
z-index: 3;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 12px 14px 12px 12px;
display: flex;
align-items: center;
gap: 10px;
box-shadow:
0 0 0 1px rgba(14,122,101,0.10),
0 18px 44px rgba(14,122,101,0.18),
0 6px 18px rgba(11,18,32,0.10);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
min-width: 220px;
opacity: 0;
transform: translateY(8px);
animation: heroToastIn 700ms cubic-bezier(0.2,0.7,0,1) forwards;
}
.hero-toast-1 {
top: 14%;
right: -12px;
animation-delay: 600ms;
}
.hero-toast-2 {
bottom: 16%;
left: -22px;
animation-delay: 1100ms;
}
@keyframes heroToastIn {
0% { opacity: 0; transform: translateY(8px) scale(0.96); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-toast-icon {
flex-shrink: 0;
width: 30px; height: 30px;
display: inline-grid;
place-items: center;
background: var(--accent-soft);
color: var(--accent);
border-radius: 8px;
}
.hero-toast-icon-gold {
background: var(--gold-soft);
color: var(--gold-deep);
}
.hero-toast-body {
display: grid;
gap: 1px;
line-height: 1.2;
}
.hero-toast-tag {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.hero-toast-tag-gold { color: var(--gold-deep); }
.hero-toast-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--ink);
letter-spacing: -0.01em;
}
.hero-toast-svc {
font-size: 11px;
color: var(--ink-2);
}
.hero-toast-pulse {
position: absolute;
top: 12px; right: 12px;
width: 8px; height: 8px;
border-radius: 999px;
background: var(--glow);
box-shadow:
0 0 0 3px rgba(45,227,181,0.20),
0 0 10px rgba(45,227,181,0.60);
animation: heroLivePulse 1.8s ease-in-out infinite;
}
/* Mobile: hide floating toasts to avoid overflow */
@media (max-width: 1100px) {
.hero-toast { display: none; }
}
/* ====================================================================
STATS v6.5 — premium glass cards + per-tile colored radial glow
==================================================================== */
.why-section.stats-v6 {
position: relative;
background: var(--bg) !important;
padding: clamp(80px, 10vw, 140px) 0 !important;
overflow: hidden;
}
.why-section.stats-v6 .stats-v6-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(800px 460px at 12% 18%, rgba(14,122,101,0.10), transparent 60%),
radial-gradient(700px 420px at 88% 82%, rgba(61,111,224,0.10), transparent 62%),
radial-gradient(900px 480px at 50% 50%, rgba(45,227,181,0.05), transparent 70%);
z-index: 0;
}
.why-section.stats-v6 > .container { position: relative; z-index: 1; }
.stats-v6 .stats-v6-ornament {
display: flex; align-items: center; justify-content: center;
gap: 18px;
max-width: 380px;
margin: 26px auto 32px;
color: var(--gold);
}
.stats-v6 .stats-v6-ornament-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.stats-v6 .stats-v6-ornament-mark { font-size: 16px; opacity: 0.85; }
/* Stat tile rebuild */
.stats-v6 .stat-grid {
margin-top: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
.stats-v6 .stat-tile {
position: relative !important;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
padding: clamp(28px, 3vw, 40px) clamp(22px, 2.6vw, 28px) clamp(24px, 2.6vw, 28px) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 18px 44px rgba(11,18,32,0.06) !important;
overflow: hidden !important;
display: grid; gap: 14px;
align-content: end;
min-height: 240px;
transition: 260ms cubic-bezier(0.2,0.7,0,1);
isolation: isolate;
}
.stats-v6 .stat-tile::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
border-radius: 18px 18px 0 0;
background: var(--accent);
z-index: 2;
}
.stats-v6 .stat-tile-glow {
position: absolute;
width: 280px; height: 280px;
top: -100px; right: -80px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(8px);
}
.stats-v6 .stat-tile-corner {
position: absolute;
top: 18px; right: 18px;
width: 6px; height: 6px;
border-radius: 999px;
z-index: 2;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
/* Per-tone variants */
.stats-v6 .stat-tile[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--accent), var(--glow)); }
.stats-v6 .stat-tile[data-tone="emerald"] .stat-tile-glow { background: radial-gradient(closest-side, rgba(14,122,101,0.18), transparent 70%); }
.stats-v6 .stat-tile[data-tone="emerald"] .stat-tile-corner { background: var(--accent); box-shadow: 0 0 0 4px rgba(14,122,101,0.12), 0 0 12px rgba(45,227,181,0.40); }
.stats-v6 .stat-tile[data-tone="aurum"]::before { background: linear-gradient(90deg, var(--gold), #E2C68B); }
.stats-v6 .stat-tile[data-tone="aurum"] .stat-tile-glow { background: radial-gradient(closest-side, rgba(168,134,82,0.22), transparent 70%); }
.stats-v6 .stat-tile[data-tone="aurum"] .stat-tile-corner { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.stats-v6 .stat-tile[data-tone="cyan"]::before { background: linear-gradient(90deg, var(--sapphire), var(--glow)); }
.stats-v6 .stat-tile[data-tone="cyan"] .stat-tile-glow { background: radial-gradient(closest-side, rgba(61,111,224,0.18), transparent 70%); }
.stats-v6 .stat-tile[data-tone="cyan"] .stat-tile-corner { background: var(--sapphire); box-shadow: 0 0 0 4px var(--sapphire-soft); }
/* Hover state */
.stats-v6 .stat-tile:hover {
transform: translateY(-4px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 32px 70px rgba(14,122,101,0.18),
0 12px 30px rgba(11,18,32,0.08) !important;
}
.stats-v6 .stat-tile[data-tone="aurum"]:hover { box-shadow: 0 0 0 1px rgba(168,134,82,0.20), 0 32px 70px rgba(168,134,82,0.20), 0 12px 30px rgba(11,18,32,0.08) !important; }
.stats-v6 .stat-tile[data-tone="cyan"]:hover { box-shadow: 0 0 0 1px rgba(61,111,224,0.18), 0 32px 70px rgba(61,111,224,0.18), 0 12px 30px rgba(11,18,32,0.08) !important; }
/* Number typography */
.stats-v6 .stat-tile .stat-num {
position: relative; z-index: 1;
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(56px, 7vw, 108px) !important;
line-height: 0.92 !important;
color: var(--ink) !important;
letter-spacing: -0.03em !important;
display: flex !important;
align-items: baseline;
gap: 8px;
}
.stats-v6 .stat-tile .stat-unit {
font-family: var(--font-italic) !important;
font-style: italic !important;
font-size: 0.42em !important;
color: var(--gold) !important;
font-weight: 400 !important;
}
.stats-v6 .stat-tile[data-tone="cyan"] .stat-unit { color: var(--sapphire) !important; }
.stats-v6 .stat-tile .stat-label {
position: relative; z-index: 1;
font-family: var(--font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
color: var(--ink) !important;
text-transform: uppercase !important;
font-weight: 600;
}
.stats-v6 .stat-tile .stat-tile-foot {
position: relative; z-index: 1;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-2);
line-height: 1.4;
padding-top: 12px;
border-top: 1px solid var(--hairline);
}
/* === Integrated industries belt (replaces separate brands section) === */
.stats-v6 .stats-v6-industries {
margin-top: clamp(40px, 5vw, 64px);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
border: 1px solid var(--hairline);
border-radius: 22px;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 24px 60px rgba(14,122,101,0.10),
0 8px 24px rgba(11,18,32,0.06);
overflow: hidden;
position: relative;
isolation: isolate;
}
.stats-v6 .stats-v6-industries::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--glow) 50%, var(--sapphire) 70%, transparent 100%);
z-index: 2;
}
.stats-v6 .stats-v6-industries::after {
content: "";
position: absolute;
inset: -120px -120px auto auto;
width: 360px; height: 360px;
background: radial-gradient(closest-side, rgba(45,227,181,0.12), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
.stats-v6 .stats-v6-industries-head {
position: relative; z-index: 1;
display: flex;
align-items: center;
gap: 18px;
padding: 18px clamp(20px, 3vw, 32px) 14px;
border-bottom: 1px solid var(--hairline);
}
.stats-v6 .stats-v6-industries-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
font-weight: 600;
}
.stats-v6 .stats-v6-industries-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--hairline), transparent);
}
.stats-v6 .stats-v6-industries-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ink-3);
text-transform: uppercase;
}
.stats-v6 .stats-v6-industries-marquee {
position: relative; z-index: 1;
overflow: hidden;
padding: clamp(28px, 4vw, 44px) 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stats-v6 .stats-v6-industries-track {
display: flex;
gap: 56px;
white-space: nowrap;
animation: statsIndustriesRoll 42s linear infinite;
will-change: transform;
}
.stats-v6 .stats-v6-industries-track:hover { animation-play-state: paused; }
@keyframes statsIndustriesRoll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.stats-v6 .stats-v6-industries-item {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: -0.02em;
color: var(--ink);
background: linear-gradient(180deg, var(--ink) 60%, var(--accent) 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: 240ms;
}
.stats-v6 .stats-v6-industries-item.is-italic {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hide legacy standalone industries section */
.brands-section.is-hidden-v6 { display: none !important; }
/* ====================================================================
RESPONSIVE
==================================================================== */
@media (max-width: 1024px) {
.stats-v6 .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.stats-v6 .stat-tile { min-height: 220px; }
}
@media (max-width: 720px) {
.hero-content .hero-live-pill {
gap: 8px;
font-size: 10.5px;
padding: 7px 12px 7px 11px;
}
.hero-content .hero-live-meta { display: none; }
.stats-v6 .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.stats-v6 .stat-tile .stat-num { font-size: clamp(48px, 12vw, 72px) !important; }
.stats-v6 .stats-v6-industries-head { gap: 12px; }
.stats-v6 .stats-v6-industries-meta { display: none; }
}
@media (max-width: 480px) {
.stats-v6 .stat-grid { grid-template-columns: 1fr !important; }
.hero-content .hero-live-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-content .hero-live-dot,
.hero-toast-pulse { animation: none; }
.hero-toast { opacity: 1; transform: none; animation: none; }
.stats-v6 .stats-v6-industries-track { animation: none; }
}
/* ====================================================================
PROCESS v6.5 — premium connected timeline
==================================================================== */
.how-section.how-v6 {
position: relative;
background: var(--bg) !important;
padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px) !important;
overflow: hidden;
}
.how-section.how-v6 .how-v6-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 480px at 12% 14%, rgba(14,122,101,0.10), transparent 60%),
radial-gradient(700px 400px at 88% 86%, rgba(61,111,224,0.10), transparent 62%),
radial-gradient(900px 480px at 50% 50%, rgba(45,227,181,0.05), transparent 70%);
z-index: 0;
}
.how-section.how-v6 > .container { position: relative; z-index: 1; }
.how-v6 .how-v6-ornament {
display: flex; align-items: center; justify-content: center;
gap: 18px;
max-width: 380px;
margin: 24px auto 44px;
color: var(--gold);
}
.how-v6 .how-v6-ornament-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.how-v6 .how-v6-ornament-mark { font-size: 16px; opacity: 0.85; }
.how-v6 .how-v6-track {
position: relative;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
margin-top: 0 !important;
padding-top: 36px;
}
/* The connecting rail behind the badges */
.how-v6 .how-v6-rail {
position: absolute;
top: 78px; /* aligns with center of step number badges */
left: 8%;
right: 8%;
height: 2px;
background: linear-gradient(90deg,
rgba(14,122,101,0.10) 0%,
var(--accent) 18%,
var(--glow) 50%,
var(--sapphire) 82%,
rgba(61,111,224,0.10) 100%);
z-index: 0;
box-shadow: 0 0 16px rgba(45,227,181,0.30);
border-radius: 999px;
}
/* Step card */
.how-v6 .how-step {
position: relative;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
padding: 70px clamp(20px, 2.4vw, 26px) clamp(22px, 2.4vw, 26px) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 18px 44px rgba(11,18,32,0.06) !important;
margin-top: 36px; /* space for the badge that overlaps the top */
overflow: visible;
transition: 260ms cubic-bezier(0.2,0.7,0,1);
isolation: isolate;
display: grid !important;
gap: 0 !important;
align-content: start !important;
}
.how-v6 .how-step:hover {
transform: translateY(-4px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 30px 70px rgba(14,122,101,0.18),
0 12px 30px rgba(11,18,32,0.10) !important;
}
.how-v6 .how-step::before {
content: "";
position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
background: linear-gradient(90deg, var(--accent), var(--glow));
opacity: 0;
transition: opacity 240ms;
border-radius: 999px;
}
.how-v6 .how-step:hover::before { opacity: 0.85; }
/* Number badge — large circle that sits ON the rail */
.how-v6 .how-step .how-step-num {
position: absolute !important;
top: -28px;
left: 50%;
transform: translateX(-50%);
width: 56px; height: 56px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-hover) 100%);
color: #FFF;
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
box-shadow:
0 0 0 4px var(--bg),
0 0 0 5px rgba(14,122,101,0.20),
0 18px 32px rgba(14,122,101,0.30),
0 0 24px rgba(45,227,181,0.45);
z-index: 2;
overflow: hidden;
isolation: isolate;
}
.how-v6 .how-step .how-step-num-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(45,227,181,0.50), transparent 70%);
opacity: 0;
transition: opacity 240ms;
z-index: 0;
}
.how-v6 .how-step:hover .how-step-num-ring { opacity: 1; }
.how-v6 .how-step .how-step-num-text {
position: relative;
z-index: 1;
color: #FFF;
}
/* Step body */
.how-v6 .how-step-body {
display: grid;
gap: 8px;
}
.how-v6 .how-step-duration {
align-self: start;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: var(--accent-soft);
color: var(--accent);
border: 1px solid rgba(14,122,101,0.20);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 4px;
}
.how-v6 .how-step h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(17px, 1.4vw, 20px) !important;
color: var(--ink) !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
line-height: 1.2 !important;
display: block !important;
gap: 0 !important;
align-items: initial !important;
}
.how-v6 .how-step .how-step-desc {
color: var(--ink-2) !important;
font-size: 13.5px;
line-height: 1.55;
margin: 0;
}
.how-v6 .how-step-list {
list-style: none !important;
padding: 0 !important;
margin: 14px 0 0 !important;
display: grid;
gap: 8px;
border-top: 1px solid var(--hairline);
padding-top: 14px !important;
}
.how-v6 .how-step-list li {
position: relative;
padding-left: 22px;
color: var(--ink) !important;
font-size: 12.5px;
line-height: 1.45;
font-family: var(--font-body);
}
.how-v6 .how-step-list li::before {
content: "";
position: absolute; left: 0; top: 0.5em;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") center/14px no-repeat;
transform: translateY(-2px);
}
/* Outcome stripe at end of section */
.how-v6 .how-v6-outcome {
margin-top: clamp(36px, 5vw, 56px);
background: linear-gradient(135deg, var(--midnight) 0%, var(--midnight-2) 100%);
color: #FFF;
border-radius: 18px;
padding: 22px clamp(22px, 4vw, 36px);
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(45,227,181,0.20),
0 24px 60px rgba(11,18,32,0.16),
0 0 32px rgba(45,227,181,0.18);
}
.how-v6 .how-v6-outcome::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(500px 220px at 12% 50%, rgba(45,227,181,0.20), transparent 60%),
radial-gradient(500px 220px at 88% 50%, rgba(61,111,224,0.18), transparent 60%);
}
.how-v6 .how-v6-outcome > * { position: relative; }
.how-v6 .how-v6-outcome-pulse {
width: 10px; height: 10px;
border-radius: 999px;
background: var(--glow);
box-shadow:
0 0 0 4px rgba(45,227,181,0.20),
0 0 16px rgba(45,227,181,0.80);
animation: heroLivePulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.how-v6 .how-v6-outcome-arrow {
flex-shrink: 0;
display: inline-grid; place-items: center;
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(45,227,181,0.16);
color: var(--glow);
}
.how-v6 .how-v6-outcome-text {
font-family: var(--font-body);
font-size: 14.5px;
color: rgba(255,255,255,0.86);
line-height: 1.5;
}
.how-v6 .how-v6-outcome-text strong {
color: #FFF;
font-family: var(--font-display);
font-weight: 600;
margin-right: 4px;
}
/* Mobile: stack vertically with side-rail */
@media (max-width: 1024px) {
.how-v6 .how-v6-track {
grid-template-columns: 1fr !important;
gap: 28px !important;
padding-top: 0;
}
.how-v6 .how-v6-rail {
top: 0; bottom: 0;
left: 27px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(180deg,
rgba(14,122,101,0.10) 0%,
var(--accent) 12%,
var(--glow) 50%,
var(--sapphire) 88%,
rgba(61,111,224,0.10) 100%);
box-shadow: 0 0 12px rgba(45,227,181,0.30);
}
.how-v6 .how-step {
margin-top: 0;
padding: 22px clamp(20px, 4vw, 28px) 22px 80px !important;
}
.how-v6 .how-step .how-step-num {
top: 22px;
left: 0;
transform: none;
}
.how-v6 .how-v6-outcome {
flex-wrap: wrap;
}
}
@media (max-width: 540px) {
.how-v6 .how-step .how-step-num {
width: 48px; height: 48px;
font-size: 18px !important;
}
.how-v6 .how-v6-rail { left: 23px; }
.how-v6 .how-step {
padding-left: 70px !important;
}
}
/* ====================================================================
PACKAGE PAGE "WHAT'S INCLUDED" v2 — single elegant checklist panel
Replaces the heavy card-per-item grid that wrapped variable-length
text into ragged tiles. New treatment: ONE rounded container with
a soft glow + 2-column hairline-divided checklist that aligns
cleanly regardless of bullet length.
==================================================================== */
body.package-page .pkg-included-list {
list-style: none !important;
padding: 28px clamp(20px, 3vw, 36px) !important;
margin: clamp(28px, 4vw, 44px) 0 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
column-gap: clamp(28px, 4vw, 56px) !important;
row-gap: 0 !important;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 22px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 24px 60px rgba(14,122,101,0.10),
0 8px 24px rgba(11,18,32,0.06) !important;
position: relative;
isolation: isolate;
overflow: hidden;
}
body.package-page .pkg-included-list::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--sapphire) 0%, var(--accent) 50%, var(--glow) 100%);
z-index: 2;
}
body.package-page .pkg-included-list::after {
content: "";
position: absolute;
inset: -120px -120px auto auto;
width: 360px; height: 360px;
background: radial-gradient(closest-side, rgba(14,122,101,0.10), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
body.package-page .pkg-included-list li {
position: relative;
z-index: 1;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 14px 0 14px 36px !important;
margin: 0 !important;
color: var(--ink) !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
display: flex !important;
align-items: flex-start !important;
gap: 0 !important;
transition: color 200ms;
border-bottom: 1px solid var(--hairline) !important;
}
/* Remove bottom border on the last row of each column */
body.package-page .pkg-included-list li:nth-last-child(-n+2) {
border-bottom: 0 !important;
}
/* Odd rows (left column) keep their right boundary clear; ensure clean grid */
body.package-page .pkg-included-list li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 18px !important;
width: 22px !important;
height: 22px !important;
background-color: var(--accent-soft) !important;
border: 1px solid rgba(14,122,101,0.20) !important;
border-radius: 7px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-position: center !important;
background-size: 13px !important;
background-repeat: no-repeat !important;
transition: 200ms !important;
transform: none !important;
}
body.package-page .pkg-included-list li:hover {
color: var(--ink) !important;
transform: none !important;
}
body.package-page .pkg-included-list li:hover::before {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
box-shadow: 0 4px 12px rgba(14,122,101,0.30) !important;
}
/* Mobile: 1-column collapse with bottom borders restored on every row except last */
@media (max-width: 720px) {
body.package-page .pkg-included-list {
grid-template-columns: 1fr !important;
padding: 20px clamp(18px, 4vw, 28px) !important;
}
body.package-page .pkg-included-list li:nth-last-child(-n+2) {
border-bottom: 1px solid var(--hairline) !important;
}
body.package-page .pkg-included-list li:last-child {
border-bottom: 0 !important;
}
}
/* ====================================================================
PROCESS v6.6 — COMPACT premium step strip
Replaces the oversized v6.5 timeline. Cards are now ~50% shorter
with the badge inline at the top-left instead of overlapping the top.
==================================================================== */
/* Tighten section padding from clamp(80px, 10vw, 140px) -> clamp(48px, 6vw, 88px) */
.how-section.how-v6 {
padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px) !important;
}
.how-section.how-v6 .container .section-headline {
margin-bottom: 0 !important;
font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
}
.how-v6 .how-v6-ornament {
margin: 16px auto 28px !important;
}
/* Track: 4 columns, thinner gap, NO top padding (badge no longer overlaps) */
.how-v6 .how-v6-track {
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
padding-top: 0 !important;
}
/* Connecting rail — runs through the badges horizontally */
.how-v6 .how-v6-rail {
top: 50px !important; /* aligns with center of inline badge */
left: 7% !important;
right: 7% !important;
height: 2px !important;
background: linear-gradient(90deg,
rgba(14,122,101,0.10) 0%,
var(--accent) 18%,
var(--glow) 50%,
var(--sapphire) 82%,
rgba(61,111,224,0.10) 100%) !important;
}
/* Compact card */
.how-v6 .how-step {
margin-top: 0 !important;
padding: 22px 22px 22px !important;
border-radius: 16px !important;
display: grid !important;
gap: 8px !important;
align-content: start !important;
min-height: 0 !important;
}
.how-v6 .how-step::before {
left: 18px !important; right: 18px !important;
}
/* Card header row: inline badge + duration tag side-by-side */
.how-v6 .how-step .how-step-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
/* Inline badge — smaller, no longer overlapping top edge */
.how-v6 .how-step .how-step-num {
position: static !important;
width: 40px !important;
height: 40px !important;
border-radius: 999px !important;
display: inline-grid !important;
place-items: center !important;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
color: #FFF !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 16px !important;
line-height: 1 !important;
box-shadow:
0 0 0 4px var(--bg),
0 0 0 5px rgba(14,122,101,0.16),
0 12px 22px rgba(14,122,101,0.26),
0 0 16px rgba(45,227,181,0.32) !important;
transform: none !important;
flex-shrink: 0;
overflow: visible !important;
isolation: auto !important;
}
/* Duration pill */
.how-v6 .how-step .how-step-duration {
margin-bottom: 0 !important;
padding: 4px 9px !important;
font-size: 9.5px !important;
letter-spacing: 0.16em !important;
border-radius: 999px !important;
}
/* Title — tighter */
.how-v6 .how-step h3 {
font-size: 16px !important;
margin: 6px 0 0 !important;
}
/* Desc — single tight line */
.how-v6 .how-step .how-step-desc {
font-size: 13px !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Hide any sub-list residue from previous markup */
.how-v6 .how-step .how-step-list,
.how-v6 .how-step .how-step-num-ring,
.how-v6 .how-step .how-step-num-text { display: none !important; }
/* Hover lift (smaller delta now that cards are compact) */
.how-v6 .how-step:hover {
transform: translateY(-3px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 22px 50px rgba(14,122,101,0.16),
0 8px 22px rgba(11,18,32,0.08) !important;
}
/* "Launched" inline pill — replaces the giant midnight stripe */
.how-v6 .how-v6-launched {
margin: clamp(20px, 3vw, 32px) auto 0;
width: fit-content;
max-width: 100%;
background: linear-gradient(135deg, var(--midnight) 0%, var(--midnight-2) 100%);
color: #FFF;
padding: 10px 18px 10px 16px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow:
0 0 0 1px rgba(45,227,181,0.30),
0 14px 32px rgba(11,18,32,0.18),
0 0 22px rgba(45,227,181,0.22);
position: relative;
}
.how-v6 .how-v6-launched-pulse {
width: 8px; height: 8px;
border-radius: 999px;
background: var(--glow);
box-shadow:
0 0 0 4px rgba(45,227,181,0.20),
0 0 14px rgba(45,227,181,0.80);
animation: heroLivePulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.how-v6 .how-v6-launched-text {
font-family: var(--font-body);
font-size: 13px;
color: rgba(255,255,255,0.86);
line-height: 1.4;
}
.how-v6 .how-v6-launched-text strong {
color: #FFF;
font-family: var(--font-display);
font-weight: 600;
margin-right: 4px;
}
/* Mobile — tablet */
@media (max-width: 1024px) {
.how-v6 .how-v6-track {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.how-v6 .how-v6-rail { display: none !important; }
}
@media (max-width: 540px) {
.how-v6 .how-v6-track { grid-template-columns: 1fr !important; }
.how-v6 .how-step { padding: 18px 18px !important; }
.how-v6 .how-step .how-step-num { width: 36px !important; height: 36px !important; font-size: 14px !important; }
}
/* ====================================================================
SITE-WIDE PREMIUM POLISH v6.6
==================================================================== */
/* Service icon cards on homepage gain a glowing emerald-cyan border on hover */
.svc-card {
position: relative;
isolation: isolate;
transition: 280ms cubic-bezier(0.2,0.7,0,1) !important;
}
.svc-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 240ms;
background: linear-gradient(135deg, rgba(14,122,101,0.18), rgba(45,227,181,0.18) 50%, rgba(61,111,224,0.18));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
}
.svc-card:hover::after { opacity: 1; }
.svc-card:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 22px 50px rgba(14,122,101,0.16),
0 8px 22px rgba(11,18,32,0.06) !important;
}
.svc-card-icon {
transition: 240ms;
}
.svc-card:hover .svc-card-icon {
background: linear-gradient(135deg, var(--accent-soft), rgba(45,227,181,0.12)) !important;
box-shadow: 0 6px 16px rgba(14,122,101,0.16);
}
/* AI assistant section gets the aurora atmospheric backdrop */
.ai-section {
position: relative;
overflow: hidden;
}
.ai-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(800px 460px at 88% 20%, rgba(14,122,101,0.07), transparent 60%),
radial-gradient(700px 420px at 12% 80%, rgba(61,111,224,0.06), transparent 62%);
z-index: 0;
}
.ai-section > .container { position: relative; z-index: 1; }
.ai-mock {
box-shadow:
0 0 0 1px rgba(14,122,101,0.06),
0 28px 70px rgba(14,122,101,0.16),
0 12px 28px rgba(11,18,32,0.08) !important;
transition: 280ms cubic-bezier(0.2,0.7,0,1);
}
.ai-mock:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 36px 90px rgba(45,227,181,0.20),
0 12px 28px rgba(11,18,32,0.10) !important;
}
/* FAQ items — hover state with emerald tint */
.faq-item {
transition: background 240ms;
padding: 0 14px;
margin-left: -14px;
margin-right: -14px;
border-radius: 10px;
}
.faq-item:hover {
background: rgba(14,122,101,0.04);
}
.faq-q { transition: 200ms; }
.faq-q:hover { color: var(--accent); }
.faq-toggle { transition: color 200ms, transform 220ms cubic-bezier(0.2,0.7,0,1); }
.faq-item:hover .faq-toggle { color: var(--accent); }
/* Inbox section — soft ambient backdrop */
.inbox-section {
position: relative;
overflow: hidden;
}
.inbox-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(700px 380px at 6% 20%, rgba(168,134,82,0.05), transparent 60%),
radial-gradient(800px 460px at 92% 80%, rgba(14,122,101,0.07), transparent 60%);
z-index: 0;
}
.inbox-section > .container { position: relative; z-index: 1; }
/* Inbox dashboard mockup — subtle emerald glow */
.inbox-mock {
box-shadow:
0 0 0 1px rgba(14,122,101,0.06),
0 28px 70px rgba(14,122,101,0.16),
0 12px 28px rgba(11,18,32,0.08) !important;
transition: 280ms cubic-bezier(0.2,0.7,0,1);
}
.inbox-mock:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.18),
0 36px 90px rgba(45,227,181,0.18),
0 12px 28px rgba(11,18,32,0.10) !important;
}
/* Inbox chips get a soft glow accent on hover */
.inbox-chip {
transition: 240ms cubic-bezier(0.2,0.7,0,1);
}
.inbox-chip:hover {
background: var(--accent-soft) !important;
color: var(--accent) !important;
border-color: rgba(14,122,101,0.30) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14,122,101,0.16);
}
/* Demo carousel browser-window glow lift */
.demo-browser-window {
transition: 320ms cubic-bezier(0.2,0.7,0,1);
}
.demo-browser-window:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 40px 100px rgba(14,122,101,0.18),
0 16px 36px rgba(11,18,32,0.10) !important;
}
/* Final CTA section — intensified glow */
.cta-section.cta-v5 .btn-primary.btn-lg {
box-shadow:
0 0 0 1px rgba(14,122,101,0.30),
0 18px 40px rgba(14,122,101,0.32) !important;
}
.cta-section.cta-v5 .btn-primary.btn-lg:hover {
box-shadow:
0 0 0 1px rgba(45,227,181,0.50),
0 26px 60px rgba(45,227,181,0.42) !important;
transform: translateY(-2px);
}
/* Nav primary CTA — emerald glow site-wide */
.navbar .nav-cta-desktop,
.navbar .btn-primary {
box-shadow:
0 0 0 1px rgba(14,122,101,0.20),
0 8px 20px rgba(14,122,101,0.22) !important;
transition: 240ms cubic-bezier(0.2,0.7,0,1) !important;
}
.navbar .nav-cta-desktop:hover,
.navbar .btn-primary:hover {
box-shadow:
0 0 0 1px rgba(45,227,181,0.40),
0 14px 32px rgba(45,227,181,0.30) !important;
transform: translateY(-1px);
}
/* Tier card on homepage — refined hover with subtle emerald edge */
.pkg-v5 .pkg-tier {
transition: 280ms cubic-bezier(0.2,0.7,0,1) !important;
}
/* Section dividers — small ornament marks between key sections */
.section-divider-mark {
display: flex; align-items: center; justify-content: center;
gap: 18px;
max-width: 320px;
margin: 0 auto;
padding: clamp(16px, 2vw, 24px) 0;
color: var(--gold);
}
.section-divider-mark-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.section-divider-mark-dot { font-size: 10px; opacity: 0.7; }
/* Subtle grain noise on body for premium texture (very subtle, 2% opacity) */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.018;
mix-blend-mode: multiply;
}
/* ====================================================================
PROCESS v6.7 — 2x2 GRID with HORIZONTAL editorial cards
Replaces the cramped 4-up grid; each card now gets ~50% width with
a large display number on the left and stacked content on the right.
==================================================================== */
/* Tighter section, hide the rail (not needed for 2x2) */
.how-section.how-v6 {
padding: clamp(40px, 5vw, 80px) 0 clamp(36px, 4vw, 64px) !important;
}
.how-v6 .how-v6-rail { display: none !important; }
.how-v6 .how-v6-ornament { margin: 14px auto 26px !important; }
/* 2x2 grid */
.how-v6 .how-v6-track {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
padding-top: 0 !important;
margin-top: 0 !important;
position: relative;
}
/* Horizontal card — flex with number left, body right */
.how-v6 .how-step {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: clamp(20px, 2.4vw, 28px) !important;
padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px) !important;
margin: 0 !important;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 14px 36px rgba(11,18,32,0.06) !important;
transition: 280ms cubic-bezier(0.2,0.7,0,1);
overflow: visible !important;
isolation: isolate;
min-height: 0 !important;
position: relative;
}
.how-v6 .how-step::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 22px !important;
right: 22px !important;
height: 2px !important;
background: linear-gradient(90deg, var(--accent), var(--glow));
opacity: 0;
transition: opacity 240ms;
border-radius: 999px;
}
.how-v6 .how-step:hover::before { opacity: 0.85; }
.how-v6 .how-step:hover {
transform: translateY(-3px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.18),
0 24px 56px rgba(14,122,101,0.18),
0 10px 24px rgba(11,18,32,0.08) !important;
}
/* LARGE display number (replaces the 40px badge) */
.how-v6 .how-step .how-step-num {
position: static !important;
flex-shrink: 0 !important;
width: auto !important;
height: auto !important;
display: inline-block !important;
border-radius: 0 !important;
background: linear-gradient(140deg, var(--accent) 0%, var(--glow) 60%, var(--sapphire) 130%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(54px, 6vw, 76px) !important;
line-height: 0.95 !important;
letter-spacing: -0.04em !important;
box-shadow: none !important;
transform: none !important;
overflow: visible !important;
isolation: auto !important;
padding-right: clamp(14px, 1.6vw, 22px);
border-right: 1px solid var(--hairline);
min-width: 70px;
text-align: left;
}
/* Body column — duration → title → description, stacked tightly */
.how-v6 .how-step .how-step-body {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
min-width: 0; /* allow flex item to shrink properly */
flex: 1 1 auto;
}
/* Duration pill */
.how-v6 .how-step .how-step-duration {
align-self: flex-start;
display: inline-flex !important;
align-items: center !important;
padding: 4px 10px !important;
background: var(--accent-soft) !important;
color: var(--accent) !important;
border: 1px solid rgba(14,122,101,0.20) !important;
border-radius: 999px !important;
font-family: var(--font-mono) !important;
font-size: 9.5px !important;
letter-spacing: 0.16em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
line-height: 1.4;
}
/* Title */
.how-v6 .how-step h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(17px, 1.4vw, 19px) !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
margin: 0 !important;
}
/* Description */
.how-v6 .how-step .how-step-desc {
font-family: var(--font-body) !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
color: var(--ink-2) !important;
margin: 0 !important;
max-width: 50ch;
}
/* Hide v6.5 leftover sub-list and num-ring/text spans */
.how-v6 .how-step .how-step-list,
.how-v6 .how-step .how-step-num-ring,
.how-v6 .how-step .how-step-num-text { display: none !important; }
/* Hide the v6.6 .how-step-head wrapper if it ever re-appears */
.how-v6 .how-step .how-step-head {
display: contents !important; /* let its children layout naturally */
}
/* Tablet — keep 2x2 (it's the sweet spot) */
@media (max-width: 900px) {
.how-v6 .how-v6-track { gap: 12px !important; }
.how-v6 .how-step {
padding: 18px 20px !important;
gap: 18px !important;
}
.how-v6 .how-step .how-step-num {
font-size: clamp(46px, 8vw, 60px) !important;
min-width: 56px;
padding-right: 14px;
}
}
/* Mobile — collapse to 1-column */
@media (max-width: 600px) {
.how-v6 .how-v6-track { grid-template-columns: 1fr !important; }
.how-v6 .how-step {
padding: 18px 18px !important;
gap: 16px !important;
}
.how-v6 .how-step .how-step-num {
font-size: 52px !important;
min-width: 52px;
padding-right: 14px;
}
}
/* ====================================================================
PROCESS v6.8 — refined card pattern (icon + step counter, no big numbers)
Replaces the oversized gradient 01/02/03/04 typography from v6.7.
==================================================================== */
/* Reset card to vertical column layout (was horizontal flex in v6.7) */
.how-v6 .how-step {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: clamp(22px, 2.4vw, 28px) clamp(22px, 2.6vw, 28px) clamp(22px, 2.4vw, 28px) !important;
position: relative;
overflow: visible !important;
}
/* Hide the big gradient number that v6.7 introduced */
.how-v6 .how-step .how-step-num,
.how-v6 .how-step .how-step-body {
display: none !important;
}
/* Top meta row: icon tile (left) + tiny step counter (right) */
.how-v6 .how-step .how-step-meta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
margin-bottom: 6px;
}
.how-v6 .how-step .how-step-icon {
display: inline-grid;
place-items: center;
width: 36px; height: 36px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent);
border: 1px solid rgba(14,122,101,0.16);
transition: 240ms cubic-bezier(0.2,0.7,0,1);
box-shadow: 0 4px 10px rgba(14,122,101,0.10);
}
.how-v6 .how-step:hover .how-step-icon {
background: linear-gradient(135deg, var(--accent-soft), rgba(45,227,181,0.16));
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(14,122,101,0.18);
}
.how-v6 .how-step .how-step-counter {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
/* Duration pill — slightly tighter, sits below the meta row */
.how-v6 .how-step .how-step-duration {
align-self: flex-start;
display: inline-flex !important;
align-items: center !important;
padding: 4px 10px !important;
background: var(--accent-soft) !important;
color: var(--accent) !important;
border: 1px solid rgba(14,122,101,0.20) !important;
border-radius: 999px !important;
font-family: var(--font-mono) !important;
font-size: 9.5px !important;
letter-spacing: 0.16em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
margin: 6px 0 4px !important;
line-height: 1.4;
}
/* Title and description sit cleanly beneath */
.how-v6 .how-step h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(18px, 1.4vw, 21px) !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
margin: 4px 0 0 !important;
}
.how-v6 .how-step .how-step-desc {
font-family: var(--font-body) !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
color: var(--ink-2) !important;
margin: 8px 0 0 !important;
max-width: 52ch;
}
/* Subtle accent rule at the bottom of each card — premium punctuation */
.how-v6 .how-step .how-step-rule {
display: block;
height: 1px;
margin-top: clamp(14px, 1.6vw, 18px);
background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 70%);
}
/* Card surface refinement — slightly cleaner shadow rhythm */
.how-v6 .how-step {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 12px 28px rgba(11,18,32,0.05) !important;
transition: 280ms cubic-bezier(0.2,0.7,0,1);
}
.how-v6 .how-step::before {
background: linear-gradient(90deg, var(--accent), var(--glow));
opacity: 0;
}
.how-v6 .how-step:hover::before { opacity: 0.85 !important; }
.how-v6 .how-step:hover {
transform: translateY(-3px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.18),
0 22px 50px rgba(14,122,101,0.16),
0 10px 24px rgba(11,18,32,0.06) !important;
}
/* Section header tightening — keep ornament tight to headline */
.how-section.how-v6 {
padding: clamp(40px, 5vw, 76px) 0 clamp(36px, 4vw, 60px) !important;
}
.how-v6 .how-v6-ornament { margin: 12px auto 24px !important; }
/* "Launched" pill — refined styling */
.how-v6 .how-v6-launched {
margin-top: clamp(20px, 3vw, 28px);
padding: 10px 18px 10px 14px !important;
background: linear-gradient(135deg, var(--midnight) 0%, var(--midnight-2) 100%) !important;
box-shadow:
0 0 0 1px rgba(45,227,181,0.30),
0 12px 28px rgba(11,18,32,0.18),
0 0 22px rgba(45,227,181,0.18) !important;
}
.how-v6 .how-v6-launched-text {
font-size: 12.5px !important;
letter-spacing: 0.02em;
}
/* Tablet — keep 2x2 */
@media (max-width: 900px) {
.how-v6 .how-step { padding: 22px 22px !important; gap: 6px !important; }
.how-v6 .how-step .how-step-icon { width: 34px; height: 34px; }
.how-v6 .how-step h3 { font-size: 17px !important; }
}
/* Mobile — 1-column */
@media (max-width: 600px) {
.how-v6 .how-v6-track { grid-template-columns: 1fr !important; gap: 12px !important; }
.how-v6 .how-step { padding: 20px 20px !important; }
.how-v6 .how-step h3 { font-size: 17px !important; }
.how-v6 .how-step .how-step-counter { font-size: 9.5px; letter-spacing: 0.14em; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V6.9 — LIVE PREVIEW EXPANSION + LOCAL MA POSITIONING
Adds:
· 3 new demo brands (.cl-* Pinepoint Cleaning, .lp-* Greenline
Landscape, .ap-* Northbound Apparel)
· Capability strip below the demo
· Service-area section with radius card + town columns
· Footer service-area strip
· Subtle premium polish on demo frame, tabs, arrows, CTAs
All scoped under their own classes — never bleeds into the rest of
the design system. Append-only; no prior rules modified.
════════════════════════════════════════════════════════════════════════ */
/* ── Demo section ambient glow (soft emerald wash behind frame) ─────── */
.demo-section { position: relative; overflow: hidden; }
.demo-section .demo-section-glow {
position: absolute;
inset: auto 50% -10% auto;
width: clamp(420px, 55vw, 720px);
height: clamp(420px, 55vw, 720px);
transform: translateX(50%);
border-radius: 50%;
background: radial-gradient(
circle at 50% 50%,
rgba(45, 227, 181, 0.18) 0%,
rgba(45, 227, 181, 0.08) 35%,
transparent 70%
);
filter: blur(40px);
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
.demo-section .container { position: relative; z-index: 1; }
/* ── Subtle premium polish on the existing demo frame ───────────────── */
.demo-browser-window {
transition: box-shadow 320ms cubic-bezier(0.2,0.7,0,1),
transform 320ms cubic-bezier(0.2,0.7,0,1);
}
.demo-browser-window:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.16),
0 30px 70px rgba(11,18,32,0.16),
0 12px 30px rgba(45,227,181,0.10);
}
/* Tab — soft border highlight + lift on hover */
.demo-tab {
transition: background 180ms ease, color 180ms ease,
transform 180ms cubic-bezier(0.2,0.7,0,1),
box-shadow 220ms ease, border-color 220ms ease;
}
.demo-tab:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(11,18,32,0.06);
}
.demo-tab.is-active {
box-shadow:
inset 0 0 0 1px rgba(14,122,101,0.30),
0 8px 22px rgba(14,122,101,0.10);
}
/* Arrow CTAs — gentle float on hover */
.demo-arrow:hover svg {
transform: translateX(0);
animation: demoArrowNudge 420ms cubic-bezier(0.2,0.7,0,1);
}
.demo-prev:hover svg { animation-name: demoArrowNudgeBack; }
@keyframes demoArrowNudge {
0% { transform: translateX(0); }
55% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
@keyframes demoArrowNudgeBack {
0% { transform: translateX(0); }
55% { transform: translateX(-3px); }
100% { transform: translateX(0); }
}
/* Inline `.btn .arrow` micro-nudge on hover (sitewide CTA polish) */
.btn:hover .arrow {
animation: ctaArrowSlide 520ms cubic-bezier(0.2,0.7,0,1);
}
@keyframes ctaArrowSlide {
0% { transform: translateX(0); }
50% { transform: translateX(4px); }
100% { transform: translateX(0); }
}
/* ════════════════════════════════════════════════════════════════════════
DEMO 01 — PINEPOINT CLEANING CO. (.cl-*)
Light · fresh · trust-led · quote-focused
Palette: pearl-white + sky blue + mint accent
════════════════════════════════════════════════════════════════════════ */
.demo-slide .cl-page,
.demo-modal-body .cl-page {
--cl-bg: #F5F8F8;
--cl-surface: #FFFFFF;
--cl-ink: #0F2233;
--cl-ink-2: #4B5C6B;
--cl-line: #E1E9EE;
--cl-line-2: #D5E1E8;
--cl-blue: #2563EB;
--cl-blue-deep: #1D4ED8;
--cl-mint: #10B981;
--cl-warm: #F0F7F4;
background:
radial-gradient(120% 90% at 100% 0%, rgba(16,185,129,0.06), transparent 55%),
radial-gradient(110% 80% at 0% 100%, rgba(37,99,235,0.05), transparent 60%),
var(--cl-bg);
color: var(--cl-ink);
font-family: 'Sora', sans-serif;
padding: 18px 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 420px;
border-radius: inherit;
}
/* Nav */
.cl-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 10px 14px;
background: var(--cl-surface);
border: 1px solid var(--cl-line);
border-radius: 12px;
box-shadow: 0 1px 0 rgba(15,34,51,0.02), 0 6px 14px rgba(15,34,51,0.04);
}
.cl-logo {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: -0.01em;
color: var(--cl-ink);
}
.cl-logo em {
font-family: 'Instrument Serif', serif;
font-style: italic;
color: var(--cl-blue);
font-weight: 400;
margin-left: 2px;
}
.cl-logo-mark {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-mint) 100%);
color: #fff;
font-size: 0.85rem;
line-height: 1;
}
.cl-nav-links {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 16px;
flex: 1;
justify-content: center;
color: var(--cl-ink-2);
font-size: 0.78rem;
font-weight: 500;
}
.cl-cta {
background: var(--cl-blue);
color: #fff;
border: 0;
padding: 8px 14px;
border-radius: 999px;
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 16px rgba(37,99,235,0.22);
transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.cl-cta:hover { background: var(--cl-blue-deep); transform: translateY(-1px); }
.cl-cta-ghost {
background: transparent; color: var(--cl-ink); box-shadow: none;
border: 1px solid var(--cl-line-2);
}
.cl-cta-ghost:hover { background: var(--cl-warm); }
.cl-cta-block { display: block; width: 100%; text-align: center; padding: 11px 14px; }
/* Hero — split */
.cl-hero {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 16px;
align-items: stretch;
}
.cl-hero-copy {
background: var(--cl-surface);
border: 1px solid var(--cl-line);
border-radius: 14px;
padding: 18px 20px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.cl-pill {
display: inline-flex; align-items: center; gap: 8px;
background: var(--cl-warm);
color: var(--cl-blue-deep);
border: 1px solid rgba(37,99,235,0.18);
padding: 5px 11px 5px 8px;
border-radius: 999px;
width: fit-content;
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 600;
}
.cl-pill-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--cl-mint);
box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
.cl-h {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.4rem, 2.4vw, 2.05rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 4px 0 2px;
color: var(--cl-ink);
}
.cl-h em {
font-family: 'Instrument Serif', serif;
font-style: italic;
color: var(--cl-blue);
font-weight: 400;
}
.cl-sub {
font-size: 0.85rem;
line-height: 1.5;
color: var(--cl-ink-2);
max-width: 36ch;
margin: 0;
}
.cl-hero-ctas { display: flex; gap: 8px; margin-top: 4px; }
.cl-cta-primary { background: var(--cl-blue); }
.cl-trust-row {
display: flex; flex-wrap: wrap; gap: 8px 12px;
align-items: center;
font-size: 0.7rem;
color: var(--cl-ink-2);
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed var(--cl-line-2);
}
.cl-trust-row strong { color: var(--cl-ink); font-weight: 600; }
.cl-trust-sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--cl-line-2);
display: inline-block;
}
/* Quote card */
.cl-quote-card {
background: linear-gradient(180deg, var(--cl-surface) 0%, var(--cl-warm) 100%);
border: 1px solid var(--cl-line);
border-radius: 14px;
padding: 14px 16px 16px;
display: flex; flex-direction: column;
gap: 8px;
box-shadow: 0 12px 26px rgba(37,99,235,0.06);
}
.cl-quote-head {
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px dashed var(--cl-line-2);
padding-bottom: 8px;
margin-bottom: 4px;
}
.cl-quote-head strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.95rem;
color: var(--cl-ink);
}
.cl-quote-head span {
font-size: 0.65rem;
color: var(--cl-ink-2);
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.cl-quote-row {
display: flex; justify-content: space-between;
font-size: 0.78rem;
color: var(--cl-ink-2);
padding: 3px 0;
}
.cl-quote-row strong { color: var(--cl-ink); font-weight: 600; }
.cl-quote-result {
background: var(--cl-blue);
color: #fff;
border-radius: 10px;
padding: 12px 14px;
margin-top: 6px;
display: flex; flex-direction: column; gap: 2px;
}
.cl-quote-result-label {
font-size: 0.62rem;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.78);
}
.cl-quote-result-num {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
}
.cl-quote-result-meta {
font-size: 0.7rem;
color: rgba(255,255,255,0.84);
}
/* Service grid */
.cl-svc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.cl-svc {
position: relative;
background: var(--cl-surface);
border: 1px solid var(--cl-line);
border-radius: 12px;
padding: 12px 12px 14px;
display: flex; flex-direction: column; gap: 4px;
transition: transform 220ms cubic-bezier(0.2,0.7,0,1), box-shadow 220ms ease, border-color 220ms ease;
}
.cl-svc:hover {
transform: translateY(-2px);
border-color: rgba(37,99,235,0.30);
box-shadow: 0 14px 28px rgba(15,34,51,0.06);
}
.cl-svc-icon {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--cl-warm);
color: var(--cl-blue);
border-radius: 8px;
font-size: 0.95rem;
}
.cl-svc strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.88rem;
color: var(--cl-ink);
margin-top: 2px;
}
.cl-svc-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--cl-blue-deep);
font-weight: 600;
}
.cl-svc em {
font-style: normal;
font-size: 0.72rem;
color: var(--cl-ink-2);
line-height: 1.45;
margin-top: 2px;
}
.cl-svc-feat {
background: linear-gradient(180deg, #FFFFFF 0%, var(--cl-warm) 100%);
border-color: rgba(16,185,129,0.30);
}
.cl-svc-tag {
position: absolute;
top: -8px; right: 10px;
background: var(--cl-mint);
color: #fff;
padding: 3px 8px;
border-radius: 999px;
font-size: 0.58rem;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 600;
}
/* Stat strip */
.cl-stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--cl-surface);
border: 1px solid var(--cl-line);
border-radius: 12px;
padding: 10px 14px;
margin-top: 2px;
}
.cl-stat-strip > div {
text-align: center;
padding: 4px 6px;
border-right: 1px solid var(--cl-line-2);
}
.cl-stat-strip > div:last-child { border-right: 0; }
.cl-stat-strip strong {
display: block;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.05rem;
color: var(--cl-ink);
font-weight: 700;
}
.cl-stat-strip span {
font-size: 0.66rem;
color: var(--cl-ink-2);
}
/* Cleaning responsive */
@media (max-width: 760px) {
.demo-slide .cl-page,
.demo-modal-body .cl-page { padding: 14px 14px 16px; gap: 10px; min-height: auto; }
.cl-nav-links { display: none; }
.cl-hero { grid-template-columns: 1fr; gap: 10px; }
.cl-svc-grid { grid-template-columns: repeat(2, 1fr); }
.cl-stat-strip { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cl-stat-strip > div { border-right: 0; border-bottom: 1px solid var(--cl-line-2); padding-bottom: 6px; }
.cl-stat-strip > div:nth-last-child(-n+2) { border-bottom: 0; }
}
/* ════════════════════════════════════════════════════════════════════════
DEMO 05 — GREENLINE LANDSCAPE CO. (.lp-*)
Warm cream surface · forest green ink · amber accent
════════════════════════════════════════════════════════════════════════ */
.demo-slide .lp-page,
.demo-modal-body .lp-page {
--lp-bg: #F6F1E4;
--lp-bg-2: #EDE6D2;
--lp-surface: #FBF8EE;
--lp-ink: #1B2E1F;
--lp-ink-2: #3F4F40;
--lp-ink-3: #6E7A6B;
--lp-line: #DCD3BB;
--lp-line-2: #C9BE9F;
--lp-green: #2D4A2C;
--lp-green-2: #1F3520;
--lp-amber: #C68A2E;
--lp-amber-2: #A0701D;
background:
radial-gradient(110% 70% at 100% 0%, rgba(198,138,46,0.08), transparent 55%),
radial-gradient(120% 80% at 0% 100%, rgba(45,74,44,0.06), transparent 60%),
linear-gradient(180deg, var(--lp-bg) 0%, var(--lp-bg-2) 100%);
color: var(--lp-ink);
font-family: 'Sora', sans-serif;
padding: 16px 20px 20px;
display: flex; flex-direction: column;
gap: 12px;
min-height: 420px;
border-radius: inherit;
}
.lp-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
background: var(--lp-surface);
border: 1px solid var(--lp-line);
border-radius: 10px;
padding: 10px 14px;
}
.lp-logo {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 0.95rem;
color: var(--lp-green-2);
letter-spacing: 0.01em;
text-transform: uppercase;
}
.lp-logo em {
font-family: 'Instrument Serif', serif;
font-style: italic;
text-transform: none;
color: var(--lp-amber-2);
font-weight: 400;
letter-spacing: 0;
}
.lp-logo-mark {
color: var(--lp-amber);
font-size: 0.95rem;
transform: translateY(-1px);
}
.lp-nav-links {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 16px;
flex: 1;
justify-content: center;
color: var(--lp-ink-2);
font-size: 0.76rem;
font-weight: 500;
}
.lp-cta {
background: var(--lp-green);
color: var(--lp-bg);
border: 0;
padding: 9px 14px;
border-radius: 4px;
font-family: inherit;
font-weight: 600;
font-size: 0.76rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 180ms ease, transform 180ms ease;
}
.lp-cta:hover { background: var(--lp-green-2); transform: translateY(-1px); }
.lp-cta-primary { background: var(--lp-amber); }
.lp-cta-primary:hover { background: var(--lp-amber-2); }
.lp-cta-ghost {
background: transparent;
color: var(--lp-green);
border: 1px solid var(--lp-line-2);
}
.lp-cta-ghost:hover { background: var(--lp-surface); }
/* Banner — seasonal availability */
.lp-banner {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(90deg, var(--lp-green) 0%, var(--lp-green-2) 100%);
color: var(--lp-bg);
padding: 8px 14px;
border-radius: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
.lp-banner-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--lp-amber);
box-shadow: 0 0 0 4px rgba(198,138,46,0.30);
}
/* Hero — split */
.lp-hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 14px;
}
.lp-hero-copy {
background: var(--lp-surface);
border: 1px solid var(--lp-line);
border-radius: 8px;
padding: 18px 20px;
display: flex; flex-direction: column; gap: 8px;
}
.lp-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--lp-amber-2);
margin: 0;
font-weight: 600;
}
.lp-h {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--lp-green-2);
margin: 4px 0 2px;
}
.lp-h em {
font-family: 'Instrument Serif', serif;
font-style: italic;
color: var(--lp-amber-2);
font-weight: 400;
}
.lp-sub {
font-size: 0.85rem;
color: var(--lp-ink-2);
line-height: 1.5;
max-width: 38ch;
margin: 0;
}
.lp-hero-ctas { display: flex; gap: 8px; margin-top: 4px; }
.lp-meta-row {
display: flex; flex-wrap: wrap; gap: 8px 12px;
align-items: center;
font-size: 0.7rem;
color: var(--lp-ink-3);
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--lp-line);
}
.lp-meta-row strong { color: var(--lp-green-2); font-weight: 600; }
.lp-meta-sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--lp-line-2);
display: inline-block;
}
/* Feature card */
.lp-feature-card {
background: var(--lp-green-2);
color: var(--lp-bg);
border-radius: 8px;
padding: 16px 18px;
display: flex; flex-direction: column; gap: 6px;
border: 1px solid rgba(198,138,46,0.30);
box-shadow: 0 14px 28px rgba(31,53,32,0.16);
}
.lp-feature-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--lp-amber);
font-weight: 600;
}
.lp-feature-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--lp-bg);
}
.lp-feature-loc {
font-size: 0.72rem;
color: rgba(246,241,228,0.75);
}
.lp-feature-spec {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 6px;
}
.lp-feature-spec > div {
background: rgba(246,241,228,0.06);
border: 1px solid rgba(198,138,46,0.20);
border-radius: 4px;
padding: 8px;
display: flex; flex-direction: column; gap: 2px;
}
.lp-feature-spec span {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.10em;
color: rgba(246,241,228,0.66);
font-family: 'JetBrains Mono', monospace;
}
.lp-feature-spec strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.78rem;
color: var(--lp-bg);
font-weight: 600;
}
.lp-feature-rule {
height: 1px; display: block;
background: linear-gradient(90deg, var(--lp-amber) 0%, transparent 80%);
margin-top: 6px;
}
.lp-feature-foot {
font-size: 0.68rem;
color: rgba(246,241,228,0.66);
font-style: italic;
}
/* Service grid */
.lp-svc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.lp-svc {
background: var(--lp-surface);
border: 1px solid var(--lp-line);
border-radius: 6px;
padding: 12px 12px 14px;
display: flex; flex-direction: column; gap: 4px;
transition: transform 220ms cubic-bezier(0.2,0.7,0,1), border-color 220ms ease;
}
.lp-svc:hover {
transform: translateY(-2px);
border-color: var(--lp-amber);
}
.lp-svc-num {
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
color: var(--lp-amber-2);
font-weight: 600;
letter-spacing: 0.10em;
}
.lp-svc strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.85rem;
color: var(--lp-green-2);
font-weight: 600;
}
.lp-svc em {
font-style: normal;
font-size: 0.72rem;
color: var(--lp-ink-2);
line-height: 1.45;
}
.lp-stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--lp-green-2);
color: var(--lp-bg);
border-radius: 6px;
padding: 12px 14px;
}
.lp-stat-strip > div {
text-align: center;
border-right: 1px solid rgba(198,138,46,0.20);
padding: 0 6px;
}
.lp-stat-strip > div:last-child { border-right: 0; }
.lp-stat-strip strong {
display: block;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.0rem;
color: var(--lp-amber);
font-weight: 700;
}
.lp-stat-strip span {
font-size: 0.64rem;
color: rgba(246,241,228,0.78);
}
@media (max-width: 760px) {
.demo-slide .lp-page,
.demo-modal-body .lp-page { padding: 14px 14px 16px; min-height: auto; }
.lp-nav-links { display: none; }
.lp-hero { grid-template-columns: 1fr; }
.lp-svc-grid { grid-template-columns: repeat(2, 1fr); }
.lp-stat-strip { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
.lp-stat-strip > div { border-right: 0; padding: 6px 0; }
.lp-feature-spec { grid-template-columns: 1fr 1fr 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════
DEMO 06 — NORTHBOUND APPAREL CO. (.ap-*)
Editorial monochrome · drop-driven · streetwear minimalism
════════════════════════════════════════════════════════════════════════ */
.demo-slide .ap-page,
.demo-modal-body .ap-page {
--ap-bg: #F2EEE6;
--ap-bg-2: #ECE7DC;
--ap-surface: #FFFFFF;
--ap-ink: #0E0E12;
--ap-ink-2: #4A4A55;
--ap-ink-3: #8A8A94;
--ap-line: #D9D2C2;
--ap-line-2: #C2BAA8;
--ap-olive: #6F7A5A;
--ap-rust: #B85333;
background:
linear-gradient(180deg, var(--ap-bg) 0%, var(--ap-bg-2) 100%);
color: var(--ap-ink);
font-family: 'Sora', sans-serif;
padding: 16px 22px 20px;
display: flex; flex-direction: column;
gap: 14px;
min-height: 420px;
border-radius: inherit;
}
.ap-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 10px 0 12px;
border-bottom: 1px solid var(--ap-line);
}
.ap-logo {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.18em;
color: var(--ap-ink);
text-transform: uppercase;
}
.ap-logo-dot { color: var(--ap-rust); }
.ap-nav-links {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 18px;
flex: 1;
justify-content: center;
color: var(--ap-ink-2);
font-size: 0.74rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ap-nav-meta { display: inline-flex; align-items: center; gap: 12px; }
.ap-nav-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
color: var(--ap-ink-2);
text-transform: uppercase;
letter-spacing: 0.10em;
}
.ap-cta {
background: var(--ap-ink);
color: var(--ap-bg);
border: 0;
padding: 9px 16px;
border-radius: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
cursor: pointer;
transition: background 180ms ease, transform 180ms ease;
}
.ap-cta:hover { background: var(--ap-rust); transform: translateY(-1px); }
.ap-cta-solid { background: var(--ap-ink); color: var(--ap-bg); }
.ap-cta-ghost {
background: transparent;
color: var(--ap-ink);
border: 1px solid var(--ap-ink);
}
.ap-cta-ghost:hover { background: var(--ap-ink); color: var(--ap-bg); }
/* Hero — centered editorial */
.ap-hero {
text-align: center;
padding: 18px 0 8px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ap-hero-tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
color: var(--ap-ink-2);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 500;
}
.ap-hero-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ap-rust);
box-shadow: 0 0 0 4px rgba(184,83,51,0.18);
}
.ap-h {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.9rem, 4.4vw, 3.4rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ap-ink);
margin: 4px 0 2px;
text-transform: uppercase;
}
.ap-h em {
font-family: 'Instrument Serif', serif;
font-style: italic;
text-transform: none;
color: var(--ap-olive);
font-weight: 400;
letter-spacing: -0.01em;
}
.ap-sub {
max-width: 44ch;
font-size: 0.82rem;
color: var(--ap-ink-2);
line-height: 1.55;
margin: 4px 0 4px;
}
.ap-hero-ctas { display: flex; gap: 10px; margin-top: 4px; }
/* Product grid */
.ap-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.ap-prod {
background: var(--ap-surface);
border: 1px solid var(--ap-line);
border-radius: 0;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform 220ms cubic-bezier(0.2,0.7,0,1), border-color 220ms ease;
}
.ap-prod:hover {
transform: translateY(-2px);
border-color: var(--ap-ink);
}
.ap-prod-img {
height: 110px;
position: relative;
}
.ap-prod-img-1 { background: linear-gradient(135deg, #2A2D27 0%, #4A5142 60%, #6F7A5A 100%); }
.ap-prod-img-2 { background: linear-gradient(160deg, #1B1E22 0%, #353940 80%); }
.ap-prod-img-3 { background: linear-gradient(135deg, #C9C0AC 0%, #E2DACA 60%, #6F7A5A 130%); }
.ap-prod-img-4 { background: linear-gradient(150deg, #1B1E22 0%, #B85333 110%); }
.ap-prod-badge {
position: absolute;
top: 8px; left: 8px;
background: var(--ap-bg);
color: var(--ap-ink);
padding: 3px 8px;
border-radius: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.ap-prod-badge-low {
background: var(--ap-rust);
color: var(--ap-bg);
}
.ap-prod-meta {
padding: 10px 12px 12px;
display: flex; flex-direction: column; gap: 2px;
}
.ap-prod-meta strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.85rem;
color: var(--ap-ink);
font-weight: 600;
}
.ap-prod-meta span {
font-size: 0.68rem;
color: var(--ap-ink-3);
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ap-prod-meta em {
font-style: normal;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.92rem;
color: var(--ap-ink);
font-weight: 700;
margin-top: 2px;
}
/* Mailing list band */
.ap-list-band {
background: var(--ap-ink);
color: var(--ap-bg);
padding: 14px 18px;
border-radius: 0;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 14px;
align-items: center;
}
.ap-list-copy { display: flex; flex-direction: column; gap: 2px; }
.ap-list-copy strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.95rem;
color: var(--ap-bg);
}
.ap-list-copy span {
font-size: 0.72rem;
color: rgba(242,238,230,0.62);
}
.ap-list-form { display: flex; gap: 0; }
.ap-list-input {
flex: 1;
background: rgba(242,238,230,0.08);
color: rgba(242,238,230,0.6);
border: 1px solid rgba(242,238,230,0.18);
border-right: 0;
padding: 10px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
text-transform: lowercase;
}
.ap-list-form .ap-cta {
border-radius: 0;
background: var(--ap-bg);
color: var(--ap-ink);
}
.ap-list-form .ap-cta:hover { background: var(--ap-rust); color: var(--ap-bg); }
@media (max-width: 760px) {
.demo-slide .ap-page,
.demo-modal-body .ap-page { padding: 14px 16px 16px; min-height: auto; }
.ap-nav-links { display: none; }
.ap-product-grid { grid-template-columns: repeat(2, 1fr); }
.ap-list-band { grid-template-columns: 1fr; gap: 10px; }
}
/* ════════════════════════════════════════════════════════════════════════
CAPABILITY STRIP — universal "every demo includes"
Sits below the demo controls. Static. Subtle.
════════════════════════════════════════════════════════════════════════ */
.demo-caps {
margin-top: clamp(20px, 2.5vw, 32px);
padding: clamp(18px, 2vw, 24px) clamp(16px, 2.4vw, 28px);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
border: 1px solid var(--hairline);
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 18px 40px rgba(11,18,32,0.05);
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.demo-caps::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(45,227,181,0.18) 50%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.6;
}
.demo-caps-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent);
font-weight: 600;
}
.demo-caps-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.demo-caps-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent-soft);
color: var(--accent-hover);
border: 1px solid rgba(14,122,101,0.20);
padding: 7px 13px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
transition: transform 180ms cubic-bezier(0.2,0.7,0,1), background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.demo-caps-chip::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(14,122,101,0.12);
}
.demo-caps-chip:hover {
transform: translateY(-1px);
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.demo-caps-chip:hover::before {
background: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}
.demo-caps-note {
margin: 4px auto 0;
max-width: 70ch;
font-size: 0.85rem;
color: var(--ink-2);
line-height: 1.55;
}
@media (max-width: 600px) {
.demo-caps { padding: 16px 14px 18px; gap: 10px; }
.demo-caps-chip { font-size: 0.74rem; padding: 6px 11px; }
.demo-caps-note { font-size: 0.8rem; }
}
/* ════════════════════════════════════════════════════════════════════════
SERVICE AREA — Massachusetts coverage section
Editorial column list + decorative radius card
════════════════════════════════════════════════════════════════════════ */
.area-section {
position: relative;
padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 6vw, 80px);
overflow: hidden;
}
.area-section .area-bg {
position: absolute;
inset: 0;
background:
radial-gradient(60% 60% at 18% 0%, rgba(14,122,101,0.07), transparent 60%),
radial-gradient(50% 60% at 96% 100%, rgba(168,134,82,0.07), transparent 60%);
pointer-events: none;
z-index: 0;
}
.area-section .area-container { position: relative; z-index: 1; }
.area-head { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 46px); }
.area-h { max-width: 22ch; }
.area-sub { max-width: 64ch; color: var(--ink-2); }
.area-sub strong { color: var(--ink); font-weight: 600; }
.area-layout {
display: grid;
grid-template-columns: 0.85fr 1.4fr;
gap: clamp(20px, 2.6vw, 36px);
align-items: start;
}
/* Radius card */
.area-radius {
position: relative;
}
.area-radius-card {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
border: 1px solid var(--hairline);
border-radius: 20px;
padding: 22px 24px 24px;
box-shadow:
0 0 0 1px rgba(14,122,101,0.05),
0 22px 50px rgba(11,18,32,0.07);
display: flex; flex-direction: column;
gap: 18px;
position: relative;
overflow: hidden;
}
.area-radius-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 60% at 50% 50%, rgba(45,227,181,0.06), transparent 70%);
pointer-events: none;
}
.area-radius-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent);
font-weight: 600;
position: relative;
}
.area-radius-stage {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 280px;
margin: 0 auto;
display: flex; align-items: center; justify-content: center;
}
.area-radius-ring {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(14,122,101,0.32);
}
.area-radius-ring-1 { inset: 32%; border-color: rgba(14,122,101,0.45); }
.area-radius-ring-2 { inset: 16%; border-color: rgba(14,122,101,0.30); }
.area-radius-ring-3 { inset: 0%; border-color: rgba(14,122,101,0.18); }
.area-radius-pin {
position: relative;
width: 14px; height: 14px;
z-index: 2;
}
.area-radius-pin-dot {
position: absolute; inset: 0;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(14,122,101,0.18), 0 4px 10px rgba(14,122,101,0.30);
}
.area-radius-pin-pulse {
position: absolute; inset: -6px;
border-radius: 50%;
border: 1px solid rgba(45,227,181,0.55);
animation: areaPinPulse 2.4s ease-out infinite;
}
@keyframes areaPinPulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(2.4); opacity: 0; }
}
.area-radius-anchor {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 999px;
padding: 4px 9px;
white-space: nowrap;
}
.area-radius-anchor-medway {
bottom: 50%;
left: 50%;
transform: translate(-50%, calc(-50% - 26px));
color: var(--accent);
border-color: rgba(14,122,101,0.28);
}
.area-radius-anchor-boston {
top: 14%;
right: 6%;
}
.area-radius-anchor-worcester {
top: 36%;
left: 0;
}
.area-radius-anchor-providence {
bottom: 10%;
left: 30%;
}
.area-radius-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
background: rgba(14,122,101,0.05);
border: 1px solid rgba(14,122,101,0.14);
border-radius: 12px;
padding: 12px;
}
.area-radius-stats > div {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 2px;
}
.area-radius-stats strong {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.05rem;
color: var(--ink);
font-weight: 700;
}
.area-radius-stats span {
font-size: 0.68rem;
color: var(--ink-3);
}
/* Towns */
.area-towns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.8vw, 24px);
}
.area-col {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 16px;
padding: 18px 20px 20px;
box-shadow: var(--shadow-sm);
transition: transform 280ms cubic-bezier(0.2,0.7,0,1), box-shadow 280ms ease, border-color 280ms ease;
}
.area-col:hover {
transform: translateY(-2px);
border-color: rgba(14,122,101,0.20);
box-shadow: 0 0 0 1px rgba(14,122,101,0.08), 0 18px 40px rgba(11,18,32,0.07);
}
.area-col-h {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 12px;
display: flex; align-items: center; gap: 8px;
}
.area-col-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
background: var(--accent-soft);
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
}
.area-col-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.area-col-list li {
font-size: 0.86rem;
color: var(--ink-2);
padding: 4px 0;
border-bottom: 1px dashed var(--hairline);
transition: color 180ms ease, padding-left 180ms ease;
}
.area-col-list li:hover {
color: var(--accent);
padding-left: 4px;
}
.area-col-note {
margin: 12px 0 0;
font-size: 0.78rem;
color: var(--ink-3);
line-height: 1.5;
font-style: italic;
}
/* Industries strip */
.area-industries {
margin-top: clamp(28px, 3.6vw, 44px);
padding: 16px clamp(16px, 2vw, 22px);
background: linear-gradient(180deg, var(--surface-warm) 0%, var(--surface) 100%);
border: 1px solid var(--hairline);
border-radius: 999px;
display: flex; align-items: center;
gap: 14px;
overflow: hidden;
}
.area-industries-label {
flex-shrink: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 600;
padding-right: 12px;
border-right: 1px solid var(--hairline);
}
.area-industries-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap;
gap: 6px 14px;
color: var(--ink-2);
font-size: 0.85rem;
}
.area-industries-list li {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 500;
color: var(--ink);
position: relative;
}
.area-industries-list li:nth-child(odd) {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
color: var(--accent);
}
/* CTA row */
.area-cta-row {
margin-top: clamp(28px, 3vw, 38px);
display: flex; align-items: center; flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
}
.area-cta-note {
font-size: 0.88rem;
color: var(--ink-2);
max-width: 48ch;
line-height: 1.5;
}
@media (max-width: 1000px) {
.area-layout { grid-template-columns: 1fr; }
.area-radius-stage { max-width: 240px; }
}
@media (max-width: 720px) {
.area-towns { grid-template-columns: 1fr; }
.area-col-list { grid-template-columns: 1fr 1fr; }
.area-industries { border-radius: 16px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
.area-industries-label { border-right: 0; border-bottom: 1px solid var(--hairline); padding-right: 0; padding-bottom: 8px; width: 100%; }
.area-cta-row { justify-content: flex-start; }
}
/* ════════════════════════════════════════════════════════════════════════
FOOTER service-area town strip
════════════════════════════════════════════════════════════════════════ */
.footer-area {
margin-top: clamp(28px, 3.4vw, 44px);
padding: 18px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
display: grid;
grid-template-columns: minmax(180px, 220px) 1fr;
gap: 18px;
align-items: start;
}
.footer-area-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 600;
}
.footer-area-text {
margin: 0;
font-size: 0.85rem;
color: var(--ink-2);
line-height: 1.7;
}
@media (max-width: 720px) {
.footer-area { grid-template-columns: 1fr; gap: 8px; }
}
/* ════════════════════════════════════════════════════════════════════════
SUBTLE SECTIONAL POLISH — eyebrows + section-headlines
Adds a soft color-fade on eyebrows in viewport via existing fade-up.
Keeps existing rules intact; just adds gentle motion.
════════════════════════════════════════════════════════════════════════ */
.eyebrow .eyebrow-num {
transition: color 220ms ease, letter-spacing 220ms ease;
}
.section:hover .eyebrow .eyebrow-num,
.section .eyebrow:hover .eyebrow-num {
color: var(--accent);
letter-spacing: 0.18em;
}
/* ════════════════════════════════════════════════════════════════════════
▼ V7.0 — REFINED HERO · LOGO · CONTACT FORM · SERVICE AREA · SWIPE
Append-only refinement layer. Higher specificity overrides where
needed — never modifies prior rules.
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
1) NAVBAR — premium balance, less crowded
════════════════════════════════════════════════════════════════════════ */
.navbar .nav-container {
gap: clamp(14px, 2vw, 28px) !important;
}
/* Logo mark — tighter with the wordmark */
.navbar .logo { gap: 10px !important; }
.navbar .logo .logo-mark {
width: 32px !important;
height: 32px !important;
transition: transform 320ms cubic-bezier(0.2,0.7,0,1);
}
.navbar .logo:hover .logo-mark { transform: rotate(-3deg) scale(1.04); }
/* Wordmark divider — emerald (was coral) for brand cohesion */
.navbar .logo-divider,
.footer .logo-divider {
background: var(--accent) !important;
width: 4px !important;
height: 4px !important;
border-radius: 1px;
align-self: center;
margin: 0 !important;
box-shadow: 0 0 0 3px rgba(14,122,101,0.10);
}
.navbar .logo-accent,
.footer .logo-accent {
color: var(--ink-3) !important;
font-weight: 600 !important;
letter-spacing: 0.10em !important;
font-size: 0.68rem !important;
}
/* Refined nav-status pill — premium, restrained */
.navbar .nav-status {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin-left: 8px !important;
padding: 4px 11px 4px 9px;
background: rgba(255,255,255,0.55);
border: 1px solid var(--hairline);
border-radius: 999px;
color: var(--ink-3) !important;
font-size: 0.63rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
font-weight: 600;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 4px 10px rgba(11,18,32,0.04);
transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.navbar.scrolled .nav-status {
background: var(--surface);
color: var(--ink-2) !important;
}
.navbar .nav-status::before {
width: 6px !important; height: 6px !important;
background: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(14,122,101,0.14) !important;
}
/* Hide nav-status sooner so it never crowds the wordmark on tablets */
@media (max-width: 1180px) {
.navbar .nav-status { display: none !important; }
}
/* Tighten nav links — better balance with logo + CTA */
.navbar .nav-links { gap: 2px !important; }
.navbar .nav-links li a.nav-link,
.navbar .nav-links li > a:not(.btn) {
padding: 8px 12px !important;
font-size: 0.83rem !important;
color: var(--ink-2) !important;
transition: color 200ms ease;
}
.navbar .nav-links li a.nav-link:hover,
.navbar .nav-links li > a:not(.btn):hover {
color: var(--ink) !important;
}
/* Desktop CTA — slightly more confident */
.navbar .nav-cta-desktop {
padding: 11px 18px 11px 20px !important;
border-radius: 999px !important;
background: var(--ink) !important;
color: var(--paper) !important;
border: 1px solid var(--ink) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.10),
0 8px 18px rgba(11,18,32,0.18) !important;
transition: transform 220ms cubic-bezier(0.2,0.7,0,1), box-shadow 220ms ease, background 220ms ease;
}
.navbar .nav-cta-desktop:hover {
transform: translateY(-1px);
background: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.30),
0 14px 30px rgba(14,122,101,0.30) !important;
}
/* ════════════════════════════════════════════════════════════════════════
2) HERO — more breathing room, more intentional decoration
════════════════════════════════════════════════════════════════════════ */
.hero {
padding: clamp(140px, 16vh, 200px) 0 clamp(70px, 9vh, 110px) !important;
}
/* Live pill — refined two-segment composition */
.hero .hero-content .hero-live-pill {
margin-bottom: 32px !important;
padding: 7px 16px 7px 12px !important;
font-size: 11px !important;
letter-spacing: 0.10em !important;
background: rgba(255,255,255,0.85) !important;
border-color: var(--hairline) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 6px 18px rgba(14,122,101,0.08) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero .hero-content .hero-live-pill::before {
opacity: 0.14 !important;
filter: blur(8px) !important;
}
.hero .hero-content .hero-live-text { letter-spacing: 0.08em !important; }
.hero .hero-content .hero-live-meta { font-size: 10.5px !important; letter-spacing: 0.12em !important; }
.hero .hero-content .hero-live-sep {
height: 10px !important;
background: var(--hairline-soft) !important;
}
/* Headline — give it room */
.hero .hero-content .hero-headline {
margin-bottom: 26px !important;
line-height: 0.94 !important;
}
/* Sub copy — slightly tighter and more poised */
.hero .hero-content .hero-sub {
max-width: 48ch !important;
margin-bottom: 32px !important;
color: var(--ink-2) !important;
}
/* CTAs — more breathing room above the meta line */
.hero .hero-content .hero-ctas { margin-bottom: 28px !important; }
/* Hero meta — refined as a single mono caption row */
.hero .hero-content .hero-meta {
padding-top: 18px !important;
border-top: 1px solid var(--hairline-soft) !important;
color: var(--ink-3) !important;
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px !important;
font-size: 10.5px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
}
.hero .hero-content .hero-meta strong {
color: var(--accent) !important;
font-weight: 600 !important;
}
.hero .hero-content .hero-meta-sep {
width: 3px; height: 3px;
background: var(--hairline);
border-radius: 50%;
display: inline-block;
}
/* Mockup — softer, more refined glow ring */
.hero-mockup .hero-mockup-glow {
inset: -28px !important;
background:
radial-gradient(closest-side, rgba(14,122,101,0.14), transparent 70%),
radial-gradient(closest-side at 80% 20%, rgba(45,227,181,0.10), transparent 60%),
radial-gradient(closest-side at 20% 80%, rgba(61,111,224,0.10), transparent 60%) !important;
filter: blur(14px) !important;
}
.hero-mockup .hero-mockup-browser {
box-shadow:
0 0 0 1px var(--hairline),
0 36px 70px rgba(14,122,101,0.14),
0 8px 22px rgba(11,18,32,0.08) !important;
}
/* Toasts — tighter, less attention-grabbing, more intentional */
.hero-toast {
padding: 10px 13px 10px 11px !important;
min-width: 200px !important;
border-radius: 12px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.08),
0 14px 32px rgba(14,122,101,0.14),
0 4px 12px rgba(11,18,32,0.08) !important;
}
.hero-toast-1 { top: 10% !important; right: -8px !important; }
.hero-toast-2 { bottom: 14% !important; left: -16px !important; }
/* ════════════════════════════════════════════════════════════════════════
3) CONTACT FORM — premium intake experience
Restyles inputs, sections the form into visual steps via :nth-of-type
without changing HTML. Lighter inputs, mono caps labels, accent CTA.
════════════════════════════════════════════════════════════════════════ */
/* Section breath */
.contact-section {
padding: clamp(48px, 6vw, 96px) 0 clamp(60px, 8vw, 120px) !important;
}
.contact-section .container { position: relative; }
/* Layout — slightly more generous gap, sticky sidebar */
.contact-layout {
gap: clamp(28px, 3.4vw, 56px) !important;
align-items: start;
}
@media (min-width: 1100px) {
.contact-sidebar {
position: sticky;
top: 100px;
}
}
/* The form card — wrap inputs in a soft pearl panel */
.contact-form {
position: relative;
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 40px) !important;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 22px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 24px 60px rgba(11,18,32,0.08),
0 8px 22px rgba(14,122,101,0.06) !important;
overflow: hidden;
}
.contact-form::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(14,122,101,0.45) 35%,
rgba(45,227,181,0.55) 50%,
rgba(14,122,101,0.45) 65%,
transparent 100%);
border-radius: 22px 22px 0 0;
opacity: 0.85;
pointer-events: none;
}
/* Step header — synthesized via the first form-row to feel guided */
.contact-form .form-row:first-of-type::before,
.contact-form .form-row:nth-of-type(4)::before,
.contact-form > .form-group:has(textarea)::before {
content: attr(data-step);
}
/* Visual step labels (rendered via CSS pseudo-elements above each block) */
.contact-form .form-row:first-of-type {
position: relative;
}
.contact-form .form-row:first-of-type::before {
content: "01 · About you";
display: block;
font-family: var(--font-mono);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
font-weight: 600;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--hairline);
}
.contact-form .form-row:nth-of-type(3) {
position: relative;
margin-top: 10px;
}
.contact-form .form-row:nth-of-type(3)::before {
content: "02 · Your project";
display: block;
font-family: var(--font-mono);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
font-weight: 600;
margin-bottom: 14px;
padding-bottom: 10px;
border-top: 1px solid var(--hairline);
padding-top: 22px;
margin-top: 22px;
border-bottom: 1px solid var(--hairline);
}
/* The "What are you most interested in?" group becomes step 03 */
.contact-form > .form-group:has(.checkbox-row) {
position: relative;
margin-top: 6px;
}
.contact-form > .form-group:has(.checkbox-row)::before {
content: "03 · What you need";
display: block;
font-family: var(--font-mono);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
font-weight: 600;
margin-bottom: 14px;
padding-bottom: 10px;
border-top: 1px solid var(--hairline);
padding-top: 22px;
margin-top: 22px;
border-bottom: 1px solid var(--hairline);
}
/* Refined labels — small caps mono */
.contact-form label {
font-family: var(--font-mono) !important;
font-size: 0.64rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
color: var(--ink-2) !important;
margin-bottom: 8px !important;
display: block;
}
.contact-form .req {
color: var(--accent) !important;
margin-left: 2px;
}
/* Inputs — light, premium, with focus halo */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
background: rgba(255,255,255,0.70) !important;
border: 1px solid var(--hairline) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: var(--ink) !important;
width: 100%;
transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 180ms ease !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--ink-3);
opacity: 0.7;
}
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
border-color: rgba(14,122,101,0.30) !important;
background: var(--surface) !important;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
background: var(--surface) !important;
border-color: var(--accent) !important;
box-shadow:
0 0 0 4px rgba(14,122,101,0.12),
inset 0 1px 0 rgba(255,255,255,0.8) !important;
outline: none !important;
transform: translateY(-1px);
}
/* Custom select arrow — premium, not native */
.contact-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%);
background-position:
right 22px top 50%,
right 16px top 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat, no-repeat;
padding-right: 40px !important;
}
/* Tighter row spacing */
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px !important;
margin-bottom: 14px !important;
}
.contact-form .form-group { margin-bottom: 14px !important; }
@media (max-width: 640px) {
.contact-form .form-row { grid-template-columns: 1fr; gap: 12px !important; }
}
/* Checkbox chips — much more premium than default checkboxes */
.contact-form .checkbox-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px !important;
margin-top: 4px;
}
.contact-form .cb-label {
background: rgba(255,255,255,0.65);
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 12px 14px !important;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--font-body) !important;
font-size: 0.86rem !important;
color: var(--ink) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
margin: 0 !important;
transition: border-color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(0.2,0.7,0,1);
}
.contact-form .cb-label:hover {
border-color: rgba(14,122,101,0.32) !important;
background: var(--surface);
transform: translateY(-1px);
}
.contact-form .cb-label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
flex-shrink: 0;
border: 1.5px solid var(--hairline);
border-radius: 5px;
background: var(--surface);
cursor: pointer;
position: relative;
transition: background 180ms ease, border-color 180ms ease;
}
.contact-form .cb-label input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.contact-form .cb-label input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.contact-form .cb-label:has(input:checked) {
border-color: var(--accent) !important;
background: var(--accent-soft);
color: var(--accent-hover) !important;
}
/* Consent — refined */
.contact-form .consent-group {
margin-top: 18px !important;
padding: 14px 16px !important;
background: rgba(255,255,255,0.50);
border: 1px dashed var(--hairline);
border-radius: 12px !important;
}
.contact-form .consent-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
color: var(--ink-2) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
margin: 0 !important;
line-height: 1.45;
}
.contact-form .consent-label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
flex-shrink: 0;
border: 1.5px solid var(--hairline);
border-radius: 5px;
background: var(--surface);
cursor: pointer;
position: relative;
transition: background 180ms ease, border-color 180ms ease;
}
.contact-form .consent-label input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.contact-form .consent-label input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
/* Submit CTA — bigger, more conversion-focused */
.contact-form .btn-submit {
width: 100%;
padding: 18px 28px !important;
margin-top: 22px !important;
background: var(--accent) !important;
color: #FFFFFF !important;
border: 1px solid var(--accent) !important;
border-radius: 14px !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 1.0rem !important;
letter-spacing: -0.01em;
box-shadow:
0 0 0 1px rgba(14,122,101,0.30),
0 20px 40px rgba(14,122,101,0.30),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
cursor: pointer;
transition: transform 240ms cubic-bezier(0.2,0.7,0,1), box-shadow 240ms ease, background 240ms ease !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.contact-form .btn-submit:hover {
transform: translateY(-2px);
background: var(--accent-hover) !important;
box-shadow:
0 0 0 1px rgba(45,227,181,0.50),
0 28px 60px rgba(45,227,181,0.42) !important;
}
.contact-form .btn-submit:active { transform: translateY(0); }
/* Status under submit */
.contact-form .form-status {
margin-top: 14px !important;
text-align: center;
font-size: 0.85rem;
color: var(--ink-2);
}
/* Sidebar cards — softer, more editorial */
.contact-sidebar { gap: 14px !important; display: flex; flex-direction: column; }
.sidebar-card {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
padding: 22px 22px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 14px 30px rgba(11,18,32,0.05) !important;
position: relative;
overflow: hidden;
transition: transform 280ms cubic-bezier(0.2,0.7,0,1), box-shadow 280ms ease, border-color 280ms ease;
}
.sidebar-card:hover {
transform: translateY(-2px);
border-color: rgba(14,122,101,0.20) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.10),
0 22px 44px rgba(11,18,32,0.08) !important;
}
.sidebar-card h4 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 1.0rem !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
}
.sidebar-card p {
font-size: 0.86rem !important;
line-height: 1.55 !important;
color: var(--ink-2) !important;
margin: 0 0 10px !important;
}
.sidebar-card p:last-child { margin-bottom: 0 !important; }
.sidebar-card .sidebar-btn,
.sidebar-card .btn {
display: inline-flex; align-items: center; gap: 6px;
background: transparent !important;
color: var(--accent) !important;
border: 0 !important;
padding: 0 !important;
font-family: var(--font-mono) !important;
font-size: 0.74rem !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-weight: 600 !important;
transition: color 180ms ease, transform 180ms ease;
}
.sidebar-card .sidebar-btn:hover,
.sidebar-card .btn:hover {
color: var(--accent-hover) !important;
transform: translateX(2px);
}
.sidebar-card .sidebar-email {
color: var(--ink) !important;
border-bottom: 1px solid var(--accent);
font-size: 0.9rem !important;
font-weight: 500;
transition: color 180ms ease, border-color 180ms ease;
}
.sidebar-card .sidebar-email:hover {
color: var(--accent) !important;
border-color: var(--accent-bright);
}
/* "Where we work" card — featured, with subtle emerald glow */
.sidebar-card.sidebar-card-location {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border-color: rgba(14,122,101,0.18) !important;
}
.sidebar-card.sidebar-card-location::before {
content: "";
position: absolute;
inset: -40% -10% auto auto;
width: 220px; height: 220px;
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.18), transparent 70%);
filter: blur(20px);
pointer-events: none;
z-index: 0;
}
.sidebar-card.sidebar-card-location > * { position: relative; z-index: 1; }
.sidebar-card .sidebar-card-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--accent-soft);
display: inline-grid; place-items: center;
margin-bottom: 12px;
box-shadow: inset 0 0 0 1px rgba(14,122,101,0.18);
}
.sidebar-card .sidebar-card-icon svg { color: var(--accent) !important; }
/* ════════════════════════════════════════════════════════════════════════
4) SERVICE AREA SECTION — premium polish
════════════════════════════════════════════════════════════════════════ */
/* Tighten section breathing + premium edge */
.area-section {
padding: clamp(64px, 8vw, 110px) 0 clamp(56px, 7vw, 96px) !important;
}
.area-section .area-bg {
background:
radial-gradient(60% 60% at 18% 0%, rgba(14,122,101,0.09), transparent 60%),
radial-gradient(50% 60% at 96% 100%, rgba(168,134,82,0.08), transparent 60%),
radial-gradient(40% 40% at 50% 50%, rgba(45,227,181,0.04), transparent 70%) !important;
}
.area-h {
font-size: clamp(2rem, 3.4vw, 2.85rem);
line-height: 1.04;
letter-spacing: -0.025em;
}
/* Radius card — refined depth + subtle inner ring shadow */
.area-radius-card {
box-shadow:
0 0 0 1px rgba(14,122,101,0.06),
0 28px 60px rgba(11,18,32,0.10),
inset 0 1px 0 rgba(255,255,255,0.6) !important;
transition: transform 320ms cubic-bezier(0.2,0.7,0,1), box-shadow 320ms ease;
}
.area-radius-card:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(14,122,101,0.12),
0 36px 72px rgba(11,18,32,0.12),
inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
/* Anchor pills — more elegant typography */
.area-radius-anchor {
font-size: 0.6rem !important;
letter-spacing: 0.14em !important;
padding: 4px 10px !important;
box-shadow: 0 4px 10px rgba(11,18,32,0.06);
transition: transform 220ms ease, color 220ms ease;
}
.area-radius-anchor:hover {
transform: scale(1.04);
color: var(--accent);
border-color: rgba(14,122,101,0.30);
}
/* Stagger reveal on town columns */
.area-towns .area-col {
opacity: 0;
transform: translateY(14px);
animation: areaColReveal 700ms cubic-bezier(0.2,0.7,0,1) forwards;
}
.area-towns .area-col:nth-child(1) { animation-delay: 80ms; }
.area-towns .area-col:nth-child(2) { animation-delay: 200ms; }
.area-towns .area-col:nth-child(3) { animation-delay: 320ms; }
@keyframes areaColReveal {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.area-towns .area-col { animation: none; opacity: 1; transform: none; }
}
/* Town list — bigger gap, more elegant rule */
.area-col-list li {
padding: 6px 0 !important;
font-size: 0.88rem !important;
border-bottom: 1px solid var(--hairline) !important;
position: relative;
}
.area-col-list li::before {
content: "·";
position: absolute;
left: -10px;
color: var(--accent);
opacity: 0;
transition: opacity 200ms ease, left 200ms ease;
}
.area-col-list li:hover::before { opacity: 1; left: -8px; }
/* "Built for local Massachusetts" bar — refined editorial pill */
.area-industries {
margin-top: clamp(36px, 4vw, 52px) !important;
padding: 14px clamp(20px, 2.6vw, 28px) !important;
background: linear-gradient(90deg, var(--surface-warm) 0%, var(--surface) 50%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 999px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 14px 36px rgba(11,18,32,0.05),
inset 0 1px 0 rgba(255,255,255,0.5) !important;
position: relative;
overflow: hidden;
}
.area-industries::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(14,122,101,0.30) 25%,
rgba(45,227,181,0.45) 50%,
rgba(14,122,101,0.30) 75%,
transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.55;
animation: industriesShine 6.5s ease-in-out infinite;
}
@keyframes industriesShine {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
.area-industries-label {
font-size: 0.66rem !important;
letter-spacing: 0.18em !important;
padding-right: 14px !important;
border-right: 1px solid var(--hairline);
}
/* Industry items — chip-like, premium */
.area-industries-list { gap: 4px 6px !important; }
.area-industries-list li {
display: inline-flex;
align-items: center;
padding: 5px 12px !important;
background: rgba(255,255,255,0.55);
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: 0.78rem !important;
font-weight: 500 !important;
color: var(--ink) !important;
transition: transform 220ms cubic-bezier(0.2,0.7,0,1), background 220ms ease, color 220ms ease, border-color 220ms ease;
cursor: default;
}
.area-industries-list li:nth-child(odd) {
background: var(--accent-soft);
color: var(--accent-hover) !important;
border-color: rgba(14,122,101,0.18);
font-style: italic;
font-family: 'Instrument Serif', serif !important;
font-weight: 400 !important;
font-size: 0.92rem !important;
padding: 3px 12px !important;
}
.area-industries-list li:hover {
transform: translateY(-1px);
background: var(--ink);
color: var(--paper) !important;
border-color: var(--ink);
}
.area-industries-list li:nth-child(odd):hover {
background: var(--accent);
color: #fff !important;
border-color: var(--accent);
}
/* Mobile — turn the bar into a stacked compact module */
@media (max-width: 720px) {
.area-industries {
border-radius: 18px !important;
padding: 14px 16px !important;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.area-industries-label {
border-right: 0;
border-bottom: 1px solid var(--hairline);
padding-right: 0 !important;
padding-bottom: 8px;
width: 100%;
}
}
/* CTA row */
.area-cta-row .btn {
padding: 13px 22px;
font-size: 0.88rem;
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(14,122,101,0.30), 0 14px 30px rgba(14,122,101,0.22);
transition: transform 220ms cubic-bezier(0.2,0.7,0,1), box-shadow 220ms ease;
}
.area-cta-row .btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(45,227,181,0.45), 0 22px 48px rgba(45,227,181,0.35);
}
/* ════════════════════════════════════════════════════════════════════════
5) DEMO MOBILE SWIPE — smoothness affordances
The actual touch wiring is in script.js. These are CSS hints
for grab cursor + during-drag transition suppression.
════════════════════════════════════════════════════════════════════════ */
.demo-slides-track {
touch-action: pan-y; /* let vertical scroll through; capture horizontal */
-webkit-user-select: none;
user-select: none;
}
.demo-slides-track.is-dragging .demo-slide.is-active {
transition: none !important;
will-change: transform;
}
/* Swipe-hint for mobile users — only shown the first time on touch devices */
@media (hover: none) and (pointer: coarse) {
.demo-viewport {
position: relative;
}
.demo-viewport::after {
content: "← swipe →";
position: absolute;
bottom: 8px; left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
background: rgba(11,18,32,0.45);
padding: 4px 10px;
border-radius: 999px;
backdrop-filter: blur(6px);
pointer-events: none;
opacity: 0;
animation: swipeHint 5s ease-out 800ms 1 both;
}
@keyframes swipeHint {
0% { opacity: 0; transform: translate(-50%, 4px); }
15% { opacity: 1; transform: translate(-50%, 0); }
80% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -4px); }
}
}
/* ════════════════════════════════════════════════════════════════════════
▼ V7.1 — POLISH PASS
· Navbar alignment fix (How It Works wrap + underline rule)
· Refined Medway pill (compact, premium)
· Hero breath
· Contact form compression
· FAQ premium accordion redesign
· Global polish (consistency, motion, hover rhythm)
Append-only. Higher specificity overrides where needed.
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
1) NAVBAR — fix How It Works alignment, balance composition
════════════════════════════════════════════════════════════════════════ */
/* Stop ANY nav link from wrapping mid-text (the root cause of the
"How It Works" misalignment). Tighten link padding so all 6 items
fit cleanly across 1200–1480px viewports. */
.navbar .nav-links li a.nav-link,
.navbar .nav-links li > a:not(.btn) {
white-space: nowrap !important;
padding: 8px 11px !important;
font-size: 0.815rem !important;
}
/* Hairline rule under each link — was inset by hardcoded 14px on each
side, which mismatched our 11px padding and made wider links like
"How It Works" look shifted. Anchor it to the padding box instead. */
.navbar .nav-links li a.nav-link::after,
.navbar .nav-links li > a:not(.btn)::after {
left: 11px !important;
right: 11px !important;
bottom: 3px !important;
background: var(--accent) !important;
height: 1.5px !important;
border-radius: 1px;
transform-origin: center !important;
}
/* Active page indicator — emerald rule with a soft glow */
.navbar .nav-links li a.nav-link.active::after {
transform: scaleX(1) !important;
box-shadow: 0 0 6px rgba(45,227,181,0.40);
}
/* Slightly tighter container gap on smaller desktops so the 6 links
+ CTA + status pill all live happily. */
@media (min-width: 1100px) and (max-width: 1340px) {
.navbar .nav-container { gap: 18px !important; }
.navbar .nav-links { gap: 0 !important; }
.navbar .nav-links li a.nav-link,
.navbar .nav-links li > a:not(.btn) { padding: 8px 9px !important; font-size: 0.78rem !important; }
}
/* ════════════════════════════════════════════════════════════════════════
2) MEDWAY PILL — compact, premium, less horizontal bulk
════════════════════════════════════════════════════════════════════════ */
.navbar .nav-status {
margin-left: 4px !important;
padding: 4px 10px 4px 8px !important;
font-size: 0.6rem !important;
letter-spacing: 0.16em !important;
gap: 6px;
border-radius: 999px;
background: rgba(255,255,255,0.7) !important;
border-color: rgba(14,122,101,0.14) !important;
color: var(--ink-2) !important;
font-weight: 600 !important;
}
.navbar .nav-status::before {
width: 5px !important;
height: 5px !important;
box-shadow: 0 0 0 2.5px rgba(14,122,101,0.14) !important;
}
/* Hide a touch sooner so it never crowds tablet nav layouts */
@media (max-width: 1240px) {
.navbar .nav-status { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
3) HERO — slightly more breath, tighter rhythm
════════════════════════════════════════════════════════════════════════ */
.hero { padding-top: clamp(150px, 17vh, 210px) !important; }
.hero .hero-content .hero-live-pill {
margin-bottom: 36px !important;
padding: 6px 14px 6px 11px !important;
font-size: 10.5px !important;
letter-spacing: 0.12em !important;
}
.hero .hero-content .hero-live-text {
font-size: 10.5px !important;
letter-spacing: 0.10em !important;
}
.hero .hero-content .hero-live-meta {
font-size: 10px !important;
letter-spacing: 0.14em !important;
}
.hero .hero-content .hero-headline { margin-bottom: 28px !important; }
.hero .hero-content .hero-sub {
margin-bottom: 36px !important;
max-width: 46ch !important;
}
.hero .hero-content .hero-ctas { margin-bottom: 32px !important; }
.hero .hero-content .hero-meta { padding-top: 20px !important; }
/* ════════════════════════════════════════════════════════════════════════
4) CONTACT FORM — compress + tighten so the page feels shorter
════════════════════════════════════════════════════════════════════════ */
/* Tighter section padding — was generous */
.contact-section {
padding: clamp(36px, 5vw, 76px) 0 clamp(48px, 6vw, 92px) !important;
}
/* Tighter contact hero so the form arrives sooner */
.contact-hero {
padding-top: clamp(110px, 12vh, 150px) !important;
padding-bottom: clamp(20px, 3vw, 36px) !important;
}
.contact-hero-headline {
margin-top: 14px !important;
font-size: clamp(2rem, 4vw, 3.4rem) !important;
line-height: 1.05 !important;
margin-bottom: 14px !important;
}
.contact-hero-sub {
font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
margin-bottom: 18px !important;
max-width: 60ch;
}
.contact-hero-meta { gap: 8px 14px !important; }
.contact-hero-meta .meta-item {
font-size: 0.7rem !important;
letter-spacing: 0.12em !important;
}
/* Form card — tighter inside padding, calmer top accent */
.contact-form {
padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 30px) !important;
border-radius: 18px !important;
}
/* Step labels — tighter rhythm */
.contact-form .form-row:first-of-type::before {
margin-bottom: 12px !important;
padding-bottom: 8px !important;
font-size: 0.62rem !important;
}
.contact-form .form-row:nth-of-type(3) {
margin-top: 6px !important;
}
.contact-form .form-row:nth-of-type(3)::before {
margin-bottom: 12px !important;
padding-top: 16px !important;
margin-top: 16px !important;
padding-bottom: 8px !important;
font-size: 0.62rem !important;
}
.contact-form > .form-group:has(.checkbox-row) {
margin-top: 4px !important;
}
.contact-form > .form-group:has(.checkbox-row)::before {
margin-bottom: 12px !important;
padding-top: 16px !important;
margin-top: 16px !important;
padding-bottom: 8px !important;
font-size: 0.62rem !important;
}
/* Inputs — slightly more compact */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
padding: 11px 14px !important;
font-size: 0.9rem !important;
border-radius: 10px !important;
}
.contact-form textarea {
min-height: 96px !important;
rows: 3;
}
.contact-form .form-row,
.contact-form .form-group { margin-bottom: 12px !important; }
.contact-form .form-row { gap: 12px !important; }
.contact-form label {
font-size: 0.6rem !important;
margin-bottom: 6px !important;
}
/* Compress 3-up rows below by using a 3-column grid where applicable.
Last form-row before the CTA gets the wide treatment. */
.contact-form .form-row:nth-of-type(4) {
grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 720px) {
.contact-form .form-row:nth-of-type(4) { grid-template-columns: 1fr !important; }
}
/* Checkbox chips — tighter, smaller cards */
.contact-form .checkbox-row {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
gap: 6px !important;
}
.contact-form .cb-label {
padding: 9px 12px !important;
font-size: 0.82rem !important;
border-radius: 10px !important;
gap: 8px !important;
}
.contact-form .cb-label input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
}
/* Budget select gets a one-row treatment */
.contact-form > .form-group:has(#budget) select { padding: 11px 14px !important; }
/* Textarea section header */
.contact-form > .form-group:has(textarea) {
margin-top: 10px !important;
}
.contact-form > .form-group:has(textarea) label {
margin-bottom: 6px !important;
}
/* Consent block — tighter */
.contact-form .consent-group {
margin-top: 14px !important;
padding: 11px 14px !important;
border-radius: 10px !important;
}
.contact-form .consent-label {
font-size: 0.78rem !important;
gap: 10px !important;
}
.contact-form .consent-label input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
}
/* Submit button — slightly more compact */
.contact-form .btn-submit {
padding: 16px 26px !important;
margin-top: 16px !important;
border-radius: 12px !important;
font-size: 0.96rem !important;
}
.contact-form .form-status {
margin-top: 10px !important;
font-size: 0.8rem !important;
}
/* Sidebar cards — more polished, less stretch */
.contact-sidebar { gap: 12px !important; }
.sidebar-card {
padding: 18px 20px !important;
border-radius: 16px !important;
}
.sidebar-card h4 {
font-size: 0.95rem !important;
margin-bottom: 6px !important;
}
.sidebar-card p {
font-size: 0.82rem !important;
line-height: 1.55 !important;
margin-bottom: 8px !important;
}
.sidebar-card .sidebar-card-icon {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
}
.sidebar-card .sidebar-card-icon svg { width: 16px !important; height: 16px !important; }
/* ════════════════════════════════════════════════════════════════════════
5) FAQ — premium accordion redesign
Numbered eyebrows via CSS counter (no HTML change), custom toggle,
refined open state, cleaner animation, smarter hover.
════════════════════════════════════════════════════════════════════════ */
.faq-section {
background: linear-gradient(180deg, var(--bg) 0%, var(--surface-warm) 100%) !important;
padding: clamp(56px, 7vw, 100px) 0 clamp(60px, 8vw, 110px) !important;
position: relative;
overflow: hidden;
}
.faq-section::before {
content: "";
position: absolute;
inset: -10% -20% auto auto;
width: 520px; height: 520px;
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.10), transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.faq-section .container.faq-container { position: relative; z-index: 1; }
.faq-section .section-headline {
text-align: left !important;
max-width: 22ch !important;
margin-bottom: clamp(28px, 4vw, 44px) !important;
}
/* Counter-driven numbering — no HTML change required */
.faq-list {
counter-reset: faq;
margin-top: clamp(20px, 2.6vw, 36px) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.05),
0 22px 50px rgba(11,18,32,0.07) !important;
overflow: hidden;
}
.faq-section .faq-item {
counter-increment: faq;
border-bottom: 1px solid var(--hairline) !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: background 240ms ease;
}
.faq-section .faq-item:last-child { border-bottom: 0 !important; }
.faq-section .faq-item:hover {
background: rgba(14,122,101,0.025) !important;
}
.faq-section .faq-item.open {
background: linear-gradient(180deg, rgba(14,122,101,0.04) 0%, rgba(14,122,101,0.02) 100%) !important;
}
/* Question — number eyebrow + headline */
.faq-section .faq-q {
position: relative;
width: 100% !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 28px) !important;
padding-left: clamp(64px, 7vw, 80px) !important;
padding-right: clamp(54px, 6vw, 64px) !important;
display: block !important;
color: var(--ink) !important;
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: clamp(1.0rem, 1.4vw, 1.18rem) !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
cursor: pointer;
transition: color 220ms ease;
}
.faq-section .faq-q:hover {
color: var(--accent) !important;
}
.faq-section .faq-item.open .faq-q { color: var(--ink) !important; }
/* Counter — small mono caps "Q · 01" eyebrow */
.faq-section .faq-q::before {
content: "Q · " counter(faq, decimal-leading-zero);
position: absolute;
left: clamp(20px, 2.4vw, 28px);
top: clamp(22px, 2.5vw, 28px);
font-family: var(--font-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
font-weight: 600;
background: var(--accent-soft);
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(14,122,101,0.18);
transition: background 240ms ease, color 240ms ease, transform 240ms cubic-bezier(0.2,0.7,0,1);
}
.faq-section .faq-item.open .faq-q::before {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: scale(1.04);
}
/* Custom toggle — replaces "+" plus character entirely.
Uses CSS to draw a precise circle with horizontal/vertical bars. */
.faq-section .faq-toggle {
position: absolute;
right: clamp(20px, 2.4vw, 28px);
top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--hairline);
background: var(--surface);
font-size: 0 !important; /* hide the literal "+" character */
color: transparent !important;
transition:
background 280ms cubic-bezier(0.2,0.7,0,1),
border-color 280ms ease,
transform 280ms cubic-bezier(0.2,0.7,0,1),
box-shadow 280ms ease;
box-shadow: 0 4px 10px rgba(11,18,32,0.04);
flex-shrink: 0;
}
/* Two crossing bars to form a + */
.faq-section .faq-toggle::before,
.faq-section .faq-toggle::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
background: var(--ink);
border-radius: 1px;
transition: transform 280ms cubic-bezier(0.2,0.7,0,1), background 220ms ease;
}
.faq-section .faq-toggle::before { width: 12px; height: 1.5px; }
.faq-section .faq-toggle::after { width: 1.5px; height: 12px; }
/* Hover */
.faq-section .faq-item:hover .faq-toggle {
border-color: var(--accent);
background: var(--accent-soft);
}
.faq-section .faq-item:hover .faq-toggle::before,
.faq-section .faq-item:hover .faq-toggle::after { background: var(--accent); }
/* Open state — minus + emerald fill + lift */
.faq-section .faq-item.open .faq-toggle,
.faq-section .faq-q[aria-expanded="true"] .faq-toggle,
.faq-section .faq-item[open] .faq-toggle {
background: var(--accent) !important;
border-color: var(--accent) !important;
transform: translateY(-50%) rotate(0deg) !important;
box-shadow: 0 0 0 4px rgba(14,122,101,0.14), 0 6px 14px rgba(14,122,101,0.22) !important;
}
.faq-section .faq-item.open .faq-toggle::before,
.faq-section .faq-q[aria-expanded="true"] .faq-toggle::before,
.faq-section .faq-item[open] .faq-toggle::before { background: #fff; }
.faq-section .faq-item.open .faq-toggle::after,
.faq-section .faq-q[aria-expanded="true"] .faq-toggle::after,
.faq-section .faq-item[open] .faq-toggle::after { transform: scaleY(0); background: #fff; }
/* Answer panel */
.faq-section .faq-a {
max-height: 0 !important;
overflow: hidden;
transition: max-height 360ms cubic-bezier(0.2,0.7,0,1) !important;
padding: 0 !important;
}
/* Both `.open` (added by JS) and `[aria-expanded="true"] +` legacy work */
.faq-section .faq-item.open .faq-a,
.faq-section .faq-q[aria-expanded="true"] + .faq-a,
.faq-section .faq-a.open {
max-height: 600px !important;
}
.faq-section .faq-a p {
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
line-height: 1.65 !important;
color: var(--ink-2) !important;
padding: 0 clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 28px) clamp(64px, 7vw, 80px) !important;
max-width: 72ch;
margin: 0 !important;
border-top: 1px dashed var(--hairline);
padding-top: clamp(8px, 1.2vw, 14px) !important;
margin-top: -8px !important;
}
.faq-section .faq-a p strong {
color: var(--ink) !important;
font-weight: 600;
}
/* Mobile FAQ tweaks */
@media (max-width: 640px) {
.faq-section .faq-q {
padding: 18px 16px 18px 16px !important;
padding-top: 44px !important;
font-size: 1.02rem !important;
}
.faq-section .faq-q::before {
top: 12px;
left: 16px;
}
.faq-section .faq-toggle {
right: 14px;
width: 28px;
height: 28px;
}
.faq-section .faq-a p {
padding: 0 16px 18px 16px !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
6) GLOBAL POLISH — consistency, motion, hover rhythm
════════════════════════════════════════════════════════════════════════ */
/* Consistent eyebrow rhythm across all sections */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow .eyebrow-num {
font-family: var(--font-mono) !important;
font-size: 0.66rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: var(--accent) !important;
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.16);
padding: 4px 8px !important;
border-radius: 999px !important;
font-weight: 600 !important;
}
/* Selection — branded */
::selection { background: rgba(45,227,181,0.32); color: var(--ink); }
/* Focus rings — consistent emerald halo across the site */
:where(a, button, input, select, textarea):focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(14,122,101,0.18), 0 0 0 1px var(--accent) !important;
border-radius: inherit;
}
/* Smooth scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-warm); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(14,122,101,0.30), rgba(14,122,101,0.18));
border-radius: 999px;
border: 2px solid var(--surface-warm);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(14,122,101,0.50), rgba(14,122,101,0.30));
}
/* Buttons — consistent micro-lift on hover where not already defined */
.btn:not(.faq-toggle):not(.demo-tab):hover {
transform: translateY(-1px);
}
/* Service-area CTA row — tighten alignment */
.area-cta-row { margin-top: clamp(24px, 3vw, 36px) !important; }
/* Type-marquee — slightly more rhythm */
.type-marquee { padding: 10px 0 !important; }
/* Section rhythm balancing — stop adjacent sections from feeling
doubled-up vertically when one section ends with padding-bottom and
the next starts with padding-top. This brings them closer when
they're both light/cream surfaces. */
.section + .section { padding-top: clamp(50px, 6vw, 90px); }
/* Ensure CTA ribbon at the end of the page reads as a finale */
.cta-section.cta-v5 {
padding: clamp(70px, 9vw, 130px) 0 !important;
}
/* ════════════════════════════════════════════════════════════════════════
▼ V7.2 — FAQ REFINEMENT
The V7.1 "Q · 01" pill made the left side feel crowded. This pass:
· Removes the number pill entirely (cleanest premium read)
· Resets row geometry so the question is the hero
· Adds a refined open-state with a subtle emerald left-edge rule
· Adds a soft hover state with depth
· Tightens the toggle and answer column for editorial calm
════════════════════════════════════════════════════════════════════════ */
/* Hide the counter pill — was creating visual noise on the left */
.faq-section .faq-q::before {
content: none !important;
display: none !important;
}
/* Reset question padding — no longer reserves room for the pill */
.faq-section .faq-q {
padding: clamp(22px, 2.6vw, 30px) clamp(56px, 6vw, 72px) clamp(22px, 2.6vw, 30px) clamp(24px, 2.8vw, 32px) !important;
font-size: clamp(1.02rem, 1.45vw, 1.22rem) !important;
line-height: 1.4 !important;
letter-spacing: -0.012em !important;
color: var(--ink) !important;
font-weight: 500 !important;
transition: color 220ms ease, padding-left 280ms cubic-bezier(0.2,0.7,0,1) !important;
}
/* Subtle row interaction — calm hover, intentional click target */
.faq-section .faq-item {
position: relative;
transition: background 280ms ease, transform 280ms cubic-bezier(0.2,0.7,0,1) !important;
}
.faq-section .faq-item::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transform-origin: center;
transition: transform 320ms cubic-bezier(0.2,0.7,0,1), opacity 240ms ease;
border-radius: 0 2px 2px 0;
opacity: 0;
}
.faq-section .faq-item:hover::before {
transform: scaleY(0.4);
opacity: 0.5;
}
.faq-section .faq-item.open::before,
.faq-section .faq-item:has(.faq-q[aria-expanded="true"])::before {
transform: scaleY(1);
opacity: 1;
}
/* Hover treatment — slightly lifted background + nudged question */
.faq-section .faq-item:hover {
background: rgba(14,122,101,0.035) !important;
}
.faq-section .faq-item:hover .faq-q {
padding-left: calc(clamp(24px, 2.8vw, 32px) + 6px) !important;
}
/* Open state — calmer than V7.1, more editorial */
.faq-section .faq-item.open,
.faq-section .faq-item:has(.faq-q[aria-expanded="true"]) {
background: linear-gradient(
180deg,
rgba(14,122,101,0.045) 0%,
rgba(14,122,101,0.015) 100%
) !important;
}
.faq-section .faq-item.open .faq-q,
.faq-section .faq-item .faq-q[aria-expanded="true"] {
padding-left: calc(clamp(24px, 2.8vw, 32px) + 8px) !important;
color: var(--ink) !important;
}
.faq-section .faq-q:hover {
color: var(--accent-hover) !important;
}
/* Refined toggle — slightly more presence, smoother corners */
.faq-section .faq-toggle {
right: clamp(22px, 2.6vw, 30px) !important;
width: 36px !important;
height: 36px !important;
border: 1px solid var(--hairline) !important;
background: var(--surface) !important;
box-shadow: 0 4px 12px rgba(11,18,32,0.05) !important;
}
.faq-section .faq-toggle::before { width: 13px !important; height: 1.5px !important; }
.faq-section .faq-toggle::after { width: 1.5px !important; height: 13px !important; }
.faq-section .faq-item:hover .faq-toggle {
border-color: rgba(14,122,101,0.32) !important;
background: var(--surface) !important;
box-shadow: 0 6px 16px rgba(14,122,101,0.10) !important;
}
.faq-section .faq-item:hover .faq-toggle::before,
.faq-section .faq-item:hover .faq-toggle::after { background: var(--accent) !important; }
.faq-section .faq-item.open .faq-toggle,
.faq-section .faq-item .faq-q[aria-expanded="true"] .faq-toggle {
box-shadow: 0 0 0 4px rgba(14,122,101,0.16), 0 8px 18px rgba(14,122,101,0.24) !important;
}
/* Answer panel — reset padding to align with the now-pill-less question */
.faq-section .faq-a p {
padding: clamp(2px, 0.4vw, 6px) clamp(56px, 6vw, 72px) clamp(24px, 2.8vw, 32px) clamp(24px, 2.8vw, 32px) !important;
border-top: 0 !important;
margin-top: 0 !important;
font-size: 0.94rem !important;
line-height: 1.7 !important;
color: var(--ink-2) !important;
max-width: 80ch;
}
.faq-section .faq-item.open .faq-a p,
.faq-section .faq-q[aria-expanded="true"] + .faq-a p {
/* Soft fade-in for the answer text once the panel opens */
animation: faqAnswerFade 360ms cubic-bezier(0.2,0.7,0,1) both;
animation-delay: 80ms;
}
@keyframes faqAnswerFade {
0% { opacity: 0; transform: translateY(-4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Mobile — clean compact rhythm */
@media (max-width: 640px) {
.faq-section .faq-q {
padding: 18px 56px 18px 18px !important;
padding-top: 18px !important; /* override the V7.1 44px reservation */
font-size: 1.0rem !important;
line-height: 1.4 !important;
}
.faq-section .faq-item:hover .faq-q,
.faq-section .faq-item.open .faq-q,
.faq-section .faq-item .faq-q[aria-expanded="true"] {
padding-left: 22px !important;
}
.faq-section .faq-toggle {
right: 14px !important;
width: 30px !important;
height: 30px !important;
}
.faq-section .faq-toggle::before { width: 11px !important; }
.faq-section .faq-toggle::after { height: 11px !important; }
.faq-section .faq-a p {
padding: 0 18px 18px 18px !important;
font-size: 0.92rem !important;
}
.faq-section .faq-item::before {
width: 2px;
}
}
/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
.faq-section .faq-item,
.faq-section .faq-q,
.faq-section .faq-toggle,
.faq-section .faq-item::before {
transition: none !important;
animation: none !important;
}
.faq-section .faq-item.open .faq-a p,
.faq-section .faq-q[aria-expanded="true"] + .faq-a p {
animation: none !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
▼ V7.3 — CONTACT PAGE REDESIGN
New HTML structure:
· .contact-form-v3 (premium intake card with explicit sections)
· .form-section (real HTML wrappers replacing positional ::before
pseudo-counters from V7.0/V7.1)
· .form-row-2 / .form-row-3 (explicit grid widths)
· .contact-sidebar-v3 + .brief-card (single consolidated brief panel,
replaces 4 stacked sidebar cards)
This block resets the V7.0/V7.1 positional step labels (which targeted
:nth-of-type and would now misfire), refines the form card depth, and
designs the new brief panel from scratch.
════════════════════════════════════════════════════════════════════════ */
/* ── Disable V7.0/V7.1 positional step labels (no longer needed) ──── */
.contact-form-v3 .form-row:first-of-type::before,
.contact-form-v3 .form-row:nth-of-type(3)::before,
.contact-form-v3 .form-row:nth-of-type(4)::before,
.contact-form-v3 > .form-group:has(.checkbox-row)::before,
.contact-form-v3 > .form-group:has(textarea)::before {
content: none !important;
display: none !important;
}
.contact-form-v3 .form-row:nth-of-type(3),
.contact-form-v3 .form-row:nth-of-type(4),
.contact-form-v3 > .form-group:has(.checkbox-row),
.contact-form-v3 > .form-group:has(textarea) {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* ════════════════════════════════════════════════════════════════════════
LAYOUT — tighter grid, sticky sidebar, less stretch
════════════════════════════════════════════════════════════════════════ */
.contact-section {
padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 7vw, 96px) !important;
}
.contact-layout {
display: grid !important;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr) !important;
gap: clamp(20px, 2.4vw, 36px) !important;
align-items: start !important;
}
@media (max-width: 1000px) {
.contact-layout { grid-template-columns: 1fr !important; }
}
/* ════════════════════════════════════════════════════════════════════════
FORM CARD — premium intake panel
════════════════════════════════════════════════════════════════════════ */
.contact-form-v3 {
position: relative;
padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 32px) !important;
background:
radial-gradient(120% 80% at 0% 0%, rgba(45,227,181,0.05), transparent 60%),
linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 22px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.05),
0 28px 64px rgba(11,18,32,0.10),
0 8px 22px rgba(14,122,101,0.06),
inset 0 1px 0 rgba(255,255,255,0.7) !important;
overflow: hidden;
isolation: isolate;
}
/* Refined top accent rule (replaces V7.0's plain bar) */
.contact-form-v3::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(14,122,101,0.55) 30%,
rgba(45,227,181,0.65) 50%,
rgba(14,122,101,0.55) 70%,
transparent 100%);
opacity: 0.9;
pointer-events: none;
z-index: 1;
}
/* Subtle bottom-right glow inside the card */
.contact-form-v3::after {
content: "";
position: absolute;
inset: auto -10% -20% auto;
width: 320px; height: 320px;
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.10), transparent 70%);
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.contact-form-v3 > * { position: relative; z-index: 1; }
/* Card header — eyebrow + title + lede */
.contact-form-head {
margin: 0 0 clamp(18px, 2.2vw, 24px);
padding-bottom: clamp(14px, 1.6vw, 20px);
border-bottom: 1px solid var(--hairline);
}
.contact-form-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent);
font-weight: 600;
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.18);
padding: 5px 11px 5px 9px;
border-radius: 999px;
margin-bottom: 12px;
}
.contact-form-eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(14,122,101,0.18);
animation: briefDot 2.4s ease-in-out infinite;
}
@keyframes briefDot {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.contact-form-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 8px;
line-height: 1.15;
}
.contact-form-lede {
margin: 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--ink-2);
max-width: 56ch;
}
.contact-form-lede strong { color: var(--ink); font-weight: 600; }
/* ════════════════════════════════════════════════════════════════════════
FORM SECTIONS — three explicit chapters
════════════════════════════════════════════════════════════════════════ */
.contact-form-v3 .form-section {
margin: 0 0 clamp(16px, 1.8vw, 22px);
padding: 0;
border: 0;
background: transparent;
}
.contact-form-v3 .form-section:last-of-type { margin-bottom: clamp(8px, 1vw, 14px); }
.contact-form-v3 .form-section-head {
display: flex; align-items: center; gap: 10px;
margin: 0 0 clamp(10px, 1.4vw, 14px);
}
.contact-form-v3 .form-section-num {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.18);
padding: 3px 8px;
border-radius: 999px;
flex-shrink: 0;
}
.contact-form-v3 .form-section-h {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.92rem;
color: var(--ink);
letter-spacing: -0.005em;
margin: 0;
flex-shrink: 0;
}
.contact-form-v3 .form-section-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--hairline) 0%, transparent 100%);
}
/* ════════════════════════════════════════════════════════════════════════
FORM ROWS — explicit grids (no more nth-of-type targeting)
════════════════════════════════════════════════════════════════════════ */
.contact-form-v3 .form-row {
display: grid !important;
gap: clamp(8px, 1.2vw, 12px) !important;
margin-bottom: clamp(8px, 1.2vw, 12px) !important;
}
.contact-form-v3 .form-row-2 { grid-template-columns: 1fr 1fr !important; }
.contact-form-v3 .form-row-3 { grid-template-columns: 1fr 1fr 1fr !important; }
.contact-form-v3 .form-group { margin-bottom: 0 !important; }
@media (max-width: 720px) {
.contact-form-v3 .form-row-2,
.contact-form-v3 .form-row-3 { grid-template-columns: 1fr !important; }
}
/* ════════════════════════════════════════════════════════════════════════
LABELS + INPUTS — refined typographic hierarchy
════════════════════════════════════════════════════════════════════════ */
.contact-form-v3 label,
.contact-form-v3 .form-group-label {
display: block !important;
font-family: var(--font-mono) !important;
font-size: 0.6rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
color: var(--ink-2) !important;
margin: 0 0 6px !important;
}
.contact-form-v3 .opt {
color: var(--ink-3);
font-weight: 500;
text-transform: none;
letter-spacing: 0.06em;
margin-left: 4px;
}
.contact-form-v3 input[type="text"],
.contact-form-v3 input[type="email"],
.contact-form-v3 input[type="tel"],
.contact-form-v3 input[type="url"],
.contact-form-v3 select,
.contact-form-v3 textarea {
background: rgba(255,255,255,0.85) !important;
border: 1px solid var(--hairline) !important;
border-radius: 10px !important;
padding: 11px 14px !important;
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
color: var(--ink) !important;
width: 100%;
transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 180ms ease !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 1px 2px rgba(11,18,32,0.02) !important;
}
.contact-form-v3 textarea {
min-height: 84px !important;
resize: vertical;
line-height: 1.55;
}
.contact-form-v3 input::placeholder,
.contact-form-v3 textarea::placeholder {
color: var(--ink-3);
opacity: 0.65;
}
.contact-form-v3 input:hover,
.contact-form-v3 select:hover,
.contact-form-v3 textarea:hover {
border-color: rgba(14,122,101,0.30) !important;
background: var(--surface) !important;
}
.contact-form-v3 input:focus,
.contact-form-v3 select:focus,
.contact-form-v3 textarea:focus {
background: var(--surface) !important;
border-color: var(--accent) !important;
box-shadow:
0 0 0 4px rgba(14,122,101,0.14),
inset 0 1px 0 rgba(255,255,255,0.8),
0 4px 14px rgba(14,122,101,0.10) !important;
outline: none !important;
transform: translateY(-1px);
}
/* Custom caret on selects */
.contact-form-v3 select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%);
background-position:
right 22px top 50%,
right 16px top 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat, no-repeat;
padding-right: 38px !important;
}
/* ════════════════════════════════════════════════════════════════════════
CHECKBOX CHIPS — fixed 3-up grid, smaller, refined
════════════════════════════════════════════════════════════════════════ */
.contact-form-v3 .checkbox-row,
.contact-form-v3 .checkbox-row-3 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
}
@media (max-width: 720px) {
.contact-form-v3 .checkbox-row,
.contact-form-v3 .checkbox-row-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
.contact-form-v3 .checkbox-row,
.contact-form-v3 .checkbox-row-3 { grid-template-columns: 1fr !important; }
}
.contact-form-v3 .cb-label {
background: rgba(255,255,255,0.65);
border: 1px solid var(--hairline);
border-radius: 10px !important;
padding: 9px 11px !important;
display: flex; align-items: center; gap: 8px;
cursor: pointer;
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
color: var(--ink) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
margin: 0 !important;
line-height: 1.25;
transition: border-color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(0.2,0.7,0,1);
}
.contact-form-v3 .cb-label:hover {
border-color: rgba(14,122,101,0.32) !important;
background: var(--surface);
transform: translateY(-1px);
}
.contact-form-v3 .cb-label input[type="checkbox"] {
width: 15px; height: 15px;
border-radius: 4px;
flex-shrink: 0;
}
.contact-form-v3 .cb-label:has(input:checked) {
border-color: var(--accent) !important;
background: var(--accent-soft);
color: var(--accent-hover) !important;
}
/* ════════════════════════════════════════════════════════════════════════
FORM FOOTER — consent + submit grouped together
════════════════════════════════════════════════════════════════════════ */
.contact-form-v3 .form-foot {
margin-top: clamp(14px, 1.8vw, 20px);
padding-top: clamp(14px, 1.8vw, 20px);
border-top: 1px dashed var(--hairline);
display: flex; flex-direction: column;
gap: 12px;
}
.contact-form-v3 .consent-group {
margin: 0 !important;
padding: 10px 12px !important;
background: rgba(255,255,255,0.55);
border: 1px solid var(--hairline);
border-radius: 10px;
}
.contact-form-v3 .consent-label {
font-size: 0.78rem !important;
color: var(--ink-2) !important;
gap: 10px !important;
line-height: 1.45;
margin: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
}
.contact-form-v3 .btn-submit {
width: 100%;
padding: 16px 26px !important;
border-radius: 12px !important;
font-size: 0.96rem !important;
margin: 0 !important;
}
/* ════════════════════════════════════════════════════════════════════════
SIDEBAR BRIEF CARD — single consolidated panel
════════════════════════════════════════════════════════════════════════ */
.contact-sidebar-v3 {
display: block !important;
position: sticky;
top: 100px;
}
@media (max-width: 1000px) {
.contact-sidebar-v3 { position: static; }
}
.brief-card {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%) !important;
color: var(--paper);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px);
box-shadow:
0 0 0 1px rgba(45,227,181,0.18),
0 32px 64px rgba(11,18,32,0.30),
0 12px 28px rgba(45,227,181,0.16),
inset 0 1px 0 rgba(255,255,255,0.06);
isolation: isolate;
}
/* Ambient glow inside the dark panel */
.brief-card .brief-card-glow {
position: absolute;
inset: -30% -20% auto auto;
width: 320px; height: 320px;
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.30), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.brief-card > * { position: relative; z-index: 1; }
/* Hairline noise overlay — faint texture for premium depth */
.brief-card::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 25% 30%, rgba(255,255,255,0.012) 0%, transparent 1px),
radial-gradient(circle at 75% 70%, rgba(255,255,255,0.010) 0%, transparent 1px),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.008) 0%, transparent 1px);
background-size: 22px 22px, 18px 18px, 14px 14px;
pointer-events: none;
opacity: 0.5;
}
/* Header */
.brief-head { margin-bottom: 22px; }
.brief-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--glow);
font-weight: 600;
background: rgba(45,227,181,0.12);
border: 1px solid rgba(45,227,181,0.30);
padding: 5px 11px 5px 9px;
border-radius: 999px;
margin-bottom: 14px;
}
.brief-eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--glow);
box-shadow: 0 0 0 3px rgba(45,227,181,0.20), 0 0 8px rgba(45,227,181,0.50);
animation: briefDot 2.4s ease-in-out infinite;
}
.brief-h {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--paper);
margin: 0;
max-width: 22ch;
}
/* Steps */
.brief-steps {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: flex; flex-direction: column;
gap: 14px;
}
.brief-step {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: start;
padding: 12px 14px 12px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
transition: background 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(0.2,0.7,0,1);
}
.brief-step:hover {
background: rgba(45,227,181,0.05);
border-color: rgba(45,227,181,0.22);
transform: translateY(-1px);
}
.brief-step-num {
width: 32px; height: 32px;
border-radius: 999px;
background: rgba(45,227,181,0.12);
border: 1px solid rgba(45,227,181,0.34);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 700;
color: var(--glow);
letter-spacing: 0.05em;
flex-shrink: 0;
}
.brief-step-body { display: flex; flex-direction: column; gap: 2px; }
.brief-step-body strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 0.92rem;
color: var(--paper);
letter-spacing: -0.005em;
}
.brief-step-body span {
font-size: 0.78rem;
color: rgba(244,241,232,0.62);
line-height: 1.45;
}
/* Inline CTA */
.brief-call-cta {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
color: var(--glow);
text-decoration: none;
transition: color 200ms ease, transform 200ms ease;
}
.brief-call-cta:hover {
color: #fff;
transform: translateX(2px);
}
.brief-call-cta svg { transition: transform 200ms cubic-bezier(0.2,0.7,0,1); }
.brief-call-cta:hover svg { transform: translateX(3px); }
/* Divider */
.brief-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
margin: 18px 0;
}
/* Meta list */
.brief-meta {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.brief-meta-item {
display: flex; align-items: center; gap: 8px;
font-size: 0.76rem;
color: rgba(244,241,232,0.78);
line-height: 1.3;
}
.brief-meta-item svg {
color: var(--glow);
flex-shrink: 0;
opacity: 0.85;
}
.brief-meta-item:last-child {
grid-column: 1 / -1;
}
/* Foot */
.brief-foot {
padding-top: 16px;
border-top: 1px dashed rgba(255,255,255,0.10);
display: flex; align-items: center; justify-content: center;
}
.brief-foot-email {
font-size: 0.86rem;
font-weight: 500;
color: var(--paper);
text-decoration: none;
border-bottom: 1px solid rgba(45,227,181,0.45);
padding-bottom: 1px;
transition: color 200ms ease, border-color 200ms ease;
}
.brief-foot-email:hover {
color: var(--glow);
border-bottom-color: var(--glow);
}
/* Mobile — brief becomes a single full-width card under the form */
@media (max-width: 1000px) {
.brief-card { padding: 22px 22px; }
.brief-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.brief-card { padding: 20px 18px; border-radius: 16px; }
.brief-meta { grid-template-columns: 1fr; }
.brief-meta-item:last-child { grid-column: 1; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V8 — GLOBAL COMPACTION (~6–8%) + FAQ DENSITY PASS
────────────────────────────────────────────────────────────────────────
The site previously read slightly oversized at 100% Chrome zoom.
This layer pulls every fluid clamp() upper bound down by roughly 6–8%,
tightens section rhythm and the container, refines hero / nav / btn
sizing, and rebuilds FAQ density as its own constrained column.
No layout structure or section is removed; nothing is crushed; the
premium editorial feel is preserved.
════════════════════════════════════════════════════════════════════════ */
/* ── Token rescale ──────────────────────────────────────────────────── */
:root {
/* Type — caps reduced ~6–8% */
--type-eyebrow: clamp(0.66rem, 0.55vw + 0.52rem, 0.74rem);
--type-body: clamp(0.93rem, 0.34vw + 0.85rem, 1.0rem);
--type-lede: clamp(1.04rem, 0.5vw + 0.92rem, 1.18rem);
--type-h3: clamp(1.3rem, 0.9vw + 1.05rem, 1.7rem);
--type-h2: clamp(1.85rem, 2.2vw + 1.2rem, 3.0rem);
--type-display: clamp(2.4rem, 4.8vw + 0.95rem, 5.6rem);
--type-mega: clamp(2.8rem, 7vw + 0.9rem, 7.4rem);
/* Section rhythm — desktop trimmed ~15%, mobile stays comfortable */
--pad-x: clamp(20px, 3.6vw, 36px);
--section-y: clamp(64px, 7.6vw, 116px);
--section-y-sm: clamp(48px, 5.6vw, 80px);
/* Slightly narrower max so layouts feel held together at 100% zoom */
--container: 1180px;
}
/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
padding: 12px 20px !important;
font-size: 0.88rem !important;
min-height: 44px !important;
}
/* ── Navbar — smaller links, slightly tighter CTA ───────────────────── */
.navbar .nav-links li a.nav-link,
.navbar .nav-links li > a:not(.btn) {
padding: 7px 11px !important;
font-size: 0.8rem !important;
}
.navbar .nav-cta-desktop {
padding: 9px 16px 9px 18px !important;
font-size: 0.85rem !important;
}
/* ── Hero — proportional pull-in (was floating too low and too tall) ── */
.hero {
padding: clamp(118px, 13.5vh, 168px) 0 clamp(52px, 6.5vh, 88px) !important;
}
.hero .hero-content .hero-headline {
font-size: clamp(2.25rem, 5.3vw, 4.7rem) !important;
line-height: 0.96 !important;
margin-bottom: 22px !important;
}
.hero .hero-content .hero-sub {
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.55 !important;
margin-bottom: 26px !important;
max-width: 46ch !important;
}
.hero .hero-content .hero-live-pill { margin-bottom: 26px !important; }
.hero .hero-content .hero-ctas { margin-bottom: 22px !important; gap: 12px !important; }
.hero .hero-content .hero-meta { padding-top: 16px !important; }
/* ── Section headline rhythm globally (uses rescaled token already) ─── */
.h2,
section .section-headline {
font-size: var(--type-h2) !important;
}
/* ── Featured package card — slightly less generous padding ─────────── */
.pkg-featured {
padding: clamp(24px, 3.4vw, 48px) !important;
margin-bottom: clamp(24px, 3.4vw, 48px) !important;
gap: clamp(24px, 3.4vw, 56px) !important;
}
.pkg-featured-name {
font-size: clamp(1.85rem, 3.2vw, 2.7rem) !important;
margin-bottom: 14px !important;
}
.pkg-featured-price { font-size: clamp(1.5rem, 2.4vw, 2.0rem) !important; }
.pkg-strip-row { padding: clamp(16px, 2vw, 22px) 0 !important; }
/* ── Contact form already tightened in V7.3; nudge the card a bit more */
.contact-form {
padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2.0vw, 26px) clamp(20px, 2.2vw, 28px) !important;
}
/* ════════════════════════════════════════════════════════════════════
▼ V8 — FAQ DENSITY REFINEMENT
The FAQ block previously stretched to the full container, with tall
rows and a heavy section pad. This rebuilds it as a constrained
editorial column with a tighter rhythm, smaller toggle, and a
premium open state — without changing the markup or motion language.
════════════════════════════════════════════════════════════════════ */
/* Tighter section frame */
.faq-section {
padding: clamp(48px, 6vw, 88px) 0 clamp(52px, 6.6vw, 96px) !important;
}
/* Constrained FAQ column — feels intentional, not stretched */
.faq-section .container.faq-container {
max-width: 920px !important;
padding-left: clamp(20px, 3.6vw, 32px) !important;
padding-right: clamp(20px, 3.6vw, 32px) !important;
}
/* Heading — tighter scale + rhythm with the list */
.faq-section .section-headline {
font-size: clamp(1.75rem, 2.2vw + 0.7rem, 2.5rem) !important;
line-height: 1.08 !important;
margin-bottom: clamp(20px, 2.6vw, 32px) !important;
max-width: 26ch !important;
}
/* List — tighter top margin, refined corner radius */
.faq-list {
margin-top: clamp(14px, 1.8vw, 22px) !important;
border-radius: 16px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.045),
0 16px 38px rgba(11,18,32,0.06) !important;
}
/* Question rows — compact, premium */
.faq-section .faq-q {
padding: clamp(16px, 1.9vw, 22px) clamp(56px, 6vw, 68px) clamp(16px, 1.9vw, 22px) clamp(20px, 2.4vw, 28px) !important;
font-size: clamp(0.96rem, 1.1vw, 1.06rem) !important;
line-height: 1.4 !important;
letter-spacing: -0.01em !important;
}
.faq-section .faq-item:hover .faq-q,
.faq-section .faq-item.open .faq-q,
.faq-section .faq-item .faq-q[aria-expanded="true"] {
padding-left: calc(clamp(20px, 2.4vw, 28px) + 6px) !important;
}
/* Toggle — smaller, more refined */
.faq-section .faq-toggle {
width: 30px !important;
height: 30px !important;
right: clamp(16px, 2vw, 22px) !important;
box-shadow: 0 3px 10px rgba(11,18,32,0.045) !important;
}
.faq-section .faq-toggle::before { width: 11px !important; height: 1.4px !important; }
.faq-section .faq-toggle::after { width: 1.4px !important; height: 11px !important; }
.faq-section .faq-item.open .faq-toggle,
.faq-section .faq-item .faq-q[aria-expanded="true"] .faq-toggle {
box-shadow: 0 0 0 3px rgba(14,122,101,0.16), 0 6px 14px rgba(14,122,101,0.22) !important;
}
/* Active left-edge accent — slightly slimmer */
.faq-section .faq-item::before { width: 2px !important; }
/* Answer column — tighter top, calmer body */
.faq-section .faq-a p {
padding: clamp(0px, 0.2vw, 4px) clamp(56px, 6vw, 68px) clamp(20px, 2.3vw, 26px) clamp(20px, 2.4vw, 28px) !important;
font-size: 0.9rem !important;
line-height: 1.65 !important;
max-width: 72ch !important;
}
/* Mobile FAQ — compact but readable, large enough to tap */
@media (max-width: 640px) {
.faq-section {
padding: 44px 0 52px !important;
}
.faq-section .container.faq-container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.faq-section .section-headline {
font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
margin-bottom: 18px !important;
}
.faq-list {
border-radius: 14px !important;
}
.faq-section .faq-q {
padding: 15px 50px 15px 16px !important;
font-size: 0.96rem !important;
line-height: 1.4 !important;
}
.faq-section .faq-item:hover .faq-q,
.faq-section .faq-item.open .faq-q,
.faq-section .faq-item .faq-q[aria-expanded="true"] {
padding-left: 20px !important;
}
.faq-section .faq-toggle {
width: 28px !important;
height: 28px !important;
right: 12px !important;
}
.faq-section .faq-toggle::before { width: 10px !important; }
.faq-section .faq-toggle::after { height: 10px !important; }
.faq-section .faq-a p {
padding: 2px 16px 16px 16px !important;
font-size: 0.9rem !important;
line-height: 1.6 !important;
}
}
/* ── Mobile global rhythm — slightly tighter than the existing layer ── */
@media (max-width: 768px) {
:root {
--section-y: clamp(48px, 9vw, 72px);
--section-y-sm: clamp(36px, 6vw, 56px);
--pad-x: 16px;
}
.hero {
padding: 96px 0 44px !important;
}
.hero .hero-content .hero-headline {
font-size: clamp(1.85rem, 8.4vw, 2.65rem) !important;
line-height: 1.04 !important;
}
.hero .hero-content .hero-sub {
font-size: 0.95rem !important;
margin-bottom: 22px !important;
}
.hero .hero-content .hero-live-pill { margin-bottom: 18px !important; }
.btn {
padding: 12px 18px !important;
min-height: 44px !important;
font-size: 0.88rem !important;
}
.pkg-featured { padding: 22px 20px !important; }
.pkg-featured-name { font-size: clamp(1.65rem, 7.5vw, 2.1rem) !important; }
.pkg-featured-price { font-size: 1.4rem !important; }
}
@media (max-width: 480px) {
:root { --pad-x: 14px; }
.hero { padding: 88px 0 40px !important; }
.hero .hero-content .hero-headline {
font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
▼ V8.1 — CONTACT SIDEBAR · CHECKBOXES · CHAT WIDGET
────────────────────────────────────────────────────────────────────────
Targets three issues:
1. The "How this works" sidebar was a dark slab that didn't belong
on a light contact page — repainted as a light premium card.
2. Checkbox checkmarks were rendering invisible because an earlier
reset block forced transparent backgrounds with !important —
this layer re-establishes a real filled-emerald checked state.
3. The chat bubble + panel get a real premium upgrade with a brand-
cohesive header, refined message bubbles, and Mia's avatar.
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
1) "HOW THIS WORKS" SIDEBAR — LIGHT PREMIUM CARD
════════════════════════════════════════════════════════════════════ */
.brief-card {
background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-warm) 100%) !important;
color: var(--ink) !important;
border: 1px solid rgba(14,122,101,0.16) !important;
border-radius: 22px !important;
padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.05),
0 28px 60px rgba(11,18,32,0.08),
0 12px 28px rgba(14,122,101,0.10),
inset 0 1px 0 rgba(255,255,255,0.70) !important;
}
/* Replace the dark glow with a soft emerald aurora */
.brief-card .brief-card-glow {
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.22), transparent 70%) !important;
inset: -28% -16% auto auto !important;
width: 300px !important;
height: 300px !important;
filter: blur(36px) !important;
opacity: 0.85 !important;
}
/* Hide the previous noise overlay (was tuned for dark) */
.brief-card::before {
background: none !important;
opacity: 0 !important;
}
/* Header — emerald eyebrow chip */
.brief-eyebrow {
color: var(--accent) !important;
background: var(--accent-soft) !important;
border: 1px solid rgba(14,122,101,0.20) !important;
}
.brief-eyebrow-dot {
background: var(--accent-bright) !important;
box-shadow:
0 0 0 3px rgba(14,122,101,0.18),
0 0 8px rgba(45,227,181,0.55) !important;
}
.brief-h { color: var(--ink) !important; }
/* Steps — soft emerald-tinted cards */
.brief-step {
background: rgba(14,122,101,0.045) !important;
border: 1px solid rgba(14,122,101,0.14) !important;
}
.brief-step:hover {
background: rgba(14,122,101,0.085) !important;
border-color: rgba(14,122,101,0.32) !important;
box-shadow: 0 8px 18px rgba(14,122,101,0.10);
}
.brief-step-num {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
border: 1px solid var(--accent) !important;
color: #FFFFFF !important;
box-shadow:
0 4px 10px rgba(14,122,101,0.30),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.brief-step-body strong { color: var(--ink) !important; }
.brief-step-body span { color: var(--ink-2) !important; }
/* Inline call CTA */
.brief-call-cta {
color: var(--accent) !important;
border-bottom: 1px dashed rgba(14,122,101,0.40);
padding-bottom: 4px;
}
.brief-call-cta:hover {
color: var(--accent-hover) !important;
border-bottom-color: var(--accent-hover);
}
/* Divider — emerald hairline */
.brief-divider {
background: linear-gradient(90deg, transparent 0%, rgba(14,122,101,0.22) 50%, transparent 100%) !important;
}
/* Meta promises */
.brief-meta-item { color: var(--ink-2) !important; }
.brief-meta-item svg { color: var(--accent) !important; opacity: 1 !important; }
/* Foot — email pill */
.brief-foot {
border-top: 1px dashed rgba(14,122,101,0.22) !important;
}
.brief-foot-email {
color: var(--ink) !important;
border-bottom: 1px solid rgba(14,122,101,0.45) !important;
}
.brief-foot-email:hover {
color: var(--accent) !important;
border-bottom-color: var(--accent) !important;
}
/* ════════════════════════════════════════════════════════════════════
2) CHECKBOX VISIBILITY — REAL FILLED CHECKED STATE
The earlier reset (line ~4485) had broken the custom :checked
pseudo-element with conflicting !important rules — this re-establishes
a clean filled emerald square with a white check that's actually
visible across every form on the site.
════════════════════════════════════════════════════════════════════ */
.contact-form input[type="checkbox"],
.pf-field input[type="checkbox"],
.cb-label input[type="checkbox"],
.consent-label input[type="checkbox"],
.pf-consent input[type="checkbox"],
#supportForm input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 0 !important;
padding: 0 !important;
background: #FFFFFF !important;
border: 1.6px solid var(--hairline) !important;
border-radius: 6px !important;
box-shadow: 0 1px 2px rgba(11,18,32,0.04) !important;
position: relative !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition:
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms cubic-bezier(0.2,0.7,0,1) !important;
}
/* Hover on the input itself */
.cb-label:hover input[type="checkbox"],
.consent-label:hover input[type="checkbox"],
.pf-consent:hover input[type="checkbox"] {
border-color: rgba(14,122,101,0.45) !important;
}
/* Checked: filled emerald square with halo */
.contact-form input[type="checkbox"]:checked,
.pf-field input[type="checkbox"]:checked,
.cb-label input[type="checkbox"]:checked,
.consent-label input[type="checkbox"]:checked,
.pf-consent input[type="checkbox"]:checked,
#supportForm input[type="checkbox"]:checked {
background: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow:
0 2px 8px rgba(14,122,101,0.32),
inset 0 0 0 1px rgba(255,255,255,0.10) !important;
transform: scale(1.02);
}
/* White check rendered via ::after on the input itself.
Works because we forced appearance: none above. */
.contact-form input[type="checkbox"]:checked::after,
.pf-field input[type="checkbox"]:checked::after,
.cb-label input[type="checkbox"]:checked::after,
.consent-label input[type="checkbox"]:checked::after,
.pf-consent input[type="checkbox"]:checked::after,
#supportForm input[type="checkbox"]:checked::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-position: center !important;
background-size: 13px 13px !important;
background-repeat: no-repeat !important;
pointer-events: none !important;
animation: cb-check-in 220ms cubic-bezier(0.2,0.7,0,1);
}
@keyframes cb-check-in {
0% { transform: scale(0.3); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Focus ring on the input */
.cb-label input[type="checkbox"]:focus-visible,
.consent-label input[type="checkbox"]:focus-visible,
.pf-consent input[type="checkbox"]:focus-visible {
outline: none !important;
box-shadow:
0 0 0 3px rgba(14,122,101,0.22),
inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
/* Wrapping label state when input is checked — subtle teal tint */
.cb-label:has(input[type="checkbox"]:checked) {
background: linear-gradient(180deg, rgba(14,122,101,0.08) 0%, rgba(14,122,101,0.04) 100%) !important;
border-color: rgba(14,122,101,0.48) !important;
color: var(--ink) !important;
box-shadow: 0 4px 14px rgba(14,122,101,0.10);
}
.consent-group:has(input[type="checkbox"]:checked),
.pf-consent:has(input[type="checkbox"]:checked) {
border-color: rgba(14,122,101,0.40) !important;
background: rgba(14,122,101,0.05) !important;
}
/* ════════════════════════════════════════════════════════════════════
3) CHAT WIDGET — PREMIUM UPGRADE
════════════════════════════════════════════════════════════════════ */
/* ── Toggle bubble — bigger, emerald gradient, glow ring ──────────── */
.chat-toggle {
width: 68px !important;
height: 68px !important;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
border: 1.5px solid rgba(255,255,255,0.10) !important;
border-radius: 50% !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.32),
0 14px 40px rgba(14,122,101,0.40),
inset 0 2px 0 rgba(255,255,255,0.18) !important;
transition:
transform 240ms cubic-bezier(0.2,0.7,0,1),
box-shadow 240ms ease,
background 240ms ease !important;
}
.chat-toggle:hover {
transform: translateY(-2px) scale(1.04);
background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.45),
0 16px 44px rgba(14,122,101,0.45),
inset 0 2px 0 rgba(255,255,255,0.22) !important;
}
.chat-toggle .chat-toggle-icon svg { stroke: #FFFFFF !important; }
.chat-toggle-pulse {
width: 68px !important;
height: 68px !important;
background: rgba(45,227,181,0.55) !important;
}
.chat-toggle::before {
border: 1.5px solid rgba(45,227,181,0.55) !important;
inset: -8px !important;
}
/* ── Panel ───────────────────────────────────────────────────────── */
.chat-panel {
width: 400px !important;
max-height: min(620px, calc(100dvh - 120px)) !important;
background: var(--paper) !important;
border: 1px solid var(--hairline) !important;
border-radius: 22px !important;
overflow: hidden !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.06),
0 32px 80px rgba(11,18,32,0.20),
0 14px 32px rgba(14,122,101,0.10) !important;
}
/* ── Header — midnight gradient + emerald aurora + ringed avatar ── */
.chat-header {
background: linear-gradient(180deg, #0B1220 0%, #131C30 100%) !important;
border-bottom: 1px solid rgba(45,227,181,0.20) !important;
padding: 18px 18px 16px !important;
color: #FFFFFF !important;
position: relative !important;
isolation: isolate;
}
.chat-header::after {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(45,227,181,0.30), transparent 70%);
filter: blur(28px);
pointer-events: none;
z-index: 0;
}
.chat-header > * { position: relative; z-index: 1; }
.chat-avatar {
background: var(--paper) !important;
border: 2px solid rgba(45,227,181,0.55) !important;
border-radius: 50% !important;
width: 44px !important;
height: 44px !important;
overflow: hidden !important;
box-shadow:
0 0 0 3px rgba(11,18,32,0.45),
0 6px 14px rgba(45,227,181,0.32) !important;
flex-shrink: 0 !important;
}
.chat-avatar img {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
display: block !important;
object-fit: cover !important;
}
.chat-headline strong {
color: #FFFFFF !important;
font-family: var(--font-display) !important;
font-size: 0.98rem !important;
letter-spacing: -0.01em !important;
}
.chat-status {
color: rgba(244,241,232,0.74) !important;
}
.chat-status .status-dot {
background: var(--glow) !important;
box-shadow:
0 0 0 3px rgba(45,227,181,0.20),
0 0 6px rgba(45,227,181,0.55) !important;
}
.chat-close {
color: rgba(244,241,232,0.78) !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 50% !important;
width: 30px !important;
height: 30px !important;
transition: background 200ms ease, color 200ms ease;
}
.chat-close:hover {
background: rgba(255,255,255,0.16) !important;
color: #FFFFFF !important;
}
/* ── Messages — paper backdrop ──────────────────────────────────── */
.chat-messages {
background: linear-gradient(180deg, var(--paper) 0%, var(--surface-warm) 100%) !important;
padding: 22px !important;
gap: 14px !important;
}
.chat-msg {
border-radius: 16px !important;
padding: 14px 16px !important;
font-size: 0.93rem !important;
line-height: 1.55 !important;
max-width: 90%;
border: 1px solid var(--hairline) !important;
}
.chat-msg-bot {
background: #FFFFFF !important;
color: var(--ink) !important;
border-top-left-radius: 6px !important;
box-shadow: 0 4px 12px rgba(11,18,32,0.04) !important;
}
.chat-msg-bot p {
color: var(--ink) !important;
margin: 0 0 6px !important;
}
.chat-msg-bot p:last-child { margin-bottom: 0 !important; }
.chat-msg-bot strong { color: var(--accent) !important; font-weight: 600; }
.chat-msg-user {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
color: #FFFFFF !important;
border: 1px solid var(--accent) !important;
border-top-right-radius: 6px !important;
margin-left: auto !important;
box-shadow: 0 6px 16px rgba(14,122,101,0.22) !important;
}
/* Typing indicator dots */
.chat-msg-typing {
display: inline-flex !important;
gap: 4px !important;
padding: 12px 16px !important;
width: fit-content !important;
}
.chat-msg-typing span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
animation: chatDot 1.2s ease-in-out infinite;
}
.chat-msg-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-msg-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatDot {
0%, 100% { opacity: 0.30; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-3px); }
}
/* ── Quick actions — pill chips ─────────────────────────────────── */
.chat-quick-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
}
.chat-quick {
background: #FFFFFF !important;
border: 1px solid var(--hairline) !important;
border-radius: 999px !important;
padding: 9px 14px !important;
font-family: var(--font-body) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ink) !important;
cursor: pointer !important;
box-shadow: 0 2px 6px rgba(11,18,32,0.03) !important;
transition:
border-color 200ms ease,
background 200ms ease,
color 200ms ease,
transform 180ms cubic-bezier(0.2,0.7,0,1),
box-shadow 200ms ease !important;
}
.chat-quick:hover {
border-color: var(--accent) !important;
background: var(--accent-soft) !important;
color: var(--accent-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14,122,101,0.16) !important;
}
/* ── Input row + send button ────────────────────────────────────── */
.chat-input-row {
background: #FFFFFF !important;
border-top: 1px solid var(--hairline) !important;
padding: 14px 16px !important;
gap: 10px !important;
}
.chat-input {
background: var(--surface-warm) !important;
border: 1px solid var(--hairline) !important;
border-radius: 12px !important;
padding: 11px 14px !important;
font-family: var(--font-body) !important;
font-size: 0.94rem !important;
color: var(--ink) !important;
transition:
border-color 200ms ease,
background 200ms ease,
box-shadow 200ms ease !important;
}
.chat-input:focus {
outline: none !important;
border-color: var(--accent) !important;
background: #FFFFFF !important;
box-shadow: 0 0 0 3px rgba(14,122,101,0.16) !important;
}
.chat-input::placeholder { color: var(--ink-3) !important; }
.chat-send {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
color: #FFFFFF !important;
border: 1px solid var(--accent) !important;
border-radius: 12px !important;
width: 42px !important;
height: 42px !important;
box-shadow: 0 4px 14px rgba(14,122,101,0.30) !important;
transition:
transform 180ms cubic-bezier(0.2,0.7,0,1),
box-shadow 180ms ease !important;
}
.chat-send:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(14,122,101,0.45) !important;
}
/* ── Foot ───────────────────────────────────────────────────────── */
.chat-foot {
background: var(--surface-warm) !important;
border-top: 1px solid var(--hairline) !important;
color: var(--ink-2) !important;
font-family: var(--font-body) !important;
font-size: 0.78rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
padding: 12px 16px !important;
}
.chat-foot a {
color: var(--accent) !important;
border-bottom: 1px solid rgba(14,122,101,0.45) !important;
font-weight: 600 !important;
}
.chat-foot a:hover {
color: var(--accent-hover) !important;
border-bottom-color: var(--accent-hover) !important;
}
/* ── Open/close motion on the panel ─────────────────────────────── */
.chat-widget[data-state="closed"] .chat-panel {
opacity: 0;
transform: translateY(12px) scale(0.97);
pointer-events: none;
}
.chat-widget[data-state="open"] .chat-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.chat-panel {
transition:
opacity 240ms cubic-bezier(0.2,0.7,0,1),
transform 280ms cubic-bezier(0.2,0.7,0,1) !important;
transform-origin: bottom right;
}
/* ── Mobile chat sizing ─────────────────────────────────────────── */
@media (max-width: 480px) {
.chat-panel {
width: calc(100vw - 24px) !important;
right: 12px !important;
left: auto !important;
max-height: min(74vh, calc(100dvh - 96px)) !important;
border-radius: 18px !important;
}
.chat-toggle,
.chat-toggle-pulse {
width: 60px !important;
height: 60px !important;
}
.chat-toggle::before { inset: -7px !important; }
.chat-messages { padding: 16px !important; }
.chat-msg { padding: 12px 14px !important; font-size: 0.9rem !important; }
.chat-header { padding: 14px 14px 12px !important; }
.chat-avatar { width: 40px !important; height: 40px !important; }
.chat-input-row { padding: 12px !important; }
.chat-send { width: 40px !important; height: 40px !important; }
}
/* ── Reduce motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.chat-toggle::before { animation: none !important; opacity: 0 !important; }
.chat-msg-typing span { animation: none !important; }
.chat-panel { transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V9 — REFINEMENT PASS (consistency · contrast · polish)
────────────────────────────────────────────────────────────────────────
Restrained polish layer. NO new colors, NO redesign — just consistency
in the existing pearl + midnight + emerald + warm-gold palette.
· Form parity (package + support forms now match contact form)
· Button focus ring switched from coral to emerald
· Hover lifts and border transitions standardized
· Card shadow rhythm cleaned up
· A couple of lingering coral hovers pulled back to emerald
· Subtle warm-gold accent details on featured tags + nav rule
· Mobile spacing edge cases tightened
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
1) BUTTONS — focus ring and link hover unified to emerald
════════════════════════════════════════════════════════════════════ */
.btn:focus-visible {
outline: none !important;
box-shadow:
0 0 0 3px rgba(14,122,101,0.22),
0 0 0 1px var(--accent) !important;
}
/* Text-only link: emerald hover instead of coral */
.btn-link:hover {
color: var(--accent) !important;
border-bottom-color: var(--accent) !important;
}
/* Ghost button: subtle emerald hover instead of pure ink */
.btn-ghost:hover {
border-color: rgba(14,122,101,0.45) !important;
color: var(--accent-hover) !important;
background: rgba(14,122,101,0.04) !important;
}
/* ════════════════════════════════════════════════════════════════════
2) FORM PARITY — package form + support form match contact form
.pf-field (package inquiry forms) was using hard corners with an
ink focus border. Bring it to the same 12-px radius + emerald
focus halo used by .contact-form.
════════════════════════════════════════════════════════════════════ */
.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="tel"],
.pf-field input[type="url"],
.pf-field select,
.pf-field textarea,
#supportForm input[type="text"],
#supportForm input[type="email"],
#supportForm input[type="tel"],
#supportForm input[type="url"],
#supportForm select,
#supportForm textarea {
background: rgba(255,255,255,0.70) !important;
border: 1px solid var(--hairline) !important;
border-radius: 12px !important;
padding: 13px 15px !important;
font-family: var(--font-body) !important;
font-size: 0.95rem !important;
color: var(--ink) !important;
transition:
border-color 220ms ease,
background 220ms ease,
box-shadow 220ms ease,
transform 180ms ease !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.pf-field input::placeholder,
.pf-field textarea::placeholder,
#supportForm input::placeholder,
#supportForm textarea::placeholder {
color: var(--ink-3) !important;
opacity: 0.7 !important;
}
.pf-field input:hover,
.pf-field select:hover,
.pf-field textarea:hover,
#supportForm input:hover,
#supportForm select:hover,
#supportForm textarea:hover {
border-color: rgba(14,122,101,0.30) !important;
background: var(--surface) !important;
}
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus,
#supportForm input:focus,
#supportForm select:focus,
#supportForm textarea:focus {
background: var(--surface) !important;
border-color: var(--accent) !important;
box-shadow:
0 0 0 4px rgba(14,122,101,0.12),
inset 0 1px 0 rgba(255,255,255,0.8) !important;
outline: none !important;
transform: translateY(-1px);
}
/* Match label rhythm too */
.pf-field label,
#supportForm label {
font-family: var(--font-mono) !important;
font-size: 0.66rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--ink-2) !important;
margin-bottom: 6px !important;
display: block;
}
/* ════════════════════════════════════════════════════════════════════
3) CARD HOVER RHYTHM — unified lift + emerald hairline transition
Big editorial cards lift 2px; small chips lift 1px. Borders shift to
a soft emerald hairline (rgba(14,122,101,0.32)) on hover.
════════════════════════════════════════════════════════════════════ */
/* Big cards — package strip rows, services, why cards, how steps */
.svc-row,
.pkg-strip-row,
.why-section .why-card,
.how-section .how-step {
transition:
background 240ms ease,
border-color 240ms ease,
box-shadow 240ms ease,
transform 240ms cubic-bezier(0.2,0.7,0,1) !important;
}
.pkg-strip-row:hover {
background: rgba(14,122,101,0.03) !important;
}
/* Small cards / chips — already standardized via earlier layers */
/* ════════════════════════════════════════════════════════════════════
4) SECTION RULE / HAIRLINE — single warm-stone source
Some places used --hairline-soft (cool, navy-tinted) and others used
--hairline (warm pearl-stone). Lock decorative section rules to
--hairline so the warm tone stays consistent.
════════════════════════════════════════════════════════════════════ */
.section-rule,
.form-section-rule,
hr {
border: 0 !important;
height: 1px !important;
background: var(--hairline) !important;
opacity: 0.85 !important;
}
/* ════════════════════════════════════════════════════════════════════
5) WARM-GOLD POLISH — subtle and intentional
Apply --gold (#A88652) to a small set of premium signals so the
warm-earth accent reads on purpose, not at random.
════════════════════════════════════════════════════════════════════ */
/* Featured package tag — keep coral lettering, add a thin gold underline */
.pkg-featured-tag {
position: relative;
padding-bottom: 8px !important;
}
.pkg-featured-tag::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 28px; height: 1.5px;
background: linear-gradient(90deg, var(--gold) 0%, rgba(168,134,82,0) 100%);
border-radius: 2px;
opacity: 0.85;
}
/* Hero live pill — add a hair-thin warm-gold rim under the emerald glow */
.hero .hero-content .hero-live-pill {
box-shadow:
0 0 0 1px rgba(168,134,82,0.18),
0 0 0 2px rgba(14,122,101,0.05),
0 8px 22px rgba(14,122,101,0.10) !important;
}
/* Footer hairline above the bottom row — softer, stone-warm */
.footer-bottom {
border-top: 1px solid var(--hairline) !important;
}
/* ════════════════════════════════════════════════════════════════════
6) TYPOGRAPHY CONTRAST — body copy parity
Some legacy paragraphs were rendering on --ink-3 (the meta gray)
instead of --ink-2 (true body gray). Bring section sub-copy and
lede paragraphs to --ink-2 for consistent contrast on pearl.
════════════════════════════════════════════════════════════════════ */
.section-sub,
.lede,
.why-card p,
.how-step-desc,
.svc-body p {
color: var(--ink-2) !important;
}
/* Strong phrases inside body copy — emerald instead of off-ink */
.section-sub strong,
.lede strong,
.why-card p strong {
color: var(--accent-hover) !important;
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════════
7) NAV — warm-stone underline rhythm on hover
Make nav link hover identical across all pages: subtle emerald
underline that grows from center.
════════════════════════════════════════════════════════════════════ */
.navbar .nav-links li > a:not(.btn) {
position: relative;
}
.navbar .nav-links li > a:not(.btn)::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 0;
height: 1.5px;
background: var(--accent);
transform: translateX(-50%);
transition: width 220ms cubic-bezier(0.2,0.7,0,1);
border-radius: 2px;
}
.navbar .nav-links li > a:not(.btn):hover::after,
.navbar .nav-links li > a.is-active::after {
width: 18px;
}
/* ════════════════════════════════════════════════════════════════════
8) ICON COLORS — standardize stand-alone icon strokes to emerald
where they appear next to body copy in trust-strip / meta rows.
════════════════════════════════════════════════════════════════════ */
.trust-item-icon svg,
.contact-hero-meta svg,
.footer-location svg {
color: var(--accent) !important;
}
/* ════════════════════════════════════════════════════════════════════
9) MOBILE SPACING — a few specific edge cases
════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Featured package card — keep its tag underline visible */
.pkg-featured-tag { padding-bottom: 6px !important; }
/* Trust strip — vertical breathing room on small viewports */
.trust-strip {
gap: 14px !important;
}
.trust-item p { font-size: 0.86rem !important; line-height: 1.5 !important; }
/* Tighten contact hero meta line so it stops wrapping awkwardly */
.contact-hero-meta {
gap: 6px 12px !important;
}
.contact-hero-meta .meta-item {
font-size: 0.66rem !important;
}
}
@media (max-width: 480px) {
/* Form rows — single column already, just tighten gap */
.contact-form .form-row { gap: 10px !important; }
.contact-form .form-group { margin-bottom: 12px !important; }
/* Footer columns spacing */
.footer-grid { gap: 28px !important; }
}
/* ════════════════════════════════════════════════════════════════════
10) SELECTION + SCROLLBAR — already emerald, keep tone consistent
Lock the scrollbar thumb to a softer gradient so it reads as a
premium detail rather than a neon stripe.
════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(14,122,101,0.32), rgba(14,122,101,0.18)) !important;
border: 2px solid var(--surface-warm) !important;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(14,122,101,0.48), rgba(14,122,101,0.28)) !important;
}
/* ════════════════════════════════════════════════════════════════════
11) FAQ + CTA + CHAT — micro-tightening only
Pull the FAQ and final CTA in by another small notch so they read
together as a single closing rhythm at the foot of the page.
════════════════════════════════════════════════════════════════════ */
.faq-section + .section,
.section + .cta-section.cta-v5 {
padding-top: clamp(44px, 5vw, 80px) !important;
}
/* Align the footer above the chat-toggle so the bubble never crowds
important content on long pages */
.footer { padding-bottom: clamp(40px, 5vw, 64px) !important; }
/* ════════════════════════════════════════════════════════════════════════
▼ V10 — DEMO PROJECTS · SHOWCASE REFINEMENT
────────────────────────────────────────────────────────────────────────
The bottom-row arrows were too quiet to be read as carousel controls.
This layer:
· Lifts both arrows up to the left + right edges of the preview frame
· Vertically centers them, slightly overlapping the outer edges
· Premium styling: layered shadow, soft emerald halo, hover halo + scale
· Caption stays under the frame, now centered and refined as a unit
· Mobile/tablet: arrows tuck inside the frame edges so nothing crowds
HTML change in index.html: arrows moved from .demo-controls into
.demo-viewport (siblings of .demo-browser-window). JS untouched.
════════════════════════════════════════════════════════════════════════ */
/* Viewport becomes positioning context (it already was on touch devices,
this makes it explicit for mouse users too) */
.demo-section .demo-viewport {
position: relative !important;
}
/* ── Side-positioned arrow buttons — premium pill ────────────────────── */
.demo-section .demo-arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%);
width: 56px !important;
height: 56px !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--surface) !important;
color: var(--ink) !important;
border: 1px solid var(--hairline) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 4 !important;
cursor: pointer !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.06),
0 18px 40px rgba(11,18,32,0.16),
0 6px 14px rgba(45,227,181,0.10) !important;
transition:
transform 280ms cubic-bezier(0.2,0.7,0,1),
box-shadow 280ms ease,
background 260ms ease,
color 260ms ease,
border-color 260ms ease,
opacity 260ms ease !important;
}
.demo-section .demo-arrow svg {
width: 22px !important;
height: 22px !important;
stroke-width: 2.4 !important;
transition: transform 260ms cubic-bezier(0.2,0.7,0,1);
}
/* Default position — slightly outside the frame edge */
.demo-section .demo-arrow.demo-prev { left: -28px !important; right: auto !important; }
.demo-section .demo-arrow.demo-next { right: -28px !important; left: auto !important; }
/* Hover — emerald fill + halo + lift */
.demo-section .demo-arrow:hover {
background: var(--accent) !important;
color: #FFFFFF !important;
border-color: var(--accent) !important;
transform: translateY(-50%) scale(1.06);
box-shadow:
0 0 0 6px rgba(14,122,101,0.16),
0 22px 50px rgba(14,122,101,0.32),
0 6px 14px rgba(45,227,181,0.20) !important;
}
.demo-section .demo-arrow:hover svg { transform: scale(1.08); }
.demo-section .demo-arrow.demo-prev:hover svg { animation: demoPrevNudge 480ms cubic-bezier(0.2,0.7,0,1); }
.demo-section .demo-arrow.demo-next:hover svg { animation: demoNextNudge 480ms cubic-bezier(0.2,0.7,0,1); }
@keyframes demoNextNudge {
0% { transform: translateX(0) scale(1.08); }
55% { transform: translateX(3px) scale(1.08); }
100% { transform: translateX(0) scale(1.08); }
}
@keyframes demoPrevNudge {
0% { transform: translateX(0) scale(1.08); }
55% { transform: translateX(-3px) scale(1.08); }
100% { transform: translateX(0) scale(1.08); }
}
/* Active press */
.demo-section .demo-arrow:active {
transform: translateY(-50%) scale(0.97);
}
/* Focus ring — emerald, accessible */
.demo-section .demo-arrow:focus-visible {
outline: none !important;
box-shadow:
0 0 0 4px rgba(14,122,101,0.22),
0 0 0 1px var(--accent),
0 18px 40px rgba(11,18,32,0.16) !important;
}
/* ── Caption block — single centered column under the frame ──────────── */
.demo-section .demo-controls {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
max-width: 720px !important;
margin: clamp(20px, 2.6vw, 32px) auto 0 !important;
padding: 0 clamp(16px, 4vw, 32px) !important;
text-align: center !important;
position: relative;
}
/* Tiny hairline rule above the caption — visual tether to the frame */
.demo-section .demo-controls::before {
content: "";
width: 32px;
height: 1.5px;
background: linear-gradient(90deg, rgba(14,122,101,0) 0%, var(--accent) 50%, rgba(14,122,101,0) 100%);
border-radius: 2px;
margin-bottom: 14px;
opacity: 0.7;
}
.demo-section .demo-caption {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 6px !important;
max-width: 56ch;
}
.demo-section .demo-caption strong {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
line-height: 1.25 !important;
}
.demo-section .demo-caption span {
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
line-height: 1.6 !important;
color: var(--ink-2) !important;
max-width: 56ch;
}
/* ── Tablet — pull arrows inside the frame edges so they stay visible ── */
@media (max-width: 1100px) {
.demo-section .demo-arrow.demo-prev { left: 10px !important; }
.demo-section .demo-arrow.demo-next { right: 10px !important; }
.demo-section .demo-arrow {
width: 50px !important;
height: 50px !important;
background: rgba(255,255,255,0.92) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.demo-section .demo-arrow svg { width: 20px !important; height: 20px !important; }
}
/* ── Mobile — small but tappable, tucked in close ──────────────────── */
@media (max-width: 640px) {
.demo-section .demo-arrow {
width: 42px !important;
height: 42px !important;
background: rgba(255,255,255,0.94) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.08),
0 8px 20px rgba(11,18,32,0.18) !important;
}
.demo-section .demo-arrow svg { width: 16px !important; height: 16px !important; }
.demo-section .demo-arrow.demo-prev { left: 8px !important; }
.demo-section .demo-arrow.demo-next { right: 8px !important; }
.demo-section .demo-controls {
margin-top: 18px !important;
padding: 0 16px !important;
}
.demo-section .demo-controls::before {
margin-bottom: 12px;
}
.demo-section .demo-caption strong { font-size: 0.98rem !important; }
.demo-section .demo-caption span { font-size: 0.88rem !important; }
}
/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.demo-section .demo-arrow,
.demo-section .demo-arrow svg {
transition: none !important;
animation: none !important;
}
.demo-section .demo-arrow:hover { transform: translateY(-50%) !important; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V11 — SERVICE AREA · INDUSTRY INDEX (editorial card)
────────────────────────────────────────────────────────────────────────
The previous "Built for local Massachusetts" pill was wide, single-row,
and read as a label without authorship. This rebuilds it as a compact
editorial index card under the Service Area towns:
· Eyebrow + heading + short sub-line at the top
· Chips below — alternating sans / italic-serif rhythm with a tiny
emerald or gold leading dot
· Refined hover states (lift + emerald border / fill)
· Soft hairline footer with a "Don't see your trade?" link
· Compact max-width so the card never overpowers the section
════════════════════════════════════════════════════════════════════════ */
/* Container — compact, contained, NOT full-width */
.area-section .area-industries {
margin: clamp(36px, 4.4vw, 56px) auto 0 !important;
max-width: 880px !important;
padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px) !important;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 22px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.05),
0 22px 50px rgba(11,18,32,0.06),
inset 0 1px 0 rgba(255,255,255,0.65) !important;
display: block !important;
flex-direction: initial !important;
align-items: initial !important;
gap: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* Subtle emerald aurora behind the card top-left for depth */
.area-section .area-industries::before {
content: "" !important;
position: absolute !important;
inset: -30% auto auto -10% !important;
width: 320px !important;
height: 320px !important;
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.12), transparent 70%) !important;
filter: blur(36px) !important;
pointer-events: none !important;
z-index: 0 !important;
border-radius: 50% !important;
padding: 0 !important;
-webkit-mask: none !important;
mask: none !important;
opacity: 0.85 !important;
animation: none !important;
}
.area-section .area-industries > * { position: relative; z-index: 1; }
/* ── Header block ─────────────────────────────────────────────────── */
.area-section .area-industries-head {
text-align: center;
margin: 0 auto clamp(18px, 2.2vw, 24px);
max-width: 52ch;
}
.area-section .area-industries-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.20);
padding: 5px 12px 5px 9px;
border-radius: 999px;
margin-bottom: 12px;
/* Override the V10 .area-industries-label rules */
border-right: 0 !important;
padding-right: 12px !important;
width: auto !important;
border-bottom: 0 !important;
padding-bottom: 5px !important;
}
.area-section .area-industries-tick {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow:
0 0 0 3px rgba(14,122,101,0.16),
0 0 6px rgba(45,227,181,0.55);
animation: areaIxTick 2.4s ease-in-out infinite;
}
@keyframes areaIxTick {
0%, 100% { box-shadow: 0 0 0 3px rgba(14,122,101,0.16), 0 0 6px rgba(45,227,181,0.55); }
50% { box-shadow: 0 0 0 5px rgba(14,122,101,0.10), 0 0 10px rgba(45,227,181,0.85); }
}
.area-section .area-industries-h {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.35rem, 1.8vw + 0.5rem, 1.85rem);
letter-spacing: -0.02em;
line-height: 1.18;
color: var(--ink);
margin: 0 0 8px;
}
.area-section .area-industries-h .italic-accent {
color: var(--accent);
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
}
.area-section .area-industries-sub {
font-size: 0.92rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
max-width: 50ch;
margin-left: auto;
margin-right: auto;
}
/* ── Chips list ───────────────────────────────────────────────────── */
.area-section .area-industries-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px 8px !important;
}
/* Default chip — sans display, white surface */
.area-section .area-chip {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 7px 14px 7px 12px !important;
background: rgba(255,255,255,0.78) !important;
border: 1px solid var(--hairline) !important;
border-radius: 999px !important;
font-family: var(--font-display) !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 0.86rem !important;
color: var(--ink) !important;
letter-spacing: -0.005em !important;
box-shadow: 0 2px 5px rgba(11,18,32,0.03) !important;
cursor: default !important;
transition:
transform 220ms cubic-bezier(0.2,0.7,0,1),
background 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease !important;
position: relative !important;
}
/* Italic chip — serif, emerald-soft surface */
.area-section .area-chip.is-italic {
background: var(--accent-soft) !important;
border-color: rgba(14,122,101,0.20) !important;
color: var(--accent-hover) !important;
font-family: var(--font-italic) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 0.96rem !important;
padding: 5px 14px 5px 12px !important;
}
/* Leading mark — gold dot for sans, emerald dot for italic */
.area-section .area-chip-mark {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
transition: background 220ms ease, transform 220ms cubic-bezier(0.2,0.7,0,1);
}
.area-section .area-chip.is-italic .area-chip-mark {
background: var(--accent-bright);
}
.area-section .area-chip-text {
line-height: 1.2;
/* Display name keeps its rhythm even with the leading mark */
}
/* Hover — non-italic chips fill ink */
.area-section .area-chip:hover {
transform: translateY(-1px);
background: var(--ink) !important;
color: var(--paper) !important;
border-color: var(--ink) !important;
box-shadow:
0 8px 18px rgba(11,18,32,0.18),
0 0 0 1px rgba(14,122,101,0.20) !important;
}
.area-section .area-chip:hover .area-chip-mark {
background: var(--accent-bright);
transform: scale(1.4);
}
/* Hover — italic chips fill emerald */
.area-section .area-chip.is-italic:hover {
background: var(--accent) !important;
color: #FFFFFF !important;
border-color: var(--accent) !important;
box-shadow:
0 10px 22px rgba(14,122,101,0.30),
0 0 0 1px rgba(45,227,181,0.20) !important;
}
.area-section .area-chip.is-italic:hover .area-chip-mark {
background: #FFFFFF;
}
/* Focus visible (in case chips become interactive later) */
.area-section .area-chip:focus-visible {
outline: none !important;
box-shadow:
0 0 0 3px rgba(14,122,101,0.22),
0 0 0 1px var(--accent) !important;
}
/* ── Footer link ──────────────────────────────────────────────────── */
.area-section .area-industries-foot {
margin: clamp(16px, 1.8vw, 22px) 0 0;
text-align: center;
font-size: 0.84rem;
color: var(--ink-2);
padding-top: clamp(14px, 1.8vw, 20px);
border-top: 1px dashed rgba(14,122,101,0.22);
}
.area-section .area-industries-foot a {
color: var(--accent);
font-weight: 600;
border-bottom: 1px solid rgba(14,122,101,0.45);
padding-bottom: 1px;
transition: color 200ms ease, border-bottom-color 200ms ease;
}
.area-section .area-industries-foot a:hover {
color: var(--accent-hover);
border-bottom-color: var(--accent-hover);
}
/* ── Disable the legacy V10 shimmer + label rules on this rebuild ─── */
.area-section .area-industries::after { content: none !important; }
.area-section .area-industries-label { display: none !important; }
/* ── Mobile rhythm ────────────────────────────────────────────────── */
@media (max-width: 720px) {
.area-section .area-industries {
max-width: 100% !important;
padding: 20px 18px !important;
border-radius: 18px !important;
}
.area-section .area-industries-h {
font-size: clamp(1.2rem, 5.6vw, 1.55rem);
}
.area-section .area-industries-sub { font-size: 0.88rem; }
.area-section .area-industries-list { gap: 6px 6px !important; }
.area-section .area-chip {
font-size: 0.82rem !important;
padding: 6px 12px 6px 10px !important;
}
.area-section .area-chip.is-italic {
font-size: 0.92rem !important;
padding: 4px 12px 4px 10px !important;
}
.area-section .area-industries-foot { font-size: 0.8rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.area-section .area-industries-tick { animation: none !important; }
.area-section .area-chip,
.area-section .area-chip-mark { transition: none !important; }
.area-section .area-chip:hover { transform: none !important; }
.area-section .area-chip:hover .area-chip-mark { transform: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V12 — TERMS · PRIVACY (premium legal pages)
────────────────────────────────────────────────────────────────────────
Restyles the .legal-* page system from a single-column text dump into
a premium editorial layout with:
· Hero with eyebrow + meta-pill + intro + disclaimer card
· Sticky table-of-contents sidebar on desktop
· Sectioned cards with hairline borders, rounded corners, soft shadow
· Numbered eyebrows (emerald) on each section heading
· Emphasis card variant for refund-policy / "what we don't do"
· Contact card variant with brand sign-off
Coral accents replaced by emerald to match the V8 brand pass.
════════════════════════════════════════════════════════════════════════ */
/* Page background — paper, no halo */
body.legal-page { background: var(--paper) !important; }
/* ── Hero ────────────────────────────────────────────────────────────── */
.legal-page .legal-hero {
position: relative !important;
padding: clamp(120px, 14vh, 180px) 0 clamp(28px, 4vw, 48px) !important;
background:
radial-gradient(820px 480px at 88% 0%, rgba(14,122,101,0.10), transparent 62%),
radial-gradient(640px 360px at 4% 96%, rgba(45,227,181,0.08), transparent 62%),
var(--paper) !important;
border-bottom: 1px solid var(--hairline) !important;
overflow: hidden;
}
.legal-page .legal-hero-glow {
position: absolute;
inset: -10% -10% auto auto;
width: 480px; height: 480px;
background: radial-gradient(circle at 50% 50%, rgba(45,227,181,0.10), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.legal-page .legal-hero-inner {
position: relative !important;
z-index: 1 !important;
max-width: 880px !important;
}
/* Eyebrow on legal hero */
.legal-page .legal-eyebrow {
margin-bottom: 16px !important;
}
/* Headline */
.legal-page .legal-hero h1 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
letter-spacing: -0.04em !important;
line-height: 1.02 !important;
margin: 6px 0 18px !important;
color: var(--ink) !important;
max-width: 18ch !important;
}
.legal-page .legal-hero h1 .italic-accent {
color: var(--accent);
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
}
.legal-page .legal-hero h1 .dot { color: var(--accent-bright) !important; }
/* Meta row — pill + separator + city */
.legal-page .legal-meta-row {
display: inline-flex !important;
flex-wrap: wrap;
align-items: center !important;
gap: 12px !important;
margin: 0 0 22px !important;
}
.legal-page .legal-meta-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 10px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
box-shadow: 0 4px 10px rgba(11,18,32,0.04);
}
.legal-page .legal-meta-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow:
0 0 0 3px rgba(14,122,101,0.16),
0 0 6px rgba(45,227,181,0.55);
flex-shrink: 0;
}
.legal-page .legal-meta-sep {
width: 1px; height: 14px;
background: var(--hairline);
}
.legal-page .legal-meta-text {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
/* Intro */
.legal-page .legal-hero p.legal-intro {
font-family: var(--font-body) !important;
font-size: 1.05rem !important;
line-height: 1.65 !important;
color: var(--ink) !important;
max-width: 56ch !important;
margin: 0 0 24px !important;
}
/* Disclaimer card */
.legal-page .legal-template-note {
display: flex !important;
gap: 12px !important;
align-items: flex-start !important;
background: linear-gradient(180deg, rgba(14,122,101,0.06) 0%, rgba(14,122,101,0.02) 100%) !important;
border: 1px solid rgba(14,122,101,0.22) !important;
border-left: 3px solid var(--accent) !important;
border-radius: 14px !important;
padding: 14px 16px !important;
margin: 0 !important;
font-family: var(--font-body) !important;
font-size: 0.88rem !important;
line-height: 1.55 !important;
color: var(--ink) !important;
max-width: 72ch !important;
}
.legal-page .legal-template-note .legal-template-icon {
color: var(--accent);
flex-shrink: 0;
margin-top: 2px;
}
.legal-page .legal-template-note p { margin: 0 !important; color: var(--ink) !important; }
.legal-page .legal-template-note strong { color: var(--ink) !important; font-weight: 600 !important; }
/* ── Body — layout grid (sidebar + content) ─────────────────────────── */
.legal-page .legal-body {
padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px) !important;
background: var(--paper) !important;
}
.legal-page .legal-body .container.legal-layout {
max-width: 1180px !important;
display: grid !important;
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
gap: clamp(24px, 3vw, 48px) !important;
align-items: start !important;
}
/* ── Table of Contents ──────────────────────────────────────────────── */
.legal-page .legal-toc {
position: sticky !important;
top: 100px !important;
align-self: start !important;
padding: 18px 18px 14px !important;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border: 1px solid var(--hairline) !important;
border-radius: 16px !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.04),
0 14px 32px rgba(11,18,32,0.06) !important;
max-height: calc(100dvh - 140px);
overflow-y: auto;
}
.legal-page .legal-toc-label {
font-family: var(--font-mono) !important;
font-size: 0.62rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--accent) !important;
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.18);
padding: 4px 10px;
border-radius: 999px;
width: fit-content;
margin: 0 0 12px !important;
}
.legal-page .legal-toc-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 1px;
}
.legal-page .legal-toc-list li { padding: 0; margin: 0; }
.legal-page .legal-toc-list li::before { content: none !important; }
.legal-page .legal-toc-list a {
display: block;
padding: 7px 10px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--ink-2);
line-height: 1.4;
text-decoration: none;
transition: background 200ms ease, color 200ms ease, padding-left 200ms cubic-bezier(0.2,0.7,0,1);
border-bottom: 0;
}
.legal-page .legal-toc-list a:hover {
background: var(--accent-soft);
color: var(--accent-hover);
padding-left: 14px;
}
/* ── Content cards ───────────────────────────────────────────────────── */
.legal-page .legal-content {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
max-width: 760px !important;
}
.legal-page .legal-card {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: 18px !important;
padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px) !important;
box-shadow:
0 0 0 1px rgba(14,122,101,0.03),
0 12px 28px rgba(11,18,32,0.04) !important;
transition: box-shadow 280ms ease, transform 280ms cubic-bezier(0.2,0.7,0,1);
scroll-margin-top: 100px;
}
.legal-page .legal-card:hover {
box-shadow:
0 0 0 1px rgba(14,122,101,0.10),
0 16px 36px rgba(11,18,32,0.07) !important;
}
.legal-page .legal-card.legal-card-emphasis {
background: linear-gradient(180deg, rgba(14,122,101,0.05) 0%, var(--surface) 100%) !important;
border-left: 3px solid var(--accent) !important;
}
.legal-page .legal-card.legal-card-contact {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%) !important;
border-color: rgba(14,122,101,0.16) !important;
}
/* Disable the legacy section-divider treatment on cards */
.legal-page .legal-card { border-bottom: 1px solid var(--hairline) !important; }
/* Headings inside cards */
.legal-page .legal-card h2 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(1.18rem, 1.4vw + 0.4rem, 1.5rem) !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
margin: 0 0 14px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
line-height: 1.18 !important;
}
.legal-page .legal-card h2 .legal-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 4px 9px;
background: var(--accent-soft) !important;
border: 1px solid rgba(14,122,101,0.20);
border-radius: 999px;
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
color: var(--accent) !important;
flex-shrink: 0;
}
/* Copy inside cards */
.legal-page .legal-card p,
.legal-page .legal-card li {
font-family: var(--font-body) !important;
font-size: 0.96rem !important;
line-height: 1.7 !important;
color: var(--ink) !important;
margin: 0 0 12px !important;
max-width: 70ch;
}
.legal-page .legal-card p:last-child,
.legal-page .legal-card li:last-child { margin-bottom: 0 !important; }
.legal-page .legal-card ul,
.legal-page .legal-card ol {
list-style: none !important;
padding: 0 !important;
margin: 4px 0 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.legal-page .legal-card ul li {
padding-left: 22px !important;
position: relative !important;
margin-bottom: 0 !important;
}
.legal-page .legal-card ul li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0.78em !important;
width: 12px !important;
height: 1.5px !important;
background: var(--accent) !important;
border-radius: 1px;
color: transparent !important;
opacity: 1 !important;
}
.legal-page .legal-card strong { color: var(--ink) !important; font-weight: 600 !important; }
/* Email link inside contact card */
.legal-page .legal-mail {
color: var(--accent) !important;
border-bottom: 1px solid rgba(14,122,101,0.45) !important;
padding-bottom: 1px;
font-weight: 500;
transition: color 200ms ease, border-bottom-color 200ms ease;
}
.legal-page .legal-mail:hover {
color: var(--accent-hover) !important;
border-bottom-color: var(--accent-hover) !important;
}
/* Card foot — small mono caption inside contact card */
.legal-page .legal-card-foot {
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
margin-top: 12px !important;
padding-top: 14px !important;
border-top: 1px dashed rgba(14,122,101,0.22) !important;
}
/* ── Mobile / tablet ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
.legal-page .legal-body .container.legal-layout {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.legal-page .legal-toc {
position: static !important;
max-height: none !important;
order: -1;
}
.legal-page .legal-toc-list {
flex-direction: row;
flex-wrap: wrap;
gap: 4px 6px;
}
.legal-page .legal-toc-list a {
padding: 6px 10px;
font-size: 0.78rem;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 999px;
}
.legal-page .legal-toc-list a:hover {
background: var(--accent-soft);
border-color: rgba(14,122,101,0.28);
padding-left: 10px;
}
}
@media (max-width: 640px) {
.legal-page .legal-hero {
padding: 100px 0 28px !important;
}
.legal-page .legal-hero h1 {
font-size: clamp(1.85rem, 9vw, 2.3rem) !important;
}
.legal-page .legal-meta-sep { display: none; }
.legal-page .legal-meta-row { gap: 8px !important; }
.legal-page .legal-template-note {
font-size: 0.84rem !important;
padding: 12px 14px !important;
border-radius: 12px !important;
}
.legal-page .legal-card {
padding: 18px 18px !important;
border-radius: 14px !important;
}
.legal-page .legal-card h2 {
font-size: 1.05rem !important;
gap: 10px !important;
}
.legal-page .legal-card h2 .legal-num {
min-width: 32px;
font-size: 0.66rem !important;
padding: 3px 8px;
}
.legal-page .legal-card p,
.legal-page .legal-card li {
font-size: 0.93rem !important;
}
.legal-page .legal-toc {
padding: 14px 14px 12px !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.legal-page .legal-card { transition: none !important; }
.legal-page .legal-toc-list a { transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V13 — FOOTER LEGAL LINKS · VISIBILITY FIX
────────────────────────────────────────────────────────────────────────
The previous V2 layer set .footer-legal a to a 55% champagne cream —
left over from the old dark-footer era. On the current pearl footer
that color is essentially invisible. This forces a visible muted-ink
color, adds a refined dot separator, an underline-on-hover affordance,
and balances the bottom row left/right with a clean mobile stack.
════════════════════════════════════════════════════════════════════════ */
/* Bottom row — left copyright, right legal links (clean balance) */
.footer .footer-bottom {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 14px 22px !important;
padding-top: 22px !important;
border-top: 1px solid var(--hairline) !important;
margin-top: 22px !important;
color: var(--ink-3) !important;
font-family: var(--font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.06em !important;
}
.footer .footer-bottom > p {
margin: 0 !important;
color: var(--ink-2) !important;
line-height: 1.55 !important;
max-width: 60ch !important;
}
/* Legal links container — emerald hover, clean separator */
.footer .footer-legal {
display: inline-flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0 10px !important;
margin: 0 !important;
}
.footer .footer-legal a {
color: var(--ink-2) !important; /* override the champagne ghost */
font-family: var(--font-body) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
padding: 4px 0 !important;
margin: 0 !important;
border-bottom: 1px solid transparent !important;
transition:
color 200ms ease,
border-bottom-color 200ms ease !important;
}
.footer .footer-legal a:hover,
.footer .footer-legal a:focus-visible {
color: var(--accent-hover) !important;
border-bottom-color: rgba(14,122,101,0.45) !important;
outline: none !important;
}
.footer .footer-legal a:focus-visible {
box-shadow: 0 0 0 3px rgba(14,122,101,0.18) !important;
border-radius: 4px;
}
/* Separator dot between the two links */
.footer .footer-legal-sep {
color: var(--ink-3) !important;
font-family: var(--font-body);
font-size: 0.82rem;
line-height: 1;
user-select: none;
-webkit-user-select: none;
opacity: 0.6;
}
/* Mobile — copyright on top, links beneath, all left-aligned */
@media (max-width: 720px) {
.footer .footer-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.footer .footer-legal {
gap: 0 8px !important;
}
.footer .footer-legal a { font-size: 0.84rem !important; }
}
/* ════════════════════════════════════════════════════════════════════════
▼ V14 — HOMEPAGE RESTRUCTURE (premium edit)
────────────────────────────────────────────────────────────────────────
New flow: Hero → Demo → Services → Lead System → Packages → Process →
Studio Standard → Service Area → FAQ → CTA. This layer adds the new
"Lead System" combined section (replaces AI + Inbox + Automation) and
the new "Studio Standard" section (replaces former "Built Different").
════════════════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
LEAD SYSTEM — combined AI + Inbox + Automation, tighter & more premium
──────────────────────────────────────────────────────────────────────── */
.lead-system-section {
position: relative;
overflow: hidden;
padding: clamp(64px, 8vw, 120px) 0 !important;
background:
linear-gradient(180deg, var(--surface-warm) 0%, var(--bg) 50%, var(--surface-warm) 100%) !important;
}
.lead-system-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 18% 28%, rgba(45,227,181,0.10), transparent 55%),
radial-gradient(circle at 86% 78%, rgba(168,134,82,0.08), transparent 55%);
}
.lead-system-grid {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(11,18,32,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,18,32,0.045) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at center, #000 20%, transparent 85%);
mask-image: radial-gradient(ellipse 80% 60% at center, #000 20%, transparent 85%);
opacity: 0.6;
}
.lead-system-section .container { position: relative; z-index: 1; }
.lead-stage {
margin: clamp(40px, 5vw, 64px) auto 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 0;
align-items: stretch;
max-width: 1080px;
}
.lead-pane {
position: relative;
background: linear-gradient(180deg, var(--surface) 0%, #FBF8EE 100%);
border: 1px solid var(--hairline);
border-radius: 22px;
padding: 18px 18px;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 32px 72px -28px rgba(11,18,32,0.18),
0 8px 22px -8px rgba(11,18,32,0.10);
transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.45s ease;
z-index: 1;
display: flex;
flex-direction: column;
}
.lead-pane:hover {
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 40px 84px -28px rgba(11,18,32,0.22),
0 12px 28px -8px rgba(11,18,32,0.14);
}
.lead-pane-ai { transform: rotate(-0.4deg); }
.lead-pane-ai:hover { transform: rotate(-0.4deg) translateY(-4px); }
.lead-pane-inbox { transform: rotate(0.4deg); }
.lead-pane-inbox:hover { transform: rotate(0.4deg) translateY(-4px); }
/* Pane head */
.lead-pane-head {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--hairline);
}
.lead-pane-avatar {
width: 38px; height: 38px;
background: radial-gradient(circle at 30% 30%, var(--accent-bright), var(--accent));
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(20,184,155,0.10), 0 0 18px rgba(45,227,181,0.40);
}
.lead-pane-avatar > span {
width: 8px; height: 8px;
background: white;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
}
.lead-pane-id {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.lead-pane-id strong {
font-family: var(--font-display);
font-size: 0.92rem;
color: var(--ink);
letter-spacing: -0.01em;
font-weight: 600;
}
.lead-pane-status {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--ink-3);
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.lead-pane-dot {
width: 6px; height: 6px;
background: var(--accent-bright);
border-radius: 50%;
box-shadow: 0 0 8px var(--accent-bright);
animation: lead-pulse 1.6s infinite;
}
@keyframes lead-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.lead-pane-tag {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border-radius: 999px;
padding: 4px 9px;
flex-shrink: 0;
}
/* Pane body */
.lead-pane-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 0 6px;
flex: 1;
min-height: 290px;
}
.lead-msg {
font-size: 0.86rem;
line-height: 1.5;
padding: 10px 14px;
border-radius: 14px;
max-width: 86%;
color: var(--ink);
font-family: var(--font-body);
animation: lead-msg-in 0.4s ease both;
}
.lead-msg:nth-child(1) { animation-delay: 0.05s; }
.lead-msg:nth-child(2) { animation-delay: 0.15s; }
.lead-msg:nth-child(3) { animation-delay: 0.25s; }
.lead-msg:nth-child(4) { animation-delay: 0.35s; }
.lead-msg:nth-child(5) { animation-delay: 0.45s; }
@keyframes lead-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.lead-msg-bot {
background: var(--bone);
border-top-left-radius: 6px;
align-self: flex-start;
}
.lead-msg-user {
background: var(--ink);
color: white;
border-top-right-radius: 6px;
align-self: flex-end;
}
.lead-chip {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-ink);
border: none;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.lead-chip:hover { background: var(--accent-hover); transform: translateY(-1px); }
.lead-typing {
align-self: flex-start;
background: var(--bone);
padding: 10px 14px;
border-radius: 14px;
border-top-left-radius: 6px;
display: inline-flex;
gap: 4px;
}
.lead-typing span {
width: 6px; height: 6px;
background: var(--ink-3);
border-radius: 50%;
animation: lead-typing 1.2s infinite;
}
.lead-typing span:nth-child(2) { animation-delay: 0.18s; }
.lead-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes lead-typing {
0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
40% { transform: translateY(-4px); opacity: 1; }
}
/* Inbox pane variant */
.lead-pane-head-inbox { border-bottom: 1px dashed var(--hairline); }
.lead-pane-dots {
display: inline-flex;
gap: 6px;
}
.lead-pane-dots span {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--hairline);
}
.lead-pane-dots span:nth-child(1) { background: #f87171; }
.lead-pane-dots span:nth-child(2) { background: #fbbf24; }
.lead-pane-dots span:nth-child(3) { background: var(--accent-bright); }
.lead-pane-title {
flex: 1;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--ink-2);
letter-spacing: 0.04em;
margin-left: 2px;
}
.lead-pane-live {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
flex-shrink: 0;
}
.lead-pane-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 8px var(--accent-bright);
animation: lead-pulse 1.6s infinite;
}
.lead-pane-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px 0;
border-bottom: 1px dashed var(--hairline);
}
.lead-pane-stats > div {
display: flex;
flex-direction: column;
gap: 2px;
text-align: center;
}
.lead-pane-stats strong {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1;
}
.lead-pane-stats span {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lead-pane-list {
list-style: none;
margin: 0;
padding: 12px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.lead-pane-row {
display: grid;
grid-template-columns: minmax(74px, auto) 1fr auto auto;
gap: 10px;
align-items: center;
padding: 10px 10px;
border-radius: 10px;
transition: background 0.18s ease, transform 0.18s ease;
font-size: 0.84rem;
}
.lead-pane-row:hover { background: var(--bone); transform: translateX(2px); }
.lead-pane-row-new {
background: linear-gradient(90deg, rgba(45,227,181,0.10) 0%, rgba(45,227,181,0) 70%);
box-shadow: inset 2px 0 0 var(--accent);
border-radius: 0 10px 10px 0;
}
.lead-pane-name { font-weight: 600; color: var(--ink); }
.lead-pane-svc { color: var(--ink-2); font-size: 0.78rem; }
.lead-pane-badge {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
}
.lead-pane-badge-new { background: var(--accent-soft); color: var(--accent); }
.lead-pane-badge-contact { background: rgba(168,134,82,0.18); color: var(--gold-deep); }
.lead-pane-badge-book { background: var(--ink); color: var(--bg); }
.lead-pane-time {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ink-3);
letter-spacing: 0.04em;
white-space: nowrap;
}
/* Connector */
.lead-stage-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 22px;
z-index: 0;
align-self: stretch;
}
.lead-stage-link-dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 14px var(--accent-bright), 0 0 0 4px rgba(45,227,181,0.10);
flex-shrink: 0;
}
.lead-stage-link-line {
width: 1px;
flex: 1;
background: linear-gradient(180deg, var(--accent), rgba(45,227,181,0.0) 90%);
min-height: 80px;
border-radius: 1px;
position: relative;
}
.lead-stage-link-line::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, var(--accent-bright) 50%, transparent 100%);
background-size: 100% 40%;
animation: lead-trickle 2.4s linear infinite;
opacity: 0.7;
border-radius: 1px;
}
@keyframes lead-trickle {
0% { background-position: 0 -40%; }
100% { background-position: 0 140%; }
}
/* Flow strip */
.lead-flow {
margin: clamp(40px, 5vw, 64px) auto 0;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: stretch;
gap: 0;
max-width: 1080px;
padding: 28px 24px;
background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 100%);
border: 1px solid var(--hairline);
border-radius: 24px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 48px -16px rgba(11,18,32,0.10), 0 1px 0 rgba(255,255,255,0.7) inset;
}
.lead-flow-step {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 0 18px;
}
.lead-flow-num {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
color: var(--accent);
background: var(--accent-soft);
padding: 4px 8px;
border-radius: 6px;
font-weight: 600;
margin-bottom: 4px;
}
.lead-flow-step strong {
font-family: var(--font-display);
font-size: 1.06rem;
color: var(--ink);
letter-spacing: -0.02em;
font-weight: 600;
line-height: 1.15;
}
.lead-flow-step em {
font-style: normal;
font-size: 0.82rem;
color: var(--ink-2);
line-height: 1.45;
font-family: var(--font-body);
}
.lead-flow-link {
width: 36px;
height: 1px;
background: linear-gradient(90deg, var(--accent), var(--hairline));
align-self: center;
position: relative;
}
.lead-flow-link::after {
content: '';
position: absolute;
right: -2px; top: 50%;
width: 5px; height: 5px;
border-top: 1px solid var(--accent);
border-right: 1px solid var(--accent);
transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 980px) {
.lead-stage {
grid-template-columns: 1fr;
gap: 18px;
}
.lead-pane-ai, .lead-pane-inbox { transform: none; }
.lead-pane-ai:hover, .lead-pane-inbox:hover { transform: translateY(-4px); }
.lead-stage-link {
flex-direction: row;
padding: 4px 0;
gap: 8px;
}
.lead-stage-link-line {
width: auto;
height: 1px;
flex: 1;
min-height: 0;
background: linear-gradient(90deg, var(--accent), rgba(45,227,181,0) 90%);
}
.lead-stage-link-line::after {
background: linear-gradient(90deg, transparent 0%, var(--accent-bright) 50%, transparent 100%);
background-size: 40% 100%;
animation: lead-trickle-h 2.4s linear infinite;
}
@keyframes lead-trickle-h {
0% { background-position: -40% 0; }
100% { background-position: 140% 0; }
}
.lead-flow {
grid-template-columns: 1fr;
gap: 16px;
padding: 22px 20px;
}
.lead-flow-link { display: none; }
.lead-flow-step { padding: 0; }
}
@media (max-width: 640px) {
.lead-pane { padding: 14px 14px; }
.lead-pane-tag { display: none; }
.lead-msg { font-size: 0.84rem; }
.lead-pane-stats strong { font-size: 1.2rem; }
.lead-pane-row { grid-template-columns: minmax(64px, auto) 1fr auto auto; padding: 8px 8px; }
}
/* ────────────────────────────────────────────────────────────────────────
STUDIO STANDARD — replaces former "Built different / Stats" section
──────────────────────────────────────────────────────────────────────── */
.studio-section {
position: relative;
overflow: hidden;
padding: clamp(72px, 9vw, 132px) 0 !important;
background:
radial-gradient(ellipse 100% 50% at center top, rgba(11,18,32,0.04), transparent 80%),
var(--bg) !important;
}
.studio-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 22% 30%, rgba(45,227,181,0.12), transparent 50%),
radial-gradient(circle at 78% 70%, rgba(168,134,82,0.10), transparent 50%),
radial-gradient(circle at 50% 100%, rgba(61,111,224,0.06), transparent 50%);
}
.studio-grid {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(11,18,32,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,18,32,0.05) 1px, transparent 1px);
background-size: 80px 80px;
-webkit-mask-image: radial-gradient(ellipse 90% 70% at center, #000 30%, transparent 90%);
mask-image: radial-gradient(ellipse 90% 70% at center, #000 30%, transparent 90%);
opacity: 0.45;
}
.studio-section .container { position: relative; z-index: 1; }
.studio-eyebrow {
display: flex;
justify-content: center;
}
.studio-h {
text-align: center;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.studio-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 28px auto 18px;
max-width: 320px;
}
.studio-ornament-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.studio-ornament-mark {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.10em;
color: var(--accent);
font-weight: 700;
line-height: 1;
}
.studio-ornament-dot { color: var(--pop); }
.studio-sub {
text-align: center;
margin: 0 auto;
max-width: 56ch;
}
/* Stage layout */
.studio-stage {
margin-top: clamp(48px, 6vw, 80px);
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(32px, 4vw, 72px);
align-items: center;
}
/* === DOSSIER (centerpiece) === */
.studio-dossier {
position: relative;
aspect-ratio: 1 / 1;
max-width: 540px;
width: 100%;
margin: 0 auto;
perspective: 1400px;
}
.studio-dossier-glow {
position: absolute;
inset: -12%;
background:
radial-gradient(circle at 30% 35%, rgba(45,227,181,0.32), transparent 50%),
radial-gradient(circle at 70% 70%, rgba(168,134,82,0.22), transparent 50%);
filter: blur(32px);
z-index: 0;
animation: studio-glow-drift 16s ease-in-out infinite;
pointer-events: none;
}
@keyframes studio-glow-drift {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.95; }
50% { transform: translate(10px, -12px) scale(1.04); opacity: 1; }
}
.studio-dossier-grain {
position: absolute;
inset: 6%;
background-image: radial-gradient(circle at 30% 20%, rgba(11,18,32,0.04), transparent 50%);
border-radius: 28px;
pointer-events: none;
z-index: 1;
}
.studio-card {
position: absolute;
background: linear-gradient(180deg, #FFFFFF 0%, #FBF8EE 100%);
border: 1px solid var(--hairline);
border-radius: 18px;
padding: 14px 16px;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 32px 72px -28px rgba(11,18,32,0.30),
0 12px 28px -12px rgba(11,18,32,0.16);
z-index: 2;
transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.55s ease;
transform-style: preserve-3d;
}
.studio-card-1 {
width: 60%;
top: 4%;
left: 0%;
transform: rotate(-7deg);
z-index: 2;
}
.studio-card-2 {
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 4;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 40px 88px -28px rgba(11,18,32,0.34),
0 16px 36px -12px rgba(11,18,32,0.20),
0 0 0 1px rgba(14,122,101,0.10);
}
.studio-card-3 {
width: 56%;
bottom: 4%;
right: 0%;
transform: rotate(6deg);
z-index: 3;
}
.studio-dossier:hover .studio-card-1 { transform: translate(-12px, -10px) rotate(-9deg); }
.studio-dossier:hover .studio-card-2 { transform: translate(-50%, -52%) rotate(-1.5deg) scale(1.02); }
.studio-dossier:hover .studio-card-3 { transform: translate(12px, 10px) rotate(8deg); }
.studio-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--hairline);
margin-bottom: 10px;
}
.studio-card-tag {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-2);
font-weight: 600;
}
.studio-card-tag-emerald { color: var(--accent); }
.studio-card-tag-gold { color: var(--gold-deep); }
.studio-card-status {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.08em;
color: var(--ink-3);
text-transform: uppercase;
}
.studio-card-pulse {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
}
.studio-card-pulse-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 8px var(--accent-bright);
animation: lead-pulse 1.6s infinite;
}
/* Tree (manifest) */
.studio-card-tree {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.studio-card-tree li {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--ink);
line-height: 1.35;
}
.studio-card-tree li em {
font-family: var(--font-body);
font-style: italic;
color: var(--ink-3);
font-size: 0.6rem;
margin-left: auto;
font-weight: 400;
}
.studio-tree-mark {
width: 5px;
height: 5px;
border-radius: 1px;
background: var(--accent);
flex-shrink: 0;
}
.studio-card-foot {
display: flex;
gap: 10px;
padding-top: 10px;
margin-top: 10px;
border-top: 1px dashed var(--hairline);
}
.studio-card-foot span {
font-family: var(--font-mono);
font-size: 0.54rem;
letter-spacing: 0.10em;
color: var(--ink-3);
text-transform: uppercase;
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1;
}
.studio-card-foot strong {
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--ink);
letter-spacing: -0.02em;
text-transform: none;
font-weight: 600;
line-height: 1;
margin-bottom: 2px;
}
/* Feed */
.studio-card-feed {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.studio-card-feed li {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.74rem;
color: var(--ink-2);
line-height: 1.3;
}
.studio-card-feed li strong {
font-weight: 600;
color: var(--ink);
margin-right: 2px;
}
.studio-feed-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px rgba(14,122,101,0.40);
flex-shrink: 0;
}
.studio-feed-dot-gold { background: var(--gold); box-shadow: 0 0 6px rgba(168,134,82,0.40); }
.studio-feed-dot-emerald { background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); }
.studio-card-spark {
display: block;
margin-top: 10px;
color: var(--accent);
opacity: 0.7;
}
/* Checks */
.studio-card-checks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.studio-card-checks li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.7rem;
color: var(--ink);
line-height: 1.3;
}
.studio-check {
width: 13px; height: 13px;
border-radius: 4px;
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.30);
position: relative;
flex-shrink: 0;
}
.studio-check::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 3px;
height: 7px;
border-right: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(45deg);
}
.studio-dossier-mono {
position: absolute;
bottom: -4%;
left: -2%;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(4.5rem, 12vw, 8rem);
letter-spacing: -0.06em;
color: var(--ink);
opacity: 0.05;
z-index: 0;
line-height: 1;
pointer-events: none;
user-select: none;
}
.studio-dossier-mono-dot { color: var(--pop); }
.studio-dossier-mark {
position: absolute;
bottom: 6%;
right: 0%;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--ink-3);
opacity: 0.55;
z-index: 1;
transform: rotate(-90deg);
transform-origin: bottom right;
white-space: nowrap;
pointer-events: none;
}
/* === LIST (right side) === */
.studio-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.studio-row {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
padding: 22px 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.40) 100%);
border: 1px solid var(--hairline);
border-radius: 18px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px -6px rgba(11,18,32,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
overflow: hidden;
}
.studio-row::before {
content: '';
position: absolute;
left: 0; top: 22px; bottom: 22px;
width: 2px;
background: linear-gradient(180deg, var(--accent), transparent);
border-radius: 2px;
opacity: 0;
transition: opacity 0.3s ease;
}
.studio-row::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 18px;
padding: 1px;
background: linear-gradient(135deg, rgba(14,122,101,0.0), rgba(14,122,101,0.20), rgba(14,122,101,0.0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.studio-row:hover {
transform: translateY(-3px);
border-color: rgba(14,122,101,0.30);
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 18px 36px -10px rgba(11,18,32,0.14);
}
.studio-row:hover::before { opacity: 1; }
.studio-row:hover::after { opacity: 1; }
.studio-row-num {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 600;
background: var(--accent-soft);
width: 36px; height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
align-self: start;
flex-shrink: 0;
}
.studio-row-body h3 {
font-family: var(--font-display);
font-size: 1.18rem;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: -0.02em;
line-height: 1.2;
font-weight: 600;
}
.studio-row-body p {
margin: 0 0 10px;
color: var(--ink-2);
font-size: 0.93rem;
line-height: 1.55;
}
.studio-row-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.studio-row-meta span {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-2);
padding: 4px 10px;
border-radius: 999px;
background: rgba(232,226,210,0.55);
border: 1px solid var(--hairline);
}
/* Foot band */
.studio-foot {
margin: clamp(40px, 5vw, 64px) auto 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 24px;
background: var(--ink);
color: var(--bg);
border-radius: 999px;
box-shadow: 0 24px 56px -16px rgba(11,18,32,0.34), 0 0 0 1px rgba(45,227,181,0.20);
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
max-width: calc(100% - 32px);
}
.studio-foot-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 12px var(--accent-bright);
animation: lead-pulse 1.6s infinite;
flex-shrink: 0;
}
.studio-foot-text {
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.4;
}
.studio-foot-text strong {
color: var(--accent-bright);
font-weight: 600;
margin-right: 6px;
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
.studio-stage {
grid-template-columns: 1fr;
gap: 56px;
}
.studio-dossier {
max-width: 460px;
}
.studio-row { padding: 18px 18px; gap: 14px; }
.studio-row-body h3 { font-size: 1.08rem; }
.studio-row-body p { font-size: 0.9rem; }
}
@media (max-width: 640px) {
.studio-h { font-size: clamp(1.85rem, 8vw, 2.4rem); }
.studio-dossier {
aspect-ratio: 4 / 5;
max-width: 360px;
}
.studio-card { padding: 12px 14px; }
.studio-card-1 { width: 72%; top: 0%; left: 0; transform: rotate(-7deg); }
.studio-card-2 { width: 84%; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); }
.studio-card-3 { width: 66%; bottom: 0%; right: 0; transform: rotate(6deg); }
.studio-foot {
font-size: 0.78rem;
padding: 12px 18px;
gap: 10px;
flex-wrap: wrap;
}
.studio-foot-text { font-size: 0.78rem; }
.studio-row-num { width: 32px; height: 32px; font-size: 0.66rem; }
.studio-row-meta span { font-size: 0.56rem; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
.studio-dossier-glow { animation: none; }
.studio-dossier:hover .studio-card-1,
.studio-dossier:hover .studio-card-2,
.studio-dossier:hover .studio-card-3 {
transform: rotate(-7deg);
}
.studio-dossier:hover .studio-card-2 { transform: translate(-50%, -50%) rotate(0deg); }
.studio-dossier:hover .studio-card-3 { transform: rotate(6deg); }
.lead-pane-dot, .lead-pane-live-dot, .studio-card-pulse-dot, .studio-foot-pulse { animation: none; }
.lead-typing span, .lead-msg, .lead-stage-link-line::after { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
PACKAGES — slight refinement to feel like a "preview" (less heavy)
──────────────────────────────────────────────────────────────────────── */
.packages-section.pkg-v5 {
padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px) !important;
}
.packages-section .pkg-tier-grid {
margin-top: 40px !important;
}
.packages-section .pkg-trust {
margin-top: 32px !important;
}
/* ────────────────────────────────────────────────────────────────────────
SECTION SPACING — tighten hero → demo → services → lead system rhythm
──────────────────────────────────────────────────────────────────────── */
.demo-section { padding-bottom: clamp(56px, 7vw, 92px) !important; }
.services-section { padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 88px) !important; }
.how-section, .how-v6 { padding: clamp(64px, 8vw, 112px) 0 !important; }
.area-section { padding: clamp(64px, 8vw, 112px) 0 !important; }
/* ════════════════════════════════════════════════════════════════════════
25. PACKAGES PAGE — "Studio Service Catalog" (packages.html)
Premium editorial layout. Pearl + midnight + Aurum gold + emerald glow.
Reserved namespace: .pkx-* (packages page) and .pkz-* (homepage teaser).
Does NOT touch existing .pkg-* legacy styles used on detail pages.
════════════════════════════════════════════════════════════════════════ */
/* Body class so we can scope tweaks (kill the demo modal etc. is unaffected) */
body.packages-page { background: var(--paper); }
/* ── Shared ornament (✦ between hairlines) ────────────────────────── */
.pkx-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 22px 0 28px;
}
.pkx-ornament-line {
flex: 0 0 64px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent);
}
.pkx-ornament-mark {
color: var(--gold);
font-size: 0.78rem;
letter-spacing: 0.1em;
transform: translateY(-1px);
}
/* ─────────────────────────────────────────────────────────────────
25.1 HERO — premium editorial composition
───────────────────────────────────────────────────────────────── */
.pkx-hero {
position: relative;
padding: clamp(110px, 14vw, 180px) 0 clamp(72px, 9vw, 120px);
overflow: hidden;
isolation: isolate;
background: var(--paper);
}
.pkx-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 18% 22%, rgba(45,227,181,0.08) 0%, transparent 60%),
radial-gradient(50% 40% at 88% 78%, rgba(168,134,82,0.10) 0%, transparent 65%),
linear-gradient(180deg, var(--paper) 0%, var(--surface-warm) 70%, var(--paper) 100%);
z-index: -2;
}
.pkx-hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(11,18,32,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11,18,32,0.04) 1px, transparent 1px);
background-size: 80px 80px;
background-position: -1px -1px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 90%);
z-index: -1;
opacity: 0.6;
}
.pkx-hero-glow {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
z-index: -1;
}
.pkx-hero-glow-1 {
top: -120px;
left: -100px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(45,227,181,0.18) 0%, transparent 70%);
}
.pkx-hero-glow-2 {
bottom: -160px;
right: -120px;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(168,134,82,0.20) 0%, transparent 70%);
}
.pkx-hero-mark {
position: absolute;
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--gold);
opacity: 0.7;
pointer-events: none;
animation: pkxFloat 9s ease-in-out infinite;
z-index: 0;
}
.pkx-hero-mark-1 { top: 18%; left: 8%; animation-delay: 0s; }
.pkx-hero-mark-2 { top: 38%; right: 10%; color: var(--accent); font-size: 0.75rem; animation-delay: 1.5s; }
.pkx-hero-mark-3 { bottom: 22%; left: 14%; font-size: 0.7rem; color: var(--gold); animation-delay: 3s; }
@keyframes pkxFloat {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
50% { transform: translateY(-12px) rotate(8deg); opacity: 0.85; }
}
.pkx-hero-container { position: relative; z-index: 2; text-align: center; }
.pkx-hero-stamp {
position: absolute;
top: -64px;
right: 0;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
.pkx-hero-stamp-fc {
display: inline-flex;
align-items: baseline;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: -0.02em;
color: var(--ink);
text-transform: none;
}
.pkx-hero-stamp-dot { color: var(--pop); }
.pkx-hero-stamp-text { line-height: 1; }
.pkx-hero .eyebrow { justify-content: center; }
.pkx-hero-h {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.8rem, 6vw + 1rem, 6.4rem);
letter-spacing: -0.035em;
line-height: 1;
color: var(--ink);
margin: 22px auto 0;
max-width: 14ch;
}
.pkx-hero-h .italic-accent {
color: var(--gold);
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
}
.pkx-hero-h .dot { color: var(--pop); }
.pkx-hero-lede {
font-family: var(--font-body);
font-size: var(--type-lede);
line-height: 1.55;
color: var(--ink-2);
max-width: 60ch;
margin: 0 auto 36px;
}
.pkx-hero-meta {
display: inline-flex;
align-items: center;
gap: clamp(16px, 2.5vw, 32px);
flex-wrap: wrap;
justify-content: center;
padding: 18px 28px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: rgba(255,255,255,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
margin-bottom: 36px;
}
.pkx-hero-meta-cell {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
line-height: 1.1;
}
.pkx-hero-meta-cell strong {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--ink);
}
.pkx-hero-meta-cell span {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.pkx-hero-meta-sep {
width: 1px;
height: 22px;
background: var(--hairline);
}
.pkx-hero-ctas {
display: inline-flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────────────
25.2 ARCHETYPES — "who picks what" 4-up strip
───────────────────────────────────────────────────────────────── */
.pkx-arch {
background: var(--paper);
padding: clamp(72px, 9vw, 120px) 0 !important;
}
.pkx-arch-h {
text-align: left;
max-width: 22ch;
margin: 18px 0 clamp(40px, 5vw, 56px);
}
.pkx-arch-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.pkx-arch-card {
position: relative;
padding: 28px 24px 24px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
box-shadow: var(--shadow-sm);
transition: transform 0.32s cubic-bezier(0.2,0.7,0,1),
box-shadow 0.32s cubic-bezier(0.2,0.7,0,1),
border-color 0.22s ease;
overflow: hidden;
}
.pkx-arch-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
transition: width 0.42s cubic-bezier(0.2,0.7,0,1);
}
.pkx-arch-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--hairline-soft);
}
.pkx-arch-card:hover::before { width: 100%; }
.pkx-arch-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--hairline);
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink);
margin-bottom: 18px;
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.pkx-arch-card:hover .pkx-arch-num {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.pkx-arch-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.18rem;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 10px;
}
.pkx-arch-card p {
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-2);
margin: 0 0 20px;
}
.pkx-arch-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: color 0.18s ease, border-color 0.18s ease, transform 0.22s ease;
}
.pkx-arch-tag:hover {
color: var(--accent-hover);
border-bottom-color: var(--accent);
transform: translateX(2px);
}
/* ─────────────────────────────────────────────────────────────────
25.3 CORE TIERS — Starter (featured) + Growth/Pro twin
───────────────────────────────────────────────────────────────── */
.pkx-tiers {
background: var(--bone) !important;
padding: clamp(80px, 10vw, 140px) 0 !important;
position: relative;
overflow: hidden;
}
.pkx-tiers-bg {
position: absolute;
inset: 0;
background:
radial-gradient(50% 50% at 80% 10%, rgba(168,134,82,0.10) 0%, transparent 70%),
radial-gradient(60% 40% at 10% 90%, rgba(14,122,101,0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.pkx-tiers-grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
repeating-linear-gradient(45deg, rgba(11,18,32,0.012) 0 1px, transparent 1px 8px),
repeating-linear-gradient(-45deg, rgba(11,18,32,0.012) 0 1px, transparent 1px 8px);
opacity: 0.7;
}
.pkx-tiers > .container { position: relative; z-index: 1; }
.pkx-tiers-h {
text-align: left;
max-width: 22ch;
margin: 18px 0 clamp(48px, 6vw, 72px);
}
/* ── Folio (premium dossier card) — base ───────────────────────── */
.pkx-folio {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
padding: clamp(28px, 3.5vw, 52px);
box-shadow: var(--shadow-md);
transition: transform 0.42s cubic-bezier(0.2,0.7,0,1),
box-shadow 0.42s cubic-bezier(0.2,0.7,0,1);
overflow: hidden;
isolation: isolate;
}
.pkx-folio:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
/* Soft glow halo (revealed on hover) */
.pkx-folio-glow {
position: absolute;
inset: -2px;
border-radius: 20px;
pointer-events: none;
z-index: -1;
opacity: 0;
transition: opacity 0.42s ease;
background: radial-gradient(60% 60% at 50% 0%, rgba(45,227,181,0.18) 0%, transparent 70%);
}
.pkx-folio:hover .pkx-folio-glow { opacity: 1; }
/* Corner brackets (luxury folio detail) */
.pkx-folio-corner {
position: absolute;
width: 18px;
height: 18px;
border: 1.5px solid var(--gold);
opacity: 0;
transition: opacity 0.32s ease;
pointer-events: none;
}
.pkx-folio-corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.pkx-folio-corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.pkx-folio-corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.pkx-folio-corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.pkx-folio:hover .pkx-folio-corner { opacity: 0.6; }
.pkx-folio-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.pkx-folio-serial {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
padding: 6px 12px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: rgba(244,241,232,0.6);
}
.pkx-folio-meta {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
/* ── Featured (Starter) ──────────────────────────────────────────── */
.pkx-folio--featured {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
border-color: var(--gold-soft);
margin-bottom: clamp(32px, 4vw, 56px);
box-shadow: var(--shadow-gold);
}
.pkx-folio--featured .pkx-folio-glow {
background: radial-gradient(60% 60% at 50% 0%, rgba(168,134,82,0.20) 0%, transparent 70%);
opacity: 0.4;
}
.pkx-folio--featured:hover .pkx-folio-glow { opacity: 1; }
.pkx-folio--featured .pkx-folio-corner { opacity: 0.4; }
.pkx-folio--featured:hover .pkx-folio-corner { opacity: 0.85; }
.pkx-folio-ribbon {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: linear-gradient(135deg, var(--gold) 0%, #C29B5C 60%, var(--gold) 100%);
color: #FFFEF9;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(168,134,82,0.35), inset 0 1px 0 rgba(255,255,255,0.30);
}
.pkx-folio-ribbon svg { fill: #FFFEF9; }
.pkx-folio-body {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: start;
}
.pkx-folio-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 3.4vw, 3.2rem);
letter-spacing: -0.035em;
line-height: 1;
color: var(--ink);
margin: 0 0 14px;
max-width: 14ch;
}
.pkx-folio-name--sm {
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
max-width: 18ch;
}
.pkx-folio-name .italic-accent { color: var(--gold); }
.pkx-folio-tag {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 28px;
max-width: 38ch;
}
/* Price block — split setup + monthly with editorial plus sign */
.pkx-folio-price {
display: inline-flex;
align-items: stretch;
gap: 0;
padding: 18px 24px;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: 14px;
margin-bottom: 28px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.pkx-folio-price--compact { padding: 14px 18px; }
.pkx-price-block {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 18px;
min-width: 0;
}
.pkx-price-block:first-child { padding-left: 0; }
.pkx-price-block:last-child { padding-right: 0; }
.pkx-price-label {
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
.pkx-price-num {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 2vw, 2rem);
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
}
.pkx-price-num small {
font-size: 0.62em;
font-weight: 500;
color: var(--ink-3);
margin-left: 2px;
vertical-align: super;
}
.pkx-price-cycle {
font-family: var(--font-body);
font-size: 0.5em;
font-weight: 500;
color: var(--ink-3);
letter-spacing: 0;
}
.pkx-price-plus {
align-self: center;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.4rem;
color: var(--ink-3);
padding: 0 4px;
border-left: 1px dashed var(--hairline);
border-right: 1px dashed var(--hairline);
height: 100%;
display: inline-flex;
align-items: center;
}
/* CTA — primary look, with gold variant for featured */
.pkx-folio-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: -0.005em;
border-radius: 10px;
border: 1px solid var(--ink);
transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.pkx-folio-cta:hover {
background: var(--ink);
box-shadow: 0 8px 24px rgba(11,18,32,0.20);
transform: translateY(-1px);
}
.pkx-folio-cta .arrow { transition: transform 0.22s ease; }
.pkx-folio-cta:hover .arrow { transform: translateX(4px); }
.pkx-folio-cta--gold {
background: linear-gradient(135deg, var(--gold) 0%, #C29B5C 60%, var(--gold) 100%);
color: #FFFEF9;
border-color: rgba(168,134,82,0.5);
box-shadow: 0 6px 20px rgba(168,134,82,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pkx-folio-cta--gold:hover {
background: linear-gradient(135deg, #C29B5C 0%, var(--gold) 60%, #C29B5C 100%);
box-shadow: 0 12px 32px rgba(168,134,82,0.40), inset 0 1px 0 rgba(255,255,255,0.4);
}
.pkx-folio-fine {
margin: 14px 0 0;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--ink-3);
}
/* Feature list (right side of featured folio) */
.pkx-folio-list-label {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
padding-bottom: 14px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 18px;
width: 100%;
}
.pkx-folio-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pkx-folio-list li {
position: relative;
padding-left: 28px;
font-size: 0.95rem;
line-height: 1.5;
color: var(--ink);
}
.pkx-folio-list li::before {
content: '';
position: absolute;
left: 0; top: 6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent-soft);
border: 1px solid rgba(14,122,101,0.25);
}
.pkx-folio-list li::after {
content: '';
position: absolute;
left: 5px; top: 11px;
width: 8px;
height: 4px;
border-left: 1.6px solid var(--accent);
border-bottom: 1.6px solid var(--accent);
transform: rotate(-45deg);
}
/* Compact variant (Growth/Pro) */
.pkx-folio-list--compact {
gap: 10px;
margin-bottom: 24px;
}
.pkx-folio-list--compact li { font-size: 0.92rem; }
/* ── Twin pair (Growth + Pro) ────────────────────────────────────── */
.pkx-folio-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.5vw, 32px);
}
.pkx-folio--growth,
.pkx-folio--pro {
display: flex;
flex-direction: column;
}
.pkx-folio--growth .pkx-folio-name .italic-accent { color: var(--accent); }
.pkx-folio--pro .pkx-folio-name .italic-accent { color: var(--sapphire); }
.pkx-folio--growth .pkx-folio-cta,
.pkx-folio--pro .pkx-folio-cta {
align-self: flex-start;
margin-top: auto;
}
/* ─────────────────────────────────────────────────────────────────
25.4 ALT PATHS — One-Time + Custom (light + dark duality)
───────────────────────────────────────────────────────────────── */
.pkx-alt {
background: var(--paper);
padding: clamp(80px, 10vw, 140px) 0 !important;
}
.pkx-alt-h {
text-align: left;
max-width: 24ch;
margin: 18px 0 8px;
}
.pkx-alt-sub {
font-size: var(--type-lede);
color: var(--ink-2);
margin: 0 0 clamp(40px, 5vw, 56px);
max-width: 56ch;
}
.pkx-alt-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.5vw, 32px);
}
.pkx-alt-card {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
padding: clamp(28px, 3.5vw, 44px);
box-shadow: var(--shadow-md);
transition: transform 0.42s cubic-bezier(0.2,0.7,0,1),
box-shadow 0.42s cubic-bezier(0.2,0.7,0,1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.pkx-alt-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.pkx-alt-ribbon {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, #C29B5C 50%, var(--gold) 100%);
border-radius: 0 0 4px 4px;
}
.pkx-alt-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.pkx-alt-serial {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
padding: 6px 12px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: rgba(244,241,232,0.6);
}
.pkx-alt-serial--gold {
color: var(--gold-deep);
border-color: var(--gold-soft);
background: rgba(168,134,82,0.06);
}
.pkx-alt-meta {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.pkx-alt-name {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.7rem, 2.6vw, 2.4rem);
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--ink);
margin: 0 0 12px;
max-width: 14ch;
}
.pkx-alt-name .italic-accent { color: var(--gold); }
.pkx-alt-tag {
font-size: 1rem;
line-height: 1.5;
color: var(--ink-2);
margin: 0 0 24px;
max-width: 38ch;
}
.pkx-alt-price {
display: flex;
align-items: baseline;
gap: 14px;
padding: 16px 20px;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.pkx-alt-price-num {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 2vw, 1.95rem);
letter-spacing: -0.025em;
color: var(--ink);
}
.pkx-alt-price-num small {
font-size: 0.62em;
font-weight: 500;
color: var(--ink-3);
margin-left: 2px;
vertical-align: super;
}
.pkx-alt-price-meta {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
.pkx-alt-list {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pkx-alt-list li {
position: relative;
padding-left: 22px;
font-size: 0.93rem;
line-height: 1.5;
color: var(--ink);
}
.pkx-alt-list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 12px;
height: 1.5px;
background: var(--gold);
}
.pkx-alt-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--ink);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.94rem;
color: var(--ink);
align-self: flex-start;
margin-top: auto;
transition: color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.pkx-alt-cta:hover {
color: var(--gold-deep);
border-color: var(--gold);
transform: translateX(2px);
}
.pkx-alt-cta--gold { color: var(--gold-deep); border-bottom-color: var(--gold); }
/* Dark variant — Custom Build */
.pkx-alt-card--dark {
background: linear-gradient(160deg, var(--midnight-2) 0%, var(--midnight) 70%, var(--midnight-2) 100%);
border-color: rgba(45,227,181,0.22);
color: var(--paper);
}
.pkx-alt-card--dark::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(45,227,181,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(45,227,181,0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
.pkx-alt-card--dark > * { position: relative; z-index: 1; }
.pkx-alt-glow {
position: absolute;
bottom: -80px;
right: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(45,227,181,0.20) 0%, transparent 70%);
pointer-events: none;
filter: blur(40px);
}
.pkx-alt-serial--bright {
color: var(--glow);
border-color: rgba(45,227,181,0.30);
background: rgba(45,227,181,0.06);
}
.pkx-alt-meta--bright { color: rgba(244,241,232,0.6); }
.pkx-alt-name--bright { color: var(--paper); }
.pkx-italic-bright { color: var(--glow) !important; }
.pkx-alt-tag--bright { color: rgba(244,241,232,0.78); }
.pkx-alt-card--dark .pkx-alt-price {
background: rgba(11,18,32,0.45);
border-color: rgba(45,227,181,0.22);
}
.pkx-alt-price--bright .pkx-alt-price-num { color: var(--paper); }
.pkx-alt-price--bright .pkx-alt-price-meta { color: rgba(244,241,232,0.6); }
.pkx-alt-list--bright li { color: var(--paper); }
.pkx-alt-list--bright li::before { background: var(--glow); }
.pkx-alt-cta--bright {
color: var(--glow);
border-bottom-color: var(--glow);
}
.pkx-alt-cta--bright:hover {
color: var(--accent-bright);
border-bottom-color: var(--accent-bright);
}
/* ─────────────────────────────────────────────────────────────────
25.5 COMPARISON LEDGER — editorial table
───────────────────────────────────────────────────────────────── */
.pkx-compare {
background: var(--bone) !important;
padding: clamp(80px, 10vw, 140px) 0 !important;
}
.pkx-compare-h {
text-align: left;
max-width: 18ch;
margin: 18px 0 8px;
}
.pkx-compare-sub {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink-3);
margin: 0 0 clamp(36px, 4.5vw, 52px);
}
.pkx-ledger-wrap {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.pkx-ledger {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
width: 100%;
}
.pkx-ledger > div { display: contents; }
.pkx-ledger > div > span {
padding: 18px clamp(14px, 1.6vw, 22px);
font-family: var(--font-body);
font-size: 0.94rem;
color: var(--ink);
border-bottom: 1px solid var(--hairline);
display: flex;
align-items: center;
}
/* Header row */
.pkx-ledger-head > span {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--surface-warm);
padding: 22px clamp(14px, 1.6vw, 22px);
border-bottom: 1px solid var(--hairline);
}
.pkx-ledger-head > span.is-featured {
color: var(--gold-deep);
background: linear-gradient(180deg, rgba(168,134,82,0.08) 0%, rgba(168,134,82,0.04) 100%);
border-top: 2px solid var(--gold);
padding-top: 20px;
position: relative;
}
.pkx-ledger-head > span.is-featured::after {
content: 'Most popular';
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--gold);
text-transform: uppercase;
}
/* Body rows */
.pkx-ledger-row > span.is-featured {
background: rgba(168,134,82,0.04);
color: var(--gold-deep);
font-weight: 500;
}
.pkx-ledger-label {
font-family: var(--font-mono);
font-size: 0.74rem !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3) !important;
background: var(--surface-warm);
}
.pkx-ledger-row--last > span { border-bottom: none; }
.pkx-ledger-em {
color: var(--ink-3);
opacity: 0.5;
font-size: 1.1em;
}
.pkx-ledger-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
font-weight: 700;
font-size: 0.72rem;
}
.pkx-compare-note {
margin: 24px 0 0;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--ink-3);
text-align: center;
}
/* ─────────────────────────────────────────────────────────────────
25.6 WHAT HAPPENS NEXT — minimal hairline-rail
───────────────────────────────────────────────────────────────── */
.pkx-next {
background: var(--paper);
padding: clamp(80px, 10vw, 140px) 0 !important;
position: relative;
overflow: hidden;
}
.pkx-next-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 60%;
background: radial-gradient(ellipse at center, rgba(14,122,101,0.05) 0%, transparent 70%);
pointer-events: none;
}
.pkx-next > .container { position: relative; z-index: 1; }
.pkx-next-h {
text-align: left;
max-width: 22ch;
margin: 18px 0 8px;
}
.pkx-next-sub {
font-size: var(--type-lede);
color: var(--ink-2);
margin: 0 0 clamp(48px, 6vw, 72px);
max-width: 50ch;
}
.pkx-next-rail {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 3vw, 48px);
padding-top: 32px;
}
.pkx-next-rail-line {
position: absolute;
top: 18px;
left: 4%;
right: 4%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--hairline) 8%, var(--hairline) 92%, transparent 100%);
pointer-events: none;
}
.pkx-next-step {
position: relative;
padding-top: 32px;
}
.pkx-next-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--accent);
margin-bottom: 12px;
}
.pkx-next-dot {
position: absolute;
top: 12px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--paper);
border: 1.5px solid var(--accent);
}
.pkx-next-dot::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--accent);
}
.pkx-next-dot--final {
border-color: var(--gold);
}
.pkx-next-dot--final::after { background: var(--gold); }
.pkx-next-step h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.4rem;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 10px;
}
.pkx-next-step p {
font-size: 0.96rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 14px;
max-width: 32ch;
}
.pkx-next-meta {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--ink-3);
padding: 4px 10px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: var(--surface-warm);
}
/* ─────────────────────────────────────────────────────────────────
25.7 FINAL CTA — editorial closer
───────────────────────────────────────────────────────────────── */
.pkx-cta {
position: relative;
background: var(--midnight);
color: var(--paper);
padding: clamp(96px, 12vw, 160px) 0 !important;
overflow: hidden;
isolation: isolate;
}
.pkx-cta-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(45,227,181,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(45,227,181,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%);
z-index: -1;
}
.pkx-cta-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background: radial-gradient(ellipse at center, rgba(45,227,181,0.18) 0%, rgba(168,134,82,0.10) 40%, transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: -1;
}
.pkx-cta-container { text-align: center; position: relative; z-index: 1; }
.pkx-cta .eyebrow { color: rgba(244,241,232,0.6); justify-content: center; }
.pkx-cta .eyebrow .eyebrow-num { color: var(--glow); }
.pkx-cta-h {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 5vw + 1rem, 5rem);
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--paper);
max-width: 18ch;
margin: 0 auto 24px;
}
.pkx-cta-h .italic-accent { color: var(--glow); }
.pkx-cta-h .dot { color: var(--gold); }
.pkx-cta-sub {
font-size: var(--type-lede);
color: rgba(244,241,232,0.78);
max-width: 52ch;
margin: 0 auto 36px;
}
.pkx-cta-btns {
display: inline-flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 28px;
}
.pkx-cta .btn-ghost {
color: var(--paper);
border-color: rgba(244,241,232,0.3);
background: transparent;
}
.pkx-cta .btn-ghost:hover {
background: rgba(244,241,232,0.08);
border-color: rgba(244,241,232,0.5);
color: var(--paper);
}
.pkx-cta-note {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: rgba(244,241,232,0.5);
margin: 0;
}
/* ─────────────────────────────────────────────────────────────────
25.8 HOMEPAGE TEASER (.pkz-*) — compact preview replacing
the long packages section on index.html
───────────────────────────────────────────────────────────────── */
.pkz-teaser-section {
background: var(--paper);
padding: var(--section-y) 0 !important;
position: relative;
overflow: hidden;
}
.pkz-bg {
position: absolute;
inset: 0;
background:
radial-gradient(40% 50% at 90% 0%, rgba(168,134,82,0.06) 0%, transparent 70%),
radial-gradient(40% 60% at 0% 100%, rgba(14,122,101,0.05) 0%, transparent 70%);
pointer-events: none;
}
.pkz-teaser-section > .container { position: relative; z-index: 1; }
.pkz-head {
display: grid;
grid-template-columns: 1.2fr 1fr;
align-items: end;
gap: clamp(24px, 3vw, 48px);
margin: 18px 0 clamp(36px, 4.5vw, 52px);
}
.pkz-h {
text-align: left;
max-width: 22ch;
margin: 0;
}
.pkz-sub {
font-size: var(--type-lede);
color: var(--ink-2);
margin: 0;
max-width: 44ch;
padding-bottom: 8px;
}
/* Rail of 3 horizontal package rows */
.pkz-rail {
display: flex;
flex-direction: column;
border: 1px solid var(--hairline);
border-radius: 18px;
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.pkz-row {
position: relative;
display: grid;
grid-template-columns: 56px 1fr auto 28px;
align-items: center;
gap: clamp(14px, 2vw, 28px);
padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
border-bottom: 1px solid var(--hairline);
color: var(--ink);
transition: background 0.22s ease, transform 0.22s ease;
}
.pkz-row:last-child { border-bottom: none; }
.pkz-row:hover {
background: var(--surface-warm);
}
.pkz-row::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 3px;
height: 100%;
background: var(--accent);
opacity: 0;
transition: opacity 0.22s ease;
}
.pkz-row:hover::before { opacity: 1; }
.pkz-row-serial {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--hairline);
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.84rem;
font-weight: 600;
color: var(--ink);
background: var(--paper);
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.pkz-row:hover .pkz-row-serial {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.pkz-row-body { min-width: 0; }
.pkz-row-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 4px;
}
.pkz-row-body p {
font-size: 0.9rem;
line-height: 1.4;
color: var(--ink-2);
margin: 0;
max-width: 52ch;
}
.pkz-row-price {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.05rem, 1.3vw, 1.25rem);
letter-spacing: -0.02em;
color: var(--ink);
white-space: nowrap;
text-align: right;
}
.pkz-row-price small {
display: block;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-3);
margin-top: 2px;
}
.pkz-row-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--hairline);
border-radius: 50%;
color: var(--ink);
font-size: 0.9rem;
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.pkz-row:hover .pkz-row-arrow {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
transform: translateX(3px);
}
/* Featured row — Growth */
.pkz-row--featured {
background: linear-gradient(90deg, rgba(168,134,82,0.04) 0%, transparent 60%);
}
.pkz-row--featured .pkz-row-serial {
border-color: var(--gold-soft);
color: var(--gold-deep);
background: rgba(168,134,82,0.05);
}
.pkz-row--featured:hover .pkz-row-serial {
background: var(--gold);
color: #FFFEF9;
border-color: var(--gold);
}
.pkz-row-tag {
position: absolute;
top: -10px;
right: 24px;
padding: 3px 10px;
background: linear-gradient(135deg, var(--gold) 0%, #C29B5C 60%, var(--gold) 100%);
color: #FFFEF9;
font-family: var(--font-mono);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(168,134,82,0.30);
}
.pkz-foot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 36px;
padding-top: 24px;
border-top: 1px dashed var(--hairline);
}
.pkz-foot-meta {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.pkz-foot-meta::before {
content: '✦';
color: var(--gold);
margin-right: 8px;
}
.pkz-cta { letter-spacing: -0.005em; }
/* ─────────────────────────────────────────────────────────────────
25.9 RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.pkx-arch-grid { grid-template-columns: repeat(2, 1fr); }
.pkx-folio-body { grid-template-columns: 1fr; gap: 28px; }
.pkx-folio-pair { grid-template-columns: 1fr; }
.pkx-alt-pair { grid-template-columns: 1fr; }
.pkx-ledger { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; font-size: 0.86rem; }
.pkx-hero-stamp { display: none; }
}
@media (max-width: 768px) {
.pkx-hero { padding: clamp(80px, 11vw, 120px) 0 clamp(56px, 8vw, 88px); }
.pkx-hero-mark { display: none; }
.pkx-hero-meta { padding: 14px 18px; gap: 12px; border-radius: 18px; }
.pkx-hero-meta-sep { display: none; }
.pkx-hero-meta-cell { flex-direction: row; gap: 6px; align-items: baseline; }
.pkx-arch-grid { grid-template-columns: 1fr; gap: 14px; }
.pkx-folio { padding: 28px 22px; border-radius: 14px; }
.pkx-folio-corner { display: none; }
.pkx-folio-head { gap: 10px; }
.pkx-folio-price { padding: 14px 16px; flex-wrap: wrap; }
.pkx-price-block { padding: 0 12px; }
.pkx-price-plus { display: none; }
.pkx-alt-card { padding: 28px 22px; }
/* Ledger → horizontal scroll on small screens */
.pkx-ledger-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pkx-ledger { min-width: 720px; }
.pkx-next-rail { grid-template-columns: 1fr; gap: 32px; }
.pkx-next-rail-line { display: none; }
.pkx-next-step { padding-top: 0; padding-left: 28px; }
.pkx-next-dot { top: 4px; }
/* Homepage teaser */
.pkz-head { grid-template-columns: 1fr; }
.pkz-row {
grid-template-columns: 44px 1fr;
grid-auto-rows: auto;
row-gap: 8px;
padding: 18px 18px 22px;
}
.pkz-row-serial { width: 36px; height: 36px; font-size: 0.78rem; }
.pkz-row-price {
grid-column: 1 / -1;
text-align: left;
font-size: 1rem;
padding-left: 56px;
}
.pkz-row-arrow {
position: absolute;
top: 18px;
right: 18px;
}
.pkz-row-tag { right: 14px; font-size: 0.5rem; }
.pkz-foot { flex-direction: column; align-items: flex-start; }
.pkz-foot .btn { width: 100%; justify-content: center; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.pkx-hero-mark { animation: none; }
.pkx-folio,
.pkx-folio:hover,
.pkx-alt-card,
.pkx-alt-card:hover,
.pkx-arch-card,
.pkx-arch-card:hover,
.pkz-row,
.pkz-row:hover {
transform: none;
transition: none;
}
}
/* ════════════════════════════════════════════════════════════════════════
26. INDUSTRIES BAND (.ind-band-*) — premium "who we build for"
supporting band tied to Services (moved from Service Area section).
════════════════════════════════════════════════════════════════════════ */
.ind-band {
position: relative;
margin: clamp(48px, 6vw, 72px) auto 0;
max-width: 1080px;
padding: clamp(28px, 3.5vw, 44px) clamp(28px, 4vw, 56px) clamp(24px, 3vw, 36px);
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
border: 1px solid var(--hairline);
border-radius: 18px;
box-shadow: var(--shadow-md);
overflow: hidden;
isolation: isolate;
}
.ind-band-glow {
position: absolute;
bottom: -120px;
right: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168,134,82,0.10) 0%, transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.ind-band > * { position: relative; z-index: 1; }
.ind-band-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
margin-bottom: clamp(24px, 3vw, 32px);
}
.ind-band-rule {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--hairline) 30%, var(--hairline) 70%, transparent 100%);
}
.ind-band-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.ind-band-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
padding: 6px 14px;
background: rgba(244,241,232,0.6);
border: 1px solid var(--hairline);
border-radius: 999px;
}
.ind-band-tick {
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(168,134,82,0.18);
}
.ind-band-h {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 2vw + 0.6rem, 2.1rem);
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
margin: 0;
}
.ind-band-h .italic-accent { color: var(--gold); }
.ind-band-h .dot { color: var(--pop); }
.ind-band-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
}
.ind-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 14px;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: 999px;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.88rem;
letter-spacing: -0.005em;
color: var(--ink);
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
cursor: default;
}
.ind-chip-mark {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
}
.ind-chip.is-italic { font-family: var(--font-italic); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: -0.01em; }
.ind-chip.is-italic .ind-chip-mark { background: var(--gold); }
.ind-chip:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
transform: translateY(-2px);
}
.ind-chip:hover .ind-chip-mark { background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.ind-band-foot {
margin: clamp(20px, 2.5vw, 28px) 0 0;
padding-top: clamp(16px, 2vw, 22px);
border-top: 1px dashed var(--hairline);
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--ink-3);
text-align: center;
}
.ind-band-foot a {
color: var(--ink);
border-bottom: 1px solid var(--gold);
padding-bottom: 1px;
transition: color 0.18s ease, border-color 0.18s ease;
}
.ind-band-foot a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
@media (max-width: 768px) {
.ind-band { padding: 24px 18px 20px; }
.ind-band-head { grid-template-columns: 1fr; gap: 12px; }
.ind-band-rule { display: none; }
.ind-band-list { gap: 6px 8px; }
.ind-chip { padding: 8px 14px; font-size: 0.82rem; }
.ind-chip.is-italic { font-size: 0.92rem; }
}
/* ════════════════════════════════════════════════════════════════════════
27. SECTION 04 (LEAD SYSTEM) — premium refinement layer
CSS-only polish on top of existing .lead-pane / .lead-msg styles.
════════════════════════════════════════════════════════════════════════ */
/* Refined pane — softer hairline frame, layered gold-pearl glow, tighter inner shadow */
.lead-pane {
background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-warm) 100%) !important;
border: 1px solid rgba(217,210,194,0.85) !important;
border-radius: 20px !important;
padding: 20px 22px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 0 0 1px rgba(11,18,32,0.02),
0 28px 60px -28px rgba(11,18,32,0.16),
0 8px 22px -10px rgba(11,18,32,0.08) !important;
}
.lead-pane::before {
content: '';
position: absolute;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
border: 1px solid rgba(168,134,82,0.0);
border-radius: 14px;
pointer-events: none;
transition: border-color 0.42s ease;
z-index: 0;
}
.lead-pane:hover::before { border-color: rgba(168,134,82,0.14); }
.lead-pane > * { position: relative; z-index: 1; }
/* Refined chat header — mono FC stamp + tighter status pill */
.lead-pane-head { padding-bottom: 14px !important; }
.lead-pane-avatar {
width: 36px !important; height: 36px !important;
background: radial-gradient(circle at 30% 30%, var(--accent-bright), var(--accent)) !important;
box-shadow: 0 0 0 3px rgba(20,184,155,0.10), 0 6px 16px rgba(45,227,181,0.32) !important;
}
.lead-pane-id strong {
font-size: 0.94rem !important;
letter-spacing: -0.012em !important;
}
.lead-pane-id strong::after {
content: '· FC';
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-3);
margin-left: 8px;
vertical-align: 2px;
}
.lead-pane-tag {
font-size: 0.58rem !important;
letter-spacing: 0.14em !important;
padding: 5px 10px !important;
border: 1px solid rgba(14,122,101,0.25);
}
/* Refined message bubbles — subtle hairline, refined radii, slightly lifted typography */
.lead-msg {
font-size: 0.86rem !important;
line-height: 1.5 !important;
padding: 11px 14px !important;
border-radius: 16px !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.lead-msg-bot {
background: rgba(232,226,210,0.55) !important;
border: 1px solid rgba(217,210,194,0.7);
border-top-left-radius: 6px !important;
color: var(--ink) !important;
}
.lead-msg-user {
background: linear-gradient(180deg, var(--ink) 0%, #0F1A2E 100%) !important;
border-top-right-radius: 6px !important;
box-shadow: 0 6px 18px -8px rgba(11,18,32,0.30);
}
.lead-chip {
margin-top: 10px !important;
padding: 9px 16px !important;
font-size: 0.78rem !important;
box-shadow: 0 6px 18px rgba(14,122,101,0.30), inset 0 1px 0 rgba(255,255,255,0.20);
}
/* Refined connector — replace dot-line-dot with vertical hairline + center notation */
.lead-stage-link {
width: 64px !important;
align-self: stretch;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0 !important;
position: relative;
}
.lead-stage-link::before {
content: '';
position: absolute;
top: 18%;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: linear-gradient(180deg, transparent 0%, var(--hairline) 18%, var(--hairline) 82%, transparent 100%);
}
.lead-stage-link::after {
content: '⤳';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--hairline);
color: var(--accent);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(11,18,32,0.06);
}
.lead-stage-link-dot,
.lead-stage-link-line { display: none !important; }
/* Refined inbox stats — display font numerals + sparkline accent */
.lead-pane-stats {
position: relative;
}
.lead-pane-stats > div strong {
font-family: var(--font-display) !important;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
}
.lead-pane-stats > div span {
font-family: var(--font-mono) !important;
font-size: 0.62rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
color: var(--ink-3);
}
.lead-pane-stats::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 20%, rgba(168,134,82,0.20) 50%, var(--accent-soft) 80%, transparent 100%);
}
/* Refined inbox rows — mono-uppercase badges, refined hairline, hover state */
.lead-pane-list { padding-top: 14px !important; }
.lead-pane-row {
transition: background 0.22s ease;
border-radius: 8px;
padding: 10px 12px !important;
margin: 0 -12px;
}
.lead-pane-row:hover {
background: rgba(232,226,210,0.45);
}
.lead-pane-name {
font-family: var(--font-display) !important;
font-weight: 600;
letter-spacing: -0.012em;
}
.lead-pane-svc {
font-size: 0.82rem !important;
color: var(--ink-3);
}
.lead-pane-badge {
font-family: var(--font-mono) !important;
font-size: 0.56rem !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
padding: 4px 9px !important;
border-radius: 999px !important;
border: 1px solid transparent;
}
.lead-pane-badge-new {
background: var(--accent-soft) !important;
color: var(--accent) !important;
border-color: rgba(14,122,101,0.20);
}
.lead-pane-badge-contact {
background: var(--gold-soft) !important;
color: var(--gold-deep) !important;
border-color: rgba(168,134,82,0.30);
}
.lead-pane-badge-book {
background: var(--ink) !important;
color: var(--paper) !important;
}
.lead-pane-time {
font-family: var(--font-mono) !important;
font-size: 0.62rem !important;
letter-spacing: 0.06em;
color: var(--ink-3);
}
/* Refined inbox header — add a subtle "FC · Studio" stamp */
.lead-pane-title {
font-family: var(--font-display) !important;
font-size: 0.88rem !important;
font-weight: 600;
letter-spacing: -0.012em;
}
.lead-pane-live {
font-size: 0.6rem !important;
letter-spacing: 0.14em !important;
padding: 4px 10px !important;
border: 1px solid rgba(14,122,101,0.20);
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
}
/* Refined 4-step flow strip — mono numerals with bracket framing */
.lead-flow-num {
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
color: var(--accent) !important;
}
.lead-flow-num::before { content: '['; opacity: 0.4; margin-right: 4px; }
.lead-flow-num::after { content: ']'; opacity: 0.4; margin-left: 4px; }
/* Mobile: switch connector from horizontal to vertical-natural state */
@media (max-width: 900px) {
.lead-stage { grid-template-columns: 1fr !important; gap: 24px !important; }
.lead-stage-link {
width: 100% !important;
height: 56px;
flex-direction: row;
}
.lead-stage-link::before {
top: 50%;
left: 18%;
right: 18%;
bottom: auto;
width: auto;
height: 1px;
transform: translateY(-50%);
background: linear-gradient(90deg, transparent 0%, var(--hairline) 18%, var(--hairline) 82%, transparent 100%);
}
.lead-pane-ai { transform: none !important; }
.lead-pane-inbox { transform: none !important; }
.lead-pane-ai:hover,
.lead-pane-inbox:hover { transform: translateY(-3px) !important; }
}
/* ════════════════════════════════════════════════════════════════════════
28. PACKAGES BOTTOM CTA (.pkx-cta) — readability + premium refinement
Overrides earlier rules for stronger contrast and editorial frame.
════════════════════════════════════════════════════════════════════════ */
.pkx-cta {
background:
radial-gradient(80% 100% at 50% 0%, #14213B 0%, var(--midnight) 50%, #08101D 100%) !important;
padding: clamp(80px, 10vw, 130px) 0 !important;
isolation: isolate;
}
/* Move the central glow to a softer corner halo so it doesn't fog the headline */
.pkx-cta-glow {
top: auto !important;
left: auto !important;
transform: none !important;
bottom: -160px !important;
right: -120px !important;
width: 480px !important;
height: 480px !important;
background: radial-gradient(circle at center, rgba(45,227,181,0.14) 0%, rgba(168,134,82,0.06) 50%, transparent 70%) !important;
filter: blur(48px) !important;
}
/* Add a refined decorative orb in the opposite corner for compositional balance */
.pkx-cta::after {
content: '';
position: absolute;
top: -120px;
left: -100px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(168,134,82,0.10) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
}
/* Tightly bordered editorial card frames the CTA content — gives structure + readability */
.pkx-cta-container {
max-width: 760px !important;
padding: clamp(44px, 5vw, 68px) clamp(28px, 4vw, 56px) !important;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid rgba(244,241,232,0.10);
border-radius: 22px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 1px 0 rgba(244,241,232,0.06) inset,
0 0 0 1px rgba(168,134,82,0.10),
0 40px 80px -32px rgba(0,0,0,0.55);
}
/* Aurum focal mark above the headline — refined, premium anchor */
.pkx-cta-container::before {
content: '✦';
display: block;
font-size: 0.92rem;
color: var(--gold);
text-align: center;
margin: 0 auto clamp(14px, 2vw, 18px);
text-shadow: 0 0 12px rgba(168,134,82,0.45);
}
/* Stronger contrast on supporting text */
.pkx-cta .eyebrow { color: rgba(244,241,232,0.72) !important; margin-bottom: 4px; }
.pkx-cta .eyebrow .eyebrow-num { color: var(--gold) !important; }
.pkx-cta-h {
color: #FCFAF3 !important;
text-shadow: 0 1px 0 rgba(0,0,0,0.20);
}
.pkx-cta-h .italic-accent { color: var(--accent-bright) !important; }
.pkx-cta-h .dot { color: var(--gold) !important; }
.pkx-cta-sub {
color: rgba(252,250,243,0.86) !important;
max-width: 48ch !important;
}
.pkx-cta-note {
color: rgba(252,250,243,0.66) !important;
margin-top: 4px !important;
}
/* Refined buttons — primary uses Aurum gold, ghost uses bright hairline */
.pkx-cta .btn-primary {
background: linear-gradient(135deg, var(--gold) 0%, #C29B5C 60%, var(--gold) 100%) !important;
color: #0B1220 !important;
border-color: rgba(168,134,82,0.5) !important;
box-shadow: 0 6px 20px rgba(168,134,82,0.32), inset 0 1px 0 rgba(255,255,255,0.30) !important;
font-weight: 600;
}
.pkx-cta .btn-primary:hover {
background: linear-gradient(135deg, #C29B5C 0%, var(--gold) 60%, #C29B5C 100%) !important;
box-shadow: 0 12px 32px rgba(168,134,82,0.45), inset 0 1px 0 rgba(255,255,255,0.40) !important;
transform: translateY(-1px);
}
.pkx-cta .btn-ghost {
color: rgba(252,250,243,0.92) !important;
border-color: rgba(252,250,243,0.28) !important;
background: rgba(252,250,243,0.04) !important;
}
.pkx-cta .btn-ghost:hover {
background: rgba(252,250,243,0.10) !important;
border-color: rgba(252,250,243,0.50) !important;
color: #FCFAF3 !important;
}
/* Hairline rule beneath the headline ornament — adds editorial structure */
.pkx-cta .pkx-ornament-line {
background: linear-gradient(90deg, transparent, rgba(252,250,243,0.20) 30%, rgba(252,250,243,0.20) 70%, transparent) !important;
}
.pkx-cta .pkx-ornament-mark { color: var(--gold) !important; }
@media (max-width: 768px) {
.pkx-cta-container { padding: 36px 22px !important; }
}
/* ════════════════════════════════════════════════════════════════════════
29. HOMEPAGE PACKAGES TEASER — premium "Aurum tab" feature badge
Wraps .pkz-rail in a positioning frame so the badge can float
cleanly above the rail (the rail keeps overflow:hidden so its
rounded corners stay correct).
════════════════════════════════════════════════════════════════════════ */
.pkz-rail-frame {
position: relative;
margin-top: 14px; /* breathing room so the floating badge doesn't push the section */
}
/* Floating Aurum tab — prominent, layered, designed not pasted on */
.pkz-rail-tag {
position: absolute;
top: -16px;
right: clamp(20px, 3vw, 36px);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px 9px 14px;
/* Metallic Aurum gradient — three-stop for depth */
background:
linear-gradient(180deg, #DAB075 0%, var(--gold) 38%, #8C6C3D 100%);
color: #FFFEF6;
/* Typography — refined mono caps */
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
/* Border + shadow stack for lifted, layered feel */
border: 1px solid rgba(255,255,255,0.30);
border-radius: 999px;
box-shadow:
0 1px 0 rgba(255,255,255,0.40) inset,
0 -1px 0 rgba(0,0,0,0.10) inset,
0 8px 22px -4px rgba(168,134,82,0.45),
0 16px 36px -10px rgba(11,18,32,0.30);
/* Subtle motion */
animation: pkzTagFloat 6s ease-in-out infinite;
}
@keyframes pkzTagFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
/* ✦ ornament — sized, weighted, lit */
.pkz-rail-tag-mark {
font-size: 0.84rem;
color: #FFFEF6;
text-shadow: 0 0 8px rgba(255,255,255,0.55);
transform: translateY(-1px);
}
.pkz-rail-tag-text { display: inline-block; }
/* Soft Aurum glow halo behind the badge — adds visibility without flash */
.pkz-rail-tag::before {
content: '';
position: absolute;
inset: -10px -14px;
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(168,134,82,0.36) 0%, rgba(168,134,82,0.10) 50%, transparent 75%);
filter: blur(14px);
z-index: -1;
pointer-events: none;
}
/* Anchor mark — tiny gold notch that visually ties the badge to the row */
.pkz-rail-tag::after {
content: '';
position: absolute;
bottom: -3px;
right: 26px;
width: 6px;
height: 6px;
background: linear-gradient(180deg, var(--gold) 0%, #8C6C3D 100%);
border-right: 1px solid rgba(255,255,255,0.20);
border-bottom: 1px solid rgba(255,255,255,0.20);
transform: rotate(45deg);
box-shadow: 0 2px 4px rgba(168,134,82,0.30);
z-index: -1;
}
/* Strengthen the featured row tint slightly so it visually receives the badge */
.pkz-row--featured {
background:
linear-gradient(90deg, rgba(168,134,82,0.07) 0%, rgba(168,134,82,0.02) 55%, transparent 100%),
linear-gradient(180deg, #FAF5E8 0%, var(--surface) 100%) !important;
}
/* Featured row — subtle Aurum hairline running under the bottom edge,
marking it as the recommended tier without adding visual noise */
.pkz-row--featured::after {
content: '';
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(168,134,82,0.30) 30%, rgba(168,134,82,0.30) 70%, transparent 100%);
pointer-events: none;
}
/* Override legacy .pkz-row-tag if it appears (kept dead but defensive) */
.pkz-row > .pkz-row-tag { display: none !important; }
/* ─────────────────────────────────────────────────────────────────
Responsive — tab scales down but stays prominent on small screens
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.pkz-rail-frame { margin-top: 18px; }
.pkz-rail-tag {
top: -14px;
right: 14px;
padding: 7px 14px 7px 11px;
font-size: 0.62rem;
letter-spacing: 0.14em;
gap: 6px;
box-shadow:
0 1px 0 rgba(255,255,255,0.40) inset,
0 -1px 0 rgba(0,0,0,0.10) inset,
0 6px 16px -3px rgba(168,134,82,0.45),
0 12px 28px -10px rgba(11,18,32,0.28);
}
.pkz-rail-tag-mark { font-size: 0.74rem; }
.pkz-rail-tag::before {
inset: -8px -10px;
filter: blur(10px);
}
.pkz-rail-tag::after {
right: 18px;
width: 5px;
height: 5px;
}
}
@media (prefers-reduced-motion: reduce) {
.pkz-rail-tag { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────────
END styles-v2.css
──────────────────────────────────────────────────────────────────────── */