/* ==========================================================================
   Inventive Ink Co. — Marketing Strategy (by Lexi Williams)
   Tokens from Assets/design.md
   ========================================================================== */

:root {
  --primary: #9C0F2A;
  --primary-hover: #7D0C22;
  --neutral-dark: #1D0207;
  --neutral-light: #FFF2CA;
  --light-pink: #F4D9DE;
  --white: #FFFFFF;
  --taupe: #D2B18C;
  --gold: #BF9142;
  --terracotta: #D97757;
  --success: #3F7A5B;
  --border: #E4DED2;

  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --container-max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--neutral-dark);
  background: var(--white);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 16px;
  line-height: 1.2;
}

h1 { font-weight: 800; font-size: 3.5rem; }
h2 { font-weight: 600; font-size: 2.625rem; }
h3 { font-weight: 500; font-size: 1.75rem; }

p { margin: 0 0 16px; }
em { color: var(--primary); font-style: italic; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

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

section { padding: 96px 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin: 0 0 16px;
}
.eyebrow--center { text-align: center; }

/* Two-line eyebrow: breaks at a chosen point instead of wherever the
   container happens to run out of room. */
.eyebrow--stack span { display: block; }

.section-title { max-width: 720px; }
.section-title--center { text-align: center; margin-left: auto; margin-right: auto; }

.section-sub {
  font-size: 1.125rem;
  color: #5a4a4d;
  max-width: 620px;
}
.section-sub--center { text-align: center; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: 16px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--primary);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--primary-hover);
  text-decoration: none;
}

.btn--secondary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn--secondary:hover {
  background: var(--neutral-light);
  text-decoration: none;
}

.btn--white {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.btn--white:hover {
  background: var(--neutral-light);
  text-decoration: none;
}

.btn--pill { border-radius: 999px; }

.btn--lg { padding: 18px 40px; font-size: 1.0625rem; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--neutral-dark);
}
.nav__logo:hover { text-decoration: none; }
.nav__logo-mark { width: 36px; height: 36px; }

/* Two-line lockup: the company name carries the weight, the personal
   byline sits under it a size down. */
.nav__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav__logo-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
}
.nav__logo-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.75rem;
  color: #5a4a4d;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links a:not(.btn) {
  color: var(--neutral-dark);
  font-weight: 500;
  font-size: 1rem;
}
.nav__links a:not(.btn):hover { color: var(--primary); }

.nav__cta { padding: 12px 24px; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--neutral-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 80px 0 96px;
  background: linear-gradient(180deg, var(--light-pink) 0%, var(--white) 100%);
  /* .hero__person is a decorative bleed that sits wider than the phone
     stage. Below ~370px it reached past the viewport and widened the whole
     document; clipping it here keeps the composition identical and the page
     free of horizontal scroll. */
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

/* The headline is two full sentences rather than the one short line this
   slot was originally sized for, so the type steps down to keep the block
   roughly the same height beside the phone. Both lines keep the identical
   H1 treatment; only the spacing between them separates the thoughts. */
.hero__headline { font-size: 2.5rem; }

.hero__headline-line { display: block; }
.hero__headline-line + .hero__headline-line { margin-top: 20px; }

/* Second sentence steps down a size so the two lines read as a lead and a
   follow-up rather than one undifferentiated wall of headline. */
.hero__headline-line--sm { font-size: 0.75em; }

/* Burgundy italic pulls the promise out of line one. 8.6:1 on the hero's
   pink gradient. */
.hero__mark {
  color: var(--primary);
  font-style: italic;
}

.hero__tagline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--primary);
  margin: 0 0 20px;
}

.hero__sub {
  font-size: 1.25rem;
  color: #5a4a4d;
  max-width: 520px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* --- Cascading fade-in on load --- */

@keyframes cascadeFadeIn {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__copy > * {
  opacity: 0;
  animation: cascadeFadeIn 0.5s ease forwards;
}
.hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.25s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.35s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.45s; }

/* --- Phone mockup / animated "video" hero --- */

.hero__visual { display: flex; justify-content: center; }

.hero__phone-stage {
  position: relative;
  width: 300px;
  height: 610px;
}

.hero__person {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 100px;
  width: 340px;
  max-width: none;
  height: auto;
  transform: translateY(-42%);
  pointer-events: none;
  filter: drop-shadow(10px 14px 18px rgba(29, 2, 7, 0.2));
}

.phone {
  width: 300px;
  height: 610px;
  background: var(--neutral-dark);
  border-radius: 42px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(29, 2, 7, 0.18);
  position: relative;
  z-index: 1;
}

.phone__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 22px;
  background: var(--neutral-dark);
  border-radius: 0 0 16px 16px;
  z-index: 3;
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 30px;
  overflow: hidden;
}

