/* MGXcel, one stylesheet for the whole site.
   Lifted out of index.html on 2026-08-16 so the four service pages share it
   rather than carrying five copies that drift. Paths are relative to assets/. */

@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;
 src:url('font/Inter-Variable.ttf') format('truetype-variations')}
/* NOTHING ON THE SITE USES ITALIC as of 2026-08-21. Q30 added this face because the About
   quote was italic and the browser was slanting the upright into a synthetic oblique.
   Q32 then replaced that quote with a house-voice stance line, which is not italic, and
   the note here was never updated. Verified in the Phase E sweep: no font-style:italic,
   no <em>, nothing.
   The declaration STAYS. font-display:swap means an unused face is never fetched, so it
   costs a visitor nothing, and it means the day someone adds an <em> they get the drawn
   italic rather than a slanted upright. The 904KB file does ship in a folder copy though,
   so it is a candidate for the deploy exclusion list beside _alt/ and Website images/. */
@font-face{font-family:'Inter';font-weight:100 900;font-style:italic;font-display:swap;
 src:url('font/Inter-Italic-Variable.ttf') format('truetype-variations')}

:root{
  --deepteal:#004F4F; --midteal:#007A7A; --mint:#00C9A7; --charcoal:#1A2226; --cream:#FDFCF8;
  --ink:#1A2226; --ink-2:#4A5654; --ink-3:#6E7A78;
  --deep:#0E1F1E;
  --line:rgba(26,34,38,.13); --line-2:rgba(26,34,38,.06);
  --on-dark:#EDF3F1; --on-dark-2:rgba(237,243,241,.7); --on-dark-3:rgba(237,243,241,.44);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;
  --max:1240px; --nav:72px; --strip:62px;
  --e:cubic-bezier(.16,1,.3,1); --dur:220ms;
}
*{box-sizing:border-box}
/* scroll-padding-top, added 2026-08-21 in the Phase D pass. The header is sticky and 72px
   tall, and every in-page nav link lands its target at the very top of the viewport, which
   is underneath it. Services, How we work, About and Book a call all did this, at every
   width, and the heading was the thing being covered. One line fixes all four. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
 scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
 font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.033em;font-weight:800;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--s3);width:100%}

/* ---------- background field: a measured floor, one plane per section ----------
   A plane in perspective, anchored to the section's bottom edge and dissolving toward
   its horizon. The cell is 48px, off the 8px scale. Only background-position animates,
   so the whole thing stays on the compositor. No blur, no glow, no orbs. */
.field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
 perspective:1000px;perspective-origin:50% 100%}
.field .floor{position:absolute;left:-45%;right:-45%;bottom:-4%;height:112%;
 transform:rotateX(70deg);transform-origin:50% 100%;
 background-image:
  repeating-linear-gradient(to right,rgba(0,79,79,.34) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(to bottom,rgba(0,79,79,.34) 0 1px,transparent 1px 48px);
 -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 26%,transparent 62%);
         mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 26%,transparent 62%);
 animation:floor 26s linear infinite}
