:root{ --bg:#0a0a0a; --bg2:#0d0d0c; --panel:#101010; --field:#141413; --line:#1e1e1c; --line2:#2b2b27; --edge:#3a3a34; --gold-line:#33321f; --yellow:#e8dc16; --text:#f2f2f0; --muted:#96968f; --dim:#8b8b84; --faint:#6e6e68; --sans:'Barlow',system-ui,-apple-system,sans-serif; --head:'Oswald',Impact,sans-serif; --wrap:1180px; --pad:clamp(56px,8vw,96px) clamp(18px,4vw,24px); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg)} html{overflow-x:hidden} body{font-family:var(--sans);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:78px} img{display:block} a{color:var(--yellow);text-decoration:none} a:hover{color:#fff} ::placeholder{color:var(--faint)} button,input,select,textarea{font-family:var(--sans)} .wrap{max-width:var(--wrap);margin:0 auto} h1,h2,h3{font-family:var(--head);text-transform:uppercase;margin:0} .eyebrow{font-family:var(--head);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px} @keyframes gkfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* logo */ .logo{background-repeat:no-repeat;background-position:center;background-size:contain} /* intro */ #intro{position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden;will-change:left,top,width,height,opacity} #intro video{width:100%;height:100%;object-fit:cover;display:block} #skip{position:absolute;bottom:32px;right:32px;padding:10px 20px;background:rgba(0,0,0,.55); border:1px solid rgba(232,220,22,.5);color:var(--yellow);font-family:var(--head);font-size:14px; letter-spacing:.14em;text-transform:uppercase;border-radius:2px;cursor:pointer;backdrop-filter:blur(6px)} #skip:hover{background:var(--yellow);color:#000;border-color:var(--yellow)} /* header — NOTE: no backdrop-filter/filter/transform here. Any of those on an ancestor would become the containing block for the fixed-position mobile drawer (nav), which makes the drawer escape the viewport and show up when scrolling right. */ header{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(10,10,10,.95);border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 20px} .bar .logo{width:76px;height:56px;flex:none;display:block} nav{display:flex;gap:20px;row-gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap} nav a{font-family:var(--head);font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:#cfcfc9} nav a:hover{color:var(--yellow)} /* mobile nav toggle — hidden on desktop */ .nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:stretch;gap:5px; width:46px;height:46px;flex:none;padding:0 12px;margin-left:4px; background:transparent;border:1px solid var(--line2);border-radius:2px;cursor:pointer} .nav-toggle .t-line{display:block;height:2px;width:100%;background:var(--text);border-radius:1px; transition:transform .28s ease,opacity .2s ease,background .2s ease} .nav-toggle:hover{border-color:var(--yellow)} .nav-toggle:hover .t-line{background:var(--yellow)} .nav-toggle.on{border-color:var(--yellow)} .nav-toggle.on .t-line{background:var(--yellow)} .nav-toggle.on .t-line:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.on .t-line:nth-child(2){opacity:0} .nav-toggle.on .t-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* drawer backdrop — off by default */ .nav-backdrop{display:none} .btn{display:inline-block;font-family:var(--head);font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;border:none;cursor:pointer} .btn-y{background:var(--yellow);color:#0a0a0a;padding:16px 30px;font-size:16px} .btn-y:hover{background:#fff;color:#0a0a0a} .btn-o{border:1px solid var(--edge);color:var(--text);padding:16px 30px;font-size:16px;background:transparent} .btn-o:hover{border-color:var(--yellow);color:var(--yellow)} .bar .btn-y{flex:none;padding:11px 20px;font-size:14px} /* hero */ #top{padding:clamp(64px,9vw,110px) clamp(18px,4vw,24px) clamp(56px,8vw,96px);border-bottom:1px solid var(--line); background:radial-gradient(1100px 480px at 22% -10%,#1c1c17 0%,#0a0a0a 62%)} .hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center} .hero h1{font-weight:700;font-size:clamp(46px,6.2vw,86px);line-height:.96;letter-spacing:-.01em;margin-bottom:22px} .hero h1 span{color:var(--yellow)} .lede{font-size:20px;line-height:1.55;color:#a8a8a1;max-width:520px;margin:0 0 34px;text-wrap:pretty} .cta{display:flex;gap:14px;flex-wrap:wrap} .stats{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap} .stats b{display:block;font-family:var(--head);font-weight:400;font-size:26px;color:var(--yellow)} .stats span{font-size:14px;color:var(--dim);letter-spacing:.04em} .hero-logo{width:100%;max-width:420px;aspect-ratio:520/770;margin:0 auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.8))} /* sections */ section{padding:var(--pad);scroll-margin-top:80px} #services,#finder,#reviews{border-bottom:1px solid var(--line)} #finder,#reviews{background:var(--bg2)} h2{font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1.04;margin-bottom:46px} .sub{font-size:18px;color:var(--muted);max-width:620px;margin:-30px 0 40px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)} .card{background:var(--panel);padding:34px 30px 36px} .card:hover{background:#151512} .card .num{font-family:var(--head);font-size:13px;color:#5c5c54;letter-spacing:.18em;margin-bottom:18px} .card h3{font-weight:600;font-size:22px;margin-bottom:12px;letter-spacing:.01em} .card p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty} /* finder */ .selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px} label{display:block} .lbl{display:block;font-family:var(--head);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:9px} select,input,textarea{width:100%;background:var(--field);color:var(--text);border:1px solid var(--line2);border-radius:2px;font-size:17px;padding:15px 14px} select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#8b8b84 50%),linear-gradient(135deg,#8b8b84 50%,transparent 50%); background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px); background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px} select:disabled{opacity:.45;cursor:not-allowed} select:focus,input:focus,textarea:focus{outline:none;border-color:var(--yellow)} #result{animation:gkfade .35s ease both} .result-box{border:1px solid var(--gold-line);background:linear-gradient(180deg,#15150f 0%,#101010 100%);padding:clamp(22px,4vw,38px)} .result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start} .vehline{font-family:var(--head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:10px} .result-grid h3{font-weight:700;font-size:clamp(28px,3.4vw,42px);color:var(--yellow);margin-bottom:14px;line-height:1.05} .result-grid p.desc{margin:0 0 22px;font-size:18px;line-height:1.6;color:#b8b8b1;max-width:520px;text-wrap:pretty} .tags{display:flex;gap:10px;flex-wrap:wrap} .tags span{padding:7px 13px;border:1px solid var(--gold-line);border-radius:999px;font-size:13px;letter-spacing:.06em;color:#c9c9c1} .key-options{display:grid;grid-column:1/-1;grid-template-columns:repeat(var(--option-columns,5),minmax(0,1fr));gap:8px;margin-top:2px} .options-heading{grid-column:1/-1;font-family:var(--head);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:8px 0 2px} .key-option{display:grid;gap:4px;width:100%;padding:12px;text-align:left;background:#11110e;color:var(--text);border:1px solid var(--line2);border-radius:2px;cursor:pointer} .key-option.has-image{grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px} .key-option:hover,.key-option.active{border-color:var(--yellow);background:#181810} .key-option-image{width:48px;height:58px;display:block;object-fit:contain;background:#fff;border-radius:2px} .key-option-copy{display:grid;gap:3px;min-width:0} .key-option b{font-family:var(--head);font-size:15px;font-weight:500;line-height:1.2;text-transform:uppercase;color:var(--text)} .key-option-copy>span{font-size:11px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere} .result-side{display:grid;gap:26px;min-width:0} .selected-key-media{display:flex;align-items:center;justify-content:center;min-height:300px;margin:0;padding:18px;background:#f4f4f1;border-radius:2px} .selected-key-media img{display:block;width:auto;max-width:100%;height:264px;object-fit:contain} .aside{border-top:1px solid #2a2a22;padding-top:26px} .aside .k{font-family:var(--head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:7px} .aside .v{font-family:var(--head);font-size:24px;color:var(--text)} .aside .blk{margin-bottom:24px} .aside .note{font-size:16px;color:#b8b8b1;line-height:1.5} .btn-y.full{width:100%;padding:16px 20px;margin-top:4px} .empty{border:1px dashed var(--line2);padding:34px 30px;color:#7d7d76;font-size:17px} /* request */ .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:start} .formcard{border:1px solid var(--line);background:var(--panel);padding:clamp(22px,4vw,38px)} form{display:grid;gap:18px} .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px} textarea{resize:vertical;min-height:92px} input#key_type{color:var(--yellow)} .fineprint{font-size:13px;color:var(--faint)} .bigphone{display:inline-block;font-family:var(--head);font-size:26px;color:var(--yellow);letter-spacing:.02em} #sent{padding:26px 0;animation:gkfade .3s ease both} #sent .h{font-family:var(--head);font-size:30px;color:var(--yellow);text-transform:uppercase;margin-bottom:12px} #sent p{font-size:17px;color:#b8b8b1;line-height:1.6;margin:0 0 22px} .btn-sm{padding:13px 22px;background:transparent;border:1px solid var(--edge);color:var(--text); font-family:var(--head);font-size:14px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:2px} .btn-sm:hover{border-color:var(--yellow);color:var(--yellow)} /* reviews */ .rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} .review{border:1px solid var(--line);background:var(--panel);padding:32px 28px;display:flex;flex-direction:column;gap:18px} .stars{color:var(--yellow);font-size:15px;letter-spacing:.3em} .review p{margin:0;font-size:17px;line-height:1.62;color:#c4c4bd;text-wrap:pretty} .who{margin-top:auto;padding-top:8px} .who b{display:block;font-family:var(--head);font-weight:400;font-size:16px;letter-spacing:.04em} .who span{font-size:14px;color:#7d7d76} .review-cta{margin-top:28px} /* contact */ .contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px} .telbig{display:block;font-family:var(--head);font-size:clamp(34px,4.4vw,54px);color:var(--yellow);margin-bottom:26px;letter-spacing:.01em} .social{display:flex;gap:16px;flex-wrap:wrap} .social a{padding:12px 20px;border:1px solid var(--edge);color:var(--text);font-family:var(--head); font-size:14px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px} .social a:hover{border-color:var(--yellow);color:var(--yellow)} .facts{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);align-content:start} .fact{background:var(--panel);padding:26px 28px} .fact .k{font-family:var(--head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .fact .v{font-size:19px;color:var(--text);line-height:1.45} /* certifications */ #certifications{border-bottom:1px solid var(--line)} .certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:2px;background:var(--line);border:1px solid var(--line)} .cert{background:var(--panel);padding:30px 30px 34px;display:flex;flex-direction:column} .cert-logo{display:flex;align-items:center;justify-content:center;height:180px;padding:24px;margin-bottom:26px;background:#fff;border-radius:2px} .cert-logo img{width:auto;height:auto;max-width:100%;max-height:100%} .cert-logo img[src$=".svg"]{height:100%} .cert h3{font-weight:600;font-size:26px;letter-spacing:.02em;margin-bottom:6px} .cert-org{font-family:var(--head);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px} .cert p{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty} .cert-link{margin-top:auto;font-family:var(--head);font-size:14px;letter-spacing:.1em;text-transform:uppercase} footer{border-top:1px solid var(--line);padding:44px 24px} .foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .script{font-family:'Great Vibes',cursive;font-size:30px;color:var(--text);line-height:1} .foot .m{font-size:14px;color:var(--faint);letter-spacing:.04em} .foot .r{margin-left:auto;font-size:14px;color:var(--faint)} .hidden{display:none!important} /* mobile (matches JS drawer breakpoint: innerWidth < 900). Drawer styles are scoped to html.js — without JS the nav stays as a plain inline menu (wrapped below the bar) so the links are always reachable. */ @media (max-width:899px){ body{padding-top:69px} .hero-logo{display:none} .result-grid{grid-template-columns:1fr;gap:24px} .result-side{gap:22px} .selected-key-media{min-height:200px;margin:0;padding:14px} .selected-key-media img{height:180px} .key-options{grid-template-columns:repeat(2,minmax(0,1fr))} .key-option.has-image{grid-template-columns:44px minmax(0,1fr)} .key-option-image{width:44px;height:54px} /* No-JS fallback: the inline nav wraps onto its own full-width row under the bar instead of one overflowing line of links. (html.js rules below win when JS is active, so this never fights the drawer.) */ .bar{row-gap:8px;padding:10px 14px} .bar .logo{width:62px;height:48px} .bar .btn-y{padding:10px 14px;font-size:13px;white-space:nowrap} nav{flex-basis:100%;order:5;margin-left:0;gap:12px;row-gap:6px} nav a{font-size:13px;letter-spacing:.09em;white-space:nowrap} /* JS drawer mode: compact bar is logo | Call 24/7 | hamburger */ html.js .bar{flex-wrap:nowrap;gap:12px;padding:10px 14px} html.js .bar .logo{width:62px;height:48px} html.js .bar .btn-y{margin-left:auto;padding:10px 14px;font-size:13px;white-space:nowrap} /* hamburger toggle */ html.js .nav-toggle{display:flex;position:relative;z-index:960} /* slide-in drawer (same