@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap
}

.gasyr {
  --bg: #1d1d1b;
  --panel: #242423;
  --text: #f4f4f1;
  --paper: #f3f3ef;
  --muted: #a8a8a6;
  --line: #494949;
  --brand: #B28D60;
  --accent: var(--brand);
  --hover: #443a2e;
  --brand-soft: rgba(178, 141, 96, .12);
  --gutter: 2.5vw;
  --gap: 20px;
  --body: 16px;
  --small: 14px;
  --meta: 12px;
  --leading-copy: 1.35;
  --leading-heading: 1.05;
  --leading-subheading: 1.15;
  background: var(--bg);
  color: var(--text);
  font: 16px/var(--leading-copy) Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  overflow: clip
}

.gasyr *,
.gasyr *:before,
.gasyr *:after {
  box-sizing: border-box
}

.gasyr [hidden] {
  display: none !important
}

.gasyr :is(h1, h2, h3, p, figure) {
  margin: 0
}

.gasyr :is(a, button, input) {
  -webkit-tap-highlight-color: transparent
}

.gasyr a {
  color: inherit;
  text-decoration: none
}

.gasyr button,
.gasyr input {
  font: inherit
}

.gasyr button {
  cursor: pointer
}

.gasyr button:disabled {
  cursor: not-allowed;
  opacity: .35
}

.gasyr img {
  display: block;
  max-width: 100%
}

.gasyr :is(a, button) {
  touch-action: manipulation
}

.gasyr :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px
}

.gasyr section[id] {
  scroll-margin-top: 40px
}

.gasyr .shell {
  width: 100%;
  padding-inline: var(--gutter);
  margin-inline: auto
}

.gasyr .section {
  padding-block: 130px
}

.gasyr h1,
.gasyr h2,
.gasyr h3 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.045em
}

.gasyr h2 {
  font-size: clamp(34px, 3.4vw, 58px);
  line-height: var(--leading-heading)
}

.gasyr h3 {
  font-size: clamp(23px, 2vw, 32px);
  line-height: var(--leading-subheading)
}

.gasyr .muted {
  color: #8e8e8c
}

.gasyr .kicker {
  font-size: 14px;
  letter-spacing: .035em;
  color: var(--muted);
  margin-bottom: 22px
}

.gasyr .section-top {
  margin-bottom: 54px
}

.gasyr .section-top>.kicker {
  display: none
}

.gasyr .section-aside {
  color: var(--muted);
  font-size: 16px;
  line-height: var(--leading-copy);
  margin-top: 28px
}

.gasyr .button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 15px 21px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--paper);
  color: var(--bg);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out
}

.gasyr .button:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .7
}

.gasyr .button>.arrow {
  display: none
}

.gasyr .button:focus-visible {
  background: var(--hover);
  color: var(--text);
  border-color: var(--hover)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .button:hover {
    background: var(--hover);
    color: var(--text);
    border-color: var(--hover)
  }
}

.gasyr .button-outline {
  color: var(--text);
  background: transparent;
  border-color: #ffffff50
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .button-outline:hover {
    background: var(--paper);
    color: var(--bg);
    border-color: var(--paper)
  }
}

.gasyr .arrow {
  width: 18px;
  height: 18px;
  flex: none
}

.gasyr .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  font-size: 14px;
  border-bottom: 1px solid var(--line)
}

.gasyr .text-link .arrow {
  transition: transform .25s
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .text-link:hover .arrow {
    transform: translate(3px, -3px)
  }
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .text-link:hover {
    color: var(--accent)
  }
}

.gasyr .skip {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 50;
  padding: 16px;
  background: var(--paper);
  color: var(--bg)
}

.gasyr .skip:focus {
  top: 20px
}

.gasyr .directions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap)
}

.gasyr .directions:before,
.gasyr .intro:before {
  content: "";
  position: absolute;
  width: min(600px, 100vw);
  height: 600px;
  border-radius: 50%;
  background: var(--brand);
  filter: blur(110px);
  opacity: .10;
  pointer-events: none;
  left: -200px;
  top: 20px;
  z-index: -1
}

.gasyr .directions .section-top {
  grid-column: 1/span 4;
  margin: 0;
  padding-top: 8px
}

.gasyr .services {
  grid-column: 5/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch
}

.gasyr .service {
  position: relative;
  padding: 34px 36px 30px;
  border: 1px solid #ffffff12;
  border-radius: 18px;
  background: linear-gradient(140deg, #252524aa, #1d1d1b33);
  min-height: 370px;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, background-color .3s
}

.gasyr .service:nth-child(2n) {
  margin-top: 0
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .service:hover {
    background-color: #302b25;
    border-color: #B28D6050
  }
}

.gasyr .service-type {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 26px !important
}

.gasyr .service h3 {
  font-size: clamp(22px, 2vw, 32px);
  max-width: calc(100% - 58px);
  min-height: 72px;
  margin-bottom: 32px
}

.gasyr .service>p:not(.service-type) {
  font-size: 16px;
  color: var(--muted);
  max-width: 350px;
  line-height: var(--leading-copy);
  margin-bottom: 30px
}

.gasyr .service-glyph {
  position: absolute;
  right: 30px;
  top: 34px;
  width: 48px;
  height: 58px;
  color: #dadada;
  transition: transform .5s
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .service:hover .service-glyph {
    transform: translateY(-4px)
  }
}

.gasyr .service-bottom {
  margin-top: auto
}

.gasyr .service-bottom>span {
  display: block;
  font-size: 12px;
  color: #858582;
  margin-bottom: 20px
}

.gasyr .service-bottom .button {
  min-height: 56px;
  padding-inline: 19px
}

.gasyr .intro {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding-block: 15px 130px
}

.gasyr .intro-main {
  grid-column: 1/span 8
}

.gasyr .intro-main h2 {
  max-width: 920px
}

.gasyr .intro-bottom {
  grid-column: 9/-1;
  padding: 46px 0 0
}

.gasyr .intro-bottom p {
  color: var(--muted);
  font-size: 16px;
  max-width: 360px;
  margin-bottom: 22px
}

.gasyr .drafting {
  position: relative
}

.gasyr .draft-cell {
  position: relative;
  min-width: 0
}

.gasyr .joint {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  background: #c3c3c3;
  z-index: 3;
  pointer-events: none
}

.gasyr .joint-tl {
  top: -4px;
  left: -4px
}

.gasyr .joint-tr {
  top: -4px;
  right: -4px
}

.gasyr .joint-bl {
  bottom: -4px;
  left: -4px
}

.gasyr .joint-br {
  bottom: -4px;
  right: -4px
}

.gasyr .vision {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 0;
  margin-bottom: 10px
}

.gasyr .vision:before,
.gasyr .vision:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none
}

.gasyr .vision:before {
  top: 0
}

.gasyr .vision:after {
  bottom: 0
}

.gasyr .vision-copy {
  grid-column: 1/3;
  grid-row: 1;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding-top: 52px;
  display: flex;
  flex-direction: column;
  min-height: 600px
}

.gasyr .vision-copy>.kicker,
.gasyr .vision-copy>h2 {
  padding-inline: 36px
}

.gasyr .vision-copy h2 {
  font-size: clamp(33px, 3.3vw, 54px);
  padding-bottom: 58px
}

.gasyr .vision-principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto
}

.gasyr .vision-principles>div {
  border-top: 1px solid var(--line);
  padding: 64px 36px 36px;
  min-height: 240px
}

.gasyr .vision-principles>div+div {
  border-left: 1px solid var(--line)
}

.gasyr .vision-principles h3 {
  font-size: 27px;
  margin-bottom: 18px
}

.gasyr .vision-principles p {
  font-size: 16px;
  color: var(--muted);
  max-width: 340px
}

.gasyr .vision-media {
  grid-column: 3;
  grid-row: 1;
  border-right: 1px solid var(--line)
}

.gasyr .vision-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  border-radius: 28px
}

.gasyr .image-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  border-radius: 4px;
  padding: 8px 12px;
  background: #1d1d1bcc;
  font-size: 12px;
  color: var(--text)
}

.gasyr .projects .section-top {
  display: flex;
  justify-content: space-between
}

.gasyr .projects .section-top>div {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end
}

.gasyr .projects .section-top h2 {
  grid-column: span 8
}

.gasyr .projects-lead {
  grid-column: span 4;
  max-width: 380px;
  font-size: 16px;
  color: var(--muted);
  padding-left: 0
}

.gasyr .project-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px
}

.gasyr .filter {
  min-height: 44px;
  padding: 10px 18px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 14px;
  transition: background .2s, color .2s
}

.gasyr .filter[aria-pressed=true] {
  color: var(--text);
  background: var(--hover);
  border-color: var(--brand)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .filter:hover {
    border-color: var(--brand)
  }
}

.gasyr .project-counter {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px
}

.gasyr .project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px
}

.gasyr .project-card {
  position: relative;
  background: var(--panel);
  padding: 12px;
  border-radius: 24px;
  min-width: 0
}

.gasyr .project-row-end {
  grid-column: 1/-1
}

.gasyr .project-wide {
  grid-column: 1/-1
}

.gasyr .project-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.35;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #30302d;
  border: 0;
  color: var(--text)
}

.gasyr .project-wide .project-image {
  aspect-ratio: 2.35
}

.gasyr .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .project-card:hover img {
    transform: scale(1.035);
    filter: brightness(.94)
  }
}

.gasyr .project-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 12px;
  padding: 7px 12px;
  background: #1d1d1ba6;
  backdrop-filter: blur(10px);
  border: 1px solid #ffffff30;
  border-radius: 4px
}

.gasyr .project-open {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--bg);
  border-radius: 6px;
  transition: background .2s, color .2s
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .project-card:hover .project-open {
    background: var(--hover);
    color: var(--text)
  }
}

.gasyr .project-meta {
  position: absolute;
  top: 24px;
  left: 24px;
  max-width: calc(100% - 48px);
  width: 360px;
  background: #39342dcc;
  backdrop-filter: blur(20px);
  padding: 26px 28px;
  border-radius: 10px;
  pointer-events: none
}

.gasyr .project-meta span {
  font-size: 12px;
  color: #d0d0c8;
  display: block;
  margin-bottom: 12px
}

.gasyr .project-meta h3 {
  font-size: 28px;
  margin-bottom: 12px
}

.gasyr .project-meta p {
  font-size: 14px;
  color: #d0d0c8
}

.gasyr .projects-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 30px
}

.gasyr .projects-footer p {
  font-size: 14px;
  color: var(--muted)
}

.gasyr #gasyr-stages {
  padding-top: 0
}

.gasyr .budget {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 0
}

.gasyr .budget h2 {
  font-size: clamp(32px, 3.1vw, 52px)
}

.gasyr .budget>.section-top {
  grid-column: span 4
}

.gasyr .budget-main {
  grid-column: span 8;
  min-width: 0
}

.gasyr .budget-note {
  color: var(--muted);
  font-size: 16px;
  max-width: 540px;
  margin-bottom: 36px
}

.gasyr .budget-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--line);
  padding: 28px 0
}

.gasyr .budget-row:last-child {
  border-bottom: 1px solid var(--line)
}

.gasyr .budget-row h3 {
  font-size: 22px
}

.gasyr .budget-row p {
  font-size: 16px;
  color: var(--muted)
}

.gasyr .brief-section {
  padding-block: 64px;
  margin-inline: 12px;
  border: 1px solid #ffffff15;
  border-radius: 20px;
  background: radial-gradient(ellipse at 10% 0%, rgba(178, 141, 96, .13), transparent 50%), #232322
}

.gasyr .brief-section>.shell {
  padding-inline: calc(var(--gutter) - 13px)
}

.gasyr .brief-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap)
}

.gasyr .brief-intro {
  grid-column: span 4;
  padding-right: 32px
}

.gasyr .brief-intro h2 {
  font-size: clamp(32px, 3.2vw, 54px)
}

.gasyr .brief-intro>p:not(.kicker) {
  color: var(--muted);
  max-width: 300px;
  font-size: 16px;
  margin-top: 28px
}

.gasyr .brief-intro .brief-note {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px !important
}

.gasyr .brief {
  grid-column: span 8;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  min-width: 0
}

.gasyr .progress-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px
}

.gasyr .progress {
  height: 1px;
  background: var(--line);
  margin-bottom: 32px
}

.gasyr .progress i {
  display: block;
  height: 1px;
  background: var(--brand);
  transition: width .3s
}

.gasyr .step h3,
.gasyr .brief-result h3 {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 28px
}

.gasyr .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.gasyr .option {
  min-height: 100px;
  padding: 18px 20px;
  background: transparent;
  border: 1px solid #ffffff30;
  border-radius: 6px;
  color: var(--text);
  text-align: left;
  transition: background .2s, border-color .2s
}

.gasyr .option strong {
  display: block;
  font-size: 16px;
  font-weight: 400
}

.gasyr .option small {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .option:hover {
    background: #ffffff06;
    border-color: #ffffff70
  }
}

.gasyr .option[aria-pressed=true] {
  background: var(--hover);
  border-color: var(--accent)
}

.gasyr .brief-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 30px;
  margin-top: auto
}

.gasyr .brief .button {
  min-width: 145px
}

.gasyr .back {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 48px;
  padding: 12px 0;
  font-size: 14px
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .back:hover {
    color: var(--text)
  }
}

.gasyr .back:disabled {
  visibility: hidden
}

.gasyr .area-value {
  font-size: 62px;
  letter-spacing: -.045em;
  margin: 15px 0
}

.gasyr .area-value small {
  font-size: 24px;
  letter-spacing: 0
}

.gasyr .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 18px
}

.gasyr .field input {
  background: transparent;
  border: 1px solid #777;
  color: var(--text);
  padding: 12px 14px;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  min-height: 56px
}

.gasyr .field input::placeholder {
  color: #969694
}

.gasyr input[type=range] {
  accent-color: var(--brand);
  height: 40px;
  padding: 0;
  cursor: pointer
}

.gasyr .range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted)
}

.gasyr .hint {
  font-size: 14px;
  color: var(--muted);
  margin-top: 20px
}

.gasyr .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 20px
}

.gasyr .check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--brand)
}

.gasyr .error {
  font-size: 14px;
  color: #ffaca0;
  margin-bottom: 16px
}

.gasyr .field input[aria-invalid=true] {
  border-color: #ffaca0
}

.gasyr .brief-result p {
  font-size: 16px;
  color: var(--muted)
}

.gasyr .summary {
  margin: 24px 0;
  border-top: 1px solid var(--line)
}

.gasyr .summary div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px
}

.gasyr .summary dt {
  color: var(--muted)
}

.gasyr .summary dd {
  margin: 0
}

.gasyr .brief-result .button {
  width: 100%;
  margin-bottom: 12px
}

.gasyr .brief-result .back {
  display: block
}

.gasyr .faq-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap)
}

.gasyr .faq-side {
  grid-column: span 4;
  padding-right: 32px
}

.gasyr .faq-list {
  grid-column: span 8
}

.gasyr .faq-side>p:not(.kicker) {
  font-size: 16px;
  color: var(--muted);
  max-width: 260px;
  margin: 25px 0
}

.gasyr .faq-side h2 {
  font-size: clamp(32px, 3.1vw, 52px)
}

.gasyr .faq-list details {
  border-bottom: 1px solid var(--line)
}

.gasyr .faq-list details:first-child {
  border-top: 1px solid var(--line)
}

.gasyr .faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  gap: 24px;
  min-height: 78px;
  padding: 24px 0;
  font-size: 17px;
  line-height: 1.4
}

.gasyr .faq-list summary::-webkit-details-marker {
  display: none
}

