/*
Theme Name: Roll With Paid
Theme URI: https://rollwithpaid.com
Author: Roll With Paid
Description: Custom WordPress theme for Roll With Paid — payroll, HR and employer-of-record infrastructure for cannabis and other high-risk industries. Original markup and styles; structure follows the approved wireframe.
Version: 3.9.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rollwithpaid
Tags: business, payroll, one-column, custom-menu, custom-logo, block-styles
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Brand palette */
  --plum: #5C3D4E;
  --cream: #F5ECD7;
  --gold: #C9A96E;
  --coral: #D94F3D;
  --blush: #EDE0D4;

  /* Derived. The page base is always cream or blush — never white. */
  --plum-deep: #472F3C;
  --plum-soft: #7A5A6A;
  --surface: #FBF5E6;
  --text: #3A2733;
  --muted: #7A6472;
  --border: #E0D0BA;
  --border-strong: #CBB79C;
  --gold-tint: rgba(201, 169, 110, 0.16);
  --coral-tint: rgba(217, 79, 61, 0.10);
  --on-plum: rgba(245, 236, 215, 0.82);
  --plum-line: rgba(245, 236, 215, 0.18);

  /* Type. HK Grotesk Pro is licensed — drop the webfont files in
     /assets/fonts/ and it is used automatically. Hanken Grotesk, by the same
     designer, is the free stand-in; Arial is the system fallback. */
  --font-display: "HK Grotesk Pro", "HK Grotesk", "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --font-body: "HK Grotesk Pro", "HK Grotesk", "Hanken Grotesk", Arial, Helvetica, sans-serif;

  /* Scale */
  --step-xs: 0.8125rem;
  --step-sm: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-4: clamp(1.9rem, 1.4rem + 2.1vw, 2.75rem);
  --step-5: clamp(2.3rem, 1.5rem + 3.4vw, 3.75rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: 24px;
  --section-y: clamp(64px, 8vw, 112px);
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(92, 61, 78, 0.06), 0 6px 18px rgba(92, 61, 78, 0.06);
  --shadow-md: 0 2px 6px rgba(92, 61, 78, 0.08), 0 18px 44px rgba(92, 61, 78, 0.12);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--plum); text-decoration: none; }
a:hover { color: var(--coral); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--plum);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

/* The period in "Roll With Paid." and "Roll Call." is always Coral Red. */
.dot { color: var(--coral); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }

blockquote {
  margin: 1.5em 0;
  padding: 0 0 0 1.25em;
  border-left: 3px solid var(--gold);
  font-size: var(--step-1);
  color: var(--plum);
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--plum);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--cream); }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }

.section--surface { background: var(--blush); }
.section--plum { background: var(--plum); color: var(--on-plum); }
.section--plum h2, .section--plum h3, .section--plum h4 { color: var(--cream); }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: var(--step-1); }
.section--plum .section-head p { color: var(--on-plum); }

/* Box label — echoes the filled rectangle around "Roll" in the wordmark.
   This is the recurring structural device across the site. */
.box-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--plum);
  padding: 7px 12px 6px;
  margin-bottom: 20px;
  line-height: 1;
}
.section--plum .box-label { background: var(--gold); color: var(--plum); }
.box-label--gold { background: var(--gold); color: var(--plum); }

/* Perforated rule — the pay stub tear line */
.perf {
  height: 1px;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(to right, var(--border-strong) 0 8px, transparent 8px 16px);
}
.section--plum .perf {
  background-image: repeating-linear-gradient(to right, var(--plum-line) 0 8px, transparent 8px 16px);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--step-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--coral); color: var(--cream); }
.btn--primary:hover { background: #c2422f; color: var(--cream); }

.btn--plum { background: var(--plum); color: var(--cream); }
.btn--plum:hover { background: var(--plum-deep); color: var(--cream); }

.btn--ghost { background: transparent; color: var(--plum); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--plum); color: var(--plum); background: var(--gold-tint); }

.section--plum .btn--ghost { color: var(--cream); border-color: var(--plum-line); }
.section--plum .btn--ghost:hover { border-color: var(--gold); color: var(--cream); background: rgba(201, 169, 110, 0.14); }