/* --- Email interaction inside the phone ---
   One 16s timeline shared by every moving part, so the beats stay in sync:
     0-8%    the email from Lexi lands in the inbox
     12-22%  it gets tapped
     20-27%  the email slides open
     36-56%  the open email scrolls down to the CTA
     72-83%  the CTA gets tapped
     88-94%  it slides back to the inbox and the loop restarts
   Every rule below is sized in `em` off .mail's font-size, so the whole
   screen scales with one declaration at the mobile breakpoint. */

.mail {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--neutral-dark);
  background: var(--white);
  --mail-scroll: 168px;
}

.mail__inbox,
.mail__open {
  position: absolute;
  inset: 0;
  background: var(--white);
  padding-top: 30px; /* clears the notch */
}

.mail__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  padding: 0.7em 1.1em;
  border-bottom: 1px solid var(--border);
}
.mail__bar-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25em;
}
.mail__bar-count {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--primary);
}

.mail__bar--open { justify-content: flex-start; }
.mail__bar--open .mail__bar-title { font-size: 1em; font-weight: 500; color: var(--primary); }
.mail__back {
  width: 0.6em;
  height: 0.6em;
  border: solid var(--primary);
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(45deg);
}

.mail__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.9em 1.1em;
  border-bottom: 1px solid var(--border);
}

.mail__avatar {
  flex: 0 0 auto;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--taupe);
}
.mail__avatar--brand {
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mail__lines { flex: 1 1 auto; padding-top: 0.3em; }
.mail__lines i {
  display: block;
  height: 0.55em;
  border-radius: 0.3em;
  background: var(--border);
  margin-bottom: 0.5em;
  width: 72%;
}
.mail__lines i:first-child { width: 45%; }
.mail__lines i:last-child { margin-bottom: 0; }

.mail__row-copy { flex: 1 1 auto; min-width: 0; }
.mail__from,
.mail__subject,
.mail__preview { display: block; }
.mail__from { font-weight: 600; font-size: 0.95em; }
.mail__subject { font-weight: 600; font-size: 0.95em; }
.mail__preview {
  font-size: 0.9em;
  color: #8a7a6a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail__unread {
  position: absolute;
  right: 0.8em;
  top: 1.3em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--primary);
}

.mail__row--target {
  background: #FBEFEA;
  animation: mailArrive 16s ease infinite;
}

/* Starts off-screen so a stopped animation rests on the inbox, not on a
   half-open email. */
