/* Nexo Auto Glass — bold layer (2026-11-04), same design system as Sukh Auto Repair, in Nexo blue.
   Loaded after style.css + premium.css. Oswald (headings) + Barlow (text), self-hosted. Dark top bar/header,
   uppercase display type, angled buttons, numbered quick actions, service stripe, Google review slider. */
@font-face{font-family:"Oswald";font-weight:200 700;font-style:normal;font-display:swap;src:url(/assets/fonts/oswald-var.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-700.woff2) format("woff2")}

:root{
  --head:"Oswald",Impact,"Arial Narrow",sans-serif;--body:"Barlow","Segoe UI",Arial,sans-serif;
  --nx-ink:#0B1220;--nx-ink2:#0F1828;--nx-ink3:#162236;--nx-line:#223049;--nx-blue:#1878B8;--nx-blue2:#2C93D6;--nx-navy:#283888;--nx-mute:#AEB9CC;--nx-gold:#F5B301;
  --cut:12px;
}
body{font-family:var(--body);letter-spacing:0}
h1,h2,h3,h4,.btn,.nav a.l,.eyebrow,.link-arrow,.hx-eyebrow,.ftr h4{font-family:var(--head)}
h1,h2{text-transform:uppercase;font-weight:600;letter-spacing:.005em;line-height:1.02}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem)}
h3{font-weight:500;letter-spacing:.01em}
h1 em,h2 em{font-style:normal;color:var(--nx-blue)}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-weight:600;letter-spacing:.18em;color:var(--nx-blue)}
.eyebrow::before{content:"";width:2rem;height:2px;background:currentColor}

