/* Web Design Odessa inner pages (about, services, contact, privacy). Shared patterns live in home.css; tokens in tokens.css. */

/* ---------- page hero ---------- */
.page-hero { position: relative; background: var(--ink); overflow: hidden; }
.page-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.page-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 7, 26, .85) 0%, rgba(0, 7, 26, .35) 100%); }
.page-hero__inner { position: relative; z-index: 2; padding-top: 20.5rem; padding-bottom: var(--space-3xl); }
.page-hero__title { font-size: var(--text-5xl); line-height: 1.11; font-weight: 600; color: var(--white); max-width: 80rem; margin-bottom: 2.6rem; }
.page-hero__lead { font-size: var(--text-l); line-height: 1.55; color: var(--white); opacity: .9; max-width: 62rem; }
.page-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; margin-top: 4.7rem; }
.page-hero .eyebrow { background: rgba(255, 255, 255, .12); }
.page-hero .eyebrow__text { background: none; -webkit-text-fill-color: var(--white); color: var(--white); }
.page-hero .eyebrow__mark { color: var(--red-bright); }
.page-hero .play-link { color: var(--white); }
.page-hero .play-link__ring { border-color: var(--red-bright); color: var(--red-bright); outline-color: rgba(255, 255, 255, .12); }

/* ---------- split (text beside photo, alternating) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl) 8rem; align-items: center; }
.split--flip .split__figure { order: 2; }
.split__figure { position: relative; }
.split__frame { position: absolute; inset: 3rem -3rem -3rem 3rem; border: 2px solid var(--red-bright); z-index: 0; }
.split--flip .split__frame { inset: 3rem 3rem -3rem -3rem; }
.split__photo { position: relative; z-index: 1; width: 100%; height: 56rem; object-fit: cover; object-position: top; }
.split__title { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -0.05rem; margin-bottom: var(--space-s); }
.split__text { font-size: var(--text-l); line-height: 1.6; color: var(--body); margin-bottom: var(--space-m); }
.split__list { margin: var(--space-m) 0 var(--space-l); }
.split + .split { margin-top: var(--space-4xl); }
.section--surface { background: var(--surface); }
.section--tint { background: var(--ink-tint); }
.section__head { max-width: 76rem; margin-bottom: var(--space-2xl); }
.section__head--center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- value cards ---------- */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.value-card { border: 1px solid var(--line-soft); background: var(--white); padding: 3.5rem 2.5rem; transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease); }
.value-card:hover { border-color: var(--red-40); transform: translateY(-0.3rem); }
.value-card__icon { 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); outline: 1px dashed var(--red); outline-offset: 0.4rem; font-size: 3.2rem; margin-bottom: 2.4rem; }
.value-card__title { font-size: var(--text-xl); font-weight: 500; line-height: 1.25; margin-bottom: 1.2rem; }
.value-card__text { font-size: var(--text-s); line-height: 1.65; color: var(--body); }

