/* ===========================================================================
   Canada Create — universal motion + 3D components (v3, 2026-09-23)
   Loaded on every front-end page (blogs, service pages, landings) so the same
   standards apply everywhere:
     1. .cc-svc-glow  — red "sky" glow: slow ambient drift + a highlight that
                        follows the pointer (--mx/--my set by cc-motion-v3.js)
     2. 3D surfaces   — cards, price boxes, work items and tables lift and tilt
                        toward the pointer (--rx/--ry), border warms up
     3. .cc-reveal    — unveil on scroll (only when the script runs: .cc-js)
     4. Tables        — one universal comparison-table style, sealed corners,
                        no bottom gap, 3D wrap, row hover
     5. .cc-svc-inline-cta — the inline CTA box: copy left, button + toll-free
                        line right, glow behind. Used twice per blog post.
   Reduced-motion and touch (hover:none) are respected throughout.
   ========================================================================= */

/* ---- 1. glow layer ------------------------------------------------------ */
.cc-svc-glow{position:relative;isolation:isolate}
.cc-svc-glow__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.cc-svc-glow__fx::before,.cc-svc-glow__fx::after{content:"";position:absolute;inset:-20%}
.cc-svc-glow__fx::before{background:radial-gradient(45% 60% at 88% 100%,rgba(227,21,7,.55) 0%,rgba(227,21,7,.22) 35%,rgba(227,21,7,0) 70%),radial-gradient(30% 40% at 8% 0%,rgba(255,75,58,.18) 0%,rgba(255,75,58,0) 70%);animation:cc-glow-drift 16s ease-in-out infinite alternate}
.cc-svc-glow__fx::after{inset:0;background:radial-gradient(260px 260px at var(--mx,88%) var(--my,100%),rgba(255,75,58,.55) 0%,rgba(227,21,7,.25) 35%,rgba(227,21,7,0) 70%);opacity:0;transition:opacity .45s ease}
.cc-svc-glow.is-hover .cc-svc-glow__fx::after{opacity:1}
.cc-svc-glow.is-hover .cc-svc-glow__fx::before{animation-play-state:paused}
.cc-svc-glow>*:not(.cc-svc-glow__fx){position:relative;z-index:1}
@keyframes cc-glow-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5%,-7%,0) scale(1.08)}100%{transform:translate3d(4%,5%,0) scale(1.02)}}
/* hero: the glow sits above the photo + gradient, below the copy */
.cc-svc-glow--hero{overflow:hidden}
.cc-svc-glow--hero .cc-svc-glow__fx{z-index:1;mix-blend-mode:screen}
.cc-svc-glow--hero .cc-svc-glow__fx::before{background:radial-gradient(38% 55% at 90% 95%,rgba(227,21,7,.6) 0%,rgba(227,21,7,.22) 35%,rgba(227,21,7,0) 70%),radial-gradient(26% 40% at 6% 8%,rgba(255,75,58,.28) 0%,rgba(255,75,58,0) 70%);animation-duration:22s}
.cc-svc-glow--hero .cc-svc-glow__fx::after{background:radial-gradient(420px 420px at var(--mx,90%) var(--my,95%),rgba(255,75,58,.5) 0%,rgba(227,21,7,.2) 40%,rgba(227,21,7,0) 70%)}
.cc-svc-glow--hero>.cc-svc-inner{z-index:2}
/* light (white) surfaces: softer glow */
.cc-svc-glow--light .cc-svc-glow__fx::before{background:radial-gradient(50% 65% at 92% 100%,rgba(227,21,7,.16) 0%,rgba(227,21,7,.06) 40%,rgba(227,21,7,0) 70%);animation-duration:18s}
.cc-svc-glow--light .cc-svc-glow__fx::after{background:radial-gradient(240px 240px at var(--mx,90%) var(--my,100%),rgba(255,75,58,.22) 0%,rgba(227,21,7,.08) 40%,rgba(227,21,7,0) 70%)}

/* ---- 2. 3D surfaces ----------------------------------------------------- */
.cc-svc-card,.cc-svc-price,.cc-svc-work__item,.cc-table-3d{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease;will-change:transform}
.cc-svc-card.is-hover,.cc-svc-price.is-hover,.cc-svc-work__item.is-hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:0 22px 44px rgba(7,27,56,.14),0 2px 0 rgba(227,21,7,.25);border-color:rgba(227,21,7,.45)}
.cc-svc-card{border:1px solid rgba(7,27,56,.12);box-shadow:0 10px 30px rgba(7,27,56,.06),inset 0 1px 0 rgba(255,255,255,.9)}
.cc-svc-price.is-hover{border-color:rgba(255,75,58,.6)}
.cc-table-3d.is-hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);box-shadow:0 28px 54px rgba(7,27,56,.16),0 2px 0 rgba(227,21,7,.25);border-color:rgba(227,21,7,.4)}

/* ---- 3. scroll reveal --------------------------------------------------- */
.cc-js .cc-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.cc-js .cc-reveal.is-in{opacity:1;transform:none}
.cc-js .cc-svc-card.cc-reveal:not(.is-in),.cc-js .cc-table-3d.cc-reveal:not(.is-in){transform:translateY(22px) perspective(1100px)}
/* once revealed, the 3D transform takes over again */
.cc-js .cc-svc-card.cc-reveal.is-in,.cc-js .cc-svc-price.cc-reveal.is-in,.cc-js .cc-svc-work__item.cc-reveal.is-in,.cc-js .cc-table-3d.cc-reveal.is-in{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0)}
.cc-js .cc-svc-card.cc-reveal.is-in.is-hover,.cc-js .cc-svc-price.cc-reveal.is-in.is-hover,.cc-js .cc-svc-work__item.cc-reveal.is-in.is-hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.cc-js .cc-table-3d.cc-reveal.is-in.is-hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}

