/* =====================================================================
   NON MAJORITY DIGITAL — base design system
   Shared by the home app and every service page.
   Dark-first; light is a full peer theme (html[data-theme="light"]).
   ===================================================================== */

/* ---------- fonts (self-hosted, OFL — see /assets/fonts/LICENSE-*) ---------- */
@font-face{font-family:"Ultra";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/ultra-latin.woff2) format("woff2")}
@font-face{font-family:"Ultra";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/ultra-latin.woff2) format("woff2")}
@font-face{font-family:"Slabo 27px";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/slabo-27px-latin.woff2) format("woff2")}
@font-face{font-family:"Slabo 27px";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/slabo-27px-latin.woff2) format("woff2")}

/* ---------- tokens: dark ---------- */
:root{
  color-scheme:dark;
  --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --bg:#070B09;
  --bg-2:#0A100D;
  --surface:#0C1310;
  --surface-2:#111A15;
  --surface-3:#16211B;
  --line:rgba(196,226,204,.085);
  --line-2:rgba(196,226,204,.15);
  --line-3:rgba(196,226,204,.27);
  --ink:#EDF3EE;
  --ink-2:#B3C5B9;
  --ink-3:#7C9184;
  --ink-4:#4D5F55;

  /* sage — the brand accent, upgraded into a full ramp */
  --sage:#8FBC8F;
  --sage-hi:#BDE5C3;
  --sage-lo:#5F8E68;
  --sage-deep:#2C4733;
  --sage-soft:rgba(143,188,143,.11);
  --sage-glow:rgba(143,188,143,.42);
  /* serif accent ink and the rare warm signal */
  --accent-serif:#D4EBD6;
  --bone:#E8E0CC;
  --ember:#E7B978;
  --ember-soft:rgba(231,185,120,.14);

  --btn-bg:#BDE5C3;
  --btn-bg-hover:#D2F0D6;
  --btn-fg:#06100A;

  --field-bg:rgba(3,6,5,.42);
  --field-text:#EDF3EE;
  --field-ph:#5F7368;

  --success:#4ADE80;
  --warning:#F5B44A;
  --danger:#F26D6D;
  --info:#9FB2A6;

  --f-sans:"Slabo 27px","Rockwell","Roboto Slab",Georgia,serif;
  --f-mono:"Slabo 27px","Rockwell","Roboto Slab",Georgia,serif;
  --f-serif:"Ultra","Rockwell Extra Bold","Roboto Slab",Georgia,serif;

  --head-h:72px;
  --foot-h:56px;
  --pad:clamp(18px,3.6vw,56px);
  --maxw:1520px;
  --ease:cubic-bezier(.16,.84,.24,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-back:cubic-bezier(.34,1.5,.64,1);
  --r-xs:2px;
  --r-sm:4px;
  --r-md:8px;
  --r-lg:14px;
  --shadow-1:0 1px 0 rgba(255,255,255,.035) inset,0 24px 60px -32px rgba(0,0,0,.85);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset,0 40px 90px -40px rgba(0,0,0,.95);
}

/* ---------- tokens: light ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F1EA;
  --bg-2:#ECEAE2;
  --surface:#FAF9F5;
  --surface-2:#F0EEE7;
  --surface-3:#E6E4DB;
  --line:rgba(20,34,27,.09);
  --line-2:rgba(20,34,27,.16);
  --line-3:rgba(20,34,27,.3);
  --ink:#13201A;
  --ink-2:#384B41;
  --ink-3:#64766B;
  --ink-4:#9AA79F;
  --sage:#4F7A58;
  --sage-hi:#2E5A3A;
  --sage-lo:#7FAE86;
  --sage-deep:#CFE2D1;
  --sage-soft:rgba(79,122,88,.09);
  --sage-glow:rgba(79,122,88,.28);
  --accent-serif:#3C6847;
  --bone:#7A6643;
  --ember:#B4742A;
  --ember-soft:rgba(180,116,42,.12);
  --btn-bg:#1D3326;
  --btn-bg-hover:#2A4A36;
  --btn-fg:#F3F1EA;
  --field-bg:#FCFBF8;
  --field-text:#13201A;
  --field-ph:#97A49C;
  --success:#1F9D55;
  --warning:#B7791F;
  --danger:#C53030;
  --info:#5E6E65;
  --shadow-1:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -28px rgba(20,34,27,.35);
  --shadow-2:0 1px 0 rgba(255,255,255,.8) inset,0 30px 70px -36px rgba(20,34,27,.42);
}

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--font, var(--f-sans));font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";transition:background-color .6s var(--ease),color .6s var(--ease)}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
::selection{background:var(--sage-hi);color:var(--btn-fg)}
:focus-visible{outline:1.5px solid var(--sage-hi);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;z-index:200;padding:10px 14px;background:var(--btn-bg);color:var(--btn-fg);font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-sm);transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}

/* ---------- atmosphere layers ---------- */
.aurora{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.aurora.on{opacity:1}
.gridlines{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:96px 96px;background-position:-1px -1px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 62% 30%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 62% 30%,#000 0%,transparent 72%)}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:3;opacity:.085;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain 1.2s steps(6) infinite}
:root[data-theme="light"] .grain{opacity:.07;filter:invert(1)}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* hairline rails with measure ticks */
.rails{position:fixed;inset:var(--head-h) 0 var(--foot-h);pointer-events:none;z-index:4;display:none}
@media (min-width:1180px){.rails{display:block}}
.rails::before,.rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rails::before{left:calc(var(--pad) / 2)}
.rails::after{right:calc(var(--pad) / 2)}
.rail-ticks{position:absolute;top:0;bottom:0;left:calc(var(--pad) / 2);width:7px;
  background-image:repeating-linear-gradient(180deg,var(--line-2) 0 1px,transparent 1px 48px)}
.rail-ticks.r{left:auto;right:calc(var(--pad) / 2);transform:scaleX(-1)}
.rail-code{position:absolute;left:calc(var(--pad) / 2 - 12px);bottom:12%;writing-mode:vertical-rl;transform:rotate(180deg);
  font:500 10px/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-4)}
.rail-code.r{left:auto;right:calc(var(--pad) / 2 - 12px);bottom:auto;top:10%;transform:none}

/* ---------- type ---------- */
.display{font-family:var(--f-sans);font-weight:600;letter-spacing:-.045em;line-height:.92;font-feature-settings:"ss01","cv11","case";text-wrap:balance}
.lede{text-wrap:pretty}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:340;letter-spacing:-.02em;font-optical-sizing:auto;color:var(--accent-serif)}
.display .serif{letter-spacing:-.03em}
.display .serif{line-height:.9;padding-right:.04em}
.h1{font-size:clamp(3.1rem,8.2vw,9.4rem)}
.h2{font-size:clamp(2.2rem,4.6vw,4.6rem)}
.h3{font-size:clamp(1.35rem,2vw,1.8rem);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.lede{font-size:clamp(1.02rem,1.25vw,1.18rem);color:var(--ink-2);max-width:56ch;line-height:1.62;letter-spacing:-.005em}
.muted{color:var(--ink-3)}
.mono,.tag{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kicker{display:inline-flex;align-items:center;gap:12px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.kicker::before{content:"";width:6px;height:6px;background:var(--sage);box-shadow:0 0 0 3px var(--sage-soft),0 0 14px var(--sage-glow)}
.kicker .ix{color:var(--ink-4)}
.text-link{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;padding-bottom:2px;
  background:linear-gradient(var(--sage),var(--sage)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.text-link::after{content:"";display:inline-block;width:.8em;height:.8em;background:currentColor;-webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat;font-size:.82em;color:var(--sage);transition:transform .4s var(--ease-back)}
.text-link:hover{color:var(--sage-hi);background-size:0 1px;background-position:100% 100%}
.text-link:hover::after{transform:translate(2px,-2px)}

/* NONMAJORITY CRM pill: sage diamond, product name, action, external arrow */
.crm-link{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:8px 16px 8px 14px;border-radius:999px;white-space:nowrap;
  font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  background:var(--sage-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 55%,transparent);transition:color .3s,box-shadow .3s,background .3s}
.crm-link::before{content:"";width:6px;height:6px;flex:none;background:var(--sage);transform:rotate(45deg);box-shadow:0 0 10px var(--sage-glow)}
.crm-link b{font-weight:500;color:var(--ink)}
.crm-link b::after{content:"\00b7";margin-left:10px;color:var(--ink-3)}
.crm-link::after{content:"";display:inline-block;width:.8em;height:.8em;background:currentColor;-webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat;color:var(--sage);transition:transform .4s var(--ease-back)}
.crm-link:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--sage),0 10px 30px -14px var(--sage-glow);background:color-mix(in srgb,var(--sage) 16%,transparent)}
.crm-link:hover::after{transform:translate(2px,-2px)}

/* ---------- buttons: label cell + arrow cell ---------- */
.btn{--bh:52px;position:relative;display:inline-flex;align-items:stretch;height:var(--bh);border-radius:var(--r-sm);overflow:hidden;isolation:isolate;
  font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .35s,border-color .35s,color .35s}
.btn>span{display:inline-flex;align-items:center;padding:0 22px;position:relative;z-index:1;min-width:0}
.btn .arrow{position:relative;z-index:1;width:var(--bh);flex:none;display:grid;place-items:center;overflow:hidden;border-left:1px solid var(--btn-sep,rgba(0,0,0,.14))}
.btn .arrow::before,.btn .arrow::after{content:"";grid-area:1/1;width:14px;height:10px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .55s var(--ease)}
.btn .arrow::after{transform:translateX(calc(var(--bh) * -.8))}
.btn:hover .arrow::before{transform:translateX(calc(var(--bh) * .8))}
.btn:hover .arrow::after{transform:none}
.btn-red,.btn-primary{background:var(--btn-bg);color:var(--btn-fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 var(--sage-glow)}
.btn-red::before,.btn-primary::before{content:"";position:absolute;inset:0;z-index:0;background:var(--btn-bg-hover);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn-red:hover::before,.btn-primary:hover::before{transform:scaleX(1);transform-origin:left}
.btn-red:hover,.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 44px -18px var(--sage-glow)}
.btn-ghost{--btn-sep:var(--line-2);color:var(--ink);background:color-mix(in srgb,var(--surface) 55%,transparent);box-shadow:inset 0 0 0 1px var(--line-3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:0;background:var(--sage-soft);opacity:0;transition:opacity .4s}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--sage);color:var(--ink)}
.btn-ghost:hover::before{opacity:1}
.btn:active{transform:scale(.985)}
.btn-sm{--bh:44px;font-size:11px}
.btn-sm>span{padding:0 16px}
.btn[disabled],.btn[aria-busy="true"]{opacity:.5;pointer-events:none}
.btn[aria-busy="true"] .arrow::before{animation:busy 1s linear infinite}
@keyframes busy{0%{transform:translateX(calc(var(--bh) * -.8))}100%{transform:translateX(calc(var(--bh) * .8))}}
.btn .arrow:only-child{border-left:0}

/* ---------- surfaces ---------- */
.glass,.panel{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 88%,transparent));
  border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.glass::before,.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--sage-soft),transparent 65%)}