.field.dark .floor{background-image:
  repeating-linear-gradient(to right,rgba(0,201,167,.34) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(to bottom,rgba(0,201,167,.34) 0 1px,transparent 1px 48px)}
@keyframes floor{to{background-position:0 48px,0 48px}}

/* ==== CLASSES THAT EXIST SO THE CSP CAN STAY STRICT ====
   Added 2026-08-22 for the Hostinger deploy. These three rules replaced eleven inline style
   attributes across the five pages. Inline styles are not a security hole the way inline
   scripts are, but allowing them costs `style-src 'unsafe-inline'`, and once that is in the
   policy it is in it for everything. Three classes buy a genuinely strict style-src. */
.sec-tight{padding-bottom:var(--s6)}
/* the contact form's thank-you, set by script. A class so no inline style attribute is
   injected into the DOM, which is what lets style-src stay strict. */
.sent{color:var(--mint);font-size:19px;font-weight:700}
.lockup-ftr{--mk:44px}
.ftr-blurb{margin-top:var(--s2);max-width:34ch}

/* ==== BRAND LOCKUP COMPONENT ====
   Rendered in the header AND in the footer, so it sits at the top level behind this
   sentinel rather than inside either of them. That is the rule taken from losing .stages
   twice to section rewrites.

   Why this is a component and not an <img> of the approved lockup, recorded 2026-08-21.
   The approved lockup ties its own height to the MONOGRAM, then sets the descriptor at 7.5
   of 84 units. Measured, that is 8.93%, so at the 34px the header can afford, "Consultants"
   rendered 3.04px tall against a legibility floor of about 5.5px, and the 28 by 2 mint rule
   rendered 0.81px. Neither is fixable by scaling the file, and the approved library carries
   no wordmark-only or larger-descriptor variant.

   Guidelines section 2 is what makes the fix legitimate: "TYPOGRAPHY, Inter only.
   ExtraBold 800 = MGX wordmark, MG initials. Bold 700 = cel. Medium 500 = subline."
   The approved SVG is outlined Inter and this site already self-hosts Inter Variable, so
   this re-sets the approved lockup in its own specified typeface. It does not draw a new one.

   Every ratio below is solved from the approved artwork's own viewBox, measured in Chrome:
     monogram 84 units, gap to wordmark 22.6 (.269), wordmark ink 135, wordmark cap 26.9
     (font-size .427 of the mark), descriptor ink 91.5.
   Verified: at a 38px mark the rebuild is 109.3px wide against the artwork's 109.92px.
   Same footprint, 0.6px apart. Review file at _alt/lockup-rebuild.html.

   The ONE deliberate departure is descriptor tracking. The approved descriptor is small
   BECAUSE it is so widely tracked inside a narrow width: its advance-to-cap ratio is 1.109,
   and holding that ratio inside the wordmark width forces the cap back under 5px. So the
   tracking tightens to .1323em and the descriptor width stays locked to the wordmark width.
   Cap lands at 6.18px at a 38px mark.

   The descriptor also moves from the artwork's #005A5A to --midteal. #005A5A is a sixth
   teal that appears nowhere else in the identity and is not in the section 9 palette. */
/* inline-flex, not flex. As a grid item in the header it blockifies to flex and takes the
   auto column either way, but in the footer it sits in normal flow, where display:flex would
   make it block-level and stretch the box to the full column while the ink stayed left. */
.lockup{--mk:38px;display:inline-flex;align-items:center;gap:calc(var(--mk)*.269);line-height:1}
.lockup .mono{position:relative;flex:none;width:var(--mk);height:var(--mk)}
.lockup .mono img{position:absolute;inset:0;width:100%;height:100%;display:block;
 transition:opacity 340ms var(--e)}
.lockup .rev{opacity:0}
.lockup .wm{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 gap:calc(var(--mk)*.105)}
.lockup .nm{font-size:calc(var(--mk)*.427);font-weight:800;letter-spacing:-.018em;
 line-height:1;white-space:nowrap;color:var(--deepteal)}
.lockup .nm .x{color:var(--mint)}
.lockup .nm .cel{color:var(--midteal);font-weight:700}
.lockup .ds{font-size:calc(var(--mk)*.2237);font-weight:500;letter-spacing:.1323em;
 line-height:1;white-space:nowrap;color:var(--midteal)}
/* reverse state. Driven by the header's deep mode only; the footer is always on cream.
   The two pale values are the approved reverse artwork's own, not invented here. */
.hdr.deep .lockup .pri{opacity:0}
.hdr.deep .lockup .rev{opacity:1}
.hdr.deep .lockup .nm{color:#fff}
.hdr.deep .lockup .nm .cel{color:#BAE3DE}
.hdr.deep .lockup .ds{color:#8CBAB5}

/* ---------- nav ----------
   The interaction device is lifted off the logo: the approved lockup carries a 28 by 2
   mint rule under the MG monogram. That rule is the link underline, the top edge of the
   dropdown, and the row marker inside it.
   Radius follows v8 from-zero, which is the ratified visual configuration: a full pill
   for anything you press or read as a chip, a generous radius on media and panels, and a
   square edge only where a rule is doing structural work. */
.hdr{position:sticky;top:0;z-index:70;background:rgba(253,252,248,.93);
 backdrop-filter:saturate(1.7) blur(12px);border-bottom:1px solid var(--line-2);
 transition:background-color 340ms var(--e),border-color 340ms var(--e)}
.hdr.deep{background:rgba(14,31,30,.94);border-bottom-color:rgba(237,243,241,.13)}
/* three tracks, so the links sit centred in the bar rather than crowded against the CTA.
   The CTA is a sibling of the nav now, not a child of it. */
.hdr .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
 gap:var(--s3);height:var(--nav)}
.hdr .acts{display:flex;align-items:center;gap:var(--s2);justify-self:end}
/* the brand lockup is a component now, see the BRAND LOCKUP sentinel below. The header
   just sets its size and lets the component do the rest. */
.hdr .brand{--mk:38px}
.nav{display:none;align-items:center;justify-content:center;gap:10px}
/* the links are pills too, one weight below the CTA. Same family, three levels: a soft
   teal tint at rest, a firmer one on hover and while the dropdown is open, and the solid
   deep-teal fill reserved for the CTA. 38px tall inside a 72px bar. */
.nav > a,.nav .drop > button{font-family:inherit;font-size:14.5px;font-weight:600;
 color:var(--deepteal);background:rgba(0,122,122,.09);border:0;border-radius:999px;
 padding:9px 18px;min-height:38px;cursor:pointer;position:relative;
 display:inline-flex;align-items:center;gap:7px;
 transition:background-color var(--dur) var(--e),color var(--dur) var(--e)}
.nav > a:hover,.nav .drop > button:hover,.nav .drop.open > button{
 background:rgba(0,122,122,.18);color:var(--deepteal)}
.hdr.deep .nav > a,.hdr.deep .nav .drop > button{
 background:rgba(237,243,241,.09);color:var(--on-dark)}
.hdr.deep .nav > a:hover,.hdr.deep .nav .drop > button:hover,
.hdr.deep .nav .drop.open > button{background:rgba(0,201,167,.2);color:var(--mint)}
.nav .drop{position:relative}
.nav .drop .chev{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
 transform:rotate(45deg) translateY(-2px);transition:transform 260ms var(--e)}
.nav .drop.open .chev{transform:rotate(225deg) translateY(1px)}
.menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);padding-top:10px;
 opacity:0;visibility:hidden;
 transition:opacity var(--dur) var(--e),transform var(--dur) var(--e),visibility var(--dur)}
.nav .drop.open .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu .in{background:var(--cream);border:1px solid rgba(0,79,79,.16);border-top:2px solid var(--mint);
 min-width:326px;box-shadow:0 24px 54px rgba(14,31,30,.15);padding:0;
 border-radius:14px;overflow:hidden}
.menu a{display:block;position:relative;padding:13px 18px 13px 22px;font-size:15px;font-weight:600;
 color:var(--ink);border-top:1px solid var(--line-2);
 transition:background-color var(--dur) var(--e),color var(--dur) var(--e)}
.menu a:first-child{border-top:0}
.menu a::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--mint);
 transform:scaleY(0);transform-origin:top;transition:transform 260ms var(--e)}