/* angled buttons (Sukh style) */
.btn{border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);font-weight:600;letter-spacing:.09em;text-transform:uppercase;gap:.6rem}
.btn-blue,.hx .btn-blue{background:var(--nx-blue);color:#fff;border-color:var(--nx-blue)}
.btn-blue:hover,.hx .btn-blue:hover{background:var(--nx-navy);border-color:var(--nx-navy);color:#fff}
.btn-dark{background:var(--nx-ink);color:#fff}.btn-dark:hover{background:#000;color:#fff}
.btn-line{border-radius:0}
.btn svg{width:1.15em;height:1.15em}

/* top bar */
.topbar{background:#070B14;color:var(--nx-mute);font-size:.86rem;border-bottom:1px solid var(--nx-line)}
.topbar .wrap{display:flex;align-items:center;gap:1.6rem;min-height:38px}
.topbar span{display:inline-flex;align-items:center;gap:.45rem}
.topbar svg{width:15px;height:15px;color:var(--nx-blue2)}
.topbar .tb-r{margin-left:auto;gap:1rem}
.topbar a{color:var(--nx-mute);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}.topbar a:hover{color:#fff}
.topbar .tb-call b{color:#fff;font-weight:600}
@media(max-width:820px){.topbar .tb-h,.topbar .tb-r a:not(.tb-call){display:none}.topbar .wrap{gap:.8rem;font-size:.8rem}}
@media(max-width:520px){.topbar .wrap>span:first-child{display:none}.topbar .tb-r{margin:0 auto}}

/* dark header */
.hdr{background:var(--nx-ink);border-bottom:1px solid var(--nx-line)}
.hdr-in{min-height:80px}
.brand img{width:170px}
.nav a.l{color:#fff;font-weight:500;letter-spacing:.12em;font-size:.95rem;position:relative;border-radius:0}
.nav a.l:hover,.nav a.l[aria-current]{color:#fff;background:transparent}
.nav a.l::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.45rem;height:2px;background:var(--nx-blue);transform:scaleX(0);transition:transform .2s}
.nav a.l:hover::after,.nav a.l[aria-current]::after{transform:scaleX(1)}
.hdr-phone{color:#fff;text-decoration:none;line-height:1.1}
.hdr-phone b{display:block;font-family:var(--head);font-weight:600;font-size:1.12rem;letter-spacing:.03em;color:#fff}
.hdr-phone small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nx-mute)}
.burger{color:#fff;background:transparent;border-color:rgba(255,255,255,.3)}
.burger svg{color:#fff}

/* hero */
.hx h1{font-family:var(--head);text-transform:uppercase;font-weight:700;font-size:clamp(3rem,7.2vw,6.2rem);line-height:.96;letter-spacing:.005em;max-width:11em}
.hx h1 em{color:var(--nx-blue2)}
.hx-eyebrow{letter-spacing:.2em;font-weight:600;color:#fff}
.hx-eyebrow::before{background:var(--nx-blue2);height:2px}
.hx .btn-ghost{border-radius:0;border-color:rgba(255,255,255,.8)}
.stars{display:inline-flex;gap:2px;color:var(--nx-gold)}
.stars svg{width:1.05em;height:1.05em}
.rate{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.9rem;color:#e4e8f0;font-size:.98rem;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.15rem}
.rate .stars{font-size:1.15rem}
.rate b{font-family:var(--head);font-weight:600;color:#fff;letter-spacing:.04em;font-size:1.1rem}
.rate:hover{color:#fff;border-bottom-color:var(--nx-blue2)}

/* numbered quick actions */
.quick{background:var(--nx-ink2);border-bottom:1px solid var(--nx-line)}
.quick .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.qa{display:flex;gap:1rem;align-items:center;padding:1.6rem 1.3rem;border-left:1px solid var(--nx-line);position:relative;color:#fff;text-decoration:none;transition:background .25s}
.qa:first-child{border-left:0;padding-left:0}
.qa .qn{font-family:var(--head);font-weight:700;font-size:2.2rem;line-height:1;color:var(--nx-blue2);min-width:2.2rem}
.qa b{display:block;font-family:var(--head);font-weight:600;font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.15}
.qa small{display:block;color:var(--nx-mute);font-size:.88rem;line-height:1.35;margin-top:.2rem}
.qa::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--nx-blue);transition:width .3s}
.qa:hover::after{width:100%}.qa:hover{background:rgba(255,255,255,.03);color:#fff}
@media(max-width:1000px){.quick .wrap{grid-template-columns:repeat(2,1fr)}.qa:nth-child(3){border-left:0;padding-left:0}.qa:nth-child(n+3){border-top:1px solid var(--nx-line)}}
@media(max-width:560px){.quick .wrap{grid-template-columns:1fr}.qa{border-left:0;padding-left:0!important;border-top:1px solid var(--nx-line)}.qa:first-child{border-top:0}}

/* blue service stripe (slow scroll; still when reduced motion) */
.stripe{background:var(--nx-blue);color:#fff;overflow:hidden;border-bottom:4px solid var(--nx-navy)}
.stripe-in{display:flex;gap:3rem;width:max-content;padding:.95rem 0;animation:nxslide 38s linear infinite}
.stripe span{font-family:var(--head);font-weight:600;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:3rem}
.stripe span::after{content:"";width:9px;height:9px;background:#fff;transform:rotate(45deg);opacity:.75}
@keyframes nxslide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.stripe-in{animation:none}}

/* reviews (dark, Google-style cards) */
.rvx{background:var(--nx-ink);color:#fff;padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative;overflow:hidden}
.rvx::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;pointer-events:none}
.rvx .wrap{position:relative}
.rvx h2{color:#fff}.rvx h2 em{color:var(--nx-blue2)}
.rev-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:860px){.rev-grid{grid-template-columns:1fr}}
.rev-score{background:var(--nx-ink3);border:1px solid var(--nx-line);border-top:4px solid var(--nx-blue);padding:clamp(2rem,4vw,3rem) 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.rev-score b{font-family:var(--head);font-weight:700;font-size:clamp(5rem,11vw,8rem);line-height:.9;color:#fff}
.rev-score .stars{font-size:1.9rem}
.rev-score span:last-child{font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;color:var(--nx-mute)}
.rev-copy p{color:var(--nx-mute);max-width:52ch;margin:1rem 0 1.6rem}
.rev-slider{margin-top:clamp(2.8rem,5vw,4.2rem);min-width:0}
.rev-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.3rem}
.rev-head h3{font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600}
.rev-nav{display:flex;gap:.6rem}
.rv-btn{width:46px;height:46px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,opacity .2s}
.rv-btn svg{width:20px;height:20px}.rv-prev svg{transform:scaleX(-1)}
.rv-btn:hover:not(:disabled){background:var(--nx-blue);border-color:var(--nx-blue)}.rv-btn:disabled{opacity:.3;cursor:default}
.rev-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rev-track::-webkit-scrollbar{display:none}
.rcard{flex:0 0 min(86vw,360px);scroll-snap-align:start;background:#fff;color:var(--nx-ink);padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.85rem;border-top:4px solid var(--nx-blue)}
.rcard header{display:flex;align-items:center;gap:.8rem}
.rcard .av{width:44px;height:44px;border-radius:50%;background:var(--c,#1878B8);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:600;font-size:1.15rem;flex:0 0 auto}
.rcard header b{display:block;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.2}
.rcard header small{color:#6b7488;font-size:.8rem}
.rcard p{margin:0;font-size:.98rem;line-height:1.6;color:#2f3647;flex:1}
.rmore{font-family:var(--head);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nx-blue)}
.rcard.rcard-end{background:var(--nx-blue);color:#fff;align-items:center;justify-content:center;text-align:center;border-top-color:#fff}
.rcard.rcard-end .big{font-family:var(--head);font-weight:700;font-size:4.2rem;line-height:.95}
.rcard.rcard-end .stars{font-size:1.4rem;color:#fff}
.rcard.rcard-end p{color:#fff;flex:0 0 auto;max-width:26ch}
.frate{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--nx-mute);font-size:.92rem;text-decoration:none}
.frate b{color:#fff;font-weight:600}.frate:hover{color:#fff}
.cbox .frate{margin-top:.4rem;color:#5b6478}.cbox .frate b{color:var(--nx-ink)}

/* footer + mobile bar */
.ftr{background:#070B14}
.ftr h4{letter-spacing:.18em}
.mbar{background:var(--nx-ink);border-top:1px solid var(--nx-line)}
.mbar .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* ---- homepage rhythm (Sam 2026-11-04): sections alternate WHITE / BLUE ---- */
:root{--nx-bluebg:linear-gradient(135deg,#0F5E96 0%,#1878B8 100%)}
.svx,.rvx,.ar{background:#fff}
.cr,.pr,.fq{background:var(--nx-bluebg);color:#fff}
/* blue sections: white type, sky-blue accent */
.cr h2,.pr h2,.fq h2,.cr h3,.pr h3{color:#fff}
.cr h2 em,.pr h2 em,.fq h2 em{color:#BFE4FF}
.cr .eyebrow,.pr .eyebrow,.fq .eyebrow{color:#fff}
.cr p,.cr p.lead,.pr-steps p,.fq p,.pr .hs-head p{color:rgba(255,255,255,.88)}
.cr-steps{border-top-color:rgba(255,255,255,.55)}
.cr-steps li{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.cr-steps li::before,.pr-steps .n{color:#BFE4FF}
.pr-steps li{border-top-color:rgba(255,255,255,.55)}
.cr .link-arrow{color:#fff}.cr .link-arrow:hover{color:#BFE4FF}
.fq .tel{color:#fff;border-bottom-color:rgba(255,255,255,.5)}.fq .fine{color:rgba(255,255,255,.75)}
.fq .panel{box-shadow:0 24px 60px rgba(8,30,60,.28)}
.cr .btn-blue,.pr .btn-blue{background:#fff;color:#0F5E96;border-color:#fff}
/* reviews on white: dark type, cards lifted with a soft shadow */
.rvx{color:var(--nx-ink)}
.rvx::before{background:linear-gradient(rgba(16,40,80,.045) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(16,40,80,.045) 1px,transparent 1px) 0 0/48px 48px}
.rvx h2{color:var(--nx-ink)}.rvx h2 em{color:var(--nx-blue)}
.rev-score{background:var(--nx-ink);border-color:var(--nx-ink)}
.rev-copy p{color:#4a5468}
.rev-head h3{color:var(--nx-ink)}
.rv-btn{border-color:rgba(11,18,32,.25);color:var(--nx-ink)}.rv-btn:hover:not(:disabled){color:#fff}
.rcard{box-shadow:0 14px 36px rgba(11,18,32,.10);border:1px solid #E3E9F2;border-top:4px solid var(--nx-blue)}
.fq::after{background:linear-gradient(90deg,rgba(15,94,150,.96) 0%,rgba(20,106,166,.90) 50%,rgba(24,120,184,.82) 100%)}

/* craftsmanship v3 (Sam: different photo from the services block + new layout): edge-to-edge split, steps as numbered cards */
.cr2{padding:0 0 clamp(3.5rem,7vw,6rem)}
.cr2-top{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:clamp(420px,42vw,600px)}
.cr2-img{position:relative;margin:0;overflow:hidden;background:#0d3d63}
.cr2-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.cr2-img figcaption{position:absolute;left:0;bottom:0;background:var(--nx-ink);color:#fff;font:600 .78rem/1 var(--head);letter-spacing:.18em;text-transform:uppercase;padding:1rem 1.3rem}
.cr2-txt{padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:640px}
.cr2-txt h2{margin:.2rem 0 1.1rem}
.cr2-steps{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.cr2-steps li{counter-increment:s;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-top:4px solid #fff;padding:1.5rem 1.3rem 1.6rem;color:#fff;font-size:1.02rem;line-height:1.5}
.cr2-steps li::before{content:counter(s,decimal-leading-zero);display:block;font:700 2.4rem/1 var(--head);color:#BFE4FF;margin-bottom:.9rem}
@media(max-width:980px){.cr2-top{grid-template-columns:1fr}.cr2-img{min-height:300px}.cr2-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cr2-steps{grid-template-columns:1fr}}

/* ---- inner pages (Sam: "make sure changes are on all pages") ---- */
/* page headers: blue main button + Google rating, same as the home hero */
.ph .btn-blue{background:var(--nx-blue);color:#fff;border-color:var(--nx-blue)}.ph .btn-blue:hover{background:var(--nx-navy);color:#fff}
.ph .btn-ghost{border-radius:0}
.ph .rate{margin-top:1.5rem}
.ph h1{font-weight:700}
/* white / blue rhythm: plain sections white, the "alt" sections blue */
.sec{background:#fff}
.sec-mist,.ab-alt{background:var(--nx-bluebg);color:#fff}
.sec-mist .sec-head h2,.sec-mist .sec-head .eyebrow{color:#fff}
.sec-mist .sec-head p{color:rgba(255,255,255,.88)}
.ab-alt h2,.ab-alt h3,.ab-alt .eyebrow{color:#fff}
.ab-alt p,.ab-alt li{color:rgba(255,255,255,.9)}
.ab-alt .n{color:#BFE4FF}
.ab-alt ol,.ab-alt ul,.ab-alt li{border-color:rgba(255,255,255,.28)}
.ab-alt .btn-blue{background:#fff;color:#0F5E96;border-color:#fff}.ab-alt .btn-blue:hover{background:var(--nx-ink);color:#fff}
.ab-alt .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}.ab-alt .btn-line:hover{background:#fff;color:#0F5E96}
.ab:not(.ab-alt),.ab-badge{background:#fff}
/* reviews block on blue (inner pages that end on a white section) */
.rvx-blue{background:var(--nx-bluebg);color:#fff}
.rvx-blue::before{background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/48px 48px}
.rvx-blue h2,.rvx-blue .eyebrow,.rvx-blue .rev-head h3{color:#fff}
.rvx-blue h2 em{color:#BFE4FF}
.rvx-blue .rev-copy p{color:rgba(255,255,255,.9)}
.rvx-blue .rev-copy .btn-blue{background:#fff;color:#0F5E96;border-color:#fff}.rvx-blue .rev-copy .btn-blue:hover{background:var(--nx-ink);color:#fff}
.rvx-blue .rv-btn{border-color:rgba(255,255,255,.55);color:#fff}.rvx-blue .rv-btn:hover:not(:disabled){background:var(--nx-ink);border-color:var(--nx-ink)}
.rvx-blue .rcard{border:0;border-top:4px solid var(--nx-ink);box-shadow:0 18px 40px rgba(5,25,50,.25)}
.rvx-blue .rcard.rcard-end{background:var(--nx-ink);border-top-color:#BFE4FF}