/* Research page finishing pass: shared rhythm and Goldstine color behavior. */
#main {
  --research-bg: #F3F5F7;
  --research-surface: #FFFFFF;
  --research-raised: #E8EDF1;
  --research-border: #D3DBE1;
  --research-ink: #18212B;
  --research-muted: #566574;
  --research-dark: #111A23;
  --research-dark-surface: #1B2834;
  --research-link: #275D73;
  --research-gold: #E7B52E;
  background: var(--research-bg);
  color: var(--research-ink);
  font-family: GoldstineSynonym, sans-serif;
}

#main :is(h1, h2, h3, h4, h5, h6) {
  font-family: GoldstineChillax, sans-serif;
  font-weight: 500;
  letter-spacing: -.025em;
}

#main :is(p, li, blockquote, label, input, textarea, button) {
  font-family: GoldstineSynonym, sans-serif;
}

/* Keep the contact form quiet enough to sit alongside the display headline. */
#main .section_contact-cta :is(input, textarea) {
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--research-border);
  border-radius: 10px;
  background: var(--research-surface);
  color: var(--research-ink);
  font-size: 16px;
  line-height: 1.45;
}

#main .section_contact-cta textarea {
  min-height: 128px;
  resize: vertical;
}

#main .section_contact-cta :is(input, textarea)::placeholder {
  color: #73808C;
  font-family: GoldstineSynonym, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  opacity: 1;
}

#main .section_contact-cta :is(input, textarea):focus-visible {
  border-color: var(--research-link);
  outline-offset: 2px;
}

#main :is(a, button, input, textarea, [role="tab"]):focus-visible {
  outline: 2px solid var(--research-link) !important;
  outline-offset: 4px;
}

#research-ecosystem,
#research-use-cases,
#research-working-notes,
#research-divisions,
#research-get-involved {
  background-color: var(--research-bg);
  color: var(--research-ink);
}

#research-features {
  background-color: var(--research-dark);
  color: #F3F5F7;
}

#research-get-involved #community-background-dots {
  opacity: .06 !important;
}

#community-cards {
  counter-reset: research-invitation;
}

#community-cards [data-framer-name="icon"] {
  position: relative;
  display: grid;
  place-items: center;
  background: #94610A !important;
}

#community-cards [data-framer-name="icon"]::after {
  counter-increment: research-invitation;
  content: counter(research-invitation, decimal-leading-zero);
  color: #FFFFFF;
  font: 600 15px/1 GoldstineSynonym, sans-serif;
  letter-spacing: .02em;
}

#community-cards [data-framer-name="wrapper"] {
  border-radius: 20px !important;
  border: 1px solid var(--research-border);
  box-shadow: 0 12px 30px rgb(24 33 43 / .05);
}

#research-get-involved .form-subscribe__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: 12px 24px;
  border: 1px solid var(--research-border);
  border-radius: 999px;
  background: var(--research-dark);
  color: #FFFFFF;
  font: 500 17px/1.3 GoldstineSynonym, sans-serif;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

#research-get-involved .form-subscribe__link:hover {
  background: #1B2834;
  transform: translateY(-2px);
}

#research-get-involved .form-subscribe__link:focus-visible {
  outline: 2px solid var(--research-link);
  outline-offset: 4px;
}

#research-get-involved .form-subscribe__link-arrow {
  color: var(--research-gold);
  font-size: 24px;
}

#research-image-expansion,
#research-sliced-text {
  background-color: var(--research-dark) !important;
  color: #F3F5F7;
}

#research-creative-giants {
  background-color: var(--research-bg);
  color: var(--research-ink);
}

#research-creative-giants .section_projects-scroll,
#research-creative-giants .projects-scroll_compnent {
  background: var(--research-dark) !important;
  color: #F3F5F7 !important;
}

/* The source's difference blend and underlined tags obscure project titles on
   the dark Goldstine surface. Keep the project navigation crisp and readable. */
#research-creative-giants .projects-scroll_content-left {
  mix-blend-mode: normal;
}

#research-creative-giants .projects-scroll_tag-wrap .tag {
  text-decoration: none;
}

