.home-top {
  padding-block: 23px 18px;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr);
  align-items: center;
  gap: clamp(16px,4vw,54px);
  padding: clamp(20px,3vw,40px);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.hero h1 {
  margin-block: 4px 5px;
  font-size: clamp(2.25rem,4.5vw,4rem);
  font-weight: 610;
  letter-spacing: -.025em;
}
.hero-lead {
  color: var(--on-dark);
  font-size: clamp(1.05rem,2vw,1.36rem);
  font-weight: 560;
}
.hero-description {
  margin-block-start: 5px;
  color: var(--muted-on-dark);
}
.hero-illustration {
  position: relative;
  display: grid;
  place-items: center;
  block-size: clamp(120px,16vw,173px);
  overflow: hidden;
  border-inline-start: 1px solid var(--glass);
}
.hero-art {
  inline-size: min(100%,355px);
  max-block-size: 100%;
  object-fit: contain;
}
.hero-illustration span {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 12px;
  color: var(--muted-on-dark);
  font-size: .75rem;
}
.projects-section {
  padding-block: clamp(32px,5vw,61px);
  border-block: 1px solid var(--line);
  background: var(--soft);
}
.home-showcase {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.home-project-lead,.featured-product,.gallery-product {
  min-inline-size: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.home-project-lead {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.home-project-lead>div {
  padding: 16px;
}
.home-project-lead h3 {
  margin-block: 3px 6px;
}
.home-project-lead p:not(.mini-label) {
  color: var(--muted);
  font-size: .92rem;
}
.home-project-lead .product-media {
  block-size: clamp(144px,18vw,200px);
}
.ecosystem-strip a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-block-size: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--canvas);
  padding: 8px 10px;
}
.ecosystem-strip a:hover {
  background: var(--soft);
  border-color: var(--line-strong);
}
.ecosystem-strip a:active {
  background: var(--selected);
}
.ecosystem-strip .icon {
  inline-size: 16px;
  block-size: 16px;
}
.ecosystem-strip a>.icon:last-child {
  margin-inline-start: auto;
  color: var(--teal);
}
.ecosystem-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-block-start: 14px;
}
.ecosystem-strip a {
  font-size: .875rem;
  color: var(--teal);
  font-weight: 560;
}
.work-method {
  padding-block: 28px;
}
.work-steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.work-steps li {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
}
.work-steps h3 {
  margin-block: 8px 4px;
  font-size: 1rem;
}
.work-steps p {
  color: var(--muted);
  font-size: .9rem;
}
.portfolio-intro {
  padding-block-start: 22px;
}
.portfolio-banner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 25px;
  padding: clamp(23px,4vw,54px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.portfolio-banner h1,.detail-project h1 {
  margin-block: 5px 8px;
  font-size: clamp(2rem,4.8vw,3.7rem);
  font-weight: 610;
}
.portfolio-banner p:not(.eyebrow) {
  max-inline-size: 56ch;
  color: var(--muted-on-dark);
}
.portfolio-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}
.portfolio-totals div {
  display: grid;
  align-content: center;
  min-inline-size: 94px;
  min-block-size: 80px;
  padding: 9px 13px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-control);
  background: var(--glass);
}
.portfolio-totals dt {
  color: var(--muted-on-dark);
  font-size: .78rem;
}
.portfolio-totals dd {
  grid-row: 1;
  margin: 0;
  color: var(--on-dark);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.portfolio-content {
  padding-block-start: 20px;
}
.portfolio-content .filters {
  margin-block-end: 8px;
}
.portfolio-key {
  color: var(--muted);
  font-size: .81rem;
  margin-block: 4px 18px;
}
.portfolio-gallery {
  display: grid;
  gap: clamp(25px,4vw,45px);
}
.portfolio-gallery h2 {
  font-size: clamp(1.375rem,2.6vw,2rem);
  margin-block-end: 10px;
}
.featured-grid,.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.featured-product,.gallery-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-media {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  align-items: center;
  justify-items: center;
  min-inline-size: 0;
  gap: 8px;
  padding: clamp(10px,2vw,18px);
  background: var(--soft);
}
.product-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  min-block-size: 0;
}
.featured-product .product-media {
  block-size: clamp(170px,19vw,240px);
  background: var(--brand-gradient);
}
.product-media figcaption {
  color: var(--muted);
  font-size: .75rem;
  text-align: center;
}
.featured-product .product-media figcaption {
  color: var(--muted-on-dark);
}
.feature-body,.gallery-product-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 7px;
  padding: clamp(13px,2vw,23px);
}
.feature-body h3 {
  font-size: clamp(1.3rem,2.6vw,1.85rem);
}
.feature-body p,.gallery-product-body p {
  color: var(--muted);
  font-size: .94rem;
}
.product-meta,.gallery-product-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 11px;
}
.product-meta {
  color: var(--teal);
  font-size: .82rem;
  font-weight: 560;
}
.portfolio-content .publication,.detail-project .publication {
  font-size: .75rem;
}
p.product-line {
  color: var(--ink);
  font-weight: 560;
}
p.product-audience {
  color: var(--ink);
  font-size: .81rem;
  font-weight: 560;
}
.capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-block: 3px 4px;
}
.capabilities li {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-size: .78rem;
  background: var(--soft);
}
.feature-body .button,.gallery-product-body .product-actions {
  margin-block-start: auto;
}
.portfolio-group {
  border-block-start: 1px solid var(--line);
  padding-block-start: 15px;
}
.portfolio-group-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-end: 13px;
}
.portfolio-group-head>.icon {
  inline-size: 35px;
  block-size: 35px;
  padding: 7px;
  border-radius: var(--radius-control);
  background: var(--soft);
  color: var(--teal);
}
.portfolio-group-head h2 {
  margin-block-end: 3px;
}
.portfolio-group-head p {
  color: var(--muted);
  font-size: .9rem;
}
.gallery-product h3 {
  font-size: 1.25rem;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.review-product .publication {
  white-space: normal;
}
.review-product .product-media {
  block-size: 180px;
}
.review-product .button {
  margin-block-start: auto;
}
.editorial-media {
  display: grid;
  align-content: center;
  gap: 12px;
  min-block-size: 132px;
  padding: 16px;
}
.editorial-media>div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.25rem,2.6vw,2.25rem);
  line-height: 1.2;
}
.editorial-media .icon {
  color: var(--accent-text);
}
.editorial-media .product-en,.editorial-media figcaption {
  color: var(--accent-text);
}
.editorial-media figcaption {
  font-size: .75rem;
}
.detail-project .editorial-media {
  border-radius: var(--radius-panel);
}
.gallery-product--visual .product-media {
  max-block-size: 180px;
  border-block-end: 1px solid var(--line);
}
.gallery-product--brand {
  display: grid;
  grid-template-columns: minmax(105px,.43fr) minmax(0,1fr);
}
.gallery-product--brand .product-media {
  align-content: center;
  block-size: 100%;
  max-block-size: none;
  grid-template-rows: auto auto;
  border: 0;
  border-inline-end: 1px solid var(--line);
}
.product-media--brand img {
  max-inline-size: 105px;
  block-size: auto;
  border-radius: var(--radius-panel);
}
.detail-project {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(16px,3vw,30px);
  padding: clamp(15px,3vw,34px);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.detail-lead {
  align-self: center;
}
.detail-lead p+p {
  margin-block-start: 7px;
}
.detail-project .product-media {
  border-radius: var(--radius-control);
  max-block-size: 295px;
}
.detail-description {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  border-block-start: 1px solid var(--line);
  padding-block-start: 16px;
}
.detail-description h2 {
  font-size: 1.18rem;
  margin-block-end: 4px;
}
.detail-description p {
  color: var(--muted);
  font-size: .94rem;
}
.detail-back {
  margin-block: 8px 22px;
}
@media (max-width:950px){
  .review-grid,.work-steps {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .gallery-product--brand {
    grid-template-columns: 1fr;
  }
  .gallery-product--brand .product-media {
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
  }
  .product-media--brand img {
    max-inline-size: 68px;
  }
}
@media (max-width:620px){
  .home-top {
    padding-block: 12px 11px;
  }
  .hero {
    display: block;
    padding: 13px 14px;
    border-radius: var(--radius-panel);
  }
  .hero .eyebrow,.hero h1 {
    padding-inline-end: 62px;
  }
  .hero h1 {
    font-size: 1.94rem;
    margin-block: 2px 4px;
  }
  .hero-lead {
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero-description {
    font-size: .875rem;
    line-height: 1.55;
  }
  .hero-illustration {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-end: 13px;
    inline-size: 54px;
    block-size: 54px;
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-control);
    background: var(--glass);
  }
  .hero-art {
    inline-size: 68px;
    max-inline-size: none;
  }
  .hero-illustration span {
    display: none;
  }
  .home-showcase,.featured-grid,.portfolio-grid,.review-grid,.detail-project,.detail-description {
    grid-template-columns: minmax(0,1fr);
  }
  .ecosystem-strip {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .ecosystem-strip a {
    padding: 7px;
    gap: 5px;
  }
  .ecosystem-strip a>.icon:last-child {
    display: none;
  }
  .portfolio-intro {
    padding-block-start: 9px;
  }
  .portfolio-banner {
    grid-template-columns: minmax(0,1fr);
    gap: 11px;
    padding: 15px;
    border-radius: var(--radius-panel);
  }
  .portfolio-banner h1,.detail-project h1 {
    font-size: 1.94rem;
  }
  .portfolio-totals div {
    display: flex;
    align-items: center;
    gap: 7px;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 5px 8px;
  }
  .portfolio-totals dd {
    order: -1;
    font-size: 1.1rem;
  }
  .portfolio-content {
    padding-block-start: 13px;
  }
  .portfolio-content .filters button {
    font-size: .875rem;
  }
  .feature-body p,.gallery-product-body p,.detail-description p {
    font-size: .875rem;
  }
  .gallery-product h3,.home-project-lead h3 {
    font-size: 1rem;
  }
  .feature-body .product-audience,.gallery-product-body .product-audience {
    font-size: .8rem;
  }
  .featured-product .product-media {
    block-size: 162px;
  }
}
@media (max-width:355px){
  .hero h1,.portfolio-banner h1,.detail-project h1 {
    font-size: 1.75rem;
  }
  .hero-illustration {
    inline-size: 47px;
    block-size: 47px;
  }
}