/*!
 * SmartFlutter — 2026 visual layer
 *
 * Loaded last, after style.css / responsive.css / blackandcyan.css, and
 * deliberately overrides the 2015-era theme rather than editing it. The
 * markup is untouched, so the SEO work underneath is untouched too: the h1,
 * the 13 FAQs, the JSON-LD graph, the alt text and the word count all stay
 * exactly as they are.
 *
 * Direction: dark plum canvas, warm gradient accents taken from the logo,
 * bento-style surfaces, large tight display type. The old hero photograph
 * (a 2000x1500 PNG behind a 70%-opacity grey diagonal) is hidden and replaced
 * with CSS gradients — which is both the modern look and about 800 KB less to
 * download.
 */

/* ── design tokens ───────────────────────────────────────── */
:root {
    --ink: #08050b;
    --ink-2: #0e0913;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.16);
    --text: #f4f0f6;
    --muted: #a79fb2;
    --muted-2: #7c7389;
    --accent: #ff6a2b;
    --accent-2: #e11d48;
    --accent-3: #ffb46b;
    --grad: linear-gradient(135deg, #ff8a3d 0%, #ff5630 45%, #e11d48 100%);
    --radius: 20px;
    --radius-sm: 12px;
    --maxw: 1180px;
    --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}

/* ── base ────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body,
body.policy-page {
    background: var(--ink);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.005em;
    overflow-x: hidden;
}

/* The warm glow field the whole page sits in. Fixed so it reads as light
   rather than as a background image. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 620px at 12% -8%, rgba(255, 106, 43, 0.16), transparent 62%),
        radial-gradient(820px 560px at 92% 6%, rgba(225, 29, 72, 0.14), transparent 60%),
        radial-gradient(760px 640px at 50% 108%, rgba(255, 138, 61, 0.10), transparent 62%);
}

/* fine grain, so the large flat areas do not band */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,
header,
footer,
nav.slide-menu-left,
section {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

p { color: var(--muted); }

a { color: var(--accent-3); }
a:hover { color: var(--accent); }

::selection { background: rgba(255, 106, 43, 0.3); color: #fff; }

/* ── remove the old hero treatment ───────────────────────── */
.backstretch,
.maskWrapper,
.simple-image-mask {
    display: none !important;
}

/* ── navigation ──────────────────────────────────────────── */
header.visible-lg {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    padding: 14px 0;
    background: rgba(8, 5, 11, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
}

header.visible-lg .container-fluid,
header.visible-lg .navbar-fixed-top {
    position: static !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: var(--maxw);
    margin: 0 auto;
}

header.visible-lg .row { display: flex; align-items: center; }

.navbar-brand {
    display: block;
    float: none;
    height: auto;
    padding: 0;
}

.navbar-brand img {
    width: auto !important;
    height: 52px !important;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

.navbar-nav {
    float: none !important;
    padding-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.navbar-nav > li { float: none; margin: 0; }

.navbar-nav > li > a {
    color: var(--muted) !important;
    font-family: "Inter", sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    white-space: nowrap;
    border: 1px solid transparent !important;
    border-radius: 999px;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
    color: var(--text) !important;
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
}

/* ── hero ────────────────────────────────────────────────── */
#intro {
    padding: 158px 0 96px !important;
    text-align: center;
    overflow: visible;
}

#intro .container { max-width: var(--maxw); }

/* soft light behind the headline instead of a photograph */
#intro::before {
    content: "";
    position: absolute;
    top: 6%;
    left: 50%;
    width: 860px;
    height: 460px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(255, 106, 43, 0.22), transparent 72%);
    filter: blur(40px);
    pointer-events: none;
}

.carouselWrapper { position: relative; }
.owl-carousel { position: relative; }

.introItem { padding: 0 0 10px !important; }

#intro .introItem i,
#intro .introItem .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 34px;
    font-size: 30px !important;
    color: #fff !important;
    background: var(--grad);
    border-radius: 19px;
    box-shadow: 0 14px 38px -10px rgba(255, 106, 43, 0.6), inset 0 1px 0 rgba(255,255,255,.28);
}

#intro .introItem h1,
#intro .introItem h2 {
    font-size: clamp(40px, 6.4vw, 82px) !important;
    font-weight: 600 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    color: var(--text) !important;
}

#intro .introItem h1 small,
#intro .introItem h2 small {
    display: block;
    font-size: 0.52em;
    font-weight: 300;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg, #ffb46b 0%, #ff7a3d 55%, #ff4d6d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffb46b;
    margin-top: 8px;
}

