/* ==========================================================================
   The Ministry CPA — v1 stylesheet (bold / creator-brand pass)
   Palette: two colors only — navy (anchor/structure) and orange (the one
   accent, used consistently everywhere instead of splitting focus across
   several competing hues) — plus cream/white as neutrals.
   Fraunces (display) + Plus Jakarta Sans (body) + Caveat (hand-note accent).
   Still a CPA site: no fabricated stats or press logos, just louder design.
   ========================================================================== */

:root {
  --navy: #14213D;
  --navy-light: #1F335C;
  --navy-deep: #0F1830;
  --cream: #FBF6EC;
  --cream-dark: #F3EAD9;

  --orange: #DD6428;
  --orange-deep: #A8431B;

  --ink: #201B14;
  --slate: #5C5347;
  --border: #E8DCC8;
  --white: #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-note: 'Caveat', cursive;

  --max-width: 1160px;
  --shadow-hard: 6px 6px 0 var(--navy);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--navy);
  margin: 0 0 0.5em;
  line-height: 1.08;
  font-weight: 700;
}

p { margin: 0 0 1em; color: var(--slate); }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

blockquote { margin: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ---------- Highlight underline swipe ---------- */
/* One highlight color used everywhere, not a different one per instance —
   consistency reads more intentional than variety here. */
.highlight {
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.08em;
}
.highlight-orange { background-image: linear-gradient(transparent 0%, rgba(221,100,40,0.32) 0%); }

/* ---------- Organic blobs (decorative, no images) ---------- */
.blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  z-index: 0;
}
.blob-orange { background: var(--orange); }
.blob-navy { background: var(--navy); }

/* ---------- Hand-drawn note accent ---------- */
.hand-note {
  font-family: var(--font-note);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--orange-deep);
  transform: rotate(-6deg);
  display: inline-block;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--orange-deep); }
.btn-secondary {
  background: var(--cream);
  border-color: var(--navy);
  color: var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-small { padding: 10px 22px; font-size: 0.875rem; }

/* Hard offset "sticker" shadow, classic bold-creator-site treatment */
.btn-hard {
  box-shadow: var(--shadow-hard);
}
.btn-hard:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--navy);
}
.btn-hard:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--navy);
}
.contact .btn-secondary { background: var(--cream); border-color: var(--navy-deep); color: var(--navy); }
.contact .btn-hard { box-shadow: 6px 6px 0 var(--navy-deep); }
.contact .btn-hard:hover { box-shadow: 8px 8px 0 var(--navy-deep); }
.services .btn-hard,
.newsletter .btn-hard { box-shadow: 6px 6px 0 var(--navy-deep); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 246, 236, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--navy);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.main-nav {
  display: flex;
  gap: 32px;
  margin: 0 24px;
}
.main-nav a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 3px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transition: right 0.2s ease;
}
.main-nav a:hover::after { right: 0; }
.main-nav a:hover { color: var(--orange-deep); }
.header-cta { flex-shrink: 0; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--navy);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 96px 0 0;
  background: var(--cream);
  overflow: hidden;
}
.hero-watermark {
  position: absolute;
  top: -0.15em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 18vw, 15rem);
  color: var(--navy);
  opacity: 0.05;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}
.hero-blob-1 {
  width: 420px; height: 420px;
  top: -120px; left: -160px;
  opacity: 0.18;
  filter: blur(4px);
}
.hero-blob-2 {
  width: 320px; height: 320px;
  bottom: -140px; right: -100px;
  opacity: 0.14;
  filter: blur(4px);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
}
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange-deep);
  margin: 0 0 16px;
}
.eyebrow-center { text-align: center; }
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.hero-sub {
  font-size: 1.15rem;
}
.hero-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.hero-cta-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-cta-sub {
  font-size: 0.85rem;
  color: var(--slate);
  margin-top: 20px;
}
.trust-bar {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px dashed var(--border);
}
.trust-bar p {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-light);
  margin: 0;
}

