/* Denny's Valet: the page's own tokens and the few rules the kit lacks.
   Palette from start.mjs brand (Deep Gold #DCA842, Midnight Charcoal #1C1D1F, Classic White, Deep Shadow #000000).
   Gold text sits only on charcoal or black. */
/* self-hosted fonts (latin subset; SIL Open Font License 1.1, see credits.html): Anton for headlines, Plus Jakarta Sans (variable, 400 to 600) for text */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/anton-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }

:root {
  --p-bg: #1c1d1f; --p-surface: #000000; --p-ink: #ffffff; --p-muted: #909091;
  --p-accent: #dca842; --p-accent-ink: #1c1d1f; --p-action: #dca842; --p-action-ink: #1c1d1f;
  --p-inv-bg: #ffffff; --p-inv-surface: #ededed; --p-inv-ink: #1c1d1f; --p-inv-muted: #696a6b;
  --p-inv-accent: #1c1d1f; --p-inv-accent-ink: #ffffff; --p-inv-action: #1c1d1f; --p-inv-action-ink: #ffffff;
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-text: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --display-weight: 400; --display-stretch: 110%; --ly-scale: 0.9;
  /* brand: bold condensed uppercase headlines, tracked +1.5 to 2px */
  --display-tracking: 1.5px; --display-tracking-xl: 2px;
  color-scheme: dark;
}
body { line-height: 1.6; }
h1, h2, h3, .footer__address { text-transform: uppercase; }

/* the client's logo (assets/img/logo-*.webp and .png, trimmed from assets/brand/logo-transparent.png) */
.nav__logo picture { display: block; }
.nav__logo img { display: block; width: auto; height: 48px; }
@media (max-width: 639px) { .nav__logo img { height: 42px; } }
/* at 320 the logo, the bar's button and the menu button share 288px: the logo steps down */
@media (max-width: 359px) { .nav__logo img { height: 34px; } }
.footer__logo { display: inline-block; }
.footer__logo img { display: block; width: 200px; height: auto; }

/* a Deep Gold ground: charcoal words and rules on #DCA842 (8:1) */
.ground-gold {
  --bg: #dca842; --surface: #c9962f; --ink: #1c1d1f; --muted: #1c1d1f; --accent: #1c1d1f; --accent-ink: #dca842; --card: #1c1d1f;
  --action: #1c1d1f; --action-ink: #ffffff; --line: rgb(28 29 31 / .28); --line-strong: rgb(28 29 31 / .55);
  background: var(--bg); color: var(--ink);
}

