/* Web Design Odessa home page (BEM). Every value comes from css/tokens.css. 1rem = 10px. Breakpoints 1279, 991, 767, 478. */

/* ---------- shared ---------- */
.wrap { width: min(var(--container), calc(100% - 2 * var(--space-m))); margin-left: auto; margin-right: auto; }
.wrap--wide { width: min(var(--container-wide), calc(100% - 2 * var(--space-m))); }
.section { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.eyebrow { position: relative; display: flex; align-items: center; gap: var(--space-2xs); width: max-content; max-width: 100%; border-radius: 3.8rem; background: var(--red-tint); padding: 0.8rem 2.7rem; margin: 0 0 var(--space-s) 2rem; }
.eyebrow--center { margin-left: auto; margin-right: auto; }
.eyebrow__text { font-family: var(--font-heading); font-size: var(--text-s); font-weight: 400; line-height: 1; text-transform: uppercase; background: var(--grad-red); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--red); }
.eyebrow__mark { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--red-deep); }
.eyebrow__mark--left { left: -2rem; }
.eyebrow__mark--right { right: -2rem; transform: translateY(-50%) scaleX(-1); }
.section-title { font-size: var(--text-4xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.05rem; color: var(--ink); }
.section-title--light { color: var(--white); }
.section-title--center { text-align: center; }
.lead { font-size: var(--text-l); line-height: 1.5; color: var(--body); margin-top: var(--space-m); }
.btn { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-heading); font-size: var(--text-l); font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--white); background: var(--grad-red); border-radius: var(--radius-pill); padding: 2.1rem 3.4rem; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.btn:hover { color: var(--white); transform: translateY(-0.2rem); box-shadow: var(--shadow-card); }
.btn__icon { font-size: 1.3rem; border-left: 1px solid currentColor; padding-left: 1rem; margin-left: 0.4rem; box-sizing: content-box; }
.btn--light { background: var(--white); color: var(--red); }
.btn--light:hover { color: var(--red); }
.play-link { display: inline-flex; align-items: center; gap: 1.2rem; color: var(--ink); font-family: var(--font-heading); font-size: var(--text-l); line-height: 1.55; }
.play-link:hover { color: var(--red); }
.play-link__ring { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 5.2rem; height: 5.2rem; border-radius: 50%; border: 0.4rem solid var(--red-deep); color: var(--red-deep); outline: 1.3rem solid var(--black-10); animation: pulse 2s linear infinite; font-size: 1.6rem; transition: background .4s var(--ease), color .4s var(--ease); }
.play-link:hover .play-link__ring, a.play-link__ring:hover { background: var(--grad-red); color: var(--white); border-color: transparent; }
.call-card { display: grid; grid-template-columns: 9.2rem auto; align-items: center; }
.call-card__ring { display: inline-flex; align-items: center; justify-content: center; width: 5.4rem; height: 5.4rem; border-radius: 50%; border: 0.4rem solid var(--white); background: var(--red-bright); color: var(--white); outline: 0.7rem solid var(--red-20b); animation: pulse 3s linear infinite; font-size: 2.2rem; }
.call-card__label { display: block; color: var(--ink); font-size: var(--text-s); line-height: 1; }
.call-card__number { font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1.15; font-weight: 500; color: var(--ink); }
.call-card__number:hover { color: var(--red); }
.check-list__item { display: flex; align-items: center; gap: 1rem; font-size: var(--text-l); line-height: 1.33; color: var(--ink); margin-bottom: 1rem; }
.check-list__icon { font-size: 1.6rem; color: var(--red-deep); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--white); background-image: radial-gradient(circle at 18% 28%, var(--mist) 0, var(--mist) 22rem, transparent 22.2rem), radial-gradient(circle at 6% 86%, var(--mist) 0, var(--mist) 14rem, transparent 14.2rem), radial-gradient(circle at 40% 60%, var(--surface) 0, var(--surface) 30rem, transparent 30.2rem); }
.hero__inner { position: relative; z-index: 2; padding-top: 20.5rem; padding-bottom: 16.5rem; }
.hero__title { font-size: var(--text-5xl); line-height: 1.11; font-weight: 600; color: var(--ink); margin-bottom: 2.6rem; max-width: 60rem; }
.hero__text { font-size: var(--text-l); line-height: 1.55; color: var(--body); margin-bottom: 4.7rem; max-width: 46.5rem; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; }
.hero__media { position: absolute; right: 0; bottom: 0; top: 0; width: 100%; max-width: min(86rem, 43vw); z-index: 1; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; }
.hero__tint { position: absolute; inset: 0; background: var(--red-deep); opacity: .7; mix-blend-mode: multiply; }
.hero__ring { position: absolute; left: -16rem; bottom: -14rem; width: 52rem; height: 52rem; border-radius: 50%; border: 5.4rem solid transparent; border-top-color: var(--red-bright); border-right-color: var(--red); transform: rotate(359deg); animation: ring-in 1s linear .8s both; z-index: 2; }