.hero-photo-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-blob {
  width: 88%; height: 88%;
  top: 6%; left: 6%;
}
.photo-placeholder {
  position: relative;
  width: 68%; height: 68%;
  border-radius: 50%;
  background: var(--navy);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--cream);
  box-shadow: var(--shadow-hard);
}
.spin-badge {
  position: absolute;
  inset: -14% -14% auto auto;
  width: 100%;
  height: 100%;
  color: var(--navy);
  animation: spin 24s linear infinite;
}
.spin-badge-ring { fill: none; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spin-badge { animation: none; }
}
.sticker {
  position: absolute;
  background: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--navy);
  z-index: 2;
  white-space: nowrap;
}
.sticker-1 {
  bottom: 6%;
  left: -8%;
  transform: rotate(-7deg);
  color: var(--navy);
}
.sticker-2 {
  top: 2%;
  right: -12%;
  transform: rotate(5deg);
  color: var(--orange-deep);
}

/* ---------- Ticker ---------- */
.ticker {
  background: var(--navy);
  overflow: hidden;
  border-top: 2px solid var(--navy-deep);
  border-bottom: 2px solid var(--navy-deep);
  padding: 14px 0;
}
.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: ticker-scroll 38s linear infinite;
}
.ticker-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cream);
  white-space: nowrap;
}
.ticker-track span::after {
  content: "\2726";
  margin-left: 40px;
  color: var(--orange);
  font-style: normal;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- Section shared ---------- */
section { padding: 88px 0; position: relative; }
.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  max-width: 700px;
}
.section-title.center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.center { text-align: center; }

/* Wave dividers between color-blocked sections */
.wave {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: 70px;
  display: block;
}
.wave-top { top: -1px; transform: translateY(-99%); z-index: 1; }

/* Every divider is a wave-top belonging to the LATER section in the pair,
   poking backward into the section above it. This matters for paint order:
   two sibling sections with position:relative/z-index:auto paint in DOM
   order, so a later section's wave-top naturally paints over the earlier
   section it overlaps — the reverse (an earlier section's wave hanging
   forward into the next section) gets silently painted over by that next
   section's own opaque background. Each wave is filled with its own
   section's color, since it's introducing that color into the section above. */
.pull-quote .wave-top path { fill: var(--navy); }
.about .wave-top path { fill: var(--cream-dark); }
.services .wave-top path { fill: var(--navy); }
.newsletter .wave-top path { fill: var(--orange-deep); }
.contact .wave-top path { fill: var(--navy); }

/* ---------- Problem ---------- */
.problem { background: var(--white); }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.problem-card {
  background: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 32px 28px 28px;
  position: relative;
  transition: transform 0.2s ease;
}
.problem-card:hover { transform: rotate(-1deg) translateY(-4px); }
.problem-card::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px;
  height: 8px;
  border-radius: 8px 8px 0 0;
  background: var(--orange);
}
.problem-icon {
  width: 44px; height: 44px;
  color: var(--navy);
  margin-bottom: 20px;
}
.problem-icon svg { width: 100%; height: 100%; }
.problem-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.problem-card p { font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Pull quote ---------- */
.pull-quote {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding: 120px 0;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  color: var(--orange);
  opacity: 0.85;
  margin: 0 0 -1.5rem;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--cream);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.3;
}
.quote-attribution {
  margin-top: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--orange);
}

/* ---------- About ---------- */
.about {
  background: var(--cream-dark);
}
.about-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
.about-photo { position: relative; text-align: center; padding-top: 20px; }
.about-blob {
  width: 220px; height: 220px;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(8deg);
  opacity: 0.16;
}
.photo-placeholder-lg {
  position: relative;
  width: 200px; height: 200px;
  border-radius: 8px;
  margin: 0 auto 12px;
  font-size: 3rem;
}
.photo-caption {
  font-size: 0.8rem;
  color: var(--slate);
  margin: 0;
}
.about-relationships {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--cream);
  border-left: 4px solid var(--orange);
  border-radius: 4px;
}
.relationships-label {
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-bottom: 12px;
}