#intro .subWhite {
    display: inline-block;
    color: var(--muted) !important;
    font-family: "Inter", sans-serif;
    font-size: 15px !important;
    font-weight: 400;
    letter-spacing: 0.01em !important;
    border: 1px solid var(--line) !important;
    background: var(--surface);
    border-radius: 999px;
    padding: 9px 20px !important;
    backdrop-filter: blur(8px);
}

/* the little dot pagination */
.owl-theme .owl-controls .owl-dots .owl-dot span {
    background: rgba(255, 255, 255, 0.22) !important;
    width: 9px; height: 9px;
}

.owl-theme .owl-controls .owl-dots .owl-dot.active span {
    background: var(--accent) !important;
    box-shadow: 0 0 14px rgba(255, 106, 43, 0.8);
}

.owl-theme .owl-controls { margin-top: 34px !important; }

/* ── section rhythm ──────────────────────────────────────── */
section { padding: 96px 0; background: none !important; }
section .container { max-width: var(--maxw); }

/* the theme puts a background on several sections; flatten them all so the
   glow field shows through and the page reads as one surface */
#about, #services, #models, #who, #charts, #faq,
#rewarded-games, #rewarded-surveys, #numbers, #albuquerque, #contact,
.lane-section, .numbers-section, .local-section, .brands-guide, .group-section {
    background: transparent !important;
    padding: 84px 0 !important;
}

/* ── headings ────────────────────────────────────────────── */
.sectionTitle h2 {
    font-size: clamp(30px, 3.6vw, 46px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1 !important;
    margin: 0 0 14px !important;
    color: var(--text) !important;
}

.sectionTitle h2 small {
    display: block;
    font-size: 0.5em;
    font-weight: 300;
    color: var(--muted-2);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.sectionTitleIcon {
    color: var(--accent) !important;
    font-size: 22px !important;
    margin-bottom: 20px;
    display: inline-block;
}

.sectionTitle .sub,
.heading .sub {
    color: var(--muted-2);
    font-size: 15px;
    letter-spacing: 0.01em;
    display: block;
    margin-top: 8px;
}

/* the theme's trailing dot after headings in this template */
.sectionTitle h2::after { content: none !important; }

/* ── bento surfaces: every card in the page ──────────────── */
#services .item,
#models .item,
#who .item,
#about .item,
.item {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    padding: 30px 28px !important;
    margin-bottom: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
    position: relative;
    overflow: hidden;
}

.item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px 140px at 50% -20%, rgba(255, 106, 43, 0.22), transparent 70%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.item:hover {
    border-color: var(--line-2) !important;
    background: var(--surface-2) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.item:hover::after { opacity: 1; }

.item .icon,
.item i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 20px !important;
    color: #fff !important;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    margin-bottom: 18px;
    transition: background .22s ease, border-color .22s ease;
}

.item:hover .icon,
.item:hover > i {
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 12px 30px -10px rgba(255, 106, 43, 0.7);
}

.item h3, .item h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 10px !important;
    color: var(--text) !important;
}

.item h3 small, .item h4 small {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent-3);
    letter-spacing: 0.02em;
    margin-top: 5px;
    text-transform: none;
}

.item p {
    color: var(--muted) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

/* ── the big numbers ─────────────────────────────────────── */
#charts {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

#charts .number {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(42px, 5vw, 66px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}

#charts h4, #charts p {
    color: var(--muted-2) !important;
    font-size: 13.5px !important;
    letter-spacing: 0.02em;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* ── prose blocks (the lane + local sections) ────────────── */
.definition {
    color: var(--muted) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    margin-bottom: 22px !important;
}

.definition strong { color: var(--text); font-weight: 600; }

.lead-answer {
    background: linear-gradient(180deg, rgba(255, 106, 43, 0.10), rgba(255, 106, 43, 0.03)) !important;
    border: 1px solid rgba(255, 106, 43, 0.28) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--radius-sm) !important;
    color: #efe9f2 !important;
    font-size: 17.5px !important;
    line-height: 1.8 !important;
    padding: 24px 26px !important;
    margin-bottom: 26px !important;
}

