/* ========================================================= Satera Tuning — shared site styles Design: approved homepage preview 3 (near-black, bright neon #00FF00 accent, sparing neon accent, Barlow Condensed + Inter) ========================================================= */ /* ---------- Fonts (self-hosted) ---------- */ @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/BarlowCondensed-500.woff2) format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700i.woff2) format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/BarlowCondensed-800.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Inter-var.woff2) format('woff2')} /* ---------- Tokens ---------- */ :root{ --bg:#070807; --bg-2:#0c0e0c; --bg-3:#121512; --panel:#0f120f; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --text:#f2f4ef; --muted:#a3aba0; --dim:#858d83; --green:#00FF00; --green-2:#00D600; --neon:#00FF00; /* primary = live sateratuning.com header neon (sampled); hover = live button gradient base */ --display:'Barlow Condensed','Arial Narrow','Roboto Condensed','Helvetica Neue Condensed',Impact,sans-serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --wrap:1280px; --pad:clamp(20px,4vw,56px); --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--green)} .eyebrow::before{content:"";width:34px;height:2px;background:var(--green)} h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0;font-weight:800} h2{font-size:clamp(44px,5.6vw,84px)} h3{font-size:30px;font-weight:700} .lead{color:var(--muted);font-size:18px;max-width:60ch} .g{color:var(--green)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- Accessibility ---------- */ .skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--green);color:#07120a;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;transition:top .2s} .skip-link:focus{top:12px} :focus{outline:none} :focus-visible{outline:2px solid var(--green);outline-offset:3px} .btn:focus-visible{outline-offset:4px} main:focus{outline:none} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)} .btn svg{width:18px;height:18px;flex:none} .btn-primary{background:var(--green);color:#07120a} .btn-primary:hover{background:var(--green-2);box-shadow:0 10px 40px -10px rgba(0,255,0,.6);transform:translateY(-2px)} .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)} .btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)} .link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)} .link-arrow span{transition:transform .3s var(--ease)} .link-arrow:hover span{transform:translateX(6px)} .link-arrow.sm{font-size:15px;margin-left:6px} /* ---------- NAV ---------- */ .nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;border-bottom:1px solid transparent} .nav.scrolled,.nav.menu-open{background:rgba(7,8,7,.92);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)} .nav-inner{max-width:1440px;margin:0 auto;padding:0 var(--pad);height:76px;display:flex;align-items:center;gap:32px} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand img{width:52px;height:52px;border-radius:6px;box-shadow:0 0 0 1px rgba(0,255,0,.25),0 0 22px -6px rgba(0,255,0,.45)} .brand b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.14em;line-height:1} .brand small{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.42em;color:var(--green);margin-top:3px} .menu{display:flex;align-items:center;gap:30px;margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0} .menu a{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#d9ddd5;position:relative;padding:6px 0;transition:color .25s} .menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .menu a:hover,.menu a[aria-current="page"]{color:#fff} .menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)} .menu .beta{font-size:10px;letter-spacing:.12em;color:#07120a;background:var(--neon);padding:2px 5px;margin-left:6px;vertical-align:2px;border-radius:2px} .menu .menu-store{display:none} .nav-cta{display:flex;align-items:center;gap:12px;flex:none} .nav-store{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#d9ddd5;padding:9px 14px;border:1px solid var(--line-2);transition:border-color .25s,color .25s} .nav-store:hover{border-color:var(--green);color:var(--green)} .nav-call{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.12em;background:var(--green);color:#07120a;padding:10px 16px;transition:background .25s} .nav-call:hover{background:var(--green-2)} .nav-call svg{width:15px;height:15px} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);width:44px;height:44px;color:#fff;cursor:pointer;padding:0} .burger .i-close{display:none} .burger[aria-expanded="true"] .i-open{display:none} .burger[aria-expanded="true"] .i-close{display:block} /* ---------- HOME HERO ---------- */ .hero{position:relative;min-height:max(760px,100vh);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .hero-media{position:absolute;inset:0;z-index:-2} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 55%;transform:scale(1.06);animation:heroZoom 14s var(--ease) forwards;filter:saturate(.9) contrast(1.08) brightness(.9)} @keyframes heroZoom{to{transform:scale(1)}} .hero::before{content:"";position:absolute;inset:0;z-index:-1;background: linear-gradient(90deg,rgba(7,8,7,.96) 0%,rgba(7,8,7,.86) 30%,rgba(7,8,7,.35) 62%,rgba(7,8,7,.15) 100%), linear-gradient(0deg,var(--bg) 0%,rgba(7,8,7,.0) 38%), linear-gradient(180deg,rgba(7,8,7,.75) 0%,rgba(7,8,7,0) 22%)} .hero::after{content:"";position:absolute;left:0;bottom:0;width:46%;height:3px;background:linear-gradient(90deg,var(--green),rgba(0,255,0,0));z-index:1} .hero-inner{width:100%;max-width:1440px;margin:0 auto;padding:120px var(--pad) 150px} .hero h1{font-size:clamp(56px,min(8.6vw,13.5vh),140px);line-height:.86;margin:20px 0 26px;max-width:9.5ch} .hero h1 em{font-style:italic;color:var(--green);text-shadow:0 0 40px rgba(0,255,0,.25)} .hero .lead{font-size:clamp(17px,1.35vw,20px);color:#c9cfc5;max-width:44ch;margin:0 0 36px} .hero-ctas{display:flex;flex-wrap:wrap;gap:14px} .hero-platforms{display:flex;gap:10px;margin-top:40px;flex-wrap:wrap} .chip{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#dfe4da;padding:8px 14px;border:1px solid var(--line-2);background:rgba(7,8,7,.45);backdrop-filter:blur(6px)} .chip i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:10px;vertical-align:2px;box-shadow:0 0 10px var(--neon)} a.chip{transition:border-color .25s,color .25s} a.chip:hover{border-color:var(--green);color:#fff} .hero-latest{position:absolute;right:var(--pad);bottom:150px;display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;background:rgba(7,8,7,.55);border:1px solid var(--line-2);backdrop-filter:blur(10px);max-width:340px;transition:border-color .3s} .hero-latest:hover{border-color:var(--green)} .hero-latest .play{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--green);color:#07120a;clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)} .hero-latest small{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.26em;color:var(--green);text-transform:uppercase} .hero-latest b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1} .scroll-cue{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);width:1px;height:46px;background:linear-gradient(var(--green),transparent);opacity:.7} /* ---------- INNER PAGE HERO ---------- */ .page-hero{position:relative;min-height:clamp(460px,64vh,640px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .page-hero .ph-media{position:absolute;inset:0;z-index:-2} .page-hero .ph-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:saturate(.9) contrast(1.06) brightness(.85)} .page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background: linear-gradient(90deg,rgba(7,8,7,.96) 0%,rgba(7,8,7,.82) 38%,rgba(7,8,7,.35) 75%,rgba(7,8,7,.2) 100%), linear-gradient(0deg,var(--bg) 0%,rgba(7,8,7,0) 45%), linear-gradient(180deg,rgba(7,8,7,.8) 0%,rgba(7,8,7,0) 26%)} .page-hero::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:3px;background:linear-gradient(90deg,var(--green),rgba(0,255,0,0))} .page-hero .ph-inner{width:100%;max-width:1440px;margin:0 auto;padding:140px var(--pad) 72px} .page-hero h1{font-size:clamp(52px,7.2vw,116px);line-height:.88;margin:18px 0 22px;max-width:14ch} .page-hero .lead{color:#c9cfc5;font-size:clamp(17px,1.3vw,19px);max-width:56ch;margin:0} .page-hero.compact{min-height:0} .page-hero.has-stats .ph-inner{padding-bottom:150px} .page-hero.compact::before{background:radial-gradient(90% 120% at 85% 0%,rgba(0,255,0,.10),transparent 60%),linear-gradient(180deg,var(--bg-2),var(--bg))} .page-hero.compact .ph-inner{padding:150px var(--pad) 64px} .page-hero.compact h1{font-size:clamp(46px,6vw,96px);max-width:none} .crumbs{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .crumbs li+li::before{content:"/";margin-right:10px;color:var(--line-2)} .crumbs a{color:#c3c9bf}.crumbs a:hover{color:var(--green)} .crumbs [aria-current]{color:var(--green)} .ph-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} /* jump links */ .jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px} .jump a{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#dfe4da;padding:9px 14px;border:1px solid var(--line-2);background:rgba(7,8,7,.45);transition:border-color .25s,color .25s} .jump a:hover{border-color:var(--green);color:var(--green)} /* ---------- STATS ---------- */ .stats{position:relative;z-index:3;margin-top:-92px} .stats.flat{margin-top:0} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(15,18,15,.92);border:1px solid var(--line);backdrop-filter:blur(12px)} .stat{padding:30px 32px;border-right:1px solid var(--line);position:relative} .stat:last-child{border-right:0} .stat::before{content:"";position:absolute;left:32px;top:0;width:28px;height:2px;background:var(--green)} .stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(46px,4.6vw,64px);line-height:1;letter-spacing:.01em} .stat b sup{font-size:.5em;color:var(--green);vertical-align:.7em;margin-left:2px} .stat span{display:block;margin-top:8px;font-size:14px;color:var(--muted);line-height:1.45;max-width:24ch} section{position:relative} .section{padding:clamp(90px,10vw,150px) 0} .section.tight{padding:clamp(64px,7vw,100px) 0} .section.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px;flex-wrap:wrap} .section-head h2{margin-top:18px} .section-head p{margin:0} /* ---------- PLATFORMS ---------- */ .platforms{padding-top:clamp(90px,9vw,130px)} .pillars{display:grid;grid-template-columns:1fr 1fr;gap:20px} .pillar{position:relative;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate;border:1px solid var(--line);background:var(--panel)} .pillar-media{position:absolute;inset:0;z-index:-2} .pillar-media img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:brightness(.78) contrast(1.08);transition:transform 1.2s var(--ease),filter .6s} .pillar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,8,7,.98) 0%,rgba(7,8,7,.88) 42%,rgba(7,8,7,.35) 78%,rgba(7,8,7,.2) 100%)} .pillar:hover .pillar-media img{transform:scale(1.05)} .pillar-body{padding:44px;width:100%} .pillar .tag{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.3em;color:var(--green);text-transform:uppercase} .pillar h3{font-size:clamp(52px,5.4vw,80px);font-weight:800;margin:10px 0 6px;line-height:.9} .pillar .sub{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:#d7dcd2;margin-bottom:16px} .pillar p{color:var(--muted);max-width:50ch;margin:0 0 26px} .pillar-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none} .pillar-list li{font-size:13px;font-weight:500;color:#dfe4da;padding:6px 12px;border:1px solid var(--line-2);background:rgba(7,8,7,.5)} /* ---------- ABOUT (home + about page) ---------- */ .about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} .about-media{position:relative;padding:0 0 70px 0} .about-media .main{aspect-ratio:4/3.1;object-fit:cover;width:88%;border:1px solid var(--line)} .about-media .inset{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:4/3;object-fit:cover;border:6px solid var(--bg);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)} .about-media .badge{position:absolute;left:-14px;top:30px;background:var(--green);color:#07120a;font-family:var(--display);font-weight:800;text-transform:uppercase;padding:16px 20px;line-height:.95;font-size:15px;letter-spacing:.14em} .about-media .badge b{display:block;font-size:46px;letter-spacing:0} .about-copy h2{margin:18px 0 28px} .about-copy p{color:var(--muted);margin:0 0 18px;font-size:17px} .about-copy p strong{color:var(--text);font-weight:600} .about-copy .more{margin-top:28px} .checks{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px} .checks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#dde2d8;font-weight:500;line-height:1.4} .checks svg{width:18px;height:18px;flex:none;color:var(--green);margin-top:1px} .checks.one{grid-template-columns:1fr} /* ---------- SERVICES GRID (home) ---------- */ .services{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .svc{position:relative;aspect-ratio:4/4.6;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;border:1px solid var(--line);background:var(--panel)} .svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease),filter .6s;filter:saturate(.85) brightness(.85)} .svc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,8,7,.97) 8%,rgba(7,8,7,.55) 50%,rgba(7,8,7,.05) 100%);transition:background .5s} .svc::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--green);transition:width .5s var(--ease)} .svc:hover img{transform:scale(1.06);filter:saturate(1) brightness(.95)} .svc:hover::after{width:100%} .svc-body{padding:32px} .svc .num{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.24em;color:var(--green)} .svc h3{font-size:clamp(34px,3vw,44px);margin:8px 0 12px} .svc p{margin:0;color:#b9c0b5;font-size:15px;line-height:1.55;max-width:38ch} .svc .appt{position:absolute;top:20px;left:20px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;background:var(--green);color:#07120a;padding:6px 10px} .svc-more{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 32px;border:1px solid var(--line);background:var(--bg-3)} .svc-more p{margin:0;color:var(--muted)} .svc-more p b{color:var(--text);font-family:var(--display);font-size:22px;letter-spacing:.08em;text-transform:uppercase;margin-right:14px;font-weight:700} /* ---------- SERVICE DETAIL (services page) ---------- */ .platform-head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end;margin-bottom:64px;padding-bottom:28px;border-bottom:1px solid var(--line)} .platform-head .pnum{font-family:var(--display);font-weight:800;font-size:clamp(80px,10vw,150px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(0,255,0,.5)} .platform-head h2{margin:14px 0 0} .platform-head p{margin:14px 0 0} .detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--line)} .detail:last-of-type{border-bottom:0} .detail.rev .detail-media{order:2} .detail-media{position:relative} .detail-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);filter:saturate(.92) contrast(1.04)} .detail-media::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:3px;background:var(--green)} .detail-media .appt{position:absolute;top:18px;left:18px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;background:var(--green);color:#07120a;padding:6px 10px} .detail .num{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.24em;color:var(--green)} .detail h3{font-size:clamp(40px,4.2vw,62px);font-weight:800;margin:10px 0 18px} .detail p{color:var(--muted);font-size:17px;margin:0 0 16px;max-width:58ch} .detail p strong{color:var(--text);font-weight:600} .detail .checks{margin:22px 0 26px} .detail .actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:24px} .steps{list-style:none;counter-reset:s;margin:22px 0 0;padding:0;display:grid;gap:10px} .steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;color:#dde2d8;font-size:15px;line-height:1.45} .steps li::before{content:counter(s,decimal-leading-zero);flex:none;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;color:#07120a;background:var(--green);width:30px;height:24px;display:grid;place-items:center;margin-top:-1px} .detail .sub-h,.sub-h{margin:28px 0 0;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin:26px 0 0} .tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;padding:0;list-style:none} .tags li{font-size:13px;font-weight:500;color:#dfe4da;padding:6px 12px;border:1px solid var(--line-2);background:var(--bg-3)} /* Ford band */ .ford-band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(100px,11vw,160px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ford-band .bg{position:absolute;inset:0;z-index:-2} .ford-band .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:brightness(.7) saturate(.85)} .ford-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,8,7,.97) 0%,rgba(7,8,7,.88) 48%,rgba(7,8,7,.45) 100%),linear-gradient(0deg,rgba(7,8,7,.9),rgba(7,8,7,0) 40%)} .ford-band .platform-head{border-bottom-color:var(--line-2)} .mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px} .mini{padding:30px;border:1px solid var(--line-2);background:rgba(7,8,7,.7);backdrop-filter:blur(8px);position:relative} .mini::before{content:"";position:absolute;left:30px;top:0;width:28px;height:2px;background:var(--green)} .mini h3{font-size:30px;margin:0 0 10px} .mini p{margin:0;color:var(--muted);font-size:15px} .ford-band .actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap} /* CTA band */ .cta-band{border:1px solid var(--line);background:linear-gradient(120deg,var(--bg-3),var(--bg-2));padding:clamp(32px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)} .cta-band h2{font-size:clamp(36px,4vw,60px)} .cta-band p{margin:12px 0 0;color:var(--muted);max-width:56ch} .cta-band .actions{display:flex;gap:12px;flex-wrap:wrap} .note{font-size:14px;color:var(--muted);margin-top:22px} .note a{color:var(--green);text-decoration:underline;text-underline-offset:3px} /* ---------- PHILOSOPHY ---------- */ .philosophy{position:relative;overflow:hidden;isolation:isolate;padding:clamp(120px,13vw,190px) 0} .philosophy .bg{position:absolute;inset:0;z-index:-2} .philosophy .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:grayscale(.25) brightness(.8)} .philosophy::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg-2) 0%,rgba(12,14,12,0) 22%,rgba(7,8,7,0) 78%,var(--bg) 100%),linear-gradient(90deg,rgba(7,8,7,.95) 0%,rgba(7,8,7,.86) 45%,rgba(7,8,7,.4) 100%)} .quote-mark{font-family:Georgia,serif;font-size:160px;line-height:.6;color:var(--green);height:60px;display:block;opacity:.9} .philosophy h2{font-size:clamp(46px,5.4vw,82px);max-width:13ch;margin:26px 0 30px} .philosophy blockquote{margin:0;max-width:64ch;color:#cdd3c9;font-size:clamp(17px,1.35vw,20px);line-height:1.7;border-left:2px solid var(--green);padding-left:28px} .philosophy blockquote p{margin:0} .philosophy cite{display:block;margin-top:26px;font-style:normal;font-family:var(--display);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green);font-size:15px} /* ---------- BUILDS ---------- */ .builds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .build{position:relative;overflow:hidden;aspect-ratio:16/11;display:block;isolation:isolate;border:1px solid var(--line);background:var(--panel);margin:0} .build:nth-child(1),.build:nth-child(6){grid-column:span 2;aspect-ratio:auto} .build img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease),filter .5s;filter:brightness(.8) saturate(.9)} .build::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,8,7,.9) 0%,rgba(7,8,7,0) 55%)} .build:hover img,.build:focus-within img{transform:scale(1.06);filter:brightness(.95) saturate(1)} .build .cap{position:absolute;left:20px;right:20px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .build b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase;line-height:1} .build small{display:block;font-family:var(--display);font-size:12px;letter-spacing:.24em;color:var(--green);text-transform:uppercase;margin-bottom:6px;font-weight:600} .build .pl{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);transition:background .3s,border-color .3s,color .3s} .build:hover .pl,.build:focus-within .pl{background:var(--green);border-color:var(--green);color:#07120a} /* Feature builds (about page) */ .features{display:grid;grid-template-columns:1fr 1fr;gap:20px} .feature{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column} .feature img{width:100%;aspect-ratio:16/9;object-fit:cover} .feature .fb{padding:32px 34px 36px;position:relative} .feature .fb::before{content:"";position:absolute;left:34px;top:0;width:28px;height:2px;background:var(--green)} .feature small{display:block;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.26em;color:var(--green);text-transform:uppercase} .feature h3{font-size:clamp(34px,3.2vw,48px);margin:8px 0 14px} .feature p{margin:0;color:var(--muted)} /* ---------- CONTACT ---------- */ .contact{background:var(--bg-2);border-top:1px solid var(--line)} .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,5vw,80px);align-items:stretch} .contact h2{margin:18px 0 22px} .info{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:36px 0 32px} .info > div{background:var(--bg-2);padding:24px} .info .full{grid-column:1/-1} .info small,.label-sm{display:block;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.26em;color:var(--green);text-transform:uppercase;margin-bottom:8px} .info a,.info address{font-style:normal;color:#e6eae2;font-size:16px;line-height:1.5} .info a:hover{color:var(--green)} .hours{list-style:none;padding:0;margin:0;font-size:15px} .hours li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:#d9ddd5} .hours li span:last-child{color:var(--muted)} .hours.full li{padding:9px 0;border-bottom:1px solid var(--line)} .hours.full li:last-child{border-bottom:0} .contact-ctas{display:flex;gap:12px;flex-wrap:wrap} .visit-card{position:relative;overflow:hidden;min-height:560px;isolation:isolate;display:flex;align-items:flex-end;border:1px solid var(--line)} .visit-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .visit-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,8,7,.95) 0%,rgba(7,8,7,.2) 60%)} .visit-card .vc{padding:36px;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .visit-card h3{font-size:44px;line-height:.92} .visit-card p{margin:10px 0 0;color:#c9cfc5;max-width:34ch} .visit-card.short{min-height:380px} .dir-links{display:flex;flex-direction:column;gap:12px} /* Contact page */ .cp-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,5vw,72px);align-items:start} .panel{border:1px solid var(--line);background:var(--bg-2);padding:clamp(26px,3vw,40px)} .panel h2{font-size:clamp(36px,3.6vw,52px);margin:14px 0 10px} .panel > p{color:var(--muted);margin:0 0 26px} .panel > p a{color:var(--green)} .cp-info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .cp-info > div{background:var(--bg-2);padding:22px 24px} .cp-info a,.cp-info address{font-style:normal;color:#e6eae2;font-size:17px;line-height:1.5} .cp-info a:hover{color:var(--green)} .cp-info .big{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.06em} .social{display:flex;gap:10px;flex-wrap:wrap} .social a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-2);color:#dfe4da;transition:all .3s} .social a:hover{border-color:var(--green);color:#07120a;background:var(--green)} .social svg{width:18px;height:18px} .social.labeled a{width:auto;padding:0 14px;gap:10px;display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase} /* Form */ .form{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} .field label{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#d9ddd5} .field label .req{color:var(--green)} .field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line-2);padding:13px 14px;border-radius:0;transition:border-color .2s,box-shadow .2s;width:100%} .field textarea{min-height:150px;resize:vertical} .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,255,0,.25);outline:none} .field input::placeholder,.field textarea::placeholder{color:#737a71} .form .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center} .form-status{grid-column:1/-1;margin:0;padding:16px 18px;border:1px solid var(--green);background:rgba(0,255,0,.08);color:#e6eae2;font-size:15px} .form-status[hidden]{display:none} .form-status a{color:var(--green);text-decoration:underline;text-underline-offset:3px} .form-fine{grid-column:1/-1;margin:0;font-size:13px;color:var(--dim)} .form-fine a{color:#c3c9bf;text-decoration:underline;text-underline-offset:3px} /* ---------- LEGAL / PROSE ---------- */ .legal-grid{display:grid;grid-template-columns:260px 1fr;gap:clamp(36px,5vw,80px);align-items:start} .toc{position:sticky;top:100px;border:1px solid var(--line);background:var(--bg-2);padding:24px} .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:t} .toc li{counter-increment:t} .toc a{display:flex;gap:10px;padding:8px 0;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#c3c9bf;border-bottom:1px solid var(--line);transition:color .2s} .toc li:last-child a{border-bottom:0} .toc a::before{content:counter(t,decimal-leading-zero);color:var(--green)} .toc a:hover{color:#fff} .prose{max-width:78ch;color:#cdd3c9;font-size:16.5px;line-height:1.75} .prose > section{padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line)} .prose > section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .prose h2{font-size:clamp(38px,4vw,58px);color:var(--text);margin:0 0 26px} .prose h3{font-size:22px;letter-spacing:.12em;color:var(--green);margin:34px 0 10px;line-height:1.1} .prose p{margin:0 0 14px} .prose strong{color:var(--text);font-weight:600} .prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px} .prose .intro{font-size:18px;color:var(--text);border-left:2px solid var(--green);padding-left:20px;margin:0 0 10px} .prose .callout{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:18px 0} .rates{display:grid;gap:18px} .rate-block{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0} .rate-block > .rate,.rate{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;background:var(--bg-2);padding:20px 24px} .rate dt{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);line-height:1.15} .rate dd{margin:0;text-align:right;color:var(--muted);font-size:15px} .rate dd .amt{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.02em;color:var(--green);line-height:1.1;margin-right:4px} .rate dd span.ln{display:block} .rate-group{background:var(--bg-2);padding:18px 24px 6px} .rate-block dl{margin:0;display:grid;gap:1px} .rate-group h3{margin:0;font-size:16px;letter-spacing:.26em} .address-block{border:1px solid var(--line);background:var(--bg-2);padding:22px 24px;margin-top:20px;font-style:normal} /* ---------- 404 ---------- */ .nf{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate} .nf .bg{position:absolute;inset:0;z-index:-2} .nf .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.8)} .nf::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,8,7,.97) 0%,rgba(7,8,7,.85) 50%,rgba(7,8,7,.5) 100%)} .nf .code{font-family:var(--display);font-weight:800;font-size:clamp(120px,20vw,280px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(0,255,0,.6);display:block} .nf h1{font-size:clamp(46px,6vw,90px);margin:18px 0 18px} .nf .wrap{padding-top:120px;padding-bottom:80px;width:100%} .nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} /* ---------- FOOTER ---------- */ footer{background:#040504;border-top:1px solid var(--line);padding:80px 0 30px} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px} .f-brand img{width:84px;height:84px;border-radius:8px;margin-bottom:20px;box-shadow:0 0 0 1px rgba(0,255,0,.25)} .f-brand p{color:var(--muted);font-size:15px;max-width:34ch;margin:0 0 22px} .f-brand .tag{font-family:var(--display);font-weight:700;font-style:italic;font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:10px;max-width:none} .f-h{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--green);margin:6px 0 18px} footer ul{list-style:none;margin:0;padding:0} footer li{margin:0 0 10px;font-size:15px;color:#c3c9bf} footer li a:hover{color:var(--green)} footer li.muted{color:var(--muted)} footer address{font-style:normal} .f-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--dim);font-size:13px} .f-bottom a{color:#c3c9bf}.f-bottom a:hover{color:var(--green)} .f-bottom nav{display:flex;gap:18px;flex-wrap:wrap} /* ---------- Motion ---------- */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .js .reveal.in{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .js .reveal{opacity:1;transform:none} .hero-media img{transform:none} } /* ---------- Responsive ---------- */ @media (max-width:1180px){ .menu{gap:20px}.menu a{font-size:14px}.nav-store{display:none} .menu .menu-store{display:list-item} .hero-latest{display:none} } @media (max-width:980px){ .menu{display:none} .burger{display:grid;place-items:center} .nav-cta{margin-left:auto} .burger{margin-left:0} .menu.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#070807;border-bottom:1px solid var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);padding:10px var(--pad) 20px;max-height:calc(100vh - 76px);overflow-y:auto} .menu.open li{width:100%;border-bottom:1px solid var(--line)} .menu.open a{display:block;padding:14px 0;font-size:18px} .menu.open a::after{display:none} .menu.open a[aria-current="page"]{color:var(--green)} .stats-grid{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)} .pillars,.about-grid,.contact-grid,.cp-grid,.features{grid-template-columns:1fr} .svc-grid{grid-template-columns:1fr 1fr} .builds-grid{grid-template-columns:1fr 1fr} .build:nth-child(1),.build:nth-child(6){grid-column:span 2;aspect-ratio:16/9} .f-grid{grid-template-columns:1fr 1fr} .detail{grid-template-columns:1fr} .detail.rev .detail-media{order:0} .mini-cards{grid-template-columns:1fr} .legal-grid{grid-template-columns:1fr} .toc{position:static} } @media (max-width:620px){ .nav-call span{display:none} .brand b{font-size:18px} .nav-inner{gap:14px} .hero-inner{padding-bottom:130px} .hero::before{background:linear-gradient(0deg,var(--bg) 6%,rgba(7,8,7,.65) 55%,rgba(7,8,7,.55) 100%)} .page-hero::before{background:linear-gradient(0deg,var(--bg) 4%,rgba(7,8,7,.72) 55%,rgba(7,8,7,.6) 100%)} .page-hero .ph-inner{padding-top:120px;padding-bottom:56px} .btn{width:100%;justify-content:center} .svc-grid,.builds-grid,.checks,.info,.f-grid,.form{grid-template-columns:1fr} .build:nth-child(1),.build:nth-child(6){grid-column:auto} .stat{padding:24px 20px}.stat::before{left:20px} .pillar{min-height:520px}.pillar-body{padding:28px} .scroll-cue{display:none} .platform-head{grid-template-columns:1fr;gap:6px} .rate{grid-template-columns:1fr} .rate dd{text-align:left} .cp-info .big{font-size:26px} } /* nav wrapper (semantic