/* ═══════════════════════════════════════════════════════════════════
   Extra Agency — Webflow publish fixes
   Re-adds the descendant / combinator / breakpoint rules that Webflow's
   HTML-paste tool dropped when compiling the site CSS. Loaded last, so
   it wins ties. Single-class rules already survive in the main CSS.
═══════════════════════════════════════════════════════════════════ */

/* ── Header / nav ─────────────────────────────────────────────── */
.brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand-word .x-cap { font-size: 1.06em; }
.nav-links a {
  font-family: 'DM Mono', monospace; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: #4A4846; text-decoration: none; padding: 4px 0;
}
.nav-links a:hover { color: #2C2C2C; }
.nav-links a.nav-cta { color: #F4F2EF; text-decoration: none; }
.nav-links a.nav-cta:hover { color: #F4F2EF; }
.btn { text-decoration: none; justify-content: center; text-align: center; }
.btn-arrow { display: none !important; }
.btn-arrow::after {
  content: ''; position: absolute; right: -1px; top: -5px; width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
.btn:hover .btn-arrow { width: 34px; }

/* ── Eyebrows / titles / leads on dark + forest bands ─────────── */
.band--forest .eyebrow, .band--dark .eyebrow { color: #34B27B; }
.band--forest .section-title, .band--dark .section-title { color: #F4F2EF; }
.band--forest .section-lead { color: rgba(244, 242, 239, .86); }
.band--dark .section-lead { color: #D9D6D1; }

/* ── Approach cards ───────────────────────────────────────────── */
.appro h3 {
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 1.1vw + .95rem, 1.85rem); letter-spacing: -.02em;
  text-transform: uppercase; margin: 22px 0 12px;
}
.appro p { font-family: 'Mulish', sans-serif; color: #4A4846; margin: 0; line-height: 1.6; }

/* ── Capabilities ─────────────────────────────────────────────── */
.cap h3 {
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 1.6rem;
  line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; color: #F4F2EF; margin: 0;
}
.cap p { font-family: 'Mulish', sans-serif; margin: 14px 0 0; font-size: .98rem; line-height: 1.45; color: rgba(244, 242, 239, .82); }
.cap--spotlight .cap-num { color: #34B27B; }
.tag {
  font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: #F4F2EF; background: rgba(52, 178, 123, .22);
  padding: 7px 11px; border-radius: 5px; white-space: nowrap;
}

/* ── Channels ─────────────────────────────────────────────────── */
.ch-pillar-head h3 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.ch-pillar + .ch-pillar { padding-right: 0; padding-left: 56px; border-left: 1px solid #D9D6D1; }
.chip {
  font-family: 'DM Mono', monospace; font-size: .8rem; letter-spacing: .01em; color: #1E6F4E;
  background: rgba(52, 178, 123, .13); border: 1px solid rgba(52, 178, 123, .22);
  padding: 8px 13px; border-radius: 6px; white-space: nowrap;
}
.chip:hover { background: rgba(52, 178, 123, .22); }
.band--dark .chip { color: #34B27B; border-color: rgba(52, 178, 123, .28); background: rgba(52, 178, 123, .1); }

/* ── Measurement ──────────────────────────────────────────────── */
.meas h3 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: #F4F2EF; margin: 0; }
.meas p { font-family: 'Mulish', sans-serif; margin: 12px 0 0; color: #D9D6D1; font-size: .98rem; line-height: 1.4; }
.meas .chips { margin-top: auto; padding-top: 22px; }

/* ── Platforms logo wall + Where-we-activate logo tiles ───────── */
.logo-tile span { font-family: 'DM Mono', monospace; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #9B978F; }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Process ──────────────────────────────────────────────────── */
.step + .step { padding-left: 24px; border-left: 1px solid #D9D6D1; }
.step h3 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 14px; }
.step p { font-family: 'Mulish', sans-serif; color: #4A4846; font-size: .98rem; line-height: 1.42; margin: 0; }

/* ── Why Extra ────────────────────────────────────────────────── */
.why-card h3 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1.04; letter-spacing: -.02em; text-transform: uppercase; margin: 26px 0 14px; }
.why-card p { font-family: 'Mulish', sans-serif; color: #4A4846; font-size: .98rem; line-height: 1.45; margin: 0; }

/* ── Contact ──────────────────────────────────────────────────── */
.contact-details li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(228, 225, 220, .18); }
a.cd-value { text-decoration: none; }
a.cd-value:hover { color: #34B27B; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer-nav a { font-family: 'DM Mono', monospace; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #D9D6D1; text-decoration: none; }
.footer-nav a:hover { color: #34B27B; }
.footer-brand .brand-mark { color: #F4F2EF; }
.footer-brand .brand-word { color: #F4F2EF; }
.footer-brand .brand-sub { color: #A9A7A2; }

/* ── Forms (Brief + Audit pages) ──────────────────────────────── */
.field label { font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #4A4846; }
.field input, .field select, .field textarea {
  font-family: 'Mulish', sans-serif; background: #fff; border: 1px solid #D9D6D1; border-radius: 7px;
  padding: 12px 14px; font-size: .98rem; color: #2C2C2C; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #34B27B; box-shadow: 0 0 0 3px rgba(52, 178, 123, .16); }
.field textarea { resize: vertical; min-height: 88px; }

/* ── Responsive breakpoints ───────────────────────────────────── */
@media screen and (max-width: 991px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap:last-child { grid-column: 1 / -1; min-height: 0; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .section-head { grid-template-columns: 1fr; gap: 22px; }
  .approach-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-cols { grid-template-columns: 1fr; }
  .ch-pillar + .ch-pillar { padding-left: 0; border-left: none; border-top: 1px solid #D9D6D1; }
  .meas-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 44px; }
  .form-grid { grid-template-columns: 1fr; }
  .gate-choices { grid-template-columns: 1fr; }
}
@media screen and (max-width: 479px) {
  .cap-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
}

/* ── Audit page: access gate, Yes/No branching, checkboxes ────── */
.gate-q { font-family: 'Mulish', sans-serif; font-size: 1.05rem; color: #2C2C2C; margin: 0 0 18px; font-weight: 600; }
.gate-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { display: flex; align-items: flex-start; gap: 12px; background: #F4F2EF; border: 1.5px solid #E4E1DC; border-radius: 10px; padding: 18px; cursor: pointer; transition: border-color .16s, background .16s; }
.choice:hover { border-color: #A9CBB8; }
.choice input { margin-top: 3px; width: 18px; height: 18px; accent-color: #34B27B; flex: none; }
.choice-main { display: flex; flex-direction: column; gap: 3px; }
.choice-title { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; color: #2C2C2C; }
.choice-sub { font-family: 'Mulish', sans-serif; font-size: .85rem; color: #7A7872; }
body:has(#grant-yes:checked) .choice-yes { border-color: #34B27B; background: #fff; }
body:has(#grant-no:checked) .choice-no { border-color: #34B27B; background: #fff; }
.branch-panel { display: none; margin-top: 18px; }
body:has(#grant-yes:checked) #audit-grant { display: block; }
body:has(#grant-no:checked) #audit-questions { display: block; }
.grant-card { border-left: 5px solid #34B27B; }
.grant-title { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 12px; color: #2C2C2C; }
.grant-text { font-family: 'Mulish', sans-serif; color: #4A4846; line-height: 1.55; margin: 0 0 22px; max-width: 60ch; }
.check-group { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.check { display: flex; align-items: center; gap: 9px; font-family: 'Mulish', sans-serif; font-size: .95rem; color: #2C2C2C; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: #34B27B; flex: none; }
@media screen and (max-width: 767px) { .gate-choices { grid-template-columns: 1fr; } }