.btn--sm { padding: 12px 20px; font-size: var(--step-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.text-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-sm);
  color: var(--plum);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.text-link::after { content: "→"; transition: transform 0.16s ease; }
.text-link:hover { color: var(--coral); }
.text-link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 236, 215, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--plum);
  line-height: 1;
  margin-right: auto;
}
.brand:hover { color: var(--plum); }
.brand img,
.custom-logo-link img { max-height: 34px; width: auto; }
.custom-logo-link { margin-right: auto; display: inline-flex; align-items: center; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-xs);
  color: var(--plum);
  cursor: pointer;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: var(--step-sm);
  font-weight: 600;
  color: var(--plum);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav .current-menu-item > a {
  color: var(--plum);
  border-bottom-color: var(--gold);
}

.header-cta { flex: none; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-block; order: 3; }
  .header-cta { display: none; }
  .main-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    padding-bottom: 20px;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-top: 1px solid var(--border); }
  .main-nav a { display: block; padding: 14px 0; border-bottom: 0; }
  .header-inner { flex-wrap: wrap; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--cream);
  padding-block: clamp(56px, 6vw, 96px) clamp(64px, 7vw, 108px);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
/* Warm bloom of colour behind the hero — the static stand-in for the
   animated background planned for the Webflow phase. */
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -15% auto 52%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(201, 169, 110, 0.30), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: 22px; }
.hero-copy { font-size: var(--step-1); color: var(--muted); max-width: 34em; }
.hero .btn-row { margin-top: 32px; }

/* Pay stub card — the hero object, drawn from the brand's pay-stub cues. */
.stub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}

.stub-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
}
.stub-card__head strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--plum);
  letter-spacing: -0.02em;
}
.stub-card__head span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.stub-card__tear {
  position: relative;
  height: 16px;
  background-image: repeating-linear-gradient(to right, var(--border-strong) 0 7px, transparent 7px 14px);
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}
.stub-card__tear::before,
.stub-card__tear::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  transform: translateY(-50%);
}
.stub-card__tear::before { left: -9px; }
.stub-card__tear::after { right: -9px; }

.stub-rows { padding: 8px 24px 22px; margin: 0; }

.stub-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.stub-row:last-child { border-bottom: 0; }
.stub-row dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stub-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--plum);
  font-size: var(--step-sm);
}

.stub-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--plum);
}
.stub-flag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.stub-card__foot {
  background: var(--plum);
  color: var(--cream);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stub-card__foot strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  text-transform: none;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero::after { inset: -30% -30% auto 20%; }
}

/* ==========================================================================
   7. Logo bar
   ========================================================================== */

.logobar { background: var(--blush); }
.logobar__intro {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
  color: var(--muted);
  font-size: var(--step-sm);
}

/* Still used by the Tribal Relations resources row, which is a short static
   set rather than a scrolling one. */
.logobar__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
}
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 64px;
  opacity: 0.78;
  transition: opacity 0.18s ease;
}
/* Each image carries its own width/height attributes, so the browser reserves
   the right space before the file loads. No percentage sizing here — a
   percentage max-height against a flex line is what let them render at full
   size mid-load and collide with the row above. */
.logo-slot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.logo-slot:hover { opacity: 1; }

@media (max-width: 560px) {
  .logobar__row { gap: 22px 28px; }
  .logo-slot { min-height: 52px; }
  .logo-slot img { max-height: 44px; }
}


/* ==========================================================================
   7b. Testimonials
   ========================================================================== */

.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .carousel__track { grid-auto-columns: minmax(0, calc(33.333% - 14px)); }
}

.quote {
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}
.quote__mark { color: var(--gold); font-size: 1.6rem; line-height: 1; font-weight: 700; }
.quote blockquote { margin: 0; padding: 0; border: 0; font-size: var(--step-sm); color: var(--text); }
.quote figcaption { margin-top: auto; }
.quote__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--plum);
  display: block;
}
.quote__role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.carousel__controls { display: flex; gap: 10px; margin-top: 26px; justify-content: center; }
.carousel__btn {
  width: 44px; height: 44px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--plum);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.carousel__btn:hover { border-color: var(--plum); color: var(--coral); }

/* ==========================================================================
   8. In the News marquee
   ========================================================================== */

.press__head { text-align: center; margin-bottom: 26px; }
.press__head .box-label { margin-bottom: 0; }

