.drive { --gold: #d0b378; --copy: #cbc8c3; background: #090b10; }
.drive-hero { margin:auto; padding:2rem 5vw 3rem; display:flex; flex-direction:column; align-items:center; gap:1.5rem; min-height:calc(100svh - 82px); }
.drive h1 { font-family:var(--font-display); font-size:clamp(2.65rem,4.6vw,4.75rem); line-height:1.02; letter-spacing:-.045em; font-weight:650; }
.drive h1 em { color:var(--gold); font-style:normal; }
.drive-hero__intro { font-size:1rem; color:var(--copy); max-width:65ch; margin:1rem auto 0; line-height:1.65; }
.drive h2 { font-family:var(--font-display); font-size:clamp(2rem,3.3vw,3.4rem); letter-spacing:-.035em; line-height:1.08; font-weight:600; margin-bottom:1.25rem; }
.drive-estimate { width:100%; max-width:680px; scroll-margin-top:1rem; }
.drive-estimate h2 { font-size:clamp(1.8rem,2.6vw,2.5rem); margin-bottom:.65rem; }
.drive-estimate > p:not(.drive-kicker) { color:var(--copy); margin-bottom:1.5rem; }
.drive-form { display:flex; flex-direction:column; gap:1rem; }
.drive-form input, .drive-form textarea { width:100%; background:#0e1524; border:1px solid #606879; border-radius:0; padding:.8rem .9rem; font:inherit; color:var(--fg); min-height:50px; }
.drive-form textarea { resize:vertical; }
.drive-form input::placeholder, .drive-form textarea::placeholder { color:#aaaeb8; }
.drive-form input.is-error { border-color:#ff9c86; }
.drive-details summary { cursor:pointer; min-height:44px; font-size:.875rem; }
.drive-details summary span { color:var(--copy); }
.drive .btn { letter-spacing:.035em; font-size:.875rem; min-height:54px; justify-content:center; }
.drive .btn--solid { background:var(--gold); border-color:var(--gold); color:#10141c; }
.drive .btn--solid:hover { background:#e1c58a; }
.drive-form-call { display:block; text-align:center; margin-top:1.1rem; font-size:.9375rem; text-decoration:underline; text-underline-offset:3px; padding:.5rem 0; }
.drive h3 { font-size:1.3rem; font-weight:600; margin-bottom:.4rem; }
.drive .faq { margin:0; }
.drive .faq summary { font-size:1rem; gap:1rem; }
.drive .faq details p { font-size:1rem; color:var(--copy); }
.seo-page:has(.drive) .simple-footer { background:#090b10; }
@media(max-width:800px) {
  .drive h1 { font-size:clamp(2.35rem,7.8vw,3.9rem); }
  .drive-estimate { padding:1.4rem; }
}

/* The paid-search page starts with an interactive project planner. */
.drive h1 { font-size:clamp(2.2rem,4.1vw,3.5rem); }
.drive-estimate { background:linear-gradient(145deg,#1d283d,#141c2c 75%); border:1px solid #414b60; border-radius:16px; padding:clamp(1.4rem,2.5vw,2.25rem); box-shadow:0 18px 60px #0003; }
.drive-form { gap:0; }
.wizard-progress { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin:0 0 2rem; padding:0; }
.wizard-progress li { display:flex; align-items:center; gap:.4rem; color:#b8bfcc; font-size:.75rem; position:relative; padding-bottom:.9rem; border-bottom:2px solid #465064; }
.wizard-progress li[aria-current] { color:var(--gold); border-color:var(--gold); }
.wizard-progress__number { width:20px; height:20px; display:grid; place-items:center; border:1px solid #647087; border-radius:50%; font-size:.65rem; }
.wizard-progress li[aria-current] .wizard-progress__number { color:#111a29; background:var(--gold); border-color:var(--gold); }
.wizard-progress li.is-complete { border-color:#8f7e5d; color:#d5c7aa; }
.wizard-progress li.is-complete .wizard-progress__number { border-color:var(--gold); color:var(--gold); font-size:0; }
.wizard-progress li.is-complete .wizard-progress__number::after { content:'✓'; font-size:.7rem; }
.wizard-step { border:0; padding:0; margin:0; min-width:0; }
.wizard-step + .wizard-step:not([hidden]) { margin-top:2rem; }
.is-wizard-ready .wizard-step + .wizard-step:not([hidden]) { margin-top:0; }
.wizard-panels { min-width:0; }
.is-wizard-ready .wizard-panels { min-height:388px; }
.wizard-heading { display:block; float:left; width:100%; font-family:var(--font-display); font-size:clamp(1.8rem,2.5vw,2.5rem); font-weight:600; line-height:1.12; letter-spacing:-.03em; padding:0; margin:0 0 .8rem; }
.wizard-heading + * { clear:both; }
.wizard-heading:focus { outline:none; }
.wizard-eyebrow { display:block; font-family:var(--font-body); font-size:.7rem; font-weight:500; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.65rem; }
.wizard-choices { display:grid; gap:.65rem; }
.wizard-choice { position:relative; cursor:pointer; }
.drive-form .wizard-choice input, .drive-form .wizard-timing input { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:0; opacity:0; }
.wizard-choice__surface { display:flex; align-items:center; gap:1rem; padding:.8rem 1rem; border:1px solid #576177; border-radius:9px; background:#101827; min-height:87px; transition:transform 140ms var(--ease),border-color 160ms var(--ease),background-color 160ms var(--ease); }
.wizard-choice__text { flex:1; min-width:0; }
.wizard-choice strong { display:block; font-size:1rem; font-weight:600; line-height:1.4; }
.wizard-choice__text > span { display:block; color:#b7bfce; font-size:.8rem; line-height:1.5; margin-top:.25rem; }
.wizard-choice__check { display:grid; place-items:center; flex:none; width:20px; height:20px; border:1px solid #758096; border-radius:50%; }
.wizard-choice input:checked + .wizard-choice__surface { border-color:var(--gold); background:#2c2e30; }
.wizard-choice input:checked + .wizard-choice__surface .wizard-choice__check { color:#15191f; background:var(--gold); border-color:var(--gold); }
.wizard-choice input:checked + .wizard-choice__surface .wizard-choice__check::after { content:'✓'; font-size:.75rem; font-weight:700; }
.wizard-choice input:checked + .wizard-choice__surface .wizard-sketch, .wizard-choice input:checked + .wizard-choice__surface .wizard-garage { color:var(--gold); }
.wizard-choice input:focus-visible + .wizard-choice__surface, .wizard-timing input:focus-visible + span { outline:3px solid var(--gold); outline-offset:4px; }
.wizard-sketch { width:70px; height:55px; flex:none; color:#aebbd0; }
.wizard-choices--size { grid-template-columns:1fr 1fr; }
.wizard-choices--size .wizard-choice__surface { position:relative; flex-direction:column; text-align:center; gap:.4rem; padding:1rem .5rem; min-height:142px; }
.wizard-choices--size .wizard-choice__check { position:absolute; top:.7rem; right:.7rem; width:17px; height:17px; }
.wizard-garage { height:48px; width:90px; color:#aebbd0; }
.wizard-timing { border:0; padding:0; margin:1.5rem 0 0; }
.wizard-timing legend { font-size:.875rem; margin-bottom:.7rem; }
.wizard-timing legend span { color:var(--copy); }
.wizard-timing__options { display:flex; flex-wrap:wrap; gap:.5rem; }
.wizard-timing label { position:relative; cursor:pointer; }
.wizard-timing label > span { display:flex; align-items:center; border:1px solid #616b7d; border-radius:6px; padding:.6rem .85rem; min-height:44px; font-size:.8125rem; }
.wizard-timing input:checked + span { border-color:var(--gold); background:#2c2e30; color:#eed7ad; }
.drive-form .lead-field input, .drive-form textarea { border-radius:6px; }
.wizard-contact { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.wizard-review { margin:1.25rem 0 .6rem; padding:.9rem 1rem; border-radius:8px; background:#0c1421; }
.wizard-review > p { font-size:.8rem; font-weight:600; margin-bottom:.5rem; }
.wizard-review dl > div { display:grid; grid-template-columns:65px minmax(0,1fr) 44px; align-items:center; gap:.6rem; font-size:.8125rem; min-height:38px; }
.wizard-review dt { color:#a8b2c3; }
.wizard-review dd { margin:0; overflow-wrap:anywhere; }
.wizard-review button { border:0; background:transparent; color:var(--gold); cursor:pointer; text-decoration:underline; text-underline-offset:3px; min-width:44px; min-height:44px; font:inherit; }
.drive-details { margin-top:.5rem; }
.drive-details summary { line-height:1.5; padding:.5rem 0; }
.drive-form .lead-privacy { font-size:.75rem; color:#b7bfce; margin:1rem 0 0; }
.wizard-actions { display:flex; align-items:center; gap:1rem; margin-top:1.7rem; }
.wizard-actions > .btn { flex:1; text-transform:none; letter-spacing:0; font-size:.9375rem; border-radius:7px; gap:1rem; padding:.9rem 1rem; min-height:54px; transition:transform 140ms var(--ease),background-color 160ms var(--ease); }
.wizard-back { display:flex; gap:.5rem; align-items:center; min-width:65px; min-height:48px; background:none; border:0; color:var(--copy); cursor:pointer; font:inherit; font-size:.875rem; }
.wizard-actions button:disabled { cursor:default; opacity:.65; }
.wizard-reassurance { text-align:center; font-size:.75rem; color:#b7bfce; margin-top:.85rem; }
.drive-form-call { border-top:1px solid #414b60; padding-top:1.1rem; margin-top:1.2rem; font-size:.8125rem; }
.wizard-error { color:#ffb2a0; font-size:.875rem; line-height:1.5; margin-top:.75rem; }
.wizard-success { padding:2rem 0; text-align:center; }
.wizard-success__mark { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 1.5rem; font-size:1.75rem; color:var(--gold); border:1px solid var(--gold); border-radius:50%; background:#d0b3780d; }
.wizard-success h3 { font-family:var(--font-display); font-size:clamp(2rem,3vw,3rem); line-height:1.1; letter-spacing:-.03em; margin-bottom:1.2rem; }
.wizard-success > p:last-child { color:var(--copy); font-size:.9375rem; line-height:1.65; max-width:35ch; margin:auto; }
@media(hover:hover) and (pointer:fine) {
  .wizard-choice:hover .wizard-choice__surface { border-color:#a0acc0; transform:translateY(-1px); }
  .wizard-timing label:hover > span { border-color:#a0acc0; }
  .wizard-choice:has(input:disabled):hover .wizard-choice__surface { transform:none; }
}
@media(prefers-reduced-motion:no-preference) {
  .wizard-choice:active .wizard-choice__surface, .wizard-actions .btn:not(:disabled):active { transform:scale(.985); }
}
@media(max-width:1000px) and (min-width:801px) {
  .wizard-sketch { width:50px; }
  .wizard-choice__surface { gap:.65rem; padding:.7rem; }
  .wizard-contact { grid-template-columns:1fr; }
}
@media(max-width:800px) {
  .drive-hero { gap:1.5rem; padding:1.5rem 5vw 2rem; min-height:calc(100svh - 66px); }
  .drive h1 { font-size:clamp(2.15rem,8.8vw,3.4rem); }
  .drive-hero__intro { font-size:.9375rem; line-height:1.65; max-width:50ch; margin-top:1rem; }
  .drive-estimate { padding:1.2rem; border-radius:12px; }
  .wizard-progress { gap:.5rem; margin-bottom:1.5rem; }
  .wizard-progress li { font-size:.65rem; gap:.3rem; }
  .wizard-progress__number { width:17px; height:17px; font-size:.6rem; }
  .wizard-heading { font-size:1.9rem; }
  .wizard-choice__surface { padding:.75rem; gap:.7rem; min-height:87px; }
  .wizard-sketch { width:53px; height:47px; }
  .wizard-choice strong { font-size:.9375rem; }
  .wizard-choice__text > span { font-size:.75rem; }
  .wizard-contact { grid-template-columns:1fr; }
  .wizard-actions { gap:.6rem; margin-top:1.3rem; }
  .wizard-actions > .btn { font-size:.875rem; gap:.6rem; padding:.9rem .5rem; }
  .wizard-review { padding:.75rem; }
}
@media(max-width:360px) {
  .drive-estimate { padding:1rem; }
  .wizard-sketch { width:42px; }
  .wizard-choice__surface { gap:.5rem; padding:.65rem; }
  .wizard-choice__check { width:17px; height:17px; }
}

/* ============================================================
   Focused quote page. One card, one job: start the wizard. The
   finished-driveway photo carries the proof so the copy does not
   have to, and everything below the card is the three-day promise.
   ============================================================ */
.drive-hero {
  position: relative; display: grid; place-items: start center;
  padding: clamp(1.75rem, 4vw, 3.25rem) 5vw clamp(2rem, 4vw, 3.5rem);
  min-height: 0; isolation: isolate;
}
.drive-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(180deg, rgba(9,11,16,.86) 0%, rgba(9,11,16,.94) 55%, #090b10 100%),
                    url("/assets/projects/stamped-driveway__after-wide-800.webp");
  background-size: cover; background-position: 50% 62%;
}
@media (min-width: 901px) {
  .drive-hero::before { background-image: linear-gradient(180deg, rgba(9,11,16,.82) 0%, rgba(9,11,16,.93) 60%, #090b10 100%), url("/assets/projects/stamped-driveway__after-wide-1600.webp"); }
}

.drive-estimate { width: 100%; max-width: 620px; }
.drive-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-size: .75rem; letter-spacing: .04em; color: var(--copy);
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .8rem;
  background: rgba(20, 27, 43, .8);
}
.drive-badge span { display: inline-flex; color: var(--gold); }
.drive-badge svg { width: 15px; height: 15px; }
.drive h1 { font-size: clamp(1.8rem, 5.2vw, 2.7rem); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.drive-hero__intro { margin: .75rem 0 1.5rem; font-size: 1rem; max-width: 46ch; }
.drive-hero__intro strong { color: #fff; font-weight: 600; }

/* Three days, stated plainly, with the conditions attached rather than buried. */
.drive-steps { max-width: 1100px; margin: auto; padding: 0 5vw clamp(3rem, 6vw, 5rem); }
.drive-steps h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.75rem; }
.drive-fn { color: var(--gold); text-decoration: none; font-size: .6em; vertical-align: super; padding: 0 .15em; }
.drive-fn:hover, .drive-fn:focus-visible { text-decoration: underline; }
.drive-steps__list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.drive-steps__list li { display: flex; gap: 1.25rem; border-top: 1px solid var(--line); padding: 1.15rem 0; }
.drive-steps__list li:last-child { border-bottom: 1px solid var(--line); }
.drive-steps__list > li > span {
  flex: 0 0 auto; min-width: 4.2rem; font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; color: var(--gold); padding-top: .15rem;
}
.drive-steps__list h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: .3rem; }
.drive-steps__list p { color: var(--copy); font-size: .9375rem; line-height: 1.7; max-width: 52ch; }
.drive-fineprint { margin-top: 1.25rem; color: #8b93a3; font-size: .8125rem; line-height: 1.65; max-width: 78ch; }

.wizard-success__mark svg { width: 26px; height: 26px; }

/* Persistent call/estimate bar for phones, where the form is a scroll away. */
.drive-bar { display: none; --gold: #d0b378; }
.drive-bar ~ .simple-footer { padding-bottom: 6rem; }
@media (max-width: 900px) {
  .drive-bar {
    position: fixed; inset: auto 0 0 0; z-index: 40; display: grid;
    grid-template-columns: 1fr;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(9, 11, 16, .93); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .drive-bar a {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; border-radius: 10px; font-weight: 600; font-size: .9375rem;
  }
  .drive-bar__call { background: var(--gold); color: #14161c; }
  .drive-bar__call svg { width: 17px; height: 17px; }
  .drive-steps { padding-bottom: 5.5rem; }
  .drive-estimate .wizard-eyebrow { display: none; }
}

@media (min-width: 901px) {
  .drive-steps__list { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
  .drive-steps__list li { flex-direction: column; gap: .5rem; border-bottom: 1px solid var(--line); padding: 1.25rem 0 1.5rem; }
}

.lead-field--wide { grid-column: 1 / -1; }

/* Desktop gets a wider card, and the extra width buys a layout rather than
   stretched rows: every option in one glance instead of a scrolling stack.
   Phone layout is untouched — all of this sits above the 901px line. */
@media (min-width: 901px) {
  .drive-estimate { max-width: 880px; }
  .is-wizard-ready .wizard-panels { min-height: 0; }
  .wizard-choices { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .wizard-choices .wizard-choice__surface {
    position: relative; flex-direction: column; text-align: center;
    gap: .55rem; padding: 1.25rem .85rem; min-height: 168px;
  }
  .wizard-choices .wizard-choice__check { position: absolute; top: .75rem; right: .75rem; width: 17px; height: 17px; }
  .wizard-choices .wizard-sketch { width: 74px; height: 58px; }
  .wizard-choices--size { grid-template-columns: repeat(4, 1fr); }
  .wizard-choices--size .wizard-garage { width: 84px; height: 46px; }
  .wizard-contact { grid-template-columns: repeat(3, 1fr); }
  .lead-field--wide { grid-column: auto; }
}
