/* Carolina Gloss Detailing - site styles */
:root{
  --navy:#0B1220; --navy-2:#141E32; --navy-3:#1E2B45;
  --blue:#88B8F8; --blue-deep:#5A94E8; --blue-ink:#2E68C4;
  --ink:#111318; --muted:#5C6470; --line:#E6E9EE; --line-blue:#D7E4F8;
  --paper:#FFFFFF; --wash:#EEF4FD;
  --head:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sh-sm:0 1px 2px rgba(11,18,32,.06),0 4px 12px rgba(11,18,32,.05);
  --sh-md:0 10px 30px rgba(11,18,32,.10);
  --sh-lg:0 24px 60px rgba(11,18,32,.28),0 4px 14px rgba(11,18,32,.16);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:#FFFFFF;font-family:var(--head);color:var(--muted);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px;border-radius:6px}

.wrap{width:min(1120px,calc(100% - 56px));margin:0 auto}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-bar{display:flex;align-items:center;gap:30px;padding:13px 0}
.logo img{height:46px;width:auto}
.nav{display:flex;gap:26px;font-size:15px;font-weight:500}
.nav a{color:var(--muted);padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--blue-ink)}
.nav a.on{color:var(--blue-ink);border-bottom-color:var(--blue-deep)}
.hdr-sp{flex:1}
.call{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#0B1220;
  font-weight:700;font-size:15px;padding:11px 20px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 0 rgba(46,104,196,.25);transition:transform .15s,background .15s}
.call:hover{background:var(--blue-deep);transform:translateY(-1px)}
.call svg{width:15px;height:15px}

