/* ============================================================
   Inner pages, hero, prose, service list, case study,
   pricing tables, FAQ, contact, CTA band
   ============================================================ */

/* ---------- Page hero ---------- */
.phero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  padding-block: clamp(var(--s-8), 8vw, 116px) clamp(var(--s-8), 7vw, 96px);
}
.phero__glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 170%;
  z-index: -1;
  background:
    radial-gradient(46% 40% at 12% 6%, rgba(14, 185, 117, 0.14) 0%, transparent 66%),
    radial-gradient(46% 38% at 86% 12%, rgba(242, 238, 228, 0.75) 0%, transparent 70%),
    radial-gradient(60% 46% at 58% 96%, rgba(214, 206, 189, 0.85) 0%, transparent 74%);
}
.phero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  max-width: 18ch;
}
.phero .lede {
  margin-top: var(--s-6);
  max-width: 58ch;
}

/* ---------- Long-form prose ---------- */
.prose {
  max-width: 68ch;
}
.prose--wide {
  max-width: 74ch;
}
.prose h3 {
  margin: var(--s-8) 0 var(--s-4);
}
.prose h3:first-child {
  margin-top: 0;
}
.prose p {
  color: var(--on-light-mid);
  line-height: 1.78;
  margin-bottom: var(--s-4);
}
.prose p:last-child {
  margin-bottom: 0;
}

/* ---------- Tick lists ---------- */
.ticks {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ticks li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--on-light-mid);
  font-size: 0.97rem;
  line-height: 1.6;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--jade-700);
  border-bottom: 2px solid var(--jade-700);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.ticks--lg li {
  font-size: 1.02rem;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--paper-line);
}
.ticks--lg li:last-child {
  border-bottom: 0;
}

.numlist {
  margin: var(--s-4) 0 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--on-light-mid);
  font-size: 0.97rem;
}
.numlist li::marker {
  color: var(--jade-700);
  font-weight: 600;
}

/* ---------- Services list ---------- */
.svcs {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.svc {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-7);
  border-top: 1px solid var(--paper-line);
}
.svc:first-child {
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 900px) {
  .svc {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--s-8);
  }
}
.svc__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}
.svc__num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--jade-700);
  flex: none;
}
.svc__body p {
  color: var(--on-light-mid);
  line-height: 1.75;
}

/* ---------- Full case study ---------- */
.casefull__head {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
@media (min-width: 900px) {
  .casefull__head {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-8);
    align-items: end;
  }
}
.casefull__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--paper-line);
}
.casefull__meta dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-low);
  margin-bottom: var(--s-2);
}
.casefull__meta dd {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 500;
}

.shot {
  margin: 0 0 var(--s-8);
}
.shot--phone img {
  width: 100%;
  height: auto;
}

/* ---------- Pricing extras ---------- */
.tier .tier__turn {
  margin-bottom: var(--s-4);
  font-size: 0.85rem;
  color: var(--on-light-low);
}

.pricing__cols {
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 900px) {
  .pricing__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }
}

.ptable {
  width: 100%;
  margin-top: var(--s-5);
  border-collapse: collapse;
  font-size: 0.97rem;
}
.ptable th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-low);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--paper-line);
}
.ptable th:last-child,
.ptable td:last-child {
  text-align: right;
  white-space: nowrap;
}
.ptable td {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--paper-line);
  color: var(--on-light-mid);
}
.ptable tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 960px) {
  .contact {
    grid-template-columns: 1.25fr 0.85fr;
    gap: var(--s-9);
    align-items: start;
  }
}
.contact__list {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.contact__list li {
  display: flex;
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--paper-line);
}
.contact__list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-sm);
  background: rgba(5, 135, 90, 0.11);
  color: var(--jade-700);
}
.contact__list h3 {
  margin-bottom: var(--s-2);
}
.contact__value {
  display: inline-block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--jade-700);
  margin-bottom: var(--s-2);
  transition: color var(--dur) var(--ease-out);
}
.contact__value:hover {
  color: var(--jade-800);
}
.contact__value:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
  border-radius: 4px;
}
.contact__list p {
  color: var(--on-light-mid);
  font-size: 0.95rem;
}

.contact__aside {
  background: var(--paper-alt);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-raised);
}
.contact__aside h3 {
  margin-bottom: var(--s-3);
}
.contact__aside > p {
  color: var(--on-light-mid);
  font-size: 0.95rem;
}
.contact__aside hr {
  margin: var(--s-6) 0;
  border: 0;
  border-top: 1px solid var(--paper-line);
}

/* ---------- Fact strip ---------- */
.factstrip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin: var(--s-9) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--paper-line);
}
@media (min-width: 760px) {
  .factstrip {
    grid-template-columns: repeat(4, 1fr);
  }
}
.factstrip dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-low);
  margin-bottom: var(--s-2);
}
.factstrip dd {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ---------- Closing CTA band ---------- */
.ctaband {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .ctaband {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-8);
  }
}
.ctaband h2 {
  max-width: 16ch;
}
.ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .ctaband__actions {
    justify-content: flex-end;
  }
}

/* --- Page hero: headline left, lede right, so the top of every inner page
       isn't the same left-aligned block over an empty right half. --- */
.phero__grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .phero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-9);
    align-items: end;
  }
  .phero__grid .lede {
    margin-top: 0;
    padding-bottom: 10px;
  }
}