/* Keep the parallax section's dark starting point, while allowing its GSAP
   transition into the following light sections to run. */
#research-creative-giants .section_parallax {
  background: var(--research-dark);
  color: #F3F5F7;
}

#research-creative-giants .parallax_content {
  mix-blend-mode: normal;
}

#research-creative-giants .section_projects-scroll :is(h1, h2, h3, h4, p, span, a),
#research-creative-giants .section_parallax :is(h1, h2, h3, h4, p, span, a) {
  font-family: GoldstineSynonym, sans-serif;
  color: inherit;
}

#research-creative-giants .section_projects-scroll :is(h1, h2, h3, h4),
#research-creative-giants .section_parallax :is(h1, h2, h3, h4) {
  font-family: GoldstineChillax, sans-serif;
}

#research-creative-giants .section_projects-scroll a {
  color: var(--research-gold);
}

#research-creative-giants .section_parallax a {
  color: inherit;
}

#research-creative-giants .section_testimonials,
#research-creative-giants .section_news-cta,
#research-creative-giants .section_contact-cta {
  background: var(--research-bg) !important;
  color: var(--research-ink) !important;
}

#research-creative-giants .research-contact-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

#research-creative-giants .research-contact-action p {
  max-width: 48ch;
}

#research-creative-giants .section_testimonials :is(h1, h2, h3, h4, p, span),
#research-creative-giants .section_news-cta :is(h1, h2, h3, h4, p, span),
#research-creative-giants .section_contact-cta :is(h1, h2, h3, h4, p, span) {
  color: inherit;
}

#main #research-telescope-zoom {
  background: var(--research-dark) !important;
  color: #F3F5F7 !important;
  font-family: GoldstineSynonym, sans-serif !important;
  padding-block: clamp(48px, 7vw, 96px);
}

#main #research-telescope-zoom .tz-section {
  background: var(--research-dark) !important;
}

#main #research-telescope-zoom .tz-section h1 {
  color: #F3F5F7;
  font-family: GoldstineChillax, sans-serif;
}

#research-airpods-5 {
  --kit-bg: var(--research-bg);
  --kit-surface: var(--research-surface);
  --kit-dark: var(--research-dark);
  --kit-dark-surface: var(--research-dark-surface);
  --kit-text: var(--research-ink);
  --kit-muted: var(--research-muted);
  --kit-border: var(--research-border);
  --kit-link: var(--research-link);
  --kit-gold: var(--research-gold);
}

:is(#research-airpods-5, #research-methods) .section-new-audio-experience {
  background-color: var(--research-dark) !important;
}

:is(#research-airpods-5, #research-methods) .section-new-audio-experience .section-content {
  background-color: transparent;
}

/* The source Caldera export marks its only hero content as desktop-only.
   Reveal that same content at tablet and phone widths; its source CSS already
   supplies the corresponding stacked layouts and media crops. */
@media (max-width: 999px) {
  #main .gg-caldera-hero .ssr-variant.hidden-jens65,
  #main .gg-caldera-hero .ssr-variant.hidden-1x4kwsc {
    display: contents !important;
  }

  #main .gg-caldera-hero [data-framer-name="section-hero"] {
    height: auto !important;
    min-height: 0 !important;
  }

  #main .gg-caldera-hero [data-framer-name="container"],
  #main .gg-caldera-hero [data-framer-name="wrapper"] {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  .goldstine-template-page {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  #main .gg-caldera-hero {
    padding-top: max(86px, calc(66px + env(safe-area-inset-top, 0px)));
    padding-bottom: 24px;
  }

  #main .gg-caldera-hero [data-framer-name="section-hero"] {
    padding-inline: 16px !important;
  }

  #main .gg-caldera-hero [data-framer-name="container"] {
    width: 100% !important;
    max-width: none !important;
    gap: 20px !important;
    overflow: visible !important;
  }

  #main .gg-caldera-hero [data-framer-name="wrapper"] {
    width: 100% !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  #main .gg-caldera-hero [data-framer-name="title box"],
  #main .gg-caldera-hero [data-framer-name="description box"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
  }

  #main .gg-caldera-hero [data-framer-name="inner"],
  #main .gg-caldera-hero [data-framer-name="title"],
  #main .gg-caldera-hero [data-framer-name="info"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #main .gg-caldera-hero [data-framer-name="video"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: .924;
    flex: none !important;
  }

  #main .gg-caldera-hero [data-framer-name="video"] video,
  #main .gg-caldera-hero [data-framer-name="video"] > [class$="container"] {
    width: 100% !important;
    height: 100% !important;
  }

  #research-airpods-5 .paddlenav-arrow,
  #research-airpods-5 .play-pause-button {
    min-width: 44px;
    min-height: 44px;
  }

  #research-airpods-5 .aap-media-card-gallery__dotnav-item {
    width: 44px;
    min-height: 44px;
    margin-inline: 0;
    display: grid;
    place-items: center;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  #main .gg-caldera-hero {
    padding-top: 96px;
  }

  #main .gg-caldera-hero [data-framer-name="section-hero"] {
    padding-inline: 24px !important;
  }
}