.menu a:hover::before,.menu a:focus-visible::before,.menu a.here::before{transform:scaleY(1)}
.menu a span{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:3px}
.menu a:hover,.menu a.here{background:rgba(0,201,167,.06);color:var(--deepteal)}
/* a pill, at the v8 proportion: 12 by 24 padding on 14.5px, which lands at 44px tall.
   The hero chips are 14px in a 999px pill too, so the CTA has to read as the same family
   one weight up, not as a box borrowed from somewhere else. */
.navcta{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;font-size:14.5px;
 font-weight:700;border-radius:999px;background:var(--deepteal);color:var(--on-dark);
 transition:background-color var(--dur) var(--e),color var(--dur) var(--e),
            box-shadow .25s var(--e),transform 160ms var(--e)}
.navcta::after{display:none}
.navcta:hover{background:#00403F;color:var(--on-dark)}
.hdr.deep .navcta{background:var(--mint);color:#0A1614}
.hdr.deep .navcta:hover{background:#2FDCBB;color:#0A1614}
.navcta:active{transform:scale(.97)}
/* ==== LANGUAGE SWITCHER ====
   Built to the established guidance, checked 2026-08-22:
     - the language is named in ITS OWN language, English on the French page and Francais on
       the English one. Never a flag: a flag is a country, not a language, and there is no
       flag that means French-in-Quebec. A flag-only switcher also fails WCAG for want of a
       text alternative.
     - a real <a href>, so it works with JavaScript off and a crawler follows it.
     - it lands on the EQUIVALENT page, not the homepage. The pairing is static per page, so
       there is no map to fall out of step.
     - lang and hreflang sit on the link, and an aria-label states the destination in the
       destination's language.
   Single-link form showing the other language is the Canadian convention, which is what a
   Quebec reader already expects from federal and provincial sites.

   Third weight in the bar, deliberately. The CTA is a solid fill, the nav links are soft
   pills, and this is plain text with the 28-by-2 mint rule from the logo as its hover. It has
   to be findable without competing with Book a call.

   It does NOT hide below 1000px the way the CTA does. On a bilingual site in Quebec the
   language control is primary, and a phone is where most of this audience will meet it. */
.langsw{display:inline-flex;align-items:center;height:38px;padding:0 12px;position:relative;
 font-size:14.5px;font-weight:600;color:var(--midteal);white-space:nowrap;border-radius:999px;
 transition:color var(--dur) var(--e)}
.langsw::after{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;
 background:var(--mint);transform:scaleX(0);transform-origin:left;
 transition:transform var(--dur) var(--e)}
.langsw:hover{color:var(--deepteal)}
.langsw:hover::after{transform:scaleX(1)}
.hdr.deep .langsw{color:var(--on-dark-2)}
.hdr.deep .langsw:hover{color:var(--on-dark)}
@media(max-width:420px){.langsw{padding:0 8px;font-size:14px}}

.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;
 background:none;cursor:pointer;color:var(--ink);transition:color 340ms var(--e)}
.hdr.deep .burger{color:var(--on-dark)}
#drawer{display:none;background:var(--cream);border-bottom:1px solid var(--line)}
#drawer a{display:block;padding:14px 0;border-top:1px solid var(--line-2);font-size:16px}
#drawer .sub{padding-left:var(--s2);font-size:15px;color:var(--ink-2)}
@media(max-width:999px){.navcta{display:none}}
@media(min-width:1000px){.nav{display:flex}.burger{display:none}}

/* ---------- 1 HERO ----------
   The hero stops short of the fold by exactly the height of the keyword strip, so the
   strip is inside the first screen rather than one scroll below it. */
.hero{position:relative;min-height:calc(100svh - var(--nav) - var(--strip));display:flex;
 align-items:center;overflow:hidden;background:var(--deep)}
.hero .shot{position:absolute;inset:0;z-index:0}
/* Grade, settled 2026-08-21 by rendering a four-level ladder across all four frames.
   IMAGE_BRIEF documents the build as grayscale(.45 to .52) followed by a teal pass.
   The 08-19 change dropped desaturation to .08 and did NOT remove the teal pass, so
   the site shipped the worst of both: tinted and undesaturated. This restores the
   documented desaturation and leaves the teal pass genuinely gone.
   .52 is where four frames from four different shoots stop reading as a patchwork.
   Below it the cobalt of the automation frame dominates the set; above it the frames
   go flat and start reading as a treatment rather than as somebody's working day. */
.hero .shot img{width:100%;height:100%;object-fit:cover;object-position:40% center;
 filter:grayscale(.52) contrast(1.07) brightness(.84) saturate(.82)}
/* The teal mix-blend-mode pass that used to sit here is GONE, 2026-08-21.
   It was recorded as removed on 08-19 and it was not: only the grayscale values
   changed, and the blend layer stayed, which is why the photography still read
   green. Moe's instruction stands: these are engineers, and the photographs must
   look like their own working day. Do not re-tint. Grade is desaturation and
   exposure only. */
.hero .veil{position:absolute;inset:0;z-index:1;
 background:linear-gradient(96deg,rgba(10,20,19,.95) 0%,rgba(10,20,19,.76) 48%,rgba(10,20,19,.36) 100%)}
.hero .inner{position:relative;z-index:3;width:100%;padding-block:var(--s8)}
/* the logo carries a 28 by 2 mint rule under the monogram. Both section markers hold
   that 14:1 proportion so the device on the page is the device in the identity. */
.rule{display:block;width:42px;height:3px;background:var(--mint);margin-bottom:var(--s3);
 transform:scaleX(0);transform-origin:left;animation:grow .8s var(--e) .15s forwards}
@keyframes grow{to{transform:scaleX(1)}}
.hero h1{font-size:clamp(33px,4.3vw,55px);color:var(--on-dark);max-width:20ch;margin-bottom:var(--s3)}
.hero .sub{color:var(--on-dark-2);font-size:clamp(17px,1.6vw,20px);max-width:52ch}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.pills span{font-size:14px;font-weight:600;color:var(--on-dark);border:1px solid rgba(237,243,241,.3);
 padding:9px 16px;border-radius:999px;
 transition:border-color var(--dur) var(--e),color var(--dur) var(--e)}
.pills span:hover{border-color:var(--mint);color:var(--mint)}

/* ---------- keyword strip ----------
   Restored from v8 from-zero. It is a design element and the discipline-keyword index at
   the same time: Law 6 wants the recognized term, Law 7 wants French inside the English,
   and this carries both where a search engine and a reader both meet them. */
.marq{background:var(--deepteal);color:var(--on-dark);height:var(--strip);display:flex;
 align-items:center;overflow:hidden;white-space:nowrap;
 border-block:1px solid rgba(0,201,167,.25)}
.marq .strip{display:inline-flex;animation:slide 52s linear infinite;will-change:transform}
.marq:hover .strip,.marq:focus-within .strip{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-size:14.5px;
 font-weight:600;color:rgba(237,243,241,.82)}
.marq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq .strip{animation:none}}

/* ---------- section shell ----------
   64px ends, not 96. A section has to be readable in one screen, and on a 1440x800 the
   budget is 727px once the sticky bar is taken off. Padding was the cheapest 64 of it. */
.sec{position:relative;padding-block:var(--s8);overflow:hidden}
.sec .wrap{position:relative;z-index:1}
.sec h2{font-size:clamp(28px,3.5vw,42px);max-width:20ch;margin-bottom:10px}
.sec .lede{color:var(--ink-2);font-size:18px;max-width:56ch}
/* French sits under the heading, never above it: above would make it an eyebrow.
   It carries the section's own name and one line of its substance in the searched French
   form, which is Law 7 done at focal points rather than only inside body text.
   This is a bilingual page, NOT a French edition. See the Bill 96 note in WORKBENCH. */
.fr{display:block;font-size:15.5px;font-weight:500;line-height:1.45;color:var(--midteal);
 max-width:52ch;margin-bottom:var(--s2)}
.dark .fr{color:var(--mint);opacity:.82}
.hero .fr{color:rgba(0,201,167,.9);font-size:clamp(15px,1.4vw,17px);max-width:46ch;
 margin-top:var(--s2);margin-bottom:0}
.dark{background:var(--deep);color:var(--on-dark)}
.dark .lede{color:var(--on-dark-2)}

/* ---------- 2 SERVICES: pinned lateral track ---------- */
.track{position:relative}
.pin{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));overflow:hidden;
 display:flex;flex-direction:column;justify-content:center}
