/* ==========================================================================
   GP CLIENT PROPOSAL DOSSIER  ·  co-branded editorial house style
   Reverse-engineered from Ryan's Fiji TV + Winfield OS client dossiers.
   THE LAW: the CLIENT's brand leads (their real logo, their accent colour on
   every eyebrow, badge, number and rule); GHOST PROTOCOL is present as the
   maker (mono top-right on the cover, footer-right on every interior page,
   a dedicated builder page near the end). Swap a client by editing the
   :root CLIENT PALETTE block + the cover mode + the logo file.
   Serif (Fraunces) headlines + body prose; sans (Geist) card titles + labels;
   mono (JetBrains Mono) eyebrows, headers, footers, stat captions.
   ========================================================================== */

@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces.ttf') format('truetype');font-weight:100 900;font-display:block}
@font-face{font-family:'Geist';src:url('assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono.ttf') format('truetype');font-weight:100 800;font-display:block}

:root{
  /* ---- CLIENT PALETTE (the block to swap per client) : MAVEN ----
     Verified LIVE from maven.com 2026-07-24: navy #080C28 canvas, Font Bureau
     serif headlines, blue->lavender gradient accent (their "Product Sense"). */
  --accent:#6E9BF2;         /* Maven periwinkle blue, solid accent */
  --accent-deep:#5B76E8;    /* richer blue/indigo, for emphasis on light pages */
  --accent-2:#B9A6F0;       /* lavender, the gradient's far end */
  --gradient:linear-gradient(100deg,#6E9BF2 0%,#9E8DF3 55%,#C0A9F2 100%);
  --accent-tint:#eef2fd;    /* faint blue wash for callouts + the "after" column */
  --accent-bd:#d2ddf8;      /* blue hairline for tinted borders */

  /* ---- neutral system ---- */
  --ink:#080C28;            /* Maven navy-black (their real canvas colour) */
  --ink-soft:#454a63;
  --ink-mut:#868ba0;
  --ink-faint:#b2b6c6;
  --bg:#ffffff;             /* light interior pages, like Maven's lower site */
  --line:#e7e4de;
  --line-soft:#f0eee9;
  --card-bd:#e4e1db;

  /* ---- dark cover ---- */
  --navy:#080C28;
  --navy-soft:#11163a;
  --navy-line:rgba(255,255,255,0.10);
  --navy-grid:rgba(255,255,255,0.038);
  --on-navy:#f3f4fb;
  --on-navy-soft:#a9adc9;
  --on-navy-mut:#71768f;
}

*{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none;color:inherit}
@page{size:A4;margin:0}
html{background:#c9ccd6}
body{font-family:'Fraunces',Georgia,serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

.page{position:relative;width:210mm;height:297mm;background:var(--bg);overflow:hidden;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.page + .page{page-break-before:always}
.frame{position:absolute;left:16mm;right:16mm;top:14mm;bottom:13mm;display:flex;flex-direction:column}

.mono{font-family:'JetBrains Mono',monospace}
/* solid emphasis, safe mid-sentence on every interior page */
.grad{color:var(--accent-deep);font-style:italic}
/* true gradient, only where the phrase is a clean standalone line (the cover hero) */
.grad-hero{background:var(--gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-style:italic}

/* logo (SVG uses currentColor, so it inherits `color`) */
.logo{display:block}
.logo svg{display:block;height:100%;width:auto}

/* ================= COVER (dark, Maven navy) ================= */
.cover{background:var(--navy);color:var(--on-navy);
  background-image:linear-gradient(90deg,var(--navy-grid) 1px,transparent 1px),linear-gradient(var(--navy-grid) 1px,transparent 1px);
  background-size:14mm 14mm}
.cover .accentbar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--gradient)}
.cover .frame{top:20mm;color:var(--on-navy)}

.chead{display:flex;justify-content:space-between;align-items:center}
.chead .logo{height:30px;color:#fff}
.cby{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--on-navy-soft);text-align:right}

.cover .block{margin-top:auto}
.ceyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);font-weight:500;margin-bottom:18px}
.ctitle{font-family:'Fraunces',serif;font-weight:500;font-size:54px;line-height:1.05;letter-spacing:-.02em;color:#fff}
.ctitle .grad-hero{font-weight:500}
.clede{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:16.5px;line-height:1.55;color:var(--on-navy-soft);margin-top:22px;max-width:150mm}
.crule{width:52px;height:3px;background:var(--gradient);margin-top:24px}

.cfoot{margin-top:auto;padding-top:16px;border-top:1px solid var(--navy-line);display:flex;justify-content:space-between;align-items:flex-end}
.cfoot .l{font-family:'Fraunces',serif;font-size:12.5px;color:var(--on-navy-soft);line-height:1.75}
.cfoot .l b{color:#fff;font-weight:600}
.cfoot .l .mono{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--on-navy-mut)}
.cfoot .r{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:var(--on-navy-mut);text-align:right;line-height:2}

/* ================= INTERIOR RUNNING FURNITURE ================= */
.rhead{display:flex;justify-content:space-between;align-items:center;padding-bottom:11px;border-bottom:1px solid var(--line)}
.rhead .logo{height:19px;color:var(--ink)}
.rhead .sec{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mut)}
.rhead .sec b{color:var(--ink);font-weight:600}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-top:16px}
.eyebrow-rule{width:34px;height:2px;background:var(--gradient);margin-top:9px;margin-bottom:16px}

