/* ═══════════════════════════════════════════════════════════════════════════
VFO — START A CONVERSATION (/start-a-conversation/)
APPROVED DESKTOP STYLESHEET — V3
═══════════════════════════════════════════════════════════════════════════
Extracted verbatim from the approved review file
start-a-conversation-v3-desktop.html. Nothing was redesigned, restyled,
respaced or recolored during packaging.
FONT DEPENDENCY
Poppins is loaded from Google Fonts by the in the HTML .
It is the ONLY external dependency in this package. If VFO self-hosts
webfonts, replace that with a local @font-face block here and drop
the font files into start-a-conversation/assets/. Weights in use:
300, 400, 500, 600, 700, 800. No other typeface is used. Oswald is not
used anywhere.
BRAND ASSETS
Referenced from the HTML as logos/…png with normal relative paths.
═══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════ TOKENS ══════════════════ */
:root{
/* Official VFO digital HEX values */
--red:#EC1B33;
--teal:#0FA8B9;
--gold:#F8AE32;
--orange:#F07521;
--offwhite:#F7F1EB;
--black:#090909;
/* Working neutrals derived only for surface / opacity / contrast */
--ink:#141414;
--card-d:#131315;
--line-d:rgba(247,241,235,.13);
--line-l:rgba(9,9,9,.13);
--body-d:#C6C4C1;
--muted-d:#8C8A88;
--body-l:#4A4845;
--muted-l:#6E6B67;
--paper:#FFFFFF;
/* Form-only working values — derived, not new brand colors */
--field-line:rgba(9,9,9,.22);
--field-bg:#FFFFFF;
--error:#C9142A;
--maxw:1280px;
--pad:48px;
}
/* ══════════════════ RESET / BASE ══════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size:16px;
font-weight:400;
line-height:1.75;
background:var(--black);
color:var(--offwhite);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* height:auto is REQUIRED alongside the width/height attributes carried by the
tags. Those attributes exist to reserve space and prevent layout shift,
but a bare height attribute is a presentational hint: wherever CSS sets only
a width (the footer lockup at 236px, the circular V watermark at 440px), the
hint would win on the height axis and distort the artwork. height:auto keeps
every image at its true aspect ratio. The mobile stylesheet already does
this. Rules that set BOTH axes explicitly — .nav-logo img — are unaffected. */
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-weight:700;line-height:1.1;letter-spacing:-0.02em;}
em{font-style:normal;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.skip{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--gold);color:var(--black);padding:12px 20px;
font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.vh{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ── Shared type primitives ── */
.eyebrow{
display:flex;align-items:center;gap:11px;
font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
line-height:1.4;
}
.eyebrow .sq{width:9px;height:9px;flex:0 0 9px;background:var(--red);}
.h-sec{
font-size:clamp(34px,3.1vw,46px);
font-weight:700;line-height:1.08;letter-spacing:-0.025em;
text-transform:uppercase;margin-top:22px;
}
.lede{font-size:17px;line-height:1.8;max-width:660px;margin-top:20px;}
.sec-head{display:grid;grid-template-columns:1.08fr 1fr;gap:0 72px;align-items:end;}
.sec-head .head-l{grid-column:1;}
.sec-head .head-r{grid-column:2;padding-bottom:6px;}
.sec-head .head-r .lede{max-width:none;margin-top:0;}
.on-dark .h-sec{color:var(--offwhite);}
.on-dark .eyebrow{color:var(--muted-d);}
.on-dark .lede{color:var(--body-d);}
.on-dark .lede strong{color:#fff;font-weight:600;}
.on-light .h-sec{color:var(--black);}
.on-light .eyebrow{color:var(--muted-l);}
.on-light .lede{color:var(--body-l);}
.on-light .lede strong{color:var(--black);font-weight:600;}
/* ── Buttons — identical system to the approved Homepage / Services / About ── */
.btn{
display:inline-flex;align-items:center;gap:9px;
font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:17px 32px;border:1.5px solid transparent;line-height:1;
transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-red:hover{background:#C9142A;border-color:#C9142A;transform:translateY(-2px);}
.btn-ink{background:var(--black);color:var(--offwhite);border-color:var(--black);}
.btn-ink:hover{background:#2A2A2A;border-color:#2A2A2A;transform:translateY(-2px);}
.btn-ghost{background:none;color:var(--black);border-color:var(--field-line);}
.btn-ghost:hover{background:var(--black);color:var(--offwhite);border-color:var(--black);}
.btn-lg{padding:22px 44px;font-size:14px;}
.tlink{
display:inline-flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
padding-bottom:6px;border-bottom:2px solid currentColor;transition:gap .22s;
}
.tlink:hover{gap:15px;}
/* ══════════════════ NAV — approved, unchanged ══════════════════ */
.nav{
position:sticky;top:0;z-index:100;
background:rgba(9,9,9,.90);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border-bottom:1px solid var(--line-d);
}
.nav-in{
max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
height:96px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.nav-logo img{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
font-size:13.5px;font-weight:500;letter-spacing:.06em;
color:var(--body-d);transition:color .2s;position:relative;padding:6px 0;
}
.nav-links a::after{
content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
background:var(--red);transition:width .25s;
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{width:100%;}
.nav-links a.current{color:#fff;}
.nav-links a.current::after{width:100%;}
.nav-links a.btn{
font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:17px 32px;color:#fff;
}
.nav-links a.btn::after{content:none;}
.nav-links a.btn:hover{color:#fff;}
/* The site-wide CTA is the current page. It stays visible for system
consistency but is marked current and is not a live link. */
.nav-links a.btn[aria-current="page"]{
background:none;color:#fff;border-color:var(--red);cursor:default;
}
.nav-links a.btn[aria-current="page"]:hover{transform:none;background:none;border-color:var(--red);}
/* ══════════════════ 1 · HERO — COMPACT, NOT A HOMEPAGE HERO ══════════════════
Deliberately short. No map, no proof bar, no routing grid and — by design —
no CTA button: the form immediately below is the action. The node language
survives only as a restrained constellation behind the copy. */
.hero{position:relative;background:var(--black);overflow:hidden;}
.hero-net{position:absolute;right:-20px;top:0;width:58%;height:100%;opacity:1;pointer-events:none;}
.hero-scrim{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,var(--black) 34%,rgba(9,9,9,.66) 58%,rgba(9,9,9,.20) 100%);
}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:76px var(--pad) 82px;}
.hero h1{
font-size:clamp(42px,3.9vw,58px);
line-height:1.04;letter-spacing:-0.038em;color:#fff;
margin-top:24px;text-transform:uppercase;
}
.hero h1 em{color:var(--gold);}
.hero .lede{font-size:17.5px;max-width:620px;margin-top:26px;color:var(--body-d);}
.hero .lede strong{color:#fff;font-weight:600;}
/* ══════════════════ 2 · TRUST STRIP ══════════════════
Three approved company-level figures. A final confidence signal immediately
before the prospect provides information — NOT a proof section. */
.trust{background:var(--black);border-top:1px solid var(--line-d);padding:38px 0 42px;}
.trust-in{display:flex;align-items:stretch;gap:0;}
.tm{flex:1;padding:6px 40px;border-left:1px solid var(--line-d);}
.tm:first-child{padding-left:0;border-left:none;}
.tm .v{
font-size:clamp(30px,2.7vw,40px);font-weight:700;line-height:1;letter-spacing:-0.035em;
}
.tm .l{
font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
color:#fff;margin-top:12px;line-height:1.7;
}
/* ══════════════════ 3 · THE FORM ══════════════════ */
.formsec{position:relative;background:var(--offwhite);padding:96px 0 104px;overflow:hidden;}
.form-mark{position:absolute;top:64px;right:-140px;width:440px;opacity:.05;pointer-events:none;}
.form-in{position:relative;max-width:1060px;margin:0 auto;padding:0 var(--pad);}
.form-head{max-width:720px;}
.form-head .lede{color:var(--body-l);}
/* The form card — premium, not a generic embed. */
.fcard{
background:var(--paper);border:1px solid var(--line-l);border-top:4px solid var(--red);
margin-top:52px;padding:0;
box-shadow:0 26px 64px rgba(9,9,9,.07);
}
.grp{padding:46px 56px 48px;border-bottom:1px solid var(--line-l);}
.grp:last-of-type{border-bottom:none;}
.grp-hd{display:flex;align-items:baseline;gap:16px;padding-bottom:8px;}
.grp-hd .n{
font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--muted-l);
flex:0 0 auto;padding-top:2px;
}
.grp-hd h3{
font-size:clamp(19px,1.5vw,23px);font-weight:700;letter-spacing:-0.01em;
text-transform:uppercase;color:var(--black);line-height:1.3;
}
.grp .helper{font-size:14.5px;line-height:1.8;color:var(--muted-l);margin-top:10px;max-width:660px;}
fieldset{border:none;}
legend{padding:0;}
/* ── Fields ── */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:30px 32px;margin-top:30px;}
.f{display:flex;flex-direction:column;}
.f.full{grid-column:1 / -1;}
.f label,.lbl{
font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--black);line-height:1.6;
}
.req{color:var(--red);margin-left:4px;}
.opt{color:var(--muted-l);font-weight:600;letter-spacing:.16em;margin-left:8px;}
.f input[type="text"],
.f input[type="email"],
.f input[type="tel"],
.f input[type="date"],
.f textarea{
margin-top:12px;width:100%;
background:var(--field-bg);
border:1px solid var(--field-line);
border-radius:0;
padding:15px 16px;
font-size:16px;line-height:1.6;color:var(--black);
transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.f textarea{resize:vertical;min-height:170px;line-height:1.75;}
.f textarea.tall{min-height:210px;}
.f input::placeholder,.f textarea::placeholder{color:#A29C95;}
.f input:hover,.f textarea:hover{border-color:rgba(9,9,9,.42);}
.f input:focus,.f textarea:focus{
outline:none;border-color:var(--black);
box-shadow:inset 0 -3px 0 0 var(--teal);
}
.f input:focus-visible,.f textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* Keeps inputs aligned across a row when one label runs to two lines. */
.f.tall-label label{min-height:37px;display:block;}
.hint{font-size:12.5px;line-height:1.7;color:var(--muted-l);margin-top:9px;letter-spacing:.02em;}
.count{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-l);margin-top:9px;}
/* Error state — never signalled by color alone: icon + text + border weight. */
.err{
display:none;align-items:flex-start;gap:8px;margin-top:9px;
font-size:12.5px;font-weight:600;line-height:1.6;letter-spacing:.02em;color:var(--error);
}
.err::before{
content:'!';flex:0 0 16px;width:16px;height:16px;margin-top:1px;
background:var(--error);color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;line-height:1;
}
.f.is-invalid .err,.optgrid.is-invalid + .err,.err.on{display:flex;}
.f.is-invalid input,.f.is-invalid textarea{border-color:var(--error);border-width:2px;}
/* ── Capability selection — real radios, styled as cards ── */
.capgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.capgrid .wide{grid-column:1 / -1;}
.opt-card{position:relative;display:block;}
.opt-card input{
position:absolute;top:14px;left:14px;width:18px;height:18px;margin:0;
accent-color:var(--red);cursor:pointer;
}
.opt-card .box{
display:block;cursor:pointer;height:100%;min-height:132px;
background:var(--paper);border:1px solid var(--line-l);border-top:3px solid;
padding:26px 26px 24px 52px;
transition:transform .22s,box-shadow .22s,background-color .22s,border-color .22s;
}
.opt-card .box:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(9,9,9,.10);}
.opt-card .t{
display:block;
font-size:15.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
color:var(--black);line-height:1.4;padding-right:44px;
}
/* ACCESSIBILITY — INTENTIONAL, DOCUMENTED VARIATION FROM THE ABOUT PAGE.
On the About page the four positioning lines are set in their capability
color on an off-white surface. Measured against WCAG AA that fails for text
at this size (teal 2.56:1, orange 2.58:1, gold 1.69:1 on off-white; 4.5:1 is
required). These lines sit inside an interactive selection control here, so
the text is set in near-black and the capability color is carried by the
card's top rule and a leading node dot instead — identity kept, contrast
fixed. Recommend rolling the same treatment back into About. */
.opt-card .p{
display:flex;align-items:center;gap:9px;
font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--black);margin-top:11px;line-height:1.7;
}
.opt-card .p .nd{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor;}
.opt-card .box .chk{
position:absolute;top:22px;right:22px;width:20px;height:20px;
display:flex;align-items:center;justify-content:center;
background:var(--black);color:#fff;font-size:12px;font-weight:700;line-height:1;
opacity:0;transition:opacity .2s;
}
/* Selected state carries a checkmark label and a weight change — not color alone. */
.opt-card input:checked + .box{background:var(--offwhite);box-shadow:inset 0 0 0 2px var(--black);}
.opt-card input:checked + .box .chk{opacity:1;}
.opt-card input:focus-visible + .box{outline:2px solid var(--gold);outline-offset:3px;}
/* "I'm Not Sure / Something Else" is an INTENTIONAL LEAD PATH, not a lesser
option. It carries the same title typography, padding and rule weight as
the four capability areas. Its top rule runs through all four capability
colors — the visual statement being "it could be any of these", not "none
of the above". Internal routing for these leads is VFO's HubSpot
implementation decision and is deliberately NOT modelled here. */
.opt-card.plain .box{
border-top:none;min-height:0;padding-top:29px;padding-bottom:26px;
}
.opt-card.plain .box::before{
content:'';position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--red) 0%,var(--red) 25%,var(--teal) 25%,var(--teal) 50%,var(--gold) 50%,var(--gold) 75%,var(--orange) 75%,var(--orange) 100%);
}
.opt-card.plain .n{
display:flex;align-items:center;gap:9px;
font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--black);margin-top:11px;line-height:1.7;
}
/* ── Timing — pill radios + conditional date ── */
.optgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
.pill{position:relative;display:block;}
.pill input{position:absolute;top:20px;left:18px;width:17px;height:17px;margin:0;accent-color:var(--red);cursor:pointer;}
.pill .box{
display:flex;align-items:center;min-height:78px;cursor:pointer;height:100%;
background:var(--paper);border:1px solid var(--line-l);
padding:18px 22px 18px 48px;
font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--black);line-height:1.6;
transition:background-color .2s,box-shadow .2s,transform .2s;
}
.pill .box:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(9,9,9,.09);}
.pill input:checked + .box{background:var(--offwhite);box-shadow:inset 0 0 0 2px var(--black);}
.pill input:focus-visible + .box{outline:2px solid var(--gold);outline-offset:3px;}
.reveal-field{
margin-top:28px;padding:26px 28px;background:var(--offwhite);
border:1px solid var(--line-l);border-left:3px solid var(--gold);
max-width:520px;
}
.reveal-field[hidden]{display:none;}
.reveal-field .f input{background:var(--paper);}
/* ── Submit block ── */
.submit{padding:44px 56px 50px;background:var(--offwhite);border-top:1px solid var(--line-l);}
.submit-row{display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.privacy{
font-size:12.5px;line-height:1.85;color:var(--muted-l);max-width:520px;letter-spacing:.015em;
}
/* Communicates seriousness and urgency WITHOUT a time commitment. No response
window, callback guarantee or SLA may be added here. */
.assure{
margin-bottom:30px;padding:22px 26px;background:var(--paper);
border:1px solid var(--line-l);border-left:3px solid var(--teal);
max-width:760px;
}
.assure .k{
font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-l);
}
.assure p{font-size:14.5px;line-height:1.85;color:var(--body-l);margin-top:9px;}
.formerr{
display:none;margin-bottom:26px;padding:20px 22px;
background:#FFF3F4;border:1px solid rgba(201,20,42,.35);border-left:3px solid var(--error);
}
.formerr.on{display:block;}
.formerr .h{
font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--error);
}
.formerr ul{margin-top:10px;}
.formerr li{font-size:13.5px;line-height:1.9;color:var(--body-l);}
.formerr li a{border-bottom:1px solid var(--field-line);font-weight:600;}
.formerr li a:hover{border-bottom-color:var(--black);}
/* The review file's non-production notice block and its rules were REMOVED for
this live deployment. Nothing replaced them: on a real submission the
approved success state below takes over, and on a real failure the
.submiterr panel defined at the end of this file does. */
/* ══════════════════ SUCCESS STATE ══════════════════
The approved post-submission state. It replaces the form in place on a
confirmed submission — the page does NOT redirect away, and no response
time is promised. */
.success{display:none;}
.success.on{display:block;}
.success-card{
background:var(--paper);border:1px solid var(--line-l);border-top:4px solid var(--teal);
margin-top:52px;box-shadow:0 26px 64px rgba(9,9,9,.07);
}
/* The review file's success-state review banner and its rules were REMOVED.
The live success card carries the approved content only. */
.success-bd{padding:64px 56px 68px;}
.success-bd .nodes{display:flex;align-items:center;gap:12px;}
.success-bd .nodes span{width:11px;height:11px;border-radius:50%;}
.success-bd .nodes .ln{width:44px;height:2px;border-radius:0;}
.success-bd h2{
font-size:clamp(34px,3.2vw,46px);letter-spacing:-0.035em;text-transform:uppercase;
color:var(--black);margin-top:26px;
}
/* Red, not teal: teal on white measures 2.87:1 — below the 3:1 large-text
minimum. Red measures 4.4:1. */
.success-bd h2 em{color:var(--red);}
.success-bd p{font-size:17px;line-height:1.85;color:var(--body-l);margin-top:22px;max-width:640px;}
/* ══════════════════ 4 · WHAT HAPPENS NEXT ══════════════════ */
.next{background:var(--black);padding:96px 0 100px;}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;}
.stp{
position:relative;background:var(--card-d);border:1px solid var(--line-d);border-top:3px solid;
padding:34px 32px 34px;transition:transform .26s,background-color .26s,box-shadow .26s;
}
.stp:hover{transform:translateY(-6px);background:#17171A;box-shadow:0 24px 52px rgba(0,0,0,.62);}
.stp .n{
display:inline-flex;align-items:center;gap:10px;
font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.stp .n .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.stp h3{font-size:clamp(19px,1.6vw,23px);color:#fff;margin-top:18px;text-transform:uppercase;letter-spacing:-0.015em;line-height:1.25;}
.stp p{font-size:15px;line-height:1.8;color:var(--body-d);margin-top:14px;}
.stp .arrow{position:absolute;right:-16px;top:50%;transform:translateY(-50%);font-size:17px;font-weight:700;color:var(--muted-d);z-index:2;}
/* ══════════════════ 5 · DIRECT CONTACT ══════════════════
A second real way in — NOT a fallback and NOT a second CTA block. Nothing
here (or anywhere on this page) states or implies that the form is faster
or preferred; for many inquiries a phone call genuinely is the quickest
route. Phone and email are presented as full, directly actionable contact
paths using the approved VFO business details from the site footer. */
.direct{background:var(--paper);border-top:1px solid var(--line-l);padding:88px 0 92px;}
.direct-in{display:grid;grid-template-columns:1.02fr .98fr;gap:0 76px;align-items:center;}
.direct .dl .lede{color:var(--body-l);max-width:520px;}
.direct h2 em{color:var(--red);}
.dr{display:flex;flex-direction:column;gap:18px;}
.dcard{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;
background:var(--offwhite);border:1px solid var(--line-l);border-left:3px solid;
padding:26px 30px;
transition:transform .24s,box-shadow .24s,background-color .24s;
}
.dcard:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(9,9,9,.12);background:#FBF7F3;}
.dcard .k{
grid-column:1;display:flex;align-items:center;gap:9px;
font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-l);
}
.dcard .k .nd{width:8px;height:8px;flex:0 0 8px;border-radius:50%;}
.dcard .v{
grid-column:1;font-size:clamp(21px,1.7vw,26px);font-weight:700;letter-spacing:-0.02em;
color:var(--black);line-height:1.2;margin-top:2px;
}
.dcard .go{
grid-column:2;grid-row:1 / span 2;
font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--black);white-space:nowrap;
display:inline-flex;align-items:center;gap:8px;transition:gap .24s;
}
.dcard:hover .go{gap:14px;}
/* ══════════════════ FOOTER — approved, unchanged ══════════════════ */
footer{background:var(--black);border-top:1px solid var(--line-d);padding:76px 0 34px;}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:54px;}
/* The approved site-wide footer lockup sizing — identical to the Homepage,
Services and About footers: 236px wide, height derived from the artwork.
.flogo matches the approved Homepage footer, where the lockup links home. */
.fbrand .flogo{display:inline-block;}
.fbrand img{width:236px;}
.tagline{margin-top:26px;}
.tagline .l{display:block;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.9;white-space:nowrap;}
.tagline .r{color:var(--red);}
.tagline .b{color:var(--teal);}
.tagline .g{color:var(--gold);}
.fdescriptor{margin-top:18px;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--muted-d);line-height:1.6;}
.fcontact{margin-top:20px;font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-d);line-height:2.15;}
.fcontact a:hover{color:var(--offwhite);}
.fcol .h{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--offwhite);margin-bottom:20px;}
/* The Services group heading is now a destination in its own right. It keeps
the heading's exact type treatment — this rule only stops the generic
.fcol a sizing from shrinking it — so the footer looks identical. */
.fcol .h a{font:inherit;letter-spacing:inherit;color:inherit;transition:color .2s;}
.fcol .h a:hover{color:#fff;}
.fcol li{margin-bottom:12px;}
.fcol a{font-size:14px;color:var(--body-d);transition:color .2s;}
.fcol a:hover{color:#fff;}
.legal{
margin-top:64px;padding-top:28px;border-top:1px solid var(--line-d);
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);
}
/* ══════════════════ DESKTOP RANGE TUNING (1280–1920) ══════════════════ */
@media (max-width:1400px){
:root{--pad:40px;}
.form-mark{width:380px;right:-150px;}
.grp{padding:42px 46px 44px;}
.submit{padding:40px 46px 46px;}
.success-bd{padding:56px 46px 60px;}
.proto-banner{padding:14px 46px;}
.tm{padding:6px 32px;}
}
/* Responsive fundamentals only — the intentional mobile redesign is a later pass. */
@media (max-width:1180px){
.sec-head{grid-template-columns:1fr;gap:26px;}
.sec-head .head-r{padding-bottom:0;}
.fields{grid-template-columns:1fr;}
.capgrid{grid-template-columns:1fr;}
.optgrid{grid-template-columns:1fr;}
.stepgrid{grid-template-columns:1fr;}
.stp .arrow{display:none;}
.trust-in{flex-wrap:wrap;gap:26px;}
.tm{flex:1 1 240px;border-left:none;padding-left:0;}
.direct-in{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:900px){
.fgrid{grid-template-columns:1fr 1fr;}
.nav-links a:not(.btn){display:none;}
.fdescriptor{white-space:normal;}
}
/* ══════════════════ MOTION ══════════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation:none !important;transition:none !important;}
.reveal{opacity:1;transform:none;}
}
/* ═══════════════════════════════════════════════════════════════════════════
NETLIFY LIVE-FORM LAYER — ADDITIVE ONLY
═══════════════════════════════════════════════════════════════════════════
Everything above this line is the approved V3 stylesheet, byte-for-byte.
Nothing above was redesigned, restyled, respaced or recolored.
This block adds the three things a LIVE form needs and the approved review
file did not have:
1 the Netlify honeypot, hidden from sight and from assistive technology
2 a submit-in-progress state on the approved button
3 a submission-failure panel, built from the approved error and
direct-contact language already used on this page
It introduces no new brand color, no new type size that is not already in
the system, and no new layout idea. Remove this block and the page is the
approved design file again.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · NETLIFY HONEYPOT ──────────────────────────────────────────────────
Netlify's spam trap. It must exist in the DOM and stay empty for real
people. Positioned off-screen rather than display:none so that a bot which
fills every field still falls into it, while aria-hidden="true" and
tabindex="-1" in the markup keep it out of the accessibility tree and out
of the tab order — no screen-reader user is ever offered a field they are
not meant to complete. No visible CAPTCHA is used anywhere. */
.hp{
position:absolute !important;
left:-9999px !important;
top:auto !important;
width:1px;height:1px;overflow:hidden;
}
/* ── 2 · SUBMIT-IN-PROGRESS ────────────────────────────────────────────────
The approved button, briefly non-interactive while the inquiry is in
flight. Same color, same size, same type. */
#vfo-submit[aria-busy="true"],
#vfo-submit:disabled{
opacity:.72;cursor:progress;transform:none;
}
#vfo-submit[aria-busy="true"]:hover,
#vfo-submit:disabled:hover{
background:var(--red);border-color:var(--red);transform:none;
}
/* ── 3 · SUBMISSION FAILURE STATE ──────────────────────────────────────────
Shown ONLY when a real submission fails or the network is unavailable. It
reuses the page's existing error language (the .formerr surface) and the
approved direct-contact card language, so nothing new is invented. The form
and every entered value stay on screen — nothing has to be re-typed. */
.submiterr{
display:none;margin-top:30px;padding:24px 26px;
background:#FFF3F4;border:1px solid rgba(201,20,42,.35);border-left:3px solid var(--error);
}
.submiterr.on{display:block;}
.submiterr .k{
font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--error);
}
.submiterr > p:not(.k){
font-size:14.5px;line-height:1.85;color:var(--body-l);margin-top:10px;max-width:640px;font-weight:600;
}
.submiterr-contact{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;}
.submiterr-contact a{
display:flex;flex-direction:column;gap:4px;flex:1 1 240px;
background:var(--paper);border:1px solid var(--line-l);border-left:3px solid var(--line-l);
padding:16px 20px;transition:transform .24s,box-shadow .24s;
}
.submiterr-contact a:first-child{border-left-color:var(--red);}
.submiterr-contact a:last-child{border-left-color:var(--teal);}
.submiterr-contact a:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(9,9,9,.10);}
.submiterr-contact .k{
display:flex;align-items:center;gap:9px;
font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-l);
}
.submiterr-contact .k .nd{width:8px;height:8px;flex:0 0 8px;border-radius:50%;}
.submiterr-contact .v{
font-size:19px;font-weight:700;letter-spacing:-0.02em;color:var(--black);line-height:1.25;
}
/* ── 4 · WIX IFRAME COMPATIBILITY — TECHNICAL ONLY ─────────────────────────
Nothing here changes the approved design. Every rule exists so the page
behaves correctly inside a cross-origin Wix HTML/Embed iframe.
overflow-x:clip is used INSTEAD OF hidden deliberately: hidden turns the
root into a scroll container and breaks sticky navigation in Chrome and
Safari. clip does not. */
html{background:var(--black);overflow-x:clip;}
body{overflow-x:clip;max-width:100%;min-height:100vh;}
/* In a FULL-HEIGHT embed this document has no internal scroll range, so the
sticky nav has nothing to stick to and would appear frozen mid-page. The
script detects that case and adds .vfo-embed-tall; the nav then renders
statically at the top instead. */
html.vfo-embed-tall .nav{position:static;}