/* Scrollable example homepages inside the preview. */
.demo-side{border:1px solid #34545a}
.demo-side .picks{display:grid;gap:2px}
.demo-pick{font-size:14px;padding:8px 12px;margin:0;line-height:1.25;min-height:41px}
.demo-pick[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#10242b}
.demo-main{padding:16px}
.demo-frame{height:610px;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:11px;background:#f5f6f2;scrollbar-color:#8ba5a0 #e6ece8;scrollbar-width:thin;container-type:inline-size}
.demo-caption{margin:11px 4px 0}
.sample-site{--sample-ink:#17342f;--sample-accent:#cce89e;--sample-cream:#f7f8f2;--sample-photo:url('assets/garden.webp');font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#19332f;background:var(--sample-cream);min-height:100%;line-height:1.4}
.sample-detailing{--sample-ink:#142b31;--sample-accent:#d4f36a;--sample-cream:#f4f7f5;--sample-photo:url('assets/car.webp')}
.sample-construction{--sample-ink:#2b302d;--sample-accent:#e2d6ad;--sample-cream:#f8f7f1;--sample-photo:url('assets/construction.webp')}
.sample-electrician{--sample-ink:#123345;--sample-accent:#e6ed8b;--sample-cream:#f4f8f8;--sample-photo:url('assets/electrician.webp')}
.sample-bathroom{--sample-ink:#25464c;--sample-accent:#cce1d8;--sample-cream:#f7f9f7;--sample-photo:url('assets/bathroom.webp')}
.sample-boiler{--sample-ink:#173c4a;--sample-accent:#c5e2e5;--sample-cream:#f5f8f8;--sample-photo:url('assets/boiler.webp')}
.sample-cafe{--sample-ink:#3a2c26;--sample-accent:#e8cb9a;--sample-cream:#faf7f2;--sample-photo:url('assets/cafe.webp')}
.sample-salon{--sample-ink:#312d36;--sample-accent:#e4d3c7;--sample-cream:#faf7f6;--sample-photo:url('assets/salon.webp')}
.sample-grooming{--sample-ink:#243b3a;--sample-accent:#cbe7d5;--sample-cream:#f7faf7;--sample-photo:url('assets/grooming.webp')}
.sample-cleaning{--sample-ink:#24424a;--sample-accent:#c9e6de;--sample-cream:#f6faf9;--sample-photo:url('assets/cleaning.webp')}
.sample-florist{--sample-ink:#283b31;--sample-accent:#ead7d4;--sample-cream:#faf8f5;--sample-photo:url('assets/florist.webp')}
.sample-trainer{--sample-ink:#202e34;--sample-accent:#d9eaa1;--sample-cream:#f6f8f5;--sample-photo:url('assets/trainer.webp')}
.sample-photographer{--sample-ink:#292d32;--sample-accent:#e2d9c9;--sample-cream:#f7f7f5;--sample-photo:url('assets/photographer.webp')}
.sample-nav{min-height:68px;padding:15px 30px;background:var(--sample-ink);color:#fff;display:flex;align-items:center;gap:20px}
.sample-nav strong{font-size:16px;letter-spacing:-.05em;white-space:nowrap}
.sample-links{display:flex;gap:17px;margin-left:auto;font-size:12px;color:#d2e0dd;font-weight:600;white-space:nowrap}
.sample-nav-action{font-size:11px;font-weight:800;background:var(--sample-accent);color:var(--sample-ink);border-radius:4px;padding:10px 13px;white-space:nowrap}
.sample-hero{min-height:380px;padding:44px 34px;display:flex;align-items:center;color:#fff;background-image:linear-gradient(90deg,#092127ee 0%,#102d33b5 43%,#102d3325 100%),var(--sample-photo);background-position:center;background-size:cover}
.sample-cafe .sample-hero{background-image:linear-gradient(90deg,#241b17ed 0%,#2e211ab8 48%,#2e211a24 100%),var(--sample-photo)}
.sample-gardens .sample-hero,.sample-bathroom .sample-hero,.sample-construction .sample-hero{background-image:linear-gradient(270deg,#092127ee 0%,#102d33ab 46%,#102d3318 100%),var(--sample-photo);justify-content:flex-end;text-align:right}
.sample-hero-content{width:min(100%,480px)}
.sample-kicker{display:block;font-size:11px;color:var(--sample-accent);font-weight:850;text-transform:uppercase;letter-spacing:.15em}
.sample-hero h3{font-size:clamp(32px,4vw,52px);letter-spacing:-.055em;line-height:1.04;margin:13px 0}
.sample-hero p{font-size:15px;line-height:1.55;color:#ecf4f1;margin:0 0 23px;max-width:440px}
.sample-gardens .sample-hero p,.sample-bathroom .sample-hero p,.sample-construction .sample-hero p{margin-left:auto}
.sample-button{display:inline-flex;align-items:center;min-height:40px;padding:10px 16px;background:var(--sample-accent);color:var(--sample-ink);font-size:12px;font-weight:800;border-radius:5px}
.sample-trust{padding:17px 28px;background:var(--sample-ink);color:#edf4f1;display:flex;justify-content:space-around;gap:16px;text-align:center;text-transform:uppercase;letter-spacing:.11em;font-weight:750;font-size:10px}
.sample-services{padding:52px 34px 55px}
.sample-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.sample-section-head>span,.sample-contact>span:first-child{font-size:11px;color:#44756a;letter-spacing:.16em;font-weight:850;white-space:nowrap}
.sample-section-head h4{max-width:430px;margin:0;font-size:clamp(23px,3vw,34px);line-height:1.14;letter-spacing:-.05em}
.sample-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sample-service{min-height:225px;background:#fff;border:1px solid #dce7e0;display:flex;flex-direction:column;overflow:hidden}
.sample-service-image{height:125px;flex:none;background-color:#dce6e0;background-image:var(--service-strip);background-size:300% auto;background-repeat:no-repeat;background-position:0% center}
.sample-service:nth-child(2) .sample-service-image{background-position:50% center}
.sample-service:nth-child(3) .sample-service-image{background-position:100% center}
.sample-gardens{--service-strip:url('assets/service-gardens.webp')}
.sample-detailing{--service-strip:url('assets/service-detailing.webp')}
.sample-construction{--service-strip:url('assets/service-construction.webp')}
.sample-electrician{--service-strip:url('assets/service-electrician.webp')}
.sample-bathroom{--service-strip:url('assets/service-bathroom.webp')}
.sample-boiler{--service-strip:url('assets/service-boiler.webp')}
.sample-cafe{--service-strip:url('assets/service-cafe.webp')}
.sample-salon{--service-strip:url('assets/service-salon.webp')}
.sample-grooming{--service-strip:url('assets/service-grooming.webp')}
.sample-cleaning{--service-strip:url('assets/service-cleaning.webp')}
.sample-florist{--service-strip:url('assets/service-florist.webp')}
.sample-trainer{--service-strip:url('assets/service-trainer.webp')}
.sample-photographer{--service-strip:url('assets/service-photographer.webp')}
.sample-service-info{position:relative;flex:1;padding:13px 16px 17px;display:flex;flex-direction:column}
.sample-service-info>span:first-child{font-size:11px;font-weight:800;color:#5c8379}
.sample-service h5{font-size:17px;line-height:1.2;letter-spacing:-.035em;margin:auto 0 0}
.sample-service-arrow{position:absolute;right:16px;top:10px;color:#65867c}
.sample-contact{padding:36px 34px 40px;background:var(--sample-accent);color:var(--sample-ink);display:grid;grid-template-columns:1fr auto;gap:3px 20px;align-items:end}
.sample-contact>span:first-child{grid-column:1/-1;color:var(--sample-ink)}
.sample-contact h4{font-size:clamp(23px,3vw,35px);line-height:1.1;letter-spacing:-.05em;margin:6px 0 0;max-width:430px}
.sample-contact .sample-button{background:var(--sample-ink);color:#fff;white-space:nowrap}
.sample-footer{padding:20px 34px;background:var(--sample-ink);color:#dce9e4;display:flex;justify-content:space-between;gap:20px;font-size:11px}
.sample-footer strong{color:#fff;font-size:14px;letter-spacing:-.04em}
@container (max-width:560px){
  .sample-nav{min-height:59px;padding:13px 20px}.sample-nav strong{font-size:15px}.sample-links{display:none}.sample-nav-action{margin-left:auto;padding:8px 10px}
  .sample-hero,.sample-gardens .sample-hero,.sample-bathroom .sample-hero,.sample-construction .sample-hero{min-height:365px;padding:25px 20px;justify-content:flex-start;text-align:left;align-items:flex-end;background-image:linear-gradient(0deg,#092127f5 0%,#102d33a3 48%,#102d3322 100%),var(--sample-photo)}
  .sample-cafe .sample-hero{background-image:linear-gradient(0deg,#241b17f5 0%,#2e211ab0 54%,#2e211a20 100%),var(--sample-photo)}
  .sample-hero h3{font-size:clamp(29px,7cqw,40px)}.sample-hero p{font-size:13px;margin-bottom:16px}
  .sample-gardens .sample-hero p,.sample-bathroom .sample-hero p,.sample-construction .sample-hero p{margin-left:0}
  .sample-trust{padding:14px 10px;gap:8px;font-size:9px;letter-spacing:.04em}
  .sample-services{padding:32px 20px}.sample-section-head{display:block}.sample-section-head h4{font-size:26px;margin-top:9px}
  .sample-service-grid{grid-template-columns:1fr}.sample-service{min-height:112px;flex-direction:row}.sample-service-image{width:39%;height:auto}.sample-service-info{padding:12px 15px}.sample-service h5{font-size:17px;margin:auto 0 0}
  .sample-contact{padding:29px 20px;display:block}.sample-contact h4{font-size:27px;margin-bottom:17px}
  .sample-footer{padding:19px 20px;display:block}.sample-footer span{display:block;margin-top:6px}
}
@media(max-width:730px){.demo-side{border:0}.demo-side .picks{display:flex;gap:8px}.demo-pick{min-height:44px;white-space:nowrap}.demo-frame{height:auto;min-height:0;overflow:visible;overscroll-behavior:auto}.demo-caption{display:none}.demo-toolbar{padding:2px 2px 12px}.mobile-swipe{font-size:12px}}
@container (max-width:340px){.sample-nav{padding:12px;gap:8px}.sample-nav strong{font-size:13px}.sample-nav-action{font-size:10px;padding:7px}}