.dtitle{font-family:'Fraunces',serif;font-weight:600;font-size:30px;line-height:1.08;letter-spacing:-.018em;color:var(--ink)}
.dtitle em,.dtitle .grad{font-style:italic}
.dtitle em{color:var(--accent-deep)}
.dlede{font-family:'Fraunces',serif;font-size:15px;line-height:1.62;color:var(--ink-soft);margin-top:14px;max-width:150mm}
.dlede b{color:var(--ink);font-weight:600}
.dbody{font-family:'Fraunces',serif;font-size:13.5px;line-height:1.68;color:var(--ink-soft);margin-top:12px;max-width:135mm}
.dbody b{color:var(--ink);font-weight:600}

.dfoot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* ================= STAT STRIP ================= */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--card-bd);border-radius:12px;overflow:hidden;margin-top:8mm}
.statstrip.c3{grid-template-columns:repeat(3,1fr)}
.stat{padding:20px 20px 18px;border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:none}
.stat .n{font-family:'Fraunces',serif;font-weight:600;font-size:38px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat .n small{font-size:15px;color:var(--accent-deep)}
.stat .cap{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mut);margin-top:12px;line-height:1.5}
.statnote{font-family:'Fraunces',serif;font-size:11px;font-style:italic;color:var(--ink-mut);margin-top:10px;line-height:1.5}

/* ================= CARDS ================= */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:7mm}
.card{border:1px solid var(--card-bd);border-radius:12px;padding:18px 20px 17px}
.card .ct{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.badge{width:22px;height:22px;border-radius:5px;background:var(--gradient);color:#fff;font-family:'Geist',sans-serif;
  font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.card .h{font-family:'Geist',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.card .p{font-family:'Fraunces',serif;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.card .p b{color:var(--ink);font-weight:600}

/* ================= EXAMPLE / COMMAND BOX ================= */
.cmdbox{border:1px solid var(--accent-bd);border-radius:12px;background:var(--accent-tint);padding:18px 22px;margin-top:6mm}
.cmdbox .q{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft)}
.cmdbox .r{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--accent-deep);margin-top:11px}

/* ================= BEFORE / AFTER TABLE ================= */
table.ba{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:6mm}
.ba col.m{width:25%}.ba col.c{width:37.5%}
.ba thead th{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:0 14px 9px 0;border-bottom:1px solid var(--ink);color:var(--ink-mut);vertical-align:bottom}
.ba thead th.good{color:var(--accent-deep)}
.ba tbody td{font-family:'Fraunces',serif;font-size:12px;line-height:1.5;color:var(--ink-soft);vertical-align:top;
  padding:13px 14px 13px 0;border-bottom:1px solid var(--line-soft)}
.ba .moment{font-weight:600;color:var(--ink);font-size:12.5px}
.ba td.good{color:var(--ink);background:var(--accent-tint)}
.ba tbody tr.key .moment{font-weight:700}
.ba tbody tr.key td.good{font-weight:600;color:var(--accent-deep)}

/* ================= NEXT-STEP STRIP ================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--card-bd);border-radius:12px;overflow:hidden;margin-top:6mm}
.steps.c3{grid-template-columns:repeat(3,1fr)}
.step{padding:18px 18px 17px;border-left:1px solid var(--line-soft);text-align:center}
.step:first-child{border-left:none}
.step .n{font-family:'Fraunces',serif;font-weight:600;font-size:22px;line-height:1;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.step .h{font-family:'Geist',sans-serif;font-weight:700;font-size:12px;color:var(--ink);margin-top:9px}
.step .p{font-family:'Fraunces',serif;font-size:11px;line-height:1.5;color:var(--ink-soft);margin-top:6px}

/* ================= CALLOUT ================= */
.callout{position:relative;background:var(--accent-tint);padding:16px 20px 16px 22px;margin-top:6mm;border-radius:10px;overflow:hidden}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient)}
.callout .big{font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.callout .big em,.callout .big .grad{font-style:italic}
.callout .big em{color:var(--accent-deep)}
.callout p{font-family:'Fraunces',serif;font-size:12px;line-height:1.6;color:var(--ink-soft);margin-top:9px}
.callout p b{color:var(--ink);font-weight:600}

/* ================= CTA BAND ================= */
.ctaband{margin-top:auto;border-radius:14px;background:var(--navy);color:var(--on-navy);
  padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:24px;
  background-image:linear-gradient(90deg,var(--navy-grid) 1px,transparent 1px),linear-gradient(var(--navy-grid) 1px,transparent 1px);background-size:9mm 9mm}
.ctaband .l .h{font-family:'Fraunces',serif;font-weight:500;font-size:21px;letter-spacing:-.01em;color:#fff;line-height:1.15}
.ctaband .l .h .grad{font-weight:500;color:var(--accent-2)}
.ctaband .l .p{font-family:'Fraunces',serif;font-size:12px;color:var(--on-navy-soft);margin-top:9px;max-width:105mm;line-height:1.5}
.ctaband .r{text-align:right;flex:0 0 auto}
.ctaband .r .cta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#0a0d24;
  background:var(--gradient);border-radius:8px;padding:12px 18px;display:inline-block;font-weight:700;white-space:nowrap}
.ctaband .r .who{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.06em;color:var(--on-navy-mut);line-height:1.9;margin-top:13px}
.ctaband .r a.cta{cursor:pointer}

/* Ghost Protocol engineering credit */
.gpcredit{margin-top:14px;text-align:center;font-family:'Fraunces',serif;font-style:italic;
  font-size:11px;line-height:1.5;color:var(--ink-mut)}
.gpcredit b{color:var(--ink-soft);font-weight:600;font-style:normal}