/* Page: pre-construction-consulting */

:root {
  --orange: #f37021;
  --black:  #222222;
  --cream:  #fffaf7;
  --font-h: 'Montserrat', sans-serif;
  --font-b: 'Open Sans', sans-serif;
  --max: 1200px;
}

[data-r] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-r].in { opacity:1; transform:none; }
[data-r][data-d="1"] { transition-delay:.12s }
[data-r][data-d="2"] { transition-delay:.24s }
[data-r][data-d="3"] { transition-delay:.36s }

.b1 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 520px;
  display: flex;
  overflow: hidden;
  font-family: var(--font-b);
  background: var(--black);
}

.b1-left {
  flex: 1 1 58%;
  background: var(--cream);
  clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.b1-left::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: var(--orange);
}

/* Контент лівої панелі вирівняний по загальному max-width */
.b1-left-inner {
  width: 100%;
  max-width: calc(var(--max) * 0.58);
  margin-left: auto;
  padding: 80px 80px 80px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.b1-tag {
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 28px;
}

.b1-h1 {
  font-family: var(--font-h);
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--black);
  max-width: 520px;
  margin-bottom: 28px;
}
.b1-h1 span { color: var(--orange); }

.b1-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: #555;
  max-width: 460px;
}

.b1-right {
  flex: 0 0 44%;
  background: var(--black);
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.b1-bg-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-h);
  font-size: 160px;
  font-weight: 800;
  color: rgba(255,255,255,.025);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -4px;
}

/* Контент правої панелі вирівняний по загальному max-width */
.b1-right-inner {
  width: 100%;
  max-width: calc(var(--max) * 0.44);
  margin-right: auto;
  padding: 80px 40px 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.b1-stat {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.b1-stat:last-child { border-bottom: none; }

.b1-stat-phrase {
  font-family: var(--font-h);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.3;
  margin-bottom: 8px;
}

.b1-stat-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .b1 { flex-direction: column; }
  .b1-left { clip-path: none; flex: 1 1 auto; }
  .b1-left-inner { max-width: 100%; padding: 60px 24px; }
  .b1-right { flex: 1 1 auto; }
  .b1-right-inner { max-width: 100%; padding: 48px 24px; flex-direction: row; flex-wrap: wrap; }
  .b1-stat { flex: 1 1 33%; padding: 20px 12px; border-bottom: none; border-right: 1px solid rgba(255,255,255,.08); }
  .b1-stat:last-child { border-right: none; }
  .b1-stat-num { font-size: 34px; }
  .b1-bg-word { display: none; }
}

:root { --orange:#f37021; --black:#222222; --cream:#fffaf7; --font-h:'Montserrat',sans-serif; --font-b:'Open Sans',sans-serif; --max:1200px; }

[data-r] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-r][data-dir="left"]  { transform:translateX(-44px); }
[data-r][data-dir="right"] { transform:translateX(44px); }
[data-r].in { opacity:1; transform:none; }
[data-r][data-d="1"] { transition-delay:.14s }

.b2 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #fff;
  font-family: var(--font-b);
  overflow: hidden;
}

.b2-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 40px;
  display: flex;
  gap: 80px;
  align-items: center;
}

.b2-text { flex: 1; }

.b2-label {
  display: block;
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}

.b2-text h2 {
  font-family: var(--font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 24px;
}

.b2-text p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  color: #555;
  margin-bottom: 16px;
}
.b2-text p:last-child { margin-bottom: 0; }

.b2-img-col { flex: 1; position: relative; }

.b2-img-frame { position: relative; z-index: 2; }

.b2-img-frame::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 55%; height: 55%;
  background: var(--orange);
  z-index: -1;
}

.b2-img-frame img {
  width: 100%; height: 420px;
  object-fit: cover; display: block;
}

@media (max-width: 900px) {
  .b2-inner { flex-direction: column; padding: 64px 24px; gap: 48px; }
}

