/* Mast Innovations — reviews + finance page additions. Shared shell lives in
   style.css; every value here traces to design-system.md. */

/* Native scroll on these pages, same reasoning as portfolio/about: the shell's
   smooth-scroll animates scripted and keyboard scrolls. Loaded after style.css. */
html{scroll-behavior:auto}

/* Editorial head on parchment: the content is the picture on these pages. */
.rev-head{background:var(--parchment);padding:96px 0 16px}
.rev-head .small{display:block;margin-bottom:16px;color:var(--muted)}
.rev-head .h2{margin-bottom:24px;max-width:20ch}
.rev-head .lead{max-width:48ch;color:var(--body)}

.rev-wall{padding-top:48px}
/* All sixteen: three columns on wide screens so the wall reads as a wall. */
@media (min-width:1100px){
  .rev-wall .tcards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .rev-wall .tcards{grid-template-columns:1fr}
}

/* Finance layout: copy column + representative-example card. */
.fin-body{padding-top:48px}
.fin-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
@media (max-width:900px){.fin-grid{grid-template-columns:1fr}}
.fin-copy p{max-width:55ch}
.fin-copy p + p,.fin-copy ul + p{margin-top:16px}
.fin-copy .h3{margin-bottom:16px}
.fin-options{margin:16px 0;padding:0;list-style:none}
.fin-options li{border-top:1px solid var(--line);padding:12px 0}
.fin-options li:last-child{border-bottom:1px solid var(--line)}
.fin-options strong{color:var(--copper);font-weight:600}
.fin-example{background:var(--parchment-raised);border:1px solid var(--line);
  border-radius:4px;padding:32px}
.fin-example .h3{margin-bottom:12px}
.fin-table{width:100%;border-collapse:collapse;margin:16px 0}
.fin-table td{border-top:1px solid var(--line);padding:10px 0;font-size:15px}
.fin-table td:last-child{text-align:right;color:var(--ink);font-weight:600}
.fin-risk{margin-top:8px;color:var(--muted);letter-spacing:0.02em;text-transform:none;
  font-weight:400;line-height:1.5}

/* Checkatrade handoff under the six cards. */
.rev-more{margin-top:48px;text-align:center}
.rev-more .lead strong{color:var(--copper);font-weight:600}
.rev-more .btn{margin-top:24px}

.fin-actions{margin:24px 0;display:flex;gap:16px;flex-wrap:wrap}

/* Consultation enquiry form. */
.enq{background:var(--parchment);padding-top:96px}
.enq-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
@media (max-width:900px){.enq-grid{grid-template-columns:1fr;gap:32px}}
.enq-intro .small{display:block;margin-bottom:16px;color:var(--muted)}
.enq-intro .h2{margin-bottom:24px;max-width:16ch}
.enq-points{margin:24px 0 0;padding:0;list-style:none}
.enq-points li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);
  color:var(--body);max-width:42ch}
.enq-points li:last-child{border-bottom:1px solid var(--line)}
.enq-points li::before{content:"";position:absolute;left:2px;top:20px;width:8px;height:8px;
  border-radius:50%;background:var(--copper)}
.enq-alt{margin-top:24px;color:var(--muted);font-size:15px}
.enq-alt a{color:var(--ink);font-weight:600}

.enq-card{background:var(--parchment-raised);border:1px solid var(--line);border-radius:4px;
  padding:40px}
@media (max-width:640px){.enq-card{padding:28px}}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.enq-row{grid-template-columns:1fr}}
.enq-field{margin-bottom:20px}
.enq-field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.enq-field label span{color:var(--copper)}
.enq-field input,.enq-field select,.enq-field textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--parchment);border:1px solid var(--line);border-radius:4px;
  transition:border-color .18s ease,box-shadow .18s ease}
.enq-field textarea{resize:vertical;min-height:112px}
.enq-field input:focus,.enq-field select:focus,.enq-field textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(169,111,68,0.16)}
/* Only flag a field once the visitor has actually interacted with it. :invalid alone
   paints every empty required field red on page load, which reads as broken. */
.enq-field input:user-invalid,.enq-field textarea:user-invalid{border-color:#9c4221}
.enq-card .btn{width:100%;margin-top:8px;justify-content:center;text-align:center}
.enq-card .btn[disabled]{opacity:.6;pointer-events:none}
.enq-status{margin-top:16px;font-size:15px;line-height:1.5;min-height:1px}
.enq-status.is-note{color:var(--muted)}
.enq-status.is-ok{color:var(--copper);font-weight:600}
.enq-status.is-bad{color:#9c4221;font-weight:600}

/* "Contact Us" heading above the email / phone / map block. */
.reach-head{margin-bottom:48px}
.reach-head .h2{margin-bottom:16px}