/* ---------- service cards (overview) ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.service-card { display: flex; flex-direction: column; border: 1px solid var(--line-soft); background: var(--white); padding: 3.5rem 2.5rem; color: var(--ink); transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.service-card:hover { border-color: var(--red-40); box-shadow: var(--shadow-card); color: var(--ink); }
.service-card__icon { font-size: 4.4rem; color: var(--red-deep); margin-bottom: 2rem; }
.service-card__title { font-size: var(--text-xl); font-weight: 500; line-height: 1.25; margin-bottom: 1.2rem; }
.service-card__text { font-size: var(--text-s); line-height: 1.65; color: var(--body); flex: 1 1 auto; }
.service-card__more { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 2.4rem; font-family: var(--font-heading); font-size: var(--text-m); font-weight: 500; text-transform: uppercase; color: var(--red); }
.service-card__more-icon { font-size: 1.2rem; }

/* ---------- quotes ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.quote-card { position: relative; border-radius: var(--radius-card); background: var(--white); border: 1px solid var(--line-card); padding: 4rem 3rem 3rem; }
.quote-card__mark { font-size: 4rem; color: var(--red-bright); opacity: .25; margin-bottom: 1.5rem; }
.quote-card__text { font-size: var(--text-m); font-style: italic; line-height: 1.65; color: var(--ink); margin-bottom: 2.4rem; }
.quote-card__foot { display: flex; align-items: center; gap: 1.4rem; }
.quote-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--grad-red); color: var(--white); font-family: var(--font-heading); font-size: var(--text-m); font-weight: 600; }
.quote-card__name { display: block; font-family: var(--font-heading); font-size: var(--text-l); font-weight: 600; line-height: 1.1; text-transform: uppercase; }
.quote-card__source { display: block; font-size: var(--text-xs); color: var(--red); }
.quote-card__stars { display: inline-flex; gap: 0.4rem; color: var(--red-bright); font-size: 1.3rem; margin-left: auto; }

/* ---------- industries ---------- */
.industries { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.industries__item { display: inline-flex; align-items: center; gap: 1rem; border-radius: var(--radius-pill); border: 1px solid var(--line-soft); background: var(--white); padding: 1.4rem 2.6rem; font-family: var(--font-heading); font-size: var(--text-l); font-weight: 500; color: var(--ink); }
.industries__dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--grad-red); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-2xl) 8rem; align-items: start; }
.contact__title { font-size: var(--text-3xl); line-height: 1.15; margin-bottom: var(--space-s); }
.contact__text { font-size: var(--text-l); line-height: 1.6; color: var(--body); margin-bottom: var(--space-l); }
.contact-item { display: grid; grid-template-columns: 6.4rem 1fr; align-items: center; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.contact-item:first-of-type { border-top: 1px solid var(--line); }
.contact-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: var(--red-10); color: var(--red); font-size: 2.4rem; }
.contact-item__label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--body); margin-bottom: 0.3rem; }
.contact-item__value { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; color: var(--ink); }
a.contact-item__value:hover { color: var(--red); }
.form { border-radius: var(--radius-card); background: var(--white); border: 1px solid var(--line-card); box-shadow: var(--shadow-card); padding: 4.5rem; }
.form__title { font-size: var(--text-2xl); margin-bottom: 0.8rem; }
.form__intro { font-size: var(--text-s); color: var(--body); margin-bottom: 3rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.form__group { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; }
.form__label { font-family: var(--font-heading); font-size: var(--text-s); font-weight: 500; color: var(--ink); }
.form__input, .form__textarea { font: inherit; font-size: var(--text-m); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 0.8rem; padding: 1.6rem 1.8rem; width: 100%; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); }
.form__input:focus, .form__textarea:focus { outline: none; border-color: var(--red); background: var(--white); }
.form__textarea { min-height: 16rem; resize: vertical; }
.form__submit { width: 100%; justify-content: center; margin-top: 1rem; }
.form__note { font-size: var(--text-xs); color: var(--body); margin-top: 1.8rem; text-align: center; }
.form__hp { position: absolute; left: -999rem; width: 1px; height: 1px; overflow: hidden; }
.form__status { display: none; margin-top: 2rem; padding: 1.6rem 2rem; border-radius: 0.8rem; background: var(--red-10); color: var(--ink); font-size: var(--text-s); }
.form__status--visible { display: block; }

.cta--facts-only .facts { margin-top: var(--space-3xl); }
.contact__text--spaced { margin-top: var(--space-l); }

/* ---------- prose (privacy) ---------- */
.prose { max-width: 80rem; }
.prose__title { font-size: var(--text-2xl); line-height: 1.2; margin: var(--space-xl) 0 var(--space-s); }
.prose__title:first-child { margin-top: 0; }
.prose__text { font-size: var(--text-m); line-height: 1.7; color: var(--body); margin-bottom: var(--space-s); }
.prose__list { margin: 0 0 var(--space-s) 2.2rem; list-style: disc; }
.prose__item { font-size: var(--text-m); line-height: 1.7; color: var(--body); margin-bottom: 0.6rem; }
.prose__meta { font-size: var(--text-s); color: var(--body); margin-bottom: var(--space-l); }
.prose__link { color: var(--red); text-decoration: underline; text-underline-offset: .2em; }
.prose__link:hover { color: var(--red-bright); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .page-hero__inner { padding-top: 16rem; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__figure { order: 0; }
  .split__photo { height: 44rem; }
  .split + .split { margin-top: var(--space-3xl); }
  .values { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .page-hero__inner { padding-top: 14rem; }
  .split__frame { inset: 1rem -1rem -1rem 1rem; }
  .split--flip .split__frame { inset: 1rem 1rem -1rem -1rem; }
  .split__photo { height: 34rem; }
  .values { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .form { padding: 2.5rem 2rem; }
  .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 478px) {
  .page-hero__actions { gap: 2rem; }
  .contact-item { grid-template-columns: 5.2rem 1fr; gap: 1.4rem; }
  .contact-item__icon { width: 5.2rem; height: 5.2rem; font-size: 2rem; }
}