/* Final local visual pass: four complete advertising frames, no colour mask or pseudo-roof. */
.eyebrow,
.technical-label {
  margin: 0 0 12px;
}

.configurator {
  background: #262827 !important;
}

.section--dark {
  background: var(--ink);
}

.hero__photo,
.configurator__image {
  z-index: 0;
  --scene-current: url('../assets/img/hero-metal-graphite.webp?v=20260722i');
  --scene-next: var(--scene-current);
}

.hero__palette,
.scene-caption {
  z-index: 3;
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.hero__eyebrow .hero__eyebrow-place,
.hero__eyebrow .hero__eyebrow-brand,
.hero__eyebrow .hero__eyebrow-rule {
  display: block;
  width: auto;
  margin: 0;
  border: 0;
}

.hero__eyebrow .hero__eyebrow-rule {
  flex: 0 0 34px;
  width: 34px;
  border-top: 1px solid currentColor;
}

.team-console {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: #202322;
}

#team { scroll-margin-top: 74px; }

.team-console::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(90deg, black, transparent 82%);
}

.team-console::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 19, 18, .55), transparent);
}

.team-console__intro,
.team-console__company,
.team-ledger,
.team-console__panel {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
}

.team-console__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: end;
}

.team-console h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: .98;
  letter-spacing: -.06em;
}

.team-console__intro > p,
.team-console__company {
  margin: 0;
  color: rgba(255, 253, 248, .72);
  font-size: 15px;
  line-height: 1.55;
}

.team-console__company {
  max-width: 690px;
  margin-top: 25px;
  margin-left: max(calc((100% - 1200px) / 2), 20px);
  margin-right: auto;
}

.team-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.team-ledger div {
  min-height: 117px;
  padding: 17px 22px 18px 0;
  border-right: 1px solid rgba(255, 255, 255, .2);
}

.team-ledger div:not(:first-child) { padding-left: 22px; }
.team-ledger div:last-child { border-right: 0; }
.team-ledger dt { font: italic clamp(25px, 2.5vw, 40px)/1 var(--serif); letter-spacing: -.05em; }
.team-ledger dd { margin: 9px 0 0; color: rgba(255, 253, 248, .62); font-size: 11px; line-height: 1.35; }

.team-console__panel {
  margin-top: 47px;
  border-top: 1px solid rgba(255, 255, 255, .34);
}

.team-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}

.team-trigger {
  min-height: 116px;
  padding: 17px 19px 18px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: rgba(255, 253, 248, .62);
  text-align: left;
  transition: color .22s ease, background .22s ease;
}

.team-trigger:last-child { border-right: 0; }
.team-trigger span { display: block; color: #e8d6a9; font: italic 18px var(--serif); }
.team-trigger strong { display: block; margin-top: 18px; color: var(--white); font-size: 15px; line-height: 1.1; }
.team-trigger small { display: block; margin-top: 5px; font-size: 10px; line-height: 1.25; }
.team-trigger.is-active { background: rgba(255, 255, 255, .1); color: var(--white); box-shadow: inset 0 -3px 0 #e8d6a9; }
.team-trigger:hover { background: rgba(255, 255, 255, .06); color: var(--white); }
.team-trigger:focus-visible { outline: 2px solid #e8d6a9; outline-offset: -4px; }

.team-stage {
  display: grid;
  grid-template-columns: minmax(340px, .83fr) minmax(0, 1.17fr);
  min-height: 500px;
  background: linear-gradient(120deg, rgba(120, 137, 132, .19), transparent 44%), #171a19;
}

.team-stage__portrait {
  position: relative;
  display: grid;
  place-items: end center;
  overflow: hidden;
  min-height: 500px;
  background: linear-gradient(150deg, #4c5b57, #222827 70%);
}

.team-stage__portrait::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(13, 15, 14, .7));
}

.team-stage__portrait p {
  position: absolute;
  z-index: 2;
  top: 21px;
  left: 23px;
  margin: 0;
  font: italic 52px/.8 var(--serif);
  letter-spacing: -.07em;
}

.team-stage__portrait p span { font: normal 11px var(--sans); letter-spacing: .1em; color: rgba(255, 253, 248, .6); }
.team-stage__portrait img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: saturate(.86) contrast(1.04); transition: transform .38s ease, opacity .28s ease; }
.team-stage.is-switching .team-stage__portrait img { opacity: .18; transform: translateX(18px); }

.team-stage__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(31px, 5vw, 74px);
  transition: opacity .24s ease, transform .24s ease;
}

.team-stage.is-switching .team-stage__copy { opacity: .18; transform: translateY(9px); }
.team-stage__copy h3 { max-width: 630px; margin: 0 0 22px; font: italic clamp(34px, 4vw, 58px)/.98 var(--serif); letter-spacing: -.055em; }
.team-stage__copy > p:not(.technical-label):not(.team-stage__result):not(.team-status) { max-width: 590px; margin: 0; color: rgba(255, 253, 248, .74); font-size: 15px; line-height: 1.58; }
.team-stage__copy .technical-label { color: #e8d6a9; }
.team-stage__result { max-width: 590px; margin: 26px 0 0; padding: 17px 0 0 17px; border-top: 1px solid rgba(255, 255, 255, .22); border-left: 2px solid #e8d6a9; color: var(--white); font-size: 13px; line-height: 1.48; }
.team-stage__result b { display: block; margin-bottom: 6px; color: #e8d6a9; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.team-status { min-height: 1em; margin: 19px 0 0; color: rgba(255, 253, 248, .52); font-size: 11px; }

.team-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.team-route li { position: relative; min-height: 92px; padding: 24px 16px 18px 0; color: rgba(255, 253, 248, .52); font-size: 11px; line-height: 1.25; }
.team-route li:not(:first-child) { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .18); }
.team-route li::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; border-top: 2px solid #e8d6a9; transition: width .32s ease; }
.team-route li.is-complete { color: var(--white); }
.team-route li.is-complete::before { width: 100%; }
.team-route span { display: block; margin-bottom: 8px; color: #e8d6a9; font: italic 17px var(--serif); }

@media (max-width: 950px) {
  .team-console__intro { grid-template-columns: 1fr; gap: 20px; }
  .team-stage { grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr); }
  .team-stage__copy { padding: 34px; }
}

.hero__photo {
  background-image: linear-gradient(90deg, var(--ink) 0%, var(--ink) 52%, rgba(38, 40, 39, .9) 56%, rgba(38, 40, 39, .42) 61%, transparent 66%), var(--scene-current);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #c5c8c6;
  filter: saturate(.83) brightness(.9);
}

.configurator__image {
  background-image: linear-gradient(0deg, rgba(17, 19, 18, .55), rgba(17, 19, 18, .02) 57%), var(--scene-current);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.79) brightness(.83);
}

.hero__photo::after,
.configurator__image::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity .34s ease;
}

.hero__photo::after {
  background-image: linear-gradient(90deg, var(--ink) 0%, var(--ink) 52%, rgba(38, 40, 39, .9) 56%, rgba(38, 40, 39, .42) 61%, transparent 66%), var(--scene-next);
}

.configurator__image::after {
  background-image: linear-gradient(0deg, rgba(17, 19, 18, .55), rgba(17, 19, 18, .02) 57%), var(--scene-next);
}

.hero__photo.is-fading::after,
.configurator__image.is-fading::after {
  opacity: 1;
}

.projects__gallery img {
  background: #d9d1c4;
}

.manifesto__economy {
  max-width: 610px;
  margin: 24px 0 0;
  padding: 13px 0 0 15px;
  border-top: 1px solid rgba(255, 255, 255, .42);
  border-left: 2px solid #ead4a6;
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
}

.proof-band {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 22px var(--page);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.proof-band p {
  display: grid;
  grid-template-columns: minmax(112px, auto) 1fr;
  gap: 13px;
  align-items: baseline;
  margin: 0;
}

.proof-band strong {
  font: italic 25px/1 var(--serif);
  letter-spacing: -.04em;
}

.proof-band span,
.proof-band a {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

.proof-band a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.proof-band a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .team-console { padding-block: 58px; }

  .team-console::before { background-size: 48px 48px; mask-image: linear-gradient(180deg, black, transparent 78%); }

  .team-console h2 { font-size: clamp(39px, 12vw, 52px); }

  .team-console__company { margin-top: 20px; }

  .team-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }

  .team-ledger div { min-height: 94px; padding: 14px 12px 15px 0; }
  .team-ledger div:nth-child(2) { border-right: 0; }
  .team-ledger div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .2); }
  .team-ledger div:nth-child(3) { padding-left: 0; }
  .team-ledger div:nth-child(4) { padding-left: 12px; }
  .team-ledger dt { font-size: 25px; }
  .team-ledger dd { font-size: 10px; }

  .team-console__panel { margin-top: 34px; margin-inline: calc(var(--page) * -1); }

  .team-rail {
    position: relative;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .team-rail::-webkit-scrollbar { display: none; }

  .team-console__panel::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: 1px;
    right: 0;
    width: 34px;
    height: 107px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #202322 94%);
  }

  .team-trigger {
    flex: 0 0 184px;
    min-height: 108px;
    scroll-snap-align: start;
    padding: 14px 16px;
  }

  .team-trigger strong { margin-top: 13px; font-size: 14px; }
  .team-stage { grid-template-columns: 1fr; min-height: 0; }
  .team-stage__portrait { min-height: 330px; }
  .team-stage__portrait img { object-position: center bottom; }
  .team-stage__copy { min-height: 370px; padding: 31px var(--page) 37px; }
  .team-stage__copy h3 { font-size: clamp(34px, 10vw, 47px); }
  .team-stage__copy > p:not(.technical-label):not(.team-stage__result):not(.team-status) { font-size: 14px; }
  .team-route { margin-inline: var(--page); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-route li { min-height: 78px; padding: 16px 10px 14px 0; }
  .team-route li:not(:first-child) { padding-left: 12px; }
  .team-route li:nth-child(3) { border-left: 0; padding-left: 0; }
  .team-route li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .18); }

  .hero h1 {
    max-width: none;
    font-size: 38px;
    letter-spacing: -.06em;
    line-height: 1.01;
  }

  .hero__eyebrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px auto;
    gap: 7px;
    align-items: center;
    max-width: 100%;
    line-height: 1.35;
  }

  .hero__eyebrow .hero__eyebrow-place,
  .hero__eyebrow .hero__eyebrow-brand,
  .hero__eyebrow .hero__eyebrow-rule {
    display: block;
    width: auto;
    margin: 0;
    border: 0;
  }

  .hero__eyebrow .hero__eyebrow-rule {
    width: 22px;
    border-top: 1px solid currentColor;
  }

  .hero__eyebrow .hero__eyebrow-brand {
    white-space: nowrap;
    letter-spacing: .1em;
  }

  .hero__palette {
    top: -115px;
    right: 18px;
    bottom: auto;
  }

  .hero__architecture {
    overflow: visible;
  }

  .hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    justify-content: initial;
  }

  .hero__proof li,
  .hero__proof span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hero__proof span {
    font-size: 8px;
    line-height: 1.25;
  }

  .configurator__controls,
  .control-group {
    min-width: 0;
  }

  .configurator__controls .swatches {
    max-width: 100%;
  }

  .proof-band {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }

  .proof-band p {
    grid-template-columns: 110px 1fr;
  }
}

/* Visual/wow pass — upper narrative: a physical image, information layer and response in every act. */
.scenario-wow,
.material-passport,
.roof-cutaway,
.honest-estimate {
  position: relative;
  overflow: hidden;
}

.scenario-wow h2,
.material-passport h2,
.roof-cutaway h2,
.honest-estimate h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 560;
  line-height: .96;
  letter-spacing: -.06em;
}

.scenario-wow button:focus-visible,
.material-passport button:focus-visible,
.roof-cutaway button:focus-visible,
.honest-estimate button:focus-visible {
  outline: 3px solid #e8d6a9;
  outline-offset: 3px;
}

.scenario-wow {
  color: var(--ink);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .64), transparent 44%),
    linear-gradient(180deg, #e8e1d6, #d8cdbd);
}

.scenario-wow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(90deg, rgba(38, 40, 39, .06) 1px, transparent 1px),
    linear-gradient(rgba(38, 40, 39, .045) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
}

.scenario-wow__head,
.material-passport__head,
.roof-cutaway__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(36px, 8vw, 130px);
  align-items: end;
  max-width: 1200px;
  margin: 0 auto 46px;
}

.scenario-wow__head > p,
.material-passport__head > p,
.roof-cutaway__head > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.scenario-wow__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
  max-width: 1200px;
  min-height: 650px;
  margin: 0 auto;
  border: 1px solid rgba(38, 40, 39, .45);
  box-shadow: 0 34px 75px rgba(44, 34, 25, .18);
}

.scenario-wow__media {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  background: #353735;
}

.scenario-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition: opacity .48s ease, transform .7s ease, visibility .48s ease;
}

.scenario-frame.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.scenario-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 22, 21, .1), transparent 42%, rgba(19, 22, 21, .78));
}

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

.scenario-frame figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 21px;
  max-width: 340px;
  color: rgba(255, 253, 248, .76);
  font-size: 11px;
  letter-spacing: .04em;
  text-align: right;
}

.scenario-wow__media::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -14%;
  width: 12%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 228, .66), transparent);
  transform: skewX(-12deg);
}

.scenario-wow__media.is-switching::after {
  animation: scenario-wipe .56s cubic-bezier(.2, .72, .25, 1);
}

.scenario-wow__proof {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 44px);
}

.scenario-wow__proof span,
.scenario-wow__proof a {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(25, 28, 27, .76);
  color: rgba(255, 253, 248, .78);
  font-size: 10px;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.scenario-wow__proof b { color: var(--white); }
.scenario-wow__proof a:hover { background: rgba(25, 28, 27, .94); }

.scenario-check {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 22px;
  width: min(390px, calc(100% - 44px));
  padding: 22px 24px;
  background: rgba(245, 240, 231, .93);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
  transition: transform .24s ease, opacity .2s ease;
}

.scenario-check.is-switching { opacity: .2; transform: translateY(10px); }
.scenario-check h3 { margin: 0 0 12px; font: italic 30px/1 var(--serif); letter-spacing: -.04em; }
.scenario-check ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 12px; }
.scenario-check li::before { content: '—'; margin-right: 8px; color: var(--oxide); }

.scenario-wow__controls {
  display: grid;
  grid-template-rows: 1fr 1fr;
  background: #f4efe6;
}

.scenario-wow .scenario-choice {
  display: grid;
  grid-template-columns: 74px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 4px 14px;
  min-height: 0;
  padding: 24px;
  border: 0;
  border-bottom: 1px solid rgba(38, 40, 39, .34);
  background: transparent;
  color: var(--ink);
  transition: background .22s ease, color .22s ease;
}

.scenario-wow .scenario-choice:last-child { border: 0; }
.scenario-wow .scenario-choice img { grid-row: 1 / 4; width: 74px; height: 92px; object-fit: cover; filter: saturate(.62); }
.scenario-wow .scenario-choice span { grid-column: 2; font: italic 16px var(--serif); }
.scenario-wow .scenario-choice strong { grid-column: 2; max-width: none; margin: 5px 0 0; font-size: 23px; line-height: 1.05; }
.scenario-wow .scenario-choice small { grid-column: 2; max-width: 180px; margin: 9px 0 0; font-size: 11px; line-height: 1.42; opacity: .7; }
.scenario-wow .scenario-choice:hover { background: #ded6ca; color: var(--ink); }
.scenario-wow .scenario-choice.is-active { background: var(--ink); color: var(--white); }
.scenario-wow .scenario-choice.is-active img { filter: saturate(.95); }

.material-passport {
  color: var(--white);
  background: #242826;
}

.material-passport::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .19;
  pointer-events: none;
  background: url('../assets/img/wow/metal-caliper-macro-v1.webp') center/cover;
  filter: grayscale(.5);
}

.material-passport::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 25, 24, .55), #242826 76%);
}

.material-passport__head,
.material-passport__stage { position: relative; z-index: 1; }
.material-passport__head > p { color: rgba(255, 253, 248, .7); }

.material-passport__stage {
  min-height: 700px;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: #121514;
  box-shadow: 0 35px 80px rgba(0, 0, 0, .35);
}

.material-passport__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.78) contrast(1.06) brightness(.82);
  transition: transform .65s ease, filter .45s ease;
}

.material-passport__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 16, 15, .86), transparent 48%),
    linear-gradient(0deg, rgba(13, 16, 15, .7), transparent 42%);
  pointer-events: none;
}

.material-passport__glint {
  position: absolute;
  z-index: 2;
  top: -20%;
  bottom: -20%;
  left: -28%;
  width: 16%;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 220, .62), transparent);
  transform: skewX(-18deg);
  animation: material-glint 1.9s .45s cubic-bezier(.23, .72, .32, 1) both;
  pointer-events: none;
}

.material-passport__markers {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 34px;
  display: grid;
  width: min(330px, calc(100% - 68px));
  border-top: 1px solid rgba(255, 255, 255, .42);
}

.material-marker {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  min-height: 66px;
  padding: 0 12px 0 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: rgba(255, 253, 248, .62);
  text-align: left;
  transition: background .2s ease, color .2s ease, padding .2s ease;
}

.material-marker i { font: italic 17px var(--serif); color: #e8d6a9; }
.material-marker span { font-size: 12px; font-weight: 650; letter-spacing: .03em; }
.material-marker:hover { color: var(--white); padding-left: 7px; }
.material-marker.is-active { color: var(--white); background: rgba(255, 255, 255, .12); padding-left: 12px; }

.material-card {
  position: absolute;
  z-index: 3;
  right: 34px;
  bottom: 34px;
  width: min(460px, calc(100% - 68px));
  min-height: 290px;
  padding: 31px 34px;
  background: rgba(245, 240, 231, .95);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
  transition: opacity .18s ease, transform .24s ease;
}

.material-card.is-switching { opacity: .2; transform: translateY(10px); }
.material-card h3 { margin: 0 0 18px; font: italic clamp(33px, 4vw, 51px)/.95 var(--serif); letter-spacing: -.05em; }
.material-card > p:not(.technical-label) { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.58; }
.material-card .material-card__note { margin-top: 23px !important; padding-top: 15px; border-top: 1px solid var(--line); font-size: 11px !important; }

.roof-cutaway {
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 10%, rgba(169, 67, 45, .11), transparent 30%),
    linear-gradient(135deg, #f5f0e7, #ddd4c7);
}

.roof-cutaway::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image: linear-gradient(115deg, transparent 48%, rgba(38, 40, 39, .065) 49%, transparent 50%);
  background-size: 76px 76px;
}

.roof-cutaway__head,
.roof-cutaway__layout { position: relative; z-index: 1; }
.roof-cutaway__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); max-width: 1200px; margin: 0 auto; border: 1px solid rgba(38, 40, 39, .46); background: #f8f3eb; box-shadow: 0 30px 70px rgba(42, 35, 28, .14); }

.roof-cutaway__visual {
  position: relative;
  min-height: 670px;
  overflow: hidden;
  background: #ded7cd;
}

.roof-cutaway__visual > img { display: block; width: 100%; height: 100%; min-height: 670px; object-fit: cover; object-position: center; transition: transform .42s ease, filter .35s ease; }
.roof-cutaway__visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(30, 31, 29, .42), transparent 34%); }

.cutaway-highlight {
  position: absolute;
  z-index: 2;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 253, 248, .8);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.68);
  box-shadow: 0 0 0 10px rgba(169, 67, 45, .2), inset 0 0 45px rgba(232, 214, 169, .35);
  transition: opacity .25s ease, transform .34s ease;
}

.cutaway-highlight::after { content: ''; position: absolute; inset: 50% auto auto 100%; width: 72px; border-top: 1px solid rgba(255, 253, 248, .86); }
.cutaway-highlight.is-active { opacity: 1; transform: scale(1); }
.cutaway-highlight--metal { top: 15%; left: 51%; }
.cutaway-highlight--vent { top: 31%; left: 35%; }
.cutaway-highlight--membrane { top: 49%; left: 28%; }
.cutaway-highlight--nodes { top: 23%; right: 8%; }