@media (max-width: 700px) {
  #community-cards [data-framer-name="wrapper"] { border-radius: 16px !important; }
  #main #research-telescope-zoom { padding-block: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #main { scroll-behavior: auto; }
}

/* The telescope is a full-viewport transition; padding creates a stray band
   between its completed image and the following content. */
html body #research-telescope-zoom { padding-block: 0 !important; }

/* Keep telescope imagery inside its own section while the preceding
   AirPods content scrolls past, including backwards scroll and refresh. */
html body #research-telescope-zoom { isolation: isolate; }

/* ScrollTrigger temporarily resets window scroll during pin measurements.
   Smooth CSS scrolling makes that reset asynchronous and offsets fixed pins. */
html:has(#research-telescope-zoom) { scroll-behavior: auto !important; }

/* Final Research layout: one spacing owner per section, shared content edges. */
#main {
  --research-gutter: clamp(24px, 4vw, 64px);
  --research-section-space: clamp(48px, 6vw, 88px);
  --research-content-gap: clamp(24px, 3vw, 40px);
  --research-content-width: 1440px;
}
#main .gg-airpods {
  --airpods-gutter: max(var(--research-gutter), calc((100vw - var(--research-content-width)) / 2));
  --airpods-section-space: var(--research-section-space);
}
#main .gg-airpods-main .viewport-content {
  width: min(var(--research-content-width), calc(100% - 2 * var(--research-gutter))) !important;
  margin-inline: auto !important;
}
#main .gg-caldera-sections [data-goldstine-section] {
  padding-block: var(--research-section-space) !important;
  padding-inline: max(var(--research-gutter), calc((100vw - var(--research-content-width)) / 2)) !important;
}
#main .gg-caldera-sections [data-goldstine-section] > [data-framer-name="container"] {
  width: 100% !important;
  max-width: var(--research-content-width) !important;
  margin-inline: auto !important;
}
/* Extracted stories no longer inherit their old parent section's spacing. */
#main :is(#research-connected-work, #research-methods) .section-product-stories > .section,
#main .gg-airpods-main > .section:not(.section-welcome) {
  padding-block: var(--research-section-space) !important;
}
#main #research-airpods-5 .section-product-stories {
  padding: 0 !important;
}
#main #research-airpods-5 .section-charging {
  padding-block: var(--research-section-space) !important;
}
#main .gg-airpods-main .explore-headline-container:has(.viewport-content:empty) {
  display: none;
}
#main .gg-airpods-main :is(.section-header, .section-headline) {
  margin-block: 0 var(--research-content-gap) !important;
}
#main .gg-airpods-main .section-eyebrow {
  margin: 0 0 12px !important;
}
#main .gg-airpods-main .typography-section-headline {
  margin-block: 0 !important;
  font-size: clamp(32px, 4.5vw, 64px) !important;
  line-height: 1.12 !important;
}
#main .gg-airpods-main .section-product-stories .copy-container {
  margin-top: var(--research-content-gap) !important;
}
#main .gg-airpods-main .description-headline {
  margin-block: 0 16px !important;
}
#main .gg-airpods-main .copy-container > p {
  max-width: 65ch;
  margin-block: 0 !important;
  line-height: 1.55 !important;
}
#main .gg-airpods-main .scroll-gallery {
  margin-top: var(--research-content-gap) !important;
  padding-bottom: 0 !important;
}
#main .gg-airpods-main .scroll-gallery-paddlenav {
  position: relative !important;
  inset: auto !important;
  width: min(var(--research-content-width), calc(100% - 2 * var(--research-gutter))) !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
}
#main .gg-airpods-main .item-container {
  padding-inline: var(--airpods-gutter) !important;
}
/* Remove the demo's oversized empty lead-in around the methods artwork. */
#main #research-methods .dancer-wrapper {
  padding-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
