/*
 * marketingcopywritinglab.com -- design system
 * Midnight Slate #1A1D2E + Electric Mint #00D4AA + Ghost White #F8F9FC
 * IBM Plex Serif (heading) + Work Sans (body)
 * Nav: TWO-LEVEL STICKY (top bar + main nav) -- unique in series
 * Hero: DIAGONAL SPLIT (slate left / mint right)
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Work+Sans:wght@300;400;500;600;700;800&display=swap');

/* -- TOKENS ------------------------------------------------ */
:root {
  --mcl-slate:    #1A1D2E;
  --mcl-slate-l:  #252840;
  --mcl-mint:     #00D4AA;
  --mcl-mint-d:   #00B896;
  --mcl-mint-l:   rgba(0,212,170,.1);
  --mcl-ghost:    #F8F9FC;
  --mcl-surf:     #EEEEF4;
  --mcl-muted:    #7B7C8E;
  --mcl-border:   rgba(26,29,46,.08);
  --mcl-border-d: rgba(26,29,46,.14);
  --mcl-txt:      #1A1D2E;

  --mcl-fh: 'IBM Plex Serif', Georgia, serif;
  --mcl-fb: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --mcl-r4:  4px; --mcl-r6:  6px; --mcl-r8:  8px;
  --mcl-r12: 12px; --mcl-r16: 16px; --mcl-r20: 20px; --mcl-r24: 24px;
}

/* -- RESET ------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--mcl-fb); font-size: .9375rem; line-height: 1.72; color: var(--mcl-txt); background: var(--mcl-ghost); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: var(--mcl-fb); }
ul { list-style: none; }

/* -- TYPOGRAPHY -------------------------------------------- */
h1,h2,h3,h4 { font-family: var(--mcl-fh); font-weight: 700; line-height: 1.12; color: var(--mcl-slate); }
h1 { font-size: clamp(2.25rem, 5.5vw, 5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.625rem); letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-family: var(--mcl-fb); font-weight: 700; }
p  { line-height: 1.8; }

/* -- CONTAINER --------------------------------------------- */
.mcl-hull { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

/* -- TWO-LEVEL NAV ----------------------------------------- */
#mcl-topbar {
  background: var(--mcl-slate); padding: .5rem 0;
}
.mcl-topbar-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.mcl-topbar-left { display: flex; align-items: center; gap: 1.5rem; }
.mcl-topbar-item { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: rgba(255,255,255,.5); }
.mcl-topbar-item a { color: rgba(255,255,255,.6); transition: color .18s; }
.mcl-topbar-item a:hover { color: var(--mcl-mint); }
.mcl-topbar-socials { display: flex; align-items: center; gap: .5rem; }
.mcl-top-soc { color: rgba(255,255,255,.35); transition: color .18s; }
.mcl-top-soc:hover { color: var(--mcl-mint); }

#mcl-mainnav {
  background: rgba(248,249,252,.96); backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--mcl-border);
  position: sticky; top: 0; z-index: 1000;
  transition: box-shadow .2s;
}
.mcl-nav-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 1.5rem; height: 66px;
}
.mcl-nav-brand {
  font-family: var(--mcl-fh); font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700; color: var(--mcl-slate); white-space: nowrap; flex-shrink: 0;
  letter-spacing: -.015em;
}
.mcl-nav-brand span { color: var(--mcl-mint); }
.mcl-nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: .25rem; }
.mcl-nav-lnk {
  font-family: var(--mcl-fb); font-size: 1.0625rem; font-weight: 600;
  color: var(--mcl-muted); padding: .5rem 1rem; border-radius: var(--mcl-r6);
  transition: color .18s, background .18s;
}
.mcl-nav-lnk:hover, .mcl-nav-lnk.mcl-on { color: var(--mcl-slate); background: var(--mcl-surf); }
.mcl-nav-cta {
  font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 700;
  background: var(--mcl-mint); color: var(--mcl-slate);
  padding: .625rem 1.375rem; border-radius: var(--mcl-r6); border: none;
  transition: background .18s; white-space: nowrap; flex-shrink: 0;
}
.mcl-nav-cta:hover { background: var(--mcl-mint-d); }
.mcl-nav-burger { display: none; background: none; border: none; color: var(--mcl-slate); padding: .5rem; }