:root { --orange:#f37021; --black:#222222; --cream:#fffaf7; --gray:#555; --border:#eaeaea; --font-h:'Montserrat',sans-serif; --font-b:'Open Sans',sans-serif; --max:1200px; }

[data-r] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-r].in { opacity:1; transform:none; }
[data-r][data-d="1"] { transition-delay:.12s }
[data-r][data-d="2"] { transition-delay:.24s }

.b3 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--cream);
  font-family: var(--font-b);
}

.b3-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 40px;
}

.b3-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.b3-label {
  display: block;
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}

.b3-head h2 {
  font-family: var(--font-h);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--black);
}
.b3-head h2 span { color: var(--orange); }

.b3-head-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--gray);
}

.b3-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2px;
}

.b3-card {
  background: #fff;
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.b3-card:hover { background: #fff3eb; }

.b3-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--orange);
  transition: height .4s cubic-bezier(.16,1,.3,1);
}
.b3-card:hover::before { height: 100%; }

.b3-num {
  font-family: var(--font-h);
  font-size: 88px;
  font-weight: 800;
  color: rgba(0,0,0,.04);
  line-height: 1;
  position: absolute;
  bottom: 12px; right: 20px;
  pointer-events: none;
  transition: color .3s;
}
.b3-card:hover .b3-num { color: rgba(243,112,33,.07); }

.b3-wide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.b3-card h3 {
  font-family: var(--font-h);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 0;
}
.b3-card h3 span { color: var(--orange); }

.b3-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--gray);
}

.b3-card-narrow h3 { margin-bottom: 20px; }

@media (max-width: 900px) {
  .b3-inner { padding: 64px 24px; }
  .b3-head { flex-direction: column; gap: 24px; align-items: flex-start; }
  .b3-grid { grid-template-columns: 1fr; }
  .b3-wide-inner { grid-template-columns: 1fr; gap: 20px; }
}

:root { --orange:#f37021; --black:#222222; --cream:#fffaf7; --gray:#555; --border:#eaeaea; --font-h:'Montserrat',sans-serif; --font-b:'Open Sans',sans-serif; --max:1200px; }

[data-r] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-r].in { opacity:1; transform:none; }
[data-r][data-d="1"] { transition-delay:.12s }
[data-r][data-d="2"] { transition-delay:.24s }

.b4 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #fff;
  font-family: var(--font-b);
}

/* Помаранчевий банер H2 — повна ширина, контент обмежений */
.b4-banner {
  background: var(--orange);
  position: relative;
  overflow: hidden;
}

.b4-banner::after {
  content: 'BUDGET';
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-h);
  font-size: 140px;
  font-weight: 800;
  color: rgba(255,255,255,.07);
  letter-spacing: -4px;
  pointer-events: none;
  white-space: nowrap;
}

.b4-banner-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 40px;
}

.b4-label {
  display: block;
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 14px;
}

.b4-banner h2 {
  font-family: var(--font-h);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 14px;
}

.b4-banner p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  line-height: 1.72;
  max-width: 680px;
}

/* Картки H3 */
.b4-cards {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px 100px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 2px;
  margin-top: 2px;
}

.b4-card {
  background: var(--cream);
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.b4-card:hover { background: #fff3eb; }

.b4-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--orange);
  transition: height .4s cubic-bezier(.16,1,.3,1);
}
.b4-card:hover::before { height: 100%; }

.b4-num {
  font-family: var(--font-h);
  font-size: 88px;
  font-weight: 800;
  color: rgba(0,0,0,.04);
  line-height: 1;
  position: absolute;
  bottom: 12px; right: 20px;
  pointer-events: none;
  transition: color .3s;
}
.b4-card:hover .b4-num { color: rgba(243,112,33,.07); }

.b4-card h3 {
  font-family: var(--font-h);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 20px;
}
.b4-card h3 span { color: var(--orange); }

.b4-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--gray);
}

.b4-wide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.b4-wide-inner h3 { margin-bottom: 0; }

