/* Studiqora — studio ambience */
:root {
  --color-bg: #101218;
  --color-surface: #222530;
  --color-text: #f2f2f3;
  --color-text-muted: #d3d4da;
  --color-primary: #ba393c;
  --color-accent: #c1464b;
  --color-dark: #111219;
  --shadow: none;
  --text-display: clamp(2.25rem, 4vw, 3.65rem);
  --text-h1: clamp(2rem, 3.4vw, 3rem);
  --text-h2: clamp(1.65rem, 2.65vw, 2.4rem);
  --text-h3: clamp(1.2rem, 1.75vw, 1.55rem)
}

html {
  background: #101218
}

body.studio-dark {
  background: #101218;
  color: #f3f3f5;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.62;
  min-height: 100vh;
  overflow-x: hidden
}

body.studio-dark:before {
  content: '';
  position: fixed;
  inset: -45px;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 8, 17, .68), rgba(10, 12, 19, .49)), url('../images/1.webp') center center/cover no-repeat;
  filter: blur(16px) saturate(.72);
  transform: scale(1.07)
}

body.studio-dark:after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(7, 10, 16, .43)
}

body.studio-dark h1,
body.studio-dark h2,
body.studio-dark h3 {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: -.025em;
  font-weight: 600;
  text-transform: none;
  color: #fff
}

body.studio-dark h1 {
  font-size: clamp(2rem, 3.8vw, 3.35rem);
  line-height: 1.16;
  word-break: break-word;
}

body.studio-dark h2 {
  font-size: clamp(1.4rem, 2.35vw, 2.25rem);
  line-height: 1.25
}

body.studio-dark h3 {
  font-size: clamp(1.12rem, 1.65vw, 1.5rem);
  line-height: 1.3
}

body.studio-dark p,
body.studio-dark .lead {
  color: #edf0f4;
  font-size: clamp(.83rem, 1vw, .96rem);
  line-height: 1.7
}

body.studio-dark .eyebrow,
body.studio-dark .kicker,
body.studio-dark .service-number {
  color: #e8e8ee;
  letter-spacing: .09em;
  font-size: .73rem
}

body.studio-dark .wrap {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px
}

body.studio-dark .site-header.editorial-header {
  height: 54px;
  min-height: 54px;
  padding: 0 max(22px, calc((100vw - 1100px)/2));
  background: #050505;
  position: relative;
  z-index: 12;
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  border: 0
}

body.studio-dark .editorial-header .brand {
  font: 700 1.18rem 'DM Sans', sans-serif;
  letter-spacing: -.05em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap
}

body.studio-dark .brand img {
  width: 22px;
  height: 22px;
  object-fit: contain
}

body.studio-dark .brand-accent {
  color: #fff
}

body.studio-dark .editorial-header .main-nav {
  margin-left: auto;
  gap: clamp(13px, 2.6vw, 37px);
  align-items: center
}

body.studio-dark .editorial-header .main-nav a {
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff
}

body.studio-dark .editorial-header .main-nav a:hover,
body.studio-dark .editorial-header .main-nav a[aria-current=page] {
  color: #e06465
}

