/* A brighter Suncoast palette, with motion that stays out of the way. */
:root {
  --ocean: #17658b;
  --deep-ocean: #124d68;
  --teal: #187b75;
  --aqua: #b9ece3;
  --sunshine: #ffdc76;
  --coral: #f17b56;
  --ink: #183e3f;
  --cream: #fffaf1;
  --orange: #ff905f;
  --orange-dark: #b74429;
}

body {
  background:
    radial-gradient(ellipse 760px 680px at 100% 240px, #c8f0e7 0, transparent 76%),
    radial-gradient(ellipse 650px 520px at 0 500px, #ffe1c7 0, transparent 74%),
    var(--cream);
}
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 100;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #3ccbb5, #52a7e4 38%, #ff9b6c 72%, #ffda6c);
}
.announcement {
  background: linear-gradient(110deg, #124e68, #176f78 50%, #286b59);
}
.live-dot { background: var(--sunshine); box-shadow: 0 0 0 4px #ffdc761c; }
.site-header {
  position: sticky;
  top: 0;
  background: #fffaf1ed;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #17658b12;
  box-shadow: 0 4px 24px #183e3f05;
}
.brand-icon {
  background: linear-gradient(135deg, var(--ocean), var(--teal));
  box-shadow: 0 4px 12px #17658b20;
}
.header-call {
  color: var(--deep-ocean);
  background: #e1f3f4;
  border-color: #8ac7cd;
  border-radius: 30px;
}
.header-call:hover { background: var(--deep-ocean); }
.desktop-nav a { position: relative; padding-block: 8px; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.hero .eyebrow { color: var(--deep-ocean); }
.hero .eyebrow>span { background: var(--coral); box-shadow: 0 0 0 4px #f17b561a; }
.ocean-text { color: var(--ocean); }
h1 em {
  color: #bd4a31;
  background: linear-gradient(100deg, #b5412c, #d46330);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sun { color: #b06b16; animation: sun-turn 2.5s ease-out 1; }
.hero-description { color: #405f5e; }
.human-note>svg { background: #d9f1e5; color: #226a51; border-color: #acd4c3; }
.hero-art .image-frame {
  border: 6px solid #fffdf6;
  box-shadow: 13px 15px 0 #95d4cb66, 0 22px 50px #155f6c1a;
  transition: box-shadow .35s ease, transform .35s ease;
}
.sweep-stamp {
  background: var(--sunshine);
  box-shadow: 0 0 0 7px #fffaf1, 0 10px 24px #9f762a25;
  animation: stamp-bob 1.8s ease-in-out 2;
}
.starting-price {
  background: linear-gradient(120deg, #fff9de, #fffdf7);
  border: 1px solid #f1d28c;
  border-bottom: 4px solid var(--coral);
  box-shadow: 0 12px 28px #174c5624;
  transition: transform .3s ease;
}
.starting-price strong { color: var(--deep-ocean); }
.button {
  border-radius: 9px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -70%;
  width: 35%;
  height: 240%;
  background: linear-gradient(90deg, transparent, #ffffff55, transparent);
  transform: rotate(25deg);
  pointer-events: none;
  transition: left .55s ease;
}
.button:hover::after, .button:focus-visible::after { left: 140%; }
.button .icon, .text-link span { transition: transform .25s ease; }
.button:hover .icon, .text-link:hover span { transform: translateX(4px); }
.button-orange {
  background: linear-gradient(105deg, #ff9d66, #f5825f);
  box-shadow: 0 6px 0 #c65c3430, 0 10px 20px #ed8c5820;
}
.button-orange:hover { background: linear-gradient(105deg, #ffac79, #ff916e); box-shadow: 0 9px 0 #c65c3425, 0 15px 25px #ed8c5830; }
.button-green { background: linear-gradient(110deg, #17658b, #14786e); box-shadow: 0 7px 20px #17658b22; }
.button-green:hover { background: linear-gradient(110deg, #207ca5, #1b8b7a); }
.promise-strip {
  background: linear-gradient(100deg, #dff3ed, #e0f0fa 50%, #fff0ce);
  border-color: #a6d9d080;
}
.promise-strip span:nth-child(1) svg { background: #b8e4d1; color: #205c45; border-color: #9bcdb6; }
.promise-strip span:nth-child(2) svg { background: #b9deef; color: #124d68; border-color: #9fc8dd; }
.promise-strip span:nth-child(3) svg { background: #ffdea5; color: #79551a; border-color: #eac58b; }
.services .eyebrow { color: #a74729; }
.service-columns { gap: 24px; }
.service-block, .service-block + .service-block {
  padding: 32px;
  border: 1px solid #afd6c780;
  border-radius: 20px;
  background: linear-gradient(145deg, #e2f5e9, #f0f8e9);
  box-shadow: 0 9px 26px #24554108;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-block + .service-block { border-color: #efc5a6; background: linear-gradient(145deg, #ffe8d8, #fff1de); }
.service-icon { background: #bee6d0; color: #246a50; border-radius: 15px; }
.service-block + .service-block .service-icon { background: #f8bb95; color: #79351d; }
.service-list li { border-color: #98bca766; }
.service-block + .service-block .service-list li { border-color: #c79d7566; }
.service-heading .micro-label { color: #276b52; }
.service-block + .service-block .micro-label { color: #974623; }
.pricing-section {
  position: relative;
  background: radial-gradient(ellipse at 10% 0, #c7f2e4, transparent 55%), linear-gradient(125deg, #e0f5f3, #e2f0fd 75%, #eef5ff);
  border-top: 1px solid #bfdfd8;
  border-bottom: 1px solid #c5dfeb;
}
.pricing-section .eyebrow { color: var(--ocean); }
.discount-toggle {
  padding: 10px 15px;
  border-radius: 30px;
  background: #ffffffa3;
  border: 1px solid #a8d7c2;
}
.discount-toggle input { left: 15px; }
.discount-toggle strong { color: #246346; }
.discount-toggle input:checked + .switch { background: #237653; }
.price-card {
  --card-color: #ce7044;
  background: linear-gradient(145deg, #fff8ec, #fffdf8);
  border-radius: 16px;
  border-color: #c4d9d6;
  box-shadow: 0 6px 14px #164e6608;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:nth-child(2) { --card-color: #248679; background: linear-gradient(145deg, #ecfaf0, #fcfffa); }
.price-card:nth-child(3) { --card-color: #367fa8; background: linear-gradient(145deg, #edf6ff, #fcfdff); }
.price-card::before { content: ""; position: absolute; height: 4px; top: 0; left: 24px; right: 24px; background: var(--card-color); border-radius: 0 0 5px 5px; }
.price-card[aria-pressed="true"] { border-color: var(--ocean); box-shadow: 0 0 0 2px #17658b, 0 14px 30px #17658b18; }
.load-price { color: var(--deep-ocean); }
.load-small .load-bed>span:first-child { background: #f2b17c; }
.load-half .load-bed>span:nth-child(-n+2) { background: #87cec0; }
.load-full .load-bed>span { background: #8dc5e9; }
.load-cab>path:first-child { fill: #a8cfe8; }
.estimate-bar {
  padding: 22px 24px;
  background: #ffffffaa;
  border: 1px solid #bddbdc;
  border-radius: 14px;
  box-shadow: 0 6px 20px #17658b08;
  transition: background .3s ease, border-color .3s ease;
}
.estimate-bar.is-discounted { background: #e0f7e7; border-color: #82c6a0; }
.estimate-bar strong { color: var(--ocean); }
.payment-row>div>strong { padding: 7px 12px; background: #ffffff99; border-radius: 6px; font-weight: 600; }
.payment-row>div { gap: 12px; }
.steps li>span {
  width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: #ffdfb0; color: #8b471f;
}
.steps li:nth-child(2)>span { background: #c4e4ee; color: #215d7a; }
.steps li:nth-child(3)>span { background: #bee3d2; color: #28694d; }
.how-left .eyebrow { color: #95601c; }
.sweep-panel {
  background: radial-gradient(circle at 100% 0, #299a9055, transparent 60%), linear-gradient(155deg, #165f77, #174b51 65%, #245e49);
  box-shadow: 12px 14px 0 #f6d88377, 0 20px 40px #174c5618;
}
.sweep-panel .eyebrow, .sweep-panel .micro-label { color: #d0f4df; }
.sweep-panel p:not(.eyebrow) { color: #ebf5ed; }
.sweep-drawing svg { color: #ffd17f; transition: transform .65s ease; }
.spark { color: #ffeaa3; transition: transform .5s ease; }
.areas-section {
  color: #f6fbf7;
  background: radial-gradient(ellipse at 90% 15%, #37a79e55, transparent 55%), linear-gradient(120deg, #164f74, #156d70);
  border: 0;
  position: relative;
}
.areas-section .eyebrow { color: #ffe09a; }
.area-layout>div:first-child>p:not(.eyebrow), .area-list-wrap>p { color: #dcefed; }
.area-layout strong, .areas-section .text-link { color: #ffffff; }
.areas-section .text-link:hover { color: #ffdc76; }
.area-list { gap: 9px; }
.area-list li {
  padding: 12px 15px;
  background: #ffffff0f;
  border: 1px solid #ffffff24;
  border-radius: 7px;
}
.area-list li:nth-child(3n) { background: #a2e5da22; }
.area-label svg { color: #ffdc76; }
.area-label { color: #e3f8f2; }
.faq-intro .eyebrow { color: #a74729; }
.faqs details, .faqs details:first-child { border-color: #bedbd5; }
.faqs details[open] { background: #e8f4ee; border-radius: 12px; padding-inline: 19px; }
.faqs summary { transition: color .2s ease; }
.faqs summary:hover { color: #17658b; }
.faqs summary>span { border-radius: 50%; width: 25px; height: 25px; background: #c4e5df; }
.faqs summary>span::before, .faqs summary>span::after { width: 11px; left: 7px; top: 12px; }
.final-cta {
  background: radial-gradient(ellipse at 95% 0, #fff5a099, transparent 60%), linear-gradient(110deg, #ffac75, #f9ce6c);
  border-top: 1px solid #f7bb70;
}
.final-contact>a { transition: color .2s ease; }
.final-contact>a:hover { color: #0f6381; }
footer .brand-icon { background: linear-gradient(135deg, var(--teal), var(--ocean)); }

@keyframes stamp-bob {
  0%,100% { transform: translateY(0) rotate(10deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
@keyframes sun-turn {
  from { transform: rotate(-40deg); opacity: .3; }
  to { transform: rotate(12deg); opacity: 1; }
}
@media(hover:hover) and (pointer:fine) {
  .hero-art:hover .image-frame { transform: translateY(-4px); box-shadow: 16px 20px 0 #95d4cb66, 0 27px 55px #155f6c26; }
  .hero-art:hover .starting-price { transform: rotate(-1deg) translateY(-3px); }
  .service-block:hover { transform: translateY(-5px); box-shadow: 0 18px 35px #24554116; }
  .price-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px #17658b20; }
  .price-card[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px #17658b, 0 18px 35px #17658b24; }
  .sweep-panel:hover .sweep-drawing svg { transform: rotate(-7deg); }
  .sweep-panel:hover .spark { transform: rotate(20deg) scale(1.2); }
}
@media(max-width:1100px) {
  .service-block, .service-block + .service-block { padding: 26px; }
  .payment-row { flex-wrap: wrap; }
}
@media(max-width:800px) {
  .service-block, .service-block + .service-block { padding: 23px; }
  .area-list li { padding: 11px; }
  .estimate-bar { padding: 19px; }
}
@media(max-width:600px) {
  html { scroll-padding-top: 100px; }
  body { background: radial-gradient(ellipse 420px 650px at 100% 330px, #d5f0e5, transparent 85%), var(--cream); }
  .site-header { background: #fffaf1f2; }
  .header-call { background: #dcefeb; border: 1px solid #badbd4; }
  .mobile-nav:not([hidden]) { background: #fffaf1; }
  .hero .eyebrow { font-size: 7.5px; }
  .hero-art .image-frame { border-width: 4px; box-shadow: 7px 9px 0 #95d4cb66, 0 15px 30px #155f6c16; }
  .sweep-stamp { box-shadow: 0 0 0 5px var(--cream); }
  .starting-price { padding: 12px 16px; }
  .service-columns { gap: 20px; }
  .service-block, .service-block + .service-block { padding: 24px; border-radius: 16px; }
  .service-heading { align-items: flex-start; gap: 13px; }
  .service-heading h3 { font-size: 20px; }
  .service-icon { width: 43px; height: 43px; border-radius: 12px; }
  .service-icon svg { width: 26px; height: 26px; }
  .service-heading .micro-label { font-size: 7px; letter-spacing: 1px; }
  .discount-toggle { padding: 9px 13px; font-size: 11px; }
  .discount-toggle input { left: 13px; }
  .estimate-bar { padding: 20px 17px; }
  .estimate-bar #estimate-label { font-size: 12px; }
  .payment-row>div { gap: 8px; flex-wrap: wrap; font-size: 12px; }
  .payment-row>div>strong { padding: 7px 10px; }
  .sweep-panel { box-shadow: 7px 9px 0 #f6d88377, 0 15px 30px #174c5610; }
  .area-list { column-gap: 8px; }
  .area-list li { font-size: 12px; padding: 12px 10px; }
  .faqs details[open] { padding-inline: 14px; }
  .faqs summary { font-size: 12px; }
  .mobile-call { position: fixed; background: linear-gradient(105deg, #ffa36c, #ff8a66); border-color: #d67b4b; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:hover, .service-block:hover, .price-card:hover, .hero-art:hover .image-frame { transform: none; }
}