/* ============================================================================
   CMT BASE — Design Tokens (platform-agnostic). Per client: edit SWAP ZONE only.
   ============================================================================ */
/* ---------- PER-CLIENT SWAP ZONE — current: MUDDY COWBOYS ---------- */
:root{
  --mc-brand:#E08303; --mc-brand-bright:#F5972A; --mc-brand-deep:#B86A02; --mc-brand-press:#C47002;
  --mc-accent-2:#5A3E22;
  --mc-ink:#1A1714; --mc-ink-soft:#28241F; --mc-paper:#F7F4EE; --mc-paper-pure:#FFFFFF;
  --mc-line:#E5E0D8; --mc-muted:#6B6359;
  --mc-font-display:'Oswald',sans-serif; --mc-font-body:'Inter',sans-serif;
  --mc-radius:8px;
}
/* STYLE PRESETS (copy one over the 3 lines above for a different feel):
   INDUSTRIAL: Oswald / Inter / 6px   ·  CLEAN TRADE: 'Plus Jakarta Sans' / Inter / 16px
   PREMIUM: 'Fraunces' / Inter / 10px                                                     */

/* ---------- SYSTEM LAYER — the bones. Identical on every site. ---------- */
:root{
  --mc-fs-h1:clamp(2.5rem,5vw,4rem); --mc-fs-h2:clamp(1.7rem,3.5vw,2.2rem);
  --mc-fs-h3:1.3rem; --mc-fs-body:1.0625rem; --mc-fs-small:.875rem; --mc-fs-eyebrow:.8rem;
  --mc-lh-tight:1.05; --mc-lh-head:1.12; --mc-lh-body:1.65; --mc-ls-eyebrow:.16em;
  --mc-maxw:1200px; --mc-section-y:clamp(56px,8vw,88px); --mc-gap:24px; --mc-pad-x:clamp(20px,5vw,40px);
  --mc-shadow-sm:0 1px 0 rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.06);
  --mc-shadow-md:0 8px 24px rgba(0,0,0,.10); --mc-shadow-cta:0 4px 20px rgba(0,0,0,.20);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--mc-font-body);font-size:var(--mc-fs-body);line-height:var(--mc-lh-body);
  color:var(--mc-ink);background:var(--mc-paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--mc-font-display);line-height:var(--mc-lh-head);margin:0 0 .5em}
h1{font-weight:700;font-size:var(--mc-fs-h1);text-transform:uppercase;line-height:var(--mc-lh-tight)}
h2{font-weight:600;font-size:var(--mc-fs-h2);text-transform:uppercase}
h3{font-weight:600;font-size:var(--mc-fs-h3);text-transform:uppercase}
p{margin:0 0 .9rem;max-width:64ch}
a{color:var(--mc-brand-deep);text-decoration:none}
a:hover{color:var(--mc-brand-press)}