/* ---------- about ---------- */
.about { position: relative; padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); overflow: hidden; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl) 9.8rem; align-items: start; }
.about__figure { position: relative; }
.about__frame { position: absolute; inset: 4rem -4rem -4rem 4rem; border: 2px solid var(--red-bright); z-index: 0; animation: float 5s linear infinite; }
.about__photo { position: relative; z-index: 1; width: 100%; height: 74rem; object-fit: cover; }
.about__content { padding-top: var(--space-l); }
.about__features { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: var(--space-xl); margin-bottom: var(--space-2xl); }
.feature-card { position: relative; border: 1px solid var(--line-soft); background: var(--white); padding: 3rem 2rem; transition: border-color var(--speed) var(--ease); }
.feature-card:hover { border-color: var(--red-40); }
.feature-card__icon { font-size: 4.4rem; color: var(--red-deep); margin-bottom: 2rem; }
.feature-card__rule { display: block; width: 4rem; height: 1px; background: var(--grad-red); opacity: .3; margin-bottom: 2.3rem; }
.feature-card__title { font-size: var(--text-xl); font-weight: 500; line-height: 1.2; margin-bottom: 1.3rem; }
.feature-card__text { font-size: var(--text-s); line-height: 1.6; color: var(--body); }
.about__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5rem; }
.about__hours { display: grid; grid-template-columns: 9rem auto; align-items: center; }
.about__hours-title { font-size: var(--text-xl); font-weight: 500; line-height: 1; margin-bottom: 0.5rem; }
.about__hours-text { display: inline-block; font-size: var(--text-l); font-weight: 300; line-height: 1; background: var(--grad-red); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--red); }

/* ---------- projects ---------- */
.projects { position: relative; background: var(--ink); padding-top: 11.5rem; padding-bottom: var(--space-3xl); overflow: hidden; }
.projects__head { text-align: center; margin-bottom: var(--space-2xl); }
.projects__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.projects__row--single { display: block; max-width: 87rem; margin-left: auto; margin-right: auto; padding-top: 7rem; padding-bottom: 7rem; }
.project-card { position: relative; display: block; overflow: hidden; }
.project-card--offset { padding-top: 17rem; }
.project-card__media { position: relative; height: 52rem; overflow: hidden; background: #0d1530; }
.project-card__image { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 2s var(--ease); }
.project-card:hover .project-card__image { transform: scale(1.1) rotate(5deg); }
.project-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 7, 26, 0) 0%, rgba(0, 7, 26, .5) 100%); }
.project-card__title { position: absolute; left: 3rem; bottom: 4.5rem; font-size: var(--text-3xl); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--white); white-space: nowrap; }
.projects__foot { display: grid; grid-template-columns: 68rem 1fr; justify-content: space-between; align-items: center; gap: var(--space-l); margin-top: var(--space-2xl); }
.projects__foot-text { font-size: var(--text-l); line-height: 1.5; color: var(--white); }
.projects__foot-action { justify-self: end; }