.gasyr .faq-list summary:after {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-self: center;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--muted);
  transform-origin: 50% 50%;
  transition: transform .25s
}

.gasyr .faq-list details[open] summary:after {
  transform: rotate(45deg)
}

.gasyr .faq-list p {
  color: var(--muted);
  font-size: 16px;
  padding: 0 44px 28px 0;
  max-width: 750px
}

.gasyr .no-script {
  padding: 20px
}

.gasyr .case-dialog {
  position: fixed;
  border: 1px solid var(--line);
  padding: 0;
  border-radius: 18px;
  background: var(--bg);
  color: var(--text);
  width: min(1000px, calc(100% - 32px));
  max-height: 90svh;
  overflow: auto
}

.gasyr .case-dialog::backdrop {
  background: #101010d9;
  backdrop-filter: blur(8px)
}

.gasyr .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px
}

.gasyr .dialog-head .kicker {
  margin: 0
}

.gasyr .dialog-close {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 30px;
  width: 44px;
  height: 44px
}

.gasyr .dialog-body {
  padding: 30px
}

.gasyr .dialog-body h2 {
  font-size: 38px
}

.gasyr .dialog-body>p {
  font-size: 16px;
  color: var(--muted);
  max-width: 750px;
  margin: 20px 0
}

.gasyr .dialog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-block: 24px;
  font-size: 14px;
  color: var(--muted)
}

.gasyr .dialog-meta span {
  padding: 8px 0;
  border-top: 1px solid var(--line)
}

@media(min-width:1700px) {
  .gasyr {
    --gutter: 3vw
  }

  .gasyr .service {
    min-height: 405px
  }
}

@media(max-width:1100px) {
  .gasyr .nav {
    gap: 14px
  }

  .gasyr .service {
    padding: 28px 24px
  }

  .gasyr .service-glyph {
    width: 38px;
    right: 22px;
    top: 28px
  }

  .gasyr .service h3 {
    max-width: calc(100% - 52px);
    font-size: 24px
  }

  .gasyr .service-type {
    font-size: 12px
  }

  .gasyr .vision-copy>h2,
  .gasyr .vision-copy>.kicker {
    padding-inline: 24px
  }

  .gasyr .vision-principles>div {
    padding: 45px 24px 28px
  }

  .gasyr .vision-principles h3 {
    font-size: 23px
  }

  .gasyr .project-meta {
    width: 320px
  }

  .gasyr .project-meta h3 {
    font-size: 25px
  }
}

