:root {
    /* Colors */
    --primary: #111111;       /* Jet Black */
    --primary-light: #333333; /* Dark Gray */
    --primary-dark: #000000;  /* Pure Black */
    --secondary: #E0E0E0;     /* Metallic Silver */
    --tertiary: #D4AF37;      /* Luxury Gold Accent */
    --tertiary-light: #ddc062;
    --tertiary-dark: #af8f25;
    --quaternary: #d70000;    /* Vivid Red Accent */
    --quaternary-light: #ff0202;
    --quaternary-dark: #ac0000;
    --text-clr: #000000;
    --dark-gray: #333333;
    --gray: #B0B0B0;
    --light-gray: #F2F2F2;
/* Font */
    --ff:'Figtree', sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --big: 1.25rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff);
    --small: 0.75rem/2em var(--ff);

    /* Spacing */
    font-size: 16px;
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.5rem;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
main {
    padding-top: 0;
}
body {
    font-family: var(--ff);
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main { 
    flex: 1;
}
/* Hero */
.background-image {
    width: 100%;
    margin-top: 5rem;
}
.background-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}
/* Ceramic Coating Upsell Page */

.ceramicHero {
    padding: 5.2rem 1.5rem 3.6rem;
    background: linear-gradient(135deg,#0c0c0c 0%,#050505 65%);
    border-bottom:1px solid #171717;
}
.ceramicHero-inner {
    max-width:1050px;
    margin:0 auto;
    text-align:center;
}
.ceramicHero h1 {
    font-size: clamp(2.5rem,6vw,3.4rem);
    margin:0 0 1rem;
    letter-spacing:.5px;
    color:var(--secondary);
}
.ceramicHero-lead {
    max-width:860px;
    margin:0 auto 1.9rem;
    font-size:1.05rem;
    line-height:1.55;
    color:var(--secondary);
    opacity:.85;
}
.ceramicHero-cta {
    display:inline-block;
    background:var(--tertiary);
    color:var(--primary-dark);
    font-weight:700;
    padding:.95rem 2.3rem;
    border-radius:40px;
    text-decoration:none;
    letter-spacing:.5px;
    border:1px solid var(--tertiary-dark);
    box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
    transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
}
.ceramicHero-cta:hover {
    background:var(--quaternary);
    color:var(--secondary);
    transform:translateY(-4px);
    box-shadow:0 18px 42px -18px rgba(0,0,0,.75);
}
.ceramicHero-note {
    margin:.9rem 0 0;
    font-size:.7rem;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.5;
}

/* Sections shared */
.sectionTitle {
    text-align: center;
    font-size: clamp(2rem, 4.5vw, 2.7rem);
    margin: 0 0 1rem;
    letter-spacing: .5px;
    color: var(--secondary);
}
.sectionLead {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.3rem;
    font-size: 1rem;
    line-height: 1.55;
    opacity: .85;
    color: var(--secondary);
}

/* Benefits */
.ceramicBenefits {
    padding:3.8rem 1.5rem 3.5rem;
    background:#090909;
    border-bottom:1px solid #161616;
}
.benefitsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    max-width: 1150px;
    margin: 0 auto;
}
.benefitCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.35rem 1.1rem 1.55rem;
    transition:border-color .4s ease,transform .4s ease;
}
.benefitCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.benefitCard h3 {
    margin:0 0 .55rem;
    font-size:1.05rem;
    color:var(--tertiary);
    letter-spacing:.4px;
}
.benefitCard p {
    margin:0;
    font-size:.82rem;
    line-height:1.45;
    opacity:.85;
    color:var(--secondary);
}

