:root{
--white:#fff;
--black:#0a0a0a;
--muted:#8c8c8c;
--line:#d9d9d9;
--gold:#080808;
--max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
color:var(--black);
background:var(--white);
font-family:Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(calc(100% - 72px),var(--max));margin:0 auto}
.site-header{
min-height:110px;
display:flex;
align-items:center;
justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:14px;font-weight:700}
.brand-mark{font-size:52px;line-height:.8;letter-spacing:-.06em}
.brand-name{font-size:14px;line-height:1.2;letter-spacing:.10em;text-transform:uppercase}
.nav{display:flex;gap:58px;align-items:center}
.nav a{
position:relative;
padding:14px 0;
font-size:14px;
font-weight:700;
letter-spacing:.03em;
text-transform:uppercase;
}
.nav a.active::after,
.nav a:hover::after{
content:"";
position:absolute;
left:0;right:0;bottom:2px;
height:1.5px;
background:var(--gold);
}
.hero{
min-height:calc(100vh - 110px - 185px);
display:flex;
flex-direction:column;
justify-content:center;
padding:85px 0 150px;
}
.hero h1,.page-title,.contact-title{
margin:0;
font-family:Georgia,"Times New Roman",serif;
font-weight:400;
letter-spacing:-.055em;
}
.hero h1{
max-width:1010px;
font-size:clamp(72px,9.4vw,142px);
line-height:.88;
}
.gold-rule{width:86px;height:2px;background:var(--gold);margin:70px 0 54px}
.hero-copy{
max-width:470px;
margin:0;
font-size:22px;
line-height:1.48;
}
.cta{
display:inline-flex;
align-items:center;
gap:28px;
margin-top:64px;
padding-bottom:10px;
border-bottom:2px solid var(--gold);
font-size:17px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
}
.cta span{color:var(--gold);font-size:34px;font-weight:300;line-height:1}
.site-footer{
color:var(--white);
min-height:185px;
display:flex;
align-items:center;
}
.footer-inner{
width:100%;
display:grid;
grid-template-columns:1fr auto;
gap:42px;
align-items:center;
padding:35px 0;
}
.footer-brand-row{display:flex;align-items:center;gap:18px}
.footer-brand-row .brand-mark{font-size:38px}
.footer-brand-row .brand-name{font-size:12px}
.footer-copy{margin:16px 0 0;font-size:13px}
.legal-links{display:flex;gap:14px;align-items:center;margin-top:18px;font-size:13px}
.legal-links i{width:4px;height:4px;background:var(--gold);border-radius:50%;display:inline-block}
.socials{display:flex;align-items:center;gap:28px;font-size:0}
.social-icon{width:31px;height:31px;display:grid;place-items:center}
.social-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8}
.social-icon.linkedin svg{fill:currentColor;stroke:none}
.social-icon.x svg{stroke-width:1.7}
.about-main,.contact-main,.legal-main{padding:62px 0 0}
.page-title{font-size:clamp(72px,8vw,112px);line-height:.95}
.about-intro{
max-width:650px;
margin:42px 0 0;
font-size:20px;
line-height:1.7;
}
.divider{border:0;border-top:1px solid var(--line);margin:58px 0 45px}
.founder{
display:grid;
grid-template-columns:420px 1fr;
gap:54px;
align-items:center;
}
.founder img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
}
.founder-name{
margin:0;
font-size:46px;
line-height:1;
letter-spacing:-.04em;
}
.founder-role{
margin:16px 0 38px;
color:var(--muted);
font-size:20px;
font-weight:700;
}
.founder-bio{
max-width:600px;
margin:0;
font-size:18px;
line-height:1.75;
}
.about-main .site-footer-spacer{height:54px}
.contact-title{font-size:clamp(82px,9vw,128px);line-height:.95}
.contact-intro{
max-width:600px;
margin:38px 0 0;
font-size:21px;
line-height:1.62;
}
.contact-grid{
display:grid;
grid-template-columns:.78fr 1.22fr;
gap:80px;
margin-top:72px;
padding-bottom:56px;
}
.contact-grid h2{font-size:27px;margin:0 0 44px}
.info-block{display:grid;grid-template-columns:44px 1fr;gap:20px;margin-bottom:48px}
.info-block svg{width:35px;height:35px;stroke:var(--black);fill:none;stroke-width:1.8}
.info-block strong{display:block;font-size:17px;margin-bottom:8px}
.info-block p,.info-block a{font-size:17px;line-height:1.55}
.business-rule{width:68px;height:2px;background:var(--gold);margin:68px 0 42px}
.business-copy h3{font-size:20px;margin:0 0 18px}
.business-copy p{max-width:340px;font-size:17px;line-height:1.72;margin:0}
.form-field{margin-bottom:20px}
.form-field label{display:block;font-weight:700;margin-bottom:9px}
.form-field input,.form-field textarea{
width:100%;
border:1px solid #cfcfcf;
background:#fff;
padding:18px;
font:inherit;
font-size:16px;
outline:none;
}
.form-field input:focus,.form-field textarea:focus{border-color:var(--gold)}
.form-field textarea{min-height:190px;resize:vertical}
.submit-btn{
width:100%;
border:0;
background:var(--black);
color:var(--white);
min-height:64px;
font-size:16px;
font-weight:700;
letter-spacing:.04em;
cursor:pointer;
}
.submit-btn span{color:var(--gold);font-size:26px;margin-left:18px}
.form-consent{font-size:14px;line-height:1.55;margin:14px 0 0}
.form-consent a{color:#080808}
.form-note{
display:none;
margin:14px 0 0;
padding:12px 14px;
border-left:3px solid var(--gold);
font-size:14px;
line-height:1.5;
}
.legal-main{padding-bottom:90px}
.legal-main h1{
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(58px,7vw,92px);
font-weight:400;
letter-spacing:-.04em;
margin:0;
}
.legal-main .effective{margin:20px 0 50px;color:#555}
.legal-content{max-width:850px}
.legal-content h2{font-size:24px;margin:40px 0 14px}
.legal-content h3{font-size:18px;margin:30px 0 10px}
.legal-content p,.legal-content li{font-size:16px;line-height:1.72}
.legal-content ul{padding-left:22px}
.legal-content .caps{font-weight:700}
.mobile-menu{display:none}
@media(max-width:850px){
.shell{width:min(calc(100% - 38px),var(--max))}
.site-header{min-height:88px}
.brand-mark{font-size:42px}
.nav{gap:26px}
.hero{min-height:auto;padding:95px 0 120px}
.hero h1{font-size:clamp(58px,17vw,92px)}
.gold-rule{margin:48px 0 38px}
.hero-copy{font-size:18px}
.founder{grid-template-columns:1fr;gap:28px}
.founder img{max-width:500px}
.founder-name{font-size:39px}
.contact-grid{grid-template-columns:1fr;gap:54px}
.footer-inner{grid-template-columns:1fr;gap:28px}
.socials{justify-content:flex-start}
}
@media(max-width:560px){
.brand-name{font-size:11px}
.brand-mark{font-size:36px}
.nav a{font-size:12px}
.nav{gap:20px}
.hero{padding-top:75px}
.hero h1{font-size:clamp(52px,18vw,80px)}
.hero-copy{font-size:17px}
.page-title{font-size:70px}
}
/* Netlify Forms spam-prevention honeypot: visually hidden, still present for bots. */
.netlify-honeypot{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0 0 0 0) !important;
white-space:nowrap !important;
border:0 !important;
}
/* Founder animated HTML cards */
.founder-interactive{
position:relative;
display:grid;
grid-template-columns:420px 1fr;
gap:54px;
align-items:center;
outline:none;
}
.founder-media{
position:relative;
width:100%;
aspect-ratio:1/1;
overflow:hidden;
background:#050505;
}
.founder-media iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
pointer-events:none;
}
.founder-details{
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
pointer-events:none;
}
.founder-interactive:hover .founder-details,
.founder-interactive:focus .founder-details,
.founder-interactive.is-open .founder-details{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
.founder-interactive .founder-bio{margin:0}
@media(max-width:850px){
.founder-interactive{
grid-template-columns:1fr;
gap:26px;
}
.founder-media{max-width:500px}
.founder-details{
opacity:0;
visibility:hidden;
transform:translateY(10px);
}
.founder-interactive.is-open .founder-details,
.founder-interactive:focus .founder-details{
opacity:1;
visibility:visible;
transform:translateY(0);
}
}
/* Founder cards: desktop hover/focus + mobile tap */
.founder-interactive{
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
@media (hover:hover) and (pointer:fine){
.founder-interactive:hover .founder-details,
.founder-interactive:focus-visible .founder-details{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
}
@media (hover:none), (pointer:coarse){
.founder-interactive .founder-details{
opacity:0;
visibility:hidden;
transform:translateY(10px);
pointer-events:none;
}
.founder-interactive.is-open .founder-details{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
}
/* About-page hero statement moved from landing page */
.about-statement{
margin:38px 0 0;
max-width:1000px;
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(58px,7.6vw,112px);
line-height:.9;
font-weight:400;
letter-spacing:-.055em;
}
.about-rule{margin:52px 0 44px;}
/* v1.8 landing composition */
body:has(.hero) .hero{
justify-content:flex-end;
padding-top:80px;
padding-bottom:115px;
}
body:has(.hero) .hero .hero-copy{
max-width:650px;
margin:0 0 0 clamp(0px,7vw,95px);
font-size:clamp(22px,2.25vw,32px);
line-height:1.5;
letter-spacing:-.015em;
}
@media(max-width:850px){
body:has(.hero) .hero{
justify-content:center;
padding:80px 0 100px;
}
body:has(.hero) .hero .hero-copy{
margin:0;
max-width:560px;
font-size:clamp(20px,5vw,27px);
}
}
/* v1.12 landing-only refinement */
body:has(.hero) .hero{
min-height:calc(100vh - 110px - 185px);
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:0;
}
body:has(.hero) .hero::before{
content:"";
display:block;
width:72px;
height:2px;
background:var(--gold);
margin:0 0 34px 0;
}
body:has(.hero) .hero .hero-copy{
max-width:880px;
margin:0;
font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(30px,3.6vw,54px);
line-height:1.14;
letter-spacing:-.035em;
font-weight:500;
color:#111;
text-wrap:balance;
}
@media(max-width:850px){
body:has(.hero) .hero{
min-height:calc(100svh - 88px - 185px);
justify-content:center;
padding:44px 0 72px;
}
body:has(.hero) .hero::before{
width:56px;
margin-bottom:28px;
}
body:has(.hero) .hero .hero-copy{
max-width:100%;
font-size:clamp(28px,8vw,42px);
line-height:1.16;
letter-spacing:-.03em;
}
}
/* v1.13 — refined tech landing: quieter scale + progressive materialization */
body:has(.hero) .hero{
min-height:calc(100vh - 110px - 185px);
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:0;
}
body:has(.hero) .hero::before{
content:"";
display:block;
width:54px;
height:1.5px;
background:var(--gold);
margin:0 0 28px 0;
transform-origin:left center;
animation:heroRuleIn .8s cubic-bezier(.2,.8,.2,1) .15s both;
}
body:has(.hero) .hero .hero-copy{
max-width:690px;
margin:0;
font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(22px,2.15vw,31px);
line-height:1.45;
letter-spacing:-.018em;
font-weight:430;
color:#141414;
text-wrap:pretty;
}
body:has(.hero) .hero .hero-copy .reveal-line{
display:block;
opacity:0;
filter:blur(8px);
transform:translateY(11px);
animation:heroMaterialize .78s cubic-bezier(.2,.8,.2,1) forwards;
}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(1){animation-delay:.28s}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(2){animation-delay:.52s}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(3){animation-delay:.76s}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(4){animation-delay:1.00s}
@keyframes heroMaterialize{
0%{opacity:0;filter:blur(8px);transform:translateY(11px)}
55%{opacity:.72;filter:blur(2px)}
100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
@keyframes heroRuleIn{
0%{opacity:0;transform:scaleX(.15)}
100%{opacity:1;transform:scaleX(1)}
}
@media(max-width:850px){
body:has(.hero) .hero{
min-height:calc(100svh - 88px - 185px);
justify-content:center;
padding:54px 0 78px;
}
body:has(.hero) .hero::before{
width:46px;
margin-bottom:24px;
}
body:has(.hero) .hero .hero-copy{
max-width:92%;
font-size:clamp(21px,5.6vw,28px);
line-height:1.43;
letter-spacing:-.015em;
}
}
@media(prefers-reduced-motion:reduce){
body:has(.hero) .hero::before,
body:has(.hero) .hero .hero-copy .reveal-line{
animation:none !important;
opacity:1 !important;
filter:none !important;
transform:none !important;
}
}
/* v1.14 — remove landing gold accent */
body:has(.hero) .hero::before{
display:none !important;
content:none !important;
animation:none !important;
}
/* v1.3 — unified one-screen public-page frame */
html, body { min-height:100%; }
body{
min-height:100svh;
display:grid;
grid-template-rows:110px minmax(0,1fr) 185px;
}
.site-header{min-height:0;height:110px;}
.site-footer{min-height:0;height:185px;}
body > main{min-height:0;}
/* About and Contact use the same viewport frame as the landing page. */
.about-main,
.contact-main{
padding-top:0;
height:100%;
overflow:hidden;
}
/* About: centered, readable, and contained within one screen. */
.about-main{
display:flex;
flex-direction:column;
justify-content:center;
padding-bottom:clamp(28px,4vh,54px);
}
.about-statement{
margin:0;
max-width:900px;
font-size:clamp(50px,6.5vw,94px);
line-height:.92;
}
.about-intro{
max-width:720px;
margin-top:clamp(24px,3.5vh,38px);
font-size:clamp(17px,1.45vw,20px);
line-height:1.58;
}
.about-main .site-footer-spacer{display:none;}
/* Contact: compact two-column layout that stays visually balanced in one desktop viewport. */
.contact-main{
display:flex;
flex-direction:column;
justify-content:center;
padding-bottom:clamp(16px,2vh,28px);
}
.contact-title{
font-size:clamp(52px,5.5vw,78px);
line-height:.94;
}
.contact-intro{
max-width:720px;
margin-top:14px;
font-size:clamp(16px,1.35vw,19px);
line-height:1.5;
}
.contact-main > .gold-rule{
width:54px;
margin:22px 0 24px !important;
}
.contact-grid{
grid-template-columns:.8fr 1.2fr;
gap:clamp(42px,5vw,72px);
margin-top:0;
padding-bottom:0;
align-items:start;
}
.contact-grid h2{
font-size:22px;
margin:0 0 20px;
}
.info-block{
grid-template-columns:38px 1fr;
gap:16px;
margin-bottom:26px;
align-items:center;
}
.info-block svg{width:30px;height:30px;}
.info-block p,.info-block a,.email-address-button{
font-size:16px;
line-height:1.45;
}
.business-rule{width:52px;margin:30px 0 22px;}
.business-copy h3{font-size:18px;margin-bottom:10px;}
.business-copy p{font-size:15px;line-height:1.55;}
.form-field{margin-bottom:11px;}
.form-field label{margin-bottom:5px;font-size:14px;}
.form-field input,.form-field textarea{
padding:11px 13px;
font-size:15px;
}
.form-field textarea{
min-height:88px;
height:88px;
resize:none;
}
.submit-btn{min-height:48px;font-size:14px;}
.submit-btn span{font-size:22px;}
.form-consent{font-size:12px;line-height:1.4;margin-top:8px;}
/* Landing: slow, deliberate materialization with locked readable line treatment. */
body:has(.hero) .hero{
height:100%;
min-height:0;
padding:0;
}
body:has(.hero) .hero .hero-copy{
width:min(100%,760px);
max-width:760px;
font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size:clamp(23px,2.35vw,34px);
line-height:1.42;
letter-spacing:-.018em;
font-weight:430;
text-wrap:pretty;
}
body:has(.hero) .hero .hero-copy .reveal-line{
display:block;
opacity:0;
filter:blur(11px);
transform:translateY(14px);
will-change:opacity,filter,transform;
animation:heroMaterializeSlow 1.65s cubic-bezier(.16,.78,.2,1) forwards;
}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(1){animation-delay:.38s}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(2){animation-delay:.90s}
body:has(.hero) .hero .hero-copy .reveal-line:nth-child(3){animation-delay:1.42s}
@keyframes heroMaterializeSlow{
0%{opacity:0;filter:blur(11px);transform:translateY(14px)}
38%{opacity:.28;filter:blur(7px);transform:translateY(9px)}
72%{opacity:.78;filter:blur(2px);transform:translateY(3px)}
100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
/* Email launch control */
.email-launch,
.email-address-button{
appearance:none;
border:0;
background:transparent;
color:inherit;
padding:0;
margin:0;
cursor:pointer;
font:inherit;
}
.email-launch{
width:38px;
height:38px;
display:grid;
place-items:center;
justify-self:start;
transform:translateX(-8px);
border-radius:999px;
}
.email-launch:hover,
.email-launch:focus-visible{
background:#f3f3f3;
outline:none;
}
.email-address-button{
text-align:left;
border-bottom:1px solid transparent;
}
.email-address-button:hover,
.email-address-button:focus-visible{
border-bottom-color:currentColor;
outline:none;
}
/* Email provider chooser */
.email-dialog[hidden]{display:none;}
.email-dialog{
position:fixed;
inset:0;
z-index:1000;
display:grid;
place-items:center;
padding:24px;
}
.email-dialog-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.42);
backdrop-filter:blur(5px);
}
.email-dialog-panel{
position:relative;
z-index:1;
width:min(100%,500px);
background:#fff;
padding:36px;
box-shadow:0 24px 80px rgba(0,0,0,.18);
}
.email-dialog-close{
position:absolute;
top:14px;
right:16px;
appearance:none;
border:0;
background:transparent;
font-size:28px;
line-height:1;
cursor:pointer;
}
.email-dialog-kicker{
margin:0 0 10px;
font-size:11px;
font-weight:700;
letter-spacing:.16em;
}
.email-dialog-panel h2{
margin:0;
font-family:Georgia,"Times New Roman",serif;
font-size:36px;
line-height:1.05;
font-weight:400;
letter-spacing:-.035em;
}
.email-dialog-copy{
margin:16px 0 24px;
font-size:15px;
line-height:1.55;
}
.email-dialog-actions{
display:grid;
gap:10px;
}
.email-option{
appearance:none;
width:100%;
border:1px solid #d5d5d5;
background:#fff;
padding:14px 16px;
color:#111;
font:inherit;
font-size:14px;
font-weight:700;
text-align:center;
cursor:pointer;
}
.email-option.primary{
background:#0a0a0a;
border-color:#0a0a0a;
color:#fff;
}
.email-copy-status{
min-height:20px;
margin:12px 0 0;
font-size:12px;
text-align:center;
}
/* Legal documents retain a fixed site frame, while the document body itself remains
readable rather than being compressed into illegible text. */
.legal-main{
height:100%;
overflow:auto;
padding-top:34px;
padding-bottom:50px;
scrollbar-gutter:stable;
}
@media(max-height:820px) and (min-width:851px){
.contact-title{font-size:50px;}
.contact-intro{margin-top:8px;font-size:15px;}
.contact-main > .gold-rule{margin:14px 0 16px !important;}
.contact-grid h2{margin-bottom:13px;font-size:19px;}
.info-block{margin-bottom:17px;}
.business-rule{margin:20px 0 14px;}
.business-copy p{font-size:13px;line-height:1.45;}
.form-field{margin-bottom:7px;}
.form-field input,.form-field textarea{padding:8px 11px;font-size:14px;}
.form-field textarea{min-height:64px;height:64px;}
.submit-btn{min-height:42px;}
.form-consent{font-size:11px;}
}
@media(max-width:850px){
body{
grid-template-rows:88px minmax(0,1fr) 154px;
}
.site-header{height:88px;}
.site-footer{height:154px;}
.footer-inner{padding:22px 0;gap:16px;}
.footer-copy{margin-top:9px;font-size:11px;}
.legal-links{margin-top:10px;font-size:11px;}
.socials{gap:20px;}
body:has(.hero) .hero{
min-height:0;
padding:0;
}
body:has(.hero) .hero .hero-copy{
max-width:100%;
font-size:clamp(21px,5.9vw,29px);
line-height:1.46;
letter-spacing:-.014em;
}
.about-main{
padding-bottom:18px;
}
.about-statement{
font-size:clamp(46px,12.5vw,76px);
}
.about-intro{
font-size:clamp(15px,4vw,18px);
line-height:1.5;
margin-top:22px;
}
/* Contact becomes a contained mobile reading area because a full form cannot
remain legible in a single narrow viewport without reducing text excessively. */
.contact-main{
justify-content:flex-start;
overflow:auto;
padding-top:24px;
padding-bottom:30px;
scrollbar-gutter:stable;
}
.contact-grid{grid-template-columns:1fr;gap:36px;}
.contact-title{font-size:clamp(48px,14vw,68px);}
.contact-intro{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){
body:has(.hero) .hero .hero-copy .reveal-line{
animation:none !important;
opacity:1 !important;
filter:none !important;
transform:none !important;
}
}
/* v1.4 — hand-drawn motion landing scene */
body:has(.landing-scene){
overflow:hidden;
}
body:has(.landing-scene) .landing-hero{
position:relative;
height:100%;
min-height:0;
padding:0;
overflow:hidden;
background:#f7f5f0;
}
.landing-scene{
position:absolute;
inset:0;
overflow:hidden;
background:#f7f5f0;
}
.landing-scene-image{
position:absolute;
inset:-2%;
background-image:url("/sfi-landing-sketch.png");
background-size:cover;
background-position:center 58%;
background-repeat:no-repeat;
opacity:0;
filter:blur(9px) contrast(.68) brightness(1.16);
transform:scale(1.07) translateY(20px);
clip-path:circle(0% at 50% 64%);
animation:
sfiSketchMaterialize 4.15s cubic-bezier(.16,.82,.24,1) .12s forwards,
sfiSketchDrift 7.2s cubic-bezier(.18,.8,.25,1) .08s forwards;
}
.landing-scene-wash{
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(to bottom,rgba(255,255,255,.20),rgba(255,255,255,0) 20%),
radial-gradient(circle at 50% 64%,rgba(255,255,255,0) 0 38%,rgba(255,255,255,.10) 76%,rgba(255,255,255,.18) 100%);
opacity:.4;
animation:sfiSketchWash 4.1s ease-out .15s forwards;
}
@keyframes sfiSketchMaterialize{
0%{
opacity:0;
clip-path:circle(0% at 50% 64%);
filter:blur(11px) contrast(.60) brightness(1.20);
}
18%{
opacity:.24;
clip-path:circle(18% at 50% 64%);
filter:blur(8px) contrast(.70) brightness(1.15);
}
45%{
opacity:.62;
clip-path:circle(52% at 50% 64%);
filter:blur(4px) contrast(.84) brightness(1.08);
}
74%{
opacity:.92;
clip-path:circle(90% at 50% 64%);
filter:blur(1px) contrast(.96) brightness(1.02);
}
100%{
opacity:1;
clip-path:circle(145% at 50% 64%);
filter:blur(0) contrast(1) brightness(1);
}
}
@keyframes sfiSketchDrift{
0%{transform:scale(1.07) translateY(20px)}
58%{transform:scale(1.026) translateY(6px)}
100%{transform:scale(1) translateY(0)}
}
@keyframes sfiSketchWash{
0%{opacity:.45}
70%{opacity:.12}
100%{opacity:0}
}
body:has(.landing-scene) .site-header,
body:has(.landing-scene) .site-footer{
position:relative;
z-index:5;
}
body:has(.landing-scene) .site-header{
background:rgba(255,255,255,.94);
backdrop-filter:blur(7px);
}
@media(max-width:850px){
.landing-scene-image{
inset:-3%;
background-size:cover;
background-position:52% 58%;
}
}
@media(prefers-reduced-motion:reduce){
.landing-scene-image{
opacity:1 !important;
clip-path:none !important;
filter:none !important;
transform:none !important;
animation:none !important;
}
.landing-scene-wash{
display:none !important;
}
}
/* v1.5 — contained hand-drawn animation on the original white landing page */
body:has(.landing-stage){
overflow:hidden;
background:#fff;
}
body:has(.landing-stage) .landing-hero{
position:relative;
height:100%;
min-height:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
background:#fff;
}
body:has(.landing-stage) .site-header{
background:#fff;
backdrop-filter:none;
}
.landing-stage{
position:relative;
width:min(100%,1040px);
height:clamp(360px,54vh,560px);
display:grid;
place-items:center;
background:#fff;
overflow:hidden;
}
.landing-scene{
position:relative;
width:88%;
height:82%;
overflow:hidden;
background:#fff;
border-radius:2px;
/* Fade the artwork into the white page instead of presenting a hard rectangular image. */
-webkit-mask-image:
linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),
linear-gradient(to bottom,transparent 0%,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),
linear-gradient(to bottom,transparent 0%,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.landing-scene-image{
position:absolute;
inset:-4%;
background-image:url("/sfi-landing-sketch.png");
background-size:cover;
background-position:center 59%;
background-repeat:no-repeat;
opacity:0;
filter:blur(8px) contrast(.72) brightness(1.13);
transform:scale(1.055) translateY(12px);
clip-path:inset(48% 48% 48% 48%);
animation:
sfiContainedDraw 4.4s cubic-bezier(.16,.82,.24,1) .12s forwards,
sfiContainedSettle 7.4s cubic-bezier(.18,.8,.25,1) .08s forwards;
}
/* Subtle animated roadway strokes create forward motion without turning the page into a video/game. */
.landing-road-motion{
position:absolute;
left:50%;
bottom:9%;
width:44%;
height:43%;
transform:translateX(-50%);
clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
opacity:0;
background:
repeating-linear-gradient(
to bottom,
transparent 0 24px,
rgba(20,20,20,.20) 25px 27px,
transparent 28px 54px
);
mix-blend-mode:multiply;
animation:
sfiRoadAppear 1.3s ease-out 1.6s forwards,
sfiRoadTravel .78s linear 1.8s 7;
}
/* A tiny perspective pulse in the car area gives the impression the car is advancing. */
.landing-car-motion{
position:absolute;
left:50%;
bottom:11%;
width:18%;
aspect-ratio:2.1/1;
transform:translateX(-50%) scale(.94);
border-radius:50%;
background:radial-gradient(ellipse at center,rgba(0,0,0,.11),rgba(0,0,0,0) 68%);
opacity:0;
animation:sfiCarAdvance 5.8s cubic-bezier(.2,.72,.2,1) 1.0s forwards;
}
.landing-scene-wash{
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.03),rgba(255,255,255,.20) 78%,rgba(255,255,255,.34) 100%);
opacity:.48;
animation:sfiContainedWash 4.4s ease-out .12s forwards;
}
@keyframes sfiContainedDraw{
0%{
opacity:0;
clip-path:inset(48% 48% 48% 48%);
filter:blur(10px) contrast(.62) brightness(1.18);
}
22%{
opacity:.26;
clip-path:inset(36% 32% 36% 32%);
filter:blur(8px) contrast(.70) brightness(1.14);
}
50%{
opacity:.66;
clip-path:inset(18% 14% 18% 14%);
filter:blur(4px) contrast(.84) brightness(1.07);
}
78%{
opacity:.94;
clip-path:inset(5% 3% 5% 3%);
filter:blur(1px) contrast(.96) brightness(1.02);
}
100%{
opacity:1;
clip-path:inset(0 0 0 0);
filter:blur(0) contrast(1) brightness(1);
}
}
@keyframes sfiContainedSettle{
0%{transform:scale(1.055) translateY(12px)}
55%{transform:scale(1.025) translateY(4px)}
100%{transform:scale(1) translateY(0)}
}
@keyframes sfiRoadAppear{
from{opacity:0}
to{opacity:.34}
}
@keyframes sfiRoadTravel{
from{background-position-y:0}
to{background-position-y:54px}
}
@keyframes sfiCarAdvance{
0%{opacity:0;transform:translateX(-50%) scale(.90)}
24%{opacity:.20}
56%{opacity:.14;transform:translateX(-50%) scale(1.02)}
100%{opacity:0;transform:translateX(-50%) scale(1.08)}
}
@keyframes sfiContainedWash{
0%{opacity:.54}
70%{opacity:.16}
100%{opacity:0}
}
@media(max-width:850px){
.landing-stage{
height:clamp(300px,48vh,430px);
}
.landing-scene{
width:100%;
height:80%;
}
.landing-scene-image{
inset:-2%;
background-size:cover;
background-position:51% 58%;
}
}
@media(prefers-reduced-motion:reduce){
.landing-scene-image{
opacity:1 !important;
clip-path:none !important;
filter:none !important;
transform:none !important;
animation:none !important;
}
.landing-road-motion,
.landing-car-motion,
.landing-scene-wash{
display:none !important;
}
}
/* v1.6 — one-play cinematic loading intro, then calm site reveal */
body.sfi-intro-running{overflow:hidden;background:#fff}
.sfi-intro{
position:fixed;inset:0;z-index:9999;background:#fff;overflow:hidden;
display:grid;place-items:center;opacity:1;visibility:visible;
}
.sfi-intro.is-finished{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s ease,visibility 0s linear .75s}
.sfi-intro-art{
position:absolute;left:50%;top:52%;width:min(1180px,92vw);aspect-ratio:1170/605;
background:url('/sfi-intro-road.png') center/contain no-repeat;
transform-origin:50% 42%;transform:translate(-50%,-50%) scale(.08);opacity:0;
animation:sfiDriveArrival 7.25s linear .35s both;
}
@keyframes sfiDriveArrival{
0%{transform:translate(-50%,-50%) scale(.08);opacity:0}
10%{opacity:.22}
15%{opacity:1}
58%{transform:translate(-50%,-50%) scale(.34);opacity:1}
76%{transform:translate(-50%,-50%) scale(.92);opacity:1}
/* Decelerate at the sign/city: do not travel past the sign. */
88%{transform:translate(-50%,-50%) scale(1.22);opacity:1}
96%{transform:translate(-50%,-50%) scale(1.29);opacity:1}
100%{transform:translate(-50%,-50%) scale(1.30);opacity:0}
}
.sfi-site-reveal{opacity:1}
body.sfi-intro-running .sfi-site-reveal{opacity:0;pointer-events:none}
body.sfi-intro-complete .sfi-site-reveal{opacity:1;pointer-events:auto}
body.sfi-intro-complete .site-header .brand{animation:sfiWelcomeIn 1.45s cubic-bezier(.22,.7,.2,1) .15s both}
body.sfi-intro-complete .site-header .nav{animation:sfiWelcomeIn 1.55s cubic-bezier(.22,.7,.2,1) .48s both}
body.sfi-intro-complete .landing-hero{animation:sfiWelcomeIn 1.6s cubic-bezier(.22,.7,.2,1) .72s both}
body.sfi-intro-complete .site-footer{animation:sfiWelcomeIn 1.75s cubic-bezier(.22,.7,.2,1) .92s both}
@keyframes sfiWelcomeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
@media(max-width:850px){
.sfi-intro-art{width:116vw;top:50%}
}
@media(prefers-reduced-motion:reduce){
.sfi-intro-art{animation:sfiDriveArrivalReduced 2.4s ease both}
@keyframes sfiDriveArrivalReduced{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}35%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
body.sfi-intro-complete .site-header .brand,
body.sfi-intro-complete .site-header .nav,
body.sfi-intro-complete .landing-hero,
body.sfi-intro-complete .site-footer{animation-duration:.5s}
}
/* v1.7 — unified viewport geometry + active-draw arrival + slower welcoming reveal */
/* Landing's reveal wrapper now uses the exact same header/content/footer grid as every public page. */
.sfi-site-reveal{
min-height:100svh;
height:100svh;
display:grid;
grid-template-rows:110px minmax(0,1fr) 185px;
overflow:hidden;
opacity:1;
}
.sfi-site-reveal > .site-header{height:110px;min-height:0;}
.sfi-site-reveal > .site-footer{height:185px;min-height:0;}
.sfi-site-reveal > main{min-height:0;}
/* The intro artwork is revealed from the horizon outward while the camera advances. */
.sfi-intro-art{
position:absolute;
left:50%;
top:52%;
width:min(1180px,92vw);
aspect-ratio:1170/605;
background:url('/sfi-intro-road.png') center/contain no-repeat;
transform-origin:50% 43%;
transform:translate(-50%,-50%) scale(.075);
opacity:0;
overflow:hidden;
clip-path:polygon(49.4% 43%,50.6% 43%,50.6% 45%,49.4% 45%);
filter:blur(4px) contrast(.78) brightness(1.08);
animation:sfiActiveDrawArrival 9.25s cubic-bezier(.16,.62,.18,1) .35s both;
}
/* A very light graphite sweep makes the reveal feel like lines are being drawn, not simply faded in. */
.sfi-intro-art::after{
content:"";
position:absolute;
inset:-12%;
pointer-events:none;
background:linear-gradient(105deg,
transparent 0%,
rgba(255,255,255,.96) 38%,
rgba(255,255,255,.20) 49%,
transparent 58%);
transform:translateX(-64%);
opacity:.9;
mix-blend-mode:screen;
animation:sfiPencilSweep 5.9s cubic-bezier(.2,.65,.25,1) 1.15s both;
}
/* The skyline independently dissolves at arrival while the road sign remains visible. */
.sfi-intro-city-erase{
position:absolute;
left:28%;
top:3%;
width:39%;
height:48%;
pointer-events:none;
opacity:0;
background:radial-gradient(ellipse at 50% 62%,
rgba(255,255,255,1) 0 38%,
rgba(255,255,255,.98) 54%,
rgba(255,255,255,.72) 70%,
rgba(255,255,255,0) 100%);
filter:blur(3px);
animation:sfiCityDematerialize 9.25s ease .35s both;
}
@keyframes sfiActiveDrawArrival{
0%{
transform:translate(-50%,-50%) scale(.075);
opacity:0;
clip-path:polygon(49.4% 43%,50.6% 43%,50.6% 45%,49.4% 45%);
filter:blur(5px) contrast(.72) brightness(1.12);
}
8%{opacity:.16;}
15%{
opacity:.84;
clip-path:polygon(43% 33%,57% 33%,62% 52%,38% 52%);
filter:blur(3px) contrast(.80) brightness(1.08);
}
31%{
opacity:1;
clip-path:polygon(32% 20%,68% 20%,78% 66%,22% 66%);
transform:translate(-50%,-50%) scale(.16);
filter:blur(1.5px) contrast(.88) brightness(1.05);
}
52%{
clip-path:polygon(15% 9%,85% 9%,96% 88%,4% 88%);
transform:translate(-50%,-50%) scale(.34);
filter:blur(.6px) contrast(.96) brightness(1.02);
}
68%{
clip-path:inset(0 0 0 0);
transform:translate(-50%,-50%) scale(.72);
filter:none;
}
82%{transform:translate(-50%,-50%) scale(1.12);opacity:1;}
91%{transform:translate(-50%,-50%) scale(1.265);opacity:1;}
96%{transform:translate(-50%,-50%) scale(1.29);opacity:1;}
100%{transform:translate(-50%,-50%) scale(1.295);opacity:0;}
}
@keyframes sfiPencilSweep{
0%{transform:translateX(-68%);opacity:.92;}
42%{opacity:.52;}
100%{transform:translateX(72%);opacity:0;}
}
@keyframes sfiCityDematerialize{
0%,84%{opacity:0;transform:scale(.82);}
90%{opacity:.28;transform:scale(.91);}
96%{opacity:.92;transform:scale(1.03);}
100%{opacity:1;transform:scale(1.08);}
}
/* Give the scene time to clear before the chrome appears. Everything arrives gently and in order. */
body.sfi-intro-complete .site-header .brand{
animation:sfiWelcomeInSlow 2.15s cubic-bezier(.22,.72,.2,1) .38s both;
}
body.sfi-intro-complete .site-header .nav{
animation:sfiWelcomeInSlow 2.25s cubic-bezier(.22,.72,.2,1) 1.00s both;
}
body.sfi-intro-complete .landing-hero{
animation:sfiWelcomeInSlow 2.30s cubic-bezier(.22,.72,.2,1) 1.28s both;
}
body.sfi-intro-complete .site-footer{
animation:sfiWelcomeInSlow 2.45s cubic-bezier(.22,.72,.2,1) 1.62s both;
}
@keyframes sfiWelcomeInSlow{
0%{opacity:0;transform:translateY(10px);filter:blur(2px);}
45%{opacity:.42;transform:translateY(5px);filter:blur(1px);}
100%{opacity:1;transform:translateY(0);filter:blur(0);}
}
/* Public presentation pages remain one viewport tall. */
body:has(.hero),
body:has(.about-main),
body:has(.contact-main){
height:100svh;
min-height:100svh;
overflow:hidden;
}
/* Contact — slightly tighter and vertically balanced so desktop does not need page scrolling. */
.contact-main{
padding-top:0;
padding-bottom:12px;
justify-content:center;
}
.contact-title{font-size:clamp(48px,5vw,70px);}
.contact-intro{margin-top:10px;font-size:clamp(15px,1.2vw,18px);line-height:1.42;}
.contact-main > .gold-rule{margin:16px 0 18px !important;}
.contact-grid{gap:clamp(34px,4vw,58px);}
.contact-grid h2{font-size:20px;margin-bottom:14px;}
.info-block{margin-bottom:18px;}
.business-rule{margin:19px 0 14px;}
.business-copy h3{font-size:16px;margin-bottom:7px;}
.business-copy p{font-size:13px;line-height:1.42;}
.form-field{margin-bottom:7px;}
.form-field label{font-size:12px;margin-bottom:4px;}
.form-field input,.form-field textarea{padding:8px 11px;font-size:14px;}
.form-field textarea{height:64px;min-height:64px;}
.submit-btn{min-height:42px;font-size:13px;}
.form-consent{font-size:10.5px;line-height:1.32;margin-top:6px;}
@media(max-width:850px){
.sfi-site-reveal{
grid-template-rows:88px minmax(0,1fr) 154px;
}
.sfi-site-reveal > .site-header{height:88px;}
.sfi-site-reveal > .site-footer{height:154px;}
.sfi-intro-art{width:116vw;top:50%;}
.sfi-intro-city-erase{left:27%;top:4%;width:41%;height:46%;}
/* Keep Contact as a single viewport on tablets by retaining two compact columns. */
.contact-main{
overflow:hidden;
padding-top:0;
padding-bottom:10px;
justify-content:center;
}
.contact-grid{grid-template-columns:.76fr 1.24fr;gap:26px;}
.contact-title{font-size:48px;}
.contact-intro{font-size:14px;max-width:620px;}
.contact-grid h2{font-size:17px;}
.info-block{grid-template-columns:30px 1fr;gap:10px;margin-bottom:12px;}
.info-block svg{width:25px;height:25px;}
.info-block p,.info-block a,.email-address-button{font-size:13px;}
.business-copy p{font-size:11.5px;}
.form-field input,.form-field textarea{padding:7px 9px;font-size:13px;}
.form-field textarea{height:54px;min-height:54px;}
}
@media(max-width:560px){
/* Phone frame stays one-screen while preserving every Contact function. */
body{
grid-template-rows:76px minmax(0,1fr) 118px;
}
.site-header{height:76px;}
.sfi-site-reveal{grid-template-rows:76px minmax(0,1fr) 118px;}
.sfi-site-reveal > .site-header{height:76px;}
}
@media(prefers-reduced-motion:reduce){
.sfi-intro-art{
animation:sfiDriveArrivalReduced 2.05s ease both !important;
clip-path:none !important;
filter:none !important;
}
.sfi-intro-art::after,
.sfi-intro-city-erase{display:none !important;}
body.sfi-intro-complete .site-header .brand,
body.sfi-intro-complete .site-header .nav,
body.sfi-intro-complete .landing-hero,
body.sfi-intro-complete .site-footer{animation-duration:.65s !important;}
}
/* v1.8 — SFI-controlled solar day/night palette. Layout and sizing are unchanged. */
html{color-scheme:light;}
html[data-sfi-mode="night"]{color-scheme:dark;}
html[data-sfi-mode="night"]{
--white:#000000;
--black:#ffffff;
--muted:#a8a8a8;
--line:#343434;
}
html[data-sfi-mode="night"] body{
background:#000000;
color:#ffffff;
}
html[data-sfi-mode="night"] body:has(.hero) .hero .hero-copy{color:#ffffff;}
html[data-sfi-mode="night"] .form-field input,
html[data-sfi-mode="night"] .form-field textarea{
background:#000000;
color:#ffffff;
border-color:#4b4b4b;
}
html[data-sfi-mode="night"] .form-field input::placeholder,
html[data-sfi-mode="night"] .form-field textarea::placeholder{color:#9a9a9a;}
html[data-sfi-mode="night"] .legal-main .effective{color:#aaa;}
html[data-sfi-mode="night"] .info-block svg{stroke:#fff;}
html[data-sfi-mode="night"] .site-footer .social-icon{color:#000;}
/* The city intro changes source only; its box does not change the approved layout. */
.sfi-intro-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
background:transparent;
}
body.sfi-intro-running[data-sfi-active-mode="night"],
html[data-sfi-mode="night"] body.sfi-intro-running{background:#000;}
html[data-sfi-mode="night"] .sfi-intro{background:#000000;}
html[data-sfi-mode="day"] .sfi-intro{background:#ffffff;}
/* v1.10 — reduced footer footprint across every page; layout/content unchanged */
body{
grid-template-rows:110px minmax(0,1fr) 145px;
}
.site-footer{
min-height:0;
height:145px;
}
.footer-inner{
padding:22px 0;
gap:30px;
}
.footer-brand-row{gap:15px;}
.footer-brand-row .brand-mark{font-size:32px;}
.footer-brand-row .brand-name{font-size:10.5px;}
.footer-copy{margin-top:10px;font-size:11.5px;}
.legal-links{margin-top:11px;font-size:11.5px;gap:11px;}
.social-icon{width:27px;height:27px;}
.socials{gap:22px;}
.sfi-site-reveal{
grid-template-rows:110px minmax(0,1fr) 145px;
}
.sfi-site-reveal > .site-footer{height:145px;}
@media(max-width:850px){
body{grid-template-rows:88px minmax(0,1fr) 122px;}
.site-footer{height:122px;}
.sfi-site-reveal{grid-template-rows:88px minmax(0,1fr) 122px;}
.sfi-site-reveal > .site-footer{height:122px;}
.footer-inner{padding:15px 0;gap:13px;}
.footer-brand-row .brand-mark{font-size:29px;}
.footer-brand-row .brand-name{font-size:9.5px;}
.footer-copy{margin-top:6px;font-size:10px;}
.legal-links{margin-top:7px;font-size:10px;gap:9px;}
.social-icon{width:24px;height:24px;}
.socials{gap:16px;}
}
@media(max-width:560px){
body{grid-template-rows:76px minmax(0,1fr) 92px;}
.sfi-site-reveal{grid-template-rows:76px minmax(0,1fr) 92px;}
}
/* v1.11 — minimal footer + Contact frame correction. No page structure changes. */
body{
grid-template-rows:110px minmax(0,1fr) 96px;
}
.site-footer{
height:96px;
min-height:0;
}
.footer-inner{
padding:10px 0;
gap:18px;
}
.footer-brand-row{gap:11px;}
.footer-brand-row .brand-mark{font-size:25px;}
.footer-brand-row .brand-name{font-size:8.5px;line-height:1.05;}
.footer-copy{margin-top:4px;font-size:9px;line-height:1.15;}
.legal-links{margin-top:5px;font-size:9px;gap:7px;}
.social-icon{width:21px;height:21px;}
.socials{gap:13px;}
.sfi-site-reveal{
grid-template-rows:110px minmax(0,1fr) 96px;
}
.sfi-site-reveal > .site-footer{height:96px;}
/* Keep the Contact heading and complete form inside the visible main frame. */
.contact-main{
justify-content:flex-start;
padding-top:10px;
padding-bottom:6px;
}
.contact-title{
margin-top:0;
font-size:clamp(46px,4.5vw,64px);
line-height:.92;
}
.contact-intro{margin-top:7px;}
.contact-main > .gold-rule{margin:12px 0 14px !important;}
.form-consent{
display:block;
margin:6px 0 0;
font-size:10.5px;
line-height:1.28;
}
.form-consent a{text-decoration:underline;text-underline-offset:2px;}
@media(max-width:850px){
body{grid-template-rows:88px minmax(0,1fr) 84px;}
.site-footer{height:84px;}
.sfi-site-reveal{grid-template-rows:88px minmax(0,1fr) 84px;}
.sfi-site-reveal > .site-footer{height:84px;}
.footer-inner{padding:8px 0;gap:9px;}
.footer-brand-row .brand-mark{font-size:22px;}
.footer-brand-row .brand-name{font-size:7.8px;}
.footer-copy{margin-top:3px;font-size:8px;}
.legal-links{margin-top:4px;font-size:8px;gap:6px;}
.social-icon{width:19px;height:19px;}
.socials{gap:10px;}
.contact-main{padding-top:7px;padding-bottom:5px;}
.contact-title{font-size:42px;}
.contact-intro{margin-top:5px;}
.contact-main > .gold-rule{margin:9px 0 10px !important;}
.form-consent{font-size:9px;margin-top:4px;}
}
@media(max-width:560px){
body{grid-template-rows:76px minmax(0,1fr) 70px;}
.sfi-site-reveal{grid-template-rows:76px minmax(0,1fr) 70px;}
}
/* v1.12 — header/footer alignment refinement to match approved page framing. */
.site-header.shell,
.footer-inner.shell{
width:min(calc(100% - 80px),var(--max));
}
.site-header{
height:110px;
min-height:110px;
padding:0;
align-items:center;
}
.site-header .brand{
display:grid;
grid-template-columns:auto auto;
align-items:center;
column-gap:16px;
min-width:0;
}
.site-header .brand-mark{
display:block;
margin:0;
line-height:.82;
}
.site-header .brand-name{
display:block;
margin:0;
line-height:1.22;
}
.site-header .nav{
align-self:center;
}
.site-footer{
height:96px;
min-height:96px;
}
.footer-inner{
height:100%;
padding:10px 0;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:32px;
}
.footer-inner > div:first-child{
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
min-width:0;
}
.footer-brand-row{
display:grid;
grid-template-columns:auto auto;
align-items:center;
column-gap:11px;
margin:0;
min-width:0;
}
.footer-brand-row .brand-mark{
display:block;
margin:0;
line-height:.82;
}
.footer-brand-row .brand-name{
display:block;
margin:0;
line-height:1;
white-space:nowrap;
}
.footer-copy,
.legal-links{
margin-left:0;
}
.socials{
align-self:center;
justify-self:end;
}
@media(max-width:850px){
.site-header.shell,
.footer-inner.shell{width:min(calc(100% - 48px),var(--max));}
.site-header{height:88px;min-height:88px;}
.footer-inner{column-gap:18px;}
}
@media(max-width:560px){
.site-header{height:76px;min-height:76px;}
.site-header .brand{column-gap:10px;}
}
/* v1.13 — restore header/footer shells to the same approved page borders as all page content. */
.site-header.shell,
.footer-inner.shell{
width:min(calc(100% - 72px),var(--max));
}
@media(max-width:850px){
.site-header.shell,
.footer-inner.shell{width:min(calc(100% - 38px),var(--max));}
}
@media(max-width:560px){
}
/* v1.19 — clean contact composition after removing the Let's Connect hero. */
.contact-main.contact-main-clean{
padding-top:clamp(22px,3vw,42px);
}
.contact-main-clean .contact-grid{
margin-top:0;
align-items:start;
}
@media (max-width:760px){
.contact-main.contact-main-clean{padding-top:18px;}
}
/* v1.20 — phase 1 arrival video -> phase 2 indefinite active-city loop. */
.sfi-intro-phase{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .18s ease;
}
.sfi-intro-phase.is-active{
opacity:1;
visibility:visible;
}
@media (prefers-reduced-motion: reduce){
.sfi-intro-phase{transition:none;}
}
/* v1.21 — footer identity and social/legal alignment moved toward viewport edges.
Header and page-content shells are intentionally unchanged. */
.footer-inner.shell{
width:calc(100% - 72px);
max-width:none;
}
@media(max-width:850px){
.footer-inner.shell{
width:calc(100% - 38px);
max-width:none;
}
}
@media(max-width:560px){
}
/* v1.28 — centered 60px floating footer logo hovering 6px above the bottom on every page. */
@keyframes gentleFloat {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.footer-logo-container {
position:absolute;
left:50%;
bottom:6px;
width:60px;
max-width:60px;
margin:0 auto 6px auto;
transform:translateX(-50%);
padding-top:5px;
padding-bottom:0;
line-height:0;
z-index:2;
}
.footer-logo-container a{
display:inline-block;
line-height:0;
vertical-align:bottom;
}
.floating-logo {
animation: gentleFloat 5s ease-in-out infinite;
display:block;
width:100%;
height:auto;
margin-bottom:0;
vertical-align:bottom;
}
.floating-logo:hover { animation-play-state: paused; }
.site-footer{position:relative;}
.footer-inner{
position:relative;
height:100%;
min-height:70px;
display:grid;
grid-template-columns:1fr auto;
align-items:end;
padding-top:34px;
padding-bottom:7px;
}
.footer-meta{align-self:end;min-width:0;}
.footer-copy{margin:0 0 3px;font-size:7px;line-height:1.1;opacity:.72;}
.legal-links{font-size:7px;line-height:1.1;gap:7px;align-items:center;}
.legal-links i{width:3px;height:3px;}
.socials{align-self:end;padding-bottom:0;}
.footer-brand-row{display:none!important;}
/* Day keeps the warm accent. Night changes every site accent token to neon cyan. */
html[data-sfi-mode="night"]{--gold:#00E5FF;}
html[data-sfi-mode="night"] .gold-rule,
html[data-sfi-mode="night"] .business-rule,
html[data-sfi-mode="night"] .nav-link.active::after,
html[data-sfi-mode="night"] .legal-links i{
box-shadow:0 0 5px rgba(0,229,255,.72),0 0 12px rgba(0,229,255,.36);
}
html[data-sfi-mode="night"] .legal-links i{background:#00E5FF!important;}
@media(max-width:560px){
}
@media (prefers-reduced-motion: reduce){
.floating-logo{animation:none;}
}
/* v1.24: consistent social order and night contact consent accents */
html[data-sfi-mode="night"] .form-consent a{
color:#00E5FF!important;
}
/* v1.25 — About blueprint reveal. The culture message loops until hovered or toggled open. */
.about-main.about-main-interactive{
display:flex;
flex-direction:column;
justify-content:center;
padding-top:clamp(8px,1.5vh,18px);
padding-bottom:clamp(34px,5vh,62px);
}
.about-reveal{
width:min(100%,1080px);
margin:0 auto;
text-align:center;
}
.about-culture-trigger{
appearance:none;
-webkit-appearance:none;
border:0;
background:transparent;
color:inherit;
padding:14px 18px;
margin:0 auto;
display:block;
cursor:pointer;
font:inherit;
outline:none;
}
.about-culture-trigger:focus-visible{
outline:1px solid var(--gold);
outline-offset:6px;
}
.about-culture-line{
display:flex;
align-items:baseline;
justify-content:center;
gap:.24em;
white-space:nowrap;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(34px,4.25vw,60px);
line-height:1;
letter-spacing:-.035em;
transform-origin:center;
animation:cultureLoop 5.2s cubic-bezier(.2,.7,.2,1) infinite;
}
.culture-lead,
.culture-build{display:inline-block;}
.culture-build{
clip-path:inset(0 100% 0 0);
animation:cultureBuild 5.2s steps(16,end) infinite;
}
@keyframes cultureLoop{
0%{transform:translateX(-52px);opacity:0;}
10%{opacity:1;}
28%{transform:translateX(0);opacity:1;}
82%{transform:translateX(0);opacity:1;}
94%{opacity:0;}
100%{transform:translateX(-52px);opacity:0;}
}
@keyframes cultureBuild{
0%,24%{clip-path:inset(0 100% 0 0);}
56%,86%{clip-path:inset(0 0 0 0);}
96%,100%{clip-path:inset(0 100% 0 0);}
}
.about-reveal.is-open .about-culture-line{
animation-play-state:paused;
opacity:1;
transform:translateX(0);
}
.about-reveal.is-open .culture-build{
animation-play-state:paused;
clip-path:inset(0 0 0 0);
}
.about-blueprint{
width:min(900px,92%);
margin:0 auto;
display:grid;
grid-template-rows:0fr;
opacity:0;
transform:translateY(12px);
transition:grid-template-rows .46s ease,opacity .32s ease,transform .46s ease,margin-top .46s ease;
margin-top:0;
pointer-events:none;
}
.about-blueprint > p{
overflow:hidden;
margin:0;
font-size:clamp(17px,1.55vw,22px);
line-height:1.58;
letter-spacing:-.01em;
}
.about-reveal.is-open .about-blueprint{
grid-template-rows:1fr;
opacity:1;
transform:translateY(0);
margin-top:clamp(24px,3.4vh,38px);
pointer-events:auto;
}
html[data-sfi-mode="night"] .about-culture-trigger:hover .about-culture-line,
html[data-sfi-mode="night"] .about-culture-trigger:focus-visible .about-culture-line,
html[data-sfi-mode="night"] .about-reveal.is-open .about-culture-line{
text-shadow:0 0 10px rgba(0,229,255,.16);
}
@media (hover:hover) and (pointer:fine){
.about-reveal:hover .about-blueprint{
grid-template-rows:1fr;
opacity:1;
transform:translateY(0);
margin-top:clamp(24px,3.4vh,38px);
pointer-events:auto;
}
.about-reveal:hover .about-culture-line,
.about-reveal:hover .culture-build{
animation-play-state:paused;
}
.about-reveal:hover .culture-build{clip-path:inset(0 0 0 0);}
}
@media(max-width:700px){
.about-culture-line{
white-space:normal;
flex-wrap:wrap;
row-gap:.12em;
}
.about-blueprint{width:min(94%,680px);}
.about-blueprint > p{font-size:clamp(16px,4.2vw,19px);}
}
@media (prefers-reduced-motion:reduce){
.about-culture-line,.culture-build{animation:none!important;opacity:1;transform:none;clip-path:none;}
.about-blueprint{transition:none;}
}
/* v1.25 — Contact send-message arrow follows the night neon-cyan accent. */
html[data-sfi-mode="night"] .submit-btn span{
color:#00E5FF!important;
text-shadow:0 0 6px rgba(0,229,255,.78),0 0 14px rgba(0,229,255,.38);
}
/* v1.31 — finalized night inversion, contact framing, and single-loop landing media. */
.site-header.shell{width:calc(100% - 52px);max-width:none;}
@media(max-width:850px){.site-header.shell{width:calc(100% - 32px);}}
@media(max-width:560px){.site-header.shell{width:calc(100% - 24px);}}
html[data-sfi-mode="night"] .site-footer .social-icon{color:#fff!important;}
html[data-sfi-mode="night"] .submit-btn{background:#000!important;color:#fff!important;border:1px solid #343434;}
html[data-sfi-mode="night"] .submit-btn span{color:#00E5FF!important;}
.contact-main-clean .business-rule{margin:34px 0 24px;}
.contact-main-clean .business-copy h3{margin-bottom:12px;}
@media(max-width:760px){.contact-main-clean .business-rule{margin:24px 0 18px;}}
.footer-logo-container{bottom:4px!important;margin-bottom:4px!important;}
@media(max-width:560px){}
.sfi-intro-video{opacity:1;visibility:visible;pointer-events:none;}
/* v1.32 — footer is part of the continuous page canvas; it has no independent phase color. */
.site-footer{
background:transparent!important;
color:inherit!important;
}
.site-footer a,
.site-footer .social-icon,
.site-footer .legal-links,
.site-footer .legal-links a{
color:inherit!important;
}
html[data-sfi-mode="day"] .site-footer,
html[data-sfi-mode="night"] .site-footer{
background:transparent!important;
color:inherit!important;
}
/* v1.34 — same custom cursor style in both phases; color changes only at night. */
.hide-cursor,
.hide-cursor *{
cursor:none !important;
}
html[data-sfi-mode="day"] body:not(.hide-cursor),
html[data-sfi-mode="day"] body:not(.hide-cursor) *{
cursor:url("data:image/svg+xml;utf8,") 16 16, auto;
}
html[data-sfi-mode="night"] body:not(.hide-cursor),
html[data-sfi-mode="night"] body:not(.hide-cursor) *{
cursor:url("data:image/svg+xml;utf8,") 16 16, auto;
}
/* v1.35 — footer auxiliary content fades after 4 seconds; the existing 60px floating logo remains visible. */
.footer-fade-content{
opacity:1;
visibility:visible;
transition:opacity .8s ease-in-out, visibility .8s ease-in-out;
}
.main-footer.footer-hidden .footer-fade-content{
opacity:0;
visibility:hidden;
}
.main-footer:hover .footer-fade-content,
.main-footer:active .footer-fade-content,
.main-footer.user-interacting .footer-fade-content{
opacity:1!important;
visibility:visible!important;
}
@media (prefers-reduced-motion: reduce){
.footer-fade-content{transition:none;}
}
/* v1.36 — responsive hardening across phones, tablets, landscape, desktop, and wide screens. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;}
.shell{max-width:var(--max);}
.site-header,.site-footer,body > main{min-width:0;}
.nav,.footer-inner,.contact-grid,.about-reveal{min-width:0;}
/* Touch devices retain full tap behavior without depending on hover or a desktop cursor. */
@media (hover:none), (pointer:coarse){
html[data-sfi-mode="day"] body:not(.hide-cursor),
html[data-sfi-mode="day"] body:not(.hide-cursor) *,
html[data-sfi-mode="night"] body:not(.hide-cursor),
html[data-sfi-mode="night"] body:not(.hide-cursor) *{cursor:auto;}
.nav a,.about-culture-trigger,.social-icon,.submit-btn,.email-launch,.email-address-button{min-height:44px;}
}
/* Small portrait phones */
@media (max-width:480px) and (orientation:portrait){
.shell{width:calc(100% - 24px);}
.site-header.shell{width:calc(100% - 20px);}
.brand{gap:9px;min-width:0;}
.brand-mark{font-size:32px;}
.brand-name{font-size:10px;letter-spacing:.07em;}
.nav{gap:14px;}
.nav a{font-size:11px;padding-inline:2px;}
.about-culture-line{font-size:clamp(36px,12vw,58px);}
.about-blueprint{width:100%;}
.about-blueprint > p{font-size:16px;line-height:1.5;}
.footer-inner{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;}
.legal-links{gap:9px;}
}
/* Phones and compact tablets in landscape: prioritize usable vertical space. */
@media (max-height:560px) and (orientation:landscape){
body{grid-template-rows:72px minmax(0,1fr) 112px;}
.site-header{height:72px;}
.site-footer{height:112px;}
.brand-mark{font-size:34px;}
.nav a{padding:10px 0;}
.about-main{justify-content:flex-start;overflow:auto;padding:14px 0 22px;}
.about-culture-line{font-size:clamp(34px,7vw,58px);}
.about-reveal.is-open .about-blueprint,
.about-reveal:hover .about-blueprint{margin-top:16px;}
.about-blueprint > p{font-size:15px;line-height:1.45;}
.footer-inner{padding:12px 0;}
.footer-copy{margin-top:4px;}
.legal-links{margin-top:5px;}
}
/* Tablet portrait and landscape */
@media (min-width:700px) and (max-width:1180px){
.shell{width:min(calc(100% - 48px),1040px);}
.about-blueprint{width:min(88%,820px);}
.contact-grid{gap:clamp(34px,5vw,58px);}
}
/* Wide desktop monitors keep content readable rather than stretching edge-to-edge. */
@media (min-width:1440px){
:root{--max:1320px;}
.shell{width:min(calc(100% - 112px),var(--max));}
.site-header.shell{width:calc(100% - 88px);max-width:1680px;}
.about-blueprint{width:min(900px,72%);}
}
@media (min-width:1920px){
:root{--max:1460px;}
.site-header.shell{max-width:1840px;}
}
/* v1.37 — protected link interaction and accessible focus treatment. */
.main-footer{
pointer-events:auto!important;
user-select:none;
-webkit-user-select:none;
}
.secure-email-link,
.secure-gmail-link{
cursor:pointer;
}
/* Neon Cyan Accessibility Focus Ring */
a[role="link"]:focus,
.secure-email-link:focus,
.secure-gmail-link:focus,
.footer-logo-container a:focus,
.floating-logo:focus{
outline:3px solid #00f3ff;
outline-offset:4px;
border-radius:4px;
box-shadow:0 0 10px #00f3ff,0 0 20px #00f3ff;
}
/* Keeps the layout clean for pointer users while retaining keyboard focus. */
a[role="link"]:focus:not(:focus-visible),
.secure-email-link:focus:not(:focus-visible),
.secure-gmail-link:focus:not(:focus-visible),
.footer-logo-container a:focus:not(:focus-visible){
outline:none;
box-shadow:none;
}
/* v1.38 — universal viewport and responsive layout hardening. */
/* Base box sizing applies everywhere without erasing the site's intentional component spacing. */
*,*::before,*::after{box-sizing:border-box;}
body{
width:100%;
min-height:100vh;
min-height:100dvh;
font-size:clamp(1rem,1vw + .75rem,1.25rem);
overflow-x:hidden;
}
/* Reusable fluid grid for present and future site sections. */
.responsive-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
gap:20px;
width:100%;
max-width:1400px;
margin:0 auto;
padding:15px;
}
/* Safe-area support for edge-to-edge phones/tablets while preserving existing visual offsets. */
@supports (padding:max(0px)){
.site-header.shell{
padding-left:max(0px,env(safe-area-inset-left));
padding-right:max(0px,env(safe-area-inset-right));
}
body > main,
.site-footer{
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
}
}
/* 1. Mobile portrait — narrow smartphones. */
@media (max-width:480px) and (orientation:portrait){
.responsive-grid{grid-template-columns:1fr;}
.footer-logo-container{max-width:50px;}
}
/* 2. Mobile landscape — short, wide phones. */
@media (max-width:932px) and (orientation:landscape){
.responsive-grid{gap:16px;padding:10px 15px;}
.site-header{padding-top:10px;padding-bottom:10px;}
.site-footer{padding-top:10px;padding-bottom:10px;}
}
/* 3. Tablet portrait / mini screens. */
@media (min-width:481px) and (max-width:768px) and (orientation:portrait){
.responsive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* 4. Tablet landscape / compact landscape monitors. */
@media (min-width:769px) and (max-width:1024px){
.responsive-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* 5. Standard desktop landscape. */
@media (min-width:1025px) and (max-width:1440px) and (orientation:landscape){
.responsive-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;}
}
/* 6. Desktop portrait / vertical monitors. */
@media (min-width:1025px) and (orientation:portrait){
.responsive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* 7. Ultra-wide and 4K displays. */
@media (min-width:1441px){
.responsive-grid{max-width:1600px;gap:40px;}
}
/* v1.39 — phase-aware loading layer and targeted rendering/performance hardening. */
/* Keep the universal sizing reset, but accelerate only elements that actually animate.
Applying will-change to every node can increase memory use, so it is intentionally scoped. */
*,*::before,*::after{
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
html,body{
width:100%;
min-height:100vh;
min-height:100dvh;
overflow-x:hidden;
scroll-behavior:smooth;
}
/* Avoid theme-color flashes while the first frame is being prepared. */
html[data-sfi-mode="day"],
html[data-sfi-mode="day"] body{background:#fff;}
html[data-sfi-mode="night"],
html[data-sfi-mode="night"] body{background:#000;}
/* Target GPU compositing at the site's animated surfaces only. */
.sfi-intro-video,
.sfi-intro,
.sfi-site-reveal,
.floating-logo,
.footer-fade-content,
.spinner{
will-change:transform,opacity;
transform:translateZ(0);
backface-visibility:hidden;
}
/* Long/reusable grids can defer off-screen painting without changing one-screen public-page geometry. */
.responsive-grid{
content-visibility:auto;
contain-intrinsic-size:auto 500px;
}
/* Lightweight preloading wall. It follows the active SFI phase so day never flashes dark. */
#loading-screen{
position:fixed;
inset:0;
width:100%;
height:100vh;
height:100dvh;
z-index:99999;
display:flex;
justify-content:center;
align-items:center;
opacity:1;
visibility:visible;
transition:opacity .5s cubic-bezier(.25,1,.5,1),visibility .5s;
pointer-events:auto;
}
html[data-sfi-mode="day"] #loading-screen{background:#fff;}
html[data-sfi-mode="night"] #loading-screen{background:#111;}
.spinner{
width:50px;
height:50px;
border:3px solid rgba(0,243,255,.1);
border-radius:50%;
border-top-color:#00f3ff;
box-shadow:0 0 15px #00f3ff;
animation:sfiLoaderSpin 1s linear infinite;
}
@keyframes sfiLoaderSpin{to{transform:translateZ(0) rotate(360deg);}}
/* Existing page structure acts as the site wrapper so no header/main/footer geometry changes. */
body > .site-header,
body > main,
body > .site-footer,
#sfi-site-reveal{
opacity:0;
transform:translateY(10px);
transition:opacity .6s cubic-bezier(.25,1,.5,1),transform .6s cubic-bezier(.25,1,.5,1);
}
body.site-loaded > .site-header,
body.site-loaded > main,
body.site-loaded > .site-footer,
body.site-loaded #sfi-site-reveal{
opacity:1;
transform:translateY(0);
}
body.site-loaded #loading-screen{
opacity:0;
visibility:hidden;
pointer-events:none;
}
/* The landing animation remains authoritative after the loader is gone. */
body.sfi-intro-running #sfi-site-reveal{
opacity:0;
pointer-events:none;
}
body.sfi-intro-complete #sfi-site-reveal{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
#loading-screen,
body > .site-header,
body > main,
body > .site-footer,
#sfi-site-reveal{transition:none!important;}
.spinner{animation-duration:1.5s;box-shadow:none;}
}
/* v1.41 — precise footer reveal behavior, viewport-fit refinements, and About playback rules. */
/* Footer auxiliary items fade without collapsing their exact interaction zones.
Empty footer space and the centered floating logo never reveal them. */
.footer-fade-content{
opacity:1;
visibility:visible;
transition:opacity .8s ease-in-out;
}
.main-footer.footer-hidden .footer-fade-content{
opacity:0;
visibility:visible;
}
.main-footer.footer-hidden .footer-fade-content > *,
.main-footer.footer-hidden .footer-fade-content a{
pointer-events:none;
}
/* Override the earlier whole-footer hover/active rules. */
.main-footer:hover .footer-fade-content,
.main-footer:active .footer-fade-content,
.main-footer.user-interacting .footer-fade-content{
opacity:inherit;
visibility:visible;
}
.main-footer.user-interacting .footer-fade-content{opacity:1;}
.main-footer.footer-hidden.user-interacting .footer-fade-content{opacity:1;}
/* Floating footer logo remains locked at the approved 4px bottom position. */
.footer-logo-container{
bottom:4px!important;
margin-bottom:4px!important;
}
/* About: pointer hover pauses exactly where the animation currently is.
A click/pinned state alone forces the complete statement to be visible. */
@media (hover:hover) and (pointer:fine){
.about-reveal:hover .about-culture-line,
.about-reveal:hover .culture-build{
animation-play-state:paused;
}
.about-reveal:hover .culture-build{
clip-path:revert;
}
.about-reveal.is-open:hover .culture-build{
clip-path:inset(0 0 0 0);
}
}
.about-reveal.is-open .about-culture-line{
animation-play-state:paused;
opacity:1!important;
transform:translateX(0)!important;
}
.about-reveal.is-open .culture-build{
animation-play-state:paused;
clip-path:inset(0 0 0 0)!important;
}
/* Adopt the useful fullscreen principles without introducing the sample hero/CTA or replacing SFI's design. */
html,body{
width:100%;
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow-x:hidden;
}
body > main,
#sfi-site-reveal,
.landing-hero{
width:100%;
max-width:100%;
min-width:0;
}
/* Compact phones: keep every region accessible inside the current orientation.
Contact form fields use the available width efficiently instead of forcing a rotation. */
@media (max-width:480px) and (orientation:portrait){
body{grid-template-rows:68px minmax(0,1fr) 112px;}
.site-header{height:68px;}
.site-header.shell{width:calc(100% - 16px);}
.shell{width:calc(100% - 18px);}
.brand-mark{font-size:29px;}
.brand-name{font-size:9px;}
.nav{gap:11px;}
.nav a{font-size:10px;padding:8px 1px;}
}
/* Landscape phones and short tablets: use two contact columns and a compact form so
the page remains usable without requiring portrait rotation. */
@media (max-width:932px) and (orientation:landscape) and (max-height:560px){
body{grid-template-rows:54px minmax(0,1fr) 84px;}
.site-header{height:54px;padding-top:0;padding-bottom:0;}
.site-header.shell{width:calc(100% - 22px);}
.shell{width:calc(100% - 26px);}
.brand-mark{font-size:28px;}
.brand-name{font-size:9px;}
.nav{gap:18px;}
.nav a{font-size:10px;padding:6px 0;min-height:34px;}
.about-main{justify-content:center;overflow:auto;padding:4px 0 8px;}
.about-culture-line{font-size:clamp(28px,6vw,48px);}
.about-reveal.is-open .about-blueprint{margin-top:10px;}
.about-blueprint > p{font-size:12px;line-height:1.36;}
}
/* Tablets retain comfortable sizing in either orientation while preventing clipping. */
@media (min-width:481px) and (max-width:1024px) and (min-height:561px){
body{grid-template-rows:78px minmax(0,1fr) 128px;}
.site-header{height:78px;}
.site-footer{height:128px;}
.contact-main{overflow:auto;padding:12px 0 14px;}
.contact-grid{gap:clamp(24px,4vw,44px);}
}
/* Wide displays expand the viewport canvas without allowing line lengths to become excessive. */
@media (min-width:1441px){
body > main{max-width:1600px;margin-left:auto;margin-right:auto;}
.landing-hero{min-height:100%;}
}
@media (prefers-reduced-motion:reduce){
.footer-fade-content{transition:none!important;}
}
/* v1.41 specificity correction: older whole-footer hover rules must never reveal hidden auxiliary content. */
.main-footer.footer-hidden:hover .footer-fade-content,
.main-footer.footer-hidden:active .footer-fade-content{
opacity:0!important;
visibility:visible!important;
}
.main-footer.footer-hidden.user-interacting .footer-fade-content{
opacity:1!important;
visibility:visible!important;
}
/* v1.42 — staggered premium entrance adapted to SFI's existing structure.
The sample hero/CTA is intentionally not added; the current brand, navigation,
and page content receive the same staged entrance without changing layout. */
body.sfi-entrance-pending .site-header .brand,
body.sfi-entrance-pending .site-header .nav,
body.sfi-entrance-pending main > * {
opacity:0;
transform:translateY(20px);
transition:opacity .8s cubic-bezier(.25,1,.5,1),
transform .8s cubic-bezier(.25,1,.5,1);
will-change:opacity,transform;
}
body.sfi-entrance-pending.sfi-entrance-ready .site-header .brand {
opacity:1;
transform:translateY(0);
transition-delay:.2s;
}
body.sfi-entrance-pending.sfi-entrance-ready .site-header .nav {
opacity:1;
transform:translateY(0);
transition-delay:.4s;
}
body.sfi-entrance-pending.sfi-entrance-ready main > * {
opacity:1;
transform:translateY(0);
transition-delay:.6s;
}
/* The landing main is intentionally empty. Preserve its existing geometry and let
the header/nav entrance begin only after dlayer/clayer is finished or skipped. */
body.sfi-entrance-ready .landing-hero {
opacity:1;
transform:none;
}
@media (prefers-reduced-motion:reduce){
body.sfi-entrance-pending .site-header .brand,
body.sfi-entrance-pending .site-header .nav,
body.sfi-entrance-pending main > * {
opacity:1!important;
transform:none!important;
transition:none!important;
will-change:auto!important;
}
}
/* ==========================================================================\n v1.43 — deterministic footer, adaptive viewport framing, complete intro media,\n phase accents, and pinned About message. These rules intentionally supersede\n conflicting legacy responsive/footer rules above without moving the floating logo.\n ========================================================================== */
:root{
--gold:#080808; /* Day-phase site accent: no gold outside accessibility focus. */
--focus-accent:#d79518; /* Gold is reserved for keyboard accessibility during day. */
}
html[data-sfi-mode="night"]{
--gold:#00E5FF;
--focus-accent:#00E5FF;
}
/* Day accents are charcoal; night keeps neon cyan. */
html[data-sfi-mode="day"] .form-consent a{color:#080808!important;}
html[data-sfi-mode="day"] .submit-btn span{color:#080808!important;}
html[data-sfi-mode="day"] .legal-links i,
html[data-sfi-mode="day"] .gold-rule,
html[data-sfi-mode="day"] .business-rule{background:#080808!important;box-shadow:none!important;}
/* Keyboard-only accessibility halo: gold in day, neon cyan in night. */
a[role="link"]:focus-visible,
.secure-email-link:focus-visible,
.secure-gmail-link:focus-visible,
.footer-logo-container a:focus-visible,
.about-culture-trigger:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
outline:3px solid var(--focus-accent)!important;
outline-offset:4px!important;
border-radius:4px;
box-shadow:0 0 10px color-mix(in srgb,var(--focus-accent) 78%,transparent),
0 0 20px color-mix(in srgb,var(--focus-accent) 48%,transparent)!important;
}
a[role="link"]:focus:not(:focus-visible),
.secure-email-link:focus:not(:focus-visible),
.secure-gmail-link:focus:not(:focus-visible),
.footer-logo-container a:focus:not(:focus-visible),
.about-culture-trigger:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible){outline:none!important;box-shadow:none!important;}
/* Intro must show the complete authored city frame and road sign in every aspect ratio. */
.sfi-intro{width:100%;height:100vh;height:100dvh;overflow:hidden;}
.sfi-intro-video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
}
html[data-sfi-mode="day"] .sfi-intro-video{background:#fff;}
html[data-sfi-mode="night"] .sfi-intro-video{background:#000;}
/* Remove the old delayed footer welcome animation. The full footer appears immediately
when the intro controller declares the landing page complete. */
body.sfi-intro-complete .site-footer{
animation:none!important;
opacity:1!important;
transform:none!important;
}
/* Footer: the floating logo is deliberately untouched. Auxiliary content has one clear
lifecycle and only its own exact zones can reactivate it. */
.footer-fade-content{
opacity:1!important;
visibility:visible!important;
transition:opacity .8s ease-in-out!important;
}
.main-footer.footer-preintro .footer-fade-content,
.main-footer.footer-hidden .footer-fade-content{
opacity:0!important;
}
.main-footer.footer-hidden .footer-fade-content > *,
.main-footer.footer-hidden .footer-fade-content a{
pointer-events:none;
}
.main-footer.footer-active .footer-fade-content{
opacity:1!important;
visibility:visible!important;
}
/* Explicitly neutralize every legacy whole-footer hover/active reveal path. */
.main-footer:hover .footer-fade-content,
.main-footer:active .footer-fade-content,
.main-footer.user-interacting .footer-fade-content,
.main-footer.footer-hidden:hover .footer-fade-content,
.main-footer.footer-hidden:active .footer-fade-content{
opacity:inherit!important;
}
.main-footer.footer-hidden:not(.footer-active) .footer-fade-content{opacity:0!important;}
.main-footer.footer-active .footer-fade-content{opacity:1!important;}
/* Legal links are the top footer line; company/all-rights + Designed by are below. */
.footer-meta{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;}
.footer-meta .legal-links{order:1;margin:0 0 4px!important;}
.footer-meta .footer-copy{order:2;margin:0!important;}
.footer-designed{
display:inline-block;
margin-left:.55em;
color:#E85D3F!important;
font-family:"Bondini","Bodoni 72","Bodoni MT",Didot,Georgia,serif;
font-style:italic;
font-weight:400;
letter-spacing:.01em;
text-transform:lowercase;
white-space:nowrap;
}
/* Raise auxiliary footer information/icons only. Never alter the floating logo. */
.footer-logo-container{bottom:4px!important;margin-bottom:4px!important;}
/* Universal frame: use the live dynamic viewport and never crop the public page canvas. */
html,body{width:100%;min-width:0;min-height:100%;overflow-x:hidden;}
body{
min-height:100vh;
min-height:100svh;
min-height:100dvh;
grid-template-rows:clamp(58px,11dvh,110px) minmax(0,1fr) clamp(88px,12dvh,104px)!important;
}
.site-header{height:auto!important;min-height:0!important;}
.site-footer{height:auto!important;min-height:0!important;}
body > main{min-height:0;max-height:100%;}
.sfi-site-reveal{
width:100%;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;
grid-template-rows:clamp(58px,11dvh,110px) minmax(0,1fr) clamp(88px,12dvh,104px)!important;
}
.sfi-site-reveal > .site-header,
.sfi-site-reveal > .site-footer{height:auto!important;min-height:0!important;}
/* Main-page scaling: preserve the full current orientation instead of requiring rotation. */
.about-main,.contact-main{
width:min(calc(100% - 24px),var(--max));
height:100%;
min-height:0;
padding-top:clamp(4px,1.1dvh,14px)!important;
padding-bottom:clamp(5px,1.2dvh,16px)!important;
overflow:hidden!important;
}
.legal-main{max-width:100%;overflow:auto;}
/* Contact remains fully framed in phone portrait. */
@media (max-width:768px) and (orientation:portrait){
body{grid-template-rows:58px minmax(0,1fr) 96px!important;}
.sfi-site-reveal{grid-template-rows:58px minmax(0,1fr) 96px!important;}
.site-header.shell{width:calc(100% - 16px)!important;}
.shell{width:calc(100% - 20px);}
.brand-mark{font-size:clamp(25px,8vw,34px)!important;}
.brand-name{font-size:clamp(8px,2.3vw,10px)!important;}
.nav{gap:clamp(10px,4vw,20px)!important;}
.nav a{font-size:10px!important;padding:7px 1px!important;min-height:34px!important;}
}
/* Very short portrait phones receive one more compact step so no Contact control is clipped. */
@media (max-width:480px) and (orientation:portrait) and (max-height:680px){
body{grid-template-rows:52px minmax(0,1fr) 84px!important;}
.sfi-site-reveal{grid-template-rows:52px minmax(0,1fr) 84px!important;}
}
/* Landscape phones/tablets: keep two columns and compress vertical rhythm. */
@media (max-width:1024px) and (orientation:landscape) and (max-height:600px){
body{grid-template-rows:48px minmax(0,1fr) 76px!important;}
.sfi-site-reveal{grid-template-rows:48px minmax(0,1fr) 76px!important;}
.site-header.shell{width:calc(100% - 20px)!important;}
.shell{width:calc(100% - 24px);}
.brand-mark{font-size:27px!important;}.brand-name{font-size:8.5px!important;}
.nav a{font-size:9.5px!important;padding:5px 0!important;min-height:30px!important;}
.about-main{justify-content:center!important;padding:2px 0 4px!important;}
.about-culture-trigger{padding:4px 8px!important;}
.about-culture-line{font-size:clamp(25px,5.5vw,42px)!important;}
.about-reveal.is-open .about-blueprint{margin-top:5px!important;}
.about-blueprint > p{font-size:10px!important;line-height:1.24!important;}
}
/* About clicked state is always complete and static until explicitly unclicked. */
.about-reveal.is-open .about-culture-line,
.about-reveal.is-open .culture-build{
animation:none!important;
animation-play-state:paused!important;
}
.about-reveal.is-open .about-culture-line{
opacity:1!important;
transform:translateX(0)!important;
}
.about-reveal.is-open .culture-build{clip-path:inset(0 0 0 0)!important;opacity:1!important;}
/* Hover-only behavior remains a pure pause at the current animation frame. */
@media (hover:hover) and (pointer:fine){
.about-reveal:not(.is-open):hover .about-culture-line,
.about-reveal:not(.is-open):hover .culture-build{animation-play-state:paused!important;}
}
@media (prefers-reduced-motion:reduce){
.footer-fade-content{transition:none!important;}
}
/* ==========================================================================\n v1.44 — requested footer identity + portrait Contact refinements\n ========================================================================== */
/* Honeypot exists for automated form scanners only and never enters the visual layout. */
.bcdc-form-shield{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
opacity:0!important;
pointer-events:none!important;
}
/* Phone portrait only: keep the legal line on top, then center the copyright/design stack.
The floating footer logo is intentionally untouched. */
@media (max-width:768px) and (orientation:portrait){
/* Contact portrait: preserve complete information and explicit reading order. */
}
/* Standard phone portrait: slightly rebalance the existing v1.43 compression so all
Contact information remains legible without changing landscape behavior. */
@media (max-width:480px) and (orientation:portrait) and (min-height:681px){
}
/* Very short portrait devices stay complete in the current orientation via a local main
scroll region instead of forcing landscape; no landscape rules are changed. */
@media (max-width:480px) and (orientation:portrait) and (max-height:680px){
}
/* ==========================================================================
v1.45 — requested-only refinements: lowercase BCDC credit, precise About
hover/click behavior, and Contact spacing in desktop/mobile orientations.
Floating footer logo geometry is intentionally untouched.
========================================================================== */
/* About: hover pauses exactly where the animation currently is. It must NOT
force the unfinished second phrase to its completed state. Click/pinned state
remains the only state that forces the complete sentence and holds it static. */
@media (hover:hover) and (pointer:fine){
.about-reveal:not(.is-open):hover .about-culture-line,
.about-reveal:not(.is-open):hover .culture-build{
animation-play-state:paused!important;
}
}
.about-reveal.is-open .about-culture-line{
animation-play-state:paused!important;
opacity:1!important;
transform:translateX(0)!important;
}
.about-reveal.is-open .culture-build{
animation-play-state:paused!important;
clip-path:inset(0 0 0 0)!important;
}
/* Desktop Contact: lower both columns slightly so they breathe below the header. */
@media (min-width:851px){
.contact-main.contact-main-clean{
padding-top:clamp(28px,4.2vh,48px)!important;
}
}
/* Mobile portrait only: preserve the established footer/meta alignment, center
only the design-credit line beneath the company/all-rights line, and keep it
visually separated from the unchanged floating logo. */
@media (max-width:768px) and (orientation:portrait){
/* Contact Information must be visibly above the address, with breathing room
before Business Inquiries. */
/* Visually normal separation between Business Inquiries and Send a Message. */
}
/* Very narrow portrait phones keep the requested hierarchy while fitting the
current viewport; only spacing scales down, not the order or visibility. */
@media (max-width:480px) and (orientation:portrait){
}
/* Mobile landscape only: move Contact content below the header without changing
the established landscape composition. Keep the consent/status text visible. */
@media (max-width:932px) and (orientation:landscape) and (max-height:560px){
}
/* ==========================================================================
v1.52 — consolidated responsive Contact/footer architecture.
Legacy mobile Contact/footer positioning rules from v1.41–v1.48 were removed; this is the authoritative
implementation. Floating-logo geometry and approved desktop styling remain intact.
========================================================================== */
/* Loader is diagnostic only; JS controls the abnormal-load threshold. */
#loading-screen.hidden{display:none!important;}
/* Touch navigation: only one selection underline may be active at a time. */
.nav a::after{opacity:0;}
.nav a.active::after,.nav a.nav-pressed::after{opacity:1;}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{opacity:1;}}
@media (hover:none),(pointer:coarse){.nav a:hover:not(.active):not(.nav-pressed)::after{opacity:0!important;}}
/* Night email chooser: readable dark surface in both desktop and mobile layouts. */
html[data-sfi-mode="night"] .email-dialog-panel{background:#080808!important;color:#fff!important;}
html[data-sfi-mode="night"] .email-dialog-kicker,
html[data-sfi-mode="night"] .email-dialog-panel h2,
html[data-sfi-mode="night"] .email-dialog-copy,
html[data-sfi-mode="night"] .email-copy-status,
html[data-sfi-mode="night"] .email-dialog-close{color:#fff!important;}
html[data-sfi-mode="night"] .email-option{background:#080808!important;border-color:#fff!important;color:#fff!important;}
html[data-sfi-mode="night"] .email-option.primary{background:#080808!important;border-color:#fff!important;color:#fff!important;}
/* Desktop Contact: slightly lower composition; displayed email matches inquiry body copy. */
@media (min-width:933px){
.contact-main.contact-main-clean{padding-top:clamp(34px,5.2vh,64px)!important;}
.contact-main-clean .email-address-button{font-size:17px!important;line-height:1.72!important;}
}
/* Empty form status must occupy no space and draw no accent edge. */
#contact-form .form-note:empty{display:none!important;border:0!important;padding:0!important;margin:0!important;}
/* --------------------------------------------------------------------------
MOBILE PORTRAIT — authoritative footer + Contact geometry
-------------------------------------------------------------------------- */
@media (max-width:768px) and (orientation:portrait){
/* Contact portrait: lower the content and normalize every form surface. */
.contact-main.contact-main-clean{
justify-content:flex-start!important;
padding-top:clamp(52px,7.5dvh,84px)!important;
padding-bottom:10px!important;
overflow-y:auto!important;
}
.contact-grid{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
.contact-grid>div:first-child{display:block!important;width:100%!important;min-width:0!important;margin:0 0 clamp(24px,3.2dvh,34px)!important;}
.contact-grid>div:first-child>h2{display:block!important;font-size:clamp(12px,3.7vw,16px)!important;margin:0 0 13px!important;}
.email-info-block{grid-template-columns:24px minmax(0,1fr)!important;gap:6px!important;margin:0 0 18px!important;}
.email-launch{width:24px!important;height:24px!important;min-height:24px!important;justify-self:start!important;transform:translateX(-5px)!important;}
.info-block svg{width:19px!important;height:19px!important;}
.email-address-button{font-size:clamp(10px,3vw,12px)!important;min-height:24px!important;}
.contact-main-clean .business-rule{width:30px!important;height:1px!important;margin:0 0 13px!important;}
.business-copy h3{display:block!important;font-size:clamp(10px,3vw,13px)!important;margin:0 0 6px!important;}
.business-copy p{font-size:clamp(8px,2.55vw,11px)!important;line-height:1.22!important;max-width:none!important;}
.contact-grid>div:last-child{display:block!important;width:100%!important;min-width:0!important;margin:0!important;}
.contact-grid>div:last-child>h2{display:block!important;font-size:clamp(12px,3.7vw,16px)!important;margin:0 0 12px!important;}
#contact-form{display:block!important;width:100%!important;max-width:100%!important;}
#contact-form .form-field{display:block!important;width:100%!important;max-width:100%!important;margin:0 0 9px!important;}
#contact-form .form-field input,#contact-form .form-field textarea{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;box-sizing:border-box!important;}
#contact-form .form-field label{font-size:9px!important;margin-bottom:3px!important;}
#contact-form .form-field input,#contact-form .form-field textarea{padding:6px 8px!important;font-size:11px!important;}
#contact-form .form-field input{height:40px!important;min-height:40px!important;}
#contact-form .form-field textarea{height:56px!important;min-height:56px!important;max-height:56px!important;resize:none!important;}
#contact-form .submit-btn{display:block!important;width:100%!important;max-width:100%!important;height:42px!important;min-height:42px!important;margin:12px 0 0!important;box-sizing:border-box!important;font-size:10px!important;}
#contact-form .submit-btn span{font-size:14px!important;margin-left:5px!important;}
#contact-form .form-consent{width:100%!important;margin:6px 0 0!important;font-size:7.5px!important;line-height:1.16!important;}
}
@media (max-width:480px) and (orientation:portrait){
.contact-main.contact-main-clean{padding-top:clamp(48px,7dvh,72px)!important;}
.contact-grid h2{font-size:13px!important;line-height:1.15!important;}
.contact-main-clean .email-address-button{font-size:11px!important;}
.business-copy h3{font-size:11px!important;}
.business-copy p{font-size:9px!important;line-height:1.2!important;}
#contact-form .form-field{margin-bottom:7px!important;}
#contact-form .form-field label{font-size:8.5px!important;margin-bottom:3px!important;}
#contact-form .form-field input{height:36px!important;min-height:36px!important;font-size:10.5px!important;}
#contact-form .form-field textarea{height:48px!important;min-height:48px!important;max-height:48px!important;font-size:10.5px!important;}
#contact-form .submit-btn{height:39px!important;min-height:39px!important;margin-top:9px!important;}
#contact-form .form-consent{font-size:7px!important;line-height:1.15!important;}
}
/* --------------------------------------------------------------------------
MOBILE LANDSCAPE — safe-area aware split page + single-column form
The page remains a left/right composition, but every form bar uses one
identical full-width track. Message is taller only by field type.
-------------------------------------------------------------------------- */
@media (max-width:932px) and (orientation:landscape){
.contact-main.contact-main-clean{
box-sizing:border-box!important;
width:100%!important;
max-width:var(--max)!important;
min-height:0!important;
margin-inline:auto!important;
padding-top:clamp(12px,3dvh,20px)!important;
padding-bottom:clamp(12px,3dvh,20px)!important;
padding-left:max(18px,env(safe-area-inset-left))!important;
padding-right:max(18px,env(safe-area-inset-right))!important;
overflow:hidden!important;
justify-content:center!important;
}
.contact-grid{
display:grid!important;
grid-template-columns:minmax(0,.86fr) minmax(0,1.34fr)!important;
gap:clamp(22px,4vw,44px)!important;
width:100%!important;
max-width:100%!important;
min-height:0!important;
margin:0!important;
padding:0!important;
align-items:center!important;
align-content:center!important;
}
.contact-grid>div:first-child,
.contact-grid>div:last-child{
min-width:0!important;
margin:0!important;
}
.contact-grid>div:last-child{
width:min(100%,420px)!important;
max-width:420px!important;
justify-self:center!important;
}
.contact-grid>div:last-child>h2{display:none!important;}
.contact-grid h2{font-size:13px!important;line-height:1.1!important;margin:0 0 8px!important;}
.email-info-block{grid-template-columns:24px minmax(0,1fr)!important;gap:8px!important;margin:0 0 8px!important;align-items:center!important;}
.email-launch{width:24px!important;height:24px!important;min-height:24px!important;justify-self:start!important;transform:translateX(-5px)!important;}
.email-info-block svg{width:20px!important;height:20px!important;}
.email-address-button{font-size:10px!important;line-height:1.1!important;}
.contact-main-clean .business-rule{width:30px!important;height:1px!important;margin:7px 0 6px!important;}
.business-copy h3{display:block!important;font-size:10px!important;line-height:1.1!important;margin:0 0 3px!important;}
.business-copy p{display:block!important;max-width:none!important;font-size:8px!important;line-height:1.18!important;margin:0!important;}
#contact-form{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:3px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
}
#contact-form .form-field{
display:block!important;
flex:0 0 auto!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
}
#contact-form .form-field label{font-size:7.5px!important;line-height:1!important;margin:0 0 2px!important;}
#contact-form .form-field input,
#contact-form .form-field textarea{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
margin:0!important;
padding:4px 7px!important;
font-size:8.5px!important;
}
#contact-form .form-field input{height:23px!important;min-height:23px!important;}
#contact-form .form-field textarea{height:30px!important;min-height:30px!important;max-height:30px!important;resize:none!important;}
#contact-form .submit-btn{
display:block!important;
flex:0 0 auto!important;
width:100%!important;
max-width:100%!important;
height:26px!important;
min-height:26px!important;
margin:3px 0 0!important;
box-sizing:border-box!important;
font-size:8.5px!important;
}
#contact-form .form-consent{
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
margin:1px 0 0!important;
font-size:6.2px!important;
line-height:1.08!important;
}
#contact-form .form-note:not(:empty){
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
margin:1px 0 0!important;
padding:2px 4px!important;
box-sizing:border-box!important;
font-size:6.2px!important;
line-height:1.08!important;
}
}
@media (max-width:932px) and (orientation:landscape) and (max-height:560px){
body{grid-template-rows:clamp(58px,18dvh,78px) minmax(0,1fr) clamp(62px,16dvh,78px)!important;}
.contact-main.contact-main-clean{height:100%!important;}
.contact-grid>div:last-child{width:min(100%,390px)!important;max-width:390px!important;}
#contact-form{gap:2px!important;}
#contact-form .form-field input{height:21px!important;min-height:21px!important;}
#contact-form .form-field textarea{height:27px!important;min-height:27px!important;max-height:27px!important;}
#contact-form .submit-btn{height:24px!important;min-height:24px!important;margin-top:2px!important;}
#contact-form .form-consent{font-size:5.9px!important;line-height:1.05!important;}
}
/* ==========================================================================
v1.54 — approved footer-credit restoration + targeted contact corrections.
The credit typography is sourced from the pre-regression approved styling:
Bondini/Bodoni fallback stack, italic 400, .01em tracking, #E85D3F.
Desktop and mobile landscape inherit the original footer-copy size exactly.
Portrait keeps the same type identity while inheriting the intentionally
reduced left-stack size. Floating-logo geometry remains independently locked.
========================================================================== */
/* Desktop/tablet footer: the design credit belongs inline with the copyright,
as in the approved footer. No new desktop footer sizing or positioning. */
.footer-copy .footer-designed{
display:inline-block;
margin-left:.55em!important;
width:auto!important;
max-width:none!important;
font-size:inherit!important;
line-height:inherit!important;
vertical-align:baseline!important;
text-align:inherit!important;
}
/* Desktop Contact: email address must visually match the Partnership/Business
Inquiries message exactly rather than using a separate larger treatment. */
@media (min-width:933px){
.contact-main-clean .email-address-button{
font-family:inherit!important;
font-size:13px!important;
font-weight:400!important;
font-style:normal!important;
line-height:1.42!important;
letter-spacing:normal!important;
}
}
/* Mobile portrait: footer content is independently anchored so neither the
left metadata stack nor the right social icons can move the floating logo.
The approved logo remains exactly centered at 60px and 4px from the bottom. */
@media (max-width:768px) and (orientation:portrait){
.footer-inner{
position:relative!important;
display:block!important;
min-height:70px!important;
padding-top:6px!important;
padding-bottom:4px!important;
}
.footer-logo-container{
position:absolute!important;
left:50%!important;
right:auto!important;
bottom:4px!important;
width:60px!important;
max-width:60px!important;
margin:0 0 4px!important;
transform:translateX(-50%)!important;
padding-top:5px!important;
padding-bottom:0!important;
z-index:2!important;
}
.footer-meta{
position:absolute!important;
left:0!important;
right:auto!important;
bottom:4px!important;
width:calc(50% - 40px)!important;
max-width:calc(50% - 40px)!important;
min-width:0!important;
margin:0!important;
padding:0!important;
transform:none!important;
overflow:visible!important;
text-align:left!important;
}
.footer-meta .legal-links{
margin:0 0 3px!important;
gap:clamp(3px,1vw,5px)!important;
font-size:clamp(5.4px,1.45vw,6.8px)!important;
line-height:1.05!important;
white-space:nowrap!important;
}
.footer-meta .footer-copy{
display:block!important;
width:max-content!important;
max-width:none!important;
margin:0!important;
overflow:visible!important;
white-space:nowrap!important;
font-size:clamp(5.4px,1.45vw,6.8px)!important;
line-height:1.05!important;
}
.footer-meta .footer-copy .footer-designed{
display:block!important;
width:max-content!important;
max-width:100%!important;
margin:3px 0 0!important;
font-size:inherit!important;
line-height:inherit!important;
text-align:left!important;
}
.socials{
position:absolute!important;
left:auto!important;
right:0!important;
bottom:4px!important;
margin:0!important;
transform:none!important;
gap:9px!important;
}
.social-icon{width:19px!important;height:19px!important;}
}
/* Mobile landscape: retain the existing approved footer sizing/location. The
credit inherits the copyright size and stays inline; do not resize/reposition it. */
@media (max-width:932px) and (orientation:landscape){
.footer-copy .footer-designed{
display:inline-block!important;
margin-left:.55em!important;
font-size:inherit!important;
line-height:inherit!important;
vertical-align:baseline!important;
}
#contact-form .submit-btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
line-height:1!important;
}
#contact-form .submit-btn span{
display:inline-block!important;
margin-left:6px!important;
line-height:1!important;
}
}
/* ==========================================================================
v1.55 — exact pre-regression footer geometry restoration.
Desktop auxiliary footer content returns to its approved raised position.
Mobile landscape footer copy/icon geometry returns to the approved values
while the floating logo remains independently controlled. Portrait rules
from v1.54 remain untouched.
========================================================================== */
/* Desktop: restore the pre-regression auxiliary footer position exactly.
The floating logo remains at its independent 4px bottom position. */
@media (min-width:933px){
.footer-meta,
.socials{
position:relative!important;
bottom:14px!important;
}
.footer-copy .footer-designed{
display:inline-block!important;
margin-left:.55em!important;
font-size:inherit!important;
line-height:inherit!important;
vertical-align:baseline!important;
}
}
/* Mobile landscape: restore the approved footer metadata/tag/icon scale and
position from the pre-regression implementation. Do not alter form layout. */
@media (max-width:932px) and (orientation:landscape){
.footer-inner{
padding-top:5px!important;
padding-bottom:2px!important;
}
.footer-meta,
.socials{
position:relative!important;
bottom:9px!important;
}
.footer-copy,
.legal-links{
font-size:5.4px!important;
}
.legal-links{
gap:4px!important;
white-space:nowrap!important;
}
.socials{
gap:10px!important;
}
.social-icon{
width:18px!important;
height:18px!important;
}
.footer-copy .footer-designed{
display:inline-block!important;
margin-left:.55em!important;
font-size:inherit!important;
line-height:inherit!important;
vertical-align:baseline!important;
}
}
/* ==========================================================================
v1.59 — SFI homepage character layer.
Integrated into the existing landing content region only. Character layout
size is controlled by CSS space, never GPU capability, DPR, or asset tier.
========================================================================== */
.landing-hero{
position:relative;
overflow:hidden;
}
.sfi-character{
--robot-width:clamp(180px,24vw,440px);
--robot-bottom:0%;
--bubble-left:55.9%;
--bubble-top:43%;
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:20;
}
.sfi-character__robot,
.sfi-character__energy{
position:absolute;
left:0;
bottom:var(--robot-bottom);
width:var(--robot-width);
height:auto;
background:transparent;
image-rendering:auto;
backface-visibility:hidden;
}
.sfi-character__robot{z-index:1;}
.sfi-character__energy{z-index:2;}
.sfi-character__bubble{
position:absolute;
left:var(--bubble-left);
top:var(--bubble-top);
width:clamp(190px,24.3vw,330px);
aspect-ratio:221/61;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-50%) scale(0);
transform-origin:left center;
opacity:0;
padding:0 .7em;
background:#000;
color:#fff;
white-space:nowrap;
font:400 clamp(14px,2.1vw,22px)/1 Arial,Helvetica,sans-serif;
letter-spacing:.015em;
z-index:3;
will-change:transform,opacity,top;
}
.sfi-character[data-phase="day"] .sfi-character__robot--dark,
.sfi-character[data-phase="night"] .sfi-character__robot--light{display:none;}
.sfi-character[data-phase="day"] .sfi-character__bubble{background:#000;color:#fff;}
.sfi-character[data-phase="night"] .sfi-character__bubble{background:#fff;color:#000;}
/* Layout-only responsive sizing. */
@media(max-width:900px){
.sfi-character{--robot-width:clamp(170px,36vw,320px);--bubble-left:55.9%;}
}
@media(max-width:600px){
.sfi-character{--robot-width:48vw;--robot-bottom:1%;--bubble-left:55.9%;--bubble-top:39%;}
}
@media(max-width:900px) and (orientation:landscape){
.sfi-character{--robot-width:24vw;--robot-bottom:-2%;--bubble-left:55.9%;--bubble-top:40%;}
}
@media(min-width:1600px){
.sfi-character{--robot-width:clamp(320px,20vw,500px);}
.sfi-character__bubble{width:clamp(240px,16vw,380px);font-size:clamp(18px,1.05vw,26px);}
}
@media(min-width:2560px){
.sfi-character{--robot-width:clamp(380px,16vw,540px);}
.sfi-character__bubble{width:clamp(280px,13vw,420px);font-size:clamp(20px,.9vw,30px);}
}
@media(min-width:3200px){
.sfi-character{--robot-width:clamp(420px,14vw,560px);}
.sfi-character__bubble{width:clamp(300px,12vw,440px);font-size:clamp(22px,.8vw,32px);}
}
@media(prefers-reduced-motion:reduce){
.sfi-character{display:none;}
}