/* ---------- services ---------- */
.services { position: relative; overflow: hidden; }
.services__head { text-align: center; margin-bottom: 6.5rem; }
.services__tabs { display: grid; grid-template-columns: 32.6rem minmax(0, 1fr); gap: 5.3rem; align-items: start; }
.services__menu { display: flex; flex-direction: column; padding-top: 5rem; }
.services__tab { display: block; position: relative; padding: 0 0 2.3rem; margin-bottom: 1.5rem; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; line-height: 1.33; color: var(--ink); text-align: left; border-bottom: 2px solid var(--ink-10); transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.services__tab:hover { color: var(--red); }
.services__tab--active { background: var(--grad-red); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--red); border-bottom-color: var(--red-bright); }
.services__pane { display: none; }
.services__pane--active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5.3rem; animation: fade-in .4s var(--ease); }
.services__image { width: 100%; height: 58.5rem; object-fit: cover; object-position: top; }
.services__content { position: relative; padding-top: 3.5rem; }
.services__badge { display: inline-flex; align-items: center; justify-content: center; width: 7.8rem; height: 7.8rem; border-radius: 50%; background: var(--red-10); color: var(--red); margin-bottom: 2rem; outline: 1px dashed var(--red); outline-offset: 0.4rem; font-size: 3.2rem; }
.services__title { font-size: var(--text-2xl); font-weight: 500; margin-bottom: 1.5rem; }
.services__text { font-size: var(--text-l); font-weight: 500; line-height: 1.66; color: var(--ink); margin-bottom: 3rem; }
.services__list { margin-bottom: 5.5rem; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding: 3.5rem 0; }
.marquee__band { width: 110%; margin-left: -5%; overflow: hidden; padding: 3.2rem 0; }
.marquee__band--red { background: var(--grad-red); transform: rotate(2deg); }
.marquee__band--white { position: relative; z-index: 2; background: var(--white); padding: 2.8rem 0; transform: rotate(-2deg); margin-top: -9.2rem; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 20s linear infinite; }
.marquee__track--reverse { animation-name: marquee-reverse; }
.marquee__item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 500; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--white); }
.marquee__item--gradient { background: var(--grad-red); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--red); }
.marquee__dot { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--white); }
.marquee__dot--red { background: var(--red-bright); }

/* ---------- why choose us ---------- */
.choose { --choose-overlap: 26rem; position: relative; z-index: 2; padding-top: var(--space-3xl); background: var(--white); }
.choose__grid { display: grid; grid-template-columns: 64rem 1fr; gap: 5.8rem; align-items: start; }
.choose__figure { position: relative; z-index: 3; align-self: stretch; min-height: 60rem; }
.choose__photo { position: absolute; inset: 0; width: 100%; height: calc(100% + var(--choose-overlap)); object-fit: cover; }
.choose__overlay { position: absolute; inset: 0 0 calc(-1 * var(--choose-overlap)) 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.choose__claim { display: flex; align-items: center; justify-content: center; padding: 3rem; background: var(--grad-red); border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); }
.choose__claim-text { font-size: var(--text-2xl); font-weight: 500; line-height: 1.22; color: var(--white); }
.choose__cell--framed { border-top: 1px solid var(--white); border-left: 1px solid var(--white); }
.choose__content { padding-top: 3.5rem; }
.choose__features { border-bottom: 1px solid var(--line-dark); padding-bottom: 5rem; margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.reason { display: flex; align-items: center; gap: 2rem; margin-bottom: 1.5rem; }
.reason__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 9.6rem; height: 9.6rem; border-radius: 50%; background: var(--red-20); color: var(--red); outline: 1px dashed var(--red); outline-offset: -0.6rem; font-size: 3.8rem; }
.reason__body { max-width: 51.5rem; }
.reason__title { font-size: var(--text-xl); font-weight: 500; line-height: 1.33; border-bottom: 1px dashed var(--ink); padding-bottom: 1rem; margin-bottom: 1rem; }
.reason__text { font-size: var(--text-m); line-height: 1.6; color: var(--body); max-width: 46.5rem; }
.choose__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6.5rem; }

