/* ==========================================================================
   M Place Productions, corporate site: Services page + Request a Quote page
   Paste into Appearance > Customize > Additional CSS (or the theme style.css).
   Palette is the existing theme: teal #64989c, slate #5d647d, greys #6f6f70 / #a3a1a5 / #cac7c8.
   Theme sets html font-size to 62.5%, so 1rem = 10px. All sizes carry a px fallback.
   ========================================================================== */

#mp-services,#mp-quote{max-width:1180px;margin:0 auto;padding:0 24px;color:#6f6f70;font-family:'futura-book','futura-medium',Futura,'Century Gothic',sans-serif}
#mp-services *,#mp-quote *{box-sizing:border-box}

/* Type scale */
.mp-eyebrow{font-family:'futura-heavy',sans-serif;font-size:11px;font-size:1.1rem;letter-spacing:.26em;text-transform:uppercase;color:#64989c;margin:0 0 18px}
.mp-h1{font-family:'futura-heavy',sans-serif;font-size:52px;font-size:5.2rem;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:#5d647d;margin:0 0 26px;font-weight:400}
.mp-h2{font-family:'futura-heavy',sans-serif;font-size:30px;font-size:3rem;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:#5d647d;margin:0 0 20px;font-weight:400}
.mp-h3{font-family:'futura-heavy',sans-serif;font-size:24px;font-size:2.4rem;letter-spacing:.14em;text-transform:uppercase;color:#5d647d;margin:0;font-weight:400}
.mp-lede{font-size:18px;font-size:1.8rem;line-height:1.65;letter-spacing:.02em;color:#6f6f70;max-width:640px;margin:0 0 34px}
.mp-center{text-align:center}
.mp-center.mp-lede,.mp-center .mp-lede{margin-left:auto;margin-right:auto}

/* Angled tab buttons, same clip-path language as the nav and the old Book Now tabs */
.mp-cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.mp-cta-row.mp-center{justify-content:center}
.mp-tab{display:inline-block;font-family:'futura-heavy',sans-serif;font-size:15px;font-size:1.5rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;line-height:1;padding:17px 36px 15px 30px;-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 1.6rem) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 1.6rem) 100%,0 100%);transition:background .2s,color .2s;border:0;cursor:pointer}
.mp-tab-teal{background:#64989c;color:#fff;font-size:17px;font-size:1.7rem;padding:22px 48px 20px 36px;-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 2rem) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 2rem) 100%,0 100%)}
.mp-tab-teal:hover,.mp-tab-teal:focus{background:#5d647d;color:#fff}
/* Shadow sits on a wrapper because clip-path clips the element's own shadow. The wrapper is added by .mp-cta-row via :has() where supported. */
.mp-cta-row>.mp-tab-teal,.mp-submit-row>.mp-button{filter:drop-shadow(3px 4px 6px rgba(42,42,42,.28))}
.mp-cta-row>.mp-tab-teal:hover,.mp-submit-row>.mp-button:hover{filter:drop-shadow(2px 2px 3px rgba(27,27,27,.4))}
.mp-tab-ghost{background:transparent;color:#6f6f70;border:1px solid #cac7c8;padding:18px 40px 16px 28px;-webkit-clip-path:none;clip-path:none}
.mp-tab-ghost:hover,.mp-tab-ghost:focus{background:#5d647d;color:#fff;border-color:#5d647d}
.mp-tab-lower{text-transform:none;letter-spacing:.06em}
.mp-link{display:inline-block;margin-top:22px;font-family:'futura-heavy',sans-serif;font-size:12px;font-size:1.2rem;letter-spacing:.2em;text-transform:uppercase;color:#64989c;text-decoration:none;border-bottom:2px solid #64989c;padding-bottom:4px;transition:color .2s,border-color .2s}
.mp-link:hover{color:#5d647d;border-color:#5d647d}

/* Hero */
.mp-hero{padding:96px 0 72px;max-width:820px}
.mp-hero .mp-lede{max-width:680px}

/* Proof strip */
.mp-proof{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #cac7c8;border-bottom:1px solid #cac7c8;margin:0 0 120px}
.mp-proof-item{padding:34px 24px;display:flex;flex-direction:column;gap:8px;border-left:1px solid #e4e2e3}
.mp-proof-item:first-child{border-left:0;padding-left:0}
.mp-proof-big{font-family:'futura-heavy',sans-serif;font-size:46px;font-size:4.6rem;line-height:1;color:#64989c;font-variant-numeric:tabular-nums}
.mp-proof-big small{font-size:22px;font-size:2.2rem;letter-spacing:.04em}
.mp-proof-big.mp-proof-word{font-size:26px;font-size:2.6rem;letter-spacing:.08em;text-transform:uppercase;padding-top:14px;line-height:1.2}
.mp-proof-label{font-size:12px;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:#6f6f70}

/* Services */
.mp-services{padding:0 0 120px}
.mp-services .mp-h2{margin-bottom:64px}
.mp-service{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:40px 64px;padding:56px 0;border-top:1px solid #cac7c8}
.mp-service:last-child{border-bottom:1px solid #cac7c8}
.mp-service-head{display:flex;flex-direction:column;gap:14px}
.mp-num{font-family:'futura-book',sans-serif;font-size:13px;font-size:1.3rem;letter-spacing:.3em;color:#a3a1a5}
.mp-service-lede{font-size:16.5px;font-size:1.65rem;line-height:1.7;letter-spacing:.02em;margin:0 0 26px;color:#6f6f70}
.mp-list{margin:0;padding:0;list-style:none;columns:2;column-gap:40px}
.mp-list li{font-size:14.5px;font-size:1.45rem;letter-spacing:.05em;line-height:1.5;padding:9px 0 9px 22px;position:relative;border-bottom:1px solid #eeedee;break-inside:avoid}
.mp-list li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;background:#64989c;-webkit-clip-path:polygon(0 0,100% 0,70% 100%,0 100%);clip-path:polygon(0 0,100% 0,70% 100%,0 100%)}
.mp-list-tight{columns:1}
.mp-list-tight li{padding:7px 0 7px 20px;border-bottom:0;font-size:14px;font-size:1.4rem}
.mp-list-tight li::before{top:14px}

/* Process */
.mp-process{padding:0 0 120px}
.mp-process .mp-h2{margin-bottom:56px}
.mp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.mp-steps li{border-top:3px solid #64989c;padding-top:22px}
.mp-step-num{display:block;font-family:'futura-heavy',sans-serif;font-size:13px;font-size:1.3rem;letter-spacing:.3em;color:#a3a1a5;margin-bottom:12px}
.mp-steps h4{font-family:'futura-heavy',sans-serif;font-size:17px;font-size:1.7rem;letter-spacing:.16em;text-transform:uppercase;color:#5d647d;margin:0 0 12px;font-weight:400}
.mp-steps p{font-size:14.5px;font-size:1.45rem;line-height:1.65;letter-spacing:.02em;margin:0}

/* FAQ */
.mp-faq{padding:0 0 120px;max-width:820px;margin:0 auto}
.mp-faq .mp-h2{margin-bottom:44px}
.mp-faq-list{margin:0;border-top:1px solid #cac7c8}
.mp-faq-list dt{font-family:'futura-heavy',sans-serif;font-size:16px;font-size:1.6rem;letter-spacing:.08em;color:#5d647d;padding:26px 0 8px}
.mp-faq-list dd{margin:0;padding:0 0 26px;font-size:15.5px;font-size:1.55rem;line-height:1.7;letter-spacing:.02em;border-bottom:1px solid #e4e2e3}

/* Final CTA band */
.mp-final{background:#f3f6f6;text-align:center;padding:88px 24px;margin:0 0 40px;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}
.mp-final .mp-h2{margin-bottom:16px}
.mp-final .mp-lede{margin:0 auto 30px}

/* Quote page */
.mp-hero-quote{padding-bottom:56px}
.mp-quote-wrap{display:grid;grid-template-columns:300px 1fr;gap:72px;align-items:start;padding:0 0 110px}
.mp-quote-side{position:sticky;top:24px}
.mp-side-line{margin:0 0 10px;font-size:16px;font-size:1.6rem;letter-spacing:.04em}
.mp-side-line a{color:#5d647d;text-decoration:none;border-bottom:1px solid #cac7c8;transition:color .2s,border-color .2s}
.mp-side-line a:hover{color:#64989c;border-color:#64989c}
.mp-side-copy{font-size:14.5px;font-size:1.45rem;line-height:1.65;margin:0}
.mp-side-copy strong{color:#5d647d}
.mp-rule{border:0;border-top:1px solid #cac7c8;margin:28px 0}

.mp-form{margin:0}
.mp-fs{border:0;margin:0 0 44px;padding:0;min-width:0}
.mp-legend{font-family:'futura-heavy',sans-serif;font-size:12px;font-size:1.2rem;letter-spacing:.26em;text-transform:uppercase;color:#64989c;padding:0 0 14px;margin:0 0 22px;width:100%;border-bottom:1px solid #cac7c8}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.mp-field{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;min-width:0}
.mp-grid .mp-field{margin:0}
.mp-field-full{grid-column:1 / -1}
.mp-field>span{font-family:'futura-heavy',sans-serif;font-size:11px;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:#6f6f70}
#mp-quote .mp-field input,#mp-quote .mp-field select,#mp-quote .mp-field textarea{width:100%;font:inherit;text-transform:none;box-shadow:none;line-height:1.4;height:auto;margin:0;font-size:15.5px;font-size:1.55rem;letter-spacing:.02em;color:#5d647d;background:#fff;border:1px solid #cac7c8;border-radius:0;padding:13px 14px;outline:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
#mp-quote .mp-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235d647d' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
#mp-quote .mp-field textarea{resize:vertical;min-height:120px}
#mp-quote .mp-field input:focus,#mp-quote .mp-field select:focus,#mp-quote .mp-field textarea:focus{border-color:#64989c;box-shadow:0 0 0 3px rgba(100,152,156,.18)}
#mp-quote .mp-field input::placeholder,#mp-quote .mp-field textarea::placeholder{color:#b5b3b6;text-transform:none;letter-spacing:.02em}
.mp-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px}
.mp-checks label{display:flex;align-items:center;gap:10px;font-size:14.5px;font-size:1.45rem;letter-spacing:.03em;color:#5d647d;cursor:pointer;padding:11px 12px;border:1px solid #e4e2e3;transition:border-color .2s,background .2s}
.mp-checks label:hover{border-color:#64989c}
#mp-quote .mp-checks input{position:absolute;opacity:0;width:0;height:0;margin:0}
.mp-checks i{flex:0 0 16px;width:16px;height:16px;border:1px solid #a3a1a5;display:inline-block;position:relative;transition:background .15s,border-color .15s}
.mp-checks input:checked+i{background:#64989c;border-color:#64989c}
.mp-checks input:checked+i::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mp-checks input:checked~*{color:#5d647d}
.mp-checks label:has(input:checked){border-color:#64989c;background:#f3f6f6}
.mp-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.mp-submit-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:8px}
#mp-quote .mp-button{font-family:'futura-heavy',sans-serif;border:0;border-radius:0;box-shadow:none;height:auto}
.mp-submit-note{margin:0;font-size:13px;font-size:1.3rem;letter-spacing:.04em;color:#a3a1a5}
.mp-quote-sent{padding-bottom:120px}
.mp-quote-sent .mp-lede a{color:#64989c;text-decoration:none;border-bottom:1px solid #64989c}

/* Responsive */
@media (max-width:1024px){
	.mp-h1{font-size:42px;font-size:4.2rem}
	.mp-proof{grid-template-columns:repeat(2,1fr)}
	.mp-proof-item{border-left:0;padding-left:0}
	.mp-proof-item:nth-child(even){border-left:1px solid #e4e2e3;padding-left:24px}
	.mp-proof-item:nth-child(n+3){border-top:1px solid #e4e2e3}
	.mp-steps{grid-template-columns:repeat(2,1fr)}
	.mp-quote-wrap{grid-template-columns:1fr;gap:40px}
	.mp-quote-side{position:static;order:2;border-top:1px solid #cac7c8;padding-top:32px}
}
@media (max-width:700px){
	#mp-services,#mp-quote{padding:0 18px}
	.mp-hero{padding:56px 0 44px}
	.mp-h1{font-size:32px;font-size:3.2rem}
	.mp-h2{font-size:24px;font-size:2.4rem}
	.mp-lede{font-size:16px;font-size:1.6rem}
	.mp-proof{margin-bottom:72px}
	.mp-proof-big{font-size:36px;font-size:3.6rem}
	.mp-proof-big.mp-proof-word{font-size:20px;font-size:2rem;padding-top:10px}
	.mp-service{grid-template-columns:1fr;gap:20px;padding:40px 0}
	.mp-list{columns:1}
	.mp-services,.mp-process,.mp-faq{padding-bottom:72px}
	.mp-steps{grid-template-columns:1fr;gap:26px}
	.mp-final{padding:64px 18px}
	.mp-grid{grid-template-columns:1fr}
	.mp-checks{grid-template-columns:1fr 1fr}
	.mp-tab{padding:15px 30px 13px 24px;font-size:13px;font-size:1.3rem}
	.mp-tab-teal{padding:18px 40px 16px 28px;font-size:15px;font-size:1.5rem}
	.mp-tab-ghost{padding:15px 28px 13px 22px}
}
@media (max-width:420px){.mp-checks{grid-template-columns:1fr}}

/* Date range picker */
#mp-quote .mp-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#mp-quote .mp-date{display:flex;flex-direction:column;gap:4px;min-width:0}
#mp-quote .mp-date small{font-size:10px;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#a3a1a5}
#mp-quote .mp-date input[type=date]{width:100%;font:inherit;font-size:15px;font-size:1.5rem;color:#5d647d;border:1px solid #cac7c8;border-radius:0;padding:11px 12px;background:#fff;-webkit-appearance:none;appearance:none;min-height:46px;box-shadow:none;height:auto;margin:0}
#mp-quote .mp-date input[type=date]:focus{border-color:#64989c;box-shadow:0 0 0 3px rgba(100,152,156,.18);outline:0}
#mp-quote .mp-date input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
#mp-quote .mp-date-flex{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px;font-size:1.35rem;letter-spacing:.03em;color:#6f6f70;cursor:pointer}
#mp-quote .mp-date-flex input{position:absolute;opacity:0;width:0;height:0;margin:0}
#mp-quote .mp-date-flex i{flex:0 0 16px;width:16px;height:16px;border:1px solid #a3a1a5;display:inline-block;position:relative}
#mp-quote .mp-date-flex input:checked+i{background:#64989c;border-color:#64989c}
#mp-quote .mp-date-flex input:checked+i::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:420px){#mp-quote .mp-dates{grid-template-columns:1fr}}

/* HoneyBook native contact form inside the quote page shell */
#mp-quote .mp-hb-embed{min-height:420px}
#mp-quote .mp-hb-embed iframe{width:100% !important;max-width:100% !important}