.hero{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,18,32,.94) 0%,rgba(11,18,32,.82) 38%,rgba(11,18,32,.42) 70%,rgba(11,18,32,.55) 100%)}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:center;padding:70px 0 74px}
.hero-copy{max-width:34ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--blue);margin-bottom:18px}
.hero h1{font-size:clamp(36px,4.3vw,58px);font-weight:700;color:#fff;margin-bottom:18px}
.hero-sub{color:#C3CFE2;font-size:18px;max-width:42ch;margin-bottom:22px}
.trust{font-size:15px;color:#C3CFE2}

.quote-card{background:var(--paper);border-radius:18px;padding:26px;box-shadow:var(--sh-lg);
  border:1px solid var(--line-blue)}
.quote-card h3{font-size:23px;font-weight:700;margin-bottom:4px}
.qnote{font-size:14px;color:var(--muted);margin-bottom:18px}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;
  background:#fff;font-size:15.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235C6470' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue-deep);box-shadow:0 0 0 4px rgba(136,184,248,.28)}
.field input::placeholder{color:#A5AEBC}
.field.flash input,.field.flash select{border-color:var(--blue-deep);box-shadow:0 0 0 4px rgba(136,184,248,.42)}
.btn{width:100%;background:var(--blue);color:#0B1220;font-weight:700;font-size:16.5px;
  border:none;padding:15px;border-radius:11px;cursor:pointer;margin-top:6px;
  box-shadow:0 2px 0 rgba(46,104,196,.3);transition:background .15s,transform .1s}
.btn:hover:not(:disabled){background:var(--blue-deep);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.microcopy{font-size:12.5px;color:#8A93A2;text-align:center;margin-top:11px}
.form-error{display:none;font-size:14px;color:#B4232A;background:#FDF0F0;border:1px solid #F3CFD1;
  border-radius:9px;padding:10px 12px;margin-top:12px}
.form-error.show{display:block}
.form-success{display:none}
.form-success.show{display:block}
.tick{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#0B1220;
  display:grid;place-items:center;font-weight:700;margin-bottom:14px}
.form-success h3{font-size:21px;margin-bottom:8px}
.form-success p{font-size:15px}
.payload{margin-top:18px;border:1px dashed var(--line-blue);border-radius:11px;background:var(--wash);padding:13px 14px}
.payload .plabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-ink);margin-bottom:8px}
.payload pre{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:#26324A;overflow-x:auto;white-space:pre}
.linkish{background:none;border:none;color:var(--blue-ink);font-size:13.5px;font-weight:500;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-top:14px;padding:0}

.section{padding:80px 0}
.section.wash{background:var(--wash)}
.sec-head{max-width:60ch;margin-bottom:40px}
.sec-head .eyebrow{color:var(--blue-ink)}
.sec-head h2{font-size:clamp(29px,3.1vw,42px);font-weight:700;margin-bottom:13px}
.sec-head p{font-size:17px;max-width:56ch}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.svc{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.svc:hover{border-color:var(--line-blue);box-shadow:var(--sh-md);transform:translateY(-3px)}
.svc.feature{border-color:var(--blue-deep);box-shadow:0 0 0 4px rgba(136,184,248,.16),var(--sh-sm)}
.pop{position:absolute;top:16px;right:0;z-index:3;display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue-ink) 100%);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 15px 8px 13px;border-radius:999px 0 0 999px;
  box-shadow:0 6px 18px rgba(11,18,32,.4)}
.pop svg{width:12px;height:12px;fill:#FFD466;flex:none}
.svc-link{display:flex;flex-direction:column;flex:1}
.svc-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-2)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc-thumb img{transform:scale(1.04)}
.svc-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.svc-body h3{font-size:24px;font-weight:700;margin-bottom:9px}
.svc-body p{font-size:15px;flex:1}
.svc-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-weight:700;font-size:15px;color:var(--blue-ink)}
.svc-more svg{width:13px;height:13px;transition:transform .18s}
.svc:hover .svc-more svg{transform:translateX(4px)}

.detail-hero{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.detail-hero .hero-bg img{object-position:center 55%}
.detail-inner{padding:52px 0 56px;position:relative}
.back{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:22px}
.back svg{width:12px;height:12px}
.detail-inner h1{font-size:clamp(34px,4.4vw,54px);font-weight:700;color:#fff;margin-bottom:16px}
.detail-inner .lede{color:#C3CFE2;font-size:19px;max-width:52ch}

.detail-body{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.spec{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-ink);margin-bottom:14px}
.steps{list-style:none;display:grid;gap:2px}
.steps li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:none}
.steps .n{font-family:var(--mono);font-size:12px;color:var(--blue-ink);flex:none;padding-top:3px}
.steps b{display:block;color:var(--ink);font-size:17px;font-weight:700;margin-bottom:4px}
.steps span.d{font-size:15px;line-height:1.6}
.gal{display:grid;gap:14px;position:sticky;top:88px}
.gal figure{border-radius:var(--r);overflow:hidden;background:var(--navy-2);box-shadow:var(--sh-sm)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);padding:10px 12px;background:#fff}
.bestfor{background:var(--wash);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
  padding:16px 18px;font-size:15px;color:var(--muted);margin-top:26px}
.bestfor b{color:var(--ink)}

.section.bookend{padding:0 0 80px}
.endcta{display:flex;justify-content:center}
.btn-lg{background:var(--blue);color:#0B1220;font-weight:700;font-size:17px;border:none;
  padding:16px 30px;border-radius:999px;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 0 rgba(46,104,196,.3);transition:background .15s,transform .1s}
.btn-lg:hover{background:var(--blue-deep);transform:translateY(-1px)}
@keyframes bookend-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.bookend .btn-lg{animation:bookend-float 2.6s ease-in-out infinite}
.bookend .btn-lg:hover{animation:none}

.proof-wrap{max-width:860px;margin:0 auto}
.ba{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);
  aspect-ratio:3/2;background:var(--navy-2);user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after-layer{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-label{position:absolute;top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(11,18,32,.72);color:#EAF1FC;padding:5px 10px;border-radius:999px}
.ba-label.l{left:12px}.ba-label.r{right:12px;background:var(--blue);color:#0B1220}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(11,18,32,.2);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;z-index:2;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path d='M5 2L1.5 6.5 5 11M8 2l3.5 4.5L8 11' fill='none' stroke='%230B1220' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}

.rev-title{font-size:20px;font-weight:700;color:var(--ink);margin-top:40px}
.rev-rail{display:flex;gap:16px;margin-top:14px;padding:4px 2px 14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--line-blue) transparent;-webkit-overflow-scrolling:touch}
.rev-rail::-webkit-scrollbar{height:7px}
.rev-rail::-webkit-scrollbar-track{background:transparent}
.rev-rail::-webkit-scrollbar-thumb{background:var(--line-blue);border-radius:99px}
.rev{flex:0 0 330px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:11px;padding:16px 18px;transition:box-shadow .16s,transform .16s}
.rev:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)}
.rev header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:15px;color:#fff}
.who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.who b{color:var(--ink);font-size:14.5px;font-weight:700}
.who .meta{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.lg{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-ink);background:var(--wash);border:1px solid var(--line-blue);
  padding:1px 6px;border-radius:4px;margin-left:7px;vertical-align:1px}
.rate{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.stars{color:#F5A623;letter-spacing:1px;font-size:12.5px}
.when{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rev q{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;color:#7A828F;font-style:italic;quotes:none;flex:1}
.rail-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--muted);text-align:right}

.area-row{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.area-copy h2{font-size:clamp(29px,3.1vw,42px);font-weight:700;margin-bottom:13px}
.area-copy .eyebrow{color:var(--blue-ink)}
.area-copy>p{font-size:17px;max-width:48ch}
.area-list{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
.area-list li{display:flex;align-items:center;gap:13px;background:#fff;padding:18px 22px;
  font-size:17px;font-weight:500;color:var(--ink)}
.area-list svg{width:17px;height:17px;flex:none;color:var(--blue-deep)}
.area-list li.near{background:var(--wash);font-size:14.5px;font-weight:400;color:var(--muted)}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.why h3{font-size:19px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.why .ico{width:34px;height:34px;border-radius:9px;background:var(--wash);color:var(--blue-ink);
  display:grid;place-items:center;flex:none}
.why .ico svg{width:17px;height:17px}
.why p{font-size:15px}

.site-footer{background:var(--navy);color:#96A3B8;padding:52px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr;gap:38px;padding-bottom:36px}
.site-footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:13px;font-weight:500}
.site-footer p{font-size:15px}
.foot-line{font-family:var(--mono);font-size:16px;color:#fff;letter-spacing:.02em;display:block;margin-bottom:6px}
.foot-line.sm{font-size:14px}
.foot-social{display:flex;gap:12px;margin-top:16px}
.sicon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:var(--blue);background:rgba(136,184,248,.10);border:1px solid rgba(136,184,248,.28);
  transition:background .16s,color .16s,transform .16s,border-color .16s}
.sicon svg{width:20px;height:20px}
.sicon:hover{background:var(--blue);color:#0B1220;border-color:var(--blue);transform:translateY(-2px)}
.foot-bottom{border-top:1px solid var(--navy-3);padding:19px 0;font-size:13.5px;color:#6B7789}

@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:34px;padding:52px 0 56px}
  .quote-card{max-width:480px}
  .detail-body{grid-template-columns:1fr;gap:34px}
  .gal{position:static;grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .area-row{grid-template-columns:1fr;gap:28px}
  .why-grid{grid-template-columns:1fr 1fr;gap:26px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{width:calc(100% - 36px)}
  .header-bar{gap:12px;padding:11px 0}
  .logo img{height:38px}
  .nav{display:none}
  .call{font-size:14px;padding:10px 16px}
  .section{padding:52px 0}
  .sec-head{margin-bottom:26px}
  .hero-inner{padding:40px 0 46px}
  .hero-sub{font-size:16.5px}
  .quote-card{padding:20px;max-width:none}
  .svc-grid{grid-template-columns:1fr;gap:16px}
  .svc-thumb{aspect-ratio:16/9}
  .detail-inner{padding:34px 0 40px}
  .detail-inner .lede{font-size:17px}
  .gal{grid-template-columns:1fr}
  .steps li{gap:12px;padding:14px 0}
  .steps b{font-size:16px}
  .section.bookend{padding:0 0 52px}
  .btn-lg{width:100%}
  .ba{aspect-ratio:4/3}
  .rev{flex-basis:min(82vw,320px)}
  .why-grid{grid-template-columns:1fr;gap:22px}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-bottom:28px}
}