:root{
  --red:#E1251B;
  --blue:#1D7FC3;
  --navy:#243b4a;
  --cream:#FBF8F0;
  --cream-alt:#FBF1E8;
  --card-border:#e7e0cf;
  --input-border:#e2dccb;
  --divider:#f0ebdd;
  --muted:#8a8375;
  --faint:#b3a992;
  --faint2:#c3b9a4;
  --disabled:#d9cfbe;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#e9e2d6;
  font-family:"Helvetica Now Text","Helvetica Now Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--blue)}
a:hover{color:var(--red)}
button{font-family:inherit}

.page{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  box-shadow:0 0 0 1px rgba(0,0,0,.03);
}

/* ---- Inner header ---- */
/* explicit [hidden] override needed: an authored `display` always beats
   the UA stylesheet's `[hidden]{display:none}` at equal specificity */
[hidden]{display:none !important}

.inner-header{flex:none;display:flex;align-items:center;gap:12px;padding:16px 20px 12px}
.header-logo{height:22px}
.header-spacer{width:38px}
.back{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;font:600 20px system-ui;color:var(--blue);
  cursor:pointer;line-height:1;padding:0;
}
.back:hover{border-color:var(--blue)}

/* ---- Progress ---- */
.progress-wrap{flex:none;padding:0 22px 14px}
.progress-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.step-label{font:700 11px system-ui;letter-spacing:.1em;color:var(--blue)}
.step-count{font:500 11px system-ui;color:var(--faint)}
.progress-track{height:5px;background:var(--divider);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--red);border-radius:3px;transition:width .3s}

/* ---- Body ---- */
.body{flex:1;padding:0 22px 24px;display:flex;flex-direction:column}

