/* ==========================================================================
   Marketing page rebuild (2026-10-30), mk- classes. Sections are plain HTML (not Squarespace grids).
   Examples use Harbor & Palm Remodeling (made up) and one kitchen project; art in /assets/img/marketing-v2/,
   sources in punchlist-memory/tools/marketing-v2/. Phone screens are HTML sized in cqw (from the Photo and Video page).
   ========================================================================== */
.mk-wrap { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 var(--sqs-site-gutter, 4vw); }
.mk-sec { padding: clamp(56px, 7vw, 120px) 0; }
.mk-ph { display: none; }
.mk-sec h3 { margin: 0; }
.mk-sec p a, .mk-faq p a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.mk-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4vw; align-items: start; margin-bottom: clamp(32px, 4vw, 64px); }
.mk-swipe { list-style: none; margin: 0; padding: 0; }

/* 01 Hero: black, copy left; jobsite photo over an orange block with the ad, landing page and form overlapping.
   Fits the first screen so the strip peeks in below (as on the branding page). */
.mk-hero { background: #000; color: #fff; }
.mk-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5vw; align-items: center; padding-top: 32px; padding-bottom: 40px; }
.mk-hero-copy p { margin-top: 1em; max-width: 34em; } .mk-hero-copy h1 + p { margin-top: 1.1em; }
.mk-hero-btn { margin-top: 2em; background: #FF5E1A; color: #fff; border-radius: 300px; padding: 18px 32px; font: 500 16px/1.2 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .64px; }
.mk-hero-art { position: relative; aspect-ratio: 1 / 1; width: min(100%, calc(100svh - var(--header-h, 98px) - 170px)); justify-self: end; container-type: inline-size; }
.mk-block { position: absolute; left: 0; bottom: 0; width: 60%; height: 52%; background: #FF5E1A; }
.mk-hero-job { position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 55% 50%; }
.mk-mini { position: absolute; background: #fff; color: #111; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.35); font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; overflow: hidden; }
/* Two cards: the ad on the photo's left edge, the larger form lined up with the photo's right edge and the art's bottom */
.mk-mini-ad { left: 0; top: 14%; width: 36%; border-radius: 2cqw; }
.mk-mini-top { display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw; } .mk-mini-top img { width: 5cqw; height: 5cqw; }
.mk-mini-top span { display: flex; flex-direction: column; line-height: 1.15; } .mk-mini-top b { font-size: 1.9cqw; } .mk-mini-top i { font-style: normal; font-size: 1.5cqw; color: #65676b; }
.mk-mini-media { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mk-mini-bar { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 1.6cqw 1.8cqw; background: #f0f2f5; } .mk-mini-bar b { font-size: 1.7cqw; } .mk-mini-bar em { font-style: normal; font-size: 1.5cqw; font-weight: 600; background: #e4e6eb; padding: .9cqw 1.4cqw; border-radius: 1cqw; white-space: nowrap; }
.mk-mini-form { right: 0; bottom: 0; width: 46%; border-radius: 2.4cqw; padding: 3.4cqw 3.4cqw 3.6cqw; display: flex; flex-direction: column; gap: 1.1cqw; }
.mk-mini-form b { font-size: 3.2cqw; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 1cqw; }
.mk-ml { font-size: 1.6cqw; color: #555; margin-top: .8cqw; } .mk-mf { padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; background: #f0efed; border: 1px solid #e2e0dc; font-size: 1.8cqw; }
.mk-chips { display: flex; flex-wrap: wrap; gap: .9cqw; } .mk-chips i { font-style: normal; font-size: 1.6cqw; border: 1px solid #cfcdc8; border-radius: 3cqw; padding: .7cqw 1.4cqw; } .mk-chips i.on { border-color: #FF5E1A; background: #fff0e8; }
.mk-mini-form em { margin-top: 1.8cqw; text-align: center; font-style: normal; background: #FF5E1A; color: #fff; font-weight: 700; font-size: 2cqw; padding: 1.6cqw; border-radius: 4cqw; }

/* 02 Ownership strip: four short columns with dividers, orange titles (kept from the old page) */
.mk-strip { background: #fff; color: #000; padding: 44px 0 clamp(40px, 5vw, 72px); }
.mk-strip-in { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-strip-in li { text-align: center; padding: 6px 2vw; } .mk-strip-in li + li { border-left: 1px solid #000; }
.mk-strip-in h2 { color: #FF5E1A; line-height: 1.1; } .mk-strip-in p { margin-top: 8px; }

/* 03 Connected campaign: three large phones over an orange block, notes and circled matching buttons */
.mk-camp { background: #F1F0EE; color: #000; }
.mk-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw; position: relative; padding: 0 3vw; }
.mk-phones::before { content: ''; position: absolute; left: 0; right: 0; top: 18%; bottom: 18%; background: #FF5E1A; z-index: 0; }
.mk-phones > li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mk-phones h3 { text-align: center; }
.mk-phone { position: relative; width: 100%; max-width: 380px; aspect-ratio: 390 / 730; border: 7px solid #111; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.22); container-type: inline-size; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; color: #111; }
.mk-meta, .mk-lp, .mk-lf { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 10cqw; }
.mk-meta-top { display: flex; align-items: center; gap: 2.6cqw; padding: 0 3.4cqw 2.4cqw; } .mk-meta-top img { width: 9cqw; height: 9cqw; }
.mk-meta-top span { display: flex; flex-direction: column; line-height: 1.2; } .mk-meta-top b { font-size: 3.9cqw; font-weight: 600; white-space: nowrap; } .mk-meta-top i { font-style: normal; font-size: 3.1cqw; color: #65676b; }
.mk-meta-top em { margin-left: auto; font-style: normal; color: #65676b; font-size: 4cqw; }
.mk-meta-text { margin: 0; padding: 0 3.4cqw 2.4cqw; font-size: 3.7cqw; line-height: 1.35; }
.mk-meta-media { position: relative; aspect-ratio: 1 / 1; background: #000; } .mk-meta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.mk-meta-cta { display: flex; align-items: center; gap: 2.4cqw; padding: 2.8cqw 3.4cqw; background: #f0f2f5; } .mk-meta-cta span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-meta-cta i { font-style: normal; font-size: 2.7cqw; color: #65676b; white-space: nowrap; } .mk-meta-cta b { font-size: 3.6cqw; font-weight: 600; }
.mk-meta-cta em { margin-left: auto; font-style: normal; font-size: 3.3cqw; font-weight: 600; background: #e4e6eb; padding: 2cqw 3cqw; border-radius: 1.6cqw; white-space: nowrap; }
.mk-meta-next { display: flex; gap: 2.6cqw; padding: 4cqw 3.4cqw 0; border-top: 2.4cqw solid #f0f2f5; } .mk-meta-next i { flex: 0 0 9cqw; height: 9cqw; border-radius: 50%; background: #e4e6eb; } .mk-meta-next span { flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; padding-top: 1cqw; } .mk-meta-next b { height: 2.6cqw; width: 60%; background: #e4e6eb; border-radius: 2cqw; } .mk-meta-next b + b { width: 35%; }
.mk-meta-acts { display: flex; justify-content: space-around; padding: 2.4cqw; font-size: 3.3cqw; color: #65676b; border-top: 1px solid #e4e6eb; }
.mk-lp-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 4.4cqw 3cqw; } .mk-lp-nav img { height: 7.4cqw; width: auto; }
.mk-lp-nav span { background: #1E3B2F; color: #fff; border-radius: 10cqw; padding: 1.6cqw 3.4cqw; font-size: 3.2cqw; font-weight: 700; }
.mk-lp-hero { position: relative; aspect-ratio: 1 / 1; } .mk-lp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.mk-lp-hero div { position: absolute; left: 0; right: 0; bottom: 0; padding: 5cqw 4.4cqw 4.4cqw; background: linear-gradient(0deg, rgba(10,20,15,.88), rgba(10,20,15,0)); color: #fff; display: flex; flex-direction: column; gap: 3cqw; }
.mk-lp-hero strong { font-size: 7cqw; line-height: 1.05; letter-spacing: -.01em; }
.mk-lp-hero em, .mk-lf em { align-self: flex-start; font-style: normal; background: #FF5E1A; color: #fff; font-weight: 700; font-size: 3.4cqw; padding: 2.2cqw 4cqw; border-radius: 10cqw; }
.mk-lp-p { margin: 0; padding: 3.6cqw 4.4cqw 2.6cqw; font-size: 3.5cqw; line-height: 1.4; }
.mk-lp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; padding: 0 4.4cqw; } .mk-lp-ba span { position: relative; } .mk-lp-ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mk-lp-ba i { position: absolute; left: 1.6cqw; top: 1.6cqw; font-style: normal; background: #fff; font-size: 2.5cqw; font-weight: 700; padding: .6cqw 1.6cqw; letter-spacing: .1em; text-transform: uppercase; }
.mk-lp-steps { margin: 3cqw 4.4cqw 0; padding-left: 4.6cqw; font-size: 3.2cqw; line-height: 1.6; color: #333; }
.mk-lf { padding: 14cqw 5cqw 0; gap: 1.6cqw; } .mk-lf strong { font-size: 7cqw; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 2cqw; }
.mk-lf-l { font-size: 3.4cqw; color: #444; margin-top: 2.4cqw; } .mk-lf-f { height: 9cqw; border-radius: 2.4cqw; background: #f0efed; border: 1px solid #e2e0dc; }
.mk-lf-chips { display: flex; flex-wrap: wrap; gap: 1.8cqw; } .mk-lf-chips i { font-style: normal; font-size: 3.2cqw; border: 1px solid #cfcdc8; border-radius: 10cqw; padding: 1.4cqw 2.6cqw; } .mk-lf-chips i.on { border-color: #FF5E1A; background: #fff0e8; }
.mk-lf em { margin-top: 5cqw; align-self: center; text-align: center; padding: 3.4cqw 12cqw; }
/* Hand-drawn circle around every matching button (the site's .hl stroke) */
.mk-ring { position: relative; } .mk-ring::after { content: ''; position: absolute; inset: -2.6cqw -4cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M28 12 C 80 2, 180 4, 194 26 C 204 46, 120 58, 60 55 C 10 52, 2 34, 12 22 C 22 12, 60 6, 96 7' fill='none' stroke='%23ff5e1a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.mk-meta-cta .mk-ring::after { inset: -2cqw -3cqw; }
.mk-note { position: absolute; z-index: 2; height: auto; pointer-events: none; }
.mk-note-kitchen { width: 11%; left: 30.5%; top: -5%; transform: rotate(-5deg); }
.mk-note-button { width: 10.5%; left: 77%; top: -5%; transform: rotate(-4deg); }
.mk-link { position: absolute; z-index: 2; left: 31%; top: -1%; width: 8%; height: 3%; overflow: visible; }
.mk-camp .swipe-dots { justify-content: center; }

/* 04 Look you up: the website in a scrolling browser and the Google profile on a phone */
.mk-look { background: #000; color: #fff; }
.mk-look-art { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-right: 22%; }
.mk-browser { position: relative; z-index: 1; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.mk-browser-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: #ecebe8; color: #555; font: 500 13px/1 -apple-system, sans-serif; }
.mk-browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfcdc8; } .mk-browser-bar b { margin-left: 16px; background: #fff; border-radius: 6px; padding: 6px 14px; font-weight: 500; }
.mk-browser-view { aspect-ratio: 16 / 9.4; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mk-browser-view img { display: block; width: 100%; height: auto; }
.mk-gphone { position: absolute; z-index: 2; right: 3%; bottom: -8%; width: 25%; aspect-ratio: 390 / 844; border: 7px solid #222; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.mk-gphone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mk-look-block { position: absolute; z-index: 0; right: -2%; top: 30%; width: 32%; bottom: -14%; background: #FF5E1A; }
.mk-look .mk-look-line { margin-top: clamp(90px, 10vw, 170px); max-width: 16em; }

/* 05 Process and 06 Inquiry: square tiles, titles on one line */
.mk-steps, .mk-inq-row, .mk-more-grid { display: grid; gap: clamp(16px, 2vw, 32px); }
.mk-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mk-inq-row, .mk-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-steps img, .mk-inq-row img, .mk-more-grid img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.mk-steps h3, .mk-inq-row h3, .mk-more-grid h3 { margin-top: 18px; line-height: 1.1; white-space: nowrap; }
.mk-steps p, .mk-inq-row p, .mk-more-grid p { margin-top: 8px; max-width: 30em; }
.mk-inq { background: #F1F0EE; color: #000; }
.mk-more h2 { margin-bottom: clamp(28px, 3vw, 52px); } .mk-more-grid h3 { color: #FF5E1A; }

/* 07 FAQ on a darkened photo (kept from the old page) */
.mk-faq { color: #fff; padding: clamp(64px, 8vw, 130px) 0; }
.mk-faq-in { position: relative; z-index: 1; max-width: 1000px; } .mk-faq h2 { margin-bottom: clamp(28px, 3vw, 52px); }
.mk-faq .acc summary, .mk-faq .acc-desc, .mk-faq .acc-desc p { color: #fff; } .mk-faq .acc-desc p { max-width: 46em; padding-bottom: 26px; }

/* 09 Contact: black, copy left with the faint Punchlist logo, form right (no photo) */
.mk-contact { background: #000; color: #fff; }
.mk-contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6vw; align-items: start; }
.mk-contact-copy p { margin-top: 1em; }
.mk-contact-logo { display: block; width: 78%; max-width: 520px; height: auto; margin-top: clamp(80px, 10vw, 180px); opacity: .14; }

@media (max-width: 1199px) and (min-width: 768px) { .mk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .mk-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mk-contact-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mk-phones { gap: 2.6vw; padding: 0; }
  .mk-strip-in h2 { font-size: 20px; }
}

/* Phones: short copy, swipe rows with the site's swipe marks */
@media (max-width: 767px) {
  .mk-dk { display: none; } .mk-ph { display: block; }
  .mk-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 20px; padding-bottom: 44px; gap: 34px; }
  .mk-hero-art { width: 100%; justify-self: stretch; }
  .mk-hero-btn { margin-top: 1.4em; padding: 16px 26px; }
  .mk-strip-in { grid-template-columns: 1fr 1fr; row-gap: 24px; } .mk-strip-in li:nth-child(3) { border-left: 0; }
  .mk-swipe { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--sqs-site-gutter, 6vw)); padding: 0 var(--sqs-site-gutter, 6vw); scroll-padding: 0 var(--sqs-site-gutter, 6vw); }
  .mk-swipe::-webkit-scrollbar { display: none; }
  .mk-swipe > li { flex: 0 0 80%; scroll-snap-align: start; }
  .mk-phones > li { flex-basis: 70%; } .mk-phones::before { top: 22%; bottom: 22%; left: 0; right: 0; }
  .mk-note, .mk-link { display: none; }
  .mk-sec .swipe-dots { display: flex; }
  .mk-sec:not(.mk-look) .swipe-dots i:not(.on) { background: rgba(0, 0, 0, .22); }
  .mk-steps h3, .mk-inq-row h3, .mk-more-grid h3 { white-space: normal; }
  /* Same composition as desktop, scaled down: the site is the big piece, the Google profile phone overlaps its
     lower right corner and hangs a little below, with the orange block behind the phone */
  .mk-look-art { padding-right: 20%; }
  .mk-browser-view { aspect-ratio: 4 / 5; }
  .mk-browser-bar { height: 30px; padding: 0 10px; gap: 5px; font-size: 10px; } .mk-browser-bar i { width: 8px; height: 8px; } .mk-browser-bar b { margin-left: 6px; padding: 4px 8px; }
  .mk-gphone { right: 0; bottom: -10%; width: 40%; border-width: 4px; border-radius: 20px; }
  .mk-look-block { right: -3%; top: 38%; bottom: -15%; width: 30%; }
  .mk-look .mk-look-line { margin-top: calc(17vw + 30px); } /* clears the block, which hangs further below as the art grows */
  .mk-contact-logo { display: none; }
}