.glass:hover::before,.panel:hover::before{opacity:1}
.glass::after,.panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(var(--line-3),var(--line-3)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 100% 100%/1px 10px no-repeat;
  transition:opacity .4s}
.glass:hover::after,.panel:hover::after{background:
    linear-gradient(var(--sage),var(--sage)) 0 0/14px 1px no-repeat,
    linear-gradient(var(--sage),var(--sage)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--sage),var(--sage)) 100% 100%/14px 1px no-repeat,
    linear-gradient(var(--sage),var(--sage)) 100% 100%/1px 14px no-repeat}

/* ---------- header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;height:var(--head-h);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);
  transition:background .5s var(--ease),border-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
.site-head.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line-3);border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--ink);transition:border-color .4s,transform .6s var(--ease)}
.brand:hover .brand-mark{border-color:var(--sage);transform:rotate(-90deg)}
.brand:hover .brand-mark svg{transform:rotate(90deg)}
.brand-mark svg{width:20px;height:20px;transition:transform .6s var(--ease)}
.brand-word{display:flex;flex-direction:column;line-height:1;gap:5px}
.brand-word b{font-weight:600;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase}
.brand-word small{font:500 9.5px/1 var(--f-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3)}
.head-right{display:flex;align-items:center;gap:10px}
/* header CRM button: full label on wide screens, "CRM" on phones */
.head-crm{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 60%,transparent)}
.head-crm>span{gap:9px}
.head-crm>span::before{content:"";width:6px;height:6px;flex:none;background:var(--sage);transform:rotate(45deg);box-shadow:0 0 10px var(--sage-glow)}
.head-crm b{font-weight:inherit}
.head-crm .hc-short{display:none}
@media (max-width:1240px){ .head-crm .hc-get{display:none} }
@media (max-width:640px){ .head-crm .hc-full{display:none} .head-crm .hc-short{display:inline} .head-crm>span{padding:0 11px;gap:7px} }
/* small phones: a touch tighter so the wordmark stays on one line beside the CRM button */
@media (max-width:400px){
  .site-head{gap:10px}
  .brand{gap:9px}
  .brand-word b{letter-spacing:.11em}
  .head-crm>span{padding:0 9px}
}
.icon-btn,.theme-toggle,.burger{width:44px;height:44px;flex:none;display:grid;place-items:center;position:relative;border-radius:var(--r-sm);color:var(--ink-2);
  background:color-mix(in srgb,var(--surface) 55%,transparent);box-shadow:inset 0 0 0 1px var(--line-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .35s,color .35s,background .35s}
.icon-btn:hover,.theme-toggle:hover,.burger:hover{box-shadow:inset 0 0 0 1px var(--line-3);color:var(--ink);background:color-mix(in srgb,var(--surface-2) 80%,transparent)}
.theme-toggle svg{width:18px;height:18px;transition:transform .7s var(--ease)}
.theme-toggle:hover svg{transform:rotate(40deg)}
.theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:block}
html[data-theme="light"] .theme-toggle:hover svg{transform:rotate(-20deg)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--foot-h) + 18px);transform:translate(-50%,16px);z-index:95;display:flex;gap:10px;align-items:center;
  padding:12px 16px;border-radius:var(--r-sm);font:500 12px/1.2 var(--f-mono);letter-spacing:.06em;color:var(--ink);opacity:0;pointer-events:none;
  background:color-mix(in srgb,var(--surface-2) 90%,transparent);box-shadow:inset 0 0 0 1px var(--line-3),0 20px 40px -20px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .35s,transform .6s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--info)}
.toast.success::before{background:var(--success);box-shadow:0 0 10px var(--success)}
.toast.error::before{background:var(--danger)}
.toast.warning::before{background:var(--warning)}

/* ---------- reveals ---------- */
[data-r]{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.in[data-r]{opacity:1;transform:none}
.mask-line{display:block;overflow:hidden;padding:.12em .06em .14em 0;margin:-.12em -.06em -.14em 0}
.mask-line>span{display:block;transform:translate3d(0,108%,0) rotate(2.5deg);transform-origin:0 100%;transition:transform 1.25s var(--ease)}
.mask-line.in>span{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-r],.mask-line>span{opacity:1!important;transform:none!important}
  .grain{animation:none}
}