/* ============================================================
   Maurice Holdings LLC — company site

   Visual language: technical drawing, not startup gradient.
   Warm paper ground, hairline rules, a drawn group schematic,
   numbered sections. Deliberately avoids the current default
   look of software company sites — dark glass, mesh gradients,
   glowing orbs, gradient headline text.

   All colour, spacing and type live in the token block below.
   ============================================================ */

:root {
  /* ink + paper */
  --ink:        #14181e;
  --ink-soft:   #3d4653;
  --muted:      #6f7887;
  --line:       #e3e1db;
  --line-soft:  #eeece6;
  --paper:      #fcfbf8;
  --paper-2:    #f6f4ef;
  --card:       #ffffff;

  /* accent */
  --accent:     #1f4ba8;
  --accent-ink: #16367a;
  --accent-wash:#eaf0fb;

  /* venture accents */
  --qw:     #0fb3a6;   /* live calls app — as it ships */
  --qw-pro: #0d4f49;   /* desktop business app — same mark, quieter */
  --pkd: #0057b7;
  --pkp: #b8860b;
  --bs:  #232a35;

  /* scale */
  --wrap:      1120px;
  --radius:    12px;
  --radius-sm: 8px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --t-fast: 120ms cubic-bezier(.2,.6,.3,1);
  --t-base: 220ms cubic-bezier(.2,.6,.3,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.16; letter-spacing: -.021em; margin: 0; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 99; }
.skip:focus { left: 0; top: 0; color: #fff; }

/* small caps label used across sections */
.eyebrow, .sec-num, .stack-label, .footer-head, .schematic-cap {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow  { color: var(--accent); margin-bottom: 20px; }
.sec-num  { color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 40px; }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(252,251,248,.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 32px; height: 32px; flex: none; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
}
.brand-name { font-weight: 640; font-size: 15.5px; letter-spacing: -.008em; }
.brand-suffix { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: 12.5px; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  color: var(--ink-soft); font-size: 14.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.site-nav a:hover  { background: var(--paper-2); color: var(--ink); }
.site-nav a:active { background: var(--line-soft); }
.nav-cta { background: var(--ink) !important; color: var(--paper) !important; margin-left: 8px; }
.nav-cta:hover  { background: #262d38 !important; }
.nav-cta:active { transform: translateY(1px); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* faint engineering grid — 24px minor squares, no gradient anywhere */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(20,24,30,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,24,30,.085) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
.hero > .wrap { position: relative; }
.hero-head { max-width: 760px; }
.hero h1 { font-size: clamp(38px, 5.3vw, 60px); font-weight: 700; letter-spacing: -.032em; }
.lede { margin-top: 24px; max-width: 660px; font-size: 18.5px; color: var(--ink-soft); }
.lede strong { color: var(--ink); font-weight: 620; }

/* ── Schematic ────────────────────────────────────────────── */
.schematic {
  margin: 62px 0 0;
  padding: 26px 28px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.schematic-cap { color: var(--muted); margin-bottom: 18px; }
.schematic svg { display: block; width: 100%; height: auto; overflow: visible; }

.s-rule path, .s-rule rect { fill: none; stroke: var(--ink); stroke-width: 1; }
.s-rule rect { stroke: var(--ink); }
.s-dot { fill: var(--ink); stroke: none; }

.s-root { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .07em; fill: var(--ink); }
.s-sub  { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; fill: var(--muted); }

.s-row text { font-family: var(--font); font-size: 15px; font-weight: 550; fill: var(--ink); }
.s-row .s-tag, .s-subrow .s-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  fill: var(--muted); text-anchor: end;
}
.s-lead { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }

/* the two Qwickword applications, one level in */
.s-subrule path { fill: none; stroke: #bdb9b0; stroke-width: 1; }
.s-subrow text  { font-family: var(--font); font-size: 13px; font-weight: 500; fill: var(--ink-soft); }

.c-qw     { fill: var(--qw); }
.c-qw-pro { fill: var(--qw-pro); }
.c-pkd { fill: var(--pkd); }
.c-pkp { fill: var(--pkp); }
.c-bs  { fill: var(--bs);  }

/* ── 01 Approach ──────────────────────────────────────────── */
.pillars { padding: 78px 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.pillar { padding-top: 18px; border-top: 1px solid var(--ink); }
.pillar h2 { font-size: 18px; font-weight: 640; margin-bottom: 10px; }
.pillar p  { font-size: 15.5px; color: var(--muted); }

/* ── Section heads ────────────────────────────────────────── */
.section-head { max-width: 660px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(27px, 3.3vw, 36px); font-weight: 700; letter-spacing: -.026em; }
.section-sub { margin-top: 14px; color: var(--muted); font-size: 16.5px; }

/* ── 02 Portfolio ─────────────────────────────────────────── */
.products { padding: 84px 0; }

.product {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px 30px;
  background: var(--card);
  margin-bottom: 20px;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.product:hover {
  border-color: #cfccc4;
  box-shadow: 0 12px 34px -20px rgba(20,24,30,.35);
  transform: translateY(-2px);
}

.product-head { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.product-mark {
  width: 52px; height: 52px; flex: none; border-radius: 11px;
  display: grid; place-items: center; object-fit: cover;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .03em; color: #fff;
}
.mark-pkd { background: var(--pkd); }
.mark-pkp { background: var(--pkp); }
.mark-bs  { background: var(--bs);  }

.product h3 { font-size: 21px; font-weight: 670; }
.product-role { font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.product-link {
  margin-left: auto; font-size: 13.5px; font-weight: 550; white-space: nowrap;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.product-link:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.product-link:active { transform: translateY(1px); }

.product-body { margin-top: 19px; max-width: 78ch; color: var(--ink-soft); font-size: 16px; }

.subproducts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.subproduct { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 19px 21px; }
.subproduct h4 { font-size: 16px; font-weight: 640; margin: 11px 0 8px; }
.subproduct p  { font-size: 14.6px; color: var(--muted); }

.sub-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.sub-mark { width: 40px; height: 40px; flex: none; border-radius: 9px; object-fit: cover; }
.sub-head h4 { margin: 0 0 6px; }
.sub-note {
  margin-top: 11px; padding-left: 12px; border-left: 2px solid var(--line);
  font-size: 13.8px; color: var(--muted);
}
.tag {
  display: inline-block; font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
}
.tag-desktop { background: rgba(15,179,166,.14); color: #077268; }
.tag-mobile  { background: rgba(31,75,168,.11);  color: var(--accent-ink); }

/* ── Stack strip ──────────────────────────────────────────── */
.stack { padding: 48px 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stack-label { color: var(--muted); margin-bottom: 22px; }
.stack-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 38px; }
.stack-logos li { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 15px; }
.stack-logos svg { width: 18px; height: 18px; color: var(--ink); }
.stack-badge {
  font-size: 13px; font-weight: 520; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--card);
  padding: 6px 13px; border-radius: 999px;
}

/* ── 03 Company ───────────────────────────────────────────── */
.company { padding: 84px 0; }
.grid-2 { display: grid; grid-template-columns: 1.25fr .85fr; gap: 56px; align-items: start; }
.company h2 { font-size: clamp(26px, 3.1vw, 33px); font-weight: 700; margin-bottom: 18px; }
.company p { font-size: 16.5px; }
.company p + p { margin-top: 16px; }

.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--card); }
.contact-card h3 { font-size: 17.5px; font-weight: 640; margin-bottom: 8px; }
.contact-card > p { font-size: 14.8px; color: var(--muted); margin-bottom: 18px; }
.contact-card .btn { width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }

.facts { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 14.6px; color: var(--ink); font-weight: 540; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); padding: 52px 0 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 38px; }
.legal-name { font-weight: 700; color: var(--ink); font-size: 15.5px; margin-bottom: 10px; }
.site-footer address { font-style: normal; color: var(--muted); font-size: 14.6px; line-height: 1.75; }
.legal-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); margin-top: 10px; }
.legal-contact { margin-top: 8px; font-size: 14.6px; }

.footer-nav { display: grid; gap: 9px; align-content: start; }
.footer-head { color: var(--muted); margin-bottom: 3px; }
.footer-nav a { color: var(--ink-soft); font-size: 14.6px; }
.footer-nav a:hover { color: var(--accent); }

.footer-base { border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 28px; }
.footer-base p { font-size: 13.5px; color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-3, .grid-2, .subproducts { grid-template-columns: 1fr; }
  .grid-2 { gap: 34px; }
  .hero { padding: 68px 0 54px; }
  .products, .company { padding: 60px 0; }
  .schematic { margin-top: 46px; padding: 20px 18px 18px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .site-nav a:not(.nav-cta) { display: none; }
  .product { padding: 22px 18px 24px; }
  .product-link { margin-left: 0; }
  .stack-logos { gap: 22px; }
  .s-row text { font-size: 17px; }
  .s-root { font-size: 15px; }
}