/* Sustainability page — hero copied from services.css (same class names, same
   look), Studio Introduction copied from home.css's story_grid split, and a
   new manifesto section styled like Practice Legacy (section_formula) on the
   homepage: dark ground + drifting line pattern, but text-only, no media. */

/* ---------- hero (verbatim from services.css) ---------- */

.services_hero {
  z-index: 5;
  background-color: var(--secondary-color);
  align-items: flex-end;
  width: 100%;
  min-height: 100vh;
  padding-top: 9rem;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  display: flex;
  position: relative;
  overflow: hidden;
}

.services_pattern {
  z-index: 0;
  position: absolute;
  inset: -10% 0;
  overflow: hidden;
}

.services_pattern img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.services_pattern.is-dark-lines img {
  filter: invert(1);
}

.services_hero > .container-large {
  z-index: 5;
  position: relative;
  display: flex;
  width: 100%;
  align-items: flex-end;
}

.services_hero-content {
  grid-template-columns: 1fr;
  align-items: end;
  width: 100%;
  display: grid;
}

.services_title {
  margin: 0;
  color: var(--primary-color);
  font-family: "Century Gothic", sans-serif;
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 1.04;
}

.services_title .line {
  padding-bottom: 0.4rem;
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .services_title {
    font-size: 4.5rem;
  }

  .services_hero {
    min-height: 100vh;
    padding-top: 8rem;
  }

  .services_hero-content {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media screen and (max-width: 767px) {
  .services_hero {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  .services_title {
    font-size: 4rem;
  }
}

@media screen and (max-width: 479px) {
  .services_title {
    font-size: 3.4rem;
  }
}

/* ---------- studio introduction (verbatim from home.css) ---------- */

/* .section_story is shared with the homepage's parallax storytelling hero,
   which needs the min-height: 120vh (100vh on mobile) from the base webflow
   CSS. Every .section_story on these two pages (Studio Introduction, and the
   manifesto sections reusing this layout) has no background parallax, just a
   text grid, so that min-height leaves a huge empty gap below the copy. This
   file only ever loads on research.html/sustainability.html, so overriding
   the bare class here is safe — it won't reach the homepage's hero. */
.section_story {
  min-height: 0;
}

/* This section used the site-wide .full-width-container (100% edge-to-edge),
   unlike every other section on these two pages, which sits inside
   .container-large (max-width: 80rem). Cap it to match so the intro grid
   reads as content-width instead of full-bleed. */
.section_story .full-width-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* body sets hyphens: auto (site-globals.css) so long words break with a
   hyphen when they don't fit — very visible on .story_right-heading, whose
   narrow 3fr column and large bold font wrap almost every line. Turn it off
   here so a word that doesn't fit drops whole to the next line instead. */
.story_right-heading {
  hyphens: none;
}

.story_grid {
  grid-column-gap: 4rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: 3fr 7fr;
  align-items: start;
  width: 100%;
  display: grid;
}

.story_col-right {
  padding-top: 0.4rem;
}

.story_right-heading {
  color: var(--primary-color);
  margin: 0;
  font-family: "Century Gothic", sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
}

/* Gradient text on the intro paragraph only (verbatim from home.css) — the
   heading above keeps its solid color. Background stays white; just the
   type itself carries the gradient, clipped to the glyphs. */
.story_title-2 {
  background-image: linear-gradient(290deg, #484747);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Smooth cursor highlight clipped entirely inside the paragraph glyphs. */
@property --story-lens-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.story_liquid-section {
  --story-lens-x: 50%;
  --story-lens-y: 50%;
  --story-lens-size: 0px;
}

.story_liquid-section.is-story-lens-active {
  --story-lens-size: 20rem;
}

.story_liquid-section .story_title-2 {
  background-image:
    radial-gradient(
      circle var(--story-lens-size) at var(--story-lens-x) var(--story-lens-y),
      #d6b36d 0%,
      #bf9953 52%,
      rgba(191, 153, 83, 0) 76%
    ),
    linear-gradient(290deg, #484747, #484747);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: --story-lens-size 350ms cubic-bezier(0.36, 1, 0.36, 1);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .story_liquid-section {
    --story-lens-size: 0px;
  }
}

/* Mouse-follow glow (verbatim from home.css). The actual following motion
   is driven by js/story-circle-follow.js — this page doesn't load
   Webflow's IX2 runtime, which is what moves the circle on the homepage. */
.global_bg-circle-interaction {
  background-color: #bf9953;
  mix-blend-mode: lighten;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

@media screen and (max-width: 991px) {
  .story_grid {
    grid-template-columns: 1fr;
    grid-row-gap: 2rem;
  }
}

/* ---------- designing stories manifesto (verbatim from home.css) ---------- */

/* picture has no intrinsic size of its own, so it needs the same fill sizing
   the <img> already had to keep the sticky flex layout intact. */
.inspiration_image-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* The sustainability and research pages use longer manifesto statements than
   the homepage, so give the copy more horizontal room and a smaller scale. */
.section_inspiration .story_content-wrapper {
  width: 100%;
  max-width: 30ch;
}

.section_inspiration .story_content-wrapper .heading-style-h2 {
  margin: 0;
  font-size: clamp(2.25rem, 3vw, 4.75rem);
  line-height: 1.05;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Tablet + desktop: let the heading column run wider than the mobile ch-based
   width above. */
@media screen and (min-width: 768px) {
  .section_inspiration .story_content-wrapper {
    max-width: 70%;
  }
}

/* Desktop only: fixed size (not clamp) so it actually shrinks below the
   2.25rem–4.75rem clamp used up to tablet width. */
@media screen and (min-width: 992px) {
  .section_inspiration .story_content-wrapper .heading-style-h2 {
    font-size: 3rem;
  }
}

@media screen and (max-width: 479px) {
  /* Keep the manifesto heading near the top of the mobile artwork. */
  .section_inspiration .inspiration_text-wrapper {
    top: clamp(6rem, 14vh, 8.5rem);
    bottom: auto;
    z-index: 5;
  }

  .section_inspiration .inspiration_text-wrapper .padding-section-small {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section_inspiration .story_content-wrapper {
    max-width: 22ch;
  }

  .section_inspiration .story_content-wrapper .heading-style-h2 {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.08;
  }
}

/* ---------- carbon reduction manifesto ---------- */
/* Same dark-ground + drifting SVG line pattern as .section_formula on the
   homepage, with a 40/60 media-to-copy split. */

.sustainability_manifesto {
  position: relative;
  overflow: hidden;
  background-color: var(--background-color-gray);
}

.manifesto_pattern {
  z-index: 0;
  position: absolute;
  inset: -10% 0;
}

.manifesto_pattern img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.manifesto_content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.manifesto_media {
  overflow: hidden;
}

.manifesto_media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.manifesto_copy {
  min-width: 0;
}

.manifesto_heading {
  margin: 0 0 1.5rem;
  color: var(--secondary-color);
  font-family: "Century Gothic", sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
}

.manifesto_text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Century Gothic", sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
}

.manifesto_read-more {
  display: none;
}

@media screen and (max-width: 767px) {
  .manifesto_content {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .manifesto_media {
    grid-row: 1;
  }

  .manifesto_copy {
    grid-row: 2;
  }

  .manifesto_heading {
    font-size: 1.9rem;
  }

  .manifesto_text {
    font-size: 1rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
  }

  .manifesto_copy.is-expanded .manifesto_text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .manifesto_read-more {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.65rem 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--secondary-color);
    font-family: "Century Gothic", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .manifesto_read-more:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 0.3rem;
  }
}