/* GROMKO: align the existing screens, keep original content and photographs. */
.gromko-preview {
  --gd-pad: clamp(24px, 5vw, 72px);
  --gd-display-size: clamp(42px, 5.1vw, 74px);
  --refine-border: #ffffff26;
  --refine-text: #c9c9c9;
}
.gromko-preview :is(.engineering, .projects, .services-overview, .team-section, .contacts-section) {
  padding: 48px var(--gd-pad) 64px;
  background-color: #080808;
  border-top: 1px solid var(--refine-border);
}
.gromko-preview :is(.engineering, .projects, .services-overview, .team-section) {
  background-image: radial-gradient(ellipse at 0 0, #ffffff04, transparent 65%);
}
.gromko-preview :is(.hero header, .section-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.gromko-preview .section-header {
  margin: 0 0 60px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--refine-border);
}
.gromko-preview :is(.hero header, .section-header) .brand {
  display: block;
  flex: 0 0 168px;
  width: 168px;
  max-width: 168px;
}
.gromko-preview :is(.hero header, .section-header) nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  max-width: none;
  font: 500 12px/1.5 Manrope, Arial, sans-serif;
  letter-spacing: .055em;
}
.gromko-preview :is(.hero header, .section-header) nav a {
  display: inline-flex;
  color: #ececec;
  padding: 9px 0;
}
.gromko-preview .about {
  min-height: 860px;
  height: auto;
  padding-bottom: 78px;
  background: #080808;
}
.gromko-preview .about .section-header {
  width: auto;
  margin: 0 var(--gd-pad);
  padding: 48px 0 24px;
}
.gromko-preview .about > .photo {
  left: auto;
  right: 0;
  width: 68%;
  opacity: 1;
  filter: brightness(.72) saturate(.9);
  object-position: 35% center;
}
.gromko-preview .about > .veil {
  background: linear-gradient(270deg, #0808081a 0%, #08080845 24%, #080808d9 43%, #080808f5 60%, #080808 100%);
}
.gromko-preview .about-body {
  width: calc((100% - 2 * var(--gd-pad)) * .58);
  margin: 64px auto 62px var(--gd-pad);
  padding: 0;
}
.gromko-preview .about h2 {
  font-size: var(--gd-display-size);
  line-height: 1.03;
  margin-bottom: 28px;
}
.gromko-preview .about h1.seo-proposition {
  color: var(--refine-text);
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 640px;
}
.gromko-preview .about .stats {
  margin-bottom: 36px;
  padding-top: 24px;
  gap: 28px;
}
.gromko-preview .about .stat b { font-size: clamp(32px, 3.2vw, 46px); }
.gromko-preview .about .stat small { font-size: 10px; color: #bdbdbd; }
.gromko-preview .about .about-foot.service-marquee {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 72px;
}
.gromko-preview :is(.engineering-top, .projects-heading, .services-heading, .team-section .closing-heading) {
  width: 58%;
  margin: 0 0 42px;
  text-align: left;
}
.gromko-preview .engineering-top > div:first-child { display: block; }
.gromko-preview .projects-heading > div:first-child { display: block; }
.gromko-preview .projects-heading p { width: 100%; max-width: 620px; }
.gromko-preview .engineering .engineering-top .summary { width: 100%; margin: 18px 0 0; }
.gromko-preview :is(.engineering h2.engineering-title, .projects h2, .services h2, .closing-heading h2) {
  font-size: var(--gd-display-size);
  line-height: 1.06;
  margin-bottom: 22px;
  letter-spacing: -.055em;
}
.gromko-preview .engineering .engineering-subtitle {
  display: block;
  margin-top: 18px;
  max-width: 520px;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.35;
  color: #c9c9c9;
  letter-spacing: -.025em;
}
.gromko-preview :is(.projects-heading p, .engineering-top .summary) {
  font-size: 17px;
  color: var(--refine-text);
  line-height: 1.6;
  max-width: 620px;
}
.gromko-preview .engineering-bottom { gap: 42px; align-items: start; }
.gromko-preview .engineering .step {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--refine-border);
}
.gromko-preview .engineering .step h3 { margin: 0 0 10px; font-size: 24px; }
.gromko-preview .engineering .step p { color: var(--refine-text); line-height: 1.65; font-size: 16px; }
.gromko-preview .engineering .end, .gromko-preview .projects-close { display: none; }
.gromko-preview .project-grid { gap: 32px; }
.gromko-preview .project, .gromko-preview .service-card {
  border: 1px solid var(--refine-border);
  background: linear-gradient(150deg, #141414, #0c0c0c);
  box-shadow: none;
  transition: border-color .25s, background .25s;
}
.gromko-preview .project:hover, .gromko-preview .service-card:hover {
  transform: none;
  border-color: #ffffff70;
  box-shadow: none;
}
.gromko-preview .project-copy { padding: 24px; }
.gromko-preview .project-copy h3 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.22; margin-bottom: 14px; }
.gromko-preview .project-description { font-size: 15px; line-height: 1.65; color: var(--refine-text); }
.gromko-preview .project-date { font-size: 12px; color: #a7a7a7; }
.gromko-preview .project-label { background: linear-gradient(0deg, #0009, transparent); }
.gromko-preview .service-card-copy { padding: 26px; }
.gromko-preview .service-card h3 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.2; min-height: 2.4em; margin-bottom: 22px; }
.gromko-preview .service-card p { font-size: 15px; color: var(--refine-text); line-height: 1.65; }
.gromko-preview .service-card-link { color: #f1f1f1; border-color: var(--refine-border); }
.gromko-preview :is(.outline, .projects-more button, .contacts-call) {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 58px;
  padding: 16px 24px;
  border: 1px solid #ffffff40;
  border-radius: 2px;
  background: linear-gradient(120deg, #1a1a1a, #111);
  color: #f1f1f1;
  font: 500 12px/1.4 Manrope, Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: background .2s, border-color .2s;
}
.gromko-preview :is(.outline, .projects-more button, .contacts-call):hover {
  background: #252525;
  border-color: #a7a7a7;
  box-shadow: none;
  transform: none;
}
.gromko-preview .outline { min-width: 224px; }
.gromko-preview .about .outline { min-width: 224px; padding: 16px 24px; gap: 32px; }
.gromko-preview .projects-more { margin-top: 36px; }
.gromko-preview .projects-more button { width: min(100%, 420px); }
.gromko-preview .team-grid { list-style: none; padding: 0; gap: 28px; }
.gromko-preview .team-more .team-toggle span { display: none; }
.gromko-preview .team-member { border-top: 0; }
.gromko-preview .team-member h3 { font-size: 23px; line-height: 1.25; }
.gromko-preview .team-member p { color: var(--refine-text); font-size: 14px; line-height: 1.6; }
.gromko-preview .team-photo-slot { border-color: var(--refine-border); background: linear-gradient(145deg, #1b1b1b, #0d0d0d); }
.gromko-preview .contacts-content { position: relative; z-index: 2; width: 58%; margin-left: 0; margin-right: auto; text-align: left; }
.gromko-preview .contacts-section .closing-heading { display: block; width: 100%; margin-bottom: 34px; }
.gromko-preview .contacts-content .closing-heading > div:first-child { display: block; margin: 0; }
.gromko-preview .contacts-content .closing-heading h2 { width: 100%; margin: 0; }
.gromko-preview .contacts-content .contacts-body { padding: 0; }
.gromko-preview .contacts-content .contacts-details { display: grid; gap: 26px; width: 100%; max-width: none; }
.gromko-preview .contacts-content .contacts-phone, .gromko-preview .contacts-content .contacts-address { margin: 0; padding: 0; width: 100%; }
.gromko-preview .contacts-content .contacts-phone > span:first-child, .gromko-preview .contacts-content .contacts-address > span { display: block; margin: 0 0 12px; }
.gromko-preview .contacts-content .contacts-address p { margin: 0; }
.gromko-preview .contacts-details .contacts-call { min-width: 0; width: 100%; max-width: none; margin: 0; }
.gromko-preview .contacts-details .contact-messengers { margin: 0; }
.gromko-preview .contacts-backdrop { z-index: 0; left: auto; right: 0; width: 70%; opacity: .7; filter: grayscale(.6) brightness(.8); object-position: 25% center; }
.gromko-preview .contacts-scrim { z-index: 1; pointer-events: none; background: linear-gradient(270deg, #08080825, #08080880 30%, #080808ee 54%, #080808 84%); }
.gromko-preview .contacts-phone strong { font-size: clamp(30px, 3.3vw, 46px); font-weight: 400; letter-spacing: -.035em; }
.gromko-preview .contacts-address p { font-size: 24px; line-height: 1.5; }
.gromko-preview .contacts-call { min-width: 260px; margin-top: 30px; max-width: 420px; width: 100%; }
.gromko-preview .contact-messengers { margin-top: 22px; gap: 12px; }
.gromko-preview .messenger-icon { width: 46px; height: 46px; background: #111; border-color: #ffffff40; }
.gromko-preview .home-footer { z-index: 2; margin-top: 36px; padding-top: 22px; }
@media(min-width: 1001px) {
  .gromko-preview .engineering {
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
    column-gap: 42px;
  }
  .gromko-preview .engineering > .section-header { grid-column: 1 / -1; }
  .gromko-preview .engineering > .engineering-top { grid-column: 1; width: 100%; margin: 0 0 24px; }
  .gromko-preview .engineering-bottom { display: contents; }
  .gromko-preview .engineering .approach-carousel { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: center; box-shadow: none; border: 1px solid var(--refine-border); }
  .gromko-preview .engineering .approach-stage { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .gromko-preview .engineering .approach-slide.is-photo img { object-fit: cover; }
  .gromko-preview .engineering .steps { grid-column: 1; }
}
@media(max-width: 1000px) {
  .gromko-preview :is(.hero header, .section-header) nav { gap: 18px; font-size: 11px; }
  .gromko-preview :is(.hero header, .section-header) .brand { flex-basis: 144px; width: 144px; max-width: 144px; }
  .gromko-preview .engineering-bottom { gap: 28px; }
}
@media(max-width: 760px) {
  .gromko-preview { --gd-display-size: clamp(34px, 8.6vw, 52px); }
  .gromko-preview :is(.engineering, .projects, .services-overview, .team-section, .contacts-section) { padding: 30px 24px 44px; }
  .gromko-preview :is(.hero header, .section-header) { gap: 18px; }
  .gromko-preview .section-header { margin-bottom: 34px; padding-bottom: 22px; }
  .gromko-preview :is(.hero header, .section-header) .brand { flex-basis: 126px; width: 126px; max-width: 126px; }
  .gromko-preview :is(.hero header, .section-header) nav { gap: 5px 16px; font-size: 9px; flex-wrap: wrap; }
  .gromko-preview .about { min-height: 0; padding-bottom: 72px; }
  .gromko-preview .about .section-header { padding-top: 30px; }
  .gromko-preview .about-body { width: auto; margin: 42px 24px 48px; }
  .gromko-preview .about > .photo { width: 100%; filter: brightness(.5) saturate(.8); object-position: center; }
  .gromko-preview .about > .veil { background: linear-gradient(90deg, #080808f5, #080808c9 58%, #080808a8); }
  .gromko-preview .about h1.seo-proposition { font-size: 18px; line-height: 1.65; margin-bottom: 26px; }
  .gromko-preview .about .stats { gap: 16px; margin-bottom: 30px; }
  .gromko-preview .about .stat b { font-size: 30px; }
  .gromko-preview .about .stat small { font-size: 8px; letter-spacing: 0; }
  .gromko-preview :is(.engineering-top, .projects-heading, .services-heading, .team-section .closing-heading, .contacts-content) { width: 100%; margin-left: 0; }
  .gromko-preview :is(.engineering-top, .projects-heading, .services-heading, .team-section .closing-heading) { margin-bottom: 32px; }
  .gromko-preview .engineering .engineering-subtitle { font-size: 23px; }
  .gromko-preview .project-grid { gap: 24px; }
  .gromko-preview .project-copy, .gromko-preview .service-card-copy { padding: 22px; }
  .gromko-preview .project-copy h3 { font-size: 25px; }
  .gromko-preview .service-card h3 { font-size: 25px; min-height: 0; }
  .gromko-preview .contacts-scrim { background: linear-gradient(90deg, #080808ef, #080808d9 60%, #080808b3); }
  .gromko-preview .contacts-backdrop { width: 100%; }
  .gromko-preview .contacts-phone strong { font-size: clamp(28px, 7vw, 42px); }
  .gromko-preview .contacts-call { max-width: none; min-width: 0; }
}
@media(max-width: 440px) {
  .gromko-preview :is(.hero header, .section-header) { flex-wrap: wrap; gap: 20px; }
  .gromko-preview :is(.hero header, .section-header) nav { width: 100%; justify-content: space-between; flex-wrap: nowrap; font-size: 9px; gap: 10px; }
  .gromko-preview .team-grid { gap: 22px; }
  .gromko-preview .projects-more button { width: 100%; }
}
/* Approach screen: one clear column of copy beside a large visual story. */
.gromko-preview .engineering .section-header { margin-bottom: 48px; }
.gromko-preview .engineering .approach-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 5vw, 80px);
}
.gromko-preview .engineering .approach-copy { min-width: 0; }
.gromko-preview .engineering .engineering-top {
  display: block;
  width: 100%;
  margin: 0 0 30px;
}
.gromko-preview .engineering .engineering-top > div:first-child { margin: 0; }
.gromko-preview .engineering h2.engineering-title {
  font-size: clamp(40px, 4.1vw, 64px);
  line-height: 1.04;
  margin: 0 0 24px;
}
.gromko-preview .engineering .engineering-top .summary {
  width: 100%;
  max-width: 450px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #bfbfbf;
}
.gromko-preview .engineering .steps { border: 0; gap: 0; align-content: start; }
.gromko-preview .engineering .step,
.gromko-preview .engineering .step:first-child,
.gromko-preview .engineering .step:last-child {
  display: block;
  padding: 20px 0;
  border-top: 1px solid #ffffff26;
  background: none;
}
.gromko-preview .engineering .step:last-child { padding-bottom: 0; }
.gromko-preview .engineering .step h3 {
  font-size: clamp(23px, 2.05vw, 28px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.025em;
  line-height: 1.3;
  margin: 0 0 12px;
}
.gromko-preview .engineering .step p {
  max-width: 430px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: #b5b5b5;
}
.gromko-preview .engineering .detail-photo.approach-carousel {
  margin: 0;
  width: 100%;
  align-self: start;
  border: 1px solid #ffffff26;
  background: #0c0c0c;
  box-shadow: none;
}
.gromko-preview .engineering .approach-stage { aspect-ratio: 16 / 11; }
.gromko-preview .engineering .approach-info { padding: 22px 24px 16px; }
.gromko-preview .engineering .approach-title { font-size: 19px; line-height: 1.35; }
.gromko-preview .engineering .approach-controls { padding: 0 24px 22px; }
@media (max-width: 900px) {
  .gromko-preview .engineering .approach-layout { gap: 32px; grid-template-columns: 1fr 1fr; }
  .gromko-preview .engineering .engineering-top .summary { font-size: 16px; }
  .gromko-preview .engineering .step h3 { font-size: 22px; }
}
@media (max-width: 760px) {
  .gromko-preview .engineering .section-header { margin-bottom: 34px; }
  .gromko-preview .engineering .approach-layout { grid-template-columns: 1fr; gap: 32px; }
  .gromko-preview .engineering h2.engineering-title { font-size: clamp(32px, 8.2vw, 48px); }
  .gromko-preview .engineering .engineering-top { margin-bottom: 26px; }
  .gromko-preview .engineering .step { padding: 18px 0; }
  .gromko-preview .engineering .approach-info { padding: 18px 18px 14px; }
  .gromko-preview .engineering .approach-controls { padding: 0 18px 18px; }
}
/* The retained page had a grid on the section itself. The new layout owns it. */
.gromko-preview .engineering { display: block; }
.gromko-preview .engineering .approach-copy,
.gromko-preview .engineering .detail-photo.approach-carousel { grid-area: auto; }