.rail{display:flex;will-change:transform}
.pan{flex:0 0 100vw;padding-inline:var(--s3)}
.pan .in{max-width:var(--max);margin-inline:auto;display:grid;gap:var(--s6);align-items:center}
@media(min-width:980px){.pan .in{grid-template-columns:1.02fr .98fr;gap:var(--s10)}}
/* the outlined numeral from v8 from-zero, which Phase 3A ratified as the approved visual
   configuration for this section. It is the one place on the page carrying scale. */
.pan .num{font-size:clamp(56px,10vw,140px);font-weight:900;line-height:.82;letter-spacing:-.06em;
 color:transparent;-webkit-text-stroke:1.5px rgba(0,79,79,.3);
 font-variant-numeric:tabular-nums;margin-bottom:6px}
.pan h3{font-size:clamp(27px,3.4vw,44px);margin:0 0 var(--s2);max-width:14ch}
.pan .dur{display:inline-block;font-size:14px;font-weight:700;color:var(--deepteal);
 background:rgba(0,201,167,.18);border-radius:999px;padding:7px 16px;margin-bottom:var(--s2)}
.pan .kick{font-size:16px;color:var(--midteal);font-weight:600;max-width:44ch;margin-bottom:var(--s3)}
.pan p{font-size:16px;color:var(--ink-2);max-width:50ch;margin-bottom:var(--s3)}
.pan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pan li{font-size:15px;padding-left:20px;position:relative;opacity:0;transform:translateX(-12px);
 transition:opacity .6s var(--e),transform .6s var(--e)}
.pan.on li{opacity:1;transform:none}
.pan.on li:nth-child(2){transition-delay:70ms}.pan.on li:nth-child(3){transition-delay:140ms}
.pan.on li:nth-child(4){transition-delay:210ms}.pan.on li:nth-child(5){transition-delay:280ms}
/* a round bullet at the v8 size. The standing rule is bullets and pills, never dashes. */
.pan li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
 border-radius:50%;background:var(--mint)}
.pan .more{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s3);font-size:15px;font-weight:700;
 color:var(--deepteal);min-height:44px}
/* a chevron, because a rule sitting after a word reads as an em dash */
.pan .more i{width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;
 transform:rotate(45deg);transition:transform var(--dur) var(--e)}
.pan .more:hover i{transform:rotate(45deg) translate(3px,-3px)}
.pan .fig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--deep);border-radius:18px;
 transform:scale(.95);opacity:.5;transition:transform 1s var(--e),opacity 1s var(--e)}
