:root {
  --red: #b40808;
  --red-dark: #780000;
  --blue: #0756a4;
  --ink: #171717;
  --paper: #f3f3f3;
  --border: #c8c8c8;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #222 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h4v4H0zm4 4h4v4H4z' fill='%23282828'/%3E%3C/svg%3E");
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; color: white; background: #111; }
.skip-link:focus { top: 1rem; }

.site-shell { width: min(1320px, calc(100% - 32px)); margin: 0 auto; background: white; box-shadow: 0 0 22px #000b; }

.utility-bar { min-height: 42px; padding: 0 18px 0 28px; color: #fff; background: linear-gradient(#c01812, #850000); display: flex; align-items: center; justify-content: space-between; font-weight: 700; text-shadow: 0 1px #500; border-bottom: 1px solid #620000; }
.utility-contact { display: flex; align-items: center; gap: 22px; }
.utility-contact a, .utility-contact span { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.utility-bar svg { width: 20px; height: 20px; fill: currentColor; }
.utility-divider { width: 1px; height: 22px; margin-right: -12px; background: #fff8; }
.utility-login { display: flex; align-items: center; gap: 7px; color: #fff; padding: 9px 0; border: 0; background: transparent; font-weight: 700; text-decoration: none; }

.brand-header { min-height: 124px; position: relative; overflow: hidden; background: linear-gradient(105deg, #fff 0, #eee 56%, #fff 100%); border-bottom: 1px solid #aaa; }
.brand { width: fit-content; height: 124px; padding-left: 34px; display: flex; align-items: center; gap: 20px; text-decoration: none; position: relative; z-index: 1; }
.brand-mark { position: relative; width: 146px; height: 96px; display: flex; justify-content: center; align-items: center; transform: skew(-5deg); color: white; font-size: 44px; letter-spacing: -10px; font-style: italic; text-shadow: 3px 3px #111; background: linear-gradient(145deg,#333 0 18%,#c31717 19% 70%,#780000 71%); border: 6px solid #d5d5d5; box-shadow: 0 0 0 3px #222, 0 5px 7px #777; clip-path: polygon(50% 0, 95% 13%, 88% 75%, 50% 100%, 12% 75%, 5% 13%); }
.brand-mark b:last-child { color: #d31010; -webkit-text-stroke: 3px white; margin-left: -3px; }
.brand-name { display: grid; line-height: .88; transform: skew(-7deg); }
.brand-name strong { font-size: clamp(2.7rem, 4.1vw, 4.15rem); color: #bd1111; letter-spacing: -3px; }
.brand-name em { font-size: clamp(2rem, 2.9vw, 3rem); justify-self: center; font-weight: 800; }
.tire-tracks { position: absolute; width: 620px; height: 70px; right: -80px; top: 30px; transform: rotate(-9deg); opacity: .055; background: repeating-linear-gradient(90deg,#111 0 30px,transparent 30px 39px), repeating-linear-gradient(0deg,transparent 0 17px,#111 17px 23px); }

.main-nav { min-height: 48px; background: linear-gradient(#383838, #111); border-top: 1px solid #4b4b4b; border-bottom: 2px solid #111; }
.main-nav ul { list-style: none; margin: 0; padding: 0 0 0 28px; display: flex; }
.main-nav a { min-width: 145px; height: 48px; padding: 0 28px; display: grid; place-items: center; color: white; text-decoration: none; text-transform: uppercase; font-family: Impact, "Arial Narrow", sans-serif; letter-spacing: .6px; font-size: 1.05rem; border-left: 1px solid #555; border-right: 1px solid #111; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.active { background: linear-gradient(#d21a15, #8b0000); }
.menu-toggle { display: none; width: 100%; padding: 12px 18px; color: white; background: none; border: 0; text-align: left; font-weight: 800; justify-content: space-between; }

.hero { min-height: 337px; position: relative; display: flex; align-items: center; background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 54%), url("/demos/assets/northstar-home-hero.png") center center / cover no-repeat; border-bottom: 1px solid #999; }
.hero-content { width: min(610px, 56%); padding: 42px 28px 36px 56px; color: white; text-shadow: 0 3px 4px #000; }
.hero .eyebrow { margin: 0 0 6px; font-size: .76rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: #eee; }
.hero h1 { margin: 0; font: 4.2rem/.9 Impact, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.hero-content > p:not(.eyebrow) { margin: 10px 0 22px; font-size: 1.35rem; font-weight: 700; font-style: italic; }
.button { min-height: 50px; display: inline-flex; align-items: center; border-radius: 4px; padding: 0 30px; text-transform: uppercase; text-decoration: none; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.35rem; letter-spacing: .7px; cursor: pointer; }
.button-primary { color: white; background: linear-gradient(#d81e18, #930300); border: 3px solid white; box-shadow: 0 0 0 2px #8d0000, 0 4px 6px #0007, inset 0 1px #ff7777; }
.button-primary:hover { background: linear-gradient(#ed2920, #aa0500); }

.coupon-grid { padding: 10px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; background: linear-gradient(#fafafa, #ededed); border-bottom: 1px solid #bbb; }
.coupon { min-height: 148px; display: flex; align-items: center; justify-content: center; gap: 24px; border: 1px dashed #8b8b8b; background: #fff; border-radius: 6px; box-shadow: inset 0 0 10px #ddd; }
.coupon-icon svg { width: 86px; height: 72px; fill: #494949; }
.coupon strong { display: block; color: #b00e0e; text-transform: uppercase; font: 3.15rem/.9 Impact, "Arial Narrow", sans-serif; letter-spacing: 1px; }
.coupon h3 { margin: 4px 0 13px; text-transform: uppercase; font: 1.55rem/1 Impact, "Arial Narrow", sans-serif; }
.print-coupon { color: var(--blue); background: none; border: 0; border-top: 1px dotted #aaa; padding: 8px 0 0; width: 100%; text-transform: uppercase; font-weight: 800; cursor: pointer; }
.print-coupon:hover { color: var(--red); }

.services-section { display: grid; grid-template-columns: minmax(0, 3.1fr) minmax(250px, 1.05fr) minmax(245px, 1.05fr); min-height: 210px; background: linear-gradient(#fff, #f0f0f0); border-bottom: 1px solid #ccc; }
.service-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.service-card { padding: 17px 10px 12px; text-align: center; border-right: 1px solid #ddd; }
.service-icon { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 8px; border-radius: 50%; color: white; background: linear-gradient(#dc2424,#a30000); font-size: 2.9rem; font-weight: 800; box-shadow: inset 0 2px #ff7777; }
.service-icon.tire { font-size: 2.3rem; }
.service-card h3, .trust-card h3, .review-card h3 { margin: 5px 0; font-family: Impact, "Arial Narrow", sans-serif; letter-spacing: .35px; }
.service-card p, .trust-card p { min-height: 49px; margin: 0 0 7px; font-size: .84rem; line-height: 1.45; }
.service-card a, .trust-card a, .review-card a, .contact-strip a { color: #ad0909; font-size: .84rem; font-weight: 800; text-decoration: none; }
.trust-card { padding: 26px 16px; display: flex; align-items: center; gap: 14px; border-right: 1px solid #ddd; }
.ase-badge { flex: 0 0 95px; width: 95px; height: 95px; display: grid; place-content: center; text-align: center; color: white; background: #0863b4; border: 6px dotted white; outline: 5px solid #0863b4; border-radius: 50%; transform: rotate(-3deg); }
.ase-badge span { font: 2rem/1 Impact, sans-serif; }
.ase-badge small { text-transform: uppercase; font-weight: 800; }
.trust-card h3 { color: #0756a4; }
.review-card { margin: 14px; padding: 10px 16px; text-align: center; background: linear-gradient(#eee,#fff); border: 1px solid #ddd; box-shadow: 0 1px 3px #bbb; }
.review-card h3 { text-transform: uppercase; }
.stars { color: #f1b500; font-size: 1.85rem; letter-spacing: 2px; }
.review-card blockquote { margin: 8px 0 3px; font: italic .9rem/1.3 Georgia, serif; }
.review-card cite { display: block; margin-bottom: 12px; font-size: .78rem; font-weight: 700; }

.contact-strip { min-height: 132px; padding: 16px 70px; display: grid; grid-template-columns: 1fr 250px 1.2fr; align-items: center; gap: 46px; background: linear-gradient(#eee,#fff); }
.contact-item { display: flex; align-items: center; gap: 20px; }
.contact-item h3 { margin: 0 0 4px; color: #9c0909; text-transform: uppercase; font: 1.08rem Impact, sans-serif; letter-spacing: .4px; }
.contact-item p { margin: 0 0 5px; font-size: .88rem; line-height: 1.4; }
.pin { position: relative; width: 42px; height: 56px; display: grid; place-items: start center; padding-top: 8px; flex: 0 0 auto; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #c11212; color: white; font-size: 1.35rem; }
.pin::first-letter { transform: rotate(45deg); }
.mini-map { height: 93px; position: relative; overflow: hidden; background: #e7e3d2; border: 1px solid #aaa; }
.mini-map::before { content: ""; position: absolute; inset: 0; opacity: .4; background: repeating-linear-gradient(25deg,transparent 0 18px,#a6a29a 19px 21px,transparent 22px 42px), repeating-linear-gradient(110deg,transparent 0 29px,#aaa 30px 32px,transparent 33px 61px); }
.mini-map .road { position: absolute; background: #edbd38; border: 2px solid #fff; width: 130%; height: 13px; top: 48%; left: -15%; transform: rotate(-9deg); }
.mini-map .road-b { transform: rotate(72deg); background: #ddd; }
.mini-map span { position: absolute; z-index: 1; left: 53%; top: 30%; color: #c11212; font-size: 2rem; text-shadow: 0 1px white; }
.clock { font-size: 4.4rem; line-height: 1; }
.hours dl { display: grid; grid-template-columns: 130px 1fr; margin: 0; font-size: .86rem; line-height: 1.35; }
.hours dt, .hours dd { margin: 0; }

footer { min-height: 58px; padding: 0 24px; display: flex; align-items: center; gap: 20px; color: #eee; background: linear-gradient(#2d2d2d,#171717); font-size: .78rem; }
footer nav { display: flex; }
footer nav a { padding: 0 18px; text-decoration: none; border-left: 1px solid #aaa; }
.socials { margin-left: auto; display: flex; gap: 12px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: #2359a3; text-decoration: none; font: bold 1.2rem Georgia, serif; }
.socials a:nth-child(2) { background: #2daae1; }
.socials a:nth-child(3) { background: #d34836; font-size: .85rem; }

.login-modal { width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; border: 0; background: transparent; }
.login-modal::backdrop { background: #111c; }
.login-modal[open] { display: grid; place-items: center; }
.login-card { width: min(470px, calc(100% - 30px)); position: relative; border: 1px solid #666; border-top: 7px solid var(--red); border-radius: 3px; background: linear-gradient(#fff,#ededed); box-shadow: 0 14px 50px #000; }
.login-brand { display: flex; align-items: center; gap: 18px; padding: 18px 28px; color: white; background: linear-gradient(#3a3a3a,#171717); text-transform: uppercase; }
.login-brand > span { width: 52px; height: 46px; display: grid; place-items: center; border: 2px solid white; background: linear-gradient(145deg,#c51c17,#780000); box-shadow: 0 2px 3px #000; font-size: 17px; font-style: italic; font-weight: 800; }
.login-brand strong,.login-brand small { display: block; }
.login-brand strong { font-size: 20px; font-style: italic; }
.login-brand small { margin-top: 3px; color: #ddd; font-size: 10px; letter-spacing: 2px; }
.login-content { padding: 27px 32px 25px; }
.login-content h2 { margin: 0; font: 2.15rem/1 Impact,"Arial Narrow",Arial,sans-serif; text-transform: uppercase; }
.login-content > p:not(.login-error) { margin: 8px 0 18px; color: #555; font-size: .9rem; }
.login-content label { display: grid; gap: 6px; margin-top: 15px; color: #333; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.login-content input { width: 100%; padding: 12px; border: 1px solid #999; border-radius: 2px; background: white; box-shadow: inset 0 1px 2px #ddd; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.login-content input:focus { outline: 2px solid #b4080830; border-color: var(--red); }
.login-error { min-height: 20px; margin: 7px 0 0; color: #a60000; font-size: .78rem; }
.login-submit { width: 100%; min-height: 48px; border: 1px solid #760000; border-radius: 3px; color: white; background: linear-gradient(#cf211b,#8c0000); box-shadow: inset 0 1px #f47772,0 2px 3px #aaa; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.login-submit:disabled { cursor: wait; opacity: .7; }
.account-links { display: flex; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ccc; font-size: .78rem; }
.account-links a { color: var(--blue); }
.login-close { position: absolute; z-index: 1; top: 9px; right: 12px; border: 0; color: #ddd; background: transparent; font-size: 1.8rem; cursor: pointer; }

@media (max-width: 1100px) {
  .site-shell { width: 100%; }
  .main-nav a { min-width: 0; }
  .coupon { gap: 10px; }
  .coupon strong { font-size: 2.35rem; }
  .coupon-icon svg { width: 60px; }
  .services-section { grid-template-columns: 1fr 1fr; }
  .service-list { grid-column: 1 / -1; }
  .contact-strip { padding-inline: 30px; gap: 24px; }
}

@media (max-width: 820px) {
  .utility-bar { padding: 0 12px; font-size: .78rem; }
  .utility-contact .utility-divider, .utility-contact span, .weekend { display: none; }
  .brand-header, .brand { height: 88px; min-height: 88px; }
  .brand { padding-left: 14px; gap: 12px; }
  .brand-mark { width: 86px; height: 65px; font-size: 27px; border-width: 4px; }
  .brand-name strong { font-size: clamp(1.8rem, 8vw, 2.7rem); letter-spacing: -2px; }
  .brand-name em { font-size: clamp(1.25rem, 6vw, 2rem); }
  .menu-toggle { display: flex; }
  .main-nav ul { display: none; padding: 0; }
  .main-nav.open ul { display: block; }
  .main-nav a { height: 44px; justify-content: start; border-bottom: 1px solid #444; }
  .hero { min-height: 430px; align-items: end; background-position: 62% center; }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#000 0,transparent 72%); }
  .hero-content { width: 100%; position: relative; padding: 28px 20px; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.2rem); }
  .hero-content > p:not(.eyebrow) { font-size: 1rem; }
  .coupon-grid { grid-template-columns: 1fr; }
  .coupon { min-height: 125px; }
  .services-section { display: block; }
  .service-list { grid-template-columns: 1fr 1fr; }
  .service-card { border-bottom: 1px solid #ddd; }
  .trust-card { border-bottom: 1px solid #ddd; }
  .contact-strip { grid-template-columns: 1fr; padding: 28px; }
  .mini-map { order: 3; }
  footer { padding: 18px; flex-wrap: wrap; }
  footer p { width: 100%; }
  footer nav a:first-child { padding-left: 0; border-left: 0; }
  .socials { margin-left: 0; }
}

@media (max-width: 450px) {
  .utility-contact { gap: 8px; }
  .utility-login { font-size: .72rem; }
  .service-list { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media print {
  body * { visibility: hidden; }
  .coupon.printing, .coupon.printing * { visibility: visible; }
  .coupon.printing { position: absolute; left: 0; top: 0; width: 100%; min-height: 260px; border: 3px dashed #333; }
  .print-coupon { display: none; }
}

@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }