/* ================================================================
design.css — SERVORA design system (the single source of truth).
Aesthetic: "Professional Trade meets modern SaaS" — deep blue, crisp
white cards on a cool-clean canvas, soft layered shadows, confident
Inter type, tabular numbers for money. Calm, trustworthy, premium.
Every class hook below is used across the contractor console, client
portal, subcontractor portal, command center, and marketing site.
Fonts (Inter) load via a in each page's :
================================================================ */
:root{
/* COLOR — one loud accent (Servora deep blue). Cool-neutral canvas. */
--ink:#101828; /* headlines, primary text (blue-black) */
--ink-2:#1D2939; /* slightly softer heading ink */
--slate:#667085; /* secondary text */
--slate-2:#98A2B3; /* tertiary / captions */
--paper:#F5F7FB; /* cool off-white page bg */
--paper-2:#EEF2F8; /* recessed surfaces */
--card:#FFFFFF;
--line:#E6EAF0; /* hairline borders */
--line-2:#EEF1F6; /* subtle inner dividers */
--accent:#1D4ED8; /* SERVORA deep blue — primary action / active */
--accent-2:#2E6BF0; /* lighter stop for gradients */
--accent-ink:#1A3FB0; /* hover / pressed */
--accent-tint:#EAF1FE; /* accent wash for bars/badges/tints */
--accent-glow:rgba(29,78,216,.16); /* focus ring */
--grad-accent:linear-gradient(180deg,var(--accent-2),var(--accent));
--on-ink:#C3C9D4; /* muted text/icons on dark (--ink) surfaces */
--on-accent:#FFFFFF; /* text/icon ON the accent (contrast-guarded on client portal) */
--ok:#12A150; --ok-tint:#E7F6EC; /* paid / signed / done */
--alert:#E5484D; --alert-tint:#FDECEC;/* needs-you: unpaid / unsigned / overdue */
--warn:#D9820A; --warn-tint:#FBF0DC; /* pending / waiting */
--neutral-tint:#EEF1F6;
/* TYPE */
--font-display:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* SPACE (8px grid) */
--s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
/* SHAPE — a small radius scale */
--r-sm:8px; --radius:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
/* DEPTH — soft, layered, low-opacity (the modern floating-card look) */
--shadow-xs:0 1px 2px rgba(16,24,40,.05);
--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
--shadow-md:0 2px 6px -2px rgba(16,24,40,.08),0 8px 18px -6px rgba(16,24,40,.12);
--shadow-lg:0 4px 10px -4px rgba(16,24,40,.10),0 20px 40px -12px rgba(16,24,40,.20);
--shadow-accent:0 6px 18px -6px rgba(29,78,216,.45);
--shadow:var(--shadow-sm); /* back-compat alias */
--tap:48px; /* min tap target */
--ease:cubic-bezier(.4,0,.2,1);
}
/* ---- base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
font-family:var(--font-ui);
font-size:16px; line-height:1.55;
color:var(--ink); background:var(--paper);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
font-feature-settings:"cv05" 1,"ss01" 1;
}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.018em;color:var(--ink);margin:0 0 var(--s2)}
h1{font-size:1.55rem}
h2{font-size:1.28rem;letter-spacing:-.015em}
h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 var(--s3)}
a{color:var(--accent);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent-ink)}
.u-slate{color:var(--slate)}
.u-mono-num{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.u-center{text-align:center}
small{font-size:.8rem;color:var(--slate)}
hr{border:none;border-top:1px solid var(--line);margin:var(--s4) 0}
/* keyboard focus — visible, on-brand, never on mouse click */
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow);border-radius:var(--r-sm)}
/* subtle custom scrollbars (desktop) */
@media(pointer:fine){
*{scrollbar-width:thin;scrollbar-color:#CBD2DE transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#CBD2DE;border-radius:8px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#AEB7C6;background-clip:content-box}
}
/* ---- layout helpers ---- */
.ds-wrap{max-width:1000px;margin:0 auto;padding:var(--s4) var(--s3)}
.ds-narrow{max-width:440px;margin:0 auto;padding:var(--s5) var(--s3)}
.ds-stack>*+*{margin-top:var(--s3)}
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
/* ================================================================
CORE COMPONENTS
================================================================ */
/* BUTTON — gradient primary with accent glow + tactile press. */
.ds-btn{
--btn-bg:var(--grad-accent); --btn-fg:var(--on-accent); --btn-bd:transparent; --btn-sh:var(--shadow-accent);
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s4);
font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;letter-spacing:-.01em;
color:var(--btn-fg);background:var(--btn-bg);border:1px solid var(--btn-bd);
border-radius:var(--radius);cursor:pointer;text-align:center;white-space:nowrap;
box-shadow:var(--btn-sh);
transition:transform .12s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease),opacity .15s;
}
.ds-btn:hover{transform:translateY(-1px);--btn-sh:0 8px 22px -6px rgba(29,78,216,.5)}
.ds-btn:active{transform:translateY(0);--btn-sh:0 2px 8px -3px rgba(29,78,216,.5)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.ds-btn--secondary{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:var(--line);--btn-sh:var(--shadow-xs)}
.ds-btn--secondary:hover{--btn-bg:#fff;--btn-bd:var(--slate-2);--btn-sh:var(--shadow-sm)}
.ds-btn--quiet{--btn-bg:transparent;--btn-fg:var(--accent);--btn-bd:transparent;--btn-sh:none;padding:0 var(--s2)}
.ds-btn--quiet:hover{--btn-bg:var(--accent-tint);--btn-fg:var(--accent-ink);transform:none}
.ds-btn--block{width:100%}
.ds-btn--sm{min-height:38px;font-size:13.5px;padding:0 var(--s3);border-radius:var(--r-sm)}
.ds-btn--lock{--btn-bg:#EEF1F6;--btn-fg:var(--slate);--btn-bd:var(--line);--btn-sh:none;cursor:not-allowed}
.ds-btn--lock:hover{--btn-bg:#EEF1F6;transform:none}
.ds-btn--danger{--btn-bg:var(--alert);--btn-sh:0 6px 18px -6px rgba(229,72,77,.45)}
.ds-btn--success{--btn-bg:var(--ok);--btn-sh:0 6px 18px -6px rgba(18,161,80,.45)}
.ds-spinner{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.45);
border-top-color:#fff;border-radius:50%;animation:ds-spin .7s linear infinite;display:inline-block}
.ds-btn--secondary .ds-spinner{border-color:rgba(16,24,40,.25);border-top-color:var(--ink)}
@keyframes ds-spin{to{transform:rotate(360deg)}}
/* STATUS CHIP — pill, icon + word + color (never color alone). */
.ds-chip{display:inline-flex;align-items:center;gap:5px;
font-size:11.5px;font-weight:600;line-height:1;padding:5px 10px;
border-radius:var(--r-pill);white-space:nowrap;letter-spacing:.01em}
.ds-chip .ds-chip__ico{font-size:12px;line-height:1;margin-top:-1px}
.ds-chip--ok{background:var(--ok-tint);color:var(--ok)}
.ds-chip--alert{background:var(--alert-tint);color:var(--alert)}
.ds-chip--warn{background:var(--warn-tint);color:var(--warn)}
.ds-chip--accent{background:var(--accent-tint);color:var(--accent-ink)}
.ds-chip--neutral{background:var(--neutral-tint);color:var(--slate)}
/* CARD — white, soft shadow, generous radius. Tap cards lift on hover. */
.ds-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s4);box-shadow:var(--shadow-sm)}
.ds-card+.ds-card{margin-top:var(--s3)}
.ds-card--raised{box-shadow:var(--shadow-md)}
.ds-card--tap{cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.ds-card--tap:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#DBE1EA}
.ds-card--tap:active{transform:translateY(0)}
/* INPUT — soft, focus glow ring. */
.ds-field{margin-bottom:var(--s3)}
.ds-label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink-2);letter-spacing:-.005em}
.ds-input,.ds-select,.ds-textarea{
width:100%;min-height:var(--tap);padding:0 var(--s3);
font-family:var(--font-ui);font-size:15px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--slate-2)}
.ds-textarea{min-height:112px;padding:var(--s3);resize:vertical;line-height:1.55}
.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.ds-input--err{border-color:var(--alert)}
.ds-input--err:focus{box-shadow:0 0 0 3px rgba(229,72,77,.16)}
.ds-error{color:var(--alert);font-size:13px;margin-top:6px;font-weight:500}
.ds-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0;font-weight:400;color:var(--ink-2)}
.ds-check input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--accent);cursor:pointer}
/* EMPTY STATE — teach, don't apologize. */
.ds-empty{text-align:center;color:var(--slate);padding:var(--s6) var(--s3);
border:1px dashed var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.5)}
.ds-empty h3{color:var(--ink);margin-bottom:var(--s1)}
/* SKELETON loaders */
.ds-skel{background:linear-gradient(90deg,var(--paper-2) 25%,#F7F9FC 37%,var(--paper-2) 63%);
background-size:400% 100%;animation:ds-shimmer 1.3s ease-in-out infinite;border-radius:var(--radius)}
.ds-skel--line{height:14px;margin:var(--s2) 0}
.ds-skel--card{height:84px}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
/* BOTTOM TAB BAR (mobile) — glassy, active accent with a lifted pill. */
.ds-tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;
display:flex;height:calc(58px + env(safe-area-inset-bottom,0));padding-bottom:env(safe-area-inset-bottom,0);
background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
border-top:1px solid var(--line)}
.ds-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;color:var(--slate);font-size:11px;font-weight:600;position:relative;transition:color .15s}
.ds-tabbar a .ds-tabbar__ico{display:flex;align-items:center;justify-content:center;height:26px;transition:transform .18s var(--ease)}
.ds-tabbar a[aria-current="page"]{color:var(--accent)}
.ds-tabbar a[aria-current="page"] .ds-tabbar__ico{transform:translateY(-1px)}
.ds-tabbar a .ds-tabbar__dot{position:absolute;top:8px;right:calc(50% - 16px);
width:8px;height:8px;background:var(--alert);border-radius:50%;box-shadow:0 0 0 2px #fff}
.ds-has-tabs{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
/* STICKY primary action bar (Sign / Pay) */
.ds-sticky-action{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
border-top:1px solid var(--line);padding:var(--s3);box-shadow:0 -6px 20px -8px rgba(16,24,40,.15)}
/* ACTIVATION BAR (pending, unpaid contractor) */
.ds-activate-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
flex-wrap:wrap;background:var(--accent-tint);border-bottom:1px solid #CFE0FB;
color:var(--accent-ink);padding:10px var(--s3);font-size:14px;font-weight:500}
.ds-activate-bar strong{font-weight:700}
.ds-lock-hint{font-size:12px;color:var(--slate)}
/* TOPBAR — sticky glass, brand mark with gradient. */
.ds-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
gap:var(--s3);padding:10px var(--s4);min-height:58px;
background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
border-bottom:1px solid var(--line)}
.ds-topbar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.ds-topbar__brand img{height:30px;width:auto;max-width:150px;object-fit:contain;border-radius:6px}
.ds-topbar__mark{width:32px;height:32px;border-radius:9px;background:var(--grad-accent);color:var(--on-accent);
display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px;
flex:0 0 auto;box-shadow:var(--shadow-accent)}
.ds-topbar__name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* PROGRESS STEPS (client status strip) */
.ds-progress{display:flex;gap:6px;margin:var(--s3) 0 var(--s1)}
.ds-progress__step{flex:1;height:8px;border-radius:var(--r-pill);background:var(--paper-2);transition:background .3s var(--ease)}
.ds-progress__step.is-on{background:var(--grad-accent)}
.ds-progress__label{font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em}
/* PHOTO STRIP */
.ds-photostrip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.ds-photostrip figure{flex:0 0 auto;width:160px;margin:0;scroll-snap-align:start}
.ds-photostrip img{width:160px;height:118px;object-fit:cover;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.ds-photostrip figcaption{font-size:12px;color:var(--slate);margin-top:6px;line-height:1.3}
/* MESSAGE BUBBLE */
.ds-msg{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);margin-bottom:var(--s2);background:#fff;box-shadow:var(--shadow-xs)}
.ds-msg--mine{background:var(--accent-tint);border-color:#CFE0FB}
.ds-msg__meta{font-size:12px;color:var(--slate);margin-bottom:4px;font-weight:500}
/* LIST ROW */
.ds-listrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
padding:var(--s3) 0;border-bottom:1px solid var(--line-2)}
.ds-listrow:last-child{border-bottom:none}
/* SNAPSHOT / STAT CARD GRID — real dashboard numbers. */
.ds-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.ds-cards .ds-card{margin:0;text-align:left;padding:var(--s3) var(--s4);position:relative;overflow:hidden}
.ds-cards .ds-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-accent);opacity:.9}
.ds-cards .ds-card b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:800;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.ds-cards .ds-card span{font-size:12px;color:var(--slate);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* MODAL / BOTTOM SHEET — blurred backdrop, big radius, motion. */
.ds-modal-bg{position:fixed;inset:0;z-index:50;background:rgba(16,24,40,.42);backdrop-filter:blur(4px);
display:flex;justify-content:center;overflow:auto;padding:var(--s3);animation:ds-fade .18s var(--ease)}
.ds-modal-bg--sheet{align-items:flex-end;padding:0}
.ds-modal-bg--center{align-items:center}
.ds-modal{background:#fff;border-radius:var(--r-xl);width:100%;max-width:540px;padding:var(--s5);box-shadow:var(--shadow-lg);animation:ds-pop .22s var(--ease)}
.ds-modal-bg--sheet .ds-modal{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh;overflow:auto;padding:var(--s4);animation:ds-slideup .26s var(--ease)}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ds-slideup{from{transform:translateY(100%)}to{transform:none}}
/* SEGMENTED sub-tabs — pill group. */
.ds-seg{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s3) 0;padding:5px;background:var(--paper-2);border-radius:var(--radius);width:fit-content;max-width:100%}
.ds-seg button{min-height:36px;padding:0 var(--s3);font-size:13.5px;font-weight:600;color:var(--slate);
background:transparent;border:none;border-radius:var(--r-sm);cursor:pointer;transition:all .15s var(--ease)}
.ds-seg button:hover{color:var(--ink)}
.ds-seg button[aria-current="true"]{color:var(--accent);background:#fff;box-shadow:var(--shadow-xs)}
/* inline success note */
.ds-note-ok{padding:var(--s3);border-radius:var(--radius);color:var(--ok);background:var(--ok-tint);font-size:14px;font-weight:500}
/* ASSIST watermark bar */
.ds-assist-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
gap:var(--s2);padding:9px var(--s3);background:var(--warn);color:#fff;font-size:13px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase}
.ds-assist-bar a{color:#fff;text-decoration:underline;text-transform:none;font-weight:600}
/* COMMAND CENTER dense chrome */
.ds-dense h1{font-size:1.28rem}
.ds-dense h2{font-size:1.05rem}
.ds-dense .ds-card{padding:var(--s3)}
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs)}
.ds-table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;
text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0}
.ds-table td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ds-table tr:last-child td{border-bottom:none}
.ds-table tbody tr{transition:background .12s}
.ds-table tr.tap{cursor:pointer}
.ds-table tbody tr:hover{background:var(--paper)}
.ds-table-wrap{overflow-x:auto;border-radius:var(--radius)}
.ds-kanban{display:flex;gap:var(--s3);overflow-x:auto;align-items:flex-start;padding-bottom:var(--s2)}
.ds-kanban__col{flex:0 0 250px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);transition:background .15s,box-shadow .15s}
.ds-kanban__col.is-dragover{background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent)}
.ds-kanban__col h4{margin:0 0 var(--s2);padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700}
.ds-kanban__card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:10px var(--s3);margin-bottom:var(--s2);cursor:grab;font-size:13px;box-shadow:var(--shadow-xs);transition:transform .12s,box-shadow .15s}
.ds-kanban__card:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ds-kanban__card:active{cursor:grabbing}
/* demo bar */
.ds-demo-bar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;
gap:var(--s2);padding:9px var(--s3);background:var(--ink);color:var(--paper);font-size:13px;font-weight:500}
.ds-demo-bar a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}
/* install prompt bar */
.ds-install{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99;
display:flex;gap:var(--s2);align-items:center;background:#fff;border:1px solid var(--line);
border-radius:var(--r-pill);box-shadow:var(--shadow-lg);padding:8px 8px 8px var(--s3);font-size:14px;max-width:92%}
/* landscape hint (signature) */
.ds-hint{font-size:13px;color:var(--warn);background:var(--warn-tint);padding:10px var(--s3);border-radius:var(--radius);margin:var(--s2) 0}
/* signature pad */
.sigpad,.svc-sig__canvas{width:100%;height:190px;border:2px dashed var(--line);border-radius:var(--radius);
background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(-45deg,#fff,#fff 10px,#FAFBFD 10px,#FAFBFD 20px);
touch-action:none;display:block}
/* toast — slide-in with motion */
.ds-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:99;
max-width:90%;padding:11px var(--s3);border-radius:var(--r-pill);
box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;background:var(--ink);color:#fff;
animation:ds-toast-in .28s var(--ease)}
.ds-toast--ok{background:var(--ok)}
.ds-toast--err{background:var(--alert)}
@keyframes ds-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* ================================================================
MARKETING SITE (.mk-*) — conversion-first, one accent.
================================================================ */
/* NAV — sticky glass, full-bleed, with a real mobile menu. */
.mk-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
border-bottom:1px solid var(--line);transition:background .25s var(--ease),border-color .25s var(--ease)}
.mk-nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
max-width:1120px;margin:0 auto;padding:11px var(--s4)}
.mk-nav__brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
font-weight:800;font-size:1.24rem;letter-spacing:-.02em;color:var(--ink)}
.mk-nav__brand:hover{color:var(--ink)}
.mk-nav__mark{width:26px;height:26px;border-radius:7px;background:var(--grad-accent);flex:0 0 auto;
box-shadow:var(--shadow-accent);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800}
.mk-nav__links{display:flex;gap:4px;align-items:center}
.mk-nav__links a:not(.ds-btn){color:var(--slate);font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:var(--r-sm)}
.mk-nav__links a:not(.ds-btn):hover{color:var(--ink);background:var(--paper)}
.mk-nav__cta{display:flex;gap:8px;align-items:center;margin-left:var(--s2)}
.mk-nav__toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);
background:#fff;cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow-xs)}
.mk-nav__toggle svg{width:22px;height:22px;stroke:var(--ink)}
.mk-nav__panel{display:none}
@media(max-width:820px){
.mk-nav__links{display:none}
.mk-nav__toggle{display:inline-flex}
.mk-nav.is-open .mk-nav__panel{display:block;position:absolute;left:0;right:0;top:100%;
background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:var(--s3) var(--s4) var(--s4)}
.mk-nav.is-open .mk-nav__panel a:not(.ds-btn){display:block;padding:13px 6px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2)}
.mk-nav.is-open .mk-nav__panel .ds-btn{margin-top:12px;width:100%}
}
.mk-wrap{max-width:1120px;margin:0 auto;padding-left:var(--s4);padding-right:var(--s4)}
.mk-section{padding-top:clamp(48px,8vw,104px);padding-bottom:clamp(48px,8vw,104px)}
.mk-h1{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.03em;
font-size:clamp(2.5rem,6vw,4.4rem);color:var(--ink);margin:0 0 var(--s3)}
.mk-h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:clamp(1.7rem,3.5vw,2.6rem);color:var(--ink);margin:0 0 var(--s3)}
.mk-lede{font-size:clamp(1.08rem,2vw,1.32rem);color:var(--slate);max-width:36ch;margin:0 0 var(--s4);line-height:1.5}
.mk-eyebrow{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
font-size:12.5px;color:var(--accent);margin:0 0 var(--s2)}
.mk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center;position:relative}
@media(max-width:820px){ .mk-hero{grid-template-columns:1fr} .mk-hero__art{order:-1} }
.mk-cta-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.mk-cta-row .ds-btn{width:auto}
/* phone frame */
.mk-phone{width:280px;max-width:78vw;margin:0 auto;background:#0B1220;border-radius:40px;
padding:12px;box-shadow:0 40px 80px -24px rgba(16,24,40,.5),0 0 0 1px rgba(16,24,40,.06)}
.mk-phone__screen{background:var(--paper);border-radius:28px;overflow:hidden;aspect-ratio:9/19;display:flex;flex-direction:column}
.mk-phone__bar{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;font-size:12px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.mk-phone__body{padding:16px;flex:1;display:flex;flex-direction:column;gap:12px}
.mk-mini-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:12px;box-shadow:var(--shadow-xs)}
.mk-mini-btn{background:var(--grad-accent);color:#fff;text-align:center;border-radius:14px;padding:14px;font-weight:700;font-size:14px;box-shadow:var(--shadow-accent)}
.mk-mini-amt{font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mk-pain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media(max-width:720px){ .mk-pain{grid-template-columns:1fr;gap:var(--s3)} }
.mk-pain p{font-size:1.18rem;color:var(--ink);font-weight:600;line-height:1.35;margin:0;
padding-left:var(--s3);border-left:3px solid var(--accent)}
.mk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media(max-width:720px){ .mk-steps{grid-template-columns:1fr} }
.mk-step__cap{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-top:var(--s2);color:var(--ink)}
.mk-step__n{font-family:var(--font-display);color:var(--accent);font-weight:800}
/* dark paper-trail section */
.mk-dark{background:radial-gradient(1200px 500px at 80% -10%,rgba(46,107,240,.25),transparent 60%),var(--ink);color:var(--paper)}
.mk-dark .mk-h2{color:var(--paper)}
.mk-dark .mk-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
@media(max-width:720px){ .mk-dark .mk-proof{grid-template-columns:1fr} }
.mk-dark .mk-proof h3{color:var(--paper);font-family:var(--font-display);margin:0 0 6px}
.mk-dark .mk-proof p{color:var(--on-ink);margin:0;font-size:15px}
/* price block */
.mk-price{text-align:center}
.mk-price__num{font-family:var(--font-display);font-weight:800;font-size:clamp(3.5rem,10vw,6.5rem);letter-spacing:-.04em;
background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.mk-price__num span{font-size:.28em;color:var(--slate);font-weight:700;-webkit-text-fill-color:var(--slate)}
/* services strip */
.mk-svc-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media(max-width:720px){ .mk-svc-strip{grid-template-columns:1fr} }
.mk-svc-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--s4);color:var(--ink);box-shadow:var(--shadow-xs);transition:transform .15s var(--ease),box-shadow .18s}
.mk-svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#DBE1EA}
.mk-svc-card h3{font-family:var(--font-display);margin:0 0 6px}
.mk-svc-card p{color:var(--slate);margin:0;font-size:15px}
/* testimonial slots */
.mk-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media(max-width:720px){ .mk-quotes{grid-template-columns:1fr} }
.mk-quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-xs)}
.mk-quote blockquote{margin:0 0 var(--s2);font-size:1.05rem;color:var(--ink);line-height:1.5}
.mk-quote cite{color:var(--slate);font-style:normal;font-size:14px;font-weight:600}
.mk-todo{opacity:.55}
/* footer */
.mk-footer{border-top:1px solid var(--line);background:#fff}
.mk-footer__in{max-width:1120px;margin:0 auto;padding:var(--s6) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}
.mk-footer a{color:var(--slate);font-size:14px;display:block;padding:4px 0}
.mk-footer a:hover{color:var(--ink)}
.mk-footer h4{font-family:var(--font-display);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin:0 0 var(--s2)}
/* service landing + intake */
.mk-svc-hero{max-width:720px}
.mk-svc-list{list-style:none;padding:0;margin:var(--s3) 0}
.mk-svc-list li{padding:9px 0 9px 30px;position:relative;color:var(--ink)}
.mk-svc-list li::before{content:'✓';position:absolute;left:0;top:8px;color:#fff;background:var(--ok);font-weight:700;
width:20px;height:20px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center}
.mk-disclosure{background:var(--warn-tint);border:1px solid #EBD3A0;border-radius:var(--radius);padding:var(--s3) var(--s4);color:#7A5A12;font-size:15px;margin:var(--s3) 0}
.mk-floor{font-weight:600;color:var(--slate)}
.mk-disclosure--ok{background:var(--ok-tint);border-color:#A9D6B8;color:#0E5A2E}
.mk-intake{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
.mk-intake__progress{height:6px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden;margin-bottom:var(--s4)}
.mk-intake__bar{height:100%;background:var(--grad-accent);width:0;transition:width .3s var(--ease)}
.mk-step[hidden]{display:none}
.mk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mk-intake__nav{display:flex;gap:var(--s2);margin-top:var(--s4)}
.mk-bypass{margin-top:var(--s3);font-size:14px}
/* ================================================================
INTERACTIVE COMPONENTS (.svc-*) — the logic-heavy widgets mounted into
the console/portals (calendar, selector, uploader, wizard, negotiation,
demo). Now fully styled to match the system.
================================================================ */
/* --- Field Ops calendar --- */
.svc-cal__toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.svc-cal__title{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-right:auto}
.svc-cal__btn{min-width:38px;height:38px;padding:0 var(--s3);border:1px solid var(--line);background:#fff;
border-radius:var(--r-sm);font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-xs);transition:all .12s}
.svc-cal__btn:hover{border-color:var(--slate-2);box-shadow:var(--shadow-sm)}
.svc-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.svc-cal__dow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);text-align:center;padding:4px 0}
.svc-cal__day{min-height:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;
display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:border-color .12s,background .12s}
.svc-cal__day:hover{border-color:var(--slate-2)}
.svc-cal__day.is-other-month{background:var(--paper);opacity:.5}
.svc-cal__day.is-today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.svc-cal__day.is-dragover{background:var(--accent-tint);border-color:var(--accent)}
.svc-cal__daynum{font-size:12px;font-weight:700;color:var(--slate);align-self:flex-end}
.svc-cal__day.is-today .svc-cal__daynum{color:var(--accent)}
.svc-cal__job{background:var(--accent-tint);color:var(--accent-ink);border-radius:6px;padding:3px 6px;font-size:11px;font-weight:600;
cursor:grab;display:flex;flex-direction:column;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.svc-cal__job:active{cursor:grabbing}
.svc-cal__job.is-blocked{background:var(--alert-tint);color:var(--alert)}
.svc-cal__job.is-done{background:var(--ok-tint);color:var(--ok)}
.svc-cal__job.is-inprogress{background:var(--warn-tint);color:var(--warn)}
.svc-cal__job-crew{font-weight:500;opacity:.8;font-size:10px}
.svc-cal__more{font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;padding:2px}
@media(max-width:640px){ .svc-cal__day{min-height:64px} .svc-cal__job-crew{display:none} }
/* --- service selector (typeahead multi-select) --- */
.svc-sel{position:relative}
.svc-sel__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.svc-sel__chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-tint);color:var(--accent-ink);
border-radius:var(--r-pill);padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
.svc-sel__chip-x{border:none;background:rgba(29,78,216,.15);color:var(--accent-ink);width:18px;height:18px;border-radius:50%;
cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.svc-sel__chip-x:hover{background:var(--accent);color:#fff}
.svc-sel__input{width:100%;min-height:var(--tap);padding:0 var(--s3);font-size:15px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.svc-sel__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.svc-sel__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:280px;overflow:auto;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px}
.svc-sel__menu:not(.is-open){display:none}
.svc-sel__group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);padding:8px 10px 4px}
.svc-sel__opt{padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;font-weight:500}
.svc-sel__opt:hover,.svc-sel__opt.is-active{background:var(--accent-tint);color:var(--accent-ink)}
.svc-sel__other{color:var(--accent);font-weight:600}
/* --- uploader --- */
.svc-up__zone{border:2px dashed var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s3);text-align:center;
color:var(--slate);font-weight:500;cursor:pointer;background:var(--paper);transition:all .15s}
.svc-up__zone:hover,.svc-up__zone.is-dragover{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink)}
.svc-up__list{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.svc-up__item{display:flex;gap:var(--s3);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.svc-up__item.is-done{border-color:#B7E4C6}.svc-up__item.is-error{border-color:#F3B9BB}
.svc-up__thumb{width:44px;height:44px;border-radius:var(--r-sm);background:var(--paper-2);flex:0 0 auto;overflow:hidden;
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--slate)}
.svc-up__thumb img{width:100%;height:100%;object-fit:cover}
.svc-up__name{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-up__bar{flex:0 0 90px;height:6px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden}
.svc-up__bar-fill{height:100%;background:var(--grad-accent);width:0;transition:width .2s var(--ease)}
.svc-up__item.is-done .svc-up__bar-fill{background:var(--ok)}
/* --- wizard --- */
.svc-wiz__progress{display:flex;gap:6px;margin-bottom:var(--s4)}
.svc-wiz__step{flex:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-2);
padding-top:12px;border-top:3px solid var(--paper-2);transition:all .2s}
.svc-wiz__step.is-current{color:var(--accent);border-top-color:var(--accent)}
.svc-wiz__step.is-done{color:var(--ok);border-top-color:var(--ok)}
.svc-wiz__hint{color:var(--slate);font-size:14px;margin-bottom:var(--s3)}
.svc-wiz__summary{font-size:1.1rem;font-weight:600}
.svc-wiz__goals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media(max-width:520px){ .svc-wiz__goals{grid-template-columns:1fr} }
.svc-wiz__goal{padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;
font-weight:600;font-size:14px;text-align:left;transition:all .12s}
.svc-wiz__goal:hover{border-color:var(--slate-2)}
.svc-wiz__goal[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
.svc-wiz__nav{display:flex;gap:var(--s2);margin-top:var(--s4)}
.svc-wiz__btn{flex:1;min-height:var(--tap);border-radius:var(--radius);font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent}
.svc-wiz__btn[data-nav="next"]{background:var(--grad-accent);color:#fff;box-shadow:var(--shadow-accent)}
.svc-wiz__btn[data-nav="back"]{background:#fff;color:var(--ink);border-color:var(--line);flex:0 0 auto;padding:0 var(--s4)}
.svc-wiz__skip{display:block;margin:var(--s3) auto 0;background:none;border:none;color:var(--slate);font-size:14px;cursor:pointer;text-decoration:underline}
/* --- change-order negotiation --- */
.svc-nego{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);background:#fff}
.svc-nego__price{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:1.05rem}
.svc-nego__status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);background:var(--paper-2);padding:3px 8px;border-radius:var(--r-pill)}
.svc-nego__history{margin:var(--s3) 0;border-top:1px solid var(--line-2);padding-top:var(--s2)}
.svc-nego__offer{display:flex;gap:var(--s2);align-items:center;font-size:13px;padding:5px 0}
.svc-nego__offer-who{font-weight:600;min-width:74px}
.svc-nego__offer-price{font-variant-numeric:tabular-nums;font-weight:700}
.svc-nego__offer-outcome{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-2)}
.svc-nego__offer.is-accepted{color:var(--ok)}.svc-nego__offer.is-declined{color:var(--alert)}
.svc-nego__actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.svc-nego__btn{min-height:44px;border-radius:var(--radius);font-weight:600;cursor:pointer;border:1px solid var(--line);background:#fff}
.svc-nego__btn[data-act="accept"]{background:var(--ok);color:#fff;border-color:transparent}
.svc-nego__btn[data-act="counter"],.svc-nego__btn[data-act="recounter"]{background:var(--grad-accent);color:#fff;border-color:transparent}
.svc-nego__input{width:100%;min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--radius);font-size:15px}
.svc-nego__hint{font-size:13px;color:var(--slate)}
/* --- data grid (table + kanban) reuse the dense chrome --- */
.svc-grid__filter{width:100%;max-width:280px;min-height:40px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--s3);font-size:14px}
.svc-grid__table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs)}
.svc-grid__table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.svc-grid__table th.is-sorted-asc::after{content:' ↑';color:var(--accent)}
.svc-grid__table th.is-sorted-desc::after{content:' ↓';color:var(--accent)}
.svc-grid__table td{padding:11px 12px;border-bottom:1px solid var(--line-2)}
.svc-grid__row{cursor:pointer;transition:background .12s}
.svc-grid__row:hover{background:var(--paper)}
.svc-kb{display:flex;gap:var(--s3);overflow-x:auto;align-items:flex-start;padding-bottom:var(--s2)}
.svc-kb__col{flex:0 0 250px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);transition:background .15s,box-shadow .15s}
.svc-kb__col.is-dragover{background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent)}
.svc-kb__col-head{padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700}
.svc-kb__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px var(--s3);margin-bottom:var(--s2);cursor:grab;font-size:13px;box-shadow:var(--shadow-xs)}
.svc-kb__card:hover{box-shadow:var(--shadow-sm)}
/* --- demo widget --- */
.svc-demo{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-md)}
.svc-demo__toggle{display:flex;background:var(--paper-2);padding:5px;gap:5px;margin:var(--s3);border-radius:var(--radius)}
.svc-demo__toggle-btn{flex:1;min-height:38px;border:none;background:transparent;border-radius:var(--r-sm);font-weight:600;font-size:13px;color:var(--slate);cursor:pointer}
.svc-demo__toggle-btn.is-active{background:#fff;color:var(--accent);box-shadow:var(--shadow-xs)}
.svc-demo__view{padding:0 var(--s3) var(--s3)}
.svc-demo__head{display:flex;justify-content:space-between;font-weight:700;padding:var(--s2) 0;border-bottom:1px solid var(--line-2);margin-bottom:var(--s2)}
.svc-demo__photos{display:flex;gap:8px;overflow-x:auto;margin-bottom:var(--s2)}
.svc-demo__photo img{width:120px;height:88px;object-fit:cover;border-radius:var(--r-sm)}
.svc-demo__row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.svc-demo__chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.svc-demo__chip.is-paid,.svc-demo__chip.is-signed{background:var(--ok-tint);color:var(--ok)}
.svc-demo__chip.is-due,.svc-demo__chip.is-needs{background:var(--alert-tint);color:var(--alert)}
.svc-demo__cta{display:block;margin:var(--s3);text-align:center;background:var(--grad-accent);color:#fff;padding:13px;border-radius:var(--radius);font-weight:700;box-shadow:var(--shadow-accent)}
.svc-demo__empty{padding:var(--s6);text-align:center;color:var(--slate)}
/* --- booking embed --- */
.svc-book__frame{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.svc-book__fallback{display:none;margin-top:var(--s2)}.svc-book__fallback.is-visible{display:block}
/* ================================================================
RESPONSIVE + MOTION
================================================================ */
@media(min-width:820px){
h1{font-size:1.7rem}
.ds-wrap{padding:var(--s5) var(--s4)}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.ds-btn:hover,.ds-card--tap:hover,.mk-svc-card:hover{transform:none}
}
/* ================================================================
MARKETING KIT v2 — sections that carry the sales narrative.
(trust strip · two-sided product peek · bands · feature grid ·
pricing plans · add-ons · FAQ) All token-driven, no image assets.
================================================================ */
/* centered section header */
.mk-head{text-align:center;max-width:660px;margin:0 auto var(--s5)}
.mk-head .mk-lede{margin:0 auto;max-width:54ch}
.mk-cta-row--center{justify-content:center}
/* trust strip under the hero */
.mk-trust{display:flex;flex-wrap:wrap;gap:9px 22px;align-items:center}
.mk-trust__item{font-size:13px;font-weight:600;color:var(--slate-2);letter-spacing:.01em;display:inline-flex;align-items:center;gap:7px}
.mk-trust__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}
/* tinted / dark full-bleed bands for rhythm */
.mk-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* desktop "window" frame — the console peek */
.mk-window{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.mk-window__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.mk-window__dot{width:11px;height:11px;border-radius:50%;background:#D6DBE3;flex:0 0 auto}
.mk-window__title{margin-left:8px;font-size:12px;font-weight:700;color:var(--slate)}
.mk-window__body{padding:var(--s4)}
/* two-sided product peek (console + client portal) */
.mk-peek{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,56px);align-items:center}
@media(max-width:860px){ .mk-peek{grid-template-columns:1fr;gap:var(--s5)} .mk-peek__art{order:-1} }
/* mini folder grid shown inside the console peek — a real taste of the app */
.mk-folders{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:520px){ .mk-folders{grid-template-columns:repeat(2,1fr)} }
.mk-folder{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--card);box-shadow:var(--shadow-xs)}
.mk-folder__ico{color:var(--accent);display:block;margin-bottom:7px}
.mk-folder__name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.2}
.mk-folder__sub{font-size:11px;color:var(--slate);margin-top:1px}
.mk-folder__badge{display:inline-block;margin-top:7px;font-size:10px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);background:var(--alert-tint);color:var(--alert);letter-spacing:.02em}
.mk-folder__badge.is-ok{background:var(--ok-tint);color:var(--ok)}
.mk-folder__badge.is-warn{background:var(--warn-tint);color:var(--warn)}
/* feature grid (icon + title + line) */
.mk-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s4)}
@media(max-width:820px){ .mk-features{grid-template-columns:1fr;gap:var(--s4)} }
.mk-feature__ico{width:42px;height:42px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.mk-feature h3{margin:0 0 5px}
.mk-feature p{color:var(--slate);margin:0;font-size:15px;line-height:1.5}
/* pricing plans */
.mk-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);max-width:840px;margin:0 auto;align-items:stretch}
@media(max-width:760px){ .mk-plans{grid-template-columns:1fr;gap:var(--s5)} }
.mk-plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;text-align:left}
.mk-plan--featured{border-color:var(--accent);box-shadow:var(--shadow-md)}
.mk-plan__tag{position:absolute;top:-13px;left:var(--s5);background:var(--grad-accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow-accent)}
.mk-plan__name{font-family:var(--font-display);font-weight:800;font-size:1.25rem;margin:0}
.mk-plan__who{color:var(--slate);font-size:14px;margin:3px 0 var(--s3)}
.mk-plan__price{font-family:var(--font-display);font-weight:800;font-size:2.7rem;letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.mk-plan__price span{font-size:1rem;font-weight:600;color:var(--slate);letter-spacing:0}
.mk-plan__annual{font-size:13px;color:var(--slate);margin-top:6px}
.mk-plan__feat{list-style:none;padding:0;margin:var(--s4) 0;flex:1}
.mk-plan__feat li{padding:7px 0 7px 28px;position:relative;font-size:14.5px;color:var(--ink);line-height:1.45}
.mk-plan__feat li::before{content:'✓';position:absolute;left:0;top:5px;color:#fff;background:var(--ok);width:19px;height:19px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800}
.mk-plan__feat li.is-plus{font-weight:700}
.mk-plan__feat li.is-plus::before{background:var(--accent)}
.mk-seats{max-width:840px;margin:var(--s4) auto 0;text-align:center;color:var(--slate);font-size:15px}
/* add-ons */
.mk-addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);max-width:940px;margin:var(--s4) auto 0}
.mk-addon{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);background:var(--card);box-shadow:var(--shadow-xs)}
.mk-addon strong{display:block;color:var(--ink);font-size:15px}
.mk-addon span{font-size:13px;color:var(--slate)}
.mk-addon b{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:800}
/* FAQ (native details/summary) */
.mk-faq{max-width:760px;margin:0 auto}
.mk-faq__item{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-bottom:10px;box-shadow:var(--shadow-xs)}
.mk-faq__item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.mk-faq__item summary::-webkit-details-marker{display:none}
.mk-faq__item summary::after{content:'+';font-size:22px;font-weight:400;color:var(--accent);line-height:1}
.mk-faq__item[open] summary::after{content:'\2212'}
.mk-faq__a{padding:0 18px 16px;color:var(--slate);font-size:15px;line-height:1.6}
.mk-faq__a a{font-weight:600}
/* ================================================================
FOLDER SYSTEM (.fs-*) — the contractor/GC console as a file explorer.
Breadcrumb = navigation. Desktop: a sidebar rail + main pane. Mobile:
the rail collapses; breadcrumb + big tap targets carry navigation.
================================================================ */
.fs{display:flex;align-items:stretch;min-height:calc(100vh - 58px)}
.fs__side{display:none}
@media(min-width:900px){
.fs__side{display:flex;flex-direction:column;flex:0 0 250px;width:250px;background:#fff;
border-right:1px solid var(--line);position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto;padding:12px 12px 24px}
}
.fs__main{flex:1;min-width:0;display:flex;flex-direction:column}
.fs__grouplabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);padding:16px 10px 6px}
.fs__navitem{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:var(--radius);
color:var(--slate);font-weight:600;font-size:14px;cursor:pointer;transition:background .12s,color .12s;width:100%;border:none;background:none;text-align:left}
.fs__navitem:hover{background:var(--paper);color:var(--ink)}
.fs__navitem[aria-current="page"]{background:var(--accent-tint);color:var(--accent)}
.fs__navitem svg{flex:0 0 auto}
.fs__navitem .fs__count{margin-left:auto;font-size:11px;font-weight:700;color:var(--slate-2)}
.fs__navitem[aria-current="page"] .fs__count{color:var(--accent)}
.fs__navitem .fs__dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--alert)}
/* breadcrumb bar (the navigation spine) */
.fs-crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px var(--s4);
border-bottom:1px solid var(--line);background:rgba(255,255,255,.75);backdrop-filter:saturate(1.4) blur(8px);
-webkit-backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:58px;z-index:15}
.fs-crumbs button{font-size:14px;color:var(--slate);font-weight:600;background:none;border:none;cursor:pointer;padding:2px 2px}
.fs-crumbs button:hover{color:var(--accent)}
.fs-crumbs .fs-crumbs__sep{color:var(--slate-2)}
.fs-crumbs .fs-crumbs__cur{font-size:14px;color:var(--ink);font-weight:700}
.fs-body{padding:var(--s4);max-width:1120px;width:100%;margin:0 auto}
/* toolbar (title + actions) */
.fs-toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.fs-toolbar h1{margin:0;font-size:1.45rem}
.fs-toolbar .fs-toolbar__spacer{margin-left:auto}
/* folder / file grid */
.fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:var(--s3)}
.fs-tile{display:block;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:16px;cursor:pointer;box-shadow:var(--shadow-xs);position:relative;
transition:transform .14s var(--ease),box-shadow .16s,border-color .16s;width:100%}
.fs-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#DBE1EA}
.fs-tile:active{transform:translateY(0)}
.fs-tile__ico{color:var(--accent);margin-bottom:10px;display:block}
.fs-tile__ico.is-file{color:var(--slate)}
.fs-tile__name{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.25;word-break:break-word}
.fs-tile__sub{font-size:12.5px;color:var(--slate);margin-top:2px}
.fs-tile__badge{position:absolute;top:13px;right:13px}
/* file list rows */
.fs-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.fs-file{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .12s;width:100%;border:none;background:#fff;text-align:left}
.fs-file:last-child{border-bottom:none}
.fs-file:hover{background:var(--paper)}
.fs-file__ico{color:var(--slate);flex:0 0 auto;display:flex}
.fs-file__main{flex:1;min-width:0}
.fs-file__name{font-weight:600;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-file__meta{font-size:12px;color:var(--slate);margin-top:1px}
.fs-file__right{flex:0 0 auto;display:flex;align-items:center;gap:10px}
/* small section label inside a folder view */
.fs-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin:var(--s5) 0 var(--s2)}
.fs-sec:first-child{margin-top:0}
/* global search results dropdown */
.fs-search{position:relative;flex:1;max-width:420px}
.fs-search input{width:100%;min-height:40px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-pill);
font-size:14px;background:var(--paper)}
.fs-search input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-glow)}
@media(max-width:640px){ .fs-search{max-width:none} }
/* ================================================================
MARKETING KIT v3 — the ARGUMENT layer (not the cabinet layer).
Type does the work. Cards are rationed. Rhythm varies by section.
Used by the rebuilt homepage: mirror · turn · clock · fork · statement.
================================================================ */
/* a huge one-sentence statement — the biggest thing on its screen */
.mk-statement{max-width:18ch;font-family:var(--font-display);font-weight:800;
font-size:clamp(2.3rem,7vw,4.8rem);line-height:1.02;letter-spacing:-.03em;color:var(--ink);margin:0}
.mk-statement--wide{max-width:24ch}
.mk-statement em{font-style:normal;color:var(--accent)}
/* THE MIRROR — plain lines, lots of air, zero cards */
.mk-mirror p{font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.4;color:var(--ink);
max-width:30ch;margin:0 0 var(--s5);font-weight:500}
.mk-mirror__turn{color:var(--accent)!important;font-weight:700;max-width:34ch}
/* THE TURN — one wide human paragraph */
.mk-turn p{font-size:clamp(1.12rem,2.2vw,1.45rem);line-height:1.5;color:var(--ink);max-width:42ch;margin:0 0 var(--s3)}
/* THE 6-MINUTE CLOCK — the timestamps ARE the argument */
.mk-clock{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.mk-clock{grid-template-columns:1fr} .mk-clock__art{order:-1}}
.mk-clock__step{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.mk-clock__step:first-child{border-top:none;padding-top:0}
.mk-clock__time{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums;
color:var(--accent);font-size:1.05rem;flex:0 0 86px;letter-spacing:-.01em}
.mk-clock__what strong{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:2px}
.mk-clock__what span{color:var(--slate);font-size:14.5px}
/* THE FORK — two doors, equal weight, honestly different */
.mk-fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);max-width:900px;margin:0 auto}
@media(max-width:720px){.mk-fork{grid-template-columns:1fr}}
.mk-door{display:block;text-align:left;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm);color:var(--ink);
transition:transform .16s var(--ease),box-shadow .18s,border-color .18s}
.mk-door:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent);color:var(--ink)}
.mk-door__eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.mk-door h3{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin:10px 0 6px;color:var(--ink)}
.mk-door p{color:var(--slate);font-size:15px;margin:0 0 var(--s4);line-height:1.5}
.mk-door__price{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-door__price span{font-size:.85rem;font-weight:600;color:var(--slate)}
.mk-door__go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);font-weight:700;color:var(--accent)}
/* single line alone in white (the accent aside) */
.mk-aside{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:600;color:var(--ink);max-width:36ch;line-height:1.4}
.mk-aside--accent{color:var(--accent)}
/* a quiet under-hero link (demo as text, not a twin button) */
.mk-textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent)}
.mk-textlink:hover{color:var(--accent-ink)}
/* ================================================================
MOTION — the ONLY sanctioned micro-motion (design plan §6.7):
status chips settle from neutral grey to their color on first view.
Everything else stays still. Honored-off under reduced-motion by the
global block above.
================================================================ */
@keyframes ds-chip-settle{ from{ background:var(--neutral-tint); color:var(--slate); } }
.ds-chip--ok,.ds-chip--alert,.ds-chip--warn{ animation:ds-chip-settle .5s var(--ease) both; }
/* ================================================================
HOMEPAGE HERO v2 — the eye-catching first impression.
Vibrant light hero, gradient headline, layered floating product art.
================================================================ */
.mk-hero2{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
background:
radial-gradient(1000px 540px at 80% -10%, var(--accent-tint), transparent 62%),
radial-gradient(720px 420px at 2% 8%, rgba(46,107,240,.10), transparent 55%),
var(--paper);}
.mk-hero2__in{position:relative;z-index:2;max-width:1120px;margin:0 auto;
padding:clamp(36px,6vw,80px) var(--s4) clamp(44px,6vw,88px);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){ .mk-hero2__in{grid-template-columns:1fr;text-align:center} .mk-hero2__art{order:-1;margin:0 auto} .mk-hero2__lede,.mk-hero2 h1{margin-left:auto;margin-right:auto} .mk-hero2__cta{justify-content:center} }
.mk-hero2 h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.0;
font-size:clamp(2.5rem,6vw,4.5rem);color:var(--ink);margin:0 0 var(--s4);max-width:15ch}
.mk-grad{background:linear-gradient(100deg,var(--accent-2),#4F46E5 60%,#6D28D9);
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mk-hero2__lede{font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--slate);max-width:46ch;line-height:1.5;margin:0 0 var(--s5)}
.mk-hero2__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mk-hero2__cta .ds-btn{min-height:52px;font-size:16px;padding:0 26px}
.mk-hero2__trust{margin-top:var(--s4);color:var(--slate-2);font-size:13.5px;font-weight:500}
/* layered product art */
.mk-hero2__art{position:relative;width:100%;max-width:520px}
.mk-hero2__glow{position:absolute;inset:-14% -8%;z-index:0;
background:radial-gradient(58% 58% at 62% 42%, var(--accent-glow), transparent 72%)}
.mk-stack{position:relative;z-index:1;padding-bottom:26px}
.mk-stack .mk-window{box-shadow:0 34px 70px -26px rgba(16,24,40,.42),0 0 0 1px rgba(16,24,40,.05)}
.mk-stack .mk-phone{position:absolute;right:-3%;bottom:0;width:168px;max-width:42%;margin:0;z-index:2;
box-shadow:0 34px 64px -20px rgba(16,24,40,.5)}
@media(max-width:520px){ .mk-stack .mk-phone{width:40%;right:-1%} }
@media(prefers-reduced-motion:no-preference){
.mk-stack{animation:mk-float 6.5s ease-in-out infinite}
.mk-stack .mk-phone{animation:mk-float 6.5s ease-in-out infinite .9s}
}
@keyframes mk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* value strip — honest props, punchy, gives the fold some energy */
.mk-vstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
@media(max-width:720px){ .mk-vstrip{grid-template-columns:repeat(2,1fr)} }
.mk-vstrip>div{background:#fff;padding:var(--s4) var(--s3);text-align:center}
.mk-vstrip b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
.mk-vstrip span{font-size:12.5px;color:var(--slate);font-weight:600;letter-spacing:.01em}
/* ================================================================
HOMEPAGE HERO v3 — dark, colorful, ANIMATED aurora. More vibe.
================================================================ */
.hero3{position:relative;overflow:hidden;background:#0A0E1A;color:#fff;isolation:isolate}
.hero3__aur{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero3__aur i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.55;mix-blend-mode:screen}
.hero3__aur i:nth-child(1){width:54vw;height:54vw;left:-10%;top:-24%;background:radial-gradient(circle,#2E6BF0,transparent 62%);animation:aur1 17s ease-in-out infinite}
.hero3__aur i:nth-child(2){width:48vw;height:48vw;right:-8%;top:-16%;background:radial-gradient(circle,#8B5CF6,transparent 62%);animation:aur2 21s ease-in-out infinite}
.hero3__aur i:nth-child(3){width:42vw;height:42vw;left:26%;bottom:-34%;background:radial-gradient(circle,#06B6D4,transparent 62%);animation:aur3 19s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,11%) scale(1.16)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-11%,9%) scale(1.12)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,-13%) scale(1.22)}}
.hero3__grid{position:absolute;inset:0;z-index:0;opacity:.12;
background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
background-size:58px 58px;-webkit-mask-image:radial-gradient(circle at 55% 28%,#000,transparent 72%);mask-image:radial-gradient(circle at 55% 28%,#000,transparent 72%)}
.hero3__in{position:relative;z-index:2;max-width:1120px;margin:0 auto;
padding:clamp(56px,9vw,132px) var(--s4) clamp(56px,8vw,112px);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){ .hero3__in{grid-template-columns:1fr;text-align:center} .hero3__art{order:-1;margin:0 auto} .hero3 .lede,.hero3 h1{margin-left:auto;margin-right:auto} .hero3__cta{justify-content:center} }
.hero3 .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:6px 13px;border-radius:var(--r-pill);margin:0 0 var(--s4)}
.hero3 .kicker b{color:#22D3EE}
.hero3 h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.0;
font-size:clamp(2.6rem,6.4vw,4.9rem);margin:0 0 var(--s4);color:#fff;max-width:15ch}
.hero3 .grad{background:linear-gradient(100deg,#60A5FA,#A78BFA 52%,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero3 .lede{font-size:clamp(1.08rem,1.7vw,1.3rem);color:rgba(255,255,255,.82);max-width:46ch;line-height:1.5;margin:0 0 var(--s5)}
.hero3__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero3__cta .ds-btn{min-height:54px;font-size:16px;padding:0 28px}
.hero3__cta .ds-btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.38);--btn-sh:none}
.hero3__cta .ds-btn--ghost:hover{--btn-bg:rgba(255,255,255,.1);--btn-bd:rgba(255,255,255,.6)}
.hero3__trust{margin-top:var(--s4);color:rgba(255,255,255,.55);font-size:13.5px;font-weight:500}
.hero3__art{position:relative;width:100%;max-width:520px}
.hero3__art .mk-window{box-shadow:0 40px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.hero3__art .mk-phone{position:absolute;right:-3%;bottom:0;width:168px;max-width:42%;margin:0;z-index:2;box-shadow:0 40px 70px -18px rgba(0,0,0,.65)}
@media(max-width:520px){ .hero3__art .mk-phone{width:40%;right:-1%} }
.hero3__stack{position:relative;padding-bottom:26px}
/* entrance + float + on-scroll reveal (motion, with reduced-motion guard) */
@keyframes hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes mk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
.hero3__in>div>*{animation:hero-in .7s var(--ease) both}
.hero3__in>div>*:nth-child(2){animation-delay:.06s}
.hero3__in>div>*:nth-child(3){animation-delay:.12s}
.hero3__in>div>*:nth-child(4){animation-delay:.18s}
.hero3__art{animation:hero-in .8s var(--ease) both .12s}
.hero3__stack{animation:mk-float 6.5s ease-in-out infinite}
.hero3__art .mk-phone{animation:mk-float 6.5s ease-in-out infinite .9s}
}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} }
/* nav goes transparent while over the dark hero (homepage) */
.mk-nav.on-hero{background:rgba(10,14,26,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(255,255,255,.08)}
.mk-nav.on-hero .mk-nav__brand{color:#fff}
.mk-nav.on-hero .mk-nav__brand .mk-nav__mark{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.mk-nav.on-hero .mk-nav__links a:not(.ds-btn){color:rgba(255,255,255,.82)}
.mk-nav.on-hero .mk-nav__links a:not(.ds-btn):hover{color:#fff;background:rgba(255,255,255,.12)}
.mk-nav.on-hero .ds-btn--secondary{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4);--btn-sh:none}
.mk-nav.on-hero .mk-nav__toggle{background:transparent;border-color:rgba(255,255,255,.32)}
.mk-nav.on-hero .mk-nav__toggle svg{stroke:#fff}
/* ================================================================
ELEVATION v3 — the craft pass.
Editorial serif headlines (Fraunces, injected by site-nav.js),
warm paper canvas, copper accent motif (no more AI-purple),
real depth on device mockups, mobile air, and the "instinct"
layer: amber waypoints + a thumb-level action bar on phones.
================================================================ */
/* ---- editorial voice: serif display for marketing headlines ---- */
.mk-statement,.mk-h2,.mk-h1,.hero4 h1,.oq__q{
font-family:"Fraunces",Georgia,"Times New Roman",serif;
font-weight:600;letter-spacing:-.012em}
.mk-statement em,.mk-h2 em{font-style:italic}
/* ---- warm paper canvas on marketing pages (cool tokens stay in-app) ---- */
body:has(#site-nav){background:#FAF7F1}
body:has(#site-nav) .mk-band{background:#F3EFE6}
body:has(#site-nav) .mk-vstrip{background:#E7E1D4}
body:has(#site-nav) .mk-vstrip>div{background:#FFFDF9}
/* ---- the copper thread: every eyebrow carries the same amber tick,
so the eye learns "this mark = a new stop on the route" ---- */
.mk-eyebrow{display:inline-flex;align-items:center;gap:10px}
.mk-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:#D9822B;flex:0 0 auto}
.mk-head .mk-eyebrow{justify-content:center}
.mk-eyebrow b{color:#B45309;font-weight:800}
/* ---- device mockups: bezel, glare, layered depth ---- */
.mk-phone{position:relative;background:linear-gradient(180deg,#232E44,#0B1220 60%);
border-radius:44px;padding:10px;border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
0 22px 44px -14px rgba(9,14,28,.42),0 60px 100px -36px rgba(9,14,28,.5)}
.mk-phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(118deg,rgba(255,255,255,.14),transparent 34%)}
.mk-phone__screen{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.mk-phone__body{background:#F4F6FA}
.mk-window{border-radius:18px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.65),var(--shadow-lg),0 48px 90px -34px rgba(16,24,40,.3)}
/* ---- HERO v4: blueprint navy + copper. Structured, not blobby. ---- */
.hero4{position:relative;overflow:hidden;color:#fff;isolation:isolate;background:
radial-gradient(900px 480px at 80% 14%,rgba(217,130,43,.16),transparent 56%),
radial-gradient(760px 560px at 8% 88%,rgba(46,107,240,.17),transparent 62%),
linear-gradient(180deg,#0C1424,#0A111E)}
.hero4__bp{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
background-image:
linear-gradient(rgba(122,160,255,.075) 1px,transparent 1px),
linear-gradient(90deg,rgba(122,160,255,.075) 1px,transparent 1px),
linear-gradient(rgba(122,160,255,.14) 1px,transparent 1px),
linear-gradient(90deg,rgba(122,160,255,.14) 1px,transparent 1px);
background-size:26px 26px,26px 26px,130px 130px,130px 130px;
-webkit-mask-image:radial-gradient(ellipse at 62% 30%,#000 24%,transparent 74%);
mask-image:radial-gradient(ellipse at 62% 30%,#000 24%,transparent 74%)}
.hero4__in{position:relative;z-index:2;max-width:1120px;margin:0 auto;
padding:clamp(56px,9vw,128px) clamp(22px,4vw,24px) clamp(64px,8vw,112px);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){ .hero4__in{grid-template-columns:1fr;text-align:center}
.hero4__art{order:-1;margin:0 auto} .hero4 .lede,.hero4 h1{margin-left:auto;margin-right:auto}
.hero4__cta{justify-content:center} }
.hero4 .kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;
letter-spacing:.13em;text-transform:uppercase;color:#F0B269;margin:0 0 var(--s4)}
.hero4 .kicker::before{content:"";width:26px;height:2px;background:#D9822B;border-radius:2px}
.hero4 h1{font-weight:600;line-height:1.04;letter-spacing:-.015em;
font-size:clamp(2.4rem,5.9vw,4.5rem);margin:0 0 var(--s4);color:#fff;max-width:16ch}
.hero4 h1 .hl{font-style:italic;color:#F0B269;
background:linear-gradient(0deg,rgba(217,130,43,.32),rgba(217,130,43,.32)) no-repeat 0 86%/100% .13em}
.hero4 .lede{font-size:clamp(1.05rem,1.7vw,1.28rem);color:rgba(255,255,255,.82);max-width:46ch;line-height:1.55;margin:0 0 var(--s5)}
.hero4__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero4__cta .ds-btn{min-height:54px;font-size:16px;padding:0 28px}
.hero4__cta .ds-btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.38);--btn-sh:none}
.hero4__cta .ds-btn--ghost:hover{--btn-bg:rgba(255,255,255,.1);--btn-bd:rgba(255,255,255,.6)}
.hero4__trust{margin-top:var(--s4);color:rgba(255,255,255,.55);font-size:13.5px;font-weight:500}
.hero4__art{position:relative;width:100%;max-width:520px}
.hero4__art::before{content:"";position:absolute;inset:-8% -6% -2%;z-index:0;border-radius:32px;
background:radial-gradient(closest-side,rgba(217,130,43,.2),transparent 72%)}
.hero4__art .mk-window{position:relative;z-index:1;transform:rotate(-1.6deg);
box-shadow:0 44px 90px -26px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.07)}
.hero4__art .mk-phone{position:absolute;right:2px;bottom:0;width:168px;max-width:40%;margin:0;z-index:2;
transform:rotate(2.4deg)}
.hero4__stack{position:relative;padding-bottom:30px}
.hero4__cue{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:2px;
color:rgba(255,255,255,.55);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero4__cue:hover{color:rgba(255,255,255,.85)}
.hero4__cue svg{animation:cue-bob 1.9s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:no-preference){
.hero4__in>div>*{animation:hero-in .7s var(--ease) both}
.hero4__in>div>*:nth-child(2){animation-delay:.06s}
.hero4__in>div>*:nth-child(3){animation-delay:.12s}
.hero4__in>div>*:nth-child(4){animation-delay:.18s}
.hero4__art{animation:hero-in .8s var(--ease) both .12s}
.hero4__stack{animation:mk-float 7s ease-in-out infinite}
.hero4__art .mk-phone{animation:mk-float 7s ease-in-out infinite 1s}
}
@media(max-width:520px){ .hero4__art .mk-phone{width:38%;right:2px} .hero4__cue{display:none} }
/* ---- instinct layer: thumb-level action bar on phones (injected) ---- */
.mk-mcta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;
padding:10px max(16px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom));
background:rgba(255,253,249,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-top:1px solid var(--line);box-shadow:0 -10px 28px -14px rgba(16,24,40,.22);
transform:translateY(102%);transition:transform .28s var(--ease)}
.mk-mcta .ds-btn{flex:1;min-height:46px;font-size:14.5px}
@media(max-width:760px){ .mk-mcta{display:flex} .mk-mcta.show{transform:none} }
/* ---- mobile air: real side padding, calmer type, less clutter ---- */
@media(max-width:700px){
.mk-wrap{padding-left:22px;padding-right:22px}
.mk-section{padding:clamp(40px,10vw,56px) 0}
.mk-lede{font-size:1.02rem}
.mk-vstrip{grid-template-columns:1fr 1fr}
.mk-vstrip>div{padding:16px 10px}
.mk-vstrip b{font-size:1.3rem}
.mk-statement{font-size:clamp(1.7rem,7.4vw,2.4rem)}
.mk-h2{font-size:clamp(1.45rem,6.4vw,2rem)}
.mk-pain{grid-template-columns:1fr}
}
/* ================================================================
REFINE v4 — the clean pass. ONE accent (Servora blue), white
canvas, zero decorative tick marks, surfaces built into the page
instead of floating on it. Overrides the copper experiment above.
================================================================ */
/* white canvas, cool quiet bands */
body:has(#site-nav){background:#fff}
body:has(#site-nav) .mk-band{background:#F5F7FA}
body:has(#site-nav) .mk-vstrip{background:#E8EBF1}
body:has(#site-nav) .mk-vstrip>div{background:#fff}
/* no decorative dashes anywhere — type carries the hierarchy alone */
.mk-eyebrow::before{content:none}
.hero4 .kicker::before{content:none}
.mk-eyebrow{letter-spacing:.14em}
.mk-eyebrow b{color:var(--slate-2);font-weight:700;font-variant-numeric:tabular-nums;margin-right:2px}
/* hero: blue only, quieter */
.hero4{background:
radial-gradient(900px 520px at 76% 12%,rgba(46,107,240,.17),transparent 58%),
linear-gradient(180deg,#0C1424,#0A111E)}
.hero4 .kicker{color:#8FB4FF;letter-spacing:.16em}
.hero4 h1 .hl{font-style:italic;color:#9DC1FF;background:none}
.hero4__art::before{background:radial-gradient(closest-side,rgba(46,107,240,.22),transparent 72%)}
/* services grid: a connected hairline table, not floating cards */
.svcgrid{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.svgc{border:0;border-radius:0;box-shadow:none}
.svgc::before,.svgc::after{display:none}
.svgc:hover{transform:none;box-shadow:none;background:#F7F9FC;border-color:transparent}
/* the story band: the widget is part of the page, not a box on it */
.mk-dark .psw__stage{box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.mk-dark .psw__q{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff}
.mk-dark .psw__q:hover{border-color:rgba(255,255,255,.3)}
.mk-dark .psw__q.is-on{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);box-shadow:none}
.mk-dark .psw__q__n{color:rgba(255,255,255,.45)}
.mk-dark .psw__q.is-on .psw__q__n{color:#8FB4FF}
.mk-dark .psw__q__t{color:#fff}
.mk-dark .psw__q__tag{background:rgba(255,255,255,.09);color:rgba(255,255,255,.6)}
.mk-dark .psw__q.is-on .psw__q__tag,
.mk-dark .psw__q--svc.is-on .psw__q__tag{background:rgba(46,107,240,.32);color:#BDD4FF}