.pan.on .fig{transform:none;opacity:1}
.pan .fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(.52) contrast(1.07) saturate(.82)}
/* narrow and centred. Full width, it ran straight through the "Full service" link at the
   bottom of the panel. */
.bars{position:absolute;inset-inline:0;bottom:0;display:flex;gap:6px;max-width:360px;
 margin-inline:auto;padding:0 var(--s3) var(--s6)}
.bars i{flex:1;height:3px;border-radius:2px;background:rgba(26,34,38,.14);position:relative;overflow:hidden}
.bars i b{position:absolute;inset:0;background:var(--midteal);transform-origin:left;transform:scaleX(0);
 transition:transform .3s linear}
@media(max-width:979px){
 .pin{position:static;height:auto;display:block}.rail{display:block}
 .pan{flex:none;padding-block:var(--s8);border-top:1px solid var(--line)}
 .pan li{opacity:1;transform:none}.pan .fig{transform:none;opacity:1}.bars{display:none}
}
/* THE SAME FALLBACK, UNDER REDUCED MOTION AT ANY WIDTH. Added 2026-08-21.
   pinned() in site.js returns false when the reader prefers reduced motion, so the rail keeps
   transform:none and never scrubs. Below 980 the rule above already stacked the panels, so
   that was fine. At 980 and above it was not: .rail stayed display:flex with .pan at
   flex:0 0 100vw inside .pin{overflow:hidden}, so panel 01 filled the screen and panels 02,
   03 and 04 sat off to the right, clipped, with no way to reach them.
   A desktop reader with reduced motion enabled saw ONE of the four services. The progress
   bars made it worse: pinned() false sets every bar to scaleX(1), so the page said all four
   had been seen while showing one. Verified by rendering, not inferred. */
@media(prefers-reduced-motion:reduce){
 .pin{position:static;height:auto;display:block;overflow:visible}
 .rail{display:block}
 .pan{flex:none;padding-block:var(--s8);border-top:1px solid var(--line)}
 .bars{display:none}
}

/* ==== STAGE SEQUENCE COMPONENT ==== */
/* It renders in the homepage situation reveal AND inside a service page block. It has now
   been lost twice to rewrites of the section it used to live in, so it lives at the top
   level, on its own, behind a sentinel. Do not move it into a section block. */
.stages{list-style:none;margin:0;padding:0 0 0 28px;display:grid;gap:0;position:relative}
.stages::before{content:"";position:absolute;left:5px;top:18px;bottom:18px;width:1px;
 background:rgba(0,122,122,.4)}
.stages li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--s2);
 padding:10px 0;font-size:15px;color:var(--ink-2)}
.stages li::before{content:"";position:absolute;left:-28px;top:14px;width:11px;height:11px;
 border-radius:50%;background:var(--cream);border:2px solid var(--midteal);box-sizing:border-box}
.stages li b{color:var(--deepteal);font-weight:700;font-variant-numeric:tabular-nums;min-width:26px}
.blk .stages,.rvg .stages{margin-top:var(--s2)}

/* ---------- 3 HOW WE WORK: the situation grid ----------
   Approved 08-19, ported from _alt\how-we-work-grid.html onto the light ground.
   Six cards you pick from, one reveal underneath. The mint rule marks the selection,
   which is the same device as the nav and the dropdown. */
.sits{display:grid;grid-template-columns:1fr;gap:12px;margin-top:var(--s5)}
@media(min-width:700px){.sits{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.sits{grid-template-columns:repeat(3,1fr)}}
.sit{position:relative;overflow:hidden;text-align:left;font-family:inherit;font-size:15.5px;
 line-height:1.36;font-weight:600;color:var(--midteal);cursor:pointer;
 background:rgba(0,122,122,.05);border:1px solid rgba(0,122,122,.22);border-radius:14px;
 padding:18px 20px 18px 24px;min-height:96px;
 transition:border-color var(--dur) var(--e),background-color var(--dur) var(--e),
            color var(--dur) var(--e),transform var(--dur) var(--e)}
.sit::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--mint);
 transform:scaleY(0);transform-origin:top;transition:transform .35s var(--e)}
.sit:hover{transform:translateY(-3px);background:rgba(0,122,122,.1);
 border-color:rgba(0,201,167,.6);color:var(--deepteal)}
.sit[aria-selected="true"]{border-color:var(--mint);background:rgba(0,201,167,.12);color:var(--deepteal)}
.sit[aria-selected="true"]::before,.sit:hover::before{transform:scaleY(1)}
.rev{overflow:hidden;height:0;transition:height .5s var(--e)}
.rev .in{padding-top:var(--s6)}
.rvg{display:grid;gap:var(--s5);border-top:1px solid rgba(0,122,122,.35);padding-top:var(--s5)}
@media(min-width:960px){.rvg{grid-template-columns:1.15fr .85fr;gap:var(--s8)}}
.rvg .read{font-size:16px;color:var(--ink-2);max-width:58ch;margin-bottom:var(--s3)}
/* the stage sequence is a component, see the note on .stages */
.rvg aside{border:1px solid rgba(0,122,122,.28);background:rgba(0,122,122,.045);
 border-radius:16px;padding:var(--s3);align-self:start}
.rvg aside .row{display:flex;justify-content:space-between;gap:var(--s2);padding:10px 0;
 border-top:1px solid rgba(0,122,122,.18);font-size:14.5px;color:var(--ink-2)}
.rvg aside .row:first-child{border-top:0;padding-top:0}
.rvg aside .row span:last-child{color:var(--deepteal);font-weight:600;text-align:right}
.rvg aside .more{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s3);
 font-size:15px;font-weight:700;color:var(--deepteal);min-height:44px}