.local-nap {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--muted) !important;
    padding: 22px 24px !important;
    line-height: 1.9;
}

.local-nap strong { color: var(--text); }
.local-nap a { color: var(--accent-3) !important; font-weight: 600; text-decoration: none; }
.local-nap a:hover { color: var(--accent) !important; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { margin-top: 26px; }

.faq-item {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease;
}

.faq-item[open] { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.faq-item:hover { border-color: var(--line-2) !important; }

.faq-item summary {
    color: var(--text) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 19px 54px 19px 22px !important;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: var(--accent);
    line-height: 1;
    transition: transform .2s ease;
}

.faq-item[open] summary::after { content: "–"; }

.faq-item p {
    color: var(--muted) !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    margin: 0 !important;
    padding: 0 22px 22px !important;
}

/* ── buttons ─────────────────────────────────────────────── */
.btn,
.btn-default,
a.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--grad) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 14px 28px !important;
    box-shadow: 0 16px 38px -14px rgba(255, 106, 43, 0.75);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    text-decoration: none !important;
}

.btn:hover, .btn-default:hover, a.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 22px 46px -14px rgba(255, 106, 43, 0.9);
    color: #fff !important;
}

/* ── forms ───────────────────────────────────────────────── */
.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 14px 16px !important;
}

.form-control::placeholder { color: var(--muted-2) !important; }

.form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 106, 43, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.16) !important;
    outline: none;
}

.input-group-addon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--line) !important;
    border-right: none !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.input-group-addon i { color: var(--accent) !important; }

.form-status { color: var(--muted); }

/* ── tables (pricing model comparison) ───────────────────── */
.tableWrapper {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    backdrop-filter: blur(14px);
}

.model-table { background: transparent !important; margin: 0 !important; }

.model-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted-2) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    padding: 16px 20px !important;
}

.model-table tbody td {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    padding: 20px !important;
    vertical-align: top;
}

.model-table tbody tr:last-child td { border-bottom: none !important; }
.model-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025) !important; }
.model-table td strong { color: var(--text) !important; font-weight: 600; }
.model-table td span { color: var(--muted-2) !important; font-size: 13px; }

/* ── footer ──────────────────────────────────────────────── */
footer {
    background: rgba(0, 0, 0, 0.42) !important;
    border-top: 1px solid var(--line);
    padding: 56px 0 44px !important;
    margin-top: 0;
}

footer img {
    height: 32px !important;
    width: auto !important;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

footer p {
    color: var(--muted-2) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 13.5px !important;
    line-height: 2 !important;
    margin: 0;
}

footer p a {
    color: var(--muted) !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    letter-spacing: 0;
    text-transform: none !important;
}

footer p a:hover, footer p a span:hover { color: var(--accent) !important; }
footer p a span { text-transform: none !important; letter-spacing: 0 !important; }

/* ── content pages (legal, contact, blog) ────────────────── */
.policy-hero {
    background: none !important;
    padding: 152px 0 56px !important;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.policy-hero h1 {
    font-size: clamp(34px, 4.4vw, 58px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.06 !important;
    margin: 0 0 16px !important;
}

.policy-meta { color: var(--muted-2) !important; font-size: 15px !important; }

.policy-content { padding: 64px 0 96px !important; background: none !important; }
.policy-document { max-width: 800px; margin: 0 auto; }

.policy-document h2 {
    font-size: 27px !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--text) !important;
    margin: 44px 0 14px !important;
    padding: 0 !important;
    border: none !important;
}

.policy-document h2:first-of-type { margin-top: 0 !important; }

.policy-document p,
.policy-document li,
.policy-document address {
    color: var(--muted) !important;
    font-size: 16.5px !important;
    line-height: 1.85 !important;
}

.policy-document a { color: var(--accent-3) !important; text-decoration: none; border-bottom: 1px solid rgba(255,180,107,.3); }
.policy-document a:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }
.policy-document strong { color: var(--text); }

/* blog */
.article-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    padding: 26px 28px !important;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.article-card:hover {
    border-color: var(--line-2) !important;
    background: var(--surface-2) !important;
    transform: translateY(-3px);
}

.article-card h2 { border: none !important; padding: 0 !important; margin: 0 0 10px !important; }
.article-card h2 a { color: var(--text) !important; text-decoration: none; font-size: 19px; }
.article-card h2 a:hover { color: var(--accent) !important; }
.article-card p { color: var(--muted) !important; font-size: 15px !important; }
.article-card-meta a { color: var(--accent) !important; font-weight: 600; text-decoration: none; }

.article-cta {
    background: linear-gradient(135deg, rgba(255,106,43,.12), rgba(225,29,72,.08)) !important;
    border: 1px solid rgba(255, 106, 43, 0.26) !important;
    border-radius: var(--radius) !important;
    padding: 28px 30px !important;
    margin: 44px 0 36px !important;
}

.article-cta h2 { border: none !important; margin: 0 0 10px !important; padding: 0 !important; font-size: 22px !important; }

.related-list { list-style: none; margin: 18px 0 0; padding: 0; }
.related-list li {
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted-2) !important;
    font-size: 15px !important;
    padding: 15px 0 !important;
}
.related-list a { color: var(--text) !important; font-weight: 600; text-decoration: none; }
.related-list a:hover { color: var(--accent) !important; }

