/* ─── Slim's Garage — hybrid light theme ─────────────────────────────────
   Loaded after styles.css. Dark stays as a frame (header, hero scrim,
   workshop band, footer, mobile bar); the body of the page goes light so the
   real, bright workshop and the daylight photography carry the mood. */

:root {
  /* Dark frame — charcoal, not black */
  --frame:        #15161a;
  --frame-2:      #1f2026;
  --frame-line:   #2c2d34;

  /* Light ground */
  --bg:           #f6f6f4;
  --surface:      #ecedeb;   /* alternate bands */
  --surface-2:    #ffffff;   /* cards */
  --line:         #dcdcd8;
  --line-2:       #c6c6c2;
  --field-line:   #8b8d94;   /* ≥3:1 on white */
  --text:         #1a1b1f;
  --muted:        #4b4d55;   /* body copy, ≥7:1 */
  --muted-2:      #66686f;   /* fine print */
  --chrome-1:     #1a1b1f;
  --chrome-2:     #3a3b42;

  /* Gold that reads on light: deep ochre for text, gold fills stay gold */
  --ochre:        #8a5a12;
  --shadow:       0 8px 24px rgba(20, 20, 30, .08);
  --shadow-gold:  0 6px 18px rgba(232, 163, 61, .22);
}

body { background: var(--bg); color: var(--text); }
:focus-visible { outline-color: var(--ochre); }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary { border-color: var(--gold-deep); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(232,163,61,.32); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ochre); background: #fff; color: var(--ochre); }

