@font-face{font-family:"LQ Radio Canada Big";src:url(/fonts/lq-radio-canada-big-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"LQ Radio Canada Big";src:url(/fonts/lq-radio-canada-big-italic-var.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{--ink:#151a35;--cover:#1d2547;--paper:#fff;--soft:#4a5070;--rule:#d8dbea;--err:#b0105f;--cover-text:#c5cbe3;
--sans:"LQ Radio Canada Big","Gill Sans","Segoe UI",system-ui,sans-serif;--gut:clamp(20px,5vw,80px);--ease:cubic-bezier(.16,1,.3,1);
color-scheme:light;scrollbar-color:#8f97bd var(--cover)}
[data-band="contents"],.tab-contents,.sw-contents{--fill:#ffffff;--on:#151a35;--line:#151a35}
[data-band="education"],.tab-education,.sw-education{--fill:#f6cf1d;--on:#151a35;--line:#b89400}
[data-band="training"],.tab-training,.sw-training{--fill:#c8146e;--on:#ffffff;--line:#c8146e}
[data-band="implementation"],.tab-implementation,.sw-implementation{--fill:#12b3b0;--on:#151a35;--line:#0b8a88}
[data-band="visibility"],.tab-visibility,.sw-visibility{--fill:#7cc6fe;--on:#151a35;--line:#1b6ca8}
[data-band="industries"],.tab-industries,.sw-industries{--fill:#1f6e3d;--on:#ffffff;--line:#1f6e3d}
[data-band="articles"],.tab-articles,.sw-articles{--fill:#b8a4f0;--on:#151a35;--line:#7a5fd6}
[data-band="frontdesk"],.tab-frontdesk,.sw-frontdesk{--fill:#ff7d5c;--on:#151a35;--line:#e0502c}
[data-band="paper"],.tab-paper,.sw-paper{--fill:#ffffff;--on:#151a35;--line:#151a35}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--cover);color:var(--ink);font:400 1.1875rem/1.6 var(--sans);font-variant-numeric:lining-nums;caret-color:#c8146e;text-rendering:optimizeLegibility}
::selection{background:#f6cf1d;color:var(--ink)}
[data-band="education"] .band ::selection{background:var(--ink);color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}
.band :focus-visible{outline-color:var(--on)}
.tabs :focus-visible,.colophon :focus-visible,.cookiebar :focus-visible,.skip-link:focus-visible{outline-color:#fff}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--line,var(--ink));transition:text-decoration-thickness .2s var(--ease)}
a:hover{text-decoration-thickness:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:10;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* binder */
.binder{max-width:1224px;margin:0 auto;padding:28px 28px 0}
.page{position:relative;z-index:2;background:var(--paper);border-radius:4px;box-shadow:0 2px 3px rgba(5,8,25,.3),0 26px 50px -24px rgba(5,8,25,.7);min-height:calc(100vh - 28px);display:flex;flex-direction:column}

/* masthead band, flooded with the current divider color */
.band{background:var(--fill);color:var(--on);border-radius:4px 4px 0 0}
.mast{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding:20px var(--gut) 0}
.word{font-weight:700;font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.rh{font-weight:700;font-size:.78rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:0 .6em;align-items:center}
.rh a{min-height:44px;display:inline-flex;align-items:center;text-decoration-color:currentColor}
.rh .sep{opacity:.7}
.title{padding:clamp(40px,6vw,96px) var(--gut) clamp(36px,4.5vw,64px)}
h1{margin:0;font-weight:700;font-size:clamp(2.4rem,1.4rem + 3.4vw,4.5rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;max-width:18ch}
[data-band="contents"] h1,[data-band="paper"] h1{border-bottom:3px solid var(--ink);padding-bottom:20px}
[data-band="contents"] h1{max-width:24ch}

/* sheet */
.sheet{flex:1;padding:clamp(36px,5vw,72px) var(--gut) clamp(64px,8vw,120px)}
.lede{font-size:clamp(1.3rem,1.05rem + .75vw,1.65rem);line-height:1.5;max-width:40ch}
.lede p{margin:0 0 .8em}
.prose{max-width:54ch}
.prose p,.prose ul,.prose ol{margin:0 0 1.05em}
.prose p,.lede p{text-wrap:pretty}
.prose li{margin:0 0 .4em;overflow-wrap:anywhere}
.prose ul,.prose ol{padding-left:1.2em}
.prose li::marker{color:var(--soft)}
.prose strong{font-weight:700}
.prose code{font-size:.9em;background:#eef0f7;padding:.1em .3em;border-radius:4px}
.prose table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.prose th,.prose td{text-align:left;padding:.5em .8em;border-bottom:1px solid var(--rule)}
.price{display:inline-block;font-weight:700;font-size:.78em;letter-spacing:.06em;padding:0 .4em;border:1.5px dashed var(--soft);border-radius:4px;white-space:nowrap;line-height:1.5}
.entry{margin-top:clamp(56px,6vw,88px)}
.sheet>.entry:first-child,.read>.entry:first-child{margin-top:0}
.entry h2{margin:0 0 .45em;font-weight:700;font-size:clamp(1.85rem,1.3rem + 1.6vw,2.75rem);line-height:1.15;letter-spacing:-.025em;text-wrap:balance;max-width:24ch}
.filed{padding-top:22px;position:relative}
.filed::before{content:"";position:absolute;top:0;left:0;width:56px;height:8px;border-radius:0 0 4px 4px;background:var(--fill);box-shadow:inset 0 0 0 1.5px rgba(21,26,53,.18)}

/* dot-leader listings */
.lbl{margin:0 0 10px;font-weight:700;font-size:.8rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.leaders,.prose .leaders{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:last baseline;gap:.55rem;min-height:48px;padding:.5rem 0;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.28rem;line-height:1.3}
.rl{flex:0 1 auto;text-wrap:pretty}
.rd{flex:1 1 1.5rem;min-width:1.5rem;border-bottom:3px dotted #9aa0bd;transform:translateY(-.22em);transition:border-color .2s var(--ease)}
.rr{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.row .ic{font-size:1.25rem}
.row:hover .rl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.row:hover .rd{border-bottom-color:var(--ink)}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--fill);box-shadow:inset 0 0 0 1.5px rgba(21,26,53,.3)}
.toc{margin:clamp(32px,4vw,48px) 0 0;max-width:70ch}
.leaders.index{margin-top:clamp(28px,4vw,48px);max-width:70ch}
.leaders.index .row{font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);min-height:56px;border-bottom:1px solid var(--rule)}
.leaders.act{margin-top:1.4em;max-width:70ch}
.leaders.act .row{font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem)}

/* home: the open directory page */
.open{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.open .lede{max-width:34ch}
.home-toc{margin:0}
.home-toc .row{font-size:clamp(1.25rem,1.05rem + .55vw,1.55rem);min-height:56px}
.k-home .entry .prose{font-size:1.1875rem;line-height:1.6}

/* faq: question at left, answer at right, a directory of questions */
.qa{margin-top:clamp(40px,5vw,64px);border-top:3px solid var(--ink)}
.q{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(24px,4vw,64px);padding:26px 0;border-bottom:1px solid var(--rule)}
.q h2{margin:0;font-weight:700;font-size:1.4rem;line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
.q .prose p:last-child{margin-bottom:0}

/* articles */
.read{max-width:56ch}
.read.prose{max-width:54ch}
.read .lede{max-width:none}
.k-post .entry{margin-top:clamp(44px,5vw,64px)}
.k-post .entry h2{font-size:clamp(1.6rem,1.25rem + 1vw,2.15rem)}

/* contact: the request card */
.desk{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.request{border:2px solid var(--ink);padding:0 clamp(18px,3vw,36px) clamp(22px,3vw,34px);background:var(--paper)}
.request-h{margin:0 calc(-1 * clamp(18px,3vw,36px)) 26px;padding:16px clamp(18px,3vw,36px);background:var(--fill);color:var(--on);font-weight:700;font-size:.85rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.desk-note{font-size:1.15rem;line-height:1.5;padding-top:8px;border-top:3px solid var(--ink)}
.inq{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.inq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.inq-textarea,.inq-actions,.inq-status{grid-column:1 / -1}
.inq label{font-weight:700;font-size:.98rem;line-height:1.3}
.inq-req{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.inq-field:has([required]) label::after{content:" *";color:var(--err);font-weight:700}
.inq::before{content:"* required";grid-column:1 / -1;margin-bottom:-8px;font-size:.92rem;color:var(--soft)}
.inq-hint{font-size:.95rem;line-height:1.4;color:var(--soft)}
.inq input,.inq select,.inq textarea{font:inherit;font-size:1.1rem;color:var(--ink);background:#f4f5fa;border:0;border-bottom:2px solid var(--ink);border-radius:6px 6px 0 0;min-height:50px;padding:10px 12px;width:100%;transition:background-color .2s var(--ease)}
.inq textarea{border:2px solid var(--ink);border-radius:8px;min-height:160px;resize:vertical;line-height:1.5}
.inq select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23151a35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:44px}
.inq input:focus-visible,.inq select:focus-visible,.inq textarea:focus-visible{background-color:#fff;outline:3px solid var(--ink);outline-offset:2px}
.inq ::placeholder{color:var(--soft)}
.inq [aria-invalid="true"]{border-color:var(--err);background-color:#fbeef4}
.inq-field:has([aria-invalid="true"]) label{color:var(--err)}
.inq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.inq-submit{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:700;font-size:1.1rem;min-height:52px;padding:0 24px;background:var(--fill);color:var(--on);border:2px solid var(--ink);border-radius:10px;cursor:pointer;text-decoration:none;box-shadow:0 2px 0 var(--ink),0 10px 18px -12px rgba(21,26,53,.7);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.inq-submit:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink),0 14px 22px -12px rgba(21,26,53,.7)}
.inq-submit:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.inq-submit:disabled{opacity:.55;cursor:not-allowed}
.inq-note{flex:1 1 280px;margin:0;font-size:.98rem;color:var(--soft);line-height:1.5}
.inq-note a{overflow-wrap:anywhere}
.inq-status{margin:0;font-weight:700;color:var(--ink)}
.inq-status:empty{display:none}
.inq:has([aria-invalid="true"]) .inq-status{color:var(--err)}

/* binder back: colophon */
.colophon{max-width:1224px;margin:0 auto;background:var(--cover);padding:28px calc(28px + var(--gut)) 40px;color:var(--cover-text);font-size:.98rem;line-height:1.5}
.colophon ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:4px 26px}
.colophon li{display:flex;align-items:center;min-height:44px}
.colophon a{color:#fff;text-decoration-color:#8f97bd}
.colophon .cname{color:#fff;font-weight:700}

/* cookie slip */
.cookiebar{position:fixed;left:20px;bottom:20px;z-index:20;max-width:440px;background:var(--ink);color:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 40px -16px rgba(0,0,0,.7);display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0;flex:1 1 220px;font-size:1rem;line-height:1.4}
.cookiebar-actions{display:flex;gap:10px}
.cookiebar button{font:inherit;font-weight:700;font-size:.98rem;min-height:44px;padding:0 16px;border-radius:8px;cursor:pointer;border:2px solid #fff}
.cookiebar [data-consent="denied"]{background:transparent;color:#fff}
.cookiebar [data-consent="granted"]{background:#fff;color:var(--ink)}
.cookiebar button:hover{background:#f6cf1d;border-color:#f6cf1d;color:var(--ink)}
body:has(.cookiebar:not([hidden])) .colophon{padding-bottom:140px}

@media (max-width:1100px){
.open,.desk{grid-template-columns:1fr}
.open .lede{max-width:44ch}
.desk-note{max-width:60ch}
}
@media (max-width:900px){
body{font-size:1.125rem}
.binder{display:block;padding:10px 0 0}
.page{margin:0 8px;min-height:0;border-radius:4px}
.band{border-radius:4px 4px 0 0}
.mast{flex-direction:column;align-items:flex-start;gap:0;padding-top:12px}
.rh{font-size:.72rem}
.q{grid-template-columns:1fr;padding:22px 0}
.q h2{font-size:1.28rem}
.inq{grid-template-columns:1fr}
.colophon{padding:24px 24px 32px}
.colophon ul{flex-wrap:wrap}
body:has(.cookiebar:not([hidden])) .colophon{padding-bottom:200px}
.cookiebar{left:8px;right:8px;bottom:8px;max-width:none;padding:12px 14px}
.cookiebar-actions{flex:1 1 100%}
.cookiebar button{flex:1}
.row{font-size:1.15rem;gap:.4rem}
.rr{font-size:.72rem;letter-spacing:.05em;gap:.35rem}
.rd{min-width:.8rem}
.cookiebar p{font-size:.92rem}
.cookiebar button{min-height:44px;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
body{background:#fff}.tabs,.cookiebar,.colophon{display:none}.page{box-shadow:none}
}

/* Accessibility & footer refinements */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus,.skip-link:focus-visible{position:fixed;left:16px;top:16px;width:auto;height:auto;min-height:44px;padding:12px 16px;z-index:100;overflow:visible;display:inline-flex;align-items:center}
main:focus,[id]{scroll-margin-top:80px}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
a[href*="dirtroad.dev"],a[href*="dirtroad.dev"]:hover{text-decoration:none;color:#a5aed1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