@media(max-width:850px) {
  .gasyr {
    --gutter: 24px
  }

  .gasyr .section {
    padding-block: 85px
  }

  .gasyr h1 {
    font-size: 48px
  }

  .gasyr .directions {
    grid-template-columns: 1fr
  }

  .gasyr .directions .section-top {
    grid-column: auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 24px
  }

  .gasyr .services {
    grid-column: auto
  }

  .gasyr .intro {
    grid-template-columns: 2fr 1fr;
    padding-block: 0 90px;
    gap: 28px
  }

  .gasyr .intro-main {
    grid-column: 1
  }

  .gasyr .intro-bottom {
    grid-column: 2;
    padding: 30px 0 0
  }

  .gasyr .intro h2 {
    font-size: 35px
  }

  .gasyr .vision {
    grid-template-columns: 2fr 1fr
  }

  .gasyr .vision-copy {
    grid-column: 1;
    min-height: 550px
  }

  .gasyr .vision-copy h2 {
    font-size: 31px
  }

  .gasyr .vision-media {
    grid-column: 2
  }

  .gasyr .vision-principles {
    grid-template-columns: 1fr
  }

  .gasyr .vision-principles>div {
    min-height: 0;
    padding: 24px
  }

  .gasyr .vision-principles>div+div {
    border-left: 0
  }

  .gasyr .vision-principles h3 {
    font-size: 23px;
    margin-bottom: 12px
  }

  .gasyr .vision-principles p {
    font-size: 14px
  }

  .gasyr .projects-lead {
    padding: 0
  }

  .gasyr .project-meta {
    padding: 20px;
    width: 260px
  }

  .gasyr .project-meta h3 {
    font-size: 23px
  }

  .gasyr .project-meta p {
    font-size: 12px
  }

  .gasyr .project-image {
    aspect-ratio: .85
  }

  .gasyr .project-wide .project-image {
    aspect-ratio: 1.8
  }

  .gasyr .budget,
  .gasyr .faq-layout {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .gasyr .budget .section-top {
    margin-bottom: 0
  }

  .gasyr .faq-side>p:not(.kicker) {
    max-width: 420px
  }

  .gasyr .brief-layout {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .gasyr .brief-intro {
    padding: 0
  }

  .gasyr .brief-intro>p:not(.kicker) {
    max-width: 500px
  }

  .gasyr .brief {
    padding: 0;
    min-height: 430px
  }
}

@media(max-width:540px) {
  .gasyr {
    --gutter: 20px;
    --gap: 12px
  }

  .gasyr .section {
    padding-block: 68px
  }

  .gasyr h2 {
    font-size: 34px;
    letter-spacing: -.045em
  }

  .gasyr h1 {
    font-size: clamp(31px, 8.7vw, 46px);
    line-height: var(--leading-subheading)
  }

  .gasyr .directions .section-top {
    display: block;
    margin-bottom: 24px
  }

  .gasyr .section-aside {
    margin-top: 22px;
    font-size: 14px
  }

  .gasyr .services {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .gasyr .service {
    min-height: 330px;
    padding: 28px
  }

  .gasyr .service:nth-child(2n) {
    margin-top: 0
  }

  .gasyr .service h3 {
    font-size: 28px;
    min-height: 60px;
    margin-bottom: 28px;
    max-width: calc(100% - 58px)
  }

  .gasyr .service-glyph {
    right: 28px;
    top: 30px;
    width: 44px
  }

  .gasyr .service>p:not(.service-type) {
    font-size: 14px
  }

  .gasyr .service-bottom>span {
    font-size: 12px
  }

  .gasyr .intro {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 0 74px
  }

  .gasyr .intro-main,
  .gasyr .intro-bottom {
    grid-column: auto
  }

  .gasyr .intro h2 {
    font-size: 33px
  }

  .gasyr .intro-bottom {
    padding: 0
  }

  .gasyr .intro-bottom p {
    font-size: 14px
  }

  .gasyr .vision {
    grid-template-columns: 1fr
  }

  .gasyr .vision-copy {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    padding-top: 32px
  }

  .gasyr .vision-copy h2 {
    font-size: 31px;
    padding: 0 22px 38px
  }

  .gasyr .vision-copy>.kicker {
    padding-inline: 22px
  }

  .gasyr .vision-principles {
    grid-template-columns: 1fr
  }

  .gasyr .vision-principles>div {
    padding: 30px 22px
  }

  .gasyr .vision-principles h3 {
    font-size: 25px
  }

  .gasyr .vision-media {
    grid-column: 1;
    grid-row: 2;
    border: 1px solid var(--line);
    height: 350px
  }

  .gasyr .vision-media img {
    border-radius: 20px;
    object-position: center
  }

  .gasyr .joint {
    width: 6px;
    height: 6px
  }

  .gasyr .joint-tl,
  .gasyr .joint-tr {
    top: -3px
  }

  .gasyr .joint-bl,
  .gasyr .joint-br {
    bottom: -3px
  }

  .gasyr .projects .section-top>div {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .gasyr .projects-lead {
    font-size: 14px
  }

  .gasyr .section-top {
    margin-bottom: 34px
  }

  .gasyr .filter {
    font-size: 12px;
    min-height: 44px;
    padding-inline: 12px
  }

  .gasyr .project-counter {
    width: 100%;
    margin: 8px 0 0
  }

  .gasyr .project-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .gasyr .project-wide {
    grid-column: auto
  }

  .gasyr .project-card {
    padding: 8px;
    border-radius: 20px
  }

  .gasyr .project-image,
  .gasyr .project-wide .project-image {
    aspect-ratio: .85
  }

  .gasyr .project-meta {
    left: 18px;
    top: 18px;
    width: 260px;
    max-width: calc(100% - 36px);
    padding: 20px
  }

  .gasyr .project-meta h3 {
    font-size: 26px
  }

  .gasyr .project-meta span {
    font-size: 12px
  }

  .gasyr .project-badge {
    bottom: 16px;
    left: 14px;
    font-size: 12px
  }

  .gasyr .project-open {
    bottom: 14px;
    right: 14px;
    width: 44px;
    height: 44px
  }

  .gasyr .projects-footer {
    display: block
  }

  .gasyr .projects-footer .text-link {
    margin-top: 14px
  }

  .gasyr .projects-footer p {
    font-size: 12px
  }

  .gasyr .budget-row {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .gasyr .budget-row h3 {
    font-size: 23px
  }

  .gasyr .budget-row p {
    font-size: 14px
  }

  .gasyr .budget-note {
    font-size: 14px
  }

  .gasyr .brief-section {
    margin-inline: 8px;
    padding-block: 36px;
    border-radius: 16px
  }

  .gasyr .brief-section>.shell {
    padding-inline: 18px
  }

  .gasyr .brief-intro h2 {
    font-size: 34px
  }

  .gasyr .brief-intro>p:not(.kicker) {
    font-size: 14px
  }

  .gasyr .brief {
    min-height: 440px
  }

  .gasyr .step h3 {
    font-size: 24px
  }

  .gasyr .options {
    gap: 10px
  }

  .gasyr .option {
    padding: 16px 12px;
    min-height: 105px
  }

  .gasyr .option strong {
    font-size: 14px
  }

  .gasyr .option small {
    font-size: 12px
  }

  .gasyr .faq-side h2 {
    font-size: 34px
  }

  .gasyr .faq-side {
    padding: 0
  }

  .gasyr .faq-list summary {
    font-size: 16px;
    min-height: 75px;
    padding-block: 22px
  }

  .gasyr .faq-list p {
    padding-right: 12px;
    font-size: 14px
  }

  .gasyr .dialog-body {
    padding: 24px
  }

  .gasyr .dialog-body h2 {
    font-size: 29px
  }

  .gasyr .dialog-head {
    padding: 10px 20px
  }

  .gasyr .dialog-meta {
    gap: 15px
  }
}

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

  .gasyr *,
  .gasyr *:before,
  .gasyr *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }

  .gasyr .drafting .joint {
    opacity: 1 !important;
    transform: none !important
  }
}

@media print {
  .gasyr {
    background: white;
    color: black;
    overflow: visible
  }

  .gasyr .section {
    padding-block: 30px
  }

  .gasyr p {
    color: inherit !important
  }
}

.gasyr :is(.service>p:not(.service-type), .intro-bottom p, .vision-principles p, .projects-lead, .budget-note, .budget-row p, .brief-intro>p:not(.kicker), .brief-result>p, .faq-side>p:not(.kicker), .faq-list p) {
  font-size: var(--body);
  line-height: var(--leading-copy)
}

.gasyr .button {
  font-size: var(--small);
  min-height: 56px;
  padding: 16px 22px;
  gap: 12px;
  border-radius: 6px;
  white-space: normal;
  letter-spacing: 0
}

.gasyr .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 22px;
  border: 1px solid #ffffff50;
  border-radius: 6px;
  color: var(--text);
  font-size: var(--small);
  transition: background .2s, color .2s
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .back:hover {
    background: var(--paper);
    color: var(--bg)
  }
}

.gasyr .brief-result .back {
  margin-top: 10px;
  width: 100%
}

.gasyr .service {
  padding: 36px;
  min-height: 415px
}

.gasyr .service-type {
  font-size: var(--meta);
  margin-bottom: 30px !important;
  max-width: calc(100% - 55px)
}

.gasyr .service h3 {
  font-size: clamp(26px, 2.15vw, 34px);
  line-height: var(--leading-subheading);
  letter-spacing: -.035em;
  min-height: 80px
}

.gasyr .service-glyph {
  width: 44px;
  height: 44px;
  right: 32px;
  top: 34px;
  opacity: .85;
  transform: none !important
}

.gasyr .service-glyph path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none
}

.gasyr .service-bottom>span {
  font-size: var(--meta);
  line-height: var(--leading-copy);
  margin-bottom: 24px
}

.gasyr .image-caption,
.gasyr .project-badge {
  font-size: var(--meta)
}

.gasyr .kicker {
  font-size: var(--meta)
}

.gasyr .project-meta {
  width: 400px
}

.gasyr .project-meta span,
.gasyr .project-meta p {
  font-size: var(--small);
  line-height: var(--leading-copy)
}

.gasyr .project-meta h3 {
  font-size: 30px;
  letter-spacing: -.035em
}

.gasyr .project-open {
  width: 56px;
  height: 56px;
  border-radius: 6px
}

.gasyr .project-grid {
  gap: var(--gap)
}

.gasyr .project-filters .filter {
  font-size: var(--small);
  min-height: 48px;
  border-radius: 6px
}

.gasyr .project-counter,
.gasyr .projects-footer p {
  font-size: var(--small)
}

.gasyr .vision-copy>h2 {
  font-size: clamp(36px, 3.4vw, 58px)
}

.gasyr .vision-principles h3 {
  font-size: 28px;
  letter-spacing: -.035em
}

.gasyr .vision-principles>div {
  padding-top: 42px;
  min-height: 260px
}

.gasyr .options {
  gap: 16px
}

.gasyr .option strong {
  font-size: 16px
}

.gasyr .option small {
  font-size: 14px
}

.gasyr .option {
  min-height: 112px
}

.gasyr .step h3,
.gasyr .brief-result h3 {
  font-size: 30px
}

.gasyr .brief-intro .brief-note {
  font-size: 14px !important
}

.gasyr .hint,
.gasyr .check {
  font-size: 14px
}

.gasyr .field {
  font-size: 14px
}

.gasyr .faq-list summary {
  font-size: 20px;
  min-height: 88px
}

.gasyr .dialog-close {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px
}

.gasyr .dialog-body>p {
  font-size: 16px
}

.gasyr .dialog-meta {
  font-size: 14px
}

.gasyr .grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap)
}

.gasyr .footer {
  padding-bottom: 32px;
  scroll-margin-top: 20px
}

.gasyr .footer-invitation {
  position: relative;
  min-height: 580px;
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 24px
}

.gasyr .footer-invitation>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%
}

.gasyr .footer-invitation:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10151030, transparent);
  pointer-events: none
}

.gasyr .footer-invitation-copy {
  position: relative;
  z-index: 1;
  background: #39342ec9;
  backdrop-filter: blur(22px);
  width: calc((100% - 2*var(--gap))/3 + 12px);
  min-width: 410px;
  padding: 38px 32px;
  border-radius: 14px;
  min-height: 552px;
  display: flex;
  align-items: flex-start;
  flex-direction: column
}

.gasyr .footer-invitation h2 {
  font-size: clamp(38px, 3.05vw, 54px);
  line-height: var(--leading-heading);
  letter-spacing: -.04em
}

.gasyr .footer-invitation h2 span {
  color: #d7dad5
}

.gasyr .footer-invitation-copy>p:not(.kicker) {
  font-size: 16px;
  line-height: var(--leading-copy);
  max-width: 390px;
  margin: 30px 0
}

.gasyr .footer-invitation-copy .button {
  margin-top: auto
}

.gasyr .footer-invitation .kicker {
  color: #d4d7d1
}

.gasyr .footer-image-caption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 22px;
  font-size: 12px;
  padding: 7px 10px;
  background: #1d1d1b9c;
  border-radius: 4px
}

.gasyr .footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 0
}