@media (max-width: 900px) {
  .b4-banner-inner { padding: 48px 24px; }
  .b4-cards { grid-template-columns: 1fr; padding: 0 24px 64px; }
  .b4-wide-inner { grid-template-columns: 1fr; gap: 20px; }
}

:root { --orange:#f37021; --black:#222222; --cream:#fffaf7; --gray:#555; --border:#eaeaea; --font-h:'Montserrat',sans-serif; --font-b:'Open Sans',sans-serif; --max:1200px; }

[data-r] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-r][data-dir="left"]  { transform:translateX(-44px); }
[data-r][data-dir="right"] { transform:translateX(44px); }
[data-r].in { opacity:1; transform:none; }
[data-r][data-d="1"] { transition-delay:.12s }
[data-r][data-d="2"] { transition-delay:.24s }

.b5 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  font-family: var(--font-b);
}

/* H2 секція — кремовий фон */
.b5-head-section {
  background: var(--cream);
}

.b5-head-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 40px 60px;
}

.b5-label {
  display: block;
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}

.b5-head-inner h2 {
  font-family: var(--font-h);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 16px;
}
.b5-head-inner h2 span { color: var(--orange); }

.b5-head-inner p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--gray);
  max-width: 620px;
}

/* H3 картки — кремовий фон, 2 колонки */
.b5-cards-section {
  background: var(--cream);
}

.b5-cards-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.b5-card {
  background: #fff;
  padding: 48px 40px 48px 36px;
  border-left: 3px solid var(--border);
  transition: border-color .3s;
}
.b5-card:hover { border-color: var(--orange); }

.b5-card-num {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}

.b5-card h3 {
  font-family: var(--font-h);
  font-size: 19px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 16px;
}

.b5-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--gray);
}

/* Value Engineering — темна смуга, повна ширина, контент обмежений */
.b5-value-section {
  background: var(--black);
  position: relative;
  overflow: hidden;
}

.b5-value-section::before {
  content: 'VE';
  position: absolute;
  right: 5%; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-h);
  font-size: 260px;
  font-weight: 800;
  color: rgba(255,255,255,.03);
  pointer-events: none;
  letter-spacing: -8px;
}

.b5-value-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.b5-value-big {
  font-family: var(--font-h);
  font-size: 80px;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -2px;
}
.b5-value-big small { font-size: 36px; letter-spacing: 0; }

.b5-value-body h3 {
  font-family: var(--font-h);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 16px;
}

.b5-value-body p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.82;
  color: rgba(255,255,255,.6);
}

@media (max-width: 900px) {
  .b5-head-inner  { padding: 64px 24px 48px; }
  .b5-cards-inner { grid-template-columns: 1fr; padding: 0 24px 2px; }
  .b5-value-inner { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px; }
  .b5-value-big   { font-size: 56px; }
}

:root { --orange:#f37021; --black:#222222; --font-h:'Montserrat',sans-serif; --font-b:'Open Sans',sans-serif; --max:1200px; }

[data-r] { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
[data-r].in { opacity:1; transform:none; }
[data-r][data-d="1"] { transition-delay:.14s }

.b6 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--orange);
  font-family: var(--font-b);
}

.b6-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.b6-text { flex: 1; }

.b6-text p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: #fff;
  max-width: 640px;
}

.b6-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex-shrink: 0;
}

.b6-btn {
  display: inline-block;
  background: #fff;
  color: var(--orange);
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 36px;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.b6-btn:hover { background: var(--black); color: #fff; }

.b6-link { text-decoration: none; }
.b6-link-type {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 3px;
}
.b6-link-val {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transition: opacity .2s;
}
.b6-link:hover .b6-link-val { opacity: .7; }

@media (max-width: 768px) {
  .b6-inner { flex-direction: column; align-items: flex-start; padding: 64px 24px; gap: 36px; }
  .b6-text p { font-size: 17px; }
}