/* ============================================================
   TrueDrive Core — contractor site base
   One stylesheet. No framework. Theme by variables only.
   Prefix: mk-   ·   Never td-
   ============================================================ */

/* ---------- 1 · theme tokens — the only thing you edit per trade ---------- */
:root{
  /* brand */
  --mk-deep:      #0B2B36;   /* darkest — hero, footer            */
  --mk-brand:     #0E6E8C;   /* primary — headings on light, links */
  --mk-accent:    #17B4C4;   /* secondary — rules, icons           */
  --mk-cta:       #A3561F;   /* the button. warm = complementary   */
  --mk-cta-ink:   #ffffff;

  /* neutrals */
  --mk-ink:       #12222B;
  --mk-ink-2:     #4A5C66;
  --mk-line:      #E2EAEF;
  --mk-surface:   #ffffff;
  --mk-surface-2: #F4F8FA;

  /* type */
  --mk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --mk-h1: clamp(2.15rem, 1.35rem + 3.6vw, 4.4rem);
  --mk-h2: clamp(1.65rem, 1.15rem + 2.1vw, 2.9rem);
  --mk-h3: clamp(1.12rem, .98rem + .6vw, 1.4rem);

  /* system */
  --mk-max: 1200px;
  --mk-pad: clamp(1rem, .55rem + 2vw, 2.5rem);
  --mk-gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --mk-sect: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --mk-r: 14px;
  --mk-ease: cubic-bezier(.22,.61,.36,1);
  --mk-shadow: 0 12px 32px rgba(11,43,54,.09);
}

/* ---------- 2 · reset ---------- */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--mk-font);color:var(--mk-ink);background:var(--mk-surface);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.08;letter-spacing:-.028em;font-weight:800}
h1{font-size:var(--mk-h1)} h2{font-size:var(--mk-h2)} h3{font-size:var(--mk-h3);letter-spacing:-.015em}
p{margin:0 0 1em} ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--mk-accent);outline-offset:3px;border-radius:4px}

/* ---------- 3 · layout ---------- */
.mk-wrap{width:100%;max-width:var(--mk-max);margin-inline:auto;padding-inline:var(--mk-pad)}
.mk-sect{padding-block:var(--mk-sect)}
.mk-sect--alt{background:var(--mk-surface-2)}
.mk-sect--deep{background:var(--mk-deep);color:#fff}
.mk-sect--deep h2,.mk-sect--deep h3{color:#fff}
.mk-grid{display:grid;gap:var(--mk-gap)}
.mk-g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.mk-g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.mk-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mk-brand);margin-bottom:.9rem}
.mk-eyebrow::before{content:"";width:22px;height:2px;background:var(--mk-accent)}
.mk-sect--deep .mk-eyebrow{color:var(--mk-accent)}
.mk-lede{font-size:1.12rem;color:var(--mk-ink-2);max-width:60ch}
.mk-sect--deep .mk-lede{color:rgba(255,255,255,.76)}
.mk-head{max-width:62ch;margin-bottom:clamp(2rem,1.2rem + 2vw,3.2rem)}

/* ---------- 4 · buttons — 48px minimum, always ---------- */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.6rem;border:2px solid transparent;border-radius:999px;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .25s var(--mk-ease),background .25s,border-color .25s,color .25s}
.mk-btn:hover{transform:translateY(-2px)}
.mk-btn--cta{background:var(--mk-cta);color:var(--mk-cta-ink)}
.mk-btn--cta:hover{background:#A3561F}
.mk-btn--ghost{border-color:currentColor}
.mk-btn--ghost:hover{background:currentColor;color:var(--mk-deep)}
.mk-btn--lg{min-height:58px;padding:1rem 2rem;font-size:1.06rem}
.mk-btn svg{flex:0 0 auto}

/* ---------- 5 · top bar + header ---------- */
.mk-topbar{background:var(--mk-deep);color:rgba(255,255,255,.82);font-size:.86rem}
.mk-topbar .mk-wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;
  justify-content:space-between;padding-block:.6rem}
.mk-topbar b{color:#fff}
.mk-topbar span{display:inline-flex;align-items:center;gap:.45rem}
.mk-dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;flex:0 0 7px}

.mk-header{position:sticky;top:0;z-index:60;background:var(--mk-surface);
  border-bottom:1px solid var(--mk-line);transition:box-shadow .3s}
.mk-header.is-stuck{box-shadow:0 6px 22px rgba(11,43,54,.08)}
.mk-header .mk-wrap{display:flex;align-items:center;gap:var(--mk-gap);
  justify-content:space-between;min-height:76px}
.mk-logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.16rem;
  letter-spacing:-.03em;color:var(--mk-deep);line-height:1.1}
.mk-logo img{width:auto;height:38px}
.mk-nav{display:flex;align-items:center;gap:.35rem}
.mk-nav a{padding:.6rem .85rem;border-radius:8px;font-weight:600;font-size:.97rem;
  color:var(--mk-ink-2);transition:color .2s,background .2s}
.mk-nav a:hover,.mk-nav a[aria-current="page"]{color:var(--mk-brand);background:var(--mk-surface-2)}
.mk-header .mk-btn{min-height:46px;padding:.6rem 1.15rem;font-size:.95rem}
.mk-burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;
  border:1px solid var(--mk-line);border-radius:10px;background:none;cursor:pointer}
.mk-burger span{display:block;width:20px;height:2px;background:var(--mk-ink);position:relative}
.mk-burger span::before,.mk-burger span::after{content:"";position:absolute;left:0;width:20px;
  height:2px;background:var(--mk-ink);transition:transform .3s var(--mk-ease)}
.mk-burger span::before{top:-6px} .mk-burger span::after{top:6px}
.mk-burger[aria-expanded="true"] span{background:transparent}
.mk-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.mk-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- 6 · hero — type-led, one photo ---------- */
.mk-hero{position:relative;background:var(--mk-deep);color:#fff;overflow:hidden}
.mk-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 12%,rgba(23,180,196,.20),transparent 60%)}
.mk-hero .mk-wrap{position:relative;z-index:2;display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem);
  grid-template-columns:1.15fr .85fr;align-items:center;
  padding-block:clamp(3rem,1.8rem + 5vw,6rem)}
.mk-hero h1{color:#fff;max-width:16ch}
.mk-hero h1 em{font-style:normal;color:var(--mk-accent)}
.mk-hero__lede{font-size:1.16rem;color:rgba(255,255,255,.8);max-width:52ch;margin-bottom:1.7rem}
.mk-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.mk-hero__ticks{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;font-size:.95rem;
  color:rgba(255,255,255,.78)}
.mk-hero__ticks li{display:flex;align-items:center;gap:.5rem}
.mk-hero__ticks svg{color:var(--mk-accent);flex:0 0 auto}
.mk-hero__media{position:relative;border-radius:var(--mk-r);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.34);aspect-ratio:4/5}
.mk-hero__media img{width:100%;height:100%;object-fit:cover}
.mk-hero__badge{position:absolute;left:1rem;bottom:1rem;right:1rem;
  background:rgba(255,255,255,.96);color:var(--mk-ink);border-radius:10px;
  padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem;font-size:.92rem}
.mk-hero__badge b{display:block;font-size:1.5rem;line-height:1;color:var(--mk-brand)}

/* ---------- 7 · credentials strip ---------- */
.mk-creds{background:var(--mk-surface-2);border-block:1px solid var(--mk-line)}
.mk-creds ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px;background:var(--mk-line)}
.mk-creds li{background:var(--mk-surface-2);padding:1.15rem var(--mk-pad);
  display:flex;align-items:center;gap:.75rem}
.mk-creds svg{color:var(--mk-brand);flex:0 0 auto}
.mk-creds b{display:block;font-size:.97rem;line-height:1.25}
.mk-creds small{color:var(--mk-ink-2);font-size:.84rem}

/* ---------- 8 · service cards ---------- */
.mk-card{background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:var(--mk-r);
  padding:1.75rem 1.5rem;display:flex;flex-direction:column;height:100%;
  transition:transform .35s var(--mk-ease),border-color .35s,box-shadow .35s}
.mk-card:hover{transform:translateY(-5px);border-color:var(--mk-accent);box-shadow:var(--mk-shadow)}
.mk-card__ico{width:52px;height:52px;border-radius:12px;background:var(--mk-surface-2);
  color:var(--mk-brand);display:grid;place-items:center;margin-bottom:1.1rem}
.mk-card h3{margin-bottom:.45rem}
.mk-card p{color:var(--mk-ink-2);font-size:.98rem;margin-bottom:1rem}
.mk-card__link{margin-top:auto;font-weight:700;color:var(--mk-brand);display:inline-flex;
  align-items:center;gap:.4rem;min-height:32px}
.mk-card__link::after{content:"→";transition:transform .3s var(--mk-ease)}
.mk-card:hover .mk-card__link::after{transform:translateX(4px)}
.mk-card__price{font-size:.9rem;font-weight:700;color:var(--mk-ink);margin-bottom:.7rem}

/* ---------- 9 · before / after ---------- */
.mk-ba{position:relative;border-radius:var(--mk-r);overflow:hidden;aspect-ratio:16/10;
  user-select:none;touch-action:pan-y;cursor:ew-resize;background:var(--mk-surface-2)}
.mk-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-ba__after{clip-path:inset(0 0 0 var(--mk-split,50%))}
.mk-ba__bar{position:absolute;top:0;bottom:0;left:var(--mk-split,50%);width:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.14);transform:translateX(-50%)}
.mk-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);font-size:.8rem;color:var(--mk-ink)}
.mk-ba__tag{position:absolute;top:.8rem;padding:.3rem .7rem;border-radius:999px;
  background:rgba(11,43,54,.8);color:#fff;font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.mk-ba__tag--b{left:.8rem} .mk-ba__tag--a{right:.8rem;background:var(--mk-brand)}

/* ---------- 10 · price block ---------- */
.mk-price{border:2px solid var(--mk-brand);border-radius:var(--mk-r);padding:2rem 1.75rem;
  background:var(--mk-surface);text-align:center}
.mk-price__n{font-size:clamp(2.6rem,1.8rem + 3vw,3.8rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--mk-brand)}
.mk-price__n small{font-size:1rem;font-weight:600;color:var(--mk-ink-2);letter-spacing:0}
.mk-price ul{text-align:left;margin:1.4rem 0;display:grid;gap:.6rem}
.mk-price li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.mk-price li svg{color:var(--mk-brand);flex:0 0 auto;margin-top:.2rem}

/* ---------- 11 · steps ---------- */
.mk-step{position:relative;padding-left:4.25rem;padding-block:1.4rem}
.mk-step__n{position:absolute;left:0;top:1.4rem;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;
  background:var(--mk-brand);color:#fff}
.mk-sect--deep .mk-step__n{background:var(--mk-accent);color:var(--mk-deep)}
.mk-step + .mk-step{border-top:1px solid var(--mk-line)}
.mk-sect--deep .mk-step + .mk-step{border-top-color:rgba(255,255,255,.14)}
.mk-step h3{margin-bottom:.3rem}
.mk-step p{margin:0;color:var(--mk-ink-2)}
.mk-sect--deep .mk-step p{color:rgba(255,255,255,.72)}

/* ---------- 12 · stats ---------- */
.mk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:var(--mk-gap)}
.mk-stat b{display:block;font-size:clamp(2.1rem,1.5rem + 2.2vw,3.1rem);font-weight:800;
  line-height:1;letter-spacing:-.04em;color:var(--mk-accent)}
.mk-stat span{font-size:.94rem;color:rgba(255,255,255,.72)}

/* ---------- 13 · service area ---------- */
.mk-areas{display:flex;flex-wrap:wrap;gap:.6rem}
.mk-areas li a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;
  border:1px solid var(--mk-line);border-radius:999px;font-weight:600;font-size:.95rem;
  background:var(--mk-surface);transition:.25s var(--mk-ease)}
.mk-areas li a:hover{border-color:var(--mk-brand);color:var(--mk-brand);transform:translateY(-2px)}

/* ---------- 14 · reviews — honest placeholder ---------- */
.mk-review-none{border:2px dashed var(--mk-line);border-radius:var(--mk-r);
  padding:2.25rem 1.75rem;text-align:center;color:var(--mk-ink-2)}
.mk-review-none b{display:block;color:var(--mk-ink);font-size:1.1rem;margin-bottom:.35rem}

/* ---------- 15 · FAQ ---------- */
.mk-faq{border-top:1px solid var(--mk-line)}
.mk-faq details{border-bottom:1px solid var(--mk-line)}
.mk-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1.25rem 0;font-weight:700;font-size:1.05rem;min-height:56px}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--mk-brand);
  transition:transform .3s var(--mk-ease);flex:0 0 auto}
.mk-faq details[open] summary::after{transform:rotate(45deg)}
.mk-faq p{color:var(--mk-ink-2);padding-bottom:1.35rem;margin:0;max-width:70ch}

/* ---------- 16 · form ---------- */
.mk-form{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.mk-field{display:grid;gap:.4rem}
.mk-field--full{grid-column:1/-1}
.mk-field label{font-size:.9rem;font-weight:600}
.mk-field input,.mk-field select,.mk-field textarea{
  font-size:16px;                       /* 16px stops iOS zooming on focus */
  min-height:52px;padding:.8rem .95rem;border:1px solid var(--mk-line);border-radius:10px;
  background:var(--mk-surface);width:100%;transition:border-color .2s,box-shadow .2s}
.mk-field textarea{min-height:120px;resize:vertical}
.mk-field input:focus,.mk-field select:focus,.mk-field textarea:focus{
  outline:none;border-color:var(--mk-brand);box-shadow:0 0 0 3px rgba(14,110,140,.14)}
.mk-hp{position:absolute;left:-9999px}
.mk-form__note{grid-column:1/-1;font-size:.88rem;color:var(--mk-ink-2);margin:0}

/* ---------- 17 · footer ---------- */
.mk-footer{background:var(--mk-deep);color:rgba(255,255,255,.72);padding-block:var(--mk-sect) 0}
.mk-footer h4{color:#fff;font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:1rem}
.mk-footer a:hover{color:#fff}
.mk-footer li{margin-bottom:.55rem}
.mk-footer__bar{border-top:1px solid rgba(255,255,255,.13);margin-top:var(--mk-gap);
  padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.87rem}

/* ---------- 18 · sticky mobile call bar ---------- */
.mk-callbar{display:none}
@media (max-width:900px){
  .mk-callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:80;background:rgba(11,43,54,.97);backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.14);padding-bottom:env(safe-area-inset-bottom)}
  .mk-callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:58px;font-weight:700;color:#fff;font-size:1rem}
  .mk-callbar a+a{background:var(--mk-cta)}
  body{padding-bottom:0}
  .mk-footer__bar{padding-bottom:5.5rem}
}

/* ---------- 19 · motion — enhancement only, never hides by default ---------- */
.mk-rise{opacity:1;transform:none}
html.mk-js .mk-rise{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--mk-ease),transform .7s var(--mk-ease)}
html.mk-js .mk-rise.is-in{opacity:1;transform:none}
html.mk-js .mk-rise:nth-child(2){transition-delay:.08s}
html.mk-js .mk-rise:nth-child(3){transition-delay:.16s}
html.mk-js .mk-rise:nth-child(4){transition-delay:.24s}
html.mk-js .mk-rise:nth-child(5){transition-delay:.32s}
html.mk-js .mk-rise:nth-child(6){transition-delay:.40s}

/* ---------- 20 · responsive ---------- */
@media (max-width:1024px){
  .mk-hero .mk-wrap{grid-template-columns:1fr}
  .mk-hero__media{aspect-ratio:16/10;max-height:380px}
}
@media (max-width:900px){
  .mk-nav{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;
    background:var(--mk-surface);border-bottom:1px solid var(--mk-line);padding:1rem var(--mk-pad) 1.5rem;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.28s var(--mk-ease);gap:.15rem}
  .mk-nav.is-open{transform:none;opacity:1;visibility:visible}
  .mk-nav a{padding:.9rem .8rem;font-size:1.05rem;min-height:52px;display:flex;align-items:center}
  .mk-burger{display:flex}
  .mk-header .mk-btn{display:none}
  .mk-topbar .mk-wrap{justify-content:center;text-align:center}
  .mk-topbar span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.mk-js .mk-rise{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
@media print{ .mk-callbar,.mk-burger,.mk-header{display:none} }

/* ---------- 21 · fixes from the first real look ---------- */

/* hero photo was clipping flat against the credentials strip */
.mk-hero .mk-wrap{padding-bottom:clamp(3.5rem,2rem + 5vw,6.5rem)}
.mk-hero__media{align-self:stretch;max-height:none}
@media (min-width:1025px){ .mk-hero__media{aspect-ratio:4/4.6} }

/* select needs its own arrow — it rendered as a blank box */
.mk-field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234A5C66' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}

/* form column facts — stops the left side reading as dead space */
.mk-formfacts{margin-top:2rem;display:grid;gap:.9rem;border-top:1px solid rgba(255,255,255,.14);
  padding-top:1.6rem}
.mk-formfacts li{color:rgba(255,255,255,.72);font-size:.99rem}
.mk-formfacts b{color:#fff}

/* price figure was getting lost */
.mk-price__n{margin-block:.3rem .2rem}

/* ============================================================
   22 · SIGNATURE — display type, marquee, service rows
   ============================================================ */
:root{
  --mk-display: "Anton", "Archivo", Impact, var(--mk-font);
  --mk-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

/* ---- oversized display type ---- */
.mk-display{font-family:var(--mk-display);font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.86}
.mk-hero .mk-display{font-size:clamp(3.2rem,1.2rem + 9.5vw,9rem);margin:0 0 1.1rem;max-width:none}
.mk-display--h2{font-size:clamp(2.2rem,1.2rem + 4.6vw,5.2rem);line-height:.9;margin-bottom:.35em}

/* line-by-line reveal — the signature move */
.mk-line{display:block;overflow:hidden}
.mk-line > span{display:block}
html.mk-js .mk-line > span{transform:translateY(105%);
  transition:transform .95s cubic-bezier(.16,.84,.28,1)}
html.mk-js .mk-hero.is-in .mk-line > span{transform:none}
html.mk-js .mk-hero.is-in .mk-line:nth-child(2) > span{transition-delay:.1s}

/* ---- marquee — cheap, striking, and it IS the local proof ---- */
.mk-marq{background:var(--mk-cta);color:#fff;overflow:hidden;padding-block:.85rem;
  border-block:1px solid rgba(0,0,0,.08)}
.mk-marq__row{display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:mkScroll 34s linear infinite}
.mk-marq span{font-family:var(--mk-display);text-transform:uppercase;
  font-size:clamp(1.05rem,.8rem + .9vw,1.7rem);letter-spacing:.01em;white-space:nowrap}
.mk-marq i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6;flex:0 0 7px}
@keyframes mkScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mk-marq:hover .mk-marq__row{animation-play-state:paused}

/* ---- service rows — big, numbered, they open on hover ---- */
.mk-rows{border-top:1px solid var(--mk-line)}
.mk-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(.9rem,.4rem + 1.6vw,2.2rem);
  padding:clamp(1.3rem,.9rem + 1.2vw,2.1rem) .25rem;
  border-bottom:1px solid var(--mk-line);position:relative;isolation:isolate;
  transition:padding-left .45s var(--mk-ease),color .35s}
.mk-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mk-deep);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--mk-ease)}
.mk-row:hover{padding-left:1.5rem;color:#fff}
.mk-row:hover::before{transform:scaleY(1);transform-origin:top}
.mk-row__n{font-family:var(--mk-display);font-size:clamp(.95rem,.85rem + .3vw,1.15rem);
  color:var(--mk-accent);letter-spacing:.06em}
.mk-row__t{font-family:var(--mk-display);text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 2.4vw,3.1rem);line-height:.95;letter-spacing:-.01em}
.mk-row__d{color:var(--mk-ink-2);font-size:.98rem;max-width:34ch;
  display:none;transition:color .35s}
.mk-row:hover .mk-row__d{color:rgba(255,255,255,.72)}
.mk-row__p{font-weight:700;font-size:.98rem;white-space:nowrap}
.mk-row__a{font-size:1.5rem;opacity:.35;transition:transform .45s var(--mk-ease),opacity .35s}
.mk-row:hover .mk-row__a{opacity:1;transform:translateX(6px)}
@media (min-width:900px){ .mk-row__d{display:block} }

/* section headings sit tighter under the new display face */
.mk-head .mk-eyebrow{margin-bottom:1.1rem}
.mk-hero__lede{font-size:1.18rem}

/* stats and price get the display face too */
.mk-stat b,.mk-price__n{font-family:var(--mk-display);font-weight:400;letter-spacing:-.01em}

@media (max-width:900px){
  .mk-row{grid-template-columns:auto 1fr auto;gap:.9rem}
  .mk-row__p{grid-column:2/3;font-size:.9rem;color:var(--mk-ink-2)}
  .mk-row:hover{padding-left:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .mk-marq__row{animation:none}
  html.mk-js .mk-line > span{transform:none!important}
}

/* ---------- 23 · service rows: correct the grid ---------- */
.mk-row{grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.15fr) auto auto!important;
  align-items:baseline!important}
.mk-row__n{align-self:center}
.mk-row__t{font-size:clamp(1.6rem,1rem + 2.6vw,3.4rem)!important;align-self:center}
.mk-row__d{align-self:center;font-size:1rem;max-width:40ch}
.mk-row__p{align-self:center;font-family:var(--mk-display);font-weight:400;
  font-size:clamp(1rem,.85rem + .5vw,1.35rem);letter-spacing:.01em;text-transform:uppercase}
.mk-row__a{align-self:center;font-size:1.7rem;line-height:1}
.mk-rows{border-top:2px solid var(--mk-ink)}
.mk-row{border-bottom:1px solid var(--mk-line)}
@media (max-width:900px){
  .mk-row{grid-template-columns:auto 1fr auto!important;
    grid-template-areas:"n t a" ". p a"!important;row-gap:.25rem}
  .mk-row__n{grid-area:n} .mk-row__t{grid-area:t} .mk-row__a{grid-area:a}
  .mk-row__p{grid-area:p} .mk-row__d{display:none}
}