.gasyr .footer-cell {
  position: relative;
  border-left: 1px solid var(--line);
  padding: 40px 36px;
  min-width: 0;
  min-height: 345px;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.gasyr .footer-cell:last-child {
  border-right: 1px solid var(--line)
}

.gasyr .footer-cell:before,
.gasyr .footer-cell:after {
  content: "";
  position: absolute;
  left: -4px;
  width: 8px;
  height: 8px;
  background: #c3c3c3
}

.gasyr .footer-cell:before {
  top: -4px
}

.gasyr .footer-cell:after {
  bottom: -4px
}

.gasyr .footer-grid:before,
.gasyr .footer-grid:after {
  content: "";
  position: absolute;
  right: -4px;
  width: 8px;
  height: 8px;
  background: #c3c3c3;
  z-index: 2
}

.gasyr .footer-grid:before {
  top: -4px
}

.gasyr .footer-grid:after {
  bottom: -4px
}

.gasyr .footer-logo {
  width: 220px;
  height: auto;
  margin-bottom: 32px
}

.gasyr .footer-brand>p {
  font-size: 16px;
  line-height: var(--leading-copy);
  color: var(--muted)
}

.gasyr .footer-location {
  margin-top: auto;
  padding-top: 28px
}

.gasyr .footer-location span {
  font-size: 14px
}

.gasyr .footer-label {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px
}

.gasyr .footer-phone {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -.045em;
  white-space: nowrap;
  min-height: 44px
}

.gasyr .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px
}

.gasyr .footer-social .button {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 14px
}

.gasyr .footer-note {
  margin-top: auto;
  padding-top: 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: var(--leading-copy)
}

.gasyr .footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%
}

.gasyr .footer-nav a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-block: 4px;
  font-size: 16px;
  line-height: var(--leading-copy)
}

.gasyr .footer-legal {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 32px;
  margin-top: 20px;
  padding-block: 4px;
  font-size: 14px;
  line-height: var(--leading-copy);
  color: var(--muted)
}

@media (pointer: coarse) {
  .gasyr .footer-nav a,
  .gasyr .footer-legal {
    min-height: 44px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .footer-nav a:hover {
    color: var(--muted)
  }
}

.gasyr .footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  width: 100%;
  color: var(--muted);
  margin-top: auto;
  padding-top: 24px
}

.gasyr .footer-bottom a {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-height: 44px
}

/* Footer metadata shares one text baseline above the cell border. */
.gasyr .footer-brand > .footer-location,
.gasyr .footer-privacy,
.gasyr .footer-bottom {
  font-size: 14px;
  line-height: 20px;
}

@media(max-width:1100px) {
  .gasyr .service {
    padding: 28px
  }

  .gasyr .service-glyph {
    right: 24px;
    top: 28px;
    width: 38px;
    height: 38px
  }

  .gasyr .service h3 {
    font-size: 26px;
    max-width: calc(100% - 40px)
  }

  .gasyr .footer-cell {
    padding: 32px 24px
  }

  .gasyr .footer-logo {
    width: 190px
  }

  .gasyr .footer-phone {
    font-size: 26px
  }

  .gasyr .footer-invitation-copy {
    min-width: 380px
  }

  .gasyr .footer-invitation h2 {
    font-size: 42px
  }
}

@media(max-width:850px) {

  .gasyr .directions,
  .gasyr .intro,
  .gasyr .budget,
  .gasyr .brief-layout,
  .gasyr .faq-layout,
  .gasyr .projects .section-top>div,
  .gasyr .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px
  }

  .gasyr .directions .section-top,
  .gasyr .services,
  .gasyr .intro-main,
  .gasyr .intro-bottom,
  .gasyr .budget>.section-top,
  .gasyr .budget-main,
  .gasyr .brief-intro,
  .gasyr .brief,
  .gasyr .faq-side,
  .gasyr .faq-list,
  .gasyr .projects .section-top h2,
  .gasyr .projects-lead {
    grid-column: 1/-1
  }

  .gasyr .intro-bottom {
    padding: 0;
    max-width: 600px
  }

  .gasyr .intro-bottom p {
    max-width: 600px
  }

  .gasyr .brief-intro,
  .gasyr .faq-side {
    padding-right: 0
  }

  .gasyr .brief-section>.shell {
    padding-inline: calc(var(--gutter) - 13px)
  }

  .gasyr .brief-layout {
    gap: 40px
  }

  .gasyr .brief-intro>p:not(.kicker) {
    max-width: 570px
  }

  .gasyr .projects-lead {
    max-width: 500px
  }

  .gasyr .service {
    padding: 30px;
    min-height: 430px
  }

  .gasyr .service h3 {
    min-height: 90px
  }

  .gasyr .project-meta {
    width: calc(100% - 48px)
  }

  .gasyr .project-meta h3 {
    font-size: 28px
  }

  .gasyr .vision-copy>h2 {
    font-size: 36px
  }

  .gasyr .vision-principles>div {
    padding: 28px 24px
  }

  .gasyr .vision-principles h3 {
    font-size: 26px
  }

  .gasyr .vision-media img {
    border-radius: 20px
  }

  .gasyr .footer-invitation {
    min-height: 550px
  }

  .gasyr .footer-invitation-copy {
    width: 56%;
    min-width: 0;
    min-height: 522px;
    padding: 30px 26px
  }

  .gasyr .footer-invitation h2 {
    font-size: 37px
  }

  .gasyr .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .gasyr .footer-brand {
    grid-column: 1/-1;
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }

  .gasyr .footer-brand>a {
    grid-column: 1
  }

  .gasyr .footer-brand>p:not(.footer-location) {
    grid-column: 1
  }

  .gasyr .footer-location {
    grid-column: 2;
    grid-row: 1/3;
    padding-top: 0;
    align-self: center;
    margin: 0
  }

  .gasyr .footer-logo {
    margin-bottom: 0
  }

  .gasyr .footer-cell {
    padding: 30px 26px
  }

  .gasyr .footer-contacts,
  .gasyr .footer-navigation {
    min-height: 320px
  }

  .gasyr .footer-phone {
    font-size: 28px
  }

  .gasyr .footer-grid:before {
    display: none
  }
}