/* Mobile drawer */
.mcl-drawer { display: none; position: fixed; inset: 0; z-index: 9000; background: var(--mcl-slate); flex-direction: column; padding: 1.5rem; }
.mcl-drawer.mcl-dr-on { display: flex; }
.mcl-dr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mcl-dr-brand { font-family: var(--mcl-fh); font-size: 1.25rem; font-weight: 700; color: #fff; }
.mcl-dr-brand span { color: var(--mcl-mint); }
.mcl-dr-cls  { background: none; border: none; color: rgba(255,255,255,.5); }
.mcl-dr-lnk  { font-family: var(--mcl-fh); font-size: 1.5rem; font-weight: 700; color: rgba(255,255,255,.7); padding: .875rem 0; border-bottom: 1px solid rgba(255,255,255,.08); display: block; }
.mcl-dr-lnk:hover { color: var(--mcl-mint); }
.mcl-dr-go   { margin-top: 1.5rem; background: var(--mcl-mint); color: var(--mcl-slate); font-family: var(--mcl-fb); font-size: 1rem; font-weight: 700; padding: 1rem; border-radius: var(--mcl-r8); text-align: center; display: block; }

/* -- HERO: DIAGONAL SPLIT ---------------------------------- */
#mcl-diagonal {
  min-height: 100vh; display: flex; align-items: stretch;
  position: relative; overflow: hidden;
}
.mcl-diag-left {
  background: var(--mcl-slate); flex: 0 0 55%;
  display: flex; align-items: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  position: relative; z-index: 2;
}
.mcl-diag-right {
  background: var(--mcl-mint); flex: 0 0 50%;
  margin-left: -5%; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.mcl-diag-right img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.mcl-diag-right::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,212,170,.3) 0%, transparent 70%); }
.mcl-hero-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--mcl-mint); margin-bottom: 1.5rem; display: flex; align-items: center; gap: .5rem;
}
.mcl-hero-label::before { content: ''; width: 18px; height: 1.5px; background: var(--mcl-mint); }
.mcl-hero-h1 { color: #fff; margin-bottom: 1.5rem; max-width: 16ch; }
.mcl-hero-sub { color: rgba(255,255,255,.55); font-size: clamp(1rem, 1.8vw, 1.125rem); max-width: 42ch; margin-bottom: 2.5rem; line-height: 1.78; }
.mcl-hero-acts { display: flex; gap: .875rem; flex-wrap: wrap; }
.mcl-hero-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; max-width: 360px; }
.mcl-proof-tile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--mcl-r8); padding: 1rem 1.25rem; }
.mcl-proof-n { font-family: var(--mcl-fh); font-size: 1.5rem; font-weight: 700; color: var(--mcl-mint); line-height: 1; }
.mcl-proof-l { font-size: .75rem; color: rgba(255,255,255,.4); margin-top: .25rem; }

/* -- BUTTONS ----------------------------------------------- */
.mcl-btn-mint {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mcl-mint); color: var(--mcl-slate);
  font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 700;
  padding: .875rem 2rem; border-radius: var(--mcl-r8); border: none;
  transition: background .18s; white-space: nowrap;
}
.mcl-btn-mint:hover { background: var(--mcl-mint-d); }
.mcl-btn-slate {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mcl-slate); color: #fff;
  font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 700;
  padding: .875rem 2rem; border-radius: var(--mcl-r8); border: none;
  transition: background .18s; white-space: nowrap;
}
.mcl-btn-slate:hover { background: var(--mcl-slate-l); }
.mcl-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--mcl-slate);
  font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 700;
  padding: .875rem 2rem; border-radius: var(--mcl-r8);
  border: 1.5px solid var(--mcl-border-d); transition: border-color .18s;
  white-space: nowrap;
}
.mcl-btn-ghost:hover { border-color: var(--mcl-mint); color: var(--mcl-mint); }
.mcl-btn-ghost-w {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: #fff;
  font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 700;
  padding: .875rem 2rem; border-radius: var(--mcl-r8);
  border: 1.5px solid rgba(255,255,255,.25); transition: border-color .18s;
  white-space: nowrap;
}
.mcl-btn-ghost-w:hover { border-color: rgba(255,255,255,.7); }
.mcl-lnk-mint { display: inline-flex; align-items: center; gap: .375rem; font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 700; color: var(--mcl-mint); }
.mcl-lnk-mint:hover { text-decoration: underline; }

/* -- BANDS ------------------------------------------------- */
.mcl-band     { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.mcl-band-sm  { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.mcl-bg-ghost { background: var(--mcl-ghost); }
.mcl-bg-surf  { background: var(--mcl-surf); }
.mcl-bg-slate { background: var(--mcl-slate); }
.mcl-bg-mint  { background: var(--mcl-mint); }
.mcl-bg-white { background: #fff; }

/* -- EYEBROW ----------------------------------------------- */
.mcl-brow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mcl-fb); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--mcl-mint); margin-bottom: .75rem; }
.mcl-brow::before { content: ''; width: 16px; height: 2px; background: var(--mcl-mint); border-radius: 2px; }
.mcl-brow-dark { color: rgba(255,255,255,.4); }
.mcl-brow-dark::before { background: rgba(255,255,255,.25); }

