: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}
.contact-title{font-size:72px}
.legal-links{flex-wrap:wrap}
}
/* 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;
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;}
.site-footer{height:118px;}
.sfi-site-reveal{grid-template-rows:76px minmax(0,1fr) 118px;}
.sfi-site-reveal > .site-header{height:76px;}
.sfi-site-reveal > .site-footer{height:118px;}
.footer-inner{padding:12px 0;gap:8px;}
.footer-brand-row .brand-mark{font-size:27px;}
.footer-brand-row .brand-name{font-size:9px;}
.footer-copy{margin-top:5px;font-size:9px;}
.legal-links{margin-top:6px;font-size:9px;gap:8px;}
.social-icon{width:23px;height:23px;}
.socials{gap:14px;}
.contact-main{padding-bottom:5px;}
.contact-title{font-size:38px;line-height:.9;}
.contact-intro{font-size:11px;line-height:1.32;margin-top:5px;}
.contact-main > .gold-rule{margin:7px 0 8px !important;width:38px;}
.contact-grid{
grid-template-columns:1fr;
gap:8px;
}
.contact-grid > div:first-child{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:12px;
align-items:start;
}
.contact-grid > div:first-child > h2{display:none;}
.info-block{margin:0;grid-template-columns:22px 1fr;gap:6px;}
.info-block svg{width:20px;height:20px;}
.info-block p,.info-block a,.email-address-button{font-size:10px;line-height:1.25;}
.business-rule{display:none;}
.business-copy{grid-column:1/-1;margin-top:5px;}
.business-copy h3{display:none;}
.business-copy p{font-size:9px;line-height:1.25;max-width:none;}
.contact-grid > div:last-child > h2{display:none;}
.form-field{margin-bottom:3px;}
.form-field label{font-size:9px;margin-bottom:2px;}
.form-field input,.form-field textarea{padding:5px 7px;font-size:10px;}
.form-field textarea{height:38px;min-height:38px;}
.submit-btn{min-height:31px;font-size:10px;}
.submit-btn span{font-size:16px;margin-left:8px;}
.form-consent{font-size:8px;line-height:1.2;margin-top:3px;}
}
@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;}
.site-footer{height:92px;}
.sfi-site-reveal{grid-template-rows:76px minmax(0,1fr) 92px;}
.sfi-site-reveal > .site-footer{height:92px;}
.footer-inner{padding:8px 0;gap:6px;}
.footer-brand-row{gap:10px;}
.footer-brand-row .brand-mark{font-size:23px;}
.footer-brand-row .brand-name{font-size:8px;}
.footer-copy{margin-top:3px;font-size:8px;}
.legal-links{margin-top:4px;font-size:8px;gap:6px;}
.social-icon{width:20px;height:20px;}
.socials{gap:11px;}
}
/* 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;}
.site-footer{height:70px;}
.sfi-site-reveal{grid-template-rows:76px minmax(0,1fr) 70px;}
.sfi-site-reveal > .site-footer{height:70px;}
.footer-inner{padding:5px 0;gap:4px;}
.footer-brand-row{gap:7px;}
.footer-brand-row .brand-mark{font-size:18px;}
.footer-brand-row .brand-name{font-size:6.8px;}
.footer-copy{margin-top:2px;font-size:6.8px;}
.legal-links{margin-top:2px;font-size:6.8px;gap:5px;}
.social-icon{width:17px;height:17px;}
.socials{gap:8px;}
.contact-main{padding-top:4px;padding-bottom:3px;}
.contact-title{font-size:34px;line-height:.9;}
.contact-intro{margin-top:3px;font-size:10.5px;line-height:1.25;}
.contact-main > .gold-rule{margin:5px 0 6px !important;}
.form-consent{font-size:7.5px;line-height:1.16;margin-top:2px;}
}
/* 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.shell,
.footer-inner.shell{width:min(calc(100% - 32px),var(--max));}
.site-header{height:76px;min-height:76px;}
.site-header .brand{column-gap:10px;}
.footer-inner{column-gap:10px;}
.footer-brand-row{column-gap:7px;}
}
/* 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){
.site-header.shell,
.footer-inner.shell{width:min(calc(100% - 32px),var(--max));}
}
/* 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){
.footer-inner.shell{
width:calc(100% - 24px);
max-width:none;
}
}
/* 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){
.footer-logo-container{width:60px;max-width:60px;bottom:6px;}
.footer-inner{padding-top:28px;padding-bottom:5px;}
.footer-copy,.legal-links{font-size:6.5px;}
}
@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){.footer-logo-container{bottom:4px!important;}}
.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;}
/* Raise only the copyright/legal/social content; keep the 60px logo locked at its existing 4px bottom position. */
.footer-meta,
.socials{
position:relative;
bottom:10px;
}
.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-footer{height:112px;}
.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;}
.contact-main{
justify-content:flex-start;
overflow:auto;
padding:8px 0 10px;
overscroll-behavior:contain;
}
.contact-grid{gap:12px;}
.contact-grid h2{font-size:15px;margin-bottom:8px;}
.email-info-block{grid-template-columns:30px minmax(0,1fr);gap:8px;margin-bottom:7px;}
.email-launch{width:30px;height:30px;}
.info-block svg{width:24px;height:24px;}
.email-address-button{font-size:12px;}
.contact-main-clean .business-rule{width:38px;margin:8px 0 7px;}
.business-copy h3{font-size:13px;margin-bottom:4px;}
.business-copy p{max-width:none;font-size:11px;line-height:1.35;}
#contact-form{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:5px 7px;
}
#contact-form .form-field{margin:0;min-width:0;}
#contact-form .form-field:nth-of-type(3),
#contact-form .form-field:nth-of-type(4),
#contact-form .submit-btn,
#contact-form .form-consent,
#contact-form .form-note{grid-column:1 / -1;}
.form-field label{font-size:10px;margin-bottom:3px;}
.form-field input,.form-field textarea{padding:7px 8px;font-size:12px;min-width:0;}
.form-field textarea{height:48px;min-height:48px;}
.submit-btn{min-height:36px;font-size:11px;}
.submit-btn span{font-size:17px;margin-left:8px;}
.form-consent{font-size:9px;line-height:1.25;margin-top:2px;}
.footer-inner{padding-top:12px;padding-bottom:4px;}
.footer-meta,.socials{bottom:12px;}
.footer-copy,.legal-links{font-size:6px;}
.legal-links{gap:6px;margin-top:5px;}
.socials{gap:14px;}
.social-icon{width:24px;height:24px;}
.footer-logo-container{width:50px;max-width:50px;bottom:4px!important;}
}
/* 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-footer{height:84px;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;}
.contact-main{justify-content:center;overflow:auto;padding:4px 0 6px;}
.contact-grid{grid-template-columns:.72fr 1.28fr;gap:18px;align-items:start;}
.contact-grid h2{font-size:14px;margin-bottom:6px;}
.email-info-block{grid-template-columns:28px minmax(0,1fr);gap:6px;margin-bottom:5px;}
.email-launch{width:28px;height:28px;min-height:28px;}
.info-block svg{width:21px;height:21px;}
.email-address-button{font-size:11px;min-height:28px;}
.contact-main-clean .business-rule{width:34px;margin:6px 0 5px;}
.business-copy h3{font-size:12px;margin-bottom:2px;}
.business-copy p{font-size:10px;line-height:1.28;max-width:none;}
#contact-form{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;}
#contact-form .form-field{margin:0;min-width:0;}
#contact-form .form-field:nth-of-type(3),
#contact-form .form-field:nth-of-type(4),
#contact-form .submit-btn,
#contact-form .form-consent,
#contact-form .form-note{grid-column:1 / -1;}
.form-field label{font-size:9px;margin-bottom:1px;}
.form-field input,.form-field textarea{padding:5px 7px;font-size:11px;}
.form-field textarea{height:34px;min-height:34px;}
.submit-btn{min-height:30px;font-size:10px;}
.submit-btn span{font-size:15px;margin-left:6px;}
.form-consent{font-size:8px;line-height:1.15;margin-top:0;}
.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;}
.footer-inner{padding-top:8px;padding-bottom:2px;}
.footer-meta,.socials{bottom:9px;}
.footer-copy,.legal-links{font-size:5.7px;}
.legal-links{margin-top:4px;gap:5px;}
.socials{gap:13px;}
.social-icon{width:22px;height:22px;}
.footer-logo-container{width:46px;max-width:46px;bottom:4px!important;}
}
/* 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);}
.footer-meta,.socials{bottom:11px;}
}
/* 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;
}
/* Raise auxiliary footer information/icons only. Never alter the floating logo. */
.footer-meta,.socials{bottom:14px!important;}
.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;}
.contact-main{justify-content:center!important;padding:4px 0 5px!important;}
.contact-grid{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:clamp(6px,1.2dvh,12px)!important;
width:100%;
height:100%;
margin:0!important;
}
.contact-grid > div{width:100%;min-width:0;}
.contact-grid h2{font-size:clamp(12px,3.7vw,16px)!important;margin:0 0 4px!important;}
.email-info-block{grid-template-columns:24px minmax(0,1fr)!important;gap:6px!important;margin:0 0 3px!important;}
.email-launch{width:24px!important;height:24px!important;min-height:24px!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:3px 0!important;}
.business-copy h3{font-size:clamp(10px,3vw,13px)!important;margin:0 0 2px!important;}
.business-copy p{font-size:clamp(8px,2.55vw,11px)!important;line-height:1.22!important;max-width:none!important;}
#contact-form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px 6px!important;}
#contact-form .form-field{margin:0!important;min-width:0;}
#contact-form .form-field:nth-of-type(3),
#contact-form .form-field:nth-of-type(4),
#contact-form .submit-btn,
#contact-form .form-consent,
#contact-form .form-note{grid-column:1 / -1;}
.form-field label{font-size:9px!important;margin-bottom:1px!important;}
.form-field input,.form-field textarea{padding:5px 6px!important;font-size:11px!important;min-height:0!important;}
.form-field input{height:29px!important;}
.form-field textarea{height:38px!important;min-height:38px!important;resize:none!important;}
.submit-btn{height:31px!important;min-height:31px!important;font-size:9.5px!important;}
.submit-btn span{font-size:14px!important;margin-left:5px!important;}
.form-consent{font-size:7.5px!important;line-height:1.16!important;margin:0!important;}
.footer-inner{padding-top:8px!important;padding-bottom:4px!important;}
.footer-meta,.socials{bottom:12px!important;}
.footer-copy,.legal-links{font-size:clamp(5.7px,1.8vw,7px)!important;line-height:1.1!important;}
.legal-links{gap:5px!important;white-space:nowrap;}
.socials{gap:10px!important;}
.social-icon{width:20px!important;height:20px!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;}
.contact-grid{gap:4px!important;}
.business-copy p{font-size:7.5px!important;line-height:1.12!important;}
.form-field input{height:26px!important;}
.form-field textarea{height:31px!important;min-height:31px!important;}
.submit-btn{height:28px!important;min-height:28px!important;}
.form-consent{font-size:6.8px!important;}
.footer-meta,.socials{bottom:10px!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;}
.contact-main{justify-content:center!important;padding:2px 0 3px!important;}
.contact-grid{display:grid!important;grid-template-columns:.72fr 1.28fr!important;gap:14px!important;height:auto!important;}
.contact-grid h2{font-size:12px!important;margin:0 0 3px!important;}
.email-info-block{grid-template-columns:22px minmax(0,1fr)!important;gap:5px!important;margin:0 0 2px!important;}
.email-launch{width:22px!important;height:22px!important;min-height:22px!important;}
.info-block svg{width:17px!important;height:17px!important;}
.email-address-button{font-size:9.5px!important;min-height:22px!important;}
.contact-main-clean .business-rule{width:28px!important;height:1px!important;margin:3px 0!important;}
.business-copy h3{font-size:10px!important;margin:0 0 1px!important;}
.business-copy p{font-size:8px!important;line-height:1.16!important;max-width:none!important;}
#contact-form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px 5px!important;}
#contact-form .form-field{margin:0!important;}
#contact-form .form-field:nth-of-type(3),#contact-form .form-field:nth-of-type(4),
#contact-form .submit-btn,#contact-form .form-consent,#contact-form .form-note{grid-column:1/-1;}
.form-field label{font-size:8px!important;margin-bottom:1px!important;}
.form-field input,.form-field textarea{padding:3px 5px!important;font-size:9.5px!important;}
.form-field input{height:24px!important;}.form-field textarea{height:28px!important;min-height:28px!important;resize:none!important;}
.submit-btn{height:26px!important;min-height:26px!important;font-size:8.5px!important;}
.form-consent{font-size:6.7px!important;line-height:1.08!important;margin:0!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;}
.footer-inner{padding-top:5px!important;padding-bottom:2px!important;}
.footer-meta,.socials{bottom:9px!important;}
.footer-copy,.legal-links{font-size:5.4px!important;}
.legal-links{gap:4px!important;white-space:nowrap;}
.socials{gap:10px!important;}.social-icon{width:18px!important;height:18px!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;}
.about-reveal:not(.is-open):hover .culture-build{clip-path:revert!important;}
}
@media (prefers-reduced-motion:reduce){
.footer-fade-content{transition:none!important;}
}