/* ============================================================
   DFM CANADA · V15 — V14 visual system with functional review tools
   Type from the web-kit schema (Space Grotesk + IBM Plex Mono).
   Palette: PROVISIONAL, no trust-blue (banned). Light neutral + deep
   pine dark bands + a single confident emerald accent. Marco locks finals.
   ============================================================ */
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-var.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#fafbf9;
  --bg-alt:#ffffff;
  --ink:#101816;
  --ink-soft:#4f5a55;
  --ink-3:#8a948e;
  --hairline:#dfe6e0;
  --dark:#0d2b21;        /* deep pine band */
  --dark-2:#0a2118;
  --dark-ink:#eef4ef;
  --dark-soft:#9db4a8;
  --blue:#12a577;        /* emerald accent (NOT trust-blue); name kept for reuse */
  --blue-deep:#0c8a63;
  --blue-on-dark:#3ddc97;
  --mint:#3ddc97;
  --warn:#b35c00;
  --tint:#eef5f0;

  --disp:"Space Grotesk",Helvetica,sans-serif;
  --body:"Space Grotesk",Helvetica,sans-serif;
  --mono:"IBM Plex Mono",Menlo,monospace;

  --fs-super:clamp(48px,7.6vw,104px);
  --fs-h1:clamp(38px,5.6vw,76px);
  --fs-h2:clamp(28px,3.8vw,50px);
  --fs-h3:clamp(19px,2.2vw,26px);
  --fs-num:clamp(44px,5.6vw,88px);
  --fs-body:15.5px;
  --fs-small:13.5px;
  --fs-label:11px;
  --track-tight:0;
  --track-label:.16em;

  --wrap:1240px; --gutter:clamp(20px,4vw,48px);
  --r:14px; --r-lg:20px;
  --ease:cubic-bezier(.19,1,.22,1);
  --shadow-lg:0 30px 60px -30px rgba(13,43,33,.26),0 12px 24px -14px rgba(13,43,33,.15);
  --shadow-md:0 16px 40px -20px rgba(13,43,33,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;transform:translateY(-180%);background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px;font-weight:600;transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.num{font-variant-numeric:tabular-nums}
.label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.eyebrow{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--blue)}
.eyebrow--mint{color:var(--mint)}.eyebrow--mint::before{background:var(--mint)}

.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-weight:600;font-size:15px;padding:14px 26px;border:1px solid transparent;transition:transform .12s,background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-deep)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ghost-light{background:transparent;color:#fff;border-color:#2c4a3e}
.btn--ghost-light:hover{border-color:#fff}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

.reveal-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-ready [data-reveal]{opacity:1;transform:none}}