/* -- SERVICE GRID ------------------------------------------ */
.mcl-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.mcl-svc-card {
  background: #fff; border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r16);
  padding: 2rem; display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s; text-decoration: none;
}
.mcl-svc-card:hover { border-color: var(--mcl-mint); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,212,170,.12); }
.mcl-svc-ico { width: 44px; height: 44px; border-radius: var(--mcl-r8); background: var(--mcl-mint-l); color: var(--mcl-mint); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.mcl-svc-name { font-family: var(--mcl-fh); font-size: 1.1875rem; font-weight: 700; color: var(--mcl-slate); margin-bottom: .625rem; }
.mcl-svc-desc { font-size: .875rem; color: var(--mcl-muted); line-height: 1.75; flex: 1; margin-bottom: 1.5rem; }
.mcl-svc-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--mcl-border); padding-top: 1.25rem; margin-top: auto; }
.mcl-svc-price { font-family: var(--mcl-fh); font-size: .875rem; font-weight: 700; }
.mcl-svc-arr  { color: var(--mcl-muted); transition: transform .18s, color .18s; }
.mcl-svc-card:hover .mcl-svc-arr { transform: translate(3px,-3px); color: var(--mcl-mint); }

/* -- CASE STUDY: TAB DESIGN -------------------------------- */
.mcl-tab-nav { display: flex; gap: .75rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.mcl-tab-btn {
  padding: .625rem 1.5rem; border-radius: 100px;
  font-family: var(--mcl-fb); font-size: .9375rem; font-weight: 600;
  border: 1.5px solid var(--mcl-border-d); background: #fff; color: var(--mcl-muted);
  cursor: pointer; transition: all .2s;
}
.mcl-tab-btn:hover { border-color: var(--mcl-mint); color: var(--mcl-slate); }
.mcl-tab-btn.mcl-tb-on { background: var(--mcl-slate); border-color: var(--mcl-slate); color: #fff; }
.mcl-tab-pane { display: none; }
.mcl-tab-pane.mcl-tp-on { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mcl-tab-img { border-radius: var(--mcl-r16); overflow: hidden; aspect-ratio: 4/3; background: var(--mcl-surf); }
.mcl-tab-img img { width: 100%; height: 100%; object-fit: cover; }
.mcl-tab-cat  { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mcl-mint); margin-bottom: .5rem; }
.mcl-tab-h    { font-family: var(--mcl-fh); font-size: clamp(1.25rem, 2.5vw, 1.875rem); margin-bottom: 1.25rem; }
.mcl-tab-lbl  { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--mcl-muted); margin: 1rem 0 .375rem; }
.mcl-tab-p    { font-size: .9375rem; color: var(--mcl-muted); line-height: 1.78; margin: 0; }
.mcl-tab-stat { display: flex; align-items: baseline; gap: .75rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1.5px solid var(--mcl-border); }
.mcl-stat-n   { font-family: var(--mcl-fh); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; color: var(--mcl-mint); }
.mcl-stat-l   { font-size: .875rem; color: var(--mcl-muted); }

/* -- PROCESS: HORIZONTAL ----------------------------------- */
.mcl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(2rem, 4vw, 3rem); position: relative; }
.mcl-steps::before { content: ''; position: absolute; top: 22px; left: calc(12.5% + 22px); right: calc(12.5% + 22px); height: 1.5px; background: var(--mcl-border-d); z-index: 0; }
.mcl-step { text-align: center; position: relative; z-index: 1; padding: 0 .75rem; }
.mcl-step-dot { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--mcl-mint); color: var(--mcl-mint); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.125rem; transition: background .2s; }
.mcl-step:hover .mcl-step-dot { background: var(--mcl-mint); color: var(--mcl-slate); }
.mcl-step-n { font-family: var(--mcl-fb); font-size: .6875rem; font-weight: 800; color: var(--mcl-mint); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .08em; }
.mcl-step-h { font-family: var(--mcl-fh); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.mcl-step-b { font-size: .875rem; color: var(--mcl-muted); line-height: 1.72; }

/* -- TESTIMONIALS: CAROUSEL -------------------------------- */
.mcl-carousel { position: relative; overflow: hidden; }
.mcl-car-track { display: flex; transition: transform .4s ease; }
.mcl-car-slide { flex: 0 0 100%; padding: 0 1px; }
.mcl-car-inner { max-width: 680px; margin: 0 auto; text-align: center; padding: 3rem 2rem; background: #fff; border-radius: var(--mcl-r20); border: 1.5px solid var(--mcl-border); }
.mcl-car-quote { font-family: var(--mcl-fh); font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-style: italic; font-weight: 400; color: var(--mcl-slate); line-height: 1.65; margin-bottom: 1.5rem; }
.mcl-car-stars { display: flex; justify-content: center; gap: .2rem; color: var(--mcl-mint); margin-bottom: 1rem; }
.mcl-car-name { font-family: var(--mcl-fh); font-size: .9375rem; font-weight: 700; color: var(--mcl-slate); }
.mcl-car-role { font-size: .8125rem; color: var(--mcl-muted); }
.mcl-car-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.mcl-car-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--mcl-border-d); cursor: pointer; transition: background .2s; }
.mcl-car-dot.mcl-cd-on { background: var(--mcl-mint); }
.mcl-car-prev, .mcl-car-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--mcl-border-d); background: #fff; color: var(--mcl-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .18s; z-index: 2; }
.mcl-car-prev { left: 0; }
.mcl-car-next { right: 0; }
.mcl-car-prev:hover, .mcl-car-next:hover { border-color: var(--mcl-mint); color: var(--mcl-mint); }