/* ─── Header: always the dark frame ───────────────────────────────────── */
.site-header { background: rgba(21,22,26,.94); border-bottom-color: var(--frame-line); }
.site-header.scrolled { background: rgba(21,22,26,.97); border-bottom-color: var(--frame-line); }
.main-nav a { color: #d6d7dc; }
.main-nav a:hover { color: #fff; }
.header-phone { color: #fff; }
.header-phone .icon { color: var(--gold); }
.header-phone:hover { color: var(--gold-bright); }
.header-phone-mini { color: var(--gold); background: rgba(232,163,61,.12); border-color: rgba(232,163,61,.3); }
.nav-toggle span { background: #fff; }
.main-nav.open { background: var(--frame-2); border-bottom-color: var(--frame-line); }
.main-nav.open a { border-bottom-color: var(--frame-line); }
.main-nav .nav-call { color: #fff; }
.skip-link { color: var(--gold-ink); }
.site-header :focus-visible { outline-color: var(--gold); }

/* ─── Hero: daylight photo, dark scrim panel for the headline ──────────── */
.hero { background: var(--frame); min-height: min(calc(100vh - var(--header-h)), 760px); }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(21,22,26,.90) 0%, rgba(21,22,26,.76) 36%, rgba(21,22,26,.30) 66%, rgba(21,22,26,.06) 100%),
    linear-gradient(180deg, rgba(21,22,26,.35) 0%, rgba(21,22,26,0) 26%, rgba(21,22,26,0) 100%);
}
.hero h1, .hero-sub, .hero-proof { color: #fff; }
.hero-sub { color: #e6e7ea; }
.hero-proof { color: #e6e7ea; }
.hero-proof .icon { color: var(--gold); }
.hero .btn-ghost { background: rgba(21,22,26,.45); color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(21,22,26,.6); }
.hero :focus-visible { outline-color: var(--gold); }

/* ─── Sections & type ──────────────────────────────────────────────────── */
.section-alt { background: var(--surface); }
.kicker { color: var(--ochre); }
.section-lead { color: var(--muted); }
h2 { color: var(--text); }

/* ─── Service cards ────────────────────────────────────────────────────── */
.service-card { background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(20,20,30,.04); }
.service-card:hover, .service-card:focus-visible { border-color: var(--gold); box-shadow: var(--shadow); }
.service-media::after { background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.55) 100%); }
.service-card h3 { color: var(--text); }
.service-card p { color: var(--muted); }
.service-cta { color: var(--ochre); text-transform: none; letter-spacing: .01em; font-size: 1.02rem; }

.callout { background: #fff; border-color: var(--gold-45); box-shadow: var(--shadow); }
.callout-icon { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-deep); }
.callout p { color: var(--muted); }

/* ─── Why: airier, no boxes-in-boxes ───────────────────────────────────── */
.why-card { background: #fff; border: 0; box-shadow: var(--shadow); text-align: left; padding: 28px 26px; }
.why-badge { margin: 0 0 18px; }
.why-card p { color: var(--muted); }

/* ─── Workshop band: dark frame element ────────────────────────────────── */
.workshop-band { background: var(--frame); }
.workshop-caption { background: linear-gradient(180deg, rgba(21,22,26,0) 0%, rgba(21,22,26,.12) 40%, rgba(21,22,26,.84) 100%); }
.workshop-caption h2, .workshop-caption p:not(.kicker) { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.workshop-caption .kicker { color: var(--gold); }

/* ─── About ────────────────────────────────────────────────────────────── */
.about-photo { border-color: var(--line); box-shadow: var(--shadow); }
.about-award { background: rgba(21,22,26,.86); border-color: rgba(255,255,255,.12); color: #fff; }
.about-award span { color: #d6d7dc; }
.about-copy p { color: var(--muted); }

/* ─── Reviews ──────────────────────────────────────────────────────────── */
.reviews-note { color: var(--muted-2); }
.review-card { background: #fff; border: 0; box-shadow: var(--shadow); }
.stars { color: var(--gold); }
.stars svg { stroke: var(--gold-deep); stroke-width: 1; }
.review-card blockquote { color: var(--text); }
.review-card blockquote::before { color: var(--gold-deep); }
.review-card figcaption { color: var(--muted-2); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 500; }

/* ─── Steps ────────────────────────────────────────────────────────────── */
.steps li { background: #fff; border: 0; box-shadow: var(--shadow); }
.steps p { color: var(--muted); }

/* ─── Booking form ─────────────────────────────────────────────────────── */
.booking-form { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.booking-form input, .booking-form select, .booking-form textarea {
  background-color: #fff; border-color: var(--field-line); color: var(--text); color-scheme: light;
}
.booking-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%238a5a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(232,163,61,.3); }
.booking-form input::placeholder, .booking-form textarea::placeholder { color: #7a7c83; }
.form-fieldset { border-color: var(--line); }
.form-fieldset legend { color: var(--chrome-2); }
.legend-note, .field-hint, .slot-hint, .form-reassure { color: var(--muted-2); }
.req { color: var(--ochre); }
.field-error, .form-status.error { color: #b3261e; }
.booking-form :is(input, select, textarea)[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
.slots[aria-invalid="true"] .slot:not(.slot-full) span { border-color: #b3261e; }
.slot span { background: #fff; border-color: var(--field-line); color: var(--text); }
.slot span:hover { border-color: var(--ochre); color: var(--ochre); }
.slot input:checked + span { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--gold-ink); border-color: var(--gold-deep); }
.slot input:focus-visible + span { outline-color: var(--ochre); }
.slot-full span { color: #9a9ca3; border-color: var(--line-2); background: var(--bg); }
.slot-full span:hover { border-color: var(--line-2); color: #9a9ca3; }
.booking-success { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.booking-success p { color: var(--muted); }
.success-ref strong { color: var(--ochre); }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.faq-item { background: #fff; border-color: var(--line); }
.faq-item[open] { border-color: var(--line-2); }
.faq-item summary::after { color: var(--ochre); }
.faq-item p { color: var(--muted); }

/* ─── Contact ──────────────────────────────────────────────────────────── */
.contact-list li { border-bottom-color: var(--line-2); }
.contact-icon { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-deep); }
.contact-list strong { color: var(--muted-2); }
.contact-list a:hover { color: var(--ochre); }
.service-area { color: var(--muted); }
.contact-map { border-color: var(--line-2); box-shadow: var(--shadow); }
.contact-map iframe { filter: none; }

/* ─── Footer & mobile bar: dark frame ──────────────────────────────────── */
.site-footer { background: var(--frame); border-top-color: var(--frame-line); color: #fff; }
.footer-brand p, .footer-col p { color: #b9bac4; }
.footer-col h3 { color: #fff; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom { border-top-color: var(--frame-line); }
.footer-bottom p { color: #8e909a; }
.site-footer :focus-visible { outline-color: var(--gold); }

.mobile-bar { background: rgba(21,22,26,.94); border-top-color: var(--frame-line); }
.mobile-bar-call { color: #fff; border-color: #3a3b44; background: var(--frame-2); }

/* Fewer all-caps registers on the light ground */
.hero-proof { text-transform: none; letter-spacing: .01em; font-size: 1.05rem; }

@media (max-width: 560px) {
  .hero-shade { background: linear-gradient(180deg, rgba(21,22,26,.80) 0%, rgba(21,22,26,.62) 55%, rgba(21,22,26,.86) 100%); }
}

/* ─── Condensed layout (fewer sections, tighter rhythm) ────────────────── */
.section { padding: clamp(40px, 5.5vw, 68px) 0; }
.section-head { margin-bottom: 28px; }
.hero { min-height: min(calc(100vh - var(--header-h)), 640px); padding: clamp(32px, 5vw, 60px) 0 clamp(36px, 5vw, 56px); }
.hero-logo { width: min(320px, 70%); margin-bottom: 20px; }
.hero-sub { margin: 16px 0 24px; max-width: 540px; }
.hero-proof { margin-top: 22px; }

/* Service cards: title + arrow, one-line blurb */
.services-compact .service-body { padding: 4px 16px 16px; }
.services-compact .service-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1.2rem; margin-bottom: 4px; }
.services-compact .service-card h3 .icon { color: var(--ochre); font-size: 1.05rem; transition: transform .2s var(--ease-out); }
.services-compact .service-card:hover h3 .icon { transform: translateX(3px); }
.services-compact .service-card p { font-size: .92rem; line-height: 1.45; }
.services-compact .service-media { aspect-ratio: 3 / 2; }

.callout-slim { grid-template-columns: 1fr auto; padding: 18px 22px; margin-top: 20px; }
.callout-slim h3 { font-size: 1.3rem; }
.callout-slim p { font-size: .95rem; }

/* About: two short paragraphs + two proof points */
.about-grid { gap: 44px; }
.about-points { list-style: none; margin: 4px 0 20px; display: grid; gap: 12px; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: .97rem; }
.about-points .icon { color: var(--ochre); font-size: 1.35rem; margin-top: .05em; }
.about-points strong { color: var(--text); }

/* Reviews: quieter link instead of a second button row */
.reviews-link { text-align: center; margin-top: 22px; }
.reviews-link a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ochre); font-size: 1.05rem; }
.reviews-link a:hover { color: var(--gold-deep); }

/* Booking: three reassurance points replace the "how it works" section */
.book-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; color: var(--muted); font-size: .97rem; }
.book-points li { display: inline-flex; align-items: center; gap: 7px; }
.book-points .icon { color: var(--ochre); }
.booking-form { padding: 26px; }
.form-fieldset { padding: 18px 18px 6px; margin-bottom: 16px; }
.form-details { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; background: var(--bg); }
.form-details summary { cursor: pointer; list-style: none; padding: 14px 18px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.1rem; color: var(--chrome-2); display: flex; align-items: center; gap: 10px; }
.form-details summary::-webkit-details-marker { display: none; }
.form-details summary::before { content: "+"; color: var(--ochre); font-size: 1.4rem; line-height: 1; width: 18px; }
.form-details[open] summary::before { content: "–"; }
.form-details summary:focus-visible { outline-offset: -3px; }
.form-details-body { padding: 4px 18px 6px; }
.form-details .legend-note { margin-left: 2px; }

/* Contact & footer */
.contact-map { min-height: 300px; }
.contact-map iframe { min-height: 300px; }
.footer-compact { padding-top: 38px; }
.footer-compact .footer-inner { padding-bottom: 26px; gap: 28px; align-items: start; }
.footer-compact .footer-logo { width: 200px; }
.footer-compact .footer-brand p { margin-top: 12px; }
.footer-compact .footer-col h3 { margin-bottom: 8px; }
.footer-compact .footer-bottom { padding: 14px 0; }

@media (max-width: 1080px) {
  .callout-slim { grid-template-columns: 1fr; }
  .callout-slim .callout-actions { grid-column: auto; }
}
@media (max-width: 560px) {
  .eyebrow-extra { display: none; }
  .hero { padding-bottom: 22px; }
  .services-compact .service-card h3 { font-size: 1.05rem; }
  .services-compact .service-card p { font-size: .86rem; }
  .services-compact .service-body { padding: 4px 12px 14px; }
  .callout-slim { padding: 18px; }
  .book-points { flex-direction: column; align-items: flex-start; gap: 6px; }
  .form-fieldset { padding: 14px 14px 2px; }
  .form-details summary { padding: 12px 14px; font-size: 1rem; }
  .form-details-body { padding: 2px 14px 4px; }
}