.home-hero {
  position: relative;
  display: grid;
  min-height: min(88svh, 58rem);
  align-items: end;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-4)) 0 var(--space-4);
  isolation: isolate;
}

.home-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65) brightness(0.62);
}

.home-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 7 8 / 96%) 0%, rgb(5 7 8 / 68%) 53%, rgb(5 7 8 / 20%) 100%),
    linear-gradient(0deg, rgb(5 7 8 / 88%) 0%, transparent 65%);
  content: "";
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.55fr);
  align-items: end;
  gap: var(--space-4);
}

.home-hero__content { display: grid; gap: var(--space-3); }
.home-hero__content .display { max-width: 10.5ch; }
.home-hero__aside { display: grid; gap: 1.25rem; justify-items: start; padding-right: 4rem; padding-left: var(--space-3); border-left: 1px solid var(--color-line); }
.home-hero__aside p { max-width: 34rem; color: #dedad2; font-size: clamp(1rem, 1vw + 0.6rem, 1.3rem); }
.home-hero__logo { width: clamp(11.25rem, 15vw, 15rem); height: auto; filter: drop-shadow(0 16px 30px rgb(0 0 0 / 36%)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-hero__note { position: absolute; top: 50%; right: 1rem; transform: rotate(90deg) translateX(50%); transform-origin: right center; color: rgb(255 255 255 / 48%); font-size: 0.59rem; letter-spacing: 0.18em; text-transform: uppercase; }

.home-areas { padding-block: clamp(2.2rem, 4vw, 4.5rem); background: var(--color-obsidian); }
.area-panels { display: grid; min-height: 31rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.area-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-soft); isolation: isolate; transition: transform 240ms var(--ease-out), border-color 240ms ease, box-shadow 240ms ease; }
.area-panel:hover, .area-panel:focus-within, .area-panel.is-active { transform: translateY(-4px); border-color: rgb(185 154 89 / 65%); box-shadow: 0 22px 50px rgb(0 0 0 / 30%); }
.area-panel__image { position: absolute; z-index: -2; inset: -1%; width: 102%; height: 102%; object-fit: cover; filter: saturate(0.68) brightness(0.56); transition: transform 260ms var(--ease-out), filter 240ms ease; }
.area-panel::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 91%), transparent 72%); content: ""; }
.area-panel:hover .area-panel__image, .area-panel:focus-within .area-panel__image { transform: scale(1.015); filter: saturate(0.8) brightness(0.66); }
.area-panel__link { display: grid; min-height: 31rem; align-content: end; justify-items: center; padding: var(--space-3); text-align: center; }
.area-panel h2 { max-width: 16ch; margin: 0.65rem 0 0.75rem; font-family: var(--font-display); font-size: clamp(1.9rem, 2.8vw, 3.65rem); letter-spacing: -0.05em; line-height: 0.92; text-transform: uppercase; }
.area-panel p { max-width: 28rem; color: #d2cec6; font-size: 0.8rem; }
.area-panel__action { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--color-line); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.solution-card { position: relative; display: grid; min-height: 25rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-graphite); box-shadow: var(--shadow-soft); isolation: isolate; transition: transform 240ms var(--ease-out), border-color 240ms ease, box-shadow 240ms ease; }
.solution-card__media { position: absolute; z-index: -2; inset: 0; }
.solution-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.68) brightness(0.52); transition: transform 260ms var(--ease-out), filter 240ms ease; }
.solution-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 92%), transparent 74%); content: ""; }
.solution-card__body { align-self: end; display: grid; justify-items: center; gap: 0.7rem; padding: var(--space-3); text-align: center; }
.solution-card h3 { max-width: 13ch; font-family: var(--font-display); font-size: clamp(1.75rem, 2.3vw, 3rem); letter-spacing: -0.04em; line-height: 0.96; text-transform: uppercase; }
.solution-card p { max-width: 28rem; color: #d1cdc5; font-size: 0.78rem; }
.solution-card:hover, .solution-card:focus-within { transform: translateY(-4px); border-color: rgb(185 154 89 / 65%); box-shadow: 0 22px 50px rgb(0 0 0 / 30%); }
.solution-card:hover img, .solution-card:focus-within img { transform: scale(1.015); filter: saturate(0.82) brightness(0.62); }

.section--action { background: linear-gradient(135deg, #181713, #0d1011 62%); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; }
.work-card { display: flex; height: 100%; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid rgb(185 154 89 / 42%); border-radius: var(--radius); background: var(--color-carbon); box-shadow: var(--shadow-soft); transition: transform 230ms var(--ease-out), border-color 230ms ease; }
.work-card:hover { transform: translateY(-3px); border-color: var(--color-gold); }
.work-card__media { height: clamp(420px, 38vw, 570px); overflow: hidden; flex: 0 0 auto; }
.work-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.work-card:nth-child(3) .work-card__media img { object-position: center top; }
.work-card__body { display: flex; min-height: 130px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; padding: 1.25rem; text-align: center; }
.work-card__body span { color: var(--color-gold-light); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.work-card__body h3 { display: flex; min-height: 2em; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(1.7rem, 2.5vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.section-action { margin-top: 1.35rem; }

.featured-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.featured-card { position: relative; min-height: 21rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-soft); isolation: isolate; transition: transform 240ms var(--ease-out), border-color 240ms ease; }
.featured-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) brightness(0.68); transition: transform 240ms var(--ease-out); }
.featured-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 88%), transparent 68%); content: ""; }
.featured-card__body { position: absolute; right: 0; bottom: 0; left: 0; display: grid; justify-items: center; padding: var(--space-3); text-align: center; }
.featured-card__body span { color: var(--color-gold-light); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.featured-card h3 { margin-top: 0.45rem; font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 3rem); letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; }
.featured-card:hover { transform: translateY(-4px); border-color: rgb(185 154 89 / 65%); }
.featured-card:hover img { transform: scale(1.015); }

.values-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.value-card { display: grid; min-height: 15rem; align-content: center; justify-items: center; gap: 0.9rem; padding: 1.6rem 1.25rem; border: 1px solid var(--color-line-dark); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 28px rgb(8 10 11 / 8%); text-align: center; transition: transform 230ms var(--ease-out), border-color 230ms ease, box-shadow 230ms ease; }
.value-card:hover { transform: translateY(-3px); border-color: rgb(142 115 62 / 55%); box-shadow: 0 16px 34px rgb(8 10 11 / 12%); }
.value-card__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border: 1px solid rgb(142 115 62 / 45%); border-radius: 50%; color: #8e733e; }
.value-card__icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.value-card h3 { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.value-card p { color: #58544e; font-size: 0.75rem; line-height: 1.5; }

.home-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: clamp(2.7rem, 5vw, 5.5rem); }
.home-contact h2 { max-width: 15ch; margin-top: 0.8rem; font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 6.5rem); letter-spacing: -0.055em; line-height: 0.9; text-transform: uppercase; }
.home-contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }