:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

body {
  background: var(--cream);
  background-image: radial-gradient(rgba(147,5,0,.045) .65px, transparent .65px);
  background-size: 7px 7px;
}

.brand { font-size: .86rem; white-space: nowrap; }
.brand b { font-weight: inherit; }
.topbar { border-bottom-color: var(--ink); }
.hero {
  padding-top: 55px;
  padding-bottom: 78px;
  min-height: 0;
}
.hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.hero-copy { padding: 24px 0 12px; }
.hero h1 { font-size: clamp(3.2rem, 6.2vw, 6.1rem); }
.hero h1 em { display: block; font-style: normal; }
.hero-period { color: var(--blue); }
.hero-small { max-width: 580px; }
.hero-photo {
  position: relative;
  margin: 0;
  height: 580px;
  padding: 13px 13px 60px;
  border: 1px solid var(--ink);
  background: var(--cream);
  box-shadow: 17px 18px 0 var(--blue);
  transform: rotate(2deg);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 39%;
  filter: saturate(.87) contrast(1.02);
}
.hero-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 4px 0;
  font: .7rem 'DM Mono',monospace;
  letter-spacing: .04em;
}
.photo-stamp {
  position: absolute;
  left: -38px;
  bottom: 63px;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid var(--cream);
  background: var(--wine);
  color: var(--cream);
  text-align: center;
  font: 600 .72rem/1.18 Unbounded,sans-serif;
  transform: rotate(-13deg);
  box-shadow: 0 5px 0 rgba(50,27,26,.22);
}
.ticker { transform: rotate(-1deg) scale(1.015); position: relative; z-index: 2; }
.audit { background: #850a09; }
.audit-card { border-width: 2px; transform: rotate(-2deg); }
.flow { background: transparent; }
.step { background: var(--cream); }
.step:nth-child(2) { background: #cfe1f7; }
.step:nth-child(3) { background: #f5e9d8; }
.step-number { margin-bottom: 70px; }
.about {
  background: #f2e7d5;
  border-block: 1px solid var(--ink);
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, .83fr) minmax(0, 1.17fr);
  gap: clamp(36px, 8vw, 125px);
  align-items: center;
}
.about-photo {
  position: relative;
  max-width: 440px;
  height: 580px;
  padding: 12px;
  border: 1px solid var(--ink);
  background: var(--cream);
  box-shadow: -19px 18px 0 var(--blue);
  transform: rotate(-3deg);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.about-label {
  position: absolute;
  right: -30px;
  bottom: 35px;
  max-width: 180px;
  padding: 12px 16px;
  background: var(--wine);
  color: var(--cream);
  font: 500 .8rem/1.3 Unbounded,sans-serif;
  transform: rotate(7deg);
}
.about-copy h2 { margin-top: 20px; max-width: 690px; }
.about-copy h2 em { color: var(--wine); font-family: Georgia,serif; font-weight: 400; letter-spacing: -.07em; }
.about-copy > p { max-width: 650px; font-size: 1.12rem; }
.about-quote {
  max-width: 580px;
  margin-top: 45px;
  padding: 23px 0 0 26px;
  border-top: 1px solid var(--wine);
  border-left: 4px solid var(--wine);
  font: italic clamp(1.35rem, 2.4vw, 2.2rem)/1.2 Georgia,serif;
  color: var(--wine);
}
.results { background: #a8c9ef; }
.result { background: var(--cream); }
.result:nth-child(2), .result:nth-child(4) { background: #dbeaf9; }
.result:nth-child(3) { background: var(--wine); color: var(--cream); }
.result:nth-child(3) strong { color: var(--cream); }
.result:nth-child(6) { background: #e8eff7; }
.case-title h3 { font-size: clamp(1.3rem, 2.1vw, 1.95rem); }
.case-result { border-left: 4px solid var(--wine); background: #dce9f8; }
.offer { box-shadow: 6px 6px 0 rgba(50,27,26,.14); }
.offer.featured { transform: translateY(-12px); box-shadow: 9px 12px 0 var(--blue); }
.why { background: #f7eede; }
.reason:nth-child(even) { background: #e7edf2; }
.final {
  background: #850a09;
  position: relative;
  overflow: hidden;
}
.final:before {
  content: "";
  position: absolute;
  inset: auto -110px -180px auto;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255,248,231,.35);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255,248,231,.05),0 0 0 90px rgba(255,248,231,.05);
}
.final-grid { position: relative; }
.final-side { position: relative; padding-top: 0; border: 0; }
.final-side p:first-of-type { border-top: 1px solid rgba(255,248,231,.55); padding-top: 20px; }

/* Entrance movement is reserved for the first visit and new sections on scroll. */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-copy > :is(.eyebrow,h1,.lead,.hero-small,.hero-actions) {
  animation: hero-enter 650ms var(--ease-out) both;
}
.hero-copy > h1 { animation-delay: 70ms; }
.hero-copy > .lead { animation-delay: 130ms; }
.hero-copy > .hero-small { animation-delay: 190ms; }
.hero-copy > .hero-actions { animation-delay: 250ms; }
.hero-photo { animation: hero-photo-enter 750ms var(--ease-out) both; }
@keyframes hero-photo-enter {
  from { opacity: 0; transform: translateY(22px) rotate(4deg); }
  to { opacity: 1; transform: translateY(0) rotate(2deg); }
}
.js-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .button { transition: transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease; }
  .offer { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
  .offer:hover { transform: translateY(-5px); box-shadow: 10px 12px 0 rgba(50,27,26,.2); }
  .offer.featured:hover { transform: translateY(-17px); box-shadow: 12px 18px 0 var(--blue); }
}
@media (hover: none) { .button:hover { transform: none; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(275px, .85fr); gap: 28px; }
  .hero h1 { font-size: clamp(2.8rem, 6.4vw, 4.5rem); }
  .hero-photo { height: 510px; }
  .about-grid { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 45px; }
  .about-photo { height: 510px; }
}
@media (max-width: 720px) {
  .hero-grid, .about-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 37px; }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow { grid-row: 1; }
  .hero-copy > h1 { grid-row: 2; margin-bottom: 0; }
  .hero-copy > .lead { grid-row: 3; margin-top: 18px; }
  .hero-copy > .hero-actions { grid-row: 4; margin-top: 18px; }
  .hero-photo { grid-row: 5; }
  .hero-copy > .hero-small { grid-row: 6; }
  .hero-grid { gap: 0; }
  .hero h1 { font-size: clamp(2.7rem, 10.8vw, 4.6rem); }
  .hero-photo { width: min(80%, 460px); height: 490px; margin: 24px auto 36px; }
  .about-photo { width: min(78%, 420px); height: 460px; margin: 0 auto 18px; }
  .about-copy h2 { margin-top: 17px; }
  .offer.featured { transform: none; }
  .offer.featured:hover { transform: translateY(-5px); }
}
@media (max-width: 440px) {
  .brand { font-size: .72rem; }
  .nav .nav-cta { font-size: .7rem; }
  .hero h1 { font-size: clamp(2.4rem, 11.3vw, 3.3rem); }
  .hero-photo { width: 86%; height: 405px; padding-bottom: 49px; }
  .hero-photo figcaption { font-size: .57rem; padding-top: 12px; }
  .photo-stamp { width: 88px; height: 88px; left: -22px; bottom: 49px; font-size: .6rem; }
  .about-photo { width: 83%; height: 430px; }
  .about-label { right: -23px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > :is(.eyebrow,h1,.lead,.hero-small,.hero-actions),
  .hero-photo { animation: none; }
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .offer, .button { transition: background-color 160ms ease,color 160ms ease; }
}