/* =====================================================================
MarketingHub.ca — Stylesheet
Theme: White + Black + Orange #fe9300, Paper #fafaf7
Type: Bricolage Grotesque (display) + Geist (body)
===================================================================== */
:root {
--color-bg: #ffffff;
--color-bg-alt: #fafaf7;
--color-ink: #111111;
--color-ink-soft: #2b2b2b;
--color-muted: #6b6b6b;
--color-line: #e8e6e0;
--color-accent: #fe9300;
--color-accent-soft: #fff3e2;
--color-dark: #0a0a0a;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(10,10,10,0.04), 0 2px 8px rgba(10,10,10,0.04);
--shadow-md: 0 4px 12px rgba(10,10,10,0.06), 0 12px 32px rgba(10,10,10,0.08);
--shadow-accent: 0 6px 24px -8px rgba(254,147,0,0.6);
--font-display: 'Bricolage Grotesque', 'Times New Roman', Georgia, serif;
--font-body: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--max-w: 1280px;
--gutter: clamp(20px, 4vw, 48px);
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-ink);
background: var(--color-bg);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
/* -------- Typography -------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-ink);
margin: 0 0 0.5em;
line-height: 1.02;
}
h1 {
font-size: clamp(46px, 7vw, 96px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.98;
}
h2 { font-size: clamp(32px, 4vw, 58px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; }
h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 16px; font-weight: 600; font-family: var(--font-body); letter-spacing: -0.005em; }
p { margin: 0 0 1em; color: var(--color-ink-soft); }
.lead { font-size: clamp(16px, 1.5vw, 19px); color: #444; line-height: 1.6; max-width: 64ch; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 12.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--color-ink);
background: #fff; border: 1px solid var(--color-line);
padding: 8px 14px; border-radius: var(--radius-pill);
margin-bottom: 24px;
}
.eyebrow::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 4px rgba(254,147,0,0.18);
animation: eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes eyebrow-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(254,147,0,0.18); }
50% { box-shadow: 0 0 0 8px rgba(254,147,0,0.05); }
}
/* Eyebrow on dark backgrounds */
.section-dark .eyebrow { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
.page-hero .eyebrow { margin-bottom: 18px; }
.italic-serif {
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
color: var(--color-accent);
}
/* -------- Layout -------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(40px, 5vw, 64px) 0; }
.section-dark { background: var(--color-dark); color: #ededeb; position: relative; overflow: hidden; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #ffffff; }
.section-dark p { color: #b8b6af; }
.section-alt { background: var(--color-bg-alt); }
.divider { height: 1px; background: var(--color-line); border: 0; margin: 0; }
/* -------- Buttons -------- */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
border-radius: var(--radius-pill);
font-weight: 600; font-size: 14.5px;
transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
white-space: nowrap;
}
.btn-primary { background: var(--color-accent); color: var(--color-dark); box-shadow: var(--shadow-accent); }
.btn-primary:hover { transform: translateY(-2px); background: var(--color-dark); color: var(--color-accent); }
.btn-dark { background: var(--color-dark); color: var(--color-accent); }
.btn-dark:hover { background: var(--color-accent); color: var(--color-dark); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid var(--color-ink); color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-ink); color: var(--color-accent); }
.btn-light { border: 1.5px solid #ffffff; color: #fff; }
.btn-light:hover { background: #fff; color: var(--color-ink); }
.btn-arrow::after { content: "→"; transition: transform 0.25s var(--ease); }
.btn-arrow:hover::after { transform: translateX(4px); }
/* -------- Header / Nav -------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--color-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img, .brand svg { height: 50px; width: auto; display: block; }
/* Nav menu — hidden by default on every viewport; opens via the hamburger */
.nav-menu {
display: none;
}
.nav.open .nav-menu { display: flex; }
.nav-menu > li { position: relative; }
.nav-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14.5px; font-weight: 500;
color: var(--color-ink); padding: 6px 2px;
position: relative; transition: color 0.25s var(--ease);
}
.nav-link::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
background: var(--color-accent); transition: width 0.25s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-accent); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }
.nav-link .caret { width: 10px; height: 10px; transition: transform 0.25s var(--ease); }
.nav-menu .has-sub:hover .submenu,
.nav-menu .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .has-sub:hover .caret { transform: rotate(180deg); }
.submenu {
position: absolute; top: calc(100% + 14px); left: 0;
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-md); box-shadow: var(--shadow-md);
padding: 12px; min-width: 300px;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
z-index: 50;
}
.submenu a {
display: block; padding: 10px 12px; border-radius: var(--radius-sm);
font-size: 14px; color: var(--color-ink-soft);
transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.submenu a:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.submenu a strong { display: block; color: var(--color-ink); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; font-size: 14.5px; }
.submenu a small { color: var(--color-muted); font-size: 12.5px; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 11px 18px; font-size: 13.5px; }
/* Hamburger toggle — visible on ALL viewports */
.nav-toggle {
display: inline-flex; width: 44px; height: 44px;
border-radius: 10px; border: 1.5px solid var(--color-ink);
align-items: center; justify-content: center;
background: #fff; cursor: pointer; flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
display: block; width: 18px; height: 2px; background: var(--color-ink);
position: relative;
transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
/* -------- Hero -------- */
.hero {
position: relative; padding: clamp(60px, 8vw, 110px) 0 clamp(60px, 7vw, 96px);
overflow: hidden;
}
.hero::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, var(--color-dark) 1px, transparent 0);
background-size: 32px 32px; opacity: 0.04; pointer-events: none; z-index: 0;
}
.hero-grid {
position: relative; z-index: 1;
display: grid; gap: clamp(32px, 5vw, 60px);
grid-template-columns: 1.4fr 1fr; align-items: end;
}
.hero h1 .accent { color: var(--color-accent); font-style: italic; font-weight: 600; }
.hero h1 .scribble { position: relative; display: inline-block; }
.hero h1 .scribble::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-meta {
display: flex; gap: 32px; margin-top: 36px;
padding-top: 24px; border-top: 1px solid var(--color-line);
flex-wrap: wrap;
font-size: 13px; color: var(--color-muted);
text-transform: uppercase; letter-spacing: 0.16em;
}
.hero-meta .item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta .item strong {
font-family: var(--font-display); font-size: 22px; color: var(--color-ink);
font-weight: 700; letter-spacing: -0.02em; text-transform: none;
}
.hero-meta .item span { font-size: 11.5px; color: var(--color-muted); letter-spacing: 0.16em; }
.hero-visual {
position: relative; aspect-ratio: 1 / 1.1;
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 20% 20%, rgba(254,147,0,0.14), transparent 50%),
linear-gradient(140deg, #0a0a0a, #1c1c1c);
overflow: hidden; box-shadow: var(--shadow-md);
}
.hero-visual .floating {
position: absolute; background: #fff; color: var(--color-ink);
border-radius: var(--radius-md); padding: 12px 16px;
box-shadow: var(--shadow-md); font-size: 13.5px; font-weight: 500;
display: flex; gap: 8px; align-items: center;
animation: floaty 6s ease-in-out infinite;
}
.hero-visual .f1 { top: 8%; left: 6%; animation-delay: 0s; }
.hero-visual .f2 { top: 38%; right: 6%; animation-delay: -2s; }
.hero-visual .f3 { bottom: 8%; left: 12%; animation-delay: -4s; }
.hero-visual .center-mark {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 7vw, 4.2rem);
font-weight: 600; color: rgba(255,255,255,0.07); user-select: none;
letter-spacing: -0.02em;
}
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* -------- Cards / Service grid -------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-md); padding: 28px;
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
display: flex; flex-direction: column; gap: 14px;
}
.card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.card .ico {
width: 48px; height: 48px; border-radius: 12px;
background: var(--color-accent-soft); color: var(--color-accent);
display: grid; place-items: center; font-size: 22px;
}
.card .ico svg { width: 26px; height: 26px; display: block; }
.contact-info .ico svg, .info-item .ico svg { width: 20px; height: 20px; display: block; }
.value-item .ico svg { width: 22px; height: 22px; display: block; }
/* -------- Work / Showcase -------- */
.work-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.work-grid.featured-first .work-card:first-child { grid-column: span 2; grid-row: span 2; }
.work-grid.featured-first .work-card:first-child .work-thumb { aspect-ratio: 16/10; }
.work-card {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-md); overflow: hidden;
display: flex; flex-direction: column;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.work-card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.work-thumb {
aspect-ratio: 4/3; position: relative; overflow: hidden;
display: grid; place-items: center;
font-family: var(--font-display); font-style: italic; font-weight: 600;
font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em;
text-align: center; padding: 24px;
}
.work-thumb::after {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.16) 1px, transparent 0);
background-size: 22px 22px; pointer-events: none;
}
.work-thumb.t1 { background: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%); color: var(--color-accent); }
.work-thumb.t2 { background: linear-gradient(135deg, #fe9300 0%, #ffb84a 100%); color: #0a0a0a; }
.work-thumb.t3 { background: linear-gradient(135deg, #fafaf7 0%, #ebe9e2 100%); color: rgba(10,10,10,0.45); }
.work-thumb.t4 { background: linear-gradient(135deg, #1c1c1c 0%, #2c2c2c 100%); color: var(--color-accent); }
.work-thumb.t5 { background: linear-gradient(135deg, #fff3e2 0%, #ffe1b8 100%); color: rgba(254,147,0,0.7); }
.work-thumb.t6 { background: linear-gradient(135deg, #0a0a0a 0%, #fe9300 100%); color: var(--color-accent); }
.work-thumb.t7 { background: linear-gradient(135deg, #fafaf7 0%, #c8c5bd 100%); color: rgba(10,10,10,0.55); }
.work-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.work-body .meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.work-body .meta .tag {
background: var(--color-bg-alt); color: var(--color-ink-soft);
padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600;
border: 1px solid var(--color-line);
}
.work-body .meta .tag-accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.work-body h3 { font-size: 19px; margin: 4px 0 4px; letter-spacing: -0.015em; }
.work-body p { font-size: 14px; margin: 0; color: var(--color-ink-soft); }
.work-body .read { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 13.5px; color: var(--color-ink); display: inline-flex; align-items: center; gap: 6px; }
.work-body .read::after { content: "→"; transition: transform 0.25s var(--ease); }
.work-card:hover .work-body .read { color: var(--color-accent); }
.work-card:hover .work-body .read::after { transform: translateX(4px); }
@media (max-width: 980px) {
.work-grid { grid-template-columns: repeat(2, 1fr); }
.work-grid.featured-first .work-card:first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 720px) {
.work-grid { grid-template-columns: 1fr; }
.work-grid.featured-first .work-card:first-child { grid-column: auto; }
}
.card h3 { margin: 4px 0 0; font-size: 22px; font-weight: 700; }
.card p { margin: 0; font-size: 14.5px; color: var(--color-ink-soft); }
.card .more {
display: inline-flex; align-items: center; gap: 6px;
margin-top: auto; padding-top: 14px;
font-weight: 600; font-size: 14px; color: var(--color-ink);
border-top: 1px solid var(--color-line);
}
.card .more::after { content: "→"; transition: transform 0.25s var(--ease); }
.card:hover .more { color: var(--color-accent); }
.card:hover .more::after { transform: translateX(4px); }
/* Section heading block */
.section-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
align-items: end; margin-bottom: 56px;
}
.section-head p { margin: 0; max-width: 52ch; }
/* -------- Stats / metric row -------- */
.metric-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
}
.metric-row .metric {
padding: 28px 22px; border-right: 1px solid var(--color-line);
}
.metric-row .metric:last-child { border-right: 0; }
.metric strong {
display: block; font-family: var(--font-display);
font-size: clamp(20px, 2.4vw, 30px); color: var(--color-ink);
font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 8px;
}
.metric span { color: var(--color-muted); font-size: 13.5px; }
/* -------- Process / steps -------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process .step { padding: 24px 0 0; border-top: 2px solid var(--color-ink); }
.process .step .num {
font-family: var(--font-display); font-weight: 700;
font-size: 13px; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 12px;
text-transform: uppercase;
}
.process .step h4 {
margin: 0 0 8px; font-family: var(--font-display);
font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
}
.process .step p { font-size: 14px; margin: 0; }
/* -------- CTA banner -------- */
.cta-banner {
background: var(--color-dark); color: #fff;
border-radius: var(--radius-lg);
padding: clamp(40px, 6vw, 72px);
display: grid; grid-template-columns: 1.4fr 1fr;
align-items: center; gap: 40px;
position: relative; overflow: hidden;
}
.cta-banner::after {
content: ""; position: absolute;
right: -80px; bottom: -80px; width: 280px; height: 280px;
border-radius: 50%; background: var(--color-accent); opacity: 0.16;
}
.cta-banner h2 { color: #fff; margin: 0; }
.cta-banner p { color: #b8b6af; margin: 12px 0 0; }
.cta-banner .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }
/* -------- Footer -------- */
.site-footer {
background: var(--color-dark); color: #b8b6af;
padding: 80px 0 32px;
}
.footer-grid {
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px;
margin-bottom: 56px;
}
.site-footer h4 {
color: #fff; font-family: var(--font-body); font-size: 13px;
letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px;
}
.site-footer ul li { margin-bottom: 10px; font-size: 14px; }
.site-footer ul a:hover { color: var(--color-accent); }
.site-footer .brand-block p { font-size: 14px; max-width: 36ch; margin-top: 16px; color: #908f88; }
.footer-bottom {
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
padding-top: 28px; border-top: 1px solid #1f1f1f;
font-size: 12.5px; color: #6e6c66;
}
.footer-bottom a:hover { color: var(--color-accent); }
/* -------- Cookie banner -------- */
.cookie-banner {
position: fixed; left: 16px; right: 16px; bottom: 16px;
background: #ffffff; color: var(--color-ink);
border: 1px solid var(--color-line); border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 20px 22px;
display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
z-index: 100;
transform: translateY(140%); transition: transform 0.4s var(--ease);
max-width: 980px; margin: 0 auto;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 13.5px; color: var(--color-ink-soft); }
.cookie-banner strong { color: var(--color-ink); }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner .btn { padding: 10px 18px; font-size: 13px; }
/* -------- Inner page hero -------- */
.page-hero {
padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-line);
position: relative; overflow: hidden;
}
.page-hero::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, var(--color-dark) 1px, transparent 0);
background-size: 32px 32px; opacity: 0.035; pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .crumbs {
font-size: 13px; color: var(--color-muted);
display: flex; gap: 10px; align-items: center; margin-bottom: 18px;
}
.page-hero .crumbs a:hover { color: var(--color-accent); }
.page-hero .crumbs span { color: var(--color-ink); font-weight: 500; }
.page-hero h1 { font-size: clamp(40px, 6vw, 80px); }
/* -------- Split layouts -------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split.reverse > :first-child { order: 2; }
/* -------- Feature list -------- */
.feature-list { display: grid; gap: 12px; margin: 20px 0; }
.feature-list li {
display: flex; gap: 12px; padding-left: 0;
font-size: 15px; color: var(--color-ink-soft); line-height: 1.5;
}
.feature-list li::before {
content: ""; flex-shrink: 0; width: 22px; height: 22px;
border-radius: 50%; background: var(--color-accent-soft);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px; background-position: center; background-repeat: no-repeat;
margin-top: 2px;
}
/* -------- Deliverables -------- */
.deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.deliverables .item {
padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius-md);
background: #fff; display: flex; flex-direction: column; gap: 6px;
}
.deliverables .item strong {
font-size: 16px; color: var(--color-ink);
font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
}
.deliverables .item span { font-size: 13.5px; color: var(--color-muted); }
/* -------- FAQ -------- */
.faq { display: grid; gap: 12px; max-width: 880px; }
.faq details {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-md); padding: 22px 26px;
transition: border-color 0.2s var(--ease);
}
.faq details[open] { border-color: var(--color-accent); }
.faq summary {
cursor: pointer; list-style: none;
display: flex; justify-content: space-between; gap: 16px; align-items: center;
font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--color-accent); transition: transform 0.3s var(--ease); line-height: 0.7; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; font-size: 14.5px; color: var(--color-ink-soft); }
/* -------- Blog cards -------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-line);
overflow: hidden; display: flex; flex-direction: column;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.blog-card .thumb {
aspect-ratio: 16 / 10; background: var(--color-bg-alt);
position: relative; overflow: hidden;
display: grid; place-items: center;
font-family: var(--font-display); font-style: italic; font-weight: 600;
font-size: 2rem; color: rgba(10,10,10,0.14);
}
.blog-card .thumb.t1 { background: linear-gradient(135deg, #fff3e2 0%, #ffe1b8 100%); color: rgba(254,147,0,0.45); }
.blog-card .thumb.t2 { background: linear-gradient(135deg, #ededeb 0%, #d8d8d4 100%); }
.blog-card .thumb.t3 { background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%); color: rgba(255,255,255,0.2); }
.blog-card .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card .meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--color-muted); }
.blog-card .meta .tag { background: var(--color-accent-soft); color: var(--color-accent); padding: 2px 10px; border-radius: var(--radius-pill); font-weight: 600; }
.blog-card h3 { font-size: 19px; margin: 4px 0 4px; }
.blog-card .read { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 13.5px; color: var(--color-ink); }
.blog-card:hover .read { color: var(--color-accent); }
/* -------- Contact form -------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 64px); }
.contact-form { background: #fff; padding: 32px; border-radius: var(--radius-md); border: 1px solid var(--color-line); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: var(--color-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.field input, .field select, .field textarea {
padding: 14px 16px; border: 1.5px solid var(--color-line);
border-radius: var(--radius-sm); background: #fff;
transition: border-color 0.2s var(--ease); width: 100%;
font-size: 15px;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--color-accent);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info .info-item {
display: flex; gap: 14px; padding: 18px;
border: 1px solid var(--color-line); border-radius: var(--radius-md);
background: #fff;
}
.contact-info .ico {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
background: var(--color-accent-soft); color: var(--color-accent);
display: grid; place-items: center; font-size: 18px;
}
.contact-info .info-item strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--color-ink); font-family: var(--font-display); font-weight: 700; }
.contact-info .info-item span { font-size: 13.5px; color: var(--color-muted); }
/* -------- Audience chips row -------- */
.audience-row {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
margin-top: 32px;
}
.audience-row .chip {
text-align: center; padding: 16px 12px;
background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
font-size: 13.5px; font-weight: 500; color: var(--color-ink-soft);
text-decoration: none; display: block; cursor: pointer;
transition: transform 0.25s var(--ease), border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.audience-row a.chip:hover { transform: translateY(-2px); border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 6px 18px -10px rgba(0,0,0,0.18); }
.audience-row .chip:hover { transform: translateY(-2px); border-color: var(--color-accent); color: var(--color-accent); }
/* -------- Hero v2 (kinetic editorial hero) -------- */
.hero-v2 { padding: 0; position: relative; overflow: hidden; }
.hero-v2::before { display: none; }
.hero-ticker {
background: var(--color-dark); color: #ededeb;
border-bottom: 1px solid #1f1f1f;
font-size: 12.5px; letter-spacing: 0.04em;
overflow: hidden;
}
.hero-ticker .container { padding: 0 var(--gutter); }
.ticker-strip {
display: flex; align-items: center; gap: 14px;
padding: 11px 0; white-space: nowrap; overflow: hidden;
}
.ticker-live {
display: inline-flex; align-items: center; gap: 8px;
color: var(--color-accent); font-weight: 700; letter-spacing: 0.18em;
flex-shrink: 0;
}
.ticker-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 0 rgba(254,147,0,0.6);
animation: ticker-pulse 1.6s infinite;
}
@keyframes ticker-pulse {
0% { box-shadow: 0 0 0 0 rgba(254,147,0,0.6); }
70% { box-shadow: 0 0 0 10px rgba(254,147,0,0); }
100% { box-shadow: 0 0 0 0 rgba(254,147,0,0); }
}
.ticker-sep { color: #5b5b55; flex-shrink: 0; }
.ticker-items {
display: inline-flex; gap: 16px; align-items: center;
animation: ticker-scroll 36s linear infinite;
}
.ticker-items > span { white-space: nowrap; }
.ticker-bullet { color: var(--color-accent); font-size: 8px; }
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hero-v2-container {
padding-top: clamp(50px, 7vw, 92px);
padding-bottom: clamp(50px, 7vw, 80px);
position: relative;
}
.hero-v2-container::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, var(--color-dark) 1px, transparent 0);
background-size: 32px 32px; opacity: 0.04; pointer-events: none;
}
.hero-v2-grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1.45fr 1fr;
gap: clamp(32px, 5vw, 64px); align-items: start;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--color-ink);
background: #fff; border: 1px solid var(--color-line);
padding: 8px 14px; border-radius: var(--radius-pill);
margin-bottom: 28px;
}
.hero-badge-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 4px rgba(254,147,0,0.18);
}
.hero-v2-h1 {
font-family: var(--font-display);
font-size: clamp(46px, 7vw, 96px);
font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
margin: 0 0 26px;
}
/* Kinetic rotator */
.hero-rotator {
display: inline-block;
position: relative;
min-width: 5.4ch;
vertical-align: top;
color: var(--color-accent);
font-style: italic; font-weight: 700;
}
.hero-rotator .rot-item {
display: inline-block;
position: absolute; left: 0; top: 0;
white-space: nowrap;
opacity: 0;
transform: translateY(40px);
animation: rot 14s infinite;
}
.hero-rotator .rot-item:nth-child(1) { animation-delay: 0s; }
.hero-rotator .rot-item:nth-child(2) { animation-delay: 2.8s; }
.hero-rotator .rot-item:nth-child(3) { animation-delay: 5.6s; }
.hero-rotator .rot-item:nth-child(4) { animation-delay: 8.4s; }
.hero-rotator .rot-item:nth-child(5) { animation-delay: 11.2s; }
@keyframes rot {
0%, 2% { opacity: 0; transform: translateY(40px); }
6%, 18% { opacity: 1; transform: translateY(0); }
22%, 100% { opacity: 0; transform: translateY(-40px); }
}
.hero-rotator .rot-item:first-child { position: relative; }
.hero-period { color: var(--color-accent); }
.hero-v2-lead {
font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6;
color: #3b3b38; max-width: 60ch; margin: 0 0 32px;
}
.hero-v2-lead em { font-family: var(--font-display); font-style: italic; color: var(--color-accent); font-weight: 600; }
.hero-v2-cta {
display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
margin-bottom: 36px;
}
.hero-tertiary {
font-weight: 600; font-size: 14px; color: var(--color-ink);
padding: 6px 4px; transition: color .2s var(--ease);
}
.hero-tertiary:hover { color: var(--color-accent); }
.hero-v2-trust {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
padding-top: 26px; border-top: 1px solid var(--color-line);
font-size: 13.5px; color: var(--color-ink-soft);
}
.trust-mark { color: var(--color-accent); letter-spacing: 0.05em; }
.trust-text { max-width: 50ch; }
.hero-v2-right { position: relative; }
.dashboard {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-lg); padding: 22px;
box-shadow: var(--shadow-md);
position: relative; overflow: hidden;
}
.dashboard::before {
content: ""; position: absolute;
top: -40px; right: -40px; width: 180px; height: 180px;
border-radius: 50%; background: var(--color-accent); opacity: 0.06;
}
.dash-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 18px; position: relative; z-index: 1;
}
.dash-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
color: var(--color-accent);
display: inline-flex; align-items: center; gap: 8px;
}
.dash-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-accent);
animation: ticker-pulse 1.6s infinite;
}
.dash-time { font-size: 11.5px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dash-items {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 16px; position: relative; z-index: 1;
}
.dash-item {
display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
padding: 12px; background: var(--color-bg-alt);
border: 1px solid var(--color-line); border-radius: 10px;
align-items: center;
transition: transform 0.25s var(--ease), border-color 0.25s;
}
.dash-item:hover { transform: translateX(2px); border-color: var(--color-accent); }
.dash-ico {
width: 36px; height: 36px; border-radius: 8px;
background: #fff; border: 1px solid var(--color-line);
color: var(--color-ink); display: grid; place-items: center;
}
.dash-ico svg { width: 18px; height: 18px; }
.dash-ico-orange { background: var(--color-accent); color: var(--color-dark); border-color: var(--color-accent); }
.dash-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-ink); font-family: var(--font-display); letter-spacing: -0.005em; }
.dash-text small { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.dash-tag {
font-size: 11px; color: var(--color-muted);
background: #fff; padding: 4px 8px; border-radius: 999px;
border: 1px solid var(--color-line); white-space: nowrap;
}
.dash-foot { position: relative; z-index: 1; padding-top: 8px; border-top: 1px solid var(--color-line); }
.dash-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.dash-pills span {
font-size: 11px; font-weight: 500;
background: var(--color-bg-alt); color: var(--color-ink-soft);
padding: 4px 10px; border-radius: 999px; border: 1px solid var(--color-line);
}
.hero-v2-spark {
position: absolute; top: -28px; right: -28px;
width: 100px !important; height: 100px !important;
opacity: 0.9; z-index: 2;
}
.hero-marquee {
background: var(--color-dark); color: #fff;
overflow: hidden;
border-top: 1px solid #1f1f1f;
position: relative;
}
.marquee-track {
display: inline-flex; gap: 0;
padding: 18px 0;
white-space: nowrap;
animation: marquee-scroll 45s linear infinite;
}
.hero-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
display: inline-flex; align-items: center; gap: 20px;
padding-right: 20px;
font-family: var(--font-display);
font-size: clamp(22px, 2.6vw, 38px);
font-weight: 700; letter-spacing: -0.02em;
}
.marquee-dot { color: var(--color-accent); font-size: 0.55em; }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 980px) {
.hero-v2-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-v2-spark { top: -16px; right: -16px; width: 70px !important; height: 70px !important; }
.ticker-items { animation-duration: 28s; }
}
@media (max-width: 720px) {
.hero-v2-h1 { font-size: clamp(38px, 11vw, 52px); }
.hero-v2-trust { font-size: 12.5px; }
.marquee-group { font-size: 22px; gap: 16px; padding-right: 16px; }
.dash-item { grid-template-columns: 32px 1fr; row-gap: 4px; }
.dash-item .dash-tag { grid-column: 2 / 3; justify-self: start; }
}
/* -------- Audit game (replaces bundle builder) -------- */
.audit-game {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-lg); padding: 24px;
box-shadow: var(--shadow-md);
position: relative; overflow: hidden;
}
.audit-game::before {
content: ""; position: absolute;
top: -80px; right: -80px; width: 240px; height: 240px;
border-radius: 50%; background: var(--color-accent);
opacity: 0.07; transition: transform 0.6s var(--ease);
}
.audit-game:hover::before { transform: scale(1.15) rotate(20deg); }
.audit-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; position: relative; z-index: 1; margin-bottom: 8px;
}
.audit-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 4px;
}
.audit-eyebrow-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
animation: audit-pulse 1.6s ease-in-out infinite;
}
@keyframes audit-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
.audit-title {
font-family: var(--font-display); font-size: 26px;
font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
margin: 0; color: var(--color-ink);
}
.audit-title em { font-style: italic; font-family: Georgia, serif; color: var(--color-accent); font-weight: 700; }
.audit-trophy {
width: 44px; height: 44px; border-radius: 12px;
background: var(--color-bg-alt);
display: grid; place-items: center;
color: var(--color-accent);
flex-shrink: 0;
}
.audit-trophy svg { width: 22px; height: 22px; }
.audit-stage { position: relative; z-index: 1; }
.audit-hint { font-size: 13.5px; color: var(--color-muted); margin: 12px 0 18px; line-height: 1.45; }
.audit-input-row {
display: flex; gap: 8px; align-items: stretch;
}
.audit-input-wrap {
flex: 1; display: flex; align-items: center;
background: var(--color-bg-alt);
border: 1.5px solid var(--color-line);
border-radius: 10px;
padding: 0 14px;
transition: border-color 0.2s var(--ease);
}
.audit-input-wrap:focus-within { border-color: var(--color-accent); background: #fff; }
.audit-input-prefix {
font-family: 'JetBrains Mono', monospace, var(--font-body);
font-size: 13px; color: var(--color-muted); margin-right: 4px;
}
.audit-input {
flex: 1; background: transparent; border: 0;
font-family: var(--font-body); font-size: 15px;
padding: 12px 0; color: var(--color-ink);
outline: none; min-width: 0;
}
.audit-run {
padding: 12px 18px; font-size: 14px; white-space: nowrap;
}
.audit-skip {
margin-top: 10px; background: transparent; border: 0;
color: var(--color-muted); font-size: 12.5px;
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
font-family: var(--font-body);
}
.audit-skip:hover { color: var(--color-accent); }
/* Stage 2: running */
.audit-running-label {
font-size: 13px; color: var(--color-muted); margin: 12px 0 14px;
}
.audit-running-label strong {
color: var(--color-ink); font-weight: 600;
}
.audit-checks {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.audit-checks li {
display: grid; grid-template-columns: 130px 1fr 44px; gap: 12px;
align-items: center; font-size: 13px;
}
.audit-check-name { color: var(--color-ink-soft); font-weight: 500; }
.audit-check-bar {
height: 8px; background: var(--color-bg-alt);
border-radius: 4px; overflow: hidden; position: relative;
}
.audit-check-fill {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, #fe9300, #ffb84a);
border-radius: 4px;
transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.audit-checks li.is-low .audit-check-fill { background: linear-gradient(90deg, #fe9300, #fe9300); }
.audit-checks li.is-good .audit-check-fill { background: linear-gradient(90deg, #fe9300, #fe9300); }
.audit-check-score {
font-family: var(--font-display); font-weight: 700;
font-size: 14px; text-align: right; color: var(--color-ink);
letter-spacing: -0.02em;
}
/* Stage 3: result */
.audit-result-head {
display: flex; gap: 16px; align-items: center; margin-bottom: 18px;
}
.audit-score-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.audit-score-ring svg { width: 100%; height: 100%; }
#audit-ring-fill { transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.audit-score-num {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800;
font-size: 26px; color: var(--color-ink); letter-spacing: -0.03em;
}
.audit-result-summary strong {
display: block; font-family: var(--font-display);
font-size: 18px; font-weight: 700; color: var(--color-ink);
margin-bottom: 4px;
}
.audit-result-summary p { font-size: 13px; color: var(--color-muted); margin: 0; line-height: 1.5; }
.audit-fixes {
background: var(--color-bg-alt);
border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.audit-fixes-label {
display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 8px;
}
.audit-fixes-list { display: flex; flex-direction: column; gap: 6px; }
.audit-fixes-list a {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px; background: #fff;
border-radius: 6px; font-size: 13px; color: var(--color-ink);
font-weight: 500;
transition: background 0.2s var(--ease);
}
.audit-fixes-list a:hover { background: var(--color-accent); color: var(--color-dark); }
.audit-fixes-list a::after { content: "→"; color: var(--color-accent); font-weight: 700; }
.audit-fixes-list a:hover::after { color: var(--color-dark); }
.audit-result-actions {
display: flex; gap: 8px; align-items: center;
}
.audit-reset {
background: transparent; border: 1px solid var(--color-line);
padding: 10px 14px; border-radius: var(--radius-pill);
font-size: 13px; font-weight: 600; color: var(--color-ink-soft);
cursor: pointer; transition: all 0.2s var(--ease);
}
.audit-reset:hover { border-color: var(--color-ink); color: var(--color-ink); }
.audit-cta { flex: 1; justify-content: center; }
@media (max-width: 720px) {
.audit-title { font-size: 22px; }
.audit-checks li { grid-template-columns: 100px 1fr 38px; font-size: 12px; }
.audit-input-row { flex-direction: column; }
.audit-run { width: 100%; }
}
/* -------- Header social bar -------- */
.header-social {
display: inline-flex; gap: 8px; margin-right: 10px;
}
.header-social a {
width: 38px; height: 38px;
display: grid; place-items: center;
color: var(--color-ink, #111);
background: #fff;
border: 1px solid var(--color-line, #ececec);
border-radius: 50%;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.header-social a:hover {
color: var(--color-accent);
border-color: var(--color-accent);
transform: translateY(-1px);
}
.header-social a svg { width: 18px; height: 18px; }
/* Show contact icons on desktop AND mobile so the user can always tap call/WA/maps */
/* -------- Footer: AI block beside socials, with icons -------- */
.brand-block-row {
display: flex; gap: 12px; align-items: flex-start; margin-top: 18px;
flex-wrap: wrap;
}
.brand-social-group {
flex: 1; min-width: 200px;
}
.brand-social-group > span {
display: block; font-size: 10.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 8px;
}
.footer-ai-icons {
display: flex; gap: 6px; flex-wrap: wrap;
}
.footer-ai-icons a {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 10px; border-radius: 8px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
font-size: 12px; font-weight: 600; color: #d8d6cf;
transition: all 0.2s var(--ease);
}
.footer-ai-icons a:hover {
background: var(--color-accent); border-color: var(--color-accent);
color: var(--color-dark);
}
.footer-ai-icons a svg { width: 13px; height: 13px; }
/* -------- City-SEO footer block (NoBroker-style) -------- */
.city-seo {
background: #0e0e0e;
border-top: 1px solid #1c1c1c;
padding: 36px 0 24px;
color: #908f88; font-size: 12.5px;
line-height: 1.7;
}
.city-seo .city-seo-head {
text-align: center; margin-bottom: 22px;
}
.city-seo .city-seo-head h4 {
font-family: var(--font-display); font-size: 20px;
color: #fff; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em;
}
.city-seo .city-seo-head p {
font-size: 12.5px; color: #6e6c66; margin: 0;
}
.city-seo-rows {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px;
}
.city-seo-row {
border-bottom: 1px solid #1c1c1c; padding-bottom: 14px;
}
.city-seo-row:last-child { border-bottom: 0; }
.city-seo-row > strong {
display: block; color: #fff; font-weight: 600; font-size: 12.5px;
margin-bottom: 6px; font-family: var(--font-display); letter-spacing: -0.01em;
}
.city-seo-row a {
color: #908f88; text-decoration: none;
margin-right: 4px;
transition: color 0.15s var(--ease);
}
.city-seo-row a:hover { color: var(--color-accent); }
.city-seo-row .sep { color: #3a3a3a; margin: 0 2px; }
@media (max-width: 780px) {
.city-seo-rows { grid-template-columns: 1fr; }
}
/* -------- Animate-on-load -------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* -------- Footer enhancements: social + AI + NAP -------- */
.footer-social {
display: flex; gap: 10px; margin-top: 20px;
flex-wrap: wrap;
}
.footer-social a {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: #b8b6af;
display: grid; place-items: center;
transition: background 0.25s var(--ease), color 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-social a:hover {
background: var(--color-accent); color: var(--color-dark);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.footer-social a svg { width: 16px; height: 16px; display: block; }
/* Social icons that appear directly under the logo in the brand column */
.footer-brand-social {
display: flex; gap: 10px; margin-top: 18px;
flex-wrap: wrap;
}
.footer-brand-social a {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: #b8b6af;
display: grid; place-items: center;
transition: background 0.25s var(--ease), color 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-brand-social a:hover {
background: var(--color-accent); color: var(--color-dark);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.footer-brand-social a svg { width: 15px; height: 15px; display: block; }
.footer-ai li a {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; font-size: 13.5px;
color: var(--color-accent);
position: relative;
}
.footer-ai li a::after {
content: ""; position: absolute; left: 0; bottom: -2px;
width: 0; height: 1px; background: var(--color-accent);
transition: width 0.25s var(--ease);
}
.footer-ai li a:hover::after { width: 100%; }
.footer-nap {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
padding: 24px 0;
border-top: 1px solid #1f1f1f;
border-bottom: 1px solid #1f1f1f;
font-size: 13px; color: #908f88; margin-bottom: 24px;
}
.footer-nap strong { color: #fff; font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 700; margin-right: 6px; }
.footer-nap a { color: var(--color-accent); }
.footer-nap a:hover { text-decoration: underline; }
@media (max-width: 980px) {
.footer-nap { grid-template-columns: 1fr; gap: 8px; }
}
/* -------- Lottie containers -------- */
.lottie-anim { display: inline-block; line-height: 0; pointer-events: none; }
.lottie-anim svg { display: block; width: 100%; height: 100%; }
.lottie-xs { width: 22px; height: 22px; }
.lottie-sm { width: 44px; height: 44px; }
.lottie-md { width: 80px; height: 80px; }
.lottie-lg { width: 140px; height: 140px; }
.lottie-xl { width: 220px; height: 220px; }
.lottie-arrow { width: 64px; height: 36px; }
.floating .lottie-anim.lottie-xs { width: 18px; height: 18px; margin-right: 4px; }
.hero-visual .lottie-center {
position: absolute; inset: 0; display: grid; place-items: center;
z-index: 1; pointer-events: none;
}
.hero-visual .lottie-center .lottie-anim { width: 240px; height: 240px; opacity: 0.92; }
.cta-banner .lottie-arrow { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); opacity: 0.65; }
@media (max-width: 980px) { .cta-banner .lottie-arrow { display: none; } }
/* -------- Pricing tiers (new) -------- */
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.tier {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-lg); padding: 32px 28px;
display: flex; flex-direction: column; gap: 18px;
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
position: relative;
}
.tier:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.tier.featured {
background: var(--color-dark); color: #ededeb; border-color: var(--color-dark);
}
.tier.featured h3, .tier.featured .tier-price { color: #fff; }
.tier.featured .tier-name { color: var(--color-accent); }
.tier.featured ul li { color: #c8c6bf; }
.tier.featured ul li::before { background: rgba(254,147,0,0.18); }
.tier.featured .tier-foot { border-top-color: #262626; color: #908f88; }
.tier .badge {
position: absolute; top: -12px; right: 24px;
background: var(--color-accent); color: var(--color-dark);
font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 12px; border-radius: var(--radius-pill);
}
.tier-name {
font-family: var(--font-display); font-size: 13px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
}
.tier h3 {
font-family: var(--font-display); font-size: 28px; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.05; margin: -6px 0 0;
}
.tier-price-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0 0; }
.tier-price {
font-family: var(--font-display); font-size: 44px; font-weight: 800;
letter-spacing: -0.03em; line-height: 1; color: var(--color-ink);
}
.tier-price-suffix { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.tier ul { display: grid; gap: 10px; margin: 6px 0 0; }
.tier ul li {
display: flex; gap: 10px; align-items: flex-start;
font-size: 14px; color: var(--color-ink-soft); line-height: 1.5;
}
.tier ul li::before {
content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
border-radius: 50%; background: var(--color-accent);
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px; background-position: center; background-repeat: no-repeat;
box-shadow: 0 1px 2px rgba(254,147,0,0.25);
}
.tier-foot {
margin-top: auto; padding-top: 16px;
border-top: 1px solid var(--color-line);
font-size: 12px; color: var(--color-muted); line-height: 1.45;
}
.tier-foot .emi { color: var(--color-accent); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.tier .btn { margin-top: 8px; align-self: flex-start; }
.pricing-note {
margin: 32px auto 0; max-width: 800px; text-align: center;
font-size: 13px; color: var(--color-muted); line-height: 1.6;
}
.pricing-note strong { color: var(--color-ink); }
/* -------- Responsive -------- */
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; align-items: start; }
.hero-visual { aspect-ratio: 16/12; max-height: 380px; }
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
.metric-row { grid-template-columns: repeat(2, 1fr); }
.metric-row .metric:nth-child(2) { border-right: 0; }
.metric-row .metric:nth-child(1), .metric-row .metric:nth-child(2) { border-bottom: 1px solid var(--color-line); }
.process { grid-template-columns: repeat(2, 1fr); }
.cta-banner { grid-template-columns: 1fr; }
.cta-banner .actions { justify-content: flex-start; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.audience-row { grid-template-columns: repeat(3, 1fr); }
.split, .split.reverse > :first-child { grid-template-columns: 1fr; order: initial; }
.deliverables { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
Hamburger nav drawer — opens on ALL viewports via the toggle
============================================================ */
.nav.open .nav-menu {
display: flex; flex-direction: column; align-items: stretch;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--color-line);
padding: 14px var(--gutter) 24px; gap: 2px;
max-height: calc(100vh - 64px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
box-shadow: 0 8px 24px -12px rgba(0,0,0,.18);
z-index: 60;
}
.nav.open .nav-menu .nav-link {
width: 100%; padding: 16px 12px;
font-size: 16px; font-weight: 500;
border-bottom: 1px solid #f4f4f4;
display: flex; align-items: center; justify-content: space-between;
min-height: 48px;
}
.nav.open .nav-menu > li:last-child .nav-link { border-bottom: 0; }
/* Services submenu — collapsed by default in the drawer; click "Services" to expand */
.nav.open .submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none; border: 0;
background: var(--color-bg-alt, #fafafa);
border-radius: 10px;
margin: 0 0 8px;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), padding 0.3s ease;
min-width: 0;
}
.nav.open .has-sub.submenu-open .submenu {
max-height: 1200px;
padding: 6px 0;
}
.nav.open .submenu a {
padding: 12px 16px;
min-height: 44px;
display: flex; flex-direction: column;
}
.nav.open .submenu a strong { font-size: 14.5px; }
.nav.open .submenu a small { font-size: 12px; margin-top: 2px; }
.nav.open .has-sub .caret { transition: transform 0.25s ease; }
.nav.open .has-sub.submenu-open .caret { transform: rotate(180deg); }
/* Visual divider in drawer (separator between main nav and members login) */
.nav-divider {
list-style: none;
height: 1px;
background: var(--color-line);
margin: 8px 0;
padding: 0 !important;
}
/* Members Login styled distinctly inside the drawer */
.nav-link-members {
background: var(--color-accent) !important;
color: #fff !important;
border-radius: 10px !important;
font-weight: 700 !important;
justify-content: center !important;
border-bottom: none !important;
margin: 6px 0 !important;
transition: filter 0.2s ease, transform 0.2s ease;
}
.nav-link-members:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.nav-link-members::after { display: none !important; }
.nav-link-members svg { stroke: #fff; flex-shrink: 0; }
@media (max-width: 720px) {
.blog-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.process { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.audience-row { grid-template-columns: repeat(2, 1fr); }
.field-row { grid-template-columns: 1fr; }
.cookie-banner { grid-template-columns: 1fr; }
.hero-meta { gap: 18px; }
.metric-row { grid-template-columns: 1fr; }
.metric-row .metric { border-right: 0; border-bottom: 1px solid var(--color-line); }
.metric-row .metric:last-child { border-bottom: 0; }
.pricing-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
}
/* Blog thumb illustration (replaces gradient placeholders) */
.blog-card .thumb-illus { padding: 0; }
.blog-card .thumb-illus svg { width: 100%; height: 100%; display: block; }
.blog-hero-figure svg { width: 100%; height: 100%; display: block; }
/* -------- Pricing: addon card + sublist -------- */
.addon-card {
margin-top: 32px;
background: var(--color-dark); color: #fff;
border-radius: var(--radius-lg); padding: 28px 32px;
display: flex; gap: 24px; align-items: center; justify-content: space-between;
flex-wrap: wrap;
}
.addon-card .addon-text { flex: 1; min-width: 260px; }
.addon-card .addon-text h3 {
font-family: var(--font-display); font-size: 24px;
font-weight: 800; margin: 6px 0 6px; color: #fff;
letter-spacing: -0.02em;
}
.addon-card .addon-text p { color: #c8c6bf; font-size: 14.5px; margin: 0; line-height: 1.55; }
.addon-card .addon-text .eyebrow { color: var(--color-accent); }
.addon-card .btn { background: var(--color-accent); color: var(--color-dark); border-color: var(--color-accent); }
.addon-card .btn:hover { background: #ffb84a; border-color: #ffb84a; }
@media (max-width: 700px) {
.addon-card { padding: 22px; flex-direction: column; align-items: flex-start; }
.addon-card .btn { width: 100%; justify-content: center; }
}
.tier-sublist {
list-style: none; padding: 6px 0 0 14px; margin: 6px 0 0;
border-left: 2px solid var(--color-accent);
display: flex; flex-direction: column; gap: 4px;
}
.tier-sublist li {
font-size: 13px; color: var(--color-ink-soft);
padding: 0; position: relative;
}
.tier-sublist li::before {
content: "·"; color: var(--color-accent); font-weight: 700;
margin-right: 6px;
}
/* -------- Footer "Connect" section heading -------- */
.footer-connect { margin-top: 18px; }
.footer-connect h4 {
color: #fff;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.footer-connect .brand-block-row { margin-top: 0; gap: 22px; }
.footer-connect .brand-social-group > span {
color: #b8b6af;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
}
/* -------- Audit: pulse during PSI wait + disclosure -------- */
.audit-checks li.is-pulse .audit-check-fill {
width: 30%;
background: linear-gradient(90deg, rgba(254,147,0,0.15), rgba(254,147,0,0.55), rgba(254,147,0,0.15));
background-size: 200% 100%;
animation: audit-pulse-fill 1.2s ease-in-out infinite;
}
@keyframes audit-pulse-fill {
0%, 100% { background-position: 100% 0; }
50% { background-position: 0 0; }
}
.audit-checks li.is-pulse .audit-check-score::after {
content: "·"; animation: audit-dots 1s steps(3) infinite;
}
@keyframes audit-dots {
0% { content: "·"; }
33% { content: "··"; }
66% { content: "···"; }
}
.audit-disclosure {
font-size: 11.5px; color: var(--color-muted);
margin: 4px 0 12px; line-height: 1.5;
display: flex; align-items: flex-start; gap: 4px;
background: var(--color-bg-alt);
padding: 8px 10px; border-radius: 6px;
}
.audit-disclosure strong { color: var(--color-ink); }
/* -------- Industry Facts Flashcards -------- */
.flashcard-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
perspective: 1400px;
}
.flashcard {
appearance: none;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
/* Drop the rigid aspect-ratio so cards grow with content on small screens.
Default is set per-context (.hero-fc-deck and .flashcard-grid below). */
min-height: 240px;
position: relative;
perspective: 1200px;
/* Make the card itself a grid container so the inner and any
absolute children render in the same cell, allowing height to be
driven by the LARGER of the two faces. */
display: grid;
grid-template-areas: "stack";
}
.flashcard-inner {
grid-area: stack;
position: relative;
width: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
border-radius: var(--radius-lg);
/* Inner also stacks its two faces */
display: grid;
grid-template-areas: "face";
}
.flashcard[aria-pressed="true"] .flashcard-inner {
transform: rotateY(180deg);
}
.flashcard-face {
grid-area: face;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: var(--radius-lg);
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
position: relative;
}
.flashcard-front {
background: #fff;
border: 1px solid var(--color-line);
box-shadow: 0 4px 12px -6px rgba(10,10,10,0.05);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.flashcard:hover .flashcard-inner {
transform: translateY(-4px);
}
.flashcard[aria-pressed="true"]:hover .flashcard-inner {
transform: translateY(-4px) rotateY(180deg);
}
.flashcard-front::before {
content: "";
position: absolute;
top: -20px; right: -20px;
width: 80px; height: 80px;
border-radius: 50%;
background: var(--color-accent);
opacity: 0.08;
transition: transform 0.4s var(--ease);
}
.flashcard:hover .flashcard-front::before { transform: scale(1.2); opacity: 0.14; }
.flashcard-num {
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-accent);
display: inline-block;
}
.flashcard-q {
font-family: var(--font-display);
font-size: 19px; font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.25;
color: var(--color-ink);
margin: 12px 0 0;
}
.flashcard-flip {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-accent);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
text-align: center;
margin-top: 8px;
padding: 6px 10px;
line-height: 1.1;
}
.flashcard-back {
background: var(--color-dark);
color: #fff;
transform: rotateY(180deg);
border: 1px solid var(--color-dark);
justify-content: flex-start;
}
.flashcard-back::after {
content: "";
position: absolute;
bottom: -40px; left: -40px;
width: 120px; height: 120px;
border-radius: 50%;
background: var(--color-accent);
opacity: 0.12;
}
.flashcard-num-back { color: var(--color-accent); }
.flashcard-stat {
font-family: var(--font-display);
font-size: 44px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--color-accent);
margin: 8px 0 8px;
position: relative;
z-index: 1;
}
.flashcard-a {
font-size: 14px;
line-height: 1.55;
color: #e6e4dd;
margin: 0 0 10px;
flex: 1;
position: relative;
z-index: 1;
}
.flashcard-a em {
font-style: italic;
font-family: Georgia, serif;
color: #fff;
font-weight: 600;
}
.flashcard-cite {
font-size: 11px;
font-style: normal;
color: #908f88;
line-height: 1.5;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.flashcard-cite a {
color: var(--color-accent);
font-weight: 600;
}
.flashcard-cite a:hover { text-decoration: underline; }
.flashcard-back .flashcard-flip {
color: var(--color-accent);
position: relative;
z-index: 1;
}
@media (max-width: 1024px) {
.flashcard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.flashcard-grid { grid-template-columns: 1fr; }
.flashcard { aspect-ratio: auto; min-height: 220px; }
}
/* -------- Hero Flashcard Carousel -------- */
.hero-fc {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-lg); padding: 24px;
box-shadow: var(--shadow-md);
position: relative; overflow: hidden;
}
.hero-fc::before {
content: ""; position: absolute;
top: -80px; right: -80px; width: 220px; height: 220px;
border-radius: 50%; background: var(--color-accent); opacity: 0.07;
}
.hero-fc-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; position: relative; z-index: 1; margin-bottom: 8px;
}
.hero-fc-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 4px;
}
.hero-fc-eyebrow-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
animation: hfc-pulse 1.8s ease-in-out infinite;
}
@keyframes hfc-pulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:0.4; transform:scale(0.7); }
}
.hero-fc-title {
font-family: var(--font-display); font-size: 24px;
font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
margin: 0; color: var(--color-ink);
}
.hero-fc-title em {
font-style: italic; font-family: Georgia, serif;
color: var(--color-accent); font-weight: 700;
}
.hero-fc-counter {
font-family: var(--font-display); font-weight: 700;
font-size: 13px; color: var(--color-muted);
white-space: nowrap; flex-shrink: 0;
}
.hero-fc-counter-cur {
color: var(--color-accent); font-size: 22px; letter-spacing: -0.02em;
}
.hero-fc-hint {
font-size: 12px; color: var(--color-muted);
margin: 8px 0 14px; position: relative; z-index: 1;
}
.hero-fc-stage {
position: relative; z-index: 1;
perspective: 1400px;
}
.hero-fc-deck {
/* CSS grid stacking: all cards share one cell so the deck auto-sizes
to the tallest visible card. Eliminates clipping on mobile when
content is long. */
display: grid;
grid-template-areas: "stack";
width: 100%;
}
.hero-fc-deck .flashcard {
grid-area: stack;
width: 100%;
/* No fixed aspect-ratio here — let content drive height on small screens */
aspect-ratio: auto;
min-height: 260px;
opacity: 0; pointer-events: none;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.hero-fc-deck .flashcard.is-current {
opacity: 1; pointer-events: auto;
}
.hero-fc-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: 14px; position: relative; z-index: 1;
}
.hero-fc-arrow {
background: var(--color-bg-alt); border: 1px solid var(--color-line);
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
color: var(--color-ink-soft);
transition: all 0.2s var(--ease);
}
.hero-fc-arrow:hover {
background: var(--color-accent); color: var(--color-dark);
border-color: var(--color-accent);
}
.hero-fc-arrow svg { width: 16px; height: 16px; }
.hero-fc-dots {
display: flex; gap: 6px; align-items: center;
}
.hero-fc-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-line); border: 0; padding: 0;
cursor: pointer; transition: all 0.25s var(--ease);
}
.hero-fc-dot.is-active {
background: var(--color-accent);
width: 20px; border-radius: 4px;
}
/* -------- Hero Flashcard mobile fixes -------- */
@media (max-width: 720px) {
.hero-fc { padding: 18px 16px; max-width: 100%; box-sizing: border-box; }
.hero-fc-title { font-size: 20px; }
/* Stage & deck auto-size to content (grid stacking handles it) */
.hero-fc-deck .flashcard { min-height: 240px; }
.hero-fc-deck .flashcard-face { padding: 18px 16px; }
.hero-fc-deck .flashcard-q { font-size: 17px; }
.hero-fc-deck .flashcard-stat { font-size: 38px; }
.hero-fc-deck .flashcard-a { font-size: 13.5px; }
.hero-fc-deck .flashcard-flip { font-size: 12.5px; }
}
@media (max-width: 420px) {
.hero-fc { padding: 16px 14px; }
.hero-fc-title { font-size: 18px; }
.hero-fc-deck .flashcard-face { padding: 16px 14px; }
.hero-fc-deck .flashcard-q { font-size: 16px; }
.hero-fc-deck .flashcard-stat { font-size: 34px; }
.hero-fc-deck .flashcard-flip { font-size: 11.5px; }
}
/* -------- Client logo marquee -------- */
.logo-marquee-section {
padding: 40px 0 48px;
background: var(--color-bg);
border-top: 1px solid var(--color-line);
overflow: hidden;
}
.logo-eyebrow {
text-align: center;
font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--color-muted); margin: 0 0 24px;
}
.logo-marquee {
width: 100%; 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);
}
.logo-track {
display: flex; width: max-content;
animation: logo-scroll 40s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-group {
display: flex; align-items: center;
gap: 56px; padding-right: 56px;
}
.logo-item {
display: flex; align-items: center; justify-content: center;
height: 56px;
padding: 8px 14px;
white-space: nowrap;
opacity: 0.7;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
cursor: default;
}
.logo-item img {
max-height: 40px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
}
.logo-item:hover { opacity: 1; transform: translateY(-2px); }
.logo-item strong { color: var(--color-ink); font-weight: 800; }
.logo-item em {
color: var(--color-accent); font-style: italic;
font-family: Georgia, serif; font-weight: 700;
}
@keyframes logo-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Work thumb variants t5, t6 */
.work-thumb.t5 { background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%); }
.work-thumb.t6 { background: linear-gradient(135deg, #0a0a0a 0%, #fe9300 100%); }
/* -------- Header Ask-AI pill + dropdown -------- */
.header-ask-ai {
position: relative; margin-right: 10px;
}
.header-ask-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 12px; border-radius: var(--radius-pill);
background: var(--color-bg-alt); border: 1px solid var(--color-line);
font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
color: var(--color-ink); cursor: pointer;
transition: all 0.2s var(--ease);
}
.header-ask-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.header-ask-btn svg { width: 14px; height: 14px; color: var(--color-accent); }
.header-ask-menu {
position: absolute; right: 0; top: 100%;
margin-top: 8px; min-width: 220px;
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 8px; z-index: 100;
opacity: 0; pointer-events: none; visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.header-ask-ai[data-open="true"] .header-ask-menu {
opacity: 1; pointer-events: auto; visibility: visible;
transform: translateY(0);
}
.header-ask-eyebrow {
display: block;
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--color-muted);
padding: 6px 10px 4px;
}
.header-ask-menu a {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 6px;
font-size: 13px; font-weight: 500; color: var(--color-ink);
transition: all 0.15s var(--ease);
}
.header-ask-menu a:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.header-ask-menu a svg { width: 14px; height: 14px; color: var(--color-accent); flex-shrink: 0; }
@media (max-width: 980px) { .header-ask-ai { display: none; } }
/* -------- Footer Contact column + Connect block (right column) -------- */
.footer-contact-col h4 {
margin: 0 0 12px;
}
.footer-contact-list { padding: 0; margin: 0 0 22px; list-style: none; }
.footer-contact-list li { margin-bottom: 6px; }
.footer-contact-list a {
display: inline-flex; align-items: center; gap: 8px;
color: #d8d6cf; font-size: 13.5px; line-height: 1.5;
transition: color 0.2s var(--ease);
}
.footer-contact-list a:hover { color: var(--color-accent); }
.footer-contact-list a svg {
width: 14px; height: 14px; color: var(--color-accent);
flex-shrink: 0;
}
.footer-connect-block {
padding-top: 18px;
border-top: 1px solid #1f1f1f;
}
.footer-connect-block h4 { margin: 0 0 10px; }
.footer-mini-label {
display: block;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: #908f88; font-weight: 600;
margin-bottom: 6px;
}
.footer-connect-block .footer-social { margin-bottom: 4px; gap: 8px; }
.footer-connect-block .footer-social a {
width: 32px; height: 32px;
}
.footer-connect-block .footer-ai-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-connect-block .footer-ai-icons a {
width: 32px; height: 32px;
padding: 0; display: grid; place-items: center;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #b8b6af;
transition: all 0.2s var(--ease);
}
.footer-connect-block .footer-ai-icons a:hover {
background: var(--color-accent); color: var(--color-dark);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.footer-connect-block .footer-ai-icons a svg { width: 15px; height: 15px; }
.footer-connect-block .footer-ai-icons a span { display: none; }
/* -------- Career page -------- */
.role-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 20px; margin-top: 32px;
}
.role-card {
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-lg); padding: 28px;
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s;
display: flex; flex-direction: column;
}
.role-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.role-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 14px;
}
.role-type {
display: inline-block;
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 8px;
}
.role-title {
font-family: var(--font-display);
font-size: 22px; font-weight: 800;
letter-spacing: -0.02em; line-height: 1.15;
color: var(--color-ink); margin: 0 0 8px;
}
.role-loc {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--color-muted); font-weight: 500;
}
.role-loc svg { color: var(--color-accent); }
.role-domain {
flex-shrink: 0; width: 40px; height: 40px;
border-radius: 50%; background: var(--color-bg-alt);
display: grid; place-items: center;
color: var(--color-accent); border: 1px solid var(--color-line);
transition: all 0.2s var(--ease);
}
.role-domain:hover {
background: var(--color-accent); color: var(--color-dark);
transform: rotate(45deg);
}
.role-domain svg { width: 16px; height: 16px; }
.role-blurb {
font-size: 14.5px; line-height: 1.6;
color: var(--color-ink-soft); margin: 0 0 14px;
}
.role-skills {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 18px;
}
.role-skill {
font-size: 11.5px; font-weight: 600;
padding: 4px 9px; border-radius: var(--radius-pill);
background: var(--color-bg-alt); color: var(--color-ink-soft);
border: 1px solid var(--color-line);
}
.role-apply {
display: inline-flex; align-items: center; gap: 6px;
margin-top: auto;
padding: 11px 18px; border-radius: var(--radius-pill);
background: var(--color-ink); color: #fff;
font-weight: 600; font-size: 13.5px;
align-self: flex-start;
transition: all 0.2s var(--ease);
}
.role-apply:hover {
background: var(--color-accent); color: var(--color-dark);
}
.role-apply svg { width: 14px; height: 14px; }
@media (max-width: 780px) {
.role-grid { grid-template-columns: 1fr; }
}
/* Process list (career hiring) */
.process-list {
list-style: none; padding: 0; margin: 32px 0 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.process-list li {
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
padding: 24px 26px;
position: relative;
border: 1px solid var(--color-line);
}
.process-num {
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-accent);
display: block; margin-bottom: 8px;
}
.process-list h3 {
font-family: var(--font-display);
font-size: 19px; font-weight: 700;
letter-spacing: -0.02em; line-height: 1.2;
color: var(--color-ink); margin: 0 0 8px;
}
.process-list p { font-size: 14px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
@media (max-width: 780px) {
.process-list { grid-template-columns: 1fr; }
}
/* CTA banner — dark variant */
.cta-banner-dark {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
align-items: center;
padding: 48px;
background: linear-gradient(135deg, #131313 0%, #1c1c1c 100%);
border-radius: var(--radius-lg);
color: #fff;
border: 1px solid #2a2a2a;
}
.cta-banner-dark h2 {
font-family: var(--font-display);
font-size: 36px; font-weight: 800;
letter-spacing: -0.025em; line-height: 1.1;
color: #fff; margin: 8px 0 12px;
}
.cta-banner-dark .italic-serif { color: var(--color-accent); }
.cta-banner-dark p { color: #c8c6bf; margin: 0; font-size: 15px; line-height: 1.6; }
.cta-banner-dark .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 880px) {
.cta-banner-dark { grid-template-columns: 1fr; padding: 32px; }
.cta-banner-dark h2 { font-size: 28px; }
}
/* -------- Article: FAQ accordion + key-takeaways -------- */
.article-faq-item {
border-bottom: 1px solid var(--color-line);
padding: 18px 0;
}
.article-faq-item summary {
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.015em;
color: var(--color-ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-right: 8px;
transition: color 0.2s var(--ease);
}
.article-faq-item summary::-webkit-details-marker { display: none; }
.article-faq-item summary::after {
content: "+";
font-family: var(--font-display);
font-weight: 300;
font-size: 26px;
line-height: 1;
color: var(--color-accent);
flex-shrink: 0;
transition: transform 0.3s var(--ease);
}
.article-faq-item[open] summary::after { transform: rotate(45deg); }
.article-faq-item[open] summary { color: var(--color-accent); }
.article-faq-answer {
padding: 12px 0 4px;
font-size: 15px;
line-height: 1.7;
color: var(--color-ink-soft);
}
/* Same logo (logo.png) is used in header and footer. The footer background
is dark, so we put the logo on a subtle white plate to keep the black
wordmark readable while preserving brand colours. */
.site-footer .brand-block img {
background: #ffffff;
padding: 8px 12px;
border-radius: 8px;
display: block;
}
/* ============================================================
Content protection (anti-copy)
Disables text selection, drag and (cosmetic) copy gesture on
everything except form inputs. Note: this is a deterrent, not
real DRM — a determined user can disable JS or view source.
============================================================ */
html, body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* Allow selection / typing inside form fields and anything explicitly opted-in. */
input, textarea, select, [contenteditable="true"], .allow-select, .allow-select * {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}
/* Block drag-saving images */
img {
-webkit-user-drag: none;
user-drag: none;
pointer-events: auto;
}
/* Disabled submit button — visual cue while human-check is unanswered */
.btn[disabled], .btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(20%);
}
/* ============================================================
Header: Google rating badge (enlarged)
============================================================ */
.g-rating {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px;
background: #fff; border: 1.5px solid var(--color-line, #ececec);
text-decoration: none; color: var(--color-ink, #111);
font-family: var(--font-body, 'Geist', sans-serif);
font-size: 14px; line-height: 1; white-space: nowrap;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
font-weight: 500;
}
.g-rating:hover {
border-color: var(--color-accent, #fe9300);
transform: translateY(-1px);
box-shadow: 0 8px 18px -10px rgba(0,0,0,.22);
}
.g-rating-mark { flex-shrink: 0; width: 18px; height: 18px; }
.g-rating-score { font-weight: 700; font-size: 14.5px; color: #111; }
.g-rating-score-decimal { display: none; } /* Always show whole number for compact pill */
/* DESKTOP/LONG-FORM PIECES — HIDDEN ON ALL DEVICES (compact mobile pill is the constant style) */
.g-rating-stars { display: none; }
.g-rating-label { display: none; }
/* Compact pill elements — VISIBLE ON ALL DEVICES */
.g-rating-star-mobile {
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.g-rating-label-mobile {
display: inline;
color: #555;
font-size: 13px;
font-weight: 500;
}
/* Header pill responsive sizing (compact form, just scales) */
@media (max-width: 720px) {
.header-social a { width: 40px; height: 40px; }
.header-social a svg { width: 20px; height: 20px; }
.g-rating { padding: 7px 11px; font-size: 13px; gap: 6px; }
.g-rating-score { font-size: 14px; }
.g-rating-mark { width: 16px; height: 16px; }
.g-rating-star-mobile { width: 14px; height: 14px; }
/* On mobile, drop the "Rating" word to keep the pill compact */
.g-rating-label-mobile { display: none !important; }
}
/* ============================================================
Industries hub & sector pages
============================================================ */
.ind-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }
.ind-card {
background: #fff; border: 1px solid var(--color-line, #ececec);
border-radius: 18px; padding: 26px 24px;
display: flex; flex-direction: column; gap: 12px;
text-decoration: none; color: inherit;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
position: relative; overflow: hidden;
}
.ind-card::before {
content: ""; position: absolute; top: -40%; right: -10%;
width: 43%; height: 74%;
background: radial-gradient(circle, rgba(254,147,0,0.12), transparent 65%);
pointer-events: none; opacity: 0;
transition: opacity .25s ease;
}
.ind-card:hover {
transform: translateY(-3px); border-color: #d8d8d8;
box-shadow: 0 18px 30px -22px rgba(0,0,0,.15);
}
.ind-card:hover::before { opacity: 1; }
.ind-card-icon {
width: 44px; height: 44px; border-radius: 12px;
background: rgba(254,147,0,0.10); color: var(--color-accent, #fe9300);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; position: relative; z-index: 1;
}
.ind-card h3 {
font-family: 'Bricolage Grotesque', Georgia, serif;
font-size: 19px; font-weight: 600; letter-spacing: -.01em;
margin: 0; color: #111; position: relative; z-index: 1;
}
.ind-card p {
font-family: 'Geist', sans-serif;
font-size: 13.5px; line-height: 1.55; color: #555;
margin: 0; flex: 1; position: relative; z-index: 1;
}
.ind-card .ind-card-cta {
font-family: 'Geist', sans-serif;
font-size: 13px; font-weight: 600;
color: var(--color-accent, #fe9300);
margin-top: auto; position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 4px;
}
/* Sector page: pricing tiers */
.sector-pricing {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
margin-top: 8px;
}
@media (max-width: 880px) { .sector-pricing { grid-template-columns: 1fr; } }
.tier {
background: #fff; border: 1px solid var(--color-line, #ececec);
border-radius: 18px; padding: 28px 26px;
display: flex; flex-direction: column; gap: 14px;
position: relative;
}
.tier.tier-featured {
background: #0a0a0a; color: #fff; border-color: #0a0a0a;
overflow: hidden;
}
.tier.tier-featured::before {
content: ""; position: absolute; top: -40%; right: -10%;
width: 43%; height: 74%;
background: radial-gradient(circle, rgba(254,147,0,0.18), transparent 65%);
pointer-events: none;
}
.tier-badge {
position: absolute; top: 16px; right: 16px;
background: var(--color-accent, #fe9300); color: #0a0a0a;
font-family: 'Geist', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
z-index: 2;
}
.tier-name {
font-family: 'Bricolage Grotesque', Georgia, serif;
font-size: 22px; font-weight: 600; letter-spacing: -.01em;
margin: 0; color: inherit; position: relative; z-index: 1;
}
.tier-price {
font-family: 'Bricolage Grotesque', Georgia, serif;
font-size: 28px; font-weight: 600; line-height: 1;
position: relative; z-index: 1;
}
.tier-price .tier-price-suffix {
font-size: 13px; font-weight: 500; color: #888; margin-left: 4px;
}
.tier.tier-featured .tier-price-suffix { color: #aaa; }
.tier-summary {
font-family: 'Geist', sans-serif;
font-size: 14px; line-height: 1.5; color: #555;
margin: 0; position: relative; z-index: 1;
}
.tier.tier-featured .tier-summary { color: #cfcfcf; }
.tier-features {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 9px;
font-family: 'Geist', sans-serif; font-size: 13.5px; line-height: 1.5;
color: #444; position: relative; z-index: 1;
}
.tier.tier-featured .tier-features { color: #e8e8e8; }
.tier-features li { padding-left: 22px; position: relative; }
.tier-features li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: var(--color-accent, #fe9300); font-weight: 700;
}
.tier-cta {
margin-top: 8px; position: relative; z-index: 1;
}
/* Sector page: pain points list */
.sector-pains {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
margin-top: 8px;
}
@media (max-width: 720px) { .sector-pains { grid-template-columns: 1fr; } }
.sector-pain {
background: #fafafa; border: 1px solid var(--color-line, #ececec);
border-radius: 12px; padding: 18px 20px;
font-family: 'Geist', sans-serif; font-size: 14.5px;
line-height: 1.5; color: #444;
display: flex; gap: 12px; align-items: flex-start;
}
.sector-pain::before {
content: "→"; flex-shrink: 0; color: var(--color-accent, #fe9300);
font-weight: 700; line-height: 1.5;
}
/* ================================================================
MOBILE OPTIMIZATION LAYER
----------------------------------------------------------------
Targeted improvements for mobile readability, touch targets,
spacing, and edge cases. Mobile-first principles applied
retrofitted: 16px minimum form font (prevents iOS auto-zoom),
44x44px minimum touch targets (WCAG AA), responsive headings
with clamp(), and grid stacking where needed.
================================================================ */
/* Universal: avoid horizontal overflow */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video, iframe { max-width: 100%; height: auto; }
/* But preserve flex/grid behaviour for fixed-size icons */
.header-social svg, .footer-brand-social svg, .g-rating-mark, .nav-toggle svg,
.ico svg, .caret { height: auto; }
/* Form fields: prevent iOS auto-zoom (must be >= 16px) and ensure tap targets */
@media (max-width: 720px) {
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], textarea, select {
font-size: 16px !important;
min-height: 44px;
}
textarea { min-height: 100px; }
button, .btn, [role="button"] { min-height: 44px; }
}
/* Hero typography: clamp on small screens */
@media (max-width: 720px) {
.page-hero { padding-top: 60px; padding-bottom: 36px; }
.page-hero h1 {
font-size: clamp(28px, 7.5vw, 36px) !important;
line-height: 1.15 !important;
}
.page-hero .lead, .page-hero p {
font-size: 15.5px;
line-height: 1.55;
}
.crumbs { font-size: 12.5px; margin-bottom: 16px; }
h1 { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.15; }
h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
h3 { font-size: clamp(17px, 4.5vw, 20px); }
.lead { font-size: 16px; line-height: 1.6; }
/* Tame section padding */
.section { padding-top: 48px; padding-bottom: 48px; }
.section-tight { padding-top: 32px; padding-bottom: 32px; }
.section-alt { padding-top: 48px; padding-bottom: 48px; }
/* Container gutter slightly tighter */
.container { padding-left: 18px; padding-right: 18px; }
}
/* Even tighter at <480 (small phones, foldables) */
@media (max-width: 480px) {
.page-hero { padding-top: 40px; padding-bottom: 28px; }
.section, .section-alt { padding-top: 40px; padding-bottom: 40px; }
.container { padding-left: 16px; padding-right: 16px; }
.audience-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.audience-row .chip { padding: 14px 8px; font-size: 13px; }
}
/* Buttons: full-width-ish on mobile for clear tap targets */
@media (max-width: 720px) {
.cta-banner .actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cta-banner .actions .btn { width: 100%; justify-content: center; }
.btn { padding: 12px 20px; font-size: 15px; }
}
/* Section-head: stack on mobile (was side-by-side title + paragraph) */
@media (max-width: 720px) {
.section-head {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.section-head p { font-size: 15px; }
}
/* Cards: more breathing room on mobile */
@media (max-width: 720px) {
.card { padding: 22px 20px; }
.card h3 { font-size: 18px; }
.card p { font-size: 14.5px; line-height: 1.55; }
.ico { width: 42px; height: 42px; }
.ico svg { width: 22px; height: 22px; }
}
/* Industries hub: 2-up on tablet, 1-up on phone (already in scoped CSS,
reinforced here for spec consistency) */
@media (max-width: 480px) {
.ind-grid { grid-template-columns: 1fr; gap: 14px; }
.ind-card { padding: 22px 20px; }
}
/* Sector pricing tiers: full visual breathing on phone */
@media (max-width: 880px) {
.sector-pricing { grid-template-columns: 1fr; gap: 16px; }
.tier { padding: 24px 22px; }
.tier-name { font-size: 20px; }
.tier-price { font-size: 26px; }
.tier-features { font-size: 14px; }
.tier-badge { position: relative; top: auto; right: auto; align-self: flex-start; margin-bottom: 4px; }
}
/* Sector pain points: single column on phone */
@media (max-width: 720px) {
.sector-pains { grid-template-columns: 1fr; gap: 10px; }
.sector-pain { padding: 14px 16px; font-size: 14px; }
}
/* FAQ accordion: bigger tap target, bigger summary text on phone */
@media (max-width: 720px) {
.ab-faq summary {
padding: 18px 18px; font-size: 16px; min-height: 56px;
}
.ab-faq details > div {
padding: 0 18px 18px; font-size: 14.5px;
}
}
/* Process step cards: real spacing on phone */
@media (max-width: 720px) {
.ab-process { gap: 14px; }
.ab-process > li { padding: 20px 18px; }
.ab-process h3 { font-size: 18px; }
.ab-stats { gap: 12px; }
.ab-stat { padding: 22px 20px; }
.ab-stat-num { font-size: clamp(30px, 8vw, 42px); }
.ab-stat-label { font-size: 13px; }
}
/* Comparison columns: stack with clear separation */
@media (max-width: 780px) {
.ab-compare { gap: 14px; }
.ab-col { padding: 24px 22px; }
.ab-col li { font-size: 14px; }
}
/* Reach (Canada/US/Worldwide) cards: stack with more breathing */
@media (max-width: 780px) {
.ab-reach { gap: 14px; }
.ab-reach-card { padding: 24px 22px; }
.ab-reach-card h3 { font-size: 19px; }
.ab-reach-card p { font-size: 14.5px; }
}
/* Pull-quote */
@media (max-width: 600px) {
.ab-pullquote {
padding: 32px 24px; border-radius: 16px; margin-top: 24px;
}
.ab-pullquote blockquote { font-size: 19px !important; }
.ab-pullquote blockquote::before { font-size: 50px; }
}
/* Contact page: aside info-items in single column */
@media (max-width: 720px) {
.contact-grid { grid-template-columns: 1fr !important; gap: 28px; }
.contact-info { order: 2; }
.info-item { padding: 16px; }
.info-item .ico { width: 38px; height: 38px; flex-shrink: 0; }
.info-item strong { font-size: 13.5px; }
.info-item span { font-size: 13.5px; word-break: break-word; }
}
/* Footer NAP + bottom: stack neatly */
@media (max-width: 720px) {
.footer-nap { flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer h4 { font-size: 12px; }
.site-footer ul li { font-size: 14px; }
.brand-block-row { flex-direction: column; gap: 18px; align-items: flex-start; }
.footer-brand-social { gap: 8px; flex-wrap: wrap; }
.footer-brand-social a {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
}
.footer-brand-social a svg { width: 18px; height: 18px; }
.footer-contact-list a { font-size: 14px; }
}
/* Cookie banner: stack actions on phone */
@media (max-width: 720px) {
.cookie-banner { padding: 16px; left: 8px; right: 8px; bottom: 8px; }
.cookie-banner p { font-size: 13.5px; }
.cookie-actions { display: flex; gap: 8px; flex-direction: row; }
.cookie-actions .btn { flex: 1; padding: 10px 14px; font-size: 13.5px; }
}
/* Submenu (desktop) display fix when missing px */
.submenu a strong, .submenu a small { display: block; }
/* Skip link / a11y focus visibility (mobile-friendly) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--color-accent, #fe9300);
outline-offset: 2px;
border-radius: 4px;
}
/* Header nav layout on mobile: keep brand + g-rating + icons + toggle visible */
@media (max-width: 720px) {
.nav { flex-wrap: nowrap; }
.brand img { width: 160px; height: auto; }
.nav-cta { gap: 6px; }
.g-rating { padding: 7px 10px; gap: 4px; }
.g-rating-mark { width: 16px; height: 16px; }
.g-rating-score { font-size: 13.5px; }
/* Swap desktop bits for mobile bits inside the pill */
.g-rating-score-decimal { display: none; }
.g-rating-stars { display: none; }
.g-rating-label { display: none; }
.g-rating-star-mobile {
display: inline-block; flex-shrink: 0;
width: 14px; height: 14px;
}
.g-rating-label-mobile {
display: inline; color: #555; font-size: 13px; font-weight: 500;
}
}
@media (max-width: 480px) {
.brand img { width: 140px; }
.g-rating-stars { display: none; }
.g-rating { padding: 6px 9px; }
.header-social { gap: 6px; }
.header-social a { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
.brand img { width: 120px; }
.g-rating { padding: 5px 8px; }
.g-rating-mark { width: 14px; height: 14px; }
.g-rating-score { font-size: 13px; }
.header-social { gap: 4px; }
.header-social a { width: 32px; height: 32px; }
.header-social a svg { width: 16px; height: 16px; }
}
/* ============================================================
V28 ENTERPRISE UPGRADE — Premium B2B styling
Applied site-wide for sophisticated, enterprise-ready feel
============================================================ */
/* --- Refined typography for blog articles --- */
.blog-article h1,
.blog-article h2,
.blog-article h3 {
font-family: "Bricolage Grotesque", Georgia, serif;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.blog-article h2 {
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.25;
margin-top: 44px;
margin-bottom: 14px;
font-weight: 700;
}
.blog-article h3 {
font-size: clamp(18px, 2vw, 22px);
line-height: 1.3;
margin-top: 32px;
margin-bottom: 10px;
font-weight: 700;
}
.blog-article p {
margin-bottom: 18px;
color: var(--color-ink);
}
.blog-article p:first-of-type {
font-size: 18px;
line-height: 1.7;
color: var(--color-ink);
}
.blog-article ul,
.blog-article ol {
margin: 14px 0 22px;
padding-left: 26px;
}
.blog-article ul li,
.blog-article ol li {
margin-bottom: 8px;
line-height: 1.65;
}
.blog-article strong { color: var(--color-ink); font-weight: 700; }
/* --- Smaller, refined blog post hero --- */
.blog-hero {
padding-top: clamp(40px, 6vw, 70px);
padding-bottom: clamp(28px, 4vw, 40px);
}
.blog-hero h1 {
font-size: clamp(24px, 3.2vw, 36px);
line-height: 1.2;
letter-spacing: -0.015em;
margin-top: 14px;
font-weight: 700;
max-width: 760px;
}
.blog-hero .lead {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6;
margin-top: 16px;
max-width: 680px;
color: var(--color-ink-soft);
}
.blog-hero .meta-strip {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
margin-top: 22px;
font-size: 12.5px;
color: var(--color-muted);
padding-top: 18px;
border-top: 1px solid var(--color-line);
}
.blog-hero .meta-strip .dot { color: var(--color-line); }
.blog-hero .meta-strip strong { color: var(--color-ink); font-weight: 600; }
.blog-hero .meta-strip .author-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--color-accent); color: #0a0a0a;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Bricolage Grotesque", Georgia, serif;
font-weight: 800; font-size: 12px;
}
/* --- Author bio card --- */
.author-bio {
display: flex;
gap: 16px;
padding: 20px 22px;
background: var(--color-bg-alt);
border: 1px solid var(--color-line);
border-radius: 14px;
margin: 40px 0 32px;
align-items: center;
}
.author-bio .avatar {
width: 56px; height: 56px; border-radius: 50%;
background: var(--color-accent); color: #0a0a0a;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Bricolage Grotesque", Georgia, serif;
font-weight: 800; font-size: 20px;
flex-shrink: 0;
}
.author-bio .info { font-size: 14px; line-height: 1.5; }
.author-bio .info strong { display: block; color: var(--color-ink); font-size: 15px; margin-bottom: 2px; }
.author-bio .info span { color: var(--color-muted); }
/* --- Stats highlight bar --- */
.stats-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
border-radius: 16px;
overflow: hidden;
margin: 36px 0;
border: 1px solid #1f1f1f;
}
.stats-strip .stat {
padding: 24px 22px;
border-right: 1px solid #1f1f1f;
text-align: left;
}
.stats-strip .stat:last-child { border-right: none; }
.stats-strip .stat .num {
font-family: "Bricolage Grotesque", Georgia, serif;
font-size: clamp(28px, 3.6vw, 38px);
font-weight: 800;
line-height: 1;
color: var(--color-accent);
letter-spacing: -0.02em;
display: block;
}
.stats-strip .stat .label {
display: block;
font-size: 12px;
color: #c8c5be;
margin-top: 8px;
line-height: 1.4;
letter-spacing: 0.01em;
}
@media (max-width: 700px) {
.stats-strip { grid-template-columns: 1fr 1fr; }
.stats-strip .stat:nth-child(2n) { border-right: none; }
.stats-strip .stat:nth-child(-n+2) { border-bottom: 1px solid #1f1f1f; }
}
/* --- Mid-content lead-gen CTA --- */
.mid-cta {
background: linear-gradient(135deg, #fff8ed 0%, #ffeed0 100%);
border: 1px solid #f5d896;
border-radius: 16px;
padding: 26px 28px;
margin: 36px 0;
display: flex;
gap: 22px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.mid-cta .left { flex: 1 1 320px; }
.mid-cta .left .eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: #b56600; margin-bottom: 6px; display: block;
}
.mid-cta .left h3 {
margin: 0 0 6px;
font-size: 19px; line-height: 1.3;
color: var(--color-ink); font-weight: 700;
}
.mid-cta .left p {
margin: 0;
font-size: 14.5px; line-height: 1.55;
color: #5c4115;
}
.mid-cta .actions {
display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
}
.mid-cta .btn-primary {
background: #0a0a0a; color: #fff; border: none;
padding: 12px 22px; border-radius: 999px;
font-size: 14px; font-weight: 600;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: all 0.15s ease;
}
.mid-cta .btn-primary:hover {
background: var(--color-accent); color: #0a0a0a;
}
/* --- Pull quote --- */
.pull-quote {
border-left: 4px solid var(--color-accent);
padding: 8px 0 8px 24px;
margin: 32px 0;
font-family: "Bricolage Grotesque", Georgia, serif;
font-size: clamp(19px, 2.2vw, 24px);
line-height: 1.4;
color: var(--color-ink);
font-weight: 600;
font-style: italic;
letter-spacing: -0.01em;
}
.pull-quote cite {
display: block;
font-style: normal;
font-family: "Geist", sans-serif;
font-size: 13px;
color: var(--color-muted);
font-weight: 500;
margin-top: 10px;
letter-spacing: 0.02em;
}
/* --- Insight callout --- */
.insight-box {
background: #f4f7fb;
border: 1px solid #d8e1ec;
border-radius: 14px;
padding: 22px 26px;
margin: 28px 0;
position: relative;
}
.insight-box::before {
content: "💡";
font-size: 24px;
position: absolute;
top: 18px; left: 22px;
}
.insight-box .label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #2563a5;
margin-bottom: 8px;
padding-left: 38px;
}
.insight-box p {
margin: 0;
padding-left: 38px;
font-size: 15px;
line-height: 1.6;
color: #0d2a4b;
}
/* --- FAQ section --- */
.faq-section {
margin: 48px 0 32px;
padding-top: 36px;
border-top: 1px solid var(--color-line);
}
.faq-section h2 {
font-size: clamp(22px, 2.4vw, 28px);
margin-bottom: 8px;
}
.faq-section .faq-sub {
font-size: 14.5px;
color: var(--color-muted);
margin-bottom: 24px;
}
.faq-item {
border-bottom: 1px solid var(--color-line);
padding: 18px 0;
}
.faq-item:first-of-type { border-top: 1px solid var(--color-line); }
.faq-item summary {
cursor: pointer;
font-weight: 600;
font-size: 16px;
color: var(--color-ink);
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-right: 8px;
line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-size: 24px;
font-weight: 400;
color: var(--color-accent);
margin-left: 12px;
flex-shrink: 0;
line-height: 1;
transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--color-accent); }
.faq-item .answer {
padding-top: 12px;
font-size: 15px;
line-height: 1.65;
color: var(--color-ink-soft);
}
.faq-item .answer p { margin-bottom: 10px; }
.faq-item .answer p:last-child { margin-bottom: 0; }
/* --- Trust signals strip (above footer or in CTAs) --- */
.trust-strip {
display: flex;
gap: 28px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 18px 24px;
background: var(--color-bg-alt);
border-radius: 14px;
margin: 32px 0;
font-size: 13px;
color: var(--color-muted);
}
.trust-strip .item {
display: flex; align-items: center; gap: 8px;
}
.trust-strip .item svg { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; }
.trust-strip .item strong { color: var(--color-ink); font-weight: 600; }
/* --- Lead-capture CTA at end of article --- */
.lead-cta {
background: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%);
border-radius: 20px;
padding: clamp(28px, 4vw, 48px);
margin: 48px 0 24px;
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.lead-cta::before {
content: "";
position: absolute;
top: -50%; right: -20%;
width: 60%; height: 200%;
background: radial-gradient(circle, rgba(254,147,0,0.15) 0%, transparent 60%);
pointer-events: none;
}
.lead-cta .eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
display: inline-block;
padding: 6px 14px;
border: 1px solid rgba(254,147,0,0.4);
border-radius: 999px;
margin-bottom: 18px;
position: relative;
}
.lead-cta h2 {
font-family: "Bricolage Grotesque", Georgia, serif;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.25;
font-weight: 700;
margin: 0 0 14px;
letter-spacing: -0.015em;
color: #fff;
position: relative;
}
.lead-cta p {
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.6;
margin: 0 auto 24px;
max-width: 580px;
color: #c8c5be;
position: relative;
}
.lead-cta .actions {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
position: relative;
}
.lead-cta .btn-primary {
background: var(--color-accent); color: #0a0a0a;
padding: 14px 26px; border-radius: 999px;
font-size: 14.5px; font-weight: 700;
text-decoration: none;
display: inline-flex; align-items: center; gap: 10px;
transition: all 0.15s ease;
}
.lead-cta .btn-primary:hover {
background: #fff; transform: translateY(-1px);
}
.lead-cta .btn-secondary {
background: transparent; color: #fff;
padding: 14px 24px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.2);
font-size: 14.5px; font-weight: 600;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: all 0.15s ease;
}
.lead-cta .btn-secondary:hover {
background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4);
}
.lead-cta .quick-stats {
display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
margin-top: 24px;
font-size: 12.5px; color: #c8c5be;
position: relative;
}
.lead-cta .quick-stats span {
display: inline-flex; align-items: center; gap: 6px;
}
.lead-cta .quick-stats svg { width: 14px; height: 14px; color: var(--color-accent); }
/* --- Related articles --- */
.related-articles {
margin: 48px 0 24px;
padding-top: 36px;
border-top: 1px solid var(--color-line);
}
.related-articles h2 {
font-size: clamp(20px, 2.2vw, 24px);
margin-bottom: 18px;
}
.related-articles .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.related-articles .card {
display: block;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 12px;
text-decoration: none;
transition: all 0.18s ease;
}
.related-articles .card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
.related-articles .card .tag {
display: inline-block;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 10px;
}
.related-articles .card h3 {
font-size: 15.5px; line-height: 1.35;
color: var(--color-ink); margin: 0 0 8px;
font-weight: 600;
}
.related-articles .card .read {
font-size: 12.5px; color: var(--color-muted); display: inline-block;
}
/* --- Reading progress bar --- */
.reading-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0%;
background: var(--color-accent);
z-index: 9999;
transition: width 0.1s ease-out;
}
/* --- Improved blog index filter bar --- */
.filter-bar { gap: 8px; }
.filter-btn {
font-weight: 500;
font-size: 12.5px;
padding: 7px 14px;
}
.filter-btn .count {
font-size: 10.5px;
font-weight: 700;
}
/* --- Premium polish for blog cards --- */
.blog-card {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.blog-card .body h3 {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
letter-spacing: -0.005em;
}
/* --- Blog pagination --- */
.blog-pagination {
display: flex;
gap: 6px;
align-items: center;
justify-content: center;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--color-line);
}
.page-arrow,
.page-num {
background: transparent;
border: 1px solid var(--color-line);
color: var(--color-ink-soft);
width: 38px; height: 38px;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
padding: 0;
}
.page-arrow svg { width: 16px; height: 16px; }
.page-arrow:hover:not(:disabled),
.page-num:hover:not(.is-active) {
border-color: var(--color-accent);
color: var(--color-ink);
}
.page-arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.page-num.is-active {
background: var(--color-ink);
border-color: var(--color-ink);
color: #fff;
}
.page-numbers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
/* ============================================================
Mobile contact bar (phone, WhatsApp, map) inside hamburger menu
- Hidden by default (desktop shows them in .header-social)
- On mobile (max-width:720px): hide .header-social, show as first li
============================================================ */
.nav-mobile-contacts { display: none !important; }
/* Contact icons (Call · WhatsApp · Map) as the FIRST item in the hamburger
drawer on ALL viewports — desktop, tablet, mobile. */
.nav.open .nav-menu .nav-mobile-contacts {
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: space-around;
gap: 8px;
padding: 12px 8px;
border-bottom: 1px solid var(--color-line);
margin: 0 -12px 6px;
background: var(--color-bg-alt, #fafafa);
border-radius: 12px;
}
.nav.open .nav-menu .nav-mobile-contacts a {
flex: 1;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 6px;
color: var(--color-ink);
text-decoration: none;
font-size: 12px;
font-weight: 600;
border-radius: 10px;
background: #ffffff;
border: 1px solid var(--color-line);
transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
min-height: 56px;
}
.nav.open .nav-menu .nav-mobile-contacts a:hover,
.nav.open .nav-menu .nav-mobile-contacts a:active {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-1px);
}
.nav.open .nav-menu .nav-mobile-contacts a svg {
width: 18px; height: 18px;
}
.nav.open .nav-menu .nav-mobile-contacts a span {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
/* Hide the topbar icons on mobile, only Google rating stays */
.nav-cta .header-social { display: none; }
}
/* -------- MSP page: services grid (right column of What You Get) -------- */
.msp-services-grid{
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
}
.msp-services-grid li{
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--color-dark);
padding: 14px 16px 14px 38px;
background: #fafafa;
border: 1px solid var(--color-line);
border-radius: 10px;
position: relative;
line-height: 1.3;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.msp-services-grid li:hover{
background: #fff;
border-color: var(--color-accent);
transform: translateY(-1px);
}
.msp-services-grid li::before{
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: inset 0 0 0 3px #fff;
}
@media (max-width: 720px){
.msp-services-grid{ grid-template-columns: 1fr; }
.msp-services-grid li{ font-size: 15px; padding: 12px 14px 12px 36px; }
}
/* -------- Accessibility / Compliance helpers -------- */
.sr-only{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
.skip-link:focus{
position:fixed !important;
left:16px !important;
top:16px !important;
width:auto !important;
height:auto !important;
padding:10px 16px !important;
background:#fff !important;
color:#000 !important;
border:2px solid var(--color-accent) !important;
border-radius:6px !important;
z-index:9999 !important;
font-weight:600 !important;
}
/* Granular cookie banner */
.cookie-banner-categories{
margin-top: 12px;
padding: 12px 14px;
border: 1px solid #2a2a2a;
border-radius: 10px;
background: #161616;
}
.cookie-cat{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed #2a2a2a;
cursor: pointer;
}
.cookie-cat:last-child{ border-bottom: none; }
.cookie-cat input[type="checkbox"]{
width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--color-accent);
}
.cookie-cat input[disabled]{ cursor: not-allowed; opacity: 0.7; }
.cookie-cat span{ display: block; line-height: 1.4; font-size: 13.5px; }
.cookie-cat span strong{ display: block; color: #fff; font-size: 13.5px; }
.cookie-cat span small{ display: block; color: #aaa; font-size: 12px; margin-top: 2px; }
.cookie-actions{ flex-wrap: wrap; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.flashcard, .flashcard-inner{ transition: none !important; }
.lottie-anim{ display: none !important; }
}
/* ============================================================
Language switcher (EN/FR/ES)
============================================================ */
.lang-switcher {
position: relative;
display: inline-flex;
align-items: center;
}
.lang-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 12px;
border-radius: 999px;
background: #fff;
border: 1.5px solid var(--color-line, #ececec);
color: var(--color-ink, #111);
font-family: var(--font-body, 'Geist', sans-serif);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
line-height: 1;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lang-trigger:hover {
border-color: var(--color-accent, #fe9300);
transform: translateY(-1px);
box-shadow: 0 8px 18px -10px rgba(0,0,0,.22);
}
.lang-trigger:focus-visible {
outline: 2px solid var(--color-accent, #fe9300);
outline-offset: 2px;
}
.lang-globe {
width: 16px; height: 16px; flex-shrink: 0;
color: var(--color-accent, #fe9300);
}
.lang-current {
font-weight: 700;
letter-spacing: 0.04em;
}
.lang-caret {
width: 12px; height: 12px; flex-shrink: 0;
transition: transform .2s ease;
}
.lang-trigger[aria-expanded="true"] .lang-caret {
transform: rotate(180deg);
}
.lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 160px;
background: #fff;
border: 1px solid var(--color-line, #ececec);
border-radius: 12px;
padding: 6px;
margin: 0;
list-style: none;
box-shadow: 0 12px 32px -8px rgba(0,0,0,.18), 0 2px 6px -2px rgba(0,0,0,.08);
z-index: 200;
}
.lang-menu li { margin: 0; }
.lang-menu button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
font-family: var(--font-body, 'Geist', sans-serif);
font-size: 14px;
color: var(--color-ink, #111);
text-align: left;
transition: background .15s ease;
}
.lang-menu button:hover,
.lang-menu button:focus-visible {
background: #fafafa;
outline: none;
}
.lang-menu button[aria-selected="true"] {
background: rgba(254, 147, 0, 0.08);
color: var(--color-accent, #fe9300);
font-weight: 600;
}
.lang-menu .lang-code {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 3px 7px;
border-radius: 5px;
background: #f0f0f0;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
}
.lang-menu button[aria-selected="true"] .lang-code {
background: var(--color-accent, #fe9300);
color: #fff;
}
.lang-menu .lang-name { font-size: 14px; }
@media (max-width: 720px) {
.lang-trigger { padding: 7px 10px; font-size: 12.5px; gap: 4px; }
.lang-globe { width: 14px; height: 14px; }
.lang-caret { width: 10px; height: 10px; }
.lang-menu { right: -10px; min-width: 140px; }
}
@media (max-width: 480px) {
.lang-trigger { padding: 6px 9px; }
.lang-current { font-size: 12px; }
}
/* In-page translation banner for non-English locales */
.lang-banner {
background: #fffbf4;
border-bottom: 1px solid #fde2bc;
color: #6a4400;
font-size: 13.5px;
padding: 10px 16px;
text-align: center;
line-height: 1.5;
}
.lang-banner a {
color: var(--color-accent, #fe9300);
font-weight: 600;
text-decoration: underline;
}
.lang-banner .lang-banner-close {
background: none; border: none; color: inherit;
font-size: 18px; line-height: 1; margin-left: 10px;
cursor: pointer; padding: 0 4px;
}
/* ============================================================
Google Translate accommodation: let Google's "Translated." top
bar show normally, and push our sticky header below it so the
navigation menu remains visible after translation.
============================================================ */
/* Only the spinner-icon, tooltip and the (unused) inline gadget are
hidden — the official "Translated." banner stays visible. */
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-spinner-pos,
.goog-te-balloon-frame {
display: none !important;
}
/* Google injects an inline `top:40px` on when its bar is active.
We KEEP that offset so the bar can occupy its space, then push our
sticky header down by the bar height (40px in Google's default UI). */
html.translated-ltr .site-header,
html.translated-rtl .site-header {
top: 40px !important;
}
/* Make sure the Google banner sits above all our overlays except modals */
.goog-te-banner-frame.skiptranslate {
z-index: 1100 !important;
}
/* Hide the hidden trigger gadget container (we drive translation via the cookie) */
.goog-te-gadget { color: transparent !important; font-size: 0 !important; height: 0 !important; }
.goog-te-gadget * { font-size: 0 !important; color: transparent !important; }
#google_translate_element {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* ============================================================
French-translated content typography optimization
French strings are 15–30% longer than English. Adjust spacing,
nav, button text and hero so the layout never breaks.
============================================================ */
html[lang^="fr"] .nav-menu > li > a.nav-link {
padding-left: 10px;
padding-right: 10px;
font-size: 14.2px;
}
html[lang^="fr"] .submenu strong { font-size: 14px; line-height: 1.25; }
html[lang^="fr"] .submenu small { font-size: 11.5px; line-height: 1.35; display: block; margin-top: 2px; }
html[lang^="fr"] .submenu a { padding: 10px 12px; }
html[lang^="fr"] .btn,
html[lang^="fr"] .nav-cta .btn { letter-spacing: 0; white-space: normal; line-height: 1.2; }
html[lang^="fr"] .hero-v2-h1 { font-size: clamp(34px, 6.4vw, 64px); line-height: 1.06; }
html[lang^="fr"] .hero-v2-lead { font-size: 17.5px; line-height: 1.55; }
html[lang^="fr"] .tier-name { font-size: 12.5px; }
html[lang^="fr"] .tier h3 { font-size: 18px; line-height: 1.25; }
html[lang^="fr"] .tier-price-suffix { font-size: 12px; }
html[lang^="fr"] .tier ul li { font-size: 13.8px; line-height: 1.45; }
html[lang^="fr"] .card h3 { font-size: 17.5px; line-height: 1.25; }
html[lang^="fr"] .card p { font-size: 14px; line-height: 1.5; }
html[lang^="fr"] .step h4 { font-size: 16px; line-height: 1.25; }
html[lang^="fr"] .footer-grid h4 { font-size: 14px; letter-spacing: .08em; }
html[lang^="fr"] .footer-grid a { font-size: 13.5px; line-height: 1.7; }
html[lang^="fr"] .footer-bottom { font-size: 12px; }
html[lang^="fr"] .footer-compliance { font-size: 11.5px; line-height: 1.55; }
html[lang^="fr"] .crumbs { font-size: 12.5px; }
html[lang^="fr"] .eyebrow { font-size: 11.5px; letter-spacing: .12em; }
html[lang^="fr"] .lang-trigger { padding: 9px 11px; }
/* Header layout: French shrinks nav slightly so the row stays on one line */
@media (min-width: 1100px) {
html[lang^="fr"] .site-header .container { gap: 14px; }
html[lang^="fr"] .nav-menu { gap: 4px; }
}
/* Flashcard questions in French — keep readable but allow wrap */
html[lang^="fr"] .flashcard-q { font-size: 17px; line-height: 1.2; }
@media (max-width: 720px) {
html[lang^="fr"] .flashcard-q { font-size: 16px; }
html[lang^="fr"] .hero-v2-h1 { font-size: clamp(30px, 9vw, 46px); }
}
/* Don't translate critical structural / brand strings */
.notranslate,
.brand-name,
.g-rating,
.g-rating-score,
.g-rating-label-mobile,
.lang-trigger,
.lang-menu { /* class is a marker only */ }
/* ============================================================
Accessibility switcher (header button + dropdown panel)
============================================================ */
.a11y-switcher { position: relative; display: inline-flex; align-items: center; }
.a11y-trigger {
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid var(--color-line);
background: #fff; color: var(--color-accent);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
flex-shrink: 0;
}
.a11y-trigger:hover {
border-color: var(--color-accent);
transform: translateY(-1px);
box-shadow: 0 8px 18px -10px rgba(0,0,0,.22);
}
.a11y-trigger:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.a11y-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 280px;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 12px 32px -8px rgba(0,0,0,.18);
z-index: 200;
}
.a11y-panel h3 {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--color-ink);
font-family: var(--font-display);
}
.a11y-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f4f4f4;
}
.a11y-row:last-child { border-bottom: none; }
.a11y-label {
font-size: 13px;
color: var(--color-ink);
font-weight: 500;
}
.a11y-btn-group {
display: inline-flex;
border: 1px solid var(--color-line);
border-radius: 8px;
overflow: hidden;
}
.a11y-btn-group button {
width: 36px; height: 30px;
border: none;
background: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
border-right: 1px solid var(--color-line);
transition: background .15s ease;
}
.a11y-btn-group button:last-child { border-right: none; }
.a11y-btn-group button:hover {
background: rgba(254,147,0,0.08);
color: var(--color-accent);
}
.a11y-toggle {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
color: var(--color-ink);
cursor: pointer;
width: 100%;
}
.a11y-toggle input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--color-accent);
flex-shrink: 0;
cursor: pointer;
}
.a11y-reset {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--color-line);
background: #fafafa;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.a11y-reset:hover {
background: #fff;
border-color: var(--color-accent);
color: var(--color-accent);
}
.a11y-footer {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid #f4f4f4;
border-bottom: none !important;
}
.a11y-footer a {
font-size: 12.5px;
color: var(--color-accent);
font-weight: 600;
text-decoration: none;
}
.a11y-footer a:hover { text-decoration: underline; }
@media (max-width: 720px) {
.a11y-trigger { width: 34px; height: 34px; }
.a11y-trigger svg { width: 18px; height: 18px; }
.a11y-panel { width: calc(100vw - 24px); max-width: 320px; right: -8px; }
}
/* ============================================================
Accessibility user-settings (applied via data-attributes on )
============================================================ */
html[data-a11y-text="larger"] body { font-size: 110%; }
html[data-a11y-text="largest"] body { font-size: 125%; }
html[data-a11y-text="smaller"] body { font-size: 92%; }
html[data-a11y-contrast="on"] body {
background: #000;
color: #fff;
}
html[data-a11y-contrast="on"] .site-header,
html[data-a11y-contrast="on"] .footer-bottom,
html[data-a11y-contrast="on"] section,
html[data-a11y-contrast="on"] .card,
html[data-a11y-contrast="on"] .tier,
html[data-a11y-contrast="on"] .login-card,
html[data-a11y-contrast="on"] .dash-card,
html[data-a11y-contrast="on"] .submenu,
html[data-a11y-contrast="on"] .cookie-banner {
background: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
html[data-a11y-contrast="on"] a,
html[data-a11y-contrast="on"] .nav-link,
html[data-a11y-contrast="on"] .footer-grid a,
html[data-a11y-contrast="on"] .more {
color: #fff !important;
}
html[data-a11y-contrast="on"] strong,
html[data-a11y-contrast="on"] em,
html[data-a11y-contrast="on"] h1,
html[data-a11y-contrast="on"] h2,
html[data-a11y-contrast="on"] h3 {
color: #ffd380 !important;
}
html[data-a11y-contrast="on"] .btn-primary {
background: #fff !important;
color: #000 !important;
border: 2px solid #fff !important;
}
html[data-a11y-contrast="on"] .btn-ghost,
html[data-a11y-contrast="on"] .btn-light {
background: transparent !important;
color: #fff !important;
border: 2px solid #fff !important;
}
html[data-a11y-contrast="on"] input,
html[data-a11y-contrast="on"] textarea,
html[data-a11y-contrast="on"] select {
background: #000 !important;
color: #fff !important;
border: 1.5px solid #fff !important;
}
html[data-a11y-font="dyslexia"] body,
html[data-a11y-font="dyslexia"] * {
font-family: 'Comic Sans MS', 'Trebuchet MS', Verdana, Tahoma, sans-serif !important;
letter-spacing: 0.02em !important;
line-height: 1.7 !important;
}
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html[data-a11y-motion="off"] .lottie-anim { display: none !important; }
html[data-a11y-links="underline"] a {
text-decoration: underline !important;
}
/* ============================================================
Header responsive layout — mobile + tablet refinements
============================================================ */
.site-header .nav-cta {
flex-wrap: nowrap;
}
.site-header .nav {
flex-wrap: nowrap;
gap: 14px;
}
/* Hide header-social icons (the contact icon row in nav-cta) on mobile —
they appear inside the hamburger drawer instead */
@media (max-width: 720px) {
.site-header .header-social { display: none; }
}
@media (max-width: 540px) {
.nav-cta { gap: 6px; }
.g-rating { padding: 6px 9px; gap: 5px; }
.g-rating-score { font-size: 13px; }
.g-rating-mark { width: 14px; height: 14px; }
.g-rating-star-mobile { width: 12px; height: 12px; }
.lang-trigger { padding: 6px 8px; }
.lang-current { font-size: 11.5px; }
.a11y-trigger { width: 32px; height: 32px; }
.a11y-trigger svg { width: 16px; height: 16px; }
.nav-toggle { width: 38px; height: 38px; }
}
@media (max-width: 420px) {
.nav-cta { gap: 4px; }
.brand img { height: 38px; }
.g-rating { padding: 5px 7px; font-size: 11px; }
.g-rating-score { font-size: 12px; }
/* On the smallest screens we can hide the Google G icon and just show "5★" */
.g-rating-mark { display: none; }
.lang-trigger { padding: 5px 7px; }
.lang-globe { width: 12px; height: 12px; }
.lang-caret { width: 9px; height: 9px; }
.a11y-trigger { width: 30px; height: 30px; }
.a11y-trigger svg { width: 15px; height: 15px; }
.nav-toggle { width: 36px; height: 36px; }
}
/* Better-looking drawer for desktop/tablet (constrains width like a card) */
@media (min-width: 721px) {
.nav.open .nav-menu {
left: auto;
right: var(--gutter, 24px);
width: 380px;
max-width: calc(100vw - 32px);
border-radius: 14px;
border: 1px solid var(--color-line);
margin-top: 6px;
padding: 14px 16px 20px;
box-shadow: 0 20px 50px -16px rgba(0,0,0,.22);
}
}
/* On very wide screens nav contacts in drawer not needed */
@media (min-width: 1100px) {
.nav.open .nav-menu { width: 420px; }
}
/* ============================================================
Mobile audit pass — additional safety rules for very small screens
============================================================ */
@media (max-width: 720px) {
/* Prevent pre/code blocks from causing horizontal scroll */
pre, code { max-width: 100%; word-wrap: break-word; overflow-wrap: anywhere; }
/* Tables become horizontally scrollable rather than overflow the page */
table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Long unbroken strings (URLs, emails) wrap */
a, p, span, h1, h2, h3, h4, li { overflow-wrap: anywhere; word-break: break-word; }
/* Section padding is tighter on phones */
.section { padding: 48px 0; }
/* Container gutter for small phones */
.container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
/* Even tighter on the smallest screens */
.section { padding: 36px 0; }
.container { padding-left: 14px; padding-right: 14px; }
/* Headings */
h1 { font-size: clamp(28px, 8vw, 38px); }
h2 { font-size: clamp(24px, 7vw, 32px); }
/* Buttons stack on tiny screens */
.hero-v2-cta, .cta-banner .actions { flex-direction: column; align-items: stretch; gap: 10px; }
.hero-v2-cta .btn, .cta-banner .actions .btn { width: 100%; text-align: center; justify-content: center; }
/* Pricing tier card padding */
.tier { padding: 22px 18px; }
/* Card padding */
.card { padding: 18px; }
}
/* Make sure the flip-card 3D rotation works even on very small screens by
guaranteeing enough perspective room */
@media (max-width: 420px) {
.hero-fc-deck .flashcard { min-height: 220px; perspective: 900px; }
.flashcard-inner { transform-origin: center center; }
}