/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES — components used by everything except the homepage.
   ---------------------------------------------------------------------------
   Deliberately few. Every block here reuses the homepage's rules: hairline
   dividers rather than boxes, Clash for headings, one brown (#A3561F), and
   space doing the work that borders would otherwise do. Nothing new is
   introduced that the homepage does not already say.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── page hero ───────────────────────────────────────────────────────────*/
.mk-phero{ padding:88px 0 72px; }
.mk-phero__k{
  display:block; margin-bottom:18px;
  font-size:11.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:#A3561F;
}
.mk-phero__h{
  margin:0; font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(40px,5.4vw,76px); font-weight:600; line-height:.98;
  letter-spacing:-.03em; text-transform:uppercase; color:#1A1D21;
}
.mk-phero__lede{
  margin:24px 0 0; max-width:46ch;
  font-size:17px; line-height:1.62; color:#4A5A64;
}
.mk-phero__price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px;
  margin-top:30px; padding-top:24px;
  border-top:1px solid rgba(26,29,33,.14);
}
.mk-phero__fig{
  font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(30px,3.2vw,42px); font-weight:600; line-height:1;
  letter-spacing:-.03em; color:#A3561F;
}
.mk-phero__note{ font-size:14.5px; color:rgba(26,29,33,.62); }
.mk-phero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.mk-phero__shot{
  margin:0; line-height:0; border-radius:16px; overflow:hidden;
  background:rgba(26,29,33,.06); aspect-ratio:4/3;
}
.mk-phero__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:991px){
  .mk-phero{ padding:52px 0 44px; }
  .mk-phero__shot{ margin-top:38px; aspect-ratio:16/10; }
}

