/* ==========================================================================
   DMV Home Fix - 2. Reusable page components
   Every component is a class an Elementor container or widget can carry, so
   editors change copy in Elementor and never touch styling.
   ========================================================================== */

.dmv-sec{padding:var(--dmv-s7) 0}
.dmv-sec--tight{padding-top:0}
.dmv-sec--linen{background:var(--dmv-linen)}
.dmv-sec--forest{background:var(--dmv-forest);color:var(--dmv-ivory)}
.dmv-sec--forest h2{color:var(--dmv-ivory)}
.dmv-sec--forest .dmv-lede{color:#CFC6B5}
.dmv-sec--forest .dmv-note{color:#9FAE9F}
.dmv-sec__head{margin-bottom:var(--dmv-s4)}

/* --- Hero: text card overlaps the photo band so the CTAs stay high ------- */

.dmv-hero__media{height:196px;overflow:hidden;background:var(--dmv-linen)}
.dmv-hero__media img{width:100%;height:100%;object-fit:cover}
.dmv-hero__card{position:relative;margin-top:-22px;background:var(--dmv-ivory);
  border-radius:20px 20px 0 0;padding:var(--dmv-s5) var(--dmv-gutter) var(--dmv-s5)}
.dmv-hero__tag{display:inline;font-size:16px;font-weight:600;
  color:var(--dmv-forest);
  background:linear-gradient(var(--dmv-copper),var(--dmv-copper)) 0 88%/100% 2px no-repeat;
  padding-bottom:3px}
.dmv-hero__actions{display:flex;flex-direction:column;gap:10px;
  margin-top:var(--dmv-s4)}

/* Placeholder frame for assets the owner still has to supply. */
.dmv-ph{background:var(--dmv-linen);border:1px dashed rgba(27,59,43,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:5px;padding:14px}
.dmv-ph b{font-size:12.5px;font-weight:600;color:var(--dmv-forest);line-height:1.35}
.dmv-ph span{font-size:11.5px;color:#6B5A46;line-height:1.4}

/* --- Trust strip -------------------------------------------------------- */

.dmv-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dmv-trust__i{padding:var(--dmv-s4) var(--dmv-s3);
  border-top:1px solid rgba(27,59,43,.14);
  border-right:1px solid rgba(27,59,43,.14)}
.dmv-trust__i:nth-child(2n){border-right:0}
.dmv-trust__i p{font-size:13.5px;font-weight:600;color:var(--dmv-forest);
  line-height:1.35;margin-top:10px}

/* --- Ruled editorial list (services, areas, anything enumerable) -------- */

.dmv-list{list-style:none;margin:0;padding:0}
.dmv-list li{border-bottom:1px solid var(--dmv-rule)}
.dmv-list a,.dmv-list .dmv-list__row{display:flex;align-items:center;gap:14px;
  padding:var(--dmv-s3) 0;text-decoration:none;min-height:var(--dmv-tap)}
.dmv-list__t{font-size:16.5px;font-weight:600;color:var(--dmv-forest)}
.dmv-list__d{font-size:13px;color:var(--dmv-ink-2);margin-top:3px;line-height:1.45}
.dmv-list__chev{width:18px;height:18px;flex:none;color:var(--dmv-copper-ink)}

/* --- Numbered process (the order carries real meaning) ------------------ */

.dmv-steps{list-style:none;margin:var(--dmv-s4) 0 0;padding:0}
.dmv-steps li{display:flex;gap:14px;padding-bottom:var(--dmv-s4)}
.dmv-steps li:last-child{padding-bottom:0}
.dmv-steps__n{font-family:var(--dmv-serif);font-size:15px;
  color:var(--dmv-copper-ink);width:24px;flex:none;padding-top:2px}

/* --- To-do builder: checked state IS the completion line ---------------- */

.dmv-todo{margin-top:var(--dmv-s4)}
.dmv .dmv-todo__i{display:grid;grid-template-columns:35px minmax(0,1fr);align-items:center;min-height:50px;padding:6px 12px;background:var(--dmv-ivory);border:1px solid var(--dmv-rule);border-radius:var(--dmv-radius);margin-bottom:8px;cursor:pointer}
.dmv .dmv-todo__i>input{grid-column:1;justify-self:start}
.dmv .dmv-todo__i>.dmv-todo__l{grid-column:2;min-width:0}
.dmv-todo__i input{appearance:none;-webkit-appearance:none;width:22px;height:22px;
  flex:none;border:1.5px solid var(--dmv-forest);border-radius:3px;margin:0;
  cursor:pointer;position:relative;background:transparent}
.dmv-todo__i input:checked{background:var(--dmv-copper);border-color:var(--dmv-copper)}
.dmv-todo__i input:checked::after{content:"";position:absolute;left:7px;top:3px;
  width:5px;height:11px;border:solid #FFF7F2;border-width:0 2px 2px 0;
  transform:rotate(43deg)}
.dmv-todo__l{font-size:15.5px;color:var(--dmv-ink)}
.dmv-todo__i input:checked ~ .dmv-todo__l{color:var(--dmv-ink-2);
  text-decoration:line-through;text-decoration-color:var(--dmv-copper);
  text-decoration-thickness:2px}
.dmv-field{display:block;font-size:14px;font-weight:600;
  color:var(--dmv-forest);margin:var(--dmv-s3) 0 6px}
.dmv-input{width:100%;min-height:48px;font-size:16px;font-family:inherit;
  color:var(--dmv-ink);background:var(--dmv-ivory);
  border:1px solid var(--dmv-rule);border-radius:var(--dmv-radius);padding:0 12px}
.dmv-inline{display:flex;gap:8px}
.dmv-err{font-size:13.5px;color:#8A2B22;margin-top:6px}
.dmv-live{font-size:13.5px;color:var(--dmv-ink-2);margin-top:10px}

/* --- Example pairs (honest labelling, never called client work) --------- */

.dmv-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:var(--dmv-s4)}
.dmv-pairs figure{margin:0}
.dmv-pairs img{border-radius:8px}
.dmv-pairs figcaption{font-size:12.5px;color:var(--dmv-ink-2);margin-top:8px;
  line-height:1.45}

/* --- Audience gateway cards -------------------------------------------- */

.dmv-gate{border:1px solid var(--dmv-rule);border-radius:8px;
  padding:var(--dmv-s4) var(--dmv-s3);margin-bottom:var(--dmv-s2);
  background:var(--dmv-ivory);display:block;text-decoration:none}
.dmv-gate:last-child{margin-bottom:0}
.dmv-gate__go{margin-top:var(--dmv-s2);color:var(--dmv-copper-ink);
  font-size:15px;font-weight:600}

/* --- Area pills --------------------------------------------------------- */

.dmv-pill{display:inline-block;font-size:13px;color:var(--dmv-forest);
  border:1px solid rgba(27,59,43,.3);border-radius:999px;
  padding:7px 13px;margin:0 6px 8px 0}

/* --- FAQ accordion ------------------------------------------------------ */

.dmv-faq{border-bottom:1px solid var(--dmv-rule)}
.dmv-faq summary{list-style:none;min-height:52px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;
  font-size:15.5px;font-weight:600;color:var(--dmv-forest);cursor:pointer;
  padding:var(--dmv-s2) 0}
.dmv-faq summary::-webkit-details-marker{display:none}
.dmv-faq summary svg{width:18px;height:18px;flex:none;
  color:var(--dmv-copper-ink);transition:transform .18s ease}
.dmv-faq[open] summary svg{transform:rotate(180deg)}
.dmv-faq__a{padding-bottom:var(--dmv-s3);font-size:14.5px;line-height:1.6;
  color:var(--dmv-ink-2)}
@media (prefers-reduced-motion:reduce){.dmv-faq summary svg{transition:none}}

/* --- Breakpoints -------------------------------------------------------- */

@media (min-width:768px){
  .dmv-sec{padding:var(--dmv-s8) 0}
  .dmv-hero__media{height:380px}
  .dmv-hero__card{margin-top:-40px;border-radius:24px 24px 0 0;
    padding:var(--dmv-s6) var(--dmv-s6) var(--dmv-s6);max-width:760px}
  .dmv-hero__actions{flex-direction:row}
  /* Block buttons keep width:100%; in the desktop row that stacked two
     full-width anchors side by side (672.7px each at 768 = 1395px scroll
     width). width:auto + flex:1 1 0 + min-width:0 makes overflow impossible
     by construction: the pair can never exceed the flex container. */
  .dmv-hero__actions>.dmv-btn--block{width:auto;flex:1 1 0;min-width:0}
  .dmv-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dmv-trust__i:nth-child(2n){border-right:1px solid rgba(27,59,43,.14)}
  .dmv-trust__i:last-child{border-right:0}
  .dmv-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--dmv-s5)}
  .dmv-pairs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dmv-gate{margin-bottom:0}
  .dmv-sec__head{max-width:620px}
}
@media (min-width:1024px){
  .dmv-hero__card{margin-top:-72px;padding:var(--dmv-s7);max-width:860px}
  .dmv-list__t{font-size:18px}
}

/* --- Late additions ---------------------------------------------------- */
.dmv-list__t,.dmv-list__d{display:block}
.dmv-list li>a:hover .dmv-list__t{text-decoration:underline;text-decoration-color:var(--dmv-copper);text-underline-offset:4px}
.dmv-sec__anchor{display:block;height:0;scroll-margin-top:70px}
#dmv-hero-end{display:block;height:1px}

/* --- Desktop expansion (768/1024/1440 pass) ---------------------------- */
@media (min-width:768px){
  .dmv-list{max-width:760px}
  .dmv-steps{max-width:640px}
  .dmv-faq{max-width:760px}
  .dmv-todo,.dmv-inline,.dmv-live{max-width:560px}
  .dmv-sec .dmv-btn--block,.dmv-ft .dmv-btn--block{max-width:420px}
  .dmv-ft__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}

/* --- Estimate form ----------------------------------------------------- */
.dmv-form{display:grid;gap:20px;max-width:640px}
.dmv-fg label{display:block;font-size:14px;font-weight:600;color:var(--dmv-forest);margin-bottom:6px}
.dmv-fg .dmv-hint{font-size:12.5px;color:var(--dmv-ink-2);margin:-2px 0 6px}
textarea.dmv-input{min-height:110px;padding:12px;line-height:1.5;resize:vertical}
select.dmv-input{height:48px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dmv-forest) 50%),linear-gradient(135deg,var(--dmv-forest) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.dmv-svc{display:grid;gap:8px}
.dmv .dmv-upload{display:block;min-height:96px;border:1.5px dashed rgba(27,59,43,.45);border-radius:8px;background:var(--dmv-ivory);color:var(--dmv-forest);font-weight:600;font-size:15px;cursor:pointer;padding:22px 16px;text-align:center}
.dmv .dmv-upload>span{display:block;font-weight:400;font-size:12.5px;color:var(--dmv-ink-2);margin-top:6px;max-width:340px;margin-left:auto;margin-right:auto}
.dmv-upload input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.dmv-upload:focus-within{outline:3px solid var(--dmv-copper);outline-offset:2px}
.dmv-thumbs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0;padding:0}
.dmv-thumb{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--dmv-linen);display:flex;align-items:center;justify-content:center}
.dmv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dmv-thumb__ext{font-size:12px;font-weight:600;color:var(--dmv-ink-2)}
.dmv-thumb__rm{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;border-radius:6px;background:rgba(16,36,26,.78);color:#F9F8F5;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dmv-thumb__rm:focus-visible{outline:3px solid var(--dmv-copper)}
.dmv-summary{border:1.5px solid #8A2B22;border-radius:8px;background:#FBF1EF;color:#5C1D17;padding:14px 16px;font-size:14.5px}
.dmv-summary ul{margin:8px 0 0;padding-left:18px}
.dmv-summary a{color:#8A2B22;font-weight:600}
.dmv-summary:focus{outline:3px solid #8A2B22;outline-offset:2px}
.dmv-done{border:1px solid var(--dmv-rule);border-radius:12px;background:var(--dmv-ivory);padding:var(--dmv-s5) var(--dmv-s4)}
.dmv-done:focus{outline:3px solid var(--dmv-copper);outline-offset:2px}
#dmv-est-done{display:none}
#dmv-est-done.is-shown,#dmv-est-done:target{display:block}
#dmv-est-done[hidden]{display:none}
@media (min-width:768px){.dmv-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}.dmv-svc{grid-template-columns:repeat(2,minmax(0,1fr))}}

#dmv-todo{scroll-margin-top:70px}