/* VORX Rain & Drain seasonal service — 2026-09-08 */
:root{
  --rd-ink:#090b0f;
  --rd-ink2:#11151b;
  --rd-gold:#caa64a;
  --rd-gold2:#e4c979;
  --rd-paper:#f5f4f0;
  --rd-blue:#164f83;
}

/* Compact homepage mention */
.rain-drain-strip{
  background:linear-gradient(110deg,#0a0d12 0%,#121820 58%,#182431 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.rain-drain-strip:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 20%,rgba(228,201,121,.13),transparent 26%),linear-gradient(90deg,transparent,rgba(255,255,255,.025));
}
.rain-drain-strip .container{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding-top:26px;padding-bottom:26px}
.rain-drain-strip-copy{display:flex;gap:18px;align-items:center;min-width:0}
.rain-drain-strip-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--rd-gold2),var(--rd-gold));color:#101318;font-size:26px;box-shadow:0 12px 35px rgba(0,0,0,.25);flex:0 0 auto}
.rain-drain-strip .eyebrow{margin:0 0 4px;color:var(--rd-gold2)}
.rain-drain-strip h3{font-size:clamp(1.3rem,2vw,1.9rem);margin:0 0 6px;color:#fff}
.rain-drain-strip p{margin:0;color:#cdd3da;max-width:850px;line-height:1.55}
.rain-drain-strip .btn-primary{white-space:nowrap}

/* Cinematic home slide-in */
.rain-drain-flyout{
  position:fixed;right:22px;bottom:22px;width:min(390px,calc(100vw - 32px));z-index:9998;
  border:1px solid rgba(255,255,255,.22);border-radius:20px;overflow:hidden;
  background:#090d12;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateX(calc(100% + 50px));opacity:0;visibility:hidden;
  transition:transform .72s cubic-bezier(.19,1,.22,1),opacity .55s ease,visibility .55s;
  isolation:isolate;
}
.rain-drain-flyout.is-visible{transform:translateX(0);opacity:1;visibility:visible}
.rain-drain-flyout.is-leaving{transform:translateX(calc(100% + 50px));opacity:0}
.rain-drain-flyout-media{position:absolute;inset:0;background:url('../assets/images/vorx-rain-drain-slide-20260908.webp') center/cover no-repeat;z-index:-3;filter:saturate(.72) contrast(1.08)}
.rain-drain-flyout:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,10,14,.97) 0%,rgba(7,10,14,.9) 55%,rgba(7,10,14,.48) 100%),linear-gradient(0deg,rgba(0,0,0,.5),transparent)}
.rain-drain-flyout:after{content:"";position:absolute;inset:-120% 0 0;z-index:-1;pointer-events:none;opacity:.23;background:repeating-linear-gradient(106deg,transparent 0 13px,rgba(220,236,255,.5) 14px 15px,transparent 16px 31px);animation:vorxRain 1.5s linear infinite}
@keyframes vorxRain{to{transform:translate3d(-26px,180px,0)}}
.rain-drain-flyout-inner{padding:22px 22px 20px;max-width:310px}
.rain-drain-flyout-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:var(--rd-gold);color:#101318;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.rain-drain-flyout h3{color:#fff;margin:0 0 8px;font-size:1.65rem;line-height:1.05}
.rain-drain-flyout p{color:#e5e8eb;margin:0 0 15px;font-size:.96rem;line-height:1.5}
.rain-drain-flyout-points{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.rain-drain-flyout-points span{font-size:.72rem;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);color:#fff}
.rain-drain-flyout-actions{display:flex;gap:9px;align-items:center}
.rain-drain-flyout .flyout-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,var(--rd-gold2),var(--rd-gold));color:#101318;text-decoration:none;font-weight:850;font-size:.9rem}
.rain-drain-flyout-close{position:absolute;top:10px;right:10px;width:33px;height:33px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(5,8,12,.7);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.rain-drain-flyout-progress{height:3px;background:rgba(255,255,255,.14);position:relative}
.rain-drain-flyout-progress span{display:block;width:100%;height:100%;background:var(--rd-gold2);transform-origin:left center;animation:vorxFlyoutProgress 6s linear forwards}
@keyframes vorxFlyoutProgress{to{transform:scaleX(0)}}

/* Rain & drain dedicated page */
.rain-page{background:#f5f4f0;color:#15191f}
.rain-hero{position:relative;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:#0d1116}
.rain-hero:before{content:"";position:absolute;inset:0;background:url('../assets/images/vorx-rain-drain-hero-clean-20260908.webp') center 42%/cover no-repeat;filter:saturate(.82) contrast(1.05)}
.rain-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,14,.96) 0%,rgba(7,10,14,.83) 46%,rgba(7,10,14,.22) 78%,rgba(7,10,14,.08) 100%),linear-gradient(0deg,rgba(7,10,14,.68),transparent 60%)}
.rain-hero .container{position:relative;z-index:2;padding-top:130px;padding-bottom:70px}
.rain-hero-copy{max-width:760px}
.rain-hero .eyebrow{color:var(--rd-gold2)}
.rain-hero h1{font-size:clamp(2.8rem,6.7vw,6.4rem);line-height:.94;margin:10px 0 18px;color:#fff;letter-spacing:-.045em}
.rain-hero h1 span{color:var(--rd-gold2)}
.rain-hero p{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.62;color:#e1e5ea;max-width:720px;margin:0 0 24px}
.rain-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.rain-hero .btn-secondary{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.rain-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.rain-hero-badges span{padding:7px 10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);border-radius:999px;color:#f3f4f5;font-size:.82rem}

.rain-service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:32px}
.rain-service-card{background:#fff;border:1px solid #ddd8cb;border-radius:18px;overflow:hidden;box-shadow:0 14px 38px rgba(10,13,18,.07)}
.rain-service-card img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.rain-service-card-copy{padding:19px}
.rain-service-card h3{font-size:1.12rem;margin:0 0 8px}
.rain-service-card p{font-size:.94rem;color:#626975;line-height:1.55;margin:0}
.rain-service-card strong{display:block;color:#8a6d21;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px}

.rain-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch;margin-top:34px}
.rain-flow-step{position:relative;background:#fff;border:1px solid #d9d4c7;border-radius:16px;padding:20px 16px;min-height:135px}
.rain-flow-step:not(:last-child):after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--rd-gold);display:grid;place-items:center;color:#111;font-weight:900;z-index:2}
.rain-flow-step small{display:block;color:#8a6d21;text-transform:uppercase;letter-spacing:.08em;font-weight:850;margin-bottom:7px}
.rain-flow-step b{display:block;font-size:1.05rem;margin-bottom:6px}
.rain-flow-step span{font-size:.9rem;color:#656b74;line-height:1.45}

.rain-split{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:stretch}
.rain-panel{border-radius:22px;padding:34px;background:#fff;border:1px solid #dcd7ca;box-shadow:0 18px 50px rgba(8,12,16,.06)}
.rain-panel.dark{background:#0e1319;color:#fff;border-color:#0e1319}
.rain-panel.dark p,.rain-panel.dark li{color:#cdd3da}
.rain-panel h2{margin-top:0}
.rain-checks{list-style:none;padding:0;margin:20px 0 0}
.rain-checks li{position:relative;padding:9px 0 9px 31px;line-height:1.5}
.rain-checks li:before{content:"✓";position:absolute;left:0;top:8px;width:21px;height:21px;border-radius:50%;background:rgba(202,166,74,.16);color:var(--rd-gold);display:grid;place-items:center;font-weight:900}
.rain-warning{padding:15px 17px;border-radius:14px;background:#fff5d8;border:1px solid #e7cc7c;color:#4b3b12;margin-top:18px;line-height:1.55}

.gutter-vac-showcase{background:linear-gradient(130deg,#0a0d12,#141a22);color:#fff;border-radius:26px;padding:38px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;overflow:hidden;position:relative}
.gutter-vac-showcase:before{content:"";position:absolute;right:-80px;top:-120px;width:330px;height:330px;border-radius:50%;background:rgba(202,166,74,.12);filter:blur(10px)}
.gutter-vac-showcase p{color:#ccd2d9;line-height:1.65}
.gutter-vac-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative;z-index:1}
.gutter-vac-metric{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.gutter-vac-metric strong{display:block;color:var(--rd-gold2);font-size:1.25rem;margin-bottom:4px}
.gutter-vac-metric span{color:#d7dbe0;font-size:.9rem;line-height:1.4}

.rain-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.rain-contact-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #ddd8cb;border-radius:18px;padding:24px;text-decoration:none;color:#16191e;transition:.25s ease}
.rain-contact-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.1);border-color:#c8b167}
.rain-contact-card small{text-transform:uppercase;font-weight:850;letter-spacing:.08em;color:#8a6d21}
.rain-contact-card strong{font-size:1.18rem}
.rain-contact-card span{color:#626975;line-height:1.5}

.rain-emergency{background:linear-gradient(110deg,#11151b,#2a2020);color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.rain-emergency .container{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.rain-emergency h2{color:#fff;margin:0 0 8px}
.rain-emergency p{color:#d6d9de;margin:0;max-width:850px}
.rain-emergency .btn-primary{white-space:nowrap}

@media(max-width:1080px){
  .rain-service-grid{grid-template-columns:repeat(3,1fr)}
  .rain-flow{grid-template-columns:repeat(3,1fr)}
  .rain-flow-step:nth-child(3):after{display:none}
  .rain-split{grid-template-columns:1fr}
}
@media(max-width:760px){
  .rain-drain-strip .container{grid-template-columns:1fr;gap:17px;padding-top:22px;padding-bottom:22px}
  .rain-drain-strip-copy{align-items:flex-start}
  .rain-drain-strip .btn-primary{width:100%}
  .rain-drain-flyout{right:16px;bottom:16px;width:calc(100vw - 32px)}
  .rain-drain-flyout-inner{padding:20px;max-width:84%}
  .rain-drain-flyout h3{font-size:1.45rem}
  .rain-hero{min-height:560px}
  .rain-hero:before{background-position:63% center}
  .rain-hero:after{background:linear-gradient(0deg,rgba(7,10,14,.98) 8%,rgba(7,10,14,.76) 65%,rgba(7,10,14,.3) 100%)}
  .rain-hero .container{padding-top:120px;padding-bottom:48px}
  .rain-hero h1{font-size:clamp(2.75rem,14vw,4.4rem)}
  .rain-hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .rain-service-grid,.rain-flow,.rain-contact-grid{grid-template-columns:1fr}
  .rain-flow-step:not(:last-child):after{content:"↓";right:auto;left:50%;top:auto;bottom:-18px;transform:translateX(-50%)}
  .rain-flow-step:nth-child(3):after{display:grid}
  .gutter-vac-showcase{grid-template-columns:1fr;padding:26px}
  .gutter-vac-metrics{grid-template-columns:1fr}
  .rain-panel{padding:25px}
  .rain-emergency .container{grid-template-columns:1fr}
  .rain-emergency .btn-primary{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .rain-drain-flyout,.rain-drain-flyout:after,.rain-drain-flyout-progress span{animation:none!important;transition:none!important}
}


/* VORX Rain & Drain page refinements */
.rain-intro-note{max-width:880px;margin:0 auto 28px;text-align:center;color:#5d6570;line-height:1.65}
.rain-quote-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid #dcd7ca;border-radius:20px;padding:25px 28px;box-shadow:0 12px 32px rgba(10,13,18,.06)}
.rain-quote-band strong{font-size:1.2rem}.rain-quote-band p{margin:5px 0 0;color:#666d76}.rain-quote-band .hero-actions{margin:0}
.rain-smallprint{font-size:.82rem;color:#727985;line-height:1.5;margin-top:15px}
@media(max-width:760px){.rain-quote-band{align-items:flex-start}.rain-quote-band .hero-actions{display:grid;width:100%}.rain-quote-band .btn-primary,.rain-quote-band .btn-secondary{width:100%}}