#main #research-methods .dancer-wrapper > .copy-container {
  margin-top: 0 !important;
}
#main #research-methods .dancer-image-container {
  position: relative !important;
  height: clamp(360px, 52vw, 720px) !important;
  margin-top: var(--research-content-gap) !important;
  overflow: hidden;
}
#main #research-methods .dancer-image-container picture,
#main #research-methods .dancer-image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  inset: 0 !important;
}
#main #research-connected-work .inline-media-component-container {
  width: 100% !important;
  height: clamp(300px, 45vw, 640px) !important;
  margin-block: var(--research-content-gap) !important;
  overflow: hidden;
}
#main #research-connected-work .inline-media-component-container :is(video, picture, img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
#main .gg-research-closing #research-get-involved {
  padding-top: 0 !important;
}
#main #research-get-involved [data-framer-name="wrapper"] {
  gap: var(--research-content-gap) !important;
}
@media (max-width: 734px) {
  #main { --research-gutter: 24px; --research-content-gap: 24px; }
  #main .gg-airpods-main .typography-section-headline { font-size: 36px !important; }
  #main .gg-airpods-main .section-header { gap: 16px !important; }
  #main #research-methods .dancer-image-container { height: 380px !important; }
}
/* Keep supporting copy on the same readable measure after full-width artwork. */
#main #research-methods .section-product-stories .description-container.copy-container {
  margin-top: var(--research-content-gap) !important;
}
#main .gg-airpods-main .description-container > p,
#main .gg-airpods-main .section-charging .copy-container {
  max-width: 65ch !important;
  margin-inline: auto !important;
}
#main .gg-airpods-main .section-header :is(h2, h3) {
  margin-block: 0 !important;
  line-height: 1.12 !important;
}
#main .gg-airpods-main .scroll-gallery .gallery-item > .copy {
  padding: 20px 8px 0 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
