/* engine.css — the five sections the GEO template adds on top of style.css.
   Loaded AFTER style.css and defines only new class names: it overrides nothing,
   so it cannot disturb the 343 hand-built pages.
   Tokens (--clay, --amber, --line, --r, --disp …) come from style.css :root.
   Deploy to /assets/css/engine.css and bump the ?v= in data/site.json on change. */

/* ---------------------------------------------------------- key takeaways */
.takeaways{padding-top:0}
.takeaways .kt-list{list-style:none;display:grid;gap:.85rem;margin-top:1.4rem}
.kt-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.15rem;font-size:1.04rem;color:var(--ink-2);line-height:1.5}
.kt-tick{display:inline-flex;flex:none;color:var(--clay);margin-top:.12rem}
.kt-tick svg{width:20px;height:20px}
.kt-item>span:last-child{min-width:0}

/* ---------------------------------------------------------- who it's for */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.25rem}
.aud-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.9rem 1.7rem;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.aud-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--sand);color:var(--clay-d);margin-bottom:1.1rem}
.aud-ico svg{width:26px;height:26px}
.aud-card h3{font-family:var(--disp);font-weight:700;font-size:1.26rem;letter-spacing:-.01em;margin-bottom:.5rem}
.aud-card p{color:var(--ink-2);font-size:1.01rem;line-height:1.55}

/* ---------------------------------------------------------- typical problems */
.prob-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prob-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;
  background:var(--paper);padding:1.5rem 1.6rem}
.prob-n{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:var(--clay);
  letter-spacing:.02em;line-height:1.5;flex:none}
.prob-item p{color:var(--ink-2);font-size:1.03rem;line-height:1.56;min-width:0}

/* ---------------------------------------------------------- costs */
.cost-intro{max-width:72ch;font-size:1.12rem;color:var(--ink-2);line-height:1.6;margin-bottom:2.4rem}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1.6rem 2.2rem}
.cost-factor{padding-top:1.1rem;border-top:2px solid var(--clay)}
.cost-factor h3{font-family:var(--disp);font-weight:700;font-size:1.14rem;margin-bottom:.4rem}
.cost-factor p{color:var(--ink-2);font-size:1rem;line-height:1.55}

.cost-table-wrap{overflow-x:auto;margin:0 0 2.6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cost-table{width:100%;border-collapse:collapse;font-size:1.02rem;min-width:420px}
.cost-table caption{caption-side:bottom;padding:.9rem 1.2rem;font-size:.9rem;color:var(--muted);text-align:left}
.cost-table th,.cost-table td{padding:.95rem 1.2rem;text-align:left;border-bottom:1px solid var(--line)}
.cost-table thead th{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay-d);background:var(--sand)}
.cost-table tbody th{font-weight:600;color:var(--ink)}
.cost-table tbody td{font-weight:700;white-space:nowrap}
.cost-table tbody tr:last-child th,.cost-table tbody tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------- local information
   Full-width horizontal bands. The first version put the prose in a tall left
   column beside a facts panel, which left a large empty area under the text
   whenever the panel ran longer than the paragraphs - which was always. */
/* style.css sets .answer-box{padding-bottom:0} on purpose - the following section
   is expected to supply the gap. The old .takeaways section had no background so a
   flush join was invisible; this one has a coloured band, so zero padding put the
   band edge hard against the answer card. margin-top keeps bone background between
   the card and the band; padding-top gives the band its own breathing room. */
.localinfo{background:var(--paper);
  margin-top:clamp(44px,5.5vw,80px);
  padding-top:clamp(44px,5.5vw,80px)}

.lf-top{max-width:68ch;margin-bottom:2.2rem}
.lf-top p{color:var(--ink-2);font-size:1.08rem;line-height:1.68;margin-bottom:.9rem}
.lf-top p:last-child{margin-bottom:0}

/* headline facts as a row of cards, not a stacked label/value list */
.lf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
  gap:1rem;margin-bottom:2.6rem}
.lf-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;min-width:0;
  box-shadow:0 1px 2px rgba(23,19,14,.03)}
.lf-stat .lf-k{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.3}
.lf-stat .lf-v{font-family:var(--disp);font-weight:700;font-size:1.28rem;letter-spacing:-.015em;
  color:var(--ink);line-height:1.15;overflow-wrap:anywhere}

/* landmarks as a card grid, so a long school name wraps on its own line
   instead of competing with the kind chip for horizontal space */
.lf-marks .eyebrow{margin-bottom:1.1rem}
/* Explicit columns, not auto-fit: six landmarks over auto-fit's four columns
   leaves a last row of two stretched cards. Three columns gives two clean rows. */