/* ---------- Services ---------- */
.services { background: var(--navy); }
.services .section-title { color: var(--white); }
.services .eyebrow { color: var(--orange); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.service-card {
  background: var(--navy-light);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 32px 28px;
  position: relative;
  transition: transform 0.2s ease;
}
.service-card:hover { transform: translateY(-6px); }
.service-card::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px;
  height: 8px;
  border-radius: 8px 8px 0 0;
  background: var(--orange);
}
.service-number {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--orange);
}
.service-card h3 {
  color: var(--white);
  margin-top: 12px;
  font-size: 1.2rem;
}
.service-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 14px;
}
.service-card p:not(.service-tag) {
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
}
.link-arrow {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--orange);
  font-size: 0.9rem;
}
.link-arrow:hover { text-decoration: underline; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--orange-deep); color: var(--cream); }
.newsletter .section-title,
.newsletter-title { color: var(--cream); }
/* Orange-on-orange would vanish, so the eyebrow/checkmarks on this section
   go navy instead — the same navy+orange combo just flipped, still only
   the two brand colors. */
.newsletter .eyebrow { color: var(--navy); }
.newsletter-explainer {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
}
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.newsletter-details h3,
.newsletter-archive h3 { color: var(--cream); }
.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.92);
  font-size: 0.98rem;
}
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--navy);
  font-weight: 700;
}
.signup-form {
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
/* Same fix as .form-success: don't set display unconditionally, or the
   hidden attribute JS sets on submit (form.hidden = true) has no effect. */
.signup-form:not([hidden]) {
  display: flex;
}
.signup-form input {
  flex: 1 1 240px;
  padding: 14px 20px;
  border: 2px solid var(--navy-deep);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--cream);
}
.signup-form input:focus {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.form-success {
  margin-top: 16px;
  color: var(--cream);
  background: var(--navy);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.9rem;
}
/* Unconditionally setting `display` above would override the browser's
   default [hidden] { display: none } rule at equal specificity, making
   the `hidden` attribute a no-op. Scope it to only apply once JS clears
   `hidden`, so the message stays hidden until the form actually submits. */
.form-success:not([hidden]) {
  display: inline-block;
}
.form-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  margin-top: 10px;
}
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.archive-card {
  background: var(--cream);
  border: 2px solid var(--navy-deep);
  border-radius: 8px;
  padding: 20px 22px;
  border-left-width: 6px;
}
.archive-card-1 { border-left-color: var(--navy); }
.archive-card-2 { border-left-color: var(--orange); }
.archive-card-3 { border-left-color: var(--navy); }
.archive-badge {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.archive-card h4 {
  font-size: 1rem;
  margin: 0;
  color: var(--navy);
}

/* ---------- Speaking ---------- */
.speaking { background: var(--white); }
.speaking-inner { max-width: 820px; }
.speaking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 36px 0 40px;
}
.speaking-grid h3 {
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.plain-list li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--slate);
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.speaking-grid > div:nth-child(2) .plain-list li::before { background: var(--navy); }

/* ---------- Contact ---------- */
/* No overflow:hidden here (unlike .hero) — this section needs its
   wave-top to poke upward past its own box; overflow:hidden would clip
   it before it renders. Horizontal blob bleed is still contained by
   body's overflow-x:hidden. */
.contact { background: var(--navy); }
.contact-blob {
  width: 360px; height: 360px;
  top: -140px; right: -120px;
  opacity: 0.14;
}
.contact .section-title { color: var(--white); }
.contact .eyebrow { color: var(--orange); }
.contact-sub { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 40px; }
.contact-inner { text-align: center; }
.contact-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding: 40px 0 24px;
  border-top: 5px solid var(--orange);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.footer-logo {
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}
.footer-tag { margin: 4px 0 0; font-size: 0.85rem; }
.footer-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-nav a { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.footer-nav a:hover { color: var(--orange); }
.footer-copyright {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* ---------- Sticky floating subscribe CTA ---------- */
.sticky-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--orange);
  color: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 200;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sticky-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta:hover { background: var(--orange-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo-wrap { max-width: 280px; }
  .sticker { display: none; }
}

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
  .about-photo { max-width: 220px; margin: 0 auto; }
  .newsletter-grid { grid-template-columns: 1fr; }
  .speaking-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 20px 24px;
    gap: 18px;
    border-bottom: 2px solid var(--navy);
  }
  .site-header.nav-open .header-cta {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 168px;
    padding: 0 24px 20px;
    background: var(--cream);
  }
  .hero { padding: 64px 0 0; }
  section { padding: 64px 0; }
  .pull-quote { padding: 80px 0; }
  .quote-mark { font-size: 5rem; }
  .sticky-cta { right: 16px; bottom: 16px; padding: 12px 20px; font-size: 0.82rem; }
}