/*
Theme Name: Affinity Marketing
Theme URI: https://affinitymarketing.com.au
Author: Affinity Marketing
Description: Custom theme for the Affinity Marketing website redesign - brand system built around Mulish, the charcoal/ocean/sherpa/teal/purple palette, and the approved page concepts (Home, About, Services, Blog, Contact).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: affinity-marketing
*/

:root {
  --charcoal: #16101a;
  --ocean: #182d42;
  --sherpa: #004d5d;
  --teal: #80b2a7;
  --purple: #5a327c;
  --valentino: #471149;
  --sand: #d9d4ce;
  --conch: #d2d9d6;
  --white: #ffffff;
  --ink-on-light: #16101a;
  --dim-on-light: #5b5266;
  --dim-on-dark: #c9c2d4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--white);
  font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.shell { max-width: 1180px; margin: 0 auto; padding: 0 1.75rem; }
section { position: relative; }
em { font-style: italic; }
.balance { text-wrap: balance; }
.screen-reader-text { position: absolute; left: -9999px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  border: none; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  font-family: inherit;
}
.btn-solid { background: var(--sherpa); color: #fff; }
.btn-solid:hover { background: #013a45; }
.btn-outline-dark { background: transparent; border: 2px solid var(--teal); color: var(--teal); }
.btn-outline-dark:hover { background: var(--teal); color: var(--charcoal); }
.btn-outline-light { background: transparent; border: 2px solid var(--sherpa); color: var(--sherpa); }
.btn-outline-light:hover { background: var(--sherpa); color: #fff; }
.btn-band { background: var(--teal); color: var(--charcoal); }
.btn-band:hover { background: #6a9c90; }
.btn-solid-ink { background: var(--ocean); color: #fff; }

/* ---------- Nav ---------- */
header.nav {
  position: sticky; top: 0; z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid var(--conch);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 2rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.logo-chip { background: #fff; border-radius: 9px; padding: 0.4rem 0.55rem; display: inline-flex; align-items: center; line-height: 0; }
.brand img { height: 49px; width: auto; }
.brand-word { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: 0.92rem; }
.nav-links a { text-decoration: none; opacity: 0.75; color: var(--ink-on-light); }
.nav-links a:hover { opacity: 1; }
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a,
.nav-links a.active { opacity: 1; color: var(--sherpa); }
.nav-links li { position: relative; }
.nav-links li.menu-item-has-children > a::after { content: "\25BE"; margin-left: 0.35rem; font-size: 0.7em; opacity: 0.6; }
.nav-links .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 1.1rem 0.5rem 0.5rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--conch);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  min-width: 260px;
  z-index: 50;
}
.nav-links li.menu-item-has-children:hover > .sub-menu,
.nav-links li.menu-item-has-children:focus-within > .sub-menu { display: block; }
.nav-links .sub-menu li { width: 100%; }
.nav-links .sub-menu a { display: block; padding: 0.55rem 0.6rem; border-radius: 6px; opacity: 0.85; white-space: nowrap; font-weight: 500; }
.nav-links .sub-menu a:hover { opacity: 1; background: var(--conch); }
.nav-cta { display: flex; align-items: center; gap: 1.4rem; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero (shared shape, per-template padding/grid below) ---------- */
.hero {
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(130,50,198,0.32), transparent 55%),
    radial-gradient(100% 80% at 85% 10%, rgba(128,178,167,0.22), transparent 60%),
    linear-gradient(180deg, #16101a, #1b1224 55%, #16101a);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 1.3rem;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 1.3rem; max-width: 16ch;
}
.hero h1 em { font-style: normal; color: var(--teal); }
.hero h1 .step3 { font-style: italic; color: var(--teal); } /* homepage hero only - the one exception */
.hero h1 .step2 { color: #cfc9da; }
.hero p.lede {
  font-size: 1.12rem; line-height: 1.65; color: var(--dim-on-dark);
  max-width: 54ch; margin: 0 0 2.2rem;
}
.hero p.lede:last-child { margin-bottom: 0; }
.hero p.lede2 { font-size: 0.98rem; line-height: 1.65; color: #a99bb8; margin: 0 0 2.2rem; }
.hero p.lede:has(+ .lede2) { margin-bottom: 1rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-mark-plate {
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}
.hero-mark { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }

/* front page hero is the biggest / has the widest grid split */
body.home .hero { padding: 6.5rem 0 7rem; }
body.home .hero-grid { grid-template-columns: 1.15fr 0.85fr; }

/* about page hero */
.page-template-page-about .hero { padding: 5rem 0 6rem; }
.page-template-page-about .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
.page-template-page-about .hero-mark { aspect-ratio: 4/3; object-position: 50% 20%; }

/* ---------- Positioning strip ---------- */
.strip { background: var(--sand); color: var(--ink-on-light); padding: 1.6rem 0; }
.strip-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; justify-content: space-between; }
.strip-label { font-weight: 800; font-size: 0.95rem; }
.strip-tags { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.strip-tag { padding: 0.4rem 1rem; border-radius: 999px; border: 1.5px solid var(--sherpa); color: var(--sherpa); font-weight: 700; font-size: 0.82rem; }

/* ---------- Section shared ---------- */
.light-section { background: #fff; color: var(--ink-on-light); padding: 6rem 0; }
.light-section.alt { background: var(--conch); }
.dark-section { background: var(--charcoal); padding: 6.5rem 0; }
.sec-eyebrow { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sherpa); margin: 0 0 0.9rem; }
.sec-eyebrow.on-dark { color: var(--teal); }
.sec-h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1rem; max-width: 26ch; }
.sec-h2 em { font-style: normal; color: var(--sherpa); }
.sec-h2.on-dark { color: #fff; }
.sec-h2.on-dark em { color: var(--teal); }
.sec-lede { font-size: 1.05rem; line-height: 1.65; color: var(--dim-on-light); max-width: 62ch; margin: 0 0 1.5rem; }
.sec-lede.on-dark { color: var(--dim-on-dark); }

/* ---------- Services (home summary rows) ---------- */
.service-list { display: flex; flex-direction: column; gap: 1.4rem; }
.service-row {
  border: 1.5px solid var(--conch); border-radius: 20px;
  padding: 1.9rem 2rem; display: grid; grid-template-columns: 64px 1fr auto; gap: 1.6rem; align-items: start;
}
@media (max-width: 720px) { .service-row { grid-template-columns: 56px 1fr; } .service-row .learn { grid-column: 1 / -1; } }
.service-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(160deg, var(--ocean), var(--sherpa));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.3rem;
  flex: none;
}
.service-row h3 { margin: 0.15rem 0 0.6rem; font-size: 1.25rem; font-weight: 800; }
.service-row > div > p { margin: 0; color: var(--dim-on-light); font-size: 0.95rem; line-height: 1.6; }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.service-tag { font-size: 0.78rem; font-weight: 600; color: var(--dim-on-light); border: 1px solid var(--conch); border-radius: 999px; padding: 0.32rem 0.8rem; }
.learn { align-self: center; }

/* ---------- Service pillars (services page, full detail) ---------- */
.pillar { padding: 4.5rem 0; border-bottom: 1px solid var(--conch); }
.pillar:last-child { border-bottom: none; }
.pillar-head { display: grid; grid-template-columns: 64px 1fr; gap: 1.6rem; align-items: start; margin-bottom: 2.2rem; }
.pillar-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.3rem;
  flex: none;
}
.pillar-1 .pillar-icon { background: linear-gradient(160deg, var(--ocean), var(--sherpa)); }
.pillar-2 .pillar-icon { background: radial-gradient(circle at 30% 30%, #a267d4, var(--purple) 70%); }
.pillar-3 .pillar-icon { background: radial-gradient(circle at 30% 30%, #9fcabf, var(--teal) 70%); color: var(--charcoal); }
.pillar-head h2 { margin: 0.1rem 0 0.6rem; font-size: 1.7rem; font-weight: 800; }
.pillar-head p { margin: 0; color: var(--dim-on-light); font-size: 1.02rem; line-height: 1.6; max-width: 60ch; }
.pillar-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.4rem; list-style: none; margin: 0; padding: 0 0 0 80px; }
@media (max-width: 760px) { .pillar-list { grid-template-columns: 1fr 1fr; padding-left: 0; } }
@media (max-width: 480px) { .pillar-list { grid-template-columns: 1fr; } }
.pillar-list li { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.95rem; color: var(--ink-on-light); font-weight: 600; }
.pillar-list li::before { content: "-"; color: var(--sherpa); font-weight: 700; flex: none; }

/* ---------- Process (home) ---------- */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
@media (max-width: 820px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { position: relative; }
.process-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a267d4, var(--purple) 70%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: 1.3rem;
}
.process-step:nth-child(2) .process-num { background: linear-gradient(160deg, var(--ocean), var(--sherpa)); }
.process-step:nth-child(3) .process-num { background: radial-gradient(circle at 30% 30%, #9fcabf, var(--teal) 70%); color: var(--charcoal); }
.process-step h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.6rem; color: #fff; }
.process-step p { font-size: 0.95rem; line-height: 1.6; color: var(--dim-on-dark); margin: 0; }
.process-connector { position: absolute; top: 28px; left: 100%; width: 2rem; height: 2px; background: rgba(255,255,255,0.18); }
@media (max-width: 820px) { .process-connector { display: none; } }

/* ---------- AI callout ---------- */
.ai-callout {
  border-radius: 24px; margin-top: 4.5rem;
  padding: 3rem 2.6rem;
  background: radial-gradient(120% 160% at 15% 15%, #a267d4, var(--purple) 55%, var(--valentino));
  display: grid; grid-template-columns: 1.3fr auto; gap: 2rem; align-items: center;
}
@media (max-width: 720px) { .ai-callout { grid-template-columns: 1fr; } }
.ai-callout .tag-line { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #e9d9f7; margin: 0 0 0.7rem; }
.ai-callout h3 { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.7rem; color: #fff; max-width: 28ch; }
.ai-callout p { margin: 0; color: #ecdff4; font-size: 0.98rem; line-height: 1.6; max-width: 44ch; }

/* ---------- Results / testimonials (home) ---------- */
.proof-section { background: #fff; color: var(--ink-on-light); padding: 6rem 0; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin: 2.5rem 0 1rem; }
@media (max-width: 760px) { .stat-strip { grid-template-columns: 1fr 1fr; } }
.stat-item { text-align: left; }
.stat-num { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: var(--sherpa); line-height: 1; margin: 0 0 0.5rem; }
.stat-label { font-size: 0.88rem; color: var(--dim-on-light); line-height: 1.4; }
.stat-attrib { font-size: 0.82rem; color: var(--dim-on-light); margin-top: 1.8rem; }
.stat-attrib b { color: var(--ink-on-light); }

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3.5rem; }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card { border: 1px solid var(--conch); border-radius: 18px; padding: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; }
.quote-mark { font-family: Georgia, serif; font-size: 2.6rem; line-height: 1; color: var(--teal); font-style: italic; }
.quote-card p.quote-text { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink-on-light); flex: 1; }
.quote-attrib { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.8rem; border-top: 1px solid var(--conch); }
.quote-attrib .name { font-weight: 800; font-size: 0.92rem; }
.quote-attrib .role { font-size: 0.82rem; color: var(--dim-on-light); }

/* ---------- Founder bio (about) ---------- */
.founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.2rem; align-items: start; }
@media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } }
.founder-photo { border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(22,16,26,0.35); position: sticky; top: 6rem; }
.founder-photo img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; }
@media (max-width: 860px) { .founder-photo { position: static; max-width: 320px; } }
.founder-name { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sherpa); margin: 1rem 0 0; }
.founder-title { font-size: 0.85rem; color: var(--dim-on-light); margin: 0.2rem 0 0; }
.founder-copy p { font-size: 1.03rem; line-height: 1.7; color: var(--dim-on-light); margin: 0 0 1.15rem; }
.founder-copy p.lead { font-size: 1.15rem; font-weight: 700; color: var(--ink-on-light); }
.founder-copy p:last-child { margin-bottom: 0; }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin: 2.4rem 0 1.6rem; }
@media (max-width: 640px) { .timeline { grid-template-columns: 1fr 1fr; } }
.timeline-step .dot { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.85rem; margin-bottom: 0.8rem; }
.timeline-step:nth-child(1) .dot { background: linear-gradient(160deg, var(--ocean), var(--sherpa)); }
.timeline-step:nth-child(2) .dot { background: radial-gradient(circle at 30% 30%, #a267d4, var(--purple) 70%); }
.timeline-step:nth-child(3) .dot { background: radial-gradient(circle at 30% 30%, #9fcabf, var(--teal) 70%); color: var(--charcoal); }
.timeline-step:nth-child(4) .dot { background: var(--valentino); }
.timeline-step h4 { margin: 0 0 0.3rem; font-size: 0.95rem; font-weight: 800; }
.timeline-step p { margin: 0; font-size: 0.85rem; color: var(--dim-on-light); line-height: 1.5; }

.credentials-line { font-size: 0.88rem; color: var(--dim-on-light); border-top: 1px solid var(--conch); padding-top: 1.4rem; margin-top: 0.4rem; line-height: 1.7; }
.credentials-line b { color: var(--ink-on-light); }

/* ---------- Pull quote (about) ---------- */
.pull-quote-section { background: linear-gradient(120deg, var(--ocean), var(--sherpa)); padding: 4.5rem 0; }
.pull-quote { max-width: 46rem; margin: 0 auto; text-align: center; }
.pull-quote .quote-mark { font-family: Georgia, serif; font-size: 3.2rem; line-height: 1; color: var(--teal); font-style: italic; }
.pull-quote p.quote-text { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.5; color: #fff; margin: 0.6rem 0 1.4rem; }
.pull-quote p.quote-text em { color: var(--teal); }
.pull-quote .name { font-weight: 800; color: #fff; font-size: 0.95rem; }
.pull-quote .role { color: var(--dim-on-dark); font-size: 0.85rem; margin-top: 0.2rem; }

/* ---------- Case study strip (about) ---------- */
.case-strip { border: 1px solid var(--conch); border-radius: 20px; padding: 2.2rem 2rem; margin-top: 3rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
@media (max-width: 760px) { .case-strip { grid-template-columns: 1fr; } }
.case-strip .case-label { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sherpa); margin: 0 0 0.5rem; }
.case-strip h4 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 800; }
.case-strip p { margin: 0; color: var(--dim-on-light); font-size: 0.92rem; line-height: 1.6; max-width: 52ch; }
.case-nums { display: flex; gap: 2rem; }
.case-nums .n { font-size: 1.6rem; font-weight: 800; color: var(--sherpa); line-height: 1; }
.case-nums .l { font-size: 0.76rem; color: var(--dim-on-light); margin-top: 0.3rem; }
.case-strip.on-dark { border-color: rgba(255,255,255,0.14); }
.case-strip.on-dark .case-label { color: var(--teal); }
.case-strip.on-dark h4 { color: #fff; }
.case-strip.on-dark p { color: var(--dim-on-dark); }
.case-strip.on-dark .case-nums .n { color: var(--teal); }
.case-strip.on-dark .case-nums .l { color: var(--dim-on-dark); }

/* ---------- Two-col copy blocks (about) ---------- */
.copy-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .copy-grid { grid-template-columns: 1fr; } }
.copy-grid p { font-size: 1.05rem; line-height: 1.7; color: var(--dim-on-light); margin: 0 0 1.2rem; }
.copy-grid p:last-child { margin-bottom: 0; }
.copy-grid.on-dark p { color: var(--dim-on-dark); }

.word-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.word-chip { padding: 0.5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--teal); color: var(--teal); font-weight: 700; font-size: 0.85rem; }

.team-photo { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.4); }
.team-photo img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */
.contact-section { background: #fff; color: var(--ink-on-light); padding: 5.5rem 0 6rem; }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.info-block { display: flex; flex-direction: column; gap: 2.2rem; }
.info-item .label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sherpa); margin: 0 0 0.5rem; }
.info-item .value { font-size: 1.15rem; font-weight: 700; margin: 0; }
.info-item .sub { font-size: 0.88rem; color: var(--dim-on-light); margin: 0.2rem 0 0; }
.info-item a.value { text-decoration: none; color: var(--ink-on-light); }

.form-card { border: 1px solid var(--conch); border-radius: 22px; padding: 2.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--ink-on-light); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.95rem; padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--conch); border-radius: 10px; background: #fff; color: var(--ink-on-light);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sherpa); }
.field textarea { resize: vertical; min-height: 110px; font-family: inherit; }
.form-note { font-size: 0.8rem; color: var(--dim-on-light); margin-top: 1rem; }
.form-status { font-size: 0.88rem; font-weight: 700; margin: 0 0 1.2rem; padding: 0.85rem 1rem; border-radius: 10px; display: none; }
.form-status.is-success { display: block; background: rgba(128,178,167,0.18); color: #0b3d33; }
.form-status.is-error { display: block; background: rgba(190,60,60,0.12); color: #7a1f1f; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ---------- Service detail pages (hook intro, feature grid, related grid) ---------- */
.hook-block { max-width: 46rem; margin: 0 0 1rem; }
.hook-headline { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.25; margin: 0 0 1rem; color: var(--ink-on-light); }
.hook-sublines { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.6rem; }
.hook-subline { font-size: 1.05rem; font-weight: 700; color: var(--dim-on-light); margin: 0; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.5rem; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { border: 1.5px solid var(--conch); border-radius: 18px; padding: 1.7rem 1.8rem; }
.feature-icon {
	width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.15rem;
	margin-bottom: 1rem;
}
.feature-card:nth-child(8n+1) .feature-icon { background: linear-gradient(160deg, var(--ocean), var(--sherpa)); }
.feature-card:nth-child(8n+2) .feature-icon { background: radial-gradient(circle at 30% 30%, #a267d4, var(--purple) 70%); }
.feature-card:nth-child(8n+3) .feature-icon { background: radial-gradient(circle at 30% 30%, #9fcabf, var(--teal) 70%); color: var(--charcoal); }
.feature-card:nth-child(8n+4) .feature-icon { background: var(--valentino); }
.feature-card:nth-child(8n+5) .feature-icon { background: linear-gradient(160deg, var(--sherpa), var(--ocean)); }
.feature-card:nth-child(8n+6) .feature-icon { background: radial-gradient(circle at 30% 30%, var(--purple), #a267d4 70%); }
.feature-card:nth-child(8n+7) .feature-icon { background: radial-gradient(circle at 30% 30%, var(--teal), #9fcabf 70%); color: var(--charcoal); }
.feature-card:nth-child(8n+8) .feature-icon { background: var(--ocean); }
.feature-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.5rem; }
.feature-card p { font-size: 0.94rem; line-height: 1.6; color: var(--dim-on-light); margin: 0; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
@media (max-width: 860px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #8fb0b6; border-radius: 20px; padding: 1.8rem 1.8rem 1.6rem; text-decoration: none; color: var(--ink-on-light); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.related-card:hover { border-color: var(--sherpa); box-shadow: 0 14px 30px -18px rgba(1, 58, 69, 0.45); transform: translateY(-3px); }
.related-card .related-link { margin-top: auto; }
.related-card h4 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.5rem; }
.related-card p { font-size: 0.92rem; color: var(--dim-on-light); margin: 0 0 1.2rem; line-height: 1.55; }
.related-card .related-link { font-size: 0.82rem; font-weight: 700; color: var(--sherpa); }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 940px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--conch); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink-on-light); }
.post-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--conch); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.post-date { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sherpa); }
.post-title { font-size: 1.08rem; font-weight: 800; line-height: 1.35; margin: 0; }
.post-excerpt { font-size: 0.9rem; line-height: 1.55; color: var(--dim-on-light); margin: 0; flex: 1; }
.post-link { font-size: 0.85rem; font-weight: 700; color: var(--sherpa); margin-top: 0.3rem; }
.pagination { display: flex; justify-content: center; gap: 0.6rem; margin-top: 3rem; }
.pagination a, .pagination span { padding: 0.6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--conch); font-weight: 700; font-size: 0.85rem; text-decoration: none; color: var(--ink-on-light); }
.pagination .current { background: var(--sherpa); color: #fff; border-color: var(--sherpa); }

/* single post */
.single-post-section { background: #fff; color: var(--ink-on-light); padding: 4.5rem 0 6rem; }
.single-post-header { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.single-post-header .post-date { display: block; margin-bottom: 1rem; }
.single-post-header h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); font-weight: 800; line-height: 1.15; margin: 0; }
.single-post-thumb { border-radius: 20px; overflow: hidden; max-width: 900px; margin: 0 auto 3rem; }
.single-post-thumb img { width: 100%; height: auto; }
.single-post-content { max-width: 44rem; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; color: var(--dim-on-light); }
.single-post-content p { margin: 0 0 1.4rem; }
.single-post-content h2 { color: var(--ink-on-light); font-size: 1.5rem; font-weight: 800; margin: 2.2rem 0 1rem; }
.single-post-content h3 { color: var(--ink-on-light); font-size: 1.2rem; font-weight: 800; margin: 1.8rem 0 0.8rem; }
.single-post-content ul { margin: 0 0 1.4rem; padding-left: 1.4rem; list-style: disc; }
.single-post-content li { margin: 0 0 0.6rem; }
.single-post-content strong { color: var(--ink-on-light); }
.single-post-content a { color: var(--sherpa); text-decoration: underline; }
.single-post-content img { border-radius: 14px; margin: 1.4rem 0; }
.post-byline { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; font-size: 0.92rem; color: var(--dim-on-light); text-align: left; }
.post-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; }
.post-byline a { color: var(--sherpa); font-weight: 700; text-decoration: none; }
.post-byline a:hover { text-decoration: underline; }
.author-box { max-width: 44rem; margin: 3.5rem auto 0; padding: 1.8rem; border: 1px solid var(--conch); border-radius: 18px; display: flex; gap: 1.6rem; align-items: flex-start; color: var(--ink-on-light); }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; }
.author-box p { margin: 0; }
.author-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sherpa); }
.author-name { font-size: 1.2rem; font-weight: 800; margin-top: 0.2rem !important; }
.author-title { font-size: 0.9rem; color: var(--dim-on-light); }
.author-bio { font-size: 0.95rem; line-height: 1.6; color: var(--dim-on-light); margin: 0.8rem 0 1.1rem !important; }
@media (max-width: 560px) { .author-box { flex-direction: column; } }
.single-post-back { max-width: 44rem; margin: 3rem auto 0; }

/* ---------- Final CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--ocean), var(--sherpa)); padding: 5rem 0; text-align: center; }
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; margin: 0 0 1rem; }
.cta-band h2 em { font-style: normal; color: var(--teal); }
.cta-band p { color: var(--dim-on-dark); font-size: 1.05rem; margin: 0 0 2.2rem; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--charcoal); padding: 3.5rem 0 2.2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.foot-brand img { height: 24px; }
.foot-brand span { font-weight: 800; font-size: 1.05rem; }
.foot-tag { color: var(--dim-on-dark); font-size: 0.88rem; max-width: 30ch; line-height: 1.55; }
.foot-links { display: flex; gap: 3rem; flex-wrap: wrap; }
.foot-col h4 { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin: 0 0 0.9rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.foot-col a { text-decoration: none; color: var(--dim-on-dark); font-size: 0.9rem; }
.foot-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: #8b8298; }

/* ---------- LinkedIn Outreach landing page (standalone, not in main nav) ---------- */
.nav-eyebrow { font-size: 0.78rem; font-weight: 700; color: var(--dim-on-light); border-left: 1px solid var(--conch); padding-left: 0.9rem; margin-left: 0.2rem; }
@media (max-width: 620px) { .nav-eyebrow { display: none; } }

.msg-stack { position: relative; }
.msg-card { background: #fff; border-radius: 18px; padding: 1.4rem 1.5rem; color: var(--ink-on-light); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5); }
.msg-card + .msg-card { margin-top: 1rem; }
.msg-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.msg-stack .avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.85rem; flex: none; }
.msg-who { font-weight: 800; font-size: 0.88rem; }
.msg-role { font-size: 0.76rem; color: var(--dim-on-light); }
.msg-body { font-size: 0.85rem; line-height: 1.5; color: var(--ink-on-light); }
.msg-status { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.msg-status.replied { color: var(--sherpa); }
.msg-status.sent { color: #9b93a6; }
.msg-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.msg-card.dim { opacity: 0.55; transform: scale(0.97); }

.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 1rem; }
@media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; } }
.strike-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.strike-chip { padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--conch); color: var(--dim-on-light); font-weight: 700; font-size: 0.85rem; text-decoration: line-through; text-decoration-color: #9a9088; text-decoration-thickness: 1.5px; }
.problem-copy p { font-size: 1.03rem; line-height: 1.7; color: var(--dim-on-light); margin: 0 0 1.1rem; }
.problem-copy p:last-child { margin: 0; font-weight: 700; color: var(--ink-on-light); }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .feat-grid { grid-template-columns: 1fr; } }
.feat-card { background: #1e1728; border: 1px solid #2c2436; border-radius: 18px; padding: 1.8rem 1.7rem; }
.feat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 1.1rem; }
.feat-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.6rem; color: #fff; }
.feat-card p { font-size: 0.9rem; line-height: 1.6; color: var(--dim-on-dark); margin: 0; }

.flow-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 1rem; position: relative; }
@media (max-width: 980px) { .flow-row { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; } }
@media (max-width: 620px) { .flow-row { grid-template-columns: 1fr; } }
.flow-step { position: relative; padding-top: 0.2rem; }
.flow-num { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 1rem; position: relative; z-index: 2; }
.flow-step:nth-child(1) .flow-num { background: linear-gradient(160deg, var(--ocean), var(--sherpa)); }
.flow-step:nth-child(2) .flow-num { background: radial-gradient(circle at 30% 30%, #9fcabf, var(--teal) 70%); color: var(--charcoal); }
.flow-step:nth-child(3) .flow-num { background: radial-gradient(circle at 30% 30%, #a267d4, var(--purple) 70%); }
.flow-step:nth-child(4) .flow-num { background: linear-gradient(160deg, var(--ocean), var(--sherpa)); }
.flow-step:nth-child(5) .flow-num { background: var(--valentino); box-shadow: 0 0 0 4px rgba(71,17,73,0.15); }
.flow-step:nth-child(6) .flow-num { background: radial-gradient(circle at 30% 30%, #9fcabf, var(--teal) 70%); color: var(--charcoal); }
.flow-line { position: absolute; top: 26px; left: 50%; width: 100%; height: 2px; background: var(--conch); z-index: 1; }
.flow-step:last-child .flow-line { display: none; }
@media (max-width: 980px) { .flow-line { display: none; } }
.flow-tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sherpa); margin: 0 0 0.3rem; }
.flow-step h4 { font-size: 1.02rem; font-weight: 800; margin: 0 0 0.5rem; }
.flow-step p { font-size: 0.86rem; line-height: 1.55; color: var(--dim-on-light); margin: 0; }
.flow-step.pivot .flow-tag { color: var(--valentino); }

.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1rem; }
@media (max-width: 900px) { .principle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principle-grid { grid-template-columns: 1fr; } }
.principle { text-align: left; }
.principle-glyph { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; margin-bottom: 1.2rem; }
.principle h3 { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0 0 0.6rem; }
.principle p { font-size: 0.9rem; line-height: 1.6; color: var(--dim-on-dark); margin: 0; }

.targeting-row { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
@media (max-width: 700px) { .targeting-row { grid-template-columns: 1fr; } }
.target-badge { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--sherpa); display: flex; align-items: center; justify-content: center; flex: none; }
.target-badge .ring { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--teal); display: flex; align-items: center; justify-content: center; }
.target-badge .core { width: 24px; height: 24px; border-radius: 50%; background: var(--sherpa); }

.inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .inc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .inc-grid { grid-template-columns: 1fr; } }
.inc-card { border: 1px solid var(--conch); border-radius: 16px; padding: 1.5rem 1.6rem; display: flex; gap: 1rem; }
.inc-check { width: 30px; height: 30px; border-radius: 50%; background: var(--sherpa); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; flex: none; }
.inc-card h4 { font-size: 0.98rem; font-weight: 800; margin: 0 0 0.4rem; }
.inc-card p { font-size: 0.86rem; line-height: 1.55; color: var(--dim-on-light); margin: 0; }

.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
.metric-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.6rem; }
.metric-item { display: flex; gap: 0.9rem; align-items: baseline; }
.metric-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; margin-top: 0.4rem; }
.metric-item b { color: #fff; font-size: 0.95rem; }
.metric-item span { color: var(--dim-on-dark); font-size: 0.88rem; display: block; margin-top: 0.15rem; }
.dash-mock { background: #1e1728; border: 1px solid #2c2436; border-radius: 20px; padding: 1.6rem; }
.dash-label { font-size: 0.72rem; font-weight: 700; color: #8b8298; margin: 0 0 1.2rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.dash-tile { background: #251d31; border-radius: 12px; padding: 1rem 1.1rem; }
.dash-tile .n { font-size: 1.5rem; font-weight: 800; color: var(--teal); line-height: 1; }
.dash-tile .l { font-size: 0.74rem; color: var(--dim-on-dark); margin-top: 0.4rem; }
.dash-bar-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; }
.dash-bar-track { flex: 1; height: 8px; border-radius: 4px; background: #2c2436; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sherpa), var(--teal)); }
.dash-bar-label { font-size: 0.72rem; color: var(--dim-on-dark); width: 90px; flex: none; }
.dash-note { font-size: 0.7rem; color: #766d82; margin-top: 1.2rem; }

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
@media (max-width: 820px) { .service-grid { grid-template-columns: 1fr; } }
.service-card { border: 1px solid var(--conch); border-radius: 20px; padding: 2.2rem 2rem; display: flex; flex-direction: column; }
.service-card.ongoing { border-color: var(--sherpa); background: linear-gradient(180deg, #f3faf8, #ffffff); }
.lo-service-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sherpa); margin: 0 0 0.6rem; }
.service-card h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 1.4rem; }
.service-card ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.service-card li { font-size: 0.92rem; color: var(--ink-on-light); display: flex; gap: 0.6rem; }
.service-card li::before { content: "-"; color: var(--sherpa); font-weight: 700; flex: none; }

.audience-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0 2.4rem; }
.audience-chip { padding: 0.55rem 1.2rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--sherpa); color: var(--sherpa); font-weight: 700; font-size: 0.85rem; }
.qualify-box { background: #fff; border-radius: 18px; padding: 1.8rem 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.qualify-box p { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-on-light); }
.qualify-box p em { font-style: italic; color: var(--sherpa); }

.why-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } }
.why-grid p { font-size: 1.03rem; line-height: 1.75; color: var(--dim-on-dark); margin: 0 0 1.2rem; }
.why-grid p:last-child { margin: 0; font-weight: 700; color: #fff; font-size: 1.1rem; }

.faq-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.faq-item { border: 1px solid var(--conch); border-radius: 14px; padding: 0.3rem 1.4rem; }
.faq-item summary { padding: 1.1rem 0; font-weight: 800; font-size: 0.98rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--sherpa); flex: none; transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 1.2rem; font-size: 0.92rem; line-height: 1.65; color: var(--dim-on-light); }

.lo-footer { background: var(--charcoal); padding: 3rem 0 2.2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.lo-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.lo-foot-brand { display: flex; align-items: center; gap: 0.7rem; }
.lo-foot-brand img { height: 22px; }
.lo-foot-bottom { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; color: #8b8298; text-align: center; }

/* ---------- Testimonials on grey bands, long pull quotes, package cards ---------- */
.light-section.alt .quote-card { background: #fff; }
.pull-quote.is-long p.quote-text { font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 600; line-height: 1.65; }
.service-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { .service-grid.three { grid-template-columns: 1fr; } }
.package-intro { max-width: 52rem; }
.package-note { font-size: 0.92rem; color: var(--dim-on-light); margin: 2rem 0 0; max-width: 52rem; }
.light-section.alt .service-card:not(.ongoing) { background: #fff; }

/* ---------- Why work with us, case study ---------- */
.why-points { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 2rem 0 3rem; }
@media (max-width: 1020px) { .why-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-points { grid-template-columns: 1fr; } }
.why-points .why-point:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1021px) { .why-points .why-point:last-child:nth-child(odd) { grid-column: auto; } }
.why-point { border: 1.5px solid var(--conch); border-top: 3px solid var(--sherpa); border-radius: 14px; padding: 1.2rem 1.2rem 1.3rem; font-weight: 800; font-size: 0.98rem; line-height: 1.4; color: var(--ink-on-light); background: #fff; }
.why-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 820px) { .why-cols { grid-template-columns: 1fr; gap: 2rem; } }
.why-cols h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.7rem; color: var(--ink-on-light); }
.why-cols p { font-size: 1.03rem; line-height: 1.7; color: var(--dim-on-light); margin: 0; }
.feature-grid .feature-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cs-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cs-list li { font-size: 0.94rem; line-height: 1.55; color: var(--ink-on-light); display: flex; gap: 0.6rem; }
.cs-list li::before { content: "-"; color: var(--sherpa); font-weight: 700; flex: none; }
.cs-lead { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.45; color: var(--purple); max-width: 46rem; margin: 0 0 2rem; }
.cs-quote { border: 1.5px solid var(--conch); border-radius: 20px; padding: 2.2rem 2.4rem; max-width: 52rem; }
.cs-quote p { font-size: 1rem; line-height: 1.7; color: var(--ink-on-light); margin: 0 0 1.1rem; }
.cs-quote .quote-attrib { margin-top: 1.6rem; }
@media (max-width: 560px) { .cs-quote { padding: 1.6rem 1.3rem; } }

.copy-grid h3 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sherpa); margin: 0 0 0.7rem; }
.copy-grid.on-dark h3 { color: var(--teal); }
.why-points:last-child { margin-bottom: 0; }

.feature-card p + p { margin-top: 0.8rem; }