.roof-cutaway__caption { position: absolute; z-index: 3; left: 24px; bottom: 20px; max-width: 390px; margin: 0; color: rgba(255, 253, 248, .76); font-size: 10px; letter-spacing: .03em; }
.roof-cutaway__console { display: grid; grid-template-rows: auto 1fr; border-left: 1px solid rgba(38, 40, 39, .34); }
.cutaway-tabs { display: grid; grid-template-columns: 1fr; }
.cutaway-tab { display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 62px; padding: 0 18px; border: 0; border-bottom: 1px solid rgba(38, 40, 39, .2); background: transparent; color: var(--ink-soft); text-align: left; transition: background .2s ease, color .2s ease; }
.cutaway-tab span { font: italic 16px var(--serif); color: var(--oxide); }
.cutaway-tab:hover { background: #ebe3d8; color: var(--ink); }
.cutaway-tab.is-active { background: var(--ink); color: var(--white); }
.cutaway-tab.is-active span { color: #e8d6a9; }

.cutaway-panel { align-self: stretch; padding: 32px; background: #f8f3eb; transition: opacity .18s ease, transform .24s ease; }
.cutaway-panel.is-switching { opacity: .18; transform: translateY(8px); }
.cutaway-panel h3 { margin: 0 0 16px; font: italic clamp(30px, 3vw, 46px)/.98 var(--serif); letter-spacing: -.05em; }
.cutaway-panel > p:not(.technical-label) { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.cutaway-panel dl { margin: 25px 0 0; border-top: 1px solid var(--line); }
.cutaway-panel dl div { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cutaway-panel dt { font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.cutaway-panel dd { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }

.honest-estimate {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(52px, 8vw, 130px);
  align-items: center;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(132, 43, 26, .96), rgba(146, 52, 32, .7) 46%, rgba(64, 41, 34, .36)),
    url('../assets/img/wow/metal-caliper-macro-v1.webp') center/cover;
}

.honest-estimate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg, transparent 0 72px, rgba(255, 255, 255, .055) 73px, transparent 74px 145px),
    radial-gradient(circle at 77% 24%, rgba(255, 226, 170, .23), transparent 26%);
}

.honest-estimate__copy,
.estimate-glass { position: relative; z-index: 1; }
.honest-estimate h2 { font-family: var(--serif); font-style: italic; font-weight: 400; }
.honest-estimate h2 em { color: #f0d9a4; font-style: normal; }
.honest-estimate__lead { max-width: 560px; margin: 28px 0 0; font-size: 17px; line-height: 1.52; }
.honest-estimate__copy > p:not(.eyebrow):not(.honest-estimate__lead) { max-width: 520px; margin: 22px 0 0; color: rgba(255, 253, 248, .72); font-size: 14px; line-height: 1.55; }
.honest-estimate__copy .button { margin-top: 31px; }

.estimate-glass { min-height: 680px; display: grid; place-items: center; padding: 50px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(45, 26, 22, .3); box-shadow: 0 35px 80px rgba(56, 20, 13, .28); }
.estimate-glass__light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.estimate-glass__light::after { content: ''; position: absolute; top: -28%; right: 18%; width: 18%; height: 145%; background: linear-gradient(90deg, transparent, rgba(255, 237, 202, .2), transparent); transform: rotate(16deg); }

.estimate-paper { position: relative; width: min(100%, 610px); padding: 34px 38px 31px; background: #f7f1e8; color: var(--ink); transform: rotate(-1deg); box-shadow: 0 28px 60px rgba(48, 15, 10, .42), 12px 13px 0 rgba(91, 41, 30, .23); }
.estimate-paper::before { content: ''; position: absolute; top: -12px; left: 50%; width: 74px; height: 25px; background: #272a29; border-radius: 3px 3px 9px 9px; transform: translateX(-50%); box-shadow: 0 6px 10px rgba(0, 0, 0, .22); }
.estimate-paper header { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.estimate-paper header div { display: grid; gap: 3px; }
.estimate-paper header span { font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.estimate-paper header strong { font: italic 27px var(--serif); }
.estimate-paper header small { align-self: end; color: var(--oxide); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.estimate-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border: 1px solid var(--ink); }
.estimate-switch button { min-height: 47px; padding: 8px 10px; border: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 700; }
.estimate-switch button + button { border-left: 1px solid var(--ink); }
.estimate-switch button.is-active { background: var(--ink); color: var(--white); }
.estimate-lines { margin: 20px 0 0; padding: 0; list-style: none; }
.estimate-lines li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; max-height: 62px; padding: 12px 0; overflow: hidden; border-bottom: 1px solid rgba(38, 40, 39, .19); transition: max-height .4s ease, padding .4s ease, opacity .28s ease, transform .4s ease; }
.estimate-lines span { font: italic 14px var(--serif); color: var(--oxide); }
.estimate-lines strong { font-size: 11px; }
.estimate-lines i { font-size: 9px; font-style: normal; color: var(--ink-soft); }
.honest-estimate[data-estimate-mode='discount'] .estimate-lines li.is-dropped { max-height: 0; padding-block: 0; opacity: 0; transform: translateX(78px) rotate(1.5deg); }
.estimate-paper footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 64px; padding-top: 18px; }
.estimate-paper footer p { max-width: 300px; margin: 0; font: italic 18px/1.15 var(--serif); }
.estimate-paper footer button { min-height: 42px; padding: 8px 12px; border: 1px solid var(--oxide); background: var(--oxide); color: var(--white); font-size: 10px; font-weight: 750; }
.estimate-paper footer button[hidden] { display: none; }
.estimate-glass__note { position: absolute; right: 50px; bottom: 17px; left: 50px; margin: 0; color: rgba(255, 253, 248, .62); font-size: 9px; line-height: 1.4; text-align: center; }

@keyframes scenario-wipe {
  0% { left: -14%; }
  100% { left: 114%; }
}

@keyframes material-glint {
  0% { left: -28%; opacity: 0; }
  18% { opacity: .78; }
  100% { left: 118%; opacity: 0; }
}

@media (max-width: 1020px) {
  .scenario-wow__head,
  .material-passport__head,
  .roof-cutaway__head { grid-template-columns: 1fr; gap: 20px; }
  .scenario-wow__head > p,
  .material-passport__head > p,
  .roof-cutaway__head > p { max-width: 630px; }
  .scenario-wow__stage { grid-template-columns: minmax(0, 1fr) 276px; }
  .scenario-wow .scenario-choice { grid-template-columns: 58px 1fr; padding: 18px; }
  .scenario-wow .scenario-choice img { width: 58px; height: 78px; }
  .roof-cutaway__layout { grid-template-columns: 1fr; }
  .roof-cutaway__visual { min-height: 580px; }
  .roof-cutaway__visual > img { min-height: 580px; }
  .roof-cutaway__console { border-top: 1px solid rgba(38, 40, 39, .34); border-left: 0; }
  .cutaway-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
  .cutaway-tab { grid-template-columns: 1fr; min-width: 140px; gap: 4px; padding: 13px; }
  .cutaway-panel { min-height: 330px; }
  .honest-estimate { grid-template-columns: 1fr; }
  .honest-estimate__copy { max-width: 760px; }
}

@media (max-width: 640px) {
  .scenario-wow,
  .material-passport,
  .roof-cutaway,
  .honest-estimate { padding-block: 62px; }

  .scenario-wow h2,
  .material-passport h2,
  .roof-cutaway h2,
  .honest-estimate h2 { font-size: clamp(39px, 12vw, 52px); }

  .scenario-wow__head,
  .material-passport__head,
  .roof-cutaway__head { margin-bottom: 28px; }
  .scenario-wow__head > p,
  .material-passport__head > p,
  .roof-cutaway__head > p { font-size: 14px; }

  .scenario-wow__stage { display: block; min-height: 0; margin-inline: calc(var(--page) * -1); border-inline: 0; }
  .scenario-wow__media { min-height: 550px; }
  .scenario-wow__proof { top: 14px; left: 14px; max-width: calc(100% - 28px); }
  .scenario-wow__proof span,
  .scenario-wow__proof a { padding: 7px 8px; font-size: 8px; }
  .scenario-check { right: 14px; bottom: 14px; left: 14px; width: auto; padding: 20px; }
  .scenario-check h3 { font-size: 27px; }
  .scenario-frame figcaption { right: 16px; bottom: 246px; left: 16px; font-size: 9px; text-align: left; }
  .scenario-wow__controls { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .scenario-wow .scenario-choice { display: flex; min-height: 228px; padding: 14px; border-right: 1px solid rgba(38, 40, 39, .34); border-bottom: 0; }
  .scenario-wow .scenario-choice:last-child { border-right: 0; }
  .scenario-wow .scenario-choice img { width: 100%; height: 74px; object-fit: cover; }
  .scenario-wow .scenario-choice span { margin-top: 9px; }
  .scenario-wow .scenario-choice strong { margin-top: 2px; font-size: 18px; }
  .scenario-wow .scenario-choice small { margin-top: auto; font-size: 9px; }

  .material-passport::before { opacity: .12; }
  .material-passport__stage { min-height: 760px; margin-inline: calc(var(--page) * -1); }
  .material-passport__image { object-position: 60% center; }
  .material-passport__stage::after { background: linear-gradient(180deg, rgba(13, 16, 15, .64), transparent 38%, rgba(13, 16, 15, .9) 72%); }
  .material-passport__markers { top: 14px; right: 14px; left: 14px; display: flex; width: auto; overflow-x: auto; border: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .material-passport__markers::-webkit-scrollbar { display: none; }
  .material-marker { flex: 0 0 153px; grid-template-columns: 28px 1fr; min-height: 58px; padding: 8px; border: 1px solid rgba(255, 255, 255, .28); scroll-snap-align: start; }
  .material-marker + .material-marker { border-left: 0; }
  .material-marker:hover,
  .material-marker.is-active { padding-left: 8px; }
  .material-card { right: 14px; bottom: 14px; left: 14px; width: auto; min-height: 300px; padding: 26px 23px; }
  .material-card h3 { font-size: 39px; }

  .roof-cutaway__layout { margin-inline: calc(var(--page) * -1); border-inline: 0; }
  .roof-cutaway__visual { min-height: 430px; }
  .roof-cutaway__visual > img { min-height: 430px; object-position: 53% center; }
  .cutaway-highlight { width: 78px; }
  .cutaway-highlight::after { width: 38px; }
  .cutaway-highlight--metal { top: 14%; left: 49%; }
  .cutaway-highlight--vent { top: 31%; left: 29%; }
  .cutaway-highlight--membrane { top: 48%; left: 21%; }
  .cutaway-highlight--nodes { top: 22%; right: 4%; }
  .roof-cutaway__caption { right: 14px; bottom: 13px; left: 14px; font-size: 9px; }
  .cutaway-tabs { display: flex; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cutaway-tabs::-webkit-scrollbar { display: none; }
  .cutaway-tab { flex: 0 0 155px; min-width: 155px; min-height: 76px; scroll-snap-align: start; }
  .cutaway-panel { min-height: 380px; padding: 27px var(--page) 34px; }
  .cutaway-panel h3 { font-size: 39px; }
  .cutaway-panel dl div { grid-template-columns: 72px 1fr; }

  .honest-estimate { gap: 42px; background-position: 60% center; }
  .honest-estimate__lead { font-size: 15px; }
  .estimate-glass { min-height: 650px; margin-inline: calc(var(--page) * -1); padding: 37px 13px 52px; border-inline: 0; }
  .estimate-paper { width: 100%; padding: 27px 18px 24px; transform: rotate(-.4deg); }
  .estimate-paper header strong { font-size: 23px; }
  .estimate-switch button { min-height: 50px; font-size: 9px; }
  .estimate-lines li { grid-template-columns: 24px 1fr auto; gap: 7px; }
  .estimate-lines strong { font-size: 10px; }
  .estimate-paper footer { align-items: flex-start; flex-direction: column; }
  .estimate-paper footer p { font-size: 17px; }
  .estimate-glass__note { right: 16px; left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .scenario-frame,
  .scenario-check,
  .material-passport__image,
  .material-card,
  .cutaway-highlight,
  .cutaway-panel,
  .estimate-lines li { transition: none !important; }
  .scenario-wow__media.is-switching::after,
  .material-passport__glint { animation: none !important; }
}

/* Visual/wow pass — lower narrative. */
.project-journey,
.projects-showcase,
.contract-estimate,
.faq-visual,
.final-photo-cta {
  position: relative;
  overflow: hidden;
}

.project-journey h2,
.projects-showcase h2,
.contract-estimate h2,
.faq-visual h2,
.final-photo-cta h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 560;
  line-height: .96;
  letter-spacing: -.06em;
}

.project-journey button:focus-visible,
.projects-showcase button:focus-visible,
.contract-estimate button:focus-visible,
.contract-estimate input:focus-visible,
.faq-visual summary:focus-visible,
.final-photo-cta button:focus-visible {
  outline: 3px solid #e8d6a9;
  outline-offset: 3px;
}

.project-journey {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 12%, rgba(129, 144, 143, .2), transparent 26%),
    linear-gradient(135deg, #ede7dd, #d9d0c2);
}

.project-journey::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(90deg, rgba(38, 40, 39, .055) 1px, transparent 1px),
    linear-gradient(rgba(38, 40, 39, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, black, transparent 78%);
}

.project-journey__head,
.project-journey__stage,
.project-journey__controls {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
}

.project-journey__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: clamp(36px, 8vw, 130px);
  align-items: end;
  margin-bottom: 45px;
}

.project-journey__head > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.project-journey__stage {
  min-height: 690px;
  overflow: hidden;
  border: 1px solid rgba(38, 40, 39, .48);
  background: #262827;
  box-shadow: 0 36px 75px rgba(42, 35, 28, .2);
}

.journey-frame {
  position: absolute;
  inset: 0;
  display: block !important;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .42s ease, transform .66s ease, visibility .42s ease;
}

.journey-frame.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.journey-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 20, 19, .9), rgba(17, 20, 19, .18) 63%), linear-gradient(0deg, rgba(17, 20, 19, .52), transparent 45%);
  pointer-events: none;
}

.journey-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.journey-frame[data-journey-frame='survey'] img { object-position: 70% 20%; }
.journey-frame figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 6vw, 82px);
  bottom: clamp(30px, 7vw, 86px);
  width: min(540px, calc(100% - 56px));
  color: var(--white);
}

.journey-frame figcaption span {
  display: block;
  margin-bottom: 18px;
  color: #e8d6a9;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.journey-frame figcaption strong {
  display: block;
  font: italic clamp(38px, 5vw, 66px)/.96 var(--serif);
  letter-spacing: -.055em;
}

.journey-frame figcaption p {
  max-width: 500px;
  margin: 22px 0 0;
  color: rgba(255, 253, 248, .78);
  font-size: 14px;
  line-height: 1.55;
}

.project-journey__controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-right: 1px solid rgba(38, 40, 39, .45);
  border-bottom: 1px solid rgba(38, 40, 39, .45);
  border-left: 1px solid rgba(38, 40, 39, .45);
  background: #f5f0e7;
}

.journey-step {
  position: relative;
  display: grid;
  min-height: 130px;
  padding: 21px;
  border: 0;
  border-right: 1px solid rgba(38, 40, 39, .25);
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background .22s ease, color .22s ease;
}

.journey-step:last-child { border-right: 0; }
.journey-step::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--oxide); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.journey-step span { font: italic 17px var(--serif); color: var(--oxide); }
.journey-step strong { align-self: end; margin-top: 22px; font-size: 14px; }
.journey-step small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }
.journey-step:hover { background: #e6ddd1; }
.journey-step.is-active { background: var(--ink); color: var(--white); }
.journey-step.is-active span { color: #e8d6a9; }
.journey-step.is-active small { color: rgba(255, 253, 248, .6); }
.journey-step.is-active::after { transform: scaleX(1); }

.projects-showcase {
  --projects-bg: url('../assets/img/met_1.webp');
  color: var(--white);
  background: #202322;
}

.projects-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .72;
  pointer-events: none;
  background-image: var(--projects-bg);
  background-position: center 32%;
  background-size: cover;
  filter: saturate(.78) contrast(1.04);
  transform: scale(1.035);
  transition: opacity .28s ease, background-image .28s ease;
}

.projects-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 23, 22, .86) 0%, rgba(20, 23, 22, .55) 53%, rgba(20, 23, 22, .25) 100%),
    linear-gradient(180deg, rgba(20, 23, 22, .12) 0%, rgba(20, 23, 22, .34) 31%, #202322 72%);
}

.projects-showcase .projects__head,
.projects-showcase__stage,
.projects-filmstrip { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; }
.projects-showcase .projects__head { margin-bottom: 45px; }
.projects-showcase .projects__head > p { color: rgba(255, 253, 248, .68); }

.projects-showcase__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 650px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: #111413;
  box-shadow: 0 35px 82px rgba(0, 0, 0, .38);
}

.projects-feature {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 650px;
  padding: 0;
  border: 0;
  background: #101312;
  color: var(--white);
}

.projects-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 16, 15, .72), transparent 45%); pointer-events: none; }
.projects-feature img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease, transform .62s ease; }
.projects-feature:hover img { transform: scale(1.018); }
.projects-feature.is-switching img { opacity: .22; transform: scale(1.03); }
.projects-feature > span { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 11px; text-align: left; }
.projects-feature > span i { font-style: normal; color: #e8d6a9; white-space: nowrap; }

.projects-showcase__note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 35px 30px;
  background:
    linear-gradient(160deg, rgba(60, 71, 68, .96), rgba(32, 35, 34, .96) 70%),
    var(--projects-bg) center/cover;
}

.projects-showcase__note h3 { margin: 0; font: italic 42px/.98 var(--serif); letter-spacing: -.05em; }
.projects-showcase__note > p:not(.technical-label) { margin: 20px 0 0; color: rgba(255, 253, 248, .66); font-size: 12px; line-height: 1.55; }

.projects-filmstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-right: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  border-left: 1px solid rgba(255, 255, 255, .25);
}

.project-thumb {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 106px;
  padding: 13px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: rgba(255, 253, 248, .6);
  text-align: left;
  transition: background .2s ease, color .2s ease;
}

.project-thumb:last-child { border-right: 0; }
.project-thumb img { width: 82px; height: 65px; object-fit: cover; filter: saturate(.55); }
.project-thumb span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.project-thumb:hover { background: rgba(255, 255, 255, .07); color: var(--white); }
.project-thumb.is-active { background: rgba(255, 255, 255, .13); color: var(--white); box-shadow: inset 0 -3px 0 #e8d6a9; }
.project-thumb.is-active img { filter: saturate(.9); }

.contract-estimate {
  min-height: 980px;
  color: var(--ink);
  background: #c9bba6;
}

.contract-estimate__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(1.02) brightness(.82);
}

.contract-estimate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 240, 231, .92), rgba(245, 240, 231, .54) 48%, rgba(24, 28, 27, .42));
}

.contract-estimate__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(440px, .76fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.contract-estimate__copy > p:not(.eyebrow) { max-width: 590px; margin: 24px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

.contract-sheet {
  position: relative;
  width: min(100%, 590px);
  margin-top: 42px;
  padding: 34px 39px;
  background: rgba(250, 246, 238, .96);
  box-shadow: 0 30px 70px rgba(65, 47, 31, .26), 12px 12px 0 rgba(74, 56, 40, .13);
  transform: rotate(-.7deg);
}

.contract-sheet::before { content: ''; position: absolute; top: -13px; left: 50%; width: 76px; height: 26px; border-radius: 4px 4px 10px 10px; background: #282b2a; transform: translateX(-50%); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); }
.contract-sheet header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--ink); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.contract-sheet header small { color: var(--oxide); }
.contract-sheet__guarantee { display: flex; gap: 17px; align-items: end; padding: 20px 0 7px; }
.contract-sheet__guarantee strong { font: italic 94px/.75 var(--serif); letter-spacing: -.08em; color: var(--oxide); }
.contract-sheet__guarantee span { font-size: 14px; font-weight: 750; line-height: 1.05; text-transform: uppercase; }
.contract-sheet h3 { margin: 18px 0 0; font: italic 31px/1 var(--serif); }
.contract-sheet ul { display: grid; gap: 7px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; }
.contract-sheet li::before { content: '—'; margin-right: 8px; color: var(--oxide); }
.contract-sheet > p { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.45; }

.contract-upload {
  display: grid;
  gap: 16px;
  padding: clamp(30px, 4vw, 50px);
  background: rgba(31, 35, 34, .94);
  color: var(--white);
  box-shadow: 0 34px 80px rgba(27, 23, 19, .38);
  backdrop-filter: blur(8px);
}

.contract-upload__head h3 { margin: 0; font: italic clamp(33px, 3.2vw, 47px)/.98 var(--serif); letter-spacing: -.05em; }
.contract-upload__head > p:not(.technical-label) { margin: 15px 0 8px; color: rgba(255, 253, 248, .65); font-size: 11px; }
.contract-upload .form-field { display: grid; gap: 7px; color: rgba(255, 253, 248, .78); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contract-upload .form-field input { width: 100%; min-height: 58px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; background: rgba(255, 255, 255, .08); color: var(--white); font-size: 18px; letter-spacing: normal; text-transform: none; transition: border-color .2s ease, background .2s ease; }
.contract-upload .form-field input::placeholder { color: rgba(255, 253, 248, .45); }
.contract-upload .form-field input:focus { border-color: #e8d6a9; background: rgba(255, 255, 255, .13); outline: 0; }
.contract-upload .form-field small { color: rgba(255, 253, 248, .5); font-size: 9px; font-weight: 400; letter-spacing: normal; text-transform: none; }

.estimate-dropzone {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 3px 14px;
  align-items: center;
  min-height: 136px;
  padding: 20px;
  border: 1px dashed rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.estimate-dropzone:hover,
.estimate-dropzone.is-dragging { border-color: #e8d6a9; background: rgba(232, 214, 169, .1); transform: translateY(-2px); }
.estimate-dropzone > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.estimate-dropzone__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 64px; border: 1px solid rgba(255, 255, 255, .38); color: #e8d6a9; font-size: 27px; }
.estimate-dropzone > strong { align-self: end; font-size: 13px; }
.estimate-dropzone > small { align-self: start; color: rgba(255, 253, 248, .54); font-size: 10px; }
.estimate-file-preview { grid-column: 1 / -1; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; margin-top: 10px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .24); }
.estimate-file-preview[hidden] { display: none; }
.estimate-file-preview i { display: grid; place-items: center; min-height: 33px; background: var(--oxide); color: var(--white); font-size: 9px; font-style: normal; font-weight: 750; }
.estimate-file-preview b { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.estimate-file-preview small { color: rgba(255, 253, 248, .52); font-size: 9px; white-space: nowrap; }
.contract-upload .consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: rgba(255, 253, 248, .58); font-size: 9px; line-height: 1.45; }
.contract-upload .consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--oxide); }
.contract-upload .button { justify-self: stretch; min-height: 58px; border-color: var(--white); background: var(--white); color: var(--ink); }
.contract-upload .button:hover { background: #e8d6a9; }
.contract-upload .form-status { min-height: 20px; margin: 0; color: rgba(255, 253, 248, .64); font-size: 10px; }
.contract-upload .form-status[data-type='error'] { color: #ffb5a6; }
.contract-upload .form-status[data-type='success'] { color: #cfe7c7; }

.faq-visual {
  color: var(--ink);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .62), transparent 46%),
    #e7dfd2;
}

.faq-visual::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: repeating-linear-gradient(110deg, transparent 0 74px, rgba(38, 40, 39, .07) 75px, transparent 76px 148px); }
.faq-visual__head,
.faq-visual__layout { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; }
.faq-visual__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr); gap: 28px 90px; align-items: end; margin-bottom: 46px; }
.faq-visual__head .eyebrow { grid-column: 1 / -1; margin-bottom: -12px; }
.faq-visual__head > p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.faq-visual__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(430px, 1.15fr); gap: clamp(38px, 7vw, 100px); align-items: start; }