.mail__open {
  z-index: 2;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  animation: mailOpen 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.mail__scroll {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.mail__doc {
  padding: 1.2em 1.2em 0;
  animation: mailRead 16s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.mail__doc-subject {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.25;
  margin: 0 0 0.35em;
}
.mail__doc-from {
  font-size: 0.9em;
  color: #8a7a6a;
  margin: 0 0 1em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--border);
}
.mail__doc-hed {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.3;
  color: var(--primary);
  margin: 0 0 0.9em;
}
.mail__doc-p {
  font-size: 0.92em;
  margin: 0 0 0.85em;
  color: #4a3a3d;
}
/* Brand banner and signature block are here to make the email read as a
   real send — and to make the body taller than the screen, so the CTA
   genuinely starts below the fold and the auto-scroll has something to
   reveal. */
.mail__doc-banner {
  display: block;
  margin: 0 -1.2em 1.1em;
  padding: 1.5em 1.2em;
  background: var(--primary);
  color: var(--neutral-light);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.14em;
  text-align: center;
}

/* Stand-in for an email hero image — same soft gradient the old phone
   mockup used, so it stays native to the existing art direction. */
.mail__doc-hero {
  display: block;
  height: 11em;
  margin: 0 -1.2em 1.2em;
  background: linear-gradient(135deg, #F6D9CF 0%, #EFC6D6 100%);
  position: relative;
}
.mail__doc-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  border: 2px solid rgba(156, 15, 42, 0.35);
}

.mail__doc-cta {
  display: block;
  margin-top: 1.4em;
  text-align: center;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.9em 1em;
  border-radius: var(--radius-sm);
  animation: mailCtaPress 16s ease infinite;
}

.mail__doc-sig {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 1.6em;
}
.mail__doc-sig-avatar {
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--light-pink);
}
.mail__doc-sig-lines { flex: 1 1 auto; }
.mail__doc-sig-lines i {
  display: block;
  height: 0.5em;
  border-radius: 0.3em;
  background: var(--border);
  margin-bottom: 0.45em;
  width: 55%;
}
.mail__doc-sig-lines i:last-child { width: 38%; margin-bottom: 0; }

.mail__doc-foot {
  display: block;
  margin-top: 1.5em;
  padding: 1.2em 0 1.6em;
  border-top: 1px solid var(--border);
}
.mail__doc-foot i {
  display: block;
  height: 0.42em;
  border-radius: 0.3em;
  background: var(--border);
  margin: 0 auto 0.45em;
  width: 62%;
}
.mail__doc-foot i:last-child { width: 40%; margin-bottom: 0; }

.mail__tap {
  position: absolute;
  z-index: 3;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  border: 2px solid var(--primary);
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.mail__tap--row { top: 36%; animation: mailTapRow 16s ease infinite; }
.mail__tap--cta { top: 76%; animation: mailTapCta 16s ease infinite; }

@keyframes mailArrive {
  0%, 3%    { opacity: 0; transform: translateY(-10px); background: #FBEFEA; }
  8%        { opacity: 1; transform: translateY(0); background: #FBEFEA; }
  15%, 19%  { opacity: 1; transform: translateY(0); background: var(--light-pink); }
  24%, 100% { opacity: 1; transform: translateY(0); background: #FBEFEA; }
}

@keyframes mailOpen {
  0%, 20%   { transform: translateX(100%); }
  27%, 88%  { transform: translateX(0); }
  94%, 100% { transform: translateX(100%); }
}

@keyframes mailRead {
  0%, 36%   { transform: translateY(0); }
  56%, 90%  { transform: translateY(calc(var(--mail-scroll) * -1)); }
  95%, 100% { transform: translateY(0); }
}

@keyframes mailTapRow {
  0%, 12%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  15%      { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  22%      { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
  100%     { opacity: 0; }
}

@keyframes mailTapCta {
  0%, 72%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  76%      { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  83%      { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
  100%     { opacity: 0; }
}

@keyframes mailCtaPress {
  0%, 74%   { transform: scale(1); }
  77%       { transform: scale(0.94); }
  81%, 100% { transform: scale(1); }
}

/* Reduced motion rests on the inbox: the email from Lexi is fully visible
   and readable, the opened panel stays parked off-screen. */
@media (prefers-reduced-motion: reduce) {
  .mail__row--target,
  .mail__open,
  .mail__doc,
  .mail__doc-cta,
  .mail__tap {
    animation: none;
  }
}

/* ==========================================================================
   Proof strip / marquee
   ========================================================================== */

.proof {
  padding: 48px 0;
  background: var(--neutral-dark);
  overflow: hidden;
}

.marquee { overflow: hidden; }

.marquee__track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: marquee 48s linear infinite;
}

.marquee__track span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--neutral-light);
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   Client logo band — same marquee mechanics as the results strip, on
   burgundy instead of charcoal so the two bands read as distinct.
   ========================================================================== */

.logo-band {
  padding: 36px 0;
  background: var(--primary);
  overflow: hidden;
}

/* The duplicate set is what makes the -50% loop seamless, so both halves
   have to be identical in width — hence one shared .marquee__set rule.
   The longer track needs a proportionally longer duration to hold the same
   ~35px/s the results strip runs at. */
.marquee__track--logos {
  gap: 0;
  align-items: center;
  animation-duration: 120s;
}

.marquee__track--logos .marquee__set {
  display: flex;
  align-items: center;
  gap: 72px;
  padding-right: 72px;
}

.marquee__track--logos img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.92;
}

@media (max-width: 640px) {
  .logo-band { padding: 28px 0; }
  .marquee__track--logos .marquee__set { gap: 48px; padding-right: 48px; }
  .marquee__track--logos img { height: 36px; }
}

/* ==========================================================================
   Feature sections (two-column text/image)
   ========================================================================== */

.feature { background: var(--white); }
.feature--alt { background: var(--light-pink); }

.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feature__inner--reverse { grid-template-columns: 1fr 1fr; }

.feature__headline {
  font-size: 2.625rem;
}

.feature__headline--typewriter { min-height: 2.4em; }

.feature__cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--primary);
  margin-left: 2px;
  vertical-align: -0.1em;
  animation: cursorBlink 0.9s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .feature__cursor { animation: none; }
}

.feature__subhead {
  font-size: 1.25rem;
  margin-bottom: 32px;
}

/* Multi-paragraph variant: steps the size down a notch so three paragraphs
   occupy roughly the same block as the single line they replaced, keeping
   the section's height alongside the 4:5 photo. */
.feature__subhead--stack { font-size: 1.0625rem; }
.feature__subhead--stack p { font-size: inherit; margin: 0 0 14px; }
.feature__subhead--stack p:last-child { margin-bottom: 0; }

.feature__copy p {
  font-size: 1.125rem;
}

.feature__visual { display: flex; }

.feature__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.feature__cta {
  text-align: center;
  margin-top: 80px;
}

.feature__cta-text {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  max-width: 600px;
  margin: 0 auto 16px;
}

.feature__cta-sub {
  font-size: 1.0625rem;
  color: #5a4a4d;
  max-width: 640px;
  margin: 0 auto 32px;
}

/* ==========================================================================
   Testimonials — carousel
   ========================================================================== */

.results { background: var(--white); }

/* Vertical (9:16) video testimonial, centered at both sizes */
/* The width cap lives on the OUTER wrapper, not the frame: percentage
   padding resolves against the containing block's width, so capping the
   frame itself left padding-top at 177.78% of the full-width parent
   (~2000px tall) and letterboxed the video. */
.video-testimonial {
  max-width: 360px;
  margin: 48px auto 0;
}

.video-testimonial__frame {
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* 9:16 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--neutral-dark);
}
.video-testimonial__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.testimonial-carousel {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-track-wrap {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.testimonial-track {
  display: flex;
  transition: transform 0.4s ease;
}

.testimonial-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  margin: 0;
}

.testimonial-slide__image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-pink);
  min-height: 420px;
  padding: 32px;
}
.testimonial-slide__image img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: 0 12px 32px rgba(29, 2, 7, 0.12);
}

.testimonial-slide__content {
  background: var(--light-pink);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-slide__quote {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 20px;
}

.testimonial-slide__content p {
  font-size: 1rem;
}

.testimonial-slide__content footer {
  margin-top: 8px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--neutral-dark);
}

.testimonial-slide__name {
  color: var(--primary);
  text-decoration: underline;
}

.testimonial-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--primary);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.testimonial-arrow:hover { background: var(--neutral-light); }

