/* Maverick Automotive & Diesel – shared styles.
   Desktop first. ≤1023px: desktop chrome, tighter nav, 2-col footer. ≤819px: mobile layout. */

:root {
  --sand: #e7e3da; --sand-2: #e4e0d6; --sand-3: #dcd7cc; --rule: #c3bdb1;
  --ink: #16191c; --body: #3d4246; --muted: #5b6165; --muted-2: #80868b; --dim: #8b9196; --foot: #9aa0a4;
  --graphite: #2b3034; --graphite-rule: #454b50; --silver: #c9ced2; --silver-rule: #cfd3d6;
  --red: #c8442a; --red-hi: #e05a3f;
  --red-text: #b03a22; /* small red text on sand: 4.72:1 (AA). Keep --red for fills, borders and large text. */
  --oswald: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --archivo: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* Side padding for full-width blocks: 44px, growing so content never exceeds 1280px. */
  --pad: max(44px, calc(50% - 596px));
  --edge: max(0px, calc(50% - 640px));
  --nav-h: 48px;
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); /* handset, used as a mask so it takes the link's colour */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); } /* keep skip-link/focus targets out from under the sticky nav */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--sand); color: var(--ink); font: 400 16px/1.6 var(--archivo); overflow-wrap: break-word; }
main { flex: 1; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
img, svg, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(a) { color: inherit; text-underline-offset: .2em; }
:where(a:hover) { color: var(--red-text); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 60; padding: 16px 18px; background: var(--ink); color: #fff; font: 600 13px/1 var(--oswald); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }

/* ---------- type ---------- */
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); }
.label { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lead { font: 400 19px/1.55 var(--archivo); color: var(--body); }
.tag { font: 500 11px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- nav ---------- */
/* Sticky, so it must stay a direct child of <body>: inside <header> it would scroll away with it. */
.nav { position: sticky; top: 0; z-index: 50; display: flex; min-height: var(--nav-h); padding-inline: var(--edge); background: var(--graphite); border-bottom: 2px solid var(--ink); }
.nav :focus-visible { outline-color: #fff; outline-offset: -4px; }
/* Reference: uncropped 31×30 monogram box, 16px/14px margins. Ours is cropped to the art, so the whitespace moves into the padding. */
.nav-mono { flex: none; display: flex; align-items: center; padding: 0 19px 0 22px; }
.nav-mono img { height: 22px; width: auto; }
.nav-toggle { display: none; }
.nav-menu { display: flex; margin: 0; padding: 0; list-style: none; }
.nav-menu a { display: flex; align-items: center; height: 100%; padding: 0 22px; border-right: 1px solid var(--graphite-rule); font: 600 13px/1 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); text-decoration: none; white-space: nowrap; }
.nav-menu a:hover, .nav-menu [aria-current="page"] { color: #fff; }
.nav-menu [aria-current="page"] { background: var(--red); }
.nav-call { margin-left: auto; display: flex; align-items: center; justify-content: center; padding: 15px 24px; background: var(--ink); color: #fff; border-left: 1px solid var(--silver-rule); font: 700 13px/1 var(--oswald); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav-call:hover { background: var(--red); color: #fff; }

/* ---------- masthead + info strip ---------- */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 31px var(--pad) 37px; }
.mast-addr { font: 500 15px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
.mast-logo img { height: clamp(120px, 14vw, 164px); width: auto; } /* full size from ~1170px; shrinks so the phone number still fits beside it at 820–1170 */
.mast-hours { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font: 500 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--body); white-space: nowrap; }
.mast-hours a { font: 700 clamp(18px, 2.35vw, 26px)/1 var(--oswald); letter-spacing: .06em; color: var(--red-text); text-decoration: none; }
.mast-hours a:hover { color: var(--ink); }

.strip { display: grid; grid-template-columns: 1.45fr 1fr 1fr; margin: 0; padding: 0 var(--edge); list-style: none; background: var(--graphite); border-block: 1px solid var(--silver-rule); }
.strip li { display: flex; align-items: baseline; gap: 12px; padding: 15px 44px; border-right: 1px solid var(--graphite-rule); }
.strip li:last-child { border-right: 0; }
.strip strong { font: 700 15px/1 var(--oswald); letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.strip span { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.strip .strip-short { display: none; }

/* ---------- page header (eyebrow + headline + lead) ---------- */
.page-head { padding: 52px var(--pad) 34px; border-bottom: 1px solid var(--rule); }
.page-head h1 { margin-top: 12px; font: 700 var(--h1, 76px)/.9 var(--oswald); text-transform: uppercase; }
/* Desktop reference kickers are inline spans in a 16px Archivo line box: glyphs 5px lower, h1 6px lower. */
.page-head .eyebrow { padding: 5px 0 1px; }
.page-head .lead { margin-top: 22px; max-width: 620px; }
.section { padding: 44px var(--pad); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 30px 19px; background: var(--ink); color: var(--sand); border: 0; border-top: 2px solid var(--silver-rule); border-radius: 0; font: 600 14px/1 var(--oswald); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--red); color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-line { padding: 17px 28px; background: none; color: var(--ink); border: 2px solid var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--sand); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.form .btn { padding: 16px 32px 18px; }

/* ---------- numbered card grid ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.card { display: flex; flex-direction: column; gap: 12px; padding: 32px 34px; background: var(--sand); }
.card h2, .card h3 { font: 600 26px/1.1 var(--oswald); letter-spacing: .04em; text-transform: uppercase; }
.card p:not([class]) { font-size: 16px; line-height: 1.6; color: var(--body); }

/* ---------- label/value list (contact + booking info) ---------- */
.info { display: flex; flex-direction: column; gap: 24px; }
.info div { display: flex; flex-direction: column; gap: 7px; }
.info dt { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.info dd { font: 400 17px/1.5 var(--archivo); }
/* Block links keep the reference line boxes; padding/-margin gives 44px tap targets without moving anything. */
.info a { display: block; width: fit-content; padding-block: 11px; margin-block: -11px; text-decoration: none; }
.info .muted { line-height: 1.4; }
.big-phone { font: 700 26px/1 var(--oswald); color: var(--red); text-decoration: none; }
.big-phone:hover { color: var(--red-text); }

/* ---------- phone icon: beside every printed phone number, so it reads as a phone number at a glance ---------- */
.mast-hours a::before, .big-phone::before, .cta-phone::before, .foot-contact a[href^="tel:"]::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -.16em; background: currentColor; -webkit-mask: var(--ico-phone) center / contain no-repeat; mask: var(--ico-phone) center / contain no-repeat; }

/* ---------- striped photo/map placeholder ---------- */
.ph { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 20px; background: repeating-linear-gradient(135deg, var(--sand-3) 0 12px, var(--sand-2) 12px 24px); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--body); text-align: center; }

/* ---------- forms (reference boxes are content-box: 48 + 2px border = 50) ---------- */
.form { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.form > * { max-width: 100%; }
/* 2 columns only while "Vehicle (year / make / model) *" fits on one line, so paired inputs stay level. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; width: 100%; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .chips legend { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.req { color: var(--red-text); }
.field input, .field select, .field textarea { width: 100%; height: 50px; padding: 0 14px; background: linear-gradient(180deg, #f7f8f9, #eceef0); border: 1px solid #b8bdc1; border-radius: 0; font-size: 16px; }
.field textarea { height: 122px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field :is(input, select, textarea):focus { border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field-error { font: 500 13px/1.4 var(--archivo); color: var(--red-text); }
.field-error:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.chips legend { float: left; width: 100%; padding: 0; }
.chip { position: relative; display: flex; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; padding: 12px 18px; border: 1px solid var(--ink); font: 600 12px/1 var(--oswald); letter-spacing: .12em; text-transform: uppercase; }
.chip:hover span { border-color: var(--red); }
.chip input:checked + span { background: var(--ink); color: var(--sand); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.form-error { width: 100%; padding: 14px 16px; border: 1px solid var(--red); border-left-width: 4px; font: 500 15px/1.5 var(--archivo); color: var(--red-text); }
.form-error a { font-weight: 700; }
.form-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.form-error a, .form-note a { padding-block: 15px; } /* 44px+ tap target; inline padding doesn't move the line */
.form-success { padding: 28px 30px; background: var(--ink); color: var(--sand); border-top: 3px solid var(--silver-rule); font: 600 22px/1.25 var(--oswald); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- red CTA band ---------- */
.cta { display: flex; align-items: center; gap: 32px; padding: 36px var(--pad); background: var(--red); color: #fff; border-top: 3px solid var(--silver-rule); }
.cta img { height: 39px; width: auto; margin: 0 10px; opacity: .9; }
.cta h2 { flex: 1; font: 700 40px/1 var(--oswald); text-transform: uppercase; }
.cta-phone { padding: 18px 32px; background: var(--ink); color: #fff; font: 700 22px/1 var(--oswald); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.cta-phone:hover { background: var(--graphite); color: #fff; }
.cta :focus-visible { outline-color: #fff; }

/* ---------- footer ---------- */
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; padding: 44px var(--pad); background: var(--ink); color: var(--foot); border-top: 3px solid transparent; border-image: linear-gradient(180deg, #f4f5f6 0%, #dcdfe1 38%, #bfc4c8 52%, #d7dadd 70%, #eef0f1 100%) 1; font: 400 14px/1.7 var(--archivo); }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-brand img { height: 52px; width: auto; }
.foot-brand p { max-width: 260px; }
.foot .label { line-height: 2; color: var(--muted-2); }
.foot-visit span { display: none; } /* comma for the one-line mobile address */
.foot a { display: block; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot :focus-visible { outline-color: #fff; }

/* ---------- below 1200: info strip cells stack (label under value), equal columns ---------- */
@media (max-width: 1199.98px) {
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip li { flex-direction: column; align-items: flex-start; gap: 6px; padding-inline: 24px; }
}

/* ---------- 820–1023: desktop chrome, tighter ---------- */
@media (max-width: 1023.98px) {
  .nav-menu a { padding-inline: 14px; }
  .nav-call { padding-inline: 16px; }
  .foot { grid-template-columns: 1fr 1fr; }
}

/* ---------- mobile < 820 ---------- */
@media (max-width: 819.98px) {
  :root { --pad: 20px; --nav-h: 54px; }

  .nav { display: grid; grid-template-columns: 1fr 1fr; padding: 0; border-bottom: 0; }
  .nav-mono { display: none; } /* mobile bar is the 50/50 Menu / Call split */
  .nav-toggle, .nav-call { height: 54px; border: 0; border-bottom: 2px solid var(--ink); }
  .nav-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; background: none; border-right: 1px solid var(--graphite-rule); font: 600 13px/1 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); cursor: pointer; }
  .nav-toggle:hover { color: #fff; }
  .burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: currentColor; }
  .burger { position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; }
  .burger::after { top: 6px; }
  .nav-call { margin: 0; padding: 0; background: var(--red); }
  .nav-menu { display: none; grid-column: 1 / -1; order: 1; flex-direction: column; border-bottom: 1px solid var(--silver-rule); }
  .nav-toggle[aria-expanded="true"] ~ .nav-menu { display: flex; }
  .nav-menu a { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 20px; border-right: 0; border-bottom: 1px solid var(--graphite-rule); font-size: 15px; }
  .nav-menu a::after { content: "→" / ""; font: 500 12px/1 var(--mono); }

  .masthead { display: flex; justify-content: center; padding: 17px 20px 18px; }
  .mast-addr, .mast-hours { display: none; }
  .mast-logo img { height: 84px; }

  .strip { grid-template-columns: 1fr 1fr; padding: 0; }
  .strip li { padding: 13px 20px; }
  .strip li:nth-child(2) { border-right: 0; }
  .strip li:last-child, .strip .strip-long { display: none; }
  .strip .strip-short { display: inline; }
  .strip strong { font-size: 14px; letter-spacing: .08em; white-space: normal; }

  .page-head { padding-block: 36px 30px; }
  .page-head .eyebrow { padding: 0; }
  .page-head h1 { margin-top: 18px; font-size: var(--h1-m, 56px); }
  .page-head .lead { margin-top: 18px; }
  .lead { font-size: 17px; }
  .section { padding-block: 28px 32px; }

  .btn, .form .btn { display: flex; width: 100%; min-height: 56px; padding-block: 0; font-size: 15px; }
  .btn-line { min-height: 58px; }
  .btn-row { flex-direction: column; gap: 10px; }

  .cards { grid-template-columns: 1fr; }
  .card { gap: 10px; padding: 24px 22px; }
  .card h2, .card h3 { font-size: 22px; line-height: 1.15; }

  .big-phone { font-size: 24px; }

  .form { gap: 18px; }
  .fields { grid-template-columns: 1fr; }
  .field input, .field select { height: 54px; }
  .chips { gap: 8px; }
  .chips legend { padding-bottom: 2px; }
  .chip span { min-height: 44px; padding: 0 14px; }

  .cta { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 28px; }
  .cta img { display: none; }
  .cta h2 { font-size: 32px; }
  .cta-phone { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0; font-size: 18px; }

  .foot { display: flex; flex-direction: column; gap: 22px; padding-block: 30px 34px; font-size: 15px; line-height: 1.6; }
  .foot-brand img { height: 46px; }
  .foot-contact { order: 1; }
  .foot-visit span { display: inline; }
  .foot-visit br { display: none; }
  .foot a { padding-block: 10px; }
}