/* ---- Footer / CTA ---- */
.footer{flex:none;padding:14px 22px calc(14px + env(safe-area-inset-bottom));background:var(--cream);border-top:1px solid var(--divider)}
.cta{
  background:var(--red);color:#fff;border-radius:14px;padding:16px;text-align:center;
  font:700 16px Helvetica,Arial,sans-serif;cursor:pointer;border:none;width:100%;
}
.cta[disabled]{background:var(--disabled);color:#fff;cursor:not-allowed}
.cta.secondary{background:#fff;color:var(--blue);border:1px solid #cfe3f2}

/* ---- Home screen ---- */
.home-logo-block{text-align:center;padding:16px 26px 10px}
.home-logo-block img{width:210px;max-width:82%;display:block;margin:0 auto}
.star-divider{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;color:var(--red)}
.star-divider span{height:1px;width:44px;background:currentColor;opacity:.5}
.tagline{font:500 12px system-ui;color:var(--muted);margin-top:8px;text-align:center}
.section-label{padding:8px 0 0;font:700 11px system-ui;letter-spacing:.16em;color:var(--red)}
.section-note{padding:4px 0 0;font:500 12px system-ui;color:var(--muted)}

.service-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.service-card{
  background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:14px;
  display:flex;gap:14px;align-items:center;box-shadow:0 2px 10px rgba(29,127,195,.08);
  cursor:pointer;text-align:left;width:100%;
}
.service-card:hover{border-color:var(--blue)}
.service-thumb{
  width:62px;height:62px;border-radius:11px;flex:none;
  overflow:hidden;background:#f4f1e8;
}
.service-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.service-title{font:700 17px Helvetica,Arial,sans-serif;color:var(--blue)}
.service-sub{font:500 12px system-ui;color:var(--muted);margin-top:3px}
.service-chevron{font:600 24px system-ui;color:var(--red);line-height:1;flex:none}
.service-body{flex:1;min-width:0}

.busy-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:14px 16px 16px;box-shadow:0 2px 10px rgba(29,127,195,.08);margin-top:16px}
.busy-title{text-align:center;font:700 11px system-ui;letter-spacing:.16em;color:var(--red)}
.busy-gauge{width:82%;height:auto;display:block;margin:4px auto 0}
.busy-status{border:1px solid var(--card-border);background:var(--cream);border-radius:12px;padding:12px;text-align:center;margin-top:4px}
.busy-status-name{font:800 26px Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.busy-status-sub{font:700 11px system-ui;letter-spacing:.06em;color:var(--muted);margin-top:4px}

/* ---- Call / Directions ---- */
.quick-actions{display:flex;gap:10px;margin-top:14px}
.quick-btn{
  flex:1;text-align:center;background:#fff;color:var(--blue);border:1px solid #cfe3f2;
  border-radius:14px;padding:14px;font:700 15px Helvetica,Arial,sans-serif;text-decoration:none;
}
.quick-btn:hover{border-color:var(--blue)}

/* ---- Services button ---- */
.services-btn{
  width:100%;margin-top:14px;background:#fff;color:var(--red);border:1px solid var(--red);
  border-radius:14px;padding:14px;font:700 13px system-ui;letter-spacing:.04em;cursor:pointer;
}
.services-btn:hover{background:rgba(225,37,27,.06)}

/* ---- Services (accordion) ---- */
.svc-list{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.svc-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(29,127,195,.08)}
.svc-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:16px;background:none;border:none;text-align:left;font-family:inherit;cursor:pointer;
}
.svc-title{font:700 16px Helvetica,Arial,sans-serif;color:var(--navy)}
.svc-chevron{font:600 20px system-ui;color:var(--red);line-height:1;flex:none;transition:transform .25s}
.svc-card.open .svc-chevron{transform:rotate(90deg)}
.svc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.svc-card.open .svc-panel{max-height:900px}
.svc-panel-inner{padding:0 16px 18px}
.svc-section{margin-top:14px}
.svc-section:first-child{margin-top:0}
.svc-section-label{font:700 11px system-ui;letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.svc-section-text{font:500 13px/1.5 system-ui;color:var(--muted);margin-top:6px}
.svc-section-text ul{margin:0;padding-left:18px}
.svc-section-text li{margin-top:2px}
.svc-more-card{margin-top:12px;background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:18px;text-align:center;box-shadow:0 2px 10px rgba(29,127,195,.08)}
.svc-more-title{font:700 15px Helvetica,Arial,sans-serif;color:var(--navy)}
.svc-more-text{font:500 12px/1.5 system-ui;color:var(--muted);margin-top:6px}
.svc-more-call{margin-top:12px;display:inline-block;text-decoration:none}

/* ---- Hours ---- */
.hours-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:16px;margin-top:14px}
.hours-title{font:700 11px system-ui;letter-spacing:.16em;color:var(--red);margin-bottom:10px}
.hours-row{display:flex;justify-content:space-between;font:500 13px system-ui;color:var(--muted);padding:4px 0}
.hours-row span:last-child{color:var(--navy);font-weight:700}
.hours-phone{margin-top:10px;padding-top:10px;border-top:1px solid var(--divider);text-align:center;font:700 15px Helvetica,Arial,sans-serif;color:var(--navy)}
.hours-address{margin-top:4px;text-align:center;font:500 12px system-ui;color:var(--muted)}

/* ---- Headings ---- */
.screen-heading{font:800 24px/1.1 Helvetica,Arial,sans-serif;color:var(--navy);letter-spacing:-.02em;margin-top:16px}
.screen-sub{font:500 13px system-ui;color:var(--muted);margin-top:8px}

/* ---- Option cards (service/parts/tier) ---- */
.option-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.option-card{
  display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;cursor:pointer;
  background:#fff;border:2px solid var(--card-border);width:100%;text-align:left;
}
.option-card.selected{border-color:var(--red);box-shadow:0 4px 14px -4px rgba(225,37,27,.35)}
.option-title{font:700 16px Helvetica,Arial,sans-serif;color:var(--navy)}
.option-desc{font:500 12px system-ui;color:var(--muted);margin-top:3px}
.option-body{flex:1;min-width:0}
.option-dot{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:var(--card-border)}
.option-card.selected .option-dot{background:var(--red)}

/* ---- Fields (parts plate, vehicle, contact) ---- */
.field{margin-top:16px}
.field:first-child{margin-top:22px}
.field-label{font:700 11px system-ui;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:7px;display:block}
.field-label .opt{text-transform:none;letter-spacing:0;color:var(--faint2)}
.inp{width:100%;padding:13px 14px;border:1px solid var(--input-border);border-radius:12px;background:#fff;font:500 15px system-ui;color:var(--navy);outline:none}
.inp:focus{border-color:var(--red)}
.plate-row{display:flex;gap:10px}
.plate-select{flex:none;width:96px;font-weight:700;color:var(--navy);-webkit-appearance:none;appearance:none;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22><path d=%22M2 4l4 4 4-4%22 fill=%22none%22 stroke=%22%231D7FC3%22 stroke-width=%221.5%22/></svg>') no-repeat right 12px center;}
.plate-input{flex:1;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.helper-text{font:500 11px system-ui;color:var(--faint);margin-top:8px}

/* ---- SMS consent ---- */
.consent-field{margin-top:16px;background:#fff;border:1px solid var(--input-border);border-radius:12px;padding:13px 14px}
.consent-label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consent-checkbox{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--red);cursor:pointer}
.consent-text{font:500 11.5px/1.5 system-ui;color:var(--muted)}
#sendCode{margin-top:14px}

/* ---- Date/time ---- */
.day-scroll{display:flex;gap:10px;overflow-x:auto;padding:20px 22px 6px;margin:0 -22px}
.day-chip{flex:none;width:60px;padding:12px 0;border-radius:14px;text-align:center;cursor:pointer;background:#fff;color:var(--navy);border:1px solid var(--card-border)}
.day-chip.selected{background:var(--blue);color:#fff;border-color:var(--blue)}
.day-dow{font:600 10px system-ui;letter-spacing:.06em;opacity:.7}
.day-dom{font:800 20px Helvetica,Arial,sans-serif;margin-top:3px}
.day-mon{font:500 9px system-ui;opacity:.6;margin-top:1px}
.times-label{font:700 11px system-ui;letter-spacing:.12em;color:var(--muted);margin:18px 0 12px}
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:8px}
.time-chip{padding:14px 0;border-radius:12px;text-align:center;font:700 14px Helvetica,Arial,sans-serif;cursor:pointer;background:#fff;color:var(--navy);border:1px solid var(--card-border)}
.time-chip.selected{background:var(--red);color:#fff;border-color:var(--red)}
.time-chip.unavailable{background:var(--divider);color:var(--faint);border-color:var(--divider);cursor:not-allowed}
.datetime-note{font:500 12px system-ui;color:var(--muted);margin-top:12px}

/* ---- Summary card ---- */
.summary-card{margin-top:22px;background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:16px}
.summary-title{font:700 11px system-ui;letter-spacing:.12em;color:var(--red);margin-bottom:12px}
.summary-rows{display:flex;flex-direction:column;gap:9px}
.summary-row{display:flex;justify-content:space-between;font:500 13px system-ui;color:var(--muted);gap:14px}
.summary-row span:last-child{color:var(--navy);font-weight:700;text-align:right}

/* ---- Done screen ---- */
.done-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:40px}
.done-check{width:96px;height:96px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px;box-shadow:0 10px 30px -8px rgba(225,37,27,.5)}
.done-heading{font:800 27px/1.1 Helvetica,Arial,sans-serif;color:var(--navy);letter-spacing:-.02em;margin-top:24px}
.done-sub{font:500 14px/1.5 system-ui;color:var(--muted);margin-top:10px}
.confirmation-card{margin-top:20px;width:100%;background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:18px;text-align:left}
.confirmation-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.confirmation-label{font:700 11px system-ui;letter-spacing:.12em;color:var(--muted)}
.confirmation-num{font:800 13px ui-monospace,Menlo,monospace;color:var(--blue)}
.done-actions{width:100%;display:flex;flex-direction:column;gap:10px;padding-bottom:26px;margin-top:20px}

/* ---- Misc ---- */
.error-banner{background:#fdeceb;border:1px solid #f3b9b3;color:var(--red);border-radius:12px;padding:12px 14px;font:600 13px system-ui;margin-top:16px}
.spacer{flex:1}

@media (max-width:520px){
  .page{box-shadow:none}
  body{background:var(--cream)}
}

/* Optional message from the Google Sheet's Announcement setting. */
 .home-announcement{
  display:flex;align-items:flex-start;gap:12px;
  margin:8px 0 14px;padding:16px;background:#eaf3f9;
  border:1px solid #cbdfea;border-radius:14px;
  color:var(--navy);font:500 14px/1.5 system-ui;
}
.announcement-icon{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;text-align:center;
  font:700 16px/26px Helvetica,Arial,sans-serif;
}
.announcement-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- Manage appointment page ---- */
.manage-logo{padding-bottom:0}
.manage-status{line-height:1.5;margin:8px 0 0}
.manage-section{margin-top:16px;background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(29,127,195,.08)}
.manage-section-title{margin:0;font:700 11px system-ui;letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.manage-section-text{margin:6px 0 0;font:500 13px/1.5 system-ui;color:var(--muted)}
.manage-section .consent-field{margin-top:14px;background:var(--cream)}
.manage-cta{margin-top:16px}
input[type=date].inp{min-height:48px;-webkit-appearance:none;appearance:none;display:block}
.inp-select{min-height:48px;-webkit-appearance:none;appearance:none;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22><path d=%22M2 4l4 4 4-4%22 fill=%22none%22 stroke=%22%231D7FC3%22 stroke-width=%221.5%22/></svg>') no-repeat right 14px center;padding-right:36px}
.inp:disabled{opacity:.6}
.cta.danger{background:#fff;color:var(--red);border:1px solid var(--red)}
.cta.danger[disabled]{background:#fff;color:var(--disabled);border-color:var(--card-border)}
.manage-help{margin:24px 0 0;text-align:center;font:500 13px/1.5 system-ui;color:var(--muted)}
.manage-help a{font-weight:700;text-decoration:none}
.manage-back{display:block;margin-top:10px;text-align:center;font:600 13px system-ui;text-decoration:none}
.manage-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:24px}
.manage-done .done-heading{margin-bottom:0;outline:none}
.manage-done .done-sub{margin:10px 0 0}
.manage-done .done-actions{padding-bottom:0}
.manage-done .done-actions .cta{display:block;text-decoration:none;box-sizing:border-box}
.done-check.cancelled{background:var(--navy);box-shadow:0 10px 30px -8px rgba(36,59,74,.5);font-size:40px}
.summary-row span.status-cancelled{color:var(--red)}
.day-chip.full{background:var(--divider);color:var(--faint);border-color:var(--divider);cursor:not-allowed}
.day-chip.full .day-mon{font-weight:700;opacity:1;letter-spacing:.04em}

/* Small loading spinner (busy meter, day picker) */
.spinner{display:inline-block;width:.8em;height:.8em;margin-right:.45em;vertical-align:-.05em;border:.14em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;opacity:.8}
.loading-note{display:flex;align-items:center;font-size:13px}
.loading-note .spinner{width:14px;height:14px;border-width:2px;color:var(--blue)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* Business info under the home screen (also readable without JavaScript) */
.site-info{padding:8px 22px 32px;font:500 13px/1.55 system-ui;color:var(--muted)}
.site-info h2{font:700 11px system-ui;letter-spacing:.16em;color:var(--red);text-transform:uppercase;margin:8px 0 8px}
.site-info h3{font:700 11px system-ui;letter-spacing:.12em;color:var(--navy);text-transform:uppercase;margin:18px 0 6px}
.site-info p{margin:0 0 10px}
.site-contact{color:var(--navy)}
.site-links{margin-top:14px;padding-top:12px;border-top:1px solid var(--divider)}

/* Car brands we service, one row above the About section */
.brand-strip{display:block;width:100%;height:auto;margin:6px auto 22px}

/* ================= Desktop layout (wide screens only) =================
   Phones are unchanged. On a computer the site becomes a centered card:
   home is a wide two-column layout, booking steps a comfortable column. */

/* Phones: flatten the home columns and keep the original stacking order. */
.home-grid,.home-main,.home-side{display:contents}
.body > .home-logo-block{order:1}
.body > .home-announcement{order:2}
.home-main .section-label{order:3}
.home-main .section-note{order:4}
.home-main .service-list{order:5}
.home-side .busy-card{order:6}
.home-actions{order:7}
.home-side .hours-card{order:8}

@media (min-width:900px){
  body{background:#e9e2d6 radial-gradient(circle at 50% 0,#f3ede2 0,#e9e2d6 60%) no-repeat;padding:36px 24px 48px}
  .page{max-width:720px;min-height:0;border-radius:24px;overflow:hidden;
    box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px -24px rgba(36,59,74,.35)}
  .page.is-home{max-width:1080px}

  /* Home */
  .is-home .body{padding:0 48px 12px}
  .is-home .home-logo-block{padding:40px 26px 18px}
  .is-home .home-logo-block img{width:280px}
  .is-home .tagline{font-size:13px}
  .is-home .site-info .brand-strip{grid-column:1 / -1;max-width:820px;margin:4px auto 28px}
  .is-home .home-announcement{max-width:760px;margin:6px auto 22px;width:100%}
  .home-grid{order:3;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:start;margin-top:8px}
  .home-main,.home-side{display:block}
  .home-main .section-label{padding-top:4px;font-size:12px}
  .home-main .section-note{font-size:13px}
  .home-main .service-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .home-main .service-card{flex-direction:column;align-items:flex-start;padding:16px;gap:12px;position:relative;transition:transform .15s,box-shadow .15s,border-color .15s}
  .home-main .service-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(29,127,195,.35)}
  .home-main .service-thumb{width:100%;height:150px;border-radius:12px;background:#fff}
  .home-main .service-thumb img{object-fit:contain}
  .home-main .service-title{font-size:19px}
  .home-main .service-sub{font-size:13px}
  .home-main .service-chevron{position:absolute;right:18px;bottom:20px}
  .home-actions{margin-top:20px}
  .home-actions .quick-actions{margin-top:0}
  .home-side{position:sticky;top:24px}
  .home-side .busy-card{margin-top:0}
  .is-home .site-info{padding:28px 48px 40px;margin-top:28px;border-top:1px solid var(--divider);
    display:grid;grid-template-columns:260px 1fr;column-gap:36px;align-items:start}
  .is-home .site-info h2{grid-column:1;margin-top:2px}
  .is-home .site-info p{grid-column:2;font-size:14px}
  .is-home .site-info .site-links{grid-column:1 / -1;font-size:13px}

  /* Booking steps */
  .inner-header{padding:22px 32px 14px}
  .header-logo{height:36px}
  .progress-wrap{padding:0 36px 16px}
  .body{padding:0 36px 28px}
  .footer{padding:18px 36px 24px}
  .cta{max-width:360px;margin-left:auto;margin-right:auto;display:block}
  .screen-heading{font-size:28px}
  .screen-sub{font-size:14px}
  .option-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
  .option-card:hover,.day-chip:not(.full):hover,.time-chip:not(.unavailable):hover{border-color:var(--blue)}
  .day-scroll{display:grid;grid-template-columns:repeat(8,1fr);overflow:visible;margin:0;padding:20px 0 6px}
  .day-chip{width:auto}
  .time-grid{grid-template-columns:repeat(4,1fr)}
  .summary-card{padding:20px}
  .done-body{max-width:460px;margin:0 auto;width:100%}
  .done-actions .cta{max-width:none}
}