.rvg aside .more i{width:7px;height:7px;border-right:2px solid currentColor;
 border-top:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur) var(--e)}
.rvg aside .more:hover i{transform:rotate(45deg) translate(3px,-3px)}

/* ---------- 4 ABOUT ----------
   Dark ground. About, breather and contact share one fill so the close of the page reads
   as a single block with three parts rather than three separate bands.
   The lead paragraph is gone. The column now opens on the credentials, which are the
   §7 proof and are stated as a spec table, and the founder's line closes it. */
.about{display:grid;gap:var(--s6);align-items:start;margin-top:var(--s3)}
/* the square image sets this section's height, not the copy, so it takes the narrow column */
@media(min-width:980px){.about{grid-template-columns:1.2fr .8fr;gap:var(--s8)}}
/* label left, value right. Not a label above a value, which would be an eyebrow. */
.cred{display:grid;margin-bottom:var(--s4)}
.cred .row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
 padding:11px 0;border-top:1px solid rgba(237,243,241,.16);font-size:14.5px;color:var(--on-dark-3)}
.cred .row:first-child{border-top:0;padding-top:0}
.cred .row b{color:var(--on-dark);font-weight:600;text-align:right;font-size:15px}
/* house voice, so it is not set as a quotation and carries no byline. The founder is a
   credential in the table above, never a narrator. Master §4 and decision 18. */
.stance{font-size:clamp(18px,1.9vw,22px);font-weight:600;line-height:1.4;letter-spacing:-.015em;
 color:var(--on-dark);max-width:38ch;padding-left:var(--s2);
 border-left:2px solid var(--mint);margin-bottom:var(--s3)}
/* FIVE marks now: the McGill lockup plus four dashed slots waiting on licensed artwork for
   ISO 9001 and three Lean Six Sigma belt levels. Reinstated 2026-08-21.
   It wraps, because five items do not fit one line below about 1200px and a row that
   overflows is worse than a row that wraps. Row gap is tighter than column gap so a wrapped
   second line reads as the same object rather than as a new block. Slots are sized off the
   chip so the two kinds of item sit on one baseline grid. */
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
 padding-top:var(--s3);border-top:1px solid rgba(237,243,241,.16)}
/* the McGill mark is dark artwork, so on this ground it sits on its own light chip */
.marks img{height:26px;width:auto;display:block}
.marks .chip{display:inline-flex;align-items:center;background:var(--cream);
 border-radius:10px;padding:7px 12px;height:40px}
/* dashed, because empty. Nothing is drawn to fill them and nothing is claimed by them. */
.marks .slot{display:inline-flex;align-items:center;justify-content:center;height:40px;
 min-width:96px;border:1px dashed rgba(237,243,241,.28);border-radius:10px;
 color:var(--on-dark-3);font-size:10.5px;line-height:1.25;padding:0 10px;text-align:center}
.slider{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--deep);border-radius:18px}
.slider .s{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--e)}
.slider .s.on{opacity:1}
.slider img{width:100%;height:100%;object-fit:cover}
/* the dot stays 9px because it is a position indicator, but a 9px tap target is not usable
   on a phone. The ::after expands the hit area to about 29px without changing anything you
   can see, and the gap widens so two neighbouring targets do not fight. Found in the Phase D
   pass, 2026-08-21. */
.slider .dots{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:14px}
.slider .dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
 position:relative;
 background:rgba(253,252,248,.45);transition:background-color var(--dur),transform var(--dur)}
.slider .dots button::after{content:"";position:absolute;inset:-10px}
.slider .dots button[aria-current="true"]{background:var(--mint);transform:scale(1.35)}

/* ---------- 5 BREATHER: the loss cascade ----------
   The OEE loss tree the founder teaches, at the section size it already occupied.
   Planned time comes off the top, then availability, then speed, then quality, and what
   survives is what ships. Copy sits on the field to the left rather than stacked above it.
   There is not one figure anywhere in it and there cannot be: master §7 permits
   credentials, method and artefact as proof, and no client outcome data exists. The bar
   proportions are illustrative geometry, which is why nothing is labelled with a value. */
.breath{position:relative;overflow:hidden;background:var(--deep);color:var(--on-dark);
 padding-block:var(--s10) var(--s8)}
.bgrid{display:grid;gap:var(--s6);align-items:center}
@media(min-width:980px){.bgrid{grid-template-columns:.82fr 1.18fr;gap:var(--s8)}}
.breath h2{font-size:clamp(24px,2.9vw,36px);line-height:1.14;max-width:18ch;margin-bottom:10px}
.breath .fr{color:var(--mint);opacity:.85;max-width:40ch}
.breath .close{color:var(--on-dark-2);font-size:16.5px;max-width:38ch;margin-top:var(--s3)}

.casc{display:grid;gap:12px}
.crow .clab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
 font-size:12.5px;color:var(--on-dark-3);margin-bottom:5px}
.crow .clab b{color:var(--on-dark);font-weight:600;font-size:13.5px}
.cbar{display:flex;height:38px;border-radius:8px;overflow:hidden;
 background:rgba(237,243,241,.07);border:1px solid rgba(237,243,241,.12)}
/* sharper than the trace it replaces: a solid mint block, not a hairline */
.keep{background:linear-gradient(90deg,var(--mint),rgba(0,201,167,.72));
 transform-origin:left;transform:scaleX(0);transition:transform 1s var(--e)}
.breath.on .keep{transform:scaleX(1)}
.loss{flex:1;position:relative;opacity:0;transition:opacity .55s var(--e);
 background-image:repeating-linear-gradient(135deg,
   rgba(237,243,241,.16) 0 5px,rgba(237,243,241,0) 5px 10px)}