/* Backgroundless variant, for dropping onto a page that supplies its own. */
.press--plain { padding-block: 28px; }

.marquee {
  overflow: hidden;
  /* Fade the ends so logos enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding-inline: 28px;
  animation: rwp-marquee 70s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.18s ease;
}
.marquee__item:hover { opacity: 1; }
.marquee__item img { display: block; width: auto; height: auto; max-width: none; }

/* The list is rendered twice, so shifting by half the track loops seamlessly. */
@keyframes rwp-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* The client strip runs the other way, so the two bands read as separate. */
.marquee--reverse .marquee__track { animation-name: rwp-marquee-reverse; }

@keyframes rwp-marquee-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 700px) {
  .marquee__track { gap: 38px; animation-duration: 50s; }
}

/* Anyone who has asked for less motion gets a static, scrollable row. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track { animation: none; }
}

/* ==========================================================================
   9. Alternating feature rows
   ========================================================================== */

.feature-row + .feature-row { border-top: 1px solid var(--border); }

.feature-row__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.feature-row--flip .feature-row__media { order: -1; }

.feature-row h2 { font-size: var(--step-3); }
.feature-row__body p { color: var(--muted); }
.feature-row .btn-row { margin-top: 28px; }

@media (max-width: 880px) {
  .feature-row__grid { grid-template-columns: 1fr; }
  .feature-row--flip .feature-row__media { order: 0; }
}

/* Panels used in place of the TBD photography */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.section--surface .panel { background: var(--cream); }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--plum);
  font-size: var(--step-sm);
}
.panel__meta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step-sm);
  color: var(--text);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li span.flag {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum-soft);
  white-space: nowrap;
}
.check {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--plum);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.layer-stack { display: grid; gap: 12px; }
.layer {
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: var(--blush);
}
.layer strong { font-family: var(--font-display); color: var(--plum); display: block; font-size: var(--step-sm); }
.layer span { font-size: var(--step-xs); color: var(--muted); }
.layer--base { background: var(--plum); border-color: var(--plum); }
.layer--base strong { color: var(--cream); }
.layer--base span { color: var(--on-plum); }

/* ==========================================================================
   10. Nine-panel grid
   ========================================================================== */

.capabilities-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.capabilities-intro h2 { margin-bottom: 0; }
.capabilities-intro p { color: var(--muted); font-size: var(--step-1); }
.section--plum .capabilities-intro p { color: var(--on-plum); }

@media (max-width: 880px) {
  .capabilities-intro { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}

.grid-9 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.grid-9 .cell {
  background: var(--surface);
  padding: 30px 26px;
  transition: background-color 0.18s ease;
}
.grid-9 .cell:hover { background: var(--blush); }
.grid-9 h3 { font-size: var(--step-1); margin-bottom: 10px; }
.grid-9 p { color: var(--muted); font-size: var(--step-sm); margin: 0; }

.cell__num {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--gold-tint);
  padding: 5px 9px 4px;
  line-height: 1;
  margin-bottom: 16px;
}

