/* =====================================================================
Prime View Studio — main.css
Full visual stylesheet. Structured as:
1. Reset / Normalize
2. Design tokens (custom properties)
3. Base typography + a11y utilities
4. Layout primitives (container, sections)
5. Reusable primitives (buttons, badges, cards)
6. Header
7. Footer + floating chat
8. Placeholder blocks
9. Homepage sections (hero, ai demo, services, workflow,
capabilities, transformation, industries, portfolio, about,
testimonials, whatsapp cta, insights, contact)
10. Interior pages (blog, page, single, archive, 404, comments)
11. Responsive
===================================================================== */
/* ---------------------------------------------------------------------
1. Reset / Normalize
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
img, picture, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
@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;
}
}
/* ---------------------------------------------------------------------
2. Design tokens
Brand colors are injected inline by inc/customizer.php for
--pvs-primary and --pvs-secondary; the rest live here.
------------------------------------------------------------------ */
:root {
/* Colors */
--pvs-primary: #1e3a56;
--pvs-primary-dark: #142a3f;
--pvs-primary-darker: #0f2337;
--pvs-secondary: #f57826;
--pvs-secondary-alt: #ef8c26;
--pvs-bg: #ffffff;
--pvs-bg-alt: #f6f7f9;
--pvs-bg-soft: #eef1f4;
--pvs-bg-dark: #0f2337;
--pvs-bg-darker: #0a1a29;
--pvs-text: #111827;
--pvs-text-muted: #6b7280;
--pvs-text-invert: #ffffff;
--pvs-text-invert-muted: #a7b3c1;
--pvs-border: #e5e7eb;
--pvs-border-dark: rgba(255, 255, 255, 0.08);
--pvs-whatsapp: #25d366;
--pvs-whatsapp-dark: #128c7e;
--pvs-star: #f5b400;
/* Type */
--pvs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--pvs-font-display: 'Playfair Display', 'Inter', serif; /* editorial accents, quotes */
--pvs-font-headline: 'Unbounded', 'Inter', sans-serif; /* bold display for section titles */
/* Radii */
--pvs-radius-sm: 8px;
--pvs-radius-md: 12px;
--pvs-radius-lg: 20px;
--pvs-radius-xl: 28px;
--pvs-radius-pill: 999px;
/* Shadows */
--pvs-shadow-sm: 0 1px 2px rgba(15, 35, 55, 0.06);
--pvs-shadow-md: 0 6px 20px rgba(15, 35, 55, 0.08);
--pvs-shadow-lg: 0 20px 40px rgba(15, 35, 55, 0.12);
/* Layout */
--pvs-container-max: 1200px;
--pvs-container-gutter: 1.25rem;
--pvs-section-y: clamp(3.5rem, 6vw, 6rem);
}
/* ---------------------------------------------------------------------
3. Base typography + a11y utilities
------------------------------------------------------------------ */
html { font-size: 100%; }
body {
font-family: var(--pvs-font-sans);
color: var(--pvs-text);
background: var(--pvs-bg);
font-size: 1rem;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--pvs-text); }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { color: var(--pvs-text-muted); }
.screen-reader-text {
border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
clip: auto !important; -webkit-clip-path: none; clip-path: none;
color: #21759b; display: block; font-size: .875rem; font-weight: 700; height: auto;
left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;
}
.pvs-skip-link { position: absolute; left: -9999rem; top: 0; z-index: 100000; }
.pvs-skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--pvs-secondary); outline-offset: 2px; border-radius: 4px; }
/* ---------------------------------------------------------------------
4. Layout primitives
------------------------------------------------------------------ */
.pvs-site { display: flex; flex-direction: column; min-height: 100vh; }
.pvs-main { flex: 1 0 auto; }
.pvs-container,
.pvs-header__inner,
.pvs-footer__inner,
.pvs-archive__inner,
.pvs-search__inner,
.pvs-single__inner,
.pvs-page__inner,
.pvs-error-404__inner,
.pvs-portfolio-page__inner,
.pvs-services-page__inner,
.pvs-about-page__inner,
.pvs-contact-page__inner,
.pvs-pricing-page__inner {
width: 100%; max-width: var(--pvs-container-max);
margin-inline: auto; padding-inline: var(--pvs-container-gutter);
}
.pvs-section {
padding-block: var(--pvs-section-y);
}
.pvs-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.pvs-section--light { background: var(--pvs-bg); }
.pvs-section--alt { background: var(--pvs-bg-alt); }
.pvs-section--dark { background: var(--pvs-bg-dark); color: var(--pvs-text-invert); }
.pvs-section--dark h1, .pvs-section--dark h2, .pvs-section--dark h3 { color: var(--pvs-text-invert); }
.pvs-section--dark p { color: var(--pvs-text-invert-muted); }
.pvs-section--darker { background: var(--pvs-bg-darker); color: var(--pvs-text-invert); }
.pvs-section--darker h1, .pvs-section--darker h2, .pvs-section--darker h3 { color: var(--pvs-text-invert); }
.pvs-section--darker p { color: var(--pvs-text-invert-muted); }
.pvs-section-head { text-align: left; max-width: 720px; margin: 0 auto 3rem; }
.pvs-section-head--wide { max-width: 900px; }
.pvs-section-head--left { text-align: left; margin: 0 0 3rem; max-width: none; }
.pvs-eyebrow {
display: inline-block; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 700; color: var(--pvs-secondary); margin-bottom: 0.75rem;
}
.pvs-section-head p { margin-top: 1rem; font-size: 1.05rem; }
/* ---------------------------------------------------------------------
5. Reusable primitives
------------------------------------------------------------------ */
/* Buttons */
.pvs-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.85rem 1.4rem; font-weight: 600; font-size: 0.95rem;
border-radius: var(--pvs-radius-pill); border: 1px solid transparent;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
white-space: nowrap; line-height: 1;
}
.pvs-btn:hover { transform: translateY(-1px); }
.pvs-btn .pvs-icon { display: inline-flex; }
.pvs-btn--primary {
color: #fff;
background: linear-gradient(135deg, var(--pvs-secondary) 0%, var(--pvs-secondary-alt) 100%);
box-shadow: 0 8px 18px rgba(245, 120, 38, 0.28);
}
.pvs-btn--primary:hover { filter: brightness(1.05); }
.pvs-btn--ghost {
color: var(--pvs-text); background: #fff; border-color: var(--pvs-border);
}
.pvs-btn--ghost:hover { background: var(--pvs-bg-alt); }
.pvs-btn--dark {
color: #fff; background: var(--pvs-primary); border-color: var(--pvs-primary);
}
.pvs-btn--dark:hover { background: var(--pvs-primary-dark); }
.pvs-btn--whatsapp {
color: #fff;
background: linear-gradient(135deg, #25d366 0%, #1ebc57 100%);
box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
}
.pvs-btn--block { display: flex; width: 100%; }
.pvs-btn--lg { padding: 1rem 1.6rem; font-size: 1rem; }
/* Chips / pills */
.pvs-chip {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.4rem 0.85rem; border-radius: var(--pvs-radius-pill);
background: #fff; border: 1px solid var(--pvs-border);
font-size: 0.85rem; font-weight: 500; color: var(--pvs-text);
}
.pvs-chip--dark { background: var(--pvs-primary); color: #fff; border-color: var(--pvs-primary); }
.pvs-chip--accent { background: var(--pvs-secondary); color: #fff; border-color: var(--pvs-secondary); }
.pvs-chip--muted { background: var(--pvs-bg-alt); color: var(--pvs-text-muted); border-color: transparent; }
.pvs-chip .pvs-icon { display: inline-flex; }
/* Cards */
.pvs-card {
background: var(--pvs-bg-alt); border-radius: var(--pvs-radius-lg);
padding: 1.75rem; height: 100%; display: flex; flex-direction: column;
}
.pvs-card--light { background: #fff; border: 1px solid var(--pvs-border); }
.pvs-card--dark { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--pvs-border-dark); color: var(--pvs-text-invert); }
/* Icon badge (rounded square with soft bg holding an svg) */
.pvs-icon-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: rgba(30, 58, 86, 0.08); color: var(--pvs-primary);
margin-bottom: 1rem;
}
.pvs-icon-badge--circle { border-radius: 50%; }
.pvs-icon-badge--accent { background: rgba(245, 120, 38, 0.12); color: var(--pvs-secondary); }
.pvs-icon-badge--dark { background: rgba(255,255,255,0.06); color: var(--pvs-secondary); }
/* Grid helpers */
.pvs-grid { display: grid; gap: 1.25rem; }
.pvs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pvs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pvs-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pvs-grid--5 { grid-template-columns: repeat(5, 1fr); }
/* Placeholder blocks */
.pvs-placeholder {
background: linear-gradient(135deg, #eef1f4 0%, #dfe4eb 100%);
border: 1px dashed rgba(30, 58, 86, 0.18);
border-radius: var(--pvs-radius-md);
color: rgba(30, 58, 86, 0.35);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.5rem; padding: 1rem; width: 100%;
}
.pvs-placeholder--dark {
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.35);
}
.pvs-placeholder__glyph svg { width: 40px; height: 40px; }
.pvs-placeholder__label { font-size: 0.9rem; font-weight: 500; }
/* Inline icon span */
.pvs-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.pvs-icon svg { display: block; }
/* Theme-shipped image wrapper — default is object-fit contain so no
image ever gets cropped. Sections that intentionally want edge-to-edge
cover behaviour (hero, gallery ticker, industry tiles, service tiles,
blog thumbnails, comparison sliders) override to `cover` explicitly. */
.pvs-image { position: relative; overflow: hidden; border-radius: inherit; width: 100%; background: transparent; }
.pvs-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Design-driven sections previously used object-fit: cover to fill
fixed-aspect containers. Now every container sizes to its image,
so cover-fit is no longer needed anywhere — the global contain
default handles all cases. */
/* ---------------------------------------------------------------------
6. Header
------------------------------------------------------------------ */
.pvs-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--pvs-border);
}
/* Anchor targets sit below the sticky header — offset so their top edge
isn't hidden under the nav bar after a hash jump.
(scroll-behavior: smooth already set on in the reset above.) */
:target,
#portfolio,
#services,
#case-studies,
#about,
#contact { scroll-margin-top: 96px; }
.pvs-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; padding-block: 0.85rem;
}
.pvs-header__brand { display: flex; align-items: center; gap: 0.65rem; }
.pvs-header__brand a { display: inline-flex; align-items: center; gap: 0.65rem; }
.pvs-brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: var(--pvs-primary); color: #fff;
font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
}
.pvs-brand-name { font-weight: 700; font-size: 1.1rem; color: var(--pvs-text); }
/* Real logo image (replaces PV tile + wordmark when logo.webp is used) */
.pvs-brand-logo {
display: inline-flex; align-items: center;
line-height: 0;
transition: opacity .2s ease;
}
.pvs-brand-logo:hover { opacity: 0.85; }
.pvs-brand-logo img {
display: block;
height: 52px; width: auto;
max-width: 100%;
}
.pvs-brand-logo--footer img { height: 76px; }
.pvs-header__nav { display: flex; }
.pvs-menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.pvs-menu a {
font-weight: 500; font-size: 0.95rem; color: var(--pvs-text-muted);
transition: color .2s ease; padding: 0.5rem 0; position: relative;
}
.pvs-menu a:hover, .pvs-menu .current-menu-item > a { color: var(--pvs-text); }
.pvs-menu .current-menu-item > a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--pvs-secondary); border-radius: 2px;
}
.pvs-header__ctas { display: flex; align-items: center; gap: 0.75rem; }
.pvs-header__mobile-cta { display: none; } /* mobile drawer only — overridden in the responsive block below */
/* Mobile toggle */
.pvs-header__toggle {
display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--pvs-border); background: #fff;
}
.pvs-header__toggle-icon,
.pvs-header__toggle-icon::before,
.pvs-header__toggle-icon::after {
content: ''; display: block; width: 20px; height: 2px; background: var(--pvs-text);
border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.pvs-header__toggle-icon { position: relative; }
.pvs-header__toggle-icon::before { position: absolute; left: 0; top: -6px; }
.pvs-header__toggle-icon::after { position: absolute; left: 0; top: 6px; }
.pvs-header__toggle[aria-expanded="true"] .pvs-header__toggle-icon { background: transparent; }
.pvs-header__toggle[aria-expanded="true"] .pvs-header__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.pvs-header__toggle[aria-expanded="true"] .pvs-header__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }
/* ---------------------------------------------------------------------
7. Footer + floating chat
------------------------------------------------------------------ */
.pvs-footer {
background: var(--pvs-bg-darker); color: var(--pvs-text-invert);
padding-block: 4rem 2rem; margin-top: auto;
}
.pvs-footer__inner {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem;
}
.pvs-footer .pvs-brand-name { color: #fff; }
.pvs-footer__col h3 {
font-size: 1.05rem; color: #fff; margin-bottom: 1.25rem;
}
.pvs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pvs-footer__col a { color: var(--pvs-text-invert-muted); font-size: 0.95rem; transition: color .2s ease; }
.pvs-footer__col a:hover { color: #fff; }
.pvs-footer__brand-copy { color: var(--pvs-text-invert-muted); margin-top: 1rem; font-size: 0.95rem; }
.pvs-footer__contact-item {
display: flex; align-items: flex-start; gap: 0.65rem;
color: var(--pvs-text-invert-muted); font-size: 0.95rem; margin-bottom: 0.85rem;
}
.pvs-footer__contact-item .pvs-icon { color: var(--pvs-secondary); flex-shrink: 0; margin-top: 2px; }
.pvs-footer__socials { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.pvs-footer__socials a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.06); color: #fff; transition: background .2s ease;
}
.pvs-footer__socials a:hover { background: var(--pvs-secondary); }
.pvs-footer__bar {
margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08);
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
color: var(--pvs-text-invert-muted); font-size: 0.9rem;
}
/* Floating WhatsApp chat button */
.pvs-fab {
position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
width: 56px; height: 56px; border-radius: 50%;
background: var(--pvs-whatsapp); color: #fff;
box-shadow: 0 12px 24px rgba(37, 211, 102, 0.35);
display: inline-flex; align-items: center; justify-content: center;
transition: transform .2s ease;
}
.pvs-fab:hover { transform: scale(1.05); }
.pvs-fab::after {
content: ''; position: absolute; top: 6px; right: 6px;
width: 10px; height: 10px; border-radius: 50%; background: #ef4444;
box-shadow: 0 0 0 2px var(--pvs-whatsapp);
}
/* ---------------------------------------------------------------------
9. Homepage sections
------------------------------------------------------------------ */
/* --- Hero --- */
.pvs-hero {
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 6rem);
}
.pvs-hero__inner {
max-width: var(--pvs-container-max); margin-inline: auto; padding-inline: var(--pvs-container-gutter);
display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center;
}
.pvs-hero__badge {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 1rem; border-radius: var(--pvs-radius-pill);
background: rgba(30, 58, 86, 0.06); color: var(--pvs-primary);
font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem;
}
.pvs-hero__badge .pvs-icon { color: var(--pvs-secondary); }
.pvs-hero__title { font-size: clamp(2.5rem, 5.2vw, 4.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.pvs-hero__title-accent {
background: linear-gradient(90deg, var(--pvs-primary) 0%, #7a4f5c 50%, var(--pvs-secondary) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pvs-hero__lead { margin-top: 1.25rem; font-size: 1.05rem; max-width: 34rem; }
.pvs-hero__ctas { display: flex; gap: 0.85rem; margin-top: 2rem; flex-wrap: wrap; }
.pvs-hero__proof {
display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
list-style: none; padding: 0; margin: 1.75rem 0 0;
font-size: 0.9rem; color: var(--pvs-text-muted);
}
.pvs-hero__proof li { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.pvs-hero__proof strong { color: var(--pvs-text); font-weight: 700; font-size: 1rem; }
.pvs-hero__visual {
position: relative; display: flex; align-items: center; justify-content: center;
min-height: 460px;
}
.pvs-hero__card {
position: absolute; width: 44%; padding: 1.25rem;
background: #fff; border-radius: var(--pvs-radius-lg);
box-shadow: var(--pvs-shadow-lg);
}
.pvs-hero__card--raw { left: 5%; top: 12%; transform: rotate(-5deg); z-index: 1; }
.pvs-hero__card--ready { right: 5%; bottom: 12%; transform: rotate(3deg); z-index: 2; }
.pvs-hero__card-tag {
display: block; font-size: 0.85rem; color: var(--pvs-text-muted); margin-top: 1rem;
}
.pvs-hero__card--ready .pvs-hero__card-tag { color: var(--pvs-primary); font-weight: 600; }
.pvs-hero__card-swatches { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.pvs-hero__card-swatches span { display: block; height: 8px; border-radius: 4px; background: var(--pvs-bg-alt); }
.pvs-hero__card-swatches span:nth-child(2) { background: var(--pvs-primary); width: 70%; }
.pvs-hero__card-swatches span:nth-child(3) { background: var(--pvs-secondary); width: 45%; }
/* --- AI Demo --- */
.pvs-ai-demo__panels {
display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; border-radius: var(--pvs-radius-xl);
overflow: hidden; box-shadow: var(--pvs-shadow-lg); background: #fff;
}
.pvs-ai-demo__left { padding: 2rem; background: #fff; }
.pvs-ai-demo__right { padding: 2rem; background: var(--pvs-bg-darker); color: #fff; }
.pvs-ai-demo__step { margin-bottom: 1.75rem; }
.pvs-ai-demo__step-title {
display: flex; align-items: center; gap: 0.65rem;
font-size: 1.1rem; font-weight: 700; color: var(--pvs-text); margin-bottom: 0.85rem;
}
.pvs-ai-demo__step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--pvs-primary); color: #fff; font-size: 0.85rem; font-weight: 700;
}
.pvs-ai-demo__upload {
border: 2px dashed rgba(30,58,86,0.2); border-radius: var(--pvs-radius-md);
padding: 2rem; text-align: left; color: var(--pvs-text-muted);
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.pvs-ai-demo__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pvs-ai-demo__chips .pvs-chip { cursor: pointer; }
.pvs-ai-demo__actions { margin-top: 2rem; display: flex; justify-content: center; }
.pvs-ai-demo__generated {
width: 100%; padding: 1rem 1.5rem; text-align: left;
background: #a3adb7; color: #fff; border-radius: var(--pvs-radius-pill);
font-weight: 600;
}
.pvs-ai-demo__browser {
background: #fff; border-radius: 12px; overflow: hidden; height: 100%; min-height: 320px;
display: flex; flex-direction: column;
}
.pvs-ai-demo__browser-bar {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.65rem 1rem; background: #f4f5f7; border-bottom: 1px solid var(--pvs-border);
}
.pvs-ai-demo__browser-dots { display: flex; gap: 0.35rem; }
.pvs-ai-demo__browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.pvs-ai-demo__browser-dots span:nth-child(1) { background: #ef4444; }
.pvs-ai-demo__browser-dots span:nth-child(2) { background: #eab308; }
.pvs-ai-demo__browser-dots span:nth-child(3) { background: #22c55e; }
.pvs-ai-demo__browser-url {
flex: 1; font-size: 0.85rem; color: var(--pvs-text-muted); text-align: left;
}
.pvs-ai-demo__browser-body {
flex: 1; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.75rem; text-align: left; color: var(--pvs-text);
}
.pvs-ai-demo__browser-body h4 { font-size: 1.15rem; font-weight: 700; }
.pvs-ai-demo__browser-body p { color: var(--pvs-text-muted); font-size: 0.9rem; max-width: 22rem; }
.pvs-ai-demo__browser-ribbon {
position: absolute; top: 12px; left: 12px;
padding: 0.35rem 0.8rem; border-radius: var(--pvs-radius-pill);
background: rgba(0,0,0,0.35); color: #fff; font-size: 0.75rem; font-weight: 600;
}
.pvs-ai-demo__right { position: relative; }
/* --- Services --- */
.pvs-services__head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem;
}
.pvs-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.pvs-service-card { }
.pvs-service-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.pvs-service-card p { font-size: 0.9rem; }
/* --- Workflow --- */
.pvs-workflow__steps {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; position: relative;
}
.pvs-workflow__steps::before {
content: ''; position: absolute; top: 40px; left: 10%; right: 10%; height: 1px;
background: rgba(255,255,255,0.1);
}
.pvs-workflow-step { text-align: left; position: relative; }
.pvs-workflow-step__icon {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px; border-radius: 16px;
background: rgba(255,255,255,0.05); color: var(--pvs-secondary);
margin-bottom: 1rem;
}
.pvs-workflow-step__num {
position: absolute; top: -8px; right: -8px;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; color: var(--pvs-primary); font-size: 0.8rem; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.pvs-workflow-step h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.pvs-workflow-step p { font-size: 0.9rem; line-height: 1.55; }
/* --- Capabilities --- */
.pvs-capabilities__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.pvs-capabilities__list {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem 2rem;
margin: 1.75rem 0 2rem; list-style: none; padding: 0;
}
.pvs-capabilities__list li {
display: flex; align-items: center; gap: 0.65rem; color: #fff; font-weight: 500;
}
.pvs-capabilities__list .pvs-icon { color: var(--pvs-secondary); }
.pvs-capabilities__cards {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.pvs-cap-card {
position: relative; padding: 1.5rem; min-height: 180px;
background: rgba(255,255,255,0.03); border: 1px solid var(--pvs-border-dark);
border-radius: var(--pvs-radius-lg);
display: flex; flex-direction: column; justify-content: flex-end;
}
.pvs-cap-card__num { position: absolute; top: 1rem; left: 1.25rem; color: var(--pvs-secondary); font-weight: 600; font-size: 0.9rem; }
.pvs-cap-card h3 { font-size: 1.1rem; color: #fff; }
/* --- Transformation (real before/after image layers, clip-path split) --- */
.pvs-transformation__slider {
position: relative; max-width: 1000px; margin: 0 auto;
border-radius: var(--pvs-radius-lg); overflow: hidden; box-shadow: var(--pvs-shadow-lg);
user-select: none; touch-action: none;
}
.pvs-compare { position: relative; aspect-ratio: 16 / 9; background: #111; }
.pvs-compare__before,
.pvs-compare__after {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.pvs-compare__before .pvs-image,
.pvs-compare__after .pvs-image {
width: 100%; height: 100%; border-radius: 0;
}
.pvs-compare__before .pvs-image img,
.pvs-compare__after .pvs-image img {
width: 100%; height: 100%; object-fit: cover;
}
.pvs-compare__after {
/* JS updates --pvs-split (0–100) to slide the reveal. */
clip-path: inset(0 calc(100% - var(--pvs-split, 50%)) 0 0);
-webkit-clip-path: inset(0 calc(100% - var(--pvs-split, 50%)) 0 0);
}
.pvs-compare__label {
position: absolute; top: 1rem; padding: 0.4rem 0.9rem;
border-radius: var(--pvs-radius-pill); background: rgba(15,35,55,0.7); color: #fff;
font-size: 0.8rem; font-weight: 600;
}
.pvs-compare__label--before { left: 1rem; }
.pvs-compare__label--after { right: 1rem; background: rgba(245,120,38,0.9); }
.pvs-compare__handle {
position: absolute; top: 0; bottom: 0; left: 50%;
width: 3px; background: #fff; transform: translateX(-50%); cursor: ew-resize; z-index: 3;
}
.pvs-compare__grip {
position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; border-radius: 50%;
background: #fff; box-shadow: var(--pvs-shadow-md);
transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
color: var(--pvs-primary); cursor: ew-resize;
}
.pvs-compare__grip::before,
.pvs-compare__grip::after {
content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.pvs-compare__grip::before { border-right: 6px solid currentColor; margin-right: 2px; }
.pvs-compare__grip::after { border-left: 6px solid currentColor; margin-left: 2px; }
/* --- Industries --- */
.pvs-industries__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.pvs-industry-card {
background: #fff; border: 1px solid var(--pvs-border); border-radius: var(--pvs-radius-lg);
padding: 2rem 1rem; text-align: left; transition: transform .2s ease, box-shadow .2s ease;
}
.pvs-industry-card:hover { transform: translateY(-3px); box-shadow: var(--pvs-shadow-md); }
.pvs-industry-card .pvs-icon-badge { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 0.85rem; }
.pvs-industry-card h3 { font-size: 1rem; margin: 0; }
/* --- Portfolio preview --- */
.pvs-portfolio-preview__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem;
}
.pvs-portfolio-preview__item .pvs-placeholder { aspect-ratio: 4 / 3; }
.pvs-portfolio-preview__cta { text-align: left; }
/* --- About --- */
.pvs-about__inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.pvs-about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
.pvs-about__stat {
padding: 1.25rem; border-radius: var(--pvs-radius-md); background: var(--pvs-bg-alt);
}
.pvs-about__stat strong { display: block; font-size: 1.75rem; color: var(--pvs-primary); font-weight: 800; }
.pvs-about__stat span { color: var(--pvs-text-muted); font-size: 0.9rem; }
.pvs-about__cards { display: flex; flex-direction: column; gap: 1rem; }
.pvs-about__card {
background: #fff8f2; border-radius: var(--pvs-radius-lg);
padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem;
box-shadow: var(--pvs-shadow-sm);
}
.pvs-about__card .pvs-icon-badge { margin: 0; }
.pvs-about__card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.pvs-about__card p { font-size: 0.9rem; }
/* --- Testimonials --- */
.pvs-testimonials__rating {
display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 3rem;
}
.pvs-testimonials__rating-row {
display: flex; align-items: center; gap: 0.75rem;
}
.pvs-testimonials__score { font-size: 2rem; font-weight: 800; color: var(--pvs-text); }
.pvs-testimonials__stars { display: inline-flex; gap: 2px; color: var(--pvs-star); }
.pvs-testimonials__meta { color: var(--pvs-text-muted); font-size: 0.9rem; }
.pvs-testimonial {
background: var(--pvs-bg-alt); border-radius: var(--pvs-radius-lg); padding: 2rem 2.25rem;
display: flex; flex-direction: column; height: 100%;
position: relative; overflow: hidden;
}
.pvs-testimonial::before {
content: '\201C'; position: absolute; top: -0.5rem; right: 1rem;
font-family: var(--pvs-font-display); font-size: 8rem; line-height: 1;
color: var(--pvs-gold); opacity: 0.15; pointer-events: none;
}
/* Coloured testimonial tints — three warm hues rotating. */
.pvs-testimonial--tint-1 { background: #faf1e0; } /* warm ivory */
.pvs-testimonial--tint-2 { background: #efeae1; } /* sand */
.pvs-testimonial--tint-3 { background: #f2e6e0; } /* dusty rose */
.pvs-testimonial__stars { color: var(--pvs-star); display: inline-flex; gap: 2px; margin-bottom: 1rem; }
.pvs-testimonial__quote { color: var(--pvs-text); font-style: italic; line-height: 1.65; font-size: 1.05rem; }
.pvs-testimonial__author { margin-top: 1.5rem; }
.pvs-testimonial__author strong { display: block; color: var(--pvs-text); font-weight: 700; }
.pvs-testimonial__author span { color: var(--pvs-secondary); font-size: 0.9rem; }
/* ---------- Carousel (used by testimonials; reusable) ---------- */
.pvs-carousel {
position: relative;
max-width: 820px;
margin: 0 auto;
padding: 0 3rem;
}
.pvs-carousel__viewport {
overflow: hidden;
border-radius: var(--pvs-radius-lg);
}
.pvs-carousel__track {
display: flex; align-items: stretch;
transition: transform .55s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.pvs-carousel__slide {
flex: 0 0 100%; min-width: 0;
padding: 0.25rem 0.25rem 1rem;
}
.pvs-carousel__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: #fff; border: 1px solid var(--pvs-border);
color: var(--pvs-text); font-size: 1.35rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease, color .2s ease, transform .15s ease;
box-shadow: var(--pvs-shadow-sm);
z-index: 2;
}
.pvs-carousel__nav:hover { background: var(--pvs-primary); color: #fff; }
.pvs-carousel__nav:active { transform: translateY(-50%) scale(0.94); }
.pvs-carousel__nav--prev { left: 0; }
.pvs-carousel__nav--next { right: 0; }
.pvs-carousel__nav[disabled] { opacity: 0.4; pointer-events: none; }
.pvs-carousel__dots {
display: flex; justify-content: center; gap: 0.5rem;
margin-top: 1.5rem;
}
.pvs-carousel__dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(30, 58, 86, 0.2); border: 0;
transition: background .2s ease, transform .2s ease;
cursor: pointer;
}
.pvs-carousel__dot:hover { background: rgba(30, 58, 86, 0.4); }
.pvs-carousel__dot.is-active {
background: var(--pvs-secondary); transform: scale(1.25);
}
/* --- WhatsApp CTA panel --- */
.pvs-whatsapp-cta {
max-width: 720px; margin: 0 auto; text-align: left;
background: #fff; border-radius: var(--pvs-radius-xl); padding: 2.5rem;
box-shadow: var(--pvs-shadow-md);
}
.pvs-whatsapp-cta h2 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.pvs-whatsapp-cta p { margin-bottom: 1.5rem; }
/* --- Insights (blog preview) --- */
.pvs-insights__head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem;
}
.pvs-insights__head a { color: var(--pvs-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.pvs-insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pvs-insight-card { display: flex; flex-direction: column; gap: 1rem; }
.pvs-insight-card .pvs-placeholder { aspect-ratio: 16 / 10; }
.pvs-insight-card > a { display: block; overflow: hidden; border-radius: var(--pvs-radius, 12px); }
.pvs-insight-card > a img {
display: block; width: 100%; height: auto;
aspect-ratio: 16 / 10; object-fit: cover;
transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pvs-insight-card:hover > a img { transform: scale(1.04); }
.pvs-insight-card__meta {
display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: var(--pvs-text-muted);
}
.pvs-insight-card__meta strong { color: var(--pvs-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.pvs-insight-card h3 { font-size: 1.15rem; line-height: 1.35; }
.pvs-insight-card h3 a { transition: color .2s ease; }
.pvs-insight-card h3 a:hover { color: var(--pvs-secondary); }
/* --- Contact map --- */
.pvs-contact__map {
margin: 2rem 0 0; padding: 0;
background: #fff; border-radius: var(--pvs-radius-xl); overflow: hidden;
box-shadow: var(--pvs-shadow-md);
}
.pvs-contact__map iframe {
width: 100%; height: 380px; border: 0; display: block;
}
.pvs-contact__map-caption {
display: flex; align-items: center; flex-wrap: wrap;
gap: 0.75rem 1.25rem; padding: 1.25rem 1.5rem;
background: #fff;
}
.pvs-contact__map-caption span { color: var(--pvs-text-muted); font-size: 0.9rem; }
.pvs-contact__map-caption strong { color: var(--pvs-text); font-weight: 700; font-size: 0.95rem; flex: 1; min-width: 200px; }
.pvs-contact__map-caption .pvs-btn { margin-left: auto; }
/* --- Contact --- */
.pvs-contact {
background: var(--pvs-bg-alt);
background-image: radial-gradient(circle at 100% 100%, rgba(245,120,38,0.06), transparent 40%);
}
.pvs-contact__panel {
display: grid; grid-template-columns: 1fr 1.2fr;
background: #fff; border-radius: var(--pvs-radius-xl); overflow: hidden;
box-shadow: var(--pvs-shadow-lg);
}
.pvs-contact__info {
background: var(--pvs-primary); color: #fff; padding: 2.5rem;
}
.pvs-contact__info h3 { color: #fff; margin-bottom: 0.75rem; }
.pvs-contact__info p { color: rgba(255,255,255,0.75); margin-bottom: 2rem; }
.pvs-contact__info-item {
display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; color: #fff;
}
.pvs-contact__info-item .pvs-icon { color: var(--pvs-secondary); margin-top: 4px; }
.pvs-contact__info-item a { color: #fff; }
.pvs-contact__info-item span.pvs-contact__info-label {
display: block; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 2px;
}
.pvs-contact__form { padding: 2.5rem; }
.pvs-contact__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pvs-form-row { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.pvs-form-row label { font-size: 0.85rem; font-weight: 600; color: var(--pvs-text); }
.pvs-form-row input,
.pvs-form-row textarea,
.pvs-form-row select {
border: 1px solid var(--pvs-border); border-radius: var(--pvs-radius-md);
padding: 0.85rem 1rem; font-size: 0.95rem; background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.pvs-form-row textarea { min-height: 130px; resize: vertical; }
.pvs-form-row input:focus,
.pvs-form-row textarea:focus,
.pvs-form-row select:focus {
outline: none; border-color: var(--pvs-primary);
box-shadow: 0 0 0 3px rgba(30, 58, 86, 0.1);
}
/* ---------------------------------------------------------------------
9b. Extra homepage sections (inspired by marketingstudio.in flow)
------------------------------------------------------------------ */
/* --- Client Logos strip --- */
.pvs-clients__label {
text-align: left; color: var(--pvs-text-muted); font-size: 0.9rem;
letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.75rem;
}
.pvs-clients__grid {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem;
align-items: center;
}
.pvs-client-logo {
background: #fff; border: 1px solid var(--pvs-border);
border-radius: var(--pvs-radius-md); overflow: hidden;
padding: 0.5rem; min-height: 76px;
display: flex; align-items: center; justify-content: center;
transition: transform .2s ease, box-shadow .2s ease;
}
.pvs-client-logo:hover { transform: translateY(-2px); box-shadow: var(--pvs-shadow-md); }
.pvs-client-logo .pvs-image { border-radius: 6px; }
.pvs-client-logo .pvs-image img { object-fit: contain; }
/* --- Video Showcase --- */
.pvs-showcase__player {
position: relative; margin: 0 auto; max-width: 1000px;
border-radius: var(--pvs-radius-xl); overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.pvs-showcase__poster { border: 0; border-radius: 0; }
.pvs-showcase__play {
position: absolute; inset: 0; margin: auto;
width: 96px; height: 96px; border-radius: 50%;
background: rgba(255,255,255,0.92); color: var(--pvs-primary);
display: inline-flex; align-items: center; justify-content: center;
transition: transform .2s ease, background .2s ease;
box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.pvs-showcase__play:hover { transform: scale(1.08); background: #fff; }
.pvs-showcase__play-icon {
display: block; width: 0; height: 0;
border-top: 14px solid transparent; border-bottom: 14px solid transparent;
border-left: 22px solid currentColor; margin-left: 5px;
}
.pvs-showcase__chip {
position: absolute; bottom: 1rem; right: 1rem;
padding: 0.5rem 1rem; border-radius: var(--pvs-radius-pill);
background: rgba(15,35,55,0.7); color: #fff;
font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* --- Portfolio Masonry --- */
.pvs-masonry {
display: grid; gap: 1rem;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
grid-auto-flow: dense;
}
.pvs-masonry__item {
position: relative; display: block; overflow: hidden;
border-radius: var(--pvs-radius-lg);
transition: transform .3s ease;
}
.pvs-masonry__item:hover { transform: translateY(-4px); }
.pvs-masonry__item .pvs-placeholder {
height: 100%; border-radius: 0; border: 0;
}
.pvs-masonry__item--tall { grid-row: span 2; }
.pvs-masonry__item--wide { grid-column: span 2; }
.pvs-masonry__item--sq { grid-row: span 1; grid-column: span 1; }
.pvs-masonry__caption {
position: absolute; left: 1rem; bottom: 1rem;
padding: 0.4rem 0.85rem; border-radius: var(--pvs-radius-pill);
background: rgba(15,35,55,0.75); color: #fff;
font-size: 0.85rem; font-weight: 600;
opacity: 0; transform: translateY(6px);
transition: opacity .25s ease, transform .25s ease;
}
.pvs-masonry__item:hover .pvs-masonry__caption { opacity: 1; transform: translateY(0); }
/* --- Founder card --- */
.pvs-founder__card {
display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem;
align-items: center;
background: var(--pvs-bg-alt); border-radius: var(--pvs-radius-xl);
padding: 2.5rem; box-shadow: var(--pvs-shadow-md);
}
.pvs-founder__portrait { border-radius: var(--pvs-radius-lg); overflow: hidden; }
.pvs-founder__portrait .pvs-placeholder { border-radius: 0; border: 0; }
.pvs-founder__name { font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin-bottom: 0.35rem; }
.pvs-founder__role { color: var(--pvs-secondary); font-weight: 600; margin-bottom: 1.25rem; }
.pvs-founder__bio { font-size: 1.05rem; line-height: 1.7; }
.pvs-founder__actions { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
/* --- Instagram feed --- */
.pvs-instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.pvs-instagram__tile {
position: relative; display: block; overflow: hidden;
border-radius: var(--pvs-radius-md);
transition: transform .2s ease;
}
.pvs-instagram__tile:hover { transform: scale(1.02); }
.pvs-instagram__tile .pvs-placeholder {
border-radius: 0; border: 0;
background: linear-gradient(135deg, #e6e0f0 0%, #f6c9c1 60%, #f0d38f 100%);
}
.pvs-instagram__overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(30,58,86,0.55), rgba(245,120,38,0.55));
color: #fff; opacity: 0; transition: opacity .25s ease;
}
.pvs-instagram__tile:hover .pvs-instagram__overlay { opacity: 1; }
.pvs-instagram__overlay .pvs-icon svg { width: 32px; height: 32px; }
/* --- Pricing preview grid --- */
.pvs-pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.pvs-pricing-card {
position: relative;
background: #fff; border: 1px solid var(--pvs-border);
border-radius: var(--pvs-radius-lg); padding: 2rem;
display: flex; flex-direction: column; gap: 1rem;
transition: transform .2s ease, box-shadow .2s ease;
}
.pvs-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--pvs-shadow-md); }
.pvs-pricing-card--featured {
background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
border-color: var(--pvs-secondary);
box-shadow: 0 20px 40px rgba(245, 120, 38, 0.12);
}
.pvs-pricing-card__tag {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
padding: 0.35rem 0.9rem; border-radius: var(--pvs-radius-pill);
background: var(--pvs-secondary); color: #fff;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.pvs-pricing-card__name { font-size: 1.25rem; margin: 0; }
.pvs-pricing-card__range { color: var(--pvs-secondary); font-weight: 600; margin: 0; }
.pvs-pricing-card__body { color: var(--pvs-text-muted); flex: 1; }
.pvs-pricing-card .pvs-btn { justify-content: center; }
/* --- Shipping / Onboarding panel --- */
.pvs-shipping__panel {
background: var(--pvs-bg-alt); border-radius: var(--pvs-radius-xl);
padding: 2.5rem;
display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start;
}
.pvs-shipping__head h2 { margin-top: 0.5rem; }
.pvs-shipping__head p { margin-top: 1rem; }
.pvs-shipping__steps {
list-style: none; padding: 0; margin: 0;
counter-reset: shipstep;
display: flex; flex-direction: column; gap: 1.5rem;
}
.pvs-shipping__steps li {
counter-increment: shipstep;
position: relative; padding-left: 3rem;
color: var(--pvs-text-muted); line-height: 1.6;
}
.pvs-shipping__steps li::before {
content: counter(shipstep);
position: absolute; left: 0; top: 0;
width: 32px; height: 32px; border-radius: 50%;
background: var(--pvs-primary); color: #fff;
font-weight: 700; font-size: 0.9rem;
display: inline-flex; align-items: center; justify-content: center;
}
.pvs-shipping__steps strong { display: block; color: var(--pvs-text); font-weight: 700; margin-bottom: 0.2rem; }
/* --- Industry cards as links --- */
.pvs-industry-card {
text-decoration: none; color: inherit;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pvs-industry-card__cta {
margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--pvs-secondary);
display: inline-flex; align-items: center; gap: 0.35rem;
opacity: 0; transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease;
}
.pvs-industry-card:hover .pvs-industry-card__cta { opacity: 1; transform: translateY(0); }
.pvs-industry-card:hover .pvs-icon-badge { background: rgba(245, 120, 38, 0.16); color: var(--pvs-secondary); }
/* --- Portfolio masonry category badge --- */
.pvs-masonry__badge {
position: absolute; top: 1rem; left: 1rem;
padding: 0.35rem 0.8rem; border-radius: var(--pvs-radius-pill);
background: rgba(15, 35, 55, 0.85); color: #fff;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
backdrop-filter: blur(6px);
}
/* --- FAQ accordion --- */
.pvs-faq__list {
max-width: 820px; margin: 0 auto;
display: flex; flex-direction: column; gap: 0.75rem;
}
.pvs-faq__item {
background: #fff; border: 1px solid var(--pvs-border);
border-radius: var(--pvs-radius-md); overflow: hidden;
}
.pvs-faq__item[open] {
border-color: var(--pvs-gold);
box-shadow: 0 8px 24px rgba(201, 162, 75, 0.12);
}
.pvs-faq__item[open] .pvs-faq__q { color: var(--pvs-primary); }
.pvs-faq__q {
list-style: none; cursor: pointer;
padding: 1.1rem 1.5rem;
font-weight: 600; color: var(--pvs-text);
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pvs-faq__q::-webkit-details-marker { display: none; }
.pvs-faq__icon {
position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.pvs-faq__icon::before,
.pvs-faq__icon::after {
content: ''; position: absolute; top: 50%; left: 50%;
background: var(--pvs-text); transition: transform .2s ease;
}
.pvs-faq__icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.pvs-faq__icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.pvs-faq__item[open] .pvs-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.pvs-faq__a { padding: 0 1.5rem 1.25rem; color: var(--pvs-text-muted); line-height: 1.65; }
/* --- Contact form note --- */
.pvs-contact__form-note {
font-size: 0.9rem; color: var(--pvs-text-muted);
margin: -0.25rem 0 1.5rem; padding: 0.75rem 1rem;
background: rgba(37, 211, 102, 0.08); border-radius: var(--pvs-radius-md);
border-left: 3px solid var(--pvs-whatsapp);
}
/* --- Missing something? mini CTA --- */
.pvs-missing__panel {
background: linear-gradient(135deg, var(--pvs-primary) 0%, var(--pvs-primary-dark) 100%);
color: #fff; border-radius: var(--pvs-radius-xl); padding: 2.5rem;
display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center;
}
.pvs-missing__copy h3 { color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem; }
.pvs-missing__copy p { color: rgba(255,255,255,0.75); margin: 0; }
.pvs-missing__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
/* ---------------------------------------------------------------------
9e. Rich premium pass — dark rhythm + photographic cards
------------------------------------------------------------------ */
:root {
--pvs-section-y: clamp(4rem, 6.5vw, 7rem);
--pvs-container-max: 1280px;
--pvs-bg-dark: #0d1e2f;
--pvs-bg-darker: #08131f;
--pvs-gold: #c9a24b;
--pvs-gold-soft: #e2c68b;
}
/* ------------------------------------------------------------------
Hero proof strip refinement (conversion trust bar)
------------------------------------------------------------------ */
.pvs-hero--rich .pvs-hero__proof {
display: flex; flex-wrap: wrap; gap: 1rem 2.25rem;
list-style: none; margin: 1.75rem 0 0; padding: 0;
color: rgba(255, 255, 255, 0.7);
}
.pvs-hero--rich .pvs-hero__proof li {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
padding-right: 2.25rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.pvs-hero--rich .pvs-hero__proof li:last-child { border-right: 0; padding-right: 0; }
.pvs-hero--rich .pvs-hero__proof strong {
font-family: var(--pvs-font-headline);
color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
}
.pvs-hero--rich .pvs-hero__proof span { font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); text-transform: uppercase; }
.pvs-hero--rich .pvs-hero__proof a { color: inherit; }
.pvs-hero--rich .pvs-hero__proof a:hover strong { color: var(--pvs-gold); }
/* ------------------------------------------------------------------
Flow — 3-step "how it works" strip (right below hero)
------------------------------------------------------------------ */
.pvs-flow { background: #fbf7f0; padding-block: clamp(3rem, 5vw, 4.5rem); }
.pvs-flow__title {
text-align: left; font-family: var(--pvs-font-headline);
font-weight: 700; letter-spacing: -0.02em;
font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 2.5rem;
color: var(--pvs-text);
}
.pvs-flow__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
list-style: none; padding: 0; margin: 0;
counter-reset: flowstep;
}
.pvs-flow__step {
position: relative;
background: #fff; border-radius: var(--pvs-radius-xl);
padding: 2rem 1.75rem; box-shadow: var(--pvs-shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
border-top: 3px solid var(--pvs-gold);
}
.pvs-flow__step:hover { transform: translateY(-3px); box-shadow: var(--pvs-shadow-md); }
.pvs-flow__num {
position: absolute; top: 1.5rem; right: 1.5rem;
font-family: var(--pvs-font-headline);
font-size: 2.75rem; font-weight: 700;
color: rgba(201, 162, 75, 0.18);
line-height: 1; letter-spacing: -0.03em;
}
.pvs-flow__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 14px;
background: var(--pvs-primary); color: var(--pvs-gold);
margin-bottom: 1.25rem;
}
.pvs-flow__step h3 {
font-family: var(--pvs-font-headline);
font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.pvs-flow__step p { color: var(--pvs-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
/* ------------------------------------------------------------------
Benefits grid (Why sellers choose us)
------------------------------------------------------------------ */
.pvs-benefits__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem;
margin-bottom: 3rem;
}
.pvs-benefit {
padding: 1.5rem 0 1.5rem 1.5rem;
border-left: 2px solid rgba(201, 162, 75, 0.35);
color: rgba(255, 255, 255, 0.85);
}
.pvs-benefit__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
background: rgba(201, 162, 75, 0.14); color: var(--pvs-gold);
margin-bottom: 0.85rem;
}
.pvs-benefit h3 {
font-family: var(--pvs-font-headline);
color: #fff; font-size: 1.05rem; font-weight: 700;
letter-spacing: -0.01em; margin-bottom: 0.4rem;
}
.pvs-benefit p { color: rgba(255, 255, 255, 0.62); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.pvs-benefits__cta {
display: flex; justify-content: center; gap: 0.85rem; flex-wrap: wrap;
padding-top: 1rem;
}
/* ------------------------------------------------------------------
Sticky mobile CTA bar
------------------------------------------------------------------ */
.pvs-sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0;
display: none;
background: rgba(15, 35, 55, 0.97);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.5rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom, 0));
gap: 0.5rem;
z-index: 45;
}
.pvs-sticky-cta__btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.85rem 0.5rem; border-radius: 12px;
font-weight: 700; font-size: 0.9rem; color: #fff;
transition: transform .1s ease;
}
.pvs-sticky-cta__btn:active { transform: scale(0.98); }
.pvs-sticky-cta__btn--whatsapp { background: linear-gradient(135deg, #25d366 0%, #1ebc57 100%); }
.pvs-sticky-cta__btn--primary { background: linear-gradient(135deg, var(--pvs-secondary) 0%, var(--pvs-secondary-alt) 100%); }
.pvs-sticky-cta__btn .pvs-icon { display: inline-flex; }
/* Selection colour + rich focus ring */
::selection { background: var(--pvs-gold); color: #0b1826; }
:focus-visible { outline-color: var(--pvs-gold); }
/* Section numeral — "01." style, geometric sans, gold. */
.pvs-numeral {
display: inline-block;
font-family: var(--pvs-font-headline);
font-weight: 700;
color: var(--pvs-gold);
font-size: 0.95rem;
letter-spacing: 0.02em;
margin-right: 0.75rem;
}
/* Gold-tinted eyebrow variant for premium sections. */
.pvs-eyebrow--gold { color: var(--pvs-gold); }
/* Legacy numbered-eyebrow wrapper (numerals removed) — kept as a simple span holder. */
.pvs-numbered-eyebrow { display: inline-block; margin-bottom: 1rem; }
/* Refined divider */
.pvs-divider {
display: block; width: 48px; height: 1px;
background: var(--pvs-gold);
margin: 0 0 1.5rem;
}
.pvs-divider--center { margin-left: auto; margin-right: auto; }
/* Dark section palette refinement. */
.pvs-section--dark { background: linear-gradient(180deg, #0d1e2f 0%, #0a1a29 100%); }
.pvs-section--darker { background: linear-gradient(180deg, #08131f 0%, #050d15 100%); }
.pvs-section--dark::before,
.pvs-section--darker::before { display: none; }
/* Ghost-light button — for dark backgrounds. */
.pvs-btn--ghost-light {
background: transparent; color: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
}
.pvs-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); }
/* Rich head layout — bold display, optional split. */
.pvs-rich-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2rem 3rem; flex-wrap: wrap; margin-bottom: 3rem;
}
.pvs-rich-head .pvs-eyebrow { color: var(--pvs-secondary); margin-bottom: 0.85rem; }
.pvs-rich-head h2 {
font-family: var(--pvs-font-headline);
font-weight: 700; letter-spacing: -0.025em;
font-size: clamp(1.9rem, 3.6vw, 3.2rem);
line-height: 1.05; font-weight: 500; letter-spacing: -0.015em;
max-width: 22ch;
}
.pvs-rich-head--dark h2 { color: #fff; }
.pvs-rich-head--dark .pvs-eyebrow { color: var(--pvs-secondary); }
.pvs-rich-head--dark p { color: rgba(255, 255, 255, 0.72); }
.pvs-rich-head--center { text-align: left; justify-content: center; flex-direction: column; align-items: center; }
.pvs-rich-head--center h2 { max-width: 20ch; margin: 0 auto; }
.pvs-rich-head--center p { max-width: 42rem; margin: 1rem auto 0; }
/* ------------------------------------------------------------------
Hero — rich dark full-bleed
------------------------------------------------------------------ */
.pvs-hero--rich {
background:
radial-gradient(1200px 700px at 12% 20%, rgba(245, 120, 38, 0.18), transparent 60%),
radial-gradient(1000px 700px at 88% 80%, rgba(30, 58, 86, 0.28), transparent 60%),
linear-gradient(160deg, #08131f 0%, #0f2337 50%, #08131f 100%);
color: #fff;
padding: clamp(4rem, 7vw, 6rem) 0 0;
overflow: hidden;
position: relative;
}
.pvs-hero--rich::after {
content: ''; position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.6; pointer-events: none; mix-blend-mode: overlay;
}
.pvs-hero--rich .pvs-hero__inner {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: 4rem; align-items: center;
padding-bottom: 4rem;
}
.pvs-hero--rich .pvs-hero__badge {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
}
.pvs-hero--rich .pvs-hero__title {
color: #fff;
font-family: var(--pvs-font-headline);
font-size: clamp(2.6rem, 5.2vw, 4.6rem);
font-weight: 700; line-height: 1.02; letter-spacing: -0.035em;
}
.pvs-hero--rich .pvs-hero__title-accent {
color: var(--pvs-secondary);
font-family: var(--pvs-font-display); font-style: italic;
font-weight: 500;
background: none; -webkit-background-clip: unset; background-clip: unset;
}
.pvs-hero--rich .pvs-hero__lead {
color: rgba(255, 255, 255, 0.75);
max-width: 34rem; font-size: 1.1rem; line-height: 1.65;
}
/* Subtle Ken Burns motion on hero shot (premium touch). */
@keyframes pvs-hero-drift {
0%, 100% { transform: rotate(-1.5deg) scale(1); }
50% { transform: rotate(-1.5deg) scale(1.035); }
}
.pvs-hero__hero-shot--motion { animation: pvs-hero-drift 14s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.pvs-hero__hero-shot--motion { animation: none; }
}
/* Scroll reveal — subtle fade + translate, respect reduced motion. */
[data-pvs-reveal] {
opacity: 0; transform: translateY(24px);
transition: opacity .7s ease, transform .7s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
[data-pvs-reveal].is-in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-pvs-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ------------------------------------------------------------------
Hero — two-mobile before/after carousel (concept from the inspiration,
rebuilt with our own styling + 14-item UI polish pass)
------------------------------------------------------------------ */
.pvs-hero__phones {
position: relative;
display: flex; align-items: center; justify-content: center; gap: 1.25rem;
width: 100%;
outline: none;
}
.pvs-hero__phones:focus-visible { outline: 2px solid var(--pvs-gold); outline-offset: 12px; border-radius: 16px; }
/* Soft spotlight behind phones */
.pvs-hero__spotlight {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 780px; height: 520px;
background:
radial-gradient(closest-side, rgba(245, 120, 38, 0.22), transparent 70%),
radial-gradient(closest-side, rgba(201, 162, 75, 0.14), transparent 75%);
pointer-events: none; z-index: 0;
}
.pvs-hero__phones > *:not(.pvs-hero__spotlight) { position: relative; z-index: 1; }
/* Prev / next buttons */
.pvs-hero__nav {
flex-shrink: 0;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.14);
font-family: var(--pvs-font-headline); font-size: 1.2rem; line-height: 1;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .15s ease;
}
.pvs-hero__nav:hover { background: var(--pvs-gold); color: #0d1e2f; }
.pvs-hero__nav:active { transform: scale(0.94); }
/* Idle float animations (breathing motion) */
@keyframes pvs-hero-float-raw {
0%, 100% { transform: rotate(-4deg) translateY(0); }
50% { transform: rotate(-3.5deg) translateY(-4px); }
}
@keyframes pvs-hero-float-iphone {
0%, 100% { transform: rotateY(-8deg) rotateX(2deg) translateY(0); }
50% { transform: rotateY(-7.5deg) rotateX(1.5deg) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
.pvs-hero__phone-raw,
.pvs-hero__phone-iphone-screen { animation: none !important; }
}
/* LEFT — raw phone */
.pvs-hero__phone-raw {
flex-shrink: 0;
text-align: left;
transform: rotate(-4deg);
animation: pvs-hero-float-raw 6s ease-in-out infinite;
}
.pvs-hero__phone-raw-screen {
width: 180px; height: 355px;
background: #1e1c19; border: 3px solid #2d2a25;
border-radius: 24px; padding: 9px; overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.03);
position: relative;
}
.pvs-hero__phone-raw-screen::before {
content: ''; position: absolute; top: 9px; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px; background: #2d2a25; border-radius: 8px; z-index: 3;
}
.pvs-hero__phone-raw-screen::after {
content: ''; position: absolute; inset: 9px;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
border-radius: 15px; pointer-events: none; z-index: 2;
}
/* Raw phone slides — cross-fade (no horizontal slide, so no adjacent bleed) */
.pvs-hero__phone-raw-screen {
position: relative;
}
.pvs-hero__phone-raw-track {
position: absolute; inset: 9px;
border-radius: 15px; overflow: hidden;
background: #1e1c19;
}
.pvs-hero__phone-raw-slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}
.pvs-hero__phone-raw-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.pvs-hero__phone-raw-slide img {
width: 100%; height: 100%; object-fit: contain; display: block;
background: #1e1c19;
filter: saturate(0.4) contrast(0.85) brightness(1.1) sepia(0.18);
border-radius: 15px;
}
.pvs-hero__mp-slide img {
width: 100%; height: 100%; object-fit: contain; display: block;
background: #fff;
}
/* iOS-style status bar (time on left, signal/wifi/battery on right).
Rendered inside both phone screens above all other content. Split by
the notch — the left `time` sits left of the notch, the right `icons`
sit to the right of the notch. Font is a system stack so it renders
like a real iOS status bar. */
.pvs-hero__statusbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 28px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
z-index: 22;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
font-size: 11px;
font-weight: 600;
color: #ffffff;
pointer-events: none;
letter-spacing: 0.02em;
}
.pvs-hero__statusbar-time {
line-height: 1;
min-width: 28px;
}
.pvs-hero__statusbar-icons {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1;
}
.pvs-hero__statusbar-icon {
display: block;
width: auto;
}
.pvs-hero__statusbar-icon--signal { height: 10px; }
.pvs-hero__statusbar-icon--wifi { height: 10px; }
.pvs-hero__statusbar-icon--battery { height: 11px; width: 24px; }
/* Raw phone: smaller screen so the bar is slightly compressed. Its screen
background is very dark, so the default white text works perfectly.
Extra horizontal padding keeps time + icons safely inside the screen
area (the phone has a 9px bezel + rounded corners). */
.pvs-hero__phone-raw-screen .pvs-hero__statusbar {
top: 3px;
height: 22px;
padding: 0 18px;
font-size: 10px;
}
.pvs-hero__phone-raw-screen .pvs-hero__statusbar-icon--signal { height: 8.5px; }
.pvs-hero__phone-raw-screen .pvs-hero__statusbar-icon--wifi { height: 8.5px; }
.pvs-hero__phone-raw-screen .pvs-hero__statusbar-icon--battery { height: 9.5px; width: 21px; }
.pvs-hero__phone-raw-screen .pvs-hero__statusbar-icons { gap: 6px; }
.pvs-hero__phone-raw-screen .pvs-hero__statusbar-time { min-width: 24px; }
/* iPhone screen has a notch at top; nudge the bar down slightly so the
time and icons sit visually flanking the notch rather than under it. */
.pvs-hero__phone-iphone-screen .pvs-hero__statusbar {
top: 6px;
height: 24px;
padding: 0 20px;
}
.pvs-hero__phone-iphone-screen .pvs-hero__statusbar-icons { gap: 8px; }
/* Push in-flow phone content below the status bar so the search bar,
product image and marketplace UI don't overlap the time/icons.
The status bar itself is absolutely positioned above z-order, but
the content underneath needs its own top clearance. */
.pvs-hero__phone-iphone-screen .pvs-hero__mp-header {
margin-top: 22px;
}
.pvs-hero__phone-raw-screen .pvs-hero__phone-raw-track {
inset: 30px 9px 9px 9px;
}
/* Tag under phones — larger + coloured dot before label */
.pvs-hero__phone-tag {
display: inline-flex; align-items: center; gap: 0.5rem;
margin-top: 0.9rem;
font-family: var(--pvs-font-headline);
font-size: 0.78rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 700;
color: rgba(255, 255, 255, 0.85);
}
.pvs-hero__phone-tag::before {
content: ''; display: inline-block;
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
}
.pvs-hero__phone-tag--raw::before { background: rgba(255, 255, 255, 0.45); }
.pvs-hero__phone-tag--ready { color: var(--pvs-gold); }
.pvs-hero__phone-tag--ready::before { background: var(--pvs-gold); }
/* Flow indicator between phones */
.pvs-hero__flow {
flex-shrink: 0;
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
padding: 0 0.5rem;
}
.pvs-hero__flow-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--pvs-gold);
opacity: 0.25;
animation: pvs-flow-pulse 1.6s infinite;
}
.pvs-hero__flow-dot:nth-child(2) { animation-delay: 0.2s; }
.pvs-hero__flow-dot:nth-child(3) { animation-delay: 0.4s; }
.pvs-hero__flow-dot:nth-child(4) { animation-delay: 0.6s; }
.pvs-hero__flow-dot:nth-child(5) { animation-delay: 0.8s; }
@keyframes pvs-flow-pulse {
0%, 100% { opacity: 0.25; transform: scale(1); }
50% { opacity: 1; transform: scale(1.35); }
}
.pvs-hero__flow-label {
margin-top: 0.25rem;
font-family: var(--pvs-font-headline);
font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--pvs-gold);
writing-mode: horizontal-tb;
}
/* RIGHT — iPhone-style marketplace listing */
.pvs-hero__phone-iphone {
flex-shrink: 0;
text-align: left;
perspective: 1200px;
position: relative;
}
.pvs-hero__phone-iphone-screen {
width: 250px; height: 495px;
background: #16151c; border: 4px solid #2b2a30;
border-radius: 38px; padding: 11px; overflow: hidden;
box-shadow: 18px 26px 50px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.05);
transform: rotateY(-8deg) rotateX(2deg);
position: relative;
transition: transform .5s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: pvs-hero-float-iphone 6.5s ease-in-out infinite;
}
.pvs-hero__phone-iphone-screen::before {
content: ''; position: absolute; top: 15px; left: 50%;
transform: translateX(-50%);
width: 70px; height: 20px; background: #000; border-radius: 18px; z-index: 20;
}
.pvs-hero__phone-iphone:hover .pvs-hero__phone-iphone-screen {
transform: rotateY(-3deg) rotateX(1deg);
animation-play-state: paused;
}
/* Progress bar at the very top of the iPhone screen */
.pvs-hero__mp-progress {
position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: rgba(0, 0, 0, 0.1);
z-index: 25; overflow: hidden;
}
.pvs-hero__mp-progress span {
display: block; height: 100%; width: 0;
background: var(--pvs-gold);
transform-origin: left center;
animation: pvs-hero-progress 3.2s linear infinite;
}
@keyframes pvs-hero-progress {
from { width: 0; }
to { width: 100%; }
}
.pvs-hero__phones:hover .pvs-hero__mp-progress span { animation-play-state: paused; }
/* Outcome micro-tag near iPhone */
.pvs-hero__outcome {
position: absolute; top: -14px; right: -8px; z-index: 5;
padding: 0.35rem 0.75rem;
background: linear-gradient(135deg, var(--pvs-gold), var(--pvs-gold-soft));
color: #0d1e2f;
font-family: var(--pvs-font-headline);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(201, 162, 75, 0.35);
transform: rotate(6deg);
}
/* Marketplace badges under iPhone */
.pvs-hero__marketplaces {
display: flex; align-items: center; justify-content: center;
gap: 0.6rem; margin-top: 0.75rem;
color: rgba(255, 255, 255, 0.72);
}
.pvs-hero__marketplaces-label {
font-family: var(--pvs-font-headline);
font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5); font-weight: 700;
}
.pvs-hero__marketplaces-list { display: inline-flex; gap: 0.55rem; }
.pvs-hero__marketplaces-list span {
font-family: var(--pvs-font-headline);
font-size: 0.7rem; font-weight: 600;
color: rgba(255, 255, 255, 0.72);
padding: 0.2rem 0.55rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
}
.pvs-hero__mp-header {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.6rem;
background: linear-gradient(135deg, #232f3e, #37475a);
color: #fff; font-size: 0.7rem;
border-top-left-radius: 22px; border-top-right-radius: 22px;
}
.pvs-hero__mp-search {
flex: 1; height: 22px; background: #fff; color: #888;
border-radius: 6px; padding: 0 8px;
display: flex; align-items: center; font-size: 0.65rem;
font-family: var(--pvs-font-sans);
}
.pvs-hero__mp-cart { font-size: 0.9rem; }
.pvs-hero__mp-carousel {
position: relative; width: 100%; aspect-ratio: 1 / 1;
background: #fff; overflow: hidden;
}
.pvs-hero__mp-track {
display: flex; width: 100%; height: 100%;
transition: transform .55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pvs-hero__mp-slide { min-width: 100%; height: 100%; }
.pvs-hero__mp-slide .pvs-image,
.pvs-hero__mp-slide .pvs-image img {
width: 100%; height: 100%; border-radius: 0; object-fit: contain;
background: #fff; padding: 6px;
}
.pvs-hero__mp-dots {
display: flex; justify-content: center; gap: 4px;
padding: 6px 0; background: #fff;
}
.pvs-hero__mp-dot {
width: 5px; height: 5px; border-radius: 50%;
background: #d5d5d5; border: 0; padding: 0;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.pvs-hero__mp-dot.is-active { background: #007185; }
/* Pause-on-hover feedback — dots brighten when the whole hero carousel is hovered */
.pvs-hero__phones:hover .pvs-hero__mp-dot { background: var(--pvs-gold); opacity: 0.5; }
.pvs-hero__phones:hover .pvs-hero__mp-dot.is-active { opacity: 1; transform: scale(1.3); }
.pvs-hero__mp-dots { position: relative; }
.pvs-hero__phones:hover .pvs-hero__mp-dots::after {
content: '❚❚';
position: absolute; left: 50%; top: -14px;
transform: translateX(-50%);
font-size: 0.55rem; letter-spacing: 1px;
color: var(--pvs-gold);
animation: pvs-pause-fade 0.3s ease forwards;
}
@keyframes pvs-pause-fade {
from { opacity: 0; transform: translate(-50%, 4px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.pvs-hero__mp-details {
padding: 8px 10px 14px; background: #fff;
font-family: var(--pvs-font-sans);
color: #0f1111; font-size: 0.72rem; line-height: 1.4;
}
.pvs-hero__mp-sponsored { font-size: 0.55rem; color: #888; margin: 0 0 3px; }
.pvs-hero__mp-title {
font-size: 0.72rem; color: #0f1111; margin: 0 0 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pvs-hero__mp-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.pvs-hero__mp-stars { display: inline-flex; gap: 1px; color: #ffa41c; }
.pvs-hero__mp-stars .pvs-icon svg { width: 10px; height: 10px; }
.pvs-hero__mp-reviews { color: #007185; font-size: 0.6rem; }
.pvs-hero__mp-delivery { font-size: 0.6rem; color: #0f1111; margin: 4px 0; }
.pvs-hero__mp-stock { font-size: 0.62rem; color: #007600; font-weight: 500; margin-bottom: 6px; }
.pvs-hero__mp-btn {
width: 100%; padding: 5px 6px; margin-bottom: 4px;
font-family: var(--pvs-font-sans); font-size: 0.62rem; font-weight: 500;
border: 0; border-radius: 12px; cursor: default; color: #0f1111;
}
.pvs-hero__mp-btn--cart { background: #ffd814; }
.pvs-hero__mp-btn--buy { background: #ffa41c; }
/* Byline (single-line proof stats, replacing 4-column table) */
.pvs-hero__byline {
margin: 1.5rem 0 0;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.7;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem;
}
.pvs-hero__byline strong {
color: #fff; font-weight: 700; font-family: var(--pvs-font-headline);
letter-spacing: -0.01em;
}
.pvs-hero__byline a { color: inherit; }
.pvs-hero__byline a:hover strong { color: var(--pvs-gold); }
.pvs-hero__byline > span[aria-hidden] { color: var(--pvs-gold); opacity: 0.5; }
/* Trim marketplace UI clutter on smaller viewports */
@media (max-width: 900px) {
.pvs-hero__mp-delivery { display: none; }
}
/* Big hero visual with inset thumbnail (legacy, kept in case). */
.pvs-hero__stage {
position: relative; width: 100%; max-width: 520px; margin-left: auto;
}
.pvs-hero__hero-shot {
border-radius: var(--pvs-radius-xl);
overflow: hidden;
box-shadow:
0 40px 80px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.06) inset;
transform: rotate(-1.5deg);
}
.pvs-hero__hero-shot .pvs-image { border-radius: 0; }
.pvs-hero__inset {
position: absolute; bottom: -2rem; left: -3.5rem;
width: 42%;
border-radius: var(--pvs-radius-lg);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
transform: rotate(4deg);
border: 3px solid rgba(255, 255, 255, 0.08);
}
.pvs-hero__inset .pvs-image { border-radius: 0; }
.pvs-hero__inset-tag {
position: absolute; top: 0.75rem; left: 0.75rem;
padding: 0.3rem 0.7rem; border-radius: var(--pvs-radius-pill);
background: rgba(0, 0, 0, 0.7); color: #fff;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Hero brand strip at bottom. */
.pvs-hero__strip {
position: relative; z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.25rem var(--pvs-container-gutter);
max-width: var(--pvs-container-max); margin: 0 auto;
display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
color: rgba(255, 255, 255, 0.55); font-size: 0.85rem;
}
.pvs-hero__strip-label {
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
color: rgba(255, 255, 255, 0.45);
}
.pvs-hero__strip-brands { display: flex; gap: 2rem; flex-wrap: wrap; }
.pvs-hero__strip-brands span {
font-family: var(--pvs-font-display); font-style: italic;
color: rgba(255, 255, 255, 0.72); font-size: 1rem;
}
/* ------------------------------------------------------------------
Why Choose Us — five cycling Q/A cards
------------------------------------------------------------------ */
.pvs-why { background: #ffffff; }
.pvs-why__head { text-align: left; max-width: 720px; margin: 0 auto 3rem; }
.pvs-why__head h2 {
font-family: var(--pvs-font-headline);
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
margin-top: 0.75rem;
}
.pvs-why__grid {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 1.5rem; max-width: 1180px; margin: 0 auto;
}
.pvs-why__item {
text-align: left; padding: 0.5rem;
display: flex; flex-direction: column; align-items: center;
}
.pvs-why__item:hover {
transform: translateY(-4px);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.pvs-why__icon {
position: relative;
width: 68px; height: 68px; margin-bottom: 1.5rem;
border: none;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #0f2337;
background: linear-gradient(160deg, #f5e0a6 0%, #e2c68b 25%, #c9a24b 55%, #8f6d21 100%);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.55),
inset 0 -3px 8px rgba(80, 55, 15, 0.35),
0 10px 22px -8px rgba(201, 162, 75, 0.6),
0 4px 8px rgba(30, 20, 5, 0.16);
transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
z-index: 1;
}
.pvs-why__icon::after {
content: "";
position: absolute; inset: 4px;
border-radius: 50%;
background: radial-gradient(60% 45% at 40% 25%, rgba(255, 255, 255, 0.6), transparent 70%);
pointer-events: none;
}
.pvs-why__icon svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.pvs-why__item:hover .pvs-why__icon {
transform: translateY(-3px) scale(1.06);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.65),
inset 0 -3px 8px rgba(80, 55, 15, 0.4),
0 16px 28px -10px rgba(201, 162, 75, 0.7),
0 6px 12px rgba(30, 20, 5, 0.2);
}
.pvs-why__stack {
position: relative; min-height: 138px; width: 100%; z-index: 1;
}
.pvs-why__question,
.pvs-why__answer {
position: absolute; top: 0; left: 0; right: 0;
margin: 0;
transition: opacity .55s ease;
}
.pvs-why__question {
font-family: var(--pvs-font-display);
font-size: 1.1rem; line-height: 1.35;
font-weight: 600; color: var(--pvs-text);
opacity: 1;
}
.pvs-why__answer {
font-size: 0.95rem; line-height: 1.5;
color: var(--pvs-primary); font-weight: 500;
opacity: 0;
}
.pvs-why__item.is-showing-answer .pvs-why__question { opacity: 0; }
.pvs-why__item.is-showing-answer .pvs-why__answer { opacity: 1; }
/* Items are visible by default. The parent grid's data-pvs-reveal handles
the overall entrance; we don't hide individual items so headless renders,
share previews and screen readers all see them immediately. */
/* Closing */
.pvs-why__closing {
text-align: left; margin-top: 3rem;
max-width: 640px; margin-left: auto; margin-right: auto;
}
.pvs-why__closing p {
font-family: var(--pvs-font-display);
font-style: italic; font-size: 1.1rem;
color: var(--pvs-text); margin: 0 0 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
.pvs-why__question,
.pvs-why__answer { transition: none !important; }
.pvs-why__grid[data-pvs-reveal] .pvs-why__item { opacity: 1; transform: none; transition: none; }
}
/* ------------------------------------------------------------------
Studio at a Glance — AEO-friendly facts card
------------------------------------------------------------------ */
.pvs-glance { background: #fbf7f0; }
.pvs-glance__head {
max-width: 720px; margin: 0 auto 3.5rem; text-align: left;
}
.pvs-glance__head h2 {
font-family: var(--pvs-font-display);
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
line-height: 1.1; font-weight: 500; letter-spacing: -0.015em;
margin-top: 0.5rem;
}
.pvs-glance__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; max-width: 1180px; margin: 0 auto;
background: #fff; border-radius: var(--pvs-radius-xl);
box-shadow: var(--pvs-shadow-md);
overflow: hidden;
}
.pvs-glance__item {
padding: 1.75rem 1.5rem;
border-right: 1px solid var(--pvs-border);
border-bottom: 1px solid var(--pvs-border);
display: flex; flex-direction: column; gap: 0.4rem;
}
.pvs-glance__item:nth-child(4n) { border-right: 0; }
.pvs-glance__item:nth-last-child(-n+4) { border-bottom: 0; }
.pvs-glance__item dt {
font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--pvs-gold); font-weight: 700;
}
.pvs-glance__item dd {
margin: 0; color: var(--pvs-text); font-weight: 500; font-size: 0.95rem; line-height: 1.5;
}
/* ------------------------------------------------------------------
Statement — warm ivory ground
------------------------------------------------------------------ */
.pvs-statement {
background: #f7f2ea;
padding-block: clamp(4rem, 7vw, 7rem);
position: relative;
}
.pvs-statement .pvs-container { max-width: 900px; text-align: left; }
.pvs-statement__mark {
display: inline-block; margin-bottom: 1.25rem;
font-family: var(--pvs-font-display); font-size: 2rem;
color: var(--pvs-secondary);
}
.pvs-statement__body {
font-family: var(--pvs-font-display);
font-size: clamp(1.35rem, 2.4vw, 1.9rem);
line-height: 1.4;
font-weight: 400;
color: var(--pvs-text);
letter-spacing: -0.005em;
}
/* ------------------------------------------------------------------
Featured Work — magazine cover story
------------------------------------------------------------------ */
.pvs-featured { background: var(--pvs-bg); }
.pvs-featured__grid {
display: grid; grid-template-columns: 1.1fr 1fr;
gap: 4rem; align-items: center;
}
.pvs-featured__visual {
position: relative;
border-radius: var(--pvs-radius-xl);
overflow: hidden;
box-shadow: 0 40px 60px rgba(15, 35, 55, 0.15);
}
.pvs-featured__visual .pvs-image { border-radius: 0; }
.pvs-featured__stamp {
position: absolute; top: 1.5rem; left: 1.5rem;
padding: 0.5rem 1rem; border-radius: var(--pvs-radius-pill);
background: rgba(15, 35, 55, 0.92); color: #fff;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pvs-featured__body { padding-left: 1rem; }
.pvs-featured__title {
font-family: var(--pvs-font-display);
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.05; font-weight: 500; letter-spacing: -0.02em;
margin: 0.75rem 0 1.25rem;
}
.pvs-featured__lead { font-size: 1.1rem; line-height: 1.6; color: var(--pvs-text-muted); margin-bottom: 1.75rem; }
.pvs-featured__facts {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin: 1.5rem 0 2rem;
padding: 1.5rem 0;
border-top: 1px solid var(--pvs-border);
border-bottom: 1px solid var(--pvs-border);
}
.pvs-featured__facts dt {
font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
font-weight: 700; color: var(--pvs-secondary);
margin-bottom: 0.35rem;
}
.pvs-featured__facts dd {
margin: 0; font-weight: 600; color: var(--pvs-text); font-size: 0.95rem; line-height: 1.4;
}
/* ------------------------------------------------------------------
Modern Gallery — two-row slanted magazine ribbon (auto-scrolling)
------------------------------------------------------------------ */
.pvs-gallery {
overflow: hidden;
/* A touch of extra vertical padding gives the tilted rows room to
breathe without their corners clipping into adjacent sections. */
padding-block: clamp(4.5rem, 7vw, 7rem);
}
.pvs-gallery .pvs-container { overflow: visible; }
.pvs-gallery__row {
position: relative;
overflow: hidden;
margin-block: 1.25rem;
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
/* Slant. Both rows share the same tilt so they read as a single
diagonal ribbon. Extra width + negative margin lets the rotated
ends still fill the viewport edge-to-edge. */
transform: rotate(-2.5deg);
transform-origin: center center;
width: 108%;
margin-left: -4%;
}
.pvs-gallery__row--offset {
margin-left: -4%;
margin-top: 1.75rem;
}
@media (prefers-reduced-motion: reduce) {
.pvs-gallery__row,
.pvs-gallery__row--offset {
transform: none;
width: 100%;
margin-left: 0;
}
}
.pvs-gallery__track {
display: flex; gap: 1.25rem;
width: max-content;
animation-duration: 55s;
animation-iteration-count: infinite;
animation-timing-function: linear;
will-change: transform;
}
.pvs-gallery__track--left { animation-name: pvs-gallery-left; }
.pvs-gallery__track--right { animation-name: pvs-gallery-right; animation-duration: 65s; }
@keyframes pvs-gallery-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes pvs-gallery-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.pvs-gallery__row:hover .pvs-gallery__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.pvs-gallery__track {
animation: none;
flex-wrap: wrap; justify-content: center;
width: 100%;
}
}
.pvs-gallery__item {
position: relative;
flex: 0 0 auto;
width: clamp(220px, 22vw, 320px);
border-radius: var(--pvs-radius-xl);
overflow: hidden;
margin: 0;
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pvs-gallery__item:hover { transform: scale(1.03) translateY(-3px); z-index: 2; }
/* Gallery ticker — uniform 4:5 portrait cards, image fills edge-to-edge.
Restoring cover-fit here because the ticker is a designed pattern
(identical-shape product chips flowing horizontally); the source
images are already curated at 4:5 so cover-fit matches naturally
and hover zoom looks clean. */
.pvs-gallery__item .pvs-image {
border-radius: 0;
aspect-ratio: 4 / 5;
height: 100%;
}
.pvs-gallery__item .pvs-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s ease;
}
.pvs-gallery__item:hover .pvs-image img { transform: scale(1.06); }
.pvs-gallery__item::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(8, 19, 31, 0.9) 100%);
pointer-events: none;
opacity: 0.55;
transition: opacity .3s ease;
}
.pvs-gallery__item:hover::after { opacity: 0.85; }
.pvs-gallery__meta {
position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1rem;
color: #fff;
transform: translateY(6px);
opacity: 0.9;
transition: transform .3s ease, opacity .3s ease;
z-index: 3;
}
.pvs-gallery__item:hover .pvs-gallery__meta { transform: translateY(0); opacity: 1; }
.pvs-gallery__meta strong {
display: block;
font-family: var(--pvs-font-headline);
font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
}
.pvs-gallery__meta span {
display: block;
color: var(--pvs-gold); font-size: 0.78rem;
letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
margin-top: 0.2rem;
}
.pvs-gallery__cta { text-align: left; margin-top: 2.5rem; }
/* ------------------------------------------------------------------
Services — dark photographic cards
------------------------------------------------------------------ */
.pvs-services-rich__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.pvs-service-tile {
position: relative; overflow: hidden;
border-radius: var(--pvs-radius-xl);
/* Tile height follows its image. Text body still overlays the
bottom via absolute positioning so it lands on the photo. */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
transition: transform .25s ease;
}
.pvs-service-tile:hover { transform: translateY(-4px); }
.pvs-service-tile__media { position: relative; }
.pvs-service-tile__media .pvs-image { width: 100%; border-radius: 0; }
.pvs-service-tile__media .pvs-image img { width: 100%; height: auto; border-radius: 0; }
.pvs-service-tile__media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8, 19, 31, 0.35) 0%, rgba(8, 19, 31, 0.92) 75%);
transition: opacity .3s ease;
}
.pvs-service-tile:hover .pvs-service-tile__media::after {
background: linear-gradient(180deg, rgba(8, 19, 31, 0.5) 0%, rgba(8, 19, 31, 0.95) 70%);
}
.pvs-service-tile__body {
position: absolute; inset: auto 1.75rem 1.5rem 1.75rem;
color: #fff;
}
.pvs-service-tile__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: rgba(255, 255, 255, 0.12); color: var(--pvs-secondary);
margin-bottom: 1rem;
backdrop-filter: blur(4px);
}
.pvs-service-tile h3 {
color: #fff; font-family: var(--pvs-font-display);
font-size: 1.4rem; font-weight: 500; margin-bottom: 0.5rem; letter-spacing: -0.01em;
}
.pvs-service-tile p {
color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.55; margin: 0;
}
/* ------------------------------------------------------------------
Industries — photographic cards
------------------------------------------------------------------ */
.pvs-industries-rich__grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 1.25rem;
min-height: 640px;
}
.pvs-industries-rich__grid > *:nth-child(1) { grid-row: span 2; }
.pvs-industry-tile {
position: relative; overflow: hidden;
border-radius: var(--pvs-radius-xl);
transition: transform .25s ease;
color: #fff;
}
.pvs-industry-tile:hover { transform: translateY(-3px); }
/* Industries are photographic category chips (backdrop image + dark
gradient + category name). Restore the uniform-grid design: media
fills the tile edge-to-edge, image covers, tile height comes from
the grid's aspect-ratio. Some cropping is intentional here — the
image is atmospheric, not content. */
.pvs-industry-tile__media {
position: absolute; inset: 0;
}
.pvs-industry-tile__media .pvs-image,
.pvs-industry-tile__media .pvs-image img {
width: 100%; height: 100%; border-radius: 0;
object-fit: cover;
}
.pvs-industry-tile__media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
transition: background .3s ease;
}
.pvs-industry-tile:hover .pvs-industry-tile__media::after {
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%);
}
.pvs-industry-tile__overlay {
position: absolute; inset: auto 1.5rem 1.25rem 1.5rem;
display: flex; flex-direction: column; gap: 0.5rem;
}
.pvs-industry-tile__flag {
align-self: flex-start;
padding: 0.25rem 0.65rem; border-radius: var(--pvs-radius-pill);
background: var(--pvs-secondary); color: #fff;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 0.5rem;
}
.pvs-industry-tile h3 {
color: #fff; font-family: var(--pvs-font-display);
font-size: 1.5rem; font-weight: 500; margin: 0; letter-spacing: -0.01em;
}
.pvs-industry-tile--featured h3 { font-size: 2.25rem; line-height: 1.05; }
.pvs-industry-tile__cta {
color: rgba(255, 255, 255, 0.85);
font-size: 0.85rem; font-weight: 600;
display: inline-flex; align-items: center; gap: 0.35rem;
opacity: 0; transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease;
}
.pvs-industry-tile:hover .pvs-industry-tile__cta { opacity: 1; transform: translateY(0); }
/* ------------------------------------------------------------------
About + Founder — dark editorial spread
------------------------------------------------------------------ */
.pvs-about-editorial__grid {
display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 4rem;
align-items: center; max-width: 1180px; margin: 0 auto;
}
.pvs-about-editorial__portrait { position: relative; }
.pvs-about-editorial__body { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; line-height: 1.75; }
.pvs-about-editorial__body .pvs-eyebrow { color: var(--pvs-secondary); }
.pvs-about-editorial__title {
font-family: var(--pvs-font-display);
font-size: clamp(2rem, 3.6vw, 3rem);
color: #fff;
line-height: 1.1; font-weight: 500; letter-spacing: -0.02em;
margin: 0.75rem 0 1.5rem;
}
.pvs-about-editorial__lead {
font-family: var(--pvs-font-display);
font-style: italic; font-size: 1.35rem;
color: rgba(255, 255, 255, 0.95) !important;
line-height: 1.5;
padding-left: 1.25rem;
border-left: 2px solid var(--pvs-secondary);
margin-bottom: 1.25rem;
}
.pvs-about-editorial__body p { color: rgba(255, 255, 255, 0.7); }
.pvs-about-editorial__signature { color: var(--pvs-secondary); font-family: var(--pvs-font-display); font-style: italic; margin: 1rem 0 1.5rem; }
.pvs-about-editorial__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* ------------------------------------------------------------------
Meet The Team — dark portrait strip
------------------------------------------------------------------ */
.pvs-team__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.pvs-team-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--pvs-radius-xl); overflow: hidden;
color: #fff;
transition: transform .25s ease, border-color .2s ease;
}
.pvs-team-card:hover { transform: translateY(-4px); border-color: var(--pvs-gold); }
.pvs-team-card__portrait { position: relative; }
.pvs-team-card__portrait .pvs-placeholder {
border-radius: 0; border: 0;
filter: grayscale(30%) contrast(1.05);
}
.pvs-team-card__portrait::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8,19,31,0.85) 100%);
}
.pvs-team-card__name {
color: #fff; font-family: var(--pvs-font-headline);
font-size: 1.05rem; font-weight: 600;
margin: 1.1rem 1.25rem 0.15rem; letter-spacing: -0.01em;
}
.pvs-team-card__role {
color: var(--pvs-gold); font-size: 0.85rem;
margin: 0 1.25rem 1.25rem;
letter-spacing: 0.02em; font-weight: 500;
}
/* ------------------------------------------------------------------
Clients — "In Good Company" richer strip
------------------------------------------------------------------ */
.pvs-clients--rich { background: #fbf7f0; }
.pvs-clients__head {
text-align: left; max-width: 620px; margin: 0 auto 2.5rem;
}
.pvs-clients__head h2 {
font-family: var(--pvs-font-headline);
font-size: clamp(1.6rem, 2.8vw, 2.25rem);
font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
margin: 0.6rem 0 0;
}
.pvs-clients--rich .pvs-clients__label { display: none; }
/* ------------------------------------------------------------------
Masonry — richer hover overlay
------------------------------------------------------------------ */
.pvs-masonry { grid-auto-rows: 240px; gap: 1.25rem; }
.pvs-masonry__item { position: relative; overflow: hidden; border-radius: var(--pvs-radius-xl); }
.pvs-masonry__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 1.5rem;
opacity: 0; transition: opacity .3s ease;
}
.pvs-masonry__item:hover .pvs-masonry__overlay { opacity: 1; }
.pvs-masonry__overlay .pvs-masonry__caption {
position: static; background: none; color: #fff; padding: 0; font-size: 1.05rem; font-weight: 600;
transform: none; opacity: 1;
}
.pvs-masonry__view {
color: var(--pvs-secondary); font-size: 0.85rem; font-weight: 600;
display: inline-flex; align-items: center; gap: 0.35rem;
margin-top: 0.35rem;
}
/* ------------------------------------------------------------------
Contact — dark rich footer moment
------------------------------------------------------------------ */
.pvs-contact--rich { color: #fff; }
.pvs-contact--rich .pvs-rich-head p { color: rgba(255, 255, 255, 0.72); }
.pvs-contact__panel--dark {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
}
.pvs-contact__panel--dark .pvs-contact__form { background: #fff; color: var(--pvs-text); }
.pvs-contact--rich .pvs-contact__map { margin-top: 3rem; }
/* Softer default h2s across the editorial homepage. */
.pvs-editorial-head { max-width: 720px; margin: 0 auto 3.5rem; text-align: left; }
.pvs-editorial-head .pvs-eyebrow { margin-bottom: 1.1rem; color: var(--pvs-secondary); }
.pvs-editorial-head h2 {
font-family: var(--pvs-font-display);
font-size: clamp(1.8rem, 3.6vw, 3.2rem);
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.015em;
}
.pvs-editorial-head p {
margin-top: 1rem;
font-size: 1.05rem; color: var(--pvs-text-muted); line-height: 1.6;
}
.pvs-editorial-head--split {
max-width: none; text-align: left;
display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
flex-wrap: wrap;
}
.pvs-editorial-head--dark .pvs-eyebrow { color: var(--pvs-secondary); }
.pvs-editorial-head--dark h2 { color: #fff; }
.pvs-editorial-head--dark p { color: rgba(255, 255, 255, 0.72); }
.pvs-editorial-tail { text-align: left; margin-top: 3rem; }
/* Statement section — magazine-style opening line under hero. */
.pvs-statement {
padding-block: clamp(4rem, 7vw, 7rem);
background: var(--pvs-bg);
}
.pvs-statement__body {
max-width: 900px; margin: 0 auto;
font-family: var(--pvs-font-display);
font-size: clamp(1.4rem, 2.6vw, 2rem);
line-height: 1.35; color: var(--pvs-text);
font-weight: 400; letter-spacing: -0.005em;
text-align: left;
}
/* Softer hero. */
.pvs-hero { padding-block: clamp(4rem, 7vw, 6.5rem) clamp(4rem, 7vw, 6.5rem); }
.pvs-hero__title {
font-family: var(--pvs-font-display);
font-size: clamp(2.6rem, 5vw, 4.5rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
}
.pvs-hero__title-accent {
background: none; -webkit-background-clip: unset; background-clip: unset;
color: var(--pvs-secondary);
font-style: italic;
}
.pvs-hero__lead { max-width: 32rem; }
/* Industries ribbon — chip row, not a heavy grid. */
.pvs-industry-ribbon {
display: flex; flex-wrap: wrap; gap: 0.75rem;
list-style: none; padding: 0; margin: 0;
}
.pvs-industry-chip {
display: inline-flex; align-items: center; gap: 0.65rem;
padding: 0.85rem 1.35rem;
border-radius: var(--pvs-radius-pill);
background: var(--pvs-bg-alt);
color: var(--pvs-text); font-weight: 500;
transition: background .2s ease, transform .15s ease;
}
.pvs-industry-chip:hover {
background: var(--pvs-primary); color: #fff; transform: translateY(-2px);
}
.pvs-industry-chip__icon { display: inline-flex; color: var(--pvs-secondary); }
.pvs-industry-chip:hover .pvs-industry-chip__icon { color: #fff; }
/* About + Founder combined editorial section. */
.pvs-about-editorial__grid {
display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem;
align-items: center; max-width: 1100px; margin: 0 auto;
}
.pvs-about-editorial__portrait {
position: relative; border-radius: var(--pvs-radius-xl); overflow: hidden;
box-shadow: var(--pvs-shadow-lg);
}
.pvs-about-editorial__portrait .pvs-placeholder { border-radius: 0; border: 0; }
.pvs-about-editorial__portrait-cap {
position: absolute; left: 1.25rem; bottom: 1.25rem;
padding: 0.75rem 1rem; border-radius: var(--pvs-radius-md);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
display: flex; flex-direction: column; gap: 0.15rem;
}
.pvs-about-editorial__portrait-cap strong { font-weight: 700; color: var(--pvs-text); font-size: 1rem; }
.pvs-about-editorial__portrait-cap span { font-size: 0.8rem; color: var(--pvs-secondary); font-weight: 500; }
.pvs-about-editorial__body { font-size: 1.05rem; line-height: 1.75; }
.pvs-about-editorial__body p { color: var(--pvs-text-muted); }
.pvs-about-editorial__lead {
font-family: var(--pvs-font-display);
font-style: italic; font-size: 1.35rem;
color: var(--pvs-text) !important;
line-height: 1.5;
padding-left: 1.25rem;
border-left: 2px solid var(--pvs-secondary);
margin-bottom: 1.25rem;
}
.pvs-about-editorial__signature {
margin: 1rem 0 1.5rem;
color: var(--pvs-secondary);
font-family: var(--pvs-font-display);
font-style: italic;
}
/* Bigger portfolio masonry. */
.pvs-masonry { grid-auto-rows: 220px; gap: 1.25rem; }
/* Client marquee — quieter background, still visible. */
.pvs-clients__label { margin-bottom: 2rem; }
/* --- Booking strip (top ribbon) --- */
.pvs-booking-strip {
background: linear-gradient(90deg, var(--pvs-primary-dark) 0%, var(--pvs-primary) 100%);
color: #fff;
position: relative; z-index: 60;
}
.pvs-booking-strip__inner {
max-width: var(--pvs-container-max);
margin-inline: auto;
padding: 0.55rem var(--pvs-container-gutter);
display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
font-size: 0.9rem;
}
.pvs-booking-strip__pulse {
width: 10px; height: 10px; border-radius: 50%;
background: var(--pvs-secondary);
box-shadow: 0 0 0 0 rgba(245, 120, 38, 0.7);
animation: pvs-pulse 1.8s infinite;
}
@keyframes pvs-pulse {
0% { box-shadow: 0 0 0 0 rgba(245, 120, 38, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(245, 120, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 120, 38, 0); }
}
.pvs-booking-strip__text { flex: 1; min-width: 220px; }
.pvs-booking-strip__cta {
display: inline-flex; align-items: center; gap: 0.35rem;
font-weight: 700; color: var(--pvs-secondary);
transition: color .2s ease;
}
.pvs-booking-strip__cta:hover { color: #fff; }
/* --- Hero proof link --- */
.pvs-hero__proof-link {
display: inline-flex; align-items: baseline; gap: 0.4rem;
color: inherit;
border-bottom: 1px dashed rgba(30, 58, 86, 0.35);
padding-bottom: 1px;
}
.pvs-hero__proof-link:hover { color: var(--pvs-secondary); border-color: var(--pvs-secondary); }
/* --- Pricing 4-col --- */
.pvs-pricing-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pvs-pricing-card__price {
font-size: 1.35rem; font-weight: 800; color: var(--pvs-primary); margin: 0;
letter-spacing: -0.01em;
}
.pvs-pricing-card--featured .pvs-pricing-card__price { color: var(--pvs-secondary); }
.pvs-pricing-note {
max-width: 720px; margin: 2rem auto 0;
text-align: left; font-size: 0.9rem; color: var(--pvs-text-muted);
}
/* --- Case studies --- */
.pvs-cases__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.pvs-case {
background: #fff; border-radius: var(--pvs-radius-xl); overflow: hidden;
box-shadow: var(--pvs-shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
display: flex; flex-direction: column;
}
.pvs-case:hover { transform: translateY(-4px); box-shadow: var(--pvs-shadow-md); }
.pvs-case__thumb .pvs-image { border-radius: 0; }
/* ------------------------------------------------------------------
Marketplace mockup — each case card's thumb is a mini product
listing on Amazon / Flipkart / Meesho, styled to look like the
real thing so the edited image reads as "shipped and live."
------------------------------------------------------------------ */
.pvs-mockup {
display: flex; flex-direction: column;
background: #fff;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
border-bottom: 1px solid #e6e8ec;
overflow: hidden;
color: #0f1111;
}
/* ---- Phone status bar (iOS-style) — time on left, cell/wifi/battery
on right. Colour continues into the marketplace header below so the
whole top strip reads as a single app chrome. ---- */
.pvs-mockup__statusbar {
display: flex; align-items: center; justify-content: space-between;
padding: 0.28rem 0.75rem 0.22rem;
color: #fff;
font-family: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
font-size: 0.72rem;
line-height: 1;
}
.pvs-mockup[data-marketplace="amazon"] .pvs-mockup__statusbar { background: #131921; }
.pvs-mockup[data-marketplace="flipkart"] .pvs-mockup__statusbar { background: #2874f0; }
.pvs-mockup[data-marketplace="meesho"] .pvs-mockup__statusbar { background: #f43397; }
.pvs-mockup__statusbar-time {
font-weight: 600;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.pvs-mockup__statusbar-left {
display: inline-flex; align-items: center; gap: 8px;
}
.pvs-mockup__statusbar-icons {
display: inline-flex; align-items: center; gap: 6px;
}
/* Notification icons (Android-style, on the left after the time) */
.pvs-mockup__notifs {
display: inline-flex; align-items: center; gap: 3px;
opacity: 0.95;
}
.pvs-mockup__notif {
display: inline-flex; align-items: center; justify-content: center;
width: 11px; height: 11px;
color: currentColor;
}
.pvs-mockup__notif svg { width: 100%; height: 100%; display: block; }
/* Cellular signal — 4 ascending bars */
.pvs-mockup__signal {
display: inline-flex; align-items: flex-end; gap: 1px;
height: 10px;
}
.pvs-mockup__signal i {
display: block; width: 3px;
background: currentColor;
border-radius: 0.5px;
}
.pvs-mockup__signal i:nth-child(1) { height: 3px; }
.pvs-mockup__signal i:nth-child(2) { height: 5px; }
.pvs-mockup__signal i:nth-child(3) { height: 7px; }
.pvs-mockup__signal i:nth-child(4) { height: 9px; }
/* WiFi — inline SVG uses currentColor so it matches text tint */
.pvs-mockup__wifi {
display: inline-flex; align-items: center;
width: 14px; height: 10px;
color: #fff;
}
.pvs-mockup__wifi svg { width: 100%; height: 100%; display: block; }
/* Battery — hollow outline with fill + terminal cap */
.pvs-mockup__battery {
display: inline-block; position: relative;
width: 22px; height: 10px;
border: 1px solid currentColor;
border-radius: 2px;
padding: 1px;
box-sizing: border-box;
opacity: 0.95;
}
.pvs-mockup__battery::after {
content: '';
position: absolute; right: -3px; top: 50%;
transform: translateY(-50%);
width: 2px; height: 4px;
background: currentColor;
border-radius: 0 1px 1px 0;
}
.pvs-mockup__battery-fill {
display: block; height: 100%; width: 82%;
background: currentColor;
border-radius: 1px;
}
/* ---- Header bar with search field ---- */
.pvs-mockup__bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center; gap: 0.55rem;
padding: 0.5rem 0.7rem;
color: #fff;
}
.pvs-mockup[data-marketplace="amazon"] .pvs-mockup__bar { background: #131921; }
.pvs-mockup[data-marketplace="flipkart"] .pvs-mockup__bar { background: #2874f0; }
.pvs-mockup[data-marketplace="meesho"] .pvs-mockup__bar { background: #f43397; }
/* Logos */
.pvs-mockup__logo {
display: inline-flex; align-items: baseline;
font-weight: 700; line-height: 1;
letter-spacing: -0.02em;
}
.pvs-mockup__logo--amazon {
position: relative;
font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
font-size: 0.95rem;
padding-bottom: 3px;
}
.pvs-mockup__logo--amazon em { color: #ff9900; font-style: normal; margin-left: 1px; }
.pvs-mockup__logo--amazon::after {
content: '';
position: absolute; left: 8%; right: 22%; bottom: -1px;
height: 8px;
border: solid #ff9900;
border-width: 0 2px 2px 0;
border-radius: 0 0 60% 0 / 0 0 100% 0;
transform: rotate(-15deg);
}
.pvs-mockup__logo--flipkart {
flex-direction: column;
align-items: flex-start;
gap: 0;
font-family: 'Segoe UI', Arial, sans-serif;
}
.pvs-mockup__logo--flipkart .pvs-mockup__logo-mark {
font-style: italic; font-weight: 700; font-size: 0.85rem;
line-height: 1; color: #fff;
}
.pvs-mockup__logo--flipkart .pvs-mockup__logo-tag {
display: inline-flex; align-items: center; gap: 3px;
font-size: 0.5rem; font-style: italic; font-weight: 500;
line-height: 1; color: #fff;
margin-top: 1px;
}
.pvs-mockup__logo--flipkart .pvs-mockup__logo-tag b { color: #fdd835; font-weight: 700; }
.pvs-mockup__logo--flipkart .pvs-mockup__logo-star { color: #fdd835; font-size: 0.55rem; margin-left: 1px; }
.pvs-mockup__logo--meesho {
font-family: 'Segoe UI', system-ui, sans-serif;
text-transform: lowercase;
font-size: 1.05rem;
letter-spacing: -0.03em;
font-weight: 800;
}
/* Search bar — the biggest single win for realism */
.pvs-mockup__searchbar {
display: flex; align-items: center;
background: #fff;
border-radius: 3px;
padding: 0.28rem 0.5rem;
gap: 0.35rem;
font-size: 0.6rem;
color: #565959;
overflow: hidden;
min-width: 0;
}
.pvs-mockup[data-marketplace="meesho"] .pvs-mockup__searchbar { border-radius: 8px; }
.pvs-mockup__search-icon { color: #888; font-size: 0.7rem; flex-shrink: 0; }
.pvs-mockup__search-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: #767676;
font-weight: 400;
}
.pvs-mockup[data-marketplace="amazon"] .pvs-mockup__searchbar {
border-right: 4px solid #febd68;
padding-right: 0.7rem;
}
.pvs-mockup__bar-icon {
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.9rem; width: 18px; height: 18px; opacity: 0.95;
}
/* Amazon secondary "Deliver to" line */
.pvs-mockup__location {
display: flex; align-items: center; gap: 0.3rem;
padding: 0.3rem 0.75rem;
background: #232f3e;
color: #cddce6;
font-size: 0.62rem;
font-weight: 500;
}
.pvs-mockup__location span:first-child {
color: #fff; font-size: 0.75rem;
}
/* ---- Product image stage ---- */
.pvs-mockup__stage {
position: relative;
background: #fff;
padding: 0.65rem 0.7rem 0.5rem;
}
.pvs-mockup__stage .pvs-image {
border-radius: 2px;
overflow: hidden;
background: #fff;
/* Let the image decide its own height. No fixed aspect ratio. */
aspect-ratio: auto;
}
.pvs-mockup__stage .pvs-image img {
display: block;
width: 100%;
height: auto;
}
.pvs-mockup__heart {
position: absolute; top: 0.9rem; right: 1rem; z-index: 3;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
color: #565959; font-size: 0.9rem;
}
/* Amazon's Choice badge (two-line dark chip) */
.pvs-mockup__choice {
position: absolute; top: 0.9rem; left: 1rem; z-index: 3;
display: inline-flex; flex-direction: column; align-items: flex-start;
background: #232f3e; color: #fff;
padding: 0.2rem 0.45rem;
border-radius: 3px;
font-size: 0.55rem; line-height: 1.15;
letter-spacing: 0.01em;
}
.pvs-mockup__choice b { font-weight: 700; color: #fff; }
.pvs-mockup__choice em { font-style: normal; font-weight: 700; color: #ff9900; margin-top: 1px; }
/* Flipkart "Assured" tag */
.pvs-mockup__assured {
position: absolute; bottom: 0.75rem; left: 1rem; z-index: 3;
display: inline-flex; align-items: center;
background: #fff;
padding: 0.15rem 0.35rem 0.15rem 0.15rem;
border: 1px solid #e0e0e0;
border-radius: 2px;
font-size: 0.55rem; font-weight: 700;
color: #2874f0;
line-height: 1;
}
.pvs-mockup__assured-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 12px; height: 12px;
background: #2874f0; color: #fdd835;
font-style: italic; font-weight: 900;
font-family: Arial, sans-serif;
border-radius: 2px;
margin-right: 3px;
font-size: 0.6rem;
}
.pvs-mockup__assured-text { color: #2874f0; }
/* Bestseller / Trending ribbon */
.pvs-mockup__ribbon {
position: absolute; top: 0.9rem; left: 1rem; z-index: 3;
padding: 0.2rem 0.55rem;
border-radius: 2px;
font-size: 0.58rem; font-weight: 700; line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pvs-mockup__ribbon--flipkart { background: #f7c948; color: #212121; }
.pvs-mockup__ribbon--meesho { background: #ffe9ee; color: #f43397; }
/* ---- Details block ---- */
.pvs-mockup__details {
display: flex; flex-direction: column; gap: 0.35rem;
padding: 0.35rem 0.85rem 0.9rem;
color: #0f1111;
}
.pvs-mockup__title {
margin: 0;
font-size: 0.8rem; font-weight: 500;
line-height: 1.32; color: #0f1111;
display: -webkit-box;
-webkit-line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pvs-mockup__rating-row {
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.72rem;
margin-top: 0.15rem;
}
.pvs-mockup__rating-value {
color: #0f1111; font-weight: 500; font-size: 0.75rem;
}
.pvs-mockup__stars--amazon {
color: #ffa41c;
letter-spacing: -0.05em;
font-size: 0.72rem;
line-height: 1;
}
.pvs-mockup__rating-count-link {
color: #007185; font-size: 0.72rem;
text-decoration: none;
}
.pvs-mockup__rating-chip {
display: inline-flex; align-items: center;
padding: 0.15rem 0.35rem;
border-radius: 3px;
font-size: 0.68rem; font-weight: 700; line-height: 1.15;
}
.pvs-mockup__rating-chip--flipkart { background: #388e3c; color: #fff; }
.pvs-mockup__rating-chip--meesho { background: #388e3c; color: #fff; }
.pvs-mockup__rating-count {
color: #878787; font-size: 0.7rem; font-weight: 600;
}
.pvs-mockup__stock {
color: #067d62; font-weight: 500; font-size: 0.75rem;
}
.pvs-mockup__discount-row {
display: flex; align-items: center; gap: 0.5rem;
margin-top: 0.15rem;
}
.pvs-mockup__discount {
font-size: 0.78rem; font-weight: 700;
line-height: 1;
}
.pvs-mockup__discount--flipkart { color: #388e3c; }
.pvs-mockup__discount--meesho { color: #388e3c; }
.pvs-mockup__saver {
background: #ff6161; color: #fff;
padding: 0.12rem 0.3rem;
border-radius: 2px;
font-size: 0.55rem; font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.pvs-mockup__delivery {
font-size: 0.72rem; color: #565959; line-height: 1.35;
}
.pvs-mockup__delivery b { color: #0f1111; font-weight: 700; }
.pvs-mockup__delivery--flipkart b { color: #388e3c; }
.pvs-mockup__delivery--meesho b { color: #388e3c; }
/* Buttons — brand-accurate proportions */
.pvs-mockup__btn {
margin-top: 0.5rem;
align-self: flex-start;
padding: 0.5rem 1.1rem;
font-family: inherit;
font-size: 0.72rem; font-weight: 700;
line-height: 1;
cursor: default;
pointer-events: none;
transition: none;
}
.pvs-mockup__button-stack {
display: flex; flex-direction: column; gap: 0.4rem;
margin-top: 0.5rem;
}
.pvs-mockup__button-stack .pvs-mockup__btn {
margin-top: 0; width: 100%;
padding: 0.5rem 0.9rem;
text-align: left;
}
.pvs-mockup__btn--amazon-cart {
background: linear-gradient(to bottom, #ffd814, #f7ca00);
color: #0f1111;
border: 1px solid #fcd200;
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
.pvs-mockup__btn--amazon-buy {
background: linear-gradient(to bottom, #ffa41c, #ff8f00);
color: #0f1111;
border: 1px solid #ff8f00;
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset;
}
.pvs-mockup__btn--flipkart {
background: #ff9f00; color: #fff;
border: 1px solid #ff9f00;
border-radius: 2px;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 0.65rem 1.4rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
font-size: 0.75rem;
}
.pvs-mockup__btn--meesho {
background: #f43397; color: #fff;
border: 1px solid #f43397;
border-radius: 4px;
padding: 0.6rem 1.4rem;
letter-spacing: 0.02em;
font-size: 0.72rem;
}
/* Marketplace mockup — responsive rules.
The case grid collapses from 3 → 1 column at ≤1024px, so cards
suddenly become full-width. Cap the case width when in single
column so the mockup keeps its "mobile listing" scale (real
listings aren't 700px wide). Also tighten paddings / type on the
narrowest viewports so nothing clips. */
@media (max-width: 1024px) {
.pvs-cases__grid {
justify-items: center;
}
.pvs-case {
max-width: 460px;
width: 100%;
}
}
@media (max-width: 720px) {
.pvs-mockup__bar {
padding: 0.45rem 0.6rem;
gap: 0.4rem;
}
.pvs-mockup__searchbar {
font-size: 0.62rem;
padding: 0.3rem 0.45rem;
}
.pvs-mockup__logo--amazon { font-size: 0.9rem; }
.pvs-mockup__logo--meesho { font-size: 1rem; }
.pvs-mockup__logo--flipkart .pvs-mockup__logo-mark { font-size: 0.78rem; }
.pvs-mockup__title { font-size: 0.86rem; }
.pvs-mockup__stock,
.pvs-mockup__delivery,
.pvs-mockup__discount { font-size: 0.78rem; }
.pvs-mockup__discount { font-size: 0.85rem; }
.pvs-mockup__rating-value,
.pvs-mockup__rating-count,
.pvs-mockup__rating-count-link,
.pvs-mockup__stars--amazon { font-size: 0.78rem; }
.pvs-mockup__rating-chip { font-size: 0.75rem; padding: 0.2rem 0.4rem; }
.pvs-mockup__btn { font-size: 0.78rem; padding: 0.6rem 1.3rem; }
.pvs-mockup__button-stack .pvs-mockup__btn { padding: 0.6rem 0.9rem; }
.pvs-mockup__location { font-size: 0.68rem; padding: 0.35rem 0.85rem; }
}
@media (max-width: 400px) {
.pvs-mockup__statusbar {
padding: 0.25rem 0.55rem 0.2rem;
font-size: 0.65rem;
}
.pvs-mockup__statusbar-left { gap: 6px; }
.pvs-mockup__notifs { gap: 2px; }
.pvs-mockup__notif { width: 10px; height: 10px; }
.pvs-mockup__battery { width: 20px; height: 9px; }
.pvs-mockup__signal { height: 9px; }
.pvs-mockup__signal i:nth-child(4) { height: 8px; }
/* Tighten the header so search bar + logo + cart fit at ~320px. */
.pvs-mockup__bar {
padding: 0.4rem 0.5rem;
gap: 0.3rem;
}
.pvs-mockup__searchbar {
padding: 0.28rem 0.4rem;
font-size: 0.58rem;
}
.pvs-mockup__search-text {
/* Real apps also truncate placeholder text at narrow widths. */
max-width: 130px;
}
.pvs-mockup__logo--amazon { font-size: 0.82rem; }
.pvs-mockup__logo--meesho { font-size: 0.95rem; }
.pvs-mockup__logo--flipkart .pvs-mockup__logo-mark { font-size: 0.72rem; }
.pvs-mockup__logo--flipkart .pvs-mockup__logo-tag { display: none; }
.pvs-mockup__bar-icon { font-size: 0.85rem; width: 16px; height: 16px; }
.pvs-mockup__stage { padding: 0.55rem 0.55rem 0.4rem; }
.pvs-mockup__heart {
top: 0.75rem; right: 0.75rem;
width: 22px; height: 22px; font-size: 0.8rem;
}
.pvs-mockup__choice,
.pvs-mockup__ribbon { top: 0.75rem; left: 0.75rem; }
.pvs-mockup__assured { bottom: 0.6rem; left: 0.75rem; }
.pvs-mockup__details { padding: 0.35rem 0.7rem 0.75rem; }
}
.pvs-case__body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.pvs-case__category {
font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--pvs-secondary); font-weight: 700;
}
.pvs-case__brand { font-size: 1.35rem; margin: 0; }
.pvs-case__facts {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem;
margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--pvs-border); border-bottom: 1px solid var(--pvs-border);
}
.pvs-case__facts div { display: flex; flex-direction: column; gap: 0.15rem; }
.pvs-case__facts dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pvs-text-muted); font-weight: 700; }
.pvs-case__facts dd { margin: 0; font-weight: 600; color: var(--pvs-text); font-size: 0.95rem; }
.pvs-case__outcome { color: var(--pvs-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
/* --- Comparison table --- */
.pvs-compare-table__wrap { overflow-x: auto; margin-top: 1rem; }
.pvs-compare-table {
width: 100%; border-collapse: separate; border-spacing: 0;
background: #fff; border-radius: var(--pvs-radius-xl); overflow: hidden;
box-shadow: var(--pvs-shadow-md);
min-width: 720px;
}
.pvs-compare-table th,
.pvs-compare-table td {
padding: 1rem 1.25rem;
text-align: left;
border-bottom: 1px solid var(--pvs-border);
}
.pvs-compare-table thead th {
background: var(--pvs-bg-alt);
font-size: 0.9rem; font-weight: 700;
color: var(--pvs-text);
}
.pvs-compare-table tbody th {
text-align: left; font-weight: 600; color: var(--pvs-text);
background: #fff;
width: 26%;
}
.pvs-compare-table td { color: var(--pvs-text-muted); font-weight: 500; }
.pvs-compare-table tr:last-child th,
.pvs-compare-table tr:last-child td { border-bottom: 0; }
.pvs-compare-table th.is-us,
.pvs-compare-table td.is-us {
background: linear-gradient(180deg, rgba(245,120,38,0.1) 0%, rgba(245,120,38,0.03) 100%);
color: var(--pvs-primary);
font-weight: 600;
}
.pvs-compare-check { color: var(--pvs-whatsapp); display: inline-flex; }
.pvs-compare-cross { color: #e5484d; font-size: 1.3rem; line-height: 1; }
.pvs-compare-partial { color: var(--pvs-secondary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.pvs-compare-na { color: rgba(15,35,55,0.25); font-size: 1.2rem; }
/* --- Brand marquee --- */
.pvs-clients__marquee {
margin-top: 1.5rem;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pvs-clients__marquee-track {
display: inline-flex; gap: 2.5rem;
white-space: nowrap;
animation: pvs-marquee 40s linear infinite;
will-change: transform;
}
.pvs-clients__marquee-item {
font-family: var(--pvs-font-display);
font-size: 1.15rem; color: var(--pvs-text-muted); font-weight: 500;
letter-spacing: 0.02em; font-style: italic;
}
@keyframes pvs-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.pvs-clients__marquee-track { animation: none; flex-wrap: wrap; white-space: normal; }
}
/* --- Industry featured card --- */
.pvs-industry-card { position: relative; }
.pvs-industry-card--featured {
border-color: var(--pvs-secondary);
background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
box-shadow: 0 12px 24px rgba(245, 120, 38, 0.08);
}
.pvs-industry-card__flag {
position: absolute; top: -10px; right: 1rem;
padding: 0.25rem 0.65rem; border-radius: var(--pvs-radius-pill);
background: var(--pvs-secondary); color: #fff;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.pvs-industry-card--featured .pvs-icon-badge { background: rgba(245, 120, 38, 0.15); color: var(--pvs-secondary); }
/* --- About stat link --- */
.pvs-about__stat-link {
display: block; color: inherit;
transition: transform .2s ease;
}
.pvs-about__stat-link:hover { transform: translateY(-2px); }
.pvs-about__stat-link:hover strong { color: var(--pvs-secondary); }
/* --- Testimonials rating as link --- */
.pvs-testimonials__rating {
color: inherit; text-decoration: none;
transition: transform .2s ease;
}
.pvs-testimonials__rating:hover { transform: translateY(-2px); }
.pvs-testimonials__rating:hover .pvs-testimonials__meta { color: var(--pvs-secondary); }
.pvs-testimonials__meta .pvs-icon svg { width: 14px; height: 14px; }
/* --- Founder bio story styling --- */
.pvs-founder__bio--story {
font-style: italic; color: var(--pvs-text);
border-left: 3px solid var(--pvs-secondary);
padding-left: 1rem;
font-size: 1.1rem;
}
.pvs-founder__signature {
margin-top: 0.5rem; color: var(--pvs-text-muted);
font-family: var(--pvs-font-display); font-style: italic;
font-size: 1.05rem;
}
/* --- Shipping paths (2-col) --- */
.pvs-shipping__paths {
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
margin-top: 1.5rem;
}
.pvs-shipping__path {
background: #fff; border: 1px solid var(--pvs-border);
border-radius: var(--pvs-radius-lg); padding: 1.75rem;
}
.pvs-shipping__path--alt {
background: linear-gradient(180deg, #fff 0%, #f6f9fc 100%);
border-color: rgba(30, 58, 86, 0.15);
}
.pvs-shipping__path h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.pvs-shipping__path-desc { color: var(--pvs-text-muted); font-size: 0.95rem; margin-bottom: 1.25rem; }
/* ---------------------------------------------------------------------
Blog — home.php + archive.php shared UI
------------------------------------------------------------------ */
.pvs-blog-header { background: #fbf7f0; padding-block: clamp(4rem, 6vw, 6rem) 2.5rem; }
.pvs-blog-header__inner { max-width: 780px; margin: 0 auto; text-align: left; }
.pvs-blog-header__inner h1 {
font-family: var(--pvs-font-headline);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
margin: 0.5rem 0 0;
}
.pvs-blog-header__desc {
margin: 1rem auto 0; max-width: 560px;
font-size: 1.05rem; line-height: 1.6; color: var(--pvs-text-muted);
}
.pvs-blog-header__actions { margin-top: 1.75rem; }
/* Filter chips (real categories) */
.pvs-blog-filters {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 0.5rem; margin-top: 2rem;
}
.pvs-blog-filter {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.55rem 1rem;
border-radius: var(--pvs-radius-pill);
background: #fff; border: 1px solid var(--pvs-border);
font-size: 0.9rem; font-weight: 500; color: var(--pvs-text);
transition: background .2s ease, color .2s ease, border-color .2s ease;
text-decoration: none;
}
.pvs-blog-filter:hover { border-color: var(--pvs-gold); }
.pvs-blog-filter.is-active {
background: var(--pvs-primary); color: #fff; border-color: var(--pvs-primary);
}
.pvs-blog-filter__count {
font-size: 0.75rem; opacity: 0.7;
padding: 0.1rem 0.4rem; border-radius: var(--pvs-radius-pill);
background: rgba(0, 0, 0, 0.05);
}
.pvs-blog-filter.is-active .pvs-blog-filter__count { background: rgba(255, 255, 255, 0.15); }
/* Feed section */
.pvs-blog-feed { padding-block: clamp(3rem, 5vw, 5rem); background: var(--pvs-bg); }
/* Featured hero card (first post on page 1) */
.pvs-blog-featured {
display: block;
background: var(--pvs-bg-alt);
border-radius: var(--pvs-radius-xl);
overflow: hidden;
margin-bottom: 3rem;
box-shadow: var(--pvs-shadow-sm);
transition: transform .3s ease, box-shadow .3s ease;
}
.pvs-blog-featured:hover { transform: translateY(-4px); box-shadow: var(--pvs-shadow-md); }
.pvs-blog-featured__link {
display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
color: inherit; text-decoration: none;
}
.pvs-blog-featured__media {
position: relative;
background: var(--pvs-bg-soft);
overflow: hidden;
}
.pvs-blog-featured__media img,
.pvs-blog-featured__media .pvs-placeholder {
width: 100%; height: auto;
display: block; border-radius: 0;
}
.pvs-blog-featured__stamp {
position: absolute; top: 1.25rem; left: 1.25rem;
padding: 0.35rem 0.85rem; border-radius: var(--pvs-radius-pill);
background: var(--pvs-gold); color: #0d1e2f;
font-family: var(--pvs-font-headline);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
z-index: 2;
}
.pvs-blog-featured__body {
padding: 2.25rem 2.5rem;
display: flex; flex-direction: column; justify-content: center;
gap: 0.75rem;
}
.pvs-blog-featured__title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.5rem, 2.5vw, 2rem);
line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;
margin: 0.25rem 0 0.5rem;
}
.pvs-blog-featured__excerpt { color: var(--pvs-text-muted); line-height: 1.6; }
.pvs-blog-featured__excerpt p { margin: 0; }
/* Grid of secondary cards */
.pvs-blog-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.pvs-blog-card {
background: #fff;
border-radius: var(--pvs-radius-xl);
overflow: hidden;
border: 1px solid var(--pvs-border);
transition: transform .25s ease, box-shadow .25s ease;
display: flex; flex-direction: column;
}
.pvs-blog-card:hover { transform: translateY(-4px); box-shadow: var(--pvs-shadow-md); }
.pvs-blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.pvs-blog-card__media {
position: relative;
background: var(--pvs-bg-soft);
overflow: hidden;
}
.pvs-blog-card__media img,
.pvs-blog-card__media .pvs-placeholder {
width: 100%; height: auto;
display: block; border-radius: 0;
}
.pvs-blog-card__body {
padding: 1.5rem 1.5rem 1.75rem;
display: flex; flex-direction: column; gap: 0.6rem;
flex: 1;
}
.pvs-blog-card__cat {
display: inline-block; align-self: flex-start;
font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--pvs-gold); font-weight: 700;
}
.pvs-blog-card__title {
font-family: var(--pvs-font-headline);
font-size: 1.2rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em;
margin: 0;
}
.pvs-blog-card__excerpt {
color: var(--pvs-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0;
flex: 1;
}
.pvs-blog-card__meta {
display: flex; gap: 0.4rem; flex-wrap: wrap;
font-size: 0.8rem; color: var(--pvs-text-muted);
margin-top: 0.5rem;
}
/* Pagination */
.pvs-blog-pagination { margin-top: 3.5rem; text-align: left; }
.pvs-blog-pagination .nav-links { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.pvs-blog-pagination a,
.pvs-blog-pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 0.9rem;
border-radius: var(--pvs-radius-pill);
font-size: 0.9rem; font-weight: 600;
text-decoration: none; color: var(--pvs-text);
background: #fff; border: 1px solid var(--pvs-border);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pvs-blog-pagination a:hover { border-color: var(--pvs-gold); }
.pvs-blog-pagination .current { background: var(--pvs-primary); color: #fff; border-color: var(--pvs-primary); }
.pvs-blog-pagination .dots { border: 0; background: transparent; }
/* ---------------------------------------------------------------------
Single post (single.php)
------------------------------------------------------------------ */
.pvs-post-hero {
padding-block: clamp(3.5rem, 6vw, 5rem) 3rem;
background: linear-gradient(180deg, #0d1e2f 0%, #08131f 100%);
color: #fff;
}
.pvs-post-hero__inner { max-width: 780px; margin: 0 auto; text-align: left; }
.pvs-post-hero .pvs-breadcrumbs { color: rgba(255, 255, 255, 0.55); margin-bottom: 1rem; }
.pvs-post-hero__cat {
display: inline-block;
font-family: var(--pvs-font-headline);
font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--pvs-gold); font-weight: 700;
text-decoration: none;
padding: 0.4rem 0.9rem;
border: 1px solid rgba(201, 162, 75, 0.4);
border-radius: var(--pvs-radius-pill);
}
.pvs-post-hero__title {
font-family: var(--pvs-font-display);
font-size: clamp(2rem, 4.4vw, 3.75rem);
line-height: 1.1; font-weight: 500; letter-spacing: -0.015em;
color: #fff;
margin: 1.5rem 0 1.25rem;
}
.pvs-post-hero__meta {
display: flex; justify-content: center; flex-wrap: wrap;
gap: 0.4rem 0.75rem;
color: rgba(255, 255, 255, 0.65); font-size: 0.9rem;
}
.pvs-post-hero__meta span[aria-hidden] { color: var(--pvs-gold); }
.pvs-post-featured {
max-width: 1160px; margin: -3rem auto 0; padding: 0 var(--pvs-container-gutter);
position: relative; z-index: 2;
}
.pvs-post-featured__img {
width: 100%; height: auto; display: block;
border-radius: var(--pvs-radius-xl);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.pvs-post-featured__caption {
margin-top: 0.75rem; text-align: left;
font-size: 0.85rem; color: var(--pvs-text-muted); font-style: italic;
}
.pvs-post-body { padding-block: clamp(3rem, 5vw, 5rem); }
.pvs-post-body__article { max-width: 720px; margin: 0 auto; }
.pvs-post-body__content { font-size: 1.1rem; line-height: 1.75; color: var(--pvs-text); }
.pvs-post-body__content > * + * { margin-top: 1.5rem; }
.pvs-post-body__content h2 {
font-family: var(--pvs-font-headline);
font-size: 1.75rem; letter-spacing: -0.02em; margin-top: 2.5rem;
}
.pvs-post-body__content h3 {
font-family: var(--pvs-font-headline);
font-size: 1.35rem; letter-spacing: -0.015em; margin-top: 2rem;
}
.pvs-post-body__content p { color: var(--pvs-text); }
.pvs-post-body__content a { color: var(--pvs-secondary); text-decoration: underline; text-underline-offset: 3px; }
.pvs-post-body__content blockquote {
border-left: 3px solid var(--pvs-gold);
padding: 0.25rem 0 0.25rem 1.5rem;
font-family: var(--pvs-font-display); font-style: italic;
font-size: 1.3rem; color: var(--pvs-text);
}
.pvs-post-body__content ul,
.pvs-post-body__content ol { padding-left: 1.75rem; }
.pvs-post-body__content li { margin-bottom: 0.5rem; }
.pvs-post-body__content img { border-radius: var(--pvs-radius-md); max-width: 100%; height: auto; }
.pvs-post-body__content code {
background: var(--pvs-bg-alt); padding: 0.15rem 0.35rem; border-radius: 4px;
font-size: 0.9em;
}
.pvs-post-body__content pre {
background: var(--pvs-bg-darker); color: #eaeaea;
padding: 1rem 1.25rem; border-radius: var(--pvs-radius-md);
overflow-x: auto;
}
.pvs-post-body__tags {
list-style: none; padding: 0; margin: 3rem 0 0;
display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.pvs-post-body__tags li {
font-size: 0.8rem; color: var(--pvs-text-muted);
padding: 0.35rem 0.75rem; background: var(--pvs-bg-alt);
border-radius: var(--pvs-radius-pill);
}
/* Author card */
.pvs-post-author {
display: grid; grid-template-columns: 96px 1fr; gap: 1.5rem;
margin-top: 3.5rem; padding: 2rem;
background: var(--pvs-bg-alt); border-radius: var(--pvs-radius-xl);
align-items: center;
}
.pvs-post-author__avatar img {
width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--pvs-gold);
}
.pvs-post-author__name {
font-family: var(--pvs-font-headline);
font-size: 1.2rem; margin: 0.35rem 0 0.5rem; letter-spacing: -0.01em;
}
.pvs-post-author__bio { margin: 0; color: var(--pvs-text-muted); font-size: 0.95rem; line-height: 1.55; }
/* Related posts */
.pvs-related__head { text-align: left; margin: 0 auto 2.5rem; max-width: 640px; }
.pvs-related__head h2 {
font-family: var(--pvs-font-headline);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700; letter-spacing: -0.02em; margin-top: 0.5rem;
}
/* Post nav (prev / next) */
.pvs-post-nav-wrap { border-top: 1px solid var(--pvs-border); }
.pvs-post-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pvs-post-nav-link {
padding: 1.5rem 1.75rem;
background: var(--pvs-bg-alt);
border-radius: var(--pvs-radius-lg);
display: flex; flex-direction: column; gap: 0.35rem;
color: inherit; text-decoration: none;
transition: background .2s ease, transform .2s ease;
}
.pvs-post-nav-link:hover { background: var(--pvs-bg-soft); transform: translateY(-2px); }
.pvs-post-nav-link__label {
font-family: var(--pvs-font-headline);
font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--pvs-gold); font-weight: 700;
}
.pvs-post-nav-link--next { text-align: right; }
.pvs-post-nav-link__title {
font-family: var(--pvs-font-headline);
font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
color: var(--pvs-text);
}
.pvs-post-comments { max-width: 780px; margin: 0 auto; padding-block: 3rem; }
/* ---------------------------------------------------------------------
10. Interior pages
------------------------------------------------------------------ */
.pvs-page,
.pvs-single,
.pvs-archive,
.pvs-search,
.pvs-error-404 { padding-block: var(--pvs-section-y); }
.pvs-page__title,
.pvs-single__title,
.pvs-archive__title,
.pvs-search__title,
.pvs-error-404__title { margin-bottom: 1.5rem; }
.pvs-single__meta {
display: flex; flex-wrap: wrap; gap: 1rem; color: var(--pvs-text-muted);
font-size: 0.9rem; margin-bottom: 1.5rem;
}
.pvs-single__featured,
.pvs-page__featured { margin-bottom: 2rem; border-radius: var(--pvs-radius-lg); overflow: hidden; }
.pvs-single__featured img,
.pvs-page__featured img { width: 100%; height: auto; display: block; }
.pvs-single__content,
.pvs-page__content { font-size: 1.05rem; line-height: 1.75; color: var(--pvs-text); }
.pvs-single__content > * + *,
.pvs-page__content > * + * { margin-top: 1.25rem; }
.pvs-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.pvs-post {
background: #fff; border: 1px solid var(--pvs-border); border-radius: var(--pvs-radius-lg); overflow: hidden;
display: flex; flex-direction: column;
}
.pvs-post__thumb img { width: 100%; height: auto; display: block; }
.pvs-post__header, .pvs-post__excerpt, .pvs-post__more { padding: 0 1.5rem; }
.pvs-post__header { padding-top: 1.5rem; }
.pvs-post__more { padding-bottom: 1.5rem; margin-top: auto; }
.pvs-post__title a { color: var(--pvs-text); transition: color .2s ease; }
.pvs-post__title a:hover { color: var(--pvs-secondary); }
.pvs-post__meta { display: flex; gap: 0.75rem; font-size: 0.85rem; color: var(--pvs-text-muted); margin-top: 0.5rem; }
.pvs-post__more-link {
display: inline-flex; align-items: center; gap: 0.4rem;
color: var(--pvs-secondary); font-weight: 600;
}
.pvs-breadcrumbs { color: var(--pvs-text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.pvs-post-nav {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem;
padding-top: 2rem; border-top: 1px solid var(--pvs-border);
}
.pvs-post-nav__next { text-align: right; }
/* ---------------------------------------------------------------------
11. Responsive
------------------------------------------------------------------ */
@media (max-width: 1200px) {
.pvs-industries__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.pvs-services__grid,
.pvs-industries__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-clients__grid { grid-template-columns: repeat(4, 1fr); }
.pvs-instagram__grid { grid-template-columns: repeat(3, 1fr); }
.pvs-masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
.pvs-founder__card { grid-template-columns: 1fr; padding: 2rem; }
.pvs-founder__portrait { max-width: 320px; }
.pvs-missing__panel { grid-template-columns: 1fr; text-align: left; }
.pvs-missing__actions { justify-content: flex-start; }
.pvs-pricing-grid,
.pvs-pricing-grid--4 { grid-template-columns: repeat(2, 1fr); }
.pvs-shipping__panel { grid-template-columns: 1fr; padding: 2rem; }
.pvs-shipping__paths { grid-template-columns: 1fr; }
.pvs-cases__grid { grid-template-columns: 1fr; }
.pvs-compare-table { min-width: 640px; }
.pvs-hero--rich .pvs-hero__inner { grid-template-columns: 1fr; gap: 3rem; }
.pvs-hero__stage { margin: 2rem auto 0; max-width: 420px; }
.pvs-hero__phones { justify-content: center; margin: 0 auto; max-width: 560px; gap: 0.75rem; }
.pvs-hero__phone-raw-screen { width: 145px; height: 285px; }
.pvs-hero__phone-iphone-screen { width: 220px; height: 435px; transform: rotateY(0) rotateX(0); animation: none; }
.pvs-hero__phone-iphone-screen::before { width: 60px; height: 18px; }
.pvs-hero__phone-iphone-screen:hover { transform: rotateY(0) rotateX(0); }
.pvs-hero__spotlight { width: 560px; height: 380px; }
.pvs-hero__nav { width: 30px; height: 30px; }
.pvs-glance__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-glance__item:nth-child(4n) { border-right: 1px solid var(--pvs-border); }
.pvs-glance__item:nth-child(2n) { border-right: 0; }
.pvs-glance__item:nth-last-child(-n+4) { border-bottom: 1px solid var(--pvs-border); }
.pvs-glance__item:nth-last-child(-n+2) { border-bottom: 0; }
.pvs-team__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-why__grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
.pvs-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.pvs-blog-featured__link { grid-template-columns: 1fr; }
.pvs-blog-featured__media { min-height: auto; aspect-ratio: auto; }
.pvs-post-featured { margin-top: -2rem; }
.pvs-post-author { grid-template-columns: 1fr; text-align: left; justify-items: center; }
.pvs-post-nav-grid { grid-template-columns: 1fr; }
.pvs-post-nav-link--next { text-align: left; }
.pvs-flow__grid { grid-template-columns: 1fr; gap: 1rem; }
.pvs-benefits__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-hero__inset { left: -1.5rem; }
.pvs-featured__grid { grid-template-columns: 1fr; gap: 2rem; }
.pvs-featured__body { padding-left: 0; }
.pvs-services-rich__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-industries-rich__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
.pvs-industries-rich__grid > *:nth-child(1) { grid-row: span 1; grid-column: span 2; }
.pvs-industry-tile { aspect-ratio: 4 / 3; }
.pvs-about-editorial__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.pvs-about-editorial__portrait { max-width: 380px; margin: 0 auto; }
.pvs-workflow__steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
.pvs-workflow__steps::before { display: none; }
.pvs-testimonials__grid,
.pvs-portfolio-preview__grid,
.pvs-insights__grid,
.pvs-posts { grid-template-columns: repeat(2, 1fr); }
.pvs-hero__inner { grid-template-columns: 1fr; }
.pvs-hero__visual { min-height: 380px; }
.pvs-ai-demo__panels,
.pvs-capabilities__grid,
.pvs-about__inner,
.pvs-contact__panel { grid-template-columns: 1fr; }
.pvs-footer__inner { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}
@media (max-width: 720px) {
.pvs-brand-logo img { height: 40px; }
.pvs-brand-logo--footer img { height: 60px; }
.pvs-header__nav {
display: none; position: absolute; top: 100%; left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--pvs-border);
padding: 1rem 1.25rem;
}
.pvs-header__nav.is-open { display: block; }
.pvs-menu { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.pvs-header__toggle { display: inline-flex; margin-left: auto; }
.pvs-header__ctas { display: none; }
.pvs-header__mobile-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
width: 100%;
justify-content: center;
}
.pvs-services__grid,
.pvs-industries__grid,
.pvs-portfolio-preview__grid,
.pvs-insights__grid,
.pvs-posts,
.pvs-workflow__steps,
.pvs-capabilities__cards,
.pvs-capabilities__list,
.pvs-footer__inner,
.pvs-ai-demo__chips,
.pvs-contact__form-grid,
.pvs-about__stats,
.pvs-clients__grid,
.pvs-post-nav { grid-template-columns: 1fr; }
.pvs-carousel { padding: 0 2.5rem; }
.pvs-carousel__nav { width: 36px; height: 36px; }
.pvs-testimonial { padding: 1.5rem 1.75rem; }
.pvs-contact__map iframe { height: 300px; }
.pvs-contact__map-caption { flex-direction: column; align-items: flex-start; text-align: left; }
.pvs-contact__map-caption .pvs-btn { margin-left: 0; }
.pvs-clients__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-instagram__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
.pvs-masonry__item--wide { grid-column: span 2; }
.pvs-hero__proof { gap: 0.75rem 1.5rem; font-size: 0.85rem; }
.pvs-services-rich__grid,
.pvs-industries-rich__grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
.pvs-gallery__item { width: 220px; }
.pvs-gallery__row,
.pvs-gallery__row--offset {
transform: rotate(-1.75deg);
width: 106%;
margin-left: -3%;
}
.pvs-gallery__row--offset { margin-top: 1rem; }
.pvs-glance__grid { grid-template-columns: 1fr; }
.pvs-glance__item { border-right: 0 !important; }
.pvs-team__grid { grid-template-columns: 1fr; }
.pvs-glance__item:nth-last-child(1) { border-bottom: 0; }
.pvs-why__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-blog-grid { grid-template-columns: 1fr; }
.pvs-flow__grid,
.pvs-benefits__grid { grid-template-columns: 1fr; }
.pvs-hero--rich .pvs-hero__proof li { border-right: 0; padding-right: 0; }
.pvs-sticky-cta { display: flex; }
body { padding-bottom: 76px; }
.pvs-fab { bottom: 90px; }
.pvs-industries-rich__grid > *:nth-child(1) { grid-column: span 1; }
.pvs-featured__facts { grid-template-columns: 1fr; }
.pvs-hero__strip-brands { gap: 1rem; }
.pvs-pricing-grid,
.pvs-pricing-grid--4 { grid-template-columns: 1fr; }
.pvs-shipping__panel { grid-template-columns: 1fr; padding: 1.5rem; }
.pvs-shipping__steps li { padding-left: 2.5rem; }
.pvs-booking-strip__inner { font-size: 0.85rem; }
.pvs-booking-strip__cta { margin-left: auto; }
.pvs-services__head,
.pvs-insights__head { flex-direction: column; align-items: flex-start; }
.pvs-contact__info,
.pvs-contact__form,
.pvs-ai-demo__left,
.pvs-ai-demo__right { padding: 1.75rem; }
.pvs-hero__card { width: 60%; }
.pvs-post-nav__next { text-align: left; }
/* --------------------------------------------------------------
Mobile hero — the two-phone before/after visual needs a real
downsize pass. On desktop / tablet the phones live at 180/220 +
flow rail + prev/next arrows, ~510px min horizontal footprint.
That overflows a 375px viewport, so on mobile we:
- Shrink phone frames (still readable, still on-brand)
- Absolute-position prev/next as overlay chips
- Hide the horizontal "We Edit" flow label (implied by layout)
- Ease title / lead / proof-line sizing
-------------------------------------------------------------- */
.pvs-hero--rich { padding-top: clamp(2.5rem, 8vw, 4rem); }
.pvs-hero--rich .pvs-hero__inner { gap: 2rem; padding-bottom: 3rem; }
.pvs-hero--rich .pvs-hero__title {
font-size: clamp(2rem, 8.5vw, 2.9rem);
line-height: 1.05;
}
.pvs-hero--rich .pvs-hero__lead {
font-size: 0.98rem; line-height: 1.55;
}
/* Stack CTAs vertically on mobile — "See The Edits" + arrow and
"Send Us A Photo" both have white-space: nowrap and won't shrink
below their content width, so side-by-side they overflow. Each
button on its own row = clean and tappable. */
.pvs-hero__ctas {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
margin-top: 1.5rem;
}
.pvs-hero__ctas .pvs-btn {
width: 100%;
justify-content: center;
padding: 0.9rem 1.2rem;
}
.pvs-hero__badge { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
.pvs-hero__byline {
font-size: 0.78rem; line-height: 1.6;
flex-wrap: wrap; gap: 0.4rem 0.7rem;
justify-content: flex-start;
}
.pvs-hero__byline > span[aria-hidden] { display: none; }
/* Phone row: no horizontal padding — prev/next chips overlay the
outer phone edges instead of eating flow width. Cap each phone
container to its screen width so tag text can extend visually
without pushing the flex row wider than the viewport. */
.pvs-hero__phones {
position: relative;
padding: 0;
gap: 0.35rem;
max-width: 100%;
}
.pvs-hero__phone-raw { width: 108px; max-width: 108px; overflow: visible; }
.pvs-hero__phone-iphone { width: 158px; max-width: 158px; overflow: visible; padding-bottom: 4.5rem; }
.pvs-hero__phone-raw { padding-bottom: 1.6rem; }
.pvs-hero__nav {
position: absolute; top: 42%;
width: 28px; height: 28px; font-size: 0.9rem;
z-index: 5;
background: rgba(13, 30, 47, 0.55);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(6px);
}
.pvs-hero__nav--prev { left: -0.25rem; transform: translateY(-50%); }
.pvs-hero__nav--next { right: -0.25rem; transform: translateY(-50%); }
.pvs-hero__phone-raw-screen { width: 108px; height: 214px; padding: 6px; border-radius: 18px; }
.pvs-hero__phone-raw-screen::before { top: 6px; width: 30px; height: 3px; }
.pvs-hero__phone-iphone-screen {
width: 158px; height: 312px; padding: 8px; border-radius: 28px;
border-width: 3px;
}
.pvs-hero__phone-iphone-screen::before {
top: 10px; width: 48px; height: 12px;
}
/* Flow rail — trim to 3 dots, no label. */
.pvs-hero__flow { padding: 0 0.1rem; gap: 0.35rem; }
.pvs-hero__flow-label { display: none; }
.pvs-hero__flow-dot:nth-child(n+4) { display: none; }
.pvs-hero__spotlight { width: 340px; height: 240px; }
/* Phone tags — absolute-positioned below each phone screen so their
text can be wider than the 108/158px screens without expanding
the flex row. Centered on the phone via transform. */
.pvs-hero__phone-tag {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
text-align: left;
font-size: 0.58rem; letter-spacing: 0.08em;
margin: 0;
}
.pvs-hero__phone-tag--raw {
top: calc(214px + 0.4rem);
}
.pvs-hero__phone-tag--ready {
top: calc(312px + 0.4rem);
}
.pvs-hero__phone-tag::before { width: 6px; height: 6px; }
.pvs-hero__phone-raw,
.pvs-hero__phone-iphone { text-align: left; position: relative; }
/* "Marketplace-Ready" badge — center above the iPhone. Shrunk font
+ tightened letter-spacing so the text fits inside the 158px
iPhone width instead of hanging off the right edge. */
.pvs-hero__outcome {
right: auto;
left: 50%;
transform: translateX(-50%);
top: -1.15rem;
font-size: 0.5rem;
padding: 0.2rem 0.5rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* Marketplaces strip — absolute below the iPhone tag, allowed to be
wider than the phone. Label + row of marketplace pills stack
vertically and center. */
.pvs-hero__marketplaces {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(312px + 2rem);
width: max-content;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
margin: 0; padding: 0;
font-size: 0.6rem; gap: 0.3rem;
}
.pvs-hero__marketplaces-label { font-size: 0.55rem; }
.pvs-hero__marketplaces-list {
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 0.3rem;
}
.pvs-hero__marketplaces-list span {
font-size: 0.52rem; padding: 0.1rem 0.4rem;
}
/* Inside the iPhone screen — shrink the fake marketplace UI so
it doesn't feel cramped at 158px wide. */
.pvs-hero__mp-header { padding: 4px 6px; }
.pvs-hero__mp-search { font-size: 0.55rem; padding: 3px 6px; }
.pvs-hero__mp-cart { font-size: 0.7rem; }
.pvs-hero__mp-carousel { height: 130px; }
.pvs-hero__mp-dots { padding: 4px 0; gap: 3px; }
.pvs-hero__mp-dot { width: 3px; height: 3px; }
.pvs-hero__mp-details { padding: 4px 8px 6px; }
.pvs-hero__mp-title { font-size: 0.6rem; -webkit-line-clamp: 2; line-clamp: 2; }
.pvs-hero__mp-btn { font-size: 0.55rem; padding: 4px 6px; }
}
/* Very-small screens (iPhone SE, older Androids) — tighten further so
the phones don't collide with the container edges. */
@media (max-width: 400px) {
.pvs-hero__phones { padding: 0; gap: 0.25rem; }
.pvs-hero__phone-raw { width: 98px; max-width: 98px; }
.pvs-hero__phone-iphone { width: 144px; max-width: 144px; }
.pvs-hero__phone-raw-screen { width: 98px; height: 194px; }
.pvs-hero__phone-iphone-screen { width: 144px; height: 285px; }
/* Retarget the absolute-positioned tags to the smaller phone heights. */
.pvs-hero__phone-tag--raw { top: calc(194px + 0.35rem); }
.pvs-hero__phone-tag--ready { top: calc(285px + 0.35rem); }
.pvs-hero__marketplaces { top: calc(285px + 1.85rem); }
.pvs-hero__nav { width: 26px; height: 26px; font-size: 0.85rem; }
.pvs-hero__nav--prev { left: -0.1rem; }
.pvs-hero__nav--next { right: -0.1rem; }
/* Hide the flow rail entirely — there's no room. */
.pvs-hero__flow { display: none; }
.pvs-hero__spotlight { width: 280px; height: 200px; }
}
/* -------------------------------------------------------------------------
* Phase 3 — Contact form UX + sticky mobile CTA + honeypot hiding.
*
* Standalone block appended to main.css so no additional stylesheet needs to
* be enqueued. Phase 4 minification will handle sizing.
* ---------------------------------------------------------------------- */
/* Honeypot — visually hidden but visible to bots that render CSS. */
.pvs-form__honeypot {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Per-field inline error. Hidden until populated. */
.pvs-form-error {
display: none;
margin-top: 0.35rem;
font-size: 0.82rem;
line-height: 1.35;
color: #d84a4a;
}
.pvs-form-error.is-visible {
display: block;
}
.pvs-contact__form .pvs-form-error {
color: #ffb4b4;
}
/* Invalid field ring. */
.pvs-form-row [aria-invalid="true"] {
border-color: #d84a4a !important;
box-shadow: 0 0 0 2px rgba(216, 74, 74, 0.15);
}
/* Submit button loading state — inline spinner. */
.pvs-form__submit-label { display: inline-block; }
.pvs-form__submit-spinner {
display: none;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: pvs-form-spin 0.7s linear infinite;
margin-left: 0.4rem;
vertical-align: middle;
}
.pvs-btn.is-loading .pvs-form__submit-label { opacity: 0.65; }
.pvs-btn.is-loading .pvs-form__submit-spinner { display: inline-block; }
.pvs-btn.is-loading .pvs-icon { display: none; }
@keyframes pvs-form-spin { to { transform: rotate(360deg); } }
/* Shared form status region (rate limit, server error, generic success). */
.pvs-form__status {
margin-top: 1rem;
font-size: 0.9rem;
line-height: 1.45;
min-height: 1.2em;
}
.pvs-form__status--error {
color: #d84a4a;
}
.pvs-contact__form .pvs-form__status--error {
color: #ffb4b4;
}
.pvs-form__status--success {
color: #1f7a3a;
}
.pvs-contact__form .pvs-form__status--success {
color: #8be0a4;
}
/* Success panel — replaces the form after a successful submit. */
.pvs-form-success {
padding: 2rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.pvs-form-success__title {
margin: 0 0 0.5rem;
font-size: 1.35rem;
color: var(--pvs-text, #fff);
}
.pvs-form-success__body {
margin: 0;
color: var(--pvs-text-muted, rgba(255, 255, 255, 0.75));
line-height: 1.55;
}
/* -------------------------------------------------------------------------
* Sticky mobile CTA bar. Two 50/50 buttons pinned to the safe-area bottom.
* ---------------------------------------------------------------------- */
.pvs-mobile-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: none;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(13, 30, 47, 0.95);
backdrop-filter: blur(8px);
padding-bottom: env(safe-area-inset-bottom, 0);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pvs-mobile-cta__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 0.75rem;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
background: transparent;
transition: background-color 0.15s ease;
}
.pvs-mobile-cta__btn:hover,
.pvs-mobile-cta__btn:focus-visible {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.pvs-mobile-cta__btn--wa {
background: #25d366;
color: #fff;
}
.pvs-mobile-cta__btn--wa:hover,
.pvs-mobile-cta__btn--wa:focus-visible {
background: #1fbb59;
color: #fff;
}
.pvs-mobile-cta__btn .pvs-icon svg {
width: 18px;
height: 18px;
}
/* Show only on mobile; hide the round FAB when the bar is present. */
@media (max-width: 768px) {
.pvs-mobile-cta { display: grid; }
.pvs-fab { display: none; }
/* Leave breathing room so the sticky bar never covers the last section. */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}
/* -------------------------------------------------------------------------
* Phase 4 — Accessibility & performance polish.
* Skip link, focus ring system, mobile menu open state, 404 layout.
* ---------------------------------------------------------------------- */
/* Shared focus ring token — used by every focusable in :focus-visible. */
:root {
--pvs-focus-ring: 0 0 0 3px rgba(245, 120, 38, 0.55);
--pvs-focus-outline-color: #f57826;
}
/* Reset default outline; use focus-visible only so mouse clicks stay clean. */
:where(a, button, input, select, textarea, [role="button"], summary, [tabindex]):focus {
outline: none;
}
:where(a, button, input, select, textarea, [role="button"], summary, [tabindex]):focus-visible {
outline: 2px solid var(--pvs-focus-outline-color);
outline-offset: 2px;
box-shadow: var(--pvs-focus-ring);
border-radius: 4px;
}
/* Skip link — visually hidden until focused, then top-left banner. */
.pvs-skip-link,
a.pvs-skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
padding: 0.75rem 1rem;
background: #f57826;
color: #0d1e2f;
font-weight: 700;
text-decoration: none;
transform: translateY(-110%);
transition: transform 0.15s ease;
}
.pvs-skip-link:focus,
.pvs-skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid #0d1e2f;
outline-offset: 2px;
}
/* Screen-reader-only utility — matches WordPress core. */
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
word-wrap: normal !important;
}
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
position: fixed !important;
top: 8px; left: 8px;
width: auto; height: auto;
padding: 0.75rem 1rem;
background: #fff;
color: #0d1e2f;
clip: auto; clip-path: none;
z-index: 10000;
}
/* Mobile menu visible "open" state — augments existing .is-open class. */
.pvs-header__toggle[aria-expanded="true"] .pvs-header__toggle-icon {
background: transparent;
}
.pvs-header__toggle[aria-expanded="true"] .pvs-header__toggle-icon::before {
transform: translateY(6px) rotate(45deg);
}
.pvs-header__toggle[aria-expanded="true"] .pvs-header__toggle-icon::after {
transform: translateY(-6px) rotate(-45deg);
}
/* Prevent background scroll while mobile menu is open. */
body.pvs-nav-open {
overflow: hidden;
}
/* -------------------------------------------------------------------------
* 404 page layout.
* ---------------------------------------------------------------------- */
.pvs-error-404 {
min-height: 60vh;
display: flex;
align-items: center;
}
.pvs-error-404__inner {
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.pvs-error-404__title {
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.1;
margin: 0.75rem 0 1rem;
color: #fff;
}
.pvs-error-404__lead {
color: rgba(255, 255, 255, 0.75);
margin: 0 auto 2rem;
max-width: 56ch;
line-height: 1.55;
}
.pvs-error-404__search {
margin: 1.5rem auto 2.5rem;
max-width: 480px;
}
.pvs-error-404__search .search-form,
.pvs-error-404__search form {
display: flex;
gap: 0.5rem;
}
.pvs-error-404__search input[type="search"],
.pvs-error-404__search input[type="text"] {
flex: 1;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: #fff;
border-radius: 8px;
font-size: 0.95rem;
}
.pvs-error-404__search input[type="search"]::placeholder,
.pvs-error-404__search input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.pvs-error-404__search button {
padding: 0.7rem 1.25rem;
background: #f57826;
color: #0d1e2f;
border: 0;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
}
.pvs-error-404__subtitle {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.6);
margin: 2rem 0 1rem;
}
.pvs-error-404__links {
list-style: none;
padding: 0;
margin: 0 0 2.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.5rem;
}
.pvs-error-404__links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #fff;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pvs-error-404__links a:hover,
.pvs-error-404__links a:focus-visible {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(245, 120, 38, 0.6);
}
.pvs-error-404__cta {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* Force sensible label color when submit button variant is used inside 404. */
.pvs-btn--whatsapp {
background: #25d366;
color: #fff;
}
.pvs-btn--whatsapp:hover,
.pvs-btn--whatsapp:focus-visible {
background: #1fbb59;
color: #fff;
}
/* -------------------------------------------------------------------------
* Phase 5 — Newsletter capture + industry landing + legal reading layout.
* ---------------------------------------------------------------------- */
/* Newsletter form in the footer. */
.pvs-newsletter {
margin-top: 1.25rem;
}
.pvs-newsletter__label {
display: block;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 0.5rem;
}
.pvs-newsletter__row {
display: flex;
gap: 0.5rem;
max-width: 420px;
}
.pvs-newsletter__row input[type="email"] {
flex: 1;
padding: 0.65rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.04);
color: #fff;
border-radius: 8px;
font-size: 0.9rem;
min-width: 0;
}
.pvs-newsletter__row input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.pvs-newsletter__row button {
padding: 0.65rem 1.1rem;
background: #f57826;
color: #0d1e2f;
border: 0;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
}
.pvs-newsletter__row button:hover,
.pvs-newsletter__row button:focus-visible {
background: #ff8c3a;
}
.pvs-newsletter__row button[disabled] {
opacity: 0.7;
cursor: wait;
}
.pvs-newsletter__status {
margin-top: 0.5rem;
font-size: 0.8rem;
min-height: 1em;
}
/* Legal (Privacy / Terms) page — tighten headings, keep paragraphs readable. */
.pvs-legal .pvs-post-body__content {
max-width: 68ch;
margin: 0 auto;
}
.pvs-legal .pvs-post-body__content h2 {
margin-top: 2rem;
}
.pvs-legal .pvs-post-body__content h3 {
margin-top: 1.5rem;
}
.pvs-legal .pvs-post-body__content p,
.pvs-legal .pvs-post-body__content li {
line-height: 1.65;
}
/* Industry landing pagination. */
.pvs-industry__pagination {
margin-top: 2rem;
text-align: left;
}
.pvs-industry__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2rem;
height: 2.2rem;
padding: 0 0.5rem;
margin: 0 0.15rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
color: inherit;
text-decoration: none;
font-size: 0.9rem;
}
.pvs-industry__pagination .page-numbers.current {
background: #f57826;
color: #0d1e2f;
border-color: #f57826;
font-weight: 700;
}
/* -------------------------------------------------------------------------
* Page-template styles: Portfolio, Services process, About stats, Pricing.
* Reuses tokens from the homepage rich sections where possible.
* ---------------------------------------------------------------------- */
/* --- Portfolio page filters + grid ---------------------------------- */
.pvs-portfolio-filters {
margin-top: 1rem;
}
.pvs-portfolio-filters__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.pvs-portfolio-filters__btn {
appearance: none;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.12);
color: inherit;
padding: 0.5rem 1rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pvs-portfolio-filters__btn:hover,
.pvs-portfolio-filters__btn:focus-visible {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.25);
}
.pvs-portfolio-filters__btn.is-active {
background: #f57826;
color: #0d1e2f;
border-color: #f57826;
font-weight: 700;
}
.pvs-section--darker .pvs-portfolio-filters__btn {
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.85);
}
.pvs-section--darker .pvs-portfolio-filters__btn:hover,
.pvs-section--darker .pvs-portfolio-filters__btn:focus-visible {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.35);
color: #fff;
}
.pvs-portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
}
.pvs-portfolio-item {
position: relative;
overflow: hidden;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
transition: transform 0.2s ease;
}
.pvs-portfolio-item:hover {
transform: translateY(-2px);
}
.pvs-portfolio-item--tall { grid-row: span 2; }
.pvs-portfolio-item--wide { grid-column: span 2; }
.pvs-portfolio-item__link {
display: block;
color: inherit;
text-decoration: none;
}
.pvs-portfolio-item__figure {
margin: 0;
}
.pvs-portfolio-item__figure img {
display: block;
width: 100%;
height: auto;
}
.pvs-portfolio-item__meta {
padding: 0.85rem 1rem;
color: #fff;
}
.pvs-portfolio-item__title {
margin: 0 0 0.15rem;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
}
.pvs-portfolio-item__sub {
display: block;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.65);
}
/* --- Services process ---------------------------------------------- */
.pvs-service-tile__bullets {
list-style: none;
padding: 0;
margin: 0.75rem 0 0;
display: grid;
gap: 0.4rem;
}
.pvs-service-tile__bullets li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.45;
}
.pvs-service-tile__bullets .pvs-icon svg {
width: 14px;
height: 14px;
color: #f57826;
flex-shrink: 0;
margin-top: 4px;
}
.pvs-process-grid {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
counter-reset: pvs-step;
}
.pvs-process-step {
position: relative;
padding: 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
background: #fff;
}
.pvs-process-step__num {
display: inline-block;
font-family: 'Playfair Display', 'Georgia', serif;
font-size: 1.5rem;
font-weight: 700;
color: #f57826;
line-height: 1;
margin-bottom: 0.75rem;
}
.pvs-process-step__title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
line-height: 1.3;
}
.pvs-process-step__body {
margin: 0;
font-size: 0.92rem;
color: #546475;
line-height: 1.55;
}
/* --- About stats --------------------------------------------------- */
.pvs-case-metrics {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.pvs-case-metrics--wide {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pvs-case-metrics__item {
text-align: left;
padding: 1.5rem 1rem;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
background: rgba(0, 0, 0, 0.02);
}
.pvs-case-metrics__value {
display: block;
font-family: 'Playfair Display', 'Georgia', serif;
font-size: 2rem;
font-weight: 700;
color: #0d1e2f;
line-height: 1;
margin-bottom: 0.4rem;
}
.pvs-case-metrics__label {
display: block;
font-size: 0.85rem;
color: #546475;
line-height: 1.35;
}
/* --- Pricing cards + add-ons -------------------------------------- */
.pvs-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: 1rem;
}
.pvs-price-card {
position: relative;
padding: 2rem 1.75rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
background: #fff;
display: flex;
flex-direction: column;
}
.pvs-price-card--featured {
border-color: #f57826;
box-shadow: 0 10px 40px rgba(245, 120, 38, 0.15);
transform: translateY(-6px);
}
.pvs-price-card__flag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #f57826;
color: #0d1e2f;
padding: 0.3rem 0.85rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 999px;
}
.pvs-price-card__name {
margin: 0 0 0.25rem;
font-size: 1.25rem;
}
.pvs-price-card__tag {
margin: 0 0 1rem;
font-size: 0.85rem;
color: #546475;
}
.pvs-price-card__price {
margin-bottom: 1rem;
}
.pvs-price-card__price strong {
display: block;
font-family: 'Playfair Display', 'Georgia', serif;
font-size: 2.25rem;
font-weight: 700;
color: #0d1e2f;
line-height: 1;
}
.pvs-price-card__price span {
display: block;
margin-top: 0.35rem;
font-size: 0.8rem;
color: #7a8794;
}
.pvs-price-card__lead {
margin: 0 0 1rem;
font-size: 0.9rem;
color: #3d4a58;
line-height: 1.5;
}
.pvs-price-card__features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: grid;
gap: 0.5rem;
flex: 1;
}
.pvs-price-card__features li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
color: #2c3742;
line-height: 1.45;
}
.pvs-price-card__features .pvs-icon svg {
width: 14px;
height: 14px;
color: #1f7a3a;
flex-shrink: 0;
margin-top: 4px;
}
.pvs-addons-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 1rem;
display: grid;
gap: 0.5rem;
}
.pvs-addons-list__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
background: #fff;
}
.pvs-addons-list__label {
font-weight: 500;
color: #2c3742;
}
.pvs-addons-list__price {
font-family: 'Playfair Display', 'Georgia', serif;
font-weight: 700;
color: #0d1e2f;
white-space: nowrap;
}
.pvs-addons-list__note {
margin: 0.5rem 0 0;
font-size: 0.78rem;
color: #7a8794;
text-align: left;
}
/* -------------------------------------------------------------------------
* PDF-round-1 fixes: statement wrap, why-single, service/industry stacked.
* ---------------------------------------------------------------------- */
/* Statement paragraph — tighter max-width + balanced wrap so lines land right. */
.pvs-statement__body {
max-width: 60ch;
margin: 0 auto;
text-wrap: balance;
}
/* Why Choose Us — single positioning statement layout. */
.pvs-why--single { padding-block: 3.5rem; }
.pvs-why__head--single {
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.pvs-why__headline {
margin: 0.75rem auto 0;
font-size: clamp(1.75rem, 3.4vw, 2.6rem);
line-height: 1.22;
text-wrap: balance;
}
/* Industry tile — stacked (meta above media) variant. */
.pvs-industry-tile--stacked {
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.pvs-industry-tile--stacked:hover,
.pvs-industry-tile--stacked:focus-visible {
transform: translateY(-3px);
border-color: rgba(245, 120, 38, 0.5);
}
.pvs-industry-tile--stacked .pvs-industry-tile__meta {
position: static;
padding: 1.25rem 1.25rem 0.75rem;
background: transparent;
color: inherit;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.pvs-industry-tile--stacked .pvs-industry-tile__meta h3 {
margin: 0;
font-size: 1.1rem;
line-height: 1.3;
color: #0d1e2f;
}
.pvs-industry-tile--stacked .pvs-industry-tile__flag {
align-self: flex-start;
background: #f57826;
color: #0d1e2f;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.2rem 0.55rem;
border-radius: 999px;
}
.pvs-industry-tile--stacked .pvs-industry-tile__cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: #f57826;
font-weight: 600;
}
.pvs-industry-tile--stacked .pvs-industry-tile__media {
position: static;
margin: 0;
padding: 0;
background: transparent;
filter: none;
opacity: 1;
}
.pvs-industry-tile--stacked .pvs-industry-tile__media img,
.pvs-industry-tile--stacked .pvs-industry-tile__media .pvs-image img {
display: block;
width: 100%;
height: auto;
filter: none;
opacity: 1;
}
.pvs-industry-tile--stacked::before,
.pvs-industry-tile--stacked::after,
.pvs-industry-tile--stacked .pvs-industry-tile__media::before,
.pvs-industry-tile--stacked .pvs-industry-tile__media::after {
content: none !important;
background: none !important;
opacity: 0 !important;
}
/* -------------------------------------------------------------------------
* Industries — stacked variant, corrective override.
* Neutralises the parent grid's min-height + span-2-rows rule and the
* absolute-positioned image overlay from the base ".pvs-industry-tile"
* treatment. Yields a clean 3-across (2×3) grid of 1:1 photographic
* cards with the title / flag / CTA above the image.
* ---------------------------------------------------------------------- */
.pvs-industries-rich__grid--stacked {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1.5rem;
min-height: 0;
}
.pvs-industries-rich__grid--stacked > *:nth-child(1) {
grid-row: auto;
grid-column: auto;
}
.pvs-industry-tile--stacked {
display: flex;
flex-direction: column;
position: relative;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
overflow: hidden;
color: inherit;
text-decoration: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pvs-industry-tile--stacked:hover,
.pvs-industry-tile--stacked:focus-visible {
transform: translateY(-4px);
border-color: rgba(245, 120, 38, 0.55);
box-shadow: 0 12px 28px rgba(13, 30, 47, 0.08);
}
/* Meta above image. */
.pvs-industry-tile--stacked .pvs-industry-tile__meta {
order: 1;
position: static;
inset: auto;
padding: 1.25rem 1.25rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: transparent;
}
.pvs-industry-tile--stacked .pvs-industry-tile__meta h3 {
margin: 0;
color: #0d1e2f;
font-family: var(--pvs-font-display);
font-size: 1.15rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
}
.pvs-industry-tile--stacked.pvs-industry-tile--featured .pvs-industry-tile__meta h3 {
font-size: 1.15rem;
line-height: 1.3;
}
.pvs-industry-tile--stacked .pvs-industry-tile__flag {
align-self: flex-start;
background: var(--pvs-secondary, #f57826);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.22rem 0.6rem;
border-radius: 999px;
margin: 0;
}
.pvs-industry-tile--stacked .pvs-industry-tile__cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #f57826;
font-size: 0.85rem;
font-weight: 600;
opacity: 1;
transform: none;
transition: gap 0.15s ease;
}
.pvs-industry-tile--stacked:hover .pvs-industry-tile__cta { gap: 0.55rem; }
/* Image — 1:1, bright, no gradient overlay. */
.pvs-industry-tile--stacked .pvs-industry-tile__media {
order: 2;
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.pvs-industry-tile--stacked .pvs-industry-tile__media::after,
.pvs-industry-tile--stacked .pvs-industry-tile__media::before {
content: none !important;
background: none !important;
}
.pvs-industry-tile--stacked .pvs-industry-tile__media .pvs-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* Neutralise the inline aspect-ratio that pvs_image() prints on the wrapper. */
aspect-ratio: auto !important;
border-radius: 0;
margin: 0;
padding: 0;
}
.pvs-industry-tile--stacked .pvs-industry-tile__media .pvs-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: none;
opacity: 1;
transition: transform 0.5s ease;
}
.pvs-industry-tile--stacked:hover .pvs-industry-tile__media .pvs-image img {
transform: scale(1.03);
}
/* Responsive collapse. */
@media (max-width: 900px) {
.pvs-industries-rich__grid--stacked {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
@media (max-width: 560px) {
.pvs-industries-rich__grid--stacked {
grid-template-columns: 1fr;
}
}
/* -------------------------------------------------------------------------
* Services cards — fresh markup path (front-page "Six ways we edit").
* NO shared inheritance from .pvs-service-tile. Image is a direct child;
* no aspect-ratio wrapper, no object-fit, no clipping. Natural size,
* width:100%; height:auto. Cannot be cropped.
* ---------------------------------------------------------------------- */
.pvs-svc-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
}
.pvs-svc-card {
flex: 0 1 340px;
max-width: 380px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.pvs-svc-card:hover,
.pvs-svc-card:focus-within {
transform: translateY(-3px);
border-color: rgba(245, 120, 38, 0.5);
}
.pvs-svc-card__body {
padding: 1.4rem 1.4rem 1rem;
color: #fff;
}
.pvs-svc-card__body h3 {
margin: 0 0 0.4rem;
font-family: var(--pvs-font-display);
font-size: 1.15rem;
line-height: 1.3;
color: #fff;
}
.pvs-svc-card__body p {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.pvs-svc-card__img {
display: block;
width: 100%;
height: auto;
border-radius: 0 0 14px 14px;
}
/* =========================================================================
* NO-CROP RULE — applies to every ![]()
in main content
* EXCEPT the header (logo), hero section (phone mockups), and footer.
* Those keep whatever explicit sizing their own CSS gave them.
*
* Modern :is() / :not() syntax — supported in every current browser.
* ====================================================================== */
/* Every img inside main content that is NOT inside the hero or a brand logo. */
#pvs-content img:not(.pvs-hero img):not(#hero img):not(.pvs-brand-logo img) {
object-fit: contain !important;
object-position: center center !important;
max-width: 100% !important;
height: auto !important;
}
/* Unlock overflow on the wrappers that used to clip images.
Scoped so we don't touch anything in the header, hero, or footer. */
#pvs-content .pvs-image:not(.pvs-hero *):not(#hero *),
#pvs-content .pvs-industry-tile__media,
#pvs-content .pvs-service-tile__media,
#pvs-content .pvs-gallery__item .pvs-image,
#pvs-content .pvs-portfolio-item .pvs-image,
#pvs-content .pvs-case__thumb .pvs-image {
overflow: visible !important;
}
/* Force contain on the img inside each content wrapper — belt-and-braces. */
#pvs-content .pvs-image:not(.pvs-hero *):not(#hero *) img,
#pvs-content .pvs-industry-tile__media img,
#pvs-content .pvs-service-tile__media img,
#pvs-content .pvs-gallery__item img,
#pvs-content .pvs-portfolio-item img,
#pvs-content .pvs-case__thumb img,
#pvs-content .pvs-svc-card__img {
object-fit: contain !important;
}
/* Kill the dark gradient overlays that used to dim content-section images
for text legibility. Hero-specific overlays are NOT touched here. */
#pvs-content .pvs-industry-tile__media::after,
#pvs-content .pvs-industry-tile__media::before,
#pvs-content .pvs-service-tile__media::after,
#pvs-content .pvs-service-tile__media::before,
#pvs-content .pvs-gallery__item::after,
#pvs-content .pvs-gallery__item::before {
content: none !important;
background: none !important;
opacity: 0 !important;
}
/* =========================================================================
* GALLERY MARQUEE — kill the 4:5 crop.
* The .pvs-gallery__item has overflow:hidden and .pvs-gallery__item .pvs-image
* forces aspect-ratio: 4/5 + object-fit: cover, which crops wider photos.
* Removing all of that: each tile now sizes to its image's natural aspect,
* and every image renders fully.
* ====================================================================== */
.pvs-gallery__item {
overflow: visible !important;
height: auto !important;
}
.pvs-gallery__item .pvs-image {
aspect-ratio: auto !important;
height: auto !important;
overflow: visible !important;
border-radius: var(--pvs-radius-xl, 14px) !important;
}
.pvs-gallery__item .pvs-image img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
}
/* Kill the dark gradient overlay that used to dim gallery images. */
.pvs-gallery__item::after,
.pvs-gallery__item::before {
content: none !important;
background: none !important;
opacity: 0 !important;
}
/* Meta caption is already removed from PHP; hide any stray. */
.pvs-gallery__meta { display: none !important; }
/* =========================================================================
* GALLERY MARQUEE — per-image dedicated size.
* Every now carries its OWN inline aspect-ratio
* (from the file's real width/height printed in the PHP loop). The tile
* takes a fixed row height and gets its width from that aspect-ratio, so
* each image renders at its true proportions with zero cropping.
* ====================================================================== */
.pvs-gallery__item {
flex: 0 0 auto !important;
height: 320px !important; /* fixed marquee row height */
width: auto !important; /* width flows from inline aspect-ratio */
overflow: visible !important;
border-radius: var(--pvs-radius-xl, 14px);
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
}
.pvs-gallery__item > img {
display: block !important;
height: 100% !important;
width: auto !important;
max-width: none !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: inherit;
}
/* Kill the dark gradient overlay + caption box that used to sit on top. */
.pvs-gallery__item::after,
.pvs-gallery__item::before {
content: none !important;
background: none !important;
opacity: 0 !important;
}
.pvs-gallery__meta { display: none !important; }
@media (max-width: 768px) {
.pvs-gallery__item { height: 220px !important; }
}
/* =========================================================================
* PREMIUM IMAGE SYSTEM (final).
*
* Applies the "Selected Edits" spec across every gallery/portfolio/case/blog
* component:
* 1. Fixed card size (consistent across a row/grid)
* 2. Image inside centered vertically AND horizontally
* 3. object-fit: contain — image always fully visible, never cropped
* 4. Internal padding — image doesn't touch the card edge
* 5. Rounded corners preserved
* 6. Hover: lift + shadow, NO crop introduced
* 7. Responsive (desktop/tablet/mobile)
*
* Applies to: .pvs-gallery__item, .pvs-portfolio-item, .pvs-case,
* .pvs-case__thumb, .pvs-post-featured, .pvs-blog-card,
* .pvs-industry-tile
* Excluded: header logos, hero phone mockups (by design)
* ====================================================================== */
/* ---------- MARQUEE GALLERY (homepage "Selected Edits") ------------- */
.pvs-gallery__item {
flex: 0 0 auto !important;
width: 300px !important;
height: 380px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
background: #ffffff !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s ease;
box-sizing: border-box !important;
aspect-ratio: auto !important;
}
.pvs-gallery__item:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}
.pvs-gallery__item > img,
.pvs-gallery__item .pvs-image,
.pvs-gallery__item .pvs-image img {
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 10px !important;
margin: 0 auto !important;
}
/* Kill any old gradient/overlay/caption on the tile. */
.pvs-gallery__item::before,
.pvs-gallery__item::after {
content: none !important;
background: none !important;
opacity: 0 !important;
}
.pvs-gallery__meta { display: none !important; }
/* ---------- PORTFOLIO PAGE grid (.pvs-portfolio-item) --------------- */
.pvs-portfolio-item {
overflow: hidden !important;
background: #ffffff !important;
border-radius: 16px !important;
padding: 0 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pvs-section--darker .pvs-portfolio-item {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.pvs-portfolio-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
.pvs-portfolio-item__link {
display: flex !important;
flex-direction: column !important;
color: inherit !important;
text-decoration: none !important;
}
.pvs-portfolio-item__figure {
margin: 0 !important;
width: 100% !important;
height: 260px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px !important;
background: #fafafa;
box-sizing: border-box !important;
overflow: hidden;
border-radius: 16px 16px 0 0 !important;
}
.pvs-section--darker .pvs-portfolio-item__figure {
background: rgba(255, 255, 255, 0.02);
}
.pvs-portfolio-item__figure img,
.pvs-portfolio-item__figure .pvs-image,
.pvs-portfolio-item__figure .pvs-image img {
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 8px !important;
margin: 0 auto !important;
}
/* ---------- CASE STUDIES (homepage + archive) ----------------------- */
.pvs-case__thumb {
background: transparent;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 14px 14px 0 0;
min-height: 240px;
}
.pvs-case__thumb .pvs-image,
.pvs-case__thumb .pvs-image img,
.pvs-case__thumb img {
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
}
/* Case cards on the homepage (.pvs-case) — kept minimal */
.pvs-case {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
overflow: hidden;
transition: transform 0.3s ease;
}
.pvs-case:hover { transform: translateY(-4px); }
/* ---------- INDUSTRY TILES (stacked variant already handled) -------- */
/* Already fixed earlier by .pvs-industry-tile--stacked block. */
/* ---------- BLOG THUMBNAILS + POST FEATURED IMAGES ------------------ */
.pvs-blog-card__media,
.pvs-post-featured,
.pvs-blog-featured__media {
background: #fafafa;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 12px;
}
.pvs-blog-card__media img,
.pvs-post-featured img,
.pvs-blog-featured__media img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
margin: 0 auto !important;
}
/* ---------- RESPONSIVE — tablets 900px, phones 560px ---------------- */
@media (max-width: 900px) {
.pvs-gallery__item {
width: 260px !important;
height: 340px !important;
padding: 14px !important;
}
.pvs-portfolio-item__figure { height: 220px !important; }
}
@media (max-width: 560px) {
.pvs-gallery__item {
width: 220px !important;
height: 300px !important;
padding: 12px !important;
border-radius: 16px !important;
}
.pvs-portfolio-item__figure { height: 200px !important; padding: 10px !important; }
}
/* =========================================================================
* MARQUEE GALLERY — REAL ROOT-CAUSE FIX.
*
* Deep DOM inspection identified TWO real culprits (not object-fit):
* 1) .pvs-gallery__row had `transform: rotate(-2.5deg)` combined with
* `overflow: hidden`. The tilt pushed each tile's corners past the
* row's bounding box; overflow:hidden then chopped those corners.
* Tiles at the LEFT/RIGHT ends of the visible row window got half
* or more of their body clipped.
* 2) Header is position:sticky, top:0, z-index:50 (80px tall). Any
* section anchor scrolled to would land its top edge behind the
* header.
*
* Fix:
* - Remove the rotation so tiles sit straight; no corner clipping.
* - Widen the mask-image fade so edge tiles fade smoothly instead of
* being hard-cut.
* - Add scroll-margin-top on every section so hash anchors land below
* the sticky header.
* ====================================================================== */
.pvs-gallery__row,
.pvs-gallery__row--offset {
transform: none !important;
width: 100% !important;
margin-left: 0 !important;
overflow: hidden !important;
/* smoother, wider edge fade so leading/trailing tiles look intentional */
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
padding-block: 8px !important;
}
/* Give the row a bit of vertical breathing room so the tile shadow +
hover-lift doesn't get chopped by row overflow. */
.pvs-gallery__row { margin-block: 1.75rem !important; }
.pvs-gallery__row--offset { margin-top: 2rem !important; }
/* Sticky-header offset — every hash anchor scroll lands below the header. */
section[id],
.pvs-section {
scroll-margin-top: 100px;
}
/* Section-level padding to keep the first row clear of the sticky header
even if a user manually scrolls right to the top of the section. */
#portfolio.pvs-gallery {
padding-top: max(6rem, calc(80px + 3rem)) !important;
}
/* =========================================================================
* SELECTED EDITS — TRUE MASONRY PORTFOLIO.
*
* Design brief: Pinterest / Behance / Awwwards editorial style.
* The image decides card height. CSS never forces it.
*
* - column-count layout so cards pack naturally
* - no fixed heights, no aspect-ratio containers, no object-fit
* - image is width:100%; height:auto — natural aspect always preserved
* - break-inside: avoid so a card is never split across columns
* - hover: subtle lift + shadow, doesn't touch image geometry
* - responsive: 5 → 4 → 3 → 2 → 1 columns
* ====================================================================== */
/* SELECTED EDITS container — use the SITE-STANDARD centered container
(max-width 1200-1280, auto margin) plus a generous inner gutter so the
first + last columns never touch the viewport edge. Fully box-sizing:
border-box so padding never causes overflow. */
.pvs-selected-edits { padding-block: clamp(3rem, 7vw, 6rem); }
.pvs-selected-edits .pvs-container {
max-width: 1280px !important; /* matches the rest of the site */
margin-inline: auto !important; /* centered */
padding-inline: clamp(1.5rem, 4vw, 3rem) !important; /* 24-48px */
box-sizing: border-box !important;
overflow: visible !important; /* no clipping */
}
/* Renamed from .pvs-masonry to .pvs-edits-masonry to escape old
grid-based .pvs-masonry rules (line 2215 has grid-auto-rows:240px
plus 4 media-query overrides — all wrong for a column layout). */
.pvs-edits-masonry {
column-count: 5;
column-gap: 1.25rem;
margin-top: 2.5rem;
display: block;
grid-template-columns: none;
grid-auto-rows: initial;
gap: initial;
}
.pvs-edits-masonry__item {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
display: block;
margin: 0 0 1.25rem;
border-radius: 14px;
overflow: hidden;
background: transparent;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.35s ease;
position: relative;
width: 100%;
height: auto;
aspect-ratio: auto;
}
.pvs-edits-masonry__item:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
z-index: 2;
}
.pvs-edits-masonry__item > img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
max-height: none;
object-fit: fill;
border-radius: inherit;
}
/* Responsive column counts. */
@media (max-width: 1280px) { .pvs-edits-masonry { column-count: 4; } }
@media (max-width: 960px) { .pvs-edits-masonry { column-count: 3; } }
@media (max-width: 640px) { .pvs-edits-masonry { column-count: 2; column-gap: 0.75rem; } .pvs-edits-masonry__item { margin-bottom: 0.75rem; } }
@media (max-width: 380px) { .pvs-edits-masonry { column-count: 1; } }
/* Reduced-motion — no lift. */
@media (prefers-reduced-motion: reduce) {
.pvs-edits-masonry__item { transition: none; }
.pvs-edits-masonry__item:hover { transform: none; }
}
/* =========================================================================
* SELECTED EDITS — slanted scrolling marquee.
*
* Design goals:
* - Same fixed images (no crop) → object-fit: contain
* - Same white card + rounded corners + padding → premium look
* - Two rows scrolling in opposite directions → dynamic feel
* - Slight slant (~-2deg) → "slanting ribbon"
* - Soft mask-image fade at edges → no hard cutoff
* - Overflow clipping on unrotated OUTER container → avoids the
* rotation-corner-clip bug we hit earlier
* - Pause on hover, respect prefers-reduced-motion
* ====================================================================== */
/* Escape the site's centered container so the marquee runs full-bleed. */
.pvs-selected-edits > .pvs-container > .pvs-edits-marquee {
position: relative;
margin-top: 3rem;
margin-inline: calc(50% - 50vw); /* pull to viewport edges */
padding-inline: 0;
max-width: 100vw;
overflow: hidden; /* clip in unrotated frame */
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.pvs-edits-marquee__row {
position: relative;
padding-block: 12px;
/* SLANT */
transform: rotate(-2deg);
transform-origin: center;
width: 108%;
margin-inline: -4%;
overflow: visible;
}
.pvs-edits-marquee__row--offset {
margin-top: 1rem;
transform: rotate(-2deg); /* both rows slant the same way for a coherent ribbon */
}
.pvs-edits-marquee__track {
display: flex;
gap: 1.5rem;
width: max-content;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
will-change: transform;
padding-inline: 1rem;
}
.pvs-edits-marquee__track--left { animation-name: pvs-edits-marquee-left; }
.pvs-edits-marquee__track--right { animation-name: pvs-edits-marquee-right; animation-duration: 70s; }
@keyframes pvs-edits-marquee-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes pvs-edits-marquee-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* Pause on hover / focus so users can inspect a tile. */
.pvs-edits-marquee__row:hover .pvs-edits-marquee__track,
.pvs-edits-marquee__row:focus-within .pvs-edits-marquee__track {
animation-play-state: paused;
}
/* Tile — no white frame, no padding. Image fills the entire 280x280
tile edge-to-edge. Images are square (1200x1200), tile is square, so
object-fit: contain fits exactly with no letterboxing. */
.pvs-edits-marquee__item {
flex: 0 0 auto;
width: 280px;
height: 280px;
display: block;
padding: 0;
background: transparent;
border-radius: 16px;
overflow: hidden;
box-sizing: border-box;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pvs-edits-marquee__item:hover {
transform: translateY(-4px) scale(1.03);
z-index: 2;
}
.pvs-edits-marquee__item > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* NEVER crops */
object-position: center center;
border-radius: 16px;
}
/* Responsive tile sizes. */
@media (max-width: 900px) {
.pvs-edits-marquee__item { width: 240px; height: 240px; padding: 14px; }
}
@media (max-width: 560px) {
.pvs-edits-marquee__item { width: 200px; height: 200px; padding: 12px; border-radius: 14px; }
}
/* Reduced-motion — freeze animation, straighten the slant, still show all tiles. */
@media (prefers-reduced-motion: reduce) {
.pvs-edits-marquee__row,
.pvs-edits-marquee__row--offset {
transform: none;
width: 100%;
margin-inline: 0;
}
.pvs-edits-marquee__track {
animation: none;
flex-wrap: wrap;
justify-content: center;
}
.pvs-edits-marquee__item:hover {
transform: none;
}
}
/* Hide the old masonry rules — they don't apply to the new markup but
this stops any transient conflicts. */
.pvs-edits-masonry { display: none !important; }
/* =========================================================================
* PORTFOLIO PAGE — Pinterest-style masonry (.pvs-portfolio-grid--pinterest)
*
* Overrides the older row-based portfolio grid + the aggressive
* `object-fit: contain !important` block above so images render at their
* natural aspect ratio and flow into columns of varying heights.
* ========================================================================= */
#pvs-content .pvs-portfolio-grid--pinterest {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
column-count: unset;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item {
display: block !important;
aspect-ratio: 1 / 1;
}
/* Filter hide rule — MUST use !important because .pvs-portfolio-item above
is force-shown with !important; without this the JS filter can't win. */
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item[hidden],
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item.is-hidden {
display: none !important;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item {
/* card presentation — grid handles layout, we just style the box */
margin: 0;
padding: 0 !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px !important;
overflow: hidden !important;
transform: translateZ(0);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
position: relative;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.55);
border-color: rgba(201, 162, 75, 0.4);
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__link {
display: block !important;
color: inherit;
text-decoration: none;
width: 100%;
height: 100%;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__figure {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
height: 100% !important;
border-radius: 0 !important;
overflow: hidden;
display: block !important;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__figure .pvs-image,
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__figure img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 0 !important;
margin: 0 !important;
transition: transform .5s cubic-bezier(.2,.7,.2,1);
aspect-ratio: auto !important;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__figure .pvs-image {
aspect-ratio: 1 / 1 !important;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item:hover .pvs-portfolio-item__figure img {
transform: scale(1.04);
}
/* Pinterest-style hover caption — brand + category slide up from bottom */
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__meta {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.5rem 1rem 1rem;
background: linear-gradient(180deg, rgba(15, 35, 55, 0) 0%, rgba(15, 35, 55, 0.85) 100%);
color: #ffffff;
opacity: 0;
transform: translateY(8px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item:hover .pvs-portfolio-item__meta,
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item:focus-within .pvs-portfolio-item__meta {
opacity: 1;
transform: translateY(0);
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__title {
margin: 0 0 0.15rem !important;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
color: #ffffff;
}
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__sub {
display: block;
font-size: 0.78rem;
color: rgba(226, 198, 139, 0.95);
letter-spacing: 0.02em;
}
/* Responsive tuning — grid auto-fills columns, we just tune the min cell
size per breakpoint so cards don't get too small or too large. */
@media (max-width: 1200px) {
#pvs-content .pvs-portfolio-grid--pinterest {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (max-width: 900px) {
#pvs-content .pvs-portfolio-grid--pinterest {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
/* On touch devices, always show the caption — no hover state */
#pvs-content .pvs-portfolio-grid--pinterest .pvs-portfolio-item__meta {
opacity: 1;
transform: none;
}
}
@media (max-width: 480px) {
#pvs-content .pvs-portfolio-grid--pinterest {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
}
/* =========================================================================
* ABOUT PAGE — "Four things the studio holds itself to" (values grid)
*
* Text-only cards used on template-about.php. Cannot reuse .pvs-service-tile
* because that one absolutely-positions its body over a photo; with no
* photo present the tile collapses to 0 height (the bug we fixed here).
* ========================================================================= */
.pvs-values__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.pvs-value-card {
display: flex;
flex-direction: column;
padding: 1.75rem 1.5rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 16px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 2px rgba(30, 58, 86, 0.05),
0 12px 28px -14px rgba(15, 35, 55, 0.20);
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.pvs-value-card:hover {
transform: translateY(-4px);
border-color: rgba(201, 162, 75, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
0 2px 4px rgba(30, 58, 86, 0.08),
0 22px 42px -14px rgba(15, 35, 55, 0.28);
}
.pvs-value-card__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(160deg, #f5e0a6 0%, #e2c68b 25%, #c9a24b 55%, #8f6d21 100%);
color: #0f2337;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 6px 14px -4px rgba(201, 162, 75, 0.55);
margin-bottom: 1.15rem;
}
.pvs-value-card__icon svg {
width: 22px; height: 22px;
}
.pvs-value-card__title {
font-family: var(--pvs-font-display);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
color: var(--pvs-text);
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
.pvs-value-card__body {
font-size: 0.925rem;
line-height: 1.55;
color: var(--pvs-text-muted);
margin: 0;
}
@media (max-width: 1024px) {
.pvs-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pvs-values__grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* =========================================================================
* ABOUT PAGE — "What we're known for" (capabilities strip)
*
* The base `.pvs-industries-rich` uses an asymmetric 3-cell grid with a
* dark gradient overlay meant for text-on-image captions on the homepage.
* The About page has 4 uniform images without captions — the asymmetric
* grid crops them and the gradient dims them unnecessarily.
*
* This modifier restores a 4-column layout with natural aspect ratios so
* every image shows in full, no cropping, no overlay.
* ========================================================================= */
.pvs-industries-rich--capabilities .pvs-industries-rich__grid {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: none;
min-height: 0;
gap: 1.25rem;
}
.pvs-industries-rich--capabilities .pvs-industries-rich__grid > *:nth-child(1) {
grid-row: auto;
}
.pvs-industries-rich--capabilities .pvs-industry-tile {
aspect-ratio: 4 / 5;
background: rgba(255, 255, 255, 0.03);
}
.pvs-industries-rich--capabilities .pvs-industry-tile__media {
position: absolute; inset: 0;
}
.pvs-industries-rich--capabilities .pvs-industry-tile__media .pvs-image,
.pvs-industries-rich--capabilities .pvs-industry-tile__media .pvs-image img,
.pvs-industries-rich--capabilities .pvs-industry-tile__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Kill the dimming gradient — no text overlay to protect anymore. */
.pvs-industries-rich--capabilities .pvs-industry-tile__media::after,
.pvs-industries-rich--capabilities .pvs-industry-tile__media::before {
content: none !important;
background: none !important;
}
@media (max-width: 1024px) {
.pvs-industries-rich--capabilities .pvs-industries-rich__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.pvs-industries-rich--capabilities .pvs-industries-rich__grid {
grid-template-columns: 1fr;
}
.pvs-industries-rich--capabilities .pvs-industry-tile {
aspect-ratio: 4 / 3;
}
}
/* =========================================================================
* ABOUT PAGE — Corporate structure (.pvs-about-corp)
*
* Hero → Company overview + metrics matrix → Mission → Capabilities grid →
* Industries served → Differentiators → Leadership → Enterprise CTA.
* Designed to read as a professional partner profile, not an editorial.
* ========================================================================= */
.pvs-about-corp__hero {
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.pvs-about-corp__hero-inner {
max-width: 960px;
}
.pvs-about-corp__hero-title {
font-family: var(--pvs-font-headline);
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--pvs-text-invert);
margin: 0.85rem 0 1.5rem;
max-width: 26ch;
}
.pvs-about-corp__hero-lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--pvs-text-invert-muted);
max-width: 62ch;
margin: 0;
}
/* --- Shared section head ---------------------------------------------- */
.pvs-about-corp__section-head {
max-width: 780px;
margin: 0 auto 3rem;
text-align: left;
}
.pvs-about-corp__section-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pvs-text);
margin: 0.65rem 0 0;
}
.pvs-section--dark .pvs-about-corp__section-title,
.pvs-section--darker .pvs-about-corp__section-title {
color: var(--pvs-text-invert);
}
/* --- Company Overview + metrics matrix -------------------------------- */
.pvs-about-corp__overview {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-about-corp__overview-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 4rem;
align-items: start;
max-width: 1180px;
margin: 0 auto;
}
.pvs-about-corp__overview-body .pvs-about-corp__section-title {
text-align: left;
margin: 0.65rem 0 1.5rem;
max-width: 22ch;
}
.pvs-about-corp__overview-body p {
font-size: 1.02rem;
line-height: 1.7;
color: var(--pvs-text);
margin: 0 0 1.2rem;
max-width: 56ch;
}
.pvs-about-corp__metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
background: #fbf7ee;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 14px;
padding: 1.75rem;
box-shadow: 0 12px 30px -18px rgba(15, 35, 55, 0.25);
}
.pvs-about-corp__metric {
padding: 1rem;
background: #ffffff;
border-radius: 10px;
border-top: 3px solid var(--pvs-gold);
}
.pvs-about-corp__metric-value {
display: block;
font-family: var(--pvs-font-headline);
font-size: 2rem;
font-weight: 700;
color: var(--pvs-primary);
line-height: 1;
letter-spacing: -0.02em;
}
.pvs-about-corp__metric-label {
display: block;
margin-top: 0.5rem;
font-family: var(--pvs-font-display);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pvs-text-muted);
}
.pvs-about-corp__metric-note {
margin: 0.5rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--pvs-text-muted);
}
/* --- Mission ---------------------------------------------------------- */
.pvs-about-corp__mission {
padding-block: clamp(4rem, 6vw, 5.5rem);
}
.pvs-about-corp__mission-inner {
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.pvs-about-corp__mission-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.75rem, 3.2vw, 2.7rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--pvs-text-invert);
margin: 1rem 0 1.5rem;
}
.pvs-about-corp__mission-body {
font-size: 1.1rem;
line-height: 1.65;
color: var(--pvs-text-invert-muted);
max-width: 62ch;
margin: 0 auto;
}
/* --- Capabilities grid ------------------------------------------------ */
.pvs-about-corp__capabilities {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-about-corp__capabilities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.pvs-about-corp__cap {
padding: 1.75rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.10);
border-radius: 12px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pvs-about-corp__cap:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -20px rgba(15, 35, 55, 0.28);
border-color: rgba(201, 162, 75, 0.35);
}
.pvs-about-corp__cap-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(201, 162, 75, 0.12);
color: var(--pvs-primary);
margin-bottom: 1rem;
}
.pvs-about-corp__cap-icon svg { width: 22px; height: 22px; }
.pvs-about-corp__cap-title {
font-family: var(--pvs-font-headline);
font-size: 1.15rem;
font-weight: 600;
color: var(--pvs-text);
line-height: 1.3;
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
.pvs-about-corp__cap-body {
font-size: 0.95rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0;
}
/* --- Industries served (chip grid) ----------------------------------- */
.pvs-about-corp__industries {
padding-block: clamp(4rem, 7vw, 5.5rem);
background: #fbf7ee;
}
.pvs-about-corp__industries-grid {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 1080px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
}
.pvs-about-corp__industry {
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.10);
border-radius: 999px;
padding: 0.85rem 1rem;
font-family: var(--pvs-font-display);
font-size: 0.85rem;
font-weight: 500;
color: var(--pvs-text);
text-align: left;
letter-spacing: 0.01em;
transition: border-color .2s ease, background .2s ease;
}
.pvs-about-corp__industry:hover {
border-color: var(--pvs-gold);
background: #fff8e8;
}
/* --- Why us / differentiators ---------------------------------------- */
.pvs-about-corp__why {
padding-block: clamp(4rem, 7vw, 6rem);
background: var(--pvs-bg-alt);
}
.pvs-about-corp__why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 1080px;
margin: 0 auto;
}
.pvs-about-corp__why-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 1.25rem;
padding: 1.75rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 12px;
align-items: start;
}
.pvs-about-corp__why-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--pvs-primary);
color: var(--pvs-gold);
}
.pvs-about-corp__why-icon svg { width: 24px; height: 24px; }
.pvs-about-corp__why-title {
font-family: var(--pvs-font-headline);
font-size: 1.1rem;
font-weight: 600;
color: var(--pvs-text);
line-height: 1.3;
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.pvs-about-corp__why-body {
font-size: 0.95rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0;
}
/* --- Leadership ------------------------------------------------------- */
.pvs-about-corp__leadership {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-about-corp__leader {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 3.5rem;
max-width: 1080px;
margin: 0 auto;
align-items: center;
}
.pvs-about-corp__leader-portrait {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 26px 50px -22px rgba(15, 35, 55, 0.3);
}
.pvs-about-corp__leader-portrait .pvs-image,
.pvs-about-corp__leader-portrait img {
display: block;
width: 100%;
height: auto;
border-radius: 0 !important;
object-fit: cover;
}
.pvs-about-corp__leader-name {
font-family: var(--pvs-font-headline);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 700;
color: var(--pvs-text);
margin: 0;
letter-spacing: -0.02em;
}
.pvs-about-corp__leader-title {
display: block;
font-family: var(--pvs-font-display);
font-size: 0.85rem;
font-weight: 600;
color: var(--pvs-gold);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0.35rem 0 1.5rem;
}
.pvs-about-corp__leader-body p {
font-size: 1rem;
line-height: 1.7;
color: var(--pvs-text);
margin: 0 0 1.1rem;
max-width: 52ch;
}
/* --- Enterprise CTA --------------------------------------------------- */
.pvs-about-corp__cta {
padding-block: clamp(3.5rem, 6vw, 5rem);
}
.pvs-about-corp__cta-inner {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.pvs-about-corp__cta-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 700;
color: var(--pvs-text-invert);
line-height: 1.2;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.pvs-about-corp__cta-body {
font-size: 1rem;
line-height: 1.6;
color: var(--pvs-text-invert-muted);
margin: 0;
max-width: 52ch;
}
.pvs-about-corp__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-end;
}
/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
.pvs-about-corp__overview-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.pvs-about-corp__capabilities-grid { grid-template-columns: repeat(2, 1fr); }
.pvs-about-corp__industries-grid { grid-template-columns: repeat(3, 1fr); }
.pvs-about-corp__leader { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
.pvs-about-corp__cta-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.pvs-about-corp__cta-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.pvs-about-corp__metrics { grid-template-columns: 1fr; }
.pvs-about-corp__capabilities-grid { grid-template-columns: 1fr; }
.pvs-about-corp__industries-grid { grid-template-columns: repeat(2, 1fr); }
.pvs-about-corp__why-grid { grid-template-columns: 1fr; }
.pvs-about-corp__why-item { grid-template-columns: 1fr; gap: 0.85rem; }
}
/* =========================================================================
* ABOUT PAGE — Editorial magazine layout (.pvs-about-mag) [KEPT FOR REF]
*
* A single long-form narrative rather than a stack of grids:
* Masthead → article body (dropcap + inline pull-quotes) → full-bleed
* founder portrait → timeline → principles list → closing kicker.
*
* Uses a narrow reading column (~68ch) for text and full-width breaks for
* the portrait/quotes/CTA so the page feels like a magazine spread.
* ========================================================================= */
/* --- Masthead ------------------------------------------------------- */
.pvs-about-mag__masthead {
padding-block: clamp(4rem, 8vw, 7rem);
color: var(--pvs-text-invert);
}
.pvs-about-mag__masthead-meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
justify-content: space-between;
margin-bottom: 3rem;
font-family: var(--pvs-font-display);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pvs-text-invert-muted);
}
.pvs-about-mag__folio {
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: 0.75rem;
}
.pvs-about-mag__headline {
font-family: var(--pvs-font-headline);
font-size: clamp(2.5rem, 6.5vw, 5.75rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.03em;
color: var(--pvs-text-invert);
max-width: 20ch;
margin: 0 0 2rem;
}
.pvs-about-mag__standfirst {
font-family: var(--pvs-font-display);
font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
line-height: 1.55;
color: var(--pvs-text-invert-muted);
max-width: 62ch;
margin: 0;
border-left: 2px solid var(--pvs-gold);
padding-left: 1.25rem;
}
/* --- Article body --------------------------------------------------- */
.pvs-about-mag__body {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-about-mag__column {
max-width: 68ch;
margin: 0 auto;
padding-inline: var(--pvs-container-gutter);
font-size: clamp(1.05rem, 1.15vw, 1.15rem);
line-height: 1.8;
color: var(--pvs-text);
}
.pvs-about-mag__column > p {
margin: 0 0 1.6rem;
color: var(--pvs-text);
}
/* Dropcap on the first paragraph */
.pvs-about-mag__lede::first-letter {
font-family: var(--pvs-font-headline);
font-weight: 700;
float: left;
font-size: 5.5em;
line-height: 0.85;
padding: 0.25rem 0.75rem 0 0;
color: var(--pvs-primary);
}
/* Pull-quotes */
.pvs-about-mag__pullquote {
font-family: var(--pvs-font-headline);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--pvs-primary);
margin: 3rem 0 3rem -3rem;
padding: 1.25rem 0 1.25rem 2rem;
border-left: 3px solid var(--pvs-gold);
max-width: 22ch;
}
.pvs-about-mag__pullquote--right {
float: right;
margin: 1rem -3rem 1.5rem 2rem;
padding: 1.25rem 2rem 1.25rem 0;
border-left: none;
border-right: 3px solid var(--pvs-gold);
text-align: right;
}
.pvs-about-mag__pullquote::before {
content: "\201C";
display: inline;
color: var(--pvs-gold);
margin-right: 0.15em;
}
.pvs-about-mag__pullquote::after {
content: "\201D";
display: inline;
color: var(--pvs-gold);
margin-left: 0.05em;
}
/* --- Full-bleed founder portrait ------------------------------------ */
.pvs-about-mag__portrait {
margin: 0;
background: #0f2337;
overflow: hidden;
position: relative;
}
.pvs-about-mag__portrait .pvs-image,
.pvs-about-mag__portrait .pvs-image img,
.pvs-about-mag__portrait img {
display: block;
width: 100%;
height: auto;
max-height: 82vh;
object-fit: cover;
object-position: center 20%;
border-radius: 0 !important;
}
.pvs-about-mag__portrait-cap {
position: absolute;
left: clamp(1.25rem, 4vw, 3rem);
bottom: clamp(1.25rem, 3vw, 2.5rem);
color: var(--pvs-text-invert);
background: rgba(15, 35, 55, 0.72);
backdrop-filter: blur(8px);
padding: 0.85rem 1.25rem;
border-left: 2px solid var(--pvs-gold);
display: flex;
flex-direction: column;
gap: 0.2rem;
max-width: 24rem;
}
.pvs-about-mag__portrait-cap strong {
font-family: var(--pvs-font-headline);
font-size: 1.05rem;
color: #ffffff;
font-weight: 600;
}
.pvs-about-mag__portrait-cap span {
font-size: 0.82rem;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.75);
}
/* --- Shared section head ------------------------------------------- */
.pvs-about-mag__section-head {
max-width: 780px;
margin: 0 auto 3rem;
text-align: left;
}
.pvs-about-mag__section-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.8rem, 3.4vw, 2.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0.65rem 0 0;
color: var(--pvs-text);
}
.pvs-about-mag__section-head--dark .pvs-about-mag__section-title {
color: var(--pvs-text-invert);
}
/* --- Timeline ------------------------------------------------------- */
.pvs-about-mag__timeline {
padding-block: clamp(4rem, 7vw, 6rem);
background: #fbf7ee;
}
.pvs-about-mag__timeline-list {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 780px;
display: grid;
gap: 0;
}
.pvs-about-mag__timeline-item {
display: grid;
grid-template-columns: 6.5rem 1fr;
gap: 2rem;
align-items: baseline;
padding: 1.75rem 0;
border-top: 1px solid rgba(30, 58, 86, 0.15);
}
.pvs-about-mag__timeline-item:last-child {
border-bottom: 1px solid rgba(30, 58, 86, 0.15);
}
.pvs-about-mag__timeline-year {
font-family: var(--pvs-font-headline);
font-size: clamp(1.75rem, 2.5vw, 2.25rem);
font-weight: 700;
color: var(--pvs-gold);
letter-spacing: -0.02em;
line-height: 1;
}
.pvs-about-mag__timeline-note {
margin: 0;
font-size: 1.05rem;
line-height: 1.55;
color: var(--pvs-text);
}
/* --- Principles ----------------------------------------------------- */
.pvs-about-mag__principles {
padding-block: clamp(4rem, 7vw, 6rem);
}
.pvs-about-mag__principles-list {
max-width: 900px;
margin: 0 auto;
display: grid;
gap: 0;
}
.pvs-about-mag__principle {
display: grid;
grid-template-columns: minmax(15rem, 18rem) 1fr;
gap: 2.5rem;
padding: 2.25rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
align-items: baseline;
}
.pvs-about-mag__principle:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pvs-about-mag__principle-term {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--pvs-font-headline);
font-size: clamp(1.25rem, 1.6vw, 1.5rem);
font-weight: 600;
color: var(--pvs-text-invert);
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
}
.pvs-about-mag__principle-num {
font-family: var(--pvs-font-display);
font-size: 0.72rem;
letter-spacing: 0.16em;
color: var(--pvs-gold);
font-weight: 600;
text-transform: uppercase;
}
.pvs-about-mag__principle-desc {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: var(--pvs-text-invert-muted);
}
/* --- Closing kicker ------------------------------------------------- */
.pvs-about-mag__kicker {
padding-block: clamp(4rem, 6vw, 5rem);
background: #ffffff;
}
.pvs-about-mag__kicker-inner {
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.pvs-about-mag__kicker-lead {
font-family: var(--pvs-font-display);
font-style: italic;
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
line-height: 1.55;
color: var(--pvs-text);
margin: 0 0 2rem;
}
.pvs-about-mag__kicker-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
}
.pvs-about-mag__kicker-link {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--pvs-text-muted);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(30, 58, 86, 0.25);
transition: color .2s ease, text-decoration-color .2s ease;
}
.pvs-about-mag__kicker-link:hover {
color: var(--pvs-primary);
text-decoration-color: var(--pvs-gold);
}
/* --- Responsive ----------------------------------------------------- */
@media (max-width: 900px) {
.pvs-about-mag__pullquote,
.pvs-about-mag__pullquote--right {
float: none;
margin: 2rem 0;
padding: 1rem 0 1rem 1.25rem;
max-width: none;
text-align: left;
border-left: 3px solid var(--pvs-gold);
border-right: none;
}
.pvs-about-mag__timeline-item,
.pvs-about-mag__principle {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.pvs-about-mag__principle-desc { grid-column: 1; }
.pvs-about-mag__portrait img {
max-height: 65vh;
}
}
@media (max-width: 560px) {
.pvs-about-mag__lede::first-letter {
font-size: 4.5em;
padding-right: 0.5rem;
}
.pvs-about-mag__portrait-cap {
left: 1rem;
right: 1rem;
bottom: 1rem;
max-width: none;
}
}
/* =========================================================================
* SERVICES PAGE — Corporate structure (.pvs-services-corp)
*
* Hero → 6-cell service matrix (clean cards, no photo overlays) →
* 4-step delivery process → platform coverage grid → enterprise CTA.
* ========================================================================= */
.pvs-services-corp__hero {
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.pvs-services-corp__hero-inner {
max-width: 960px;
}
.pvs-services-corp__hero-title {
font-family: var(--pvs-font-headline);
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--pvs-text-invert);
margin: 0.85rem 0 1.5rem;
max-width: 28ch;
}
.pvs-services-corp__hero-lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--pvs-text-invert-muted);
max-width: 68ch;
margin: 0;
}
/* --- Shared section head ------------------------------------------ */
.pvs-services-corp__section-head {
max-width: 820px;
margin: 0 auto 3rem;
text-align: left;
}
.pvs-services-corp__section-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pvs-text);
margin: 0.65rem 0 0;
}
.pvs-section--dark .pvs-services-corp__section-title {
color: var(--pvs-text-invert);
}
/* --- Service matrix ----------------------------------------------- */
.pvs-services-corp__matrix {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-services-corp__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.pvs-services-corp__card {
position: relative;
display: flex;
flex-direction: column;
padding: 2rem 1.75rem 2rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.10);
border-radius: 14px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pvs-services-corp__card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -22px rgba(15, 35, 55, 0.28);
border-color: rgba(201, 162, 75, 0.35);
}
.pvs-services-corp__card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.pvs-services-corp__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(201, 162, 75, 0.14);
color: var(--pvs-primary);
}
.pvs-services-corp__card-icon svg { width: 22px; height: 22px; }
.pvs-services-corp__card-num {
font-family: var(--pvs-font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--pvs-gold);
line-height: 1;
margin-top: 0.6rem;
}
.pvs-services-corp__card-title {
font-family: var(--pvs-font-headline);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.25;
color: var(--pvs-text);
letter-spacing: -0.015em;
margin: 0 0 0.65rem;
}
.pvs-services-corp__card-lead {
font-size: 0.95rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0 0 1.25rem;
}
.pvs-services-corp__card-specs {
list-style: none;
padding: 0;
margin: auto 0 0;
border-top: 1px solid rgba(30, 58, 86, 0.08);
padding-top: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.pvs-services-corp__card-specs li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--pvs-text);
}
.pvs-services-corp__card-specs .pvs-icon svg {
width: 14px;
height: 14px;
color: var(--pvs-gold);
flex-shrink: 0;
margin-top: 4px;
}
/* --- Delivery process --------------------------------------------- */
.pvs-services-corp__process {
padding-block: clamp(4rem, 7vw, 6rem);
}
.pvs-services-corp__process-grid {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 1180px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
position: relative;
counter-reset: pvs-svc-step;
}
/* Horizontal connector line running through the number circles */
.pvs-services-corp__process-grid::before {
content: '';
position: absolute;
top: 30px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(90deg, rgba(201,162,75,0.2), rgba(201,162,75,0.6), rgba(201,162,75,0.2));
z-index: 0;
}
.pvs-services-corp__step {
position: relative;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 12px;
padding: 2.5rem 1.5rem 1.75rem;
text-align: left;
z-index: 1;
transition: transform .25s ease, box-shadow .25s ease;
}
.pvs-services-corp__step:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -22px rgba(15, 35, 55, 0.28);
}
.pvs-services-corp__step-num {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--pvs-primary);
color: var(--pvs-gold);
font-family: var(--pvs-font-headline);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.03em;
box-shadow: 0 8px 18px -6px rgba(15, 35, 55, 0.45);
}
.pvs-services-corp__step-title {
font-family: var(--pvs-font-headline);
font-size: 1.15rem;
font-weight: 700;
color: var(--pvs-text);
margin: 0 0 0.6rem;
letter-spacing: -0.01em;
}
.pvs-services-corp__step-body {
font-size: 0.92rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0;
}
/* --- Platform coverage -------------------------------------------- */
.pvs-services-corp__platforms {
padding-block: clamp(4rem, 7vw, 5.5rem);
background: #fbf7ee;
}
.pvs-services-corp__platform-grid {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
}
.pvs-services-corp__platform {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1.25rem 1.5rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.10);
border-left: 3px solid var(--pvs-gold);
border-radius: 8px;
}
.pvs-services-corp__platform-name {
font-family: var(--pvs-font-headline);
font-size: 1rem;
font-weight: 700;
color: var(--pvs-text);
letter-spacing: -0.01em;
}
.pvs-services-corp__platform-spec {
font-family: var(--pvs-font-mono, monospace);
font-size: 0.8rem;
color: var(--pvs-text-muted);
letter-spacing: 0.01em;
}
/* --- Enterprise CTA ----------------------------------------------- */
.pvs-services-corp__cta {
padding-block: clamp(3.5rem, 6vw, 5rem);
}
.pvs-services-corp__cta-inner {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.pvs-services-corp__cta-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 700;
color: var(--pvs-text-invert);
line-height: 1.2;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.pvs-services-corp__cta-body {
font-size: 1rem;
line-height: 1.6;
color: var(--pvs-text-invert-muted);
margin: 0;
max-width: 56ch;
}
.pvs-services-corp__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-end;
}
/* --- Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
.pvs-services-corp__grid { grid-template-columns: repeat(2, 1fr); }
.pvs-services-corp__process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
.pvs-services-corp__process-grid::before { display: none; }
.pvs-services-corp__platform-grid { grid-template-columns: repeat(2, 1fr); }
.pvs-services-corp__cta-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.pvs-services-corp__cta-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.pvs-services-corp__grid { grid-template-columns: 1fr; }
.pvs-services-corp__process-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
.pvs-services-corp__platform-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
* PRICING PAGE — Corporate engagement models (.pvs-pricing-corp)
*
* Hero → 3 engagement tier cards (no prices) → add-on capability chips →
* engagement process → standard inclusions → FAQ → enterprise CTA.
* ========================================================================= */
.pvs-pricing-corp__hero {
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.pvs-pricing-corp__hero-inner {
max-width: 960px;
}
.pvs-pricing-corp__hero-title {
font-family: var(--pvs-font-headline);
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--pvs-text-invert);
margin: 0.85rem 0 1.5rem;
max-width: 28ch;
}
.pvs-pricing-corp__hero-lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--pvs-text-invert-muted);
max-width: 68ch;
margin: 0;
}
/* Shared section head */
.pvs-pricing-corp__section-head {
max-width: 820px;
margin: 0 auto 3rem;
text-align: left;
}
.pvs-pricing-corp__section-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pvs-text);
margin: 0.65rem 0 0;
}
.pvs-section--dark .pvs-pricing-corp__section-title { color: var(--pvs-text-invert); }
/* --- Engagement model cards --------------------------------------- */
.pvs-pricing-corp__models {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-pricing-corp__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
align-items: stretch;
}
.pvs-pricing-corp__model {
position: relative;
display: flex;
flex-direction: column;
padding: 2rem 1.75rem 2rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.10);
border-radius: 14px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pvs-pricing-corp__model:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -22px rgba(15, 35, 55, 0.28);
border-color: rgba(201, 162, 75, 0.35);
}
.pvs-pricing-corp__model--featured {
background: var(--pvs-primary);
border-color: var(--pvs-gold);
color: var(--pvs-text-invert);
box-shadow: 0 30px 60px -22px rgba(15, 35, 55, 0.45);
}
.pvs-pricing-corp__model--featured:hover {
border-color: var(--pvs-gold);
transform: translateY(-6px);
}
.pvs-pricing-corp__model-flag {
position: absolute;
top: -0.85rem;
left: 1.75rem;
background: var(--pvs-gold);
color: #0d1e2f;
font-family: var(--pvs-font-display);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.35rem 0.85rem;
border-radius: 999px;
box-shadow: 0 6px 12px -4px rgba(201, 162, 75, 0.5);
}
.pvs-pricing-corp__model-name {
font-family: var(--pvs-font-headline);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
color: var(--pvs-text);
letter-spacing: -0.015em;
margin: 0 0 0.35rem;
}
.pvs-pricing-corp__model--featured .pvs-pricing-corp__model-name { color: var(--pvs-text-invert); }
.pvs-pricing-corp__model-tag {
font-family: var(--pvs-font-display);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pvs-gold);
margin: 0 0 1.25rem;
}
.pvs-pricing-corp__model-lead {
font-size: 0.95rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0 0 1.5rem;
}
.pvs-pricing-corp__model--featured .pvs-pricing-corp__model-lead { color: rgba(255, 255, 255, 0.82); }
.pvs-pricing-corp__model-includes-head {
font-family: var(--pvs-font-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pvs-text-muted);
padding-bottom: 0.75rem;
margin-bottom: 0.85rem;
border-bottom: 1px solid rgba(30, 58, 86, 0.10);
}
.pvs-pricing-corp__model--featured .pvs-pricing-corp__model-includes-head {
color: rgba(255, 255, 255, 0.7);
border-bottom-color: rgba(255, 255, 255, 0.15);
}
.pvs-pricing-corp__model-includes {
list-style: none;
padding: 0;
margin: 0 0 1.75rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
}
.pvs-pricing-corp__model-includes li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.9rem;
line-height: 1.5;
color: var(--pvs-text);
}
.pvs-pricing-corp__model--featured .pvs-pricing-corp__model-includes li {
color: rgba(255, 255, 255, 0.9);
}
.pvs-pricing-corp__model-includes .pvs-icon svg {
width: 14px; height: 14px;
color: var(--pvs-gold);
flex-shrink: 0;
margin-top: 4px;
}
.pvs-pricing-corp__model--featured .pvs-btn--primary {
background: var(--pvs-gold);
color: #0d1e2f;
border-color: var(--pvs-gold);
}
.pvs-pricing-corp__model--featured .pvs-btn--primary:hover {
background: #d9b566;
border-color: #d9b566;
}
/* --- Add-on capabilities ------------------------------------------ */
.pvs-pricing-corp__addons {
padding-block: clamp(4rem, 7vw, 5.5rem);
}
.pvs-pricing-corp__addons-grid {
list-style: none;
padding: 0;
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.85rem;
}
.pvs-pricing-corp__addon {
display: flex;
align-items: center;
gap: 0.6rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.10);
border-radius: 8px;
padding: 1rem 1.15rem;
font-family: var(--pvs-font-display);
font-size: 0.9rem;
font-weight: 500;
color: var(--pvs-text);
transition: border-color .2s ease, background .2s ease;
}
.pvs-pricing-corp__addon:hover {
border-color: var(--pvs-gold);
background: #fff8e8;
}
.pvs-pricing-corp__addon .pvs-icon svg {
width: 14px; height: 14px;
color: var(--pvs-gold);
flex-shrink: 0;
}
.pvs-pricing-corp__addons-note {
max-width: 720px;
margin: 2rem auto 0;
text-align: left;
font-size: 0.88rem;
color: var(--pvs-text-muted);
line-height: 1.55;
}
/* --- Engagement process (numbered, horizontal) -------------------- */
.pvs-pricing-corp__process {
padding-block: clamp(4rem, 7vw, 6rem);
}
.pvs-pricing-corp__process-grid {
list-style: none;
padding: 0;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
position: relative;
}
.pvs-pricing-corp__process-grid::before {
content: '';
position: absolute;
top: 30px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(90deg, rgba(201,162,75,0.2), rgba(201,162,75,0.6), rgba(201,162,75,0.2));
z-index: 0;
}
.pvs-pricing-corp__step {
position: relative;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 12px;
padding: 2.5rem 1.5rem 1.75rem;
text-align: left;
z-index: 1;
transition: transform .25s ease, box-shadow .25s ease;
}
.pvs-pricing-corp__step:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -22px rgba(15, 35, 55, 0.28);
}
.pvs-pricing-corp__step-num {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--pvs-primary);
color: var(--pvs-gold);
font-family: var(--pvs-font-headline);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.03em;
box-shadow: 0 8px 18px -6px rgba(15, 35, 55, 0.45);
}
.pvs-pricing-corp__step-title {
font-family: var(--pvs-font-headline);
font-size: 1.1rem;
font-weight: 700;
color: var(--pvs-text);
margin: 0 0 0.55rem;
letter-spacing: -0.01em;
}
.pvs-pricing-corp__step-body {
font-size: 0.9rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0;
}
/* --- Standard inclusions ------------------------------------------ */
.pvs-pricing-corp__inclusions {
padding-block: clamp(4rem, 7vw, 6rem);
}
.pvs-pricing-corp__inclusions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.pvs-pricing-corp__inclusion {
padding: 1.75rem;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 12px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pvs-pricing-corp__inclusion:hover {
transform: translateY(-3px);
border-color: rgba(201, 162, 75, 0.35);
box-shadow: 0 20px 40px -20px rgba(15, 35, 55, 0.28);
}
.pvs-pricing-corp__inclusion-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(201, 162, 75, 0.14);
color: var(--pvs-primary);
margin-bottom: 1rem;
}
.pvs-pricing-corp__inclusion-icon svg { width: 22px; height: 22px; }
.pvs-pricing-corp__inclusion-title {
font-family: var(--pvs-font-headline);
font-size: 1.1rem;
font-weight: 700;
color: var(--pvs-text);
line-height: 1.3;
margin: 0 0 0.45rem;
letter-spacing: -0.01em;
}
.pvs-pricing-corp__inclusion-body {
font-size: 0.92rem;
line-height: 1.6;
color: var(--pvs-text-muted);
margin: 0;
}
/* --- FAQ -------------------------------------------------------- */
.pvs-pricing-corp__faq {
padding-block: clamp(4rem, 7vw, 5.5rem);
background: #ffffff;
}
/* --- Enterprise CTA -------------------------------------------- */
.pvs-pricing-corp__cta {
padding-block: clamp(3.5rem, 6vw, 5rem);
}
.pvs-pricing-corp__cta-inner {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.pvs-pricing-corp__cta-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 700;
color: var(--pvs-text-invert);
line-height: 1.2;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.pvs-pricing-corp__cta-body {
font-size: 1rem;
line-height: 1.6;
color: var(--pvs-text-invert-muted);
margin: 0;
max-width: 56ch;
}
.pvs-pricing-corp__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-end;
}
/* --- Responsive ------------------------------------------------- */
@media (max-width: 1024px) {
.pvs-pricing-corp__grid { grid-template-columns: 1fr; max-width: 620px; }
.pvs-pricing-corp__addons-grid { grid-template-columns: repeat(2, 1fr); }
.pvs-pricing-corp__process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
.pvs-pricing-corp__process-grid::before { display: none; }
.pvs-pricing-corp__inclusions-grid { grid-template-columns: repeat(2, 1fr); }
.pvs-pricing-corp__cta-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.pvs-pricing-corp__cta-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.pvs-pricing-corp__addons-grid { grid-template-columns: 1fr; }
.pvs-pricing-corp__process-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
.pvs-pricing-corp__inclusions-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
* CASE STUDIES archive — corporate index (.pvs-cases-corp)
*
* Hero → media+body case cards (image left, brand + industry + service +
* summary + metrics + link right, alternating) → enterprise CTA.
* ========================================================================= */
.pvs-cases-corp__hero {
padding-block: clamp(4rem, 8vw, 6.5rem);
}
.pvs-cases-corp__hero-inner {
max-width: 960px;
}
.pvs-cases-corp__hero-title {
font-family: var(--pvs-font-headline);
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--pvs-text-invert);
margin: 0.85rem 0 1.5rem;
max-width: 28ch;
}
.pvs-cases-corp__hero-lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--pvs-text-invert-muted);
max-width: 68ch;
margin: 0;
}
/* --- Case grid ------------------------------------------------------ */
.pvs-cases-corp__grid {
padding-block: clamp(4rem, 7vw, 6rem);
background: #ffffff;
}
.pvs-cases-corp__list {
display: grid;
gap: 2.5rem;
max-width: 1180px;
margin: 0 auto;
}
.pvs-cases-corp__card {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 2.5rem;
align-items: center;
background: #ffffff;
border: 1px solid rgba(30, 58, 86, 0.08);
border-radius: 16px;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pvs-cases-corp__card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px -22px rgba(15, 35, 55, 0.28);
border-color: rgba(201, 162, 75, 0.35);
}
/* Every other card flips the image to the right side for visual variety */
.pvs-cases-corp__card:nth-child(even) {
grid-template-columns: 1fr 1.05fr;
}
.pvs-cases-corp__card:nth-child(even) .pvs-cases-corp__card-media {
order: 2;
}
.pvs-cases-corp__card:nth-child(even) .pvs-cases-corp__card-body {
order: 1;
padding-left: 2rem;
padding-right: 0;
}
.pvs-cases-corp__card-media {
display: block;
background: #fbf7ee;
overflow: hidden;
aspect-ratio: 4 / 3;
position: relative;
}
.pvs-cases-corp__card-media .pvs-image,
.pvs-cases-corp__card-media .pvs-image img,
.pvs-cases-corp__card-media img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transition: transform .5s cubic-bezier(.2,.7,.2,1);
border-radius: 0 !important;
}
.pvs-cases-corp__card:hover .pvs-cases-corp__card-media img {
transform: scale(1.04);
}
.pvs-cases-corp__card-body {
padding: 2rem 2rem 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.pvs-cases-corp__card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pvs-cases-corp__card-industry,
.pvs-cases-corp__card-service {
font-family: var(--pvs-font-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.35rem 0.75rem;
border-radius: 999px;
line-height: 1.2;
}
.pvs-cases-corp__card-industry {
background: rgba(30, 58, 86, 0.08);
color: var(--pvs-primary);
}
.pvs-cases-corp__card-service {
background: rgba(201, 162, 75, 0.14);
color: var(--pvs-primary);
}
.pvs-cases-corp__card-brand {
font-family: var(--pvs-font-headline);
font-size: clamp(1.5rem, 2.2vw, 1.85rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pvs-text);
margin: 0;
}
.pvs-cases-corp__card-brand a {
color: inherit;
text-decoration: none;
transition: color .2s ease;
}
.pvs-cases-corp__card-brand a:hover {
color: var(--pvs-primary);
}
.pvs-cases-corp__card-summary {
font-size: 1rem;
line-height: 1.65;
color: var(--pvs-text-muted);
margin: 0;
max-width: 52ch;
}
.pvs-cases-corp__card-metrics {
list-style: none;
padding: 0;
margin: 0.35rem 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
border-top: 1px solid rgba(30, 58, 86, 0.10);
border-bottom: 1px solid rgba(30, 58, 86, 0.10);
padding: 0.9rem 0;
}
.pvs-cases-corp__card-metrics li {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pvs-cases-corp__card-metrics strong {
font-family: var(--pvs-font-headline);
font-size: 1.4rem;
font-weight: 700;
color: var(--pvs-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.pvs-cases-corp__card-metrics span {
font-size: 0.75rem;
color: var(--pvs-text-muted);
line-height: 1.35;
}
.pvs-cases-corp__card-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--pvs-primary);
font-family: var(--pvs-font-display);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
margin-top: 0.25rem;
transition: gap .2s ease, color .2s ease;
}
.pvs-cases-corp__card-link:hover {
gap: 0.65rem;
color: var(--pvs-gold);
}
.pvs-cases-corp__card-link .pvs-icon svg {
width: 14px;
height: 14px;
}
/* --- Enterprise CTA ------------------------------------------------ */
.pvs-cases-corp__cta {
padding-block: clamp(3.5rem, 6vw, 5rem);
}
.pvs-cases-corp__cta-inner {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.pvs-cases-corp__cta-title {
font-family: var(--pvs-font-headline);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 700;
color: var(--pvs-text-invert);
line-height: 1.2;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.pvs-cases-corp__cta-body {
font-size: 1rem;
line-height: 1.6;
color: var(--pvs-text-invert-muted);
margin: 0;
max-width: 56ch;
}
.pvs-cases-corp__cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-end;
}
/* --- Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
.pvs-cases-corp__card,
.pvs-cases-corp__card:nth-child(even) {
grid-template-columns: 1fr;
}
.pvs-cases-corp__card:nth-child(even) .pvs-cases-corp__card-media { order: 0; }
.pvs-cases-corp__card:nth-child(even) .pvs-cases-corp__card-body {
order: 0;
padding: 2rem;
}
.pvs-cases-corp__card-body { padding: 2rem; }
.pvs-cases-corp__card-media { aspect-ratio: 16 / 10; }
.pvs-cases-corp__cta-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.pvs-cases-corp__cta-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.pvs-cases-corp__card-metrics { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pvs-cases-corp__card-metrics strong { font-size: 1.2rem; }
.pvs-cases-corp__card-body { padding: 1.5rem; gap: 0.85rem; }
}
/* =========================================================================
* MOBILE OVERFLOW GUARD — corporate hero titles, leads, CTA blocks
*
* Cause: hero titles across About/Services/Pricing/Cases corp pages use
* `clamp(2rem, 4vw, 3.4rem)` — at viewport 430px, `4vw = 17.2px` so the
* clamp min (2rem = 32px) kicks in. Combined with `max-width: 28ch`,
* that overflows the ~390px content area between the 20px gutters. Same
* pattern applied to leads (`max-width: 62ch`) and CTA titles.
*
* Fix: at narrow viewports, drop the ch-based max-widths (let text span
* full container), lower the clamp minimums slightly, and force
* `overflow-wrap: break-word` on the two headings that still won't fit
* (e.g. very long compound words in translated copy).
* ========================================================================= */
@media (max-width: 720px) {
.pvs-about-corp__hero-title,
.pvs-services-corp__hero-title,
.pvs-pricing-corp__hero-title,
.pvs-cases-corp__hero-title {
font-size: clamp(1.55rem, 6vw, 2.4rem);
max-width: 100%;
overflow-wrap: break-word;
}
.pvs-about-corp__hero-lead,
.pvs-services-corp__hero-lead,
.pvs-pricing-corp__hero-lead,
.pvs-cases-corp__hero-lead {
font-size: clamp(0.95rem, 3.6vw, 1.1rem);
max-width: 100%;
}
.pvs-about-corp__cta-title,
.pvs-services-corp__cta-title,
.pvs-pricing-corp__cta-title,
.pvs-cases-corp__cta-title,
.pvs-about-mag__section-title,
.pvs-about-corp__section-title,
.pvs-services-corp__section-title,
.pvs-pricing-corp__section-title,
.pvs-cases-corp__section-title {
font-size: clamp(1.4rem, 5vw, 2rem);
max-width: 100%;
overflow-wrap: break-word;
}
.pvs-about-corp__cta-body,
.pvs-services-corp__cta-body,
.pvs-pricing-corp__cta-body,
.pvs-cases-corp__cta-body,
.pvs-about-corp__mission-title,
.pvs-about-corp__mission-body {
max-width: 100%;
}
.pvs-about-corp__overview-body .pvs-about-corp__section-title {
max-width: 100%;
}
/* Bottom-CTA H2s on Home/About/Portfolio use inline styles with wide
headings — cap them so the container stops overflowing. */
.pvs-section--tight h2,
.pvs-about-mag__headline {
font-size: clamp(1.5rem, 6.5vw, 2.75rem);
overflow-wrap: break-word;
}
/* Belt-and-braces: prevent horizontal scroll at the body level from
any stray element that ignores the above overrides. */
html, body { overflow-x: hidden; }
/* Narrower gutter buys the content another ~10px per side. */
:root { --pvs-container-gutter: 1rem; }
}
/* Narrow-phone tightening — folded into the 720px block above via the
selectors here. Chrome headless with --window-size=430 renders a CSS
viewport slightly wider than 480, so 480-based queries never matched
in preview. 640 is safe and lands on real phones + narrow tablets. */
@media (max-width: 640px) {
:root { --pvs-container-gutter: 0.85rem; }
.pvs-about-corp__hero-title,
.pvs-services-corp__hero-title,
.pvs-pricing-corp__hero-title,
.pvs-cases-corp__hero-title {
font-size: 1.5rem;
line-height: 1.15;
letter-spacing: -0.015em;
}
.pvs-about-corp__hero-lead,
.pvs-services-corp__hero-lead,
.pvs-pricing-corp__hero-lead,
.pvs-cases-corp__hero-lead {
font-size: 0.92rem;
line-height: 1.55;
}
.pvs-about-corp__cta-title,
.pvs-services-corp__cta-title,
.pvs-pricing-corp__cta-title,
.pvs-cases-corp__cta-title,
.pvs-about-corp__section-title,
.pvs-services-corp__section-title,
.pvs-pricing-corp__section-title,
.pvs-cases-corp__section-title,
.pvs-about-mag__section-title {
font-size: 1.4rem;
letter-spacing: -0.015em;
}
.pvs-about-mag__headline {
font-size: 1.65rem;
line-height: 1.1;
}
.pvs-section--tight h2 {
font-size: 1.45rem;
}
.pvs-about-corp__hero-title,
.pvs-services-corp__hero-title,
.pvs-pricing-corp__hero-title,
.pvs-cases-corp__hero-title,
.pvs-about-corp__hero-lead,
.pvs-services-corp__hero-lead,
.pvs-pricing-corp__hero-lead,
.pvs-cases-corp__hero-lead {
word-break: break-word;
}
}