/* ============================================================
EMANACE — Fractional CMO & Strategic Marketing Advisory
Theme: Ark (light, thin type) — v3
Built on Bootstrap 5.3's CSS-variable theming (--bs-*) instead of a
parallel set of hand-rolled design tokens. Overriding these variables
re-themes Bootstrap's own components (buttons, cards, forms, badges,
navbar, links, text/bg/border utilities) automatically — this file
only supplies rules for the handful of bespoke brand elements
(eyebrow labels, the gradient rule, flow-step circles, etc.) that
Bootstrap has no built-in component for.
============================================================ */
:root{
/* ---- retheme Bootstrap's own variables (palette pulled from the
Emanace "E" mark: deep blue -> violet gradient, near-black ink) --- */
--bs-primary: #4f3ee0;
--bs-primary-rgb: 79, 62, 224;
--bs-body-font-family: 'Roboto', Arial, sans-serif;
--bs-body-font-weight: 300;
--bs-body-line-height: 1.75;
--bs-body-color: #1b1f3b;
--bs-body-color-rgb: 27, 31, 59;
--bs-body-bg: #ffffff;
--bs-emphasis-color: #1b1f3b;
--bs-emphasis-color-rgb: 27, 31, 59;
--bs-secondary-color: #6b7194;
--bs-secondary-color-rgb: 107, 113, 148;
--bs-tertiary-bg: #f5f5fb;
--bs-border-color: rgba(27, 31, 59, 0.09);
--bs-border-color-translucent: rgba(27, 31, 59, 0.09);
--bs-border-radius: 6px;
--bs-border-radius-sm: 6px;
--bs-border-radius-lg: 6px;
--bs-border-radius-xl: 6px;
--bs-border-radius-2xl: 6px;
--bs-border-radius-pill: 6px;
--bs-link-color: #4f3ee0;
--bs-link-color-rgb: 79, 62, 224;
--bs-link-hover-color: #a855f7;
--bs-link-hover-color-rgb: 168, 85, 247;
--bs-link-decoration: none;
/* ---- small set of brand tokens Bootstrap has no variable for ---- */
--accent-2: #a855f7; /* violet leg of the logo gradient */
--navy-deep: #0a0d24; /* footer background */
--surface-dim: #f5f5fb; /* alternate light section bg */
--line-inv: rgba(255, 255, 255, 0.14); /* hairlines on dark surfaces */
--gradient-feather: linear-gradient(100deg, var(--bs-primary) 0%, var(--accent-2) 100%);
--max: 1320px;
}
html{ scroll-behavior: smooth; }
body{ -webkit-font-smoothing: antialiased; font-synthesis: none; }
a{ color: inherit; text-decoration: none; }
/* Bootstrap's heading defaults use a different (larger, medium-weight)
scale than this design's thin display type — sizes/weights kept custom,
color/family are already inherited from the --bs-* overrides above. */
h1,h2,h3,h4{ font-weight: 300; line-height: 1.24; letter-spacing: 0; }
h1{ font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
h3{ font-size: clamp(1.1rem, 1.6vw, 1.25rem); font-weight: 400; }
/* Bootstrap's .container caps out at 1320px at xl; this design uses a
narrower reading measure, so we cap max-width and reuse Bootstrap's
own gutter/padding rather than reinventing it. */
.container{ max-width: var(--max); }
/* ---------- eyebrow / dash-flanked label ----------------------------- */
.eyebrow{
display: flex;
align-items: center;
gap: 12px;
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--bs-primary);
font-weight: 500;
margin-bottom: 16px;
}
.eyebrow::before,
.eyebrow::after{
content: "";
flex: 0 0 20px;
height: 1px;
background: var(--bs-primary);
opacity: 0.7;
}
.eyebrow.center{ justify-content: center; }
.eyebrow.left::after{ display: none; }
.eyebrow.left{ justify-content: flex-start; }
/* ---------- signature gradient rule ----------------------------------- */
.rule{
height: 2px;
width: 46px;
background: var(--gradient-feather);
border: 0;
margin: 22px 0 0 0;
}
.rule.center{ margin-left: auto; margin-right: auto; }
/* ---------- header (Bootstrap navbar) ------------------------------------ */
.site-header{
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-bottom: var(--bs-border-width) solid var(--bs-border-color);
padding-top: 18px;
padding-bottom: 18px;
/* Reserves the header's geometry (logo + padding) while web fonts load. */
min-height: 100px;
}
/*-- Tagline shown under the logo in the navbar --*/
.brand-tagline {
display: block;
width: 100%;
margin-top: 2px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.04em;
color: #4f3ee0;
white-space: nowrap;
text-align: center;
}
/* ---------- buttons ----------------------------------------------------
Real Bootstrap .btn components, themed through their own runtime
variables instead of a bespoke .btn class. Text/letter-spacing kept
to match the brand's uppercase micro-label style. */
.btn{
--bs-btn-font-size: 0.76rem;
--bs-btn-padding-y: 0.75rem;
--bs-btn-padding-x: 1.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary{
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--accent-2);
--bs-btn-hover-border-color: var(--accent-2);
--bs-btn-active-bg: var(--accent-2);
--bs-btn-active-border-color: var(--accent-2);
}
.btn-outline-primary{
--bs-btn-color: var(--bs-body-color);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--bs-primary);
--bs-btn-hover-bg: transparent;
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-color: var(--bs-primary);
--bs-btn-active-bg: transparent;
--bs-btn-active-border-color: var(--bs-primary);
}
.btn-outline-light{
--bs-btn-color: #fff;
--bs-btn-border-color: rgba(255, 255, 255, 0.55);
--bs-btn-hover-color: var(--bs-primary);
--bs-btn-hover-bg: #fff;
--bs-btn-hover-border-color: #fff;
}
/* ---------- badges used as topic "chips" -------------------------------- */
.badge.chip{
--bs-badge-color: var(--bs-body-color);
font-size: 0.76rem;
font-weight: 400;
text-transform: none;
padding: 6px 14px;
background: transparent;
border: var(--bs-border-width) solid var(--bs-border-color);
}
/* ---------- form controls -----------------------------------------------
Uses Bootstrap's .form-label / .form-control / .form-select directly;
only the focus ring (hard-coded blue in bootstrap.min.css) and label
styling need a brand override. */
.form-label{
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
color: var(--bs-body-color);
margin-bottom: 8px;
}
.form-control, .form-select{
padding: 12px 14px;
font-weight: 300;
font-size: 0.94rem;
}
.form-control:focus, .form-select:focus{
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}
/* ---------- hero --------------------------------------------------------- */
.hero{
position: relative;
padding: 108px 0 92px;
overflow: hidden;
}
.hero .container{ position: relative; z-index: 1; }
.hero h1{ margin-bottom: 22px; }
.hero .lede{ margin-bottom: 34px; }
/* Full-bleed photo hero: background image + dark gradient scrim so the
light-weight white type stays readable over any part of the photo.
Served responsively: mobile/tablet get a smaller source image instead
of the full 2400px desktop version, since background-size:cover can't
pick a srcset for us. Mobile-first, then override upward. */
.hero-photo{
padding: 168px 0 140px;
background: #0a0d24 url('../images/hero-bg2-768.webp') center/cover no-repeat;
color: #fff;
}
@media (min-width: 768.02px){
.hero-photo{
background-image: url('../images/hero-bg2-1200.webp');
}
}
@media (min-width: 1200.02px){
.hero-photo{
background-image: url('../images/hero-bg2.webp');
}
}
.hero-photo::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgb(217 168 215 / 92%) 0%, rgb(5 123 179 / 72%) 42%, rgba(10, 13, 36, 0.38) 72%, rgba(10, 13, 36, 0.12) 100%);
pointer-events: none;
}
.hero-photo h1{ color: #fff; }
.hero-photo .lede{ color: rgba(255, 255, 255, 0.88); }
.hero-photo .eyebrow{ color: rgba(255, 255, 255, 0.85); }
.hero-photo .eyebrow::before,
.hero-photo .eyebrow::after{ background: rgba(255, 255, 255, 0.6); }
@media (max-width: 991.98px){
.hero-photo{ padding: 128px 0 96px; }
}
/* ---------- sections ------------------------------------------------------*/
section{ padding: 88px 0; }
section.tight{ padding: 60px 0; }
.section-dim{ background: var(--surface-dim); }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
/* ---------- video intro ---------------------------------------------------*/
.video-intro-wrap{
border-radius: var(--bs-border-radius);
overflow: hidden;
border: var(--bs-border-width) solid var(--bs-border-color);
background: var(--surface-dim);
}
.video-intro-wrap video{ width: 100%; height: 100%; object-fit: cover; background: #000; }
.ratio > .video-placeholder-inner{ position: absolute; inset: 0; width: 100%; height: 100%; }
.video-placeholder-inner img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.video-placeholder-overlay{
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
background: linear-gradient(180deg, rgba(10, 13, 36, 0.15) 0%, rgba(10, 13, 36, 0.55) 100%);
text-align: center;
}
.video-placeholder-icon{
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.92);
color: var(--bs-primary);
}
.video-placeholder-text{
color: #fff; font-size: 0.85rem; letter-spacing: 0.03em;
text-transform: uppercase; font-weight: 500;
}
/* ---------- feature cards --------------------------------------------------
Bootstrap's .card, retimed through its own variables (border, radius,
background all already reference var(--bs-*), so most of the look
comes free from the theme overrides above). */
.card{
--bs-card-border-color: var(--bs-border-color);
padding: 40px 34px;
transition: background .2s ease;
}
.card:hover{ background: var(--surface-dim); }
.section-dim .card{ background: #fff; }
.section-dim .card:hover{ background: #eef0f3; }
.card .num{
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
font-size: 0.68rem; font-weight: 500; letter-spacing: 0.02em;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: 50%;
margin-bottom: 22px;
}
.card .num svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; }
.card h3{ margin-bottom: 12px; font-weight: 400; }
.card p{ font-size: 0.95rem; margin-bottom: 0; }
/* ---------- process flow ---------------------------------------------------*/
.flow-step{ text-align: center; padding: 6px 10px; position: relative; }
.flow-step .stage{
width: 92px; height: 92px;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
border: var(--bs-border-width) solid var(--bs-primary);
font-size: 0.78rem; font-weight: 400;
padding: 6px;
line-height: 1.25;
word-break: break-word; overflow-wrap: break-word;
color: var(--bs-primary);
}
.flow-step .detail{ font-size: 0.8rem; letter-spacing: 0.01em; }
/* ---------- quote / CTA -------------------------------------------------------*/
.cta-band{
background: var(--gradient-feather);
color: #fff;
padding: 84px 0;
text-align: center;
}
.cta-band h2{ color: #fff; font-weight: 300; max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-band p{ color: rgba(255, 255, 255, 0.85); max-width: 50ch; margin: 0 auto 30px; }
.cta-band .eyebrow{ color: rgba(255, 255, 255, 0.85); }
.cta-band .eyebrow::before, .cta-band .eyebrow::after{ background: rgba(255, 255, 255, 0.6); }
blockquote.pull{
font-weight: 300;
font-size: 1.45rem;
max-width: 720px;
margin: 0 auto;
text-align: center;
line-height: 1.55;
}
blockquote.pull footer{
margin-top: 20px;
font-size: 0.76rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 400;
color: var(--bs-primary);
}
/* ---------- table (what we do / don't) --------------------------------------*/
.compare-col{
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
padding: 38px;
}
.compare-col h3{ margin-bottom: 18px; font-weight: 400; }
.compare-col ul{ margin: 0; padding: 0; list-style: none; }
.compare-col li{
padding: 11px 0;
border-bottom: var(--bs-border-width) solid var(--bs-border-color);
font-size: 0.94rem;
display: flex; gap: 12px;
}
.compare-col li:last-child{ border-bottom: 0; }
.compare-col.yes li::before{ content: "—"; color: var(--bs-primary); flex-shrink: 0; }
.compare-col.no li::before{ content: "—"; color: var(--bs-secondary-color); flex-shrink: 0; }
.compare-col.no{ background: var(--surface-dim); }
/* ---------- services detail list ----------------------------------------------*/
.service-block{
padding: 52px 0;
border-bottom: var(--bs-border-width) solid var(--bs-border-color);
align-items: flex-start;
}
.service-block:last-child{ border-bottom: 0; }
.service-block h2{ font-weight: 300; }
.service-block .tag{
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
color: var(--bs-primary);
margin-bottom: 14px;
display: block;
}
.service-block .deliverable{
margin-top: 22px;
padding: 22px 24px;
background: var(--surface-dim);
border-left: 2px solid var(--bs-primary);
}
.service-block .deliverable strong{ display: block; font-weight: 400; font-size: 1rem; margin-bottom: 6px; }
/* ---------- pricing / engagement cards -----------------------------------------*/
.plan{
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
padding: 40px 34px;
display: flex; flex-direction: column; gap: 18px;
transition: border-color .2s ease;
}
.plan h3{ font-weight: 400; }
.plan.featured{ background: var(--gradient-feather); border-color: var(--bs-primary); color: #fff; }
.plan.featured h3, .plan.featured .plan-question{ color: #fff; }
.plan.featured p{ color: rgba(255, 255, 255, 0.9) !important; }
.plan.featured .rule{ background: rgba(255, 255, 255, 0.6); }
.plan.featured .btn{ border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.plan.featured .btn:hover{ background: #fff; color: var(--bs-primary); }
.plan-question{ font-weight: 300; font-size: 1rem; }
.plan ul{ margin: 10px 0 0; padding: 0; list-style: none; flex-grow: 1; }
.plan li{ padding: 8px 0; font-size: 0.9rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }
.plan.featured li{ color: rgba(255, 255, 255, 0.9); border-top-color: rgba(255, 255, 255, 0.25); }
.plan li:first-child{ border-top: 0; }
/* ---------- about page specific -------------------------------------------------
.expert-card is a real Bootstrap .card (card-img-top + card-body), so the
photo and text padding/rounding already come from Bootstrap. The plain
content cards elsewhere pad the .card element directly (see ".card" above),
which would also inset this card's edge-to-edge photo — reset that back
to 0 and let .card-body carry the padding instead. */
.expert-card{ padding: 0; overflow: hidden; transition: box-shadow .2s ease; }
.expert-card:hover{ background: var(--bs-body-bg); box-shadow: 0 12px 28px rgba(20, 30, 60, 0.08); }
.expert-photo img{ filter: grayscale(15%); display: block; }
.expert-card .card-body{ padding: 22px 24px 26px; }
.expert-name{ font-weight: 600; font-size: 1.08rem; }
.expert-role{ color: var(--bs-secondary-color); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.expert-blurb{ color: var(--bs-secondary-color); font-size: 0.92rem; margin: 12px 0 0; }
.stat-num{ font-weight: 300; font-size: 2.4rem; color: var(--bs-primary); margin-bottom: 6px; }
.stat-label{ font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
/* ---------- contact ---------------------------------------------------------------*/
.contact-info-item{ display: flex; gap: 18px; padding: 20px 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.contact-info-item:first-child{ padding-top: 0; }
.contact-info-item .label{
font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
color: var(--bs-primary); min-width: 100px;
}
/* ---------- footer ----------------------------------------------------------------*/
footer.site-footer{ background: var(--navy-deep); color: rgba(255, 255, 255, 0.6); padding: 60px 0 30px; font-weight: 300; }
footer.site-footer .foot-top{ padding-bottom: 40px; border-bottom: 1px solid var(--line-inv); }
footer.site-footer .brand{ margin-bottom: 14px; display: inline-flex; background: rgba(255, 255, 255, 0.92); padding: 14px 20px; border-radius: var(--bs-border-radius); }
footer.site-footer p{ font-size: 0.86rem; max-width: 34ch; color: rgba(255, 255, 255, 0.78); }
footer.site-footer h3{ color: #fff; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; }
footer.site-footer ul{ list-style: none; margin: 0; padding: 0; }
footer.site-footer li{ margin-bottom: 10px; font-size: 0.88rem; }
footer.site-footer a:hover{ color: var(--bs-primary) !important; }
.foot-bottom{ font-size: 0.76rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); }
footer.site-footer .social-links-col li{ margin-bottom: 12px; }
footer.site-footer .social-links-col a{ display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.75); }
footer.site-footer .social-links-col a .social-icon{
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
flex-shrink: 0;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
footer.site-footer .social-links-col a:hover .social-icon{ background: var(--bs-primary); border-color: var(--bs-primary); color: var(--navy-deep); }
/* ---------- page hero (inner pages) ------------------------------------------------*/
.page-hero{ padding: 74px 0 60px; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.page-hero .lede{ font-size: 1.02rem; }
/* ---------- reusable prose helpers ------------------------------------------
A handful of pages repeated the same "lede-sized" or "narrow, centered
secondary paragraph" combination as inline styles. Bootstrap's fs-*
scale and spacing utilities don't land on these exact values, so these
two small helpers replace the inline styles - everything else (color,
weight, alignment, spacing) still comes from Bootstrap utility classes
(text-body-secondary, text-center, mx-auto, mt-4, small, fw-light...). */
.prose-md{ font-size: 1.02rem; }
.prose-narrow{ max-width: 60ch; }
/* ---------- legal pages (privacy policy / terms & conditions) --------------- */
.legal-content{ max-width: 780px; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; }
.legal-content h2{ font-size: 1.3rem; font-weight: 500; margin-top: 44px; margin-bottom: 14px; }
.legal-content h2:first-child{ margin-top: 0; }
.legal-content p{ color: var(--bs-secondary-color); line-height: 1.7; margin-bottom: 16px; }
.legal-content ul{ color: var(--bs-secondary-color); line-height: 1.7; margin-bottom: 16px; padding-left: 22px; }
.legal-content ul li{ margin-bottom: 8px; }
.legal-content a{ color: var(--bs-primary); text-decoration: underline; }
.legal-content a:hover{ color: var(--accent-2); }
.legal-content table{ font-size: 0.94rem; }
.foot-legal-links a{ color: rgba(255, 255, 255, 0.5); }
.foot-legal-links a:hover{ color: var(--bs-primary) !important; }
/* ---------- hero newsletter opt-in card ------------------------------------
Zoho's own inline styles are left completely intact in the markup so its
script can keep toggling `display` on the success/error blocks. Everything
here only overrides cosmetic properties (color, radius, width, font) with
!important so it can beat those inline styles without touching `display`,
`position`, or `opacity` — the properties Zoho's JS relies on. */
.hero-newsletter-card{
position: relative;
width: 100% !important;
max-width: 340px;
margin-left: auto;
border: 1px solid rgba(79, 62, 224, 0.10) !important;
overflow: visible !important;
border-radius: var(--bs-border-radius-lg);
background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
box-shadow:
0 26px 60px -14px rgba(10, 13, 36, 0.38),
0 10px 24px -10px rgba(79, 62, 224, 0.30);
padding: 30px 26px 26px;
font-family: inherit !important;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover){
.hero-newsletter-card:hover{
transform: translateY(-4px);
box-shadow:
0 34px 70px -14px rgba(10, 13, 36, 0.42),
0 14px 30px -10px rgba(79, 62, 224, 0.36);
}
}
@media (max-width: 991.98px){
.hero-newsletter-card{ margin: 40px auto 0; }
}
/* thin brand-gradient feather along the top edge, echoing the .rule motif
used elsewhere on the site */
.hero-newsletter-card::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-top-left-radius: var(--bs-border-radius-lg);
border-top-right-radius: var(--bs-border-radius-lg);
background: var(--gradient-feather);
}
.hero-newsletter-heading{
background: none !important;
color: var(--bs-body-color) !important;
padding: 0 !important;
text-align: left !important;
font-weight: 600 !important;
font-size: 0.98rem !important;
margin-bottom: 18px;
line-height: 1.35;
}
/* small circular icon badge above the heading, built from a gradient
background layer + a masked/positioned envelope glyph — no markup
changes needed since it lives entirely on the ::before pseudo-element */
.hero-newsletter-heading::before{
content: "";
display: block;
width: 38px;
height: 38px;
margin: 0 0 14px;
border-radius: 50%;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"),
var(--gradient-feather);
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: 16px 16px, 38px 38px;
box-shadow: 0 6px 14px -4px rgba(79, 62, 224, 0.55);
}
/* field wrapper divs: only resize/space them, display stays whatever Zoho
set inline (inline-block for visible fields, none for the hidden Name
field) — an inline-block element at 100% width still wraps to its own
line, so there's no need to touch display here at all. */
.hero-newsletter-field{
width: 100% !important;
height: auto !important;
margin: 0 0 12px !important;
}
.hero-newsletter-input{
width: 100% !important;
font-size: 1rem !important; /* >=16px prevents iOS Safari auto-zoom on focus */
font-family: inherit !important;
padding: 12px 14px 12px 42px !important;
border-width: 1px !important;
border-color: #d9d9e3 !important;
border-radius: var(--bs-border-radius) !important;
color: var(--bs-body-color) !important;
background-color: #fff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7194' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 16px 16px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-newsletter-input::placeholder{ color: var(--bs-secondary-color) !important; opacity: 0.85; }
.hero-newsletter-input:focus{
border-color: var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}
.hero-newsletter-submit{
width: 100% !important;
min-height: 46px;
padding: 12px 14px !important;
background: var(--gradient-feather) !important;
border-radius: var(--bs-border-radius) !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
font-family: inherit !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
box-shadow: 0 10px 22px -8px rgba(79, 62, 224, 0.55);
transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-newsletter-submit:hover{
background: linear-gradient(100deg, var(--accent-2) 0%, var(--bs-primary) 100%) !important;
transform: translateY(-1px);
box-shadow: 0 14px 26px -8px rgba(79, 62, 224, 0.6);
}
/* trust microcopy line placed just after the Zoho