/* -- PRICING: TIER CARDS ----------------------------------- */
.mcl-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.mcl-tier {
  border-radius: var(--mcl-r16); padding: 2.25rem; background: #fff;
  border: 1.5px solid var(--mcl-border); position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.mcl-tier:hover { border-color: var(--mcl-mint); box-shadow: 0 8px 32px rgba(0,212,170,.1); }
.mcl-tier-hot { background: var(--mcl-slate); border-color: var(--mcl-slate); }
.mcl-tier-hot:hover { border-color: var(--mcl-mint); }
.mcl-tier-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--mcl-mint); color: var(--mcl-slate); font-family: var(--mcl-fb); font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .3rem 1.125rem; border-radius: 100px; white-space: nowrap; }
.mcl-tier-nm  { font-family: var(--mcl-fh); font-size: 1.375rem; font-weight: 700; color: var(--mcl-slate); margin-bottom: .25rem; }
.mcl-tier-hot .mcl-tier-nm { color: #fff; }
.mcl-tier-tag { font-size: .875rem; color: var(--mcl-muted); margin-bottom: 1.25rem; }
.mcl-tier-hot .mcl-tier-tag { color: rgba(255,255,255,.45); }
.mcl-tier-price { font-family: var(--mcl-fh); font-size: 2.75rem; font-weight: 700; color: var(--mcl-slate); line-height: 1; margin-bottom: 1.75rem; }
.mcl-tier-hot .mcl-tier-price { color: var(--mcl-mint); }
.mcl-tier-list { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 2rem; }
.mcl-tier-item { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: var(--mcl-muted); }
.mcl-tier-hot .mcl-tier-item { color: rgba(255,255,255,.55); }
.mcl-tier-chk { color: var(--mcl-mint); flex-shrink: 0; margin-top: 1px; }
.mcl-tier-hot .mcl-tier-chk { color: rgba(255,255,255,.4); }
.mcl-tier-cta { width: 100%; justify-content: center; }

/* -- FAQ: NUMBERED ACCORDION -------------------------------- */
.mcl-faq-list { max-width: 780px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.mcl-faq-item { border-bottom: 1.5px solid var(--mcl-border); }
.mcl-faq-btn {
  width: 100%; display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem 0; background: none; border: none; text-align: left; cursor: pointer;
}
.mcl-faq-num { font-family: var(--mcl-fh); font-size: 1.125rem; font-weight: 700; color: var(--mcl-mint); flex-shrink: 0; min-width: 2rem; }
.mcl-faq-q   { font-family: var(--mcl-fh); font-size: 1.0625rem; font-weight: 600; color: var(--mcl-slate); flex: 1; }
.mcl-faq-ico { color: var(--mcl-muted); flex-shrink: 0; transition: transform .25s; }
.mcl-faq-item.mcl-fq-on .mcl-faq-ico { transform: rotate(180deg); }
.mcl-faq-ans { display: none; padding: 0 0 1.25rem 3.25rem; }
.mcl-faq-item.mcl-fq-on .mcl-faq-ans { display: block; }
.mcl-faq-ans p { font-size: .9375rem; color: var(--mcl-muted); line-height: 1.8; margin: 0; }

/* -- BUILDER ----------------------------------------------- */
.mcl-builder-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.mcl-bld-panel { background: #fff; border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r12); padding: 2rem; margin-bottom: 1.25rem; }
.mcl-bld-title { font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--mcl-muted); margin-bottom: 1rem; padding-bottom: .625rem; border-bottom: 1px solid var(--mcl-border); }
.mcl-pkg-opt { border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r8); padding: 1rem 1.25rem; cursor: pointer; margin-bottom: .625rem; display: flex; align-items: center; gap: 1rem; transition: all .18s; }
.mcl-pkg-opt:hover { border-color: var(--mcl-mint); background: var(--mcl-mint-l); }
.mcl-pkg-opt.mcl-po-on { border-color: var(--mcl-mint); background: var(--mcl-mint-l); }
.mcl-pkg-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--mcl-border-d); flex-shrink: 0; transition: all .18s; }
.mcl-pkg-opt.mcl-po-on .mcl-pkg-radio { border-color: var(--mcl-mint); background: var(--mcl-mint); box-shadow: inset 0 0 0 4px #fff; }
.mcl-opt-nm  { font-family: var(--mcl-fb); font-weight: 700; font-size: .9375rem; color: var(--mcl-slate); }
.mcl-opt-sub { font-size: .8125rem; color: var(--mcl-muted); }
.mcl-opt-prc { margin-left: auto; font-family: var(--mcl-fh); font-size: 1.0625rem; font-weight: 700; color: var(--mcl-slate); white-space: nowrap; }
.mcl-add-opt { border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r8); padding: .875rem 1.125rem; cursor: pointer; margin-bottom: .5rem; display: flex; align-items: center; gap: .875rem; transition: all .18s; }
.mcl-add-opt:hover { border-color: var(--mcl-mint); }
.mcl-add-opt.mcl-ao-on { border-color: var(--mcl-mint); background: var(--mcl-mint-l); }
.mcl-add-chk { width: 20px; height: 20px; border: 1.5px solid var(--mcl-border-d); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; flex-shrink: 0; transition: all .16s; }
.mcl-add-opt.mcl-ao-on .mcl-add-chk { background: var(--mcl-mint); border-color: var(--mcl-mint); }
.mcl-add-nm  { flex: 1; font-size: .9375rem; font-weight: 500; color: var(--mcl-slate); }
.mcl-add-pr  { font-family: var(--mcl-fh); font-size: .9375rem; font-weight: 700; color: var(--mcl-muted); }
.mcl-hrs-row { display: flex; align-items: center; gap: 1rem; }
.mcl-hrs-inp { flex: 1; accent-color: var(--mcl-mint); }
.mcl-hrs-lbl { font-family: var(--mcl-fh); font-size: 1.125rem; font-weight: 700; color: var(--mcl-slate); min-width: 5rem; }