@media (max-width: 900px) { .grid-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-9 { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Capability boxes (2 x 2)
   ========================================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.cap-box {
  background: rgba(245, 236, 215, 0.06);
  border: 1px solid var(--plum-line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.cap-box h3 { font-size: var(--step-2); margin-bottom: 12px; }
.cap-box p { color: var(--on-plum); font-size: var(--step-sm); }
.cap-box .box-label { margin-bottom: 16px; }

/* ==========================================================================
   12. Blog cards
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.post-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--plum) 0%, var(--plum-soft) 100%);
  position: relative;
  display: block;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__thumb::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: repeating-linear-gradient(to right, var(--gold) 0 8px, transparent 8px 16px);
}

.post-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-card h3 { font-size: var(--step-1); margin: 0; }
.post-card h3 a { color: var(--plum); }
.post-card h3 a:hover { color: var(--coral); }
.post-card p { color: var(--muted); font-size: var(--step-sm); margin: 0; }
.post-card .text-link { margin-top: auto; padding-top: 8px; }

/* ==========================================================================
   13. Pull quote band
   ========================================================================== */

.tagline-band { background: var(--blush); border-top: 1px solid var(--border); }
.tagline-band__inner { text-align: center; max-width: 900px; margin-inline: auto; }
.tagline-band blockquote {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.25;
  color: var(--plum);
  letter-spacing: -0.02em;
}
.tagline-band p { color: var(--muted); font-size: var(--step-sm); }

/* ==========================================================================
   14. Newsletter + footer
   ========================================================================== */

.subfooter { background: var(--plum); color: var(--cream); padding-block: clamp(48px, 5vw, 76px); }
.subfooter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.subfooter h2 { font-size: var(--step-3); margin-bottom: 10px; }
.subfooter p { color: var(--on-plum); font-size: var(--step-sm); margin: 0; }

@media (max-width: 820px) { .subfooter__grid { grid-template-columns: 1fr; } }

.signup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form input[type="email"],
.signup-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 15px 18px;
  border-radius: 4px;
  border: 1.5px solid var(--plum-line);
  background: rgba(245, 236, 215, 0.08);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-sm);
}
.signup-form input::placeholder { color: rgba(245, 236, 215, 0.55); }
.signup-form input:focus { border-color: var(--gold); }

.optin {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: var(--step-xs);
  color: var(--on-plum);
  line-height: 1.5;
}
.optin input[type="checkbox"] {
  flex: none;
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--coral);
}

.form-note { margin-top: 12px; font-size: var(--step-xs); color: rgba(245, 236, 215, 0.6); }

.form-message {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: var(--step-sm);
  background: var(--gold-tint);
  color: var(--plum);
  border: 1px solid var(--gold);
}
.subfooter .form-message { background: rgba(245, 236, 215, 0.12); color: var(--cream); border-color: var(--plum-line); }

.site-footer { background: var(--plum-deep); color: var(--on-plum); padding-block: clamp(48px, 5vw, 72px) 32px; }
.site-footer a { color: var(--on-plum); }
.site-footer a:hover { color: var(--gold); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
}
@media (max-width: 940px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { max-height: 34px; width: auto; }
.footer-about p { font-size: var(--step-sm); max-width: 34ch; }
.footer-email { font-family: var(--font-display); font-weight: 700; color: var(--cream); }

.footer-col h4 {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: var(--step-sm); }

.social-row { display: flex; gap: 10px; margin-top: 22px; }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 4px;
  border: 1px solid var(--plum-line);
  display: grid;
  place-items: center;
}
.social-row a:hover { border-color: var(--gold); background: rgba(201, 169, 110, 0.14); }
.social-row svg { width: 17px; height: 17px; fill: currentColor; }

.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--plum-line);
  font-size: var(--step-xs);
  color: rgba(245, 236, 215, 0.6);
}

/* ==========================================================================
   15. Embeds, team, partners
   ========================================================================== */

/* Third-party form embeds (Google Forms) and the beehiiv signup.
   Google Forms cannot auto-size, so the height is fixed in the template and
   only the width is fluid. */
.form-embed {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.form-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  background: var(--surface);
  border-radius: var(--radius);
}
.beehiiv-embed { min-height: 90px; }
.beehiiv-embed iframe { max-width: 100%; border: 0; }

/* Team */
.team-photo-wide {
  margin: 0 auto 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  max-width: 980px;
  box-shadow: var(--shadow-sm);
}
.team-photo-wide img {
  width: 100%;
  height: auto;
  display: block;
}
/* Empty state, if the photo is ever removed */
.team-photo-wide--empty {
  aspect-ratio: 21 / 9;
  border-style: dashed;
  border-color: var(--border-strong);
}
.team-photo-wide span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-list { display: grid; gap: 20px; }

/* Partner cards */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.partner__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 72px;
  margin-bottom: 18px;
}
.partner__logo img { display: block; width: auto; height: auto; max-width: 100%; }
.partner__lettermark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--plum);
  background: var(--gold-tint);
  padding: 12px 16px;
  border-radius: 6px;
  line-height: 1;
}

/* Lettermark stand-ins inside a logo row */
.logo-slot--mark span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--plum);
  background: var(--gold-tint);
  padding: 14px 20px;
  border-radius: 6px;
  line-height: 1;
}

/* ==========================================================================
   16. Interior pages
   ========================================================================== */

