.scp0:hover { opacity: 0.78 !important; }
.scp1:hover { color: rgb(46, 158, 62) !important; }
.scp2:hover { background: rgb(19, 60, 139) !important; color: rgb(255, 255, 255) !important; transform: translateY(-2px) !important; }
.scp3:hover { transform: translateY(-3px) !important; background: rgb(46, 158, 62) !important; color: rgb(255, 255, 255) !important; }
.scp4:hover { transform: translateY(-9px) !important; }
.scp5:hover { transform: translateY(-3px) !important; background: rgb(67, 181, 79) !important; color: rgb(255, 255, 255) !important; }
.scp6:hover { transform: translateY(-3px) !important; background: rgb(255, 255, 255) !important; color: rgb(19, 60, 139) !important; }
.scp7:hover { background: rgb(19, 60, 139) !important; color: rgb(255, 255, 255) !important; }
.scp8:hover { color: rgb(46, 158, 62) !important; background: rgb(255, 255, 255) !important; border-left-color: rgb(46, 158, 62) !important; }
.scp9:hover { background: rgb(46, 158, 62) !important; }
.scpa:hover { background: rgb(251, 248, 242) !important; }
.scpb:hover { background: rgb(246, 241, 231) !important; }
.scpc:hover { transform: translateY(-4px) !important; box-shadow: rgba(20, 40, 80, 0.17) 0px 22px 44px !important; }
.scpd:hover { background: rgb(239, 231, 217) !important; }
.scpe:hover { transform: translateY(-6px) !important; }
.scpf:hover { background: rgb(46, 158, 62) !important; box-shadow: rgb(46, 158, 62) 0px 0px 0px 2px !important; }
.scpg:hover { border-color: rgb(46, 158, 62) !important; }
.scph:hover { background: rgb(19, 60, 139) !important; box-shadow: rgb(19, 60, 139) 0px 0px 0px 2px, rgba(20, 40, 80, 0.24) 0px 10px 22px !important; }

:root { color-scheme: light only; }
html { background: rgb(220, 220, 214); text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0px; background: rgb(220, 220, 214); color: rgb(51, 51, 51); font-family: Lato, system-ui, sans-serif; }
img { max-width: 100%; }
@media (max-width: 1280px) {
  [data-option] { zoom: 0.8; }
}
@media (max-width: 1040px) {
  [data-option] { zoom: 0.64; }
}
@media (max-width: 860px) {
  [data-option] { zoom: 0.5; }
}
@media (max-width: 700px) {
  [data-option] { zoom: 0.4; }
}
@media (prefers-color-scheme: dark) {
  html, body { background: rgb(220, 220, 214); color: rgb(51, 51, 51); }
}
a { color: rgb(19, 60, 139); text-decoration: none; }
a:hover { color: rgb(46, 158, 62); }
@keyframes smRise { 
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: none; }
}
@keyframes smFade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes smFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-9px); }
}
@keyframes smNudge { 
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(5px); }
}
@keyframes smSheen { 
  0% { transform: translateX(-120%) skewX(-18deg); }
  55%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes smPulse { 
  0%, 100% { box-shadow: rgba(46, 158, 62, 0.45) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(46, 158, 62, 0) 0px 0px 0px 14px; }
}

[data-reveal] { transition: opacity 0.75s, transform 0.75s cubic-bezier(0.2, 0.75, 0.2, 1); }
[data-reveal="out"] { opacity: 0; }
[data-reveal="in"] { opacity: 1; transform: none; }

[data-burger] > span { transition: transform 0.28s, opacity 0.2s; }
[data-menu-open] [data-burger] > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
[data-menu-open] [data-burger] > span:nth-child(2) { opacity: 0; }
[data-menu-open] [data-burger] > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
[data-menu-open] > header[data-nav] { z-index: 30; }
header[data-nav] [data-phone] { transition: opacity 0.2s, background 0.2s, color 0.2s; }
[data-menu-open] > header[data-nav] [data-phone] { opacity: 0; pointer-events: none; }
[data-menu-open] [data-menu-close] { display: none !important; }
[data-chev] { display: inline-block; transition: transform 0.25s; }
details[open] [data-chev] { transform: rotate(180deg); }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
[data-lbl="open"] { display: none; }
details[open] [data-lbl="open"] { display: inline; }
details[open] [data-lbl="closed"] { display: none; }
[data-menu-panel] { background: rgb(19, 60, 139) !important; }
[data-menu-link] { color: rgb(255, 255, 255) !important; background: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.22) !important; }
[data-menu-panel] > div:last-child { background: rgba(255, 255, 255, 0.08) !important; }
[data-option], [data-page], [data-bezel], [data-bezel] > div { overflow: clip !important; }
header[data-nav] { position: sticky; top: 0px; z-index: 30; transition: padding 0.28s, box-shadow 0.28s, background-color 0.28s; }
header[data-nav] > a > img { transition: transform 0.28s; transform-origin: left center; }
header[data-nav][data-stuck] { box-shadow: rgba(20, 40, 80, 0.14) 0px 8px 22px; padding-top: 9px !important; padding-bottom: 9px !important; background-color: rgba(242, 237, 228, 0.97) !important; }
header[data-nav][data-stuck] > a > img { transform: scale(0.8); }

html, body { margin: 0; padding: 0; background: #F2EDE4; }
[data-page] { border-radius: 0 !important; box-shadow: none !important; }
/* Wider than the 1120px design: every section keeps its full-bleed background, but its content
   stays in the design's column (all sections pad 46px, so 1120 - 2*46 = 1028px of content).
   The hero grid has no padding of its own (its photo runs to the edge), so it's centred at
   1120px whole — otherwise the 345px hero photo gets blown up 2.5x on a 1920 screen.
   At 1120 and below both rules resolve to the design's own values. */
.view-desktop [data-page] > * {
  padding-left: max(46px, calc((100% - 1308px) / 2)) !important;
  padding-right: max(46px, calc((100% - 1308px) / 2)) !important;
}
.view-desktop [data-page] > header + div {
  padding-left: max(0px, calc((100% - 1400px) / 2)) !important;
  padding-right: max(0px, calc((100% - 1400px) / 2)) !important;
}
/* Jennifer's Oct 1 edits: the icon + title on each Simple / Quality / Reliable card (home page
   and the strip at the bottom of pricing) sit centred; their paragraphs stay left-aligned. */
div:has(> [data-icon] + [data-h3]) { justify-content: center; align-items: center; text-align: center; }
div:has(> [data-icon] + [data-h3]) > [data-body] { align-self: stretch; text-align: left; }
/* The 10% off coupon on pricing: all its text centred inside the dashed box. */
[data-coupon] { align-items: center; text-align: center; }
.view-mobile { display: none; }
@media (max-width: 860px) {
  .view-desktop { display: none; }
  .view-mobile { display: block; }
  .view-mobile [data-page] { min-height: 100vh; }
}