@media(max-width:540px) {
  .gasyr {
    --body: 16px;
    --small: 14px;
    --meta: 12px;
    --gap: 16px
  }

  .gasyr .service {
    min-height: 400px;
    padding: 30px 26px
  }

  .gasyr .service h3 {
    font-size: 29px;
    min-height: 76px;
    max-width: calc(100% - 46px)
  }

  .gasyr .service-glyph {
    width: 38px;
    height: 38px;
    top: 30px;
    right: 24px
  }

  .gasyr .service-type {
    font-size: 12px
  }

  .gasyr .service-bottom>span {
    font-size: 12px
  }

  .gasyr .intro h2,
  .gasyr h2 {
    font-size: 36px
  }

  .gasyr .vision-copy>h2 {
    font-size: 34px
  }

  .gasyr .vision-principles>div {
    padding: 30px 22px;
    min-height: 0
  }

  .gasyr .vision-principles p {
    font-size: 16px
  }

  .gasyr .image-caption {
    font-size: 11px;
    left: 12px;
    bottom: 12px
  }

  .gasyr .project-meta {
    width: calc(100% - 36px);
    padding: 20px
  }

  .gasyr .project-meta h3 {
    font-size: 27px
  }

  .gasyr .project-meta span,
  .gasyr .project-meta p {
    font-size: 13px
  }

  .gasyr .project-filters .filter {
    font-size: 13px;
    min-height: 46px;
    padding: 12px
  }

  .gasyr .project-counter {
    font-size: 13px
  }

  .gasyr .project-badge {
    font-size: 11px
  }

  .gasyr .projects-footer p {
    font-size: 14px
  }

  .gasyr .projects-footer>.button {
    margin-top: 20px
  }

  .gasyr .project-open {
    width: 48px;
    height: 48px
  }

  .gasyr .brief-section>.shell {
    padding-inline: 18px
  }

  .gasyr .brief-intro h2,
  .gasyr .faq-side h2 {
    font-size: 36px
  }

  .gasyr .step h3 {
    font-size: 26px
  }

  .gasyr .option {
    min-height: 116px;
    padding: 16px 12px
  }

  .gasyr .options {
    gap: 10px
  }

  .gasyr .option strong {
    font-size: 15px
  }

  .gasyr .option small {
    font-size: 13px
  }

  .gasyr .brief .button {
    font-size: 14px;
    min-height: 56px
  }

  .gasyr .back {
    font-size: 14px;
    padding-inline: 18px
  }

  .gasyr .faq-list summary {
    font-size: 18px;
    line-height: var(--leading-copy)
  }

  .gasyr .footer {
    padding-bottom: 100px
  }

  .gasyr .footer-invitation {
    min-height: 720px;
    padding: 10px;
    border-radius: 16px
  }

  .gasyr .footer-invitation>img {
    object-position: 64% center
  }

  .gasyr .footer-invitation-copy {
    width: 100%;
    min-height: 0;
    padding: 28px 22px;
    background: #39342ee0;
    backdrop-filter: blur(14px);
    border-radius: 10px
  }

  .gasyr .footer-invitation h2 {
    font-size: 36px
  }

  .gasyr .footer-invitation-copy>p:not(.kicker) {
    font-size: 16px;
    margin: 24px 0
  }

  .gasyr .footer-image-caption {
    font-size: 10px;
    right: 12px;
    bottom: 14px;
    left: 12px;
    text-align: center
  }

  .gasyr .footer-grid {
    grid-template-columns: 1fr
  }

  .gasyr .footer-brand {
    display: flex;
    gap: 0;
    grid-column: auto
  }

  .gasyr .footer-brand>a {
    margin-bottom: 24px
  }

  .gasyr .footer-location {
    margin-top: 24px;
    align-self: auto
  }

  .gasyr .footer-cell {
    border-right: 1px solid var(--line);
    padding: 32px 26px;
    min-height: 0
  }

  .gasyr .footer-contacts {
    border-bottom: 1px solid var(--line)
  }

  .gasyr .footer-phone {
    font-size: 29px
  }

  .gasyr .footer-logo {
    width: 210px
  }

  .gasyr .footer-note {
    padding-top: 24px
  }

  .gasyr .footer-social .button {
    font-size: 14px;
    padding: 14px 18px;
    min-height: 50px
  }

  .gasyr .footer-bottom {
    padding-top: 26px
  }

  .gasyr .footer-label {
    font-size: 14px
  }

  .gasyr .dialog-body h2 {
    font-size: 30px
  }
}

.gasyr .service h3 {
  max-width: 100%
}

@media(max-width:850px) {
  .gasyr .brief-layout {
    row-gap: 40px;
    column-gap: var(--gap)
  }

  .gasyr .footer-phone {
    font-size: clamp(22px, 3.6vw, 28px)
  }
}

@media(max-width:700px) {
  .gasyr .services {
    grid-template-columns: 1fr
  }

  .gasyr .service {
    min-height: 0
  }

  .gasyr .service h3 {
    min-height: 0;
    margin-bottom: 28px
  }
}

@media(max-width:540px) {
  .gasyr .footer-phone {
    font-size: 29px
  }

  .gasyr .footer-invitation h2 {
    font-size: clamp(29px, 8.8vw, 36px)
  }
}

.gasyr .hero {
  position: relative;
  isolation: isolate;
  margin: 12px;
  height: calc(100svh - 24px);
  height: calc(100dvh - 24px);
  min-height: 0;
  max-height: none;
  border-radius: 20px 20px 0 20px;
  overflow: visible;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg)
}

.gasyr .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  object-fit: cover;
  object-position: 60% center;
  z-index: -2
}

.gasyr .hero:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(90deg, #101b2470, transparent 85%), linear-gradient(0deg, #10161399, transparent 70%);
  pointer-events: none
}

.gasyr .header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px max(14px, calc(var(--gutter) - 12px))
}

.gasyr .logo {
  display: block;
  flex: none;
  width: 160px
}

.gasyr .logo img {
  width: 100%;
  height: auto
}

.gasyr .header-right {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 10px;
  background: linear-gradient(120deg, #ffffff20, #B28D600c), #24221e40;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px)
}

.gasyr .nav {
  display: flex;
  gap: 18px;
  padding-inline: 16px
}

.gasyr .nav a,
.gasyr .header-phone {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  white-space: nowrap;
  transition: color .2s
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .nav a:hover,
  .gasyr .header-phone:hover {
    color: var(--brand)
  }
}

.gasyr .header-phone {
  padding: 0 14px;
  font-size: 13px;
  min-height: 48px
}

.gasyr .header-cta {
  height: 48px;
  min-height: 48px;
  min-width: 138px;
  padding: 12px 14px;
  border-color: #ffffff1a;
  background: #1212120d;
  font-size: 12px;
  white-space: nowrap
}

.gasyr .header-cta:before {
  display: none
}

.gasyr .header-social,
.gasyr .menu-toggle {
  width: 46px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #ffffff1a;
  border-radius: 6px;
  background: #1212120d;
  color: var(--text);
  transition: background-color .2s
}

.gasyr .header-social svg,
.gasyr .menu-toggle svg {
  width: 21px;
  height: 21px
}

.gasyr .menu-toggle[aria-expanded=true] {
  background: var(--hover)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .header-social:hover,
  .gasyr .menu-toggle:hover {
    background: var(--hover)
  }
}

.gasyr .menu-toggle {
  display: none
}

.gasyr .mobile-nav {
  position: absolute;
  top: calc(100% - 8px);
  right: max(14px, calc(var(--gutter) - 12px));
  width: min(340px, calc(100% - 28px));
  padding: 16px;
  background: #292620f5;
  backdrop-filter: blur(20px);
  border: 1px solid #ffffff25;
  border-radius: 10px;
  box-shadow: 0 20px 40px #0004
}

.gasyr .mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .mobile-nav a:hover {
    background: var(--hover)
  }
}

.gasyr .hero-content {
  align-self: end;
  width: 66.666%;
  padding: 24px max(14px, calc(var(--gutter) - 12px)) 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 3dvh, 30px)
}

.gasyr .hero h1 {
  font-size: clamp(36px, min(4.7vw, 7dvh), 64px);
  line-height: 1.08;
  max-width: 100%;
  font-weight: 400;
  letter-spacing: -.04em
}

.gasyr .hero-copy {
  max-width: 440px;
  font-size: 16px;
  line-height: var(--leading-copy);
  color: #eeeeeb
}

.gasyr .hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.gasyr .hero-actions .button {
  min-height: 54px;
  font-size: 14px
}

.gasyr .hero-aside {
  position: absolute;
  isolation: isolate;
  bottom: 0;
  right: 0;
  width: 33.333%;
  padding: 24px 22px 18px;
  border-radius: 24px 0 0;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px
}

.gasyr .hero-aside::before {
  /* Overlap the clipped edge to avoid photo seams at fractional zoom levels. */
  content: "";
  position: absolute;
  inset: 0 -2px -2px 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--bg);
  pointer-events: none
}

.gasyr .hero-aside>div {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.gasyr .aside-symbol {
  width: 24px;
  height: 24px;
  flex: none
}

.gasyr .hero-aside p {
  font-size: 14px;
  line-height: var(--leading-copy);
  color: #c3c3c1
}

.gasyr .button-outline:focus-visible {
  background: var(--hover);
  color: var(--text);
  border-color: var(--hover)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .button-outline:hover {
    background: var(--hover);
    color: var(--text);
    border-color: var(--hover)
  }
}

@media(max-width:1199px) {
  .gasyr .nav {
    display: none
  }

  .gasyr .menu-toggle {
    display: grid
  }

  .gasyr .hero-aside {
    padding: 20px 18px 16px;
    gap: 16px 14px
  }

  .gasyr .hero-aside p {
    font-size: 13px
  }
}

@media(max-width:850px) {
  .gasyr .logo {
    width: 145px
  }

  .gasyr .hero {
    grid-template-rows: auto 1fr auto;
    height: auto;
    min-height: calc(100svh - 24px);
    min-height: calc(100dvh - 24px)
  }

  .gasyr .hero-content {
    width: 100%;
    padding-bottom: 24px
  }

  .gasyr .hero h1 {
    font-size: clamp(33px, 5vw, 44px)
  }

  .gasyr .hero-aside {
    position: relative;
    justify-self: end;
    width: 40%;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0
  }

  .gasyr .hero-aside>div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }

  .gasyr .hero-copy {
    font-size: 15px
  }

  .gasyr .hero-actions {
    flex-direction: row;
    align-items: stretch
  }
}

