/* ============================================================================
   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-ink)}
.mc-btn--primary:hover{background:var(--mc-brand-press);color: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-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}}

/* 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}
.mc-announce-item{display:inline-flex;align-items:center}
.mc-announce-item::after{content:"\25C6";margin:0 26px;opacity:.5;font-size:.55em}
.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-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:22px 22px 20px;display:flex;flex-direction:column}
.mc-stars{color:var(--mc-brand);letter-spacing:2px;margin-bottom:10px}
.mc-star{display:inline-block}
/* Stars fill in tied to scroll position: --lit ramps 0→1 per star as --p (scroll
   progress, set in footer.php) crosses each star's threshold. Reverses on scroll up.
   Only active once JS adds .mc-anim-ready, so no-JS keeps them fully visible. */
.mc-reviews-anim.mc-anim-ready .mc-star{
  --lit:clamp(0, calc((var(--p,0) - var(--i,0) * 0.12) * 5), 1);
  opacity:calc(.3 + var(--lit) * .7);
  transform:scale(calc(.7 + var(--lit) * .3)) rotate(calc((1 - var(--lit)) * -18deg));
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  .mc-reviews-anim.mc-anim-ready .mc-star{opacity:1;transform:none}
}
.mc-rev-text{font-size:.95rem;flex:1}
.mc-rev-meta{display:flex;flex-direction:column;margin-top:12px;font-size:.85rem}
.mc-rev-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.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-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-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-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:rgba(224,131,3,.16); border-color:rgba(224,131,3,.5); color: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 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; }