/* ==========================================================================
   Offers
   ========================================================================== */

.offers { background: var(--white); }

/* Expanding row. The signature card is widest on load; hovering or tabbing
   into any card hands it the extra width instead. Flex-basis 0 with
   min-width 0 lets every card shrink, so the row always totals 100% and
   nothing overflows — the growth is purely a redistribution. */
.offer-grid {
  display: flex;
  gap: 24px;
  margin-top: 64px;
  align-items: stretch;
}

.offer-card {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: flex-grow 0.35s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Default emphasis: the signature offer. */
.offer-card--tier3 { flex-grow: 1.9; }

/* Once the visitor points at any card, that card takes the emphasis. :has
   is what lets the default card stand down; browsers without it simply keep
   the signature card wide and grow the hovered one too, which still reads
   correctly. */
.offer-grid:has(.offer-card:hover) .offer-card--tier3,
.offer-grid:has(.offer-card:focus-within) .offer-card--tier3 { flex-grow: 1; }

.offer-card:hover,
.offer-card:focus-within {
  flex-grow: 1.9;
  box-shadow: 0 16px 40px rgba(29, 2, 7, 0.16);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .offer-card { transition: none; }
  .offer-card:hover, .offer-card:focus-within { transform: none; }
}

.offer-card--tier1 { background: var(--white); }
.offer-card--tier2 { background: var(--light-pink); border-color: #EBC3CB; }

.offer-card--tier3 {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.offer-card--tier3 .offer-card__desc { color: #F1D6DC; }

.offer-card--featured {
  background: var(--neutral-dark);
  border-color: var(--neutral-dark);
  color: var(--white);
}

.offer-card__tag {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.offer-card__tag--light { color: var(--gold); }

/* Badge for the offer we most want people to pick. Gold fill with charcoal
   type reads at 6.4:1 and is the one place on the card that isn't burgundy
   or white, so it catches the eye first. */
.offer-card__tag--pill {
  display: inline-block;
  align-self: flex-start;
  background: var(--gold);
  color: var(--neutral-dark);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.offer-card__name {
  font-size: 1.375rem;
  margin-bottom: 8px;
}

.offer-card__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 16px;
}
.offer-card__price span {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.7;
}

.offer-card__desc {
  flex-grow: 1;
  font-size: 1rem;
}
.offer-card--featured .offer-card__desc { color: #F1E5D6; }

/* Descriptions can now hold several paragraphs and a bulleted list. Grid
   items stretch, so a taller card just raises the whole row and every CTA
   still lines up along the bottom via .offer-card__desc's flex-grow. */
.offer-card__desc p { margin: 0 0 10px; }
.offer-card__desc p:last-child { margin-bottom: 0; }

.offer-card__list {
  margin: 10px 0 0;
  padding-left: 20px;
}
.offer-card__list li { margin-bottom: 6px; }
.offer-card__list li:last-child { margin-bottom: 0; }

.offer-card__desc .offer-card__note { margin: 16px 0 0; }

.offer-card__cta { text-align: center; margin-top: 16px; }

/* ==========================================================================
   IMPACT Framework — sticky-stacking scroll cards on a parallax background
   ========================================================================== */

.framework {
  position: relative;
  padding: 0;
  background: var(--neutral-dark);
}

.framework__bg {
  position: absolute;
  inset: 0;
  background-image: url('Assets/Lexi%20Williams%20Photo%201.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}

.framework__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,2,7,0.8) 0%, rgba(29,2,7,0.55) 45%, rgba(29,2,7,0.8) 100%);
  z-index: 1;
}

.framework__intro {
  position: relative;
  z-index: 2;
  padding: 96px 0 32px;
}
.framework__intro .eyebrow { color: var(--gold); }
.framework__intro .section-title { color: var(--white); }
.framework__intro .section-sub { color: var(--neutral-light); }

.stack { position: relative; z-index: 2; }

.stack__card {
  /* Scroll distance per step == this height, so dropping the old 100vh to
     50vh halves the time it takes to scroll the framework. height:auto with
     a min-height (rather than a fixed 50vh) means a card that wraps to more
     than half a screen at narrow widths grows instead of overflowing. */
  height: auto;
  min-height: 55vh;
  position: sticky;
  top: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--i) + 1);
}

.stack__card-inner {
  width: 100%;
  max-width: 75%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 64px;
  text-align: left;
}

.insight-card__num {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--white);
  background: var(--primary);
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  margin-bottom: 24px;
}

.insight-card__title { font-size: 2.625rem; margin-bottom: 16px; }

.insight-card__text {
  font-size: 1.25rem;
  color: #5a4a4d;
  max-width: 560px;
  margin: 0;
}

.framework__cta {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 96px 0;
}

.framework__cta-text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.75rem;
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--white);
}