/* ---------- testimonials ---------- */
.testimonials { position: relative; z-index: 1; background: var(--ink); padding-top: calc(var(--space-3xl) + 26rem); padding-bottom: 13rem; }
.testimonials__head { text-align: center; margin-bottom: var(--space-xl); }
.slider { position: relative; }
.slider__slide { display: none; }
.slider__slide--active { display: block; animation: fade-in .6s var(--ease); }
.slider__dots { display: flex; justify-content: center; gap: 1rem; margin-top: 4rem; }
.slider__dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background var(--speed) var(--ease); }
.slider__dot--active, .slider__dot:hover { background: var(--red-bright); }
.review { max-width: 74.5rem; margin: 0 auto; text-align: center; position: relative; padding: 0 var(--space-m); }
.review__avatar { display: inline-flex; align-items: center; justify-content: center; width: 18rem; height: 18rem; border-radius: 50%; border: 1rem solid #f14a65; background: var(--grad-red); color: var(--white); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 600; margin-bottom: 3rem; }
.review__name { font-size: var(--text-2xl); font-weight: 600; text-transform: uppercase; color: var(--white); margin-bottom: 0.8rem; }
.review__source { display: block; color: var(--red-bright); line-height: 1.9; margin-bottom: 3rem; }
.review__body { position: relative; }
.review__quote { position: relative; font-size: var(--text-l); font-weight: 500; font-style: italic; line-height: 1.6; color: var(--white); }
.review__mark { position: absolute; font-size: 6rem; color: var(--red-bright); opacity: .2; }
.review__mark--open { left: -4rem; top: -4.5rem; }
.review__mark--close { right: -4rem; bottom: -4rem; transform: scaleX(-1); }
.review__stars { display: inline-flex; gap: 0.6rem; margin-top: 3rem; color: var(--red-bright); font-size: 1.6rem; }

/* ---------- clients ---------- */
.clients__grid { display: grid; grid-template-columns: 47.1rem auto; align-items: center; }
.clients__title-wrap { position: relative; z-index: 2; display: grid; align-items: center; justify-content: center; height: 22.2rem; margin-top: -1.5rem; background: var(--grad-red); }
.clients__title { font-size: var(--text-3xl); font-weight: 500; line-height: 1.25; color: var(--white); text-align: center; }
.clients__track-wrap { overflow: hidden; padding: var(--space-m) 0; min-width: 0; }
.clients__track { display: flex; align-items: center; gap: 6rem; width: max-content; animation: marquee 30s linear infinite; }
.clients__name { flex: 0 0 auto; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; letter-spacing: 0.04rem; color: var(--ink); opacity: .75; white-space: nowrap; }

/* ---------- faq ---------- */
.faq { position: relative; background: var(--ink-tint); overflow: hidden; }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: end; }
.faq__head { margin-bottom: var(--space-l); }
.faq__item { position: relative; margin-bottom: var(--space-2xs); border-bottom: 1px solid #919191; }
.faq__question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding: 1.6rem 0; cursor: pointer; }
.faq__question-text { font-size: var(--text-xl); font-weight: 500; line-height: 1.55; }
.faq__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--red-20); color: var(--red); font-size: 1rem; }
.faq__toggle-icon { transition: transform var(--speed) var(--ease); }
.faq__item[open] .faq__toggle-icon { transform: rotate(45deg); }
.faq__answer { font-size: var(--text-m); line-height: 1.6; color: var(--ink); opacity: .8; padding: 0 1.5rem 1.6rem 0; }
.faq__figure { position: relative; padding-left: 5rem; }
.faq__frame { position: absolute; top: 2rem; right: -2rem; bottom: -2rem; left: 7rem; border: 2px dashed var(--red-deep); clip-path: polygon(18% 0, 100% 0, 100% 84%, 82% 100%, 0 100%, 0 16%); z-index: 0; }
.faq__photo { position: relative; z-index: 1; width: 100%; height: 74rem; object-fit: cover; clip-path: polygon(18% 0, 100% 0, 100% 84%, 82% 100%, 0 100%, 0 16%); }

/* ---------- call to action + facts ---------- */
.cta { position: relative; background: var(--ink); overflow: hidden; }
.cta__grid { display: grid; grid-template-columns: 67.2rem 1fr; gap: 6rem; align-items: center; padding-bottom: 8rem; }
.cta__photo { width: 100%; height: 55rem; object-fit: cover; }
.cta__badge { display: inline-flex; align-items: center; justify-content: center; width: 5.8rem; height: 5.8rem; border-radius: 50%; background: var(--red-bright); color: var(--white); margin-bottom: 3rem; animation: pulse 3s linear infinite; font-size: 2.4rem; }
.cta__number { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 600; line-height: 1.08; color: var(--white); margin-bottom: 2.1rem; }
.cta__number:hover { color: var(--red-bright); }
.cta__text { font-size: var(--text-l); line-height: 1.66; color: var(--white); margin-bottom: 4.2rem; }
.facts { display: flex; justify-content: space-around; align-items: center; gap: 5rem; padding: 3.5rem 15rem; background: var(--grad-red); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.fact { text-align: center; }
.fact__value { font-size: var(--text-4xl); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--white); margin-bottom: 0.4rem; }
.fact__label { display: block; font-size: var(--text-l); line-height: 1; color: var(--white); }