.lf-mark-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media(max-width:1000px){.lf-mark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.lf-mark-grid{grid-template-columns:minmax(0,1fr)}}
.lf-mark-grid li{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.6rem;min-width:0;
  transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.lf-mark-grid li:hover{border-color:var(--clay);transform:translateY(-2px)}
.lm-n{font-weight:600;font-size:1rem;line-height:1.38;color:var(--ink);overflow-wrap:anywhere}
.lm-meta{display:flex;align-items:center;gap:.6rem;margin-top:auto}
.lm-k{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clay-d);background:var(--sand);border-radius:100px;padding:.24rem .62rem;white-space:nowrap}
.lm-d{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.lf-near{margin-top:2.6rem}
.lf-near .eyebrow{margin-bottom:1.1rem}
.area-chip i{font-style:normal;color:var(--muted);font-weight:500;margin-left:.35rem}

@media(max-width:600px){
  .lf-top p{font-size:1.02rem}
  .lf-stat{padding:.95rem 1.1rem}
  .lf-stat .lf-v{font-size:1.18rem}
  .lf-stats{gap:.7rem;margin-bottom:2rem}
  .lf-mark-grid{gap:.6rem}
}

/* ---------------------------------------------------------- /areas/ index */
.district-list{display:grid;gap:2.4rem}
.district-head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.district-pc{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--clay)}
.district-note{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.areas-index .area-grid{display:flex;flex-wrap:wrap;gap:.55rem}

/* ---------------------------------------------------------- blog clusters */
.blog-cluster{margin-bottom:clamp(40px,5vw,72px)}
.blog-cluster:last-child{margin-bottom:0}
.blog-cluster-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.blog-cluster-head h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem);
  letter-spacing:-.015em;line-height:1.1}
.blog-cluster-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;
  color:var(--clay-d);white-space:nowrap;transition:gap .25s,color .25s}
.blog-cluster-link svg{width:16px;height:16px}
.blog-cluster-link:hover{gap:.7rem;color:var(--clay)}
@media(max-width:560px){
  .blog-cluster-head{margin-bottom:1.1rem}
  .blog-cluster-link{font-size:.84rem}
}

/* ---------------------------------------------------------- quote form additions
   New controls only - the existing .contact-form, .f-row, label, input, select and
   .btn styling in style.css is untouched. */
.f-file-wrap{margin-bottom:1rem}
.f-file-label{display:block;font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:.5rem}
.f-file-label i{font-style:normal;font-weight:400;color:var(--muted);font-size:.88rem}
.f-file{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  border:1.5px dashed var(--line);border-radius:12px;padding:.85rem 1rem;cursor:pointer;
  background:var(--paper);transition:border-color .25s,background .25s}
.f-file:hover{border-color:var(--clay);background:var(--sand)}
.f-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.f-file input[type=file]:focus-visible + .f-file-btn{outline:2px solid var(--clay);outline-offset:3px}
.f-file-btn{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;
  color:var(--clay-d);white-space:nowrap}
.f-file-btn svg{width:17px;height:17px}
.f-file-note{font-size:.84rem;color:var(--muted);min-width:0}

.f-choice{border:0;padding:0;margin:0 0 1.1rem}
.f-choice legend{padding:0;font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:.55rem}
.f-radio{display:inline-flex;align-items:center;gap:.45rem;margin:0 .5rem .5rem 0;
  border:1.5px solid var(--line);border-radius:100px;padding:.5rem .95rem;cursor:pointer;
  font-size:.92rem;transition:border-color .2s,background .2s}
.f-radio input{accent-color:var(--clay);margin:0}
.f-radio:hover{border-color:var(--clay)}
.f-radio:has(input:checked){border-color:var(--clay);background:var(--sand);font-weight:600}
@media(max-width:480px){
  .f-file{padding:.75rem .85rem}
  .f-radio{font-size:.88rem;padding:.45rem .8rem}
}

/* ---------------------------------------------------------- visible review line */
.hero-badges .hb-rating{display:inline-flex;align-items:center;gap:.4rem}
.hb-stars{color:var(--amber);letter-spacing:.06em;font-size:.95em;line-height:1}

/* ---------- what-we-check cards (per-area survey points) ----------
   Sits between the specs band and the process band. No background of its own,
   so it needs none of the margin-top/padding-top compensation that a coloured
   band after .answer-box does. Mirrors .cost-factor: clay rule, display h3, body p. */
.checks-sec .sec-head{margin-bottom:2.2rem}
.checks-sec .sec-head .lead{max-width:72ch;color:var(--ink-2);font-size:1.08rem;line-height:1.62;margin-top:.9rem}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.7rem 2.2rem}
.chk-card{padding-top:1.1rem;border-top:2px solid var(--clay)}
.chk-card h3{font-family:var(--disp);font-weight:700;font-size:1.16rem;letter-spacing:-.01em;
  margin-bottom:.5rem;color:var(--ink)}
.chk-card p{color:var(--ink-2);font-size:1.01rem;line-height:1.58}
@media (max-width:640px){
  .chk-grid{gap:1.5rem}
  .chk-card h3{font-size:1.1rem}
  .checks-sec .sec-head .lead{font-size:1.01rem}
}