/* ── mobile nav ──────────────────────────────────────────── */
.sm-nav { background: rgba(8, 5, 11, 0.86) !important; backdrop-filter: blur(16px); }
.sm-nav-toggler, .nav-toggler { color: var(--text) !important; }

.menu.slide-menu-left {
    background: var(--ink-2) !important;
    border-right: 1px solid var(--line);
}

.menu.slide-menu-left ul { padding: 26px 22px; }
.menu.slide-menu-left li { border: none !important; }

.menu.slide-menu-left li a {
    color: var(--muted) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 12px 4px !important;
    display: block;
}

.menu.slide-menu-left li a:hover,
.menu.slide-menu-left li.active a { color: var(--accent) !important; }

.menu.slide-menu-left img { height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 20px; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    header.visible-lg { display: none !important; }
    #intro { padding: 118px 0 84px !important; }
    section, #about, #services, #models, #who, #charts, #faq,
    #rewarded-games, #rewarded-surveys, #numbers, #albuquerque, #contact,
    .lane-section, .numbers-section, .local-section {
        padding: 58px 0 !important;
    }
    .policy-hero { padding: 108px 0 40px !important; }
    .policy-content { padding: 44px 0 64px !important; }
    .item { padding: 24px 22px !important; }
    .policy-document h2 { font-size: 23px !important; }
    .policy-document p, .policy-document li { font-size: 15.5px !important; }
}

@media (max-width: 767px) {
    #intro .introItem h1, #intro .introItem h2 { font-size: clamp(32px, 9vw, 46px) !important; }
    #intro .subWhite { font-size: 13.5px !important; padding: 8px 16px !important; }
    .sectionTitle h2 { font-size: clamp(26px, 7vw, 34px) !important; }
    #charts .number { font-size: 44px !important; }
    body { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── section heading internals ──────────────────────────── */
/* The theme wraps the "sub" line in a hairline box and sets it in uppercase
   with wide tracking, and draws the section icon inside a thin circle. Both
   read as 2015. Flattened to the new system. */

.sectionTitle .sub,
.sectionTitle span.sub,
.heading .sub {
    border: none !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--muted-2) !important;
    display: block;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
    padding: 0 !important;
    text-transform: none !important;
}

.sectionTitleIcon,
.sectionTitle i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 22px !important;
    font-size: 21px !important;
    color: #fff !important;
    background: var(--grad) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px -10px rgba(255, 106, 43, 0.6), inset 0 1px 0 rgba(255,255,255,.25);
}

/* the strap line under a section heading, plus its rule */
.intro-text {
    color: var(--muted) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.65 !important;
    text-transform: none !important;
    margin-top: 10px;
}