/* Layout helpers */
.mc-section{padding:var(--mc-section-y) var(--mc-pad-x)}
.mc-inner{max-width:var(--mc-maxw);margin-inline:auto}
.mc-dark{background:var(--mc-dark-bg,var(--mc-ink));color:#fff}
.mc-dark h1,.mc-dark h2,.mc-dark h3,.mc-dark h4{color:#fff}
.mc-dark a{color:var(--mc-brand-bright)}
.mc-light{background:var(--mc-light-bg,var(--mc-paper));color:var(--mc-ink)}
.mc-muted{color:var(--mc-muted)}
.mc-dark .mc-muted{color:#C9C2B8}

/* Eyebrow */
.mc-eyebrow{display:inline-block;font-family:var(--mc-font-display);font-weight:600;
  font-size:var(--mc-fs-eyebrow);letter-spacing:var(--mc-ls-eyebrow);text-transform:uppercase;
  color:var(--mc-brand);position:relative;padding-bottom:9px;margin-bottom:14px}
.mc-eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--mc-brand)}

/* Buttons */
.mc-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mc-font-body);font-weight:700;
  font-size:.92rem;padding:13px 26px;border-radius:var(--mc-radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.mc-btn--primary{background:var(--mc-brand);color:var(--mc-on-brand,var(--mc-ink))}
.mc-btn--primary:hover{background:var(--mc-brand-press);color:var(--mc-on-brand,var(--mc-ink))}
.mc-btn--dark{background:var(--mc-ink);color:#fff}
.mc-btn--dark:hover{background:var(--mc-ink-soft);color:#fff}
.mc-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.30)}
.mc-btn--ghost:hover{border-color:var(--mc-brand);color:var(--mc-brand-bright)}
/* Buttons sit inside .mc-dark sections (hero, panels); keep their own text color,
   otherwise `.mc-dark a` turns primary buttons gold-on-gold (invisible). */
.mc-dark .mc-btn--primary{color:var(--mc-on-brand,var(--mc-ink))}
.mc-dark .mc-btn--dark{color:#fff}
.mc-dark .mc-btn--ghost{color:#fff}
.mc-dark .mc-btn--ghost:hover{color:var(--mc-brand-bright)}

/* Card */
.mc-card{background:var(--mc-paper-pure);border:1px solid var(--mc-line);border-radius:var(--mc-radius);
  box-shadow:var(--mc-shadow-sm);overflow:hidden}
.mc-dark .mc-card{background:var(--mc-ink-soft);border-color:rgba(255,255,255,.08)}

/* Grids */
.mc-grid{display:grid;gap:var(--mc-gap)}
.mc-grid-2{grid-template-columns:repeat(2,1fr)}
.mc-grid-3{grid-template-columns:repeat(3,1fr)}
.mc-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.mc-grid-3,.mc-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mc-grid-2,.mc-grid-3,.mc-grid-4{grid-template-columns:1fr}}

.mc-section-head{max-width:680px;margin-bottom:36px}

/* ============================================================================
   THEME COMPONENT STYLES (ported from the Astro components)
   ============================================================================ */
:root{--mc-logo-h:52px;--mc-header-h:max(72px, calc(var(--mc-logo-h) + 22px))}
.mc-header{position:sticky;top:0;z-index:1000;background:#fff;min-height:var(--mc-header-h,72px);display:flex;align-items:center;
  padding:0 var(--mc-pad-x);box-shadow:var(--mc-shadow-sm);border-bottom:3px solid var(--mc-brand)}
.mc-header-inner{width:100%;max-width:var(--mc-maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.mc-logo{font-family:var(--mc-font-display);font-weight:700;text-transform:uppercase;font-size:1.2rem;color:var(--mc-ink);letter-spacing:.02em}
.mc-nav{display:flex;gap:30px;margin-left:auto;list-style:none}
.mc-nav a{font-family:var(--mc-font-body);font-weight:500;font-size:.95rem;color:var(--mc-ink)}
.mc-nav a:hover{color:var(--mc-brand-deep)}
.mc-header-cta{padding:11px 20px;font-size:.85rem}
.mc-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.mc-burger span{width:24px;height:2px;background:var(--mc-ink);border-radius:2px}
.mc-mobile{display:none;flex-direction:column;position:absolute;top:var(--mc-header-h,72px);left:0;right:0;background:#fff;padding:16px var(--mc-pad-x) 24px;box-shadow:var(--mc-shadow-md);gap:4px;list-style:none}
.mc-mobile.open{display:flex}
.mc-mobile a{padding:11px 0;font-weight:500;color:var(--mc-ink)}
@media(max-width:860px){.mc-nav,.mc-header-cta{display:none}.mc-burger{display:flex}}
/* Optional compact mobile header button (fills the space between logo and burger) */
.mc-header-mobtn{display:none}
@media(max-width:860px){
  .mc-header-mobtn{display:inline-flex;padding:9px 15px;font-size:.82rem;gap:6px;white-space:nowrap}
  .mc-header-mobtn .mc-ui-ico{width:16px;height:16px}
  .mc-header--mlogo-center .mc-header-mobtn{margin-left:auto;margin-right:14px}  /* avoid the centered logo */
}

/* Announcement ticker — seamless scrolling marquee at the very top (see template-parts/announce.php) */
.mc-announce{overflow:hidden;white-space:nowrap;font-family:var(--mc-font-body);
  font-size:.85rem;font-weight:600;letter-spacing:.02em}
.mc-announce-track{display:inline-flex;align-items:center;padding:5px 0;
  animation:mc-marquee 32s linear infinite;will-change:transform}
.mc-announce:hover .mc-announce-track{animation-play-state:paused}
/* inline-block (not inline-flex): a flex container would strip the whitespace
   around an inline tel: link, gluing the phone number to the next word. */
.mc-announce-item{display:inline-block;vertical-align:middle}
/* Force one identical size/line-height on every message AND anything nested inside
   one (a link, a stray span, even injected markup), and keep each on a single line,
   so no segment can ever render larger or taller than the rest. High specificity so
   it wins over normal theme/plugin rules. */
.mc-announce .mc-announce-item,
.mc-announce .mc-announce-item *{font-size:.85rem;line-height:1.3;white-space:nowrap}
.mc-announce-item::after{content:"\25C6";margin:0 26px;opacity:.5;font-size:.55em;vertical-align:middle}
.mc-announce a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@keyframes mc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mc-announce-track{animation:none}  /* hold still; overflow clips the rest */
}
/* Color variants pull from the global brand palette */
.mc-announce--brand{background:var(--mc-brand);color:var(--mc-on-brand,var(--mc-ink))}
.mc-announce--deep{background:var(--mc-brand-deep);color:#fff}
.mc-announce--dark{background:var(--mc-ink);color:#fff}
.mc-announce--light{background:var(--mc-paper);color:var(--mc-ink);border-bottom:1px solid var(--mc-line)}

/* ============================================================================
   HEADER STYLES (Site Settings → Header Style + Mobile Logo Position)
   ============================================================================ */
.mc-header{overflow:visible}  /* let the badge dip below the bar */

/* --- Overhanging logo badge: white rounded shape pinned to the top of the bar,
   dipping below it. Header height itself is unchanged. --- */
.mc-header--badge{--mc-header-h:72px}                       /* compact bar; badge overhangs below */
.mc-header--badge .mc-header-inner{position:relative;align-self:stretch}  /* fill bar so badge top:0 = bar top */
.mc-header--badge .mc-logo{position:absolute;top:0;left:0;display:flex;align-items:center;
  background:#fff;padding:12px 22px 16px;border-radius:0 0 18px 18px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);z-index:5}
.mc-header--badge .mc-logo-img{height:calc(var(--mc-logo-h,52px) + 14px)}

/* --- Transparent over hero: logo floats on the hero, header turns solid on scroll
   (JS toggles .is-solid — see footer.php). --- */
.mc-header--transparent{background:transparent;box-shadow:none;border-bottom-color:transparent;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.mc-header--transparent .mc-logo,.mc-header--transparent .mc-nav a{color:#fff}
.mc-header--transparent .mc-burger span{background:#fff}
.mc-header--transparent + main > .mc-hero{margin-top:calc(-1 * var(--mc-header-h,72px));padding-top:calc(var(--mc-header-h,72px) + clamp(48px,7vw,80px))}
/* Solid on scroll, OR while the mobile dropdown is open (so the white menu doesn't
   float under a transparent bar). */
.mc-header--transparent.is-solid,
.mc-header--transparent:has(.mc-mobile.open){background:#fff;box-shadow:var(--mc-shadow-sm);border-bottom:3px solid var(--mc-brand)}
.mc-header--transparent.is-solid .mc-logo,.mc-header--transparent.is-solid .mc-nav a,
.mc-header--transparent:has(.mc-mobile.open) .mc-logo{color:var(--mc-ink)}
.mc-header--transparent.is-solid .mc-burger span,
.mc-header--transparent:has(.mc-mobile.open) .mc-burger span{background:var(--mc-ink)}

/* --- Mobile logo position (only at the burger breakpoint). Must come last so it
   wins over the badge's left:0 on small screens. --- */
@media(max-width:860px){
  .mc-header--mlogo-center .mc-header-inner{position:relative}
  .mc-header--mlogo-center .mc-logo{position:absolute;left:50%;transform:translateX(-50%);margin:0}
  .mc-header--mlogo-center .mc-burger{margin-left:auto}  /* keep burger pinned right */
  .mc-header--badge.mc-header--mlogo-center .mc-logo{top:0;left:50%}
}

.mc-hero{padding:clamp(64px,10vw,120px) var(--mc-pad-x);background:radial-gradient(120% 130% at 80% -10%,#2a2620 0%,var(--mc-ink) 55%)}
.mc-hero-inner{max-width:760px}
.mc-hero-sub{font-size:1.15rem;margin:6px 0 28px}
.mc-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.mc-hero-badges{display:flex;gap:12px;flex-wrap:wrap}
.mc-hero-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mc-font-display);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:8px 14px;border-radius:6px}
.mc-hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--mc-brand)}

.mc-svc{padding:26px 22px}.mc-svc-icon{width:44px;height:44px;border-radius:8px;background:var(--mc-brand);margin-bottom:16px;display:flex;align-items:center;justify-content:center;color:var(--mc-ink)}
.mc-svc-svg{width:24px;height:24px;display:block}
.mc-svc h3{font-size:1.1rem;margin-bottom:8px}.mc-svc p{font-size:.92rem;margin:0}
.mc-step-num{width:48px;height:48px;border-radius:50%;background:var(--mc-brand);color:var(--mc-ink);font-family:var(--mc-font-display);font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mc-step h3{font-size:1.15rem;margin-bottom:6px}.mc-step p{font-size:.95rem;margin:0}

/* How It Works — scroll progress stepper (JS sets --p 0..1 + .is-filled; see footer.php) */
.mc-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:24px;text-align:center}
.mc-steps .mc-step{position:relative;z-index:1}
.mc-steps .mc-step-num{margin-inline:auto;background:var(--mc-ink);color:#fff;border:2px solid rgba(255,255,255,.28);
  transition:background .35s ease,color .35s ease,border-color .35s ease}
.mc-steps .mc-step.is-filled .mc-step-num{background:var(--mc-brand);color:var(--mc-ink);border-color:var(--mc-brand)}
.mc-steps-track{position:absolute;top:24px;left:calc(50% / var(--n,3));right:calc(50% / var(--n,3));
  height:3px;background:rgba(255,255,255,.18);border-radius:2px;z-index:0;overflow:hidden}
.mc-steps-fill{height:100%;width:calc(var(--p,0) * 100%);background:var(--mc-brand);border-radius:2px;transition:width .15s linear}
@media(max-width:600px){
  .mc-steps{grid-template-columns:1fr;gap:28px;text-align:left}
  .mc-steps .mc-step{padding-left:64px}
  .mc-steps .mc-step-num{position:absolute;left:0;top:0;margin:0}
  .mc-steps-track{top:24px;bottom:24px;left:23px;right:auto;width:3px;height:auto}
  .mc-steps-fill{width:100%;height:calc(var(--p,0) * 100%)}
}
@media(prefers-reduced-motion:reduce){.mc-steps-fill,.mc-steps .mc-step-num{transition:none}}
.mc-proj-ph{aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#3a342c}
.mc-proj-body{padding:16px 18px 20px}
.mc-proj-cat{font-family:var(--mc-font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:var(--mc-brand-bright)}
.mc-proj h3{font-size:1.05rem;margin:3px 0 5px}.mc-proj p{font-size:.9rem;margin:0}

.mc-rev{padding:18px 20px 18px;display:flex;flex-direction:column}
.mc-stars{color:var(--mc-brand);letter-spacing:2px;margin-bottom:8px}
.mc-rev-text{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mc-rev.is-expanded .mc-rev-text{-webkit-line-clamp:unset;overflow:visible}
.mc-rev-more{align-self:flex-start;background:none;border:0;color:var(--mc-brand-bright);cursor:pointer;padding:0;margin-top:8px;font:600 .85rem var(--mc-font-body)}
.mc-rev-more:hover{text-decoration:underline}
.mc-rev-meta{display:flex;flex-direction:column;margin-top:auto;padding-top:10px;font-size:.85rem}

/* ---- Adaptive reviews marquee: static (≤3) / single row (4–7) / double (8+) ---- */
.mc-marquee{overflow:hidden}
/* Full-bleed to the screen edges (marquee sits outside .mc-inner; negate section
   padding). Soft mask fades cards at the edges instead of a hard clip. */
.mc-marquee--bleed{margin-top:34px;margin-inline:calc(-1 * var(--mc-pad-x));
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)}
.mc-mq-row{display:flex;width:max-content;animation:mc-mq-left var(--dur,40s) linear infinite}
.mc-mq-row + .mc-mq-row{margin-top:24px}
.mc-mq-row--rev{animation-name:mc-mq-right}
.mc-marquee:hover .mc-mq-row,
.mc-marquee.is-paused .mc-mq-row{animation-play-state:paused}
@keyframes mc-mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mc-mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mc-marquee .mc-rev,.mc-reviews-grid .mc-rev{flex:0 0 340px}
/* Trailing margin (not flex `gap`) so one copy = card+margin per card = exactly half the
   strip, making translateX(-50%) a pixel-perfect seamless loop. */
.mc-marquee .mc-rev{margin-right:24px}

/* Mobile: the SAME marquee — just smaller cards and a tighter heading gap. */
@media(max-width:600px){
  .mc-marquee--bleed{margin-top:24px}
  .mc-marquee .mc-rev{flex:0 0 260px;margin-right:16px}
}
/* Pause on touch-hold too (hover already covers desktop / hybrid devices). */
.mc-marquee:active .mc-mq-row{animation-play-state:paused}

/* Reduced motion: static, contained responsive grid instead of auto-scroll */
@media(prefers-reduced-motion:reduce){
  .mc-marquee--bleed{margin-inline:0;-webkit-mask-image:none;mask-image:none}
  .mc-marquee{overflow:visible;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;
    max-width:var(--mc-maxw);margin-inline:auto}
  .mc-mq-row{display:contents;animation:none}
  .mc-mq-dup{display:none}
  .mc-marquee .mc-rev{flex:none;transform:none;margin-right:0}
}
.mc-rev-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* Review listings — platform icon badges under the Reviews cards (matches footer socials) */
.mc-listings{text-align:center;margin-top:clamp(30px,4vw,46px)}
.mc-listings .mc-eyebrow::after{left:50%;transform:translateX(-50%)}   /* center the underline */
.mc-listings-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.mc-listing{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.mc-dark .mc-listing,.mc-listing{color:var(--mc-brand-bright)}   /* gold glyph (beats .mc-dark a) */
.mc-listing:hover,.mc-dark .mc-listing:hover{background:var(--mc-brand);border-color:var(--mc-brand);color:var(--mc-ink);transform:translateY(-2px)}
.mc-listing .mc-ui-ico{width:22px;height:22px}
.mc-areas{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.mc-areas-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:18px}
.mc-areas-list a{font-weight:500}
.mc-areas-map iframe{width:100%;height:360px;border:0;border-radius:var(--mc-radius);box-shadow:var(--mc-shadow-sm)}
@media(max-width:860px){.mc-areas{grid-template-columns:1fr}}
.mc-faq-item{border:1px solid var(--mc-line);border-radius:var(--mc-radius);background:#fff;padding:0 20px;margin-bottom:12px}
.mc-faq-item summary{font-family:var(--mc-font-display);font-weight:600;text-transform:uppercase;font-size:1rem;padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.mc-faq-item summary::after{content:"+";color:var(--mc-brand);font-size:1.4rem}
.mc-faq-item[open] summary::after{content:"–"}
.mc-faq-item p{padding-bottom:18px;margin:0}
/* CTA band sits tight under a light section (e.g. FAQ), but gets normal top
   spacing when it follows a dark section (e.g. the About owner highlight). */
.mc-cta-section{padding-top:0}
.mc-dark + .mc-cta-section{padding-top:var(--mc-section-y)}
.mc-cta-band{background:var(--mc-brand);color:var(--mc-on-brand,var(--mc-ink));border-radius:var(--mc-radius);padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mc-cta-band h2{color:var(--mc-on-brand,var(--mc-ink));margin:0}.mc-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.mc-ghl{background:#fff;border:1px solid var(--mc-line);border-radius:var(--mc-radius);box-shadow:var(--mc-shadow-sm);overflow:hidden}
.mc-ghl-placeholder{padding:28px}
.mc-ghl-placeholder h3{margin-bottom:18px}
.mc-ghl-row{height:46px;background:var(--mc-paper);border:1px solid var(--mc-line);border-radius:var(--mc-radius);margin-bottom:14px}
.mc-ghl-row--area{height:110px}
.mc-ghl-send{width:100%;justify-content:center;margin-top:4px}
.mc-ghl-note{font-size:.8rem;margin:12px 0 0}
/* Contact details list */
.mc-contact-list{list-style:none;margin:20px 0 26px;display:grid;gap:12px}
.mc-contact-list li{display:flex;flex-direction:column;gap:2px}
.mc-contact-k{font-family:var(--mc-font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:var(--mc-muted)}
.mc-contact-list a{font-weight:600}
.mc-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
@media(max-width:860px){.mc-contact{grid-template-columns:1fr}}
.mc-footer{padding:56px var(--mc-pad-x) 28px}
.mc-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:36px}
/* Brand column: CTA + social icons */
.mc-foot-tag{margin-bottom:18px}
.mc-foot-cta{margin-bottom:18px}
.mc-foot-social{display:flex;gap:10px;flex-wrap:wrap}
.mc-foot-soc{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#C9C2B8;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.mc-foot-soc:hover{background:var(--mc-brand);border-color:var(--mc-brand);color:var(--mc-ink)}
.mc-foot-soc .mc-ui-ico{width:18px;height:18px}
/* Contact column: icon + label/value rows */
.mc-foot-ci{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;text-decoration:none}
.mc-foot-ci .mc-ui-ico{width:20px;height:20px;color:var(--mc-brand-bright);flex:0 0 auto;margin-top:1px}
.mc-foot-ci span{display:flex;flex-direction:column;line-height:1.35}
.mc-foot-ci small{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.5)}
.mc-foot-ci strong{font-size:.95rem;font-weight:600;color:#fff}
a.mc-foot-ci:hover strong{color:var(--mc-brand-bright)}
.mc-foot-logo{font-family:var(--mc-font-display);font-weight:700;text-transform:uppercase;font-size:1.3rem;margin-bottom:6px}
.mc-foot-logo--img{display:inline-block;margin-bottom:14px}.mc-foot-logo--img img{display:block;height:var(--mc-foot-logo-h,64px);width:auto;max-width:100%}
.mc-foot-phone{display:inline-block;margin-top:10px;font-family:var(--mc-font-display);font-weight:600;font-size:1.25rem;color:var(--mc-brand-bright)}
.mc-footer h4{font-size:.85rem;letter-spacing:.08em;color:var(--mc-brand);margin-bottom:14px;text-transform:uppercase}
.mc-footer ul{list-style:none}.mc-footer li{margin-bottom:8px}
.mc-footer li a{color:#C9C2B8;font-size:.92rem}.mc-footer li a:hover{color:#fff}
.mc-foot-svc{color:#C9C2B8;font-size:.92rem}
.mc-foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;
  display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:600px){.mc-foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}}
.mc-foot-credit{color:var(--mc-brand-bright);font-weight:600;text-decoration:underline}
.mc-foot-credit:hover{color:#fff}
/* "Serving" location pills — sits below the divider bar, above the copyright line */
.mc-foot-serving{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:52px;padding:34px 0 10px;border-top:1px solid rgba(255,255,255,.1)}
.mc-foot-serving-label{font-family:var(--mc-font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.8rem;color:#C9C2B8;margin-right:4px}
.mc-foot-pill{display:inline-block;padding:4px 14px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#C9C2B8;font-size:.85rem;font-weight:500;
  transition:background .18s,color .18s,border-color .18s}
.mc-foot-pill:hover{background:var(--mc-brand);border-color:var(--mc-brand);color:var(--mc-ink)}
/* When the pill row is present it owns the divider, so drop the copyright line's bar */
.mc-foot-serving + .mc-foot-bottom{margin-top:20px;padding-top:0;border-top:none}
@media(max-width:980px){.mc-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mc-footer-grid{grid-template-columns:1fr}}
/* Hidden state slides down off-screen; JS adds .is-visible to slide it in (see footer.php).
   translate keeps the -50% horizontal centering while animating the vertical offset. */
.mc-pill{position:fixed;bottom:20px;left:50%;transform:translate(-50%,140%);z-index:999;display:none;align-items:center;gap:10px;background:var(--mc-brand);color:var(--mc-ink);font-weight:700;padding:13px 26px;border-radius:100px;box-shadow:var(--mc-shadow-cta);white-space:nowrap;text-decoration:none;opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.mc-pill.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mc-pill svg{width:18px;height:18px}
@media(max-width:860px){.mc-pill{display:inline-flex}}

/* ============================================================================
   POLISH PASS — hero rebuild, section rhythm, images, blog, tighter spacing
   ============================================================================ */
:root{ --mc-section-y: clamp(48px,7vw,76px); }  /* tighter vertical rhythm */

/* Hero: tighter, left-pinned, photo-ready */
.mc-hero{ padding: clamp(56px,8vw,96px) var(--mc-pad-x); }
/* Box spans the site container (aligns with header/sections on all widths);
   inner blocks cap at 640px and pin left so copy stays readable but flush-left. */
.mc-hero-inner{ max-width: var(--mc-maxw); text-align: left; }
.mc-hero-inner > *{ max-width: 640px; margin-inline: 0; }
.mc-hero--photo{ background-color: var(--mc-ink); }

/* Credentials row (replaces the old badge row; sits above H1) */
.mc-cred{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.mc-cred-item{ font-family:var(--mc-font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; font-size:.72rem; color:#fff; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); padding:6px 12px; border-radius:6px; }
.mc-cred-item:last-child{ background:var(--mc-cred-bg,color-mix(in srgb,var(--mc-brand) 22%,transparent)); border-color:var(--mc-cred-bg,color-mix(in srgb,var(--mc-brand-bright) 60%,transparent)); color:var(--mc-cred-fg,var(--mc-brand-bright)); }

/* Header logo image */
.mc-logo-img{ height:var(--mc-logo-h,52px); width:auto; display:block; }

/* Buttons: subtle premium tightening */
.mc-btn{ letter-spacing:.04em; }
/* Optional uppercase CTAs (toggle in Site Settings; on by default via body class) */
body.mc-cta-upper .mc-btn{ text-transform:uppercase; letter-spacing:.06em; }
.mc-header-cta{ font-weight:700; }

/* Boxed projects panel (dark panel on a light section, like Dig Deep) */
.mc-panel{ background:var(--mc-ink); border-radius:calc(var(--mc-radius) + 6px);
  padding: clamp(28px,5vw,48px); }
.mc-panel .mc-proj-ph{ background-color:#3a342c; }

/* Reviews: dark section, optional image beside the heading */
.mc-reviews-top.has-img{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.mc-reviews-img{ aspect-ratio:4/3; background-size:cover; background-position:center;
  border-radius:var(--mc-radius); box-shadow:var(--mc-shadow-md); }
@media(max-width:860px){ .mc-reviews-top.has-img{ grid-template-columns:1fr; } }

/* FAQ: two columns (image left, accordion right) */
.mc-faq-wrap.has-img{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:stretch; }
.mc-faq-wrap:not(.has-img){ max-width:820px; margin-inline:auto; }
/* Image matches the height of the FAQ list (no fixed aspect), so it never leaves
   dead space with few FAQs or gets dwarfed by many. Floor keeps it from going tiny. */
.mc-faq-img{ background-size:cover; background-position:center; min-height:260px;
  border-radius:var(--mc-radius); box-shadow:var(--mc-shadow-sm); }
@media(max-width:860px){ .mc-faq-wrap.has-img{ grid-template-columns:1fr; } .mc-faq-img{ aspect-ratio:16/9; min-height:0; } }

/* Blog: distinct (lighter, warmer) dark band + seam so it separates from the
   Reviews section above (which is also dark) without breaking the dark/light flow. */
.mc-blog-sec{ background:#2b2721; border-top:1px solid rgba(255,255,255,.07); }

/* Blog post cards */
.mc-post{ display:block; color:inherit; text-decoration:none; transition:transform .18s ease; }
.mc-post:hover{ transform:translateY(-3px); }
.mc-post-ph{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#3a342c; }
.mc-post-body{ padding:16px 18px 20px; }
.mc-post-date{ font-family:var(--mc-font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; font-size:.7rem; color:var(--mc-brand-bright); }
.mc-post h3{ font-size:1.05rem; margin:5px 0 6px; color:#fff; }
.mc-post p{ font-size:.9rem; margin:0 0 10px; }
.mc-post-more{ font-family:var(--mc-font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.78rem; color:var(--mc-brand-bright); }

/* Gallery grid (page-gallery.php) */
.mc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mc-gallery-item{aspect-ratio:1;background-size:cover;background-position:center;background-color:#3a342c;
  border-radius:var(--mc-radius);cursor:pointer;display:block;
  transition:transform .18s ease,box-shadow .18s ease}
.mc-gallery-item:hover{transform:translateY(-3px);box-shadow:var(--mc-shadow-md)}
@media(max-width:600px){.mc-gallery{grid-template-columns:repeat(2,1fr);gap:8px}}

/* Lightbox (footer.php overlay; any [data-lb] opens it) */
.mc-lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(12,10,8,.94)}
.mc-lightbox.is-open{display:flex}
.mc-lightbox-img{max-width:92vw;max-height:86vh;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none}
.mc-lb-nav,.mc-lb-close{position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;transition:background .18s ease}
.mc-lb-nav:hover,.mc-lb-close:hover{background:rgba(255,255,255,.26)}
.mc-lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:2rem}
.mc-lb-prev{left:20px}.mc-lb-next{right:20px}
.mc-lb-close{top:20px;right:20px;width:44px;height:44px;border-radius:50%;font-size:1.7rem}
.mc-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:.9rem;letter-spacing:.05em;opacity:.85}
.mc-pg-img[data-lb]{cursor:pointer}
body.mc-lb-open{overflow:hidden}
@media(max-width:700px){.mc-lb-nav{display:none}}  /* mobile: swipe instead of buttons */

/* Featured / signature work — open image+text panels (not cards) on the dark section */
.mc-featured{display:grid;gap:clamp(44px,6vw,72px)}
.mc-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.mc-feature-media{min-width:0}
/* Swipeable image strip; each slide also opens the lightbox (click to enlarge) */
.mc-feature-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  border-radius:var(--mc-radius);scrollbar-width:none}
.mc-feature-strip::-webkit-scrollbar{display:none}
.mc-feature-slide{flex:0 0 100%;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#3a342c;
  border-radius:var(--mc-radius);box-shadow:var(--mc-shadow-md);scroll-snap-align:start;cursor:pointer}
.mc-feature-hint{display:block;margin-top:10px;font-size:.78rem;color:var(--mc-brand-bright);opacity:.9}
.mc-feature-body{display:flex;flex-direction:column;justify-content:center}
.mc-feature-body h3{font-size:clamp(1.5rem,2.8vw,2.2rem);margin:8px 0 12px;color:#fff}
.mc-feature-body p{margin:0 0 16px}
.mc-feature-link{margin-top:4px}
.mc-feature:nth-child(even) .mc-feature-media{order:2}   /* alternate image side */
@media(max-width:760px){
  .mc-feature,.mc-feature:nth-child(even){grid-template-columns:1fr;gap:20px}
  .mc-feature:nth-child(even) .mc-feature-media{order:0}
}

/* Distinct band for the About section so it never blends with adjacent light sections */
.mc-light-alt{background:var(--mc-paper-pure);border-block:1px solid var(--mc-line)}

/* About / owner section (home + About page) */
.mc-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.mc-about--noimg{grid-template-columns:1fr;max-width:760px}
.mc-about-img{aspect-ratio:4/5;background-size:cover;background-position:center;
  border-radius:var(--mc-radius);box-shadow:var(--mc-shadow-md)}
.mc-about-img--tall{aspect-ratio:3/4}
.mc-about-body h2{margin-bottom:14px}
.mc-about-sign{font-size:.95rem;margin:16px 0 22px}
.mc-about-title{color:var(--mc-muted);font-weight:400}

/* Owner highlight (About page spotlight) */
.mc-owner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,56px);align-items:center}
.mc-owner--noimg{grid-template-columns:1fr;max-width:720px}
.mc-owner-img{aspect-ratio:3/4;background-size:cover;background-position:center;border-radius:var(--mc-radius);box-shadow:var(--mc-shadow-md)}
.mc-owner-body h2{margin:8px 0 4px}
.mc-owner-meta{font-family:var(--mc-font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:.85rem;color:var(--mc-brand-bright);margin-bottom:16px}
@media(max-width:760px){.mc-owner{grid-template-columns:1fr;gap:24px}}
@media(max-width:860px){
  .mc-about{grid-template-columns:1fr;gap:26px}
  .mc-about-img,.mc-about-img--tall{aspect-ratio:16/10;max-height:340px}
}

/* Blog becomes a swipeable horizontal slider on phones (keeps it compact vs. the
   projects section). Native touch scroll + snap — no JS. */
@media(max-width:600px){
  .mc-blog-grid{
    display:flex; grid-template-columns:none;      /* override .mc-grid-3 stacking */
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px;
    margin-inline:calc(-1 * var(--mc-pad-x));       /* bleed to the screen edges   */
    padding-inline:var(--mc-pad-x);
    scroll-padding-inline:var(--mc-pad-x);
    scrollbar-width:none;                           /* hide scrollbar (Firefox)    */
  }
  .mc-blog-grid::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit)     */
  .mc-blog-grid > .mc-post{
    flex:0 0 82%;                                   /* ~1 card + a peek of the next */
    scroll-snap-align:start;
  }
}

/* ============================================================================
   PROJECT DETAIL PAGES + clickable cards
   ============================================================================ */
/* Cards are now links */
.mc-proj{ display:block; color:inherit; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.mc-proj:hover{ transform:translateY(-3px); box-shadow:var(--mc-shadow-md); }
.mc-proj-cat{ color:var(--mc-brand-deep); }            /* readable on light cards   */
.mc-dark .mc-proj-cat{ color:var(--mc-brand-bright); } /* brighter on the dark panel */
.mc-proj-more{ display:inline-block; margin-top:10px; font-family:var(--mc-font-display);
  font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem; color:var(--mc-brand-deep); }
.mc-dark .mc-proj-more{ color:var(--mc-brand-bright); }
.mc-panel-cta{ text-align:center; margin-top:30px; }

/* Single project layout */
.mc-project{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media(max-width:880px){ .mc-project{ grid-template-columns:1fr; gap:32px; } }

.mc-project-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mc-pg-img{ aspect-ratio:4/3; background-size:cover; background-position:center;
  border-radius:var(--mc-radius); background-color:#e3ddd2; }
.mc-pg-main{ grid-column:1 / -1; aspect-ratio:16/10; }
.mc-pg-empty{ background:linear-gradient(135deg,#3a342c,#1f1c17); }

.mc-project-body h1{ margin:6px 0 16px; }
.mc-prose p{ margin-bottom:1rem; }
.mc-prose a{ color:var(--mc-brand-deep); text-decoration:underline; }
.mc-project-quote{ background:var(--mc-paper); border-left:4px solid var(--mc-brand);
  border-radius:0 var(--mc-radius) var(--mc-radius) 0; padding:18px 22px; margin:22px 0; }
.mc-project-quote p{ margin:0 0 8px; font-style:italic; }
.mc-project-quote cite{ font-style:normal; font-weight:600; color:var(--mc-brand-deep); }
.mc-project-meta{ font-size:.85rem; margin:18px 0 22px; }
.mc-project-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Showcase break: transparent cutout straddling a section seam ---------- */
.mc-showcase{
  --sc-seam:62%;
  background:linear-gradient(to bottom,var(--sc-from) 0 var(--sc-seam),var(--sc-to) var(--sc-seam) 100%);
  padding:clamp(8px,2vw,20px) var(--mc-pad-x) clamp(28px,5vw,56px);
  overflow:hidden;
}
.mc-showcase-stage{max-width:var(--mc-maxw);margin-inline:auto;display:flex;justify-content:center;position:relative}
.mc-showcase img{
  display:block;width:min(820px,92%);height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.35)) drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
/* Soft ground shadow under the wheels. */
.mc-showcase-stage::after{
  content:"";position:absolute;left:50%;bottom:-2%;width:min(760px,86%);height:22px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:0;
}
.mc-showcase--left .mc-showcase-stage,.mc-showcase--right .mc-showcase-stage{max-width:none}
.mc-showcase--left{padding-left:0}
.mc-showcase--left .mc-showcase-stage{justify-content:flex-start}
.mc-showcase--left img{width:min(960px,88%)}
.mc-showcase--left .mc-showcase-stage::after{left:0;transform:none;width:min(900px,84%)}
.mc-showcase--right{padding-right:0}
.mc-showcase--right .mc-showcase-stage{justify-content:flex-end}
.mc-showcase--right img{width:min(960px,88%)}
.mc-showcase--right .mc-showcase-stage::after{left:auto;right:0;transform:none;width:min(900px,84%)}
@media (max-width:640px){
  /* Leave room for the shadow so it fades out before the screen edge instead of being clipped. */
  .mc-showcase img{width:92%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.28))}
  .mc-showcase--left img,.mc-showcase--right img{width:100%}
}

/* ---------- Outlined buttons (opt-in: Site Settings → Outlined Buttons) ---------- */
.mc-btn-outlined .mc-btn--primary{border:2px solid #000}
.mc-btn-outlined .mc-btn--primary:hover{border-color:#000;filter:brightness(.9)}

/* ---------- Logo strip: slow continuous marquee under the hero ---------- */
.mc-logos{background:var(--mc-paper-pure);border-bottom:1px solid var(--mc-line);padding:22px 0 26px;overflow:hidden}
.mc-logos-head{text-align:center;font-family:var(--mc-font-display);text-transform:uppercase;letter-spacing:var(--mc-ls-eyebrow);font-size:.78rem;font-weight:600;color:var(--mc-muted);margin:0 var(--mc-pad-x) 16px}
.mc-logos-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mc-logos-track{display:flex;align-items:center;width:max-content;animation:mc-logos-scroll var(--dur,40s) linear infinite;will-change:transform}
.mc-logos-item{display:flex;align-items:center;justify-content:center;height:60px;margin-right:clamp(40px,6vw,72px)}
.mc-logos-item img{display:block;flex:none;filter:grayscale(1);opacity:.7;transition:filter .2s ease,opacity .2s ease}
.mc-logos-item img:hover{filter:none;opacity:1}
.mc-logos:hover .mc-logos-track{animation-play-state:paused}
@keyframes mc-logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mc-logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:12px}
  .mc-logos-dup{display:none}
  .mc-logos-viewport{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){.mc-logos-item{height:48px}.mc-logos-item img{transform:scale(.8)}}

/* Floating call pill follows the button system: on-brand text, and with Outlined Buttons
   the same square corners, black outline and caps as every other brand button. */
.mc-pill{color:var(--mc-on-brand,var(--mc-ink))}
.mc-btn-outlined .mc-pill{border:2px solid #000;border-radius:var(--mc-radius);font-size:.92rem}
.mc-btn-outlined.mc-cta-upper .mc-pill{text-transform:uppercase;letter-spacing:.06em}

/* Announcement bar — fade mode: messages stacked in one cell, crossfading. */
.mc-announce--fade{display:grid;place-items:center;text-align:center;padding:5px var(--mc-pad-x)}
.mc-announce--fade .mc-announce-item{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.mc-announce--fade .mc-announce-item.is-active{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.mc-announce--fade .mc-announce-item::after{content:none}
@media (prefers-reduced-motion:reduce){.mc-announce--fade .mc-announce-item{transition:none}}

/* Hero: single rounded license pill (opt-in) + star trust line */
.mc-cred-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:500;letter-spacing:.01em;color:#fff;background:color-mix(in srgb,var(--mc-brand) 30%,transparent);border:1px solid color-mix(in srgb,var(--mc-brand-bright) 45%,transparent);backdrop-filter:blur(4px)}
.mc-cred-pill svg{width:14px;height:14px;color:var(--mc-brand-bright);flex:none}
.mc-hero-trust{margin:-12px 0 0;font-size:.85rem;color:rgba(255,255,255,.75)}
.mc-hero-trust .mc-stars{color:#FFD130;letter-spacing:2px;margin-right:6px}