/* ==========================================================================
   KiwiHost NZ — pages.css
   Additions only. Nothing here overrides style.css; every class is new.
   Load AFTER style.css.

   TWEAK POINT: the five values below are best guesses at your existing
   palette (taken from theme-color #132A40 and the .btn-green look).
   Adjust them once here and every new component follows.
   ========================================================================== */
:root{
  --kh-ink:      #132A40;
  --kh-ink-soft: #43566b;
  --kh-green:    #1f9d55;
  --kh-line:     #dfe5ec;
  --kh-wash:     #f5f8fb;
}

/* --- Sub-page header ---------------------------------------------------- */
.page-head{
  padding: 4.5rem 0 3rem;
  border-bottom: 1px solid var(--kh-line);
  background: var(--kh-wash);
}
.page-head h1{
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--kh-ink);
  font-weight: 800;
  max-width: 22ch;
}
/* .kicker and .lede are scoped to .hero / .section-head in style.css,
   so restate them here rather than relying on inheritance. */
.page-head .kicker{
  display: block;
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--kh-green);
}
.page-head .lede{
  max-width: 46rem;
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--kh-ink-soft);
  font-weight: 400;
}
.page-head .lede ul{ margin: 0; padding-left: 1.2rem; }

/* --- Diagnosis strip (home, directly under hero) ------------------------- */
.diagnose{ border-bottom: 1px solid var(--kh-line); }
.diagnose-item{
  border-left: 3px solid var(--kh-green);
  padding: .2rem 0 .2rem 1.15rem;
  height: 100%;
}
.diagnose-item b{ display:block; margin-bottom:.4rem; line-height:1.3; }
.diagnose-item span{ color: var(--kh-ink-soft); }

/* --- Plan card additions ------------------------------------------------- */
.plan-suits{
  display:block;
  margin: .35rem 0 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px dashed var(--kh-line);
  color: var(--kh-ink-soft);
  font-size: .93rem;
  line-height: 1.45;
}
.plan-bigger{
  margin-top: 1.5rem;
  border: 1px solid var(--kh-line);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  background: var(--kh-wash);
}
.plan-bigger h3{ font-size: 1.15rem; margin: 0 0 .35rem; }
.plan-bigger p{ margin: 0; color: var(--kh-ink-soft); }
.plan-bigger .from{ white-space: nowrap; font-weight: 700; color: var(--kh-ink); }

/* --- Numbered process steps --------------------------------------------- */
.steps{ counter-reset: khstep; display:grid; gap: 1.25rem; }
.step{
  counter-increment: khstep;
  position: relative;
  border: 1px solid var(--kh-line);
  border-radius: 14px;
  padding: 1.6rem 1.75rem 1.6rem 4.6rem;
  background:#fff;
}
.step::before{
  content: counter(khstep);
  position:absolute; left:1.5rem; top:1.55rem;
  width:2.1rem; height:2.1rem;
  display:grid; place-items:center;
  border-radius: 50%;
  background: var(--kh-ink); color:#fff;
  font-weight:700; font-size:.95rem;
}
.step h3{
  font-size:1.2rem; line-height:1.3; font-weight:700;
  color:var(--kh-ink); margin:0 0 .5rem;
}
.step p{ color:var(--kh-ink-soft); }
.step p{ margin:0 0 .75rem; }
.step p:last-child{ margin-bottom:0; }
.step-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  margin-top:1rem; padding-top:.9rem;
  border-top:1px dashed var(--kh-line);
  font-size:.9rem; color:var(--kh-ink-soft);
}
.step-meta b{ color: var(--kh-ink); font-weight:600; }

/* --- Case studies -------------------------------------------------------- */
.case{
  border:1px solid var(--kh-line);
  border-radius:16px;
  padding:1.9rem;
  background:#fff;
  height:100%;
}
.case .who{
  font-size:.83rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--kh-green); font-weight:700; margin-bottom:.6rem;
}
.case h3{
  font-size:1.25rem; line-height:1.3; font-weight:700;
  color:var(--kh-ink); margin:0 0 1rem;
}
.case dl{ margin:0 0 1.1rem; }
.case dt{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--kh-ink-soft); font-weight:600; margin-top:.85rem;
}
.case dd{ margin:.2rem 0 0; }
.metrics{
  display:flex; flex-wrap:wrap; gap:1.75rem;
  margin-top:1.25rem; padding-top:1.1rem;
  border-top:1px solid var(--kh-line);
}
.metric b{ display:block; font-size:1.6rem; line-height:1.1; letter-spacing:-.02em; }
.metric span{ font-size:.85rem; color:var(--kh-ink-soft); }
.anon-note{
  border-left:3px solid var(--kh-line);
  padding-left:1.15rem;
  color:var(--kh-ink-soft);
  font-size:.95rem;
}

/* --- Judgement / pull quote ---------------------------------------------- */
/* --- THIS IS A TEST MESSAGE ------ */
.judgement{
  border:1px solid var(--kh-line);
  border-left:4px solid var(--kh-ink);
  border-radius:0 14px 14px 0;
  padding:1.6rem 1.9rem;
  background:var(--kh-wash);
}
.judgement h3{
  font-size:1.1rem; line-height:1.3; font-weight:700;
  color:var(--kh-ink); margin:0 0 .6rem;
}
.judgement p{ margin:0 0 .75rem; }
.judgement p:last-child{ margin-bottom:0; }
.pullquote{
  font-size:clamp(1.25rem, 2.4vw, 1.65rem);
  line-height:1.35; letter-spacing:-.015em;
  font-weight:600; max-width:44rem;
}

/* --- Who it's for / not for ---------------------------------------------- */
.fitlist{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.fitlist li{ position:relative; padding-left:1.9rem; }
.fitlist li::before{
  position:absolute; left:0; top:0;
  font-weight:700;
}
.fit-yes li::before{ content:"✓"; color:var(--kh-green); }
.fit-no  li::before{ content:"—"; color:var(--kh-ink-soft); }

/* --- Enquiry form -------------------------------------------------------- */
.enquiry{
  border:1px solid var(--kh-line);
  border-radius:16px;
  padding:1.9rem;
  background:#fff;
}
.enquiry label{
  display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem;
}
.enquiry .hint{ display:block; font-weight:400; color:var(--kh-ink-soft); font-size:.85rem; }
.enquiry input[type=text],
.enquiry input[type=email],
.enquiry textarea{
  width:100%;
  border:1px solid var(--kh-line);
  border-radius:10px;
  padding:.7rem .85rem;
  font: inherit;
  background:#fff;
  color:var(--kh-ink);
}
.enquiry input:focus-visible,
.enquiry textarea:focus-visible{
  outline:2px solid var(--kh-green);
  outline-offset:1px;
  border-color:var(--kh-green);
}
.enquiry .field{ margin-bottom:1.1rem; }
.enquiry .pot{ position:absolute; left:-9999px; }
.form-note{ font-size:.9rem; color:var(--kh-ink-soft); margin-top:.9rem; }

/* --- Small shared bits ---------------------------------------------------- */
.lead-in{ max-width:46rem; }
.tight-list li + li{ margin-top:.5rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}