/* Comparison */
.ceramicCompare {
    padding:3.9rem 1.5rem 3.4rem;
    background:#060606;
    border-bottom:1px solid #151515;
}
.compareTable {
    max-width:1050px;
    margin:0 auto 1.4rem;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    border:1px solid #242424;
    border-radius:14px;
    overflow:hidden;
    background:#121212;
}
.compareHead {
    display:contents;
}
.compareHead span {
    background:#191919;
    font-weight:600;
    font-size:.8rem;
    letter-spacing:.5px;
    padding:.85rem .9rem;
    text-transform:uppercase;
    color:var(--secondary);
    border-bottom:1px solid #242424;
}
.compareRow {
    display:contents;
}
.compareRow span {
    padding:.85rem .9rem;
    font-size:.75rem;
    line-height:1.4;
    border-top:1px solid #1e1e1e;
    color:var(--secondary);
    opacity:.85;
}
.compareRow span:nth-child(2),
.compareHead span:nth-child(2){
    background:#131313;
}
.compareRow span:nth-child(3),
.compareHead span:nth-child(3){
    background:#151515;
}
.compareRow span:nth-child(3){
    font-weight:600;
    color:var(--tertiary);
}
.compareNote {
    text-align:center;
    font-size:.65rem;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.5;
    margin:0;
}
/* Care */
.ceramicCare {
    padding:3.9rem 1.5rem 3.4rem;
    background:#060606;
    border-bottom:1px solid #141414;
}
.careList {
    max-width:1100px;
    margin:0 auto;
    display:grid;
    gap:1.4rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.careItem {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.25rem 1.05rem 1.4rem;
    transition:border-color .35s ease,transform .35s ease;
}
.careItem:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.careItem h3 {
    margin:0 0 .5rem;
    font-size:1.25rem;
    color:var(--tertiary);
    letter-spacing:.4px;
}
.careItem p {
    margin:0;
    font-size:1rem;
    line-height:1.45;
    opacity:.85;
    color: var(--secondary)
}

/* Dealer Pitch */
.ceramicDealer {
    padding:4rem 1.5rem 3.7rem;
    background:linear-gradient(165deg,#0d0d0d 0%,#050505 70%);
    border-bottom:1px solid #171717;
}
.dealerPitch {
    max-width:1100px;
    margin:0 auto 2.1rem;
    display:grid;
    gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.dealerPoint {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.35rem 1.1rem 1.55rem;
    transition:border-color .4s ease,transform .4s ease;
}
.dealerPoint:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.dealerPoint h3 {
    margin:0 0 .5rem;
    font-size:1.05rem;
    color:var(--tertiary);
}
.dealerPoint p {
    margin:0;
    font-size:.83rem;
    line-height:1.45;
    opacity:.85;
    color: var(--secondary);
}
.ceramicDealer .dealerCTA {
    display: block;          /* was inline-block */
    width: fit-content;
    margin: 0 auto;
}
.dealerCTA {
    display:inline-block;
    background:var(--quaternary);
    color:var(--secondary);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.5px;
    padding:.85rem 2.2rem;
    border-radius:40px;
    font-size:1rem;
    border:1px solid var(--quaternary-dark);
    box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
    transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
    margin:0 auto;
}
.ceramicDealer .dealerCTA:hover {
    background:var(--tertiary);
    color:var(--primary-dark);
    transform:translateY(-4px);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.75);
}

/* CTA */
.ceramicCTA {
    padding:3.6rem 1.5rem 4rem;
    background:#090909;
    text-align:center;
}
.ceramicCTA h2 {
    font-size:clamp(2rem,5vw,2.5rem);
    margin:0 0 .85rem;
    color:var(--secondary);
    letter-spacing:.5px;
}
.ceramicCTA p {
    margin:0 0 1.6rem;
    font-size:1rem;
    line-height:1.5;
    opacity:.85;
    color: var(--secondary);
}
.ceramicCTA-btn {
    display:inline-block;
    background:var(--tertiary);
    color:var(--primary-dark);
    font-weight:700;
    letter-spacing:.5px;
    padding:.9rem 2.2rem;
    border-radius:40px;
    font-size:1rem;
    text-decoration:none;
    border:1px solid var(--tertiary-dark);
    box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
    transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
}
.ceramicCTA-btn:hover {
    background:var(--quaternary);
    color:var(--secondary);
    transform:translateY(-4px);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.75);
}

/* Fade utility (reuse) */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.fade-in.in-view { opacity:1; transform:translateY(0); }

/* Responsive tweaks */
@media (max-width:820px){
    .ceramicHero { padding:4.4rem 1.15rem 3.2rem; }
    .ceramicBenefits,
    .ceramicCompare,
    .ceramicBundles,
    .ceramicCare,
    .ceramicDealer,
    .ceramicCTA { padding-left:1.1rem; padding-right:1.1rem; }
}
@media (max-width:560px){
    .ceramicHero-cta,
    .ceramicCTA-btn,
    .dealerCTA { width:100%; text-align:center; }
    .compareTable { font-size:.7rem; }
}
/* Gradient CTA Buttons */
.ceramicHero-cta,
.ceramicCTA-btn,
.dealerCTA {
    position: relative;
    background: linear-gradient(135deg, var(--tertiary) 0%, var(--tertiary-dark) 55%, #7a6015 100%);
    color: var(--primary-dark);
    border: 1px solid var(--tertiary-dark);
    box-shadow: 0 10px 28px -12px rgba(0,0,0,.7);
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease, background-position .6s ease;
    background-size: 140% 140%;
    background-position: 0% 50%;
}

.ceramicHero-cta:hover,
.ceramicCTA-btn:hover,
.dealerCTA:hover {
    background-position: 100% 50%;
    transform: translateY(-4px);
    box-shadow: 0 18px 46px -18px rgba(0,0,0,.8);
    color: var(--secondary);
}

/* Accent sheen */
.ceramicHero-cta::after,
.ceramicCTA-btn::after,
.dealerCTA::after {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.18) 35%,
            rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay;
    opacity:.0;
    transition: opacity .45s ease;
}
.ceramicHero-cta:hover::after,
.ceramicCTA-btn:hover::after,
.dealerCTA:hover::after {
    opacity:.7;
}

/* Active press */
.ceramicHero-cta:active,
.ceramicCTA-btn:active,
.dealerCTA:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px -14px rgba(0,0,0,.7);
}