.faq-visual__stage {
  position: sticky;
  top: 24px;
  min-height: 620px;
  overflow: hidden;
  background: #ccc2b3;
  box-shadow: 0 28px 64px rgba(49, 40, 32, .2);
}

.faq-visual__stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 27, 26, .82), transparent 52%); pointer-events: none; }
.faq-visual__stage > img { display: block; width: 100%; height: 620px; object-fit: cover; object-position: center; transition: transform .42s ease, filter .3s ease; }
.faq-marker { position: absolute; z-index: 2; width: 92px; aspect-ratio: 1; border: 1px solid rgba(255, 253, 248, .85); border-radius: 50%; opacity: 0; transform: scale(.62); box-shadow: 0 0 0 10px rgba(169, 67, 45, .22), inset 0 0 38px rgba(232, 214, 169, .34); transition: opacity .25s ease, transform .32s ease; }
.faq-marker.is-active { opacity: 1; transform: scale(1); }
.faq-marker--noise { top: 22%; left: 52%; }
.faq-marker--condensation { top: 39%; left: 35%; }
.faq-marker--metal { top: 14%; left: 59%; }
.faq-marker--replace { top: 46%; left: 22%; }
.faq-marker--estimate { top: 29%; right: 10%; }
.faq-marker--region { top: 17%; right: 18%; }
.faq-visual__caption { position: absolute; z-index: 3; right: 25px; bottom: 24px; left: 25px; color: var(--white); transition: opacity .18s ease, transform .24s ease; }
.faq-visual__caption.is-switching { opacity: .18; transform: translateY(8px); }
.faq-visual__caption strong { display: block; max-width: 440px; font: italic 32px/1 var(--serif); letter-spacing: -.04em; }
.faq-visual__caption span { display: block; max-width: 450px; margin-top: 12px; color: rgba(255, 253, 248, .65); font-size: 11px; line-height: 1.45; }

.faq-visual__list { border-top: 1px solid rgba(38, 40, 39, .42); }
.faq-visual__list details { border-bottom: 1px solid rgba(38, 40, 39, .35); }
.faq-visual__list summary { position: relative; display: flex; min-height: 82px; padding: 23px 54px 23px 0; align-items: center; cursor: pointer; list-style: none; font-size: 18px; font-weight: 650; line-height: 1.25; }
.faq-visual__list summary::-webkit-details-marker { display: none; }
.faq-visual__list summary::after { content: '+'; position: absolute; top: 50%; right: 6px; color: var(--oxide); font: italic 30px/1 var(--serif); transform: translateY(-50%); }
.faq-visual__list details[open] summary::after { content: '−'; }
.faq-visual__list details[open] summary { color: var(--oxide); }
.faq-visual__list details p { max-width: 650px; margin: -5px 0 0; padding: 0 58px 27px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.final-photo-cta {
  min-height: 790px;
  display: flex;
  align-items: end;
  color: var(--white);
  background: #252827;
}

.final-photo-cta__image {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center;
  animation: final-ken-burns 18s ease-in-out infinite alternate;
}

.final-photo-cta::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(20, 23, 22, .84), rgba(20, 23, 22, .2) 67%), linear-gradient(0deg, rgba(20, 23, 22, .72), transparent 52%); pointer-events: none; }
.final-photo-cta::after { content: ''; position: absolute; z-index: 1; top: -35%; bottom: -35%; left: -24%; width: 13%; background: linear-gradient(90deg, transparent, rgba(255, 240, 201, .2), transparent); transform: skewX(-15deg); animation: final-light 9s 2s ease-in-out infinite; pointer-events: none; }
.final-photo-cta__copy { position: relative; z-index: 2; width: min(780px, 100%); padding-bottom: 38px; }
.final-photo-cta__copy h2 { font-family: var(--serif); font-style: italic; font-weight: 400; }
.final-photo-cta__copy > p:not(.eyebrow) { max-width: 590px; margin: 26px 0 0; color: rgba(255, 253, 248, .76); font-size: 16px; line-height: 1.55; }
.final-photo-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
.final-photo-cta__callback { min-height: 55px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(19, 22, 21, .28); color: var(--white); font-weight: 650; backdrop-filter: blur(7px); }
.final-photo-cta__callback i { margin-left: 24px; font-style: normal; }
.final-photo-cta__callback:hover { background: rgba(255, 255, 255, .14); }
.final-photo-cta__caption { position: absolute; z-index: 2; right: var(--page); bottom: 34px; max-width: 320px; margin: 0; color: rgba(255, 253, 248, .56); font-size: 10px; letter-spacing: .07em; text-align: right; text-transform: uppercase; }

@keyframes final-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.055) translate3d(-.7%, -.35%, 0); }
}

@keyframes final-light {
  0%, 24% { left: -24%; opacity: 0; }
  42% { opacity: .65; }
  67%, 100% { left: 112%; opacity: 0; }
}

@media (max-width: 1020px) {
  .project-journey__head,
  .faq-visual__head { grid-template-columns: 1fr; gap: 20px; }
  .project-journey__head > p,
  .faq-visual__head > p:not(.eyebrow) { max-width: 650px; }
  .faq-visual__head .eyebrow { grid-column: 1; margin-bottom: 0; }
  .projects-showcase__stage { grid-template-columns: 1fr; }
  .projects-feature { min-height: 590px; }
  .projects-showcase__note { min-height: 220px; }
  .contract-estimate__content { grid-template-columns: 1fr; }
  .contract-estimate__copy { max-width: 760px; }
  .contract-upload { width: min(100%, 680px); justify-self: end; }
  .faq-visual__layout { grid-template-columns: 1fr; }
  .faq-visual__stage { position: relative; top: 0; min-height: 540px; }
  .faq-visual__stage > img { height: 540px; }
  .final-photo-cta__caption { display: none; }
}

@media (max-width: 640px) {
  .project-journey,
  .projects-showcase,
  .contract-estimate,
  .faq-visual,
  .final-photo-cta { padding-block: 62px; }

  .project-journey h2,
  .projects-showcase h2,
  .contract-estimate h2,
  .faq-visual h2,
  .final-photo-cta h2 { font-size: clamp(39px, 12vw, 52px); }

  .project-journey__head,
  .projects-showcase .projects__head,
  .faq-visual__head { margin-bottom: 28px; }
  .project-journey__stage { min-height: 620px; margin-inline: calc(var(--page) * -1); border-inline: 0; }
  .journey-frame::after { background: linear-gradient(0deg, rgba(17, 20, 19, .9), transparent 72%); }
  .journey-frame[data-journey-frame='survey'] img { object-position: 61% 18%; }
  .journey-frame figcaption { right: 20px; bottom: 24px; left: 20px; width: auto; }
  .journey-frame figcaption strong { font-size: 40px; }
  .journey-frame figcaption p { font-size: 12px; }
  .project-journey__controls { display: flex; margin-inline: calc(var(--page) * -1); overflow-x: auto; border-inline: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .project-journey__controls::-webkit-scrollbar { display: none; }
  .journey-step { flex: 0 0 168px; min-height: 120px; padding: 16px; scroll-snap-align: start; }

  .projects-showcase .projects__head { display: block; }
  .projects-showcase .projects__head > p { margin-top: 20px; font-size: 13px; }
  .projects-showcase__stage { min-height: 0; margin-inline: calc(var(--page) * -1); border-inline: 0; }
  .projects-feature { min-height: 520px; }
  .projects-feature > span { right: 15px; bottom: 16px; left: 15px; align-items: flex-start; flex-direction: column; gap: 5px; }
  .projects-showcase__note { min-height: 200px; padding: 28px var(--page); }
  .projects-showcase__note h3 { font-size: 37px; }
  .projects-filmstrip { display: flex; margin-inline: calc(var(--page) * -1); overflow-x: auto; border-inline: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .projects-filmstrip::-webkit-scrollbar { display: none; }
  .project-thumb { flex: 0 0 190px; min-height: 94px; grid-template-columns: 72px 1fr; scroll-snap-align: start; }
  .project-thumb img { width: 72px; height: 57px; }

  .contract-estimate { min-height: 0; background: #c9bba6; }
  .contract-estimate::after { background: linear-gradient(180deg, rgba(245, 240, 231, .93), rgba(245, 240, 231, .52) 52%, rgba(24, 28, 27, .55)); }
  .contract-estimate__content { gap: 42px; }
  .contract-sheet { margin-top: 34px; padding: 29px 22px; transform: rotate(-.35deg); }
  .contract-sheet__guarantee strong { font-size: 80px; }
  .contract-upload { width: auto; margin-inline: calc(var(--page) * -1); padding: 29px var(--page) 35px; }
  .contract-upload__head h3 { font-size: 38px; }
  .estimate-dropzone { grid-template-columns: 46px 1fr; min-height: 142px; padding: 17px; }
  .estimate-dropzone__icon { width: 46px; height: 58px; }
  .estimate-file-preview { grid-template-columns: 37px minmax(0, 1fr); }
  .estimate-file-preview small { grid-column: 2; }

  .faq-visual__stage { min-height: 440px; margin-inline: calc(var(--page) * -1); }
  .faq-visual__stage > img { height: 440px; object-position: 53% center; }
  .faq-marker { width: 70px; }
  .faq-visual__caption { right: 18px; bottom: 18px; left: 18px; }
  .faq-visual__caption strong { font-size: 27px; }
  .faq-visual__list { margin-top: 8px; }
  .faq-visual__list summary { min-height: 76px; padding-right: 42px; font-size: 16px; }
  .faq-visual__list details p { padding-right: 12px; font-size: 12px; }

  .final-photo-cta { min-height: 760px; padding-bottom: 112px; }
  .final-photo-cta__image { object-position: 62% center; }
  .final-photo-cta::before { background: linear-gradient(0deg, rgba(20, 23, 22, .88), rgba(20, 23, 22, .16) 77%); }
  .final-photo-cta__copy { padding-bottom: 0; }
  .final-photo-cta__copy > p:not(.eyebrow) { font-size: 14px; }
  .final-photo-cta__actions { align-items: stretch; flex-direction: column; }
  .final-photo-cta__actions .button,
  .final-photo-cta__callback { width: 100%; min-height: 57px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-frame,
  .projects-feature img,
  .project-thumb,
  .estimate-dropzone,
  .faq-marker,
  .faq-visual__caption { transition: none !important; }
  .final-photo-cta__image,
  .final-photo-cta::after { animation: none !important; }
}

/* Stage 5 — the lead dialog is a compact roof-passport product. */
body.dialog-open {
  overflow: hidden;
  padding-right: var(--dialog-scrollbar-compensation, 0px);
}

body.dialog-open .mobile-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lead-dialog [hidden] { display: none !important; }

.lead-dialog {
  position: fixed;
  inset: 0;
  width: min(1180px, calc(100vw - 40px));
  max-width: none;
  height: min(780px, calc(100dvh - 40px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.lead-dialog[open] { display: block; }

.lead-dialog::backdrop {
  background:
    radial-gradient(circle at 20% 15%, rgba(232, 214, 169, .12), transparent 28%),
    rgba(13, 16, 15, .82);
  backdrop-filter: blur(8px) saturate(.75);
}

.dialog-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(370px, .82fr) minmax(530px, 1.18fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25);
  background: #eee5d7;
  box-shadow: 0 42px 120px rgba(0, 0, 0, .52), 0 0 0 1px rgba(27, 31, 30, .24);
}

.dialog-close {
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(38, 40, 39, .3);
  background: rgba(247, 241, 231, .82);
  color: var(--ink);
  font: 400 29px/1 var(--serif);
  backdrop-filter: blur(8px);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.dialog-close:hover { background: var(--ink); color: var(--white); transform: rotate(5deg); }
.dialog-close:focus-visible { outline: 3px solid var(--oxide); outline-offset: 3px; }

.dialog-passport {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(290px, 1fr) auto auto;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding: 38px 30px 28px;
  color: var(--white);
  background: #34403d;
}

.dialog-passport::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url('../assets/img/wow/roof-system-cutaway-v1.webp') center/cover;
  filter: saturate(.55) contrast(1.04);
  transform: scale(1.05);
}

.dialog-passport::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(29, 37, 35, .57), rgba(25, 31, 30, .96) 78%),
    repeating-linear-gradient(118deg, transparent 0 45px, rgba(255, 255, 255, .055) 46px, transparent 47px 92px);
}

.passport-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 214, 169, .22), transparent 37%),
    rgba(17, 22, 21, .66);
  box-shadow: inset 0 0 65px rgba(0, 0, 0, .3), 0 24px 45px rgba(0, 0, 0, .18);
}

.passport-scene::before {
  content: 'ПАСПОРТ КРОВЛИ / LIVE';
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 16px;
  color: rgba(255, 253, 248, .58);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .14em;
}

.passport-house {
  position: relative;
  z-index: 1;
  display: block;
  width: min(108%, 520px);
  height: auto;
  color: rgba(255, 253, 248, .72);
  filter: drop-shadow(0 24px 18px rgba(0, 0, 0, .38));
  transform: translateY(6px);
  transition: transform .38s ease, filter .28s ease;
}

.passport-scene[data-scenario='replace'] .passport-house { filter: sepia(.18) drop-shadow(0 24px 18px rgba(0, 0, 0, .38)); }
.passport-scene[data-shape='complex'] .passport-house { transform: translateY(6px) scale(.94); }
.passport-scene[data-shape='unknown'] .passport-house { opacity: .72; filter: grayscale(.65) drop-shadow(0 24px 18px rgba(0, 0, 0, .38)); }
.passport-scene[data-thermal='warm'] [data-passport-thermal-line] { opacity: 1; filter: drop-shadow(0 0 6px rgba(178, 75, 51, .85)); }
.passport-scene[data-assets='none'] [data-passport-assets-icon] { opacity: .2; }
.passport-scene[data-assets='some'] [data-passport-assets-icon] { opacity: 1; }

.passport-area-visual {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 17px;
  left: 18px;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
}

.passport-area-visual span {
  display: block;
  width: 8%;
  height: 100%;
  background: #e8d6a9;
  box-shadow: 0 0 16px rgba(232, 214, 169, .72);
  transition: width .32s ease;
}

.passport-pulse {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8d6a9;
  box-shadow: 0 0 0 0 rgba(232, 214, 169, .55);
  animation: passport-pulse 2.6s ease-out infinite;
}

.passport-ledger { border-top: 1px solid rgba(255, 255, 255, .32); }
.passport-ledger p { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.passport-ledger span { color: rgba(255, 253, 248, .53); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.passport-ledger strong { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 620; text-align: right; }
.passport-note { margin: 0; color: rgba(255, 253, 248, .54); font-size: 9px; line-height: 1.45; }

.dialog-flow {
  position: relative;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 38px 50px 44px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .72), transparent 48%),
    #eee5d7;
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 40, 39, .35) transparent;
}

.dialog-flow::before {
  content: '';
  position: absolute;
  top: -110px;
  right: -120px;
  width: 430px;
  aspect-ratio: 1;
  opacity: .065;
  pointer-events: none;
  background: url('../assets/img/wow/metal-caliper-macro-v1.webp') center/cover;
  border-radius: 50%;
  filter: grayscale(1);
}

.dialog-flow > * { position: relative; z-index: 1; }

