@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-ExtraBold.woff") format("woff");font-weight:800;font-style:normal}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff") format("woff");font-weight:400;font-style:normal}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff") format("woff");font-weight:600;font-style:normal}
body{margin:0;background:#f7f5f0}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
section{scroll-margin-top:76px}
a{color:#c4361a}a:hover{color:#14213d}
:focus-visible{outline:3px solid #ff5a36;outline-offset:2px}
.fc-d{font-family:"Inter Display",Inter,system-ui,sans-serif;font-weight:800}

/* scroll paint bar and sticky header */
.fc-progress{position:fixed;top:0;left:0;right:0;height:5px;background:#ff5a36;transform:scaleX(0);transform-origin:left;z-index:40}
.fc-head{position:sticky;top:0;z-index:30;background:#f7f5f0;padding:16px clamp(20px,5vw,64px);border-bottom:1px solid transparent;transition:padding .25s,border-color .25s}
.fc-head[data-scrolled]{padding-top:8px;padding-bottom:8px;border-color:#e2ddd3}
.fc-nav{position:relative;color:#14213d;font-weight:600;font-size:15px;text-decoration:none;padding:10px 0}
.fc-nav::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;border-radius:2px;background:#ff5a36;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.fc-nav:hover::after,.fc-nav[data-active]::after{transform:scaleX(1)}

/* buttons: paint wipes across on hover */
.fc-btn{display:inline-block;cursor:pointer;background-size:202% 100%;background-position:100% 0;transition:transform .18s,color .28s,background-position .32s,border-color .28s}
.fc-btn:hover{transform:translateY(-2px);background-position:0 0}
.fc-btn:active{transform:scale(.97)}
.fc-primary{background-color:#ff5a36;background-image:linear-gradient(90deg,#14213d 50%,#ff5a36 50%);color:#14213d;border:1.5px solid #ff5a36}
.fc-primary:hover{color:#ffffff;border-color:#14213d}
.fc-ghost{background-image:linear-gradient(90deg,#14213d 50%,transparent 50%);color:#14213d;border:1.5px solid #14213d}
.fc-ghost:hover{color:#ffffff}
.fc-onnavy{background-image:linear-gradient(90deg,#ffffff 50%,#ff5a36 50%)}
.fc-onnavy:hover{color:#14213d;border-color:#ffffff}

/* hero entrance */
.fc-w{display:inline-block;animation:fc-rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.fc-w:nth-child(2){animation-delay:.07s}.fc-w:nth-child(3){animation-delay:.14s}.fc-w:nth-child(4){animation-delay:.21s}.fc-w:nth-child(5){animation-delay:.28s}.fc-w:nth-child(6){animation-delay:.35s}
.fc-enter{animation:fc-rise .7s .4s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fc-rise{from{opacity:.25;transform:translateY(.5em)}to{opacity:1;transform:none}}
.fc-ticker{display:inline-block;height:1.3em;overflow:hidden;vertical-align:bottom}
.fc-tick{display:block;animation:fc-tick 15s cubic-bezier(.7,0,.3,1) infinite}
.fc-tick span{display:block;height:1.3em}
@keyframes fc-tick{0%,15%{transform:translateY(0)}20%,35%{transform:translateY(-16.666%)}40%,55%{transform:translateY(-33.333%)}60%,75%{transform:translateY(-50%)}80%,95%{transform:translateY(-66.666%)}100%{transform:translateY(-83.333%)}}

/* before and after */
.fc-after{clip-path:inset(0 38% 0 0)}
.fc-handle{position:absolute;top:0;bottom:0;left:62%;width:4px;margin-left:-2px;background:#ff5a36;pointer-events:none}
.fc-grip{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#ff5a36;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.fc-grip::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #ff5a36;animation:fc-ping 2.4s ease-out infinite}
.fc-compare[data-touched] .fc-grip::after{animation:none;opacity:0}
.fc-compare:hover .fc-grip{transform:scale(1.1)}
@keyframes fc-ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.7);opacity:0}}
.fc-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.fc-range:focus-visible~.fc-handle .fc-grip{outline:3px solid #ffffff;outline-offset:2px}
.fc-drip{pointer-events:none;transform-origin:top;animation:fc-drip 1.5s .3s cubic-bezier(.2,.8,.2,1) backwards}
.fc-drip2{animation-delay:.6s}.fc-drip3{animation-delay:.45s}.fc-drip4{animation-delay:.8s}
@keyframes fc-drip{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fc-drop{pointer-events:none;opacity:0;animation:fc-drop 7s 3s ease-in infinite}
@keyframes fc-drop{0%,76%{opacity:0;transform:translateY(0) scale(.4)}82%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(240px) scale(1)}}

/* town strip */
.fc-marquee{overflow:hidden;border-top:1px solid #e2ddd3;border-bottom:1px solid #e2ddd3;padding:14px 0}
.fc-track{display:flex;width:max-content;animation:fc-mq 44s linear infinite}
.fc-marquee:hover .fc-track{animation-play-state:paused}
@keyframes fc-mq{to{transform:translateX(-50%)}}

/* scroll reveals: the page is complete without them */
[data-wait]{opacity:.3;transform:translateY(28px)}
[data-in]{animation:fc-up .7s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fc-up{from{opacity:.3;transform:translateY(28px)}to{opacity:1;transform:none}}
.fc-stagger>:nth-child(2){animation-delay:.09s}.fc-stagger>:nth-child(3){animation-delay:.18s}.fc-stagger>:nth-child(4){animation-delay:.27s}.fc-stagger>:nth-child(5){animation-delay:.36s}

.fc-swipe{display:inline-block;padding:0 .14em;margin:0 -.08em;border-radius:8px;background-image:linear-gradient(#ff5a36,#ff5a36);background-repeat:no-repeat;background-size:0 100%;transition:background-size .7s .35s cubic-bezier(.7,0,.2,1),color .3s .6s}
[data-in] .fc-swipe{background-size:100% 100%;color:#14213d}
.fc-prob{position:relative;padding-top:14px;border-top:2px solid #24396b;transition:transform .25s}
.fc-prob::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#ff5a36;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.fc-prob:hover{transform:translateY(-4px)}
.fc-prob:hover::before{transform:scaleX(1)}

/* portfolio: the frame tilts and the site scrolls by itself */
.fc-card{display:flex;flex-direction:column;gap:14px;color:#14213d;text-decoration:none;min-width:0}
.fc-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.fc-shot{object-position:50% 0;transition:object-position 5s cubic-bezier(.45,0,.55,1)}
.fc-card:hover .fc-shot,.fc-card:focus-visible .fc-shot{object-position:50% 100%}
.fc-arrow{display:inline-block;transition:transform .2s}
.fc-card:hover .fc-arrow{transform:translateX(5px)}
@media (hover:none){.fc-card[data-in] .fc-shot{object-position:50% 100%;transition-delay:.8s}}

/* pricing */
.fc-fork{position:relative;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#f7f5f0;border:1.5px solid #14213d;border-radius:14px;padding:4px;max-width:100%}
.fc-pill{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);background:#14213d;border-radius:10px;transition:left .32s cubic-bezier(.3,1.3,.5,1)}
.fc-forkbtn{position:relative;font:inherit;font-weight:600;font-size:16px;background:none;border:0;border-radius:10px;padding:12px 22px;cursor:pointer;color:#14213d;transition:color .25s}
.fc-forkbtn.on{color:#ffffff}
.fc-lift{transition:transform .25s,border-color .25s}
.fc-lift:hover{transform:translateY(-6px);border-color:#14213d}
.fc-swap>*{animation:fc-rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.fc-cards>*{animation:fc-rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.fc-cards>:nth-child(2){animation-delay:.08s}.fc-cards>:nth-child(3){animation-delay:.16s}
.fc-chip{font:inherit;font-size:15px;font-weight:600;background:#ffffff;color:#14213d;border:1.5px solid #e2ddd3;border-radius:999px;padding:9px 15px;cursor:pointer;transition:transform .15s,background-color .2s,color .2s,border-color .2s}
.fc-chip:hover{border-color:#14213d;transform:translateY(-1px)}
.fc-chip:active{transform:scale(.96)}
.fc-chip.on{background:#14213d;border-color:#14213d;color:#ffffff}

/* how it works */
.fc-step{position:relative;border-top:2px solid #e2ddd3;padding-top:14px}
.fc-step::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#ff5a36;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.fc-step[data-in]::before{transform:scaleX(1)}
.fc-step:nth-child(2)::before{transition-delay:.25s}.fc-step:nth-child(3)::before{transition-delay:.5s}.fc-step:nth-child(4)::before{transition-delay:.75s}.fc-step:nth-child(5)::before{transition-delay:1s}

/* form */
.fc-input{transition:border-color .2s,box-shadow .2s}
.fc-input:hover{border-color:#14213d}
.fc-input:focus{outline:none;border-color:#ff5a36;box-shadow:0 0 0 3px #ffd166}
.fc-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#fc-form{position:relative}
#fc-form button[disabled]{opacity:.6;cursor:wait}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.fc-progress{display:none}
.fc-drop{display:none}
}

/* phones: one compact header row */
@media (max-width:640px){
.fc-nav{display:none}
.fc-head nav{flex-wrap:nowrap!important}
.fc-head img{width:150px!important;height:auto!important}
}