@media (max-width: 640px) {
  .framework__bg { background-attachment: scroll; }
}

/* ==========================================================================
   About
   ========================================================================== */

.about { background: var(--white); }

.about__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}

.about__visual {
  position: sticky;
  top: 120px;
}

.about__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.about__results {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.about__results li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
}
.about__results li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.about__results li:last-child { margin-bottom: 0; }
.about__results strong { font-weight: 600; color: var(--primary); }

/* ==========================================================================
   3-step process
   ========================================================================== */

.process { background: var(--light-pink); }

.process__accent { color: var(--terracotta); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.process-step { text-align: left; }

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 20px;
}

.process-step__title { font-size: 1.5rem; }
.process-step__text { color: #5a4a4d; }

.process__cta {
  text-align: center;
  margin-top: 64px;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq { background: var(--light-pink); }

.accordion { margin-top: 48px; }

.accordion__item {
  border-bottom: 1px solid var(--border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  padding: 24px 4px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--neutral-dark);
  cursor: pointer;
}

.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--primary);
  transition: transform 0.2s ease;
}
.accordion__icon::before {
  top: 9px; left: 0; width: 20px; height: 2px;
}
.accordion__icon::after {
  top: 0; left: 9px; width: 2px; height: 20px;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.accordion__panel-inner {
  overflow: hidden;
  padding: 0 4px;
}
.accordion__panel-inner p:last-child { margin-bottom: 0; }

.accordion__panel-inner ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.accordion__panel-inner li {
  margin-bottom: 6px;
}
.accordion__panel-inner li:last-child { margin-bottom: 0; }

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}
.accordion__item.is-open .accordion__panel-inner {
  padding-bottom: 24px;
}

/* ==========================================================================
   Parallax CTA (replaces contact form)
   ========================================================================== */

.parallax-cta {
  position: relative;
  padding: 104px 0;
  overflow: hidden;
  text-align: center;
}

.parallax-cta__bg {
  position: absolute;
  inset: 0;
  background-image: url('Assets/Lexi%20Williams%20Photo%207.png');
  background-size: cover;
  /* Portrait source in a landscape viewport: bias the crop upward so her face
     and raised arms are the focal point rather than the torso. */
  background-position: center 12%;
  background-attachment: fixed;
  z-index: 0;
}

.parallax-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,2,7,0.75) 0%, rgba(29,2,7,0.55) 50%, rgba(29,2,7,0.8) 100%);
  z-index: 1;
}

.parallax-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.parallax-cta__headline {
  color: var(--white);
  font-size: 2.625rem;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.parallax-cta__cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--gold);
  margin-left: 4px;
  animation: cursorBlink 0.9s step-end infinite;
}

