@font-face {
  font-family: "TBT Editorial";
  src:
    url("/fonts/calming.otf") format("opentype"),
    url("/fonts/calming.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Awesome Serif Tall";
  src: url("/fonts/awesome-serif-italic-bold-tall.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/* Awesome Serif Italic is the Figma source face. Calming is the bundled
   editorial fallback; registering it at its real weight lets the browser
   synthesize the Figma bold cut when the licensed source face is unavailable. */
@font-face {
  font-family: "TBT Marketing Serif";
  src:
    url("/fonts/calming.otf") format("opentype"),
    url("/fonts/calming.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.marketing-figma {
  --marketing-paper: #f4f2ed;
  --marketing-white: #fff;
  --marketing-yellow: #fff1b6;
  --marketing-brown: #42302e;
  --marketing-ink: #171713;
  --marketing-button: #211918;
  --marketing-button-text: #fff4d4;
  --marketing-button-ink: #241b19;
  background: var(--marketing-white);
  color: var(--marketing-ink);
  font-family: var(--font-body);
}

.marketing-figma :is(h1, h2, h3, p, figure, ul) { margin: 0; }
.marketing-figma img { display: block; width: 100%; }

.marketing-hero {
  border-bottom: 0;
  background: var(--marketing-white);
}

.marketing-hero__inner {
  width: min(100%, 90rem);
  display: grid;
  gap: 3rem;
  align-items: start;
  margin-inline: auto;
  padding: clamp(4.75rem, 14vw, 7rem) var(--tbt-gutter) clamp(5rem, 15vw, 8rem);
}

.marketing-hero h1 {
  display: grid;
  justify-items: start;
  width: fit-content;
  margin-inline: auto;
  color: var(--marketing-brown);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marketing-circle {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.marketing-circle::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.15em -0.18em -0.06em;
  border: 2px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(1.6deg);
}

.marketing-hero__copy {
  width: min(100%, 25rem);
  max-width: 25rem;
  margin-inline: auto;
  text-align: center;
}

.marketing-detail h2 {
  font-family: "TBT Editorial", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.marketing-detail h2 span { display: block; }

.marketing-figma .marketing-hero__script {
  margin-bottom: 0.35rem !important;
  margin-inline: 0 !important;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(1.65rem, 6.5vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-1.35deg);
  transform-origin: center;
}

.marketing-hero__copy > p:last-child {
  max-width: 31ch;
  margin-inline: 0 !important;
  color: var(--marketing-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: 0.02em;
  text-align: center;
}

.marketing-carousel {
  overflow: hidden;
  border-bottom: 2px solid var(--marketing-button);
  background: var(--marketing-white);
  padding-block: 0 clamp(4rem, 7vw, 6.5rem);
}

.marketing-carousel .tbt-service-track { margin-top: 0; }

.marketing-detail {
  display: grid;
  border-bottom: 2px solid var(--marketing-button);
  color: var(--marketing-ink);
}

.marketing-detail__media {
  order: 2;
  min-height: 29rem;
  overflow: hidden;
  background: #ddd8d0;
}

.marketing-detail__media img {
  height: 100%;
  object-fit: cover;
}

.marketing-detail__content {
  --marketing-number-width: clamp(1.25rem, 5vw, 1.9375rem);
  --marketing-number-gap: clamp(0.35rem, 1.2vw, 0.75rem);
  display: flex;
  order: 1;
  min-height: 42rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(4rem, 10vw, 6rem) var(--tbt-gutter);
}

.marketing-detail--paper .marketing-detail__content,
.marketing-detail--yellow .marketing-detail__content,
.marketing-detail--brown .marketing-detail__content {
  background: var(--marketing-paper);
  color: var(--marketing-ink);
}

.marketing-detail__heading {
  display: grid;
  width: 100%;
  grid-template-columns: var(--marketing-number-width) minmax(0, 1fr);
  gap: var(--marketing-number-gap);
  align-items: start;
}

.marketing-detail__number {
  padding-top: 0.12em;
  font-family: var(--font-body);
  font-size: var(--marketing-number-width);
  font-weight: 300;
  line-height: 1.333;
  text-align: center;
}

.marketing-detail h2 {
  max-width: 14ch;
  font-family: "Awesome Serif Tall", "TBT Marketing Serif", Georgia, serif;
  font-size: clamp(2.75rem, 12vw, 3.2rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.marketing-detail__tagline {
  max-width: 38ch;
  margin-top: 1rem !important;
  margin-left: calc(var(--marketing-number-width) + var(--marketing-number-gap)) !important;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.14;
  text-align: center;
  transform: rotate(-2deg);
  text-wrap: balance;
}

.marketing-figma .marketing-detail__description {
  max-width: 38rem;
  margin-top: clamp(2.1rem, 5vw, 2.8rem) !important;
  margin-right: 0;
  margin-left: calc(var(--marketing-number-width) + var(--marketing-number-gap));
  color: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: 0.02em;
  text-align: left;
}

.marketing-detail__included {
  margin-top: 2rem;
  margin-left: calc(var(--marketing-number-width) + var(--marketing-number-gap));
}

.marketing-detail__included h3 {
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marketing-detail__included ul {
  display: grid;
  gap: 0.25rem;
  padding-left: 1.45rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: 0.01em;
}

.marketing-pill {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.25rem;
  margin-left: calc(var(--marketing-number-width) + var(--marketing-number-gap));
  border: 1px solid transparent;
  border-radius: 2rem;
  background: var(--marketing-button);
  box-shadow: 0 0.25rem 0.5rem rgba(33, 25, 24, 0.04);
  color: var(--marketing-button-text) !important;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.012em;
  padding: 0.875rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out, filter 300ms ease-out;
}

.marketing-pill__arrow {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  font-size: 1.25em;
  line-height: 1;
  transition: transform 300ms ease-out;
}

.marketing-pill:hover,
.marketing-pill:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1rem rgba(33, 25, 24, 0.12);
}

.marketing-pill:hover .marketing-pill__arrow,
.marketing-pill:focus-visible .marketing-pill__arrow {
  transform: translateX(0.2rem);
}

.marketing-final {
  display: grid;
  min-height: 34rem;
  place-items: center;
  background: var(--marketing-white);
  padding: 5rem var(--tbt-gutter);
  text-align: center;
}

.marketing-final > div { display: grid; justify-items: center; }

.marketing-final h2 {
  max-width: 23ch;
  color: var(--marketing-brown);
  font-family: var(--font-display);
  font-size: clamp(2rem, 8.8vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.marketing-final h2 em {
  display: inline-block;
  font-family: "Awesome Serif Tall", "TBT Marketing Serif", Georgia, serif;
  font-size: 1.03em;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  transform: rotate(-1.3deg);
}

.marketing-final__line { display: inline; }

.marketing-underline { border-bottom: 2px solid currentColor; }

.marketing-figma .marketing-final p {
  margin-top: 2.1rem !important;
  margin-inline: auto;
  color: var(--marketing-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: 0.02em;
  text-align: center;
}

.marketing-final .marketing-pill {
  width: min(100%, 14.25rem);
}

.marketing-pill--yellow {
  border-color: var(--marketing-brown);
  background: var(--marketing-yellow);
  color: var(--marketing-button-ink) !important;
}

[data-marketing-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 650ms ease, transform 750ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

[data-marketing-reveal].is-visible { opacity: 1; transform: none; }

@media (min-width: 48rem) {
  .marketing-hero__inner {
    padding-top: 5.5rem;
    padding-bottom: 7rem;
  }

  .marketing-hero h1 { font-size: 3.6rem; }

  .marketing-hero h1,
  .marketing-hero__copy { margin-inline: 0; }

  .marketing-figma .marketing-hero__script,
  .marketing-hero__copy > p:last-child { text-align: left; }

  .marketing-figma .marketing-hero__script { transform-origin: left center; }

  .marketing-detail {
    min-height: clamp(42rem, 52vw, 48.5rem);
  }

  .marketing-detail--media-left { grid-template-columns: minmax(0, 45%) minmax(0, 55%); }
  .marketing-detail--media-right { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }

  .marketing-detail__media,
  .marketing-detail__content {
    order: initial;
    min-height: 100%;
  }

  .marketing-detail__content { padding: clamp(4rem, 6vw, 6rem) clamp(3.5rem, 7vw, 7.3rem); }
  .marketing-detail h2 { font-size: clamp(4rem, 5.733vw, 5.159375rem); }
  .marketing-detail__tagline { font-size: clamp(1.25rem, 2vw, 1.65rem); }
  .marketing-detail__description,
  .marketing-detail__included ul { font-size: clamp(0.95rem, 1.1vw, 1.08rem); }

  .marketing-pill {
    min-height: 3.25rem;
    padding-inline: 2rem;
    font-size: 0.875rem;
  }

  .marketing-final .marketing-pill {
    width: min(100%, 25rem);
    min-height: 4.25rem;
  }
}

@media (min-width: 64rem) {
  .marketing-hero__script { font-size: 2.2rem; }
  .marketing-detail__content {
    justify-content: flex-start;
    padding-block: 3.2rem 3rem;
  }
  .marketing-detail--media-left .marketing-detail__content { padding-inline: clamp(5rem, 6.5vw, 6rem); }
  .marketing-detail--media-right .marketing-detail__content { padding-inline: clamp(5rem, 9vw, 8.25rem); }
  .marketing-detail h2 { font-size: clamp(3.4rem, 5vw, 4.5rem); }

  .marketing-final h2 { max-width: none; }
  .marketing-final__line { display: block; white-space: nowrap; }
  .marketing-final__mobile-break { display: none; }
}

@media (min-width: 80rem) {
  .marketing-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    gap: 7rem;
    padding-top: 6.4rem;
    padding-inline: 13rem;
  }

  .marketing-hero__copy { margin-top: -0.75rem; margin-left: 4.5rem; }
  .marketing-detail h2 { font-size: clamp(4.5rem, 5.733vw, 5.159375rem); }
  .marketing-detail h2 span { white-space: nowrap; }

  /* Awesome Serif is substantially narrower than our licensed local fallback.
     Keep the Figma line breaks intact for the two longest headings. */
  #full-service h2,
  #email-marketing h2 {
    font-size: clamp(3.75rem, 4.8vw, 4.40625rem);
  }

  #website-development h2 {
    font-size: clamp(4.15rem, 5.2vw, 5.159375rem);
  }
}

/* Tablet (768-1023px): the half-width columns cut long titles such as
   "The Full Marketing" / "Email Marketing" off at the column edge. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .marketing-detail__content { padding-inline: clamp(2rem, 4.5vw, 3rem); }
  .marketing-detail h2 { font-size: clamp(3rem, 6.2vw, 3.6rem); }
  .marketing-detail h2 span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  [data-marketing-reveal] { opacity: 1; transform: none; transition: none; }
}