/* ── ghost button — the quiet half of every CTA pair ────────────────────*/
.mk-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:17px 30px; border-radius:999px;
  border:1px solid rgba(26,29,33,.24);
  background:transparent; color:#1A1D21!important;
  font-size:14.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none!important; line-height:1; white-space:nowrap;
  transition:background var(--mk-dur-fast,.32s) var(--mk-ease,ease),
             color var(--mk-dur-fast,.32s) var(--mk-ease,ease),
             border-color var(--mk-dur-fast,.32s) var(--mk-ease,ease),
             transform var(--mk-dur-fast,.32s) var(--mk-ease,ease);
}
.mk-btn-ghost:hover{
  background:#1A1D21; border-color:#1A1D21; color:#fff!important; transform:translateY(-2px);
}
.mk-btn-ghost--light{
  border-color:rgba(255,255,255,.34); color:#fff!important;
}
.mk-btn-ghost--light:hover{ background:#fff; border-color:#fff; color:#1A1D21!important; }

/* ── "what is included" — hairline cards, same as the pain grid ─────────*/
.mk-inc{ padding:92px 0 96px; }
.mk-inc__head{ max-width:62ch; margin-bottom:52px; }
.mk-inc__h{
  margin:0; font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(30px,3.4vw,50px); font-weight:600; line-height:1.04;
  letter-spacing:-.025em; color:#1A1D21;
}
.mk-inc__lede{ margin:18px 0 0; font-size:16.5px; line-height:1.62; color:#4A5A64; max-width:58ch; }
.mk-inc__card{
  height:100%; padding:26px 26px 26px 0;
  border-top:1px solid rgba(26,29,33,.18);
  position:relative;
}
.mk-inc__card::after{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:#A3561F; transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--mk-ease,ease);
}
.mk-inc__card:hover::after{ transform:scaleX(1); }
.mk-inc__t{
  margin:0 0 10px; font-size:19px; font-weight:700; color:#1A1D21;
  transition:color .3s ease;
}
.mk-inc__card:hover .mk-inc__t{ color:#A3561F; }
.mk-inc__d{ margin:0; font-size:15.5px; line-height:1.62; color:rgba(26,29,33,.66); }
@media (max-width:767px){
  .mk-inc{ padding:56px 0 58px; }
  .mk-inc__head{ margin-bottom:32px; }
  .mk-inc__card{ padding:22px 0; }
}

/* ── services grid ─────────────────────────────────────────────────────*/
.mk-svgrid{ padding:88px 0 96px; }
.mk-svgrid__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(26,29,33,.14);
  border:1px solid rgba(26,29,33,.14);
  border-radius:16px; overflow:hidden;
}
.mk-svcard{
  display:flex; flex-direction:column; gap:10px;
  padding:34px 30px 30px; min-height:250px;
  background:#F2F1EE; text-decoration:none!important;
  transition:background .4s var(--mk-ease,ease), transform .4s var(--mk-ease,ease);
}
.mk-svcard:hover{ background:#fff; }
.mk-svcard__k{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#A3561F;
}
.mk-svcard__t{
  font-family:var(--tp-ff-clash-semibold);
  font-size:23px; font-weight:600; letter-spacing:-.02em; color:#1A1D21; line-height:1.1;
}
.mk-svcard__d{ font-size:14.5px; line-height:1.55; color:rgba(26,29,33,.64); }
.mk-svcard__f{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mk-svcard__p{ font-size:14.5px; font-weight:700; color:#A3561F; }
.mk-svcard__a{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(26,29,33,.2); color:#1A1D21; font-size:15px;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--mk-ease,ease);
}
.mk-svcard:hover .mk-svcard__a{
  background:#A3561F; border-color:#A3561F; color:#fff; transform:translateX(4px);
}
@media (max-width:1199px){ .mk-svgrid__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){
  .mk-svgrid{ padding:52px 0 58px; }
  .mk-svgrid__grid{ grid-template-columns:1fr; }
  .mk-svcard{ min-height:0; padding:26px 22px; }
}

/* ── related services ──────────────────────────────────────────────────*/
.mk-rel{ padding:80px 0 88px; }
.mk-rel__head{ margin-bottom:34px; }
.mk-rel__h{
  margin:0; font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(24px,2.4vw,34px); font-weight:600; letter-spacing:-.02em; color:#1A1D21;
}
.mk-rel__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mk-rel__card{
  display:flex; flex-direction:column; gap:8px;
  padding:24px 24px 22px; border-radius:14px;
  border:1px solid rgba(26,29,33,.12);
  background:#fff; text-decoration:none!important;
  transition:transform .4s var(--mk-ease,ease), box-shadow .4s var(--mk-ease,ease), border-color .4s ease;
}
.mk-rel__card:hover{
  transform:translateY(-4px);
  border-color:rgba(163,86,31,.34);
  box-shadow:0 18px 40px -22px rgba(122,78,36,.3);
}
.mk-rel__t{ font-size:17px; font-weight:700; color:#1A1D21; }
.mk-rel__p{ font-size:14px; font-weight:600; color:#A3561F; }
@media (max-width:991px){ .mk-rel__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .mk-rel{ padding:52px 0 56px; } }

/* ── service-area list ─────────────────────────────────────────────────*/
.mk-alist{ padding:88px 0 92px; }
.mk-alist__head{ max-width:64ch; margin-bottom:44px; }
.mk-alist__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.mk-arow{
  display:flex; align-items:center; gap:18px;
  padding:20px 0;
  border-bottom:1px solid rgba(26,29,33,.12);
}
.mk-arow__n{ font-size:18px; font-weight:700; color:#1A1D21; flex:0 0 auto; min-width:9.5rem; }
.mk-arow__d{ font-size:14px; color:rgba(26,29,33,.58); flex:1 1 auto; }
.mk-arow__a{
  flex:0 0 auto; padding:8px 18px; border-radius:999px;
  border:1px solid rgba(163,86,31,.4);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#A3561F!important; text-decoration:none!important;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.mk-arow__a:hover{ background:#A3561F; border-color:#A3561F; color:#fff!important; }
@media (max-width:991px){ .mk-alist__grid{ grid-template-columns:1fr; gap:0; } }
@media (max-width:575px){
  .mk-alist{ padding:52px 0 56px; }
  .mk-arow{ flex-wrap:wrap; gap:6px 14px; }
  .mk-arow__d{ flex:1 1 100%; font-size:13px; order:3; }
  .mk-arow__a{ margin-left:auto; }
}

/* ── contact routes ────────────────────────────────────────────────────*/
.mk-cway{
  height:100%; padding:30px 28px 28px;
  border-top:2px solid rgba(26,29,33,.16);
  transition:border-color .4s ease;
}
.mk-cway:hover{ border-top-color:#A3561F; }
.mk-cway__k{
  display:block; margin-bottom:14px;
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#A3561F;
}
.mk-cway__t{
  margin:0 0 10px; font-family:var(--tp-ff-clash-semibold);
  font-size:26px; font-weight:600; letter-spacing:-.02em; color:#1A1D21;
}
.mk-cway__v{
  display:inline-block; margin-bottom:12px;
  font-size:20px; font-weight:700; color:#A3561F!important;
  text-decoration:none!important;
}
.mk-cway__v:hover{ text-decoration:underline!important; }
.mk-cway__d{ margin:0; font-size:15px; line-height:1.6; color:rgba(26,29,33,.64); }

/* ── CTA band ──────────────────────────────────────────────────────────*/
.mk-ctaband{ padding:0 0 96px; }
.mk-ctaband__in{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:28px;
  padding:52px 56px; border-radius:20px;
  background:#1A1D21;
}
.mk-ctaband__h{
  margin:0 0 8px; font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(26px,2.8vw,38px); font-weight:600; line-height:1.1;
  letter-spacing:-.02em; color:#fff;
}
.mk-ctaband__p{ margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.72); max-width:48ch; }
.mk-ctaband__btns{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:767px){
  .mk-ctaband{ padding:0 0 56px; }
  .mk-ctaband__in{ padding:34px 26px; }
  .mk-ctaband__btns{ width:100%; }
  .mk-ctaband__btns > *{ flex:1 1 100%; }
}

/* ── emergency band (leak page only) ───────────────────────────────────*/
.mk-urgentband{ padding:0 0 8px; }
.mk-urgentband__in{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
  padding:20px 26px; border-radius:14px;
  background:rgba(163,86,31,.08); border:1px solid rgba(163,86,31,.3);
}
.mk-urgentband__in strong{ font-size:16.5px; font-weight:800; color:#1A1D21; }
.mk-urgentband__in span{ font-size:15px; color:#4A5A64; }
.mk-urgentband__in a{
  margin-left:auto; padding:12px 24px; border-radius:999px;
  background:#A3561F; color:#fff!important;
  font-size:14.5px; font-weight:700; text-decoration:none!important; white-space:nowrap;
  transition:background .3s ease, transform .3s var(--mk-ease,ease);
}
.mk-urgentband__in a:hover{ background:#8B4718; transform:translateY(-2px); }
@media (max-width:575px){
  .mk-urgentband__in a{ margin-left:0; width:100%; text-align:center; }
}

/* ── offcanvas submenu ─────────────────────────────────────────────────
   The template appends its own toggle button and slideToggles .submenu, so
   this only has to set the resting state and the indent. */
.tp-offcanvas-menu nav ul li.has-dropdown > a{ position:relative; }
.tp-offcanvas-menu nav ul .submenu{
  display:none; padding:6px 0 10px 22px; margin:0; list-style:none;
  border-left:1px solid rgba(26,29,33,.16);
}
.tp-offcanvas-menu nav ul li.active > .submenu{ display:block; }
.tp-offcanvas-menu nav ul .submenu li a{
  font-size:16px!important; font-weight:500!important;
  line-height:1.9!important; text-transform:none!important;
  color:rgba(26,29,33,.72)!important;
  transition:color .25s ease, padding-left .25s var(--mk-ease,ease);
}
.tp-offcanvas-menu nav ul .submenu li a:hover{ color:#A3561F!important; padding-left:6px; }
.tp-offcanvas-menu nav ul li.is-active > a{ color:#A3561F!important; }
.tp-offcanvas-menu nav ul li button.tp-menu-close{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(26,29,33,.2); background:transparent; color:#1A1D21;
  cursor:pointer; padding:0;
}
.tp-offcanvas-menu nav ul li.active > button.tp-menu-close{ background:#A3561F; border-color:#A3561F; color:#fff; }

/* inner pages have no dark hero, so the transparent header needs a floor */
body:not(.mk-home) .tp-header-8-area{ background:#F2F1EE; }

/* .mk-btn-brand was written on the homepage as a modifier of the template's
   .tp-btn-black-solid, so on its own it had no box at all and collapsed to a
   circle. It has to stand alone now that inner pages use it directly. */
.mk-btn-brand{
  display:inline-flex; align-items:center; justify-content:center;
  padding:17px 32px; border-radius:999px;
  background:#A3561F; color:#fff!important;
  font-size:14.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none!important; line-height:1; white-space:nowrap;
  border:1px solid #A3561F;
  transition:background var(--mk-dur-fast,.32s) var(--mk-ease,ease),
             transform var(--mk-dur-fast,.32s) var(--mk-ease,ease),
             box-shadow var(--mk-dur-fast,.32s) var(--mk-ease,ease);
}
.mk-btn-brand:hover{ background:#8B4718; border-color:#8B4718; color:#fff!important; transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 27
   ═══════════════════════════════════════════════════════════════════════ */

/* ── page hero clearance ─────────────────────────────────────────────────
   The header is position:absolute at top 0 and 94px tall (91 on a phone),
   so a hero with 88px of padding put the eyebrow 5px under it on desktop
   and fully behind it on mobile. Measured, not guessed. */
.mk-phero{ padding-top:clamp(132px,10vw,172px)!important; }
@media (max-width:991px){ .mk-phero{ padding-top:126px!important; } }

/* ── "what is included" — a checklist that scrolls itself ───────────────*/
.mk-inc__head{ text-align:center; max-width:64ch; margin-left:auto; margin-right:auto; }
.mk-inc__viewport{
  overflow-x:auto; overflow-y:hidden;
  padding:0 max(24px,calc((100vw - 1330px) / 2)) 20px;
  scrollbar-width:thin; scrollbar-color:rgba(163,86,31,.4) rgba(26,29,33,.08);
  cursor:grab;
}
.mk-inc__viewport::-webkit-scrollbar{ height:5px; }
.mk-inc__viewport::-webkit-scrollbar-track{ background:rgba(26,29,33,.08); border-radius:3px; }
.mk-inc__viewport::-webkit-scrollbar-thumb{ background:rgba(163,86,31,.4); border-radius:3px; }
.mk-inc__viewport.is-grabbing{ cursor:grabbing; }
.mk-inc__track{
  display:flex; flex-wrap:nowrap; width:max-content; gap:34px;
  animation:mkIncScroll 46s linear infinite;
}
.mk-inc__viewport:hover .mk-inc__track,
.mk-inc__viewport:focus-within .mk-inc__track,
.mk-inc__viewport.is-grabbing .mk-inc__track{ animation-play-state:paused; }
@keyframes mkIncScroll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

.mk-inc__card{
  flex:0 0 auto;
  width:calc((min(1330px,100vw - 48px) - 68px) / 3);
  height:auto; padding:26px 26px 26px 0!important;
  border-top:1px solid rgba(26,29,33,.18);
  position:relative;
}
.mk-inc__n{
  display:inline-block; margin-right:10px;
  font-family:var(--tp-ff-clash-semibold);
  font-size:13px; font-weight:600; letter-spacing:.14em;
  color:rgba(26,29,33,.34); vertical-align:middle;
}
.mk-inc__tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(163,86,31,.12); color:#A3561F;
  vertical-align:middle;
}
.mk-inc__t{ margin:16px 0 10px!important; }
.mk-inc__d{ max-width:34ch; }
@media (max-width:991px){
  .mk-inc__card{ width:calc((min(1330px,100vw - 48px) - 34px) / 2); }
}
@media (max-width:767px){
  .mk-inc__track{ gap:24px; animation-duration:34s; }
  .mk-inc__card{ width:min(300px,78vw); padding:22px 0!important; }
  .mk-inc__viewport{ padding-left:24px; padding-right:24px; }
}
@media (prefers-reduced-motion:reduce){ .mk-inc__track{ animation:none; } }

/* ── coverage map ───────────────────────────────────────────────────────*/
.mk-map{ padding:88px 0 40px; }
.mk-map__head{ text-align:center; max-width:60ch; margin:0 auto 44px; }
.mk-map__wrap{ display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; }
.mk-map__stage{
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(26,29,33,.12);
  background:#EDEAE4;
}
.mk-map__svg{ display:block; width:100%; height:auto; }
.mk-map__grid line{ stroke:rgba(26,29,33,.055); stroke-width:1; }
.mk-map__ring{
  fill:none; stroke:#A3561F; stroke-width:1.6;
  stroke-dasharray:7 7; opacity:.55;
}
.mk-map__ring--in{ opacity:.3; stroke-dasharray:4 8; }
.mk-map__ringlabel{
  font-family:"Archivo",sans-serif; font-size:15px; font-weight:800;
  letter-spacing:.14em; fill:#A3561F; opacity:.6; text-anchor:middle;
}
.mk-map__yard circle{ fill:#1A1D21; }
.mk-map__yard text{
  font-family:"Archivo",sans-serif; font-size:15px; font-weight:800;
  letter-spacing:.06em; fill:#1A1D21; text-anchor:middle;
}
.mk-map__pin{ cursor:pointer; outline:none; }
.mk-map__halo{ fill:#A3561F; opacity:0; transition:opacity .3s var(--mk-ease,ease); }
.mk-map__dot{
  fill:#fff; stroke:#A3561F; stroke-width:2.6;
  transition:fill .3s ease, r .3s var(--mk-ease,ease);
}
.mk-map__label{
  font-family:"Archivo",sans-serif; font-size:16px; font-weight:700;
  fill:#1A1D21; text-anchor:middle; opacity:.75;
  transition:opacity .3s ease, font-size .3s ease;
  pointer-events:none;
}
.mk-map__pin--home .mk-map__dot{ fill:#A3561F; }
.mk-map__pin:hover .mk-map__halo,
.mk-map__pin:focus-visible .mk-map__halo,
.mk-map__pin.is-on .mk-map__halo{ opacity:.16; }
.mk-map__pin:hover .mk-map__dot,
.mk-map__pin:focus-visible .mk-map__dot,
.mk-map__pin.is-on .mk-map__dot{ fill:#A3561F; r:9; }
.mk-map__pin:hover .mk-map__label,
.mk-map__pin:focus-visible .mk-map__label,
.mk-map__pin.is-on .mk-map__label{ opacity:1; }
.mk-map__pin:focus-visible .mk-map__dot{ stroke:#1A1D21; stroke-width:3; }

.mk-map__side{ display:flex; flex-direction:column; }
.mk-map__sk{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#A3561F; margin-bottom:14px;
}
.mk-map__rows{ display:flex; flex-direction:column; max-height:560px; overflow-y:auto; }
.mk-map__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px; border:0; background:transparent; cursor:pointer;
  border-bottom:1px solid rgba(26,29,33,.1); text-align:left; width:100%;
  transition:background .25s ease, padding-left .25s var(--mk-ease,ease);
}
.mk-map__row:hover, .mk-map__row.is-on{ background:rgba(163,86,31,.08); padding-left:18px; }
.mk-map__rname{ font-size:15px; font-weight:600; color:#1A1D21; }
.mk-map__rmins{ font-size:13px; font-weight:700; color:#A3561F; white-space:nowrap; }
.mk-map__row--home .mk-map__rmins{ color:rgba(26,29,33,.5); }
.mk-map__note{
  margin:16px 0 0!important; font-size:12.5px; line-height:1.55;
  color:rgba(26,29,33,.5)!important;
}
@media (max-width:991px){
  .mk-map{ padding:56px 0 24px; }
  .mk-map__wrap{ grid-template-columns:1fr; }
  .mk-map__rows{ max-height:none; display:grid; grid-template-columns:1fr 1fr; }
  .mk-map__label{ font-size:20px; }
  .mk-map__ringlabel, .mk-map__yard text{ font-size:19px; }
}
@media (max-width:575px){
  .mk-map__rows{ grid-template-columns:1fr; }
  .mk-map__label{ font-size:24px; }
}

/* static variant of the included grid — used where the block is a list of
   reasons to read, not a checklist of inclusions to skim */
.mk-inc__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 40px;
}
.mk-inc__grid .mk-inc__card{ width:auto; padding:26px 26px 26px 0!important; }
@media (max-width:991px){ .mk-inc__grid{ grid-template-columns:repeat(2,1fr); gap:26px 30px; } }
@media (max-width:575px){ .mk-inc__grid{ grid-template-columns:1fr; gap:0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION RHYTHM — one scale, applied everywhere
   ---------------------------------------------------------------------------
   Audit found section padding at 80, 88, 92, 96, 104, 110 and 150px. None of
   it was wrong individually; together it read as drift. Two values now:

     --mk-sect       96px   sections on the beige ground
     --mk-sect-dark 104px   sections on ink or a photograph — they carry no
                            adjacent whitespace, so they need slightly more

   Deliberate exceptions, all of them pairings where two blocks are meant to
   read as one unit: testimonial->marquee->gallery, banner->pain, map->list,
   and the CTA band which hangs off the section above it.
   ═══════════════════════════════════════════════════════════════════════ */
:root{ --mk-sect:96px; --mk-sect-dark:104px; }

.mk-inc, .mk-svgrid, .mk-alist, .mk-area-section, .mk-lic{
  padding-top:var(--mk-sect)!important; padding-bottom:var(--mk-sect)!important;
}
.mk-rel{ padding-top:var(--mk-sect)!important; padding-bottom:var(--mk-sect)!important; }
.ar-about-area{ padding-top:var(--mk-sect)!important; padding-bottom:var(--mk-sect)!important; }
.ar-project-area{ padding-top:var(--mk-sect)!important; padding-bottom:var(--mk-sect)!important; }
.mk-faq-section, .mk-form-section, .mk-price-section{
  padding-top:var(--mk-sect-dark)!important; padding-bottom:var(--mk-sect-dark)!important;
}
.mk-phero{ padding-bottom:80px!important; }
.mk-map{ padding-top:var(--mk-sect)!important; padding-bottom:48px!important; }
.mk-alist{ padding-top:48px!important; }   /* pairs with the map above it */

@media (max-width:991px){
  :root{ --mk-sect:60px; --mk-sect-dark:64px; }
  .mk-phero{ padding-bottom:52px!important; }
  .mk-map{ padding-bottom:32px!important; }
  .mk-alist{ padding-top:32px!important; }
}
.mk-pain-section{ padding-bottom:var(--mk-sect,96px)!important; }

/* ── the job file — the one block that differs per service ──────────────*/
.mk-job{ padding:var(--mk-sect,96px) 0; background:#EDEAE4; }
.mk-job__head{ max-width:62ch; margin-bottom:44px; }
.mk-job__k{
  display:block; margin-bottom:14px;
  font-size:11.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:#A3561F;
}
.mk-job__h{
  margin:0; font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(28px,3.2vw,46px); font-weight:600; line-height:1.05;
  letter-spacing:-.025em; color:#1A1D21;
}
.mk-job__grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:44px; align-items:start; }
.mk-job__dl{ margin:0; }
.mk-job__row{
  display:grid; grid-template-columns:150px 1fr; gap:20px;
  padding:18px 0;
  border-top:1px solid rgba(26,29,33,.14);
}
.mk-job__row:last-child{ border-bottom:1px solid rgba(26,29,33,.14); }
.mk-job__row dt{
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,29,33,.5); padding-top:3px;
}
.mk-job__row dd{ margin:0; font-size:16px; line-height:1.6; color:#1A1D21; }
.mk-job__extra{
  margin:22px 0 0!important; padding-left:18px;
  border-left:3px solid #A3561F;
  font-size:15.5px!important; line-height:1.62!important; font-weight:600!important;
  color:#4A5A64!important;
}
.mk-job__side{ position:sticky; top:120px; }
.mk-job__shot{
  margin:0 0 16px; line-height:0; border-radius:14px; overflow:hidden;
  aspect-ratio:3/2; background:rgba(26,29,33,.06);
}
.mk-job__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.mk-job__facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(26,29,33,.14); border-radius:12px; overflow:hidden; }
.mk-job__facts > div{ background:#EDEAE4; padding:18px 20px; }
.mk-job__facts span{
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(26,29,33,.5);
}
.mk-job__facts b{
  font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(19px,1.8vw,25px); font-weight:600; letter-spacing:-.02em;
  color:#A3561F; line-height:1.1;
}
@media (max-width:991px){
  .mk-job__grid{ grid-template-columns:1fr; gap:32px; }
  .mk-job__side{ position:static; }
  .mk-job__head{ margin-bottom:30px; }
}
@media (max-width:575px){
  .mk-job__row{ grid-template-columns:1fr; gap:6px; padding:15px 0; }
  .mk-job__row dd{ font-size:15px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — every real control clears 44px on a touch device
   ---------------------------------------------------------------------------
   Found by the device sweep at 320/360/375/390/414/430: the area chips, the
   gallery arrows and the areas-list Call pill were all landing between 34 and
   38px. Apple's guidance is 44pt and Android's is 48dp; 44 is the floor here.
   Applied on (hover:none) only, so the desktop composition is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover:none), (max-width:1023px){
  .mk-sub{
    min-height:44px; display:inline-flex; align-items:center;
    padding:10px 18px!important;
  }
  .mk-arow__a{ min-height:44px; display:inline-flex; align-items:center; }
  .mk-map__row{ min-height:48px; }
  .mk-gal__nav{ width:44px!important; height:44px!important; }
  .mk-inc__viewport, .mk-pain-row{ scroll-padding-inline:24px; }
}
/* 12.5px was under the readable floor for a real sentence */
.mk-map__note{ font-size:13.5px!important; line-height:1.6!important; }
/* 44px at every width, not just touch. Touchscreen laptops report
   (hover:hover) and land in the 1024-1440 range, so gating this on a media
   query left a real gap. It costs nothing visually. */
.mk-sub, .mk-arow__a{
  min-height:44px!important; display:inline-flex!important; align-items:center;
}
.mk-gal__nav{ min-width:44px; min-height:44px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO GROUND — replaces the template's tiled hero-bg-shape.png
   ---------------------------------------------------------------------------
   The PNG was a 1.5KB tile that repeated into a soft, cloudy dot field. Two
   problems: it went blurry on any retina display because it was drawn at 1x,
   and the tile seams read as a haze rather than a pattern.

   This is the same idea done properly:
     · dots drawn as a radial-gradient — mathematically sharp at any DPI
     · a mask fades them out toward the edges, so there is no seam and no
       hard boundary against the beige
     · one very soft brand glow low-centre, behind the CTA, to give the hero
       depth without adding noise
   Zero bytes, zero requests, and it scales to a 5K display.
   ═══════════════════════════════════════════════════════════════════════ */
.mk-hero-grid{
  position:relative;
  isolation:isolate;
  background-image:none!important;   /* kill the inline data-background */
}
.mk-hero-grid::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:radial-gradient(circle at center, rgba(26,29,33,.14) 1px, transparent 1.6px);
  background-size:24px 24px;
  background-position:center;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 42%, #000 32%, rgba(0,0,0,.55) 62%, transparent 88%);
          mask-image:radial-gradient(120% 92% at 50% 42%, #000 32%, rgba(0,0,0,.55) 62%, transparent 88%);
  pointer-events:none;
}
/* the glow. Kept under 6% so it reads as light rather than as a colour wash */
.mk-hero-grid::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(58% 46% at 50% 88%, rgba(163,86,31,.055), transparent 70%),
    radial-gradient(70% 55% at 50% 8%,  rgba(255,255,255,.55), transparent 72%);
  pointer-events:none;
}
@media (max-width:767px){
  .mk-hero-grid::before{ background-size:18px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — round 29. Every item here was found on a real iPhone, not in the
   headless sweep. Worth recording why the sweep missed them:

     · My overflow check is scrollWidth - clientWidth. That is ZERO when
       content sits flush against the viewport edge with no gutter, so
       "correct" and "touching the glass" looked identical to it. 343 nodes
       across all 13 pages were flush. A gutter check is now in tools/.
     · The services accordion is a desktop-only layout that never collapsed;
       four 25%-wide panels on a 393px screen is unreadable.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. THE GUTTER. Nothing touches the edge of the glass, ever. ─────────*/
:root{ --mk-gutter:22px; }
@media (max-width:575px){ :root{ --mk-gutter:20px; } }

@media (max-width:1023px){
  .container,
  .container-1330, .container-1430, .container-1750, .container-fluid,
  .container-1200, .container-1400{
    padding-left:max(var(--mk-gutter), env(safe-area-inset-left))!important;
    padding-right:max(var(--mk-gutter), env(safe-area-inset-right))!important;
    width:100%!important; max-width:100%!important;
  }
  /* bootstrap rows pull children back out past that padding with negative
     margins — that is what put the checkmarks and the button on the edge */
  .container > .row, .container-1330 > .row, .container-1430 > .row,
  .container-1750 > .row, .container-fluid > .row{
    margin-left:0!important; margin-right:0!important;
  }
  .container > .row > [class*="col-"],
  .container-1330 > .row > [class*="col-"],
  .container-1430 > .row > [class*="col-"],
  .container-1750 > .row > [class*="col-"],
  .container-fluid > .row > [class*="col-"]{
    padding-left:0!important; padding-right:0!important;
  }
  /* full-bleed by design — these get their inset from their own padding */
  .mk-inc__viewport{ padding-left:var(--mk-gutter)!important; padding-right:var(--mk-gutter)!important; }
  .mk-pain-row{ padding-left:0!important; padding-right:0!important; }
}

/* ── 2. SS#1 the roof-type accordion had no mobile layout ───────────────
   On desktop it is four vertical panels that expand on hover. On a phone
   there is no hover and no width, so it rendered as four overlapping 25%
   columns with clipped text. Below 1024 it becomes a simple stack: image,
   heading, copy, price — one card per roof type. */
@media (max-width:1023px){
  .ar-service-area{
    display:block!important; height:auto!important; min-height:0!important;
    padding:0 0 8px!important;
  }
  .ar-service-title-box{
    position:static!important; margin:0 0 26px!important;
    padding:0 var(--mk-gutter);
  }
  .ar-service-title-box::before{ display:none!important; }
  .ar-service-title-box .tp-section-title-clash-600{
    color:#1A1D21!important; text-shadow:none!important;
    font-size:clamp(32px,9vw,44px)!important;
  }
  .ar-service-item{
    display:block!important; width:auto!important; height:auto!important;
    flex:none!important; position:relative!important;
    margin:0 var(--mk-gutter) 16px!important;
    border-radius:16px; overflow:hidden;
    min-height:0!important;
  }
  .ar-service-item::after{
    background:linear-gradient(180deg,rgba(15,17,19,.20) 0%,rgba(15,17,19,.86) 100%)!important;
    opacity:1!important;
  }
  .ar-service-item .ar-service-bg{
    position:absolute!important; inset:0!important; opacity:1!important;
  }
  /* the rotated label is a desktop device — the card has a real heading now */
  .ar-service-item .ar-service-title{ display:none!important; }
  .ar-service-item .mk-svc__body{
    position:relative!important; opacity:1!important; transform:none!important;
    padding:190px 22px 24px!important; max-width:none!important;
  }
  .mk-svc__t{ font-size:26px!important; }
  .mk-svc__d{ font-size:15px!important; line-height:1.6!important; max-width:34ch; }
  .mk-svc__p{ margin-top:16px; }
}

/* ── 3. SS#3 header — logo left, menu right, both off the edge ──────────*/
@media (max-width:767px){
  .tp-header-8-wrapper{
    padding-left:0!important; padding-right:0!important;
    gap:12px;
  }
  .tp-header-8-left{ order:3!important; margin-left:auto; }
  .tp-header-8-middle{ order:1!important; margin-right:auto; }
  .tp-header-8-right{ order:2!important; }
  .tp-header-logo{ text-align:left!important; }
  .tp-header-8-middle .mk-logo-word{ font-size:22px!important; }
}

/* ── 4. SS#3 hero heading: four lines, "in Woodland" kept together ──────*/
.mk-h1-loc{ white-space:nowrap; }
@media (max-width:767px){
  .ar-hero-title{
    font-size:clamp(34px,10.2vw,48px)!important;
    line-height:1.04!important;
    letter-spacing:-.02em!important;
  }
}

/* ── 5. the review bar had a mask fading both ends into the background ──
   Removed: it read as a cloudy smear on a phone where the bar is only a
   few cards wide. A hard edge is cleaner and the motion still reads. */
.mk-credbar__row{
  -webkit-mask-image:none!important;
          mask-image:none!important;
}
/* the last four: the parallax banner image is intentionally full-bleed, and
   the credential cards live inside the marquee track which sets its own
   inset — but the track's first card was starting at 0 */
@media (max-width:1023px){
  .mk-lic__track{ padding-left:var(--mk-gutter); padding-right:var(--mk-gutter); }
  .mk-lic__track .mk-lic__card{ margin:0 7px; }
}
/* the stacked cards showed a dark block where the photo should be: the
   template sizes .ar-service-bg for its desktop panel, so in the new stacked
   context it had no cover/position and painted nothing */
@media (max-width:1023px){
  .ar-service-item .ar-service-bg{
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    width:100%!important; height:100%!important;
    transform:none!important;
  }
  .ar-service-item{ min-height:340px!important; }
}
/* MEASURED: .ar-service-bg computes to z-index:-2. In the desktop panel that
   is fine because nothing paints behind it. In the stacked mobile card the
   item is the stacking context, so -2 put the photo behind the card's own
   background and it rendered as a dark block. Restack the three layers
   explicitly: photo 0, scrim 1, copy 2. */
@media (max-width:1023px){
  .ar-service-item{ isolation:isolate; }
  .ar-service-item .ar-service-bg{ z-index:0!important; }
  .ar-service-item::after{ z-index:1!important; }
  .ar-service-item .mk-svc__body{ z-index:2!important; }
}
/* The photo was rendering all along — these are dark shingle roofs and the
   scrim started at 20% from the very top, so the card read as a black block.
   Keep the image clear where there is no text and only darken the lower
   third where the copy actually sits. */
@media (max-width:1023px){
  .ar-service-item::after{
    background:linear-gradient(180deg,
      rgba(15,17,19,0) 0%,
      rgba(15,17,19,.06) 34%,
      rgba(15,17,19,.72) 62%,
      rgba(15,17,19,.93) 100%)!important;
  }
  .ar-service-item .ar-service-bg{ opacity:1!important; filter:none!important; }
  .ar-service-item .mk-svc__body{ padding-top:210px!important; }
}
/* MEASURED, third attempt: with the scrim removed the card top still sampled
   exactly #1A1D21, so nothing was wrong with the photo — .mk-svc__body sits
   at z-index 2 with its own solid dark background and 210px of top padding,
   which painted a block straight over the image. */
@media (max-width:1023px){
  .ar-service-item .mk-svc__body{
    background:transparent!important;
    background-color:transparent!important;
  }
}