.type-accent-terracotta {
  color: var(--terracotta);
  font-style: italic;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.parallax-cta__text {
  color: var(--neutral-light);
  font-size: 1.25rem;
  max-width: 560px;
  margin: 0 auto 16px;
}

.parallax-cta__btn { margin-top: 32px; }

@media (max-width: 640px) {
  .parallax-cta__bg { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-cta__cursor { animation: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--neutral-dark); color: var(--neutral-light); padding: 80px 0 32px; }

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

.footer .nav__logo-text,
.footer .nav__logo { color: var(--white); }

/* The nav's byline grey (#5a4a4d) is only 2.2:1 on the charcoal footer.
   Taupe matches the rest of the footer's muted text at 9.2:1. */
.footer .nav__logo-sub { color: var(--taupe); }

.footer__brand p { color: var(--taupe); margin-top: 12px; font-size: 0.9375rem; }

.footer__col h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 16px;
}
.footer__col { display: flex; flex-direction: column; }
.footer__col a {
  color: var(--taupe);
  font-size: 0.9375rem;
  margin-bottom: 10px;
}
.footer__col a:hover { color: var(--white); }

.footer__bottom {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer__bottom p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--taupe);
}

/* ==========================================================================
   My Services — two tiers
   ========================================================================== */

.services { background: var(--white); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
  align-items: stretch;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  height: 100%;
}

.service-card__title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.service-card__text {
  font-size: 1rem;
  color: #5a4a4d;
  margin: 0;
}

/* ==========================================================================
   My Work — portfolio cards + modal gallery
   ========================================================================== */

.work { background: var(--light-pink); }

.work__accent { color: var(--terracotta); }
.work__mark { color: var(--primary); }

.work-sub + .work-sub { margin-top: 96px; }

.work__cta {
  margin-top: 64px;
  text-align: center;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}

/* Single-item grid (advertorials). Higher specificity than .work-grid so the
   responsive column overrides further down don't clobber it. */
.work-grid.work-grid--single {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

/* Document card: the advertorial thumbnail is landscape (746x598), so it gets
   a matching 5:4 frame and object-fit:contain — the full page, headline and
   all, stays visible instead of being cropped to the ads' 4:5 portrait. */
.work-card--doc .work-card__media { aspect-ratio: 5 / 4; }
.work-card--doc .work-card__media img { object-fit: contain; }

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(29, 2, 7, 0.12);
}
.work-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.work-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--neutral-light);
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Charcoal wash over the ad so the label reads on any artwork */
.work-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  /* Tuned for light document covers: at the old 0.5 the description line
     landed at 3.7:1 against white text. 0.62 puts every label past 4.5:1
     while keeping the same darken-on-hover behaviour. */
  background: rgba(29, 2, 7, 0.62);
  transition: background-color 0.15s ease;
}
.work-card:hover .work-card__overlay { background: rgba(29, 2, 7, 0.74); }

.work-card__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(29, 2, 7, 0.5);
}

.work-card__spec {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--white);
  opacity: 0.85;
}

/* One-line description between the headline and the CTA on each card */
.work-card__desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--white);
  opacity: 0.95;
  text-shadow: 0 1px 3px rgba(29, 2, 7, 0.5);
}

.work-card__view {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(29, 2, 7, 0.5);
}
.work-card:hover .work-card__view { text-decoration: underline; }

/* --- Modal --- */

.work-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.work-modal[hidden] { display: none; }

.work-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 2, 7, 0.72);
}

.work-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.work-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.work-modal__title {
  font-size: 1.25rem;
  margin: 0;
}

.work-modal__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--neutral-dark);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.work-modal__close:hover { background: var(--light-pink); }
.work-modal__close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.work-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.work-modal__body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* PDF entry. Desktop/tablet get the inline viewer; mobile gets the poster
   plus an open-in-new-tab button instead, because iOS Safari refuses to
   render a PDF inside an iframe (it shows a blank box) and a nested
   scroll region inside the modal is miserable on a phone anyway. */
.work-pdf { width: 100%; }

.work-pdf__frame {
  display: block;
  width: 100%;
  height: 78vh;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--white);
}

/* The PDF view gets a much larger dialog than the image galleries — the
   default 640px frame rendered the advertorial too small to read. Browser
   PDF viewers fit the page to the frame's width, so the extra width is what
   actually makes the type legible. */
.work-modal--doc .work-modal__dialog {
  max-width: 1120px;
  max-height: 95vh;
}
.work-modal--doc .work-modal__body { padding: 16px; gap: 16px; }
.work-modal--doc .work-pdf__frame {
  height: calc(95vh - 172px);
  min-height: 420px;
}