/* ---------- 24 · hero display lines were clipping ---------- */
.mk-line{overflow:hidden;padding-block:.06em .14em;margin-block:-.06em -.14em}
.mk-hero .mk-display{line-height:.92}
html.mk-js .mk-hero .mk-line > span{transform:translateY(110%)}
html.mk-js .mk-hero.is-in .mk-line > span{transform:translateY(0)}
/* safety: if the reveal class never lands, show the text anyway */
html.mk-js .mk-hero .mk-line > span{animation:mkLineFail 0s linear 2.2s forwards}
@keyframes mkLineFail{ to{transform:translateY(0)} }

/* ---------- 25 · hero: let the type dominate ---------- */
body .mk-hero--big .mk-wrap{grid-template-columns:1fr;gap:2.2rem}
body .mk-hero--big .mk-display{
  font-size:clamp(3.4rem,1rem + 12vw,11rem)!important;
  line-height:.84!important;max-width:none!important;margin-bottom:.35em}
body .mk-hero--big h1{max-width:none}
body .mk-hero--big .mk-hero__lede{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);max-width:46ch}
/* photo becomes a wide band under the type, not a tall card beside it */
body .mk-hero--big .mk-hero__media{aspect-ratio:21/7;max-height:340px;margin-top:.6rem}
body .mk-hero--big .mk-hero__badge{left:auto;right:1.2rem;bottom:1.2rem;width:max-content}
@media (max-width:700px){
  body .mk-hero--big .mk-hero__media{aspect-ratio:16/10;max-height:none}
}

/* ---------- 26 · service rows: force the scale ---------- */
body .mk-rows .mk-row__t{font-size:clamp(1.7rem,1rem + 2.9vw,3.6rem)!important;
  font-family:var(--mk-display)!important;line-height:.95!important}
body .mk-rows .mk-row__n{font-size:clamp(.9rem,.8rem + .35vw,1.2rem)!important}
body .mk-rows .mk-row{padding-block:clamp(1.1rem,.7rem + 1.3vw,1.9rem)!important}

/* ---------- 27 · display headings must not overflow their column ---------- */
.mk-display--h2{overflow-wrap:break-word;hyphens:none;max-width:100%}
.mk-grid .mk-display--h2{font-size:clamp(1.9rem, 1rem + 3.2vw, 3.6rem)}
.mk-hero--big .mk-display{overflow-wrap:break-word}

/* ============================================================
   28 · THE 9 PASS — depth, rhythm, and one signature per screen
   ============================================================ */

/* --- hero: photo becomes the field, type sits on it --- */
.mk-hero--bleed{background-image:
    linear-gradient(180deg,rgba(11,43,54,.62) 0%,rgba(11,43,54,.78) 55%,rgba(11,43,54,.96) 100%),
    var(--mk-hero-img);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.mk-hero--bleed::after{background:
  radial-gradient(90% 70% at 78% 8%,rgba(23,180,196,.22),transparent 62%)}
.mk-hero--bleed .mk-hero__media{display:none}
.mk-hero--bleed .mk-wrap{min-height:min(86vh,760px);align-content:center;
  padding-block:clamp(4rem,2rem + 7vw,8rem)}
.mk-hero--bleed .mk-hero__lede strong{color:#fff}
/* the badge moves out of the photo and onto the hero itself */
.mk-hero__stamp{display:flex;align-items:baseline;gap:.7rem;margin-top:2.2rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);width:max-content}
.mk-hero__stamp b{font-family:var(--mk-display);font-size:2.6rem;line-height:1;color:var(--mk-accent)}
.mk-hero__stamp span{color:rgba(255,255,255,.7);font-size:.95rem;max-width:12ch;line-height:1.25}

/* --- section index numbers running down the left edge --- */
.mk-sect{position:relative}
.mk-sect[data-idx]::before{content:attr(data-idx);position:absolute;left:clamp(.4rem,.1rem + 1vw,1.4rem);
  top:var(--mk-sect);font-family:var(--mk-display);font-size:.85rem;letter-spacing:.22em;
  color:var(--mk-brand);opacity:.45;writing-mode:vertical-rl}
.mk-sect--deep[data-idx]::before{color:var(--mk-accent);opacity:.6}
@media (max-width:1080px){ .mk-sect[data-idx]::before{display:none} }

/* --- statement band: one big line, no decoration --- */
.mk-say{background:var(--mk-ink);color:#fff;padding-block:clamp(3.6rem,2rem + 5vw,6.5rem)}
.mk-say p{font-family:var(--mk-display);text-transform:uppercase;line-height:.94;margin:0;
  font-size:clamp(1.9rem,1rem + 3.6vw,4.2rem);max-width:19ch;letter-spacing:-.01em}
.mk-say em{font-style:normal;color:var(--mk-cta)}
.mk-say small{display:block;margin-top:1.4rem;font-family:var(--mk-font);text-transform:none;
  font-size:1.02rem;color:rgba(255,255,255,.6);max-width:46ch;line-height:1.6}

/* --- before/after gets weight --- */
.mk-ba{aspect-ratio:16/9;box-shadow:0 30px 70px rgba(11,43,54,.22)}
.mk-ba__grip{width:54px;height:54px;font-size:1rem}
.mk-ba__bar{width:4px}

/* --- price block: make the number the hero of its card --- */
.mk-price{border-width:0;background:var(--mk-deep);color:#fff;padding:2.6rem 2rem;
  box-shadow:0 24px 60px rgba(11,43,54,.20)}
.mk-price .mk-eyebrow{color:var(--mk-accent)}
.mk-price__n{color:#fff;font-size:clamp(3.4rem,2rem + 5vw,5.6rem)}
.mk-price__n small{color:rgba(255,255,255,.6)}
.mk-price li{color:rgba(255,255,255,.82)}
.mk-price li svg{color:var(--mk-accent)}
.mk-price p{color:rgba(255,255,255,.5)!important}

/* --- credentials strip: quieter, so the marquee lands harder --- */
.mk-creds li{padding-block:1.35rem}
.mk-creds b{font-size:.95rem} .mk-creds small{font-size:.82rem}

/* --- stats: give them air and a rule --- */
.mk-stats{border-top:1px solid rgba(255,255,255,.16);padding-top:2.4rem}
.mk-stat b{font-size:clamp(2.8rem,1.6rem + 4vw,5rem)}

/* --- rhythm: tighten heads, widen sections --- */
.mk-head{margin-bottom:clamp(1.6rem,1rem + 1.6vw,2.6rem)}
.mk-sect{padding-block:clamp(4rem,2.4rem + 5.5vw,7.5rem)}

/* --- links in service rows keep the arrow visible on touch --- */
@media (hover:none){ .mk-row__a{opacity:.8} }

/* ---------- 29 · header + hero corrections from the live look ---------- */
.mk-nav a{white-space:nowrap}
.mk-btn--nowrap{white-space:nowrap}
.mk-header .mk-wrap{gap:1rem}
.mk-header .mk-btn{flex:0 0 auto}
.mk-logo{white-space:nowrap;flex:0 0 auto}
@media (max-width:1180px){ .mk-nav a{padding:.6rem .6rem;font-size:.92rem} }

/* stamp was sitting on top of the tick row */
.mk-hero__stamp{margin-bottom:1.6rem}
.mk-hero--bleed .mk-hero__ticks{gap:.6rem 1.6rem}

/* let the water actually show through */
.mk-hero--bleed{background-image:
    linear-gradient(180deg,rgba(11,43,54,.46) 0%,rgba(11,43,54,.66) 58%,rgba(11,43,54,.93) 100%),
    var(--mk-hero-img)}

/* ============================================================
   30 · THE 9 — rows, transitions, honesty band
   ============================================================ */

/* --- service rows: keep titles on one line, rows even --- */
body .mk-rows .mk-row{grid-template-columns:auto minmax(0,auto) minmax(0,1fr) auto auto!important;
  align-items:center!important;min-height:clamp(86px,4rem + 3vw,124px)}
body .mk-rows .mk-row__t{white-space:nowrap;font-size:clamp(1.35rem,.8rem + 2vw,2.9rem)!important}
body .mk-rows .mk-row__d{justify-self:end;text-align:right;max-width:38ch}
@media (max-width:1180px){ body .mk-rows .mk-row__t{font-size:clamp(1.2rem,.7rem + 1.8vw,2.2rem)!important} }
@media (max-width:900px){
  body .mk-rows .mk-row{grid-template-columns:auto 1fr auto!important;min-height:72px}
  body .mk-rows .mk-row__t{white-space:normal;font-size:1.25rem!important}
}

/* --- section transitions: an angled edge between light and dark --- */
.mk-say,.mk-sect--deep,.mk-honest{position:relative}
.mk-say::before,.mk-sect--deep::before{content:"";position:absolute;left:0;right:0;top:-1px;
  height:clamp(34px,4vw,72px);background:inherit;
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.mk-say::before{background:var(--mk-ink)}
.mk-sect--deep::before{background:var(--mk-deep)}
.mk-say[data-idx]::before,.mk-sect--deep[data-idx]::before{content:""}
.mk-sect--deep[data-idx]::after{content:attr(data-idx);position:absolute;
  left:clamp(.4rem,.1rem + 1vw,1.4rem);top:var(--mk-sect);font-family:var(--mk-display);
  font-size:.85rem;letter-spacing:.22em;color:var(--mk-accent);opacity:.6;writing-mode:vertical-rl}
@media (max-width:1080px){ .mk-sect--deep[data-idx]::after{display:none} }

/* --- honesty band: the reviews slot as a statement --- */
.mk-honest{background:var(--mk-surface-2);padding-block:clamp(4rem,2.4rem + 5vw,7rem);
  border-block:1px solid var(--mk-line)}
.mk-honest__q{font-family:var(--mk-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(1.7rem,1rem + 3.1vw,3.6rem);margin:0 0 1.2rem;max-width:22ch;letter-spacing:-.01em}
.mk-honest__q em{font-style:normal;color:var(--mk-brand)}
.mk-honest__s{color:var(--mk-ink-2);max-width:52ch;margin-bottom:1.8rem}
.mk-honest .mk-btn--ghost{color:var(--mk-brand);border-color:var(--mk-brand)}
.mk-honest .mk-btn--ghost:hover{background:var(--mk-brand);color:#fff}

/* --- marquee edges fade so it reads as continuous --- */
.mk-marq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* --- before/after: caption bar so it reads as a real job --- */
.mk-ba{border-radius:var(--mk-r)}
.mk-ba__grip{box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ============================================================
   31 · MOTION KIT — simplicity · aesthetics · conversion · motion
   ============================================================ */

/* parallax slot — any element can drift */
[data-mk-par]{transform:translate3d(0,var(--mk-par,0),0);will-change:transform}

/* headings wipe up behind a mask instead of fading */
.mk-wipe{overflow:hidden}
html.mk-js .mk-wipe > *{transform:translateY(102%);opacity:1;
  transition:transform 1s cubic-bezier(.16,.84,.28,1)}
html.mk-js .mk-wipe.is-in > *{transform:none}

/* images reveal behind a sliding curtain */
.mk-imgwipe{position:relative;overflow:hidden}
.mk-imgwipe::after{content:"";position:absolute;inset:0;background:var(--mk-deep);
  transform-origin:right;transition:transform 1.05s cubic-bezier(.16,.84,.28,1)}
html.mk-js .mk-imgwipe.is-in::after{transform:scaleX(0)}
html:not(.mk-js) .mk-imgwipe::after{display:none}
.mk-imgwipe img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.16,.84,.28,1)}
html.mk-js .mk-imgwipe.is-in img{transform:none}

/* service rows arrive one after another */
html.mk-js .mk-row{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--mk-ease),transform .6s var(--mk-ease),
             padding-left .45s var(--mk-ease),color .35s}
html.mk-js .mk-row.is-in{opacity:1;transform:none}

/* CTA bands carry a light sweep — Motion Kit signature, 4.4s */
.mk-sweep{position:relative;overflow:hidden}
.mk-sweep::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-22deg);animation:mkSweep 4.4s linear infinite;pointer-events:none}
@keyframes mkSweep{ to{ left:125% } }

/* the CTA button itself catches light on hover */
.mk-btn--cta{position:relative;overflow:hidden}
.mk-btn--cta::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-20deg);transition:left .6s var(--mk-ease)}
.mk-btn--cta:hover::after{left:130%}

/* price card follows the process steps — the offer never leaves the screen */
@media (min-width:960px){
  .mk-price{position:sticky;top:110px}
}

/* counters get the display face and a subtle rise */
.mk-stat b{display:inline-block}

/* marquee: pause on hover already; add a soft top/bottom edge */
.mk-marq{box-shadow:inset 0 1px 0 rgba(0,0,0,.10),inset 0 -1px 0 rgba(0,0,0,.10)}

/* reduced motion switches everything off, no exceptions */
@media (prefers-reduced-motion:reduce){
  [data-mk-par]{transform:none!important}
  .mk-sweep::after,.mk-btn--cta::after{display:none}
  html.mk-js .mk-wipe > *,html.mk-js .mk-row{transform:none!important;opacity:1!important}
  .mk-imgwipe::after{display:none}
  .mk-imgwipe img{transform:none!important}
  .mk-price{position:static}
}

/* ============================================================
   32 · OBJECTION SLIDER  (ported from td-pain — our own code)
   Drag, arrows, snap, progress rail. The strongest pattern we own.
   ============================================================ */
.mk-obj{background:var(--mk-surface-2);border-block:1px solid var(--mk-line)}
.mk-obj__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mk-obj__nav{display:flex;gap:.6rem;flex:0 0 auto}
.mk-obj__nav button{width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(18,34,43,.24);background:transparent;color:var(--mk-ink);
  font-size:1.05rem;line-height:1;
  transition:transform .3s var(--mk-ease),background .3s,border-color .3s,color .3s,opacity .3s}
.mk-obj__nav button:hover{background:var(--mk-brand);border-color:var(--mk-brand);
  color:#fff;transform:translateY(-2px)}
.mk-obj__nav button:disabled{opacity:.28;pointer-events:none}

.mk-obj__scroll{overflow-x:auto;overflow-y:hidden;cursor:grab;padding:2rem 0 .5rem;
  scrollbar-width:none;scroll-snap-type:x mandatory;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
.mk-obj__scroll::-webkit-scrollbar{height:0}
.mk-obj__scroll.is-drag{cursor:grabbing;scroll-snap-type:none}
.mk-obj__track{display:flex;gap:1.25rem;width:max-content}

.mk-obj__card{flex:0 0 clamp(268px,26vw,352px);scroll-snap-align:start;
  background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:var(--mk-r);
  padding:1.9rem 1.6rem;display:flex;flex-direction:column;
  transition:transform .4s var(--mk-ease),border-color .35s,box-shadow .35s}
.mk-obj__card:hover{transform:translateY(-5px);border-color:var(--mk-brand);
  box-shadow:0 18px 42px rgba(11,43,54,.13)}
.mk-obj__q{font-size:1.14rem;font-weight:700;line-height:1.35;color:var(--mk-ink);margin:0 0 1rem}
.mk-obj__a{position:relative;padding-top:1.15rem;margin:auto 0 0;
  color:var(--mk-ink-2);font-size:.98rem;line-height:1.65}
.mk-obj__a::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--mk-brand);transition:width .75s .2s var(--mk-ease)}
.mk-obj.is-in .mk-obj__a::before{width:54px}
.mk-obj__card:hover .mk-obj__a::before{width:100%}

/* the rail — it tells him there is more without a label */
.mk-obj__rail{position:relative;height:3px;border-radius:3px;overflow:hidden;
  background:rgba(18,34,43,.12);margin-top:1.6rem}
.mk-obj__fill{position:absolute;inset:0 auto 0 0;width:18%;border-radius:3px;
  background:linear-gradient(90deg,var(--mk-brand),var(--mk-accent));transition:width .16s linear}

/* cards arrive in sequence */
html.mk-js .mk-obj__card{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--mk-ease),transform .6s var(--mk-ease),border-color .35s,box-shadow .35s}
html.mk-js .mk-obj.is-in .mk-obj__card{opacity:1;transform:none}
html.mk-js .mk-obj.is-in .mk-obj__card:nth-child(2){transition-delay:.08s}
html.mk-js .mk-obj.is-in .mk-obj__card:nth-child(3){transition-delay:.16s}
html.mk-js .mk-obj.is-in .mk-obj__card:nth-child(4){transition-delay:.24s}
html.mk-js .mk-obj.is-in .mk-obj__card:nth-child(5){transition-delay:.32s}
html.mk-js .mk-obj.is-in .mk-obj__card:nth-child(6){transition-delay:.40s}