/* eyebrows: gold small caps over each section's heading */
.eyebrow { font: 600 13px/1 var(--font-text); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
/* below 1280px: a .fill block never shrinks below its own content, so a split's words never run
   out of their section; the section grows instead and its photograph keeps the kit's 200px or more */
@media (max-width: 1279px) { main > .section > .wrap > .grid.fill { flex: 1 0 auto; } }

/* sections that stack their content (cards, steps, facts) take the room they need, never less than a screen */
#services, #booking, #team { --hm: 1; }
/* a wide screen: each section's main block takes what the screen leaves under the heading, so the content runs from the h2 down to the
   section's foot and every gap between two sections is the same (the top padding plus the bottom padding) */
@media (min-width: 1280px) {
  #services .svc-grid { align-self: stretch; grid-auto-rows: 1fr; }
}
@media (max-width: 639px) {
  #quote { --hm: 2; }
  #quote > .wrap > .grid { flex: 1 0 auto; }
  #quote > .wrap > .grid { grid-template-rows: auto 1fr; }
  #quote .request-form { align-self: stretch; grid-template-rows: repeat(10, auto) 1fr auto auto; }
  #quote .request-form .field--msg { display: flex; flex-direction: column; }
  #quote .request-form .field--msg textarea { flex: 1 1 auto; }
}

/* the hero: the logo is the skyline. Charcoal ground, the logo large, then the headline, a short gold rule, the lead, the buttons */
.hero--brand > .wrap > .hero-text { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero--brand .hero__text { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__logo { display: block; width: min(760px, 88vw, 76svh); }
.hero__logo img { display: block; width: 100%; height: auto; }
.hero--brand .hero__text > * + * { margin-top: var(--s-4); }
.hero--brand h1 { font-size: clamp(36px, 2.6vw + 24px, 60px); line-height: 1.05; max-width: 22ch; }
.hero--brand h1::after { content: ""; display: block; width: 72px; height: 4px; margin: var(--s-4) auto 0; background: var(--p-accent); }
.hero--brand .hero__lead { max-width: 48ch; }
.hero--brand .hero__text > .btn-row { margin-top: var(--s-5); justify-content: center; }
@media (max-width: 639px) {
  /* a phone: the words sit low on the screen, the way the section after it starts: the gap between the two screens matches the others */
  .hero--brand > .wrap > .hero-text { justify-content: flex-end; }
  .hero--brand .hero__text > * + * { margin-top: var(--s-5); } .hero--brand .hero__text > .btn-row { margin-top: var(--s-6); }
}
/* the Call button keeps its outlined box at every width (the kit turns it into an underlined link under 640px); on a phone it runs
   full width under the primary button */
.btn-row > .btn--secondary { min-height: 44px; }
@media (max-width: 639px) {
  .btn-row > .btn--secondary { background: var(--bg); border-color: var(--line-strong); text-decoration: none; width: 100%; }
}

/* services: six cards, dark surface, thin gold top border, a fleur-de-lis mark, the title in condensed caps */
/* the cards fill the right column of the split, two across; the heading and a photograph sit on the left */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.svc-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--s-6); background: var(--p-bg);
  border: 1px solid var(--line); border-top: 3px solid var(--p-accent); border-radius: var(--r-md);
  transition: transform .2s ease; }
.svc-card--derby { border-color: var(--p-accent); }
.svc-mark { display: block; width: 29px; height: 32px; }
.svc-card h3 { font: var(--display-weight) clamp(22px, .6vw + 18px, 28px)/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.svc-card p { color: var(--muted); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .svc-card:hover { transform: translateY(-2px); } }
/* a phone: compact cards, the fleur mark inline left of the title */
@media (max-width: 639px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .svc-card { grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1); padding: var(--s-3) var(--s-4); border-top-width: 2px; }
  .svc-mark { width: 22px; height: 24px; grid-row: 1; grid-column: 1; margin-top: 1px; }
  .svc-card h3 { grid-row: 1; grid-column: 2; font-size: 20px; }
  .svc-card p { grid-row: 2; grid-column: 2; font-size: var(--t-small); line-height: 1.45; }
}

/* booking: three steps one under the other in the left column, a big gold numeral left of each step's words */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-5); align-content: start;
  padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.step__num { grid-row: span 2; font: var(--display-weight) clamp(34px, .5vw + 30px, 38px)/1 var(--font-display); letter-spacing: var(--display-tracking);
  color: var(--p-accent); margin: 0; }