/* Red variant (if you still want a quaternary version somewhere) */
.btn-red-gradient {
    background: linear-gradient(135deg, var(--quaternary) 0%, var(--quaternary-dark) 65%, #5a0000 100%);
    border-color: var(--quaternary-dark);
}
.btn-red-gradient:hover {
    background-position: 100% 50%;
    color: var(--secondary);
}
@media (max-width: 768px){
    .background-image { margin-top: 4.25rem; }
}
/* Mobile adjustments */
@media (max-width: 640px){
    .ceramicHero { padding:4.2rem 1.1rem 3rem; }
    .ceramicHero h1 { font-size:clamp(2.2rem,8vw,2.6rem); }
    .ceramicHero-lead { font-size:.9rem; }

    /* Why Upgrade With Ceramic -> 2 columns x 3 rows (6 items) */
    .ceramicBenefits { padding:3.2rem 1.1rem 3.2rem; }
    .benefitsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap:1.1rem;
        max-width: 560px;
    }
    .benefitCard { padding:1.05rem .9rem 1.2rem; }

    /* Optional: slightly smaller headings inside cards */
    .benefitCard h3 { font-size:.95rem; }

    /* Compare table horizontal scroll if cramped */
    .compareTable {
        display:grid;
        grid-template-columns:140px 140px 160px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* Buttons full-width already handled below 560, ensure <=640 too */
    .ceramicHero-cta,
    .ceramicCTA-btn,
    .dealerCTA { width:100%; text-align:center; }
}

/* Ultra-narrow (stack benefits if below 360px) */
@media (max-width: 360px){
    .benefitsGrid { grid-template-columns:1fr; }
}
/* ...existing code... */