@media (max-width:900px){
  .mk-obj__nav{display:none}          /* thumbs swipe; arrows only take room */
  .mk-obj__scroll{padding-top:1.5rem}
  .mk-obj__card{flex-basis:82vw;padding:1.5rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html.mk-js .mk-obj__card{opacity:1!important;transform:none!important}
  .mk-obj__a::before{width:54px!important;transition:none}
}

/* ============================================================
   33 · PORTED — sourced stats · guarantees · them-vs-us
   All three are our own components. No template licence involved.
   ============================================================ */

/* --- sourced stat band: every number carries its source --- */
.mk-proof{background:var(--mk-deep);color:#fff;position:relative}
.mk-proof__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:2.4rem}
.mk-proof__src{font-size:.82rem;color:rgba(255,255,255,.45);max-width:34ch;text-align:right}
.mk-proof__grid{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  border-top:1px solid rgba(255,255,255,.16)}
.mk-proof__i{padding:2rem 1.4rem 1.8rem;border-bottom:1px solid rgba(255,255,255,.16)}
.mk-proof__i + .mk-proof__i{border-left:1px solid rgba(255,255,255,.16)}
.mk-proof__n{display:block;font-family:var(--mk-display);line-height:1;letter-spacing:-.01em;
  font-size:clamp(2.6rem,1.6rem + 3.4vw,4.6rem);color:var(--mk-accent)}
.mk-proof__l{display:block;margin-top:.7rem;color:rgba(255,255,255,.72);font-size:.98rem;line-height:1.45}
@media (max-width:700px){
  .mk-proof__i + .mk-proof__i{border-left:0}
  .mk-proof__src{text-align:left}
}

/* --- guarantees: struck headline, numbered, dark --- */
.mk-gtee{background:var(--mk-ink);color:#fff}
.mk-gtee__h{font-family:var(--mk-display);text-transform:uppercase;line-height:.92;
  font-size:clamp(1.8rem,1rem + 3.3vw,3.9rem);margin:0 0 2.4rem;letter-spacing:-.01em}
.mk-gtee__h s{color:rgba(255,255,255,.26);text-decoration-thickness:3px}
.mk-gtee__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.mk-gtee__c{padding:1.9rem 1.6rem;border-radius:var(--mk-r);
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);
  transition:transform .4s var(--mk-ease),border-color .4s}
.mk-gtee__c:hover{transform:translateY(-5px);border-color:var(--mk-accent)}
.mk-gtee__n{display:block;font-family:var(--mk-display);font-size:.95rem;letter-spacing:.16em;
  color:var(--mk-accent);margin-bottom:1.1rem}
.mk-gtee__t{font-size:1.22rem;font-weight:700;margin:0 0 .55rem;line-height:1.28}
.mk-gtee__d{color:rgba(255,255,255,.62);font-size:.98rem;margin:0;line-height:1.6}

/* --- them vs us --- */
.mk-vs{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.mk-vs__c{padding:1.9rem 1.6rem;border-radius:var(--mk-r);border:1px solid var(--mk-line);
  background:var(--mk-surface)}
.mk-vs__c--us{border:2px solid var(--mk-brand);position:relative;overflow:hidden}
.mk-vs__k{display:block;font-family:var(--mk-display);text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.04em;margin-bottom:1.2rem;color:var(--mk-ink-2)}
.mk-vs__c--us .mk-vs__k{color:var(--mk-brand)}
.mk-vs__c li{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;font-size:1rem;
  border-top:1px solid var(--mk-line)}
.mk-vs__c li:first-of-type{border-top:0}
.mk-vs__c li svg{flex:0 0 auto;margin-top:.22rem}
.mk-vs__c--them li{color:var(--mk-ink-2)}
.mk-vs__c--them svg{color:#A3561F}
.mk-vs__c--us svg{color:var(--mk-brand)}

/* ============================================================
   34 · 3D — real depth, zero libraries. CSS transforms only.
   ============================================================ */
.mk-3d{perspective:1100px;perspective-origin:50% 40%}
.mk-tilt{transform-style:preserve-3d;will-change:transform;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.mk-tilt.is-live{transition:transform .12s linear}
.mk-tilt > *{transform:translateZ(var(--tz,0))}
.mk-tilt__glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 60% at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.16),transparent 62%);opacity:0;transition:opacity .3s}
.mk-tilt:hover .mk-tilt__glare{opacity:1}

/* the price card lifts off the page */
.mk-price{transform-style:preserve-3d}
.mk-price .mk-price__n{transform:translateZ(38px)}
.mk-price ul,.mk-price .mk-btn{transform:translateZ(20px)}

/* before/after gets real depth on its frame */
.mk-ba{transform-style:preserve-3d;box-shadow:0 34px 80px rgba(11,43,54,.26)}

/* google reviews block — renders ONLY when real data exists */
.mk-greview{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.mk-greview__c{padding:1.6rem 1.4rem;border:1px solid var(--mk-line);border-radius:var(--mk-r);
  background:var(--mk-surface)}
.mk-greview__stars{color:#A3561F;letter-spacing:.1em;font-size:1.05rem}
.mk-greview__who{display:flex;align-items:center;gap:.7rem;margin-top:1rem;
  font-size:.92rem;color:var(--mk-ink-2)}
.mk-gbadge{display:inline-flex;align-items:center;gap:.7rem;padding:.7rem 1.1rem;
  border:1px solid var(--mk-line);border-radius:999px;background:var(--mk-surface);
  font-size:.95rem;min-height:48px}
.mk-gbadge b{font-size:1.2rem}
@media (prefers-reduced-motion:reduce){
  .mk-tilt{transform:none!important} .mk-tilt__glare{display:none}
  .mk-price .mk-price__n,.mk-price ul,.mk-price .mk-btn{transform:none}
}

/* ---------- 35 · google reviews (sample-labelled in demo mode) ---------- */
.mk-demo-flag{display:block;padding:.75rem 1.05rem;margin:0 0 1.4rem;border-radius:8px;
  background:#FFF4E5;border:1px solid #A3561F;color:#7A4A08;font-size:.9rem;line-height:1.5}
.mk-greview__c{position:relative;transform-style:preserve-3d}
.mk-greview__c p{font-size:1rem;line-height:1.6;margin:.85rem 0 0;color:var(--mk-ink)}
.mk-greview__av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--mk-brand);color:#fff;font-weight:700;font-size:.9rem;flex:0 0 34px}
.mk-gbadge{transition:transform .3s var(--mk-ease),border-color .3s}
.mk-gbadge:hover{transform:translateY(-2px);border-color:var(--mk-brand)}
.mk-greviews{perspective:1100px}

/* ---------- 36 · "what happens on a visit" ---------- */
.mk-visit{background:var(--mk-surface-2);border-block:1px solid var(--mk-line)}
.mk-visit__grid{display:grid;gap:1px;background:var(--mk-line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  border:1px solid var(--mk-line);border-radius:var(--mk-r);overflow:hidden}
.mk-visit__i{background:var(--mk-surface);padding:1.7rem 1.4rem;display:flex;flex-direction:column;
  gap:.7rem;transition:background .35s}
.mk-visit__i:hover{background:var(--mk-deep);color:#fff}
.mk-visit__i:hover .mk-visit__t{color:#fff}
.mk-visit__i:hover .mk-visit__d{color:rgba(255,255,255,.68)}
.mk-visit__i:hover .mk-visit__n{color:var(--mk-accent)}
.mk-visit__n{font-family:var(--mk-display);font-size:.9rem;letter-spacing:.16em;color:var(--mk-brand);
  transition:color .35s}
.mk-visit__t{font-family:var(--mk-display);text-transform:uppercase;font-size:1.28rem;line-height:1;
  color:var(--mk-ink);transition:color .35s}
.mk-visit__d{font-size:.94rem;color:var(--mk-ink-2);line-height:1.55;margin:0;transition:color .35s}
.mk-visit__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.6rem;
  font-size:.96rem;color:var(--mk-ink-2)}
.mk-visit__foot b{color:var(--mk-ink)}

/* ============================================================
   THEME TOKENS — roofing: charcoal slate + copper
   Overrides Agntix palette variables. Never edit Agntix rules.
   ============================================================ */
:root{
  --tp-common-yellow:        #A3561F;
  --tp-common-yellow-green:  #A3561F;
  --tp-common-green-light:   #F5F3F0;
  --tp-common-green-regular: #3D4A54;
  --tp-common-green-solid:   #1A1D21;
  --tp-common-paste:         #A3561F;
  --tp-common-cream:         #F5F3F0;
  --mk-cta:                  #A3561F;
  --mk-cta-ink:              #ffffff;
  --mk-ink:                  #1A1D21;
  --mk-slate:                #3D4A54;
  --mk-copper:               #A3561F;
  --mk-surface:              #F5F3F0;
}

/* wordmark stands in for the logo file */
.mk-logo-word{
  font-family: inherit; font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; color: var(--mk-ink); display: inline-block;
}
.tp-offcanvas-2-logo .mk-logo-word,
.mk-callbar .mk-logo-word{ color: #fff; }

/* top contact bar */
.mk-topbar{ background: var(--mk-ink); color: #E7E4DF; font-size: 13px; }
.mk-topbar-row{
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: space-between;
  padding: 9px 0; line-height: 1.5;
}
.mk-topbar-item{ opacity: .82; }
.mk-topbar-actions{ display: flex; gap: 18px; margin-left: auto; }
.mk-topbar-actions a{ color: var(--mk-copper); font-weight: 600; }
.mk-topbar-actions a:hover{ color: #fff; }
@media (max-width: 991px){
  .mk-topbar-item:nth-child(2), .mk-topbar-item:nth-child(3){ display: none; }
}

/* hero supporting copy */
.ar-hero-sub{
  max-width: 620px; margin-inline: auto;
  font-size: 19px; line-height: 1.55; color: #E7E4DF;
}
.ar-hero-note{ font-size: 14px; opacity: .8; color: #E7E4DF; }
.ar-hero-btn .tp-btn-black-solid + .tp-btn-black-solid{ margin-left: 12px; }

/* pricing */
.mk-price{
  display: block; margin-top: 6px;
  font-weight: 700; font-size: 22px; color: var(--mk-copper);
}
.mk-finance{
  text-align: center; font-size: 17px; line-height: 1.6;
  max-width: 700px; margin-inline: auto; color: var(--mk-slate);
}

/* guarantee band */
.mk-guarantee{ background: var(--mk-ink); }
.mk-guarantee *{ color: #F5F3F0; }

/* demo-content flag — must be stripped before any live client site */
.mk-demo-note{ display: block; margin-top: 6px; font-size: 12px; opacity: .65; }

/* reveal: visible by default, JS opts in to hiding */
.mk-rise{ opacity: 1; transform: none; }
html.mk-js .mk-rise{ opacity: 0; transform: translateY(20px); }
html.mk-js .mk-rise.is-in{ opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce){
  html.mk-js .mk-rise,
  html.mk-js .mk-rise.is-in{ opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SAFETY LAYER — content is visible by default. Owner's Manual §5.
   GSAP sets opacity:0 as an initial state; if ScrollTrigger never fires
   (deleted sections, missing ScrollSmoother) the page stays blank.
   Nothing on this site may depend on JavaScript to become readable.
   ══════════════════════════════════════════════════════════════════════ */
.tp_fade_anim,
.tp_fade_anim > *,
[class*="tp_fade"],
[class*="tp_text"],
[class*="_anim"],
.split-line,
.split-parent,
.char, .word, .line{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  clip-path:none!important;
  filter:none!important;
}

/* preloader must never outlive 1.2s, and never ships in a foreign brand colour */
#preloader,.preloader,.tp-preloader,[class*="preloader"]{
  animation:mkPreOut .35s ease .9s forwards!important;
  background:var(--mk-deep,#1A1D21)!important;
}
@keyframes mkPreOut{to{opacity:0;visibility:hidden;pointer-events:none}}

/* hero is the template's light dotted panel — ink stays dark, as designed */

/* ══════════════════════════════════════════════════════════════════════
   THEME TOKENS — roofing. Slate and copper.
   Overrides the pack's palette variables. Never edit the pack's rules.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --tp-common-yellow:        #A3561F;   /* copper accent */
  --tp-common-yellow-green:  #A3561F;
  --tp-common-yellow-light:  #A3561F;
  --tp-common-green-light:   #F5F3F0;
  --tp-common-green-regular: #3D4A54;
  --tp-common-green-solid:   #1A1D21;
  --tp-common-paste:         #A3561F;
  --tp-common-cream:         #F5F3F0;
  --tp-common-orange:        #A3561F;
  --tp-common-pink:          #A3561F;
  --tp-common-red:           #A3561F;
  --tp-theme-primary:        #A3561F;

  --mk-deep:#1A1D21; --mk-brand:#3D4A54; --mk-accent:#A3561F;
  --mk-cta:#A3561F; --mk-cta-ink:#ffffff;
}

/* the pack hard-codes its creative-agency red in a few places — retire it */
[class*="satisfy"],
.tp-section-subtitle-satisfy{color:var(--mk-accent)!important}


/* inline hero images — photos in slots the template sized to its own PNGs.
   Match the originals exactly: 160x103, 176x76, 160x104. */
.ar-hero-shape-1,.ar-hero-shape-2,.ar-hero-shape-3{
  object-fit:cover!important;vertical-align:middle;
}
.ar-hero-shape-1{width:160px!important;height:103px!important;border-radius:14px}
.ar-hero-shape-2{width:176px!important;height:76px!important;border-radius:999px}
.ar-hero-shape-3{width:160px!important;height:104px!important;border-radius:14px}

@media (max-width:1199px){
  .ar-hero-shape-1{width:120px!important;height:78px!important}
  .ar-hero-shape-2{width:130px!important;height:58px!important}
  .ar-hero-shape-3{width:120px!important;height:78px!important}
}

/* ══════════════════════════════════════════════════════════════════════
   READABILITY — elements we added have no styling in the pack, so they
   inherit whatever is nearest. Everything must clear 4.5:1 on its own bg.
   ══════════════════════════════════════════════════════════════════════ */

/* hero sits on the light dotted panel: ink is dark */
.ar-hero-sub{
  color:#3D4A54!important;
  font-size:clamp(16px,1.25vw,18px)!important;
  line-height:1.6!important;font-weight:500!important;
  max-width:62ch;margin-left:auto;margin-right:auto;
}
.ar-hero-note{
  color:#5A6870!important;
  font-size:13.5px!important;font-weight:600!important;
  letter-spacing:.01em;
}

/* anything we added inside a light section keeps dark ink */
.ar-hero-area p,.ar-hero-area span:not([class*="btn"]),
.ar-category-area span,.ar-funfact-area span{color:#3D4A54}

/* on dark or photo backgrounds, force light ink instead */
.ar-service-area *,
.ar-banner-area *,
.ar-step-area .ar-step-content *{color:#fff}

/* never let opacity alone carry legibility */
.ar-hero-area [class*="tp_fade"]{opacity:1!important}

/* the pain section must resolve, not just list problems */
.mk-pain-answer{
  margin:38px auto 0;max-width:66ch;
  font-size:clamp(16px,1.2vw,18px);line-height:1.65;font-weight:500;
  color:#3D4A54;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION RHYTHM — components harvested from dark donor pages carry
   light text. Give them the dark ground they were designed for; that
   fixes legibility and creates the alternation the page was missing.
   ══════════════════════════════════════════════════════════════════════ */

.mk-price-section,
.mk-area-section,
.mk-form-section{
  background:#1A1D21!important;
  padding-top:110px!important;padding-bottom:110px!important;
}
.mk-price-section *,
.mk-area-section *,
.mk-form-section *{color:#fff}

.mk-price-section .tp-section-subtitle-satisfy,
.mk-area-section .tp-section-subtitle-satisfy,
.mk-form-section .tp-section-subtitle-satisfy{color:var(--mk-accent,#A3561F)!important}

/* muted supporting copy on the dark grounds */
.mk-price-section p,.mk-area-section p,.mk-form-section p,
.mk-price-section li,.mk-area-section li{color:rgba(255,255,255,.80)!important}
.mk-price-section small,.mk-area-section small{color:rgba(255,255,255,.60)!important}

/* the price pill needs to invert now the ground is dark */
.mk-price-section [class*="price-item"] [class*="price"]{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:var(--mk-accent,#A3561F)!important;
}

/* ── guarantee band: numbers white, suffix and labels legible ───────── */
.ar-funfact-area h4,
.ar-funfact-area h4 i,
.ar-funfact-area .purecounter{color:#fff!important}
.ar-funfact-area span{color:rgba(255,255,255,.72)!important}
.ar-funfact-area{background-color:#1A1D21!important}

/* ── service-area cards sit on dark now ─────────────────────────────── */
.mk-area-section [class*="location-item"]{
  border-color:rgba(255,255,255,.14)!important;
}
.mk-area-section a{color:var(--mk-accent,#A3561F)!important}
.mk-area-section a:hover{color:#fff!important}

/* ══ pain section: a grid you can actually read ═══════════════════════ */
.mk-pain-section{padding:110px 0 100px}
.mk-pain-grid{margin-top:56px;row-gap:26px}

.mk-pain-card{
  height:100%;padding:30px 28px 28px;
  border:1px solid rgba(26,29,33,.12);
  border-left:2px solid var(--mk-accent,#A3561F);
  border-radius:10px;
  background:rgba(255,255,255,.55);
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.mk-pain-card:hover{
  background:#fff;border-color:rgba(26,29,33,.2);
  border-left-color:var(--mk-accent,#A3561F);
  transform:translateY(-3px);
}
.mk-pain-card h4{
  margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.3;
  color:#1A1D21;letter-spacing:-.01em;
}
.mk-pain-card p{
  margin:0;font-size:15px;line-height:1.62;font-weight:500;
  color:#4A5A64;
}
.mk-pain-answer{margin-top:48px!important}
.mk-pain-answer strong{color:#1A1D21;font-weight:700}

@media (max-width:767px){
  .mk-pain-section{padding:70px 0 64px}
  .mk-pain-grid{margin-top:36px}
  .mk-pain-card{padding:24px 22px}
  .mk-pain-card h4{font-size:16.5px}
}

/* ══ v-final · legibility, restraint, and the cream gap ═══════════════ */

/* three cards, so give them room to breathe */
.mk-pain-grid > [class*="col-"]{flex:0 0 33.333%;max-width:33.333%}
@media (max-width:991px){.mk-pain-grid > [class*="col-"]{flex:0 0 100%;max-width:100%}}
.mk-pain-card{padding:34px 30px 32px}
.mk-pain-card h4{font-size:19px}

/* rating badge inside the credentials block */
.mk-cred-rating{
  margin:26px 0 0;font-size:15px;font-weight:600;color:#1A1D21;
  display:flex;align-items:center;gap:9px;
}
.mk-cred-rating strong{font-weight:800}
.mk-stars{color:var(--mk-accent,#A3561F);letter-spacing:2px;font-size:15px}

/* ── FAQ was white-on-cream. Give it the dark ground it was built for ─ */
.mk-faq-section{
  background:#1A1D21!important;
  padding:110px 0!important;
}
.mk-faq-section *{color:#fff}
.mk-faq-section .tp-section-subtitle-satisfy{color:var(--mk-accent,#A3561F)!important}
.mk-faq-section p,.mk-faq-section [class*="content"]{color:rgba(255,255,255,.78)!important}
.mk-faq-section [class*="accordion"] button,
.mk-faq-section [class*="accordion"] [class*="header"]{color:#fff!important}
.mk-faq-section [class*="item"]{border-color:rgba(255,255,255,.14)!important}

/* ── pricing: strip the boxes. Restraint is what reads premium. ─────── */
.mk-price-section [class*="price-item"] [class*="title"],
.mk-price-section [class*="price-item"] [class*="list"],
.mk-price-section [class*="price-item"] ul{
  background:transparent!important;border:0!important;
}
.mk-price-section [class*="price-item"]{
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  border-top:0!important;border-left:0!important;border-right:0!important;
  background:transparent!important;
  padding:44px 0!important;
}
.mk-price-section [class*="price-item"] h3,
.mk-price-section [class*="price-item"] h4{
  color:#fff!important;font-weight:700!important;letter-spacing:-.015em;
}
/* only the number keeps a surface */
.mk-price-section [class*="price-item"] > *:last-child{
  background:transparent!important;border:0!important;
}
.mk-price-section [class*="amount"],.mk-price-section [class*="price-box"]{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:10px!important;
}

/* ── kill the stray cream band between two dark sections ────────────── */
.mk-price-section + .ar-funfact-area,
.ar-funfact-area + .mk-area-section,
.mk-area-section + .ar-testimonial-area{margin-top:0!important}
.ar-funfact-area{margin-bottom:0!important}
.mk-area-section{margin-top:0!important;padding-top:110px!important}

/* ══════════════════════════════════════════════════════════════════════
   PRICE TABLE — one row per service. Structure borrowed from _core,
   type and spacing kept in the template's own language.
   ══════════════════════════════════════════════════════════════════════ */

.mk-ptable{margin-top:56px;border-top:1px solid rgba(255,255,255,.12)}

.mk-prow{
  display:grid;
  grid-template-columns:44px minmax(230px,1fr) minmax(0,1.15fr) 190px 40px;
  align-items:center;gap:24px;
  padding:30px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:background .35s cubic-bezier(.4,0,.2,1), padding-left .35s cubic-bezier(.4,0,.2,1);
}
.mk-prow:hover{background:rgba(255,255,255,.035);padding-left:18px}

.mk-prow__n{
  font-family:"Poppins",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;color:var(--mk-accent,#A3561F);
  font-variant-numeric:tabular-nums;
}
/* the template's own display face and tracking — not _core's */
.mk-prow__t{
  margin:0;font-size:clamp(19px,1.6vw,25px);font-weight:600;line-height:1.15;
  letter-spacing:-.02em;color:#fff;
}
.mk-prow__d{
  margin:0;font-size:14.5px;line-height:1.55;font-weight:500;
  color:rgba(255,255,255,.62);
}
.mk-prow__p{
  font-size:clamp(15px,1.25vw,18px);font-weight:700;letter-spacing:-.01em;
  color:var(--mk-accent,#A3561F);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mk-prow__a{
  justify-self:end;font-size:19px;color:rgba(255,255,255,.34);
  transition:color .3s ease, transform .3s ease;
}
.mk-prow:hover .mk-prow__a{color:#fff;transform:translateX(5px)}

.mk-pnote{
  margin:34px 0 0;max-width:74ch;
  font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.62)!important;
}
.mk-pnote strong{color:#fff}

@media (max-width:991px){
  .mk-prow{grid-template-columns:34px 1fr auto;gap:8px 16px;padding:24px 0}
  .mk-prow__n{grid-row:1}
  .mk-prow__t{grid-column:2;font-size:19px}
  .mk-prow__p{grid-column:3;grid-row:1;font-size:15px}
  .mk-prow__d{grid-column:2 / span 2;font-size:13.5px;margin-top:5px}
  .mk-prow__a{display:none}
  .mk-prow:hover{padding-left:0}
}

/* ── Google review badge — evidence, not decoration ─────────────────── */
.mk-cred-rating{
  display:inline-flex;align-items:center;gap:9px;
  margin:26px 0 0;padding:10px 18px 10px 14px;
  border:1px solid rgba(26,29,33,.16);border-radius:999px;
  background:#fff;
  font-size:14.5px;color:#1A1D21;
}
.mk-g{display:inline-flex;width:19px;height:19px}
.mk-g svg{width:100%;height:100%}
.mk-cred-rating strong{font-size:16.5px;font-weight:800}
.mk-cred-rating__s{color:#5A6870;font-weight:500}

/* form labels were dark-on-dark */
.mk-form-section label,
.mk-form-section [class*="label"]{color:rgba(255,255,255,.82)!important;font-weight:600}
.mk-form-section input,.mk-form-section textarea,.mk-form-section select{
  background:#fff!important;color:#1A1D21!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
.mk-form-section input::placeholder,.mk-form-section textarea::placeholder{color:#8a949b!important}

/* ══ funfact back to cream, as the template has it ════════════════════ */
.ar-funfact-area{
  background-color:transparent!important;
  padding:100px 0 90px!important;margin-bottom:0!important;
}
.ar-funfact-area h4,.ar-funfact-area h4 i,.ar-funfact-area .purecounter{color:#1A1D21!important}
.ar-funfact-area span{color:#5A6870!important}

/* ══ service area — two columns, template type, suburb pills ══════════ */
.mk-area-section{
  background:transparent!important;
  padding:110px 0!important;
}
.mk-area-section *{color:inherit}
.mk-area-section .tp-section-title-clash-600{color:#1A1D21}
.mk-area-section .tp-section-subtitle-satisfy{color:#A3561F!important}

.mk-area__lede{
  margin:20px 0 0;max-width:44ch;
  font-size:clamp(16px,1.2vw,17.5px);line-height:1.62;font-weight:500;color:#4A5A64;
}
.mk-subs{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;max-width:46ch}
.mk-sub{
  display:inline-flex;align-items:center;
  padding:9px 17px;border-radius:999px;
  border:1px solid rgba(26,29,33,.16);background:#fff;
  font-size:14.5px;font-weight:600;color:#1A1D21;line-height:1;
  transition:border-color .3s ease, color .3s ease;
}
.mk-sub:hover{border-color:var(--mk-accent,#A3561F);color:var(--mk-accent,#A3561F)}

.mk-area__meta{
  margin:28px 0 0;font-size:14px;font-weight:600;color:#5A6870;
}
.mk-area__meta a{color:var(--mk-accent,#A3561F);text-decoration:none}
.mk-area__meta a:hover{color:#1A1D21}

.mk-area__thumb{border-radius:12px;overflow:hidden;line-height:0}
.mk-area__thumb img{width:100%;height:auto;display:block}

@media (max-width:991px){
  .mk-area-section{padding:70px 0!important}
  .mk-area__thumb{margin-top:38px}
  .ar-funfact-area{padding:70px 0 60px!important}
}

/* ══ review platform strip — instant, verifiable credibility ══════════ */
.mk-revstrip{padding:0 0 96px;background:transparent}
.mk-revstrip__row{
  display:grid;grid-template-columns:repeat(3,auto) 1fr;
  align-items:center;gap:0;
  border-top:1px solid rgba(26,29,33,.14);
  border-bottom:1px solid rgba(26,29,33,.14);
}
.mk-rev{
  display:flex;align-items:center;gap:12px;
  padding:26px 34px;
  border-right:1px solid rgba(26,29,33,.10);
}
.mk-rev__logo{display:inline-flex;width:26px;height:26px;flex:none}
.mk-rev__logo svg{width:100%;height:100%}
.mk-rev__score{
  font-family:"Poppins",sans-serif;font-size:26px;font-weight:800;
  letter-spacing:-.03em;color:#1A1D21;line-height:1;
}
.mk-rev__meta{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.3}
.mk-rev__meta b{font-weight:700;color:#1A1D21;font-size:13px}
.mk-rev__meta{color:#6b7780}
.mk-rev--note{border-right:0;padding-left:38px}
.mk-rev--note span{font-size:13.5px;line-height:1.55;color:#6b7780;max-width:34ch}

@media (max-width:991px){
  .mk-revstrip{padding-bottom:64px}
  .mk-revstrip__row{grid-template-columns:1fr 1fr}
  .mk-rev{padding:20px 22px;border-bottom:1px solid rgba(26,29,33,.10)}
  .mk-rev--note{grid-column:1 / -1;padding-left:22px}
}
@media (max-width:575px){ .mk-revstrip__row{grid-template-columns:1fr} }

/* ══ get-a-quote form ═════════════════════════════════════════════════ */
.mk-form-section{background:#1A1D21!important;padding:110px 0!important}
.mk-form-section .tp-section-title-clash-600{color:#fff}
.mk-form-section .tp-section-subtitle-satisfy{color:var(--mk-accent,#A3561F)!important}

.mk-q__lede{margin:20px 0 0;max-width:40ch;font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.74)}
.mk-q__call{
  display:inline-block;margin:28px 0 0;padding:15px 30px;border-radius:999px;
  background:var(--mk-cta,#A3561F);color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;
  transition:transform .3s ease, filter .3s ease;
}
.mk-q__call:hover{transform:translateY(-2px);filter:brightness(1.07);color:#fff}

.mk-q__meta{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.mk-q__meta li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.66)}
.mk-q__meta b{color:#fff;font-weight:700;margin-right:5px}

.mk-q__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mk-q__form label,.mk-q__full{
  display:block;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.80);margin-bottom:0;
}
.mk-q__full{margin-top:18px}
.mk-q__form input,.mk-q__form select,.mk-q__form textarea{
  display:block;width:100%;margin-top:8px;
  padding:14px 16px;border-radius:8px;
  background:#fff;color:#1A1D21;border:1px solid rgba(255,255,255,.14);
  font-size:16px;font-family:inherit;
}
.mk-q__form textarea{resize:vertical;min-height:118px}
.mk-q__send{
  margin-top:22px;width:100%;padding:17px 24px;border:0;border-radius:999px;
  background:var(--mk-cta,#A3561F);color:#fff;font-weight:700;font-size:16px;cursor:pointer;
  transition:filter .3s ease;
}
.mk-q__send:hover{filter:brightness(1.07)}
.mk-q__fine{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.52)}
.mk-hp{position:absolute;left:-9999px}

@media (max-width:991px){
  .mk-form-section{padding:70px 0!important}
  .mk-q__grid{grid-template-columns:1fr}
  .mk-q__form{margin-top:44px}
}

/* testimonial quote was overflowing its column */
.ar-testimonial-area [class*="title"],
.ar-testimonial-area p{
  font-size:clamp(19px,1.8vw,27px)!important;line-height:1.42!important;
  max-width:24ch;margin-left:auto;margin-right:auto;
}

/* ══ service panels: the template's format, _core's information ═══════ */
.ar-service-item{position:relative}

.mk-svc__body{
  position:absolute;left:0;bottom:0;
  width:100%;padding:38px 34px 34px;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  background:linear-gradient(to top,rgba(10,12,14,.88),rgba(10,12,14,.45) 55%,transparent);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
/* only the open panel carries the detail — collapsed ones keep the vertical label */
.ar-service-item.active .mk-svc__body,
.ar-service-item:hover .mk-svc__body{opacity:1;transform:translateY(0)}

.mk-svc__n{
  font-family:"Poppins",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--mk-accent,#A3561F);margin-bottom:10px;
}
.mk-svc__t{
  margin:0 0 9px;font-size:clamp(21px,1.9vw,29px);font-weight:600;letter-spacing:-.02em;
  color:#fff;line-height:1.1;
}
.mk-svc__d{
  margin:0 0 14px;max-width:38ch;
  font-size:14.5px;line-height:1.58;font-weight:500;color:rgba(255,255,255,.76);
}
.mk-svc__p{
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--mk-accent,#A3561F);font-variant-numeric:tabular-nums;
}
/* the vertical label fades out once the panel opens, so they don't collide */
.ar-service-item.active .ar-service-title,
.ar-service-item:hover .ar-service-title{opacity:0;transition:opacity .3s ease}

@media (max-width:991px){
  .mk-svc__body{position:static;opacity:1;transform:none;background:#1A1D21;padding:26px 22px}
  .ar-service-item .ar-service-title{display:none}
  .mk-svc__d{max-width:none}
}

/* ── Quote form on beige ───────────────────────────────────────────────────
   The form block was #1A1D21 with white text, which read as a second dark
   footer stacked on the real one. Put it on the page's beige ground and flip
   the type back to ink. Only .mk-form-section changes — the pricing and
   service-area blocks keep the dark treatment. */
.mk-form-section{
  background:#EDEAE3!important;
}
.mk-form-section *{ color:var(--mk-ink,#1A1D21)!important; }
.mk-form-section p,
.mk-form-section small{ color:rgba(26,29,33,.72)!important; }
.mk-form-section .tp-section-subtitle-satisfy{ color:var(--mk-cta,#A3561F)!important; }
.mk-form-section input,
.mk-form-section select,
.mk-form-section textarea{
  background:#fff!important;
  border:1px solid rgba(26,29,33,.16)!important;
  color:var(--mk-ink,#1A1D21)!important;
}
.mk-form-section input::placeholder,
.mk-form-section textarea::placeholder{ color:rgba(26,29,33,.45)!important; }
.mk-form-section button,
.mk-form-section [type="submit"]{
  background:var(--mk-cta,#A3561F)!important;
  color:#fff!important;
}
.mk-form-section button *,
.mk-form-section [type="submit"] *{ color:#fff!important; }
.mk-form-section hr,
.mk-form-section [class*="border"]{ border-color:rgba(26,29,33,.14)!important; }

/* ── Services accordion on a light ground ─────────────────────────────────
   The template keeps .ar-service-bg at opacity:0 until an item is .active,
   which works on the original's dark section — the collapsed panels read as
   dark panels. Ours sits on beige, so the three inactive panels rendered as
   blank cream with a floating vertical label and the section looked broken.
   Show every panel's image dimmed, and let active/hover bring it to full. */
.ar-service-item .ar-service-bg{
  opacity:.55;
  visibility:visible;
  transition:opacity .4s ease, transform .5s ease;
}
.ar-service-item.active .ar-service-bg,
.ar-service-item:hover .ar-service-bg{
  opacity:1;
}
/* the rotated label needs to stay legible over the image */
.ar-service-item .ar-service-title{
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

/* ── Testimonials ─────────────────────────────────────────────────────────
   The slides carried a bare <p> — no header, no name, no rating — so the
   section read as an empty beige field with a floating paragraph. Give it a
   proper head, a quote mark to anchor the eye, and attribution under each
   quote so it reads as a person rather than filler copy. */
.ar-testimonial-area{ background:#F2F0EB; padding-top:110px; }
.mk-testi-head{ margin-bottom:20px; }
.mk-testi-head__note{
  font-size:15px;
  color:rgba(26,29,33,.60);
  max-width:52ch;
  margin:0 auto;
}
/* oversized quote mark behind the slider */
.ar-testimonial-slider-wrap{ position:relative; }
.ar-testimonial-slider-wrap::before{
  content:"\201C";
  position:absolute;
  top:-46px; left:50%;
  transform:translateX(-50%);
  font-family:Georgia,serif;
  font-size:190px;
  line-height:1;
  color:rgba(26,29,33,.07);
  pointer-events:none;
  z-index:0;
}
.ar-testimonial-item{ position:relative; z-index:1; }
.ar-testimonial-item p{ font-size:26px!important; line-height:1.5!important; }

.mk-testi-foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(26,29,33,.12);
}
.mk-testi-stars{
  color:var(--mk-cta,#A3561F);
  letter-spacing:3px;
  font-size:15px;
}
.mk-testi-name{ font-weight:700; font-size:16px; color:var(--mk-ink,#1A1D21); }
.mk-testi-meta{ font-size:13.5px; color:rgba(26,29,33,.55); }

@media (max-width:767px){
  .ar-testimonial-area{ padding-top:70px; }
  .ar-testimonial-item p{ font-size:20px!important; }
  .ar-testimonial-slider-wrap::before{ font-size:120px; top:-30px; }
}

/* ── Credibility marquee ──────────────────────────────────────────────────
   Was a static 3-item row that read as a footnote. Now nine proofs on a
   continuous scroll: ratings, licence, insurance, bond, warranty, response
   time. Duplicated track so the loop is seamless; pauses on hover so a
   visitor can actually read one. */
.mk-credbar{
  background:var(--mk-ink,#1A1D21);
  padding:20px 0;
  overflow:hidden;
  position:relative;
}
.mk-credbar::before,
.mk-credbar::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.mk-credbar::before{ left:0;  background:linear-gradient(90deg,var(--mk-ink,#1A1D21),transparent); }
.mk-credbar::after { right:0; background:linear-gradient(270deg,var(--mk-ink,#1A1D21),transparent); }
.mk-credbar__track{ display:flex; width:max-content; animation:mkCredScroll 42s linear infinite; }
.mk-credbar:hover .mk-credbar__track{ animation-play-state:paused; }
.mk-credbar__run{ display:flex; align-items:center; }
@keyframes mkCredScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.mk-cred{
  display:flex; align-items:center; gap:10px;
  padding:0 34px;
  border-right:1px solid rgba(255,255,255,.14);
  white-space:nowrap;
}
.mk-cred .mk-rev__logo{ display:inline-flex; width:22px; height:22px; }
.mk-cred .mk-rev__logo svg{ width:100%; height:100%; }
.mk-cred__main{
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  color:var(--mk-cta,#A3561F);
}
.mk-cred__sub{ font-size:13px; color:rgba(255,255,255,.72); }
@media (max-width:767px){
  .mk-cred{ padding:0 22px; }
  .mk-cred__main{ font-size:18px; }
  .mk-cred__sub{ font-size:12px; }
  .mk-credbar__track{ animation-duration:30s; }
}

/* ── Pain cards: dynamic ──────────────────────────────────────────────────
   Flat boxes with a left rule. Give them lift, an accent edge that fills on
   hover, and a counter so the three read as a sequence. */
.mk-pain-grid{ counter-reset:pain; }
.mk-pain-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(26,29,33,.10);
  border-left:3px solid var(--mk-cta,#A3561F);
  border-radius:14px;
  padding:34px 30px 30px;
  height:100%;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.mk-pain-card::before{
  counter-increment:pain;
  content:"0" counter(pain);
  position:absolute; top:18px; right:24px;
  font-size:13px; font-weight:800; letter-spacing:.14em;
  color:rgba(26,29,33,.22);
}
.mk-pain-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--mk-cta,#A3561F);
  transform:scaleY(0); transform-origin:top;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.mk-pain-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -22px rgba(26,29,33,.38);
  border-color:rgba(217,83,43,.42);
}
.mk-pain-card:hover::after{ transform:scaleY(1); }
.mk-pain-card h4{ font-size:20px; margin:0 0 12px; }
.mk-pain-card p{ font-size:15.5px; line-height:1.62; color:rgba(26,29,33,.68); margin:0; }
.mk-pain-section{ padding-bottom:110px; }

/* ── Testimonials: minimalist ─────────────────────────────────────────────
   Strip it back — one quote, big, with the person and the job under it. The
   sub-line and oversized quote mark were competing with the words. */
.mk-testi-head__note{ display:none; }
.ar-testimonial-slider-wrap::before{ display:none; }
.mk-testi-head{ margin-bottom:52px; }
.ar-testimonial-item p{
  font-size:30px!important;
  line-height:1.42!important;
  font-weight:400!important;
  color:var(--mk-ink,#1A1D21)!important;
  max-width:22ch;
  margin:0 auto!important;
}
.mk-testi-foot{
  margin-top:38px; padding-top:0; border-top:0;
  flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px;
}
.mk-testi-stars{ font-size:13px; letter-spacing:2px; }
.mk-testi-name{ font-size:15px; }
.mk-testi-meta{ font-size:13.5px; color:rgba(26,29,33,.5); }
.mk-testi-meta::before{ content:"— "; }
@media (max-width:767px){
  .ar-testimonial-item p{ font-size:21px!important; max-width:100%; }
  .mk-testi-head{ margin-bottom:34px; }
}

/* ── Readable text on the light ground ────────────────────────────────────
   Measured against the beige (#F2F1EE):
     #A3561F script eyebrow   2.66:1  — fails even the 3:1 large-text bar
     #A3561F stars / links    3.56:1  — fails the 4.5:1 body-text bar
   Both are brand colours, so keep them for FILLS (buttons, bars, the dark
   sections) and use a darker variant only where they are TEXT on light.
   #A3561F = 4.66:1, #A3561F = 5.78:1 — both pass AA. */
.tp-section-subtitle-satisfy{ color:#A3561F!important; }
.mk-testi-stars{ color:#A3561F!important; }
.tp-btn-red-circle-text{ color:#A3561F!important; }
.mk-svc__p{ color:#A3561F!important; }
.mk-pain-card::before{ color:rgba(26,29,33,.42)!important; }

/* the tan/orange used as text anywhere on the beige ground */
.mk-area-section a:not([class*="btn"]),
.ar-about-area a:not([class*="btn"]),
.mk-faq-section a:not([class*="btn"]){ color:#A3561F!important; }

/* the dark sections keep the bright accent — plenty of contrast there */
.mk-form-section .tp-section-subtitle-satisfy,
.mk-price-section .tp-section-subtitle-satisfy,
.mk-credbar .mk-cred__main{ color:var(--mk-cta,#A3561F)!important; }

/* ── Section divider ──────────────────────────────────────────────────── */
.mk-rule{ background:transparent; padding:0; }
.mk-rule hr{
  margin:0; border:0; height:1px; opacity:1;
  background:linear-gradient(90deg,transparent,rgba(26,29,33,.16),transparent);
}

/* ── Fix: white !important text left on light sections ────────────────────
   core.css:1033-1035 sets white text with !important on p/li/small inside
   .mk-price-section, .mk-area-section and .mk-form-section — written when all
   three were dark (#1A1D21). .mk-area-section is now transparent over beige
   and .mk-form-section is beige, so that white text is invisible. The later
   .mk-area__lede{color:#4A5A64} could never win against an earlier
   !important. Restore readable ink on the two light sections only;
   .mk-price-section is still dark and keeps white. */
.mk-area-section p,
.mk-area-section li,
.mk-area-section .mk-area__lede,
.mk-form-section p,
.mk-form-section li{
  color:#4A5A64!important;
}
.mk-area-section small,
.mk-form-section small{
  color:rgba(26,29,33,.60)!important;
}
.mk-area-section *{ color:inherit; }
.mk-area-section .tp-section-title-clash-600,
.mk-area-section h1,.mk-area-section h2,.mk-area-section h3,.mk-area-section h4{
  color:#1A1D21!important;
}
.mk-area-section a:not([class*="btn"]){ color:#A3561F!important; }
.mk-area-section a:not([class*="btn"]):hover{ color:#1A1D21!important; }
/* catch every remaining light-tan eyebrow on the beige ground */
.mk-area-section .tp-section-subtitle-satisfy,
.ar-about-area .tp-section-subtitle-satisfy,
.ar-project-area .tp-section-subtitle-satisfy,
.mk-pain-section .tp-section-subtitle-satisfy,
.ar-testimonial-area .tp-section-subtitle-satisfy,
.mk-faq-section .tp-section-subtitle-satisfy,
.ar-service-area .tp-section-subtitle-satisfy{ color:#A3561F!important; }
/* except where the ground is dark or an image */
.ar-service-area .tp-section-subtitle-satisfy.text-white,
.ar-step-area .tp-section-subtitle-satisfy{ color:var(--mk-cta,#A3561F)!important; }

/* ── Brand mark ───────────────────────────────────────────────────────────
   A roof-line chevron in brown, set to the left of the Deckline wordmark
   wherever it appears (header, offcanvas, footer). currentColor so it
   inherits on dark grounds. */
.mk-logo-mark{
  display:inline-flex;
  align-items:center;
  width:1.05em; height:1.05em;
  margin-right:.42em;
  color:#A3561F;
  vertical-align:-.14em;
  flex:0 0 auto;
}
.mk-logo-mark svg{ width:100%; height:100%; display:block; }
/* on the dark footer / offcanvas the brown goes muddy — lift it */
.ar-footer-area .mk-logo-mark,
.offcanvas__area .mk-logo-mark,
.tp-offcanvas-area .mk-logo-mark{ color:#A3561F; }
.loog, .mk-logo, [class*="logo"] a{ display:inline-flex; align-items:center; }

/* ── Credibility bar, back to the light ground ───────────────────────────
   Static row again — reviews plus HomeAdvisor membership only. The nine-item
   dark marquee was louder than the hero it sat under. */
.mk-credbar--light{
  background:#F2F1EE;
  border-top:1px solid rgba(26,29,33,.10);
  border-bottom:1px solid rgba(26,29,33,.10);
  padding:20px 0;
  overflow:visible;
}
.mk-credbar--light::before,
.mk-credbar--light::after{ display:none; }
.mk-credbar__row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
}
.mk-credbar--light .mk-cred{
  padding:4px 42px;
  border-right:1px solid rgba(26,29,33,.14);
}
.mk-credbar--light .mk-cred:last-child{ border-right:0; }
.mk-credbar--light .mk-cred__main{ color:#1A1D21; font-size:21px; }
.mk-credbar--light .mk-cred__sub{ color:rgba(26,29,33,.62); font-size:13.5px; }
.mk-credbar--light .mk-rev__logo{ width:24px; height:24px; }

@media (max-width:767px){
  .mk-credbar--light .mk-cred{ padding:8px 18px; border-right:0; }
  .mk-credbar__row{ gap:4px; }
  .mk-credbar--light .mk-cred__main{ font-size:18px; }
  .mk-credbar--light .mk-cred__sub{ font-size:12px; }
}

/* hero sub-line: one line, given room to breathe */
.ar-hero-area .ar-hero-content p,
.ar-hero-area .tp-hero-subtitle,
.ar-hero-area p.disc{
  max-width:none!important;
  font-size:clamp(16px,1.35vw,19px)!important;
  white-space:normal!important;
}

/* ── Credibility banner: brown, brand-mark colour ─────────────────────── */
.mk-credbar--light{
  background:#A3561F;
  border-top:0;
  border-bottom:0;
  padding:22px 0;
}
.mk-credbar--light .mk-cred{ border-right:1px solid rgba(255,255,255,.22); }
.mk-credbar--light .mk-cred:last-child{ border-right:0; }
.mk-credbar--light .mk-cred__main{ color:#fff; font-size:21px; }
.mk-credbar--light .mk-cred__sub{ color:rgba(255,255,255,.78); }

/* ── Pain cards, TrueDrive style ──────────────────────────────────────────
   Dark card, accent index, white heading, muted body, hairline border —
   the same treatment as the TrueDrive promise cards rather than white boxes
   with a coloured spine. */
.mk-pain-section{ background:#1A1D21; padding:96px 0 104px; }
.mk-pain-section .tp-section-title-clash-600{ color:#fff!important; }
.mk-pain-card{
  background:linear-gradient(160deg,rgba(217,83,43,.10),rgba(255,255,255,.015) 55%);
  border:1px solid rgba(255,255,255,.10);
  border-left:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:38px 32px 34px;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.mk-pain-card::before{
  position:static;
  display:block;
  font-family:"Archivo","Poppins",sans-serif;
  font-size:34px; font-weight:900; letter-spacing:-.04em; line-height:1;
  color:#A3561F; margin-bottom:18px;
}
.mk-pain-card::after{ display:none; }
.mk-pain-card:hover{
  transform:translateY(-4px);
  border-color:rgba(217,83,43,.42);
  box-shadow:none;
}
.mk-pain-card h4{ color:#fff!important; font-size:21px; margin:0 0 10px; }
.mk-pain-card p{ color:rgba(255,255,255,.66)!important; font-size:15px; line-height:1.6; }

/* ── About: give the section a voice ─────────────────────────────────── */
.mk-about__eyebrow{
  font-family:inherit!important;
  font-style:normal!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.2em!important;
  text-transform:uppercase!important;
  color:#A3561F!important;
}
.ar-about-area .ar-about-title-box p,
.ar-about-area p:not([class]){
  font-size:17.5px!important;
  line-height:1.68!important;
  color:#3D4A54!important;
  max-width:52ch;
}

/* ── Licensed / insured / bonded band ───────────────────────────────── */
.mk-lic{ background:#F2F1EE; padding:88px 0 96px; border-top:1px solid rgba(26,29,33,.10); }
.mk-lic__head{ text-align:center; max-width:60ch; margin:0 auto 46px; }
.mk-lic__k{
  display:block; font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:#A3561F; margin-bottom:12px;
}
.mk-lic__h{
  font-family:"Archivo","Poppins",sans-serif;
  font-size:clamp(28px,3.2vw,44px); font-weight:800; letter-spacing:-.025em;
  line-height:1.1; color:#1A1D21; margin:0;
}
.mk-lic__card{
  position:relative; height:100%;
  background:#fff;
  border:1px solid rgba(26,29,33,.10);
  border-radius:14px;
  padding:32px 28px 28px;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.mk-lic__card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:#A3561F; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.mk-lic__card:hover{
  transform:translateY(-6px);
  border-color:rgba(122,78,36,.34);
  box-shadow:0 24px 46px -24px rgba(26,29,33,.34);
}
.mk-lic__card:hover::before{ transform:scaleX(1); }
.mk-lic__fig{
  display:block;
  font-family:"Archivo","Poppins",sans-serif;
  font-size:40px; font-weight:900; letter-spacing:-.045em; line-height:1;
  color:#A3561F; margin-bottom:16px;
}
.mk-lic__t{ font-size:17px; font-weight:700; color:#1A1D21; margin:0 0 6px; }
.mk-lic__d{ font-size:14px; color:rgba(26,29,33,.60); margin:0; }

/* ── Testimonials: wider, so the quote reads as a statement ──────────── */
.ar-testimonial-item p{
  max-width:34ch!important;
  font-size:clamp(24px,2.4vw,34px)!important;
  line-height:1.34!important;
}
.mk-testi-head h3{ font-size:clamp(28px,3.4vw,46px)!important; }

@media (max-width:767px){
  .mk-pain-section{ padding:56px 0 60px; }
  .mk-lic{ padding:52px 0 56px; }
  .mk-lic__head{ margin-bottom:30px; }
  .mk-lic__fig{ font-size:32px; }
  .ar-testimonial-item p{ max-width:100%!important; font-size:21px!important; }
}
/* the earlier ".mk-credbar .mk-cred__main{color:var(--mk-cta)!important}" was
   written for the dark bar; on brown it measures 1.77:1. White is 6.4:1. */
.mk-credbar--light .mk-cred__main,
.mk-credbar.mk-credbar--light .mk-cred__main{ color:#fff!important; }
.mk-credbar--light .mk-cred__sub{ color:rgba(255,255,255,.80)!important; }

/* ── Credibility bar back on cream, with life ─────────────────────────── */
.mk-credbar--light{
  background:#F2F1EE;
  border-top:1px solid rgba(26,29,33,.10);
  border-bottom:1px solid rgba(26,29,33,.10);
  padding:18px 0;
}
.mk-credbar--light .mk-cred{
  border-right:1px solid rgba(26,29,33,.14);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.mk-credbar--light .mk-cred:last-child{ border-right:0; }
.mk-credbar--light .mk-cred:hover{ transform:translateY(-3px); }
.mk-credbar--light .mk-cred__main{
  color:#1A1D21!important; font-size:22px;
  transition:color .3s ease;
}
.mk-credbar--light .mk-cred:hover .mk-cred__main{ color:#A3561F!important; }
.mk-credbar--light .mk-cred__sub{ color:rgba(26,29,33,.62)!important; }
.mk-credbar--light .mk-rev__logo{
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.mk-credbar--light .mk-cred:hover .mk-rev__logo{ transform:scale(1.14) rotate(-4deg); }
/* a slow shimmer so the bar isn't inert */
.mk-credbar--light{ position:relative; overflow:hidden; }
.mk-credbar--light::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:mkShine 7s ease-in-out infinite;
}
@keyframes mkShine{ 0%,72%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

/* ── Pain slider on cream ─────────────────────────────────────────────── */
.mk-pain-section{ background:#F2F1EE; padding:92px 0 96px; }
.mk-pain-section .tp-section-title-clash-600{ color:#1A1D21!important; margin-bottom:52px; }
.mk-painslider{ padding:0 62px; }
.mk-painslider__el{ overflow:hidden; }
.mk-pain-card{
  background:#fff;
  border:1px solid rgba(26,29,33,.10);
  border-radius:14px;
  padding:34px 30px 30px;
  height:auto;
  min-height:230px;
}
.mk-pain-card::before{ color:#A3561F; }
.mk-pain-card h4{ color:#1A1D21!important; }
.mk-pain-card p{ color:rgba(26,29,33,.66)!important; }
.mk-painslider__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(26,29,33,.20); background:#fff; color:#1A1D21;
  font-size:17px; line-height:1; cursor:pointer; z-index:3;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.mk-painslider__nav:hover{ background:#A3561F; color:#fff; border-color:#A3561F; }
.mk-painslider__nav--prev{ left:0; }
.mk-painslider__nav--next{ right:0; }

/* ── Before / after ───────────────────────────────────────────────────── */
.mk-ba{ height:100%; }
.mk-ba__meta{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.mk-ba__city{ font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#A3561F; }
.mk-ba__job{ font-size:15px; color:rgba(26,29,33,.62); }
.mk-ba__stage{
  position:relative; overflow:hidden; border-radius:14px;
  aspect-ratio:4/3; background:#ddd; isolation:isolate;
}
.mk-ba__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk-ba__clip{ position:absolute; inset:0; width:50%; overflow:hidden; }
.mk-ba__clip img{ width:auto; min-width:100%; }
.mk-ba__tag{
  position:absolute; bottom:14px; z-index:3;
  padding:5px 12px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(26,29,33,.78); color:#fff; backdrop-filter:blur(4px);
}
.mk-ba__tag--b{ left:14px; }
.mk-ba__tag--a{ right:14px; }
.mk-ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:4;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18); pointer-events:none;
}
.mk-ba__handle::after{
  content:"\2194"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:#fff; color:#1A1D21;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.mk-ba__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.mk-ba__note{ margin:16px 0 0; font-size:14.5px; line-height:1.6; color:rgba(26,29,33,.68); }
.mk-ba__note strong{ color:#1A1D21; }

/* ── Recent work gallery ──────────────────────────────────────────────── */
.mk-gal{ padding:96px 0 0; }
.mk-gal__head{ margin-bottom:34px; }
.mk-gal__k{ display:block; font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:#A3561F; margin-bottom:10px; }
.mk-gal__h{ font-family:"Archivo","Poppins",sans-serif; font-size:clamp(26px,3vw,42px);
  font-weight:800; letter-spacing:-.025em; color:#1A1D21; margin:0; }
.mk-gal__wrap{ padding:0 62px; }
.mk-gal__el{ overflow:hidden; }
.mk-gal__card{ margin:0; position:relative; overflow:hidden; border-radius:14px; cursor:zoom-in; }
.mk-gal__card img{ width:100%; height:300px; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.mk-gal__card:hover img{ transform:scale(1.06); }
.mk-gal__cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.62),transparent);
}
.mk-gal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(26,29,33,.20); background:#fff; color:#1A1D21;
  font-size:17px; cursor:pointer; z-index:3;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.mk-gal__nav:hover{ background:#A3561F; color:#fff; border-color:#A3561F; }
.mk-gal__nav--prev{ left:0; }
.mk-gal__nav--next{ right:0; }

@media (max-width:767px){
  .mk-painslider,.mk-gal__wrap{ padding:0 46px; }
  .mk-painslider__nav,.mk-gal__nav{ width:38px; height:38px; }
  .mk-gal__card img{ height:220px; }
  .mk-gal{ padding-top:56px; }
}

/* ── Credibility bar, final ───────────────────────────────────────────────
   Beige ground (primary), brown-orange accents (secondary). Four proofs.
   Minimal: no boxes, no shadows — a hairline rail, a rule between each, and
   a brown underline that draws in on hover. The whole bar is one quiet strip
   that rewards attention rather than demanding it. */
.mk-credbar--light{
  background:#F2F1EE;
  border-top:1px solid rgba(122,78,36,.18);
  border-bottom:1px solid rgba(122,78,36,.18);
  padding:22px 0;
  position:relative;
  overflow:hidden;
}
.mk-credbar--light::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:mkShine 9s ease-in-out infinite;
}
.mk-credbar__row{ gap:0; }
.mk-credbar--light .mk-cred{
  position:relative;
  padding:6px 40px;
  border-right:1px solid rgba(122,78,36,.16);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.mk-credbar--light .mk-cred:last-child{ border-right:0; }
.mk-credbar--light .mk-cred::after{
  content:""; position:absolute; left:40px; right:40px; bottom:-6px; height:2px;
  background:#A3561F; transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.mk-credbar--light .mk-cred:hover{ transform:translateY(-2px); }
.mk-credbar--light .mk-cred:hover::after{ transform:scaleX(1); }
.mk-credbar--light .mk-cred__main{
  color:#1A1D21!important;
  font-size:23px;
  transition:color .3s ease;
}
.mk-credbar--light .mk-cred:hover .mk-cred__main{ color:#A3561F!important; }
.mk-credbar--light .mk-cred__sub{
  color:rgba(26,29,33,.58)!important;
  font-size:13px;
  letter-spacing:.01em;
}
.mk-credbar--light .mk-rev__logo{
  width:26px; height:26px;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.mk-credbar--light .mk-cred:hover .mk-rev__logo{ transform:translateY(-2px) scale(1.1); }

@media (max-width:1199px){
  .mk-credbar--light .mk-cred{ padding:6px 26px; }
  .mk-credbar--light .mk-cred::after{ left:26px; right:26px; }
  .mk-credbar--light .mk-cred__main{ font-size:20px; }
}
@media (max-width:767px){
  .mk-credbar__row{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mk-credbar__row::-webkit-scrollbar{ display:none; }
  .mk-credbar--light .mk-cred{ padding:6px 20px; flex:0 0 auto; }
  .mk-credbar--light .mk-cred::after{ left:20px; right:20px; }
  .mk-credbar--light .mk-cred__main{ font-size:18px; }
  .mk-credbar--light .mk-cred__sub{ font-size:12px; }
}
/* the brown-bar override used .mk-credbar.mk-credbar--light (0,2,0) and kept
   winning after the bar went back to beige — white on #F2F1EE is 1.13:1 */
.mk-credbar.mk-credbar--light .mk-cred__main{ color:#1A1D21!important; }
.mk-credbar.mk-credbar--light .mk-cred:hover .mk-cred__main{ color:#A3561F!important; }
.mk-credbar.mk-credbar--light .mk-cred__sub{ color:rgba(26,29,33,.58)!important; }

/* ── One accent, no red ───────────────────────────────────────────────────
   Palette is beige (#F2F1EE) primary, brownish-orange (#A3561F) secondary.
   The Agntix template ships a bright red (#FF481F) on ~46 tp-btn-red rules
   and a few tokens; map every one of them onto the brown-orange so nothing
   red survives. Third-party brand logos (Google, Yelp, BBB, Nextdoor) keep
   their own colours — those must stay accurate. */
:root{
  --mk-cta:#A3561F;
  --mk-accent:#A3561F;
  --tp-common-red:#A3561F;
  --tp-theme-primary:#A3561F;
}
[class*="tp-btn-red"],
[class*="tp-btn-red"]:hover,
.tp-btn-red-circle-text,
.tp-btn-red-circle-icon,
.tp-btn-red-border{
  color:#A3561F!important;
  border-color:#A3561F!important;
}
[class*="tp-btn-red"] svg [stroke]{ stroke:#A3561F!important; }
[class*="tp-btn-red"] svg [fill]:not([fill="none"]){ fill:#A3561F!important; }
.tp-btn-red-circle:hover,
.tp-btn-red-bg{ background:#A3561F!important; color:#fff!important; }

/* anything still resolving to the template red */
[style*="#FF481F"],[style*="#ff481f"]{ color:#A3561F!important; }

/* ── Before & after: single card, captions underneath ─────────────────── */
.mk-ba__grid{ margin-top:8px; }
.mk-ba__stage{ aspect-ratio:16/9; border-radius:16px; }
.mk-ba__tag{ display:none; }
.mk-ba__handle{ width:3px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.14); }
.mk-ba__handle::after{
  width:46px; height:46px; font-size:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  color:#A3561F;
}
.mk-ba__caps{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  margin-top:20px;
}
.mk-ba__cap{
  margin:0; font-size:14.5px; line-height:1.6; color:rgba(26,29,33,.66);
  padding-left:14px; border-left:2px solid rgba(26,29,33,.14);
}
.mk-ba__cap span{
  display:block; margin-bottom:4px;
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(26,29,33,.42);
}
.mk-ba__cap--a{ border-left-color:#A3561F; }
.mk-ba__cap--a span{ color:#A3561F; }
@media (max-width:767px){
  .mk-ba__stage{ aspect-ratio:4/3; }
  .mk-ba__caps{ grid-template-columns:1fr; gap:14px; margin-top:16px; }
}
/* the last five #FF481F survivors, found by scanning computed styles */
.ar-about-exp-box,
.ar-about-exp-box *{ border-color:#A3561F!important; }
.ar-footer-widget-btn,
.ar-footer-widget-btn:hover{ background:#A3561F!important; border-color:#A3561F!important; }
.ar-about-area span[style*="FF481F"],
.ar-about-area .ar-about-exp-box span,
.ar-footer-area span{ color:inherit; }
[class*="ar-"] [style*="#FF481F"]{ color:#A3561F!important; }
/* catch anything still inheriting the raw token */
*:not(svg):not(svg *){ --tp-common-red:#A3561F; }
.ar-about-exp-box h4,
.ar-about-exp-box h1,.ar-about-exp-box h2,.ar-about-exp-box h3,
.ar-about-exp-box span{ color:#A3561F!important; }

/* ── Pain: minimal ────────────────────────────────────────────────────────
   Was a slider with counters — three cards do not need navigation, and the
   CSS counter reset once per slide so every card read "01". Plain row, no
   numbers, no chrome. Sits between the work and the process: problem, then
   how we handle it. */
.mk-pain-section{ background:#F2F1EE; padding:88px 0 92px; }
.mk-pain-head{ text-align:center; margin-bottom:48px; }
.mk-pain-k{
  display:block; font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:#A3561F; margin-bottom:12px;
}
.mk-pain-h{
  font-family:"Archivo","Poppins",sans-serif;
  font-size:clamp(28px,3.4vw,46px); font-weight:800; letter-spacing:-.025em;
  color:#1A1D21; margin:0;
}
.mk-pain-card{
  background:transparent;
  border:0;
  border-top:1px solid rgba(26,29,33,.16);
  border-radius:0;
  padding:24px 0 0;
  min-height:0;
  height:100%;
  transition:border-color .3s ease;
}
.mk-pain-card::before,
.mk-pain-card::after{ content:none!important; display:none!important; }
.mk-pain-card:hover{ border-top-color:#A3561F; transform:none; box-shadow:none; }
.mk-pain-card h4{
  font-size:19px!important; font-weight:700!important;
  color:#1A1D21!important; margin:0 0 10px!important;
}
.mk-pain-card p{
  font-size:15px!important; line-height:1.62!important;
  color:rgba(26,29,33,.62)!important; margin:0!important;
}

/* ── About: direct, with room ─────────────────────────────────────────── */
.ar-about-area .tp-section-title-clash-600{
  font-size:clamp(30px,3.6vw,50px)!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
  color:#1A1D21!important;
  max-width:16ch;
}
.mk-about__lede{
  margin:22px 0 0!important;
  max-width:46ch;
  font-size:17px!important;
  line-height:1.66!important;
  color:#3D4A54!important;
}
.mk-about__eyebrow{ margin-bottom:14px!important; display:block; }

@media (max-width:767px){
  .mk-pain-section{ padding:52px 0 56px; }
  .mk-pain-head{ margin-bottom:28px; }
  .ar-about-area .tp-section-title-clash-600{ max-width:none; }
}

/* ── Credibility bar: give it a voice ─────────────────────────────────── */
.mk-credbar__lead{
  margin:0 0 16px; text-align:center;
  font-size:11.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(26,29,33,.42);
}
.mk-credbar--light{ padding:26px 0 24px; }
.mk-credbar--light .mk-cred__main{ font-size:26px!important; letter-spacing:-.02em; }
.mk-credbar--light .mk-cred__sub{ font-size:13px; }
.mk-credbar--light .mk-rev__logo{ width:28px; height:28px; }

/* ── Pricing table: alive on hover ────────────────────────────────────────
   Rows were inert. Now each row lifts its own ground, the index brightens,
   the name nudges right and the figure scales — so scanning the list feels
   like moving through it rather than reading a static table. */
.mk-price-section [class*="price-item"],
.mk-price-section .mk-price__row,
.mk-price-section tr{
  position:relative;
  transition:background .3s ease;
}
.mk-price-section [class*="price-item"]::after,
.mk-price-section .mk-price__row::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:#A3561F; transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.mk-price-section [class*="price-item"]:hover::after,
.mk-price-section .mk-price__row:hover::after{ width:100%; }
.mk-price-section [class*="price-item"]:hover,
.mk-price-section .mk-price__row:hover{ background:rgba(255,255,255,.035); }
.mk-price-section [class*="price-item"] > *,
.mk-price-section .mk-price__row > *{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease;
}
.mk-price-section [class*="price-item"]:hover h4,
.mk-price-section .mk-price__row:hover h4,
.mk-price-section [class*="price-item"]:hover [class*="name"],
.mk-price-section .mk-price__row:hover [class*="name"]{ transform:translateX(6px); }
.mk-price-section [class*="price-item"]:hover [class*="price"],
.mk-price-section .mk-price__row:hover [class*="price"]{
  transform:scale(1.06); color:#A3561F!important;
}

/* ── Where we work: pills that respond ────────────────────────────────── */
.mk-sub{
  position:relative; overflow:hidden;
  transition:border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mk-sub::before{
  content:""; position:absolute; inset:0; background:#A3561F;
  transform:translateY(101%); transition:transform .34s cubic-bezier(.2,.8,.2,1); z-index:0;
}
.mk-sub > *{ position:relative; z-index:1; }
.mk-sub:hover{ color:#fff!important; border-color:#A3561F!important; transform:translateY(-2px); }
.mk-sub:hover::before{ transform:translateY(0); }
.mk-area__thumb img{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.mk-area__thumb{ overflow:hidden; border-radius:16px; }
.mk-area__thumb:hover img{ transform:scale(1.05); }

/* ── Credentials cards: a touch more motion ───────────────────────────── */
.mk-lic__card .mk-lic__fig{ transition:transform .35s cubic-bezier(.2,.8,.2,1); display:block; }
.mk-lic__card:hover .mk-lic__fig{ transform:translateY(-3px); }

/* ── Credibility bar: make it carry ───────────────────────────────────────
   The lead was 11.5px at 42% opacity — legible only if you went looking.
   Bigger, darker, with a rule either side so it reads as a statement. Each
   proof gets a soft card that lifts and warms on hover. */
.mk-credbar--light{ padding:34px 0 30px; }
.mk-credbar__lead{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:0 0 22px;
  font-size:13px!important; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(26,29,33,.68)!important;
}
.mk-credbar__lead::before,
.mk-credbar__lead::after{
  content:""; height:1px; width:54px; background:rgba(122,78,36,.34);
}
.mk-credbar--light .mk-cred{
  padding:14px 30px;
  border-right:0;
  border-radius:12px;
  transition:transform .34s cubic-bezier(.2,.8,.2,1), background .3s ease, box-shadow .3s ease;
}
.mk-credbar--light .mk-cred::after{ display:none; }
.mk-credbar--light .mk-cred:hover{
  background:#fff;
  transform:translateY(-4px);
  box-shadow:0 18px 34px -20px rgba(26,29,33,.42);
}
.mk-credbar--light .mk-cred__main{
  font-size:30px!important; font-weight:900!important;
  color:#1A1D21!important; letter-spacing:-.03em;
}
.mk-credbar--light .mk-cred:hover .mk-cred__main{ color:#A3561F!important; }
.mk-credbar--light .mk-cred__sub{ font-size:13.5px!important; color:rgba(26,29,33,.66)!important; }
.mk-credbar--light .mk-rev__logo{ width:32px; height:32px; }

/* ── Buttons: label always readable ──────────────────────────────────── */
.mk-form-section .td-btn,
.mk-form-section [class*="btn"],
.mk-form-section button,
.mk-form-section a[href^="tel:"]{
  color:#fff!important;
}
.mk-form-section [class*="btn"] *,
.mk-form-section a[href^="tel:"] *{ color:#fff!important; }

/* ── Logo: bigger ─────────────────────────────────────────────────────── */
.mk-logo-word{ font-size:1.42em!important; letter-spacing:-.02em; }
.mk-logo-mark{ width:1.28em; height:1.28em; margin-right:.38em; }
.loog{ font-size:26px!important; }
@media (max-width:1199px){ .loog{ font-size:23px!important; } }

/* ── Tighter rhythm between sections ─────────────────────────────────── */
.ar-about-area{ padding-top:70px!important; padding-bottom:90px!important; }
.mk-area-section{ padding-bottom:60px!important; }
.crp-text-slider-wrap{ margin:10px 0 0!important; }
.mk-rule{ padding:0; }
.mk-rule hr{ margin:0; }
/* the logo lives in .tp-header-logo / .tp-offcanvas-2-logo / .ar-footer-logo,
   not .loog — set the size on the actual containers */
.tp-header-logo a,
.tp-offcanvas-2-logo a,
.ar-footer-logo a{
  display:inline-flex!important;
  align-items:center!important;
  font-size:30px!important;
  line-height:1!important;
}
.tp-header-logo .mk-logo-word,
.tp-offcanvas-2-logo .mk-logo-word,
.ar-footer-logo .mk-logo-word{ font-size:1em!important; font-weight:800!important; }
.tp-header-logo .mk-logo-mark,
.tp-offcanvas-2-logo .mk-logo-mark,
.ar-footer-logo .mk-logo-mark{ width:1.15em!important; height:1.15em!important; margin-right:.34em!important; }
@media (max-width:1199px){
  .tp-header-logo a,.tp-offcanvas-2-logo a,.ar-footer-logo a{ font-size:25px!important; }
}
@media (max-width:575px){
  .tp-header-logo a{ font-size:22px!important; }
}

/* ── Testimonials: no pagination, one clear head ─────────────────────────
   The "03 —— 03" fraction bar told the reader nothing and drew the eye away
   from the quote. Arrows are enough. */
.ar-testimonial-area .swiper-pagination,
.ar-testimonial-area [class*="pagination"],
.ar-testimonial-area [class*="slider-number"],
.ar-testimonial-area [class*="progress"]{
  display:none!important;
}
.mk-testi-head{ margin-bottom:44px; }
.mk-testi-head h3{
  font-size:clamp(30px,3.6vw,50px)!important;
  letter-spacing:-.03em!important;
  color:#1A1D21!important;
}

/* ── Where we work: bigger head, tighter pills, more motion ────────────── */
.mk-area-section .tp-section-title-clash-600{
  font-size:clamp(34px,4.4vw,64px)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
}
.mk-area__lede{ font-size:16px!important; max-width:40ch; }
.mk-subs{ gap:8px!important; margin-top:24px!important; max-width:42ch; }
.mk-sub{
  padding:7px 14px!important;
  font-size:13.5px!important;
  font-weight:700!important;
  border:1px solid rgba(122,78,36,.30)!important;
  background:transparent!important;
  color:#1A1D21!important;
}
.mk-sub:hover{ border-color:#A3561F!important; }
/* stagger the pills in as the section arrives */
.mk-subs .mk-sub{ animation:mkPillIn .5s cubic-bezier(.2,.8,.2,1) both; }
.mk-subs .mk-sub:nth-child(1){animation-delay:.02s}
.mk-subs .mk-sub:nth-child(2){animation-delay:.06s}
.mk-subs .mk-sub:nth-child(3){animation-delay:.10s}
.mk-subs .mk-sub:nth-child(4){animation-delay:.14s}
.mk-subs .mk-sub:nth-child(5){animation-delay:.18s}
.mk-subs .mk-sub:nth-child(6){animation-delay:.22s}
.mk-subs .mk-sub:nth-child(7){animation-delay:.26s}
.mk-subs .mk-sub:nth-child(8){animation-delay:.30s}
.mk-subs .mk-sub:nth-child(9){animation-delay:.34s}
.mk-subs .mk-sub:nth-child(10){animation-delay:.38s}
@keyframes mkPillIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .mk-subs .mk-sub{ animation:none!important; } }

/* ── Gallery + marquee now sit under the testimonials ─────────────────── */
.ar-testimonial-area + .mk-gal{ padding-top:56px; }
.mk-gal + .crp-text-slider-wrap{ margin-top:56px!important; }

/* ── Pain section pulled up to the image above it ─────────────────────── */
.mk-pain-section{ padding-top:52px!important; }
@media (max-width:767px){ .mk-pain-section{ padding-top:38px!important; } }

/* ── Credibility bar: no overlap, no shine ────────────────────────────────
   The hover state painted a white rounded card that was wider than its own
   item, so BBB and Nextdoor overlapped each other. The shine sweep read as a
   second floating card on top. Both removed — the bar now reacts with colour
   and a small lift only, which cannot collide with a neighbour. */
.mk-credbar--light::after{ display:none!important; content:none!important; }
.mk-credbar--light{ padding:24px 0; }
.mk-credbar--light .mk-cred{
  padding:6px 34px!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  border-right:1px solid rgba(122,78,36,.20)!important;
}
.mk-credbar--light .mk-cred:last-child{ border-right:0!important; }
.mk-credbar--light .mk-cred:hover{
  background:transparent!important;
  box-shadow:none!important;
  transform:translateY(-2px)!important;
}

/* ── Four stops: no icons, numbers quiet, titles loud ────────────────────
   The icons repeated what the words already said and the numbers were louder
   than the headings. Invert that: number small and set back, heading big. */
.ar-step-area [class*="step-icon"],
.ar-step-area .ar-step-icon,
.ar-step-item svg{ display:none!important; }

.ar-step-area [class*="step-count"],
.ar-step-area [class*="step-number"],
.ar-step-area .ar-step-num{
  font-family:"Archivo","Poppins",sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.24em!important;
  color:rgba(255,255,255,.40)!important;
  opacity:1!important;
  margin-bottom:14px!important;
  display:block!important;
}
.ar-step-title-sm,
.ar-step-area h4,
.ar-step-area h5{
  font-family:"Archivo","Poppins",sans-serif!important;
  font-size:clamp(21px,1.9vw,27px)!important;
  font-weight:800!important;
  line-height:1.14!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
  color:#fff!important;
  margin:0 0 12px!important;
  max-width:15ch;
}
.ar-step-area p{
  font-size:15.5px!important;
  line-height:1.62!important;
  color:rgba(255,255,255,.74)!important;
  max-width:32ch;
}
.ar-step-area .tp-section-title-clash-600{ margin-bottom:0!important; }
/* a hairline under each step so the four read as a sequence */
.ar-step-item,
.ar-step-area [class*="step-item"]{
  padding-top:26px!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
  transition:border-color .35s ease;
}
.ar-step-item:hover,
.ar-step-area [class*="step-item"]:hover{ border-top-color:#A3561F!important; }

@media (max-width:767px){
  .ar-step-title-sm,.ar-step-area h4,.ar-step-area h5{ font-size:19px!important; max-width:none; }
  .ar-step-area p{ max-width:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 15 — pain / roof types / credentials / testimonial / areas / about
   Every rule here is an override of an earlier layer, so !important is not
   decoration: the earlier .mk-pain-card and .mk-lic__card blocks (lines
   ~1059, ~1557, ~1767, ~1907, ~1812) each set the same properties and the
   last one that wins is whichever is later in the file. This is later.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. "Sound familiar?" — six cards, staggered, with a scroll cue ────────
   Six cards now, so the grid is a true 3×2 and the row gap has to breathe.
   The entrance is a CSS-only stagger keyed off nth-child rather than GSAP:
   the section sits high on the page and GSAP's ScrollTrigger has not always
   fired by the time it is in view on a fast load. */
.mk-pain-section{ padding:96px 0 84px!important; }
.mk-pain-row{ --pain-stagger:.07s; row-gap:26px!important; }
.mk-pain-row > [class*="col-"]{ display:flex; }

.mk-pain-card{
  position:relative;
  flex:1 1 auto;
  padding:26px 30px 30px 0!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid rgba(26,29,33,.18)!important;
  border-radius:0!important;
  box-shadow:none!important;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
/* the hairline is the whole visual language of this section — animate it */
/* core.css:2178 sets content:none!important AND display:none!important on both
   pseudo-elements (it killed the old "01" counter). Both have to be undone
   explicitly or the rule below renders nothing at all. */
.mk-pain-card::before{ content:none!important; display:none!important; }
.mk-pain-card::after{
  content:""!important;
  display:block!important;
  position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:#A3561F;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.mk-pain-card:hover{ transform:translateY(-4px)!important; background:transparent!important; }
.mk-pain-card:hover::after{ transform:scaleX(1); }
.mk-pain-card h4{
  font-size:19.5px!important; font-weight:700!important;
  color:#1A1D21!important; margin:0 0 10px!important;
  transition:color .3s ease;
}
.mk-pain-card:hover h4{ color:#A3561F!important; }
.mk-pain-card p{
  font-size:15.5px!important; line-height:1.62!important;
  color:rgba(26,29,33,.66)!important; margin:0!important; max-width:34ch;
}

@media (prefers-reduced-motion:no-preference){
  .mk-pain-row > [class*="col-"]{
    opacity:0; transform:translateY(22px);
    animation:mkPainIn .7s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .mk-pain-row > [class*="col-"]:nth-child(1){ animation-delay:calc(var(--pain-stagger) * 1); }
  .mk-pain-row > [class*="col-"]:nth-child(2){ animation-delay:calc(var(--pain-stagger) * 2); }
  .mk-pain-row > [class*="col-"]:nth-child(3){ animation-delay:calc(var(--pain-stagger) * 3); }
  .mk-pain-row > [class*="col-"]:nth-child(4){ animation-delay:calc(var(--pain-stagger) * 4); }
  .mk-pain-row > [class*="col-"]:nth-child(5){ animation-delay:calc(var(--pain-stagger) * 5); }
  .mk-pain-row > [class*="col-"]:nth-child(6){ animation-delay:calc(var(--pain-stagger) * 6); }
}
@keyframes mkPainIn{ to{ opacity:1; transform:translateY(0); } }

.mk-pain-scroll{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-top:64px;
}
.mk-pain-scroll__t{
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(26,29,33,.42);
}
.mk-pain-scroll__mouse{
  width:24px; height:38px; border-radius:13px;
  border:1.5px solid rgba(26,29,33,.30);
  position:relative; display:block;
}
.mk-pain-scroll__mouse i{
  position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:#A3561F; transform:translateX(-50%);
  animation:mkWheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes mkWheel{
  0%,12%   { opacity:0; transform:translate(-50%,0); }
  25%      { opacity:1; }
  70%,100% { opacity:0; transform:translate(-50%,13px); }
}
@media (prefers-reduced-motion:reduce){
  .mk-pain-scroll__mouse i{ animation:none; opacity:1; }
  .mk-pain-row > [class*="col-"]{ opacity:1; transform:none; animation:none; }
}
@media (max-width:767px){
  .mk-pain-section{ padding:58px 0 52px!important; }
  .mk-pain-card{ padding:24px 0 24px 0!important; }
  .mk-pain-card h4{ font-size:18px!important; margin-top:0!important; }
  .mk-pain-card p{ max-width:none; }
  .mk-pain-scroll{ margin-top:40px; }
}

/* ── 2. "Every kind of roof." — make the roof types actually readable ──────
   The rotated labels were 55%-opacity images behind them and no weight of
   their own, so TILE and FLAT & LOW-SLOPE were nearly invisible in the
   screenshot. Darken the inactive panels with a real scrim, then let the
   label sit on top at full white with a size that reads from across a room. */
.ar-service-item::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(15,17,19,.10) 0%,rgba(15,17,19,.72) 100%);
  transition:opacity .45s ease;
}
.ar-service-item.active::after,
.ar-service-item:hover::after{ opacity:.55; }
.ar-service-item .ar-service-bg{ opacity:.88!important; }
.ar-service-item .ar-service-title,
.ar-service-item .mk-svc__body{ position:relative; z-index:2; }

.ar-service-item .ar-service-title{
  font-size:clamp(20px,1.6vw,26px)!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:#fff!important;
  opacity:1!important;
  text-shadow:0 2px 18px rgba(0,0,0,.75)!important;
  transition:opacity .3s ease, letter-spacing .45s ease;
}
.ar-service-item:hover .ar-service-title{ letter-spacing:.22em!important; }
/* keep the template's swap: the vertical label hides once the panel opens */
.ar-service-item.active .ar-service-title{ opacity:0!important; }

.mk-svc__t{
  font-size:clamp(26px,2.3vw,36px)!important;
  font-weight:800!important; letter-spacing:-.01em!important;
  color:#fff!important; margin:0 0 10px!important;
}
.mk-svc__n{
  font-size:12px!important; font-weight:800!important;
  letter-spacing:.24em!important; color:rgba(255,255,255,.45)!important;
}
.mk-svc__p{
  display:inline-block; margin-top:14px;
  font-size:15px!important; font-weight:700!important;
  color:#A3561F!important;
  padding:7px 14px; border:1px solid rgba(232,165,95,.45); border-radius:999px;
}
.ar-service-title-box .tp-section-title-clash-600{ margin-bottom:0!important; }

/* ── 3. Credentials — the second credibility block, so make it land ────────
   Same six facts, but the cards now read as a wall of proof: a brown
   top-rule that fills on hover, the figure in the brand brown at display
   size, and a lift that is felt rather than seen. */
.mk-lic{ padding:96px 0 100px!important; }
.mk-lic__head{ margin-bottom:52px!important; }
.mk-lic__k{
  color:#A3561F!important; font-size:11.5px!important; font-weight:800!important;
  letter-spacing:.24em!important; text-transform:uppercase!important;
}
.mk-lic__h{ font-size:clamp(30px,3.2vw,46px)!important; letter-spacing:-.02em!important; }

.mk-lic__card{
  position:relative; overflow:hidden;
  height:100%;
  padding:30px 28px 28px!important;
  background:#fff!important;
  border:1px solid rgba(26,29,33,.08)!important;
  border-radius:14px!important;
  box-shadow:0 1px 2px rgba(26,29,33,.04)!important;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.mk-lic__card::before{
  content:""!important; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,#A3561F,#A3561F);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.mk-lic__card:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 18px 42px -18px rgba(122,78,36,.34)!important;
  border-color:rgba(163,86,31,.28)!important;
}
.mk-lic__card:hover::before{ transform:scaleX(1); }
.mk-lic__fig{
  font-size:clamp(34px,3.4vw,46px)!important;
  font-weight:800!important; line-height:1!important;
  letter-spacing:-.03em!important;
  color:#A3561F!important;
  margin-bottom:16px!important;
}
.mk-lic__t{ font-size:16.5px!important; font-weight:700!important; color:#1A1D21!important; }
.mk-lic__d{ font-size:13.5px!important; color:rgba(26,29,33,.55)!important; }
@media (max-width:767px){
  .mk-lic{ padding:56px 0 60px!important; }
  .mk-lic__head{ margin-bottom:30px!important; }
  .mk-lic__card{ padding:24px 22px!important; }
}

/* ── 4. Testimonial — the quote should be the loudest thing on the page ────
   It is the only place a stranger's voice appears, so it gets the largest
   type in the build, a brown pull-quote mark behind it, and real air.
   Recent work then sits directly under it: the marquee between them was
   carrying 150px of its own padding, which read as a dead field. */
.ar-testimonial-area{ padding-top:104px!important; padding-bottom:48px!important; }
.mk-testi-head{ margin-bottom:44px!important; }
.mk-testi-head .tp-section-title-clash-600,
.mk-testi-head h3{
  font-size:clamp(13px,1.1vw,15px)!important;
  font-weight:800!important; letter-spacing:.2em!important;
  text-transform:uppercase!important;
  color:rgba(26,29,33,.45)!important;
}
.ar-testimonial-slider-wrap{ position:relative; }
.ar-testimonial-slider-wrap::after{
  content:"\201C";
  position:absolute; left:50%; top:-56px; transform:translateX(-50%);
  font-family:Georgia,'Times New Roman',serif;
  font-size:220px; line-height:1; color:rgba(163,86,31,.10);
  pointer-events:none; z-index:0;
}
.ar-testimonial-item{ position:relative; z-index:1; }
.ar-testimonial-item p{
  font-size:clamp(24px,2.9vw,40px)!important;
  line-height:1.32!important;
  font-weight:500!important;
  letter-spacing:-.015em!important;
  color:#1A1D21!important;
  max-width:20ch; margin-left:auto; margin-right:auto;
}
.mk-testi-foot{ margin-top:38px!important; }
.mk-testi-stars{ color:#A3561F!important; font-size:14px!important; letter-spacing:3px!important; }
.mk-testi-name{ font-size:15.5px!important; font-weight:700!important; }
.mk-testi-meta{ font-size:13.5px!important; color:rgba(26,29,33,.55)!important; }
@media (max-width:767px){
  .ar-testimonial-area{ padding-top:62px!important; padding-bottom:56px!important; }
  .ar-testimonial-item p{ max-width:none; }
  .ar-testimonial-slider-wrap::after{ font-size:130px; top:-34px; }
}

/* the marquee is a divider, not a section — strip its padding so recent work
   sits close under the testimonial the way it was asked for */
.crp-text-slider-wrap{ padding:26px 0!important; margin:0!important; }
.mk-gal{ padding-top:56px!important; }
@media (max-width:767px){
  .crp-text-slider-wrap{ padding:16px 0!important; }
  .mk-gal{ padding-top:38px!important; }
}

/* ── 5. Where we work ─────────────────────────────────────────────────────
   Eighteen chips instead of ten, three hard facts above them, and a fallback
   line for anyone not on the list. The chips widen past the old 46ch cap. */
.mk-area-section .tp-section-title-clash-600{
  font-size:clamp(32px,3.6vw,54px)!important; letter-spacing:-.025em!important;
}
.mk-area__lede{
  color:#4A5A64!important; font-size:16px!important; line-height:1.62!important;
  max-width:46ch; margin-top:16px!important;
}
.mk-areastats{
  display:flex; flex-wrap:wrap; gap:34px;
  margin:32px 0 6px; padding:22px 0;
  border-top:1px solid rgba(26,29,33,.12);
  border-bottom:1px solid rgba(26,29,33,.12);
}
.mk-areastat{ display:flex; flex-direction:column; gap:6px; }
.mk-areastat__n{
  font-size:26px; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:#A3561F;
}
.mk-areastat__l{
  font-size:12px; font-weight:600; line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(26,29,33,.52);
}
.mk-subs{ max-width:none!important; gap:9px!important; margin-top:26px!important; }
.mk-sub{
  position:relative;
  padding:9px 17px!important;
  font-size:14px!important; font-weight:600!important;
  color:#1A1D21!important;
  background:#fff!important;
  border:1px solid rgba(26,29,33,.14)!important;
  border-radius:999px!important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease, color .3s ease;
}
.mk-sub:hover{
  transform:translateY(-2px);
  background:#A3561F!important; color:#fff!important;
  border-color:#A3561F!important;
}
.mk-sub--home{
  display:inline-flex; align-items:baseline; gap:8px;
  background:#A3561F!important; color:#fff!important; border-color:#A3561F!important;
}
.mk-sub--home small{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.mk-sub--home:hover{ background:#A3561F!important; border-color:#A3561F!important; }
.mk-area__note{
  margin:24px 0 0!important; font-size:14.5px!important;
  color:rgba(26,29,33,.60)!important;
}
.mk-area__note a{ color:#A3561F!important; font-weight:700; text-decoration:none; }
.mk-area__note a:hover{ color:#A3561F!important; text-decoration:underline; }
@media (max-width:767px){
  .mk-areastats{ gap:20px 26px; }
  .mk-areastat__n{ font-size:22px; }
  .mk-sub{ padding:8px 14px!important; font-size:13px!important; }
}

/* ── 6. About — this is the page people read before they book ─────────────
   The paragraph had template residue in it ("architectural & landscape
   workshop") and there was nothing under it, so the column ended in air.
   Four concrete promises and a signed line give it a floor. */
.mk-about__lede{
  color:#4A5A64!important; font-size:16.5px!important; line-height:1.6!important;
  max-width:56ch; margin:16px 0 0!important;
}
.ar-about-content p{ font-size:16px!important; line-height:1.65!important; color:#4A5A64!important; }
.mk-about__list{
  list-style:none; margin:24px 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.mk-about__list li{
  position:relative; padding-left:28px;
  font-size:15px; line-height:1.5; font-weight:600; color:#1A1D21;
}
.mk-about__list li::before{
  content:""; position:absolute; left:0; top:5px;
  width:15px; height:9px;
  border-left:2px solid #A3561F; border-bottom:2px solid #A3561F;
  transform:rotate(-45deg);
}
.mk-about__sign{
  margin-top:28px; padding-top:20px;
  border-top:1px solid rgba(26,29,33,.14);
  display:flex; flex-direction:column; gap:3px;
}
.mk-about__signname{
  font-family:Georgia,'Times New Roman',serif;
  font-size:24px; font-style:italic; color:#A3561F; line-height:1.1;
}
.mk-about__signrole{
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:rgba(26,29,33,.55);
}
.ar-about-area{ padding-top:96px!important; padding-bottom:112px!important; }
@media (max-width:767px){
  .ar-about-area{ padding-top:58px!important; padding-bottom:62px!important; }
  .mk-about__list li{ font-size:14.5px; }
  .mk-about__signname{ font-size:21px; }
}

/* NOTE: do not restyle .crp-text-slider-item type. Swiper measures the track
   from the rendered glyph width; overriding font-size (either capping it or
   resetting it to inherit) made the slides overlap and city names doubled up.
   Control the band with padding on the wrap only. */

/* polish pass — measured, not guessed */
/* the eyebrow wrapped to two lines because .mk-testi-head inherits a
   max-width:52ch from the note styling above it */
.mk-testi-head{ max-width:none!important; }
.mk-testi-head .tp-section-title-clash-600,
.mk-testi-head h3{ max-width:none!important; }
/* the pull-quote mark was landing on top of the eyebrow */
.ar-testimonial-slider-wrap::after{ top:-24px; font-size:170px; }
/* HOME BASE at 10.5px needs 4.5:1 — .72 white on #A3561F measures 4.1 */
.mk-sub--home small{ color:rgba(255,255,255,.88)!important; }
/* the pull-quote glyph collides with the first line at every size I tried
   (measured at 1440/768/390) — a decoration that reads as a rendering bug is
   worse than no decoration. */
.ar-testimonial-slider-wrap::after{ display:none!important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 16 — step numbers / price table / quote form / logo
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 the 01–04 step numbers were invisible ────────────────────────────
   Round 14 set them to rgba(255,255,255,.40) at 13px so the titles could
   lead. Over a photographed roof that measures under 2:1 and they vanished.
   Keep them subordinate to the title, but make them a real element: brand
   orange, a touch larger, and a rule that ties the number to its step. */
.ar-step-area [class*="step-count"],
.ar-step-area .ar-step-num{
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.20em!important;
  color:#A3561F!important;
  text-shadow:0 1px 10px rgba(0,0,0,.65)!important;
  display:inline-block!important;
  margin-bottom:10px!important;
}
/* the hairline above each step now carries the accent so the sequence reads */
.ar-step-item,
.ar-step-area [class*="step-item"]{ border-top-color:rgba(255,255,255,.26)!important; }

/* ── SS#2 price table — make it feel alive ────────────────────────────────
   Same five rows, but each is a real target now: the number swaps to the
   accent, a fill wipes in from the left, the price nudges, the arrow slides.
   All transform/opacity so it stays cheap on a phone. */
.mk-ptable{ border-top:1px solid rgba(255,255,255,.16)!important; }
.mk-prow{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:padding-left .45s cubic-bezier(.2,.8,.2,1);
}
.mk-prow::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(163,86,31,.20),rgba(163,86,31,0) 72%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.mk-prow:hover{ background:transparent!important; padding-left:26px!important; }
.mk-prow:hover::before{ transform:scaleX(1); }
.mk-prow__n{
  transition:color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.mk-prow:hover .mk-prow__n{ color:#A3561F!important; transform:translateY(-2px); }
.mk-prow__t{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.mk-prow:hover .mk-prow__t{ transform:translateX(4px); }
.mk-prow__p{
  transition:transform .45s cubic-bezier(.2,.8,.2,1), color .35s ease;
}
.mk-prow:hover .mk-prow__p{ transform:translateX(-4px); color:#fff!important; }
.mk-prow__a{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.20);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .35s ease, border-color .35s ease, color .35s ease;
}
.mk-prow:hover .mk-prow__a{
  background:#A3561F; border-color:#A3561F; color:#fff!important;
  transform:translateX(6px);
}
@media (hover:none){
  .mk-prow:hover{ padding-left:0!important; }
  .mk-prow:hover::before{ transform:scaleX(0); }
}

/* ── SS#3 quote form ──────────────────────────────────────────────────────
   core.css:1033 paints every p/li/small inside .mk-form-section white with
   !important — written when this section was dark. It is beige now, so the
   field labels were white on cream. That is the unreadable text. */
.mk-form-section label,
.mk-form-section .mk-q__grid label,
.mk-form-section .mk-q__full{
  color:#1A1D21!important;
  font-size:13px!important; font-weight:700!important;
  letter-spacing:.06em!important; text-transform:uppercase!important;
}
.mk-form-section p,
.mk-form-section li,
.mk-form-section small{ color:#4A5A64!important; }
.mk-q__fine{ color:rgba(26,29,33,.55)!important; }

/* "Get a quote" was a 15px script line under a 60px headline — invisible */
.mk-form-section .tp-section-subtitle-satisfy{
  font-size:clamp(24px,2.2vw,32px)!important;
  color:#A3561F!important;
  display:block; margin-bottom:10px!important;
}

/* the three facts are now bullets under the head, one line each, with the
   Call button beneath them */
.mk-q__meta{
  list-style:none; margin:26px 0 0!important; padding:0!important;
  display:flex; flex-direction:column; gap:12px;
}
.mk-q__meta li{
  position:relative; padding-left:28px;
  font-size:15px!important; line-height:1.45!important; font-weight:600!important;
  color:#1A1D21!important;
  white-space:normal;
}
.mk-q__meta li::before{
  content:""; position:absolute; left:0; top:5px;
  width:15px; height:9px;
  border-left:2px solid #A3561F; border-bottom:2px solid #A3561F;
  transform:rotate(-45deg);
}
.mk-q__call{ margin-top:30px!important; }

/* ── SS#4 logo ────────────────────────────────────────────────────────────
   "Deckline" in the footer inherited --mk-ink (near-black) on a #111214
   footer — it was invisible. And the mark was #A3561F, a second brown that
   exists nowhere else. One button colour site-wide, as asked. */
.mk-logo-mark,
.ar-footer-area .mk-logo-mark,
.offcanvas__area .mk-logo-mark,
.tp-offcanvas-area .mk-logo-mark,
.tp-offcanvas-2-logo .mk-logo-mark,
.mk-callbar .mk-logo-mark{ color:var(--mk-cta,#A3561F)!important; }

.ar-footer-area .mk-logo-word,
.ar-footer-logo .mk-logo-word,
.ar-copyright-area .mk-logo-word{ color:#fff!important; }

@media (max-width:767px){
  .mk-form-section .tp-section-subtitle-satisfy{ font-size:22px!important; }
  .mk-q__meta li{ font-size:14.5px!important; }
}

/* CORRECTION. My first two attempts used .ar-step-num / [class*="step-count"]
   and then a bare .ar-step-number. Chromium's CSS.getMatchedStylesForNode
   showed why the second one still lost: round 14 wrote
   `.ar-step-area [class*="step-number"]{color:rgba(255,255,255,.40)!important}`
   — 0,2,0 specificity. A bare .ar-step-number is 0,1,0, so !important on both
   sides means the more specific one wins regardless of source order.
   Three classes deep clears it. */
.ar-step-area .ar-step-item .ar-step-number{
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.20em!important;
  color:#A3561F!important;
  text-shadow:0 1px 10px rgba(0,0,0,.7)!important;
  display:inline-block!important;
  margin-bottom:8px!important;
  opacity:1!important;
}
/* the layout uses empty .ar-step-item divs as grid spacers; the hairline
   turned those into a floating rule over the photo */
.ar-step-item:empty{ border-top:0!important; padding-top:0!important; }

/* the bullet ticks were sitting a line above their text */
.mk-q__meta li{ display:flex; align-items:flex-start; gap:14px; padding-left:0!important; }
.mk-q__meta li::before{ position:static; flex:0 0 auto; margin-top:6px; }
.mk-about__list li{ display:flex; align-items:flex-start; gap:13px; padding-left:0; }
.mk-about__list li::before{ position:static; flex:0 0 auto; margin-top:6px; }

/* the footer email ran past the right edge of the 1430 container at 1440 */
.ar-footer-area a[href^="mailto:"],
.ar-footer-area .ar-footer-widget a{ overflow-wrap:anywhere; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 17
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 "Sound familiar?" — three visible, scroll for the rest ───────────
   The parallax banner is back above this section (markup move).
   The six cards become one horizontal track: three in view, snap-scrolled.
   Bootstrap's .row is display:flex already, so this is a re-parameterisation
   rather than a fight with it — but row uses negative margins and wrap, both
   of which have to go or the track never overflows. */
.mk-pain-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  margin:0!important;
  padding-bottom:18px;
  gap:38px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(163,86,31,.45) rgba(26,29,33,.08);
}
.mk-pain-row > [class*="col-"]{
  flex:0 0 calc((100% - 76px) / 3)!important;
  max-width:calc((100% - 76px) / 3)!important;
  width:auto!important;
  padding:0!important;
  scroll-snap-align:start;
}
.mk-pain-row::-webkit-scrollbar{ height:5px; }
.mk-pain-row::-webkit-scrollbar-track{ background:rgba(26,29,33,.08); border-radius:3px; }
.mk-pain-row::-webkit-scrollbar-thumb{ background:rgba(163,86,31,.45); border-radius:3px; }
.mk-pain-row::-webkit-scrollbar-thumb:hover{ background:#A3561F; }
.mk-pain-card{ padding-right:0!important; }
.mk-pain-card p{ max-width:none; }
/* the stagger animated translateY inside a scroll container, which fought the
   snap on load — fade only */
@media (prefers-reduced-motion:no-preference){
  .mk-pain-row > [class*="col-"]{ transform:none; animation-name:mkPainFade; }
}
@keyframes mkPainFade{ to{ opacity:1; } }
.mk-pain-scroll__t::after{ content:" \2192"; }
@media (max-width:991px){
  .mk-pain-row{ gap:24px; }
  .mk-pain-row > [class*="col-"]{
    flex:0 0 calc((100% - 24px) / 2)!important; max-width:calc((100% - 24px) / 2)!important;
  }
}
@media (max-width:767px){
  .mk-pain-row{ gap:20px; }
  .mk-pain-row > [class*="col-"]{ flex:0 0 78%!important; max-width:78%!important; }
}

/* ── SS#2 roof section — head legibility + brand face on the labels ────────
   "Every kind of roof." is white over a bright sky at the top of the first
   panel. A shadow alone was not enough; it needs a scrim behind the words. */
.ar-service-title-box{ z-index:3; }
.ar-service-title-box::before{
  content:"";
  position:absolute; left:-60px; right:-60px; top:-90px; bottom:-70px;
  background:radial-gradient(120% 100% at 25% 40%,rgba(12,14,16,.62) 0%,rgba(12,14,16,0) 70%);
  pointer-events:none; z-index:-1;
}
.ar-service-title-box .tp-section-title-clash-600{
  text-shadow:0 3px 26px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.45)!important;
}
/* the rotated labels were falling back to the body grotesque because the
   round-15 rule set font-weight:800 on a face that ships one weight */
.ar-service-item .ar-service-title{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
}
.ar-service-item:hover .ar-service-title{ letter-spacing:.19em!important; }
.mk-svc__t{ font-family:var(--tp-ff-clash-semibold)!important; font-weight:600!important; }

/* ── SS#3 four stops — make the boxes move ────────────────────────────────*/
.ar-step-item{
  position:relative;
  transition:background .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.ar-step-item:not(:empty)::after{
  content:"";
  position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:#A3561F;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.ar-step-item:not(:empty):hover{
  background:rgba(255,255,255,.055);
  transform:translateY(-5px);
}
.ar-step-item:not(:empty):hover::after{ transform:scaleX(1); }
.ar-step-area .ar-step-item .ar-step-number,
.ar-step-title-sm{ transition:transform .45s cubic-bezier(.2,.8,.2,1), color .35s ease; }
.ar-step-item:hover .ar-step-number{ transform:translateX(5px); }
.ar-step-item:hover .ar-step-title-sm{ transform:translateX(5px); }
@media (hover:none){
  .ar-step-item:not(:empty):hover{ transform:none; background:transparent; }
}

/* ── SS#4 marquee back to its original size, less air ─────────────────────*/
.crp-text-slider-wrap{ padding:8px 0!important; margin:0!important; }

/* ── SS#5 the gallery slider was butting into the next section ────────────*/
.mk-gal{ padding-top:44px!important; padding-bottom:96px!important; }
.mk-gal__wrap{ padding-bottom:8px; }
@media (max-width:767px){
  .mk-gal{ padding-top:32px!important; padding-bottom:62px!important; }
}

/* ── Where we work — centre the three facts and give them weight ──────────*/
.mk-areastats{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:0!important;
  text-align:center;
  padding:26px 0!important;
  margin:34px 0 10px!important;
}
.mk-areastat{
  align-items:center;
  padding:0 12px;
  border-right:1px solid rgba(26,29,33,.12);
}
.mk-areastat:last-child{ border-right:0; }
.mk-areastat__n{ font-size:clamp(28px,2.6vw,38px)!important; color:#A3561F; }
.mk-areastat__l{ font-size:11.5px; letter-spacing:.10em; }
.mk-area__note{ white-space:nowrap; font-size:14px!important; }
@media (max-width:520px){
  .mk-areastat{ padding:0 6px; }
  .mk-areastat__n{ font-size:22px!important; }
  .mk-areastat__l{ font-size:10px; letter-spacing:.05em; }
  .mk-area__note{ white-space:normal; }
}

/* ── About — all copy left, all photography right ─────────────────────────
   The template's three-column arrangement scattered two photos and a stat
   card through the text. Rebuilt as two columns. */
.mk-about__row{ align-items:flex-start; }
.mk-about__copy{ padding-right:56px; }
.mk-about__copy .tp-section-title-clash-600{
  font-size:clamp(34px,4vw,60px)!important; letter-spacing:-.025em!important;
}
.ar-about-title-sm{
  font-size:clamp(21px,2vw,28px)!important;
  font-weight:600!important;
  line-height:1.28!important;
  color:#1A1D21!important;
  margin:34px 0 16px!important;
  max-width:26ch;
  text-transform:none!important;
}
.mk-about__copy > p{ max-width:52ch; }
.mk-about__btn{ margin-top:30px; display:inline-flex; align-items:center; }

.mk-about__media{ display:flex; flex-direction:column; gap:20px; }
.mk-about__shot{
  margin:0; line-height:0; overflow:hidden; border-radius:14px;
  background:rgba(26,29,33,.06);
}
.mk-about__shot img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.mk-about__shot:hover img{ transform:scale(1.04); }
.mk-about__shot--lg{ aspect-ratio:16/10; }
.mk-about__mediarow{
  display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:stretch;
}
.mk-about__mediarow .mk-about__shot{ aspect-ratio:4/3; }
.mk-about__exp{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:22px 22px 18px;
  border:1px solid rgba(163,86,31,.45);
  border-radius:14px;
  background:#F7F5F1;
}
.mk-about__exp span{
  font-size:12px; font-weight:800; letter-spacing:.10em; line-height:1.3;
  text-transform:uppercase; color:#A3561F;
}
.mk-about__exp h4{
  margin:0; font-size:clamp(52px,5.4vw,86px); line-height:.9; font-weight:800;
  letter-spacing:-.04em; color:#A3561F;
}
@media (max-width:991px){
  .mk-about__copy{ padding-right:0; margin-bottom:40px; }
  .mk-about__media{ gap:16px; }
  .mk-about__mediarow{ gap:16px; }
}
@media (max-width:575px){
  .mk-about__mediarow{ grid-template-columns:1fr; }
  .mk-about__exp{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
}

/* ── round 17 corrections ────────────────────────────────────────────────*/
/* marquee: band tight, type untouched */
.crp-text-slider-wrap{ padding:10px 0!important; margin:0!important; }

/* "Every kind of roof." sits on a bright tree canopy — the first scrim was
   too weak. Measured white-on-scrim rather than white-on-photo. */
.ar-service-title-box::before{
  background:linear-gradient(160deg,rgba(10,12,14,.80) 0%,rgba(10,12,14,.55) 45%,rgba(10,12,14,0) 88%)!important;
  left:-120px!important; right:-140px!important; top:-160px!important; bottom:-120px!important;
}
.ar-service-title-box .tp-section-title-clash-600{
  text-shadow:0 2px 30px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6)!important;
}

/* the About CTA lost its size when the column was rebuilt, and the circle
   was sitting on top of the label */
.mk-about__btn{ gap:12px; }
.mk-about__btn .tp-btn-red-circle-text{
  font-size:14px!important; letter-spacing:.10em!important; font-weight:700!important;
  padding:16px 30px!important; line-height:1!important;
  border:1px solid rgba(163,86,31,.55)!important; border-radius:999px!important;
  color:#A3561F!important; text-decoration:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.mk-about__btn .tp-btn-red-circle-text:hover{
  background:#A3561F!important; color:#fff!important; border-color:#A3561F!important;
}
.mk-about__btn .tp-btn-red-circle-icon{
  position:static!important; transform:none!important;
  width:50px!important; height:50px!important; flex:0 0 50px;
  display:inline-flex!important; align-items:center; justify-content:center;
  border:1px solid rgba(163,86,31,.55)!important; border-radius:50%!important;
  color:#A3561F!important;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.mk-about__btn .tp-btn-red-circle-icon:hover{
  background:#A3561F!important; color:#fff!important; transform:translateX(3px);
}
/* The band was 284px tall for ~130px of glyph — the display face carries a
   lot of leading. line-height is safe to change (Swiper measures track WIDTH,
   not height), unlike font-size which broke the track earlier. */
.crp-text-slider-item{ line-height:.86!important; }
.crp-text-slider-wrap{ padding:6px 0!important; }
.ar-testimonial-area{ padding-bottom:34px!important; }
.mk-gal{ padding-top:30px!important; }
/* .tp-btn-red-circle-text ships with transform:scale(.5) and is scaled back to
   1 by a hover rule on the original wrapper. The rebuilt About column no
   longer has that wrapper, so the label rendered at half size permanently. */
.mk-about__btn .tp-btn-red-circle-text{ transform:none!important; display:inline-block!important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 18
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 quote form — lede gone, button reads "Call us" ──────────────────*/
.mk-q__meta{ margin-top:30px!important; }
.mk-q__call{ margin-top:34px!important; }

/* ── SS#2 About — bigger signature, filled pill, more presence ────────────*/
.ar-about-title-sm{
  font-size:clamp(26px,2.6vw,38px)!important;
  font-weight:600!important;
  line-height:1.18!important;
  margin:26px 0 18px!important;
  max-width:22ch;
  letter-spacing:-.015em!important;
}
.mk-about__copy > p{ font-size:16.5px!important; line-height:1.66!important; }
.mk-about__list{ margin-top:30px!important; gap:14px; }
.mk-about__list li{ font-size:15.5px; }

.mk-about__sign{
  margin-top:34px; padding:22px 0 0 22px;
  border-top:1px solid rgba(26,29,33,.14);
  border-left:3px solid #A3561F;
  gap:6px;
}
.mk-about__signname{ font-size:clamp(30px,3vw,40px); line-height:1.05; }
.mk-about__signrole{ font-size:15px; font-weight:600; color:rgba(26,29,33,.68); }

/* filled orange pill instead of the outline */
.mk-about__btn .tp-btn-red-circle-text{
  background:#A3561F!important; color:#fff!important;
  border-color:#A3561F!important;
  padding:18px 34px!important; font-size:14.5px!important;
}
.mk-about__btn .tp-btn-red-circle-text:hover{
  background:#A3561F!important; border-color:#A3561F!important; color:#fff!important;
}
.mk-about__btn .tp-btn-red-circle-icon{
  background:#A3561F!important; border-color:#A3561F!important; color:#fff!important;
}
.mk-about__btn .tp-btn-red-circle-icon:hover{ background:#A3561F!important; border-color:#A3561F!important; }

/* the 22-year card is the one saturated block in the section — let it be */
.mk-about__exp{
  background:#A3561F!important; border-color:#A3561F!important;
  padding:26px 24px 20px!important;
}
.mk-about__exp span{ color:rgba(255,255,255,.80)!important; }
.mk-about__exp h4{ color:#fff!important; }

/* ── SS#3 Where we work — sharper, tighter, readable on hover ─────────────
   White on #A3561F measures 4.4:1 — under AA for 14px. The logo brown
   #A3561F gives 7.3:1 with the same family. */
.mk-area__lede{ max-width:40ch; font-size:17px!important; }
.mk-areastats{ margin:30px 0 8px!important; padding:24px 0!important; }
.mk-sub:hover{ background:#A3561F!important; border-color:#A3561F!important; color:#fff!important; }
.mk-sub--home:hover{ background:#A3561F!important; border-color:#A3561F!important; }
.mk-area__note{
  margin-top:22px!important; font-size:15px!important; font-weight:600!important;
  color:rgba(26,29,33,.66)!important;
}
.mk-area__note a{
  display:inline-block; margin-left:4px;
  padding:8px 18px; border-radius:999px;
  background:#A3561F!important; color:#fff!important;
  text-decoration:none!important;
  transition:background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mk-area__note a:hover{ background:#A3561F!important; color:#fff!important; transform:translateY(-2px); }

/* ── SS#4 marquee — pull it in tighter still ─────────────────────────────*/
.ar-testimonial-area{ padding-bottom:12px!important; }
.crp-text-slider-wrap{ padding:0!important; }
.crp-text-slider-item{ line-height:.78!important; }
.mk-gal{ padding-top:14px!important; }
@media (max-width:767px){ .mk-gal{ padding-top:12px!important; } }

/* ── SS#5 credentials — brand face, and make the proof land ──────────────*/
.mk-lic{ padding:104px 0 108px!important; }
.mk-lic__head{ margin-bottom:56px!important; }
.mk-lic__h{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-weight:600!important;
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.025em!important;
  text-transform:none!important;
}
.mk-lic__lede{
  margin:18px auto 0!important; max-width:46ch;
  font-size:16px!important; line-height:1.6!important;
  color:rgba(26,29,33,.62)!important;
}
.mk-lic__card{
  padding:34px 30px 30px!important;
  border-radius:0!important;
  border:0!important;
  border-top:2px solid rgba(122,78,36,.22)!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mk-lic__card::before{
  height:2px!important; top:-2px!important;
  background:#A3561F!important;
}
.mk-lic__card:hover{
  background:#fff!important;
  transform:translateY(-6px)!important;
  box-shadow:0 22px 50px -22px rgba(122,78,36,.30)!important;
  border-top-color:#A3561F!important;
}
.mk-lic__fig{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-size:clamp(44px,4.6vw,68px)!important;
  font-weight:600!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
  color:#A3561F!important;
  margin-bottom:18px!important;
}
.mk-lic__t{ font-size:17.5px!important; }
.mk-lic__d{ font-size:14px!important; }
@media (max-width:767px){
  .mk-lic{ padding:58px 0 62px!important; }
  .mk-lic__head{ margin-bottom:32px!important; }
  .mk-lic__card{ padding:24px 18px 22px!important; }
}

/* The template's .tp-btn-red-circle-box is a fixed-width shell with a scaled
   label and an absolutely-placed circle. Every property I overrode was fought
   by another; replaced with a plain pill in the markup. */
.mk-about__cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:32px;
  padding:17px 32px;
  border-radius:999px;
  background:#A3561F; color:#fff!important;
  font-size:14.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none!important; white-space:nowrap; line-height:1;
  transition:background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.mk-about__cta svg{ transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.mk-about__cta:hover{
  background:#A3561F; color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(122,78,36,.7);
}
.mk-about__cta:hover svg{ transform:translate(3px,-3px); }

/* the credentials headline was wrapping to three lines inside a 60ch box */
.mk-lic__head{ max-width:960px!important; }
.mk-lic__h{ max-width:18ch; margin-left:auto; margin-right:auto; }
/* core.css:1633 paints every non-.btn anchor in this section #A3561F with
   !important — my pill label inherited it and went orange-on-orange. */
.ar-about-area a.mk-about__cta,
.ar-about-area a.mk-about__cta span,
.ar-about-area a.mk-about__cta svg{ color:#fff!important; }
/* same trap as the About pill: core.css:1633 also covers .mk-area-section */
.mk-area-section p.mk-area__note a,
.mk-area-section p.mk-area__note a:hover{ color:#fff!important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 19
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 four stops — two-line head, dividers you can actually see ───────
   main.css:27708 gives .ar-step-item a 1px border-left+bottom at .10 alpha
   and .ar-step-right-wrap a 1px top+bottom at .10. Over a photograph that is
   invisible. One weight, one alpha, applied to both axes. */
.ar-step-title-box .tp-section-title-clash-600{ max-width:14ch; }
.ar-step-item,
.ar-step-area [class*="step-item"]{
  border-left:1px solid rgba(255,255,255,.30)!important;
  border-bottom:1px solid rgba(255,255,255,.30)!important;
  border-top:1px solid rgba(255,255,255,.30)!important;
}
.ar-step-right-wrap{
  border-top:1px solid rgba(255,255,255,.30)!important;
  border-bottom:1px solid rgba(255,255,255,.30)!important;
}
.ar-step-item:empty{
  border-top:1px solid rgba(255,255,255,.30)!important;
  border-bottom:1px solid rgba(255,255,255,.30)!important;
  padding-top:0!important;
}

/* ── SS#2 scroll cue — a real arrow, sitting with the head ────────────────*/
.mk-pain-section{ padding-top:56px!important; }
.mk-pain-head{ position:relative; }
.mk-pain-scroll{
  position:absolute; right:0; bottom:6px;
  display:inline-flex; align-items:center; gap:12px;
  color:rgba(26,29,33,.45);
}
.mk-pain-scroll__t{
  font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:inherit;
}
.mk-pain-scroll__a{ color:#A3561F; }
@media (prefers-reduced-motion:no-preference){
  .mk-pain-scroll__a{ animation:mkNudge 1.9s cubic-bezier(.4,0,.2,1) infinite; }
}
@keyframes mkNudge{ 0%,70%,100%{transform:translateX(0)} 35%{transform:translateX(7px)} }
@media (max-width:991px){
  .mk-pain-scroll{ position:static; margin-top:16px; }
  .mk-pain-head{ display:flex; flex-direction:column; align-items:center; }
  .mk-pain-section{ padding-top:44px!important; }
}

/* ── SS#3 credbar autoscroll ──────────────────────────────────────────────
   The row is a fixed set of four; the markup now carries a duplicate set so
   translating the track by exactly -50% loops seamlessly. */
.mk-credbar__row{
  display:block!important;
  overflow:hidden;
  padding:0!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.mk-credbar__track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  align-items:center;
  animation:mkCredScroll 34s linear infinite;
}
.mk-credbar__row:hover .mk-credbar__track{ animation-play-state:paused; }
@keyframes mkCredScroll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.mk-credbar--light .mk-cred{
  flex:0 0 auto;
  padding:14px 46px!important;
  border-right:1px solid rgba(122,78,36,.18)!important;
  white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .mk-credbar__track{ animation:none; }
  .mk-credbar__row{ overflow-x:auto; }
}
@media (max-width:767px){
  .mk-credbar__track{ animation-duration:24s; }
  .mk-credbar--light .mk-cred{ padding:12px 26px!important; }
}

/* ── SS#4 testimonial head — it was 13px grey on cream ───────────────────*/
.mk-testi-head .tp-section-title-clash-600,
.mk-testi-head h3{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-size:clamp(15px,1.5vw,20px)!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:rgba(26,29,33,.72)!important;
}

/* ── Conversion / polish ─────────────────────────────────────────────────*/
/* Every CTA on the page should feel like the same object. */
.mk-q__call, .mk-q__send, .mk-about__cta, .mk-area__note a{
  border-radius:999px!important;
  letter-spacing:.04em;
  box-shadow:0 10px 24px -14px rgba(122,78,36,.55);
}
.mk-q__send{ padding:20px 34px!important; font-size:16px!important; }
.mk-q__call:hover, .mk-q__send:hover{
  background:#A3561F!important; transform:translateY(-2px);
  box-shadow:0 16px 32px -14px rgba(122,78,36,.7);
}
/* focus rings — keyboard users currently get nothing on the beige ground */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .mk-sub:focus-visible{
  outline:2px solid #A3561F!important;
  outline-offset:3px!important;
  border-radius:4px;
}
/* the form is the money element — make the fields feel deliberate */
.mk-form-section input, .mk-form-section select, .mk-form-section textarea{
  border:1px solid rgba(26,29,33,.14)!important;
  border-radius:10px!important;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.mk-form-section input:focus, .mk-form-section select:focus, .mk-form-section textarea:focus{
  border-color:#A3561F!important;
  box-shadow:0 0 0 3px rgba(163,86,31,.14)!important;
}
/* one consistent rhythm between the beige sections */
.mk-rule hr{ background:linear-gradient(90deg,transparent,rgba(26,29,33,.20),transparent); }
/* round-17 appended a text arrow to this label; the cue is a real SVG now */
.mk-pain-scroll__t::after{ content:none!important; }
/* the empty spacer cells collapsed once I zeroed their padding, so the lower
   horizontal divider only ran half the width */
.ar-step-item:empty{ padding:100px 40px 60px 40px!important; }
@media (max-width:991px){ .ar-step-item:empty{ display:none!important; } }
/* the <br> keeps it to two lines on desktop; below 430 the type was still
   large enough to wrap each half again, giving four lines */
@media (max-width:575px){
  .ar-step-title-box .tp-section-title-clash-600{
    font-size:clamp(28px,9vw,40px)!important; max-width:none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 20
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#3 the before/after slider never moved ────────────────────────────
   core.css:1943 and :1954 pinned the reveal at a literal 50%, so the
   --mk-split property the script has been setting since day one went
   nowhere. These two lines are the whole fix. */
.mk-ba__clip{ width:var(--mk-split,50%)!important; }
.mk-ba__handle{ left:var(--mk-split,50%)!important; }
.mk-ba__stage{ cursor:ew-resize; touch-action:none; }
.mk-ba__range{ cursor:ew-resize; }
.mk-ba__range:focus-visible + *,
.mk-ba__stage:focus-within .mk-ba__handle::after{ outline:2px solid #A3561F; outline-offset:3px; }

/* ── SS#1 About — one voice, one size ────────────────────────────────────
   The statement and the paragraph under it are now a single block. Sized
   between the two so four sentences still read as a paragraph, not a slab. */
.mk-about__say{
  font-size:clamp(20px,2vw,27px)!important;
  line-height:1.42!important;
  font-weight:500!important;
  letter-spacing:-.01em!important;
  color:#1A1D21!important;
  margin:28px 0 0!important;
  max-width:32ch;
}
.mk-about__list{ margin-top:34px!important; }

/* ── SS#2 Where we work — fewer parts ────────────────────────────────────
   Head, one line, the places, one way to act. The three-stat bar and the
   home-base badge were the two things making it feel busy. */
.mk-area__lede{ max-width:38ch; margin-top:18px!important; }
.mk-subs{ margin-top:34px!important; gap:8px!important; max-width:34rem; }
.mk-sub{
  background:transparent!important;
  border-color:rgba(26,29,33,.18)!important;
  font-weight:500!important;
  padding:8px 15px!important;
}
.mk-sub:hover{ background:#A3561F!important; border-color:#A3561F!important; color:#fff!important; }
.mk-area__note{ margin-top:30px!important; }
.mk-area-section{ padding-top:96px!important; padding-bottom:96px!important; }
@media (max-width:767px){
  .mk-area-section{ padding-top:58px!important; padding-bottom:58px!important; }
}

/* ── SS#4 testimonial head — black and bigger ────────────────────────────*/
.mk-testi-head .tp-section-title-clash-600,
.mk-testi-head h3{
  font-size:clamp(20px,2vw,28px)!important;
  letter-spacing:.10em!important;
  color:#1A1D21!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 21
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 pain section — arrows instead of a hint, and the right air ─────*/
.mk-pain-section{ padding-top:40px!important; padding-bottom:104px!important; }
.mk-pain-scroll{ display:none!important; }
.mk-pain-nav{
  position:absolute; right:0; bottom:2px;
  display:inline-flex; gap:10px;
}
.mk-pain-nav__b{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#1A1D21;
  border:1px solid rgba(26,29,33,.22);
  cursor:pointer; padding:0;
  transition:background .28s ease, color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.mk-pain-nav__b:hover:not(:disabled){
  background:#A3561F; border-color:#A3561F; color:#fff; transform:translateY(-2px);
}
.mk-pain-nav__b:disabled{ opacity:.28; cursor:default; }
.mk-pain-row{ cursor:grab; }
.mk-pain-row.is-grabbing{ cursor:grabbing; scroll-snap-type:none; }
.mk-pain-row.is-grabbing *{ user-select:none; }
@media (max-width:991px){
  .mk-pain-nav{ position:static; margin-top:20px; }
  .mk-pain-section{ padding-top:34px!important; padding-bottom:64px!important; }
}

/* ── SS#2 credbar — the proof row should read like proof ─────────────────
   Each item becomes a card with real weight: bigger figure, darker sub copy
   (it was rgba .55 at 13px), and the platform logo in its own chip. */
.mk-credbar.mk-credbar--light{
  background:#EDEAE4!important;
  border-top:1px solid rgba(122,78,36,.16)!important;
  border-bottom:1px solid rgba(122,78,36,.16)!important;
  padding:20px 0!important;
}
.mk-credbar--light .mk-cred{
  gap:14px!important;
  align-items:center;
  margin:0 11px;
  padding:16px 26px!important;
  background:#fff!important;
  border:1px solid rgba(26,29,33,.07)!important;
  border-right:1px solid rgba(26,29,33,.07)!important;
  border-radius:14px!important;
  box-shadow:0 2px 10px -4px rgba(26,29,33,.14)!important;
}
.mk-credbar--light .mk-rev__logo{
  width:38px!important; height:38px!important;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:#F2F1EE;
  flex:0 0 38px;
}
.mk-credbar--light .mk-rev__logo svg{ width:21px; height:21px; }
.mk-credbar--light .mk-cred__main{
  font-size:26px!important; font-weight:800!important;
  letter-spacing:-.02em!important; line-height:1!important;
  color:#1A1D21!important;
}
.mk-credbar--light .mk-cred__sub{
  font-size:14px!important; font-weight:600!important;
  color:rgba(26,29,33,.72)!important; line-height:1.25!important;
}
@media (max-width:767px){
  .mk-credbar.mk-credbar--light{ padding:14px 0!important; }
  .mk-credbar--light .mk-cred{ margin:0 7px; padding:12px 18px!important; gap:11px!important; }
  .mk-credbar--light .mk-cred__main{ font-size:21px!important; }
  .mk-credbar--light .mk-cred__sub{ font-size:12.5px!important; }
  .mk-credbar--light .mk-rev__logo{ width:30px!important; height:30px!important; flex:0 0 30px; }
  .mk-credbar--light .mk-rev__logo svg{ width:17px; height:17px; }
}

/* ── SS#3 review attribution — give the person weight ────────────────────*/
.mk-testi-foot{
  margin-top:44px!important;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px 18px;
}
.mk-testi-stars{
  font-size:20px!important; letter-spacing:4px!important;
  color:#A3561F!important; line-height:1!important;
}
.mk-testi-name{
  font-size:18px!important; font-weight:800!important;
  color:#1A1D21!important; letter-spacing:-.01em;
}
.mk-testi-meta{
  font-size:15px!important; font-weight:600!important;
  color:rgba(26,29,33,.66)!important;
}
@media (max-width:767px){
  .mk-testi-foot{ margin-top:30px!important; gap:6px 12px; }
  .mk-testi-stars{ font-size:17px!important; }
  .mk-testi-name{ font-size:16px!important; }
  .mk-testi-meta{ font-size:13.5px!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 22 — one brown, and the last three fixes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#4 the brand brown is #A3561F, full stop ──────────────────────────
   Every stray warm tone in this stylesheet has been folded into it:
   #C8873F ×30, #7A4E24 ×34, #A33C1A ×11, #96601D ×7, #E8A55F ×6, plus
   #C89A5E, #E0A968, #F2C888, #F5A623, #E0602F, #B44A3A.

   ONE measured exception. On the near-black sections (#1A1D21 — the price
   table and the four-stops photo) #A3561F contrasts at 3.15:1, which fails
   AA for body text; the prices and step numbers would be a strain to read.
   --mk-brand-on-dark is the SAME hue (25°) and the SAME saturation (0.68),
   lightened from L 0.38 to 0.47 until it cleared 4.5:1. It measures 4.51:1.
   It is the brand brown, adjusted for the ground it sits on — not a new
   colour. If you would rather have the exact hex everywhere, say so and I
   will swap it, but those two blocks will be hard to read. */
:root{ --mk-brand-on-dark:#CA6A26; }

.mk-price-section .mk-prow__p,
.mk-price-section .mk-prow__n,
.mk-price-section .mk-pnote strong,
.mk-prow:hover .mk-prow__n{ color:var(--mk-brand-on-dark)!important; }
.ar-step-area .ar-step-item .ar-step-number{ color:var(--mk-brand-on-dark)!important; }
.ar-step-item:not(:empty)::after{ background:var(--mk-brand-on-dark)!important; }
.mk-svc__p{
  color:var(--mk-brand-on-dark)!important;
  border-color:rgba(202,106,38,.5)!important;
}
.ar-footer-area .mk-logo-mark,
.tp-offcanvas-area .mk-logo-mark,
.offcanvas__area .mk-logo-mark{ color:var(--mk-brand-on-dark)!important; }

/* ── SS#3 hero CTA — same object as every other button ──────────────────*/
.mk-btn-brand,
a.tp-btn-black-solid.mk-btn-brand{
  background:#A3561F!important; background-color:#A3561F!important;
  color:#fff!important; border-color:#A3561F!important;
  border-radius:999px!important;
  box-shadow:0 10px 24px -14px rgba(163,86,31,.6);
  transition:background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.mk-btn-brand:hover,
a.tp-btn-black-solid.mk-btn-brand:hover{
  background:#8B4718!important; background-color:#8B4718!important;
  color:#fff!important; transform:translateY(-2px);
  box-shadow:0 16px 32px -14px rgba(163,86,31,.75);
}
.mk-btn-brand::before,
.mk-btn-brand::after{ background:#8B4718!important; }

/* the hover tint for all the other pills was the old logo brown, which is
   now identical to the base colour — nothing would appear to happen */
.mk-q__call:hover, .mk-q__send:hover,
.mk-about__cta:hover, .mk-sub:hover, .mk-sub--home:hover,
.mk-about__btn .tp-btn-red-circle-text:hover,
.mk-about__btn .tp-btn-red-circle-icon:hover{
  background:#8B4718!important; border-color:#8B4718!important; color:#fff!important;
}

/* ── SS#2 area link back to plain brown text ────────────────────────────*/
.mk-area-section p.mk-area__note a,
.mk-area-section p.mk-area__note a:hover{
  display:inline!important;
  margin:0 0 0 4px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  color:#A3561F!important;
  font-size:inherit!important;
  font-weight:700!important;
}
.mk-area-section p.mk-area__note a:hover{ text-decoration:underline!important; }

/* ── SS#1 About — photography left, words right ─────────────────────────*/
.mk-about__copy{ padding-right:0!important; padding-left:56px!important; }
@media (max-width:991px){
  .mk-about__copy{ padding-left:0!important; margin-bottom:0!important; margin-top:40px; }
  .mk-about__media{ margin-bottom:0; }
}
/* the media column reads better with the tall shot leading and the stat
   card squared off against the smaller frame */
.mk-about__mediarow{ grid-template-columns:1fr 1fr; }
.mk-about__exp{ justify-content:flex-end; }
.mk-about__exp span{ margin-bottom:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 23 — the quote form
   ═══════════════════════════════════════════════════════════════════════ */

/* the honeypot has to be reachable to bots and invisible to everyone else.
   display:none is the one thing that does NOT work — plenty of bots skip
   hidden fields, and screen readers would announce it. */
.mk-hp{
  position:absolute!important; left:-9999px!important;
  width:1px; height:1px; overflow:hidden;
}

.mk-q__err{
  display:block; margin-top:6px;
  font-size:12.5px; font-weight:600; letter-spacing:0;
  text-transform:none; color:#B3261E;
}
.mk-form-section input.is-invalid,
.mk-form-section .is-invalid{
  border-color:#B3261E!important;
  box-shadow:0 0 0 3px rgba(179,38,30,.12)!important;
}
.mk-q__formerr{
  margin:14px 0 0!important;
  padding:12px 16px;
  border-radius:10px;
  background:rgba(179,38,30,.08);
  border:1px solid rgba(179,38,30,.28);
  font-size:14.5px!important; font-weight:600!important;
  color:#8C1D18!important;
}
.mk-q__formerr a{ color:#8C1D18!important; text-decoration:underline; }

.mk-q__send:disabled{ opacity:.7; cursor:progress; }

/* confirmation panel — same footprint as the form so the page does not jump */
.mk-q__done{
  padding:44px 40px;
  background:#fff;
  border:1px solid rgba(26,29,33,.08);
  border-radius:16px;
  box-shadow:0 20px 46px -26px rgba(26,29,33,.26);
  outline:none;
}
.mk-q__done-tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; margin-bottom:22px;
  border-radius:50%;
  background:#A3561F; color:#fff;
}
.mk-q__done h4{
  margin:0 0 12px;
  font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(24px,2.4vw,32px); font-weight:600;
  letter-spacing:-.02em; color:#1A1D21;
}
.mk-q__done p{
  margin:0; font-size:16px!important; line-height:1.62!important;
  color:#4A5A64!important; max-width:46ch;
}
.mk-q__done a{ color:#A3561F!important; font-weight:700; }
@media (max-width:767px){
  .mk-q__done{ padding:32px 24px; }
  .mk-q__done-tick{ width:48px; height:48px; margin-bottom:16px; }
}

/* the datalist arrow that Chrome draws inside the suburb field */
.mk-form-section input[list]::-webkit-calendar-picker-indicator{ opacity:.4; }
/* a rule further up paints every anchor in .mk-form-section #fff !important
   (written for the dark version of this section). The phone number in the
   confirmation panel was white on white. */
.mk-form-section .mk-q__done a,
.mk-form-section .mk-q__formerr a{ color:#A3561F!important; text-decoration:underline; }
.mk-form-section .mk-q__formerr a{ color:#8C1D18!important; }

/* ── form, final pass ────────────────────────────────────────────────────*/
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.mk-q__hint{
  display:block; margin-top:6px;
  font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none;
  color:rgba(26,29,33,.52);
}
input.is-invalid ~ .mk-q__hint{ display:none; }

/* an active leak gets the phone number, not a callback queue */
.mk-q__urgent{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin:18px 0 0; padding:16px 20px;
  border-radius:12px;
  background:rgba(163,86,31,.07);
  border:1px solid rgba(163,86,31,.28);
  animation:mkUrgentIn .4s cubic-bezier(.2,.8,.2,1);
}
.mk-q__urgent strong{ font-size:15px; font-weight:800; color:#1A1D21; }
.mk-q__urgent span{ font-size:14.5px; color:#4A5A64; }
.mk-q__urgent a{
  margin-left:auto; padding:10px 20px; border-radius:999px;
  background:#A3561F; color:#fff!important;
  font-size:14px; font-weight:700; text-decoration:none!important;
  white-space:nowrap;
  transition:background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mk-form-section .mk-q__urgent a{ color:#fff!important; }
.mk-q__urgent a:hover{ background:#8B4718; transform:translateY(-2px); }
@keyframes mkUrgentIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .mk-q__urgent{ animation:none; } }
@media (max-width:575px){
  .mk-q__urgent a{ margin-left:0; width:100%; text-align:center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 25
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 the unfilmed strip on the tile panel ───────────────────────────
   Measured: the ACTIVE panel's .ar-service-bg is 370px wide starting at -5,
   inside a 360px item starting at 0 — the template scales the active image
   for a zoom effect. .ar-service-item had overflow:visible, so those 5px
   escaped on each side and landed on top of the neighbouring panel, outside
   that panel's ::after scrim. That bright sliver is the bug. */
.ar-service-item{ overflow:hidden; }

/* ── SS#2 four stops ─────────────────────────────────────────────────────*/
.ar-step-title-box{ max-width:none; }
.ar-step-title-box .tp-section-title-clash-600{
  max-width:none!important;
  font-size:clamp(34px,4.6vw,68px)!important;
  line-height:.98!important;
}
.mk-step-k{
  display:block; margin-bottom:20px;
  font-size:11.5px; font-weight:800; letter-spacing:.26em; text-transform:uppercase;
  color:#CA6A26;
}
/* the card titles were on the body grotesque while every other heading on
   the site is Clash */
.ar-step-title-sm{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
}
@media (max-width:575px){
  .ar-step-title-box .tp-section-title-clash-600{ font-size:clamp(30px,9vw,42px)!important; }
}

/* ── SS#5 credentials as one auto-scrolling row ─────────────────────────*/
.mk-lic__row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.mk-lic__track{
  display:flex; flex-wrap:nowrap; width:max-content; align-items:stretch;
  animation:mkLicScroll 42s linear infinite;
}
.mk-lic__row:hover .mk-lic__track{ animation-play-state:paused; }
@keyframes mkLicScroll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.mk-lic__track .mk-lic__card{
  flex:0 0 auto; width:min(330px,74vw);
  margin:0 14px;
  padding:30px 28px 26px!important;
  border-top:2px solid rgba(163,86,31,.24)!important;
}
@media (prefers-reduced-motion:reduce){
  .mk-lic__track{ animation:none; }
  .mk-lic__row{ overflow-x:auto; }
}
@media (max-width:767px){
  .mk-lic__track{ animation-duration:30s; }
  .mk-lic__track .mk-lic__card{ margin:0 8px; padding:24px 20px 22px!important; }
}

/* ── SS#4 where we work — give the pills and the copy real weight ───────*/
.mk-area-section .tp-section-title-clash-600{
  font-size:clamp(36px,4.4vw,64px)!important;
}
.mk-area__lede{
  font-size:19px!important; line-height:1.55!important;
  color:#1A1D21!important; font-weight:500!important; max-width:30ch;
}
.mk-area__lede strong{ color:#A3561F; font-weight:800; }
.mk-area__count{
  display:flex; align-items:baseline; gap:12px;
  margin:26px 0 0; padding-top:22px;
  border-top:1px solid rgba(26,29,33,.14);
}
.mk-area__count b{
  font-family:var(--tp-ff-clash-semibold);
  font-size:clamp(38px,4vw,54px); font-weight:600; line-height:1;
  letter-spacing:-.03em; color:#A3561F;
}
.mk-area__count span{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.35; color:rgba(26,29,33,.55); max-width:14ch;
}
.mk-subs{ max-width:none!important; gap:10px!important; margin-top:28px!important; }
.mk-sub{
  padding:11px 20px!important;
  font-size:15px!important; font-weight:600!important;
  border-color:rgba(26,29,33,.22)!important;
  background:transparent!important;
  transition:background .3s var(--mk-ease,ease), color .3s ease,
             border-color .3s ease, transform .3s var(--mk-ease,ease);
}
.mk-sub:hover{
  background:#A3561F!important; border-color:#A3561F!important; color:#fff!important;
  transform:translateY(-3px);
}
@media (max-width:767px){
  .mk-sub{ padding:9px 15px!important; font-size:13.5px!important; }
  .mk-area__lede{ font-size:17px!important; }
}
/* the label was wrapping to five lines at 14ch */
.mk-area__count{ align-items:center; gap:16px; }
.mk-area__count span{ max-width:22ch; letter-spacing:.08em; font-size:12.5px; }
/* the prehead sits on a photographed roof, same as the step numbers */
.mk-step-k{ text-shadow:0 1px 10px rgba(0,0,0,.7); }
/* CORRECTION: an earlier rule sets
   `.ar-step-title-sm,.ar-step-area h4,.ar-step-area h5{font-family:Archivo!important}`.
   Against `.ar-step-title-sm` alone that is a 0,1,0 tie decided by source
   order, and it was winning. Three classes deep settles it — same lesson as
   the step numbers in round 16. */
.ar-step-area .ar-step-item .ar-step-title-sm{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
}
.mk-area__count span{ max-width:26ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 26
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SS#1 Before & after — centred ───────────────────────────────────────*/
.ar-project-area .tp-section-title-box,
.mk-ba__h{ text-align:center; }
.mk-ba__h{
  margin-left:auto; margin-right:auto;
  font-size:clamp(34px,4.2vw,62px)!important;
  letter-spacing:-.025em!important;
}

/* ── SS#3 Recent work — centred and a size up ───────────────────────────*/
.mk-gal__head--center{ text-align:center; }
.mk-gal__head--center .mk-gal__k{ display:block; }
.mk-gal__head--center .mk-gal__h{
  font-size:clamp(34px,4.2vw,62px)!important;
  letter-spacing:-.025em!important;
  margin-left:auto; margin-right:auto;
}

/* ── SS#2 areas — a real booking CTA, and the fallback stays quiet ──────*/
.mk-area__cta{ margin-top:34px; }
.mk-area__note{
  margin-top:16px!important;
  font-size:13.5px!important;
  font-weight:500!important;
  color:rgba(26,29,33,.48)!important;
}
.mk-area-section p.mk-area__note a,
.mk-area-section p.mk-area__note a:hover{
  font-weight:600!important;
  color:rgba(26,29,33,.62)!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
}
.mk-area-section p.mk-area__note a:hover{ color:#A3561F!important; }

/* ── SS#4 the form's Call us button is gone; close the gap it left ──────*/
.mk-q__meta{ margin-bottom:0!important; }
/* `.mk-area-section p{color:#4A5A64!important}` (0,1,1) was beating
   `.mk-area__note` (0,1,0). Same specificity trap as the step titles. */
.mk-area-section p.mk-area__note{
  color:rgba(26,29,33,.46)!important;
  font-size:13.5px!important;
  font-weight:500!important;
}
/* "Recent work" now sits at the same size as "Before & after" — it should
   be on the same face too. */
.mk-gal__head--center .mk-gal__h{
  font-family:var(--tp-ff-clash-semibold)!important;
  font-weight:600!important;
  text-transform:uppercase;
}
/* core.css:1055 `.mk-area-section a{color:...!important}` is 0,1,1 and beats
   `.mk-btn-brand` at 0,1,0 — the label came out orange on an orange pill.
   Any button dropped into this section needs the section class in front of
   it; that is now three times this rule has caught me. */
.mk-area-section .mk-area__cta a.mk-btn-brand,
.mk-area-section .mk-area__cta a.mk-btn-brand:hover{ color:#fff!important; }