/* Notorious Shadows Window Tinting, LLC - shared stylesheet */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0d0e10; --bg2:#141619; --panel:#17191d; --panel2:#1d2025;
  --fg:#eef0f3; --muted:#9aa2ae; --line:rgba(255,255,255,0.09);
  --red:#d81f2d; --red2:#b0121e; --sage:rgba(216,31,45,0.12);
  --ease:cubic-bezier(0.22,1,0.36,1);
}
[data-theme="light"]{
  --bg:#f3f4f6; --bg2:#e9ebee; --panel:#ffffff; --panel2:#f5f6f8;
  --fg:#16181c; --muted:#5a5f68; --line:rgba(0,0,0,0.1);
  --sage:rgba(216,31,45,0.08);
}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{font-family:'Geist',system-ui,sans-serif;font-size:18px;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;transition:background .5s var(--ease),color .5s var(--ease)}
[data-dys="on"] body,[data-dys="on"]{font-family:'Lexend',sans-serif !important}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red2)}
::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}

@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.12)}}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
@keyframes filmwipe{0%{transform:scaleX(0)}45%{transform:scaleX(1);transform-origin:left}55%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.kb{animation:kenburns 26s ease-in-out infinite alternate}
.reveal-init{opacity:0;transform:translateY(26px)}
.reveal-in{opacity:1 !important;transform:none !important;transition:opacity .85s var(--ease),transform .85s var(--ease)}

.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.5);border-color:var(--red)}
.card .card-media{transition:transform .7s var(--ease)}
.card:hover .card-media{transform:scale(1.06)}
.gtile{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.gtile:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(0,0,0,.55);border-color:var(--red);z-index:2}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
.card:hover .arrow,.hv-arrow:hover .arrow{transform:translateX(4px)}

.navlink{position:relative;color:var(--fg);transition:color .25s ease}
.navlink:hover{color:var(--red)}
.navlink::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navlink:hover::after{transform:scaleX(1)}
.navlink.active{color:var(--red)}
.flink{color:var(--fg);width:fit-content;transition:color .2s ease}
.flink:hover{color:var(--red)}
.clink{transition:color .2s ease}
.clink:hover{color:var(--red)}
.ulink{position:relative}
.ulink::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.ulink:hover::after{transform:scaleX(1)}

.hicon{background:transparent;border:none;color:var(--fg);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.hicon:hover{background:var(--sage);color:var(--red)}

.hv-red:hover{background:var(--red2) !important;color:#fff !important}
.hv-dark:hover{background:var(--bg2) !important}
.hv-white:hover{background:#f0f0f0 !important}
.hv-outline:hover{border-color:var(--red) !important;color:var(--red) !important}
.hv-social:hover{border-color:var(--red) !important;color:var(--red) !important;box-shadow:0 0 16px var(--sage) !important}
.hv-sage:hover{background:var(--sage) !important}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal-init{opacity:1 !important;transform:none !important}
}
@media (max-width:1024px){ .navlinks{display:none !important} .contact-pill-num{display:none !important} [data-menubtn]{display:flex !important} }
@media (max-width:820px){ .about-grid,.svc-row,.contact-grid{grid-template-columns:1fr !important} .svc-row .svc-media{order:-1} }
@media (max-width:640px){ .gtile{grid-column:span 1 !important} }