@media(max-width:600px) {
  .gasyr .hero {
    margin: 8px;
    height: auto;
    min-height: calc(100svh - 16px);
    min-height: calc(100dvh - 16px);
    border-radius: 16px 16px 0 16px;
    grid-template-rows: auto 1fr auto
  }

  .gasyr .header {
    padding: 12px;
    gap: 10px
  }

  .gasyr .logo {
    width: 140px
  }

  .gasyr .header-cta,
  .gasyr .header-instagram,
  .gasyr .header-phone {
    display: none
  }

  .gasyr .header-right {
    padding: 3px;
    gap: 3px
  }

  .gasyr .header-social,
  .gasyr .menu-toggle {
    height: 44px
  }

  .gasyr .hero-image {
    object-position: 57% center
  }

  .gasyr .hero-content {
    width: 100%;
    padding: 12px;
    gap: 16px
  }

  .gasyr .hero h1 {
    font-size: clamp(28px, min(8.3vw, 6.4dvh), 43px);
    line-height: 1.07
  }

  .gasyr .hero-copy {
    font-size: 14px;
    line-height: var(--leading-copy);
    max-width: 360px
  }

  .gasyr .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px
  }

  .gasyr .hero-actions .button {
    font-size: 12px;
    min-height: 50px;
    padding: 10px 9px;
    gap: 7px
  }

  .gasyr .hero-aside {
    position: relative;
    width: 50%;
    margin: 0;
    padding: 16px 14px 14px;
    border-radius: 18px 0 0;
    grid-template-columns: 1fr;
    gap: 16px
  }

  .gasyr .hero-aside>div {
    gap: 8px
  }

  .gasyr .aside-symbol {
    width: 20px;
    height: 20px
  }

  .gasyr .hero-aside p {
    font-size: 12px;
    line-height: var(--leading-copy)
  }
}

@media(max-height:650px) and (min-width:601px) {
  .gasyr .header {
    padding-block: 10px
  }

  .gasyr .hero-content {
    gap: 15px;
    padding-bottom: 20px
  }

  .gasyr .hero h1 {
    font-size: clamp(29px, 6.6dvh, 43px)
  }

  .gasyr .hero-copy {
    font-size: 14px
  }

  .gasyr .hero-actions .button {
    min-height: 48px
  }

  .gasyr .hero-aside {
    padding: 16px;
    gap: 12px
  }

  .gasyr .hero-aside>div {
    gap: 10px
  }
}

@media(max-height:590px) and (max-width:600px) {
  .gasyr .header {
    padding-block: 8px
  }

  .gasyr .hero-content {
    gap: 12px;
    padding-block: 8px
  }

  .gasyr .hero-aside {
    padding-top: 10px;
    gap: 9px
  }

  .gasyr .hero h1 {
    font-size: clamp(27px, 5.6dvh, 33px)
  }
}

@media(max-height:450px) {
  .gasyr .hero {
    height: auto;
    min-height: calc(100svh - 24px)
  }

  .gasyr .hero-content {
    padding-top: 30px
  }

  .gasyr .hero h1 {
    font-size: 30px
  }
}

.gasyr .back:focus-visible {
  background: var(--hover);
  color: var(--text);
  border-color: var(--hover)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .back:hover {
    background: var(--hover);
    color: var(--text);
    border-color: var(--hover)
  }
}

@media(min-width:601px) and (max-width:739px) {
  .gasyr .header-phone {
    display: none
  }
}

.gasyr .header-cta:focus-visible {
  background: var(--hover);
  border-color: #B28D6066;
  color: var(--text)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .header-cta:hover {
    background: var(--hover);
    border-color: #B28D6066;
    color: var(--text)
  }
}

.gasyr .process-overview {
  grid-column: span 8;
  min-width: 0;
  padding-right: clamp(24px, 5vw, 80px)
}

.gasyr .process-steps {
  grid-column: span 4;
  min-width: 0;
  align-self: start;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line)
}

.gasyr .process-copy {
  max-width: 550px;
  margin-top: 28px;
  font-size: 16px;
  color: var(--muted);
  line-height: var(--leading-copy)
}

.gasyr .process-photo {
  margin-top: 38px;
  position: relative;
  overflow: hidden;
  border-radius: 20px
}

.gasyr .process-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.65;
  object-fit: cover
}

.gasyr .process-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: #1d1d1bba;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 11px
}

.gasyr .process-step {
  position: relative;
  border-bottom: 1px solid var(--line)
}

.gasyr .process-step:before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  background: #bcbcbc;
  pointer-events: none
}

.gasyr .process-step:last-child:after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: #bcbcbc
}

.gasyr .process-step summary {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 20px;
  gap: 12px;
  padding: 25px 0 25px 22px;
  cursor: pointer;
  list-style: none;
  align-items: start
}

.gasyr .process-step summary::-webkit-details-marker {
  display: none
}

.gasyr .process-number {
  font-size: 12px;
  color: var(--muted);
  padding-top: 3px
}

.gasyr .process-step h3 {
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: var(--leading-subheading);
  letter-spacing: -.035em
}

.gasyr .process-step summary p {
  font-size: 14px;
  line-height: var(--leading-copy);
  color: var(--muted);
  margin-top: 10px
}

.gasyr .process-plus {
  width: 20px;
  height: 20px;
  transition: transform .25s, color .2s
}

.gasyr .process-step[open] .process-plus {
  transform: rotate(45deg)
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .process-step summary:hover .process-plus {
    color: #fff
  }
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .process-step summary:hover h3 {
    color: var(--brand)
  }
}

.gasyr .process-detail {
  padding: 0 32px 26px 59px;
  font-size: 14px;
  line-height: var(--leading-copy);
  color: var(--muted)
}

.gasyr .process-detail>p {
  color: var(--text);
  margin-bottom: 16px
}

.gasyr .process-detail ul {
  margin: 0;
  padding-left: 17px
}

.gasyr .process-detail li+li {
  margin-top: 8px
}

@media(min-width:1200px) and (min-height:800px) {
  .gasyr .process-sticky {
    position: sticky;
    top: 32px
  }

  .gasyr .process-overview {
    position: relative
  }

  .gasyr .process-photo img {
    max-height: 380px
  }
}

@media(max-width:1199px) {

  .gasyr .process-overview,
  .gasyr .process-steps {
    grid-column: span 6
  }

  .gasyr .process-overview {
    padding-right: 24px
  }

  .gasyr .process-step h3 {
    font-size: 21px
  }
}

@media(max-width:850px) {

  .gasyr .process-overview,
  .gasyr .process-steps {
    grid-column: 1/-1
  }

  .gasyr .process-overview {
    padding-right: 0
  }

  .gasyr .process-grid {
    row-gap: 38px
  }

  .gasyr .process-photo {
    max-width: 100%;
    margin-top: 26px
  }

  .gasyr .process-photo img {
    aspect-ratio: 1.8;
    max-height: 400px
  }

  .gasyr .process-step summary {
    padding: 24px 0 24px 20px;
    grid-template-columns: 26px minmax(0, 1fr) 24px;
    gap: 12px
  }

  .gasyr .process-step h3 {
    font-size: 23px
  }

  .gasyr .process-step summary p {
    font-size: 15px;
    max-width: 580px
  }

  .gasyr .process-detail {
    font-size: 15px;
    padding-left: 58px
  }

  .gasyr .process-copy {
    margin-top: 24px
  }

  .gasyr .process-photo figcaption {
    font-size: 10px
  }
}

