/*
Theme Name: Love's Tire & Service Center
Version: 1.0.0
Text Domain: kit
*/

:root {
  --ink: #141414;
  --mute: rgba(20, 20, 20, .74);
  --quiet: rgba(20, 20, 20, .55);
  --navy: #0b2a5b;
  --blue: #1f5fbf;
  --heart: #e23b3b;
  --gold: #f6c84a;
  --pale: #eef3fb;
  --wrap: 1240px;
  --gap: 24px;
  --head: 'Big Shoulders Display', 'Impact', sans-serif;
  --body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --treadbg: repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px);
}

body { font: 400 17px/1.6 var(--body); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--head); font-weight: 900; line-height: .96; margin: 0 0 .35em; }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); color: var(--navy); }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--body); color: var(--heart); margin: 0 0 14px; }
.kicker::before { content: '\2764'; }
.fine { font-size: .9rem; color: var(--quiet); }
.link { font-weight: 700; color: var(--blue); text-underline-offset: 5px; align-self: center; }
.proto-note { margin: 0; padding: 7px var(--gap); background: var(--ink); color: #fff; font: 500 .88rem/1.3 var(--body); text-align: center; }

.masthead { background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); }
.masthead-in { max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gap); min-height: 72px; }
.brand-name { display: inline-flex; align-items: baseline; gap: 2px; font: 900 2rem/1 var(--head); color: var(--navy); letter-spacing: .02em; }
.brand-name i { font-style: normal; color: var(--heart); font-size: .8em; }
.brand-name em { margin-left: 8px; font: 600 .78rem/1 var(--body); font-style: normal; color: var(--blue); }
.nav-list a { font: 700 1rem/1 var(--body); color: var(--ink); padding: 8px 0; border-bottom: 3px solid transparent; }
.nav-list a:hover { border-color: var(--heart); }
.nav-call { font: 900 1.3rem/1 var(--head); text-decoration: none; background: var(--heart); color: #fff; padding: 12px 18px; border-radius: 4px; }
.nav-toggle { background: none; border: 2px solid var(--ink); color: var(--ink); border-radius: 4px; padding: 0 14px; font: 700 1rem var(--body); }
.top-call { display: none; }
@media (max-width: 1080px) {
  .site-nav { background: #fff; padding: 8px var(--gap) 22px; border-bottom: 4px solid var(--navy); }
  .nav-list a { font-size: 1.2rem; border-bottom: 1px solid rgba(0,0,0,.08); }
  .top-call { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 12px; background: var(--heart); color: #fff; font: 900 1.15rem/1 var(--head); text-decoration: none; border-radius: 4px; }
  .nav-toggle { margin-left: 8px; padding: 0 10px; }
}
@media (max-width: 520px) { .masthead-in { padding: 10px 12px; gap: 6px; } .brand-name { font-size: 1.6rem; } .brand-name em { display: none; } }

.btn-solid { display: inline-flex; align-items: center; min-height: 56px; padding: 0 26px; background: var(--heart); color: #fff; font: 900 1.35rem/1 var(--head); letter-spacing: .02em; text-decoration: none; border: 0; border-radius: 4px; box-shadow: 0 14px 26px -12px rgba(226,59,59,.7); cursor: pointer; }
.btn-line { display: inline-flex; align-items: center; min-height: 56px; padding: 0 22px; color: #fff; font: 900 1.35rem/1 var(--head); letter-spacing: .02em; text-decoration: none; border-radius: 4px; box-shadow: inset 0 0 0 2px #fff; background: transparent; cursor: pointer; }
.btn-line.dark { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

/* hero: a giant 30, the shop floor spinning inside the 0 */
.lv-hero { position: relative; overflow: hidden; background: var(--navy); background-image: var(--treadbg), radial-gradient(ellipse at 20% 40%, #17448c, var(--navy) 60%); color: #fff; padding-bottom: 50px; }
.ribbon { margin: 0; padding: 10px var(--gap); background: var(--gold); color: var(--navy); font: 900 1.15rem/1.2 var(--head); letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding-top: 40px; }
.thirty { display: flex; align-items: center; justify-content: center; gap: 2%; }
.three { font: 900 clamp(14rem, 30vw, 30rem)/.8 var(--head); color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.9); background: var(--treadbg); -webkit-background-clip: text; background-clip: text; text-shadow: none; margin-top: -4%; }
.zero { position: relative; width: clamp(15rem, 31vw, 31rem); aspect-ratio: .78; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 14px #141414, 0 0 0 18px rgba(255,255,255,.18), 0 40px 70px -20px rgba(0,0,0,.8); background: #000; }
.zero::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 40px 10px rgba(0,0,0,.6); }
.zero img, .zero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.logo { display: block; width: 220px; height: auto; margin: 0 0 18px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.lv-hero h1 { font-size: clamp(3rem, 5.6vw, 5.4rem); margin: 0; }
.hero-lead { margin: 18px 0 0; max-width: 28em; font-size: 1.15rem; color: rgba(255,255,255,.85); }
.beat { position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; height: 50px; }
.beat path { fill: none; stroke: var(--heart); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: beat 2.6s cubic-bezier(.6,0,.2,1) .5s forwards; filter: drop-shadow(0 0 6px rgba(226,59,59,.8)); }
@keyframes beat { to { stroke-dashoffset: 0; } }

.band { position: relative; padding: clamp(66px, 9vw, 110px) 0; overflow: hidden; }

/* tires */
.tires { background: #fff; }
.ti-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.tires p { color: var(--mute); }
.brands { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.brands span { padding: 10px 18px; border: 2px solid var(--navy); border-radius: 999px; font: 900 1.3rem/1 var(--head); color: var(--navy); letter-spacing: .03em; }
.ti-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.7); }
.js .ti-photo { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); }
.js .ti-photo.in { clip-path: inset(0 0 0 0); }

/* promise */
.promise { background: var(--heart); color: #fff; padding: clamp(54px, 7vw, 84px) 0; background-image: var(--treadbg); }
.pr-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.pr-big { margin: 0; font: 900 clamp(2.4rem, 4.8vw, 4rem)/.98 var(--head); }
.warranty { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.warranty li { padding: 14px 18px; background: rgba(0,0,0,.18); border-radius: 6px; color: rgba(255,255,255,.88); }
.warranty b { display: block; font: 900 1.6rem/1 var(--head); color: #fff; margin-bottom: 4px; }
.js .warranty li { opacity: 0; transform: translateX(40px); transition: opacity .6s, transform .7s cubic-bezier(.2,1.2,.4,1); }
.js .warranty li:nth-child(2) { transition-delay: .12s; } .js .warranty li:nth-child(3) { transition-delay: .24s; }
.js .warranty.in li { opacity: 1; transform: none; }

/* services */
.services { background: var(--pale); }
.sv-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 70px); align-items: start; }
.sv-side p { color: var(--mute); }
.sv-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-top: 10px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font: 700 .98rem var(--body); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { padding: 12px 16px; background: #fff; border-radius: 6px; font: 900 1.45rem/1 var(--head); color: var(--ink); box-shadow: 0 8px 18px -12px rgba(11,42,91,.6); border-left: 4px solid var(--blue); transition: opacity .3s, transform .3s; }
.tags li.off { opacity: .14; transform: scale(.94); }

/* reviews */
.reviews { background: #fff; }
.rv-head h2 { max-width: 16em; }
.count { color: var(--heart); }
.rv-wall { columns: 3 300px; column-gap: 18px; margin-top: 30px; max-height: 1200px; overflow: hidden; position: relative; }
.rv-wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.rv-wall.open { max-height: none; } .rv-wall.open::after { display: none; }
.rv { break-inside: avoid; margin: 0 0 18px; padding: 22px 22px 18px; background: var(--pale); border-radius: 10px; box-shadow: 0 16px 30px -24px rgba(11,42,91,.6); }
.rv.big { background: var(--navy); color: #fff; }
.rv.big p { font-size: 1.15rem; color: rgba(255,255,255,.92); }
.rv.big cite { color: var(--gold); }
.rv p { margin: 0 0 10px; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.1rem; margin-bottom: 6px !important; }
.rv cite { font: 900 1.2rem var(--head); font-style: normal; color: var(--navy); }
.rv cite span { font: 500 .85rem var(--body); color: var(--quiet); margin-left: 6px; }
.rv.big cite span { color: rgba(255,255,255,.6); }
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .7s; }
.js .rv.in { opacity: 1; transform: none; }
.rv-more { text-align: center; margin-top: 24px; }

/* family */
.family { background: var(--navy); color: #fff; background-image: var(--treadbg); }
.family h2 { color: #fff; }
.family p { color: rgba(255,255,255,.85); }
.family .kicker { color: var(--gold); }
.fa-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 6vw, 70px); align-items: center; }
.fa-photo { margin: 0; background: #fff; padding: 12px 12px 18px; transform: rotate(-1.5deg); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
.fa-photo img { display: block; width: 100%; height: auto; }
.fa-photo figcaption { color: var(--quiet); font-size: .9rem; margin-top: 10px; }
.years { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 0; align-items: stretch; }
.years li { flex: 1; padding: 16px 18px; border-top: 4px solid var(--gold); }
.years li + li { border-top-color: var(--heart); }
.years b { display: block; font: 900 3rem/1 var(--head); color: #fff; }
.js .years li { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .7s; }
.js .years li + li { transition-delay: .3s; }
.js .years.in li { opacity: 1; transform: none; }

/* perks */
.perks { background: #fff; }
.pk-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 70px); align-items: center; }
.pk-photos { position: relative; min-height: 440px; }
.pk-photos img { position: absolute; width: 72%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
.pk-photos .p1 { left: 0; top: 0; } .pk-photos .p2 { right: 0; bottom: 0; border: 6px solid #fff; }
.perk-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perk-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--pale); border-radius: 8px; font-weight: 600; }
.perk-list span { font-size: 1.4rem; }
.js .perk-list li { opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--i) * .05s); }
.js .perk-list.in li { opacity: 1; transform: none; }

/* offers */
.offers { background: var(--gold); padding: 36px 0; }
.of-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.of-h { margin: 0; font: 900 1.8rem/1 var(--head); color: var(--navy); }
.offers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.offers li { padding: 10px 14px; background: #fff; border-radius: 6px; border: 2px dashed var(--navy); font-size: .9rem; color: var(--mute); }
.offers li b { display: block; font: 900 1.4rem/1 var(--head); color: var(--heart); }
.offers .fine { margin: 0; color: var(--navy); }

/* visit */
.visit { background: var(--pale); }
.vs-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.city { font: 900 1.6rem var(--head); color: var(--blue); margin: -4px 0 14px; }
.hrs { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0 0 14px; }
.hrs dt { font-weight: 700; } .hrs dd { margin: 0; color: var(--mute); }
.v-call a { font: 900 2.4rem/1 var(--head); color: var(--heart); text-decoration: none; }
.shop { margin: 20px 0 0; }
.shop img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.map { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 26px 50px -26px rgba(0,0,0,.5); }
.map iframe { display: block; width: 100%; height: 520px; border: 0; }

/* form */
.service { background: #fff; }
.rq-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.service p { color: var(--mute); }
.call-big { font: 900 2rem/1.1 var(--head); color: var(--ink) !important; }
.call-big a { color: var(--heart); text-decoration: none; }
.rq-form { background: var(--pale); padding: clamp(22px, 3vw, 34px); border-radius: 12px; border-top: 6px solid var(--heart); box-shadow: 0 26px 46px -28px rgba(11,42,91,.5); }
.kit-form label { font-weight: 700; font-size: .95rem; }
.kit-form input, .kit-form select, .kit-form textarea { border: 2px solid #c9d6ea; border-radius: 6px; padding: 10px 14px; background: #fff; color: var(--ink); }
.kit-form input:focus, .kit-form select:focus, .kit-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,95,191,.2); }
.kit-form input.touched:invalid { border-color: #b3261e; }
.form-note { padding: 12px 14px; border-radius: 6px; font-weight: 600; }
.form-note.ok { background: #e2f3e6; color: #1d5e33; }
.form-note.err { background: #fbe5e3; color: #8a1c14; }

.foot { background: var(--ink); color: rgba(255,255,255,.78); padding: 48px 0 0; border-top: 6px solid var(--heart); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot-title { font: 900 1.8rem/1 var(--head); color: #fff; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--gold); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-base { max-width: var(--wrap); margin: 36px auto 0; padding: 18px var(--gap) 26px; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
html { overflow-x: clip; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; padding-top: 26px; gap: 22px; }
  .three { font-size: 42vw; }
  .zero { width: 44vw; box-shadow: 0 0 0 8px #141414, 0 0 0 11px rgba(255,255,255,.18), 0 30px 50px -20px rgba(0,0,0,.8); }
  .ti-in, .pr-in, .sv-in, .fa-in, .pk-in, .vs-in, .rq-in { grid-template-columns: 1fr; }
  .pk-photos { min-height: 320px; }
  .perk-list { grid-template-columns: 1fr; }
  .rv-wall { max-height: 1500px; }
  .map iframe { height: 360px; }
  .foot-in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .beat path { animation: none; stroke-dashoffset: 0; }
  .js .ti-photo, .js .warranty li, .js .rv, .js .years li, .js .perk-list li { opacity: 1; transform: none; clip-path: none; }
}
.zero img, .zero video { object-position: 24% 50%; }
.zero { width: clamp(15rem, 34vw, 32rem); }
@media (max-width: 900px) { .zero { width: 62vw; } .three { font-size: 46vw; } }
.zero img, .zero video { object-position: 62% 50%; }
.zero img, .zero video { object-position: 24% 50%; }
.zero img, .zero video { object-position: 50% 54%; }
/* the 0 is the tire itself */
.zero { aspect-ratio: 1; width: clamp(15rem, 30vw, 28rem); box-shadow: 0 34px 60px -18px rgba(0,0,0,.85); background: transparent; }
.zero::after { box-shadow: inset 0 0 18px 4px rgba(0,0,0,.35); }
.zero img, .zero video { object-position: 50% 50%; transform: scale(1.01); }
@media (max-width: 900px) { .zero { width: 56vw; } }
.zero { width: clamp(15rem, 37vw, 31rem); box-shadow: 0 38px 60px -22px rgba(0,0,0,.9); }
.zero::after { display: none; }
.zero img, .zero video { transform: none; }
@media (max-width: 900px) { .zero { width: 67vw; } .three { font-size: 40vw; } }