/*
Theme Name: Road Worthy Branding
Theme URI: https://roadworthybranding.com
Author: Road Worthy Branding
Author URI: https://roadworthybranding.com
Description: A bold one-page vehicle branding site for Road Worthy Branding — cover, about, field guide, and contact. Black / gold / silver. Just upload and activate.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roadworthy
*/

:root{--bg:#101113;--gold:#C9960A;--gold-l:#E8B424;--white:#fff;--ink:#dcdce0;--muted:#8a8a8d;--dark:#160f00}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Quicksand',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.display{font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--white);line-height:.92;letter-spacing:.01em;font-weight:400}
.gold{color:var(--gold)}
.gold-l{color:var(--gold-l)}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}
section{scroll-margin-top:72px}
.btn{display:inline-block;font-family:'Quicksand',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--gold);color:var(--dark);padding:16px 30px;border-radius:12px;font-size:clamp(1rem,2vw,1.25rem);transition:transform .15s,background .15s}
.btn:hover{background:var(--gold-l);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}
.foot{border-top:2px solid var(--gold);margin-top:38px;padding-top:14px;display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.foot .n{font-family:'Anton',sans-serif;letter-spacing:.06em;color:#9a9a9d;text-transform:uppercase;font-size:.95rem}
.foot .m{color:var(--muted);font-size:.95rem}
.foot a:hover{color:var(--gold-l)}

/* ---- Nav ---- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(16,17,19,.86);backdrop-filter:blur(8px);border-bottom:1px solid #26272a}
.site-nav .inner{max-width:1320px;margin:0 auto;padding:10px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-nav .brand img{height:38px;width:auto}
.site-nav ul{list-style:none;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.site-nav a.lnk{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:#c9cbce}
.site-nav a.lnk:hover{color:var(--gold-l)}
.site-nav .navbtn{background:var(--gold);color:var(--dark);font-family:'Anton',sans-serif;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;padding:9px 18px;border-radius:8px}
.site-nav .navbtn:hover{background:var(--gold-l)}
@media(max-width:720px){.site-nav ul{gap:14px}.site-nav a.lnk{font-size:.78rem}.site-nav .brand img{height:30px}}

/* ---- Section 1: Cover ---- */
#home{min-height:100vh;display:flex;flex-direction:column;padding-top:60px}
#home .top{flex:1;display:flex;align-items:center;justify-content:center;padding:6vh 24px}
#home .top img{width:min(1100px,86vw)}
#home .band{background:var(--gold);text-align:center;padding:clamp(34px,6vh,70px) 24px}
#home .band .l1{font-family:'Anton',sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(1.9rem,6vw,4rem);letter-spacing:.06em}
#home .band .l2{font-family:'Anton',sans-serif;text-transform:uppercase;color:#1a1305;font-size:clamp(1.4rem,4.4vw,2.9rem);letter-spacing:.14em;margin-top:10px}
#home .band .l3{font-family:'Quicksand',sans-serif;font-weight:700;color:#3a2c08;letter-spacing:.14em;font-size:clamp(.8rem,2vw,1.1rem);margin-top:16px}

/* ---- Section 2: About / First Impressions ---- */
#about{min-height:100vh;display:flex;align-items:center;padding:12vh 0 8vh}
#about .grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30vw,430px);gap:clamp(20px,4vw,60px);align-items:center;width:100%}
#about h2{font-size:clamp(3rem,11vw,8.6rem)}
#about .kick{font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--gold);font-size:clamp(1.2rem,3.6vw,2.6rem);letter-spacing:.02em;margin:10px 0 26px}
#about p{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.5;margin-bottom:18px;max-width:44ch}
#about .mascot{justify-self:center}
#about .mascot img{max-height:74vh;width:auto}
@media(max-width:820px){#about .grid{grid-template-columns:1fr}#about .mascot{order:-1}#about .mascot img{max-height:38vh}}

/* ---- Section 3: Field Guide ---- */
#guide{min-height:100vh;display:flex;align-items:center;padding:12vh 0 8vh}
#guide h2{font-size:clamp(2.2rem,7vw,5rem)}
#guide .sub{font-family:'Anton',sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(1.1rem,3.2vw,2.3rem);letter-spacing:.01em;margin-top:6px}
#guide .kick{font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--gold);font-size:clamp(1rem,2.8vw,2rem);margin:6px 0 26px}
#guide p{font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.5;margin-bottom:16px;max-width:70ch}
#guide .learn{font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--gold);letter-spacing:.03em;font-size:clamp(1rem,2vw,1.35rem);margin:8px 0 14px}
#guide ul{list-style:none;margin-bottom:28px}
#guide li{position:relative;padding-left:26px;margin-bottom:10px;font-size:clamp(1rem,1.5vw,1.3rem)}
#guide li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--gold)}
#guide .after{margin-top:26px}

/* ---- Section 4: Contact ---- */
#contact{min-height:100vh;display:flex;align-items:center;padding:12vh 0 8vh}
#contact .grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30vw,430px);gap:clamp(20px,4vw,60px);align-items:center;width:100%}
#contact h2{font-size:clamp(2.8rem,9vw,7rem)}
#contact .sub{font-family:'Anton',sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(1.1rem,3vw,2.2rem);margin-top:6px}
#contact .kick{font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--gold);font-size:clamp(1rem,2.6vw,1.9rem);margin:6px 0 24px}
#contact p.body{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.5;max-width:44ch;margin-bottom:30px}
#contact .lab{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:.14em;color:var(--gold);font-size:.85rem;text-transform:uppercase}
#contact .val{font-family:'Quicksand',sans-serif;font-weight:700;color:#fff;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;margin:6px 0 22px;display:inline-block}
#contact .val:hover{color:var(--gold-l)}
#contact .mascot{justify-self:center}
#contact .mascot img{max-height:74vh;width:auto}
@media(max-width:820px){#contact .grid{grid-template-columns:1fr}#contact .mascot{order:-1}#contact .mascot img{max-height:34vh}}