.work-pdf__preview { display: none; }

.work-pdf__actions {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}

@media (max-width: 640px) {
  .work-pdf__frame { display: none; }
  .work-pdf__preview { display: block; }
}

/* ==========================================================================
   Scroll-triggered reveal animations
   (gated behind .js-anim, added by script.js, so content stays visible
   with no animation if JS fails to load)
   ========================================================================== */

@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Offers / About / FAQ intro text — cascading fade-in, same style as hero */
.js-anim .offers .eyebrow,
.js-anim .offers .section-title,
.js-anim .offers .section-sub,
.js-anim .about .eyebrow,
.js-anim .about .section-title,
.js-anim .faq .eyebrow,
.js-anim .faq .section-title {
  opacity: 0;
}

.offers.in-view .eyebrow,
.about.in-view .eyebrow,
.faq.in-view .eyebrow {
  animation: cascadeFadeIn 0.5s ease forwards;
  animation-delay: 0s;
}
.offers.in-view .section-title,
.about.in-view .section-title,
.faq.in-view .section-title {
  animation: cascadeFadeIn 0.5s ease forwards;
  animation-delay: 0.12s;
}
.offers.in-view .section-sub {
  animation: cascadeFadeIn 0.5s ease forwards;
  animation-delay: 0.24s;
}

/* Getting Started steps + offer cards — staggered slide-in, 1s apart */
.js-anim .process-step,
.js-anim .offer-card {
  opacity: 0;
}

.process-grid.in-view .process-step,
.offer-grid.in-view .offer-card {
  animation: slideUpIn 0.6s ease forwards;
}
.process-grid.in-view .process-step:nth-child(1) { animation-delay: 0s; }
.process-grid.in-view .process-step:nth-child(2) { animation-delay: 1s; }
.process-grid.in-view .process-step:nth-child(3) { animation-delay: 2s; }

.offer-grid.in-view .offer-card:nth-child(1) { animation-delay: 0s; }
.offer-grid.in-view .offer-card:nth-child(2) { animation-delay: 1s; }
.offer-grid.in-view .offer-card:nth-child(3) { animation-delay: 2s; }
.offer-grid.in-view .offer-card:nth-child(4) { animation-delay: 3s; }

/* Service cards — rapid individual scroll-up as each grid enters view */
.js-anim [data-reveal-group] .service-card { opacity: 0; }

[data-reveal-group].in-view .service-card {
  animation: slideUpIn 0.45s ease forwards;
}
[data-reveal-group].in-view .service-card:nth-child(1) { animation-delay: 0s; }
[data-reveal-group].in-view .service-card:nth-child(2) { animation-delay: 0.08s; }
[data-reveal-group].in-view .service-card:nth-child(3) { animation-delay: 0.16s; }
[data-reveal-group].in-view .service-card:nth-child(4) { animation-delay: 0.24s; }
[data-reveal-group].in-view .service-card:nth-child(5) { animation-delay: 0.32s; }
[data-reveal-group].in-view .service-card:nth-child(6) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .hero__copy > *,
  .offers .eyebrow, .offers .section-title, .offers .section-sub,
  .about .eyebrow, .about .section-title,
  .faq .eyebrow, .faq .section-title,
  .process-step, .offer-card, .service-card {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.25rem; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__actions, .hero__tagline { justify-content: center; }

  .feature__inner,
  .feature__inner--reverse { grid-template-columns: 1fr; text-align: center; }
  .feature__inner .feature__visual { order: -1; max-width: 360px; margin: 0 auto; }
  .feature__inner--reverse .feature__visual { order: -1; max-width: 360px; margin: 0 auto; }

  /* Stacked: pack rows to the top so the quote sits right under the photo.
     Without align-content:start the rows stretch to fill the carousel's
     equalized slide height, dropping a large gap between the two. */
  .testimonial-slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    min-height: 0;
  }
  .testimonial-slide__image {
    min-height: 0;
    padding: 32px 32px 0;
    align-items: flex-start;
  }
  .testimonial-slide__image img { max-width: 220px; }
  .testimonial-slide__content { justify-content: flex-start; padding-top: 24px; }

  /* Two per row. The expand-on-hover behaviour is a wide-screen affordance —
     below this width there is usually no hover at all, and growing a card
     inside a wrapped row just reflows the grid under the reader. */
  .offer-grid { flex-wrap: wrap; }
  .offer-card,
  .offer-card--tier3,
  .offer-card:hover,
  .offer-card:focus-within,
  .offer-grid:has(.offer-card:hover) .offer-card--tier3,
  .offer-grid:has(.offer-card:focus-within) .offer-card--tier3 {
    flex: 0 0 calc(50% - 12px);
  }
  .offer-card:hover, .offer-card:focus-within { transform: none; box-shadow: none; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }

  .about__inner { grid-template-columns: 1fr; }
  .about__visual { position: static; order: -1; max-width: 320px; margin: 0 auto; }
  .process-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }

  .insight-card__title { font-size: 2.25rem; }
  .stack__card-inner { max-width: 85%; padding: 40px 40px; }
}

