/* BIZLO. Shared liquid glass theme. One stylesheet for every page so the look can never drift between them. */ :root{ --ink:#fff; --ink-2:rgba(255,255,255,0.76); --ink-3:rgba(255,255,255,0.56); --accent:#2E5BE8; --accent-soft:#8FB4FF; --radius:26px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:#05070f;color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Helvetica,Arial,sans-serif; line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} .bgwrap{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#05070f} .bgwrap img{width:100%;height:100%;object-fit:cover;display:block} .bgwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s ease} .bgwrap canvas.on{opacity:1} /* Plain scrim for the inner pages. The homepage has its own per-scene scrims in scenes.css, tuned against each scene's actual frame. */ .scrim{position:fixed;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(5,7,15,0.62) 0%,rgba(5,7,15,0.52) 30%,rgba(5,7,15,0.78) 76%,rgba(5,7,15,0.94) 100%)} /* ── Scroll reveals ────────────────────────────────────────────────────── Two flavours on purpose. .rv rises and fades, for plain text and rows. .rvf fades only, and is the ONLY one ever put on a .glass panel: a transform on the same element as backdrop-filter makes Chrome resample the backdrop wrongly and the glass flattens out. Both are inert until JS adds .rvon to , so if the script fails to run the page is simply fully visible rather than permanently blank. */ .rvon .rv{opacity:0;transform:translate3d(0,26px,0); transition:opacity .72s cubic-bezier(.22,.72,.2,1),transform .72s cubic-bezier(.22,.72,.2,1)} .rvon .rvf{opacity:0;transition:opacity .8s cubic-bezier(.22,.72,.2,1)} .rvon .rv.in{opacity:1;transform:none} .rvon .rvf.in{opacity:1} @media (prefers-reduced-motion: reduce){ .rvon .rv,.rvon .rvf{opacity:1;transform:none;transition:none} } /* Liquid glass: SVG displacement into backdrop-filter, dual specular rim, noise overlay, isolated content. */ .glass{position:relative;border-radius:var(--radius);background:rgba(255,255,255,0.05); -webkit-backdrop-filter:blur(26px) saturate(175%);backdrop-filter:blur(26px) saturate(175%); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.55),inset 0 1px 1px rgba(255,255,255,0.32), inset 0 -1px 1px rgba(255,255,255,0.10),0 14px 44px rgba(0,0,0,0.46),0 2px 8px rgba(0,0,0,0.30); isolation:isolate} @supports (backdrop-filter:url(#liquidglass)) or (-webkit-backdrop-filter:url(#liquidglass)){ html:not(.lite) .glass{-webkit-backdrop-filter:blur(9px) url(#liquidglass) saturate(178%) brightness(1.05); backdrop-filter:blur(9px) url(#liquidglass) saturate(178%) brightness(1.05)} } .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E"); background-size:96px 96px;opacity:0.14;mix-blend-mode:overlay;z-index:0} .glass > *{position:relative;z-index:1} body.flat .glass{background:rgba(9,12,26,0.95);backdrop-filter:none;-webkit-backdrop-filter:none} body.flat .glass::after{display:none} body.flat .bgwrap,body.flat .scrim{display:none} body.flat{background:#070B1C} @media (prefers-contrast:more){ .glass{background:rgba(9,12,26,0.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5),0 14px 44px rgba(0,0,0,0.5)} :root{--ink-2:rgba(255,255,255,0.94);--ink-3:rgba(255,255,255,0.82)} } nav{position:sticky;top:0;z-index:50;padding:12px 16px} .navin{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:10px 18px;border-radius:999px} .navin img{height:19px;width:auto;display:block} .navlinks{display:flex;align-items:center;gap:6px} .navlink{text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:560;padding:8px 12px;border-radius:999px} .navcta{text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:590;padding:8px 16px; border-radius:999px;box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.5)} .wrap{max-width:1060px;margin:0 auto;padding:0 20px} section{padding:76px 0} h1{font-size:clamp(38px,7.4vw,74px);line-height:1.04;letter-spacing:-0.035em;font-weight:680} h2{font-size:clamp(26px,4.4vw,42px);line-height:1.1;letter-spacing:-0.028em;font-weight:660;margin-bottom:14px} h3{font-size:18px;letter-spacing:-0.012em;font-weight:620;margin-bottom:5px} .grad{background:linear-gradient(92deg,#8FB4FF,#5A8BFF);-webkit-background-clip:text;background-clip:text;color:transparent} .sub{font-size:clamp(17px,2.2vw,21px);color:var(--ink-2);line-height:1.5;letter-spacing:-0.01em} .center{text-align:center}.narrow{max-width:660px;margin:0 auto} .hero{padding:clamp(56px,13vh,128px) 0 64px} .pill{display:inline-block;font-size:13px;font-weight:560;color:var(--ink-2);padding:8px 16px;border-radius:999px;margin-bottom:22px} .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;text-decoration:none;font-weight:600;font-size:16.5px;letter-spacing:-0.012em; padding:0 30px;border-radius:999px;transition:transform .15s ease;border:0;cursor:pointer; font-family:inherit;background:transparent;color:var(--ink);-webkit-appearance:none;appearance:none} .btn:active{transform:scale(0.97)} .btn.primary{background:var(--accent);color:#fff; box-shadow:0 8px 26px rgba(46,91,232,0.42),inset 0 1px 0 rgba(255,255,255,0.28)} .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.45)} .grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px} @media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}.grid.side{grid-template-columns:1.15fr 1fr}} .pad{padding:28px 30px} .stat{font-size:clamp(28px,4vw,40px);font-weight:680;letter-spacing:-0.03em;line-height:1.1} .statl{font-size:15px;color:var(--ink-2);margin-top:7px;line-height:1.45} .src{font-size:12px;color:var(--ink-3);margin-top:9px} .step{display:flex;gap:17px;align-items:flex-start;padding:19px 0;border-bottom:1px solid rgba(255,255,255,0.14)} .step:last-child{border-bottom:0;padding-bottom:2px}.step:first-child{padding-top:2px} .num{flex:0 0 30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.16); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.4);font-size:13.5px;font-weight:640; display:flex;align-items:center;justify-content:center;margin-top:1px} .step p{font-size:15.5px;color:var(--ink-2);line-height:1.55} .price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center} .was{font-size:23px;color:var(--ink-3);text-decoration:line-through;letter-spacing:-0.02em} .now{font-size:clamp(56px,11vw,86px);font-weight:700;letter-spacing:-0.045em;line-height:1} .code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px; letter-spacing:0.04em;padding:9px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4)} .shot{border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.3);background:rgba(0,0,0,0.35)} .chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,0.1)} .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.34)} .url{margin-left:8px;font-size:11.5px;color:var(--ink-3);font-family:ui-monospace,Menlo,monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shot img{width:100%;height:190px;object-fit:cover;display:block} .work h3{margin-top:17px} .workmeta{font-size:14px;color:var(--ink-3);margin-bottom:15px} .open{display:inline-block;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:590; padding:11px 20px;border-radius:999px;box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.5)} /* Forms */ .field{margin-bottom:16px} .field label{display:block;font-size:11.5px;letter-spacing:0.09em;text-transform:uppercase; color:var(--accent-soft);font-weight:620;margin-bottom:7px} .field input,.field textarea{width:100%;font-family:inherit;font-size:15.5px;color:var(--ink); background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);border-radius:14px; padding:13px 15px;outline:none;transition:border-color .15s ease,background .15s ease} .field textarea{min-height:118px;resize:vertical;line-height:1.55} .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,0.34)} .field input:focus,.field textarea:focus{border-color:rgba(143,180,255,0.7);background:rgba(255,255,255,0.09)} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .formmsg{font-size:14.5px;margin-top:14px;line-height:1.5} .formmsg.ok{color:#8FE3B0}.formmsg.err{color:#FF9AA0} .infolabel{font-size:11.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent-soft);font-weight:620} .infoval{font-size:19px;font-weight:650;letter-spacing:-0.02em;margin:3px 0 18px} .infoval a{color:var(--ink);text-decoration:none} /* FAQ */ .faq{border-bottom:1px solid rgba(255,255,255,0.13)} .faq:last-child{border-bottom:0} .faq summary{list-style:none;cursor:pointer;padding:18px 0;font-size:16.5px;font-weight:600; letter-spacing:-0.01em;display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:21px;font-weight:400;color:var(--ink-3);line-height:1;flex:0 0 auto} .faq[open] summary::after{content:"\2013"} .faq p{font-size:15.5px;color:var(--ink-2);line-height:1.62;padding:0 0 18px;max-width:62ch} footer{padding:44px 0 56px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.7} footer a{color:var(--ink-2)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}} @media (max-width:640px){ .wrap{padding:0 16px} section{padding:48px 0} .hero{padding:40px 0 44px} h1{font-size:clamp(32px,9.2vw,44px);line-height:1.08} h2{font-size:clamp(23px,6.4vw,30px)} .sub{font-size:16.5px} .pad{padding:22px 20px} .now{font-size:clamp(48px,15vw,62px)} .was{font-size:19px} .btnrow{flex-direction:column;gap:10px} .btn{width:100%;min-height:54px;padding:0 20px;text-align:center} .step{gap:13px;padding:16px 0} .step p{font-size:15px} .num{flex:0 0 28px;height:28px;font-size:12.5px} .navin{padding:9px 14px} .navlink{padding:8px 9px;font-size:13px} .shot img{height:150px} .url{font-size:10.5px} .glass{border-radius:20px} .grid{gap:14px} .infoval{font-size:17px;margin-bottom:15px} } /* ── Hero action: the one button that matters most on the page ────────────── A slow sheen crosses it so the eye catches it without anything blinking, and it lifts toward the cursor on hover. */ .btn.hero-cta{position:relative;overflow:hidden; background:linear-gradient(135deg,#3C6BFF 0%,#2544C8 100%);color:#fff; box-shadow:0 10px 34px rgba(46,91,232,0.50),inset 0 1px 0 rgba(255,255,255,0.34); transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,filter .18s ease} .btn.hero-cta::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.46),transparent); transform:skewX(-18deg);animation:sheen 3.8s ease-in-out infinite;pointer-events:none} @keyframes sheen{0%{left:-60%}55%{left:135%}100%{left:135%}} .btn.hero-cta:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.07); box-shadow:0 16px 46px rgba(46,91,232,0.64),inset 0 1px 0 rgba(255,255,255,0.46)} .btn.hero-cta:active{transform:translateY(0) scale(0.985)} .arw{display:inline-block;margin-left:8px;transition:transform .18s ease} .btn.hero-cta:hover .arw{transform:translateX(5px)} /* ── Nav action: always visible, so it breathes rather than sweeps ───────── */ .navcta.spotlight{background:var(--accent);color:#fff; box-shadow:0 6px 18px rgba(46,91,232,0.42),inset 0 1px 0 rgba(255,255,255,0.30); animation:navpulse 3s ease-in-out infinite;transition:transform .16s ease,filter .16s ease} @keyframes navpulse{ 0%,100%{box-shadow:0 0 0 0 rgba(143,180,255,0.55),0 6px 18px rgba(46,91,232,0.42),inset 0 1px 0 rgba(255,255,255,0.30)} 70%,100%{box-shadow:0 0 0 9px rgba(143,180,255,0),0 6px 18px rgba(46,91,232,0.42),inset 0 1px 0 rgba(255,255,255,0.30)}} .navcta.spotlight:hover{transform:translateY(-1px);filter:brightness(1.08)} /* ── Email chooser popover ──────────────────────────────────────────────── */ .emailwrap{position:relative;display:inline-block} .emailpop{position:absolute;top:100%;left:50%;min-width:290px;max-width:min(330px,88vw); padding:16px;border-radius:18px;z-index:60;text-align:left; opacity:0;visibility:hidden;transform:translateX(-50%) translateY(2px); transition:opacity .16s ease,transform .16s ease,visibility .16s} .emailpop.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(10px)} .emailpop .poplabel{font-size:11.5px;letter-spacing:0.09em;text-transform:uppercase; color:var(--accent-soft);font-weight:620;margin-bottom:8px} .emailpop .addr{display:flex;align-items:center;justify-content:space-between;gap:10px; background:rgba(255,255,255,0.09);border-radius:12px;padding:10px 12px;margin-bottom:10px} .emailpop .addr span{font-size:14.5px;font-weight:600;word-break:break-all} .emailpop .mini{font-size:12.5px;font-weight:620;padding:7px 13px;border-radius:999px;cursor:pointer; background:rgba(255,255,255,0.16);color:var(--ink);border:0;font-family:inherit;flex:0 0 auto; transition:background .14s ease} .emailpop .mini:hover{background:rgba(255,255,255,0.26)} .emailpop .open-mail{display:block;text-align:center;text-decoration:none;background:var(--accent); color:#fff;font-weight:620;font-size:14.5px;padding:12px;border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.28);transition:filter .14s ease} .emailpop .open-mail:hover{filter:brightness(1.09)} .emailpop .pophint{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.5} @media (max-width:640px){ .emailwrap{display:block;width:100%} .emailpop{left:0;transform:translateY(2px);max-width:100%;min-width:0;width:100%} .emailpop.open{transform:translateY(10px)} } @media (prefers-reduced-motion:reduce){ .btn.hero-cta::before{display:none} .navcta.spotlight{animation:none} .btn.hero-cta,.navcta.spotlight,.emailpop{transition:none} } /* ── LIQUID METAL RING ───────────────────────────────────────────────────── A dark button wearing a live chrome ring, rather than a metal slab. The ring is a conic gradient on an oversized pseudo-element that rotates behind the body, so the highlight genuinely travels around the border instead of sliding across a flat surface. ::before the spinning chrome disc (the ring) ::after the dark body, inset by the ring thickness content sits above both On hover the ring speeds up, thickens, warps through the turbulence filter and a liquid sheen crosses the body. */ .lm{position:relative;display:inline-flex;align-items:center;justify-content:center; min-height:56px;padding:0 34px;border-radius:999px;border:0;cursor:pointer;overflow:hidden;isolation:isolate; font-family:inherit;font-weight:660;font-size:16.5px;letter-spacing:-0.012em; color:#fff;text-decoration:none;background:transparent; -webkit-appearance:none;appearance:none; box-shadow:0 12px 34px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.38); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease} /* The ring. Oversized and square so the conic sweep stays even at the pill ends; the parent's overflow clips it back to the button shape. */ .lm::before{content:"";position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;z-index:0; transform:translate(-50%,-50%) rotate(0turn); background:conic-gradient(from 0turn, #5e6678 0%, #aeb8cb 6%, #ffffff 11%, #dfe6f2 16%, #7c869b 23%, #4c5466 31%, #9aa4b8 38%, #ffffff 45%, #cbd4e4 50%, #6b7486 58%, #424a5c 66%, #98a2b6 73%, #ffffff 80%, #d6dded 85%, #737c90 93%, #5e6678 100%); transform:translate(-50%,-50%) rotate(.14turn); transition:filter .3s ease} /* The ring only turns while you point at it. A ring spinning forever inside the glass nav forced the blur behind it to be redrawn every frame. */ @media (hover:hover) and (pointer:fine){ html:not(.lite) .lm:hover::before{animation:lmspin 1.5s linear infinite} } /* Body. Inset by the ring thickness, so the ring reads as a border. */ .lm::after{content:"";position:absolute;inset:2px;border-radius:inherit;z-index:1; background:linear-gradient(180deg,#141a33 0%,#0C1022 52%,#090D1C 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -8px 20px rgba(0,0,0,0.5); transition:inset .22s ease} .lm > *{position:relative;z-index:2} @keyframes lmspin{from{transform:translate(-50%,-50%) rotate(.14turn)}to{transform:translate(-50%,-50%) rotate(1.14turn)}} /* A sheen that crosses the body, sitting between body and label. */ .lm .sheen{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none; background:linear-gradient(100deg,transparent 34%,rgba(170,200,255,0.30) 48%,transparent 62%); background-size:260% 100%;background-position:-60% 0;opacity:0; transition:opacity .25s ease} .lm:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 20px 50px rgba(0,0,0,0.62),0 0 40px rgba(150,185,255,0.28)} .lm:hover::after{inset:3px} .lm:hover .sheen{opacity:1;animation:lmsheen 1.25s ease-in-out infinite} @keyframes lmsheen{0%{background-position:-60% 0}100%{background-position:170% 0}} .lm:active{transform:translateY(0) scale(0.986)} .lm:focus-visible{outline:3px solid rgba(143,180,255,0.95);outline-offset:3px} .lm .arw{margin-left:9px;font-weight:400;font-size:19px;line-height:1; transition:transform .22s cubic-bezier(.2,.8,.2,1)} .lm:hover .arw{transform:translateX(5px)} .lm.sm{min-height:38px;padding:0 18px;font-size:13.5px;font-weight:640; box-shadow:0 6px 18px rgba(0,0,0,0.45)} .lm.sm::after{inset:2px} .lm.sm:hover{transform:translateY(-1px) scale(1.03)} .lm.sm:hover::after{inset:2px} .lm.block{width:100%} .lm.icon{padding:0;width:56px;height:56px;border-radius:50%;font-size:21px} .lm.icon .arw{margin:0} @media (max-width:640px){ .lm{width:100%;min-height:54px;padding:0 22px;font-size:16px} .lm.sm{width:auto;min-height:36px;padding:0 13px;font-size:12.5px} .lm.icon{width:56px} } @media (prefers-reduced-motion:reduce){ .lm::before{animation:none;transform:translate(-50%,-50%) rotate(0.14turn)} .lm:hover::before{animation:none} .lm:hover .sheen{animation:none;opacity:.5} .lm,.lm::after,.lm .arw{transition:none} .lm:hover{transform:none} } @media (prefers-contrast:more){ .lm{box-shadow:0 0 0 2px #fff,0 12px 34px rgba(0,0,0,0.6)} .lm::before{animation:none;background:#fff} } /* ── EDGE QUALITY ────────────────────────────────────────────────────────── Rounded elements that also carry a filter get clipped on the compositor, and without their own layer the browser stair-steps that clip instead of antialiasing it. Promoting them fixes the jagged corners. */ /* Deliberately NOT applied to .glass or .navin: a transform on the same element as backdrop-filter makes Chrome resample the backdrop wrongly and the glass flattens out. Those already have isolation:isolate, which is enough. Only unfiltered surfaces get promoted. */ .lm,.shot,.shot img,.field input,.field textarea{ transform:translateZ(0); -webkit-backface-visibility:hidden;backface-visibility:hidden} /* Conic gradients band badly while rotating. A sub-pixel blur dissolves the banding without softening the ring you actually see. */ .lm::before{filter:blur(0.4px)} html:not(.lite) .lm:hover::before{filter:url(#liquidmetal) blur(0.3px)} /* Safari antialiases a rounded overflow clip only when the element is masked, so this is the long-standing fix for jagged pill edges there. */ /* Same reasoning: masking .navin would break its backdrop-filter. */ .lm,.shot{-webkit-mask-image:-webkit-radial-gradient(#fff,#000)} img{image-rendering:auto} /* ═══ Lite: phones, tablets, weak computers, data saver ══════════════════ */ html.lite .glass{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)} html.lite .glass::after{display:none} html.lite .lm::before{filter:none} html.lite .lm .sheen{display:none} html.lite .navcta.spotlight{animation:none} /* phones: no live blur at all. A blurred bar over a scrolling page is re-blurred on every frame of the scroll, which is what made it drag. */ @media (max-width:899px){ html.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,18,38,.78)} html.lite nav .navin{background:rgba(10,15,32,.86)} } /* ── Ask me a question ─────────────────────────────────────────────────── A real form in a dialog. Solid panel, no live blur, so it opens instantly on any device. The dialog is its own scroll container, so it scrolls by touch even on the homepage where the page itself is locked. */ dialog.askdlg{border:0;padding:0;background:transparent;color:var(--ink); width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100svh - 24px); margin:auto;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch} dialog.askdlg::backdrop{background:rgba(4,8,18,.74)} dialog.askdlg[open]{animation:askin .35s cubic-bezier(.16,.84,.24,1)} @keyframes askin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .askform{position:relative;padding:28px 26px 20px;border-radius:22px; background:linear-gradient(180deg,rgba(22,28,54,.98),rgba(10,14,30,.99)); box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)} .askform h2{font-size:clamp(22px,5vw,27px);margin:0 44px 6px 0;letter-spacing:-.02em} .askform .asksub{font-size:15px;color:var(--ink-2);margin-bottom:18px;line-height:1.5} .askform .askx{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;font-family:inherit} .askform .askx:hover{background:rgba(255,255,255,.18)} .askform .opt{text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:400} .askform .field{margin-bottom:13px} .askform textarea{min-height:104px} .askform .src a{color:var(--ink)} .askform .lm{margin-top:4px} @media (max-width:640px){ .askform{padding:22px 18px 16px;border-radius:18px} } @media (prefers-reduced-motion:reduce){ dialog.askdlg[open]{animation:none} } /* 16px stops iPhones zooming the page when a field is tapped */ @media (max-width:899px){ .field input,.field textarea{font-size:16px} } /* ── Inner pages (quote, pay) on phones ────────────────────────────────── One clean row for the nav: logo and the one button that matters. The text links wrapped onto two lines and crowded the button. */ .lm.sm{white-space:nowrap} @media (max-width:640px){ nav:not(.snav){padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))} nav:not(.snav) .navin{padding:7px 7px 7px 16px;gap:10px} nav:not(.snav) .navin img{height:18px} nav:not(.snav) .navlink{display:none} .hero.center{padding:26px 0 8px !important} .hero.center h1{font-size:clamp(30px,8.6vw,38px);letter-spacing:-.03em} .hero.center .sub{font-size:16px;margin-top:14px !important;line-height:1.5} .wrap > section{padding-top:18px !important;padding-bottom:18px} .grid{gap:14px;margin-top:14px} .pad{padding:20px 18px} .infoval{font-size:17.5px;margin-bottom:14px} .step{gap:14px;padding:16px 0} footer{padding:30px 16px 40px} } /* v32: accessibility helpers */ [hidden]{display:none!important} .skip{position:absolute;left:-9999px;top:10px;z-index:10000;background:#fff;color:#0B1030;font-weight:700;padding:10px 16px;border-radius:10px;text-decoration:none} .skip:focus{left:12px} input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:rgba(255,130,140,.85)!important;box-shadow:0 0 0 3px rgba(255,120,130,.18)} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #8FB4FF;outline-offset:2px} .src a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px} #quotedone,#quoteform{scroll-margin-top:96px} /* v33: business verification on the mockup form */ .verifybox{border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px 16px 4px;margin:4px 0 18px;background:rgba(255,255,255,.04)} .vb-h{font-weight:700;font-size:15px;color:var(--ink)} .field .opt{text-transform:none;letter-spacing:0;color:#9CE6B8;font-weight:600;margin-left:6px} .howto,.noplace{margin:6px 0 10px} .howto summary,.noplace summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px} .howto p{font-size:13.5px;color:var(--ink-2);margin:6px 0 0;line-height:1.55} .noplace summary{font-weight:600} .ownerline{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink);margin:2px 0 16px;cursor:pointer} .ownerline input{width:20px;height:20px;accent-color:#5FA0FF;flex:0 0 20px} input[type=file]{font-size:14px;color:var(--ink-2)}