#main .gg-airpods-main .scroll-gallery .item-container {
  gap: 24px !important;
}
#main .gg-research-closing #research-working-notes .gg-slider-buttons {
  padding-right: 0 !important;
  margin-top: 24px !important;
}
#main .gg-research-closing #research-get-involved [data-framer-name="heading"]:empty {
  display: none !important;
}
#main .gg-research-closing #section-community-wrapper {
  padding-block: 0 !important;
}
#main .gg-airpods-main .section-media-card .section-header,
#main .gg-airpods-main .section-bento-gallery .section-header,
#main .gg-airpods-main .section-values .section-header {
  padding-top: 0 !important;
}
@media (max-width: 734px) {
  #main .gg-airpods-main .scroll-gallery .item-container { gap: 16px !important; }
  #main .gg-airpods-main .scroll-gallery .gallery-item > .copy {
    padding: 16px 4px 0 !important;
  }
  #main .gg-airpods-main .description-container > p { max-width: 100% !important; }
  #main .gg-caldera-sections #research-get-involved h4 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.2 !important;
  }
}
/* The care card rail scrolls on one axis; vertical input belongs to the page. */
#research-care .scroll-gallery > .scroll-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scroll-behavior: auto !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Section-by-section alignment corrections after the final content moves. */
#main #research-connected-work .section-magic {
  transform: none !important;
}
#main #research-connected-work .section-magic > .viewport-content.copy-container {
  margin-top: 0 !important;
}
#main :is(#research-connected-work, #research-methods) .section-eyebrow {
  padding: 0 !important;
  transform: none;
  line-height: 1.3 !important;
}
#main #research-methods .dancer-image-container {
  margin-bottom: 0 !important;
}
#main #research-methods .dancer-wrapper > .copy-container {
  padding-top: 0 !important;
}
#main #research-airpods-5 .section-charging .intro {
  min-height: clamp(400px, 40vw, 580px) !important;
}
#main #research-airpods-5 .section-charging .intro .viewport-content {
  justify-content: flex-start !important;
  padding-top: 0 !important;
}
#main #research-airpods-5 .headline-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#main #research-airpods-5 .section-charging .copy-container {
  margin-top: calc(var(--research-content-gap) + 122px) !important;
}
#main #research-airpods-5 .section-charging .stats {
  margin-top: var(--research-content-gap) !important;
}
#main #research-image-expansion {
  --page-padding: var(--research-gutter);
  padding-block: 0;
}
#main #research-image-expansion .content {
  padding-inline: max(var(--research-gutter), calc((100vw - var(--research-content-width)) / 2));
}
/* Framer's inner containers had retained their own extra mobile gutters. */
#main .gg-caldera-sections :is(#research-features, #research-working-notes, #research-ecosystem) > [data-framer-name="container"] {
  padding-inline: 0 !important;
}
#main #research-get-involved #section-community-wrapper {
  gap: var(--research-content-gap) !important;
}
@media (max-width: 734px) {
  #main #research-connected-work .section-magic,
  #main #research-methods .section-new-audio-experience {
    padding-top: var(--research-section-space) !important;
  }
  #main #research-airpods-5 .section-charging .intro { min-height: 360px !important; }
}
/* Connected work needs its own stacking context for the source background. */
#main #research-connected-work .section-magic {
  position: relative;
  isolation: isolate;
  padding-top: var(--research-content-gap) !important;
}
#main #research-connected-work .section-magic::before {
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
#main #research-connected-work .section-magic > .copy-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 0 !important;
}
#main #research-connected-work .section-magic > .copy-container > .section-eyebrow {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 12px !important;
  text-align: center;
  color: #fff;
}
#main #research-connected-work #magic-headline {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 18ch !important;
  margin: 0 auto !important;
  color: #fff !important;
}
/* Keep the complete source media frame inside the shared content gutter. */
#main #research-connected-work .inline-media-component-container {
  max-width: 538px !important;
  height: auto !important;
  aspect-ratio: 538 / 770;
  display: block !important;
  position: relative;
}
#main #research-connected-work .inline-media-component-container .video-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}
#main #research-connected-work .inline-media-component-container :is(video, picture) {
  position: absolute !important;
  inset: 0 !important;
  max-width: 100% !important;
}
/* Methods headings belong in flow, not the source demo's floating eyebrow slot. */
#main #research-methods .section-new-audio-experience {
  padding-top: var(--research-content-gap) !important;
}
#main #research-methods .dancer-wrapper > .copy-container > .section-eyebrow {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  margin: 0 0 12px !important;
}
#main #research-methods .dancer-wrapper {
  display: flow-root;
}
#main #research-methods .dancer-wrapper > .copy-container > .section-headline {
  margin: 0 auto !important;
}
/* The continuous-practice title sits on the light top of its source artwork. */
#main #research-airpods-5 .section-charging .headline-container {
  position: relative;
  z-index: 2;
  color: var(--research-ink) !important;
}
#main #research-airpods-5 .section-charging .headline-container :is(h2,h3) {
  color: var(--research-ink) !important;
  -webkit-text-fill-color: var(--research-ink) !important;
  opacity: 1;
  text-shadow: none;
  mask-image: none;
}
/* Remove source-demo exit spacers at the actual image/methods boundary. */
html body #main #research-image-expansion .content:last-child {
  padding-bottom: var(--research-content-gap) !important;
  margin-bottom: 0 !important;
}
html body #main #research-methods {
  margin-block: 0 !important;
  padding-top: 0 !important;
}
html body #main #research-methods .section-product-stories {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body #main #research-methods .section-new-audio-experience {
  margin-top: 0 !important;
  padding-top: var(--research-content-gap) !important;
}
html body #main #research-methods.gg-airpods .section-product-stories > .section.section-new-audio-experience {
  padding-top: var(--research-content-gap) !important;
}