/* ==========================================================================
   Example client sites shown inside the device mockups.
   Sized in container units (cqw) so they scale with the frame.
   ========================================================================== */

.mock { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; font-family: 'Urbanist', sans-serif; overflow: hidden; }
.mock.is-on { opacity: 1; }
.mock svg { display: block; }
.mock .serif { font-family: 'Fraunces', Georgia, serif; }

/* shared mini-site bits — desktop */
.m-nav { display: flex; align-items: center; gap: 3.2cqw; height: 7cqw; padding: 0 4.4cqw; font-size: 1.15cqw; font-weight: 600; }
.m-nav .logo { display: flex; align-items: center; gap: .8cqw; font-weight: 900; font-size: 1.6cqw; letter-spacing: -.02em; margin-right: auto; }
.m-nav .logo i { width: 2.2cqw; height: 2.2cqw; border-radius: .6cqw; display: block; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; height: 3.6cqw; padding: 0 2cqw; border-radius: 99px; font-weight: 800; font-size: 1.15cqw; white-space: nowrap; }
.m-eyebrow { font-size: 1cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 1. Ridgeline Roofing (contractor) ---------- */
.mock--roof { background: #F4F0E8; color: #17231D; }
.mock--roof .m-nav .logo i { background: #E8642A; clip-path: polygon(50% 8%, 100% 60%, 100% 100%, 0 100%, 0 60%); border-radius: 0; }
.mock--roof .m-nav .m-btn { background: #17231D; color: #fff; }
.roof-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 3cqw; padding: 3.4cqw 4.4cqw 0; }
.roof-hero .txt { display: grid; align-content: center; gap: 1.8cqw; padding-bottom: 3cqw; }
.roof-hero .m-eyebrow { color: #E8642A; }
.roof-hero h3 { margin: 0; font-weight: 900; font-size: 5cqw; line-height: .95; letter-spacing: -.04em; }
.roof-hero p { margin: 0; font-size: 1.35cqw; line-height: 1.5; color: #4C5A52; max-width: 30ch; }
.roof-hero .ctas { display: flex; gap: 1cqw; }
.roof-hero .ctas .m-btn:first-child { background: #E8642A; color: #fff; }
.roof-hero .ctas .m-btn:last-child { box-shadow: inset 0 0 0 .15cqw #17231D; }
.roof-hero .pic { position: relative; height: 34cqw; border-radius: 1.6cqw; overflow: hidden; }
.roof-hero .pic svg { width: 100%; height: 100%; }
.roof-hero .review { position: absolute; left: 1.6cqw; bottom: 1.6cqw; display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 1cqw 3cqw -1cqw rgba(0, 0, 0, .3); font-size: 1.05cqw; font-weight: 700; }
.roof-hero .review b { font-size: 1.9cqw; font-weight: 900; }
.roof-hero .review span { color: #E8A42A; letter-spacing: .1em; }
.roof-trust { display: flex; gap: 4cqw; margin: 2.6cqw 4.4cqw 0; padding-top: 2cqw; border-top: .1cqw solid rgba(23, 35, 29, .15); font-weight: 800; font-size: 1.2cqw; color: #4C5A52; }

/* ---------- 2. Fig & Fern Florals (florist) ---------- */
.mock--fig { background: #FBF4EC; color: #4A1F3B; }
.mock--fig .m-nav { justify-content: center; }
.mock--fig .m-nav .logo { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-style: italic; font-size: 2cqw; margin: 0 auto; letter-spacing: -.01em; }
.mock--fig .m-nav .side { display: flex; gap: 2.6cqw; flex: 1; }
.mock--fig .m-nav .side.r { justify-content: flex-end; }
.mock--fig .m-nav .m-btn { background: #4A1F3B; color: #FBF4EC; }
.fig-hero { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3cqw; align-items: center; padding: 2.4cqw 4.4cqw 0; }
.fig-hero h3 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 4.6cqw; line-height: 1; letter-spacing: -.03em; }
.fig-hero h3 em { color: #C0586B; }
.fig-hero .l { display: grid; gap: 1.8cqw; }
.fig-hero .l p { margin: 0; font-size: 1.3cqw; line-height: 1.55; color: #7A5A6C; }
.fig-hero .l .m-btn { width: fit-content; background: #C0586B; color: #fff; }
.fig-hero .arch { height: 40cqw; border-radius: 99cqw 99cqw 1.4cqw 1.4cqw; overflow: hidden; }
.fig-hero .arch svg { width: 100%; height: 100%; }
.fig-hero .r { display: grid; gap: 1.4cqw; }
.fig-tile { display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw; border-radius: 1.2cqw; background: #fff; font-size: 1.15cqw; font-weight: 700; }
.fig-tile i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; flex: none; }
.fig-tile small { display: block; font-weight: 500; color: #9B7F8E; font-size: 1cqw; }

/* ---------- 3. Harbourview Dental (clinic) ---------- */
.mock--dent { background: #fff; color: #0E2A3A; }
.mock--dent .m-nav .logo i { background: #0E8C83; border-radius: 50%; }
.mock--dent .m-nav .m-btn { background: #0E8C83; color: #fff; }
.dent-hero { position: relative; margin: 0 2.4cqw; padding: 5cqw 2cqw 0; height: 47cqw; border-radius: 2cqw; background: linear-gradient(140deg, #E2F6F3, #F2FAF9 60%, #E8F0FF); display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; overflow: hidden; }
.dent-hero .txt { display: grid; align-content: start; gap: 1.8cqw; padding-left: 2cqw; }
.dent-hero .pill { width: fit-content; padding: .7cqw 1.3cqw; border-radius: 99px; background: #fff; font-size: 1.05cqw; font-weight: 700; color: #0E8C83; }
.dent-hero h3 { margin: 0; font-weight: 800; font-size: 4.4cqw; line-height: 1; letter-spacing: -.035em; }
.dent-hero h3 span { color: #0E8C83; }
.dent-hero p { margin: 0; font-size: 1.3cqw; line-height: 1.5; color: #4D6573; max-width: 32ch; }
.dent-hero .ctas { display: flex; gap: 1cqw; }
.dent-hero .ctas .m-btn:first-child { background: #0E2A3A; color: #fff; }
.dent-hero .ctas .m-btn:last-child { background: #fff; color: #0E2A3A; }
.dent-hero .pic { position: relative; }
.dent-hero .pic svg { position: absolute; right: -2cqw; bottom: 0; width: 110%; }
.dent-card { position: absolute; right: 3cqw; top: 5cqw; width: 18cqw; padding: 1.6cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 2cqw 4cqw -1.6cqw rgba(14, 42, 58, .35); font-size: 1.05cqw; display: grid; gap: .9cqw; }
.dent-card b { font-size: 1.3cqw; }
.dent-card .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6cqw; }
.dent-card .slots span { padding: .6cqw 0; text-align: center; border-radius: .6cqw; background: #EEF6F5; font-weight: 700; }
.dent-card .slots span.on { background: #0E8C83; color: #fff; }

/* ==========================================================================
   Phone layouts (cqw = phone width)
   ========================================================================== */
.mp-nav { display: flex; align-items: center; justify-content: space-between; padding: 15cqw 6cqw 4cqw; font-weight: 900; font-size: 5cqw; letter-spacing: -.02em; }
.mp-nav .burger { width: 7cqw; display: grid; gap: 1.4cqw; }
.mp-nav .burger i { height: .8cqw; border-radius: 1cqw; background: currentColor; }
.mp-btn { display: flex; align-items: center; justify-content: center; height: 12cqw; border-radius: 99px; font-weight: 800; font-size: 4cqw; }

.mock--roof .mp-body { padding: 2cqw 6cqw; display: grid; gap: 4.5cqw; }
.mock--roof .mp-body .m-eyebrow { font-size: 3cqw; color: #E8642A; }
.mock--roof .mp-body h3 { margin: 0; font-weight: 900; font-size: 11cqw; line-height: .95; letter-spacing: -.04em; }
.mock--roof .mp-body p { margin: 0; font-size: 3.8cqw; line-height: 1.5; color: #4C5A52; }
.mock--roof .mp-body .mp-btn { background: #E8642A; color: #fff; }
.mock--roof .mp-pic { height: 62cqw; border-radius: 5cqw; overflow: hidden; }
.mock--roof .mp-pic svg { width: 100%; height: 100%; }

.mock--fig .mp-nav { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; }
.mock--fig .mp-body { padding: 2cqw 6cqw; display: grid; gap: 5cqw; text-align: center; }
.mock--fig .mp-arch { height: 78cqw; border-radius: 99cqw 99cqw 4cqw 4cqw; overflow: hidden; }
.mock--fig .mp-arch svg { width: 100%; height: 100%; }
.mock--fig .mp-body h3 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 10cqw; line-height: 1; letter-spacing: -.03em; }
.mock--fig .mp-body h3 em { color: #C0586B; }
.mock--fig .mp-body .mp-btn { background: #C0586B; color: #fff; }

.mock--dent .mp-body { margin: 0 4cqw; padding: 8cqw 5cqw 0; border-radius: 6cqw; background: linear-gradient(160deg, #E2F6F3, #F2FAF9 60%, #E8F0FF); display: grid; gap: 4.5cqw; height: 150cqw; overflow: hidden; }
.mock--dent .mp-body .pill { width: fit-content; padding: 2cqw 3.6cqw; border-radius: 99px; background: #fff; font-size: 3.2cqw; font-weight: 700; color: #0E8C83; }
.mock--dent .mp-body h3 { margin: 0; font-weight: 800; font-size: 10.5cqw; line-height: 1; letter-spacing: -.035em; }
.mock--dent .mp-body h3 span { color: #0E8C83; }
.mock--dent .mp-body .mp-btn { background: #0E2A3A; color: #fff; }
.mock--dent .mp-body svg { width: 120%; margin-left: -10%; }

/* ==========================================================================
   "Before" — a typical dated small-business site (for the comparison slider)
   ========================================================================== */
.old { position: absolute; inset: 0; background: #cfd3cf repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 .4cqw, transparent .4cqw .8cqw); font-family: Arial, Helvetica, sans-serif; color: #333; overflow: hidden; }
.old a { color: #1a3fb0; text-decoration: underline; }
.old__page { width: 80cqw; height: 100%; margin: 0 auto; background: #fff; box-shadow: 0 0 1.2cqw rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.old__head { display: flex; align-items: center; justify-content: space-between; height: 8cqw; padding: 0 2cqw; background: linear-gradient(#4a7a45, #234a22); border-bottom: .3cqw solid #8fb24a; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-weight: bold; font-size: 2.4cqw; text-shadow: .15cqw .15cqw 0 #000; }
.old__head small { font-family: Arial, sans-serif; font-size: 1.2cqw; color: #ffe066; text-shadow: none; }
.old__nav { padding: .8cqw 2cqw; background: linear-gradient(#f4f4f4, #dcdcdc); border-bottom: .1cqw solid #aaa; font-size: 1.1cqw; color: #777; text-align: center; }
.old__body { flex: 1; display: grid; grid-template-columns: 1fr 19cqw; gap: 2cqw; padding: 1.8cqw 2cqw; }
.old__body h4 { margin: 0 0 1cqw; font-family: Georgia, serif; font-size: 1.9cqw; color: #2d5a2a; }
.old__body p { margin: 0 0 1cqw; font-size: 1.1cqw; line-height: 1.45; }
.old__photo { float: left; width: 20cqw; height: 13cqw; margin: 0 1.4cqw .8cqw 0; border: .3cqw solid #fff; outline: .1cqw solid #999; box-shadow: .3cqw .3cqw .6cqw rgba(0,0,0,.3); overflow: hidden; filter: saturate(.45) contrast(.85) brightness(1.05) blur(.04cqw); }
.old__photo svg { width: 100%; height: 100%; }
.old__side { display: grid; align-content: start; gap: 1.2cqw; }
.old__box { padding: 1cqw 1.2cqw; border: .1cqw solid #b9c7b4; background: #f2f6ef; font-size: 1.05cqw; line-height: 1.5; }
.old__box b { display: block; margin: -1cqw -1.2cqw .8cqw; padding: .6cqw 1.2cqw; background: #2d5a2a; color: #fff; font-size: 1.1cqw; }
.old__box ul { margin: 0; padding-left: 1.6cqw; }
.old__box--red { background: #fff3c4; border-color: #e0b400; color: #c00; font-weight: bold; text-align: center; font-size: 1.4cqw; }
.old__foot { padding: 1cqw 2cqw; border-top: .1cqw solid #ccc; background: #eee; font-size: .95cqw; color: #888; text-align: center; }