.intro-text hr {
    background: none !important;
    border: none !important;
    border-top: 1px solid var(--line) !important;
    margin: 26px auto 0 !important;
    max-width: 200px;
    width: 100%;
}

/* kill any remaining all-caps the old skin applies to headings */
.sectionTitle h2,
.sectionTitle h1,
.heading h2,
.item h3,
.item h4 {
    text-transform: none !important;
}

#charts h4, #charts p, .number-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
}

/* the separator bands between sections */
#separator, .separator {
    background: none !important;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 56px 0 !important;
}

.separator h3, .separator h2 {
    font-size: clamp(24px, 3vw, 34px) !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
}

.separator h3 small, .separator h2 small {
    display: block;
    font-size: 0.55em;
    font-weight: 300;
    color: var(--muted-2);
    margin-bottom: 6px;
}


/* the counter labels are .chartText, not a heading - the earlier selector
   missed them and they rendered as loud bold white on the gradient figures */
.chartText {
    color: var(--muted-2) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    margin-top: 6px;
    line-height: 1.5;
}

/* the counter icons: keep them as plain glyphs rather than tiles, so the
   gradient numbers stay the focal point */
#charts i,
#charts .timer i {
    color: var(--accent) !important;
    font-size: 30px !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
}

.timer .textWrapper { padding: 8px 0 4px; }

/* footer newsletter / misc inputs the theme may render */
.form-inline .form-control { display: inline-block; width: auto; }


/* ── the real card classes ──────────────────────────────── */
/* The earlier pass targeted .item, which only matches the #who and #about
   blocks. The bulk of the page is .serviceItem and .contactItem, so those
   were still rendering with the 2015 theme. Listed explicitly now. */

.serviceItem,
.contactItem,
.aboutItem,
#who .item,
#about .item {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    padding: 32px 28px !important;
    margin-bottom: 24px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.serviceItem:hover,
.contactItem:hover,
.aboutItem:hover,
#who .item:hover,
#about .item:hover {
    border-color: var(--line-2) !important;
    background: var(--surface-2) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.serviceIcon,
.contactIcon,
#about .icon,
#who .icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 15px;
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

#services .serviceIcon { margin-left: 0; }

.serviceItem:hover .serviceIcon,
.contactItem:hover .contactIcon,
.aboutItem:hover .icon {
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 12px 30px -10px rgba(255, 106, 43, 0.7);
}

.serviceIcon i,
.contactIcon i,
#about .icon > i,
#who .icon > i {
    color: #fff !important;
    font-size: 20px !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* The theme parks a class-less <i> before the real icon. :empty cannot be
   used to hide it — an icon <i> has no child nodes either, so :empty matched
   every icon on the page and hid them all. Target the class-less one. */
.serviceIcon i:not([class*="fa-"]),
.contactIcon i:not([class*="fa-"]),
.aboutItem .icon i:not([class*="fa-"]) {
    display: none !important;
}

.serviceInfo h4,
.contactInfo h4,
.aboutItem h4,
#about .item h4,
#who .item h4 {
    color: var(--text) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
    text-transform: none !important;
}

.serviceInfo h4 small,
.contactInfo h4 small,
.aboutItem h4 small,
#about .item h4 small {
    display: block;
    color: var(--accent-3) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    margin-top: 6px;
    text-transform: none !important;
}

.serviceInfo p,
.contactInfo p,
.aboutItem p,
#about .info p,
#about .item p,
#who .item p {
    color: var(--muted) !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

.contactInfo a { color: var(--accent-3) !important; text-decoration: none; font-weight: 500; }
.contactInfo a:hover { color: var(--accent) !important; }

/* the oversized icons in the separator bands — gradient-filled glyphs, which
   works because the icons are a font rather than images */
.biggerIcon {
    background: var(--grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--accent) !important;
    margin-bottom: 14px;
    display: inline-block !important;
    font-size: 40px !important;
}

.servicesWrapper .separator {
    border: none !important;
    margin: 34px 0 !important;
    padding: 0 !important;
}

/* the .btn-default-white variant used inside the service blocks */
.btn-default-white,
a.btn-default-white {
    background: var(--surface-2) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 999px !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 22px !important;
}

.btn-default-white:hover {
    background: var(--grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}