/* ============================================================
   Don Designs - template showcase styles
   Loaded only on templates.html and template.html.
   The 12 mk-* skins are intentionally distinct per trade.
   Gallery and preview chrome stay in the main Don Designs brand.
   ============================================================ */

.tpl{width:100%;overflow:hidden}
.tpl *{box-sizing:border-box}
.tpl h1,.tpl h2,.tpl h3,.tpl h4,.tpl p,.tpl a,.tpl span{overflow-wrap:break-word}

/* ---- shared full-page sections ---- */
.tgal{display:grid;grid-template-columns:repeat(3,1fr)}
.tgal .tg-i{aspect-ratio:4/3;background-size:cover;background-position:center}
.tgal .tg-i:only-child,.tgal .tg-i:first-child:nth-last-child(2),.tgal .tg-i:first-child:nth-last-child(2)~.tg-i{aspect-ratio:16/9}
.tgal:has(.tg-i:first-child:nth-last-child(2)){grid-template-columns:repeat(2,1fr)}
.tproof,.tsteps{padding:56px 44px}
.tproof h3,.tsteps h3{font-size:28px;line-height:1.15;margin-bottom:24px}
.tproof-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tp{border-radius:12px;padding:24px;background:var(--tsurf,rgba(0,0,0,.05));border:1px solid var(--tline,transparent)}
.tp span{display:block;color:var(--tacc,#222);font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px}
.tp p{font-size:14px;line-height:1.65;color:var(--tmut,inherit)}
.tsteps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0;counter-reset:step}
.tsteps li{position:relative;padding:24px;background:var(--tsurf,rgba(0,0,0,.05));border:1px solid var(--tline,transparent);border-radius:12px;counter-increment:step}
.tsteps li::before{content:counter(step,decimal-leading-zero);display:block;color:var(--tacc,#222);font-weight:900;font-size:12px;letter-spacing:1.5px;margin-bottom:14px}
.tsteps li span{display:block;font-size:17px;font-weight:800;margin-bottom:8px}
.tsteps li p{font-size:14px;line-height:1.62;color:var(--tmut,inherit)}
.tband{padding:64px 44px;text-align:center}
.tband h3{font-size:32px;line-height:1.15;margin-bottom:22px}
.tband .tcta{display:inline-block;padding:15px 32px;text-decoration:none;font-weight:700;font-size:14px;background:var(--tbtn-bg,var(--tacc,#222));color:var(--tbtn-ink,#fff);border-radius:var(--tbtn-r,8px)}
.tft{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:24px 44px;font-size:12px;opacity:.75;border-top:1px solid var(--tline,rgba(128,128,128,.25))}

@media(max-width:760px){
  .tgal,.tgal:has(.tg-i:first-child:nth-last-child(2)){grid-template-columns:1fr}
  .tproof,.tsteps{padding:36px 24px}
  .tproof-g,.tsteps ol{grid-template-columns:1fr}
  .tband{padding:44px 24px}
  .tband h3{font-size:26px}
  .tft{padding:20px 24px}
}

/* 1 JOINERY - editorial nav + frame hero (Ink and Paper. Ports the engine's
   real editorial nav (centred wordmark, hairline rule) and frame hero (big
   left serif headline, photo in a plain thin-border matte frame offset down
   to overlap the services section, the one broken-grid move this direction
   allows itself) from generate_site.py:849-941. This and mk-land are the
   Track B flagship structural shapes, distinct from every split/photo-bg
   hero elsewhere in the showcase. */
.mk-join{--tacc:#8a6a3a;--tsurf:#ece4d4;--tline:#ddd2c2;--tmut:#6a5d4b;--tbtn-bg:#2c241b;--tbtn-ink:#f4efe6;--tbtn-r:0;font-family:'Fraunces',serif;background:#f4efe6;color:#2c241b}
.mk-join .jnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 40px;border-bottom:1px solid #ddd2c2}
.mk-join .jnav .jnl{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#6a5d4b;white-space:nowrap}
.mk-join .jnav .jnl-l{justify-self:start}
.mk-join .jnav .jnl-r{justify-self:end}
.mk-join .jnav .jbrand{grid-column:2;text-align:center;display:flex;flex-direction:column;gap:2px}
.mk-join .jnav .jbrand b{font-size:23px;font-weight:400;letter-spacing:.2px}
.mk-join .jnav .jbrand small{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#a07d4b}
.mk-join .jframe{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start;padding:52px 50px 0}
.mk-join .jfcopy{padding-top:18px}
.mk-join .jfcopy .ey{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#a07d4b;margin-bottom:18px}
.mk-join .jfcopy h1,.mk-join .jfcopy .preview-h1{font-size:60px;line-height:1.04;font-weight:400;letter-spacing:-1px;max-width:12ch}
.mk-join .jfcopy p{font-family:'Inter',sans-serif;font-size:15px;line-height:1.7;color:#6a5d4b;max-width:42ch;margin-top:20px}
.mk-join .jfcta{display:flex;gap:24px;align-items:center;margin-top:28px;font-family:'Inter',sans-serif}
.mk-join .jfcta .jflink{font-weight:700;font-size:15px;color:#2c241b;border-bottom:2px solid #8a6a3a;padding-bottom:2px}
.mk-join .jfcta .jfghost{font-weight:600;font-size:14px;color:#6a5d4b;border:1px solid #cbbfae;padding:12px 22px}
.mk-join .jfmedia{margin-bottom:-40px}
.mk-join .jfframe{border:1px solid #ddd2c2;padding:10px;background:#fff}
.mk-join .jfimg{aspect-ratio:4/5;background-size:cover;background-position:center;filter:sepia(.12)}
.mk-join .jserv{padding:64px 50px 58px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ddd2c2}
.mk-join .jserv>div{padding:34px 30px 0;border-right:1px solid #ddd2c2}
.mk-join .jserv>div:last-child{border:none}
.mk-join .jserv .ix{font-family:'Inter',sans-serif;font-size:12px;color:#a07d4b;margin-bottom:14px;text-transform:uppercase;letter-spacing:1.5px}
.mk-join .jserv h4{font-size:25px;font-weight:400;margin-bottom:10px}
.mk-join .jserv p{font-family:'Inter',sans-serif;font-size:13px;color:#6a5d4b;line-height:1.6}

/* 2 ELECTRICAL - command board */
.mk-elec{--tacc:#d6ff2e;--tsurf:#16181f;--tline:#20222a;--tmut:#b9bcc6;--tbtn-bg:#d6ff2e;--tbtn-ink:#0e0f13;--tbtn-r:4px;font-family:'Inter',sans-serif;background:#0e0f13;color:#f1f1f3}
.mk-elec .eh{display:flex;justify-content:space-between;align-items:center;padding:22px 40px;border-bottom:1px solid #20222a}
.mk-elec .eh .lg{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:1px;text-transform:uppercase}
.mk-elec .eh .lg b{color:#d6ff2e}
.mk-elec .eh nav{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#8b8e98;align-items:center}
.mk-elec .eh .call{background:#d6ff2e;color:#0e0f13;padding:12px 20px;font-weight:800;border-radius:4px}
.mk-elec .ehero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:end;padding:84px 40px;background-size:cover;background-position:center;isolation:isolate}
.mk-elec .ehero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0e0f13 25%,rgba(14,15,19,.6));z-index:-1}
.mk-elec .ecopy{max-width:620px}
.mk-elec .ehero .eb{display:inline-block;background:#d6ff2e;color:#0e0f13;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:7px 13px;margin-bottom:22px}
.mk-elec .ehero h1,.mk-elec .ehero .preview-h1{font-family:'Anton',sans-serif;font-size:72px;line-height:.93;text-transform:uppercase;letter-spacing:-1px;max-width:14ch}
.mk-elec .ehero h1 span,.mk-elec .ehero .preview-h1 span{color:#d6ff2e}
.mk-elec .ehero p{margin-top:20px;color:#b9bcc6;font-size:15px;max-width:40ch;line-height:1.6}
.mk-elec .ehero .tcta{display:inline-block;margin-top:28px;background:#d6ff2e;color:#0e0f13;font-weight:800;padding:16px 30px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;border-radius:4px}
.mk-elec .eboard{background:rgba(14,15,19,.88);border:1px solid rgba(214,255,46,.35);box-shadow:0 20px 60px rgba(0,0,0,.4);padding:24px;display:grid;gap:12px}
.mk-elec .eboard b{color:#d6ff2e;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.mk-elec .eboard span{padding:12px 14px;background:#16181f;border-left:3px solid #d6ff2e;color:#f1f1f3;font-weight:700;font-size:14px}
.mk-elec .eserv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#20222a}
.mk-elec .eserv>div{background:#0e0f13;padding:38px 30px}
.mk-elec .eserv .nm{font-family:'Anton',sans-serif;font-size:34px;color:#20222a;-webkit-text-stroke:1px #3a3d48;margin-bottom:16px;text-transform:uppercase}
.mk-elec .eserv h4{text-transform:uppercase;letter-spacing:1px;font-size:15px;font-weight:800;margin-bottom:8px}
.mk-elec .eserv h4 i{color:#d6ff2e;font-style:normal}
.mk-elec .eserv p{font-size:13px;color:#8b8e98;line-height:1.6}

/* 3 LANDSCAPING - overlay nav + caption hero (Photo Ledger. Ports the
   engine's real overlay nav (transparent, sitting on the photo, brand plus
   phone in white) and caption hero (the photo IS the hero, type shrinks to
   a caption block bottom-left: small-caps label, one short headline, phone)
   from generate_site.py:866-955. Photography-led, UI nearly invisible, the
   opposite discipline to a big centred splash headline. Second Track B
   flagship structural shape. */
.mk-land{--tacc:#5a8f3c;--tsurf:#ffffff;--tline:#dde5d4;--tmut:#5a6a52;--tbtn-bg:#5a8f3c;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'Bricolage Grotesque',sans-serif;background:#f3f6ee;color:#243224}
.mk-land .lcap{position:relative;min-height:470px;display:flex;flex-direction:column;background-size:cover;background-position:center;overflow:hidden}
.mk-land .lonav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:24px 40px}
.mk-land .lonav .lobrand{display:flex;flex-direction:column;gap:1px;color:#fff}
.mk-land .lonav .lobrand b{font-size:22px;font-weight:700;letter-spacing:-.3px}
.mk-land .lonav .lobrand small{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.85}
.mk-land .lonav .lonl{color:#fff;font-weight:700;font-size:16px;white-space:nowrap}
.mk-land .lcapscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,34,18,.72) 0%,rgba(20,34,18,.06) 46%,rgba(20,34,18,.28) 100%)}
.mk-land .lcapinner{position:relative;z-index:2;margin-top:auto;padding:0 40px 44px;color:#fff;max-width:36ch}
.mk-land .lcapinner .lcaplabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;opacity:.9;margin-bottom:10px}
.mk-land .lcapinner h1,.mk-land .lcapinner .preview-h1{font-size:30px;font-weight:600;line-height:1.28;letter-spacing:-.3px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.mk-land .lcapinner .tcta{display:inline-block;margin-top:20px;background:#fff;color:#243224;padding:13px 26px;border-radius:100px;font-weight:700;text-decoration:none;font-size:14px}
.mk-land .lserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 40px}
.mk-land .lserv>div{background:#fff;border-radius:24px;padding:30px}
.mk-land .lserv .ic{width:50px;height:50px;border-radius:50%;background:#e6f0dc;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin-bottom:16px}
.mk-land .lserv h4{font-size:20px;font-weight:700;margin-bottom:8px}
.mk-land .lserv p{font-size:14px;color:#5a6a52;line-height:1.6}

/* 4 PLUMBING - emergency console */
.mk-plum{--tacc:#1f9cf0;--tsurf:#f2f7fc;--tline:#e2ecf5;--tmut:#4a5e74;--tbtn-bg:#10233a;--tbtn-ink:#fff;--tbtn-r:8px;font-family:'Manrope',sans-serif;background:#fff;color:#10233a}
.mk-plum .pbar{background:#1f9cf0;color:#fff;text-align:center;padding:10px;font-size:13px;font-weight:700;letter-spacing:.5px}
.mk-plum .ph{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#10233a;color:#fff}
.mk-plum .ph .lg{font-weight:800;font-size:22px;letter-spacing:-.5px}
.mk-plum .ph .lg b{color:#1f9cf0}
.mk-plum .ph .r{display:flex;gap:22px;align-items:center;font-size:14px}
.mk-plum .ph .big{font-weight:800;font-size:19px}
.mk-plum .ph .q{background:#1f9cf0;padding:12px 20px;border-radius:8px;font-weight:800;font-size:14px}
.mk-plum .phero{display:grid;grid-template-columns:minmax(0,1fr) 260px .9fr;min-height:410px;background:#f7fbff}
.mk-plum .pc{padding:58px 44px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.mk-plum .pc .badges{display:flex;gap:10px;flex-wrap:wrap}
.mk-plum .pc .bd{background:#eaf5fe;color:#1573b5;font-weight:800;font-size:12px;padding:8px 14px;border-radius:6px}
.mk-plum .pc h1,.mk-plum .pc .preview-h1{font-size:52px;line-height:1.03;font-weight:800;letter-spacing:-1.5px}
.mk-plum .pc h1 span,.mk-plum .pc .preview-h1 span{color:#1f9cf0}
.mk-plum .pc p{font-size:15px;color:#4a5e74;line-height:1.6;max-width:42ch}
.mk-plum .pc .cta{display:flex;gap:12px;flex-wrap:wrap}
.mk-plum .pc .cta .tcta{padding:16px 28px;border-radius:8px;font-weight:800;text-decoration:none;font-size:14px}
.mk-plum .pc .cta .a1{background:#10233a;color:#fff}
.mk-plum .pc .cta .a2{background:#fff;color:#10233a;border:2px solid #10233a}
.mk-plum .pquick{align-self:center;justify-self:center;width:100%;max-width:230px;background:#10233a;color:#fff;border-radius:18px;padding:22px;display:grid;gap:10px;box-shadow:0 20px 50px rgba(16,35,58,.22)}
.mk-plum .pquick b{color:#7fc9ff;font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.mk-plum .pquick span{background:rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:800}
.mk-plum .pimg{background-size:cover;background-position:center}
.mk-plum .pserv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:44px}
.mk-plum .pserv>div{border:2px solid #eef3f8;border-radius:12px;padding:26px}
.mk-plum .pserv .ic{width:48px;height:48px;border-radius:10px;background:#10233a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;margin-bottom:14px}
.mk-plum .pserv h4{font-size:18px;font-weight:800;margin-bottom:7px}
.mk-plum .pserv p{font-size:13px;color:#4a5e74;line-height:1.55}

/* 5 CAFE - menu ledger */
.mk-cafe{--tacc:#d98e3b;--tsurf:#26190f;--tline:#3a2c1e;--tmut:#b8a488;--tbtn-bg:#d98e3b;--tbtn-ink:#1c140e;--tbtn-r:100px;font-family:'DM Serif Display',serif;background:#1c140e;color:#f3e7d6}
.mk-cafe .ch{display:flex;justify-content:space-between;align-items:center;padding:24px 44px}
.mk-cafe .ch .lg{font-size:26px;letter-spacing:.5px}
.mk-cafe .ch nav{display:flex;gap:28px;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#c4a878;align-items:center}
.mk-cafe .ch .q{background:#d98e3b;color:#1c140e;padding:11px 22px;border-radius:100px;font-family:'Inter',sans-serif;font-weight:700;font-size:13px}
.mk-cafe .cgrid{display:grid;grid-template-columns:1.08fr .92fr;min-height:470px;border-top:1px solid #3a2c1e;border-bottom:1px solid #3a2c1e}
.mk-cafe .chero{position:relative;display:flex;align-items:flex-end;padding:44px;background-size:cover;background-position:center;min-height:470px}
.mk-cafe .chero::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,20,14,.86),rgba(28,20,14,.25))}
.mk-cafe .chero>*{position:relative;z-index:2}
.mk-cafe .chero .cc{max-width:560px}
.mk-cafe .chero .ey{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#d98e3b;margin-bottom:18px}
.mk-cafe .chero h1,.mk-cafe .chero .preview-h1{font-size:66px;line-height:1.02}
.mk-cafe .chero h1 em,.mk-cafe .chero .preview-h1 em{font-style:italic;color:#d98e3b}
.mk-cafe .chero p{font-family:'Inter',sans-serif;font-size:15px;color:#d8c6ae;margin-top:18px;line-height:1.6}
.mk-cafe .chero .tcta{display:inline-block;margin-top:26px;background:#d98e3b;color:#1c140e;font-family:'Inter',sans-serif;font-weight:700;padding:15px 30px;border-radius:100px;text-decoration:none;font-size:14px}
.mk-cafe .cmenu{display:grid;align-content:center;gap:26px;padding:44px}
.mk-cafe .cmenu>div{border-left:3px solid #3a2c1e;padding-left:20px}
.mk-cafe .cmenu h4{font-size:25px;margin-bottom:6px}
.mk-cafe .cmenu .pr{font-family:'Inter',sans-serif;color:#d98e3b;font-weight:700;font-size:13px;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.mk-cafe .cmenu p{font-family:'Inter',sans-serif;font-size:13px;color:#b8a488;line-height:1.6}

/* 6 BARBER - poster marquee */
.mk-barb{--tacc:#c8a45c;--tsurf:#17181b;--tline:#26282c;--tmut:#8a8c90;--tbtn-bg:#c8a45c;--tbtn-ink:#101113;--tbtn-r:0;font-family:'Inter',sans-serif;background:#101113;color:#eceae6}
.mk-barb .bh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px;border-bottom:1px solid #26282c}
.mk-barb .bh .lg{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:3px}
.mk-barb .bh .lg b{color:#c8a45c}
.mk-barb .bh nav{display:flex;gap:26px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#8a8c90;align-items:center}
.mk-barb .bh .q{border:1px solid #c8a45c;color:#c8a45c;padding:11px 22px;font-weight:700;letter-spacing:1px}
.mk-barb .bhero{position:relative;min-height:450px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 44px;background-size:cover;background-position:center}
.mk-barb .bhero::before{content:'';position:absolute;inset:0;background:rgba(16,17,19,.72)}
.mk-barb .bhero>*{position:relative;z-index:2}
.mk-barb .bhero .ey{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#c8a45c;margin-bottom:18px}
.mk-barb .bhero h1{font-family:'Bebas Neue',sans-serif;font-size:90px;letter-spacing:2px;line-height:.9}
.mk-barb .bhero p{color:#b6b8bc;margin-top:14px;max-width:44ch}
.mk-barb .bhero .tcta{display:inline-block;margin-top:26px;background:#c8a45c;color:#101113;font-weight:800;padding:16px 36px;text-decoration:none;letter-spacing:1px;text-transform:uppercase;font-size:13px}
.mk-barb .bstrip{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #26282c}
.mk-barb .bstrip span{padding:18px 14px;text-align:center;color:#c8a45c;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:900;border-right:1px solid #26282c}
.mk-barb .bstrip span:last-child{border-right:0}
.mk-barb .bserv{display:grid;grid-template-columns:repeat(3,1fr);padding:50px 44px;gap:0}
.mk-barb .bserv>div{padding:0 30px;border-right:1px solid #26282c;text-align:center}
.mk-barb .bserv>div:last-child{border:none}
.mk-barb .bserv .pr{font-family:'Bebas Neue',sans-serif;font-size:38px;color:#c8a45c;margin-bottom:8px}
.mk-barb .bserv h4{font-size:15px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.mk-barb .bserv p{font-size:13px;color:#8a8c90;line-height:1.6}

/* 7 FITNESS - dark workshop (engine THEMES gym direction; restyled from the
   old orange acid-poster look, which contradicted the delivered sites) */
.mk-fit{--tacc:#a58af0;--tsurf:#1d1916;--tline:#332e28;--tmut:#a89d8f;--tbtn-bg:#6c3ce9;--tbtn-ink:#fff;--tbtn-r:6px;font-family:'Poppins',sans-serif;background:#131110;color:#f2ede4}
.mk-fit .fh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px;background:#171412;border-bottom:1px solid #332e28}
.mk-fit .fh .lg{font-weight:800;font-size:24px;letter-spacing:-.5px}
.mk-fit .fh .lg b{color:#a58af0}
.mk-fit .fh nav{display:flex;gap:26px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#a89d8f;align-items:center}
.mk-fit .fh .q{background:#6c3ce9;color:#fff;padding:12px 24px;border-radius:6px;font-weight:800;font-size:13px;text-transform:uppercase}
.mk-fit .fhero{position:relative;min-height:460px;display:flex;align-items:center;padding:0 44px;background-size:cover;background-position:center;isolation:isolate}
.mk-fit .fhero::before{content:'';position:absolute;inset:0;background:linear-gradient(60deg,#131110 32%,rgba(19,17,16,.55));z-index:-1}
.mk-fit .fword{display:none}
.mk-fit .fcopy{position:relative;z-index:2;max-width:610px;padding-top:24px}
.mk-fit .fcopy::before{content:'';position:absolute;top:0;left:0;width:64px;height:2px;background:#a58af0}
.mk-fit .fhero .eb{display:inline-block;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a58af0;margin-bottom:20px;width:fit-content}
.mk-fit .fhero h1{font-size:64px;font-weight:700;line-height:.98;text-transform:uppercase;letter-spacing:.5px;max-width:14ch}
.mk-fit .fhero h1 span{color:#a58af0}
.mk-fit .fhero p{margin-top:18px;color:#a89d8f;max-width:40ch;line-height:1.6}
.mk-fit .fhero .tcta{display:inline-block;margin-top:26px;background:#6c3ce9;color:#fff;font-weight:800;padding:17px 34px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:14px;border-radius:6px;width:fit-content;box-shadow:0 4px 0 #4423a0,0 12px 22px rgba(0,0,0,.28)}
.mk-fit .fserv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:48px 44px;background:#171412}
.mk-fit .fserv>div{background:#1d1916;border-radius:6px;padding:30px;border:1px solid #332e28}
.mk-fit .fserv>div:first-child{background:#221d18;border-color:#a58af0}
.mk-fit .fserv h4{font-size:18px;font-weight:700;text-transform:uppercase;margin-bottom:8px;position:relative;padding-bottom:10px}
.mk-fit .fserv h4::before{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:#a58af0}
.mk-fit .fserv p{font-size:13px;color:#a89d8f;line-height:1.6}

/* 8 CLEANING - quote card */
.mk-clean{--tacc:#22b3d6;--tsurf:#ffffff;--tline:#d8ecf3;--tmut:#4a6b78;--tbtn-bg:#22b3d6;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'Poppins',sans-serif;background:#f0f8fc;color:#143b4a}
.mk-clean .clh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px}
.mk-clean .clh .lg{font-weight:800;font-size:23px;display:flex;align-items:center;gap:8px}
.mk-clean .clh .lg .s{width:26px;height:26px;border-radius:8px;background:#22b3d6;display:inline-block}
.mk-clean .clh nav{display:flex;gap:26px;font-size:14px;font-weight:500;color:#4a6b78;align-items:center}
.mk-clean .clh .q{background:#22b3d6;color:#fff;padding:12px 24px;border-radius:100px;font-weight:700;font-size:14px}
.mk-clean .clhero{display:grid;grid-template-columns:minmax(0,1fr) 260px .9fr;align-items:center;min-height:410px;padding-left:44px;gap:24px}
.mk-clean .clc h1,.mk-clean .clc .preview-h1{font-size:54px;font-weight:800;line-height:1.05;letter-spacing:-1.5px}
.mk-clean .clc h1 span,.mk-clean .clc .preview-h1 span{color:#22b3d6}
.mk-clean .clc p{margin-top:16px;font-size:15px;color:#4a6b78;line-height:1.6;max-width:40ch}
.mk-clean .clc .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.mk-clean .clc .cta .tcta{padding:15px 28px;border-radius:100px;font-weight:700;text-decoration:none;font-size:14px}
.mk-clean .clc .cta .a1{background:#22b3d6;color:#fff}
.mk-clean .clc .cta .a2{background:#fff;color:#143b4a;border:2px solid #cfe8f0}
.mk-clean .clquote{background:#fff;border:1px solid #d8ecf3;border-radius:22px;padding:22px;box-shadow:0 18px 45px -28px rgba(20,59,74,.55);display:grid;gap:10px}
.mk-clean .clquote b{color:#22b3d6;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.mk-clean .clquote span{padding:10px 12px;border-radius:12px;background:#f0f8fc;color:#143b4a;font-weight:700;font-size:13px}
.mk-clean .climg{align-self:stretch;background-size:cover;background-position:center;border-radius:30px 0 0 30px;min-height:410px}
.mk-clean .clserv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:48px 44px}
.mk-clean .clserv>div{background:#fff;border-radius:20px;padding:28px;box-shadow:0 14px 30px -20px rgba(20,59,74,.4)}
.mk-clean .clserv .ic{width:50px;height:50px;border-radius:14px;background:#e2f4fa;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin-bottom:14px}
.mk-clean .clserv h4{font-size:18px;font-weight:700;margin-bottom:7px}
.mk-clean .clserv p{font-size:14px;color:#4a6b78;line-height:1.6}

/* 9 ROOFING - survey ledger */
.mk-roof{--tacc:#f5b301;--tsurf:#20242e;--tline:#2a2e38;--tmut:#9499a5;--tbtn-bg:#f5b301;--tbtn-ink:#181b22;--tbtn-r:4px;font-family:'Archivo',sans-serif;background:#181b22;color:#eef0f4}
.mk-roof .rfh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px;border-bottom:1px solid #2a2e38}
.mk-roof .rfh .lg{font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:1px}
.mk-roof .rfh .lg b{color:#f5b301}
.mk-roof .rfh nav{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#9499a5;align-items:center}
.mk-roof .rfh .call{background:#f5b301;color:#181b22;padding:12px 22px;font-weight:800;border-radius:4px}
.mk-roof .rfhero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:end;padding:80px 44px;background-size:cover;background-position:center;isolation:isolate}
.mk-roof .rfhero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#181b22 32%,rgba(24,27,34,.48));z-index:-1}
.mk-roof .rfhero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.mk-roof .rfhero .bd{background:rgba(245,179,1,.14);color:#f5b301;border:1px solid rgba(245,179,1,.4);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:7px 13px;border-radius:4px}
.mk-roof .rfhero h1{font-family:'Oswald',sans-serif;font-weight:700;font-size:72px;line-height:.96;text-transform:uppercase;letter-spacing:-.5px;max-width:15ch}
.mk-roof .rfhero h1 span{color:#f5b301}
.mk-roof .rfhero p{margin-top:18px;color:#b6bbc6;font-size:15px;max-width:42ch;line-height:1.6}
.mk-roof .rfhero .tcta{display:inline-block;margin-top:26px;background:#f5b301;color:#181b22;font-weight:800;padding:16px 32px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;border-radius:4px}
.mk-roof .rfsurvey{background:rgba(24,27,34,.9);border:1px solid rgba(245,179,1,.38);padding:24px;display:grid;gap:12px}
.mk-roof .rfsurvey b{color:#f5b301;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.mk-roof .rfsurvey span{padding:12px 14px;background:#20242e;font-weight:800;font-size:14px}
.mk-roof .rfserv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:48px 44px}
.mk-roof .rfserv>div{background:#20242e;border-radius:10px;padding:32px 28px;border-top:3px solid #f5b301}
.mk-roof .rfserv h4{font-family:'Oswald',sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:9px}
.mk-roof .rfserv p{font-size:13px;color:#9499a5;line-height:1.6}

/* 10 DECORATOR - swatch studio */
.mk-dec{--tacc:#c8553d;--tsurf:#ffffff;--tline:#efe7dd;--tmut:#6b645c;--tbtn-bg:#c8553d;--tbtn-ink:#fff;--tbtn-r:8px;font-family:'Manrope',sans-serif;background:#fbf8f4;color:#2a2622}
.mk-dec .dch{display:flex;justify-content:space-between;align-items:center;padding:24px 44px}
.mk-dec .dch .lg{font-size:23px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
.mk-dec .dch .lg .sw{display:flex;gap:3px}
.mk-dec .dch .lg .sw i{width:9px;height:18px;border-radius:2px;display:block}
.mk-dec .dch nav{display:flex;gap:26px;font-size:14px;color:#6b645c;align-items:center}
.mk-dec .dch .q{background:#c8553d;color:#fff;padding:11px 22px;border-radius:8px;font-weight:700;font-size:14px}
.mk-dec .dswatch{display:flex;height:6px}
.mk-dec .dswatch i{flex:1;display:block}
.mk-dec .dhero{display:grid;grid-template-columns:minmax(0,1fr) 230px .92fr;min-height:410px;background:#fff}
.mk-dec .dhc{padding:64px 44px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.mk-dec .dhc .ey{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#c8553d;font-weight:700}
.mk-dec .dhc h1{font-size:52px;font-weight:800;line-height:1.04;letter-spacing:-1.5px}
.mk-dec .dhc h1 span{color:#c8553d}
.mk-dec .dhc p{font-size:15px;color:#6b645c;line-height:1.7;max-width:42ch}
.mk-dec .dhc .tcta{align-self:flex-start;background:#2a2622;color:#fbf8f4;padding:15px 30px;border-radius:8px;font-weight:700;text-decoration:none;font-size:14px}
.mk-dec .dtools{align-self:center;justify-self:center;width:100%;max-width:210px;background:#fbf8f4;border:1px solid #efe7dd;border-radius:20px;padding:22px;display:grid;gap:10px}
.mk-dec .dtools b{color:#c8553d;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.mk-dec .dtools span{padding:10px 12px;background:#fff;border-radius:12px;color:#2a2622;font-weight:800;font-size:13px}
.mk-dec .dhimg{background-size:cover;background-position:center}
.mk-dec .dserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 44px}
.mk-dec .dserv>div{background:#fff;border-radius:18px;padding:30px;border:1px solid #efe7dd}
.mk-dec .dserv .ic{width:50px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;margin-bottom:14px}
.mk-dec .dserv h4{font-size:19px;font-weight:800;margin-bottom:7px}
.mk-dec .dserv p{font-size:14px;color:#6b645c;line-height:1.6}

/* 11 MECHANIC - garage dashboard */
.mk-mech{--tacc:#e63329;--tsurf:#1a1d24;--tline:#262a33;--tmut:#8f95a0;--tbtn-bg:#e63329;--tbtn-ink:#fff;--tbtn-r:3px;font-family:'Archivo',sans-serif;background:#14161b;color:#eef0f3}
.mk-mech .mh{display:flex;justify-content:space-between;align-items:center;padding:20px 44px;background:#0e1014;border-bottom:2px solid #e63329}
.mk-mech .mh .lg{font-family:'Oswald',sans-serif;font-weight:700;font-size:27px;text-transform:uppercase;letter-spacing:1px;font-style:italic}
.mk-mech .mh .lg b{color:#e63329}
.mk-mech .mh nav{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#8f95a0;align-items:center}
.mk-mech .mh .call{background:#e63329;color:#fff;padding:12px 22px;font-weight:800;border-radius:3px}
.mk-mech .mhero{position:relative;min-height:430px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:end;padding:70px 44px;background-size:cover;background-position:center;isolation:isolate}
.mk-mech .mhero::before{content:'';position:absolute;inset:0;background:linear-gradient(70deg,#14161b 30%,rgba(20,22,27,.46));z-index:-1}
.mk-mech .mhero .eb{display:inline-block;background:#e63329;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;border-radius:3px;margin-bottom:20px;width:fit-content}
.mk-mech .mhero h1{font-family:'Oswald',sans-serif;font-weight:700;font-size:78px;line-height:.92;text-transform:uppercase;letter-spacing:-.5px;max-width:13ch}
.mk-mech .mhero h1 span{color:#e63329}
.mk-mech .mhero p{margin-top:16px;color:#aeb3bd;max-width:40ch;line-height:1.6;font-size:15px}
.mk-mech .mhero .tcta{display:inline-block;margin-top:24px;background:#e63329;color:#fff;font-weight:800;padding:16px 32px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;border-radius:3px;width:fit-content}
.mk-mech .mstatus{background:rgba(14,16,20,.92);border:1px solid rgba(230,51,41,.4);padding:24px;display:grid;gap:12px}
.mk-mech .mstatus b{color:#e63329;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.mk-mech .mstatus span{padding:12px 14px;background:#1a1d24;border-left:3px solid #e63329;font-weight:800;font-size:14px}
.mk-mech .mserv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#262a33}
.mk-mech .mserv>div{background:#14161b;padding:36px 30px}
.mk-mech .mserv .nm{font-family:'Oswald',sans-serif;font-size:30px;color:#262a33;-webkit-text-stroke:1px #3a3f4a;margin-bottom:14px;text-transform:uppercase}
.mk-mech .mserv h4{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:19px;margin-bottom:8px}
.mk-mech .mserv p{font-size:13px;color:#8f95a0;line-height:1.6}

/* 12 BUILDER - dark workshop (engine THEMES builder direction; restyled from
   the old bright cream-and-amber look, which contradicted the delivered sites) */
.mk-build{--tacc:#e0904f;--tsurf:#1d1916;--tline:#332e28;--tmut:#a89d8f;--tbtn-bg:#c9622a;--tbtn-ink:#fff;--tbtn-r:6px;font-family:'Space Grotesk',sans-serif;background:#131110;color:#f2ede4}
.mk-build .buh{display:flex;justify-content:space-between;align-items:center;padding:24px 44px;background:#171412;border-bottom:1px solid #332e28}
.mk-build .buh .lg{font-size:24px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
.mk-build .buh .lg .br{width:24px;height:24px;background:#c9622a;border-radius:5px}
.mk-build .buh nav{display:flex;gap:26px;font-size:14px;color:#a89d8f;align-items:center}
.mk-build .buh .q{background:#c9622a;color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;font-size:14px}
.mk-build .bucase{display:grid;grid-template-columns:minmax(0,1.15fr) .85fr;gap:22px;padding:26px}
.mk-build .buhero{border-radius:6px;overflow:hidden;position:relative;min-height:470px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.mk-build .buhero::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(19,17,16,.88))}
.mk-build .buhero .buc{position:relative;z-index:2;padding:54px;color:#f2ede4}
.mk-build .buhero .ey{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#e0904f;margin-bottom:16px;font-weight:600;position:relative;padding-top:14px}
.mk-build .buhero .ey::before{content:'';position:absolute;top:0;left:0;width:64px;height:2px;background:#e0904f}
.mk-build .buhero h1,.mk-build .buhero .preview-h1{font-size:60px;font-weight:700;line-height:1;letter-spacing:-2px;max-width:16ch}
.mk-build .buhero p{margin-top:14px;font-size:16px;max-width:44ch;color:#cfc6ba}
.mk-build .buhero .tcta{display:inline-block;margin-top:24px;background:#c9622a;color:#fff;padding:15px 30px;border-radius:6px;font-weight:700;text-decoration:none;font-size:14px;box-shadow:0 4px 0 #8f441c,0 12px 22px rgba(0,0,0,.28)}
.mk-build .buserv{display:grid;gap:14px;align-content:stretch}
.mk-build .buserv>div{background:#1d1916;border:1px solid #332e28;border-radius:6px;padding:30px 28px;min-height:0}
.mk-build .buserv>div:first-child{background:#221d18;border-color:#e0904f}
.mk-build .buserv .nm{font-size:13px;font-weight:700;color:#e0904f;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.mk-build .buserv h4{font-size:20px;font-weight:700;margin-bottom:8px;letter-spacing:-.3px;position:relative;padding-bottom:10px}
.mk-build .buserv h4::before{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:#e0904f}
.mk-build .buserv p{font-size:14px;color:#a89d8f;line-height:1.6}

/* 13 GLAZIER - statement minimal (Big Grotesk Minimal direction: one
   neutral, one accent, huge whitespace, no texture, no motion) */
.mk-glaz{--tacc:#0c8599;--tsurf:transparent;--tline:#e4e2dd;--tmut:#5d635f;--tbtn-bg:#0c8599;--tbtn-ink:#fff;--tbtn-r:8px;font-family:'Manrope',sans-serif;background:#fbfbfa;color:#16181a}
.mk-glaz .gzh{display:flex;justify-content:space-between;align-items:center;padding:26px 44px;border-bottom:1px solid #e4e2dd}
.mk-glaz .gzh .lg{font-weight:800;font-size:22px;letter-spacing:-.5px}
.mk-glaz .gzh .lg b{color:#0c8599}
.mk-glaz .gzh nav{display:flex;gap:26px;font-size:14px;color:#5d635f;align-items:center}
.mk-glaz .gzh .q{color:#0c8599;font-weight:700}
.mk-glaz .gzhero{padding:110px 44px 96px;max-width:820px}
.mk-glaz .gzhero h1,.mk-glaz .gzhero .preview-h1{font-size:58px;font-weight:800;line-height:1.02;letter-spacing:-2px}
.mk-glaz .gzhero p{margin-top:20px;font-size:16px;color:#5d635f;line-height:1.7;max-width:52ch}
.mk-glaz .gzhero .tcta{display:inline-block;margin-top:28px;background:#0c8599;color:#fff;font-weight:700;padding:15px 30px;border-radius:8px;text-decoration:none;font-size:14px}
.mk-glaz .gzchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.mk-glaz .gzchips span{border:1px solid #e4e2dd;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;color:#16181a}
.mk-glaz .gzserv{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;padding:0 44px 84px}
.mk-glaz .gzserv>div{border-top:1px solid #e4e2dd;padding:24px 0 0}
.mk-glaz .gzserv h4{font-size:17px;font-weight:800;margin-bottom:8px}
.mk-glaz .gzserv p{font-size:14px;color:#5d635f;line-height:1.65}

/* 14 LOCKSMITH - emergency console (trust direction, same skeleton as
   plumbing's mk-plum, recoloured to deep navy plus safety amber) */
.mk-lock{--tacc:#b8860b;--tsurf:#f7f3e8;--tline:#e8ddc4;--tmut:#5c5340;--tbtn-bg:#1c2b3d;--tbtn-ink:#fff;--tbtn-r:8px;font-family:'Public Sans',sans-serif;background:#fff;color:#1c2b3d}
.mk-lock .pbar{background:#b8860b;color:#fff;text-align:center;padding:10px;font-size:13px;font-weight:700;letter-spacing:.5px}
.mk-lock .ph{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#1c2b3d;color:#fff}
.mk-lock .ph .lg{font-weight:800;font-size:22px;letter-spacing:-.5px}
.mk-lock .ph .lg b{color:#b8860b}
.mk-lock .ph .r{display:flex;gap:22px;align-items:center;font-size:14px}
.mk-lock .ph .big{font-weight:800;font-size:19px}
.mk-lock .ph .q{background:#b8860b;padding:12px 20px;border-radius:8px;font-weight:800;font-size:14px}
.mk-lock .phero{display:grid;grid-template-columns:minmax(0,1fr) 260px .9fr;min-height:410px;background:#fdfaf3}
.mk-lock .pc{padding:58px 44px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.mk-lock .pc .badges{display:flex;gap:10px;flex-wrap:wrap}
.mk-lock .pc .bd{background:#f2e8cf;color:#8a6a0e;font-weight:800;font-size:12px;padding:8px 14px;border-radius:6px}
.mk-lock .pc h1{font-size:52px;line-height:1.03;font-weight:800;letter-spacing:-1.5px}
.mk-lock .pc h1 span{color:#b8860b}
.mk-lock .pc p{font-size:15px;color:#5c5340;line-height:1.6;max-width:42ch}
.mk-lock .pc .cta{display:flex;gap:12px;flex-wrap:wrap}
.mk-lock .pc .cta .tcta{padding:16px 28px;border-radius:8px;font-weight:800;text-decoration:none;font-size:14px}
.mk-lock .pc .cta .a1{background:#1c2b3d;color:#fff}
.mk-lock .pc .cta .a2{background:#fff;color:#1c2b3d;border:2px solid #1c2b3d}
.mk-lock .pquick{align-self:center;justify-self:center;width:100%;max-width:230px;background:#1c2b3d;color:#fff;border-radius:18px;padding:22px;display:grid;gap:10px;box-shadow:0 20px 50px rgba(28,43,61,.22)}
.mk-lock .pquick b{color:#e8c468;font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.mk-lock .pquick span{background:rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:800}
.mk-lock .pimg{background-size:cover;background-position:center}
.mk-lock .pserv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:44px}
.mk-lock .pserv>div{border:2px solid #f2ead6;border-radius:12px;padding:26px}
.mk-lock .pserv .ic{width:48px;height:48px;border-radius:10px;background:#1c2b3d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;margin-bottom:14px}
.mk-lock .pserv h4{font-size:18px;font-weight:800;margin-bottom:7px}
.mk-lock .pserv p{font-size:13px;color:#5c5340;line-height:1.55}

/* 15 DRAINAGE - command board (trust direction, same skeleton as
   electrical's mk-elec, recoloured to slate blue plus warning red) */
.mk-drain{--tacc:#5b8fc2;--tsurf:#141b22;--tline:#202a35;--tmut:#a7b6c4;--tbtn-bg:#c0392b;--tbtn-ink:#fff;--tbtn-r:4px;font-family:'Red Hat Display',sans-serif;background:#0d1218;color:#eef2f6}
.mk-drain .eh{display:flex;justify-content:space-between;align-items:center;padding:22px 40px;border-bottom:1px solid #202a35}
.mk-drain .eh .lg{font-weight:800;font-size:26px;letter-spacing:-.5px}
.mk-drain .eh .lg b{color:#5b8fc2}
.mk-drain .eh nav{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#7c8b9a;align-items:center}
.mk-drain .eh .call{background:#c0392b;color:#fff;padding:12px 20px;font-weight:800;border-radius:4px}
.mk-drain .ehero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:end;padding:84px 40px;background-size:cover;background-position:center;isolation:isolate}
.mk-drain .ehero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0d1218 25%,rgba(13,18,24,.6));z-index:-1}
.mk-drain .ecopy{max-width:620px}
.mk-drain .ehero .eb{display:inline-block;background:#5b8fc2;color:#0d1218;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:7px 13px;margin-bottom:22px}
.mk-drain .ehero h1{font-size:60px;font-weight:700;line-height:.98;letter-spacing:-1px;max-width:14ch}
.mk-drain .ehero h1 span{color:#5b8fc2}
.mk-drain .ehero p{margin-top:20px;color:#a7b6c4;font-size:15px;max-width:40ch;line-height:1.6}
.mk-drain .ehero .tcta{display:inline-block;margin-top:28px;background:#c0392b;color:#fff;font-weight:800;padding:16px 30px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;border-radius:4px}
.mk-drain .eboard{background:rgba(13,18,24,.88);border:1px solid rgba(91,143,194,.35);box-shadow:0 20px 60px rgba(0,0,0,.4);padding:24px;display:grid;gap:12px}
.mk-drain .eboard b{color:#5b8fc2;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.mk-drain .eboard span{padding:12px 14px;background:#141b22;border-left:3px solid #5b8fc2;color:#eef2f6;font-weight:700;font-size:14px}
.mk-drain .eserv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#202a35}
.mk-drain .eserv>div{background:#0d1218;padding:38px 30px}
.mk-drain .eserv .nm{font-size:34px;color:#202a35;-webkit-text-stroke:1px #2e3946;margin-bottom:16px;text-transform:uppercase}
.mk-drain .eserv h4{text-transform:uppercase;letter-spacing:1px;font-size:15px;font-weight:800;margin-bottom:8px}
.mk-drain .eserv h4 i{color:#5b8fc2;font-style:normal}
.mk-drain .eserv p{font-size:13px;color:#7c8b9a;line-height:1.6}

/* 16 WINDOW CLEANING - statement minimal (Big Grotesk Minimal direction,
   same skeleton as glazing's mk-glaz, recoloured to a sky palette) */
.mk-wc{--tacc:#1c7fb0;--tsurf:transparent;--tline:#e2e8ea;--tmut:#5b6a70;--tbtn-bg:#1c7fb0;--tbtn-ink:#fff;--tbtn-r:8px;font-family:'Instrument Sans',sans-serif;background:#fbfdfe;color:#141b1e}
.mk-wc .gzh{display:flex;justify-content:space-between;align-items:center;padding:26px 44px;border-bottom:1px solid #e2e8ea}
.mk-wc .gzh .lg{font-weight:800;font-size:22px;letter-spacing:-.5px}
.mk-wc .gzh .lg b{color:#1c7fb0}
.mk-wc .gzh nav{display:flex;gap:26px;font-size:14px;color:#5b6a70;align-items:center}
.mk-wc .gzh .q{color:#1c7fb0;font-weight:700}
.mk-wc .gzhero{padding:110px 44px 96px;max-width:820px}
.mk-wc .gzhero h1{font-size:58px;font-weight:800;line-height:1.02;letter-spacing:-2px}
.mk-wc .gzhero p{margin-top:20px;font-size:16px;color:#5b6a70;line-height:1.7;max-width:52ch}
.mk-wc .gzhero .tcta{display:inline-block;margin-top:28px;background:#1c7fb0;color:#fff;font-weight:700;padding:15px 30px;border-radius:8px;text-decoration:none;font-size:14px}
.mk-wc .gzchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.mk-wc .gzchips span{border:1px solid #e2e8ea;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;color:#141b1e}
.mk-wc .gzserv{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;padding:0 44px 84px}
.mk-wc .gzserv>div{border-top:1px solid #e2e8ea;padding:24px 0 0}
.mk-wc .gzserv h4{font-size:17px;font-weight:800;margin-bottom:8px}
.mk-wc .gzserv p{font-size:14px;color:#5b6a70;line-height:1.65}

/* 17 PLASTERER - editorial split (ink direction, same skeleton as
   joinery's mk-join, recoloured to warm plaster pink plus off-white) */
.mk-plas{--tacc:#b56a4a;--tsurf:#ece0d4;--tline:#ddccbc;--tmut:#6b5a4b;--tbtn-bg:#2c2018;--tbtn-ink:#f6f0ea;--tbtn-r:0;font-family:'Source Serif 4',serif;background:#f6f0ea;color:#2c2018}
.mk-plas .jh{display:flex;justify-content:space-between;align-items:center;padding:22px 40px;border-bottom:1px solid #ddccbc}
.mk-plas .jh .lg{font-size:23px}
.mk-plas .jh nav{display:flex;gap:26px;font-size:13px;align-items:center;font-family:'Inter',sans-serif;color:#6b5a4b;text-transform:uppercase;letter-spacing:1px}
.mk-plas .jh .num{color:#2c2018;font-weight:700}
.mk-plas .jhero{display:grid;grid-template-columns:1.08fr .92fr;min-height:430px}
.mk-plas .jc{padding:70px 50px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.mk-plas .jc .ey{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#a07d5f}
.mk-plas .jc h1{font-size:56px;line-height:1.03;font-weight:400;letter-spacing:-1px}
.mk-plas .jc h1 em{font-style:italic;color:#b56a4a}
.mk-plas .jc p{font-family:'Inter',sans-serif;font-size:15px;line-height:1.7;color:#6b5a4b;max-width:44ch}
.mk-plas .jc .tcta{font-family:'Inter',sans-serif;align-self:flex-start;background:#2c2018;color:#f6f0ea;padding:15px 30px;font-size:13px;letter-spacing:1px;text-transform:uppercase;text-decoration:none}
.mk-plas .jimg{background-size:cover;background-position:center;filter:sepia(.12)}
.mk-plas .jserv{padding:0 50px 58px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ddccbc}
.mk-plas .jserv>div{padding:34px 30px 0;border-right:1px solid #ddccbc}
.mk-plas .jserv>div:last-child{border:none}
.mk-plas .jserv .ix{font-family:'Inter',sans-serif;font-size:12px;color:#a07d5f;margin-bottom:14px;text-transform:uppercase;letter-spacing:1.5px}
.mk-plas .jserv h4{font-size:25px;font-weight:400;margin-bottom:10px}
.mk-plas .jserv p{font-family:'Inter',sans-serif;font-size:13px;color:#6b5a4b;line-height:1.6}

/* 18 KITCHEN FITTING - swatch studio (ink direction, same skeleton as
   decorator's mk-dec, recoloured to oak plus deep green, swatches show
   material finishes instead of paint colours) */
.mk-kf{--tacc:#2f6b45;--tsurf:#ffffff;--tline:#e5e6df;--tmut:#5f6a5f;--tbtn-bg:#2f6b45;--tbtn-ink:#fff;--tbtn-r:8px;font-family:'Newsreader',serif;background:#faf8f3;color:#22281f}
.mk-kf .dch{display:flex;justify-content:space-between;align-items:center;padding:24px 44px}
.mk-kf .dch .lg{font-size:23px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
.mk-kf .dch .lg .sw{display:flex;gap:3px}
.mk-kf .dch .lg .sw i{width:9px;height:18px;border-radius:2px;display:block}
.mk-kf .dch nav{display:flex;gap:26px;font-size:14px;color:#5f6a5f;align-items:center}
.mk-kf .dch .q{background:#2f6b45;color:#fff;padding:11px 22px;border-radius:8px;font-weight:700;font-size:14px}
.mk-kf .dswatch{display:flex;height:6px}
.mk-kf .dswatch i{flex:1;display:block}
.mk-kf .dhero{display:grid;grid-template-columns:minmax(0,1fr) 230px .92fr;min-height:410px;background:#fff}
.mk-kf .dhc{padding:64px 44px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.mk-kf .dhc .ey{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#2f6b45;font-weight:700}
.mk-kf .dhc h1{font-size:50px;font-weight:800;line-height:1.06;letter-spacing:-1.5px}
.mk-kf .dhc h1 span{color:#2f6b45}
.mk-kf .dhc p{font-size:15px;color:#5f6a5f;line-height:1.7;max-width:42ch}
.mk-kf .dhc .tcta{align-self:flex-start;background:#22281f;color:#faf8f3;padding:15px 30px;border-radius:8px;font-weight:700;text-decoration:none;font-size:14px}
.mk-kf .dtools{align-self:center;justify-self:center;width:100%;max-width:210px;background:#faf8f3;border:1px solid #e5e6df;border-radius:20px;padding:22px;display:grid;gap:10px}
.mk-kf .dtools b{color:#2f6b45;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.mk-kf .dtools span{padding:10px 12px;background:#fff;border-radius:12px;color:#22281f;font-weight:800;font-size:13px}
.mk-kf .dhimg{background-size:cover;background-position:center}
.mk-kf .dserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 44px}
.mk-kf .dserv>div{background:#fff;border-radius:18px;padding:30px;border:1px solid #e5e6df}
.mk-kf .dserv .ic{width:50px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;margin-bottom:14px}
.mk-kf .dserv h4{font-size:19px;font-weight:800;margin-bottom:7px}
.mk-kf .dserv p{font-size:14px;color:#5f6a5f;line-height:1.6}

/* 19 BATHROOM FITTING - menu ledger repurposed as a package ledger (ink
   direction, same skeleton as the cafe's mk-cafe, recoloured light,
   porcelain plus brass, instead of cafe's dark chocolate) */
.mk-bath{--tacc:#8a6a26;--tsurf:#f7f3ea;--tline:#e8e0cd;--tmut:#6b6152;--tbtn-bg:#8a6a26;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'Lora',serif;background:#fbf9f4;color:#241c10}
.mk-bath .ch{display:flex;justify-content:space-between;align-items:center;padding:24px 44px}
.mk-bath .ch .lg{font-size:26px;letter-spacing:.5px}
.mk-bath .ch nav{display:flex;gap:28px;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#8a7a5e;align-items:center}
.mk-bath .ch .q{background:#8a6a26;color:#fff;padding:11px 22px;border-radius:100px;font-family:'Inter',sans-serif;font-weight:700;font-size:13px}
.mk-bath .cgrid{display:grid;grid-template-columns:1.08fr .92fr;min-height:470px;border-top:1px solid #e8e0cd;border-bottom:1px solid #e8e0cd}
.mk-bath .chero{position:relative;display:flex;align-items:flex-end;padding:44px;background-size:cover;background-position:center;min-height:470px}
.mk-bath .chero::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(36,28,16,.86),rgba(36,28,16,.25))}
.mk-bath .chero>*{position:relative;z-index:2}
.mk-bath .chero .cc{max-width:560px}
.mk-bath .chero .ey{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#d8b45c;margin-bottom:18px}
.mk-bath .chero h1{font-size:58px;line-height:1.05;color:#fff}
.mk-bath .chero h1 em{font-style:italic;color:#d8b45c}
.mk-bath .chero p{font-family:'Inter',sans-serif;font-size:15px;color:#e7ddc4;margin-top:18px;line-height:1.6}
.mk-bath .chero .tcta{display:inline-block;margin-top:26px;background:#8a6a26;color:#fff;font-family:'Inter',sans-serif;font-weight:700;padding:15px 30px;border-radius:100px;text-decoration:none;font-size:14px}
.mk-bath .cmenu{display:grid;align-content:center;gap:26px;padding:44px;background:#f7f3ea}
.mk-bath .cmenu>div{border-left:3px solid #e8e0cd;padding-left:20px}
.mk-bath .cmenu h4{font-size:23px;margin-bottom:6px}
.mk-bath .cmenu .pr{font-family:'Inter',sans-serif;color:#8a6a26;font-weight:700;font-size:13px;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.mk-bath .cmenu p{font-family:'Inter',sans-serif;font-size:13px;color:#6b6152;line-height:1.6}

/* 20 TILING - plain trade split (duotone direction: the catalogue's
   "house default, no extra treatment", so this and the next two skins are
   deliberately the simplest shape in the set, no floating panels, no
   badges, recoloured to terracotta plus chalk) */
.mk-tile{--tacc:#a8432a;--tsurf:#f7f1ea;--tline:#e8ddd0;--tmut:#6b5a4d;--tbtn-bg:#a8432a;--tbtn-ink:#fff;--tbtn-r:6px;font-family:'Urbanist',sans-serif;background:#fbf8f4;color:#2c211a}
.mk-tile .tih{display:flex;justify-content:space-between;align-items:center;padding:24px 44px;border-bottom:1px solid #e8ddd0}
.mk-tile .tih .lg{font-size:22px;font-weight:800;letter-spacing:-.5px}
.mk-tile .tih .lg b{color:#a8432a}
.mk-tile .tih nav{display:flex;gap:24px;font-size:14px;color:#6b5a4d;align-items:center}
.mk-tile .tih .q{background:#a8432a;color:#fff;padding:11px 22px;border-radius:6px;font-weight:700;font-size:14px}
.mk-tile .tihero{display:grid;grid-template-columns:1fr .92fr;min-height:420px}
.mk-tile .tic{padding:64px 48px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.mk-tile .tic h1{font-size:48px;font-weight:700;line-height:1.08;letter-spacing:-1px}
.mk-tile .tic h1 span{color:#a8432a}
.mk-tile .tic p{font-size:15px;color:#6b5a4d;line-height:1.7;max-width:42ch}
.mk-tile .tic .tcta{align-self:flex-start;background:#2c211a;color:#fbf8f4;padding:15px 30px;border-radius:6px;font-weight:700;text-decoration:none;font-size:14px}
.mk-tile .tiimg{background-size:cover;background-position:center}
.mk-tile .tiserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 44px}
.mk-tile .tiserv>div{background:#f7f1ea;border-radius:14px;padding:28px}
.mk-tile .tiserv h4{font-size:18px;font-weight:800;margin-bottom:8px}
.mk-tile .tiserv p{font-size:14px;color:#6b5a4d;line-height:1.6}

/* 21 HANDYMAN - plain trade split (duotone direction, recoloured to
   workwear yellow plus graphite) */
.mk-handy{--tacc:#8a6d16;--tsurf:#f5f1e4;--tline:#e6dfc8;--tmut:#63594a;--tbtn-bg:#3a3f42;--tbtn-ink:#fff;--tbtn-r:6px;font-family:'Chivo',sans-serif;background:#faf8f2;color:#2a271f}
.mk-handy .hyh{display:flex;justify-content:space-between;align-items:center;padding:24px 44px;border-bottom:1px solid #e6dfc8}
.mk-handy .hyh .lg{font-size:22px;font-weight:800;letter-spacing:-.5px}
.mk-handy .hyh .lg b{color:#8a6d16}
.mk-handy .hyh nav{display:flex;gap:24px;font-size:14px;color:#63594a;align-items:center}
.mk-handy .hyh .q{background:#3a3f42;color:#fff;padding:11px 22px;border-radius:6px;font-weight:700;font-size:14px}
.mk-handy .hyhero{display:grid;grid-template-columns:1fr .92fr;min-height:420px}
.mk-handy .hyc{padding:64px 48px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.mk-handy .hyc h1,.mk-handy .hyc .preview-h1{font-size:44px;font-weight:700;line-height:1.12;letter-spacing:-.5px}
.mk-handy .hyc p{font-size:15px;color:#63594a;line-height:1.7;max-width:42ch}
.mk-handy .hyc .tcta{align-self:flex-start;background:#8a6d16;color:#fff;padding:15px 30px;border-radius:6px;font-weight:700;text-decoration:none;font-size:14px}
.mk-handy .hyimg{background-size:cover;background-position:center}
.mk-handy .hyserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 44px}
.mk-handy .hyserv>div{background:#f5f1e4;border-radius:14px;padding:28px}
.mk-handy .hyserv h4{font-size:18px;font-weight:800;margin-bottom:8px}
.mk-handy .hyserv p{font-size:14px;color:#63594a;line-height:1.6}

/* 22 REMOVALS - plain fullbleed banner (duotone direction, matches the
   engine's fullbleed layout for this trade, recoloured to box kraft plus
   signal orange) */
.mk-rem{--tacc:#b8651a;--tsurf:#fdf6ee;--tline:#f0ddc4;--tmut:#6b5a45;--tbtn-bg:#b8651a;--tbtn-ink:#fff;--tbtn-r:6px;font-family:'Saira Condensed',sans-serif;background:#fffaf4;color:#2c2016}
.mk-rem .rmh{display:flex;justify-content:space-between;align-items:center;padding:24px 44px;background:#fffaf4}
.mk-rem .rmh .lg{font-size:24px;font-weight:700;letter-spacing:-.5px}
.mk-rem .rmh .lg b{color:#b8651a}
.mk-rem .rmh nav{display:flex;gap:24px;font-size:15px;color:#6b5a45;align-items:center}
.mk-rem .rmh .q{background:#b8651a;color:#fff;padding:11px 22px;border-radius:6px;font-weight:700;font-size:14px}
.mk-rem .rmhero{position:relative;min-height:440px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.mk-rem .rmhero::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(44,32,22,.82),rgba(44,32,22,.1))}
.mk-rem .rmc{position:relative;z-index:2;padding:54px;color:#fff;max-width:640px}
.mk-rem .rmc h1{font-size:52px;font-weight:700;line-height:1.05;letter-spacing:-1px}
.mk-rem .rmc p{margin-top:14px;font-size:16px;max-width:44ch;color:#f0e2d2}
.mk-rem .rmc .tcta{display:inline-block;margin-top:22px;background:#b8651a;color:#fff;padding:15px 30px;border-radius:6px;font-weight:700;text-decoration:none;font-size:14px}
.mk-rem .rmserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 44px}
.mk-rem .rmserv>div{background:#fdf6ee;border-radius:14px;padding:28px;border:1px solid #f0ddc4}
.mk-rem .rmserv h4{font-size:18px;font-weight:700;margin-bottom:8px}
.mk-rem .rmserv p{font-size:14px;color:#6b5a45;line-height:1.6}

/* 23 PAVING - photo ledger (ledger direction, same skeleton as
   landscaping's mk-land, recoloured to stone greys) */
.mk-pave{--tacc:#6b6358;--tsurf:#ffffff;--tline:#e3e0d8;--tmut:#5c574d;--tbtn-bg:#6b6358;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'IBM Plex Sans',sans-serif;background:#f5f3ef;color:#2b2823}
.mk-pave .pvh{display:flex;justify-content:space-between;align-items:center;padding:24px 40px}
.mk-pave .pvh .lg{font-size:23px;font-weight:700;display:flex;align-items:center;gap:9px}
.mk-pave .pvh .lg .dot{width:26px;height:26px;border-radius:50%;background:#6b6358}
.mk-pave .pvh nav{display:flex;gap:24px;font-size:14px;align-items:center;color:#5c574d}
.mk-pave .pvh .q{background:#6b6358;color:#fff;padding:11px 22px;border-radius:100px;font-weight:600;font-size:14px}
.mk-pave .pvhero{margin:8px 26px 0;border-radius:30px;overflow:hidden;position:relative;min-height:430px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.mk-pave .pvhero::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(30,27,22,.82))}
.mk-pave .pvhero .pvc{position:relative;z-index:2;padding:54px;color:#fff;max-width:720px}
.mk-pave .pvhero h1{font-size:52px;font-weight:700;line-height:1.05;letter-spacing:-1.5px;max-width:17ch}
.mk-pave .pvhero p{margin-top:14px;font-size:16px;max-width:42ch;opacity:.92}
.mk-pave .pvhero .tcta{display:inline-block;margin-top:24px;background:#fff;color:#2b2823;padding:15px 28px;border-radius:100px;font-weight:700;text-decoration:none;font-size:14px}
.mk-pave .pvfloat{position:absolute;z-index:3;right:34px;top:34px;display:grid;gap:10px}
.mk-pave .pvfloat span{background:rgba(255,255,255,.9);color:#2b2823;border-radius:999px;padding:11px 18px;font-weight:800;box-shadow:0 14px 30px rgba(30,27,22,.18)}
.mk-pave .pvserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 40px}
.mk-pave .pvserv>div{background:#fff;border-radius:24px;padding:30px;border:1px solid #e3e0d8}
.mk-pave .pvserv .ic{width:50px;height:50px;border-radius:50%;background:#eae7e0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin-bottom:16px}
.mk-pave .pvserv h4{font-size:20px;font-weight:700;margin-bottom:8px}
.mk-pave .pvserv p{font-size:14px;color:#5c574d;line-height:1.6}

/* 24 FENCING - survey ledger (ledger direction, same skeleton as
   roofing's mk-roof, recoloured to timber plus galvanised tones) */
.mk-fenc{--tacc:#5f6570;--tsurf:#20242a;--tline:#2b2f36;--tmut:#9498a0;--tbtn-bg:#5f6570;--tbtn-ink:#fff;--tbtn-r:4px;font-family:'Work Sans',sans-serif;background:#181b1f;color:#eef0f2}
.mk-fenc .fnh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px;border-bottom:1px solid #2b2f36}
.mk-fenc .fnh .lg{font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:1px}
.mk-fenc .fnh .lg b{color:#5f6570}
.mk-fenc .fnh nav{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#9498a0;align-items:center}
.mk-fenc .fnh .call{background:#5f6570;color:#fff;padding:12px 22px;font-weight:800;border-radius:4px}
.mk-fenc .fnhero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:end;padding:80px 44px;background-size:cover;background-position:center;isolation:isolate}
.mk-fenc .fnhero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#181b1f 32%,rgba(24,27,31,.48));z-index:-1}
.mk-fenc .fnhero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.mk-fenc .fnhero .bd{background:rgba(95,101,112,.18);color:#c4c7ce;border:1px solid rgba(95,101,112,.5);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:7px 13px;border-radius:4px}
.mk-fenc .fnhero h1{font-weight:700;font-size:64px;line-height:.98;letter-spacing:-.5px;max-width:15ch}
.mk-fenc .fnhero h1 span{color:#9ea3ac}
.mk-fenc .fnhero p{margin-top:18px;color:#b6bbc2;font-size:15px;max-width:42ch;line-height:1.6}
.mk-fenc .fnhero .tcta{display:inline-block;margin-top:26px;background:#5f6570;color:#fff;font-weight:800;padding:16px 32px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;border-radius:4px}
.mk-fenc .fnsurvey{background:rgba(24,27,31,.9);border:1px solid rgba(95,101,112,.5);padding:24px;display:grid;gap:12px}
.mk-fenc .fnsurvey b{color:#9ea3ac;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.mk-fenc .fnsurvey span{padding:12px 14px;background:#20242a;font-weight:800;font-size:14px}
.mk-fenc .fnserv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:48px 44px}
.mk-fenc .fnserv>div{background:#20242a;border-radius:10px;padding:32px 28px;border-top:3px solid #5f6570}
.mk-fenc .fnserv h4{font-size:19px;letter-spacing:.5px;margin-bottom:9px}
.mk-fenc .fnserv p{font-size:13px;color:#9498a0;line-height:1.6}

/* 25 TREE SURGERY - photo ledger (ledger direction, same skeleton as
   landscaping's mk-land, recoloured to deep forest plus bark) */
.mk-tree{--tacc:#1f5c3a;--tsurf:#ffffff;--tline:#dbe5dc;--tmut:#4d5a4f;--tbtn-bg:#1f5c3a;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'Karla',sans-serif;background:#f2f6f0;color:#20291f}
.mk-tree .trh{display:flex;justify-content:space-between;align-items:center;padding:24px 40px}
.mk-tree .trh .lg{font-size:23px;font-weight:700;display:flex;align-items:center;gap:9px}
.mk-tree .trh .lg .dot{width:26px;height:26px;border-radius:50%;background:#1f5c3a}
.mk-tree .trh nav{display:flex;gap:24px;font-size:14px;align-items:center;color:#4d5a4f}
.mk-tree .trh .q{background:#1f5c3a;color:#fff;padding:11px 22px;border-radius:100px;font-weight:600;font-size:14px}
.mk-tree .trhero{margin:8px 26px 0;border-radius:30px;overflow:hidden;position:relative;min-height:430px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.mk-tree .trhero::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(18,28,20,.82))}
.mk-tree .trhero .trc{position:relative;z-index:2;padding:54px;color:#fff;max-width:720px}
.mk-tree .trhero h1{font-size:52px;font-weight:700;line-height:1.05;letter-spacing:-1.5px;max-width:17ch}
.mk-tree .trhero p{margin-top:14px;font-size:16px;max-width:42ch;opacity:.92}
.mk-tree .trhero .tcta{display:inline-block;margin-top:24px;background:#fff;color:#20291f;padding:15px 28px;border-radius:100px;font-weight:700;text-decoration:none;font-size:14px}
.mk-tree .trfloat{position:absolute;z-index:3;right:34px;top:34px;display:grid;gap:10px}
.mk-tree .trfloat span{background:rgba(255,255,255,.9);color:#20291f;border-radius:999px;padding:11px 18px;font-weight:800;box-shadow:0 14px 30px rgba(18,28,20,.18)}
.mk-tree .trserv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 40px}
.mk-tree .trserv>div{background:#fff;border-radius:24px;padding:30px;border:1px solid #dbe5dc}
.mk-tree .trserv .ic{width:50px;height:50px;border-radius:50%;background:#e2ecdf;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin-bottom:16px}
.mk-tree .trserv h4{font-size:20px;font-weight:700;margin-bottom:8px}
.mk-tree .trserv p{font-size:14px;color:#4d5a4f;line-height:1.6}

/* 26 SCAFFOLDING - garage dashboard (workshop direction, same skeleton as
   the mechanic's mk-mech, recoloured to near-black plus scaffold silver) */
.mk-scaf{--tacc:#c4cdd3;--tsurf:#1c2024;--tline:#282d33;--tmut:#9198a0;--tbtn-bg:#5a6b7a;--tbtn-ink:#fff;--tbtn-r:3px;font-family:'Teko',sans-serif;background:#15181b;color:#eef1f3}
.mk-scaf .sfh{display:flex;justify-content:space-between;align-items:center;padding:20px 44px;background:#0f1215;border-bottom:2px solid #5a6b7a}
.mk-scaf .sfh .lg{font-weight:700;font-size:27px;text-transform:uppercase;letter-spacing:1px;font-style:italic}
.mk-scaf .sfh .lg b{color:#c4cdd3}
.mk-scaf .sfh nav{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#9198a0;align-items:center}
.mk-scaf .sfh .call{background:#5a6b7a;color:#fff;padding:12px 22px;font-weight:800;border-radius:3px}
.mk-scaf .sfhero{position:relative;min-height:430px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:end;padding:70px 44px;background-size:cover;background-position:center;isolation:isolate}
.mk-scaf .sfhero::before{content:'';position:absolute;inset:0;background:linear-gradient(70deg,#15181b 30%,rgba(21,24,27,.46));z-index:-1}
.mk-scaf .sfhero .eb{display:inline-block;background:#5a6b7a;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;border-radius:3px;margin-bottom:20px;width:fit-content}
.mk-scaf .sfhero h1{font-weight:700;font-size:74px;line-height:.92;text-transform:uppercase;letter-spacing:-.5px;max-width:13ch}
.mk-scaf .sfhero h1 span{color:#c4cdd3}
.mk-scaf .sfhero p{margin-top:16px;color:#9198a0;max-width:40ch;line-height:1.6;font-size:15px}
.mk-scaf .sfhero .tcta{display:inline-block;margin-top:24px;background:#5a6b7a;color:#fff;font-weight:800;padding:16px 32px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;border-radius:3px;width:fit-content}
.mk-scaf .sfstatus{background:rgba(15,18,21,.92);border:1px solid rgba(90,107,122,.4);padding:24px;display:grid;gap:12px}
.mk-scaf .sfstatus b{color:#c4cdd3;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.mk-scaf .sfstatus span{padding:12px 14px;background:#1c2024;border-left:3px solid #5a6b7a;font-weight:800;font-size:14px}
.mk-scaf .sfserv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#282d33}
.mk-scaf .sfserv>div{background:#15181b;padding:36px 30px}
.mk-scaf .sfserv .nm{font-size:30px;color:#282d33;-webkit-text-stroke:1px #3a4048;margin-bottom:14px;text-transform:uppercase}
.mk-scaf .sfserv h4{text-transform:uppercase;letter-spacing:.5px;font-size:19px;margin-bottom:8px}
.mk-scaf .sfserv p{font-size:13px;color:#9198a0;line-height:1.6}

/* 27 SECURITY - project case (workshop direction, same skeleton as the
   builder's mk-build, recoloured to near-black plus signal blue) */
.mk-sec{--tacc:#4d8fe6;--tsurf:#141a24;--tline:#232c38;--tmut:#95a3b3;--tbtn-bg:#1a56c4;--tbtn-ink:#fff;--tbtn-r:6px;font-family:'Fjalla One',sans-serif;background:#0f141c;color:#eef2f7}
.mk-sec .sech{display:flex;justify-content:space-between;align-items:center;padding:24px 44px;background:#12171f;border-bottom:1px solid #232c38}
.mk-sec .sech .lg{font-size:24px;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
.mk-sec .sech .lg .br{width:24px;height:24px;background:#1a56c4;border-radius:5px}
.mk-sec .sech nav{display:flex;gap:26px;font-size:14px;color:#95a3b3;align-items:center}
.mk-sec .sech .q{background:#1a56c4;color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;font-size:14px}
.mk-sec .secase{display:grid;grid-template-columns:minmax(0,1.15fr) .85fr;gap:22px;padding:26px}
.mk-sec .sechero{border-radius:6px;overflow:hidden;position:relative;min-height:470px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.mk-sec .sechero::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(15,20,28,.88))}
.mk-sec .sechero .secc{position:relative;z-index:2;padding:54px;color:#eef2f7}
.mk-sec .sechero .ey{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#4d8fe6;margin-bottom:16px;font-weight:600;position:relative;padding-top:14px}
.mk-sec .sechero .ey::before{content:'';position:absolute;top:0;left:0;width:64px;height:2px;background:#4d8fe6}
.mk-sec .sechero h1{font-size:56px;font-weight:700;line-height:1;letter-spacing:-2px;max-width:15ch}
.mk-sec .sechero p{margin-top:14px;font-size:16px;max-width:44ch;color:#c3ccd6}
.mk-sec .sechero .tcta{display:inline-block;margin-top:24px;background:#1a56c4;color:#fff;padding:15px 30px;border-radius:6px;font-weight:700;text-decoration:none;font-size:14px;box-shadow:0 4px 0 #123b87,0 12px 22px rgba(0,0,0,.28)}
.mk-sec .secserv{display:grid;gap:14px;align-content:stretch}
.mk-sec .secserv>div{background:#141a24;border:1px solid #232c38;border-radius:6px;padding:30px 28px;min-height:0}
.mk-sec .secserv>div:first-child{background:#182030;border-color:#4d8fe6}
.mk-sec .secserv .nm{font-size:13px;font-weight:700;color:#4d8fe6;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.mk-sec .secserv h4{font-size:20px;margin-bottom:8px;letter-spacing:-.3px;position:relative;padding-bottom:10px}
.mk-sec .secserv h4::before{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:#4d8fe6}
.mk-sec .secserv p{font-size:14px;color:#95a3b3;line-height:1.6}

/* 28 PEST CONTROL - poster marquee (workshop direction, same skeleton as
   the barber's mk-barb, recoloured to charcoal plus hazard amber) */
.mk-pest{--tacc:#e8a23a;--tsurf:#1a1712;--tline:#2b2620;--tmut:#a89f8f;--tbtn-bg:#ad7015;--tbtn-ink:#fff;--tbtn-r:0;font-family:'Staatliches',sans-serif;background:#141210;color:#f0ece4}
.mk-pest .pph{display:flex;justify-content:space-between;align-items:center;padding:22px 44px;border-bottom:1px solid #2b2620}
.mk-pest .pph .lg{font-size:26px;letter-spacing:1px}
.mk-pest .pph .lg b{color:#e8a23a}
.mk-pest .pph nav{display:flex;gap:26px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#a89f8f;align-items:center}
.mk-pest .pph .q{border:1px solid #e8a23a;color:#e8a23a;padding:11px 22px;font-weight:700;letter-spacing:1px}
.mk-pest .pphero{position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 44px;background-size:cover;background-position:center}
.mk-pest .pphero::before{content:'';position:absolute;inset:0;background:rgba(20,18,16,.74)}
.mk-pest .pphero>*{position:relative;z-index:2}
.mk-pest .pphero .ey{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#e8a23a;margin-bottom:18px}
.mk-pest .pphero h1{font-size:64px;letter-spacing:1px;line-height:.98}
.mk-pest .pphero p{color:#c2b9a8;margin-top:14px;max-width:44ch}
.mk-pest .pphero .tcta{display:inline-block;margin-top:26px;background:#ad7015;color:#fff;font-weight:800;padding:16px 36px;text-decoration:none;letter-spacing:1px;text-transform:uppercase;font-size:13px}
.mk-pest .ppstrip{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #2b2620}
.mk-pest .ppstrip span{padding:18px 14px;text-align:center;color:#e8a23a;text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:900;border-right:1px solid #2b2620}
.mk-pest .ppstrip span:last-child{border-right:0}
.mk-pest .ppserv{display:grid;grid-template-columns:repeat(3,1fr);padding:50px 44px;gap:0}
.mk-pest .ppserv>div{padding:0 30px;border-right:1px solid #2b2620;text-align:center}
.mk-pest .ppserv>div:last-child{border:none}
.mk-pest .ppserv .pr{font-size:34px;color:#e8a23a;margin-bottom:8px}
.mk-pest .ppserv h4{font-size:15px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.mk-pest .ppserv p{font-size:13px;color:#a89f8f;line-height:1.6}

/* 29 VALETING - quote card (acid direction, same skeleton as the
   cleaning's mk-clean, recoloured to gloss black plus magenta. Reuses
   mk-clean's .clhero/.clc/.clquote/.climg/.clserv class names verbatim so
   the shared .dir-acid .clhero blob rule fires with no new CSS needed) */
.mk-vale{--tacc:#d6266b;--tsurf:#fff5f9;--tline:#f5d3e3;--tmut:#7a4a5c;--tbtn-bg:#d6266b;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'Fredoka',sans-serif;background:#fef8fa;color:#2b1620}
.mk-vale .clh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px}
.mk-vale .clh .lg{font-weight:800;font-size:23px;display:flex;align-items:center;gap:8px}
.mk-vale .clh .lg .s{width:26px;height:26px;border-radius:8px;background:#d6266b;display:inline-block}
.mk-vale .clh nav{display:flex;gap:26px;font-size:14px;font-weight:500;color:#7a4a5c;align-items:center}
.mk-vale .clh .q{background:#d6266b;color:#fff;padding:12px 24px;border-radius:100px;font-weight:700;font-size:14px}
.mk-vale .clhero{display:grid;grid-template-columns:minmax(0,1fr) 260px .9fr;align-items:center;min-height:410px;padding-left:44px;gap:24px}
.mk-vale .clc h1{font-size:50px;font-weight:800;line-height:1.08;letter-spacing:-1.5px}
.mk-vale .clc h1 span{color:#d6266b}
.mk-vale .clc p{margin-top:16px;font-size:15px;color:#7a4a5c;line-height:1.6;max-width:40ch}
.mk-vale .clc .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.mk-vale .clc .cta .tcta{padding:15px 28px;border-radius:100px;font-weight:700;text-decoration:none;font-size:14px}
.mk-vale .clc .cta .a1{background:#d6266b;color:#fff}
.mk-vale .clc .cta .a2{background:#fff;color:#2b1620;border:2px solid #f5d3e3}
.mk-vale .clquote{background:#fff;border:1px solid #f5d3e3;border-radius:22px;padding:22px;box-shadow:0 18px 45px -28px rgba(43,22,32,.55);display:grid;gap:10px}
.mk-vale .clquote b{color:#d6266b;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.mk-vale .clquote span{padding:10px 12px;border-radius:12px;background:#fff5f9;color:#2b1620;font-weight:700;font-size:13px}
.mk-vale .climg{align-self:stretch;background-size:cover;background-position:center;border-radius:30px 0 0 30px;min-height:410px}
.mk-vale .clserv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:48px 44px}
.mk-vale .clserv>div{background:#fff;border-radius:20px;padding:28px;box-shadow:0 14px 30px -20px rgba(43,22,32,.4)}
.mk-vale .clserv .ic{width:50px;height:50px;border-radius:14px;background:#fce3ee;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin-bottom:14px}
.mk-vale .clserv h4{font-size:18px;font-weight:700;margin-bottom:7px}
.mk-vale .clserv p{font-size:14px;color:#7a4a5c;line-height:1.6}

/* 30 DOG GROOMING - quote card (acid direction, same skeleton as the
   cleaning's mk-clean, recoloured to a saturated teal. Same class-reuse
   approach as valeting above for the shared blob rule) */
.mk-dog{--tacc:#1a8a78;--tsurf:#ffffff;--tline:#d6ebe7;--tmut:#4a685f;--tbtn-bg:#1a8a78;--tbtn-ink:#fff;--tbtn-r:100px;font-family:'Baloo 2',sans-serif;background:#f4fbf9;color:#16221e}
.mk-dog .clh{display:flex;justify-content:space-between;align-items:center;padding:22px 44px}
.mk-dog .clh .lg{font-weight:800;font-size:23px;display:flex;align-items:center;gap:8px}
.mk-dog .clh .lg .s{width:26px;height:26px;border-radius:8px;background:#1a8a78;display:inline-block}
.mk-dog .clh nav{display:flex;gap:26px;font-size:14px;font-weight:500;color:#4a685f;align-items:center}
.mk-dog .clh .q{background:#1a8a78;color:#fff;padding:12px 24px;border-radius:100px;font-weight:700;font-size:14px}
.mk-dog .clhero{display:grid;grid-template-columns:minmax(0,1fr) 260px .9fr;align-items:center;min-height:410px;padding-left:44px;gap:24px}
.mk-dog .clc h1{font-size:48px;font-weight:800;line-height:1.1;letter-spacing:-1.5px}
.mk-dog .clc h1 span{color:#1a8a78}
.mk-dog .clc p{margin-top:16px;font-size:15px;color:#4a685f;line-height:1.6;max-width:40ch}
.mk-dog .clc .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.mk-dog .clc .cta .tcta{padding:15px 28px;border-radius:100px;font-weight:700;text-decoration:none;font-size:14px}
.mk-dog .clc .cta .a1{background:#1a8a78;color:#fff}
.mk-dog .clc .cta .a2{background:#fff;color:#16221e;border:2px solid #d6ebe7}
.mk-dog .clquote{background:#fff;border:1px solid #d6ebe7;border-radius:22px;padding:22px;box-shadow:0 18px 45px -28px rgba(22,34,30,.45);display:grid;gap:10px}
.mk-dog .clquote b{color:#1a8a78;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.mk-dog .clquote span{padding:10px 12px;border-radius:12px;background:#f4fbf9;color:#16221e;font-weight:700;font-size:13px}
.mk-dog .climg{align-self:stretch;background-size:cover;background-position:center;border-radius:30px 0 0 30px;min-height:410px}
.mk-dog .clserv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:48px 44px}
.mk-dog .clserv>div{background:#fff;border-radius:20px;padding:28px;box-shadow:0 14px 30px -20px rgba(22,34,30,.3)}
.mk-dog .clserv .ic{width:50px;height:50px;border-radius:14px;background:#e0f2ee;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin-bottom:14px}
.mk-dog .clserv h4{font-size:18px;font-weight:700;margin-bottom:7px}
.mk-dog .clserv p{font-size:14px;color:#4a685f;line-height:1.6}

/* ============ DIRECTION LAYER (dir-*) ============
   Motion/texture/spacing ported from the real engine's per-direction CSS
   (go-to-market/site-engine/generate_site.py, post tier-gating). One rule
   per direction covers every card carrying that dir-* class, present or
   future. dir-trust and dir-duotone are deliberately no-ops: trust's only
   motion is the engine's pulsing callbar (not present in these previews)
   and duotone's catalogue spec is "no extra treatment". */

/* Ink and Paper: staggered one-shot gallery fade (CSS-only, these are static
   preview cards, no IntersectionObserver here) + whitespace-not-cards. */
@keyframes dd-tile-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dir-ink .tgal .tg-i{animation:dd-tile-fade .5s ease backwards}
.dir-ink .tgal .tg-i:nth-child(2){animation-delay:80ms}
.dir-ink .tgal .tg-i:nth-child(3){animation-delay:160ms}
.dir-ink .tgal .tg-i:nth-child(4){animation-delay:240ms}
.dir-ink .tgal .tg-i:nth-child(5){animation-delay:320ms}
.dir-ink .tproof,.dir-ink .tsteps{padding:84px 44px}
.dir-ink .tp,.dir-ink .tsteps li{background:transparent;border:0;border-top:1px solid var(--tline,rgba(128,128,128,.3));border-radius:0;padding:22px 0}

/* Photo Ledger: no motion at all, discipline is the design. Belt and braces
   against ink's keyframe coexisting in this shared stylesheet. */
.dir-ledger .tgal .tg-i{animation:none!important}
.dir-ledger .tp,.dir-ledger .tsteps li{background:transparent;border:0;border-top:1px solid var(--tline,rgba(128,128,128,.3));border-radius:0;padding:20px 0}

/* Acid Pop: drifting blob behind the hero headline (host element .tblob in
   the card's html string), confident 18px radius, alternating tint band. */
.dir-acid .clhero{position:relative;isolation:isolate;overflow:hidden}
.dir-acid .tblob{position:absolute;z-index:-1;right:-8%;top:-18%;width:60%;max-width:560px;aspect-ratio:1;border-radius:50%;opacity:.4;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--tacc,#22b3d6) 38%,#fff),transparent 70%);animation:dd-blob-drift 26s ease-in-out infinite alternate}
@keyframes dd-blob-drift{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-3%,4%) rotate(7deg)}}
.dir-acid .tproof{background:color-mix(in srgb,var(--tacc,#22b3d6) 8%,#fff)}
.dir-acid .tp,.dir-acid .tsteps li,.dir-acid .tband .tcta{border-radius:18px}

/* Big Grotesk Minimal: no motion, no texture, hairline-not-card rhythm.
   Belt and braces against ink's keyframe, same as ledger. */
.dir-minimal .tgal .tg-i{animation:none!important}
.dir-minimal .tproof,.dir-minimal .tsteps{padding:84px 44px}
.dir-minimal .tp,.dir-minimal .tsteps li{background:transparent;border:0;border-top:1px solid var(--tline,rgba(128,128,128,.3));border-radius:0;padding:22px 0}

/* Dark Workshop: grain overlay on the whole card (same feTurbulence
   technique as the engine, scoped to the .tpl wrapper since the preview
   card is not <body>), accent hairline under section heads, pressed CTA,
   stepped surface rhythm. */
.dir-workshop{position:relative}
.dir-workshop::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.dir-workshop .tproof h3,.dir-workshop .tsteps h3{position:relative;padding-bottom:12px}
.dir-workshop .tproof h3::after,.dir-workshop .tsteps h3::after{content:'';position:absolute;left:0;bottom:0;width:44px;height:2px;background:var(--tacc,#c8a45c)}
.dir-workshop .tband .tcta{box-shadow:0 4px 0 rgba(0,0,0,.5),0 12px 22px rgba(0,0,0,.28)}
.dir-workshop .tproof{background:rgba(255,255,255,.02)}

@media (prefers-reduced-motion:reduce){
  .dir-ink .tgal .tg-i{animation:none}
  .dir-acid .tblob{animation:none}
}

@media(max-width:900px){
  .mk-plum .phero,.mk-clean .clhero,.mk-dec .dhero{grid-template-columns:1fr}
  .mk-plum .pquick,.mk-clean .clquote,.mk-dec .dtools{width:auto;margin:0 24px 24px;max-width:none;justify-self:stretch}
  .mk-plum .pimg,.mk-clean .climg,.mk-dec .dhimg{min-height:280px;border-radius:0}
}

@media(max-width:760px){
  .mk-elec .eh,.mk-cafe .ch,.mk-barb .bh,.mk-fit .fh,.mk-clean .clh,.mk-roof .rfh,.mk-dec .dch,.mk-mech .mh,.mk-build .buh{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-elec .eh nav,.mk-cafe .ch nav,.mk-barb .bh nav,.mk-fit .fh nav,.mk-clean .clh nav,.mk-roof .rfh nav,.mk-dec .dch nav,.mk-mech .mh nav,.mk-build .buh nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-elec .eh .call,.mk-roof .rfh .call,.mk-mech .mh .call{padding:10px 14px}
  .mk-join .jframe,.mk-elec .ehero,.mk-cafe .cgrid,.mk-roof .rfhero,.mk-mech .mhero,.mk-build .bucase{grid-template-columns:1fr}
  .mk-join .jserv,.mk-elec .eserv,.mk-land .lserv,.mk-plum .pserv,.mk-barb .bserv,.mk-fit .fserv,.mk-clean .clserv,.mk-roof .rfserv,.mk-dec .dserv,.mk-mech .mserv{grid-template-columns:1fr}
  .mk-join .jnav{grid-template-columns:1fr;text-align:center;gap:8px;padding:18px 24px}
  .mk-join .jnav .jnl-l,.mk-join .jnav .jnl-r,.mk-join .jnav .jbrand{grid-column:1;justify-self:center}
  .mk-join .jframe{padding:36px 24px 0;gap:24px}
  .mk-join .jfcopy{padding-top:0}
  .mk-join .jfcopy h1,.mk-join .jfcopy .preview-h1{font-size:clamp(34px,12vw,52px)}
  .mk-join .jfmedia{margin-bottom:0;order:2}
  .mk-clean .clhero,.mk-dec .dhc{padding:42px 24px}
  .mk-clean .clc h1,.mk-clean .clc .preview-h1,.mk-dec .dhc h1,.mk-build .buhero h1,.mk-build .buhero .preview-h1{font-size:clamp(36px,12vw,52px)}
  .mk-elec .ehero,.mk-roof .rfhero,.mk-mech .mhero{padding:62px 24px}
  .mk-elec .ehero h1,.mk-elec .ehero .preview-h1,.mk-cafe .chero h1,.mk-cafe .chero .preview-h1,.mk-barb .bhero h1,.mk-fit .fhero h1,.mk-roof .rfhero h1,.mk-mech .mhero h1{font-size:clamp(44px,15vw,64px);letter-spacing:-1px}
  .mk-elec .eboard,.mk-roof .rfsurvey,.mk-mech .mstatus{width:100%}
  .mk-build .buhero .buc{padding:42px 24px}
  .mk-land .lcap{min-height:420px}
  .mk-land .lonav{padding:18px 24px}
  .mk-land .lonav .lobrand b{font-size:20px}
  .mk-land .lcapinner{padding:0 24px 36px;max-width:none}
  .mk-land .lcapinner h1,.mk-land .lcapinner .preview-h1{font-size:26px}
  .mk-cafe .chero,.mk-barb .bhero,.mk-fit .fhero{min-height:390px;padding:0 24px}
  .mk-cafe .cmenu{padding:34px 24px}
  .mk-cafe .cmenu>div{padding-left:16px}
  .mk-clean .climg,.mk-dec .dhimg{min-height:230px}
  .mk-join .jfimg{aspect-ratio:16/10}
  .mk-join .jserv,.mk-elec .eserv,.mk-land .lserv,.mk-cafe .cmenu,.mk-barb .bserv,.mk-fit .fserv,.mk-clean .clserv,.mk-roof .rfserv,.mk-dec .dserv,.mk-mech .mserv{padding:34px 24px;gap:18px}
  .mk-join .jserv>div,.mk-barb .bserv>div{border-right:0;padding:0}
  .mk-barb .bstrip{grid-template-columns:1fr 1fr}
  .mk-barb .bstrip span:nth-child(2n){border-right:0}
  .mk-fit .fword{font-size:72px;right:16px;bottom:-8px;letter-spacing:-4px}
  .mk-fit .fserv>div,.mk-fit .fserv>div>*{transform:none}
  .mk-plum .ph{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-plum .ph .r{width:100%;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;font-size:13px}
  .mk-plum .ph .big{font-size:18px;white-space:nowrap}
  .mk-plum .ph .q{padding:10px 15px}
  .mk-plum .pc{padding:42px 24px}
  .mk-plum .pc h1,.mk-plum .pc .preview-h1{font-size:clamp(38px,13vw,52px)}
  .mk-plum .pc .cta .tcta{width:100%;text-align:center}
  .mk-plum .pserv{padding:34px 24px}
  .mk-build .bucase{padding:0 18px 18px}
  .mk-build .buhero{min-height:360px;border-radius:20px}
  .mk-build .buhero::before{background:linear-gradient(rgba(19,17,16,.55),rgba(19,17,16,.88))}
}

/* Responsive rules for the trades added after the original 12, same
   per-class technique as their cloned siblings above, kept in a dedicated
   block per batch rather than threaded into the shared selector lists
   above, so a batch's mobile rules can be reviewed and extended on their
   own. */
@media(max-width:900px){
  .mk-lock .phero{grid-template-columns:1fr}
  .mk-lock .pquick{width:auto;margin:0 24px 24px;max-width:none;justify-self:stretch}
  .mk-lock .pimg{min-height:280px;border-radius:0}
}
@media(max-width:760px){
  .mk-lock .ph,.mk-drain .eh{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-lock .ph .r{width:100%;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;font-size:13px}
  .mk-lock .ph .big{font-size:18px;white-space:nowrap}
  .mk-lock .ph .q,.mk-drain .eh .call{padding:10px 14px}
  .mk-drain .eh nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-lock .pc{padding:42px 24px}
  .mk-lock .pc h1{font-size:clamp(38px,13vw,52px)}
  .mk-lock .pc .cta .tcta{width:100%;text-align:center}
  .mk-lock .pserv{padding:34px 24px}
  .mk-drain .ehero{grid-template-columns:1fr;padding:62px 24px}
  .mk-drain .ehero h1{font-size:clamp(44px,15vw,64px);letter-spacing:-1px}
  .mk-drain .eboard{width:100%}
  .mk-drain .eserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-wc .gzhero{padding:64px 24px 56px}
  .mk-wc .gzhero h1{font-size:clamp(36px,11vw,48px)}
  .mk-wc .gzserv{grid-template-columns:1fr;padding:0 24px 56px;gap:22px}
  .mk-glaz .gzh,.mk-wc .gzh{flex-wrap:wrap;row-gap:10px;padding:18px 24px}
  .mk-glaz .gzh nav,.mk-wc .gzh nav{flex-wrap:wrap;row-gap:8px}
  .mk-glaz .gzhero{padding:64px 24px 56px}
  .mk-glaz .gzhero h1,.mk-glaz .gzhero .preview-h1{font-size:clamp(36px,11vw,48px)}
  .mk-glaz .gzserv{grid-template-columns:1fr;padding:0 24px 56px;gap:22px}
  .mk-plas .jh,.mk-kf .dch,.mk-bath .ch{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-plas .jh nav,.mk-kf .dch nav,.mk-bath .ch nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-plas .jhero,.mk-kf .dhero,.mk-bath .cgrid{grid-template-columns:1fr}
  .mk-plas .jc,.mk-kf .dhc{padding:42px 24px}
  .mk-plas .jc h1,.mk-kf .dhc h1{font-size:clamp(34px,12vw,50px)}
  .mk-plas .jserv,.mk-kf .dserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-plas .jserv>div{border-right:0;padding:0}
  .mk-plas .jimg,.mk-kf .dhimg{min-height:230px}
  .mk-kf .dtools{width:auto;margin:0 24px 24px;max-width:none;justify-self:stretch}
  .mk-bath .chero{min-height:390px;padding:0 24px}
  .mk-bath .chero h1{font-size:clamp(38px,13vw,58px)}
  .mk-bath .cmenu{padding:34px 24px}
  .mk-bath .cmenu>div{padding-left:16px}
  .mk-cafe .chero .cc,.mk-bath .chero .cc{max-width:none}
  .mk-tile .tih,.mk-handy .hyh,.mk-rem .rmh{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-tile .tih nav,.mk-handy .hyh nav,.mk-rem .rmh nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-tile .tihero,.mk-handy .hyhero{grid-template-columns:1fr}
  .mk-tile .tic,.mk-handy .hyc{padding:42px 24px}
  .mk-tile .tic h1{font-size:clamp(32px,11vw,48px)}
  .mk-handy .hyc h1,.mk-handy .hyc .preview-h1{font-size:clamp(30px,10vw,44px)}
  .mk-tile .tiimg,.mk-handy .hyimg{min-height:230px}
  .mk-tile .tiserv,.mk-handy .hyserv,.mk-rem .rmserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-rem .rmhero{min-height:360px}
  .mk-rem .rmc{padding:36px 24px}
  .mk-rem .rmc h1{font-size:clamp(34px,12vw,52px)}
  .mk-pave .pvh,.mk-tree .trh{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-pave .pvh nav,.mk-tree .trh nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-pave .pvhero,.mk-tree .trhero{margin:0 18px;min-height:360px;border-radius:20px;flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .mk-pave .pvhero::before{background:linear-gradient(rgba(30,27,22,.6),rgba(30,27,22,.88))}
  .mk-tree .trhero::before{background:linear-gradient(rgba(18,28,20,.6),rgba(18,28,20,.88))}
  .mk-pave .pvhero .pvc,.mk-tree .trhero .trc{padding:42px 24px}
  .mk-pave .pvhero h1,.mk-tree .trhero h1{font-size:clamp(32px,11vw,48px)}
  .mk-pave .pvfloat,.mk-tree .trfloat{position:relative;right:auto;top:auto;left:auto;z-index:2;grid-template-columns:1fr;align-self:flex-start;margin:0 24px 28px;width:calc(100% - 48px)}
  .mk-pave .pvfloat span,.mk-tree .trfloat span{text-align:center}
  .mk-pave .pvserv,.mk-tree .trserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-fenc .fnh{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-fenc .fnh nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-fenc .fnh .call{padding:10px 14px}
  .mk-fenc .fnhero{grid-template-columns:1fr;padding:62px 24px}
  .mk-fenc .fnhero h1{font-size:clamp(40px,15vw,64px);letter-spacing:-1px}
  .mk-fenc .fnsurvey{width:100%}
  .mk-fenc .fnserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-scaf .sfh,.mk-sec .sech{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-scaf .sfh nav,.mk-sec .sech nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-scaf .sfh .call{padding:10px 14px}
  .mk-scaf .sfhero{grid-template-columns:1fr;padding:62px 24px}
  .mk-scaf .sfhero h1{font-size:clamp(40px,15vw,64px);letter-spacing:-1px}
  .mk-scaf .sfstatus{width:100%}
  .mk-scaf .sfserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-sec .secase{grid-template-columns:1fr;padding:0 18px 18px}
  .mk-sec .sechero{min-height:360px;border-radius:20px}
  .mk-sec .sechero::before{background:linear-gradient(rgba(15,20,28,.55),rgba(15,20,28,.88))}
  .mk-sec .sechero .secc{padding:42px 24px}
  .mk-sec .sechero h1{font-size:clamp(34px,12vw,52px)}
  .mk-pest .pph{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-pest .pph nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-pest .pphero{min-height:390px;padding:0 24px}
  .mk-pest .pphero h1{font-size:clamp(40px,15vw,58px);letter-spacing:-1px}
  .mk-pest .ppstrip{grid-template-columns:1fr 1fr}
  .mk-pest .ppstrip span:nth-child(2n){border-right:0}
  .mk-pest .ppserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
  .mk-pest .ppserv>div{border-right:0;padding:0}
  .mk-vale .clhero,.mk-dog .clhero{grid-template-columns:1fr;padding:42px 24px}
  .mk-vale .clquote,.mk-dog .clquote{width:auto;margin:0 0 24px;max-width:none;justify-self:stretch}
  .mk-vale .climg,.mk-dog .climg{min-height:230px;border-radius:0}
  .mk-vale .clc h1,.mk-dog .clc h1{font-size:clamp(32px,12vw,48px)}
  .mk-vale .clh,.mk-dog .clh{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 24px}
  .mk-vale .clh nav,.mk-dog .clh nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px}
  .mk-vale .clserv,.mk-dog .clserv{grid-template-columns:1fr;padding:34px 24px;gap:18px}
}

/* ============ GALLERY PAGE (templates.html) ============ */
.tgallery{background:transparent;color:var(--ink);padding:150px var(--pad-x) 10vh}
.gintro{max-width:760px;margin-bottom:6vh}
.gintro .kick{color:var(--blue-soft)}
.gintro h1{font-family:var(--f-head);font-weight:500;font-size:clamp(32px,5.5vw,66px);letter-spacing:-2px;line-height:1.02}
.gintro h1 .b{color:var(--blue-soft)}
.glabel .why{margin-top:6px;font-size:13px;line-height:1.5;color:#55556a;max-width:46ch}
.gintro p{margin-top:18px;color:#5d6570;font-size:17px;line-height:1.6;max-width:52ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
.gcard{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;background:#fbfaf7;border:1px solid rgba(34,39,46,.1);display:block;color:var(--ink);box-shadow:0 30px 60px -46px rgba(35,43,54,.5);transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.gcard:hover{box-shadow:0 30px 60px -24px rgba(0,0,0,.7);border-color:rgba(139,142,255,.5);transform:translateY(-6px)}
.gthumb{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;background:#fff}
.gthumb .scaler{position:absolute;top:0;left:0;width:1280px;transform-origin:top left;pointer-events:none}
.glabel{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;min-height:88px}
.glabel .nm{font-weight:600;font-size:16px}
.glabel .sec{font-size:12px;color:var(--blue-soft);letter-spacing:1px;text-transform:uppercase}
.gview{position:absolute;inset:0;background:rgba(12,12,17,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;backdrop-filter:blur(2px)}
.gthumb:hover .gview{opacity:1}
.gview span{background:#fff;color:#0c0c11;font-weight:700;font-size:13px;padding:12px 22px;border-radius:100px;display:flex;gap:8px;align-items:center}
.gnote{margin-top:6vh;padding-top:24px;border-top:1px solid rgba(34,39,46,.14);color:#5d6570;font-size:13px;max-width:60ch;line-height:1.6}

/* ============ TEMPLATE PREVIEW PAGE (template.html) ============ */
body.preview-page{background:var(--bg)}
body.preview-page #nav{position:sticky;background:rgba(238,240,239,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.preview-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#f1f1f6;border-bottom:1px solid #e3e3ea;flex-wrap:wrap}
.preview-bar .vback{background:#0d0d12;color:#fff;border:none;border-radius:7px;padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--f-head);display:inline-flex;gap:7px;align-items:center;text-decoration:none}
.preview-bar .vback:hover{background:var(--blue)}
.preview-bar .vdots{display:flex;gap:7px}
.preview-bar .vdots i{width:11px;height:11px;border-radius:50%;display:block}
.preview-bar .vdots i:nth-child(1){background:#ff5f57}.preview-bar .vdots i:nth-child(2){background:#febc2e}.preview-bar .vdots i:nth-child(3){background:#28c840}
.preview-bar .vurl{flex:1;min-width:160px;background:#fff;border:1px solid #e3e3ea;border-radius:7px;padding:8px 14px;font-size:12px;color:#6c6c82;font-family:var(--f-ui)}
.preview-bar .vtag{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--blue);padding:6px 12px;border-radius:100px}
.preview-stage{background:#fff}
.preview-empty{padding:120px 6vw;text-align:center;color:#fff;background:#0c0c11}
.preview-empty-title{font-size:20px;margin-bottom:16px}
.preview-empty a{color:var(--blue-soft);text-decoration:underline}
.preview-cta{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 22px;background:#232b36;border-top:1px solid rgba(255,255,255,.1)}
.preview-cta span{color:rgba(255,255,255,.85);font-size:14px;font-family:var(--f-head)}
.preview-cta .vcb{background:var(--blue);color:#fff;border:none;font-family:var(--f-head);font-weight:700;font-size:14px;padding:13px 26px;border-radius:100px;cursor:pointer;text-decoration:none;transition:transform .3s,background .3s}
.preview-cta .vcb:hover{transform:translateY(-2px);background:#fff;color:#0d0d12}

@media(max-width:760px){
  .preview-bar{gap:10px;padding:10px 14px}
  .preview-bar .vback{padding:9px 14px}
  .preview-bar .vurl{order:4;flex-basis:100%;min-width:0}
  .preview-bar .vtag{margin-left:auto}
  .preview-cta{position:static;align-items:flex-start;padding:18px 20px}
  .preview-cta span{font-size:14px;line-height:1.45}
  .preview-cta .vcb{width:100%;justify-content:center;text-align:center}
}

/* crawford-style tinted card frames per direction */
.gcard{border-radius:22px;padding:16px 16px 0}
.gcard .gthumb{border-radius:12px}
.gtint-trust{background:#e3ebf5}
.gtint-ink{background:#efe7d8}
.gtint-workshop{background:#dcd7d0}
.gtint-acid{background:#ddf2ec}
.gtint-duotone{background:#ece9e2}
.gtint-ledger{background:#e2ebe0}
.gtint-minimal{background:#e0edf2}
.glabel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 4px 16px}
.glabel .nm{margin-right:auto}
.glabel .sec{background:rgba(13,13,18,.08);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.glabel .why{flex-basis:100%}

.gcard[class*=gtint-] .nm{color:#16191d}
.gcard[class*=gtint-] .sec{background:rgba(13,13,18,.1);color:#16191d}

/* in-preview nav items and CTAs are live on template.html (scroll or route) */
.preview-stage [role="link"]{cursor:pointer}
.preview-stage .tpl nav span[role="link"]:hover,.preview-stage .jnl[role="link"]:hover,.preview-stage .lonl[role="link"]:hover,.preview-stage .jflink[role="link"]:hover{opacity:.7}
.preview-stage .tcta[role="link"]:hover,.preview-stage .jfcta[role="link"]:hover{filter:brightness(1.08)}
.preview-stage [role="link"]:focus-visible{outline:2px solid currentColor;outline-offset:3px}