body.studio-dark .hero.editorial-hero {
  max-width: none;
  min-height: 360px;
  height: 430px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

body.studio-dark .editorial-hero>.hero-media {
  inset: 0;
  background: transparent
}

body.studio-dark .editorial-hero>.hero-media img {
  object-fit: cover;
  filter: brightness(.64) saturate(.8)
}

body.studio-dark .editorial-hero>.hero-media:after {
  background: rgba(8, 10, 18, .35)
}

body.studio-dark .editorial-hero .hero-copy {
  height: auto;
  min-height: 0;
  padding: 36px 45px;
  max-width: 780px;
  width: calc(100% - 36px);
  margin: 0 auto;
  background: rgba(7, 9, 15, .56);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-shadow: none
}

body.studio-dark .editorial-hero h1 {
  margin: 8px 0 12px;
  max-width: 690px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  text-transform: none;
  letter-spacing: -.035em
}

body.studio-dark .editorial-hero h1 em {
  color: #fff
}

body.studio-dark .editorial-hero .lead {
  font-size: .94rem;
  max-width: 600px;
  line-height: 1.5;
  margin-bottom: 17px
}

body.studio-dark .editorial-hero .hero-eyebrow {
  color: #fff
}

body.studio-dark .editorial-hero .btn,
body.studio-dark .btn {
  border: 0;
  border-radius: 0;
  background: #ad3338;
  color: #fff;
  font-weight: 600;
  font-size: .86rem;
  padding: 11px 23px;
  min-height: 43px;
  letter-spacing: 0;
  width: 100%;
}

body.studio-dark .btn:hover {
  background: #d24a4d;
  color: #fff
}

body.studio-dark .rec-dot {
  background: #be3e40
}

body.studio-dark .hero.compact-hero {
  height: 300px;
  min-height: 300px
}

body.studio-dark .hero.compact-hero .hero-copy {
  max-width: 770px;
  padding: 32px 24px
}

body.studio-dark .hero.compact-hero h1 {
  font-size: clamp(1.8rem, 3vw, 2.85rem)
}

body.studio-dark .section,
body.studio-dark .service-intro,
body.studio-dark .reference-statement,
body.studio-dark .phase-introduction {
  padding-top: 55px;
  padding-bottom: 55px
}

body.studio-dark .service-intro,
body.studio-dark .reference-statement,
body.studio-dark .phase-introduction {
  display: block;
  max-width: 1000px;
  padding: 28px 35px;
  margin-top: 30px;
  margin-bottom: 12px;
  background: rgba(3, 6, 13, .66);
  backdrop-filter: blur(9px)
}

body.studio-dark .service-intro h2,
body.studio-dark .reference-statement h2,
body.studio-dark .phase-introduction h2 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  margin: 8px 0 12px
}

body.studio-dark .service-intro p,
body.studio-dark .reference-statement p,
body.studio-dark .phase-introduction p {
  grid-column: auto;
  max-width: 900px;
  margin: 8px 0;
  font-size: .94rem;
  color: #f3f3f6
}

body.studio-dark .services-heading {
  margin-top: 34px;
  margin-bottom: 0
}

body.studio-dark .services-heading h2 {
  font-size: 2.8rem;
  font-weight: 400
}

body.studio-dark .services-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 75px
}

body.studio-dark .service-gallery-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(4, 5, 10, .82);
  position: relative;
  text-decoration: none;
  color: #fff;
  transition: transform .2s, background .2s
}

body.studio-dark .service-gallery-card:hover {
  transform: translateY(-5px);
  background: rgba(19, 22, 32, .95)
}

body.studio-dark .service-gallery-photo {
  aspect-ratio: 1.13;
  position: relative;
  overflow: hidden;
  background: #24252d
}

body.studio-dark .service-gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

body.studio-dark .service-gallery-photo:after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .48))
}

body.studio-dark .service-gallery-label {
  z-index: 1;
  position: relative;
  margin: -58px 15px 0;
  background: rgba(5, 5, 8, .83);
  border: 2px solid #a93c40;
  min-height: 48px;
  padding: 11px;
  text-align: center;
  font-size: 1rem;
  letter-spacing: .085em;
  font-weight: 700
}

body.studio-dark .service-gallery-info {
  padding: 28px 21px 23px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  gap: 24px
}

body.studio-dark .service-gallery-info p {
  font-size: .83rem;
  line-height: 1.65
}

body.studio-dark .service-gallery-info span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #e8a3a5
}

body.studio-dark .projects-editorial {
  padding-top: 25px
}

body.studio-dark .project-stories {
  display: flex;
  flex-direction: column;
  gap: 56px
}

body.studio-dark .project-story {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .75fr);
  gap: 0;
  min-height: 365px;
  background: rgba(6, 9, 16, .71);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px)
}

body.studio-dark .project-story .project-story-photo {
  aspect-ratio: 1.55;
  min-height: 360px;
  overflow: hidden;
  display: block
}

body.studio-dark .project-story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

body.studio-dark .project-story-content {
  align-self: center;
  padding: 42px 38px
}

body.studio-dark .project-story-content h3 {
  font-size: 1.52rem;
  margin: 14px 0
}

body.studio-dark .project-story-content p {
  font-size: .9rem;
  line-height: 1.72
}

body.studio-dark .project-story-content b {
  background: #090a0c;
  color: #fff;
  font-size: .76rem;
  display: inline-block;
  padding: 14px 18px;
  margin-top: 20px
}

body.studio-dark .project-story-content b:after {
  content: '  ›';
  color: #bb3c40
}

body.studio-dark .project-story.flip {
  grid-template-columns: minmax(250px, .75fr) minmax(0, 1.7fr)
}

body.studio-dark .project-story.flip .project-story-photo {
  grid-column: 2;
  grid-row: 1
}

body.studio-dark .project-story.flip .project-story-content {
  grid-column: 1;
  grid-row: 1
}

body.studio-dark .phase-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 15px;
  margin-bottom: 15px;
  background: rgba(7, 9, 17, .64);
  padding-top: 0;
  padding-bottom: 0;
  backdrop-filter: blur(6px);
  border: 0
}

body.studio-dark .phase-stage>.service-number {
  grid-column: 1/-1;
  padding: 16px 22px;
  background: rgba(0, 0, 0, .72)
}

body.studio-dark .phase-stage .phase-photo {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 1.8;
  min-height: 290px
}

body.studio-dark .phase-stage .phase-copy {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  padding: 42px
}

body.studio-dark .phase-stage .phase-copy h2 {
  font-size: 1.8rem
}

body.studio-dark .phase-stage .phase-copy p {
  font-size: .91rem;
  color: #f2f2f3
}

body.studio-dark .phase-stage.phase-flip .phase-photo {
  grid-column: 2
}

body.studio-dark .phase-stage.phase-flip .phase-copy {
  grid-column: 1
}

body.studio-dark .intro-band.reference-intro-band {
  background: rgba(5, 7, 13, .72);
  color: #fff
}

body.studio-dark .intro-band h2 {
  font-size: clamp(1.5rem, 2.3vw, 2.3rem)
}

body.studio-dark .split.dark {
  background: rgba(5, 7, 13, .7)
}

body.studio-dark .inner-page-panel,
body.studio-dark .reference-detail {
  background: rgba(6, 8, 15, .7);
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(4px)
}

body.studio-dark .info-card,
body.studio-dark .service-card,
body.studio-dark .article-card,
body.studio-dark .use-card {
  background: rgba(5, 6, 11, .66);
  color: #fff
}

body.studio-dark .info-card p,
body.studio-dark .service-card p,
body.studio-dark .article-card p,
body.studio-dark .use-card p {
  color: #f3f3f3
}

body.studio-dark .reference-three-col .info-card {
  border-color: #41414a
}

body.studio-dark .home-services-reference .service-grid {
  border-color: #4b4b50
}

body.studio-dark .home-service-tile {
  background: rgba(8, 9, 15, .68);
  border-color: #44464b;
  color: #fff
}

body.studio-dark .home-service-tile:hover {
  background: rgba(32, 34, 43, .9)
}

body.studio-dark .home-service-tile p {
  color: #e9e9ec
}

body.studio-dark .home-service-tile h3 {
  font-size: 1.38rem
}

body.studio-dark .home-projects-reference .portfolio-card {
  background: rgba(9, 10, 15, .77);
  padding: 12px;
  color: #fff;
  border: 0
}

body.studio-dark .home-projects-reference .portfolio-card p {
  color: #e7e7ec
}

body.studio-dark .home-projects-reference .portfolio-card h3 {
  font-size: 1.27rem
}

body.studio-dark .reference-cta {
  background: rgba(9, 11, 19, .82);
  max-width: 1150px;
  margin: 50px auto;
  padding: 65px 40px
}

body.studio-dark .reference-cta h2 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.03em
}

body.studio-dark .reference-cta p {
  font-size: .98rem
}

body.studio-dark .reference-cta .btn.light {
  background: #ac393d;
  color: #fff
}

body.studio-dark .footer.reference-footer {
  background: #060608;
  color: #fff;
  padding-top: 22px
}

body.studio-dark .footer-headline {
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 1.08;
  padding: 34px 0 40px;
  letter-spacing: -.04em
}

body.studio-dark .footer-headline em {
  color: #e7e7eb
}

body.studio-dark .footer-top strong {
  color: #e8e8ea
}

body.studio-dark .footer p {
  color: #c4c4c9
}

body.studio-dark .footer a:hover {
  color: #d25b5e
}

body.studio-dark .request-form {
  background: rgba(12, 13, 20, .9);
  border: 1px solid #5a5b61;
  color: #fff
}

body.studio-dark .request-form input,
body.studio-dark .request-form textarea,
body.studio-dark .request-form select {
  color: #151515;
  background: #fff
}

body.studio-dark .cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #222;
  padding: 14px 24px;
  box-shadow: 0 -4px 20px #0004
}

body.studio-dark .cookie-banner p {
  color: #222
}

body.studio-dark .cookie-actions .btn {
  background: #111;
  color: #fff
}

body.studio-dark .cookie-actions .btn:hover {
  background: #ac3338
}

body.studio-dark .legal-page p {
  color: #ebebed
}

body.studio-dark .legal-page section {
  border-color: #4a4b51
}

body.studio-dark .legal-lead {
  color: #eee
}

body.studio-dark .section-heading h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.4rem)
}

body.studio-dark .editorial-link {
  color: #fff
}

body.studio-dark .editorial-link:hover {
  color: #f1b3b3
}

body.studio-dark a:focus-visible,
body.studio-dark button:focus-visible {
  outline: 2px solid #e3676c;
  outline-offset: 3px
}

@media(max-width:900px) {
  body.studio-dark .site-header.editorial-header {
    padding: 0 20px;
    gap: 15px
  }

  body.studio-dark .menu-toggle {
    color: #fff;
    border: 1px solid #555;
    background: #141414;
    margin-left: auto
  }

  body.studio-dark .editorial-header .main-nav {
    background: #060608;
    top: 100%;
    padding: 16px 25px;
    position: absolute
  }

  body.studio-dark .editorial-header .main-nav a {
    font-size: .9rem;
    padding: 10px
  }

  body.studio-dark .services-gallery {
    grid-template-columns: repeat(2, 1fr)
  }

  body.studio-dark .project-story,
  body.studio-dark .project-story.flip {
    grid-template-columns: 1fr 1fr
  }

  body.studio-dark .project-story-content {
    padding: 24px
  }

  body.studio-dark .project-story .project-story-photo {
    min-height: 240px
  }

  body.studio-dark .reference-cta {
    margin: 35px 20px
  }
}

@media(max-width:620px) {

  body.studio-dark .hero.editorial-hero,
  body.studio-dark .hero.compact-hero {
    height: auto;
    min-height: 390px
  }

  body.studio-dark .editorial-hero .hero-copy {
    width: 100%;
    padding: 32px 24px
  }


  body.studio-dark .hero.editorial-hero h1 {
    font-size: 2rem
  }

  body.studio-dark .services-gallery {
    grid-template-columns: 1fr;
    gap: 19px
  }

  body.studio-dark .service-gallery-photo {
    aspect-ratio: 1.45
  }

  body.studio-dark .project-story,
  body.studio-dark .project-story.flip {
    display: flex;
    flex-direction: column
  }

  body.studio-dark .project-story .project-story-photo {
    height: 230px;
    min-height: 0;
    aspect-ratio: auto
  }

  body.studio-dark .phase-stage,
  body.studio-dark .phase-stage.phase-flip {
    display: flex;
    flex-direction: column
  }

  body.studio-dark .phase-stage>.service-number {
    order: 0
  }

  body.studio-dark .phase-stage .phase-photo {
    order: 1;
    min-height: 210px;
    aspect-ratio: 1.5
  }

  body.studio-dark .phase-stage .phase-copy {
    order: 2;
    padding: 25px
  }

  body.studio-dark .service-intro,
  body.studio-dark .reference-statement,
  body.studio-dark .phase-introduction {
    padding: 25px 20px
  }

  body.studio-dark .footer-headline {
    font-size: 2.2rem
  }
}