/* Tally */
.mcl-tally { background: var(--mcl-slate); border-radius: var(--mcl-r16); padding: 2rem; position: sticky; top: 5.5rem; }
.mcl-tally-hd { font-family: var(--mcl-fh); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 1.25rem; }
.mcl-tally-rows { display: flex; flex-direction: column; gap: .5rem; min-height: 60px; margin-bottom: 1rem; }
.mcl-tally-row { display: flex; justify-content: space-between; gap: 1rem; }
.mcl-tally-k  { font-size: .875rem; color: rgba(255,255,255,.5); }
.mcl-tally-v  { font-size: .875rem; font-weight: 700; color: rgba(255,255,255,.8); white-space: nowrap; }
.mcl-tally-nil { font-size: .875rem; font-style: italic; color: rgba(255,255,255,.25); }
.mcl-tally-div { border-top: 1px solid rgba(255,255,255,.12); margin: 1rem 0; }
.mcl-tally-total { display: flex; justify-content: space-between; align-items: baseline; }
.mcl-tt-l { font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); }
.mcl-tt-v { font-family: var(--mcl-fh); font-size: 2.25rem; font-weight: 700; color: var(--mcl-mint); }
.mcl-tally-go   { margin-top: 1.25rem; width: 100%; justify-content: center; }
.mcl-tally-note { font-size: .6875rem; color: rgba(255,255,255,.2); text-align: center; margin-top: .75rem; line-height: 1.6; }

/* -- CHECKOUT --------------------------------------------- */
.mcl-ck-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }
.mcl-ck-form { background: #fff; border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r16); padding: 2.5rem; }
.mcl-ck-sum  { background: var(--mcl-surf); border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r16); padding: 2rem; position: sticky; top: 5.5rem; }
.mcl-ck-sum-hd { font-family: var(--mcl-fh); font-size: 1.125rem; font-weight: 700; margin-bottom: 1.25rem; }
.mcl-ck-row  { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.mcl-ck-k    { font-size: .875rem; color: var(--mcl-muted); }
.mcl-ck-v    { font-size: .875rem; font-weight: 700; text-align: right; }
.mcl-ck-div  { border-top: 1px solid var(--mcl-border); margin: 1rem 0; }
.mcl-ck-tot  { display: flex; justify-content: space-between; align-items: baseline; }
.mcl-ck-tl   { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mcl-muted); }
.mcl-ck-tv   { font-family: var(--mcl-fh); font-size: 2rem; font-weight: 700; color: var(--mcl-mint); }
.mcl-ck-note { font-size: .8125rem; color: var(--mcl-muted); margin-top: 1rem; line-height: 1.65; }
.mcl-form-sec { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mcl-muted); margin: 1.75rem 0 .875rem; padding-bottom: .5rem; border-bottom: 1px solid var(--mcl-border); }
.mcl-form-sec:first-of-type { margin-top: 0; }
.mcl-field { margin-bottom: 1.125rem; }
.mcl-field label { display: block; font-size: .875rem; font-weight: 600; color: var(--mcl-slate); margin-bottom: .375rem; }
.mcl-field input, .mcl-field select, .mcl-field textarea { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--mcl-border-d); border-radius: var(--mcl-r8); font-family: var(--mcl-fb); font-size: .9375rem; color: var(--mcl-slate); background: var(--mcl-ghost); transition: border-color .18s; -webkit-appearance: none; }
.mcl-field input:focus, .mcl-field select:focus, .mcl-field textarea:focus { outline: none; border-color: var(--mcl-mint); box-shadow: 0 0 0 3px var(--mcl-mint-l); }
.mcl-field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mcl-tos-row { display: flex; align-items: flex-start; gap: .75rem; margin: 1.5rem 0; }
.mcl-tos-row input { flex-shrink: 0; margin-top: 3px; accent-color: var(--mcl-mint); }
.mcl-tos-row label { font-size: .875rem; color: var(--mcl-muted); line-height: 1.6; }
.mcl-tos-row a { color: var(--mcl-mint); text-decoration: underline; }

