/*
 * Avada Corporation — Layout Refinement V2
 * Purpose: keep photographs, text and ornamental backgrounds in separate layers.
 * V1 is retained in site.css for traceability; this file is the last, authoritative
 * presentation layer. Reuse the same tokens and content across all 17 pages.
 */

:root {
  --shell: 1210px;
  --navy: #172785;
  --panel-soft: #f7f8fc;
  --panel-line: #e8eaf2;
}

html { overflow-x: clip; }
body { line-height: 1.72; }
:where(h1,h2,h3,h4,h5,h6) { overflow-wrap: break-word; }
:where(img,svg) { max-width: 100%; }
:where(a,button,input,textarea,select):focus-visible {
  outline: 3px solid #93b0ff;
  outline-offset: 4px;
}
.section { padding-block: 88px; }
.section-tight { padding-block: 66px; }
.section-title { margin-bottom: 44px; }
.section-title p { line-height: 1.8; }

/* Header sits on its own opaque plane instead of fighting hero photographs. */
.site-header { background: #172785; }
.site-header.is-solid { background: #172785; }
.header-inner { min-height: 86px; }
.nav-link { padding-block: 33px 31px; }
.nav-caret { font-size: 0; }
.nav-caret::after { content: '+'; font-size: 14px; font-weight: 600; }
.submenu { border: 1px solid #e7eaf4; box-shadow: 0 20px 45px #0f1e5429; }

/* HERO: two separate, deliberate planes. Never clip a diagonal over a photo. */
.hero {
  min-height: 610px;
  padding-top: 86px;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.hero::before, .hero::after { content: none; display: none; }
.hero-media {
  left: 53%; right: 0; top: 86px; bottom: 0;
  z-index: 0; opacity: 1;
  overflow: hidden;
}
.hero-media::before, .hero-media::after { content: none; display: none; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  filter: none;
}
.hero-content {
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 69px;
}
.hero-content > * { max-width: 505px; }
.hero h1 {
  max-width: 505px;
  font-size: clamp(38px, 3.8vw, 57px);
  line-height: 1.13;
  letter-spacing: -.045em;
}
.hero p { max-width: 465px; margin: 24px 0 30px; }
.hero-meta { max-width: 490px; align-items: center; }

/* Service images: image alone above, copy alone below. No image-covering text. */
.services-three { gap: 44px; margin-top: 54px; }
.image-feature-grid { gap: 28px; margin-top: 68px; }
.image-feature {
  display: grid;
  grid-template-rows: 282px minmax(0, auto);
  height: auto;
  min-width: 0;
  background: var(--panel-soft);
  border: 1px solid var(--panel-line);
  color: var(--text);
  overflow: hidden;
}
.image-feature > img { height: 282px; width: 100%; object-fit: cover; }
.image-feature::after { content: none; display: none; }
.image-feature-body {
  position: relative;
  inset: auto;
  width: auto;
  padding: 27px 76px 28px 29px;
}
.image-feature h3 { font-size: 23px; line-height: 1.33; max-width: 390px; }
.image-feature p { color: var(--muted); }
.feature-next {
  right: 0; bottom: 0;
  width: 56px; height: 56px;
  border-left: 1px solid var(--panel-line);
  border-top: 1px solid var(--panel-line);
  background: #fff;
}

/* Strategy section: one continuous soft background, clean photo and content. */
.about-band {
  padding-block: 90px;
  background: var(--panel-soft);
  overflow: visible;
}
.about-band::before, .about-band::after { content: none; display: none; }
.about-band-inner { grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); gap: 72px; }
.about-band-inner > * { min-width: 0; }
.about-image { height: 520px; width: 100%; max-width: none; background: #e9edf5; }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-text { background: transparent; }
.about-text h2 { max-width: 580px; }
.about-text p { color: #646d81; }
.check-list li { border-color: #e0e5f0; }

/* Pricing: ribbon belongs to the plan card (not hovering above neighbor rows). */
.price-grid { gap: 16px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; min-width: 0; padding-top: 38px; }
.price-card.featured { padding-top: 37px; }
.price-ribbon {
  left: auto; top: 0; right: 0;
  width: auto; min-width: 106px;
  padding-inline: 13px;
  height: 27px;
}
.price-card > strong { margin-bottom: 22px; }
.price-card .btn { width: 100%; }
.client-trust { padding-bottom: 2px; }
.client-logos { opacity: 1; justify-content: center; gap: 15px; margin-top: 28px; }
.client-logos span {
  font-size: 12px; font-weight: 650; letter-spacing: 0;
  color: #69728d; padding: 11px 17px;
  background: #f7f8fc; border: 1px solid #e8eaf2;
}

/* Blue solutions block: no giant decorative outlines cutting across photographs. */
.blue-panel { isolation: isolate; }
.blue-panel::before, .blue-panel::after { content: none; display: none; }
.solutions { gap: 70px; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.solutions > * { min-width: 0; }
.solutions img { height: 440px; width: 100%; object-fit: cover; object-position: center; }

/* Other visual containers: remove circles and artificial cutaway backgrounds. */
.callout::after, .callout::before,
.subhero::before, .subhero::after { content: none; display: none; }
.callout { padding-block: 76px; }
.subhero { padding-block: 82px; }
.subhero h1 { font-size: clamp(34px, 4vw, 52px); }

/* Editorial project cards: the entire photograph remains visible, captions are below. */
.project-grid { gap: 24px; }
.project-card {
  height: auto;
  min-width: 0;
  border: 1px solid var(--panel-line);
  background: white;
}
.project-card img { height: 262px; width: 100%; object-fit: cover; }
.project-card::after { content: none; display: none; }
.project-card > div { position: static; z-index: auto; color: var(--text); padding: 19px 21px 23px; }
.project-card h3 { font-size: 20px; }
.project-card p { color: #747e92; }

.two-col > *, .service-list > *, .contact-grid > *, .blog-layout > * { min-width: 0; }
.two-col { gap: 68px; }
.service-list { gap: 24px; }
.team-grid { gap: 31px 28px; }
.article-grid { gap: 24px; }
.article-image { object-position: center; }

@media (max-width: 1150px) {
  .hero-media { left: 54%; }
  .hero-content > * { max-width: 46vw; }
  .hero h1 { max-width: 46vw; font-size: clamp(36px, 4.2vw, 48px); }
  .hero p { max-width: 45vw; }
  .solutions, .about-band-inner { gap: 42px; }
  .service-list { grid-template-columns: 1fr; }
  .service-list-item { grid-template-columns: 44% 56%; }
  .price-card { padding-inline: 19px; }
  .price-card.featured { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .site-header { position: absolute; }
  .header-inner { min-height: 76px; }
  .hero {
    padding-top: 76px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-content {
    order: 0;
    width: min(var(--shell), calc(100% - 42px));
    padding-block: 73px 74px;
  }
  .hero-content > *, .hero h1, .hero p { max-width: 650px; }
  .hero h1 { font-size: clamp(36px, 5.9vw, 56px); }
  .hero-media {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: 355px;
    opacity: 1;
  }
  .hero-media img { object-position: center 42%; }
  .about-band { padding-block: 75px; }
  .about-image { height: 460px; }
  .solutions img { height: 380px; }
  .section { padding-block: 72px; }
  .price-grid { gap: 32px 18px; }
  .price-ribbon { top: 0; }
  .image-feature { grid-template-rows: 230px auto; }
  .image-feature > img { height: 230px; }
}

@media (max-width: 700px) {
  .hero-content { padding-block: 64px 64px; }
  .hero-meta { flex-wrap: wrap; }
  .hero h1 { font-size: clamp(35px, 8vw, 46px); }
  .hero-media { height: 290px; }
  .section, .about-band { padding-block: 60px; }
  .section-tight { padding-block: 54px; }
  .image-feature-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .image-feature { grid-template-rows: 225px auto; }
  .image-feature > img { height: 225px; }
  .about-band-inner, .solutions, .two-col { grid-template-columns: 1fr; }
  .about-image { height: 370px; }
  .about-text { padding: 0; }
  .solutions img { height: 295px; }
  .service-list-item { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; gap: 19px; }
  .price-card { padding: 32px 27px; }
  .price-card.featured { padding: 31px 26px; }
  .client-logos { gap: 8px; }
  .client-logos span { padding: 9px 11px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: 1fr; }
  .project-card img { height: 250px; }
  .callout { padding-block: 64px; }
}

@media (max-width: 420px) {
  .hero-content { width: calc(100% - 34px); }
  .hero-media { height: 250px; }
  .hero h1 { font-size: 35px; }
  .hero-meta { font-size: 11px; }
  .about-image { height: 310px; }
  .team-photo { height: 185px; }
  .image-feature h3 { font-size: 21px; }
  .price-card { padding-inline: 22px; }
  .price-card.featured { padding-inline: 21px; }
}