html, body { background:#FFFFFF; color:#072A50; font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#0067D8; color:#FFFFFF; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#FFFFFF; }
::-webkit-scrollbar-thumb { background:#C2C6D1; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#0067D8; }
.eyebrow { font-family:'JetBrains Mono', monospace; letter-spacing:0.18em; text-transform:uppercase; font-size:11px; color:#0067D8; }
.ital { font-family:'Outfit',sans-serif; font-style:normal; font-weight:300; color:#0067D8; }
.ulink { position:relative; transition:color 0.3s; max-width:100%; }
.ulink::after { content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 0.4s cubic-bezier(0.6,0,0.2,1); }
@media (hover:hover){ .ulink:hover::after { transform:scaleX(1); transform-origin:left; } }
html, body { overflow-x:hidden; max-width:100%; }
img, svg, video, iframe { max-width:100%; height:auto; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.9s, transform 0.9s; }
.reveal.shown { opacity:1; transform:translateY(0); }
.ticker-wrap { overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.ticker { will-change:transform; transform:translateZ(0); }
.ticker { display:flex; animation:tick 60s linear infinite; }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.btn-float { transition:transform 0.3s cubic-bezier(0.6,0,0.2,1), box-shadow 0.3s; }
@media (hover:hover){ .btn-float:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,103,216,0.25); } }
/* ================= APPROACH CARDS + LIVE DEMOS =================
Each card holds a small working demo of the feature. Demos are laid out in
container-query units so they stay legible at 2-up on a phone. ============ */
.ap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (min-width:768px){ .ap-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.ap-card { background:#fff; border:1px solid #E4E9F2; border-radius:16px;
display:flex; flex-direction:column;
box-shadow:0 1px 2px rgba(7,42,80,.04), 0 10px 28px -18px rgba(7,42,80,.28);
transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; }
@media (hover:hover){
.ap-card:hover { transform:translateY(-5px); border-color:rgba(0,103,216,.38);
box-shadow:0 2px 4px rgba(7,42,80,.05), 0 26px 48px -22px rgba(7,42,80,.42); }
}
.ap-demo { position:relative; container-type:inline-size; aspect-ratio:5/3;
border-radius:15px 15px 0 0;
background:linear-gradient(160deg,#FBFCFE 0%,#EEF3FA 100%);
border-bottom:1px solid #E4E9F2; overflow:hidden; }
.ap-body { padding:14px 14px 18px; }
@media (min-width:768px){ .ap-body { padding:22px 22px 26px; } }
.ap-num { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px;
letter-spacing:.16em; color:#0067D8; background:rgba(0,103,216,.09);
border-radius:999px; padding:3px 9px; margin-bottom:9px; }
.ap-title { font-family:'Outfit',sans-serif; text-transform:uppercase;
color:#072A50; line-height:1.12; font-size:clamp(14px,3.6vw,22px); margin-bottom:7px; }
.ap-text { color:#626C82; font-size:clamp(11.5px,2.9vw,15px); line-height:1.6; }
@media (min-width:768px){ .ap-title{font-size:22px} .ap-text{font-size:15px} }
/* ---- shared demo primitives ---- */
.ap-demo svg { width:100%; height:100%; display:block; }
.ap-demo em { font-style:normal; }
/* 01 wireframe -> branded wipe */
.d-browser { position:absolute; inset:9cqw; background:#fff; border-radius:2.6cqw;
border:1px solid #E4E9F2; overflow:hidden; box-shadow:0 2cqw 5cqw -3cqw rgba(7,42,80,.25); }
.d-bar { height:7.5cqw; background:#F4F7FB; border-bottom:1px solid #E9EEF6;
display:flex; align-items:center; gap:1.1cqw; padding:0 2.4cqw; }
.d-bar i { width:1.5cqw; height:1.5cqw; border-radius:50%; background:#D3DCE9; }
.d-bar em { margin-left:1.6cqw; font-size:max(9px,2.7cqw); color:#9AA6BA; font-family:'JetBrains Mono',monospace; }
.d-canvas { position:relative; height:calc(100% - 7.5cqw); }
.d-layer { position:absolute; inset:0; padding:2.8cqw; }
.d-layer .bk { border-radius:1cqw; }
.bk-hero { height:14cqw; margin-bottom:2.2cqw; }
.bk-l { height:2cqw; margin-bottom:1.5cqw; }
.bk-l.s { width:62%; }
.bk-row { display:flex; gap:1.6cqw; margin-top:2.4cqw; }
.bk-row span { flex:1; height:7cqw; border-radius:1cqw; }
.d-before .bk,.d-before .bk-row span { background:#E2E8F1; }
.d-after .bk-hero { background:linear-gradient(120deg,#072A50,#0067D8); }
.d-after .bk-l { background:#C8D6E8; }
.d-after .bk-row span { background:rgba(0,103,216,.22); }
.d-after { clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.72,0,.28,1) .25s; }
.is-on .d-after { clip-path:inset(0 0 0 0); }
.d-wipe { position:absolute; top:0; bottom:0; left:0; width:.7cqw; background:#0067D8;
opacity:0; transform:translateX(0); transition:transform 1.5s cubic-bezier(.72,0,.28,1) .25s, opacity .3s ease .25s; }
.is-on .d-wipe { opacity:1; transform:translateX(calc(100cqw - 18cqw)); }
.is-on .d-browser .d-wipe { opacity:0; transition-delay:1.5s; }
/* 02 SERP climb */
.d-serp { position:absolute; inset:8cqw 9cqw; }
.sp-q { display:flex; align-items:center; gap:1.8cqw; background:#fff; border:1px solid #E4E9F2;
border-radius:999px; padding:1.8cqw 3cqw; margin-bottom:2.6cqw; }
.sp-q svg { width:3.4cqw; height:3.4cqw; color:#9AA6BA; flex:none; }
.sp-q em { font-size:max(9.5px,2.9cqw); color:#7C889C; }
.sp-rows { position:relative; height:33cqw; }
.sp-row { position:absolute; left:5.4cqw; right:0; display:flex; align-items:center; gap:2cqw;
height:7cqw; background:#fff; border:1px solid #EAEFF6; border-radius:1.6cqw; padding:0 2.2cqw;
transform:translateY(calc(var(--from) * 8.6cqw));
transition:transform 1.05s cubic-bezier(.55,0,.2,1) .5s, box-shadow .5s ease 1.4s, border-color .5s ease 1.4s; }
.sp-rank { position:absolute; left:0; top:0; width:4cqw; text-align:center; line-height:7cqw;
font-family:'JetBrains Mono',monospace; font-size:max(9px,2.8cqw); color:#A8B3C4;
transform:translateY(calc(var(--s) * 8.6cqw)); }
.sp-row i { height:1.7cqw; border-radius:999px; background:#E2E8F1; flex:1; }
.sp-row i.s { flex:none; width:16%; }
.sp-you { z-index:2; }
.sp-you i { background:rgba(0,103,216,.3); }
.sp-you em { font-family:'JetBrains Mono',monospace; font-size:max(8px,2.4cqw); letter-spacing:.1em;
color:#0067D8; flex:none; }
.is-on .sp-row { transform:translateY(calc(var(--to,var(--from)) * 8.6cqw)); }
.is-on .sp-you { box-shadow:0 2cqw 5cqw -2cqw rgba(0,103,216,.5); border-color:rgba(0,103,216,.5); }
/* 03 phone + booking notification */
.d-phone { position:absolute; left:50%; top:6cqw; width:30cqw; height:48cqw; transform:translateX(-50%);
background:#072A50; border-radius:5cqw; padding:1.5cqw; box-shadow:0 3cqw 7cqw -3cqw rgba(7,42,80,.55); }
.is-on .d-phone { animation:ap-buzz .55s ease .5s 1; }
@keyframes ap-buzz { 0%,100%{transform:translateX(-50%) rotate(0)} 20%{transform:translateX(-51.5%) rotate(-1.4deg)}
45%{transform:translateX(-48.5%) rotate(1.4deg)} 70%{transform:translateX(-50.8%) rotate(-.7deg)} }
.ph-body { position:relative; height:100%; background:linear-gradient(170deg,#E9F0FA,#F7FAFE);
border-radius:3.8cqw; overflow:hidden; padding:2.4cqw; }
.ph-notch { width:38%; height:1.6cqw; background:#072A50; border-radius:999px; margin:0 auto 3cqw; opacity:.35; }
.ph-note { display:flex; gap:1.8cqw; align-items:center; background:#fff; border-radius:2.4cqw;
padding:2.2cqw; box-shadow:0 1.6cqw 3.4cqw -1.6cqw rgba(7,42,80,.4);
opacity:0; transform:translateY(-160%);
transition:transform .85s cubic-bezier(.2,1.25,.4,1) .55s, opacity .4s ease .55s; }
.is-on .ph-note { opacity:1; transform:translateY(0); }
.ph-ico { width:6cqw; height:6cqw; flex:none; border-radius:1.6cqw; background:rgba(0,103,216,.12);
color:#0067D8; padding:1.3cqw; }
.ph-note strong { display:block; font-size:max(9.5px,2.9cqw); color:#072A50; font-weight:700; line-height:1.2; }
.ph-note span { display:block; font-size:max(8.5px,2.5cqw); color:#7C889C; line-height:1.3; margin-top:.4cqw; }
/* 04 retainer -> $0 */
.d-bill { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:1.4cqw; }
.bl-label { font-size:max(9px,2.7cqw); color:#8B97AA; letter-spacing:.04em; margin-bottom:.4cqw; }
.bl-old { position:relative; display:inline-flex; align-items:baseline; opacity:.6; }
.bl-old b { font-size:5cqw; color:#7C889C; font-weight:700; }
.bl-old small { font-size:max(9px,2.6cqw); }
.bl-strike { position:absolute; left:-1cqw; right:-1cqw; top:50%; height:.6cqw; background:#D2455B;
transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.6,0,.2,1) .45s; }
.is-on .bl-strike { transform:scaleX(1); }
.bl-new { display:flex; align-items:baseline; gap:.8cqw; color:#0067D8;
opacity:0; transform:scale(.7); transition:opacity .5s ease 1s, transform .7s cubic-bezier(.2,1.5,.4,1) 1s; }
.is-on .bl-new { opacity:1; transform:scale(1); }
.bl-new b { font-family:'Outfit',sans-serif; font-size:15cqw; line-height:1; }
.bl-new small { font-size:max(10px,3.4cqw); font-family:'JetBrains Mono',monospace; }
.bl-note { font-size:max(9px,2.6cqw); color:#7C889C; opacity:0; transition:opacity .5s ease 1.35s; text-align:center; }
.is-on .bl-note { opacity:1; }
/* 05 chat thread */
.d-chat { position:absolute; inset:9cqw; display:flex; flex-direction:column; gap:2.2cqw; justify-content:center; }
.ch-b { max-width:82%; font-size:max(9.5px,2.9cqw); line-height:1.4; padding:2.4cqw 3cqw; border-radius:3.4cqw;
opacity:0; transform:translateY(2.5cqw); }
.ch-in { align-self:flex-start; background:#fff; border:1px solid #E4E9F2; color:#3D4A60;
border-bottom-left-radius:1cqw; transition:opacity .45s ease .3s, transform .45s ease .3s; }
.is-on .ch-in { opacity:1; transform:none; }
.ch-typing { align-self:flex-end; display:flex; gap:1.2cqw; background:#0067D8; padding:2.4cqw 3cqw;
border-radius:3.4cqw; opacity:0; transition:opacity .3s ease .95s; }
.is-on .ch-typing { opacity:1; }
.is-on .ch-typing { animation:ap-fadeout .01s linear 2.05s forwards; }
@keyframes ap-fadeout { to { opacity:0; height:0; padding:0; margin:0; } }
.ch-typing i { width:1.5cqw; height:1.5cqw; border-radius:50%; background:rgba(255,255,255,.85); }
.is-on .ch-typing i { animation:ap-dot 1s ease-in-out infinite; }
.is-on .ch-typing i:nth-child(2){ animation-delay:.15s } .is-on .ch-typing i:nth-child(3){ animation-delay:.3s }
@keyframes ap-dot { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(-1.2cqw);opacity:1} }
.ch-out { align-self:flex-end; background:#0067D8; color:#fff; border-bottom-right-radius:1cqw;
display:flex; align-items:center; gap:1.4cqw; transition:opacity .4s ease 2.1s, transform .5s cubic-bezier(.2,1.3,.4,1) 2.1s; }
.is-on .ch-out { opacity:1; transform:none; }
.ch-out svg { width:3.2cqw; height:3.2cqw; flex:none; }
/* 06 same-day ship */
.d-ship { position:absolute; inset:9cqw; display:flex; flex-direction:column; justify-content:center; gap:2.4cqw; }
.sh-step { display:flex; align-items:center; gap:2cqw; font-size:max(9px,2.8cqw); color:#7C889C; }
.sh-step + .sh-step { margin-top:1.8cqw; }
.sh-step i { width:4.6cqw; height:4.6cqw; flex:none; border-radius:50%; background:#E2E8F1; color:#fff;
padding:1cqw; transform:scale(.6); transition:transform .45s cubic-bezier(.2,1.5,.4,1), background .3s ease; }
.sh-step:nth-child(1) i { transition-delay:.35s } .sh-step:nth-child(2) i { transition-delay:.8s }
.sh-step:nth-child(3) i { transition-delay:1.25s }
.is-on .sh-step i { transform:scale(1); background:#0067D8; }
.sh-bar { height:1.6cqw; border-radius:999px; background:#E2E8F1; overflow:hidden; margin-top:1cqw; }
.sh-bar i { display:block; height:100%; width:100%; border-radius:999px;
background:linear-gradient(90deg,#0067D8,#072A50); transform:scaleX(0); transform-origin:left;
transition:transform 1.5s cubic-bezier(.5,0,.2,1) .35s; }
.is-on .sh-bar i { transform:scaleX(1); }
.sh-live { align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:max(8px,2.4cqw);
letter-spacing:.14em; color:#0067D8; background:rgba(0,103,216,.1); border-radius:999px;
padding:1.2cqw 2.6cqw; opacity:0; transform:scale(.8);
transition:opacity .4s ease 1.7s, transform .5s cubic-bezier(.2,1.5,.4,1) 1.7s; }
.is-on .sh-live { opacity:1; transform:scale(1); }
/* --- corrections after visual review --- */
.d-phone { left:50%; top:7cqw; width:31cqw; height:46cqw; }
.ph-body { padding:2.4cqw 2.4cqw 0; }
.d-noteWrap { position:absolute; left:7cqw; right:7cqw; top:20cqw; }
.ph-note { width:100%; }
.ph-note strong { font-size:max(10px,3.2cqw); white-space:nowrap; }
.ph-note span { font-size:max(9px,2.6cqw); white-space:nowrap; }
.ph-ico { width:7cqw; height:7cqw; padding:1.6cqw; }
.ch-reply { position:relative; width:100%; display:flex; justify-content:flex-end; min-height:9cqw; }
.ch-typing { position:absolute; right:0; top:0; align-self:auto; }
.is-on .ch-typing { animation:ap-fade .3s linear 2.05s forwards; }
@keyframes ap-fade { to { opacity:0; } }
.ch-out { position:relative; }
.bl-strike { background:#072A50; opacity:.55; }
@container (max-width: 230px){
.d-bar em { display:none; }
.sp-q em { font-size:8.5px; }
.ph-note span { white-space:normal; line-height:1.25; }
.ch-b { max-width:94%; }
.d-noteWrap { left:4cqw; right:4cqw; }
}
@media (prefers-reduced-motion: reduce){
.ap-demo *, .ap-card { transition:none !important; animation:none !important; }
.d-after { clip-path:inset(0 0 0 0) !important; } .d-wipe { opacity:0 !important; }
.ph-note,.bl-new,.bl-note,.ch-b,.sh-live { opacity:1 !important; transform:none !important; }
.bl-strike { transform:scaleX(1) !important; } .sh-bar i { transform:scaleX(1) !important; }
.sh-step i { transform:scale(1) !important; background:#0067D8 !important; }
.ch-typing { display:none !important; }
}
/* ================= COLLABORATIONS: real client sites =================
Desktop = grid. Phone = a full-bleed snap rail, so each screenshot stays
big enough to actually read instead of shrinking into a stacked column. */
.wk-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.wk-card { display:block; text-decoration:none; }
.wk-shot { display:block; position:relative; border-radius:14px; overflow:hidden;
background:#fff; border:1px solid #E4E9F2;
box-shadow:0 1px 2px rgba(7,42,80,.05), 0 14px 32px -20px rgba(7,42,80,.4);
transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease; }
.wk-bar { display:flex; align-items:center; gap:5px; height:26px; padding:0 10px;
background:#F4F7FB; border-bottom:1px solid #E9EEF6; }
.wk-bar i { width:6px; height:6px; border-radius:50%; background:#D3DCE9; flex:none; }
.wk-bar em { font-style:normal; margin-left:6px; font-family:'JetBrains Mono',monospace;
font-size:10px; color:#9AA6BA; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-shot img { display:block; width:100%; height:auto; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.wk-meta { display:block; padding:14px 2px 0; }
.wk-name { display:block; font-family:'Outfit',sans-serif; text-transform:uppercase;
font-size:16px; color:#072A50; line-height:1.2; transition:color .3s ease; }
.wk-tags { display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
letter-spacing:.1em; text-transform:uppercase; color:#8B97AA; margin-top:5px; }
@media (hover:hover){
.wk-card:hover .wk-shot { transform:translateY(-6px); border-color:rgba(0,103,216,.4);
box-shadow:0 2px 4px rgba(7,42,80,.06), 0 30px 54px -26px rgba(7,42,80,.5); }
.wk-card:hover .wk-shot img { transform:scale(1.045); }
.wk-card:hover .wk-name { color:#0067D8; }
}
.wk-card:focus-visible .wk-shot { outline:2px solid #0067D8; outline-offset:3px; }
@media (max-width:767px){
.wk-rail { display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
margin:0 -20px; padding:4px 20px 18px; scrollbar-width:none; }
.wk-rail::-webkit-scrollbar { display:none; }
.wk-card { flex:0 0 74vw; scroll-snap-align:center; }
.wk-name { font-size:15px; }
}
@media (prefers-reduced-motion: reduce){
.wk-shot, .wk-shot img { transition:none !important; }
}
/* ================= HERO ================= */
.hero-sec { position:relative; overflow:clip; } /* clip, not hidden: hidden breaks sticky */
.hero-glow { position:absolute; top:-18%; right:-12%; width:70vw; max-width:900px; aspect-ratio:1;
background:radial-gradient(circle at 50% 50%, rgba(0,103,216,.14), rgba(0,103,216,0) 62%);
pointer-events:none; z-index:0; }
.hero-grid { position:relative; z-index:1; display:grid; gap:38px; align-items:center; }
@media (min-width:1024px){
.hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; }
}
.hero-sub { color:#626C82; font-size:clamp(14px,2.6vw,17px); line-height:1.65; max-width:30rem; margin-bottom:26px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
.hero-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
min-height:48px; padding:14px 24px; font-family:'JetBrains Mono',monospace; font-size:11px;
font-weight:700; text-transform:uppercase; letter-spacing:.12em; border-radius:8px;
text-decoration:none; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.hero-btn-p { background:#0067D8; color:#fff; border:1.5px solid #0067D8; }
.hero-btn-g { background:transparent; color:#072A50; border:1.5px solid #C8D3E3; }
@media (hover:hover){
.hero-btn-p:hover { background:#072A50; border-color:#072A50; }
.hero-btn-g:hover { border-color:#0067D8; color:#0067D8; }
}
@media (min-width:640px){ }
/* the showcase frame */
.hero-show { position:relative; }
.hs-frame { position:relative; border-radius:14px; overflow:hidden; background:#fff;
border:1px solid #E4E9F2;
box-shadow:0 2px 4px rgba(7,42,80,.05), 0 34px 64px -30px rgba(7,42,80,.5); }
.hs-bar { display:flex; align-items:center; gap:6px; height:32px; padding:0 12px;
background:#F4F7FB; border-bottom:1px solid #E9EEF6; }
.hs-bar i { width:7px; height:7px; border-radius:50%; background:#D3DCE9; flex:none; }
.hs-bar em { font-style:normal; margin-left:8px; font-family:'JetBrains Mono',monospace;
font-size:11px; color:#7C889C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-live { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em; color:#0B8F5A; flex:none; }
.hs-live::before { content:''; width:5px; height:5px; border-radius:50%; background:#12B76A;
box-shadow:0 0 0 0 rgba(18,183,106,.6); animation:hs-pulse 2.2s ease-out infinite; }
@keyframes hs-pulse { 70%{box-shadow:0 0 0 7px rgba(18,183,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,183,106,0)} }
.hs-stage { position:relative; aspect-ratio:900/562; background:#EEF3FA; overflow:hidden;
cursor:grab; touch-action:pan-y; }
.hs-stage.dragging { cursor:grabbing; }
.hs-track { display:flex; height:100%; width:100%; will-change:transform;
transition:transform .95s cubic-bezier(.65,0,.35,1); }
.hs-track.noanim { transition:none; }
.hs-cell { flex:0 0 100%; height:100%; overflow:hidden; }
.hs-cell img { display:block; width:100%; height:100%; object-fit:cover;
-webkit-user-drag:none; user-select:none; }
/* dwell timer under the chrome, so the motion feels scheduled rather than random */
.hs-prog { height:2px; background:#EDF1F7; overflow:hidden; }
.hs-prog i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#0067D8,#072A50); }
.hs-caption { margin-top:12px; text-align:center; font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8B97AA; }
/* Phone order: promise -> proof -> action -> detail.
display:contents lifts the copy block's children into the grid so they can interleave
with the showcase frame without duplicating markup. */
@media (max-width:1023px){
.hero-grid { gap:0; }
.hero-copy { display:contents; }
.hero-copy .eyebrow { order:1; }
.hero-copy h1 { order:2; }
.hero-sub { order:3; }
.hero-show { order:4; margin-bottom:30px; }
.hero-cta { order:5; }
}
@media (prefers-reduced-motion: reduce){
.hs-track { transition:none !important; }
.hs-live::before { animation:none !important; }
}
/* ===== TYPE SYSTEM: Outfit display + Inter body =====
Tailwind's font-normal / italic / text-* utilities are single-class selectors, so these
element+class selectors out-specify them without needing !important. */
h1.font-display, h2.font-display, h3.font-display,
div.font-display, span.font-display, a.font-display,
.ap-title, .wk-name { font-weight:700; letter-spacing:-0.018em; }
h1 span.ital, h2 span.ital, h3 span.ital, span.ital {
font-family:'Outfit',sans-serif; font-weight:300; font-style:normal;
color:#0067D8; letter-spacing:-0.012em; }
/* Outfit has no italic; without this the browser synthesises a skewed oblique. */
.ital, .italic .ital { font-synthesis-style:none; }
body { font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
/* ============ CONTACT: the preview that builds itself ============ */
.cx-side { display:flex; flex-direction:column; gap:22px; --cx:#0067D8; }
.cx-stage { background:#F6F8FB; border:1px solid #E4E9F2; border-radius:16px; padding:16px; }
.cx-status { display:flex; align-items:center; gap:8px; margin-bottom:12px;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em;
text-transform:uppercase; color:#8B97AA; }
.cx-dot { width:7px; height:7px; border-radius:50%; background:#C2C6D1; flex:none; transition:background .4s ease, box-shadow .4s ease; }
.cx-side.ready .cx-dot { background:#12B76A; box-shadow:0 0 0 4px rgba(18,183,106,.16); }
.cx-side.ready .cx-status { color:#0B8F5A; }
.cx-frame { position:relative; border-radius:12px; overflow:hidden; background:#fff;
border:1px solid #E4E9F2; box-shadow:0 2px 4px rgba(7,42,80,.05), 0 22px 44px -26px rgba(7,42,80,.45); }
.cx-bar { display:flex; align-items:center; gap:5px; height:26px; padding:0 10px;
background:#F4F7FB; border-bottom:1px solid #E9EEF6; }
.cx-bar i { width:6px; height:6px; border-radius:50%; background:#D3DCE9; flex:none; }
.cx-bar em { font-style:normal; margin-left:6px; font-family:'JetBrains Mono',monospace;
font-size:10px; color:#9AA6BA; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-site { position:relative; }
.cx-nav { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid #EEF2F8; }
.cx-navname { font-family:'Outfit',sans-serif; font-weight:700; font-size:10px; letter-spacing:.04em;
color:#072A50; text-transform:uppercase; white-space:nowrap; overflow:hidden;
text-overflow:ellipsis; max-width:42%; }
.cx-navlinks { display:flex; gap:7px; margin-left:auto; }
.cx-navlinks i { width:15px; height:3px; border-radius:2px; background:#E2E8F1; }
.cx-book { font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.1em;
background:var(--cx); color:#fff; padding:4px 7px; border-radius:4px; transition:background .5s ease; }
.cx-hero { padding:22px 16px 20px; background:
linear-gradient(150deg, color-mix(in srgb, var(--cx) 12%, #fff) 0%, #fff 72%);
transition:background .6s ease; }
.cx-eyebrow { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.16em;
text-transform:uppercase; color:var(--cx); margin-bottom:8px; transition:color .5s ease; }
.cx-head { font-family:'Outfit',sans-serif; font-weight:700; font-size:24px; line-height:1.05;
color:#072A50; text-transform:uppercase; letter-spacing:-0.02em; word-break:break-word; }
.cx-head.ghost { color:#C2C6D1; }
.cx-line { font-family:'Outfit',sans-serif; font-weight:300; font-size:14px; color:var(--cx);
margin-top:4px; transition:color .5s ease; }
.cx-cta { display:inline-block; margin-top:14px; font-family:'JetBrains Mono',monospace;
font-size:8px; letter-spacing:.12em; text-transform:uppercase; background:var(--cx); color:#fff;
padding:8px 12px; border-radius:5px; transition:background .5s ease; }
.cx-svcs { display:flex; gap:6px; padding:12px; border-top:1px solid #EEF2F8; flex-wrap:wrap; }
.cx-svcs span { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.08em;
text-transform:uppercase; color:#5C6B84; background:#F4F7FB; border:1px solid #E9EEF6;
border-radius:999px; padding:5px 9px; }
.cx-foot { display:flex; justify-content:space-between; align-items:center; padding:9px 12px;
border-top:1px solid #EEF2F8; font-family:'JetBrains Mono',monospace; font-size:8px;
letter-spacing:.08em; color:#8B97AA; }
.cx-open::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
background:#12B76A; margin-right:5px; vertical-align:middle; }
/* the "building" sweep, fired whenever a field changes the preview */
.cx-scan { position:absolute; inset:0; pointer-events:none; opacity:0;
background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--cx) 26%, transparent) 48%, transparent 100%); }
.cx-frame.building .cx-scan { animation:cx-sweep .75s cubic-bezier(.4,0,.2,1) 1; }
@keyframes cx-sweep { 0%{opacity:0; transform:translateY(-100%)} 18%{opacity:1} 100%{opacity:0; transform:translateY(100%)} }
.cx-prog { height:3px; border-radius:999px; background:#E4E9F2; margin-top:14px; overflow:hidden; }
.cx-prog i { display:block; height:100%; width:0%; border-radius:999px; background:var(--cx);
transition:width .5s cubic-bezier(.3,.8,.3,1), background .5s ease; }
.cx-meta { display:flex; justify-content:space-between; gap:10px; margin-top:8px;
font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em;
text-transform:uppercase; color:#8B97AA; }
/* compact contact rows */
.cx-contacts { display:flex; flex-direction:column; gap:10px; }
.cx-row { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; text-decoration:none;
background:#fff; border:1px solid #E4E9F2; border-radius:12px;
transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
@media (hover:hover){ .cx-row:hover { border-color:rgba(0,103,216,.4); transform:translateY(-2px);
box-shadow:0 12px 26px -18px rgba(7,42,80,.5); } }
.cx-ico { width:34px; height:34px; flex:none; border-radius:9px; background:rgba(0,103,216,.09);
color:#0067D8; display:flex; align-items:center; justify-content:center; }
.cx-ico svg { width:16px; height:16px; }
.cx-txt { min-width:0; }
.cx-txt em { display:block; font-style:normal; font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8B97AA; margin-bottom:3px; }
.cx-txt strong { display:block; font-family:'Outfit',sans-serif; font-weight:700; font-size:15px;
color:#072A50; word-break:break-word; line-height:1.25; }
.cx-txt small { display:block; font-size:11.5px; color:#8B97AA; margin-top:3px; line-height:1.35; }
/* hero gets a photo block so it is not half empty */
.cx-hero { display:flex; gap:12px; align-items:center; }
.cx-heroL { flex:1; min-width:0; }
.cx-shot { flex:none; width:34%; max-width:150px; aspect-ratio:4/3; border-radius:8px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(145deg, color-mix(in srgb, var(--cx) 26%, #fff), color-mix(in srgb, var(--cx) 9%, #fff));
color:color-mix(in srgb, var(--cx) 55%, #fff); transition:background .6s ease, color .6s ease; }
.cx-shot svg { width:26px; height:26px; }
@media (max-width:420px){ .cx-shot { display:none; } }
/* what happens next */
.cx-next { background:#F6F8FB; border:1px solid #E4E9F2; border-radius:14px; padding:18px 18px 16px; }
.cx-next-h { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em;
text-transform:uppercase; color:#8B97AA; margin-bottom:14px; }
.cx-next ol { list-style:none; display:flex; flex-direction:column; gap:12px; }
.cx-next li { display:flex; gap:12px; align-items:baseline; }
.cx-next b { font-family:'JetBrains Mono',monospace; font-size:10px; color:#0067D8;
background:rgba(0,103,216,.09); border-radius:999px; padding:3px 8px; flex:none; }
.cx-next span { font-size:13.5px; color:#3D4A60; line-height:1.45; }
/* Phone: the preview must sit ABOVE the fields, otherwise it builds below the submit
button where nobody watching the form can see it. */
@media (max-width:1023px){
.cx-left, .cx-side { display:contents; }
.cx-grid { gap:0; }
.cx-left > .eyebrow { order:1; }
.cx-left > h2 { order:2; }
.cx-left > p { order:3; }
.cx-stage { order:4; margin-bottom:30px; }
.cx-left > form { order:5; margin-bottom:26px; }
.cx-contacts { order:6; margin-bottom:14px; }
.cx-next { order:7; }
}
/* submitted state */
.cx-side.sent .cx-dot { background:#12B76A; box-shadow:0 0 0 5px rgba(18,183,106,.18); }
.cx-side.sent .cx-status { color:#0B8F5A; }
.cx-side.sent .cx-prog i { background:#12B76A; width:100% !important; }
.cx-side.sent .cx-frame { animation:cx-pop .55s cubic-bezier(.2,1.4,.4,1) 1; }
@keyframes cx-pop { 0%{transform:scale(1)} 45%{transform:scale(1.022)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce){ .cx-side.sent .cx-frame { animation:none !important; } }
@media (prefers-reduced-motion: reduce){
.cx-frame.building .cx-scan { animation:none !important; }
.cx-prog i, .cx-row, .cx-hero, .cx-cta { transition:none !important; }
}
/* ============ LIVE BAND ============ */
.lm-band { display:flex; align-items:center; gap:0; border-bottom:1px solid #E4E9F2;
background:#fff; overflow:clip; }
.lm-label { flex:none; display:flex; align-items:center; gap:8px; padding:14px 18px;
border-right:1px solid #E4E9F2; background:#F6F8FB; }
.lm-label em { font-style:normal; font-family:'JetBrains Mono',monospace; font-size:10px;
letter-spacing:.13em; text-transform:uppercase; color:#5C6B84; white-space:nowrap; }
.lm-dot { width:7px; height:7px; border-radius:50%; background:#12B76A; flex:none;
box-shadow:0 0 0 0 rgba(18,183,106,.55); animation:lm-pulse 2.2s ease-out infinite; }
@keyframes lm-pulse { 70%{box-shadow:0 0 0 7px rgba(18,183,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,183,106,0)} }
.lm-track { flex:1; min-width:0; overflow:hidden;
-webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.lm-row { display:flex; width:max-content;
/* duration scales with the number of chips (~4.3s each) so the speed stays constant
no matter how many clients are on the list. build.py sets --lm-dur. */
animation:lm-scroll var(--lm-dur, 52s) linear infinite; }
@media (hover:hover){ .lm-track:hover .lm-row { animation-play-state:paused; } }
@keyframes lm-scroll { to { transform:translateX(-50%); } }
.lm-chip { display:inline-flex; align-items:center; gap:7px; padding:14px 22px;
font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em;
color:#5C6B84; white-space:nowrap; }
.lm-chip i { width:5px; height:5px; border-radius:50%; background:#12B76A; flex:none; opacity:.75; }
@media (max-width:640px){
/* side-by-side leaves the marquee ~195px on a phone; stack so it gets the full width */
.lm-band { flex-direction:column; align-items:stretch; }
.lm-label { border-right:0; border-bottom:1px solid #E4E9F2; padding:11px 16px; justify-content:center; }
.lm-label em { font-size:9px; }
.lm-track { width:100%; }
.lm-chip { padding:12px 15px; font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce){
.lm-row { animation:none !important; }
.lm-dot { animation:none !important; }
.lm-track { overflow-x:auto; }
}
/* ============ HEADER SCROLL PROGRESS ============ */
.hdr-prog { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; }
.hdr-prog i { display:block; height:100%; width:0%;
background:linear-gradient(90deg,#0067D8,#072A50); transition:width .1s linear; }
/* ============ CONTACT CHANNELS ============ */
.cx-contacts { display:flex; flex-direction:column; gap:12px; }
/* primary: navy, carries the weight so the three stop reading as one grey list */
.cx-hero-row { position:relative; display:block; text-decoration:none; overflow:hidden;
background:linear-gradient(140deg,#0A3563 0%,#072A50 58%,#051E3B 100%);
border-radius:16px; padding:20px 22px 22px; color:#fff;
box-shadow:0 2px 4px rgba(7,42,80,.12), 0 22px 44px -26px rgba(7,42,80,.7);
transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.cx-hero-row::after { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(420px circle at var(--mx,70%) var(--my,0%), rgba(0,103,216,.5), transparent 62%);
opacity:0; transition:opacity .45s ease; }
@media (hover:hover){
.cx-hero-row:hover { transform:translateY(-3px);
box-shadow:0 2px 4px rgba(7,42,80,.12), 0 30px 56px -26px rgba(7,42,80,.8); }
.cx-hero-row:hover::after { opacity:1; }
.cx-hero-row:hover .cx-hr-go svg { transform:translateX(4px); }
}
.cx-hero-row > * { position:relative; z-index:1; }
.cx-hr-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.cx-hr-ico { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; }
.cx-hr-ico svg { width:18px; height:18px; }
.cx-hr-live { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#8FE3B6; }
.cx-hr-live i { width:6px; height:6px; border-radius:50%; background:#34D399;
box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:cx-live 2.2s ease-out infinite; }
@keyframes cx-live { 70%{box-shadow:0 0 0 7px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.cx-hr-lab { display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:5px; }
.cx-hr-num { display:block; font-family:'Outfit',sans-serif; font-weight:700;
font-size:clamp(22px,4.4vw,30px); letter-spacing:-0.02em; line-height:1.1; }
.cx-hr-sub { display:block; font-size:12.5px; color:rgba(255,255,255,.62); margin-top:6px; }
.cx-hr-go { display:inline-flex; align-items:center; gap:8px; margin-top:16px;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
background:#0067D8; color:#fff; padding:10px 16px; border-radius:8px; }
.cx-hr-go svg { width:13px; height:13px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
/* secondary tiles */
.cx-mini { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cx-tile { position:relative; display:flex; flex-direction:column; background:#fff;
border:1px solid #E4E9F2; border-radius:14px; padding:16px 16px 14px; min-width:0;
transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.cx-tile-ig { grid-column:1 / -1; }
@media (hover:hover){
.cx-tile:hover { border-color:rgba(0,103,216,.42); transform:translateY(-2px);
box-shadow:0 14px 28px -20px rgba(7,42,80,.55); }
.cx-tile:hover .cx-t-ico { background:#0067D8; color:#fff; }
}
.cx-t-ico { width:32px; height:32px; border-radius:9px; background:rgba(0,103,216,.09); color:#0067D8;
display:flex; align-items:center; justify-content:center; margin-bottom:10px;
transition:background .3s ease, color .3s ease; }
.cx-t-ico svg { width:15px; height:15px; }
.cx-t-lab { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em;
text-transform:uppercase; color:#8B97AA; margin-bottom:4px; }
.cx-t-val { font-family:'Outfit',sans-serif; font-weight:700; font-size:14px; color:#072A50;
line-height:1.25; overflow-wrap:anywhere; }
.cx-t-act { display:flex; gap:8px; margin-top:11px; }
.cx-t-act a, .cx-copy { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
text-transform:uppercase; color:#0067D8; background:rgba(0,103,216,.08); border:0;
border-radius:6px; padding:6px 10px; cursor:pointer; text-decoration:none;
transition:background .25s ease, color .25s ease; }
@media (hover:hover){ .cx-copy:hover { background:#0067D8; color:#fff; } }
.cx-copy.done { background:#12B76A; color:#fff; }
/* Touch devices need 44px targets; keep the compact size for mouse. */
@media (pointer:coarse){
.cx-t-act a, .cx-copy { min-height:44px; display:inline-flex; align-items:center;
justify-content:center; padding:0 16px; font-size:10px; }
.cx-t-act { gap:10px; flex-wrap:wrap; }
.cx-hr-go { min-height:48px; padding:0 18px; display:inline-flex; align-items:center; }
}
@media (max-width:420px){
.cx-mini { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
.cx-hero-row, .cx-tile, .cx-hr-go svg, .cx-t-ico { transition:none !important; }
.cx-hr-live i { animation:none !important; }
}
/* ============ MOBILE NAV ============ */
.nav-burger { width:44px; height:44px; display:flex; align-items:center; justify-content:center;
border:1px solid #D8E0EC; border-radius:10px; background:#fff; color:#072A50; cursor:pointer; }
.nav-burger svg { width:22px; height:22px; }
.nav-burger path { stroke:currentColor; stroke-width:2; stroke-linecap:round;
transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; transform-origin:center; }
.nav-burger[aria-expanded="true"] .nb-t { transform:translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nb-m { transform:translateY(-3px) rotate(-45deg); }
.nav-panel { position:fixed; left:0; right:0; top:0; z-index:45; /* BELOW the header (z-50)
so the burger stays visible and tappable while the panel is open */
background:#fff; border-bottom:1px solid #E4E9F2;
padding:calc(var(--hdr-h, 115px) + 26px) 20px 28px;
box-shadow:0 24px 48px -24px rgba(7,42,80,.45);
transform:translateY(-100%); transition:transform .42s cubic-bezier(.3,.9,.3,1); }
.nav-panel[hidden] { display:block; visibility:hidden; }
.nav-panel.open { transform:translateY(0); visibility:visible; }
.nav-panel a { display:flex; align-items:center; justify-content:space-between;
padding:16px 4px; min-height:52px; text-decoration:none; border-bottom:1px solid #EEF2F8;
font-family:'Outfit',sans-serif; font-weight:700; font-size:20px; color:#072A50;
text-transform:uppercase; letter-spacing:-0.01em; }
.nav-panel a span { font-family:'JetBrains Mono',monospace; font-size:10px;
font-weight:400; letter-spacing:.14em; color:#B3BECE; }
.nav-panel .np-cta { justify-content:center; margin-top:18px; border-bottom:0; border-radius:10px;
background:#0067D8; color:#fff; font-size:12px; letter-spacing:.12em;
font-family:'JetBrains Mono',monospace; font-weight:700; min-height:52px; }
.nav-panel .np-txt { justify-content:center; border-bottom:0; font-family:'JetBrains Mono',monospace;
font-size:11px; font-weight:400; text-transform:none; letter-spacing:.04em; color:#8B97AA; }
body.nav-open { overflow:hidden; }
/* ============ FLOATING PILL (Ray's pattern: one centred pill -> the form) ============ */
#sticky-cta { position:fixed; left:50%; bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));
z-index:55; display:inline-flex; align-items:center; gap:10px;
background:#0067D8; color:#fff; text-decoration:none; border-radius:999px;
padding:0 22px; min-height:50px;
font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
box-shadow:0 14px 34px -10px rgba(0,103,216,.6), 0 2px 6px rgba(7,42,80,.2);
transform:translateX(-50%) translateY(200%); opacity:0;
/* visibility:hidden keeps it OUT OF THE TAB ORDER while invisible, without it a keyboard
user lands on a button they cannot see. Delayed so the slide-out still animates. */
visibility:hidden;
transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease, background .3s ease,
visibility 0s linear .55s; }
#sticky-cta.show { transform:translateX(-50%) translateY(0); opacity:1;
visibility:visible; transition-delay:0s,0s,0s,0s; }
#sticky-cta svg { width:14px; height:14px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ #sticky-cta:hover { background:#072A50; } #sticky-cta:hover svg { transform:translateX(4px); } }
@media (max-width:400px){ #sticky-cta { font-size:10px; padding:0 18px; } }
@media (prefers-reduced-motion: reduce){
.nav-panel, #sticky-cta, .nav-burger path, #sticky-cta svg { transition:none !important; }
}
/* ============ CARD GLOW ============
Adapted from _ui-kit/micro-fx/cards.css, which is built for DARK cards (white overlays).
On white, the spotlight has to be brand blue at low alpha or it reads as dirt. */
@property --glow-a { syntax:''; initial-value:0deg; inherits:false; }
.ap-card, .wk-shot { position:relative; }
/* cursor spotlight */
.ap-card::before, .wk-shot::before {
content:''; position:absolute; inset:0; border-radius:inherit; z-index:2;
pointer-events:none; opacity:0; transition:opacity .35s ease;
background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
rgba(0,103,216,.13) 0%, rgba(0,103,216,.06) 40%, transparent 70%); }
/* rotating border beam */
.ap-card::after, .wk-shot::after {
content:''; position:absolute; inset:0; border-radius:inherit; z-index:3;
pointer-events:none; opacity:0; transition:opacity .4s ease; padding:1.5px;
background:conic-gradient(from var(--glow-a),
transparent 0 58%, rgba(0,103,216,.9) 72%, rgba(125,183,255,.95) 80%, transparent 92% 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; }
@keyframes glow-spin { to { --glow-a:360deg; } }
@media (hover:hover){
.ap-card:hover::before, .wk-card:hover .wk-shot::before { opacity:1; }
.ap-card:hover::after, .wk-card:hover .wk-shot::after { opacity:1; animation:glow-spin 3.4s linear infinite; }
.ap-card:hover { box-shadow:0 2px 4px rgba(7,42,80,.05),
0 26px 48px -22px rgba(7,42,80,.42), 0 0 34px -6px rgba(0,103,216,.34); }
/* the hovered card pops because its neighbours step back */
@media (hover:hover){ .ap-grid:hover .ap-card:not(:hover) { opacity:.72; } }
.ap-card { transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease,
border-color .45s ease, opacity .35s ease; }
}
/* Touch has no hover, so the glow must be permanent. Every card keeps a static ring;
the card nearest the middle of the screen gets the live rotating beam. Only ONE card
animates at a time, six simultaneous conic repaints will jank a phone. */
@media (hover:none){
.ap-card::after, .wk-shot::after { opacity:.5; animation:none; }
.ap-card:nth-child(2)::after { --glow-a:60deg; }
.ap-card:nth-child(3)::after { --glow-a:130deg; }
.ap-card:nth-child(4)::after { --glow-a:200deg; }
.ap-card:nth-child(5)::after { --glow-a:265deg; }
.ap-card:nth-child(6)::after { --glow-a:320deg; }
.ap-card.focus::after { opacity:1; animation:glow-spin 3.6s linear infinite; }
.ap-card.focus::before { opacity:1; }
.ap-card.focus { border-color:rgba(0,103,216,.4);
box-shadow:0 2px 4px rgba(7,42,80,.05), 0 18px 36px -20px rgba(7,42,80,.4),
0 0 30px -6px rgba(0,103,216,.4); }
}
@media (prefers-reduced-motion: reduce){
.ap-card::after, .wk-shot::after { animation:none !important; }
.ap-card::before, .wk-shot::before { transition:none !important; }
.ap-grid:hover .ap-card:not(:hover) { opacity:1 !important; }
}
/* one grouped card instead of three stacked boxes */
.cx-group { background:#fff; border:1px solid #E4E9F2; border-radius:16px; overflow:hidden;
box-shadow:0 1px 2px rgba(7,42,80,.04), 0 14px 30px -24px rgba(7,42,80,.5); }
.cx-grow { display:flex; align-items:center; gap:13px; padding:15px 16px; transition:background .25s ease; }
.cx-grow + .cx-grow { border-top:1px solid #EEF2F8; }
@media (hover:hover){ .cx-grow:hover { background:#F8FAFD; } }
.cx-gico { width:34px; height:34px; flex:none; border-radius:10px; background:rgba(0,103,216,.09);
color:#0067D8; display:flex; align-items:center; justify-content:center;
transition:background .25s ease, color .25s ease; }
.cx-gico svg { width:16px; height:16px; }
@media (hover:hover){ .cx-grow:hover .cx-gico { background:#0067D8; color:#fff; } }
.cx-gbody { flex:1; min-width:0; }
.cx-gbody em { display:block; font-style:normal; font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8B97AA; margin-bottom:3px; }
.cx-gbody strong { display:block; font-family:'Outfit',sans-serif; font-weight:700; font-size:14.5px;
color:#072A50; line-height:1.25; overflow-wrap:anywhere; }
.cx-gacts { flex:none; display:flex; gap:8px; margin-left:auto; align-items:center; }
/* the anchors used to inherit the old .cx-t-act pill; that selector is gone, so state it here */
.cx-gacts a, .cx-gacts .cx-copy {
font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
text-transform:uppercase; font-weight:400; line-height:1;
color:#0067D8; background:rgba(0,103,216,.08); border:0; border-radius:6px;
padding:8px 11px; cursor:pointer; text-decoration:none; white-space:nowrap;
transition:background .25s ease, color .25s ease; }
@media (hover:hover){ .cx-gacts a:hover, .cx-gacts .cx-copy:hover { background:#0067D8; color:#fff; } }
.cx-gacts .cx-copy.done { background:#12B76A; color:#fff; }
/* narrow: actions drop under the value, aligned to the text not the icon */
@media (max-width:520px){
.cx-grow { flex-wrap:wrap; }
.cx-gacts { width:100%; margin-left:47px; margin-top:10px; }
}
@media (pointer:coarse){
.cx-gacts a, .cx-gacts .cx-copy { min-height:44px; display:inline-flex; align-items:center;
justify-content:center; padding:0 16px; }
}
/* ============ FOOTER ============ */
.msw-foot { position:relative; overflow:clip; background:#F6F8FB;
border-top:1px solid #E4E9F2; padding:64px 20px 34px; }
@media (min-width:640px){ .msw-foot { padding:72px 40px 34px; } }
/* blue hairline so the footer starts on a brand note, not a grey rule */
.msw-foot::before { content:''; position:absolute; top:-1px; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, #0067D8 22%, #7FB6FF 50%, #0067D8 78%, transparent); }
/* ghost wordmark for depth */
.ft-mark { position:absolute; left:50%; bottom:-11%; transform:translateX(-50%);
font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:-0.04em;
font-size:clamp(70px,15vw,230px); line-height:.8; color:rgba(7,42,80,.032);
white-space:nowrap; pointer-events:none; user-select:none; }
/* keep the base line legible where it crosses the wordmark */
.msw-foot::after { content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
background:linear-gradient(to top, #F6F8FB 32%, rgba(246,248,251,0)); pointer-events:none; }
.ft-inner { position:relative; z-index:1; }
.ft-top { display:grid; gap:34px; margin-bottom:44px; }
@media (min-width:768px){ .ft-top { grid-template-columns:1.4fr 1fr 1.3fr; gap:40px; } }
.ft-logo { height:36px; width:auto; margin-bottom:14px; }
.ft-brand p { font-family:'Inter',sans-serif; font-style:italic; color:#7C889C;
font-size:14px; line-height:1.6; max-width:22rem; margin-bottom:16px; }
.ft-status { display:inline-flex; align-items:center; gap:8px;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.13em;
text-transform:uppercase; color:#0B8F5A; background:rgba(18,183,106,.09);
border-radius:999px; padding:7px 13px; }
.ft-dot { width:6px; height:6px; border-radius:50%; background:#12B76A; flex:none;
box-shadow:0 0 0 0 rgba(18,183,106,.55); animation:ft-pulse 2.2s ease-out infinite; }
@keyframes ft-pulse { 70%{box-shadow:0 0 0 7px rgba(18,183,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,183,106,0)} }
.ft-col h4 { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.15em;
text-transform:uppercase; color:#8B97AA; margin-bottom:14px; font-weight:400; }
.ft-col a { display:flex; align-items:center; gap:9px; padding:7px 0; min-height:38px;
font-family:'Outfit',sans-serif; font-weight:700; font-size:15px; color:#3D4A60;
text-decoration:none; transition:color .25s ease; overflow-wrap:anywhere; }
.ft-col a svg { width:14px; height:14px; flex:none; color:#B3BECE;
transition:transform .3s cubic-bezier(.2,.8,.2,1), color .25s ease; }
.ft-col:not(.ft-contact) a svg { margin-left:auto; }
@media (min-width:768px){ .ft-col:not(.ft-contact) a { max-width:210px; } }
@media (hover:hover){ .ft-col a:hover { color:#0067D8; } }
@media (hover:hover){ .ft-col a:hover svg { color:#0067D8; } }
@media (hover:hover){ .ft-col:not(.ft-contact) a:hover svg { transform:translateX(4px); } }
.ft-legal { font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.75;
color:#9AA6BA; background:#fff; border:1px solid #E9EEF6; border-radius:12px;
padding:16px 18px; margin-bottom:22px; }
.ft-base { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
align-items:center; padding-top:20px; border-top:1px solid #E4E9F2;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.09em;
text-transform:uppercase; color:#9AA6BA; }
.ft-base-links { display:flex; gap:20px; }
.ft-base-links a { color:#9AA6BA; text-decoration:none; transition:color .25s ease; }
@media (hover:hover){ .ft-base-links a:hover { color:#0067D8; } }
@media (pointer:coarse){ .ft-col a, .ft-base-links a { min-height:44px; } }
@media (prefers-reduced-motion: reduce){
.ft-dot { animation:none !important; }
.ft-col a, .ft-col a svg { transition:none !important; }
}
/* what-you-get chips */
@media (hover:hover){
}
@media (max-width:360px){ }
@media (prefers-reduced-motion: reduce){ }
/* ============ BACKGROUND TEXTURE ============
Adapted from _ui-kit/svg-decorators; its meshes are dark/cream only, so these are
light navy variants. Each section gets a DIFFERENT treatment; one texture everywhere
reads as flat as no texture at all. All layers are pointer-events:none and sit at z-0. */
.tex { position:relative; }
/* lift only the CONTENT wrapper. A blanket `.tex > *` also hits absolutely-positioned
decoration like .hero-glow, forcing it into flow and shoving the page down. */
.tex > .max-w-7xl { position:relative; z-index:1; }
.tex::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; }
/* HERO: blueprint grid, dissolving downward. Reads as "drafted by hand". */
.hero-sec.tex::before {
background-image:
linear-gradient(to right, rgba(7,42,80,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(7,42,80,.055) 1px, transparent 1px);
background-size:34px 34px;
-webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 42%, transparent 82%);
mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 42%, transparent 82%); }
/* APPROACH: dot grid + a cool bloom top-right */
#approach.tex::before {
background-image:
radial-gradient(ellipse 55% 45% at 88% 4%, rgba(0,103,216,.10), transparent 62%),
radial-gradient(rgba(7,42,80,.085) 1px, transparent 1px);
background-size:auto, 23px 23px; }
/* WORK: one big soft bloom bottom-left so the white is not dead */
#work.tex::before {
background-image:
radial-gradient(ellipse 60% 50% at 6% 92%, rgba(0,103,216,.09), transparent 60%),
radial-gradient(ellipse 45% 40% at 96% 18%, rgba(125,183,255,.10), transparent 58%); }
/* CONTACT: bloom behind the panel, plus a faint grid under the form */
#contact.tex::before {
background-image:
radial-gradient(ellipse 52% 46% at 82% 12%, rgba(0,103,216,.11), transparent 60%),
linear-gradient(to right, rgba(7,42,80,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(7,42,80,.04) 1px, transparent 1px);
background-size:auto, 30px 30px, 30px 30px;
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 96%);
mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 96%); }
/* a whisper of grain kills the plastic flatness of the big white areas */
body::after { content:''; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.022;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:170px 170px; }
@media (prefers-reduced-motion: reduce){ /* static layers, nothing to disable */ }
/* featured-five: caption + numbered tabs + a visit affordance */
.hs-frame { position:relative; }
.hs-visit { position:absolute; right:12px; bottom:12px; z-index:3; opacity:0;
display:inline-flex; align-items:center; gap:6px; text-decoration:none;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
text-transform:uppercase; font-weight:700; color:#072A50; background:rgba(255,255,255,.94);
border-radius:999px; padding:9px 14px; box-shadow:0 8px 20px -8px rgba(7,42,80,.5);
transform:translateY(6px); transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ .hs-frame:hover .hs-visit { opacity:1; transform:translateY(0); } }
@media (hover:none){ .hs-visit { opacity:1; transform:none; } }
.hs-meta { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px; }
.hs-name { display:block; font-family:'Outfit',sans-serif; font-weight:700; font-size:17px;
color:#072A50; line-height:1.2; }
.hs-sub { display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
letter-spacing:.12em; text-transform:uppercase; color:#8B97AA; margin-top:5px; }
.hs-count { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
color:#B3BECE; flex:none; }
.hs-count b { color:#0067D8; font-weight:400; }
.hs-tabs { display:flex; gap:7px; margin-top:14px; flex-wrap:wrap; }
.hs-tabs button { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
background:#fff; border:1px solid #E4E9F2; border-radius:999px; padding:8px 13px;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em;
text-transform:uppercase; color:#8B97AA; min-height:36px;
transition:border-color .25s ease, color .25s ease, background .25s ease; }
.hs-tabs button b { color:#B3BECE; font-weight:400; transition:color .25s ease; }
.hs-tabs button.on { border-color:rgba(0,103,216,.45); color:#072A50; background:rgba(0,103,216,.05); }
.hs-tabs button.on b { color:#0067D8; }
@media (hover:hover){ .hs-tabs button:hover { border-color:rgba(0,103,216,.45); color:#072A50; } }
@media (pointer:coarse){ .hs-tabs button { min-height:44px; } }
@media (max-width:420px){ .hs-tabs button span { display:none; } .hs-tabs button { padding:8px 14px; } }
.wk-more { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:18px; margin-top:34px; padding:22px 24px; border:1px dashed #CBD6E6; border-radius:16px;
background:rgba(255,255,255,.7); }
.wk-more-h { font-family:'Outfit',sans-serif; font-weight:700; font-size:17px; color:#072A50; margin-bottom:5px; }
.wk-more p { color:#626C82; font-size:14px; line-height:1.55; max-width:44ch; }
.wk-more-btn { display:inline-flex; align-items:center; gap:9px; flex:none; min-height:48px;
padding:0 20px; border-radius:10px; background:#0067D8; color:#fff; text-decoration:none;
font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; transition:background .3s ease; }
.wk-more-btn svg { width:14px; height:14px; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ .wk-more-btn:hover { background:#072A50; } .wk-more-btn:hover svg { transform:translateX(4px); } }
@media (max-width:640px){ .wk-more { margin-top:10px; padding:20px; } .wk-more-btn { width:100%; justify-content:center; } }
/* ============ COLLABORATIONS STAGE ============
White browser-frame cards on a white page float on nothing. A navy stage gives them a
ground, and breaks a run of five near-white sections. Decoration is static, no animation. */
.wk-stage { position:relative; border-radius:26px; overflow:hidden; margin-top:6px;
background:linear-gradient(158deg,#0A3563 0%,#072A50 46%,#04182F 100%);
box-shadow:0 2px 4px rgba(7,42,80,.12), 0 40px 80px -46px rgba(7,42,80,.85); }
.wk-stage::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:
radial-gradient(ellipse 48% 40% at 88% 4%, rgba(0,103,216,.55), transparent 62%),
radial-gradient(ellipse 52% 44% at 4% 96%, rgba(0,103,216,.34), transparent 64%),
radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
background-size:auto, auto, 26px 26px; }
.wk-stage::after { content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.055) 50%, transparent 62%); }
.wk-stage-in { position:relative; z-index:1; padding:34px; }
@media (min-width:768px){ .wk-stage-in { padding:44px; } }
@media (max-width:640px){ .wk-stage-in { padding:24px 0 26px; } }
/* captions now sit on navy, so they invert */
.wk-stage .wk-name { color:#fff; }
.wk-stage .wk-tags { color:rgba(255,255,255,.52); }
.wk-stage .wk-shot { border-color:rgba(255,255,255,.14);
box-shadow:0 2px 4px rgba(0,0,0,.25), 0 22px 44px -22px rgba(0,0,0,.75); }
@media (hover:hover){
.wk-stage .wk-card:hover .wk-name { color:#7FB6FF; }
.wk-stage .wk-card:hover .wk-shot { border-color:rgba(127,182,255,.55);
box-shadow:0 2px 4px rgba(0,0,0,.3), 0 34px 60px -26px rgba(0,0,0,.9); }
}
.wk-stage .wk-more { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05); }
.wk-stage .wk-more-h { color:#fff; }
.wk-stage .wk-more p { color:rgba(255,255,255,.66); }
@media (hover:hover){ .wk-stage .wk-more-btn:hover { background:#fff; color:#072A50; } }
/* on phone the rail bleeds to the STAGE edges, not the viewport */
@media (max-width:640px){
.wk-stage .wk-rail { margin:0; padding:4px 24px 18px; }
.wk-stage .wk-more { margin:0 24px; }
}
/* drafting corner marks: registration ticks just outside each card, echoing the
blueprint grid in the hero. Static by default, they open outward on hover. */
.ap-frame { position:absolute; inset:0; pointer-events:none; z-index:4; }
.ap-frame i { position:absolute; width:15px; height:15px; border:1.5px solid #C6D2E3;
transition:border-color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.ap-frame i:nth-child(1){ top:-6px; left:-6px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.ap-frame i:nth-child(2){ top:-6px; right:-6px; border-left:0; border-bottom:0; border-radius:0 4px 0 0; }
.ap-frame i:nth-child(3){ bottom:-6px; left:-6px; border-right:0; border-top:0; border-radius:0 0 0 4px; }
.ap-frame i:nth-child(4){ bottom:-6px; right:-6px; border-left:0; border-top:0; border-radius:0 0 4px 0; }
@media (hover:hover){
.ap-card:hover .ap-frame i { border-color:#0067D8; }
.ap-card:hover .ap-frame i:nth-child(1){ transform:translate(-3px,-3px); }
.ap-card:hover .ap-frame i:nth-child(2){ transform:translate(3px,-3px); }
.ap-card:hover .ap-frame i:nth-child(3){ transform:translate(-3px,3px); }
.ap-card:hover .ap-frame i:nth-child(4){ transform:translate(3px,3px); }
}
/* touch: the in-focus card lights its marks too */
@media (hover:none){ .ap-card.focus .ap-frame i { border-color:#0067D8; } }
/* the grid needs breathing room or the marks collide with the neighbouring card */
.ap-grid { gap:22px; }
@media (min-width:768px){ .ap-grid { gap:32px; } }
@media (prefers-reduced-motion: reduce){ .ap-frame i { transition:none !important; } }
/* 🚨 overflow-x:hidden on body makes it a scroll container and KILLS position:sticky on
the header. `clip` prevents the same sideways overflow without that side effect. */
body { overflow-x:clip; }
/* Anchor jumps must clear the (now genuinely) sticky header, or the section heading
lands underneath it. --hdr-height is published by the header observer below. */
html { scroll-padding-top:calc(var(--hdr-height, 128px) + 18px); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
/* ================= PRESS FEEDBACK =================
The site had ZERO :active rules. `.btn-float` was copied from _ui-kit/micro-fx/buttons.css
without its :active half, so nothing on the page responded to being pressed.
Kit timing table: feedback = ~100ms, ease-in, and faster than navigation. ============= */
/* we draw our own press state, so kill the browser's grey flash box (it ignores
border-radius and paints a rectangle over pill buttons) */
/* ===== FAQ (Chapter 03) ===== */
.faq-list { border-top:1px solid #DFE3EA; }
.faq-item { border-bottom:1px solid #DFE3EA; }
.faq-item summary {
list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:16px;
padding:20px 2px; font-family:'Outfit',sans-serif; font-weight:600;
font-size:clamp(15px,2.1vw,18px); line-height:1.35; color:#072A50;
transition:color .2s ease; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-q { flex:1; }
.faq-n { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
color:#0067D8; padding-top:4px; letter-spacing:.06em; flex:none; }
.faq-ico { flex:none; width:22px; height:22px; margin-top:1px; position:relative; }
.faq-ico::before, .faq-ico::after {
content:''; position:absolute; left:50%; top:50%; background:#0067D8; border-radius:2px;
transform:translate(-50%,-50%); transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.faq-ico::before { width:13px; height:2px; }
.faq-ico::after { width:2px; height:13px; }
.faq-item[open] .faq-ico::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item[open] summary { color:#0067D8; }
@media (hover:hover){ .faq-item summary:hover { color:#0067D8; } }
.faq-item summary:active { opacity:.65; transition-duration:.08s; }
.faq-a { overflow:hidden; }
.faq-a p { padding:0 38px 24px 38px; margin:0; color:#626C82;
font-size:clamp(14px,1.9vw,15.5px); line-height:1.72; max-width:62ch; }
.faq-item[open] .faq-a { animation:faqIn .34s cubic-bezier(.4,0,.2,1) both; }
@keyframes faqIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (min-width:1024px){
.faq-lead { position:sticky; top:calc(var(--hdr-height, 128px) + 44px); align-self:start; }
}
.faq-aside { border-left:2px solid #0067D8; padding:4px 0 4px 18px; margin-top:34px; }
.faq-aside p { color:#626C82; font-size:14px; line-height:1.7; margin:0 0 10px; }
.faq-aside a { color:#0067D8; font-weight:600; text-decoration:none;
font-family:'Outfit',sans-serif; font-size:15px; border-bottom:1px solid rgba(0,103,216,.3); }
@media (hover:hover){ .faq-aside a:hover { border-bottom-color:#0067D8; } }
.faq-aside a:active { opacity:.6; transition-duration:.08s; }
@media (max-width:640px){ .faq-a p { padding:0 0 22px 38px; } }
@media (prefers-reduced-motion:reduce){
.faq-item[open] .faq-a { animation:none; }
.faq-ico::before, .faq-ico::after { transition:none; } }
a, button, [role="button"], input, select, textarea, .ap-card, .wk-card, .cx-grow {
-webkit-tap-highlight-color:transparent; }
/* --- primary buttons: compress --- */
.hero-btn:active, .wk-more-btn:active, .np-cta:active, .cx-hr-go:active {
transform:scale(.97); transition-duration:.1s; transition-timing-function:ease-in; }
/* .btn-float hovers to translateY(-3px); pressing must land it and shrink slightly.
Matches the kit's own .btn-float:active (translateY(0) + reduced shadow). */
.btn-float:active {
transform:translateY(0) scale(.98) !important;
box-shadow:0 2px 8px rgba(7,42,80,.25);
transition-duration:.1s; transition-timing-function:ease-in; }
/* the floating pill is translateX(-50%) centred — the press MUST preserve that or it jumps */
#sticky-cta:active { transform:translateX(-50%) translateY(0) scale(.97);
transition-duration:.1s; transition-timing-function:ease-in; }
/* --- small pills --- */
.hs-tabs button:active, .cx-copy:active, .cx-gacts a:active, .ft-base-links a:active,
.hs-visit:active { transform:scale(.94); transition-duration:.1s; transition-timing-function:ease-in; }
.nav-burger:active { transform:scale(.92); transition-duration:.1s; }
/* --- large surfaces: barely move, or it reads as a glitch --- */
.ap-card:active, .wk-card:active { transform:scale(.988); transition-duration:.12s; }
.cx-hero-row:active { transform:translateY(-1px) scale(.994); transition-duration:.12s; }
.cx-grow:active { background:#EEF3FA; transition-duration:.08s; }
.cx-row:active { transform:scale(.99); transition-duration:.12s; }
/* --- text links: a quick dim reads better than a shift --- */
.ft-col a:active, .nav-panel a:active, header nav a:active { opacity:.6; transition-duration:.08s; }
@media (prefers-reduced-motion: reduce){
.hero-btn:active, .wk-more-btn:active, .np-cta:active, .cx-hr-go:active, .btn-float:active,
#sticky-cta:active, .hs-tabs button:active, .cx-copy:active, .cx-gacts a:active,
.ft-base-links a:active, .hs-visit:active, .nav-burger:active, .ap-card:active,
.wk-card:active, .cx-hero-row:active, .cx-row:active { transform:none !important; }
}
/* ===== legal pages (privacy / terms) ===== */
/* was #bdb7a8, the old dark-theme muted beige: 2.00:1 on white. now the site's muted token. */
.legal-prose p, .legal-prose li { color:#626C82; line-height:1.72; }
.legal-prose strong { color:#072A50; font-weight:600; }
.legal-prose a { color:#0067D8; text-decoration:underline; }
.legal-prose h2 { font-family:'Outfit', sans-serif; font-weight:700; color:#072A50; }
/* ======================================================================
TRADE LANDING PAGES (tp-*)
Reuses hero-*, wk-* and faq-* wholesale; only these blocks are new.
====================================================================== */
/* --- the "what it's costing you" band: a tinted ground so five near-white
sections in a row don't read as one endless page --- */
.tp-band { background:#F6F8FB; }
.tp-band::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(rgba(0,103,216,.10) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 72%);
mask-image:linear-gradient(180deg, #000 0%, transparent 72%); }
.tp-band > * { position:relative; z-index:1; }
.tp-probs { display:grid; gap:18px; }
@media (min-width:900px){ .tp-probs { grid-template-columns:repeat(3,1fr); gap:22px; } }
.tp-prob { position:relative; background:#fff; border:1px solid #DFE3EA; border-radius:18px;
padding:30px 26px 28px; transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
box-shadow:0 1px 2px rgba(7,42,80,.05); }
.tp-prob::before, .tp-prob::after { content:''; position:absolute; width:13px; height:13px;
border:1.5px solid #C6D2E3; pointer-events:none; transition:border-color .35s ease; }
.tp-prob::before { top:13px; left:13px; border-right:0; border-bottom:0; border-radius:3px 0 0 0; }
.tp-prob::after { bottom:13px; right:13px; border-left:0; border-top:0; border-radius:0 0 3px 0; }
@media (hover:hover){
.tp-prob:hover { border-color:#B9D2F3; transform:translateY(-3px);
box-shadow:0 2px 4px rgba(7,42,80,.06), 0 22px 40px -26px rgba(7,42,80,.55); }
.tp-prob:hover::before, .tp-prob:hover::after { border-color:#0067D8; }
}
.tp-prob:active { transform:scale(.988); transition-duration:.12s; }
.tp-prob-n { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
letter-spacing:.14em; color:#0067D8; display:block; margin-bottom:14px; }
.tp-prob h3 { font-family:'Outfit',sans-serif; font-weight:700; color:#072A50;
font-size:clamp(17px,2.4vw,20px); line-height:1.24; margin:0 0 11px; }
.tp-prob p { color:#626C82; font-size:clamp(14px,1.9vw,15px); line-height:1.7; margin:0; }
/* --- the "what you get" checklist --- */
.tp-inc { list-style:none; margin:0; padding:0; border-top:1px solid #DFE3EA; }
.tp-inc li { position:relative; padding:17px 0 17px 38px; border-bottom:1px solid #DFE3EA;
color:#072A50; font-size:clamp(14.5px,2vw,16px); line-height:1.62;
font-family:'Outfit',sans-serif; font-weight:500; }
.tp-inc li::before { content:''; position:absolute; left:2px; top:22px; width:15px; height:8px;
border-left:2px solid #0067D8; border-bottom:2px solid #0067D8;
transform:rotate(-45deg); border-radius:1px; }
/* --- closing CTA band --- */
.tp-cta { background:linear-gradient(158deg,#0A3563 0%,#072A50 52%,#04182F 100%);
border-bottom-color:rgba(255,255,255,.12) !important; }
.tp-cta::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:
radial-gradient(ellipse 46% 42% at 92% 6%, rgba(0,103,216,.5), transparent 62%),
radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
background-size:auto, 26px 26px; }
.tp-cta-in { position:relative; z-index:1; display:grid; gap:30px; align-items:center; }
@media (min-width:1000px){ .tp-cta-in { grid-template-columns:1.35fr .85fr; gap:56px; } }
.tp-cta .eyebrow { color:#7FB6FF; }
.tp-cta h2 { color:#fff; }
.tp-cta .ital { color:#7FB6FF; }
.tp-cta p { color:rgba(255,255,255,.7); font-size:clamp(14.5px,2vw,16px);
line-height:1.72; max-width:52ch; margin:0; }
.tp-cta-acts { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
@media (min-width:1000px){ .tp-cta-acts { align-items:flex-end; } }
.tp-cta-acts .hero-btn-p { background:#fff; color:#072A50; border-color:#fff; }
@media (hover:hover){ .tp-cta-acts .hero-btn-p:hover { background:#7FB6FF; border-color:#7FB6FF; color:#04182F; } }
.tp-cta-sms { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em;
text-transform:uppercase; color:rgba(255,255,255,.62); text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:3px; min-height:44px;
display:inline-flex; align-items:center; }
@media (hover:hover){ .tp-cta-sms:hover { color:#fff; border-bottom-color:#fff; } }
.tp-cta-sms:active { opacity:.6; transition-duration:.08s; }
@media (min-width:1024px){
.tp-lead { position:sticky; top:calc(var(--hdr-height, 128px) + 44px); align-self:start; }
}
/* phone: the problem cards become a full-bleed snap rail, not a stack of boxes */
@media (max-width:640px){
.tp-probs { grid-auto-flow:column; grid-auto-columns:82%; gap:14px;
overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
margin:0 -20px; padding:4px 20px 18px; }
.tp-probs::-webkit-scrollbar { display:none; }
.tp-prob { scroll-snap-align:center; }
}
@media (prefers-reduced-motion: reduce){
.tp-prob { transition:none; }
}
/* touch: the aside CTA links are standalone actions, not inline prose links,
so they need a real hit area like every other button on the site */
@media (pointer:coarse){
.faq-aside a { min-height:44px; display:inline-flex; align-items:center; }
.hs-visit { min-height:44px; }
/* the logo is a nav link; its hit area was the height of the image, 32px */
header nav a[href="/"] { min-height:44px; }
}
/* ======================================================================
APPROACH CARDS: body copy collapsed behind an info button
The text stays in the DOM and stays rendered (a 0fr grid row, not
display:none) so search engines still read it. Only the height moves.
====================================================================== */
/* cards size to their own content, so opening one does not stretch its
row-mates into a column of whitespace */
.ap-grid { align-items:start; }
.ap-head { display:flex; align-items:flex-start; gap:8px; margin-bottom:7px; }
.ap-head .ap-title { margin-bottom:0; flex:0 1 auto; }
/* The dot reads as 22px but the BUTTON is a real 44px box; negative margins pull the
extra padding back out of the layout so nothing moves. A ::after overlay would have
looked the same and not been measurable as a tap target. */
.ap-info { flex:none; width:44px; height:44px; padding:11px;
margin:-10px -11px -11px -11px;
display:inline-flex; align-items:center; justify-content:center;
border:0; background:transparent; color:#9AA6BC; cursor:pointer;
border-radius:50%; transition:color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.ap-info svg { width:22px; height:22px; display:block; }
@media (hover:hover){ .ap-info:hover { color:#0067D8; } }
.ap-info:active { transform:scale(.88); transition-duration:.1s; }
.ap-info:focus-visible { outline:2px solid #0067D8; outline-offset:3px; }
.ap-card.ap-open .ap-info { color:#0067D8; }
/* the "i" swaps to an x when open. rotating the whole icon turned the i upside down
and read as an exclamation mark, i.e. a warning. */
.ap-i-close { opacity:0; transform:rotate(-90deg); transform-origin:12px 12px;
transition:opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1); }
.ap-i-info { opacity:1; transform:none; transform-origin:12px 12px;
transition:opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1); }
.ap-card.ap-open .ap-i-close { opacity:1; transform:none; }
.ap-card.ap-open .ap-i-info { opacity:0; transform:rotate(90deg); }
.ap-more { display:grid; grid-template-rows:0fr;
transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.ap-more-in { overflow:hidden; min-height:0;
/* keep it out of the tab order and off screen readers while shut, but only
AFTER the collapse finishes, or the animation snaps */
visibility:hidden; transition:visibility 0s linear .4s; }
.ap-card.ap-open .ap-more { grid-template-rows:1fr; }
.ap-card.ap-open .ap-more-in { visibility:visible; transition-delay:0s; }
/* pressing the info button should not press the whole card */
.ap-card:active:has(.ap-info:active) { transform:none; }
@media (min-width:768px){
.ap-info svg { width:24px; height:24px; }
.ap-head { gap:9px; }
}
@media (prefers-reduced-motion: reduce){
.ap-more, .ap-more-in, .ap-info, .ap-i-info, .ap-i-close { transition:none; }
}
/* --- footer: the one-sentence trade link line ---
This single sentence is the only internal link the 13 trade pages have.
It is prose on purpose: Ray removed the homepage directory, the footer pill
row and the nav item, so anything that reads as a widget gets cut again. */
/* element+class: a bare .ft-trades-line loses to `.ft-brand p` (0,1,1) and keeps the
tagline's italic. Same specificity trap as the .ital rule on the headline. */
.ft-brand p.ft-trades-line { margin:13px 0 18px; color:#98A2B5; font-size:12.5px;
line-height:1.95; font-style:normal; max-width:44ch; }
.ft-trades-line a { color:#5F6B82; text-decoration:none;
/* dotted, not solid: thirteen solid underlines in one paragraph reads as a link farm */
border-bottom:1px dotted rgba(95,107,130,.45);
transition:color .22s ease, border-color .22s ease; }
@media (hover:hover){
.ft-trades-line a:hover { color:#0067D8; border-bottom:1px solid #0067D8; } }
.ft-trades-line a:active { color:#0067D8; opacity:.65; transition-duration:.08s; }
/* ======================================================================
LEGITIMACY SECTION (lg-*)
No icon chips. A pale rounded square with a generic stroke glyph is the
single most recognisable "AI landing page" tell, and this is the section
whose whole job is looking credible. It uses the site's own editorial
furniture instead: mono record tags and the drafting corner marks.
====================================================================== */
.lg-head { display:grid; gap:18px; margin-bottom:36px; }
@media (min-width:900px){ .lg-head { grid-template-columns:1fr .92fr; gap:56px; align-items:end; } }
.lg-head p { color:#626C82; font-size:clamp(14px,1.9vw,15.5px); line-height:1.75; margin:0; max-width:52ch; }
.lg-grid { display:grid; gap:16px; align-items:start; }
@media (min-width:860px){ .lg-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } }
.lg-card { position:relative; background:#fff; border:1px solid #DFE3EA; border-radius:16px;
padding:24px 22px 20px; box-shadow:0 1px 2px rgba(7,42,80,.05);
display:flex; flex-direction:column;
transition:border-color .35s ease, box-shadow .35s ease; }
@media (hover:hover){
.lg-card:hover { border-color:#B9D2F3;
box-shadow:0 2px 4px rgba(7,42,80,.06), 0 22px 40px -28px rgba(7,42,80,.5); }
}
/* the drafting marks, same furniture as the approach cards */
.lg-frame { position:absolute; inset:0; pointer-events:none; }
.lg-frame i { position:absolute; width:14px; height:14px; border:1.5px solid #C6D2E3;
transition:border-color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.lg-frame i:nth-child(1){ top:-6px; left:-6px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.lg-frame i:nth-child(2){ top:-6px; right:-6px; border-left:0; border-bottom:0; border-radius:0 4px 0 0; }
.lg-frame i:nth-child(3){ bottom:-6px; left:-6px; border-right:0; border-top:0; border-radius:0 0 0 4px; }
.lg-frame i:nth-child(4){ bottom:-6px; right:-6px; border-left:0; border-top:0; border-radius:0 0 4px 0; }
@media (hover:hover){
.lg-card:hover .lg-frame i { border-color:#0067D8; }
.lg-card:hover .lg-frame i:nth-child(1){ transform:translate(-3px,-3px); }
.lg-card:hover .lg-frame i:nth-child(2){ transform:translate(3px,-3px); }
.lg-card:hover .lg-frame i:nth-child(3){ transform:translate(-3px,3px); }
.lg-card:hover .lg-frame i:nth-child(4){ transform:translate(3px,3px); }
}
/* mono record tag + hairline, the site's existing eyebrow language */
.lg-tag { display:flex; align-items:center; gap:9px; padding-bottom:11px; margin-bottom:14px;
border-bottom:1px solid #EAEEF5;
font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:#8A94A8; }
.lg-tag i { font-style:normal; color:#0067D8; font-weight:600; letter-spacing:.1em; }
.lg-card h3 { font-family:'Outfit',sans-serif; font-weight:700; color:#072A50;
font-size:clamp(16.5px,2.2vw,19px); line-height:1.22; margin:0 0 10px; letter-spacing:-.018em; }
.lg-card p { color:#626C82; font-size:clamp(14px,1.9vw,14.8px); line-height:1.72; margin:0 0 16px; }
.lg-go { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
min-height:44px; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
letter-spacing:.11em; text-transform:uppercase; color:#0067D8; text-decoration:none; }
.lg-go svg { width:14px; height:14px; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ .lg-go:hover svg { transform:translateX(4px); } }
.lg-go:active { opacity:.6; transition-duration:.08s; }
/* --- the filing card runs the full width and carries the record itself --- */
@media (min-width:860px){ .lg-wide { grid-column:1 / -1; } }
.lg-wide-in { display:grid; gap:24px; }
@media (min-width:1000px){ .lg-wide-in { grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; } }
.lg-wide-copy { display:flex; flex-direction:column; }
.lg-wide .lg-acts { margin-top:2px; }
.lg-acts { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.lg-btn { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 17px;
background:#072A50; color:#fff; border-radius:999px; text-decoration:none;
font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
transition:background .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.lg-btn svg { width:14px; height:14px; }
@media (hover:hover){ .lg-btn:hover { background:#0067D8; } }
.lg-btn:active { transform:scale(.96); transition-duration:.08s; }
.lg-copy { min-height:44px; padding:0 16px; border:1px solid #DFE3EA; border-radius:999px;
background:#fff; color:#072A50; cursor:pointer;
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.09em;
text-transform:uppercase; font-weight:500;
transition:border-color .25s ease, color .25s ease, background .25s ease; }
@media (hover:hover){ .lg-copy:hover { border-color:#0067D8; color:#0067D8; background:#F4F8FE; } }
.lg-copy:active { transform:scale(.96); transition-duration:.08s; }
.lg-copy.done { background:#12B76A; border-color:#12B76A; color:#fff; }
/* the record panel: a faithful read of the state's own result row */
.lg-record { border:1px solid #DDE4EE; border-radius:13px; overflow:hidden; background:#fff;
box-shadow:0 1px 2px rgba(7,42,80,.05), 0 18px 34px -26px rgba(7,42,80,.5); }
.lg-rec-bar { display:flex; align-items:center; gap:9px; padding:11px 15px;
background:#F4F7FC; border-bottom:1px solid #E4EAF3;
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.11em;
text-transform:uppercase; color:#5F6B82; }
.lg-rec-dot { width:7px; height:7px; border-radius:50%; background:#12B76A; flex:none; }
/* gap:1px over a hairline-coloured background draws perfect internal rules with no
doubling at the edges and no empty bordered cell when the count is short */
.lg-rec-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px; margin:0; background:#EDF1F7; border-bottom:1px solid #EDF1F7; }
@media (min-width:620px){ .lg-rec-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.lg-rec-grid > div { padding:13px 15px; min-width:0; background:#fff; }
.lg-rec-grid dt { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em;
text-transform:uppercase; color:#98A2B5; margin:0 0 5px; }
.lg-rec-grid dd { margin:0; font-family:'Outfit',sans-serif; font-weight:600; color:#072A50;
font-size:13.5px; line-height:1.35; overflow-wrap:anywhere; }
.lg-rec-grid .lg-mono { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.02em; }
.lg-ok { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
background:rgba(18,183,106,.11); color:#0B7A47; font-family:'JetBrains Mono',monospace;
font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.lg-rec-foot { margin:0; padding:11px 15px; font-size:11.5px; color:#8A94A8; line-height:1.6; }
.lg-rec-foot a { color:#5F6B82; text-decoration:none; border-bottom:1px dotted rgba(95,107,130,.45); }
@media (hover:hover){ .lg-rec-foot a:hover { color:#0067D8; border-bottom-color:#0067D8; } }
.lg-rec-foot a:active { opacity:.6; transition-duration:.08s; }
@media (prefers-reduced-motion: reduce){ .lg-card, .lg-frame i, .lg-go svg { transition:none; } }