@media(prefers-reduced-motion:reduce) {

  body.studio-dark *,
  body.studio-dark *:before {
    animation: none !important;
    transition: none !important
  }
}

/* Journal layout */
body.studio-dark.page-blog {
  background: #08090e;
  color: #fff
}

body.page-blog .journal-head {
  background: #030303;
  padding: 86px 28px 84px
}

body.page-blog .journal-head-inner {
  max-width: 1090px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 95px;
  align-items: start
}

body.page-blog .journal-label {
  font-size: .68rem;
  letter-spacing: .18em;
  color: #cf777c;
  font-weight: 700
}

body.page-blog .journal-head h1 {
  font-size: clamp(2.5rem, 4vw, 3.45rem);
  line-height: 1.17;
  letter-spacing: -.035em;
  margin: 20px 0 0;
  font-weight: 700
}

body.page-blog .journal-intro {
  padding-top: 17px
}

body.page-blog .journal-intro p {
  font-size: .96rem;
  line-height: 1.78;
  color: #eee;
  margin: 0
}

body.page-blog .journal-rule {
  width: 62px;
  height: 1px;
  background: #ddd;
  margin: 24px 0 16px
}

body.page-blog .journal-intro .journal-intro-link {
  font-size: .76rem;
  font-weight: 700
}

body.page-blog .journal-feed {
  padding: 0 22px 78px;
  position: relative
}

body.page-blog .journal-shell {
  max-width: 1030px;
  margin: 0 auto;
  background: rgba(2, 4, 9, .78);
  backdrop-filter: blur(8px);
  padding: 0 20px 25px
}

body.page-blog .journal-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  flex-wrap: wrap;
  background: #050505;
  padding: 23px 16px;
  margin: 0 -20px 18px
}

body.page-blog .journal-tab {
  font-family: inherit;
  font-size: .7rem;
  line-height: 1.4;
  background: none;
  border: 0;
  color: #f4f4f4;
  padding: 11px 7px;
  cursor: pointer;
  transition: color .2s
}

body.page-blog .journal-tab:hover,
body.page-blog .journal-tab.active {
  color: #db5c60
}

body.page-blog .journal-articles {
  display: grid;
  gap: 22px
}

body.page-blog .journal-entry {
  border: 1px solid rgba(210, 218, 225, .45);
  background: rgba(5, 8, 15, .46);
  transition: border-color .22s, background .22s
}

body.page-blog .journal-entry:hover {
  border-color: #c96d71;
  background: rgba(12, 17, 25, .9)
}

body.page-blog .journal-entry[hidden] {
  display: none
}

body.page-blog .journal-entry-link {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 240px;
  color: #fff;
  text-decoration: none
}

body.page-blog .journal-photo {
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  background: #222b38
}

body.page-blog .journal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.76)
}

body.page-blog .journal-entry-copy {
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

body.page-blog .journal-meta {
  font-size: .67rem;
  color: #d9d9dd
}

.journal-meta span {
  padding: 0 7px
}

body.page-blog .journal-kicker {
  color: #ce7679;
  font-size: .72rem;
  font-weight: 700;
  margin-top: 17px
}

body.page-blog .journal-entry h2 {
  color: #fff;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  margin: 8px 0 9px
}

body.page-blog .journal-entry p {
  font-size: .86rem;
  color: #ddd;
  line-height: 1.6;
  margin: 0 0 17px
}

body.page-blog .journal-entry-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-top: 1px solid #62666b;
  padding-top: 13px;
  font-size: .75rem;
  font-weight: 650
}

body.page-blog .journal-arrow {
  color: #d35b61;
  font-size: 1.15rem
}

body.page-blog .journal-conclusion {
  background: #060608;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  padding: 70px max(30px, calc((100% - 1050px)/2));
  align-items: center
}