.page-hero {
  background: var(--plum);
  color: var(--on-plum);
  padding-block: clamp(56px, 6vw, 92px);
}
.page-hero h1 { color: var(--cream); max-width: 22ch; }
.page-hero p { font-size: var(--step-1); color: var(--on-plum); max-width: 64ch; }
.page-hero--wide h1 { max-width: 32ch; }

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-3); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose img { border-radius: var(--radius); margin-block: 1.5em; }
.prose ul li, .prose ol li { margin-bottom: 0.5em; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split--center { align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .trio { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .quad { grid-template-columns: 1fr; } }

.mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.section--surface .mini-card { background: var(--cream); }
.mini-card h3 { font-size: var(--step-1); }
.mini-card p { color: var(--muted); font-size: var(--step-sm); margin: 0; }

/* Team */
.team-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 820px;
  margin-inline: auto;
}
@media (max-width: 700px) { .team-card { grid-template-columns: 1fr; text-align: center; } }
.team-photo {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--blush);
  border: 1px solid var(--border);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 200px;
  margin-inline: auto;
  width: 100%;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Artwork that carries its own rounded shape and a badge overhanging the
   corner. Clipping or adding a second radius would cut the badge off, so the
   frame gets out of the way entirely. */
.team-photo--art {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.team-photo--art img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.team-card h3 { margin-bottom: 2px; }
.team-role {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 14px;
}

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--border); }
.accordion details {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 56px 24px 24px;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--plum);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--coral);
  line-height: 1;
}
.accordion details[open] summary::after { content: "–"; }
.accordion .accordion__body { padding: 0 24px 26px; color: var(--muted); max-width: 76ch; }

/* Partner list */
.partner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.section--surface .partner { background: var(--cream); }
.partner .kind {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--gold-tint);
  padding: 5px 9px 4px;
  line-height: 1;
  margin-bottom: 14px;
}
.partner strong { font-family: var(--font-display); color: var(--plum); display: block; font-size: var(--step-1); margin-bottom: 8px; }
.partner p { color: var(--muted); font-size: var(--step-xs); margin: 0; }

/* Resource links */
.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.resource-list li { border-bottom: 1px solid var(--border); }
.resource-list a,
.resource-list span.pending {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--plum);
}
.resource-list a::after { content: "→"; margin-left: auto; color: var(--gold); transition: transform 0.16s ease; }
.resource-list a:hover { color: var(--coral); }
.resource-list a:hover::after { transform: translateX(4px); }
.resource-list span.pending { color: var(--muted); }
.resource-list span.pending::after {
  content: "Coming soon";
  margin-left: auto;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--gold-tint);
  padding: 5px 9px 4px;
}

/* Pricing */
.rate-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rate-table th, .rate-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: var(--step-sm); }
.rate-table th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--plum);
  border-bottom-color: var(--plum);
}
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table td strong { font-family: var(--font-display); color: var(--plum); }

.include-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.section--surface .include-card { background: var(--cream); }
.include-card h3 { margin-bottom: 6px; }
.include-card .sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 20px;
}

/* Forms on light backgrounds */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
}
.section--surface .form-card { background: var(--cream); }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  padding: 13px 15px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--step-sm);
  color: var(--text);
  background: var(--cream);
  width: 100%;
}
.section--surface .field input,
.section--surface .field select,
.section--surface .field textarea { background: var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--plum); }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.honeypot { position: absolute; left: -9999px; }

.optin--light { color: var(--muted); }

/* Placeholder note for content still owed */
.tbd {
  border: 1px dashed var(--coral);
  background: var(--coral-tint);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: var(--step-sm);
  color: var(--plum);
}
.tbd strong {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
  color: var(--coral);
}

/* Blog index + single */
.post-header { max-width: 72ch; }
.post-meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.pagination { margin-top: 48px; display: flex; gap: 10px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--plum);
  font-weight: 700;
  font-size: var(--step-sm);
}
.pagination .page-numbers.current { background: var(--plum); color: var(--cream); border-color: var(--plum); }

.wp-caption-text, .wp-block-image figcaption { font-size: var(--step-xs); color: var(--muted); }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

/* Editor-only build notes, never shown to visitors */
.editor-note {
  border-left: 3px solid var(--coral);
  background: var(--coral-tint);
  padding: 14px 18px;
  font-size: var(--step-xs);
  color: var(--plum);
  margin-bottom: 24px;
  border-radius: 0 6px 6px 0;
}
.editor-note strong { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; color: var(--coral); margin-bottom: 4px; }