/* ---------- banner ---------- */
.banner { position: relative; z-index: 2; margin-bottom: -11.5rem; }
.banner.section { padding-bottom: 0; }
.banner__box { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--ink); }
.banner__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.banner__content { position: relative; display: grid; grid-template-columns: 69rem 1fr; align-items: center; justify-items: end; padding: 8rem 9rem; }
.banner__title { font-size: var(--text-3xl); font-weight: 600; line-height: 1.1; color: var(--white); justify-self: start; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .hero__inner { padding-top: 16rem; padding-bottom: 10rem; }
  .hero__media { max-width: 50%; }
  .hero__tint { background: var(--white); opacity: .5; mix-blend-mode: normal; }
  .hero__ring { display: none; }
  .about__grid { grid-template-columns: 1fr; }
  .about__content { padding-top: 0; }
  .projects__row { grid-template-columns: 1fr; }
  .project-card--offset { padding-top: 0; }
  .projects__foot { grid-template-columns: 1fr; }
  .projects__foot-action { justify-self: start; }
  .services__tabs { grid-template-columns: minmax(0, 1fr); }
  .services__menu { padding-top: 0; }
  .choose__grid { grid-template-columns: 1fr; }
  .choose__figure { min-height: 0; }
  .choose__photo { position: static; height: 60rem; }
  .choose__overlay { inset: 0; }
  .testimonials { padding-top: var(--space-3xl); }
  .clients__grid { grid-template-columns: 29rem auto; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__figure { padding-left: 0; }
  .faq__frame { display: none; }
  .cta__grid { grid-template-columns: 1fr; }
  .facts { flex-wrap: wrap; padding: 3.5rem 12rem; gap: 1.5rem; }
  .banner__content { grid-template-columns: 2fr 1fr; padding: 8rem 2rem; }
  .marquee { padding: 0; }
}
@media (max-width: 767px) {
  .hero__inner { padding-top: 14rem; padding-bottom: 6rem; }
  .hero__media { position: relative; max-width: 100%; height: 32rem; }
  .hero__tint { background: var(--red-deep); opacity: .7; mix-blend-mode: multiply; }
  .about__frame { inset: 1rem -1rem -1rem 1rem; }
  .about__photo { height: 48rem; }
  .about__features { grid-template-columns: 1fr; }
  .project-card__media { height: 36rem; }
  .project-card__title { font-size: var(--text-2xl); }
  .services__pane--active { grid-template-columns: 1fr; }
  .services__image { height: 36rem; }
  .choose__photo { height: 45rem; }
  .choose__claim { padding: 1.5rem; }
  .choose__claim-text { font-size: var(--text-l); }
  .reason { flex-wrap: wrap; }
  .review__avatar { width: 12rem; height: 12rem; }
  .review__mark { display: none; }
  .clients__grid { grid-template-columns: 1fr; }
  .clients__title-wrap { height: 11rem; margin-top: 0; }
  .faq__photo { height: 45rem; }
  .cta__photo { height: 36rem; }
  .facts { padding: 3.5rem 5.5rem 3.5rem 4.5rem; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
  .banner__content { grid-template-columns: 1fr; justify-items: center; gap: 4rem; padding: 4rem 2rem; }
  .banner__title { text-align: center; justify-self: center; }
  .choose__actions { gap: 4rem; }
}
@media (max-width: 478px) {
  .eyebrow { margin-left: 1.6rem; }
  .eyebrow--center { margin-left: auto; }
  .hero__actions { gap: 2rem; }
  .btn { padding: 1.8rem 2.6rem; }
  .about__actions { gap: 2.4rem; }
  .facts { padding: 3rem 2rem; clip-path: none; }
}