/* Landing page: brighter, easier-to-read gold text, and a solid black highlights bar under the hero. */
:root{--gold:#f5cf6a}
.eyebrow,.face .hint{text-shadow:0 0 14px #f5cf6a40}
h2 span{background-image:linear-gradient(90deg,#ffe7a3,#f5cf6a 55%,#e0ac3a)}
.hero h1 span{background-image:linear-gradient(90deg,#ffe7a3,#f5cf6a 40%,#fff6d8 50%,#f5cf6a 60%,#e0ac3a)}
/* Daylight mode flips the page, so these source shades come out as a rich, deep gold on the white page
   instead of the muddy brown the old gold turned into. */
html[data-theme=day]{--gold:#cfaa5c}
html[data-theme=day] :is(.eyebrow,.face .hint){text-shadow:none}
html[data-theme=day] h2 span{background-image:linear-gradient(90deg,#dcbb70,#cfaa5c 55%,#c9a14e)}

/* Highlights bar: solid black with a gold frame, white headings and gold sub-lines */
.trust{background:linear-gradient(160deg,#0b0c0f,#000);box-shadow:0 22px 60px #000b,0 0 0 1px #f5cf6a55,0 0 30px #f5cf6a26,inset 0 1px 0 #ffffff14}
.trust:before{background:linear-gradient(120deg,#ffe7a3,#f5cf6a 35%,#c9952e 65%,#ffe7a3)}
.t-item+.t-item{border-left-color:#f5cf6a33}
.t-item:nth-child(n+3){border-top-color:#f5cf6a33}
.t-item b{color:#fff;font-weight:800}
.t-item small{color:#f5cf6a;font-weight:800;text-shadow:0 0 12px #f5cf6a40}
/* Stays black with white and gold text in daylight mode too, so it pops against the light page */
html[data-theme=day] .trust{filter:invert(1) hue-rotate(180deg)}

/* Daylight hero: the same supercar shot in daytime, under a soft white fade so the dark headline and copy read cleanly.
   (The page filter turns the dark night fade into white.) */
html[data-theme=day] .hero-bg{background-image:url(/images/hero-am-supercar-day.jpg)}
html[data-theme=day] .hero:after{background:linear-gradient(90deg,#050608f5 0%,#050608d9 38%,#05060866 64%,transparent 82%),linear-gradient(0deg,var(--bg) 0%,transparent 26%)}
html[data-theme=day] .hero h1 span{background-image:linear-gradient(90deg,#dcbb70,#cfaa5c 40%,#e8c878 50%,#cfaa5c 60%,#c9a14e)}
/* The copy under "Your Drive. Your Future." sits on its own soft panel so it stays crisp over the bright photo,
   in larger, heavier type that is easy to read for everyone. */
html[data-theme=day] .hero p{color:#fff;text-shadow:none;background:#050608e6;box-shadow:0 10px 30px #0006}
html[data-theme=day] .hero .eyebrow{display:inline-block;padding:7px 12px;border-radius:10px;background:#050608e0;text-shadow:none}

/* Hero copy, both views: bigger, bolder, white, on a panel so it never fights the photo behind it */
.hero p{max-width:640px;padding:16px 20px;border-radius:16px;background:#050608b3;color:#fff;font-size:clamp(18px,1.8vw,21px);font-weight:600;line-height:1.55;text-shadow:0 1px 3px #000;backdrop-filter:blur(3px)}
@media(max-width:640px){.hero p{padding:14px 16px}}

/* "Canada's #1 Auto Broker" badge sits up in the top right corner of the hero on every screen, and the hero text
   always starts below it so the two never overlap */
.hero .no1{top:16px;right:max(16px,calc((100% - 1180px)/2));left:auto}
.hero{padding-top:136px}
@media(max-width:760px){
.hero .no1{top:10px;right:10px;left:auto;padding:6px 14px 6px 6px}
.hero{padding-top:96px}
}
@media(max-width:380px){.hero .no1-txt b{font-size:16px}.hero .no1-txt small{letter-spacing:.24em}}