.step h3, .step p { grid-column: 2; }
.step h3 { font: var(--display-weight) clamp(24px, .8vw + 18px, 30px)/1.1 var(--font-display); letter-spacing: var(--display-tracking); margin-bottom: var(--s-3); }
.step p { color: #b4b4b6; max-width: 44ch; font-size: var(--t-lead); line-height: 1.5; }

/* the stand-in photographs. Services and staffing: a picture under the heading takes what the left column leaves;
   stacked on a tablet or a phone it is a square. Booking: the split's picture runs the row's height, at least 72vw tall when stacked */
.col-photo { min-height: 200px; }
@media (max-width: 1023px) { .col-photo { aspect-ratio: 1; } #booking .grid.fill > .frame--fill { min-height: min(72vw, 560px); } }
@media (min-width: 1024px) { .split-col > .col-photo { flex: 1 1 auto; } #staffing .split-col > .col-photo { min-height: 320px; } }
/* a tablet held upright (640-1023): services takes two screens, its cards stretching to the section's foot. Booking and
   staffing take one: the picture takes what the words leave (200px at least), and the estimator sits open on the
   section's ground, its words on the container's left line */
@media (min-width: 640px) and (max-width: 1023px) {
  #services { --h: 2; }
  :is(#services, #booking) > .wrap > .grid.fill { grid-template-rows: auto minmax(0, 1fr); }
  #services .svc-grid { align-self: stretch; grid-auto-rows: 1fr; }
  #booking .grid.fill > .frame--fill { min-height: 200px; align-self: stretch; }
  #staffing > .wrap > .grid.fill { grid-template-rows: minmax(0, 1fr) auto; }
  #staffing .staff-col { align-self: stretch; }
  #staffing .staff-col > .col-photo { aspect-ratio: auto; flex: 1 1 0; min-height: 200px; }
  #staffing .estimator { gap: var(--s-5); padding: 0; background: none; border: 0; border-radius: 0; }
  #staffing .est-result { border-top: 0; padding-top: 0; }
  #staffing .seg { gap: var(--s-6); }
  #staffing .seg label { padding: 0; border: 0; }
  /* booking: the numeral sits on its title's line, the words under both start on the container's left line */
  #booking .step { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  #booking .step__num { grid-row: 1; }
  #booking .step p { grid-column: 1 / -1; }
  /* quote: the heading on the left half, the note and the contact lines on the right half (column 7), so the
     section and its form fit one screen at 768x1024 */
  #quote .span-5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter, 24px); align-items: start; }
  #quote .span-5 > .section-head { grid-row: 1 / span 2; margin-bottom: 0; }
  #quote .span-5 > :not(.section-head) { grid-column: 2; }
  #quote .request-form { column-gap: var(--gutter, 24px); }
  /* the form runs down to the section's foot, the message box taking the room that is left */
  #quote > .wrap > .grid { flex: 1 0 auto; grid-template-rows: auto minmax(0, 1fr); }
  #quote .request-form { align-self: stretch; grid-template-rows: repeat(5, auto) 1fr auto auto; }
  #quote .request-form .field--msg { display: flex; flex-direction: column; }
  #quote .request-form .field--msg textarea { flex: 1 1 auto; }  footer.closing .closing__links > .grid { row-gap: var(--s-6); }
}
/* a wide screen: the fleur mark sits left of each card's title, as on a phone, so six cards fit beside the heading */
@media (min-width: 1280px) {
  #services .svc-card { grid-template-columns: 29px minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-2); padding: var(--s-4) var(--s-5); }
  #services .svc-mark { grid-row: 1; grid-column: 1; margin-top: 2px; }
  #services .svc-card h3 { grid-row: 1; grid-column: 2; }
  #services .svc-card p { grid-row: 2; grid-column: 2; }
}

/* the uniform: no photograph. The lead on the left, the three facts (gold label, white value) on the right, the fleur-de-lis a large faint
   watermark behind them. The split is the page's 6 + 6 (a .grid: the right column starts at x 732 and the stats sit on that line) */
.team-grid { position: relative; z-index: 1; }
.team-grid .section-head { margin-bottom: 0; }
.team-mark { position: absolute; z-index: -1; top: 0; right: 0; height: 100%; width: calc((100% - var(--gutter, 24px)) / 2);
  object-fit: contain; object-position: center; opacity: .12; pointer-events: none; user-select: none; }
@media (min-width: 1024px) {
  #team .section-head { gap: var(--s-5); }
  #team h2 { font-size: clamp(48px, 3.4vw + 8px, 72px); line-height: 1.02; }
  #team .t-lead { font-size: clamp(20px, .9vw + 12px, 26px); line-height: 1.5; max-width: 34ch; }
}
@media (min-width: 1280px) {
  /* the three facts start level with the lead (a split's columns are top-aligned) */
  #team .stats { align-self: start; }
}
.stats { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.stat { padding-top: var(--s-4); border-top: 3px solid var(--p-accent); display: grid; gap: var(--s-2); align-content: start; }
.stat dt { font: 600 13px/1.3 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--p-accent); }
.stat dd { margin: 0; font: var(--display-weight) clamp(26px, 1vw + 22px, 36px)/1.1 var(--font-display); letter-spacing: var(--display-tracking);
  text-transform: uppercase; color: #fff; }
@media (max-width: 1023px) { .team-mark { display: none; } }
/* a phone: the three facts share the room under the lead */
@media (max-width: 639px) { #team .team-grid { grid-template-rows: auto minmax(0, 1fr); row-gap: var(--s-6); } }

/* lists of places in the service area: two groups, one under the other, each a row of plain tags;
   the group titles take the card titles' size, so the page keeps one h3 size */
.area-lists { margin-top: var(--s-6); }
.area-lists h3 { font-family: var(--font-text); font-weight: 500; font-size: var(--t-card); line-height: 1.3;
  letter-spacing: -0.01em; margin-bottom: var(--s-3); text-transform: none; }
.places { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: flex; flex-wrap: wrap; row-gap: var(--s-1); }
.places:last-child { margin-bottom: 0; }
/* a gold dot after each place but the last: every wrapped line still starts on the column's left line */
.places li:not(:last-child)::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px;
  border-radius: 50%; background: var(--p-accent); vertical-align: middle; }

/* the staffing estimator: no prices, the ratio is an assumption for Jason to confirm */
.estimator { display: grid; gap: var(--s-6); padding: var(--s-8); background: var(--p-surface); color: var(--p-ink);
  border: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); border-radius: var(--r-lg); }
.estimator fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.estimator legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-small); font-weight: 500; }
.seg { display: flex; gap: var(--s-2); }
/* two plain radio buttons in 44px labels: the radio itself stays visible, so the keyboard focus shows on it */
.seg label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; font-weight: 500; }
.seg input { width: 18px; height: 18px; margin: 0; accent-color: var(--p-accent); cursor: pointer; }
.seg input:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.seg label:has(input:checked) { border-color: var(--p-accent); }
.est-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.est-result { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.est-out { display: flex; align-items: baseline; gap: var(--s-3); font: var(--display-weight) clamp(32px, 1vw + 28px, 44px)/1 var(--font-display);
  letter-spacing: var(--display-tracking); color: var(--p-accent); text-transform: uppercase; }
.est-out small { font: 500 var(--t-body)/1.4 var(--font-text); letter-spacing: 0; color: var(--p-ink); text-transform: none; }
.est-note { font-size: var(--t-small); color: var(--muted); }
.est-big { font-weight: 600; }
/* a wide screen: the card runs down to the section's foot, the answer sitting at its bottom */
@media (min-width: 1280px) {
  #staffing .estimator { align-self: stretch; grid-template-rows: auto auto minmax(0, 1fr); }
  #staffing .est-result { align-self: end; }
}
.est-big[hidden], .est-out[hidden], .est-result p[hidden] { display: none; }
@media (max-width: 479px) { .est-fields { grid-template-columns: minmax(0, 1fr); } .estimator { padding: var(--s-5); } }

/* the quote request form: its own script (js/site.js) follows the accessible-error-announcement pattern, so it
   does not use the kit's form.form; the kit's .field styles still apply */
.request-form { --error: color-mix(in oklab, #d92d20 72%, var(--ink));
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.request-form > * { grid-column: span 3; }
.request-form > .field--third { grid-column: span 2; }
.request-form > :is(.field--full, .btn-row, .form__status, .form__result, .form-note) { grid-column: 1 / -1; }
/* no-script fallback: /api/quote redirects to #quote-sent or #quote-failed and only that message shows */
.form__result { display: none; }
.form__result:target { display: block; font-weight: 600; scroll-margin-top: 96px; }
.request-form .field { gap: var(--s-1); }
.request-form :is(input, select, textarea) { font-size: max(1rem, var(--t-body)); }
.request-form textarea { min-height: 88px; }
.request-form .field__error { display: none; }
.request-form :is(:user-invalid, [aria-invalid="true"]) ~ .field__error { display: block; }
.request-form :is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) { border: 2px solid var(--error); }
.field__hint { font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.request-form .opt { font-weight: 400; color: var(--muted); }
.form-note { font-size: var(--t-small); color: var(--muted); }
/* a wide screen: the form runs down to the section's foot, the message box taking the room that is left */
@media (min-width: 1024px) {
  .request-form { min-height: var(--ly-fit); grid-template-rows: repeat(5, auto) 1fr auto auto; }
  .request-form .field--msg { display: flex; flex-direction: column; }
  .request-form .field--msg textarea { flex: 1 1 auto; resize: vertical; }
}
@media (max-width: 639px) {
  .request-form { grid-template-columns: minmax(0, 1fr); }
  .request-form > *, .request-form > .field--third { grid-column: 1 / -1; }
}

/* the honeypot: out of sight and out of the tab order; people never fill it in */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* contact lines beside the form, each with its icon */
.contact-lines { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; }
.contact-lines li { display: flex; align-items: center; gap: var(--s-3); }
.contact-lines svg { width: 24px; height: 24px; flex: none; color: var(--p-accent); }
.contact-lines a { font-weight: 600; }

/* social marks: monochrome Deep Gold glyphs on black. Until a profile exists a mark is plain (span.social-soon), not a
   link: no pointer cursor, no hover. The launch checklist turns each into a 44px link or deletes it */
.socials { display: flex; gap: var(--s-2); align-items: center; }
.footer__legal .socials a, .socials a { width: 44px; height: 44px; }
.socials .social-soon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: #000; color: #dca842; border: 1px solid rgb(220 168 66 / .55); cursor: default; }
.socials svg { width: 22px; height: 22px; display: block; }

/* the closing call to action is the page's one full-width Deep Gold band: the footer's own ground is Deep Gold
   (charcoal words, a charcoal button) and the links under it sit on a full-width black panel with a gold top edge */
footer.closing.footer--brand { border-top: 0; padding-bottom: 0; }
footer.closing.footer--brand > .wrap { grid-template-rows: auto minmax(0, 1fr); row-gap: 0; }
footer.closing.footer--brand .closing__cta { padding-bottom: var(--s-7); }
footer.closing.footer--brand .closing__cta h2 { max-width: none; }
footer.closing.footer--brand .closing__cta > .close__media { flex: none; min-height: 0; aspect-ratio: 16 / 3; }
footer.closing.footer--brand .close__media img { object-position: 50% 90%; }
footer.closing.footer--brand .closing__links { padding-block: var(--s-7) var(--padb, var(--s-7)); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
  background: var(--bg); align-content: start; }
footer.closing.footer--brand .footer__address { font-size: clamp(24px, 1.2vw + 14px, 32px); line-height: 1.15; }
@media (max-width: 639px) {
  footer.closing.footer--brand .closing__cta > .close__media { aspect-ratio: 16 / 9; }
  footer.closing.footer--brand:has(> .wrap > .closing__cta > .close__media) { --hm: 1; }
  footer.closing.footer--brand:has(> .wrap > .closing__cta > .close__media) > .wrap { grid-template-rows: auto minmax(0, 1fr); row-gap: 0; }
}

/* legal pages (privacy.html, credits.html) */
main.legal { padding-block: calc(var(--nav, 72px) + var(--s-8)) var(--s-9); max-width: 760px; }
main.legal h1 { font-size: var(--t-h2); margin-bottom: var(--s-6); }
main.legal h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); }
main.legal p, main.legal li { max-width: 68ch; }
main.legal p + p { margin-top: var(--s-3); }
main.legal ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }

/* MWG accessible-error-announcement: hides content visually but keeps it in the accessibility tree */
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}