/* ==========================================================================
   17. Illustration animation

   Every hidden starting state is scoped to .rwp-anim, which is only added by
   the inline script in header.php when JavaScript runs and the visitor has not
   asked for reduced motion. If either is false, nothing here applies and the
   illustrations render plainly.
   ========================================================================== */

.rwp-anim .stub-card,
.rwp-anim .panel {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rwp-anim .stub-card.is-in,
.rwp-anim .panel.is-in {
  opacity: 1;
  transform: none;
}

/* Stub card: the tear line separates, then the rows fill in one at a time,
   the way a statement prints. */
.rwp-anim .stub-card__tear::before,
.rwp-anim .stub-card__tear::after {
  transform: translateY(-50%) scale(0.2);
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) 0.25s;
}
.rwp-anim .stub-card.is-in .stub-card__tear::before,
.rwp-anim .stub-card.is-in .stub-card__tear::after {
  transform: translateY(-50%) scale(1);
}

.rwp-anim .stub-card .stub-row,
.rwp-anim .checklist li,
.rwp-anim .layer {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.rwp-anim .stub-card.is-in .stub-row,
.rwp-anim .is-in .checklist li,
.rwp-anim .is-in .layer {
  opacity: 1;
  transform: none;
}

/* Stagger. Rows land in sequence rather than all at once. */
.rwp-anim .stub-card.is-in .stub-row:nth-child(1),
.rwp-anim .is-in .checklist li:nth-child(1),
.rwp-anim .is-in .layer:nth-child(1) { transition-delay: 0.30s; }
.rwp-anim .stub-card.is-in .stub-row:nth-child(2),
.rwp-anim .is-in .checklist li:nth-child(2),
.rwp-anim .is-in .layer:nth-child(2) { transition-delay: 0.38s; }
.rwp-anim .stub-card.is-in .stub-row:nth-child(3),
.rwp-anim .is-in .checklist li:nth-child(3),
.rwp-anim .is-in .layer:nth-child(3) { transition-delay: 0.46s; }
.rwp-anim .stub-card.is-in .stub-row:nth-child(4),
.rwp-anim .is-in .checklist li:nth-child(4) { transition-delay: 0.54s; }
.rwp-anim .stub-card.is-in .stub-row:nth-child(5),
.rwp-anim .is-in .checklist li:nth-child(5) { transition-delay: 0.62s; }
.rwp-anim .is-in .checklist li:nth-child(6) { transition-delay: 0.70s; }

/* The tick marks pop in just behind their row. */
.rwp-anim .check {
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
}
.rwp-anim .is-in .check { transform: scale(1); opacity: 1; }
.rwp-anim .is-in .checklist li:nth-child(1) .check { transition-delay: 0.42s; }
.rwp-anim .is-in .checklist li:nth-child(2) .check { transition-delay: 0.50s; }
.rwp-anim .is-in .checklist li:nth-child(3) .check { transition-delay: 0.58s; }
.rwp-anim .is-in .checklist li:nth-child(4) .check { transition-delay: 0.66s; }
.rwp-anim .is-in .checklist li:nth-child(5) .check { transition-delay: 0.74s; }
.rwp-anim .is-in .checklist li:nth-child(6) .check { transition-delay: 0.82s; }

/* Status flags fade up last — the confirmation after the line is drawn. */
.rwp-anim .stub-card .stub-flag,
.rwp-anim .checklist li span.flag {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rwp-anim .stub-card.is-in .stub-flag,
.rwp-anim .is-in .checklist li span.flag { opacity: 1; transition-delay: 0.85s; }

/* The gold dot draws itself in alongside its flag. */
.rwp-anim .stub-card .stub-flag::before {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) 0.9s;
}
.rwp-anim .stub-card.is-in .stub-flag::before { transform: scale(1); }

/* Layer stack: the base settles first, then the layers above it. */
.rwp-anim .layer--base { transition-delay: 0.30s; }
.rwp-anim .is-in .layer:nth-child(1) { transition-delay: 0.46s; }
.rwp-anim .is-in .layer:nth-child(2) { transition-delay: 0.38s; }
.rwp-anim .is-in .layer:nth-child(3) { transition-delay: 0.30s; }

/* ==========================================================================
   18. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .carousel__track { scroll-behavior: auto; }
}