/* ---- 4. tables: universal ---------------------------------------------- */
body[class] .cc-table-wrap{position:relative;isolation:isolate;margin:0;padding:0;border:1px solid #dde3f0;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(7,27,56,.08),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;box-sizing:border-box}
body[class] .cc-table-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cc-grad-cta,linear-gradient(90deg,#ff4b3a,#e31507 60%,#c10e03));z-index:3;pointer-events:none}
body[class] .cc-table-wrap>table,body[class] .cc-table-wrap>.cc-table{margin:0!important;padding:0;width:100%;max-width:100%;border:0;border-collapse:collapse;border-spacing:0;box-shadow:none;background:transparent}
body[class] .cc-table th,body[class] .cc-table td{border:0;border-bottom:1px solid #dde3f0;background-clip:padding-box}
body[class] .cc-table th+th,body[class] .cc-table td+td,body[class] .cc-table th+td,body[class] .cc-table td+th{border-left:1px solid rgba(7,27,56,.08)}
body[class] .cc-table thead th{border-bottom:0;border-left-color:rgba(255,255,255,.14);color:#fff;background:var(--cc-midnight,#071b38)}
body[class] .cc-table thead th.cc-col-highlight{background:var(--cc-red,#e31507)}
body[class] .cc-table tbody tr:last-child>td,body[class] .cc-table tbody tr:last-child>th{border-bottom:0}
body[class] .cc-table tbody td:first-child,body[class] .cc-table tbody th:first-child,body[class] .cc-table tbody .cc-col-name{color:#222;font-weight:700;background:transparent}
body[class] .cc-table tbody tr:nth-child(even){background:var(--cc-paper,#f6f8fb)}
.cc-table tbody tr{transition:background .2s ease}
body[class] .cc-table tbody tr:hover{background:rgba(227,21,7,.045)}
body[class] .cc-table tbody tr:hover>td:first-child,body[class] .cc-table tbody tr:hover>th:first-child{color:var(--cc-red,#e31507)}
/* a CTA band that lives inside the wrap keeps the sealed corners */
body[class] .cc-table-wrap>.cc-table-cta{position:relative;z-index:1;margin:0;border-radius:0;border-top:1px solid rgba(255,255,255,.1)}
.cc-table-wrap+.cc-table-tabs{margin-top:14px}

/* ---- 5. inline CTA box (blogs + service pages) -------------------------- */
body[class] .cc-svc-inline-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 40px;margin:36px 0;padding:24px 28px;border-radius:14px;background:var(--cc-grad-dark,linear-gradient(135deg,#050f1f 0%,#071b38 60%,#0e2c55 100%));color:#fff;box-sizing:border-box;overflow:hidden}
body[class] .cc-svc-inline-cta__copy{position:relative;z-index:1;min-width:0}
body[class] .cc-svc-inline-cta__copy p,body[class] .cc-svc-inline-cta>p{margin:0!important;color:#fff!important;font-family:var(--cc-font-head);font-weight:700;font-size:20px;line-height:1.3}
body[class] .cc-svc-inline-cta__copy p+p,body[class] .cc-svc-inline-cta small{display:block;margin-top:4px!important;font-family:var(--cc-font-body);font-weight:400;font-size:15px;line-height:1.45;color:rgba(255,255,255,.8)!important}
body[class] .cc-svc-inline-cta__act{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;z-index:1}
body[class] .cc-svc-inline-cta .cc-btn{flex:0 0 auto}
body[class] .cc-svc-inline-cta__tel{display:flex;flex-direction:column;gap:2px;color:#fff!important;text-decoration:none!important;line-height:1.1}
body[class] .cc-svc-inline-cta__tel span{font-family:var(--cc-font-head);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ff6b5c}
body[class] .cc-svc-inline-cta__tel strong{font-family:var(--cc-font-head);font-weight:800;font-size:clamp(22px,2.2vw,30px);color:#fff;white-space:nowrap}
body[class] .cc-svc-inline-cta__tel:hover strong{color:#ffb3ab}

/* ---- responsive / accessibility ---------------------------------------- */
@media(max-width:767px){body[class] .cc-svc-inline-cta{padding:20px;grid-template-columns:minmax(0,1fr)}body[class] .cc-svc-inline-cta .cc-btn{width:100%;justify-content:center}body[class] .cc-svc-inline-cta__act{width:100%;align-items:stretch}body[class] .cc-svc-inline-cta__tel{align-items:center;text-align:center}}
@media(hover:none){.cc-svc-card,.cc-svc-price,.cc-svc-work__item,.cc-table-3d{transform:none!important}}
@media(prefers-reduced-motion:reduce){.cc-svc-glow__fx::before{animation:none}.cc-svc-glow__fx::after{transition:none}.cc-js .cc-reveal{opacity:1;transform:none;transition:none}.cc-svc-card,.cc-svc-price,.cc-svc-work__item,.cc-table-3d{transition:none;transform:none!important}}