/*
Theme Name: Steps Global
Theme URI: https://stepsglobal.co
Author: Rutilant Technology
Author URI: https://rutilant.com
Description: IT Agency and Digital Marketing dark theme. Performance-first, SEO-optimised, fully editable via WP Admin.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steps-global
Tags: dark, custom-menu, custom-logo, featured-images, full-width-template, theme-options
*/
/* =====================================================================
FONT SYSTEM — FS Ostro (display) + Lil Grotesk (body)
─────────────────────────────────────────────────────
LICENSED FONTS: Drop .woff2 files into /assets/fonts/ to activate.
See /assets/fonts/FONTS-README.txt for exact filenames needed.
Until the files are present, Barlow Condensed (display) and
Plus Jakarta Sans (body) serve as the active fallback stack —
loaded from Google Fonts in functions.php.
The @font-face blocks below are pre-wired. The moment you place
the .woff2 files, these declarations take priority over fallbacks
because font-family names match the CSS variable values.
===================================================================== */
/* ── FS Ostro — Display / Headings ── */
@font-face {
font-family: 'FS Ostro';
src: url('assets/fonts/fs-ostro-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FS Ostro';
src: url('assets/fonts/fs-ostro-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FS Ostro';
src: url('assets/fonts/fs-ostro-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FS Ostro';
src: url('assets/fonts/fs-ostro-extrabold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FS Ostro';
src: url('assets/fonts/fs-ostro-black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* ── Lil Grotesk — Body / UI ── */
@font-face {
font-family: 'Lil Grotesk';
src: url('assets/fonts/lil-grotesk-light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lil Grotesk';
src: url('assets/fonts/lil-grotesk-light-italic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lil Grotesk';
src: url('assets/fonts/lil-grotesk-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lil Grotesk';
src: url('assets/fonts/lil-grotesk-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lil Grotesk';
src: url('assets/fonts/lil-grotesk-semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lil Grotesk';
src: url('assets/fonts/lil-grotesk-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* =====================================================================
1. CSS VARIABLES / DESIGN TOKENS
===================================================================== */
:root {
/* Colors */
--c-bg: #0a0a0a;
--c-bg-alt: #111111;
--c-bg-card: #171717;
--c-teal: #00b4d8;
--c-teal-light: #00d4f5;
--c-teal-dark: #008ba6;
--c-white: #ffffff;
--c-off-white: #f0f0f0;
--c-gray: #888888;
--c-gray-light: #b0b0b0;
--c-border: rgba(255,255,255,0.08);
--c-border-teal: rgba(0,180,216,0.25);
/*
* FONT STACK
* Primary: FS Ostro (display) / Lil Grotesk (body)
* Fallback: Barlow Condensed / Plus Jakarta Sans
* The licensed fonts are loaded via @font-face above.
* Google Fonts fallbacks are enqueued in functions.php.
* Browser picks the first available name in the stack.
*/
--font-display: 'FS Ostro', 'Barlow Condensed', sans-serif;
--font-body: 'Lil Grotesk', 'Plus Jakarta Sans', sans-serif;
/* Spacing */
--section-py: 100px;
--section-px: 60px;
--container-max: 1280px;
--card-radius: 16px;
--btn-radius: 50px;
/* Easing */
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* Shadows */
--shadow-teal: 0 0 40px rgba(0,180,216,0.12);
--shadow-card: 0 8px 40px rgba(0,0,0,0.5);
/*
* TYPOGRAPHY TUNING
* FS Ostro is naturally wide and has open counters — it does NOT
* need artificial letter-spacing compression.
* Lil Grotesk has slightly tighter sidebearings than DM Sans —
* small positive tracking on body improves readability at small sizes.
*/
--tracking-display: -0.01em; /* FS Ostro: very slight tightening */
--tracking-body: 0.01em; /* Lil Grotesk: tiny open for legibility */
--tracking-caps: 0.10em; /* Labels / section tags in uppercase */
--lh-display: 1.05; /* FS Ostro: tight for big headlines */
--lh-body: 1.72; /* Lil Grotesk: comfortable paragraph flow */
}
/* =====================================================================
2. RESET & BASE
===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
background-color: var(--c-bg);
color: var(--c-white);
font-family: var(--font-body);
font-weight: 400;
line-height: var(--lh-body);
letter-spacing: var(--tracking-body);
overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
ul { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
/* =====================================================================
3. TYPOGRAPHY
─────────────────────────────────────────────────────────────────────
FS Ostro is a wide-set, high-contrast grotesque.
Key adjustments vs Syne:
• line-height tighter (1.05 vs 1.1) — FS Ostro ascenders are shorter
• letter-spacing near zero (it has built-in optical spacing)
• font-size-adjust: none — let the font's own metrics breathe
• font-stretch: normal — FS Ostro has its own condensed variants;
don't compress via CSS
• NO font-weight: 900 on h1 — FS Ostro ExtraBold (800) is the
heaviest display weight; avoid faking weight with synthesis
Lil Grotesk body notes:
• Slightly wider x-height than DM Sans → same size feels larger
• font-size reduced ~4% to maintain visual rhythm
• Works best at 400/500 weights — avoid 700+ for body text
===================================================================== */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 800;
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
font-style: normal;
font-stretch: normal;
font-synthesis: none; /* prevent browser from faking bold/italic */
-webkit-font-smoothing: antialiased;
}
h1 {
font-size: clamp(3rem, 6.5vw, 6rem);
line-height: 1.0; /* FS Ostro Black at large sizes wants tighter */
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(2.2rem, 4.5vw, 4rem);
line-height: 1.05;
}
h3 {
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.2;
font-weight: 700;
}
h4 {
font-family: var(--font-body); /* Lil Grotesk for small headings */
font-size: 0.85rem;
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
line-height: 1.4;
}
p {
font-family: var(--font-body);
font-size: 0.975rem; /* Lil Grotesk x-height is wider; 0.975 feels like 1rem */
color: var(--c-gray-light);
line-height: var(--lh-body);
letter-spacing: var(--tracking-body);
font-weight: 400;
}
/* =====================================================================
3B. ENTRY CONTENT — prose typography for blog posts & any Page
built in the block editor.
─────────────────────────────────────────────────────────────────────
The h1-h4/p rules above are tuned for hero/display use: huge
clamp() sizes with the global reset's margin:0, because every
homepage section supplies its own spacing per component class.
Free-form WYSIWYG content (a blog post body, or a Page assembled
from the patterns below) never gets that per-component treatment —
Gutenberg just outputs bare -/
/
/![]()
tags. Without
this block those tags render at full hero scale with zero gap
between them, which is the "wall of giant headlines" bug.
Everything here is scoped to .entry-content so homepage sections
are completely untouched.
===================================================================== */
.entry-content { color: var(--c-gray-light); font-size: 1.05rem; line-height: var(--lh-body); }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.2; margin: 1.6em 0 .6em; }
.entry-content h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; margin: 1.5em 0 .6em; }
.entry-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.3; margin: 1.3em 0 .5em; }
.entry-content h4 { font-size: 1rem; margin: 1.2em 0 .5em; text-transform: none; letter-spacing: normal; }
.entry-content h1:first-child, .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child { margin-top: 0; }
.entry-content p { color: var(--c-gray-light); font-size: 1rem; margin: 0; }
.entry-content a { color: var(--c-teal); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--c-teal-light); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 0; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { color: var(--c-gray-light); }
.entry-content li + li { margin-top: .5em; }
.entry-content img { border-radius: 16px; margin: 0; }
.entry-content figure { margin: 0; }
.entry-content figcaption { font-size: .8rem; color: var(--c-gray); margin-top: .6em; text-align: center; }
.entry-content blockquote { margin: 0; }
.entry-content hr { border: none; border-top: 1px solid var(--c-border); margin: 2em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.entry-content th, .entry-content td { border: 1px solid var(--c-border); padding: 10px 14px; text-align: left; }
.entry-content code { background: var(--c-bg-card); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.entry-content pre { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px; padding: 20px; overflow-x: auto; }
.entry-content pre code { background: none; padding: 0; }
/* Section label — uses Lil Grotesk for caps tracking */
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-teal);
margin-bottom: 20px;
}
.section-label::before {
content: '';
display: inline-block;
width: 20px;
height: 2px;
background: var(--c-teal);
flex-shrink: 0;
}
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { margin-top: 12px; }
.section-header .section-sub { max-width: 560px; margin: 16px auto 0; }
.accent-text { color: var(--c-teal); }
/* ===================================
4. LAYOUT
=================================== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--section-px); }
section { padding: var(--section-py) 0; }
.hero-section, .why-us, .values-section, .testimonial-section, .contact-section, .pricing-section, .blog-section { background: var(--c-bg); }
.features-intro, .services-section, .portfolio-section, .results-section, .team-section, .faq-section, .cta-banner, .site-footer { background: var(--c-bg-alt); }
/* ===================================
5. ANIMATIONS
=================================== */
@keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.4);} }
@keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes barGrow { from{height:0;} to{height:var(--h);} }
.reveal-up, .reveal-left, .reveal-right { opacity:0; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--delay,0s); }
.reveal-up { transform:translateY(40px); }
.reveal-left { transform:translateX(-50px); }
.reveal-right { transform:translateX(50px); }
.reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity:1; transform:translate(0); }
/* ===================================
6. BUTTONS
=================================== */
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--c-teal); color:var(--c-bg); font-weight:700; font-size:0.9rem; padding:14px 28px; border-radius:var(--btn-radius); transition:all 0.3s var(--ease); }
.btn-primary:hover { background:var(--c-teal-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,180,216,.3); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--c-white); font-weight:600; font-size:0.9rem; padding:14px 28px; border-radius:var(--btn-radius); border:1px solid var(--c-border); transition:all 0.3s var(--ease); }
.btn-ghost:hover { border-color:var(--c-teal); color:var(--c-teal); transform:translateY(-2px); }
.btn-outline-teal { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--c-teal); font-weight:600; font-size:0.9rem; padding:14px 28px; border-radius:var(--btn-radius); border:1px solid var(--c-teal-dark); transition:all 0.3s var(--ease); }
.btn-outline-teal:hover { background:var(--c-teal); color:var(--c-bg); transform:translateY(-2px); }
.btn-outline-teal.sm, .btn-primary.sm { font-size:0.82rem; padding:10px 20px; }
.full { width:100%; justify-content:center; }
/* Block-editor Button block ("core/button") puts className on the
OUTER wrapper div, not the inner . Retarget the same look at
the real link element so patterns using className:"btn-primary"/
"btn-ghost" on a Button block match the hand-coded buttons above
exactly, with no double-padding / nested-box artifacts. */
.wp-block-button.btn-primary > .wp-block-button__link { display:inline-flex; align-items:center; gap:8px; background:var(--c-teal); color:var(--c-bg); font-weight:700; font-size:0.9rem; padding:14px 28px; border-radius:var(--btn-radius); transition:all 0.3s var(--ease); }
.wp-block-button.btn-primary > .wp-block-button__link:hover { background:var(--c-teal-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,180,216,.3); }
.wp-block-button.btn-ghost > .wp-block-button__link { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--c-white); font-weight:600; font-size:0.9rem; padding:14px 28px; border-radius:var(--btn-radius); border:1px solid var(--c-border); transition:all 0.3s var(--ease); }
.wp-block-button.btn-ghost > .wp-block-button__link:hover { border-color:var(--c-teal); color:var(--c-teal); transform:translateY(-2px); }
.accent { color:var(--c-teal); }
/* ===================================
7. HEADER
=================================== */
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; transition:background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.site-header.scrolled { background:rgba(10,10,10,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--c-border); }
.admin-bar .site-header { top:32px; }
.header-inner { max-width:var(--container-max); margin:0 auto; padding:0 var(--section-px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--c-white); flex-shrink:0; }
.logo-icon { color:var(--c-teal); font-size:1.8rem; line-height:1; }
/* ---- Uploaded image logo (Customizer > Site Identity) ----
WP's the_custom_logo() outputs .custom-logo-link > img.custom-logo
with no size cap by default — this is what was blowing up the
header and bleeding into the hero section. Cap it to the header's
actual content height and let it scale down, never up. */
.header-inner .custom-logo-link {
display:flex;
align-items:center;
flex-shrink:0;
max-height:44px;
line-height:0;
}
.header-inner img.custom-logo {
display:block;
width:auto;
height:auto;
max-height:44px;
max-width:180px;
object-fit:contain;
}
.site-header.scrolled .header-inner img.custom-logo,
.site-header.scrolled .header-inner .custom-logo-link {
max-height:36px;
transition:max-height 0.3s var(--ease);
}
.primary-nav ul { display:flex; gap:40px; align-items:center; }
.primary-nav a { font-size:.9rem; font-weight:500; color:var(--c-gray-light); position:relative; padding-bottom:4px; }
.primary-nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--c-teal); transition:width 0.3s var(--ease); }
.primary-nav a:hover { color:var(--c-white); }
.primary-nav a:hover::after, .primary-nav a.active::after { width:100%; }
.primary-nav a.active { color:var(--c-teal); }
.header-cta { display:flex; align-items:center; gap:20px; }
.phone-link { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--c-white); white-space:nowrap; }
.phone-link:hover { color:var(--c-teal); }
.nav-grid-btn { display:none; width:36px; height:36px; flex-direction:column; justify-content:center; gap:5px; align-items:center; padding:4px; }
.nav-grid-btn span { display:block; width:6px; height:6px; border-radius:50%; background:var(--c-white); }
.mobile-nav { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,10,10,.98); z-index:999; display:flex; align-items:center; justify-content:center; transform:translateX(100%); transition:transform 0.4s var(--ease-out); }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav ul { display:flex; flex-direction:column; gap:32px; text-align:center; }
.mobile-nav a { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--c-white); }
.mobile-nav a:hover { color:var(--c-teal); }
/* ===================================
8. HERO
=================================== */
.hero-section { padding-top:140px; padding-bottom:0; position:relative; overflow:hidden; }
.hero-section::after { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(0,180,216,.08) 0%,transparent 70%); pointer-events:none; }
.hero-inner { max-width:var(--container-max); margin:0 auto; padding:0 var(--section-px); display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; min-height:85vh; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,180,216,.1); border:1px solid var(--c-border-teal); padding:8px 16px; border-radius:50px; font-size:.8rem; font-weight:500; color:var(--c-teal); margin-bottom:24px; }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--c-teal); animation:pulse 2s ease-in-out infinite; }
.hero-headline { margin-bottom:24px; }
.headline-accent { color:var(--c-teal); position:relative; }
.headline-accent::after { content:''; position:absolute; bottom:4px; left:0; right:0; height:4px; background:var(--c-teal); opacity:.3; border-radius:2px; }
.hero-sub { max-width:480px; margin-bottom:40px; font-size:1.1rem; }
.hero-actions { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats { display:flex; align-items:center; gap:32px; }
.stat strong { display:block; font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--c-white); line-height:1; }
.stat span { font-size:.85rem; color:var(--c-gray); margin-top:4px; display:block; }
.stat-divider { width:1px; height:40px; background:var(--c-border); }
.hero-image-wrap { position:relative; }
.hero-img-placeholder { width:100%; aspect-ratio:4/5; border-radius:20px; background:linear-gradient(135deg,#1a1a1a 0%,#222 100%); border:1px solid var(--c-border); position:relative; overflow:hidden; background-size:cover; background-position:center; }
.img-overlay-badge { position:absolute; top:20px; left:20px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.7); backdrop-filter:blur(10px); border:1px solid var(--c-border); padding:8px 14px; border-radius:50px; font-size:.78rem; font-weight:500; z-index:2; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; animation:pulse 2s ease-in-out infinite; }
.floating-card { position:absolute; background:rgba(23,23,23,.95); backdrop-filter:blur(20px); border:1px solid var(--c-border); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:12px; z-index:3; animation:floatY 4s ease-in-out infinite; }
.floating-card strong { display:block; font-family:var(--font-display); font-size:1rem; font-weight:700; }
.floating-card span { font-size:.75rem; color:var(--c-gray); }
.card-icon { font-size:1.5rem; }
.card-1 { left:-40px; bottom:80px; animation-delay:0s; }
.card-2 { right:-20px; top:60px; animation-delay:2s; }
/* ===================================
9. TICKER
=================================== */
.hero-ticker { width:100%; background:var(--c-teal); overflow:hidden; padding:14px 0; margin-top:80px; }
.ticker-track { display:flex; gap:60px; width:max-content; animation:ticker 25s linear infinite; align-items:center; }
.ticker-track span { font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-bg); white-space:nowrap; }
.ticker-sep { color:rgba(0,0,0,.4) !important; font-size:.6rem !important; }
.hero-ticker:hover .ticker-track { animation-play-state:paused; }
/* ===================================
10. FEATURES INTRO
=================================== */
.features-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start; }
.features-left h2 { margin-bottom:40px; }
.features-ctas { display:flex; gap:16px; flex-wrap:wrap; }
.features-right { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.feature-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); padding:28px 24px; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease),box-shadow 0.3s var(--ease); }
.feature-card:hover { border-color:var(--c-teal-dark); transform:translateY(-6px); box-shadow:var(--shadow-teal); }
.feature-icon { margin-bottom:20px; }
.feature-card h3 { font-size:1rem; margin-bottom:12px; }
.feature-card p { font-size:.875rem; margin-bottom:16px; }
.feature-tags { display:flex; gap:8px; flex-wrap:wrap; }
.feature-tags span { font-size:.72rem; background:rgba(0,180,216,.1); color:var(--c-teal); border:1px solid var(--c-border-teal); padding:4px 10px; border-radius:50px; }
/* ===================================
10B. INSTAGRAM PROOF CARD
"Result" section — a real-looking Instagram profile mockup.
Fill insta_posts/insta_followers/insta_following via Customizer
as those numbers grow.
=================================== */
.insta-proof-card { max-width:560px; margin:0 auto; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:24px; padding:36px; display:flex; gap:24px; align-items:flex-start; }
.insta-proof-avatar { width:72px; height:72px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#1a3a4a,#00b4d8); background-size:cover; background-position:center; }
.insta-proof-body { flex:1; min-width:0; }
.insta-proof-handle { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.insta-proof-handle strong { font-family:var(--font-display); font-size:1.1rem; font-weight:800; }
.insta-verified { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--c-teal); color:var(--c-bg); font-size:.6rem; }
.insta-proof-bio { font-size:.9rem; margin-bottom:20px; }
.insta-proof-stats { display:flex; gap:32px; margin-bottom:24px; }
.insta-proof-stats strong { display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--c-white); line-height:1; }
.insta-proof-stats span { font-size:.78rem; color:var(--c-gray); margin-top:4px; display:block; }
@media (max-width:600px) { .insta-proof-card { flex-direction:column; align-items:center; text-align:center; } .insta-proof-stats { justify-content:center; } }
/* ===================================
11. SERVICES
=================================== */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
/* The Services section shows 6 real services (2 rows of 3) — 4 columns
would leave an awkward gap on the last row. The Process section
above it has exactly 4 steps, so it keeps the 4-up grid. */
.services-section .services-grid { grid-template-columns:repeat(3,1fr); }
.service-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); padding:32px 24px; position:relative; overflow:hidden; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease); cursor:pointer; }
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,180,216,.05) 0%,transparent 60%); opacity:0; transition:opacity 0.4s var(--ease); }
.service-card:hover { border-color:var(--c-teal-dark); transform:translateY(-8px); }
.service-card:hover::before { opacity:1; }
.service-icon { margin-bottom:24px; transition:transform 0.4s var(--ease); }
.service-card:hover .service-icon { transform:scale(1.1) rotate(5deg); }
.service-card h3 { font-size:1.05rem; margin-bottom:12px; }
.service-card p { font-size:.85rem; margin-bottom:16px; }
.service-list { margin-bottom:20px; }
.service-list li { font-size:.82rem; color:var(--c-gray); padding:5px 0; padding-left:14px; position:relative; }
.service-list li::before { content:'→'; position:absolute; left:0; color:var(--c-teal); font-size:.7rem; }
.service-link { font-size:.85rem; font-weight:600; color:var(--c-teal); display:inline-flex; align-items:center; gap:6px; transition:gap 0.3s var(--ease); }
.service-link:hover { gap:12px; }
/* ===================================
12. WHY US
=================================== */
.why-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.why-img-stack { position:relative; }
.why-img-main { width:100%; aspect-ratio:4/5; border-radius:20px; background:linear-gradient(135deg,#1a1a1a,#252525); border:1px solid var(--c-border); background-size:cover; background-position:center; }
.why-img-accent { position:absolute; width:55%; aspect-ratio:1; border-radius:16px; background:var(--c-teal); bottom:-30px; right:-30px; z-index:-1; opacity:.1; }
.why-metric-badge { position:absolute; bottom:30px; left:-20px; background:rgba(23,23,23,.95); backdrop-filter:blur(20px); border:1px solid var(--c-border); border-radius:14px; padding:20px 24px; text-align:center; box-shadow:var(--shadow-card); }
.metric-val { display:block; font-family:var(--font-display); font-size:2.5rem; font-weight:800; color:var(--c-teal); line-height:1; }
.metric-label { font-size:.8rem; color:var(--c-gray-light); margin-top:6px; display:block; }
.why-content h2 { margin-bottom:20px; }
.why-content > p { margin-bottom:28px; }
.why-checklist { margin-bottom:32px; }
.why-checklist li { color:var(--c-gray-light); font-size:.9rem; padding:10px 0; padding-left:28px; border-bottom:1px solid var(--c-border); position:relative; }
.why-checklist li::before { content:'?'; position:absolute; left:0; width:18px; height:18px; border-radius:50%; background:rgba(0,180,216,.15); color:var(--c-teal); font-size:.7rem; display:flex; align-items:center; justify-content:center; top:13px; }
.why-stats { display:flex; gap:40px; margin-bottom:36px; }
.why-stat strong { display:block; font-family:var(--font-display); font-size:2rem; font-weight:800; }
.why-stat span { font-size:.85rem; color:var(--c-gray); }
/* ===================================
13. PORTFOLIO BENTO
=================================== */
/* Rebuilt as a plain uniform grid — the previous "bento" layout used
grid-area row-spanning ("wide"/"tall" cards spanning 2 rows next to
1-row "feat"/"card" cells). CSS Grid stretches spanning items to
match combined row height, and that stretch amount is driven by
whatever "feat"/"card" happen to contain — completely unpredictable
with real content, and multiple attempts to cap it with fixed/flex
heights still left a visually huge dead zone (a flex:1 meta area
vertically centering short text inside a much taller stretched
card, same dark color as the placeholder, so it still reads as one
big empty block). A uniform grid where every card is exactly the
same shape cannot produce that bug — there is nothing left to
stretch to. */
.portfolio-bento { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:start; }
.bento-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); overflow:hidden; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease); cursor:pointer; }
.bento-card:hover { border-color:var(--c-teal-dark); transform:translateY(-4px); }
.bento-media { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#1a1a1a,#252525); background-size:cover; background-position:center; }
.bento-media-teal { background:linear-gradient(135deg,var(--c-teal-dark),var(--c-teal)); display:flex; align-items:center; justify-content:center; padding:24px; }
.bento-rating { background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); padding:14px 20px; border-radius:12px; text-align:center; }
.bento-rating span:first-child { display:block; font-size:1.4rem; color:var(--c-white); margin-bottom:4px; }
.bento-meta { padding:24px; }
@media (max-width:1024px) { .portfolio-bento { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .portfolio-bento { grid-template-columns:1fr; } }
.bento-category { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-teal); margin-bottom:10px; }
.bento-card h3 { font-size:1rem; margin-bottom:12px; line-height:1.3; }
.bento-card p { font-size:.85rem; margin-bottom:16px; }
.bento-stats { display:flex; gap:20px; font-size:.82rem; color:var(--c-gray-light); margin-bottom:16px; }
.bento-stats strong { color:var(--c-white); }
.bento-author { display:flex; align-items:center; gap:12px; }
.author-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#333,#555); border:2px solid var(--c-teal-dark); background-size:cover; background-position:center; }
/* ===================================
14. VALUES
=================================== */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:60px; }
.value-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); padding:32px; }
.chart-bars { display:flex; align-items:flex-end; gap:8px; height:120px; margin:24px 0; }
.bar { flex:1; height:var(--h); background:rgba(0,180,216,.2); border-radius:4px 4px 0 0; transition:height 1s var(--ease-out); }
.bar.active { background:var(--c-teal); }
.value-meta { display:flex; justify-content:space-between; font-size:.78rem; color:var(--c-gray); }
.big-rating { font-family:var(--font-display); font-size:3.5rem; font-weight:800; color:var(--c-white); line-height:1; margin-bottom:8px; }
.stars { font-size:1.1rem; letter-spacing:2px; margin-bottom:8px; }
.star.full { color:#f59e0b; }
.star.half { color:#f59e0b; opacity:0.55; }
.star.empty { color:#444; }
.sm-stars { font-size:.8rem; margin-top:4px; }
.rating-users { display:flex; align-items:center; gap:12px; margin-top:16px; font-size:.82rem; color:var(--c-gray-light); }
.user-pile { display:flex; }
.u { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#333,#555); border:2px solid var(--c-bg-card); margin-left:-8px; display:block; background-size:cover; }
.u:first-child { margin-left:0; }
.value-list ul { margin:16px 0 24px; }
.value-list li { font-size:.875rem; color:var(--c-gray-light); padding:8px 0; border-bottom:1px solid var(--c-border); }
.counters-row { display:flex; justify-content:center; gap:80px; padding:48px 0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.counter-item { text-align:center; }
.count-num { font-family:var(--font-display); font-size:3.5rem; font-weight:800; color:var(--c-white); line-height:1; }
.counter-item > span:last-child { display:block; font-size:.85rem; color:var(--c-gray); margin-top:8px; }
/* Same look as .count-num but a plain static string ("152M+") instead
of a numeric data-target the count-up JS can animate — those values
include letters, so the count-up script can't parse them. */
.count-num-static { font-family:var(--font-display); font-size:3rem; font-weight:800; color:var(--c-white); line-height:1; display:block; }
.reel-stats-row { flex-wrap:wrap; gap:40px; }
/* ===================================
15B. INSTAGRAM REEL LINK CARDS
Deliberately NOT using Instagram's official embed.js blockquote —
it ships its own inline white-card styling that fights a dark
theme, and rich embeds are unreliable inside nested iframes (e.g.
the Customizer preview) due to third-party script/cookie
restrictions. A plain, fully self-styled link-out card renders
identically everywhere and never silently breaks.
=================================== */
.reel-embed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px; }
.reel-embed-item { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); overflow:hidden; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease); }
.reel-embed-item:hover { border-color:var(--c-teal-dark); transform:translateY(-4px); }
.reel-embed-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:48px 20px; text-align:center; aspect-ratio:4/5; }
.reel-embed-icon { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.reel-embed-link strong { font-size:.9rem; font-weight:700; color:var(--c-white); }
.reel-embed-link span { font-size:.78rem; color:var(--c-gray); }
@media (max-width:1024px) { .reel-embed-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .reel-embed-grid { grid-template-columns:1fr; } .reel-embed-link { aspect-ratio:auto; padding:32px 20px; } }
/* ===================================
15. RESULTS
=================================== */
.results-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px; }
.result-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); overflow:hidden; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease); }
.result-card:hover { border-color:var(--c-teal-dark); transform:translateY(-6px); }
.result-img { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#1a1a1a,#2a2a2a); background-size:cover; background-position:center; }
.result-body { padding:28px; }
.result-tag { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-teal); margin-bottom:12px; }
.result-card h3 { font-size:1rem; line-height:1.4; margin-bottom:16px; }
.result-link { font-size:.85rem; font-weight:600; color:var(--c-teal); display:inline-flex; align-items:center; gap:6px; transition:gap 0.3s var(--ease); }
.result-link:hover { gap:12px; }
.results-cta { text-align:center; }
/* ===================================
16. PRICING
=================================== */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.pricing-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); padding:40px 32px; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease); }
.pricing-card:hover { border-color:var(--c-teal-dark); transform:translateY(-8px); }
.pricing-featured { border-color:var(--c-teal); background:linear-gradient(135deg,#0f2028,#0d1a23); transform:translateY(-16px); box-shadow:var(--shadow-teal); }
.pricing-featured:hover { transform:translateY(-24px); }
.plan-badge { font-size:.82rem; font-weight:600; color:var(--c-gray-light); margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.popular-tag { background:var(--c-teal); color:var(--c-bg); font-size:.68rem; padding:3px 10px; border-radius:50px; }
.plan-price { display:flex; align-items:baseline; gap:4px; margin-bottom:32px; }
.currency { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--c-teal); }
.price { font-family:var(--font-display); font-size:4rem; font-weight:800; line-height:1; }
.per { font-size:.9rem; color:var(--c-gray); }
.plan-features { margin-bottom:36px; }
.plan-features li { font-size:.88rem; color:var(--c-gray-light); padding:10px 0; border-bottom:1px solid var(--c-border); padding-left:20px; position:relative; }
.plan-features li::before { content:'✓'; position:absolute; left:0; color:var(--c-teal); font-weight:700; }
/* ===================================
17. TESTIMONIALS
=================================== */
.testimonial-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:center; }
.testimonial-left .section-label { margin-bottom:16px; }
.testimonial-left h2 { margin-bottom:40px; }
.rating-display { display:flex; align-items:center; gap:20px; }
.big-score { font-family:var(--font-display); font-size:3.5rem; font-weight:800; }
.rating-sub { font-size:.85rem; color:var(--c-gray); }
.testimonial-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:24px; padding:40px; }
.testi-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.testi-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#1a3a4a,#00b4d8); flex-shrink:0; background-size:cover; background-position:center; }
.testi-header strong { display:block; font-size:1rem; margin-bottom:2px; }
.testi-header span { font-size:.8rem; color:var(--c-gray); }
.sm-stars { font-size:.8rem; margin-top:4px; }
blockquote { font-size:.95rem; color:var(--c-gray-light); line-height:1.8; border-left:3px solid var(--c-teal); padding-left:20px; margin-bottom:28px; }
.testi-metric { display:flex; align-items:center; gap:16px; padding-top:24px; border-top:1px solid var(--c-border); }
.testi-metric strong { font-family:var(--font-display); font-size:2.5rem; font-weight:800; color:var(--c-teal); flex-shrink:0; }
.testi-metric span { font-size:.85rem; color:var(--c-gray-light); }
/* Multi-card grid for a dedicated Testimonials page (the homepage
testimonial-layout above shows one card; this repeats the same
.testimonial-card look for several). */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
@media (max-width:768px) { .testimonials-grid { grid-template-columns:1fr; } }
/* ===================================
18. TEAM
=================================== */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.team-card { border-radius:var(--card-radius); overflow:hidden; position:relative; cursor:pointer; }
.team-img { width:100%; aspect-ratio:3/4; background:linear-gradient(135deg,#1a1a1a,#2a2a2a); transition:transform 0.5s var(--ease); background-size:cover; background-position:center; }
.team-card:hover .team-img { transform:scale(1.05); }
.team-info { padding:20px; background:var(--c-bg-card); border:1px solid var(--c-border); border-top:none; }
.team-info strong { display:block; font-size:1rem; margin-bottom:4px; }
.team-info span { font-size:.82rem; color:var(--c-gray); }
.team-hover { position:absolute; inset:0; background:rgba(0,180,216,.92); display:flex; flex-direction:column; justify-content:flex-end; padding:28px; opacity:0; transition:opacity 0.4s var(--ease); }
.team-card:hover .team-hover { opacity:1; }
.team-hover p { font-size:.9rem; color:rgba(0,0,0,.9); margin-bottom:20px; }
.team-socials { display:flex; gap:12px; }
.team-socials a { width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:rgba(0,0,0,.8); transition:background 0.3s var(--ease); }
.team-socials a:hover { background:rgba(0,0,0,.4); }
/* ===================================
19. BLOG
=================================== */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); overflow:hidden; transition:border-color 0.3s var(--ease),transform 0.3s var(--ease); }
.blog-card:hover { border-color:var(--c-teal-dark); transform:translateY(-6px); }
.blog-img { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#1a1a1a,#2a2a2a); transition:transform 0.5s var(--ease); background-size:cover; background-position:center; }
.blog-card:hover .blog-img { transform:scale(1.04); }
.blog-body { padding:24px; }
.blog-tag { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-teal); margin-bottom:10px; }
.blog-card h3 { font-size:.95rem; line-height:1.45; margin-bottom:16px; }
.blog-link { font-size:.82rem; font-weight:600; color:var(--c-teal); display:inline-flex; align-items:center; gap:6px; transition:gap 0.3s var(--ease); }
.blog-link:hover { gap:12px; }
/* ===================================
20. FAQ
=================================== */
.faq-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start; }
.faq-still { margin-top:48px; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--card-radius); padding:32px; }
.faq-still p:first-child { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--c-white); margin-bottom:10px; }
.faq-still p:last-of-type { margin-bottom:24px; font-size:.88rem; }
.faq-item { border-bottom:1px solid var(--c-border); }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 0; font-size:.95rem; font-weight:500; color:var(--c-white); cursor:pointer; gap:20px; text-align:left; transition:color 0.3s var(--ease); }
.faq-q:hover { color:var(--c-teal); }
.faq-icon { font-size:1.4rem; font-weight:300; color:var(--c-teal); flex-shrink:0; line-height:1; transition:transform 0.3s var(--ease); }
.faq-item.active .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease-out); }
.faq-a.open { max-height:300px; }
.faq-a p { padding-bottom:20px; font-size:.9rem; }
/* ===================================
21. CONTACT
=================================== */
.contact-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; }
.contact-left h2 { margin-bottom:16px; }
.contact-left > p { margin-bottom:36px; }
.contact-details { display:flex; flex-direction:column; gap:20px; margin-bottom:32px; }
.contact-item { display:flex; align-items:flex-start; gap:16px; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:12px; padding:18px 20px; transition:border-color 0.3s var(--ease); }
.contact-item:hover { border-color:var(--c-teal-dark); }
.ci-icon { font-size:1.3rem; margin-top:2px; }
.contact-item strong { display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-teal); margin-bottom:4px; }
.contact-item a, .contact-item span { font-size:.9rem; color:var(--c-gray-light); }
.contact-item a:hover { color:var(--c-teal); }
.social-links { display:flex; align-items:center; gap:12px; }
.social-links > span { font-size:.85rem; color:var(--c-gray); }
.social-btn { width:38px; height:38px; border-radius:50%; background:var(--c-bg-card); border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:var(--c-gray-light); transition:all 0.3s var(--ease); }
.social-btn:hover { background:var(--c-teal); border-color:var(--c-teal); color:var(--c-bg); }
.contact-form-wrap { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:24px; padding:48px 40px; }
.contact-form-wrap h3 { margin-bottom:32px; font-size:1.3rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group input, .form-group textarea, .form-group select { background:rgba(255,255,255,.04); border:1px solid var(--c-border); border-radius:10px; padding:16px 20px; font-family:var(--font-body); font-size:.9rem; color:var(--c-white); outline:none; transition:border-color 0.3s var(--ease),box-shadow 0.3s var(--ease); width:100%; }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--c-gray); }
.form-group input:focus, .form-group textarea:focus { border-color:var(--c-teal); box-shadow:0 0 0 3px rgba(0,180,216,.1); }
.form-group textarea { resize:vertical; min-height:120px; }
/* CF7 Overrides */
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea { background:rgba(255,255,255,.04) !important; border:1px solid var(--c-border) !important; border-radius:10px !important; padding:16px 20px !important; font-family:var(--font-body) !important; font-size:.9rem !important; color:var(--c-white) !important; width:100% !important; outline:none !important; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color:var(--c-teal) !important; box-shadow:0 0 0 3px rgba(0,180,216,.1) !important; }
.wpcf7-submit { background:var(--c-teal) !important; color:var(--c-bg) !important; border:none !important; padding:14px 32px !important; border-radius:var(--btn-radius) !important; font-weight:700 !important; cursor:pointer !important; }
.wpcf7-submit:hover { background:var(--c-teal-light) !important; }
/* Fluent Forms (Free) overrides — element-scoped selectors so this
survives Fluent Forms markup/version changes without babysitting
exact class names. See README for setup steps. */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform textarea,
.fluentform select {
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--c-border) !important;
border-radius: 10px !important;
padding: 16px 20px !important;
font-family: var(--font-body) !important;
font-size: .9rem !important;
color: var(--c-white) !important;
width: 100% !important;
outline: none !important;
}
.fluentform input::placeholder, .fluentform textarea::placeholder { color: var(--c-gray) !important; }
.fluentform input:focus, .fluentform textarea:focus, .fluentform select:focus {
border-color: var(--c-teal) !important;
box-shadow: 0 0 0 3px rgba(0,180,216,.1) !important;
}
.fluentform label, .fluentform .ff-el-label {
color: var(--c-gray-light) !important;
font-size: .85rem !important;
font-weight: 500 !important;
margin-bottom: 8px !important;
display: block !important;
}
.fluentform button[type="submit"], .fluentform .ff-btn-submit {
background: var(--c-teal) !important;
color: var(--c-bg) !important;
border: none !important;
padding: 14px 32px !important;
border-radius: var(--btn-radius) !important;
font-weight: 700 !important;
cursor: pointer !important;
}
.fluentform button[type="submit"]:hover, .fluentform .ff-btn-submit:hover { background: var(--c-teal-light) !important; }
.fluentform .error, .fluentform .text-danger, .fluentform .ff-errors-in-stack { color: #ff6b6b !important; font-size: .8rem !important; }
/* ===================================
20B. INSTAGRAM GRID
Used by the Instagram page pattern. Square tiles, 4 across on
desktop, collapsing to 2 across on mobile.
=================================== */
.insta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.insta-grid figure, .insta-grid .wp-block-image { margin:0; }
.insta-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; transition:transform 0.4s var(--ease); }
.insta-grid a:hover img { transform:scale(1.04); }
@media (max-width:768px) { .insta-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
/* ===================================
21B. INTERIOR PAGE HERO
Smaller, reusable hero band for Story / Portfolio / Case Studies /
Testimonials / Instagram / Contact pages — same tokens as the
homepage hero, but sized for a page that doesn't need 85vh.
Used by the block-editor patterns shipped in /patterns.
=================================== */
.page-hero { padding-top: 180px; padding-bottom: 60px; position: relative; overflow: hidden; }
.page-hero-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--section-px); text-align: center; }
.page-hero .hero-badge { margin-left: auto; margin-right: auto; }
.page-hero h1 { margin-bottom: 20px; }
.page-hero .page-hero-sub { max-width: 640px; margin: 0 auto; font-size: 1.1rem; }
@media (max-width: 768px) { .page-hero { padding-top: 130px; padding-bottom: 40px; } }
/* ===================================
22. CTA + FOOTER
=================================== */
.cta-banner { background:linear-gradient(135deg,#0d1f28,#111) !important; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta-inner h2 { font-size:clamp(1.8rem,3.5vw,3rem); }
.cta-actions { display:flex; gap:16px; flex-shrink:0; }
.site-footer { padding:80px 0 32px !important; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:60px; margin-bottom:60px; }
.footer-brand .logo { margin-bottom:20px; }
.footer-brand p { font-size:.875rem; max-width:280px; margin-bottom:24px; }
.footer-socials { display:flex; gap:10px; }
.footer-socials a { width:36px; height:36px; border-radius:50%; background:var(--c-bg-card); border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:var(--c-gray-light); transition:all 0.3s var(--ease); }
.footer-socials a:hover { background:var(--c-teal); border-color:var(--c-teal); color:var(--c-bg); }
.footer-col h4 { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-white); margin-bottom:24px; }
.footer-col ul { display:flex; flex-direction:column; gap:14px; }
.footer-col a { font-size:.88rem; color:var(--c-gray); transition:color 0.3s var(--ease); }
.footer-col a:hover { color:var(--c-teal); }
.footer-contact { display:flex; flex-direction:column; gap:14px; }
.footer-contact a, .footer-contact span { font-size:.88rem; color:var(--c-gray); }
.footer-contact a:hover { color:var(--c-teal); }
.footer-bottom { border-top:1px solid var(--c-border); padding-top:28px; text-align:center; }
.footer-bottom p { font-size:.82rem; color:var(--c-gray); }
/* ===================================
23. RESPONSIVE
=================================== */
@media (max-width:1024px) {
:root { --section-px:32px; --section-py:72px; }
.hero-inner { grid-template-columns:1fr; min-height:auto; padding-bottom:60px; }
.hero-media { display:none; }
.features-layout { grid-template-columns:1fr; gap:48px; }
.features-right { grid-template-columns:1fr 1fr; }
.services-grid { grid-template-columns:repeat(2,1fr); }
.why-layout { grid-template-columns:1fr; }
.why-media { display:none; }
.values-grid { grid-template-columns:1fr 1fr; }
.results-grid { grid-template-columns:1fr; }
.pricing-grid { grid-template-columns:1fr; }
.pricing-featured { transform:none; }
.testimonial-layout { grid-template-columns:1fr; }
.team-grid { grid-template-columns:1fr 1fr; }
.blog-grid { grid-template-columns:1fr 1fr; }
.faq-layout { grid-template-columns:1fr; }
.contact-layout { grid-template-columns:1fr; }
.cta-inner { flex-direction:column; text-align:center; }
.footer-grid { grid-template-columns:1fr 1fr; }
.counters-row { gap:40px; }
}
@media (max-width:768px) {
:root { --section-px:20px; --section-py:60px; }
.primary-nav { display:none; }
.phone-link { display:none; }
.nav-grid-btn { display:flex; }
.header-inner .custom-logo-link,
.header-inner img.custom-logo { max-height:34px; }
.header-inner img.custom-logo { max-width:140px; }
.hero-stats { gap:20px; flex-wrap:wrap; }
.features-right { grid-template-columns:1fr; }
.services-grid { grid-template-columns:1fr; }
.values-grid { grid-template-columns:1fr; }
.counters-row { flex-direction:column; gap:32px; padding:32px 0; }
.pricing-grid { grid-template-columns:1fr; }
.team-grid { grid-template-columns:1fr; }
.blog-grid { grid-template-columns:1fr; }
.form-row { grid-template-columns:1fr; }
.footer-grid { grid-template-columns:1fr; }
.cta-actions { flex-direction:column; width:100%; }
.hero-actions, .cta-actions { flex-direction:column; }
.hero-actions a, .cta-actions a { text-align:center; justify-content:center; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* =====================================================================
24. BLOCK EDITOR CANVAS OVERRIDES
─────────────────────────────────────────────────────────────────────
h1/h2 use vw-based clamp() sizing tuned for the real front-end
viewport. Inside the block editor's iframe canvas, WP resolves vw
units against a virtual "desktop" width that doesn't match the
actual visible column, so the same rule renders wildly oversized
text that wraps mid-word — that's the giant broken headline seen
when inserting a Story/Testimonials/etc. pattern on a new Page.
WP wraps the editor canvas in .editor-styles-wrapper, so scope
fixed (non-vw) sizes to that class only — the live front-end,
which doesn't have that class, is completely unaffected.
===================================================================== */
.editor-styles-wrapper h1 { font-size: 2.75rem !important; line-height: 1.15 !important; }
.editor-styles-wrapper h2 { font-size: 2.1rem !important; line-height: 1.2 !important; }
.editor-styles-wrapper h3 { font-size: 1.3rem !important; line-height: 1.3 !important; }
.editor-styles-wrapper .page-hero h1 { font-size: 2.75rem !important; }
.editor-styles-wrapper .cta-inner h2 { font-size: 2rem !important; }