/* -- PAGE CAPS --------------------------------------------- */
.mcl-page-cap { background: var(--mcl-slate); padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem); text-align: center; }
.mcl-page-cap h1 { color: #fff; margin-bottom: .875rem; }
.mcl-page-cap-sub { color: rgba(255,255,255,.5); max-width: 52ch; margin: 0 auto; font-size: clamp(.9375rem, 1.8vw, 1.0625rem); line-height: 1.8; }

/* Svc page cap */
.mcl-svc-cap { background: var(--mcl-ghost); border-bottom: 1.5px solid var(--mcl-border); padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(3rem, 5vw, 4rem); text-align: center; }
.mcl-svc-cap h1 { max-width: 24ch; margin: .875rem auto; }
.mcl-svc-cap-sub { color: var(--mcl-muted); max-width: 52ch; margin: 0 auto; font-size: clamp(.9375rem, 1.8vw, 1.0625rem); line-height: 1.8; }
.mcl-svc-brow { justify-content: center; }
.mcl-svc-body { max-width: 800px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2rem); }
.mcl-svc-photo { border-radius: var(--mcl-r16); overflow: hidden; aspect-ratio: 16/9; background: var(--mcl-surf); margin-bottom: 2.5rem; border: 1.5px solid var(--mcl-border); }
.mcl-svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.mcl-svc-text p { color: var(--mcl-muted); margin-bottom: 1.25rem; line-height: 1.85; }
.mcl-svc-feats { background: var(--mcl-surf); border-radius: var(--mcl-r12); padding: 1.75rem; margin-top: 2rem; border-left: 3px solid var(--mcl-mint); }
.mcl-svc-feats-hd { font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--mcl-mint); margin-bottom: 1rem; font-family: var(--mcl-fb); }
.mcl-svc-feats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mcl-svc-fi  { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: var(--mcl-muted); }
.mcl-svc-fi-ico { color: var(--mcl-mint); flex-shrink: 0; margin-top: 1px; }
.mcl-svc-order { background: var(--mcl-slate); border-radius: var(--mcl-r16); padding: 2.5rem; text-align: center; margin-top: 3rem; }
.mcl-so-from   { font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.3); }
.mcl-so-price  { font-family: var(--mcl-fh); font-size: 3rem; font-weight: 700; color: #fff; }
.mcl-so-note   { font-size: .875rem; color: rgba(255,255,255,.4); margin-bottom: 1.75rem; }
.mcl-so-acts   { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; }

/* -- CONTACT ----------------------------------------------- */
.mcl-ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.mcl-ct-panel { background: #fff; border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r16); padding: 2rem; }
.mcl-ct-rows  { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 1.25rem; }
.mcl-ct-row   { display: flex; align-items: flex-start; gap: 1rem; }
.mcl-ct-ico   { width: 38px; height: 38px; border-radius: 50%; background: var(--mcl-mint-l); color: var(--mcl-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mcl-ct-lbl   { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--mcl-muted); }
.mcl-ct-val   { font-size: .9375rem; font-weight: 500; color: var(--mcl-slate); margin-top: .125rem; }

/* -- PORTFOLIO -------------------------------------------- */
.mcl-port-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mcl-port-card { background: #fff; border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r16); overflow: hidden; transition: border-color .2s; }
.mcl-port-card:hover { border-color: var(--mcl-mint); }
.mcl-port-img  { aspect-ratio: 16/9; background: var(--mcl-surf); overflow: hidden; }
.mcl-port-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mcl-port-card:hover .mcl-port-img img { transform: scale(1.04); }
.mcl-port-body { padding: 1.75rem; }
.mcl-port-cat  { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mcl-mint); margin-bottom: .5rem; }
.mcl-port-h    { font-family: var(--mcl-fh); font-size: 1.125rem; font-weight: 700; margin-bottom: .75rem; }
.mcl-port-p    { font-size: .875rem; color: var(--mcl-muted); line-height: 1.7; }
.mcl-port-stat { display: flex; align-items: baseline; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--mcl-border); }
.mcl-port-n    { font-family: var(--mcl-fh); font-size: 1.75rem; font-weight: 700; color: var(--mcl-mint); }
.mcl-port-l    { font-size: .8125rem; color: var(--mcl-muted); }

/* -- LEGAL ----------------------------------------------- */
.mcl-legal { max-width: 800px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2rem); }
.mcl-legal h1 { text-align: center; margin-bottom: .5rem; }
.mcl-legal-date { text-align: center; font-size: .875rem; color: var(--mcl-muted); margin-bottom: 3rem; }
.mcl-legal h2 { font-family: var(--mcl-fh); font-size: 1.25rem; color: var(--mcl-mint); margin: 2.5rem 0 .75rem; }
.mcl-legal h3 { font-family: var(--mcl-fb); font-size: 1.0625rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.mcl-legal p, .mcl-legal li { color: var(--mcl-muted); line-height: 1.85; }
.mcl-legal p { margin-bottom: 1rem; }
.mcl-legal ul, .mcl-legal ol { margin: .875rem 0 1rem 1.5rem; }
.mcl-legal ul li { list-style: disc; margin-bottom: .5rem; }
.mcl-legal ol li { list-style: decimal; margin-bottom: .5rem; }

/* -- SUCCESS/CANCEL --------------------------------------- */
.mcl-confirm { max-width: 500px; margin: 0 auto; text-align: center; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2rem); }
.mcl-conf-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--mcl-mint-l); color: var(--mcl-mint); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; }
.mcl-ns { display: flex; align-items: flex-start; gap: 1rem; text-align: left; margin-bottom: .875rem; }
.mcl-ns-n { width: 30px; height: 30px; border-radius: 50%; background: var(--mcl-mint); color: var(--mcl-slate); display: flex; align-items: center; justify-content: center; font-family: var(--mcl-fb); font-size: .8125rem; font-weight: 800; flex-shrink: 0; }
.mcl-ns p { font-size: .9rem; color: var(--mcl-muted); line-height: 1.65; margin: 0; }