.breath.on .loss{opacity:1}
.loss::after{content:attr(data-l);position:absolute;inset:0;display:flex;align-items:center;
 padding-left:11px;font-size:12px;font-weight:700;color:var(--on-dark-2);white-space:nowrap}
.crow:nth-child(1) .keep{width:100%}
.crow:nth-child(2) .keep{width:76%}
.crow:nth-child(3) .keep{width:58%}
.crow:nth-child(4) .keep{width:47%}
.breath.on .crow:nth-child(2) .keep{transition-delay:.14s}
.breath.on .crow:nth-child(3) .keep{transition-delay:.28s}
.breath.on .crow:nth-child(4) .keep{transition-delay:.42s}
.breath.on .crow:nth-child(2) .loss{transition-delay:.85s}
.breath.on .crow:nth-child(3) .loss{transition-delay:.99s}
.breath.on .crow:nth-child(4) .loss{transition-delay:1.13s}
/* the ships marker, the one thing the whole cascade is pointing at */
.ships{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:12.5px;
 color:var(--mint);font-weight:700;opacity:0;transition:opacity .6s var(--e) 1.35s}
.breath.on .ships{opacity:1}
.ships i{display:block;width:28px;height:2px;background:var(--mint)}
@media(max-width:560px){.crow .clab span{display:none}}
@media(prefers-reduced-motion:reduce){
 .keep{transform:scaleX(1)!important;transition:none!important}
 .loss,.ships{opacity:1!important;transition:none!important}
}

/* ---------- 6 CONTACT ---------- */
/* two blocks against each other, tops aligned. The heading and lede used to sit outside
   this grid and span the full width, so the form could never line up with them: it
   started below the lede and read as pushed down. They are inside the left block now. */
.ct{display:grid;gap:var(--s6);align-items:start}
@media(min-width:980px){.ct{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.ct h2{margin-bottom:var(--s2)}
.ct .lede{margin-bottom:var(--s4)}
.ct-mail{margin-top:var(--s2)}
.ct-mail a{color:var(--mint)}
.ct-geo{margin-top:var(--s1);color:var(--on-dark-3);font-size:15px}
/* the form is the block, so it is drawn as one */
#form{background:rgba(237,243,241,.04);border:1px solid rgba(237,243,241,.14);
 border-radius:16px;padding:var(--s4)}
.f{display:grid;gap:var(--s2)}
.pair{display:grid;gap:var(--s2)}@media(min-width:560px){.pair{grid-template-columns:1fr 1fr}}
.fl{display:grid;gap:6px}
.fl label{font-size:13.5px;font-weight:600;color:var(--on-dark-2)}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;padding:14px 16px;min-height:48px;
 border-radius:11px;
 background:rgba(237,243,241,.07);border:1px solid rgba(237,243,241,.26);color:var(--on-dark);
 transition:border-color var(--dur) var(--e)}
input::placeholder,textarea::placeholder{color:var(--on-dark-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint)}
select option{color:var(--ink)}
/* the service picker. A native select renders as an operating-system control, which is
   the one element on the page that belongs to nobody's brand. This is the nav dropdown's
   behaviour and geometry, inverted for the dark ground. The real select stays in the DOM
   and carries the value, so the form still works with no JS. */
.sel{position:relative}
.sel.open{z-index:5}
.sel select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:-1px}
.sel .btn{width:100%;font-family:inherit;font-size:16px;padding:14px 16px;min-height:48px;
 border-radius:11px;
 background:rgba(237,243,241,.07);border:1px solid rgba(237,243,241,.26);color:var(--on-dark);
 cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
 transition:border-color var(--dur) var(--e)}
.sel .btn.ph{color:var(--on-dark-3)}
.sel.open .btn,.sel .btn:focus-visible{border-color:var(--mint)}
.sel .cv{flex:0 0 auto;width:8px;height:8px;border-right:1.6px solid currentColor;
 border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
 transition:transform 260ms var(--e)}
.sel.open .cv{transform:rotate(225deg) translateY(1px)}
.sel .list{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:0;list-style:none;
 background:var(--charcoal);border:1px solid rgba(237,243,241,.2);border-top:2px solid var(--mint);
 box-shadow:0 24px 54px rgba(6,14,13,.5);max-height:min(60svh,320px);overflow:auto;
 border-radius:14px;
 opacity:0;visibility:hidden;transform:translateY(-4px);
 transition:opacity var(--dur) var(--e),transform var(--dur) var(--e),visibility var(--dur)}
.sel.open .list{opacity:1;visibility:visible;transform:none}
.sel .list li{position:relative;padding:12px 16px 12px 22px;font-size:15px;color:var(--on-dark);
 cursor:pointer;border-top:1px solid rgba(237,243,241,.1);
 transition:background-color var(--dur) var(--e)}
.sel .list li:first-child{border-top:0}
.sel .list li::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
 background:var(--mint);transform:scaleY(0);transform-origin:top;transition:transform 240ms var(--e)}
.sel .list li:hover::before,.sel .list li:focus::before,.sel .list li[aria-selected="true"]::before{transform:scaleY(1)}
.sel .list li:hover,.sel .list li:focus{background:rgba(0,201,167,.08);outline:none}
.send{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s5);
 border-radius:999px;justify-self:start;
 background:var(--mint);color:#0A1614;font-weight:700;font-size:15px;border:0;cursor:pointer;font-family:inherit;
 transition:background-color var(--dur) var(--e),box-shadow .25s var(--e),transform 160ms var(--e)}