.dialog-heading { max-width: 610px; padding-right: 32px; }
.dialog-heading .eyebrow { margin-bottom: 9px; color: var(--oxide); }
.dialog-heading h2 { margin: 0; font: italic clamp(36px, 3.2vw, 49px)/.96 var(--serif); letter-spacing: -.055em; }
.dialog-heading > p:last-child { max-width: 570px; margin: 15px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

.dialog-progress { display: grid; gap: 9px; margin: 24px 0 22px; }
.dialog-progress > div:first-child { display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--ink-soft); font-size: 10px; }
.dialog-progress strong { color: var(--ink); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.dialog-progress .quiz-progress { height: 4px; overflow: hidden; background: rgba(38, 40, 39, .16); }
.dialog-progress .quiz-progress span { display: block; width: 16.6667%; height: 100%; background: var(--oxide); transition: width .24s ease; }

.roof-passport-form,
.callback-form {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
}

.roof-passport-form { display: block; }
.quiz-step { display: none; animation: dialog-step-in .26s ease both; }
.quiz-step.is-active { display: block; }
.roof-passport-form .quiz-step__index { margin: 0 0 8px; color: var(--oxide); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.quiz-step h3 { margin: 0 0 20px; font: italic clamp(29px, 2.7vw, 39px)/1 var(--serif); letter-spacing: -.045em; }
.roof-passport-form .quiz-step__hint { margin: -10px 0 16px; color: var(--ink-soft); font-size: 11px; letter-spacing: normal; }

.quiz-photo-options,
.quiz-shape-options,
.quiz-thermal-options,
.quiz-options--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-photo-tile,
.quiz-shape-options button,
.quiz-thermal-options button,
.quiz-options button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(38, 40, 39, .32);
  background: rgba(255, 253, 248, .42);
  color: var(--ink);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.quiz-photo-tile:hover,
.quiz-shape-options button:hover,
.quiz-thermal-options button:hover,
.quiz-options button:hover { border-color: var(--oxide); background: rgba(255, 253, 248, .8); transform: translateY(-2px); }

.quiz-photo-tile:focus-visible,
.quiz-shape-options button:focus-visible,
.quiz-thermal-options button:focus-visible,
.quiz-options button:focus-visible,
.quiz-step-actions button:focus-visible,
.quiz-summary button:focus-visible,
.callback-form button:focus-visible,
.dialog-success button:focus-visible { outline: 3px solid var(--oxide); outline-offset: 3px; }

.quiz-photo-tile.is-selected,
.quiz-shape-options button.is-selected,
.quiz-thermal-options button.is-selected,
.quiz-options button.is-selected {
  border-color: var(--oxide);
  background: #fffaf1;
  box-shadow: inset 0 -4px 0 var(--oxide), 0 12px 25px rgba(81, 57, 41, .12);
}

.quiz-photo-tile.is-selected::after,
.quiz-shape-options button.is-selected::after,
.quiz-thermal-options button.is-selected::after,
.quiz-options button.is-selected::after {
  content: '✓';
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  background: var(--oxide);
  color: var(--white);
  font-size: 12px;
}

.quiz-photo-tile { display: grid; grid-template-rows: 118px auto auto; padding: 0 0 14px; overflow: hidden; }
.quiz-photo-tile img { width: 100%; height: 118px; object-fit: cover; filter: saturate(.72) contrast(1.03); }
.quiz-photo-tile strong { padding: 13px 14px 2px; font-size: 14px; }
.quiz-photo-tile span { padding: 0 14px; color: var(--ink-soft); font-size: 10px; line-height: 1.4; }

.quiz-shape-options button { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 92px; padding: 11px 32px 11px 10px; }
.quiz-shape-options svg { width: 82px; height: 54px; color: #667371; }
.quiz-shape-options span { font-size: 12px; font-weight: 700; }

.quiz-thermal-options button { display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: end; min-height: 112px; padding: 12px 30px 12px 10px; }
.quiz-thermal-options svg { grid-row: 1 / 3; width: 105px; height: 70px; color: #566260; }
.quiz-thermal-options strong { font-size: 14px; }
.quiz-thermal-options span { align-self: start; color: var(--ink-soft); font-size: 9px; }

.roof-footprint {
  position: relative;
  height: 70px;
  margin: -7px 0 13px;
  overflow: hidden;
  border: 1px solid rgba(38, 40, 39, .22);
  background: linear-gradient(120deg, rgba(129, 144, 143, .13), rgba(255, 255, 255, .42));
}
.roof-footprint span { position: absolute; inset: 17px auto auto 28px; width: 112px; height: 37px; border: 2px solid #697775; transform: skewX(-24deg); }
.roof-footprint i { position: absolute; top: 17px; left: 84px; width: 2px; height: 37px; background: var(--oxide); transform: rotate(25deg); }
.roof-footprint b { position: absolute; right: 15px; bottom: 12px; color: var(--ink-soft); font-size: 9px; font-style: normal; font-weight: 650; text-transform: uppercase; }

.quiz-options { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-options button { padding: 13px 38px 13px 14px; font-size: 12px; }
.quiz-options--assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-options--assets button { display: flex; gap: 12px; align-items: center; min-height: 64px; }
.quiz-options--assets i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; color: var(--oxide); font-size: 18px; font-style: normal; }

.quiz-step-error,
.field-error {
  display: block;
  margin: 10px 0 0;
  color: #9d3524;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.quiz-step-error[hidden],
.field-error[hidden],
.consent-error[hidden] { display: none !important; }

[aria-invalid='true'] { --field-error-color: #a13b29; }
.quiz-step [role='group'][aria-invalid='true'] { padding: 6px; outline: 2px solid rgba(161, 59, 41, .45); outline-offset: 2px; }

.quiz-step-actions { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 23px; }
.quiz-step-actions > button:not(.button) { min-width: 88px; min-height: 48px; padding: 10px 13px; border: 1px solid rgba(38, 40, 39, .34); background: transparent; color: var(--ink); }
.quiz-step-actions .button,
.callback-form > .button,
.dialog-success .button { min-height: 56px; padding: 14px 20px; }

.quiz-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; border-top: 1px solid rgba(38, 40, 39, .28); border-left: 1px solid rgba(38, 40, 39, .28); }
.quiz-summary button { position: relative; display: grid; gap: 3px; min-height: 69px; padding: 11px 57px 11px 12px; border: 0; border-right: 1px solid rgba(38, 40, 39, .28); border-bottom: 1px solid rgba(38, 40, 39, .28); background: rgba(255, 253, 248, .42); color: var(--ink); text-align: left; }
.quiz-summary button:last-child { grid-column: 1 / -1; }
.quiz-summary span { color: var(--ink-soft); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.quiz-summary strong { overflow-wrap: anywhere; font-size: 11px; }
.quiz-summary i { position: absolute; top: 50%; right: 10px; color: var(--oxide); font-size: 8px; font-style: normal; transform: translateY(-50%); text-transform: uppercase; }

.roof-passport-form .form-field,
.callback-form .form-field {
  display: grid;
  gap: 6px;
  margin-top: 11px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roof-passport-form .form-field > input,
.callback-form .form-field > input,
.callback-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(38, 40, 39, .34);
  border-radius: 0;
  outline: 0;
  background: rgba(255, 253, 248, .58);
  color: var(--ink);
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
}

.callback-form textarea { min-height: 86px; resize: vertical; font: 14px/1.45 var(--sans); }
.roof-passport-form .form-field > input:focus,
.callback-form .form-field > input:focus,
.callback-form textarea:focus { border-color: var(--oxide); box-shadow: 0 0 0 3px rgba(169, 67, 45, .12); }
.form-field > small:not(.field-error) { color: var(--ink-soft); font-size: 8px; font-weight: 500; letter-spacing: normal; text-transform: none; }

.phone-control {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid rgba(38, 40, 39, .36);
  background: rgba(255, 253, 248, .7);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.phone-control:focus-within { border-color: var(--oxide); box-shadow: 0 0 0 3px rgba(169, 67, 45, .12); }
.phone-control.has-error { border-color: #a13b29; box-shadow: 0 0 0 3px rgba(161, 59, 41, .1); }
.phone-control > b { display: grid; place-items: center; flex: 0 0 54px; border-right: 1px solid rgba(38, 40, 39, .2); background: rgba(129, 144, 143, .14); color: var(--ink); font-size: 16px; letter-spacing: normal; }
.phone-control > input {
  min-width: 0;
  flex: 1;
  min-height: 52px !important;
  padding: 0 14px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 18px !important;
  letter-spacing: .02em !important;
}

.contract-upload .phone-control { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.contract-upload .phone-control:focus-within { border-color: #e8d6a9; box-shadow: 0 0 0 3px rgba(232, 214, 169, .1); }
.contract-upload .phone-control.has-error { border-color: #ff9b87; }
.contract-upload .phone-control > b { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: var(--white); }
.contract-upload .phone-control > input { color: var(--white) !important; }
.contract-upload .field-error { color: #ffb5a6; }

.roof-passport-form .consent,
.callback-form .consent { display: grid; grid-template-columns: 21px minmax(0, 1fr) !important; gap: 10px !important; align-items: start; margin-top: 14px; color: var(--ink-soft); font-size: 9px !important; font-weight: 500 !important; line-height: 1.4; }
.roof-passport-form .consent input,
.callback-form .consent input { width: 19px; height: 19px; margin: 0; accent-color: var(--oxide); }
.consent.has-error { color: #9d3524 !important; }
.consent-error { margin-top: 4px; }

.callback-form { display: grid; gap: 10px; }
.callback-form__intro {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  margin-bottom: 4px;
  padding: 27px 30px;
  background:
    linear-gradient(90deg, rgba(25, 30, 29, .91), rgba(25, 30, 29, .38)),
    url('../assets/img/met_3.webp') center 42%/cover;
  color: var(--white);
}
.callback-form__intro h3 { max-width: 430px; margin: 0; font: italic clamp(32px, 3vw, 44px)/.98 var(--serif); letter-spacing: -.05em; }
.callback-form__intro > p:last-child { max-width: 430px; margin: 15px 0 0; color: rgba(255, 253, 248, .72); font-size: 11px; line-height: 1.5; }
.callback-form__intro .technical-label { color: #e8d6a9; }
.callback-form .form-field i { color: var(--ink-soft); font-size: 8px; font-style: normal; font-weight: 500; text-transform: none; }

.lead-dialog[data-dialog-mode='callback'] .dialog-flow { padding-top: 28px; padding-bottom: 28px; overflow-y: hidden; }
.lead-dialog[data-dialog-mode='callback'] .dialog-heading h2 { font-size: clamp(34px, 3vw, 44px); }
.lead-dialog[data-dialog-mode='callback'] .dialog-heading > p:last-child { margin-top: 9px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form { gap: 6px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form__intro { min-height: 120px; padding: 18px 23px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form__intro h3 { font-size: clamp(30px, 2.6vw, 39px); }
.lead-dialog[data-dialog-mode='callback'] .callback-form__intro > p:last-child { margin-top: 9px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form .form-field { margin-top: 5px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form textarea { min-height: 72px; height: 72px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form .consent { margin-top: 7px; }
.lead-dialog[data-dialog-mode='callback'] .callback-form > .button { min-height: 52px; }

@media (min-width: 761px) {
  .lead-dialog[data-dialog-mode='callback'] .dialog-heading { width: calc(100% - 50px); margin-left: 28px; }
}

.form-status { min-height: 18px; margin: 4px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.form-status[data-type='error'] { color: #9d3524; }
.form-status[data-type='success'] { color: #31633e; }

.dialog-success {
  display: grid;
  place-items: center;
  min-height: 480px;
  padding: 34px;
  border: 1px solid rgba(38, 40, 39, .26);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(232, 214, 169, .32)),
    url('../assets/img/wow/estimate-desk-v1.webp') center/cover;
  text-align: center;
  box-shadow: 0 28px 55px rgba(57, 43, 31, .15);
}
.dialog-success svg { width: 116px; color: var(--oxide); filter: drop-shadow(0 13px 18px rgba(91, 53, 36, .18)); }
.dialog-success .eyebrow { margin: 12px 0 2px; color: var(--oxide); }
.dialog-success h3 { max-width: 520px; margin: 0; font: italic clamp(35px, 3.5vw, 49px)/.96 var(--serif); letter-spacing: -.05em; }
.dialog-success > p:not(.eyebrow) { max-width: 490px; margin: 17px 0 5px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.dialog-success .button { min-width: 180px; margin-top: 17px; }

@keyframes dialog-step-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes passport-pulse {
  65% { box-shadow: 0 0 0 11px rgba(232, 214, 169, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 214, 169, 0); }
}

@media (max-width: 760px) {
  .lead-dialog {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
  }

  .lead-dialog[open] { max-height: none; overflow: visible; }

  .lead-dialog::backdrop { backdrop-filter: none; }

  .dialog-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 174px minmax(0, 1fr);
    height: 100dvh;
    border: 0;
    box-shadow: none;
  }

  .dialog-close { position: fixed; top: 10px; right: 10px; width: 44px; height: 44px; background: rgba(247, 241, 231, .9); }

  .dialog-passport {
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 11px;
    min-height: 0;
    padding: 14px 58px 14px 14px;
  }

  .passport-scene { min-height: 0; height: 146px; }
  .passport-scene::before { top: 8px; left: 9px; font-size: 6px; }
  .passport-house { width: 155px; max-width: none; transform: translate(-11px, 3px); }
  .passport-scene[data-shape='complex'] .passport-house { transform: translate(-11px, 3px) scale(.92); }
  .passport-area-visual { right: 9px; bottom: 8px; left: 9px; }
  .passport-pulse { top: 8px; right: 8px; width: 7px; height: 7px; }

  .passport-ledger { align-self: center; border-top-color: rgba(255, 255, 255, .24); }
  .passport-ledger p { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 7px; padding: 4px 0; }
  .passport-ledger span { font-size: 6px; }
  .passport-ledger strong { font-size: 8px; }
  .passport-note { display: none; }

  .dialog-flow { min-height: 0; padding: 20px 18px max(34px, env(safe-area-inset-bottom)); }
  .dialog-flow::before { width: 260px; top: -90px; right: -100px; }
  .dialog-heading { padding-right: 32px; }
  .dialog-heading h2 { font-size: 31px; }
  .dialog-heading > p:last-child { margin-top: 9px; font-size: 10px; }
  .dialog-progress { margin: 15px 0 18px; }
  .dialog-progress > div:first-child { font-size: 8px; }
  .dialog-progress strong { font-size: 8px; }

  .quiz-step h3 { margin-bottom: 16px; font-size: 29px; }
  .quiz-photo-options { gap: 7px; }
  .quiz-photo-tile { grid-template-rows: 98px auto auto; min-height: 220px; }
  .quiz-photo-tile img { height: 98px; }
  .quiz-photo-tile strong { padding: 10px 10px 2px; font-size: 12px; }
  .quiz-photo-tile span { padding: 0 10px; font-size: 9px; }
  .quiz-shape-options,
  .quiz-thermal-options,
  .quiz-options--grid { gap: 7px; }
  .quiz-shape-options button { grid-template-columns: 58px minmax(0, 1fr); min-height: 82px; padding: 8px 27px 8px 7px; }
  .quiz-shape-options svg { width: 57px; }
  .quiz-shape-options span { font-size: 10px; }
  .quiz-thermal-options button { display: grid; grid-template-columns: 1fr; grid-template-rows: 62px auto auto; min-height: 126px; padding: 7px 25px 9px 8px; }
  .quiz-thermal-options svg { grid-row: auto; width: 100%; height: 60px; }
  .quiz-thermal-options strong { font-size: 12px; }
  .roof-footprint { height: 62px; }
  .quiz-options button { min-height: 50px; padding: 11px 31px 11px 11px; font-size: 11px; }
  .quiz-options--assets button { min-height: 58px; }
  .quiz-options--assets i { width: 27px; height: 27px; }
  .quiz-step-actions { margin-top: 18px; }
  .quiz-step-actions .button,
  .callback-form > .button,
  .dialog-success .button { min-height: 54px; }
  .quiz-summary { grid-template-columns: 1fr; }
  .quiz-summary button,
  .quiz-summary button:last-child { grid-column: auto; min-height: 60px; }

  .callback-form__intro { min-height: 150px; margin-inline: -2px; padding: 23px 20px; }
  .callback-form__intro h3 { max-width: 300px; font-size: 34px; }
  .callback-form__intro > p:last-child { max-width: 310px; font-size: 10px; }
  .dialog-success { min-height: 520px; padding: 26px 20px; }
  .dialog-success svg { width: 96px; }

  .lead-dialog[data-dialog-mode='callback'] .passport-ledger p:nth-child(n + 3) { display: none; }
  .lead-dialog[data-dialog-mode='callback'] .dialog-shell { grid-template-rows: 144px minmax(0, 1fr); }
  .lead-dialog[data-dialog-mode='callback'] .dialog-passport { grid-template-columns: 104px minmax(0, 1fr); padding-top: 12px; padding-bottom: 12px; }
  .lead-dialog[data-dialog-mode='callback'] .passport-scene { height: 120px; }
  .lead-dialog[data-dialog-mode='callback'] .passport-house { width: 140px; transform: translate(-14px, 1px); }
  .lead-dialog[data-dialog-mode='callback'] .dialog-flow { padding-top: 17px; padding-bottom: max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .lead-dialog[data-dialog-mode='callback'] .dialog-heading h2 { font-size: 28px; }
  .lead-dialog[data-dialog-mode='callback'] .dialog-heading > p:last-child { font-size: 9px; }
  .lead-dialog[data-dialog-mode='callback'] .callback-form__intro { min-height: 104px; padding: 16px 17px; }
  .lead-dialog[data-dialog-mode='callback'] .callback-form__intro h3 { font-size: 29px; }
  .lead-dialog[data-dialog-mode='callback'] .callback-form__intro > p:last-child { display: none; }
  .lead-dialog[data-dialog-mode='callback'] .callback-form textarea { min-height: 64px; height: 64px; }
}

@media (max-width: 370px) {
  .dialog-shell { grid-template-rows: 158px minmax(0, 1fr); }
  .dialog-passport { grid-template-columns: 110px minmax(0, 1fr); padding: 12px 54px 12px 12px; }
  .passport-scene { height: 134px; }
  .passport-house { width: 145px; transform: translate(-13px, 2px); }
  .passport-ledger p { padding: 3px 0; }
  .passport-ledger span { font-size: 5.5px; }
  .passport-ledger strong { font-size: 7.5px; }
  .dialog-flow { padding-inline: 15px; }
  .dialog-heading h2 { font-size: 29px; }
  .quiz-photo-tile { min-height: 216px; }
  .quiz-photo-tile span { line-height: 1.3; }
  .quiz-shape-options span { overflow-wrap: anywhere; }
}

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.cookie-notice {
  position: fixed;
  z-index: 10;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: min(640px, calc(100% - 44px));
  padding: 17px 18px;
  border: 1px solid rgba(255, 253, 248, .18);
  background: rgba(28, 30, 29, .96);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
  color: var(--white);
  backdrop-filter: blur(12px);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; color: rgba(255, 253, 248, .76); font-size: 11px; line-height: 1.45; }
.cookie-notice a { color: var(--white); text-underline-offset: 2px; }
.cookie-notice button { min-height: 38px; padding: 8px 14px; border: 1px solid rgba(255, 253, 248, .5); background: transparent; color: var(--white); font-size: 11px; font-weight: 700; }
.cookie-notice button:hover { background: var(--white); color: var(--ink); }

@media (max-width: 640px) {
  .cookie-notice {
    right: 12px;
    bottom: 70px;
    grid-template-columns: 1fr;
    gap: 11px;
    width: calc(100% - 24px);
    padding: 14px;
  }
  .cookie-notice button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .passport-house,
  .passport-area-visual span,
  .quiz-photo-tile,
  .quiz-shape-options button,
  .quiz-thermal-options button,
  .quiz-options button,
  .dialog-close,
  .dialog-progress .quiz-progress span { transition: none !important; }
  .passport-pulse,
  .quiz-step { animation: none !important; }
}

/* Wave 1 — readable editorial system, visible colour choice and one shared quiz. */
:root {
  --radius-control: 8px;
  --radius-card: 11px;
  --radius-panel: 14px;
  --type-label: 12px;
  --type-help: 14px;
}

body { font-size: 17px; }
.section,
.section > *,
.scenario-wow__head > *,
.material-passport__head > *,
.roof-cutaway__head > *,
.project-journey__head > *,
.projects__head > * { min-width: 0; }

.section h2,
.section h3,
.section p { overflow-wrap: break-word; }

.eyebrow,
.technical-label { font-size: var(--type-label) !important; line-height: 1.35; }
.main-nav { font-size: 15px; }
.phone,
.footer__phone { font-size: 15px; }
.brand span { font-size: 12px; }
.button,
.swatch,
.segmented button,
.scenario-choice,
.team-trigger,
.journey-step,
.project-thumb,
.final-photo-cta__callback,
.cookie-notice button { border-radius: var(--radius-control); }
.team-stage,
.scenario-wow__stage,
.material-passport__stage,
.roof-cutaway__layout,
.configurator__scene,
.project-journey__stage,
.projects-showcase__stage,
.estimate-paper,
.contract-sheet,
.contract-upload,
.faq-visual__stage,
.dialog-shell { border-radius: var(--radius-panel); }
.team-stage__portrait,
.scenario-wow__media,
.material-passport__image,
.roof-cutaway__visual,
.projects-feature,
.project-thumb img,
.journey-frame img,
.contract-estimate__background,
.final-photo-cta__image { border-radius: var(--radius-card); }

/* Hero: the colour switch is a first-screen control rather than four anonymous dots. */
.hero__palette {
  right: auto;
  top: 140px;
  bottom: auto;
  left: calc(100% + clamp(70px, 8vw, 150px));
  display: grid;
  grid-template-columns: minmax(112px, auto) repeat(4, 46px);
  gap: 9px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 12px;
  background: rgba(19, 22, 21, .82);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .34);
}
.hero__palette-label { display: grid; gap: 2px; padding: 0 8px 0 4px; }
.hero__palette-label b { color: var(--white); font-size: 13px; line-height: 1.2; }
.hero__palette-label small { color: #e8d6a9; font-size: 15px; line-height: 1.2; }
.color-dot { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; }
.color-dot i { width: 32px; height: 32px; }
.color-dot.is-active { border-color: var(--white); outline: 2px solid #e8d6a9; outline-offset: 2px; }
.color-dot.is-active::after { content: '✓'; position: absolute; display: grid; place-items: center; width: 18px; height: 18px; right: -5px; top: -5px; border-radius: 50%; background: #e8d6a9; color: var(--ink); font-size: 12px; font-weight: 800; }
.hero__architecture.is-reacting { opacity: .9; transform: scale(1.006); }
.hero__architecture { transition: opacity .24s ease, transform .24s ease; }
.hero__proof strong { font-size: 18px; }
.hero__proof span { font-size: 14px; line-height: 1.42; }
.hero__rail { bottom: 8px; transform: none; overflow: hidden; font-size: clamp(40px, 5.4vw, 82px); line-height: 1; color: rgba(255,255,255,.12); }
.hero__rail__track { display: flex; width: max-content; animation: mk-rail 46s linear infinite; will-change: transform; }
.hero__rail__track span { display: inline-block; white-space: nowrap; }
@keyframes mk-rail { to { transform: translateX(-50%); } }

/* Readable people and responsibility console. */
.team-ledger dd,
.team-trigger small,
.team-status,
.team-route li { font-size: 14px; }
.team-trigger span,
.team-route span { font-size: 21px; }
.team-stage__portrait p { font-size: 58px; }
.team-stage__portrait p span { font-size: 13px; }
.team-stage__copy > p:not(.technical-label):not(.team-stage__result):not(.team-status) { font-size: 16px; }
.team-stage__result { font-size: 14px; }
.team-stage__result b { font-size: 12px; }
.team-stage[data-team='sergey'] { grid-template-columns: minmax(270px, .64fr) minmax(0, 1.36fr); min-height: 500px; }
.team-stage[data-team='sergey'] .team-stage__portrait { min-height: 460px; max-height: 520px; }
.team-stage[data-team='sergey'] .team-stage__portrait img { width: min(72%, 320px); height: auto; max-height: 455px; object-fit: contain; }

/* Each light section keeps a material/technical surface instead of a flat fill. */
.scenario-wow,
.material-passport,
.roof-cutaway,
.project-journey,
.faq-visual { isolation: isolate; }
.scenario-wow::before,
.material-passport::before,
.roof-cutaway::before,
.faq-visual::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(90deg, rgba(38,40,39,.055) 1px, transparent 1px), linear-gradient(rgba(38,40,39,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(110deg, black, transparent 78%);
}
.scenario-wow__head,
.material-passport__head,
.roof-cutaway__head,
.project-journey__head,
.projects__head,
.honest-estimate__copy { position: relative; z-index: 3; }
.scenario-wow__head > p,
.material-passport__head > p,
.roof-cutaway__head > p,
.project-journey__head > p,
.projects__head > p { font-size: 15px; }
.scenario-frame figcaption,
.scenario-wow__proof span,
.scenario-wow__proof a,
.scenario-check li,
.scenario-choice small { font-size: 14px; }
.scenario-choice span { font-size: 20px; }
.scenario-choice strong { font-size: 22px; }
.material-passport__editorial {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: -20px auto 34px;
  padding: 18px 22px 18px 68px;
  border: 1px solid rgba(38,40,39,.2);
  border-left: 4px solid var(--oxide);
  border-radius: 10px;
  background: rgba(255,253,248,.94) url('../assets/img/wow/metal-caliper-macro-v1.webp') left center/52px 100% no-repeat;
  color: var(--ink);
  font-size: 15px;
}
.material-marker span,
.material-card > p:not(.technical-label),
.material-card__note { font-size: 14px; }
.material-marker i { font-size: 19px; }
.scene-caption span,
.scene-caption small,
.control-group > span { font-size: 13px; }
.scene-caption strong { font-size: 31px; }
.swatch,
.segmented button { min-height: 44px; font-size: 14px; }

.roof-cutaway__expert-copy { padding: 20px 22px; border-bottom: 1px solid rgba(38,40,39,.22); background: linear-gradient(115deg, rgba(232,214,169,.42), rgba(255,253,248,.76)); }
.roof-cutaway__expert-copy strong { display: block; font: italic 25px/1.05 var(--serif); }
.roof-cutaway__expert-copy p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.52; }
.roof-cutaway__caption { font-size: 13px; }
.cutaway-tab { font-size: 14px; }
.cutaway-tab span { font-size: 20px; }
.cutaway-panel > p:not(.technical-label),
.cutaway-panel dt,
.cutaway-panel dd { font-size: 14px; }

.honest-estimate { isolation: isolate; }
.honest-estimate::before { z-index: 0; }
.honest-estimate__copy,
.estimate-glass { z-index: 2; min-width: 0; }
.honest-estimate__copy > p,
.honest-estimate__lead { font-size: 16px; }
.estimate-switch button,
.estimate-lines li,
.estimate-paper header small,
.estimate-glass__note { font-size: 14px; }
.estimate-lines li span { font-size: 19px; }

.journey-frame figcaption span { font-size: 13px; }
.journey-frame figcaption p { font-size: 15px; }
.journey-step span { font-size: 23px; }
.journey-step strong,
.journey-step small { font-size: 14px; }

/* Six real projects, with room to extend the rail without inventing cards. */
.projects-showcase__stage { grid-template-columns: minmax(0, 1fr) minmax(360px, 410px); }
.projects-showcase__note { justify-content: flex-end; padding: 40px 34px 46px; }
.projects-showcase__note .technical-label { color: #e8d6a9; }
.projects-showcase__note h3 { font-size: 43px; }
.projects-showcase__meta { margin: 18px 0 0 !important; color: #e8d6a9 !important; font-size: 14px !important; font-weight: 700; line-height: 1.45; }
.projects-showcase__note > p:not(.technical-label):not(.projects-showcase__meta) { margin-top: 14px; font-size: 15px; }
.projects-filmstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.project-thumb { grid-template-columns: 66px minmax(0,1fr); gap: 10px; min-height: 104px; padding: 10px; }
.project-thumb img { width: 66px; height: 64px; }
.project-thumb span,
.projects-feature > span { font-size: 13px; }

.contract-sheet header,
.contract-sheet p,
.contract-sheet li,
.contract-upload__head p,
.estimate-dropzone span,
.file-preview,
.contract-upload .form-field > span,
.faq-visual__caption span,
.faq-visual__list details p,
.final-photo-cta__caption,
.footer p,
.footer a:not(.brand),
.cookie-notice p { font-size: 14px; }
.cookie-notice button { font-size:13px; }
.scenario-wow .scenario-choice small { font-size:14px; }
.estimate-lines strong,
.estimate-lines i { font-size:13px; }
.estimate-dropzone,
.estimate-dropzone > small { font-size:13px; }
.estimate-paper header span,
.contract-sheet__guarantee span,
.contract-sheet header small { font-size:13px; }
.contract-sheet li { font-size:14px; }
.material-card .material-card__note { font-size:14px !important; }
.contract-upload__head > p:not(.technical-label) { font-size:14px; }
.contract-upload .form-field { font-size:13px; }
.contract-upload .estimate-dropzone { font-size:13px; }
.contract-sheet h3,
.contract-upload__head h3 { font-size: 22px; }
.faq-visual__caption strong { font-size: 29px; }
.faq-visual__list summary { font-size: 18px; }
.final-photo-cta__copy > p:not(.eyebrow) { font-size: 16px; }
.footer {
  position: relative;
  isolation: isolate;
  background: #191c1b;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.footer::before { content: none; }

/* Inline quiz: a photographic calculation desk with the real director, never a blank black panel. */
.inline-quiz {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: #343a38;
}
.inline-quiz__background { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.05); }
.inline-quiz::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(105deg,rgba(24,29,27,.94),rgba(24,29,27,.76) 52%,rgba(24,29,27,.52)); }
.inline-quiz__head,
.inline-quiz__shell { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; }
.inline-quiz__head { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: clamp(34px,7vw,110px); align-items: end; margin-bottom: 44px; }
.inline-quiz__head h2 { margin:0; font-size:clamp(42px,5vw,74px); line-height:.98; letter-spacing:-.055em; }
.inline-quiz__head > p { margin:0; color:rgba(255,253,248,.76); font-size:16px; }
.inline-quiz__shell { display:grid; grid-template-columns:minmax(310px,.74fr) minmax(560px,1.26fr); overflow:hidden; border:1px solid rgba(255,255,255,.32); border-radius:14px; box-shadow:0 36px 90px rgba(0,0,0,.34); }
.inline-quiz__expert { display:flex; flex-direction:column; min-width:0; padding:28px; background:linear-gradient(160deg,rgba(54,68,64,.93),rgba(28,34,32,.97)); }
.inline-quiz__expert figure { position:relative; overflow:hidden; min-height:280px; margin:0; border-radius:11px; }
.inline-quiz__expert figure::after { content:''; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(17,22,20,.9)); }
.inline-quiz__expert img { display:block; width:100%; height:310px; object-fit:cover; object-position:center 35%; }
.inline-quiz__expert figcaption { position:absolute; z-index:2; right:18px; bottom:16px; left:18px; display:grid; }
.inline-quiz__expert figcaption strong { font:italic 28px/1 var(--serif); }
.inline-quiz__expert figcaption span { margin-top:5px; color:#e8d6a9; font-size:13px; }
.inline-quiz__expert > p { margin:22px 0 0; color:rgba(255,253,248,.82); font-size:15px; line-height:1.58; }
.inline-quiz__expert-ledger { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:auto; padding-top:22px; }
.inline-quiz__expert-ledger span { padding:9px 0; border-top:1px solid rgba(255,255,255,.22); color:rgba(255,253,248,.7); font-size:12px; }
.inline-quiz__workspace { min-width:0; min-height:610px; padding:38px 46px 46px; background:linear-gradient(135deg,rgba(255,255,255,.78),transparent 46%),#eee5d7; color:var(--ink); }
.inline-quiz__workspace .dialog-progress { margin-top:0; }
.inline-quiz__workspace .roof-passport-form { min-height:500px; }

/* Dialog director card. */
.dialog-passport { grid-template-rows:minmax(190px,.72fr) auto auto auto; gap:12px; padding:26px 24px 22px; }
.passport-scene { min-height:210px; }
.passport-expert { display:grid; grid-template-columns:82px minmax(0,1fr); gap:13px; align-items:stretch; margin:0; padding:12px; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:rgba(15,20,18,.58); }
.passport-expert img { display:block; width:82px; height:100%; min-height:116px; object-fit:cover; object-position:center 28%; border-radius:8px; }
.passport-expert figcaption { min-width:0; }
.passport-expert strong { display:block; font:italic 21px/1 var(--serif); }
.passport-expert span { display:block; margin-top:4px; color:#e8d6a9; font-size:12px; }
.passport-expert p { margin:9px 0 0; color:rgba(255,253,248,.74); font-size:12px; line-height:1.42; }
.passport-ledger span { font-size:11px; }
.passport-ledger strong { font-size:13px; }
.passport-note { font-size:12px; }
.lead-dialog,
.dialog-shell { border-radius:14px; }

/* Forms and quiz: no meaningful text below the agreed readability floor. */
.dialog-heading > p:last-child { font-size:14px; }
.dialog-progress > div:first-child,
.dialog-progress strong { font-size:13px; }
.roof-passport-form .quiz-step__index { font-size:13px; }
.roof-passport-form .quiz-step__hint { font-size:14px; }
.quiz-photo-tile strong,
.quiz-shape-options span,
.quiz-thermal-options strong,
.quiz-options button,
.quiz-step-actions > button,
.callback-form > .button { font-size:14px; }
.quiz-photo-tile span,
.quiz-thermal-options span { font-size:14px; }
.roof-footprint b { font-size:12px; }
.quiz-step-error,
.field-error,
.form-status { font-size:12px; }
.quiz-summary span,
.quiz-summary i { font-size:13px; }
.quiz-summary strong { font-size:14px; }
.roof-passport-form .form-field,
.callback-form .form-field,
.contract-upload .form-field { font-size:13px; }
.roof-passport-form .form-field > input,
.callback-form .form-field > input,
.callback-form textarea,
.contract-upload input:not([type='checkbox']) { font-size:16px; border-radius:8px; }
.form-field > small:not(.field-error) { font-size:12px; }
.phone-control { border-radius:8px; }
.roof-passport-form .consent,
.callback-form .consent,
.contract-upload .consent { font-size:13px !important; line-height:1.48; }
.form-status { min-height:20px; }
.quiz-photo-tile,
.quiz-shape-options button,
.quiz-thermal-options button,
.quiz-options button,
.quiz-summary button { border-radius:10px; }

/* Accessible communication speed-dial. */
.contact-dock { position:fixed; z-index:9; right:24px; bottom:max(24px,env(safe-area-inset-bottom)); display:grid; justify-items:end; gap:12px; }
.contact-dock__launcher { position:relative; display:grid; place-items:center; width:64px; height:64px; padding:0; border:1px solid rgba(255,255,255,.62); border-radius:50%; background:var(--oxide); box-shadow:0 17px 40px rgba(47,27,21,.35); }
.contact-dock__launcher span { position:absolute; width:24px; height:2px; background:var(--white); transition:transform .22s ease; }
.contact-dock__launcher span:first-child { transform:translateY(-5px); }
.contact-dock__launcher span:last-child { transform:translateY(5px); }
.contact-dock.is-open .contact-dock__launcher span:first-child { transform:rotate(45deg); }
.contact-dock.is-open .contact-dock__launcher span:last-child { transform:rotate(-45deg); }
.contact-dock__menu { display:grid; gap:8px; width:min(285px,calc(100vw - 32px)); }
.contact-dock__menu[hidden] { display:none; }
.contact-dock__menu a,
.contact-dock__menu button { display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:center; width:100%; min-height:62px; padding:9px 13px; border:1px solid rgba(38,40,39,.18); border-radius:10px; background:rgba(255,253,248,.97); color:var(--ink); box-shadow:0 12px 34px rgba(0,0,0,.18); text-align:left; text-decoration:none; animation:contact-item-in .2s ease both; }
.contact-dock__menu i { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#2f3735; color:var(--white); font-size:16px; font-style:normal; }
.contact-dock__menu span { display:grid; }
.contact-dock__menu b { font-size:14px; }
.contact-dock__menu small { color:var(--ink-soft); font-size:12px; }
.contact-dock__launcher:focus-visible,
.contact-dock__menu a:focus-visible,
.contact-dock__menu button:focus-visible { outline:3px solid #e8d6a9; outline-offset:3px; }
body:has(.cookie-notice:not([hidden])) .contact-dock { bottom:128px; }
@keyframes contact-item-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (max-width: 950px) {
  .hero__palette { position:relative; top:auto; right:auto; bottom:auto; left:auto; width:min(520px,100%); margin:22px 0 0; }
  .hero__actions { margin-top:24px; }
  .projects-showcase__stage { grid-template-columns:1fr; }
  .projects-filmstrip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .project-thumb { flex:0 0 210px; scroll-snap-align:start; }
  .inline-quiz__shell { grid-template-columns:minmax(270px,.65fr) minmax(450px,1.35fr); }
  .inline-quiz__workspace { padding-inline:34px; }
}

@media (max-width: 760px) {
  body { font-size:16px; }
  .site-header { right:0; width:auto; }
  .header-actions .button { font-size:12px; }
  .eyebrow,
  .technical-label { font-size:12px !important; }
  .brand span { font-size:11px; }
  .hero { min-height:800px; }
  .hero__palette { top:auto; right:auto; bottom:auto; left:auto; grid-template-columns:minmax(100px,auto) repeat(4,42px); gap:6px; width:100%; margin-top:20px; padding:10px; }
  .color-dot { width:42px; height:42px; }
  .color-dot i { width:29px; height:29px; }
  .hero__proof { gap:16px; }
  .hero__proof strong { font-size:16px; }
  .hero__proof span { font-size:14px; }
  .hero__rail { bottom:9px; font-size:35px; }

  .team-ledger dd,
  .team-trigger small,
  .team-status,
  .team-route li { font-size:14px; }
  .team-trigger span,
  .team-route span { font-size:19px; }
  .team-stage[data-team='sergey'] { grid-template-columns:1fr; min-height:0; }
  .team-stage[data-team='sergey'] .team-stage__portrait { min-height:300px; max-height:340px; }
  .team-stage[data-team='sergey'] .team-stage__portrait img { width:min(58%,230px); max-height:310px; }

  .scenario-wow__head > p,
  .material-passport__head > p,
  .roof-cutaway__head > p,
  .project-journey__head > p,
  .projects__head > p { font-size:15px; }
  .material-passport__editorial { margin:0 0 25px; padding:17px 17px 17px 58px; font-size:14px; background-size:42px 100%; }
  .roof-cutaway__expert-copy { padding:18px var(--page); }
  .roof-cutaway__expert-copy p { font-size:14px; }
  .scene-caption span,
  .scene-caption small,
  .control-group > span { font-size:12px; }

  .inline-quiz { padding-inline:0; }
  .inline-quiz__head { grid-template-columns:1fr; gap:18px; padding-inline:var(--page); }
  .inline-quiz__head h2 { font-size:clamp(39px,11.5vw,52px); }
  .inline-quiz__head > p { font-size:15px; }
  .inline-quiz__shell { grid-template-columns:1fr; border-inline:0; border-radius:0; }
  .inline-quiz__expert { padding:20px; }
  .inline-quiz__expert figure { min-height:230px; }
  .inline-quiz__expert img { height:250px; }
  .inline-quiz__expert > p { font-size:14px; }
  .inline-quiz__expert-ledger { margin-top:18px; }
  .inline-quiz__workspace { min-height:0; padding:27px 20px 36px; }
  .inline-quiz__workspace .roof-passport-form { min-height:0; }

  .lead-dialog,
  .dialog-shell { border-radius:0; }
  .dialog-shell { grid-template-rows:auto minmax(0,1fr); }
  .dialog-passport { display:block; padding:14px 58px 14px 14px; }
  .dialog-passport .passport-scene,
  .dialog-passport .passport-ledger,
  .dialog-passport .passport-note { display:none; }
  .passport-expert { grid-template-columns:86px minmax(0,1fr); min-height:208px; height:auto; padding:12px; }
  .passport-expert img { width:86px; min-height:184px; }
  .passport-expert strong { font-size:20px; }
  .passport-expert span { font-size:12px; }
  .passport-expert p { font-size:12px; line-height:1.33; }
  .dialog-flow { padding-top:22px; }
  .dialog-heading > p:last-child { font-size:13px; }
  .dialog-progress > div:first-child,
  .dialog-progress strong { font-size:12px; }
  .quiz-photo-tile span,
  .quiz-shape-options span,
  .quiz-thermal-options span,
  .quiz-options button { font-size:14px; }
  .roof-passport-form .form-field,
  .callback-form .form-field { font-size:13px; }
  .roof-passport-form .consent,
  .callback-form .consent { font-size:13px !important; }

  .contact-dock { right:14px; bottom:calc(72px + env(safe-area-inset-bottom)); }
  .contact-dock__launcher { width:56px; height:56px; }
  body:has(.cookie-notice:not([hidden])) .contact-dock { bottom:calc(245px + env(safe-area-inset-bottom)); }
  body:not(.contact-dock-ready) .contact-dock { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); }
  .cookie-notice p { font-size:13px; }
}

.skip-link:focus:not(:focus-visible) { top:-4rem; }
.skip-link:focus-visible { top:1rem; }

@media (max-width: 390px) {
  .site-header { gap:12px; }
  .brand { gap:7px; }
  .brand img { width:90px; }
  .brand span { display:none; }
  .hero__palette { grid-template-columns:minmax(88px,auto) repeat(4,38px); gap:5px; }
  .color-dot { width:38px; height:40px; }
  .color-dot i { width:27px; height:27px; }
  .hero__palette-label b { font-size:12px; }
  .hero__palette-label small { font-size:13px; }
  .passport-expert { grid-template-columns:76px minmax(0,1fr); }
  .passport-expert img { width:76px; }
  .passport-expert p { font-size:13px; }
  .dialog-flow { padding-inline:15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__architecture,
  .contact-dock__launcher span,
  .contact-dock__menu a,
  .contact-dock__menu button { transition:none !important; animation:none !important; }
}

/* ============================================================
   CLAUDE FIXES 2026-07-22 — дефект-лист Игоря (14 пунктов)
   ============================================================ */

/* — Primary-кнопки: терракот вместо чёрного, читаются как кнопки — */
.button {
  border-color: var(--oxide);
  border-radius: 10px;
  background: var(--oxide);
  color: #fff;
}
.button:hover { background: #8f3a26; border-color: #8f3a26; transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 3px solid rgba(169, 67, 45, .38); outline-offset: 2px; }
.hero__actions .text-link { display: inline-flex; align-items: center; gap: 8px; padding: 15px 20px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px; text-decoration: none; transition: border-color .25s ease, background .25s ease; }
.hero__actions .text-link:hover { border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .06); }

/* — Десктопная шапка: крупнее логотип, меню, телефон, кнопка — */
@media (min-width: 951px) {
  .site-header { padding-block: 22px; }
  .brand img { width: 150px; }
  .brand span { padding-left: 12px; font-size: 13px; }
  .main-nav { display: flex; align-items: center; gap: 28px; }
  .main-nav a { font-size: 16px; font-weight: 600; transition: opacity .2s ease; }
  .main-nav a:hover { opacity: .75; }
  .header-actions { display: flex; align-items: center; gap: 22px; }
  .phone { font-size: 19px; font-weight: 700; letter-spacing: .015em; }
  .button--small { padding: 14px 22px; font-size: 15px; }
}

/* — Бегущая лента между 07 и 08: бесшовный цикл — */
.marquee { padding: 14px 0; }
.marquee .marquee__track { display: inline-flex; white-space: nowrap; animation: mk-marquee 20s linear infinite; will-change: transform; }
.marquee .marquee__track > span { display: inline-block; }
@keyframes mk-marquee { to { transform: translateX(-50%); } }

/* Декоративные ленты едут всегда: перебиваем глобальный reduce-киллер из style.css.
   Скролл-появления и пульс при reduce остаются выключенными — это осознанный компромисс. */
@media (prefers-reduced-motion: reduce) {
  .marquee .marquee__track { animation-duration: 20s !important; animation-iteration-count: infinite !important; }
  .hero__rail__track { animation-duration: 60s !important; animation-iteration-count: infinite !important; }
}

/* — Мультикнопка: иконка диалога, пульс, подсказка «Связаться» — */
.contact-dock__launcher { border: 0; color: #fff; box-shadow: 0 14px 34px rgba(47, 27, 21, .42); transition: transform .25s ease, background .25s ease; }
.contact-dock__launcher:hover { transform: scale(1.07); }
.contact-dock__launcher::before { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.contact-dock__launcher[aria-expanded="true"]::before { animation: none; }
.contact-dock__icon--close { display: none; }
.contact-dock__launcher[aria-expanded="true"] .contact-dock__icon--open { display: none; }
.contact-dock__launcher[aria-expanded="true"] .contact-dock__icon--close { display: block; }
.contact-dock__hint { position: absolute; right: calc(100% + 12px); top: 50%; padding: 8px 13px; border-radius: 9px; background: rgba(28, 30, 29, .93); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(-50%) translateX(6px); animation: mk-hint 10s ease 2.6s 1 both; pointer-events: none; }
@keyframes mk-hint {
  0%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); }
  7%, 78% { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.contact-dock:has([aria-expanded="true"]) .contact-dock__hint { display: none; }

/* — Конфигуратор: видимый отклик сцены на переключение цвета/профиля — */
.configurator__image { transition: filter .35s ease, opacity .35s ease; }
.configurator__image.is-reacting { opacity: .82; }

/* — Скролл-анимации появления — */
@media (prefers-reduced-motion: no-preference) {
  .mk-animate { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }
  .mk-animate.mk-in { opacity: 1; transform: none; }
}

/* — Мобильная шапка компактнее + hero без пустоты — */
@media (max-width: 640px) {
  .site-header {
    height: 58px;
    padding: 9px 16px;
    gap: 10px;
    background: rgba(28, 30, 29, .97);
  }
  .brand img { width: 106px; }
  .button--small { padding: 11px 16px; font-size: 13px; }
  .hero { padding-top: 82px; min-height: 0; padding-bottom: 30px; }
  .hero__architecture { top: 58px; left: 0; opacity: .58; }
  .hero__photo {
    background-image: linear-gradient(180deg, rgba(38, 40, 39, .76), rgba(38, 40, 39, .52) 58%, rgba(38, 40, 39, .34)), var(--scene-current);
  }
  .hero__photo::after {
    background-image: linear-gradient(180deg, rgba(38, 40, 39, .76), rgba(38, 40, 39, .52) 58%, rgba(38, 40, 39, .34)), var(--scene-next);
  }
  .hero__rail__track { animation-duration: 34s; }
  .contact-dock__hint { display: none; }
  .hero__eyebrow { display: none; }
}

/* — Hero: шире левая колонка (H1 в 4 строки), ghost-кнопка консультации — */
@media (min-width: 951px) {
  .hero { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
  .hero::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: clamp(670px, calc(52vw + 16px), 796px);
    background: var(--ink);
    pointer-events: none;
  }
  .hero__copy { max-width: 690px; }
  .hero h1 { font-size: clamp(42px, 4.05vw, 58px); }
  .hero__photo {
    background-image: var(--scene-current);
  }
  .hero__photo::after {
    background-image: var(--scene-next);
  }
  .hero__rail { z-index: 2; }
}

/* — Мобила: без разрыва слов с висячими буквами, читабельные подписи — */
.hero__proof li, .hero__proof span, .quiz-shape-options span, .passport-ledger strong, .quiz-summary strong { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 640px) {
  .hero__proof span { font-size: 11px; }
}
.button--ghost { border-color: rgba(255, 255, 255, .42); background: transparent; color: var(--white); }
.button--ghost:hover { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .07); }
.button--ghost i { margin-left: 10px; font-style: normal; }

/* — Финальный блок 13: центр, спокойный фон, траст-строка, телефон — */
.final-photo-cta { display: block; text-align: center; background: #1f2221; }
.final-photo-cta::before {
  background:
    radial-gradient(58% 72% at 50% 112%, rgba(169, 67, 45, .30), transparent 72%),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: auto, 74px 74px, 74px 74px;
}
.final-photo-cta__copy { width: min(860px, 100%); margin-inline: auto; padding-bottom: 0; }
.final-photo-cta__copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
.final-photo-cta__actions { justify-content: center; }
.final-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px clamp(26px, 5vw, 64px); margin: 44px 0 0; padding: 0; list-style: none; }
.final-cta-trust strong { display: block; font: italic 31px/1 var(--serif); letter-spacing: -.03em; }
.final-cta-trust span { display: block; max-width: 170px; margin-top: 7px; color: rgba(255, 253, 248, .62); font-size: 13px; line-height: 1.4; }
.final-cta-phone { margin: 36px 0 0; color: rgba(255, 253, 248, .72); font-size: 15px; }
.final-cta-phone a { margin-left: 10px; color: var(--white); font-size: 26px; font-weight: 750; text-decoration: none; border-bottom: 2px solid rgba(169, 67, 45, .8); }
.final-cta-phone a:hover { border-bottom-color: var(--white); }
.final-photo-cta__caption { position: static; max-width: none; margin: 48px auto 0; text-align: center; }
@media (max-width: 640px) {
  .final-photo-cta { min-height: 0; padding-bottom: 64px; }
  .final-cta-trust { gap: 20px 26px; }
  .final-cta-phone a { display: inline-block; margin-left: 0; margin-top: 8px; }
}

/* ============================================================
   ROOF FAMILY / ФАЛЬЦ И МЯГКАЯ ЧЕРЕПИЦА
   ============================================================ */
.roof-family {
  position: relative;
  overflow: hidden;
  background: #ded7ca;
}

.roof-family::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -90px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(38, 40, 39, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(38, 40, 39, .035), 0 0 0 144px rgba(38, 40, 39, .025);
  pointer-events: none;
}

.roof-family__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(34px, 7vw, 110px);
  align-items: end;
  margin-bottom: 48px;
}

.roof-family__head h2 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(43px, 4.5vw, 68px);
  font-weight: 580;
  line-height: .98;
  letter-spacing: -.055em;
}

.roof-family__head > p {
  max-width: 460px;
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.roof-family__console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(230px, .3fr) minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}

.roof-family__rail {
  display: grid;
  align-content: start;
  border-right: 1px solid rgba(255, 255, 255, .2);
}

.roof-family__tab {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 13px;
  min-height: 154px;
  padding: 25px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: rgba(255, 253, 248, .58);
  text-align: left;
  transition: background .22s ease, color .22s ease;
}

.roof-family__tab::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--oxide);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .22s ease;
}

.roof-family__tab span {
  grid-row: span 2;
  color: #e8d6a9;
  font: italic 24px/1 var(--serif);
}

.roof-family__tab strong { align-self: end; font-size: 19px; line-height: 1.13; }
.roof-family__tab small { color: inherit; font-size: 12px; }
.roof-family__tab:hover { color: var(--white); background: rgba(255, 255, 255, .055); }
.roof-family__tab.is-active { color: var(--ink); background: #eee7da; }
.roof-family__tab.is-active::after { transform: scaleY(1); }
.roof-family__tab.is-active span { color: var(--oxide); }
.roof-family__tab:focus-visible { z-index: 2; outline: 3px solid #e8d6a9; outline-offset: -5px; }

.roof-family__panels { min-width: 0; }
.roof-family__panel[hidden] { display: none !important; }
.roof-family__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr);
  min-height: 620px;
  animation: roof-family-enter .42s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes roof-family-enter {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

.roof-family__media {
  position: relative;
  min-width: 0;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  background: #181b1a;
}

.roof-family__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(12, 14, 13, .76));
  pointer-events: none;
}

.roof-family__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}

.roof-family[data-active-system='folded'] .roof-family__media img { object-position: 51% center; }
.roof-family[data-active-system='soft'] .roof-family__media img { object-position: center 44%; }
.roof-family__panel:hover .roof-family__media img { transform: scale(1.025); filter: saturate(1.05); }

.roof-family__media figcaption {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 21px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  color: var(--white);
}

.roof-family__media figcaption span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.roof-family__media figcaption b { font: italic 24px/1 var(--serif); }

.roof-family__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(32px, 4vw, 58px) clamp(28px, 3.5vw, 52px);
  background: #1c1f1e;
}

.roof-family__copy .technical-label { color: #e8d6a9; }
.roof-family__copy h3 {
  max-width: 460px;
  margin: 10px 0 20px;
  font: italic clamp(34px, 3vw, 47px)/.98 var(--serif);
  letter-spacing: -.045em;
}

.roof-family__copy > p:not(.technical-label) {
  max-width: 500px;
  margin: 0;
  color: rgba(255, 253, 248, .7);
  font-size: 14px;
  line-height: 1.58;
}

.roof-family__ledger {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.roof-family__ledger li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 53px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.roof-family__ledger span { color: #e8d6a9; font: italic 17px var(--serif); }
.roof-family__ledger b { font-size: 12px; font-weight: 590; line-height: 1.35; }

.roof-family__actions { display: grid; gap: 11px; margin-top: auto; padding-top: 30px; }
.roof-family__actions .button { min-height: 58px; }
.roof-family__contact {
  min-height: 50px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
  background: transparent;
  color: var(--white);
  font-weight: 650;
  text-align: left;
}
.roof-family__contact i { float: right; font-style: normal; }
.roof-family__contact:hover { border-bottom-color: var(--white); }
.roof-family__contact:focus-visible { outline: 3px solid #e8d6a9; outline-offset: 4px; }

.roof-family__footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto auto;
  gap: 15px;
  align-items: center;
  min-height: 74px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(38, 40, 39, .24);
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.roof-family__footer i { height: 1px; background: rgba(38, 40, 39, .28); }
.roof-family__footer b { margin-left: 15px; color: var(--ink); font-size: 11px; }

/* Contact dock: stronger pulse and channel-coded actions. */
.contact-dock__launcher::before {
  inset: -7px;
  border: 2px solid rgba(169, 67, 45, .72);
  box-shadow: none;
  animation: contact-dock-pulse 2.35s cubic-bezier(.2, .7, .2, 1) infinite;
}

@keyframes contact-dock-pulse {
  0% { opacity: .88; transform: scale(.86); }
  72%, 100% { opacity: 0; transform: scale(1.42); }
}

.contact-dock__menu a,
.contact-dock__menu button {
  border-color: transparent;
  color: var(--white);
  transition: transform .18s ease, filter .18s ease;
}
.contact-dock__menu [data-contact-action='max'] { background: #4e5ca8; }
.contact-dock__menu [data-contact-action='phone'] { background: #2f6f55; }
.contact-dock__menu [data-contact-action='telegram'] { background: #1d75a8; }
.contact-dock__menu [data-contact-action='callback'] { background: var(--oxide); }
.contact-dock__menu a:hover,
.contact-dock__menu button:hover { transform: translateX(-5px); filter: brightness(.92); }
.contact-dock__menu i { background: rgba(10, 14, 13, .2); color: var(--white); }
.contact-dock__menu small { color: rgba(255, 255, 255, .76); }
.contact-dock__menu > :nth-child(2) { animation-delay: .035s; }
.contact-dock__menu > :nth-child(3) { animation-delay: .07s; }
.contact-dock__menu > :nth-child(4) { animation-delay: .105s; }

@media (max-width: 1050px) {
  .roof-family__head { grid-template-columns: 1fr; gap: 22px; }
  .roof-family__console { grid-template-columns: 1fr; }
  .roof-family__rail { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .roof-family__tab { min-height: 118px; border-right: 1px solid rgba(255, 255, 255, .2); }
  .roof-family__tab:last-child { border-right: 0; }
  .roof-family__panel { grid-template-columns: 1fr; }
  .roof-family__media, .roof-family__media img { min-height: 460px; height: 460px; }
  .roof-family__copy { min-height: 540px; }
  .roof-family__footer { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; }
  .roof-family__footer span { padding: 15px 12px; border-right: 1px solid rgba(38, 40, 39, .16); text-align: center; }
  .roof-family__footer i { display: none; }
  .roof-family__footer b { grid-column: 1 / -1; margin: 0; padding: 14px; border-top: 1px solid rgba(38, 40, 39, .16); text-align: center; }
}

@media (max-width: 640px) {
  .roof-family__head { margin-bottom: 30px; }
  .roof-family__head h2 { font-size: 39px; }
  .roof-family__head > p { font-size: 14px; }
  .roof-family__console { margin-inline: -20px; }
  .roof-family__tab { grid-template-columns: 28px minmax(0, 1fr); gap: 3px 8px; min-height: 102px; padding: 18px 13px; }
  .roof-family__tab span { font-size: 19px; }
  .roof-family__tab strong { font-size: 14px; }
  .roof-family__tab small { font-size: 10px; }
  .roof-family__media, .roof-family__media img { min-height: 330px; height: 330px; }
  .roof-family__media figcaption { left: 18px; right: 18px; bottom: 16px; }
  .roof-family__media figcaption span { font-size: 9px; }
  .roof-family__media figcaption b { font-size: 19px; }
  .roof-family__copy { min-height: 590px; padding: 29px 20px 33px; }
  .roof-family__copy h3 { font-size: 34px; }
  .roof-family__copy > p:not(.technical-label) { font-size: 13px; }
  .roof-family__actions .button { width: 100%; padding-inline: 16px; }
  .roof-family__footer { margin-inline: -20px; }
  .roof-family__footer span, .roof-family__footer b { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .roof-family__panel,
  .roof-family__media img,
  .roof-family__tab,
  .roof-family__tab::after,
  .contact-dock__launcher::before,
  .contact-dock__menu a,
  .contact-dock__menu button { animation: none !important; transition: none !important; }
}

/* Game estimate: an industrial roof assembly console based on a real 354 m² scope. */
.game-estimate {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: #202624;
}
.game-estimate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 68%);
  mask-image: linear-gradient(to bottom, #000, transparent 68%);
}
.game-estimate__head,
.estimate-console { position: relative; z-index: 1; max-width: 1380px; margin-inline: auto; }
.game-estimate__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: clamp(36px, 7vw, 112px);
  align-items: end;
  margin-bottom: 46px;
}
.game-estimate__head h2 { max-width: 900px; margin: 0; font-size: clamp(44px, 5.2vw, 78px); line-height: .96; letter-spacing: -.055em; }
.game-estimate__head > p { margin: 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.58; }

.estimate-console {
  display: grid;
  grid-template-columns: minmax(410px, 1.03fr) minmax(350px, .8fr) minmax(360px, .74fr);
  min-height: 960px;
  border: 1px solid rgba(255,255,255,.25);
  background: #161b1a;
  box-shadow: 0 44px 100px rgba(0,0,0,.36);
}
.estimate-console__visual { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid rgba(255,255,255,.2); background: #252d2b; }
.estimate-console__status { position: absolute; z-index: 2; top: 25px; right: 26px; left: 26px; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.28); }
.estimate-console__status span { color: rgba(255,255,255,.58); font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.estimate-console__status span b { color: #f4ddb0; font: inherit; }
.estimate-console__status strong { color: #f4ddb0; font: 700 11px/1 var(--sans); letter-spacing: .03em; text-align: right; }
.estimate-house { display: block; width: 100%; height: 100%; min-height: 960px; color: #101514; }
.estimate-grid path { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.estimate-ground { fill: #171d1b; }
.estimate-building { filter: drop-shadow(0 20px 15px rgba(0,0,0,.3)); }
.estimate-roof-system {
  transform: scaleX(var(--estimate-roof-scale-x, 1)) scaleY(var(--estimate-roof-scale-y, 1));
  transform-origin: 50% 61%;
  transition: transform .34s cubic-bezier(.2,.72,.2,1);
}
.estimate-roof { transform-origin: 50% 55%; animation: estimate-roof-in .38s cubic-bezier(.2,.7,.2,1) both; }
.game-estimate[data-material='economy045'] .estimate-roof { filter: brightness(1.16) saturate(.78); }
.game-estimate[data-material='polyester05'] .estimate-roof { filter: brightness(1.08) saturate(.74); }
.game-estimate[data-material='matt05'] .estimate-roof { filter: saturate(.68); }
.game-estimate[data-material='premium05'] .estimate-roof { filter: brightness(.92) contrast(1.16) drop-shadow(0 8px 10px rgba(0,0,0,.22)); }
.estimate-roof[hidden] { display: none; }
.estimate-ridge { fill: none; stroke: #aab2af; stroke-width: 5; stroke-linecap: round; }
.estimate-demolition { color: #f0b06e; transition: opacity .24s ease, transform .24s ease; }
.estimate-demolition path { fill: none; stroke: currentColor; stroke-width: 4; stroke-dasharray: 10 12; opacity: .76; }
.estimate-demolition text { fill: currentColor; font: 800 15px/1 var(--sans); letter-spacing: .14em; }
.estimate-gutter,
.estimate-soffit,
.estimate-snow,
.estimate-scaffold { fill: none; transition: opacity .24s ease, transform .24s ease; }
.estimate-gutter { stroke: #e5c375; stroke-width: 9; stroke-linecap: round; }
.estimate-soffit { stroke: #d8c8ae; stroke-width: 8; stroke-dasharray: 6 8; }
.estimate-snow { stroke: #d05b3e; stroke-width: 5; }
.estimate-scaffold { stroke: rgba(233,226,210,.65); stroke-width: 3; }
.estimate-house .is-off { opacity: 0; transform: translateY(10px); }
.estimate-dimensions { color: #f4ddb0; pointer-events: none; }
.estimate-dimensions path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .68; }
.estimate-dimensions text { fill: currentColor; font: 750 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .84; }
.estimate-scan { fill: none; stroke: rgba(240,200,117,.74); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px rgba(240,200,117,.68)); pointer-events: none; }
.estimate-console__visual.is-recalculating .estimate-scan { animation: estimate-engineering-scan .44s ease-out both; }
.game-estimate[data-mode='work'] .estimate-roof { opacity: .78; }
.estimate-legend { position: absolute; right: 24px; bottom: 23px; left: 24px; display: flex; flex-wrap: wrap; gap: 9px 16px; color: rgba(255,255,255,.62); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.estimate-legend span { display: inline-flex; align-items: center; gap: 7px; }
.estimate-legend i { width: 16px; height: 3px; background: #84908d; }
.estimate-legend .is-extra { background: #e5c375; }
.estimate-legend .is-demo { background: #f0b06e; border-top: 1px dashed #f0b06e; }

.estimate-console__controls { min-width: 0; padding: 28px 30px 32px; background: #ede5d8; color: var(--ink); }
.estimate-control { min-width: 0; margin: 0; padding: 0 0 25px; border: 0; border-bottom: 1px solid rgba(38,40,39,.2); }
.estimate-control + .estimate-control { padding-top: 24px; }
.estimate-control:last-child { padding-bottom: 0; border-bottom: 0; }
.estimate-control legend { display: flex; align-items: center; gap: 11px; width: 100%; margin: 0 0 15px; padding: 0; font: 800 13px/1.2 var(--sans); }
.estimate-control legend span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; color: var(--oxide); font-size: 10px; }
.estimate-segment { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(38,40,39,.35); }
.estimate-segment button { min-height: 68px; padding: 12px 13px; border: 0; background: transparent; color: inherit; font: 800 13px/1.2 var(--sans); text-align: left; cursor: pointer; }
.estimate-segment button + button { border-left: 1px solid rgba(38,40,39,.35); }
.estimate-segment button small { display: block; margin-top: 5px; color: rgba(38,40,39,.55); font-size: 10px; font-weight: 600; }
.estimate-segment button.is-active { background: var(--oxide); color: var(--white); }
.estimate-segment button.is-active small { color: rgba(255,255,255,.72); }
.estimate-area-readout { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.estimate-area-readout output { font: 700 48px/.95 var(--serif); }
.estimate-area-readout b { font-size: 14px; }
.estimate-control input[type='range'] { width: 100%; height: 26px; margin: 4px 0; accent-color: var(--oxide); cursor: ew-resize; }
.estimate-area-scale { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 9px; color: rgba(38,40,39,.55); font-size: 10px; }
.estimate-area-scale > :last-child { text-align: right; }
.estimate-area-scale button { padding: 3px 5px; border: 0; border-bottom: 1px dotted currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.estimate-shapes { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(38,40,39,.3); }
.estimate-shapes button { min-width: 0; min-height: 78px; padding: 9px 6px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.estimate-shapes button + button { border-left: 1px solid rgba(38,40,39,.25); }
.estimate-shapes svg { display: block; width: 54px; height: 30px; margin: 0 auto 6px; }
.estimate-shapes path { fill: none; stroke: currentColor; stroke-width: 4; }
.estimate-shapes span { font-size: 10px; font-weight: 800; }
.estimate-shapes button.is-active { background: #2b3230; color: #f4ddb0; }
.estimate-materials { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid rgba(38,40,39,.3); }
.estimate-materials button { position: relative; min-width: 0; min-height: 67px; padding: 11px 9px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.estimate-materials button + button { border-left: 1px solid rgba(38,40,39,.25); }
.estimate-materials button::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: transparent; }
.estimate-materials strong,
.estimate-materials small { display: block; }
.estimate-materials strong { font-size: 11px; line-height: 1.15; }
.estimate-materials small { margin-top: 6px; color: rgba(38,40,39,.56); font-size: 8px; line-height: 1.2; }
.estimate-materials button.is-active { background: #2b3230; color: #f4ddb0; }
.estimate-materials button.is-active::before { background: var(--oxide); }
.estimate-materials button.is-active small { color: rgba(255,255,255,.62); }
.estimate-price-source { margin: 11px 0 0; padding-left: 10px; border-left: 2px solid var(--oxide); color: rgba(38,40,39,.65); font-size: 9px; line-height: 1.42; }
.estimate-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.estimate-switches label { min-width: 0; cursor: pointer; }
.estimate-switches input { position: absolute; opacity: 0; pointer-events: none; }
.estimate-switches span { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 9px; border: 1px solid rgba(38,40,39,.25); font-size: 10px; font-weight: 800; line-height: 1.2; }
.estimate-switches i { position: relative; flex: 0 0 25px; height: 14px; border-radius: 10px; background: #afa99e; transition: background .18s ease; }
.estimate-switches i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.estimate-switches input:checked + span { border-color: var(--oxide); color: var(--oxide); }
.estimate-switches input:checked + span i { background: var(--oxide); }
.estimate-switches input:checked + span i::after { transform: translateX(11px); }
.estimate-switches input:focus-visible + span { outline: 3px solid rgba(178,75,51,.35); outline-offset: 2px; }

.estimate-console__result { position: relative; min-width: 0; padding: 29px 27px 31px; color: #f7f2e9; background: #2a302e; }
.estimate-console__result::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.035) 31px 32px); }
.estimate-console__result > * { position: relative; z-index: 1; }
.estimate-ticket__top { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.55); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.estimate-ticket__top b { color: #f4ddb0; }
.estimate-breakdown { margin-top: 17px; }
.estimate-breakdown__group { padding: 14px 0 15px; border-bottom: 1px solid rgba(255,255,255,.24); }
.estimate-breakdown__group:first-child { padding-top: 0; }
.estimate-breakdown__group header { display: grid; gap: 7px; margin-bottom: 7px; }
.estimate-breakdown__group header span { color: #f0c875; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.estimate-breakdown__group header strong { font: italic 19px/1.05 var(--serif); }
.estimate-breakdown dl { margin: 0; }
.estimate-breakdown dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 5px 0; }
.estimate-breakdown dl div[hidden] { display: none; }
.estimate-breakdown dt { color: rgba(255,255,255,.62); font-size: 9px; line-height: 1.25; }
.estimate-breakdown dd { margin: 0; color: rgba(255,255,255,.86); font-size: 9px; font-weight: 700; text-align: right; white-space: nowrap; }
.estimate-breakdown__group--logistics p { margin: 0; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.4; }
.estimate-breakdown__group.is-excluded { opacity: .58; }
.estimate-breakdown__group.is-excluded header strong { color: #f4ddb0; font-family: var(--sans); font-size: 13px; font-style: normal; letter-spacing: .02em; text-transform: uppercase; }
.estimate-breakdown__group.is-excluded dl { position: relative; }
.estimate-breakdown__group.is-excluded dl::after { content: 'спецификация сохранена для монтажа'; display: block; margin-top: 7px; color: #f0c875; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.estimate-ticket__total { margin-top: 24px; padding: 21px 0 22px; border-top: 3px solid #f0c875; border-bottom: 1px solid rgba(255,255,255,.32); }
.estimate-ticket__total > span { display: block; color: #f0c875; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.estimate-ticket__total strong { display: grid; gap: 2px; margin: 13px 0 9px; font: italic 31px/.96 var(--serif); letter-spacing: -.035em; }
.estimate-ticket__total strong i { color: rgba(255,255,255,.35); font: 400 16px/1 var(--sans); }
.estimate-ticket__total small { color: rgba(255,255,255,.65); font-size: 10px; }
.estimate-ticket__note { margin: 20px 0 0; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.52; }
.estimate-lead { display: grid; gap: 11px; margin-top: 20px; }
.estimate-lead__fields { display: grid; gap: 9px; }
.estimate-lead__fields label { display: grid; gap: 5px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; }
.estimate-lead__fields label > input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 16px; outline: 0; }
.estimate-lead__fields label > input:focus { border-color: #f0c875; box-shadow: 0 0 0 3px rgba(240,200,117,.11); }
.estimate-lead .phone-control { border-color: rgba(255,255,255,.3); border-radius: 0; background: rgba(255,255,255,.08); }
.estimate-lead .phone-control:focus-within { border-color: #f0c875; box-shadow: 0 0 0 3px rgba(240,200,117,.11); }
.estimate-lead .phone-control > b { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.estimate-lead .phone-control > input { color: #fff !important; }
.estimate-lead .form-field > small,
.estimate-lead__fields small { color: rgba(255,255,255,.48); font-size: 9px; }
.estimate-lead .field-error { color: #ffb5a6; }
.estimate-lead .consent { display: grid; grid-template-columns: 19px minmax(0,1fr) !important; gap: 9px !important; align-items: start; margin-top: 2px; color: rgba(255,255,255,.58); font-size: 10px !important; line-height: 1.4; }
.estimate-lead .consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--oxide); }
.estimate-lead__submit { position: relative; isolation: isolate; width: 100%; min-height: 60px; margin-top: 2px; padding: 13px 16px; border-color: var(--oxide); background: var(--oxide); font-size: 12px; animation: estimate-cta-breathe 2.4s ease-in-out infinite; }
.estimate-lead__submit::before { content: ''; position: absolute; z-index: -1; inset: -5px; border: 1px solid rgba(224,105,76,.65); opacity: 0; transform: scale(.98); animation: estimate-cta-ring 2.4s ease-out infinite; }
.estimate-lead__submit:hover { background: #913823; }
.estimate-lead__submit:disabled { animation: none; opacity: .72; }
.estimate-lead .form-status { min-height: 18px; margin: 0; color: #f0c875; font-size: 10px; }
.estimate-ticket__guard { margin: 16px 0 0; padding-left: 13px; border-left: 2px solid var(--oxide); color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.45; }
.estimate-console__result.is-updating .estimate-ticket__total strong { animation: estimate-total-pulse .3s ease both; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.estimate-segment button:focus-visible,
.estimate-shapes button:focus-visible,
.estimate-materials button:focus-visible,
.estimate-area-scale button:focus-visible { position: relative; z-index: 2; outline: 3px solid rgba(178,75,51,.4); outline-offset: -3px; }

@keyframes estimate-roof-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes estimate-engineering-scan { 0% { opacity: 0; transform: translateX(0); } 16% { opacity: .9; } 100% { opacity: 0; transform: translateX(660px); } }
@keyframes estimate-total-pulse { 50% { color: #f0c875; transform: translateX(3px); } }
@keyframes estimate-cta-breathe { 0%, 100% { box-shadow: 0 10px 25px rgba(169,67,45,.15); } 50% { box-shadow: 0 15px 34px rgba(169,67,45,.4); } }
@keyframes estimate-cta-ring { 0% { opacity: .7; transform: scale(.985); } 72%, 100% { opacity: 0; transform: scale(1.045); } }

@media (max-width: 1240px) {
  .estimate-console { grid-template-columns: minmax(360px, 1fr) minmax(330px, .8fr); }
  .estimate-console__result { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; }
  .estimate-console__result::before { content: none; }
  .estimate-ticket__top { grid-column: 1 / -1; }
  .estimate-breakdown { grid-row: 2 / span 5; }
  .estimate-ticket__total { margin-top: 17px; }
  .estimate-ticket__note { margin-top: 16px; }
  .estimate-ticket__guard { align-self: end; }
}

@media (max-width: 820px) {
  .game-estimate__head { grid-template-columns: 1fr; gap: 18px; }
  .estimate-console { grid-template-columns: 1fr; }
  .estimate-console__visual { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .estimate-house { height: 560px; min-height: 0; }
  .estimate-console__result { grid-column: auto; }
}

@media (max-width: 640px) {
  .game-estimate { padding-inline: 0; }
  .game-estimate__head { padding-inline: var(--page); margin-bottom: 30px; }
  .game-estimate__head h2 { font-size: clamp(38px, 11vw, 48px); }
  .game-estimate__head > p { font-size: 14px; }
  .estimate-console { border-inline: 0; }
  .estimate-house { height: 430px; }
  .estimate-console__status { top: 18px; right: 20px; left: 20px; display: grid; gap: 7px; }
  .estimate-console__status strong { text-align: left; }
  .estimate-legend { right: 18px; bottom: 17px; left: 18px; gap: 7px 12px; font-size: 8px; }
  .estimate-console__controls { padding: 26px 20px 31px; }
  .estimate-control { padding-bottom: 23px; }
  .estimate-control + .estimate-control { padding-top: 22px; }
  .estimate-area-readout output { font-size: 43px; }
  .estimate-switches { grid-template-columns: 1fr; }
  .estimate-materials strong { font-size: 10px; }
  .estimate-materials small { font-size: 8px; }
  .estimate-switches span { font-size: 11px; }
  .estimate-console__result { display: block; padding: 28px 20px 34px; }
  .estimate-breakdown { margin-top: 15px; }
  .estimate-breakdown__group header strong { font-size: 20px; }
  .estimate-breakdown dt,
  .estimate-breakdown dd,
  .estimate-breakdown__group--logistics p { font-size: 10px; }
  .estimate-ticket__total strong { font-size: 34px; }
  .estimate-lead__submit { min-height: 62px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .estimate-roof,
  .estimate-roof-system,
  .estimate-scan,
  .estimate-demolition,
  .estimate-gutter,
  .estimate-soffit,
  .estimate-snow,
  .estimate-scaffold,
  .estimate-switches i,
  .estimate-switches i::after,
  .estimate-console__result.is-updating .estimate-ticket__total strong,
  .estimate-lead__submit,
  .estimate-lead__submit::before { animation: none !important; transition: none !important; }
}

/* A fixed halo looks like a broken animation in reduced-motion mode.
   Keep the launcher clean and remove the decorative ring entirely. */
@media (prefers-reduced-motion: reduce) {
  .contact-dock__launcher::before {
    opacity: 0;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
}

/* Deprecated viewport-fit experiment. Its media queries are intentionally
   unreachable: visual QA showed that fixed scene heights clipped real content. */
.estimate-mobile-nav,
.estimate-details-toggle,
.contract-mobile-tabs,
.fit-copy-toggle { display: none; }

@media (min-width: 99999px) and (max-height: 950px) {
  main > .section:not(.hero) { padding-block: clamp(38px, 5vh, 48px); }
  main > .section:not(.hero) h2 { font-size: clamp(38px, 4.2vw, 58px); }

  .team-console {
    display: grid;
    grid-template-columns: minmax(280px, .62fr) minmax(620px, 1.38fr);
    grid-template-rows: auto auto 1fr;
    gap: 18px 42px;
    align-items: start;
  }
  .team-console__intro,
  .team-console__company,
  .team-ledger,
  .team-console__panel { width: 100%; max-width: none; margin: 0; }
  .team-console__intro { display: block; grid-column: 1; }
  .team-console__intro > p { margin-top: 17px; font-size: 13px; line-height: 1.45; }
  .team-console__company { grid-column: 1; font-size: 13px; line-height: 1.45; }
  .team-ledger { grid-column: 1; grid-template-columns: 1fr 1fr; align-self: end; }
  .team-ledger div { min-height: 72px; padding: 11px 12px 11px 0; }
  .team-ledger div:nth-child(2) { border-right: 0; }
  .team-ledger div:nth-child(n + 3) { border-top: 1px solid rgba(255,255,255,.2); }
  .team-ledger div:nth-child(3) { padding-left: 0; }
  .team-ledger dt { font-size: 23px; }
  .team-ledger dd { margin-top: 5px; font-size: 9px; }
  .team-console__panel { grid-column: 2; grid-row: 1 / 4; }
  .team-trigger { min-height: 72px; padding: 10px 14px; }
  .team-trigger strong { margin-top: 6px; font-size: 13px; }
  .team-trigger small { font-size: 9px; }
  .team-stage,
  .team-stage__portrait { min-height: 410px; height: 410px; }
  .team-stage__copy { padding: 26px 30px; }
  .team-stage__copy h3 { margin-bottom: 13px; font-size: clamp(30px, 3vw, 42px); }
  .team-stage__copy > p:not(.technical-label):not(.team-stage__result):not(.team-status) { font-size: 13px; line-height: 1.45; }
  .team-stage__result { margin-top: 15px; padding-top: 11px; font-size: 11px; }
  .team-status { margin-top: 10px; font-size: 9px; }
  .team-route li { min-height: 54px; padding: 11px 10px 9px 0; }
  .team-route span { display: inline; margin-right: 6px; font-size: 13px; }

  .scenario-wow__head,
  .material-passport__head,
  .roof-cutaway__head,
  .game-estimate__head,
  .project-journey__head,
  .projects-showcase .projects__head,
  .roof-family__head,
  .faq-visual__head { margin-bottom: 20px; gap: 34px; }
  .scenario-wow__head > p,
  .material-passport__head > p,
  .roof-cutaway__head > p,
  .game-estimate__head > p,
  .project-journey__head > p,
  .projects-showcase .projects__head > p,
  .roof-family__head > p,
  .faq-visual__head > p:not(.eyebrow) { font-size: 13px; line-height: 1.45; }

  .scenario-wow__stage { height: 540px; min-height: 0; }
  .scenario-wow__media { min-height: 0; height: 540px; }
  .scenario-wow .scenario-choice { padding: 15px; }
  .scenario-wow .scenario-choice img { width: 62px; height: 76px; }
  .scenario-wow .scenario-choice strong { font-size: 19px; }
  .scenario-check { padding: 15px 18px; }
  .scenario-check h3 { font-size: 24px; }

  .material-passport__editorial { margin-bottom: 18px; padding-block: 12px; font-size: 13px; }
  .material-passport__stage { min-height: 510px; height: 510px; }
  .material-passport__markers { top: 22px; left: 22px; }
  .material-marker { min-height: 52px; }
  .material-card { right: 22px; bottom: 22px; padding: 24px; }

  .configurator__top { margin-bottom: 18px; }
  .configurator__top > p { font-size: 13px; }
  .configurator__scene { height: 474px; min-height: 0; }
  .configurator__controls { padding-top: 16px; gap: 16px; }

  .roof-cutaway__layout { height: 550px; }
  .roof-cutaway__visual,
  .roof-cutaway__visual > img { min-height: 0; height: 550px; }
  .roof-cutaway__console { height: 550px; overflow: hidden; }
  .roof-cutaway__expert-copy { padding: 14px 18px; }
  .roof-cutaway__expert-copy strong { font-size: 20px; }
  .roof-cutaway__expert-copy p { margin-top: 6px; font-size: 11px; line-height: 1.35; }
  .cutaway-tab { min-height: 48px; padding-block: 8px; }
  .cutaway-panel { padding: 18px 20px; }
  .cutaway-panel h3 { font-size: 27px; }
  .cutaway-panel > p:not(.technical-label) { margin-top: 7px; font-size: 12px; }
  .cutaway-panel dl { margin-top: 12px; }
  .cutaway-panel dl div { padding-block: 7px; }

  .game-estimate__head { margin-bottom: 18px; }
  .game-estimate__head h2 { font-size: clamp(40px, 4.6vw, 62px); }
  .estimate-console {
    grid-template-columns: minmax(360px, 1.08fr) minmax(300px, .82fr) minmax(350px, 1fr);
    height: 650px;
    min-height: 0;
    overflow: hidden;
  }
  .estimate-console__visual,
  .estimate-console__controls,
  .estimate-console__result { height: 650px; min-height: 0; }
  .estimate-house { height: 650px; min-height: 0; }
  .estimate-console__controls { padding: 16px 18px; }
  .estimate-control { padding-bottom: 8px; }
  .estimate-control + .estimate-control { padding-top: 8px; }
  .estimate-control legend { margin-bottom: 6px; font-size: 11px; }
  .estimate-control legend span { width: 21px; height: 21px; }
  .estimate-segment button { min-height: 42px; padding: 7px 9px; font-size: 11px; }
  .estimate-segment button small { margin-top: 2px; font-size: 8px; }
  .estimate-area-readout output { font-size: 32px; }
  .estimate-control input[type='range'] { height: 18px; margin: 0; }
  .estimate-shapes button { min-height: 54px; padding-block: 4px; }
  .estimate-shapes svg { width: 42px; height: 22px; margin-bottom: 2px; }
  .estimate-materials button { min-height: 46px; padding: 7px; }
  .estimate-materials small { margin-top: 3px; }
  .estimate-price-source { margin-top: 5px; font-size: 8px; }
  .estimate-switches { gap: 5px; }
  .estimate-switches span { min-height: 32px; padding: 5px 7px; font-size: 9px; }
  .estimate-console__result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0 18px;
    padding: 17px 18px;
    overflow: hidden;
  }
  .estimate-ticket__top { grid-column: 1 / -1; padding-bottom: 9px; }
  .estimate-breakdown { grid-column: 1; grid-row: 2 / 6; margin-top: 10px; }
  .estimate-breakdown__group { padding: 8px 0; }
  .estimate-breakdown__group header { gap: 3px; margin-bottom: 3px; }
  .estimate-breakdown__group header strong { font-size: 16px; }
  .estimate-breakdown dl div { padding: 2px 0; }
  .estimate-ticket__total { grid-column: 2; margin-top: 10px; padding: 12px 0; }
  .estimate-ticket__total strong { margin: 7px 0 5px; font-size: 24px; }
  .estimate-ticket__note { grid-column: 2; margin-top: 9px; font-size: 9px; }
  .estimate-lead { grid-column: 2; gap: 6px; margin-top: 9px; }
  .estimate-lead__fields { grid-template-columns: 1fr 1fr; gap: 6px; }
  .estimate-lead__fields label > input,
  .estimate-lead .phone-control { min-height: 40px; }
  .estimate-lead .consent { font-size: 8px !important; }
  .estimate-lead__submit { min-height: 44px; }
  .estimate-ticket__guard { grid-column: 2; margin-top: 8px; font-size: 8px; }

  .honest-estimate { gap: 42px; }
  .honest-estimate__copy { align-self: center; }
  .honest-estimate h2 { font-size: clamp(38px, 4vw, 55px); }
  .honest-estimate__lead { margin-top: 15px; font-size: 14px; }
  .honest-estimate__copy > p:not(.eyebrow):not(.honest-estimate__lead) { margin-top: 12px; font-size: 12px; }
  .honest-estimate__copy .button { margin-top: 18px; }
  .estimate-glass { min-height: 540px; height: 540px; }
  .estimate-paper { padding: 28px; }

  .project-journey__stage { min-height: 0; height: 500px; }
  .project-journey__controls { min-height: 76px; }
  .projects-showcase .projects__head { margin-bottom: 20px; }
  .projects-showcase__stage { min-height: 0; height: 500px; }
  .projects-feature { height: 500px; }
  .projects-showcase__note { min-height: 0; height: 500px; padding: 28px; }
  .projects-filmstrip { margin-top: 16px; height: 72px; }
  .projects-filmstrip button { min-height: 72px; }

  .roof-family__head { margin-bottom: 18px; }
  .roof-family__console { grid-template-columns: 210px minmax(0, 1fr); height: 500px; min-height: 0; }
  .roof-family__rail { grid-template-columns: 1fr; }
  .roof-family__tab { min-height: 0; padding: 16px; }
  .roof-family__panel { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); height: 500px; }
  .roof-family__media,
  .roof-family__media img,
  .roof-family__copy { min-height: 0; height: 500px; }
  .roof-family__copy { padding: 28px; }
  .roof-family__copy h3 { font-size: 31px; }
  .roof-family__copy > p:not(.technical-label) { font-size: 12px; }
  .roof-family__ledger { margin-top: 13px; }
  .roof-family__ledger li { min-height: 42px; padding-block: 7px; }
  .roof-family__actions { margin-top: 15px; }
  .roof-family__actions .button,
  .roof-family__contact { min-height: 44px; padding-block: 9px; }
  .roof-family__footer { min-height: 44px; margin-top: 12px; }

  .contract-estimate { min-height: 0; }
  .contract-estimate__content { grid-template-columns: 1fr 1fr; gap: 38px; }
  .contract-estimate__copy > p:not(.eyebrow) { margin-top: 12px; font-size: 13px; }
  .contract-sheet { margin-top: 17px; padding: 20px; }
  .contract-sheet__guarantee strong { font-size: 82px; }
  .contract-sheet h3 { margin-block: 6px; font-size: 25px; }
  .contract-sheet li,
  .contract-sheet > p { font-size: 10px; }
  .contract-upload { gap: 10px; padding: 23px; }
  .contract-upload__head h3 { font-size: 28px; }
  .contract-upload__head p { margin-top: 7px; font-size: 11px; }
  .contract-upload .form-field input,
  .contract-upload .phone-control { min-height: 44px; }
  .estimate-dropzone { min-height: 105px; }
  .contract-upload .button { min-height: 48px; }

  .faq-visual__layout { gap: 28px; }
  .faq-visual__stage,
  .faq-visual__stage > img { min-height: 0; height: 500px; }
  .faq-visual__list summary { min-height: 58px; padding-block: 13px; font-size: 15px; }
  .faq-visual__list details p { padding-bottom: 14px; font-size: 11px; }

  .final-photo-cta { min-height: calc(100svh - 1px); padding-block: 54px; }
  .final-photo-cta__copy { width: min(940px, 100%); }
  .final-photo-cta h2 { font-size: clamp(46px, 5vw, 68px); }
  .final-photo-cta__copy > p:not(.eyebrow) { margin-top: 17px; }
  .final-photo-cta__actions { margin-top: 22px; }
  .final-cta-trust { margin-top: 28px; }
  .final-cta-phone { margin-top: 20px; }
}

/* Natural-flow mobile typography: keep long roofing terms intact instead of
   breaking a word merely to force the whole section into one viewport. */
@media (max-width: 640px) {
  main > .section:not(.hero) h2 {
    font-size: clamp(31px, 8.8vw, 35px);
    line-height: 1;
    overflow-wrap: normal;
    hyphens: none;
  }
}

@media (max-width: 0px) and (max-height: 1100px) {
  .mobile-bar { transition: transform .24s ease, opacity .18s ease; }
  body.section-viewport-mode .mobile-bar { transform: translateY(110%); opacity: 0; pointer-events: none; }
  main > section { scroll-margin-top: 0 !important; }
  main > .section:not(.hero) { padding: 20px; }
  main > .section:not(.hero) h2 { font-size: clamp(31px, 9.2vw, 36px); line-height: .98; letter-spacing: -.045em; }
  .eyebrow { margin-bottom: 8px; font-size: 9px; }

  .fit-copy-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    border-bottom: 1px dotted currentColor;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 750;
  }
  .fit-copy-target {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .is-fit-copy-expanded .fit-copy-target { display: block !important; overflow: visible; }

  .hero { box-sizing: border-box; min-height: 100svh; height: 100svh; padding-top: 76px; padding-bottom: 48px; }
  .hero__copy { height: auto; }
  .hero h1 { margin-bottom: 18px; font-size: clamp(34px, 9.7vw, 38px); }
  .hero__lead { font-size: 14px; line-height: 1.45; }
  .hero__actions { gap: 11px; margin-top: 21px; }
  .hero__actions .button { min-height: 54px; padding-block: 12px; }
  .hero__proof { margin-top: 28px; }
  .hero__proof strong { font-size: 13px; }
  .hero__proof span { font-size: 9px; }

  .team-console { display: block; }
  .team-console__intro,
  .team-console__company,
  .team-ledger,
  .team-console__panel { width: 100%; max-width: none; margin-inline: 0; }
  .team-console__intro { display: block; }
  .team-console__intro > p,
  .team-console__company { margin-top: 10px; font-size: 12px; line-height: 1.4; }
  .team-console > .fit-copy-toggle { display: none; margin-top: 7px; }
  .team-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 13px; }
  .team-ledger div,
  .team-ledger div:nth-child(n) { min-height: 68px; padding: 10px 7px; border-top: 0; border-right: 1px solid rgba(255,255,255,.18); }
  .team-ledger div:first-child { padding-left: 0; }
  .team-ledger div:last-child { border-right: 0; }
  .team-ledger dt { font-size: 18px; }
  .team-ledger dd { margin-top: 5px; font-size: 8px; }
  .team-console__panel { margin-top: 14px; margin-inline: -20px; }
  .team-console__panel::after { height: 63px; }
  .team-rail { height: 64px; }
  .team-trigger { flex-basis: 132px; min-height: 64px; padding: 8px 10px; }
  .team-trigger span { font-size: 13px; }
  .team-trigger strong { margin-top: 3px; font-size: 11px; }
  .team-trigger small { margin-top: 2px; font-size: 8px; }
  .team-stage { grid-template-columns: 42% 58%; min-height: 0; height: 274px; }
  .team-stage__portrait { min-height: 0; height: 274px; }
  .team-stage__portrait p { top: 13px; left: 12px; font-size: 30px; }
  .team-stage__copy { min-height: 0; height: 274px; padding: 13px 14px; overflow: hidden; }
  .team-stage__copy h3 { margin-bottom: 8px; font-size: 23px; }
  .team-stage__copy .technical-label { margin-bottom: 6px; font-size: 8px; }
  .team-stage__copy > p:not(.technical-label):not(.team-stage__result):not(.team-status) { font-size: 11px; line-height: 1.35; }
  .team-stage__result { margin-top: 8px; padding: 7px 0 0 8px; font-size: 10px; line-height: 1.3; }
  .team-stage__result b { margin-bottom: 3px; font-size: 8px; }
  .team-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .team-route { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 20px; }
  .team-route li,
  .team-route li:nth-child(n) { min-height: 50px; padding: 9px 5px; border-top: 0; border-left: 1px solid rgba(255,255,255,.18); font-size: 8px; }
  .team-route li:first-child { border-left: 0; }
  .team-route span { margin-bottom: 3px; font-size: 12px; }

  .scenario-wow__head,
  .material-passport__head,
  .roof-cutaway__head,
  .game-estimate__head,
  .project-journey__head,
  .projects-showcase .projects__head,
  .roof-family__head,
  .faq-visual__head { display: block; margin-bottom: 12px; }
  .scenario-wow__head > p,
  .material-passport__head > p,
  .roof-cutaway__head > p,
  .game-estimate__head > p,
  .project-journey__head > p,
  .projects-showcase .projects__head > p,
  .roof-family__head > p,
  .faq-visual__head > p:not(.eyebrow) { margin-top: 10px; font-size: 12px; line-height: 1.4; }

  .scenario-wow__stage { display: block; min-height: 0; margin-inline: -20px; }
  .scenario-wow__media { min-height: 0; height: 338px; }
  .scenario-wow__proof { top: 9px; left: 9px; max-width: calc(100% - 18px); gap: 4px; }
  .scenario-wow__proof span,
  .scenario-wow__proof a { padding: 5px 6px; font-size: 7px; }
  .scenario-check { left: 10px; bottom: 10px; width: min(255px, calc(100% - 20px)); padding: 11px 13px; }
  .scenario-check h3 { margin-bottom: 5px; font-size: 21px; }
  .scenario-check ul { gap: 3px; font-size: 9px; }
  .scenario-wow__controls { grid-template-columns: 1fr 1fr; height: 122px; }
  .scenario-wow .scenario-choice { min-height: 0; height: 122px; padding: 9px; }
  .scenario-wow .scenario-choice img { height: 38px; }
  .scenario-wow .scenario-choice span { margin-top: 4px; font-size: 11px; }
  .scenario-wow .scenario-choice strong { font-size: 14px; }
  .scenario-wow .scenario-choice small { display: none; }

  .material-passport__editorial { margin: 0 0 10px; padding: 10px 10px 10px 45px; font-size: 11px; background-size: 35px 100%; }
  .material-passport__stage { min-height: 0; height: 450px; margin-inline: -20px; }
  .material-passport__markers { top: 9px; right: 9px; left: 9px; height: 52px; }
  .material-marker { flex: 0 0 128px; min-height: 52px; grid-template-columns: 26px 1fr; }
  .material-marker span { font-size: 9px; }
  .material-card { right: 12px; bottom: 12px; left: 12px; width: auto; min-height: 0; padding: 18px; }
  .material-card h3 { font-size: 27px; }
  .material-card > p:not(.technical-label):not(.material-card__note) { margin-top: 7px; font-size: 11px; }
  .material-card__note { margin-top: 8px; font-size: 9px; }

  .configurator__top { margin-bottom: 12px; }
  .configurator__top > p { margin-top: 9px; font-size: 12px; line-height: 1.4; }
  .configurator__scene { height: 298px; min-height: 0; }
  .configurator__controls { gap: 10px; padding-top: 12px; }
  .configurator__controls .button { min-height: 50px; }
  .swatch { min-height: 42px; }

  .roof-cutaway__layout { position: relative; display: block; height: 488px; margin-inline: -20px; overflow: hidden; }
  .roof-cutaway__visual,
  .roof-cutaway__visual > img { min-height: 0; height: 488px; }
  .roof-cutaway__console { position: absolute; inset: auto 0 0; display: block; height: 292px; border: 0; background: rgba(245,240,231,.97); backdrop-filter: blur(8px); }
  .roof-cutaway__expert-copy { display: none; }
  .cutaway-tabs { display: flex; height: 54px; overflow-x: auto; scrollbar-width: none; }
  .cutaway-tabs::-webkit-scrollbar { display: none; }
  .cutaway-tab { flex: 0 0 132px; min-height: 54px; padding: 7px 9px; font-size: 9px; }
  .cutaway-tab span { font-size: 12px; }
  .cutaway-panel { height: 238px; padding: 14px 18px; overflow: hidden; }
  .cutaway-panel h3 { font-size: 25px; }
  .cutaway-panel > p:not(.technical-label) { margin-top: 5px; font-size: 10px; line-height: 1.35; }
  .cutaway-panel dl { margin-top: 8px; }
  .cutaway-panel dl div { grid-template-columns: 64px 1fr; padding: 5px 0; }
  .cutaway-panel dt,
  .cutaway-panel dd { font-size: 9px; line-height: 1.25; }

  .game-estimate { padding-inline: 0 !important; }
  main > .game-estimate.section { padding-block: 16px !important; }
  .game-estimate__head { padding-inline: 20px; margin-bottom: 12px; }
  .game-estimate__head h2 { font-size: clamp(31px, 9.2vw, 36px); }
  .game-estimate > .fit-copy-toggle { margin-left: 20px; }
  .estimate-console { display: block; height: auto; min-height: 0; border-inline: 0; }
  .estimate-console__visual { height: 248px; min-height: 0; }
  .estimate-house { height: 248px; min-height: 0; }
  .estimate-console__status { top: 10px; right: 12px; left: 12px; gap: 4px; padding-bottom: 7px; }
  .estimate-console__status span { font-size: 7px; }
  .estimate-console__status strong { font-size: 8px; }
  .estimate-legend { right: 10px; bottom: 9px; left: 10px; font-size: 6px; }
  .estimate-console__controls { height: 216px; min-height: 0; padding: 14px 20px; }
  .estimate-console__controls .estimate-control { display: none; height: 188px; padding: 0; border: 0; }
  .estimate-console__controls .estimate-control.is-mobile-active { display: block; }
  .estimate-control legend { margin-bottom: 10px; }
  .estimate-segment button { min-height: 58px; }
  .estimate-area-readout output { font-size: 38px; }
  .estimate-shapes button { min-height: 72px; }
  .estimate-materials button { min-height: 58px; }
  .estimate-switches { grid-template-columns: 1fr 1fr; }
  .estimate-switches span { min-height: 43px; font-size: 9px; }
  .estimate-mobile-nav {
    display: grid;
    grid-template-columns: 78px minmax(0,1fr) 88px;
    align-items: stretch;
    min-height: 62px;
    border-top: 1px solid rgba(255,255,255,.18);
    background: #171c1b;
    color: #fff;
  }
  .estimate-mobile-nav button { border: 0; background: transparent; color: #f4ddb0; font-size: 10px; font-weight: 800; }
  .estimate-mobile-nav button:last-child { background: var(--oxide); color: #fff; }
  .estimate-mobile-nav button:disabled { opacity: .36; }
  .estimate-mobile-nav p { display: grid; place-content: center; gap: 4px; margin: 0; padding: 7px 8px; text-align: center; }
  .estimate-mobile-nav span { color: rgba(255,255,255,.54); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
  .estimate-mobile-nav strong { font-size: 10px; }
  .estimate-console__result { display: none !important; height: auto; min-height: 0; padding: 16px 20px 20px; }
  .estimate-console__result.is-mobile-active { display: block !important; }
  .game-estimate[data-mobile-estimate-step='7'] .estimate-console__visual,
  .game-estimate[data-mobile-estimate-step='7'] .estimate-console__controls { display: none; }
  .game-estimate[data-mobile-estimate-step='7'] .game-estimate__head > p,
  .game-estimate[data-mobile-estimate-step='7'] > .fit-copy-toggle { display: none; }
  .game-estimate[data-mobile-estimate-step='7'] .game-estimate__head > p { display: none !important; }
  .estimate-breakdown { margin-top: 8px; }
  .estimate-breakdown__group { padding: 7px 0; }
  .estimate-breakdown__group header { grid-template-columns: 1fr auto; align-items: end; margin: 0; }
  .estimate-breakdown__group header strong { font-size: 15px; text-align: right; }
  .estimate-breakdown dl,
  .estimate-breakdown__group--logistics p,
  .estimate-ticket__guard { display: none; }
  .estimate-details-toggle { display: block; margin: 9px 0 0; padding: 0 0 3px; border: 0; border-bottom: 1px dotted #f0c875; background: transparent; color: #f0c875; font-size: 10px; }
  .game-estimate.is-estimate-details-open .estimate-breakdown dl,
  .game-estimate.is-estimate-details-open .estimate-breakdown__group--logistics p,
  .game-estimate.is-estimate-details-open .estimate-ticket__guard { display: block; }
  .estimate-ticket__total { margin-top: 12px; padding: 12px 0; }
  .estimate-ticket__total strong { display: flex; align-items: baseline; gap: 7px; margin: 7px 0 4px; font-size: 25px; }
  .estimate-ticket__note { margin-top: 10px; font-size: 9px; }
  .estimate-lead { gap: 7px; margin-top: 10px; }
  .estimate-lead__fields { grid-template-columns: 1fr 1fr; gap: 7px; }
  .estimate-lead__fields label > input,
  .estimate-lead .phone-control { min-height: 44px; }
  .estimate-lead .consent { font-size: 8px !important; }
  .estimate-lead__submit { min-height: 48px; }

  .honest-estimate { gap: 15px; }
  .honest-estimate h2 { font-size: 32px; }
  .honest-estimate__lead { margin-top: 10px; font-size: 12px; }
  .honest-estimate__copy > p:not(.eyebrow):not(.honest-estimate__lead) { margin-top: 8px; font-size: 11px; }
  .honest-estimate__copy .button { margin-top: 12px; min-height: 48px; }
  .estimate-glass { min-height: 0; height: 344px; }
  .estimate-paper { padding: 20px; }
  .estimate-paper h3 { font-size: 25px; }
  .estimate-lines li { min-height: 39px; padding-block: 7px; }

  .project-journey__stage { min-height: 0; height: 382px; margin-inline: -20px; }
  .project-journey__controls { min-height: 0; height: 82px; margin-inline: -20px; }
  .journey-step { min-height: 82px; padding: 10px 13px; }

  .projects-showcase .projects__head { margin-bottom: 10px; }
  .projects-showcase__stage { position: relative; display: block; height: 440px; margin-inline: -20px; overflow: hidden; }
  .projects-feature { height: 440px; }
  .projects-showcase__note { position: absolute; inset: auto 0 0; min-height: 0; height: 205px; padding: 52px 20px 18px; background: linear-gradient(transparent, rgba(19,22,21,.96) 27%); }
  .projects-showcase__note h3 { font-size: 27px; }
  .projects-showcase__note > p:not(.technical-label):not(.projects-showcase__meta) { margin-top: 7px; font-size: 10px; }
  .projects-showcase__meta { margin-top: 6px !important; font-size: 10px !important; }
  .projects-filmstrip { height: 74px; margin: 10px -20px 0; }
  .projects-filmstrip button { flex-basis: 118px; height: 74px; }

  .roof-family__head { margin-bottom: 10px; }
  .roof-family__console { display: block; height: 464px; min-height: 0; margin-inline: -20px; overflow: hidden; }
  .roof-family__rail { display: grid; grid-template-columns: 1fr 1fr; height: 72px; }
  .roof-family__tab { min-height: 72px; padding: 8px 10px; }
  .roof-family__tab span { font-size: 13px; }
  .roof-family__tab strong { font-size: 11px; }
  .roof-family__tab small { display: none; }
  .roof-family__panel { grid-template-columns: 42% 58%; height: 392px; }
  .roof-family__media,
  .roof-family__media img,
  .roof-family__copy { min-height: 0; height: 392px; }
  .roof-family__copy { padding: 14px 13px; overflow: hidden; }
  .roof-family__copy h3 { margin-bottom: 7px; font-size: 22px; }
  .roof-family__copy > p:not(.technical-label) { font-size: 10px; line-height: 1.35; }
  .roof-family__ledger { margin-top: 8px; }
  .roof-family__ledger li { min-height: 37px; padding: 5px 0; }
  .roof-family__ledger li span { font-size: 10px; }
  .roof-family__ledger li b { font-size: 9px; }
  .roof-family__actions { gap: 6px; margin-top: 8px; }
  .roof-family__actions .button,
  .roof-family__contact { width: 100%; min-height: 41px; padding: 8px; font-size: 9px; }
  .roof-family__footer { min-height: 38px; margin: 8px -20px 0; }
  .roof-family__footer span,
  .roof-family__footer b { padding: 7px 4px; font-size: 7px; }

  .contract-estimate { min-height: 0; }
  .contract-estimate__content { display: block; }
  .contract-mobile-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 13px; border: 1px solid rgba(38,40,39,.28); }
  .contract-mobile-tabs button { min-height: 42px; padding: 8px; border: 0; background: rgba(245,240,231,.58); color: var(--ink); font-size: 10px; font-weight: 800; }
  .contract-mobile-tabs button + button { border-left: 1px solid rgba(38,40,39,.28); }
  .contract-mobile-tabs button.is-active { background: var(--oxide); color: #fff; }
  .contract-estimate__copy > p:not(.eyebrow) { margin-top: 9px; font-size: 11px; }
  .contract-sheet { margin-top: 12px; padding: 16px; }
  .contract-sheet__guarantee strong { font-size: 68px; }
  .contract-sheet h3 { margin-block: 4px; font-size: 23px; }
  .contract-sheet li,
  .contract-sheet > p { font-size: 9px; }
  .contract-upload { display: none; gap: 8px; padding: 16px; }
  .contract-estimate[data-contract-mobile-view='check'] .contract-sheet { display: none; }
  .contract-estimate[data-contract-mobile-view='check'] .contract-upload { display: grid; }
  .contract-estimate[data-contract-mobile-view='check'] .contract-upload__head,
  .contract-upload .form-honeypot { display: none !important; }
  .contract-upload__head h3 { font-size: 24px; }
  .contract-upload__head p { margin-top: 6px; font-size: 10px; }
  .contract-upload .form-field input,
  .contract-upload .phone-control { min-height: 44px; }
  .estimate-dropzone { min-height: 90px; }
  .contract-upload .consent { font-size: 9px; }
  .contract-upload .button { min-height: 48px; }

  .faq-visual__layout { display: block; }
  .faq-visual__stage { min-height: 0; height: 250px; margin-inline: -20px; }
  .faq-visual__stage > img { height: 250px; }
  .faq-visual__caption { right: 12px; bottom: 12px; left: 12px; }
  .faq-visual__caption strong { font-size: 22px; }
  .faq-visual__caption span { font-size: 9px; }
  .faq-visual__list { display: flex; gap: 10px; margin: 10px -20px 0; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .faq-visual__list::-webkit-scrollbar { display: none; }
  .faq-visual__list details { flex: 0 0 calc(100vw - 54px); min-height: 120px; scroll-snap-align: center; border: 1px solid rgba(38,40,39,.22); padding: 0 14px; }
  .faq-visual__list summary { min-height: 62px; padding: 13px 30px 13px 0; font-size: 13px; }
  .faq-visual__list details p { margin: 0; padding: 0 0 13px; font-size: 10px; line-height: 1.4; }

  .final-photo-cta { min-height: calc(100svh - 59px); padding: 42px 20px 88px !important; }
  .final-photo-cta__copy { width: 100%; }
  .final-photo-cta h2 { font-size: 34px; }
  .final-photo-cta__copy > p:not(.eyebrow) { margin-top: 13px; font-size: 12px; }
  .final-photo-cta__actions { margin-top: 17px; }
  .final-photo-cta__actions .button,
  .final-photo-cta__callback { min-height: 49px; }
  .final-cta-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 20px; }
  .final-cta-trust li { min-height: 84px; padding: 11px 7px; }
  .final-cta-trust strong { font-size: 20px; }
  .final-cta-trust span { font-size: 8px; }
  .final-cta-phone { margin-top: 14px; font-size: 12px; }
}

@media (max-width: 0px) and (max-height: 820px) {
  main > .section:not(.hero) { padding-block: 20px; }
  main > #team.section { padding-block: 18px; }
  .game-estimate[data-mobile-estimate-step='7'] .game-estimate__head { display: none; }
  .team-console__stage { min-height: 0; }
  .configurator__scene { min-height: 0; height: 294px; }
  .estimate-console__visual,
  .estimate-house { height: 232px; }
  .roof-family__console { height: 449px; }
}

/* Desktop balance pass: keep every act inside the viewport without turning
   the editorial scenes and engineering controls into a compressed dashboard. */
@media (min-width: 99999px) and (max-height: 950px) {
  main > .section:not(.hero) { min-height: calc(100svh - 1px); }

  .scenario-wow,
  .material-passport,
  .configurator,
  .roof-cutaway,
  .game-estimate,
  .honest-estimate,
  .project-journey,
  .projects-showcase,
  .roof-family,
  .contract-estimate,
  .faq-visual { align-content: center; }

  .scenario-wow,
  .material-passport,
  .configurator,
  .roof-cutaway,
  .game-estimate,
  .project-journey,
  .projects-showcase,
  .roof-family,
  .contract-estimate,
  .faq-visual { display: grid; }

  .team-console {
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 54px;
  }
  .team-trigger { min-height: 86px; padding: 13px 16px; }
  .team-trigger small { font-size: 11px; }
  .team-ledger dd { font-size: 11px; }
  .team-stage,
  .team-stage__portrait { min-height: 500px; height: 500px; }
  .team-stage__result { font-size: 12px; }
  .team-status { font-size: 11px; }
  .team-route li { min-height: 64px; padding-block: 13px 11px; }

  .scenario-wow__stage,
  .scenario-wow__media { min-height: 0; height: 600px; }
  .material-passport__stage { min-height: 570px; height: 570px; }
  .roof-cutaway__layout,
  .roof-cutaway__visual,
  .roof-cutaway__visual > img,
  .roof-cutaway__console { min-height: 0; height: 610px; }
  .estimate-glass { min-height: 600px; height: 600px; }

  .estimate-control legend,
  .estimate-segment button,
  .estimate-materials button,
  .estimate-shapes button,
  .estimate-switches span { font-size: 12px; }
  .estimate-segment button small,
  .estimate-materials small,
  .estimate-price-source,
  .estimate-ticket__note,
  .estimate-lead .consent,
  .estimate-ticket__guard { font-size: 10px !important; }
  .estimate-breakdown dt,
  .estimate-breakdown dd { font-size: 11px; }
}