/* Canton PPF & Tint — grafite e âmbar */
:root{
  --ink:#0e1116;--ink2:#171b22;--ink3:#232933;
  --amber:#f5a623;--amber-d:#d98b0b;
  --text:#1d2430;--muted:#5b6575;--line:#e3e6ea;--bg:#ffffff;--soft:#f5f6f8;
  --r:10px;--w:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;font-size:17px}
img{max-width:100%;height:auto}
a{color:#b46d00}
a:hover{color:var(--amber-d)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}

/* header */
header.site{background:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid #000}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:.2px;white-space:nowrap;display:flex;align-items:center;gap:.28em;min-height:48px}
.logo span{color:var(--amber)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;min-width:48px;min-height:48px;margin-right:-10px}
nav.main>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
nav.main>ul>li{position:relative}
nav.main>ul>li>a{display:block;color:#e8eaed;text-decoration:none;padding:20px 10px;font-weight:600;font-size:15px}
nav.main>ul>li>a:hover{color:var(--amber)}
nav.main .btn-phone{background:var(--amber);color:#111 !important;border-radius:8px;padding:10px 14px !important;margin-left:8px;font-weight:800}
nav.main .btn-phone:hover{background:#ffb93d}
.drop{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:250px;list-style:none;margin:0;padding:8px 0;border-radius:0 0 var(--r) var(--r);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.drop a{display:block;padding:9px 16px;color:var(--text);text-decoration:none;font-size:15px}
.drop a:hover{background:var(--soft);color:#000}
@media (hover:hover) and (min-width:901px){.has-drop:hover .drop{display:block}}
.has-drop.open .drop{display:block}
.has-drop>a::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}
.has-drop.open>a::after{border-top:0;border-bottom:5px solid currentColor}

/* hero */
.page-hero{position:relative;color:#fff;background:linear-gradient(110deg,rgba(14,17,22,.93) 0%,rgba(14,17,22,.78) 45%,rgba(14,17,22,.35) 100%),var(--hero,none) center/cover no-repeat,var(--ink2)}
.page-hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
.page-hero.noform .wrap{grid-template-columns:1fr}
.page-hero h1{font-size:42px;line-height:1.15;margin:0 0 16px;font-weight:800}
.page-hero .lead{font-size:19px;color:#d6d9de;margin:0 0 24px}
.page-hero .lead a{color:var(--amber);text-decoration:none;font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:8px;padding:13px 22px;font-size:16px;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--amber);color:#111}
.btn-primary:hover{background:#ffb93d;color:#111}
.btn-outline{border-color:#fff;color:#fff;background:transparent}
.btn-outline:hover{background:#fff;color:#111}

/* forms */
.hero-form,.form-card{background:#fff;color:var(--text);border-radius:14px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.hero-form h2{margin:0 0 4px;font-size:22px}
.hero-form .sub{margin:0 0 14px;color:var(--muted);font-size:15px}
form label{display:block;font-size:14px;font-weight:700;margin:10px 0 4px}
form input,form select,form textarea{width:100%;padding:11px 12px;border:1px solid #cfd4da;border-radius:8px;font:inherit;font-size:16px;background:#fff}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--amber);border-color:var(--amber)}
form .btn{width:100%;margin-top:16px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.priv{font-size:13px;color:var(--muted);margin:10px 0 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .full{grid-column:1/-1}

/* content */
.content{padding:48px 0 24px}
.content .wrap{max-width:860px}
.content h2{font-size:30px;line-height:1.25;margin:44px 0 14px}
.content h3{font-size:22px;margin:30px 0 10px}
.content p,.content li{color:#2b3340}
.content ul,.content ol{padding-left:22px}
.content li{margin:6px 0}
.content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px;display:block;overflow-x:auto}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.content th{background:var(--soft)}
.content blockquote{margin:24px 0;padding:16px 20px;background:var(--soft);border-left:4px solid var(--amber);border-radius:0 var(--r) var(--r) 0;color:var(--muted);font-size:15.5px}
.content blockquote p{margin:0;color:var(--muted)}
.content a.more{font-weight:800;text-decoration:none}
.svc-img{height:230px;border-radius:var(--r);background:var(--ink3) var(--img,none) center/cover no-repeat;margin:14px 0 6px}
.sources{font-size:14px;color:var(--muted)}
details{border:1px solid var(--line);border-radius:var(--r);padding:0 18px;margin:10px 0;background:#fff}
details summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;position:relative;padding-right:28px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--amber-d)}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 15px}
.post-list{list-style:none;padding:0}
.post-list li{border-bottom:1px solid var(--line);padding:18px 0}
.post-list a{font-size:21px;font-weight:800;text-decoration:none;color:var(--text)}
.post-list a:hover{color:var(--amber-d)}
.post-list p{margin:6px 0 0;color:var(--muted)}

/* end CTA */
.mini-cta{background:var(--ink);color:#fff;border-radius:16px;padding:32px;margin:56px 0 24px;scroll-margin-top:80px}
.mini-cta h2{color:#fff;margin:0 0 8px;font-size:28px}
.mini-cta>p{color:#cfd3d9;margin:0 0 18px}
.mini-cta .form-card{margin-top:22px;box-shadow:none}

/* footer */
footer.site{background:var(--ink);color:#aeb5bf;padding:48px 0 90px;margin-top:40px;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer.site h4{color:#fff;margin:0 0 12px;font-size:16px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:6px 0}
footer.site a{color:#d8dce2;text-decoration:none}
footer.site a:hover{color:var(--amber)}
footer.site .fphone a{color:var(--amber);font-weight:800;font-size:18px}
footer.site .copy{border-top:1px solid #2a2f38;margin-top:32px;padding-top:18px;font-size:13.5px}

/* mobile bar */
.mobile-bar{display:none}

@media (max-width:900px){
  body{font-size:16.5px}
  .nav-toggle{display:block}
  nav.main{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--ink);border-top:1px solid #222;overflow-y:auto;z-index:70}
  body.menu-open{overflow:hidden}
  nav.main>ul>li>a{display:flex;justify-content:space-between;align-items:center}
  nav.main.open{display:block}
  nav.main>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px}
  nav.main>ul>li>a{padding:13px 20px}
  nav.main .btn-phone{margin:10px 20px 0;justify-content:center}
  .drop{position:static;box-shadow:none;border-radius:0;background:var(--ink2);padding:0}
  .drop a{color:#d8dce2;padding:11px 34px}
  .drop a:hover{background:var(--ink3);color:#fff}
  .page-hero .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:36px;gap:26px}
  .page-hero h1{font-size:31px}
  .page-hero .lead{font-size:17px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .content h2{font-size:25px}
  .form-grid{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .mobile-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);padding:10px 12px;border-top:1px solid #2a2f38}
  .mobile-bar .btn{flex:1;padding:12px}
}
@media (max-width:520px){
  footer.site .cols{grid-template-columns:1fr}
  .mini-cta{padding:22px}
}