@media(max-width:380px) {
  .gasyr .process-step h3 {
    font-size: 21px
  }

  .gasyr .process-step summary {
    padding-left: 14px;
    gap: 9px;
    grid-template-columns: 22px minmax(0, 1fr) 20px
  }

  .gasyr .process-detail {
    padding-left: 45px;
    padding-right: 10px
  }
}

.gasyr .process-step[open] .process-number,
.gasyr .process-step[open] .process-plus {
  color: var(--brand)
}

.gasyr .process-step[open]:before {
  background: var(--brand)
}

.gasyr .heading-word {
  display: inline-block;
  white-space: nowrap
}

.gasyr [data-heading-motion=pending] .heading-char {
  opacity: 0
}

.gasyr [data-heading-motion=playing] .heading-char {
  animation: gasyr-letter-in .4s ease both;
  animation-delay: var(--letter-delay, 0ms)
}

@keyframes gasyr-letter-in {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@media(prefers-reduced-motion:reduce) {
  .gasyr .heading-char {
    opacity: 1 !important;
    animation: none !important
  }
}

@media print {
  .gasyr .heading-char {
    opacity: 1 !important;
    animation: none !important
  }
}

.gasyr :is(h1, h2, h3) .heading-word,
.gasyr :is(h1, h2, h3) .heading-char {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0
}

.gasyr :is(h1, h2, h3) .heading-word {
  display: inline-block
}

.gasyr :is(h1, h2, h3) .heading-char {
  display: inline
}

html {
  scroll-behavior: smooth;
  background: #1d1d1b
}

body {
  margin: 0
}

.gasyr .hero-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 60%) center
}

.gasyr .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: var(--hero-focus, 60%) center;
  z-index: -2;
  opacity: 0;
  transition: opacity .45s
}

.gasyr .hero-video.is-playing {
  opacity: 1
}

.gasyr .hero-image {
  z-index: -3
}

.gasyr .video-control {
  position: absolute;
  right: 24px;
  top: 100px;
  z-index: 4;
  border: 1px solid #fff5;
  border-radius: 6px;
  background: #1d1d1baa;
  color: white;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13px
}

.preview-banner {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  padding: 14px 20px;
  background: #443a2e;
  color: #fff;
  font: 14px Arial;
  border: 1px solid #B28D60;
  border-radius: 8px
}

.preview-banner a {
  color: #fff;
  margin-left: 16px
}

.gasyr .bot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.gasyr .check a {
  text-decoration: underline
}

.gasyr .button[aria-busy=true] {
  opacity: .65;
  cursor: wait
}

@media(max-width:600px) {

  .gasyr .hero-image img,
  .gasyr .hero-video {
    object-position: var(--hero-mobile-focus, 57%) center
  }

  .gasyr .video-control {
    top: 86px;
    right: 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .gasyr .hero-video {
    transition: none
  }
}

/* Project photographs fill one reserved frame without stretching. */
html.case-open {
  overflow: hidden;
  scrollbar-gutter: stable
}

.gasyr .case-dialog {
  width: min(1160px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overscroll-behavior: contain
}

.gasyr .dialog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  border-bottom: 1px solid var(--line)
}

.gasyr .gallery-stage {
  height: auto;
  aspect-ratio: 16/9;
  position: relative;
  background: #121310;
  display: grid;
  place-items: center;
  touch-action: pan-y pinch-zoom
}

.gasyr .gallery-stage>img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transform: none
}

.gasyr .gallery-status {
  padding: 28px 70px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  max-width: 540px
}

.gasyr .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #77776b;
  background: #1d1d1bdd;
  color: var(--paper);
  border-radius: 50%;
  transition: background .2s, border-color .2s;
  z-index: 1
}

@media (hover: hover) and (pointer: fine) {
  .gasyr .gallery-arrow:hover {
    background: var(--hover);
    border-color: var(--brand)
  }
}

.gasyr .gallery-arrow svg {
  width: 22px;
  height: 22px
}

.gasyr .gallery-prev {
  left: 16px
}

.gasyr .gallery-next {
  right: 16px
}

.gasyr .gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  min-height: 64px
}

.gasyr .gallery-toolbar>p {
  color: var(--muted)
}

.gasyr .gallery-toolbar>div {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0
}

.gasyr [data-gallery-counter] {
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  min-width: 40px
}

.gasyr .gallery-thumbnails {
  display: flex;
  gap: 10px;
  padding: 16px 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) var(--panel)
}

.gasyr .gallery-thumb {
  flex: 0 0 88px;
  height: 64px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #121310;
  color: var(--text)
}

.gasyr .gallery-thumb[aria-pressed=true] {
  border: 2px solid var(--brand);
  padding: 2px
}

.gasyr .gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.gasyr .dialog-body {
  border-top: 1px solid var(--line);
  padding: 30px
}

.gasyr .dialog-body>p {
  white-space: pre-line
}

.gasyr [data-fit=contain]>img {
  object-fit: contain !important;
  object-position: center !important;
  background: #191a17;
  transform: none !important
}

.gasyr .project-card:has(.project-image[data-fit=contain]) .project-meta {
  position: static;
  width: 100%;
  max-width: none;
  background: transparent;
  backdrop-filter: none;
  padding: 24px 12px 14px
}

.gasyr .project-image[data-fit=contain] .project-badge {
  display: none
}

.gasyr .hero-image img {
  object-fit: var(--hero-fit, cover)
}

@media(max-width:600px) {
  .gasyr .case-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 12px
  }

  .gasyr .dialog-head {
    padding: 10px 16px
  }

  .gasyr .gallery-stage {
    height: auto;
    aspect-ratio: 4/3
  }

  .gasyr .gallery-arrow {
    width: 44px;
    height: 44px
  }

  .gasyr .gallery-prev {
    left: 8px
  }

  .gasyr .gallery-next {
    right: 8px
  }

  .gasyr .gallery-toolbar {
    padding: 10px 16px;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px
  }

  .gasyr .gallery-toolbar>div {
    justify-content: space-between;
    width: 100%
  }

  .gasyr .gallery-toolbar>p:empty {
    display: none
  }

  .gasyr .gallery-thumbnails {
    padding: 12px 16px
  }

  .gasyr .gallery-thumb {
    flex-basis: 76px;
    height: 56px
  }

  .gasyr .dialog-body {
    padding: 24px 18px
  }

  .gasyr .dialog-body h2 {
    font-size: 29px
  }
}

/* Touch feedback lasts only while pressed; selected and keyboard-focus states stay independent. */
@media (hover: none) {
  .gasyr .menu-toggle:active,
  .gasyr .header-social:active {
    background: var(--hover);
  }
  .gasyr .button:active,
  .gasyr .back:active {
    background: var(--hover);
    color: var(--text);
    border-color: var(--hover);
  }
}

.gasyr .projects-pagination { display: flex; justify-content: center; margin-top: 28px; }
.gasyr .projects-pagination:has([hidden]) { display: none; }
.gasyr .projects-empty { padding: 32px 0; color: var(--muted); }

/* Project specifications and brief instructions. */
.gasyr .case-facts {
  margin: 0 0 32px;
  border-top: 1px solid var(--line);
}
.gasyr .case-facts > div {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(0, 1.2fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.gasyr .case-facts dt {
  color: var(--muted);
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gasyr .case-facts dd {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.gasyr .step:has(.step-hint) h3 { margin-bottom: 12px; }
.gasyr .step-hint {
  color: var(--muted);
  font-size: var(--small);
  margin-bottom: 24px;
}
.gasyr .footer-privacy {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
@media (max-width: 480px) {
  .gasyr .case-facts > div {
    grid-template-columns: minmax(110px, .85fr) minmax(0, 1.15fr);
    gap: 16px;
    padding-block: 16px;
  }
}