/* "Inventive Ink Co. / by Lexi Williams" is a wider lockup than the single
   line it replaced, so between the mobile menu breakpoint and ~920px the
   desktop nav runs about 2px past the viewport. Tighten the gaps rather
   than shrinking the brand. */
@media (max-width: 920px) {
  .nav__links { gap: 20px; }
  .nav__links a:not(.btn) { font-size: 0.9375rem; }
  .nav__cta { padding: 12px 18px; }
  .nav__logo-name { font-size: 1rem; }
}

@media (max-width: 640px) {
  section { padding: 64px 0; }
  .container { padding: 0 24px; }

  h1, .hero__headline { font-size: 2.25rem; }
  /* Same reasoning as the desktop step-down: two sentences instead of one. */
  .hero__headline { font-size: 1.875rem; }
  .hero__headline-line + .hero__headline-line { margin-top: 16px; }
  h2 { font-size: 1.875rem; }
  h3 { font-size: 1.375rem; }
  .feature__headline { font-size: 1.875rem; }

  /* `backdrop-filter` makes .nav the containing block for its fixed-position
     children, which collapsed the open menu to the height of the header bar.
     Dropping it at mobile lets .nav__links size against the viewport again. */
  .nav {
    backdrop-filter: none;
    background: var(--white);
  }

  .nav__links {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 84px);
    height: calc(100dvh - 84px);
    z-index: 150;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .nav__links.is-open { transform: translateX(0); }

  .nav__links a:not(.btn) {
    padding: 14px 0;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--border);
  }

  .nav__cta {
    order: -1;
    text-align: center;
    margin-bottom: 16px;
  }

  .nav__toggle { display: flex; position: relative; z-index: 160; }

  .hero__phone-stage { width: 200px; height: 407px; }
  .phone { width: 200px; height: 407px; }
  .mail { font-size: 8.4px; --mail-scroll: 143px; }
  .mail__inbox, .mail__open { padding-top: 26px; }
  .hero__person { left: 72px; width: 205px; transform: translateY(-42%); filter: drop-shadow(6px 10px 12px rgba(29, 2, 7, 0.2)); }

  .offer-card,
  .offer-card--tier3,
  .offer-card:hover,
  .offer-card:focus-within,
  .offer-grid:has(.offer-card:hover) .offer-card--tier3,
  .offer-grid:has(.offer-card:focus-within) .offer-card--tier3 {
    flex: 0 0 100%;
  }
  /* "$3,000-$5,000/month" has almost no break opportunity, so at 2rem its
     min-content width held the single-column grid — and the whole document —
     at 399px. Stepping the price down lets the card shrink to the viewport. */
  .offer-card__price { font-size: 1.5rem; }
  .service-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }


  .work-modal { padding: 12px; }
  .work-modal__dialog { max-height: 92vh; }
  .work-modal__body { padding: 16px; gap: 16px; }
  .work-modal__header { padding: 16px; }
  .work-modal__title { font-size: 1.0625rem; }

  .video-testimonial { max-width: 300px; }

  .insight-card__title { font-size: 2rem; }
  .insight-card__text { font-size: 1.0625rem; }
  .stack__card-inner { max-width: 92%; padding: 32px 24px; }
  .stack__card { height: auto; min-height: 0; padding: 24px 0; }

  .framework__intro { padding: 64px 0 24px; }
  .framework__cta { padding: 64px 0; }

  .testimonial-carousel { gap: 8px; }
  .testimonial-arrow { width: 40px; height: 40px; font-size: 1.5rem; }
  .testimonial-slide__content { padding: 32px 24px; }

  .parallax-cta { padding: 96px 0; }
  .parallax-cta__headline { font-size: 1.75rem; }
}

/* Very narrow phones (320px class). Tightening the gutters and the offer
   card's own padding buys back the room the price string needs, so nothing
   pushes the document wider than the viewport. */
@media (max-width: 340px) {
  .container { padding: 0 16px; }
  .offer-card { padding: 24px; }
  .offer-card__price { font-size: 1.375rem; }
}