body.page-blog .journal-conclusion h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  line-height: 1.2;
  margin: 12px 0
}

body.page-blog .journal-conclusion p {
  font-size: .92rem;
  line-height: 1.7;
  color: #e3e3e6
}

body.page-blog .journal-contact-link {
  display: inline-block;
  color: #fff;
  background: #a73539;
  padding: 15px 23px;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  margin-top: 10px
}

body.page-blog .journal-contact-link:hover {
  background: #c14d51
}

@media(max-width:700px) {
  body.page-blog .journal-shell {
    padding: 0;
  }
  body.page-blog .journal-head {
    padding: 48px 22px
  }

  body.page-blog .journal-head-inner,
  body.page-blog .journal-conclusion {
    grid-template-columns: 1fr;
    gap: 18px
  }

  body.page-blog .journal-head h1 {
    font-size: 2.7rem
  }

  body.page-blog .journal-tabs {
    justify-content: flex-start;
    gap: 4px 15px
  }

  body.page-blog .journal-entry-link {
    grid-template-columns: 1fr
  }

  body.page-blog .journal-photo {
    height: 195px;
    min-height: 195px
  }

  body.page-blog .journal-entry-copy {
    padding: 22px
  }

  body.page-blog .journal-conclusion {
    padding: 50px 25px
  }
}

.about-expanded,
.about-note {
  margin-top: 48px;
  margin-bottom: 64px;
  padding: clamp(26px, 4vw, 58px);
  background: rgba(5, 9, 15, .8);
  border: 1px solid rgba(255, 255, 255, .12)
}

.about-heading {
  max-width: 830px;
  margin-bottom: 36px
}

.about-heading h2,
.about-note h2 {
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height: 1.18
}

.about-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px
}

.about-columns article {
  border-top: 1px solid rgba(255, 255, 255, .35);
  padding-top: 20px
}

.about-columns h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 15px 0
}

.about-columns p,
.about-note p {
  font-size: .95rem;
  line-height: 1.75;
  color: #e5e8ed
}

.about-note {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px
}

.about-note .text-link {
  display: inline-block;
  margin-top: 12px;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #c64b50;
  text-underline-offset: 6px
}

@media(max-width:800px) {

  .about-columns,
  .about-note {
    grid-template-columns: 1fr
  }

  .about-columns {
    gap: 18px
  }

  .about-note {
    gap: 14px
  }
}


.project-story-content h4 {
  font-size: 1.08rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 1.2rem 0 .8rem;
  color: var(--color-text, #f6f5f2)
}

.project-story-content p {
  line-height: 1.68;
  margin: 0 0 .85rem
}

.project-story-content p+p {
  margin-top: .65rem
}

.journal-full-article {
  margin: 0 1.1rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .19);
  color: #f3f3f3
}

.journal-full-article summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  font-size: .94rem;
  transition: color .2s ease
}

.journal-full-article summary::-webkit-details-marker {
  display: none
}

.journal-full-article summary:hover,
.journal-full-article summary:focus-visible {
  color: #e07070
}

.journal-article-content {
  padding: 0 1.5rem 1.4rem;
  max-width: 830px
}

.journal-article-content h2 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  margin: 1.5rem 0 .65rem;
  line-height: 1.3
}

.journal-article-content h3 {
  font-size: 1.12rem;
  margin: 1.2rem 0 .6rem
}

.journal-article-content p {
  font-size: .93rem;
  line-height: 1.75;
  margin: 0 0 .9rem;
  max-width: 75ch
}

.phase-copy .phase-subheading {
  font-size: 1.06rem;
  line-height: 1.4;
  margin: 1.2rem 0 .7rem;
  font-weight: 600
}

.phase-copy p {
  line-height: 1.72;
  margin-bottom: .9rem
}

.phase-copy .phase-result {
  border-left: 2px solid #bf4343;
  padding: .6rem .95rem;
  margin: 1.1rem 0 1.2rem;
  background: rgba(0, 0, 0, .19);
  font-weight: 600
}