.send:hover{background:#2FDCBB;box-shadow:0 10px 26px rgba(0,201,167,.3)}
.send:active{transform:scale(.97)}
.note{font-size:13.5px;color:var(--on-dark-3)}

/* ---------- footer ----------
   Cream, not charcoal. Charcoal was a fourth ground doing no work, and the palette is
   stronger reading as cream, deep and teal only. */
.ftr{background:var(--cream);color:var(--ink-2);padding-block:var(--s10) var(--s4);font-size:15px;
 border-top:1px solid var(--line)}
.fg{display:grid;gap:var(--s5)}
@media(min-width:860px){.fg{grid-template-columns:1.7fr 1fr 1fr}}
.ftr h3{color:var(--deepteal);font-size:14px;margin:0 0 var(--s2);font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a:hover{color:var(--midteal)}
.ftr .base{margin-top:var(--s8);padding-top:var(--s3);border-top:1px solid var(--line);
 display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:13px;color:var(--ink-3)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .rv{opacity:1;transform:none}.rule{transform:none}
 .pan li,.pan .fig{opacity:1!important;transform:none!important}
}


/* ==== SERVICE PAGE RULES ==== */
.svctop{padding-block:var(--s10) var(--s8)}
.svcgrid{display:grid;gap:var(--s6);align-items:center;position:relative;z-index:1}
@media(min-width:980px){.svcgrid{grid-template-columns:1.1fr .9fr;gap:var(--s8)}}
.svctop .num{font-size:clamp(48px,7vw,104px);font-weight:900;line-height:.82;letter-spacing:-.06em;
 color:transparent;-webkit-text-stroke:1.5px rgba(0,79,79,.3);
 font-variant-numeric:tabular-nums;margin-bottom:6px}
.svctop h1{font-size:clamp(30px,4vw,50px);max-width:16ch;margin-bottom:10px;
 line-height:1.1;letter-spacing:-.033em;font-weight:800}
.svctop .dur{display:inline-block;font-size:14px;font-weight:700;color:var(--deepteal);
 background:rgba(0,201,167,.18);border-radius:999px;padding:7px 16px;margin-bottom:var(--s3)}
.svctop .lede{color:var(--ink-2);font-size:18px;max-width:52ch}
.svctop .shot{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:18px;background:var(--deep)}
.svctop .shot img{width:100%;height:100%;object-fit:cover;
 filter:grayscale(.52) contrast(1.07) saturate(.82)}

.svcmain{padding-block:var(--s8)}
.blk{padding-block:var(--s6);border-top:1px solid var(--line);position:relative;z-index:1}
.blk:first-child{border-top:0;padding-top:0}
.blk h2{font-size:clamp(22px,2.6vw,32px);max-width:24ch;margin-bottom:10px}
.blk .read{color:var(--ink-2);font-size:16.5px;max-width:62ch;margin-bottom:var(--s4)}
.blk .arte{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:62ch}
.blk .arte li{position:relative;padding-left:20px;font-size:15.5px;color:var(--ink-2)}
.blk .arte li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
 border-radius:50%;background:var(--mint)}
.blk /* the leadership modules, a two-column table rather than another bullet list */
.mods{display:grid;gap:0;max-width:74ch}
.mods .mod{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line-2)}
@media(min-width:720px){.mods .mod{grid-template-columns:220px 1fr;gap:var(--s3);align-items:baseline}}
.mods .mod:first-child{border-top:0;padding-top:0}
.mods .mod b{color:var(--deepteal);font-size:15.5px;font-weight:700}
.mods .mod span{color:var(--ink-2);font-size:15.5px}
.svccta h2{margin-bottom:10px}
.svccta .lede{color:var(--on-dark-2);margin-bottom:var(--s4)}
.svccta .fr{color:var(--mint);opacity:.85}
.ctabig{min-height:48px;padding:0 28px;font-size:15px;background:var(--mint);color:#0A1614}
.ctabig:hover{background:#2FDCBB;color:#0A1614}


/* ==== drawn workflow, Digital Automation. Replaces a photograph, because the only way to
   photograph a workflow is a screen and a screen in a frame reads as stock. No invented
   interface, no figures, brand palette, GPU-only, stops under reduced motion. ==== */
.flow{position:relative;aspect-ratio:4/3;border-radius:18px;background:var(--deep);
 border:1px solid rgba(0,201,167,.22);overflow:hidden;display:flex;align-items:center;padding:var(--s4)}
.flow ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;width:100%}
.flow li{position:relative;display:flex;align-items:center;gap:14px;
 opacity:0;transform:translateX(-10px);transition:opacity .5s var(--e),transform .5s var(--e)}
.flow.on li{opacity:1;transform:none}
.flow.on li:nth-child(2){transition-delay:.18s}
.flow.on li:nth-child(3){transition-delay:.36s}
.flow.on li:nth-child(4){transition-delay:.54s}
.flow.on li:nth-child(5){transition-delay:.72s}
.flow li i{flex:0 0 auto;width:10px;height:10px;border-radius:50%;
 background:var(--deep);border:2px solid var(--mint);box-sizing:border-box}
.flow li span{font-size:14.5px;color:var(--on-dark-2);line-height:1.35}
.flow li b{display:block;color:var(--on-dark);font-weight:700;font-size:15px}
/* the connector the nodes sit on */
.flow ol::before{content:"";position:absolute;left:4px;top:12px;bottom:12px;width:1px;
 background:rgba(0,201,167,.3)}
.flow ol{position:relative;padding-left:0}
@media(prefers-reduced-motion:reduce){.flow li{opacity:1!important;transform:none!important}}