/* -- COOKIE BANNER --------------------------------------- */
.mcl-cookie { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9000; background: var(--mcl-slate); border-radius: var(--mcl-r12); padding: 1.125rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; box-shadow: 0 8px 32px rgba(26,29,46,.25); max-width: 680px; width: calc(100% - 3rem); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.mcl-cookie.mcl-ck-show { opacity: 1; visibility: visible; }
.mcl-ck-txt { font-size: .875rem; color: rgba(255,255,255,.6); flex: 1; min-width: 180px; }
.mcl-ck-txt a { color: rgba(255,255,255,.8); text-decoration: underline; }
.mcl-ck-btns { display: flex; gap: .625rem; flex-shrink: 0; }
.mcl-ck-yes { background: var(--mcl-mint); color: var(--mcl-slate); border: none; font-family: var(--mcl-fb); font-size: .875rem; font-weight: 700; padding: .5rem 1.125rem; border-radius: var(--mcl-r6); cursor: pointer; }
.mcl-ck-no  { background: transparent; color: rgba(255,255,255,.5); border: 1.5px solid rgba(255,255,255,.2); font-family: var(--mcl-fb); font-size: .875rem; padding: .5rem 1.125rem; border-radius: var(--mcl-r6); cursor: pointer; }

/* -- CHAT WIDGET ----------------------------------------- */
.mcl-chat-btn { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 8888; width: 52px; height: 52px; border-radius: 50%; background: var(--mcl-mint); color: var(--mcl-slate); border: none; box-shadow: 0 4px 16px rgba(0,212,170,.4); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s; }
.mcl-chat-btn:hover { transform: scale(1.08); }
.mcl-chat-box { position: fixed; bottom: 5.5rem; right: 1.75rem; z-index: 8888; width: 320px; background: #fff; border: 1.5px solid var(--mcl-border); border-radius: var(--mcl-r16); display: none; flex-direction: column; overflow: hidden; box-shadow: 0 16px 48px rgba(26,29,46,.15); }
.mcl-chat-box.mcl-cb-on { display: flex; }
.mcl-chat-hdr { background: var(--mcl-slate); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
.mcl-chat-av  { width: 34px; height: 34px; border-radius: 50%; background: var(--mcl-mint); color: var(--mcl-slate); display: flex; align-items: center; justify-content: center; font-family: var(--mcl-fh); font-size: .75rem; font-weight: 700; }
.mcl-chat-nm  { color: #fff; font-weight: 700; font-size: .9375rem; }
.mcl-chat-st  { color: rgba(255,255,255,.45); font-size: .75rem; }
.mcl-chat-msgs { padding: 1rem; flex: 1; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: .625rem; }
.mcl-cmsg { max-width: 82%; padding: .625rem .875rem; border-radius: var(--mcl-r8); font-size: .875rem; line-height: 1.5; }
.mcl-cmsg.mcl-bot { background: var(--mcl-surf); color: var(--mcl-slate); align-self: flex-start; border-bottom-left-radius: 3px; }
.mcl-cmsg.mcl-me  { background: var(--mcl-mint); color: var(--mcl-slate); align-self: flex-end; border-bottom-right-radius: 3px; }
.mcl-chat-inp-row { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--mcl-border); }
.mcl-chat-inp  { flex: 1; border: 1.5px solid var(--mcl-border-d); border-radius: var(--mcl-r6); padding: .5rem .75rem; font-family: var(--mcl-fb); font-size: .875rem; color: var(--mcl-slate); background: var(--mcl-ghost); }
.mcl-chat-inp:focus { outline: none; border-color: var(--mcl-mint); }
.mcl-chat-snd  { background: var(--mcl-mint); color: var(--mcl-slate); border: none; border-radius: var(--mcl-r6); padding: .5rem .75rem; cursor: pointer; }

/* -- FOOTER ---------------------------------------------- */
#mcl-basecamp { background: var(--mcl-slate); padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
.mcl-basecamp-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mcl-bc-brand { font-family: var(--mcl-fh); font-size: clamp(1.0625rem, 2vw, 1.5rem); font-weight: 700; color: #fff; margin-bottom: .875rem; }
.mcl-bc-brand span { color: var(--mcl-mint); }
.mcl-bc-blurb { font-size: .875rem; color: rgba(255,255,255,.35); line-height: 1.75; max-width: 26ch; margin-bottom: 1.25rem; }
.mcl-bc-socials { display: flex; gap: .625rem; }
.mcl-bc-soc { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; transition: border-color .18s, color .18s; }
.mcl-bc-soc:hover { border-color: var(--mcl-mint); color: var(--mcl-mint); }
.mcl-bc-col-hd { font-family: var(--mcl-fb); font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.2); margin-bottom: 1rem; }
.mcl-bc-col a  { display: block; font-size: .875rem; margin-bottom: .5rem; color: rgba(255,255,255,.4); transition: color .18s; }
.mcl-bc-col a:hover { color: rgba(255,255,255,.9); }
.mcl-bc-bar { border-top: 1px solid rgba(255,255,255,.08); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .8125rem; color: rgba(255,255,255,.2); }
.mcl-bc-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.mcl-bc-legal a { color: rgba(255,255,255,.2); transition: color .18s; }
.mcl-bc-legal a:hover { color: rgba(255,255,255,.6); }

/* -- UTILS ----------------------------------------------- */
.mcl-tc   { text-align: center; }
.mcl-mt2  { margin-top: 2rem; }
.mcl-mt3  { margin-top: 3rem; }
.mcl-flex-c { display: flex; align-items: center; justify-content: center; gap: .875rem; flex-wrap: wrap; }
.mcl-rise { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.mcl-rise.mcl-in { opacity: 1; transform: none; }

/* -- RESPONSIVE ------------------------------------------ */
@media (max-width: 1024px) {
  .mcl-tiers { grid-template-columns: 1fr; max-width: 420px; }
  .mcl-basecamp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  #mcl-topbar { display: none; }
  .mcl-nav-links, .mcl-nav-cta { display: none; }
  .mcl-nav-burger { display: flex; }
  #mcl-diagonal { flex-direction: column; min-height: auto; }
  .mcl-diag-left { flex: none; width: 100%; clip-path: none; padding: clamp(5rem, 8vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 5vw, 4rem); }
  .mcl-diag-right { flex: none; width: 100%; min-height: 300px; margin-left: 0; }
  .mcl-hero-proof { grid-template-columns: repeat(4, 1fr); max-width: none; }
  .mcl-svc-grid { grid-template-columns: 1fr 1fr; }
  .mcl-tab-pane.mcl-tp-on { grid-template-columns: 1fr; }
  .mcl-steps { grid-template-columns: 1fr 1fr; }
  .mcl-steps::before { display: none; }
  .mcl-builder-grid { grid-template-columns: 1fr; }
  .mcl-tally { position: static; }
  .mcl-ck-grid { grid-template-columns: 1fr; }
  .mcl-ck-sum { position: static; }
  .mcl-ct-grid { grid-template-columns: 1fr; }
  .mcl-port-grid { grid-template-columns: 1fr; }
  .mcl-svc-feats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mcl-svc-grid { grid-template-columns: 1fr; }
  .mcl-steps { grid-template-columns: 1fr; }
  .mcl-hero-proof { grid-template-columns: 1fr 1fr; }
  .mcl-basecamp-grid { grid-template-columns: 1fr; }
  .mcl-bc-bar { flex-direction: column; text-align: center; }
  .mcl-field-2 { grid-template-columns: 1fr; }
  .mcl-chat-box { width: calc(100vw - 3.5rem); right: 1rem; }
}

/* Carousel arrow fix */
.mcl-car-prev { transform: translateY(-50%) scaleX(-1); }