.legal-page .legal-updated {
  font-size: .88rem;
  letter-spacing: .01em;
  margin: .6rem 0 1.2rem;
  color: #dedede
}

.legal-page>section {
  margin: 1.8rem 0 2.1rem
}

.legal-page>section h2 {
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  line-height: 1.4;
  margin-bottom: .9rem
}

.legal-page>section p {
  font-size: .98rem;
  line-height: 1.75;
  margin: 0 0 1rem;
  max-width: 84ch
}

@media(max-width:760px) {
  .journal-article-content {
    padding: 0 1rem 1rem
  }

  .journal-full-article {
    margin: 0 .7rem 1rem
  }
}

@media (min-width: 761px) {
  body.studio-dark.page-phasenplan .phase-stage {
    max-width: 1120px;
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
    margin-bottom: 14px;
  }

  body.studio-dark.page-phasenplan .phase-stage .phase-photo {
    min-height: 0;
    height: 295px;
    aspect-ratio: auto;
    overflow: hidden;
  }

  body.studio-dark.page-phasenplan .phase-stage .phase-copy {
    padding: 28px 38px;
  }

  body.studio-dark.page-projekte .project-story,
  body.studio-dark.page-projekte .project-story.flip {
    min-height: 0;
    max-width: 1100px;
    grid-template-columns: minmax(0, 1.62fr) minmax(270px, .85fr);
    margin-left: auto;
    margin-right: auto;
  }

  body.studio-dark.page-projekte .project-story.flip {
    grid-template-columns: minmax(270px, .85fr) minmax(0, 1.62fr);
  }

  body.studio-dark.page-projekte .project-story .project-story-photo {
    height: 306px;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }

  body.studio-dark.page-projekte .project-story .project-story-content {
    padding: 24px 31px;
  }
}

body.studio-dark.page-phasenplan .phase-stage .phase-copy h2 {
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  margin: 8px 0 21px;
  line-height: 1.2;
}

body.studio-dark.page-phasenplan .phase-stage .phase-copy p {
  font-size: .89rem;
  line-height: 1.68;
  margin: 0 0 17px;
}

body.studio-dark.page-phasenplan .phase-stage .phase-copy .eyebrow {
  font-size: .69rem;
  letter-spacing: .035em;
}

body.studio-dark.page-phasenplan .phase-stage .text-link {
  font-size: .85rem;
}

body.studio-dark.page-phasenplan .phase-introduction {
  max-width: 1020px;
  padding: 27px 35px;
}

body.studio-dark.page-phasenplan .phase-introduction h2 {
  font-size: clamp(1.5rem, 2.25vw, 2.2rem);
}

body.studio-dark.page-projekte .project-story {
  margin-top: 0;
  margin-bottom: 24px;
}

body.studio-dark.page-projekte .project-story-content h3 {
  font-size: clamp(1.2rem, 1.65vw, 1.45rem);
  line-height: 1.24;
  margin: 13px 0 16px;
}

body.studio-dark.page-projekte .project-story-content p {
  font-size: .86rem;
  line-height: 1.66;
  margin: 0;
}

body.studio-dark.page-projekte .project-story-content b {
  font-size: .74rem;
  margin-top: 18px;
  padding: 13px 17px;
}

body.studio-dark.page-projekte .project-story-photo img,
body.studio-dark.page-phasenplan .phase-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {

  body.studio-dark.page-phasenplan .phase-stage,
  body.studio-dark.page-phasenplan .phase-stage.phase-flip,
  body.studio-dark.page-projekte .project-story,
  body.studio-dark.page-projekte .project-story.flip {
    display: flex;
    flex-direction: column;
  }

  body.studio-dark.page-phasenplan .phase-stage .phase-photo {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.55;
  }

  body.studio-dark.page-phasenplan .phase-stage .phase-copy {
    padding: 24px 25px;
  }

  body.studio-dark.page-projekte .project-story .project-story-photo {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.55;
    order: 0;
  }

  body.studio-dark.page-projekte .project-story .project-story-content {
    order: 1;
    padding: 24px 25px 28px;
  }
}