/* Home page. Design positions are given in 1920px design pixels (--s). */

/* hero: full-bleed photo with the name and a red button top-left */
.hero { position: relative; height: calc(865 * var(--s)); min-height: 360px; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); pointer-events: none; } /* light dark tint so the white title reads over the photo */
.hero__content { position: relative; z-index: 1; padding: calc(37 * var(--s)) var(--gutter) 0; }
.hero h1 { color: var(--white); font-size: var(--t-60); line-height: .91; max-width: 10em; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.hero .btn, .hero .arrow-btn { margin-top: calc(30 * var(--s)); }
@media (max-width: 900px) { .hero__content { padding-top: 28px; } .hero .btn, .hero .arrow-btn { margin-top: 20px; } }

/* intro: mark + copy, then the four trust badges */
.intro { padding: calc(115 * var(--s)) calc(168 * var(--s)) calc(90 * var(--s)) calc(117 * var(--s)); }
.intro__grid { display: grid; grid-template-columns: calc(313 * var(--s)) 1fr; column-gap: calc(199 * var(--s)); align-items: start; padding-left: calc(165 * var(--s)); }
.intro__mark { display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--s)); }
.intro__mark img { width: 90%; }
.intro__copy { padding-top: calc(12 * var(--s)); }
.intro__copy h2 { font-size: var(--t-60); }
.intro__copy p { margin: calc(24 * var(--s)) 0 0; max-width: calc(854 * var(--s)); }
@media (max-width: 900px) {
  .intro { padding: 48px var(--gutter) 40px; }
  .intro__grid { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .intro__mark { max-width: 220px; margin-inline: auto; }
  .intro__copy { text-align: center; }
}
/* phones: the badge list is a left-aligned column; centre the column itself */
@media (max-width: 640px) {
  .intro .badges { width: max-content; max-width: 100%; margin-inline: auto; }
}

/* full-width photo band */
.wide-photo { width: 100%; height: calc(710 * var(--s)); min-height: 220px; object-fit: cover; object-position: 50% 45%; }

/* your building, your way: collage + copy */
.ybyw { display: grid; grid-template-columns: calc(790 * var(--s)) 1fr; column-gap: calc(124 * var(--s)); align-items: start; padding: calc(114 * var(--s)) calc(112 * var(--s)) calc(114 * var(--s)) calc(46 * var(--s)); }
.ybyw__copy { padding-top: calc(18 * var(--s)); }
.ybyw__copy h2 { font-size: var(--t-60); max-width: 12.5em; margin-top: calc(48 * var(--s)); }
.ybyw__copy p { margin: calc(28 * var(--s)) 0 0; max-width: calc(848 * var(--s)); }
.ybyw__actions { display: flex; flex-wrap: wrap; gap: calc(56 * var(--s)); margin-top: calc(46 * var(--s)); }
@media (max-width: 900px) {
  .ybyw { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--gutter); }
  .ybyw__actions { gap: 16px; }
}

/* one builder: gable-topped photo band */
.builder { position: relative; height: calc(941 * var(--s)); min-height: 420px; clip-path: polygon(0 var(--roof-h), 50% 0, 100% var(--roof-h), 100% 100%, 0 100%); color: var(--white); text-align: center; }
.builder__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.builder::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.builder__content { position: relative; z-index: 1; padding-top: calc(435 * var(--s)); display: flex; flex-direction: column; align-items: center; }
.builder__content img { width: calc(168 * var(--s)); min-width: 80px; }
.builder h2 { color: var(--white); font-size: var(--t-80); line-height: .79; margin-top: calc(36 * var(--s)); }
.builder .btn, .builder .arrow-btn { margin-top: calc(36 * var(--s)); }
@media (max-width: 900px) { .builder__content { padding-top: 110px; } }

/* photo gallery */
.gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__tall { aspect-ratio: 642 / 961; }
.gallery__big { grid-column: 2 / 4; aspect-ratio: 1278 / 961; }

/* service cards after the red bar */
.svc-list--home { padding: calc(53 * var(--s)) 0 calc(128 * var(--s)); }
@media (max-width: 900px) { .svc-list--home { padding: 20px 0 40px; gap: 20px; } }

/* why choose: dark gable */
.why { text-align: center; padding: calc(115 * var(--s)) var(--gutter) calc(285 * var(--s)); color: var(--white); }
.why .roof__mark { top: calc(-125 * var(--s)); }
.why h2 { color: var(--white); font-size: var(--t-80); line-height: .81; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(82 * var(--s)) calc(67 * var(--s)); width: calc(1521 * var(--s)); max-width: 100%; margin: calc(108 * var(--s)) auto 0; }
.why .fcard { min-height: calc(421 * var(--s)); padding: calc(84 * var(--s)) calc(70 * var(--s)) calc(40 * var(--s)); }
.why .fcard h3 { margin-top: 0; }
.why .fcard p { margin-top: calc(22 * var(--s)); max-width: calc(590 * var(--s)); }
.why .fcard--beige { background: var(--surface); color: var(--ink); }
.why .fcard--beige h3 { color: var(--ink-2); }
.why__tag { margin-top: calc(95 * var(--s)); }
.why .btn--big { margin-top: calc(60 * var(--s)); }
@media (max-width: 900px) {
  .why { padding: 60px var(--gutter) 60px; }
  .why .roof__mark { top: -60px; width: 140px; }
  .why__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .why .fcard { padding: 32px 24px; min-height: 0; }
  .why__tag { margin-top: 48px; }
  .why .btn--big { margin-top: 28px; }
}

/* proudly serving (home variant: narrower heading column with a button) */
.serving--home { grid-template-columns: calc(640 * var(--s)) 1fr; gap: calc(71 * var(--s)); padding: calc(113 * var(--s)) calc(187 * var(--s)) calc(130 * var(--s)) calc(168 * var(--s)); }
.serving--home .btn { margin-top: calc(26 * var(--s)); }
@media (max-width: 900px) { .serving--home { grid-template-columns: 1fr; padding: 48px var(--gutter) 40px; } }

/* how it works */
.how { padding-bottom: calc(235 * var(--s)); }
.how__top { position: relative; height: calc(419 * var(--s)); min-height: 200px; }
.how__photo { position: absolute; right: 0; top: 0; width: calc(1245 * var(--s)); max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.how__title { position: absolute; left: 0; top: calc(87 * var(--s)); width: calc(982 * var(--s)); min-width: 60%; height: calc(241 * var(--s)); min-height: 90px; background: var(--brand); color: var(--white); font-size: var(--t-80); display: flex; align-items: center; justify-content: center; line-height: 1; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: calc(126 * var(--s)) calc(60 * var(--s)); padding: calc(131 * var(--s)) calc(150 * var(--s)) 0 calc(149 * var(--s)); }
.steps li { display: grid; grid-template-columns: calc(182 * var(--s)) 1fr; gap: calc(30 * var(--s)); align-items: start; }
.steps li img { width: 100%; min-width: 72px; }
.steps li div { padding-top: calc(32 * var(--s)); }
.steps h3 { font-size: var(--t-45); letter-spacing: .08em; line-height: .89; }
.steps p { margin: calc(22 * var(--s)) 0 0; max-width: calc(543 * var(--s)); line-height: 1.17; padding-left: calc(9 * var(--s)); }
@media (max-width: 900px) {
  .how { padding-bottom: 60px; }
  .how__photo { width: 100%; }
  .how__title { top: 24px; width: 80%; }
  .steps { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--gutter) 0; }
  .steps li { grid-template-columns: 80px 1fr; gap: 16px; }
  .steps li div { padding-top: 6px; }
  .steps p { line-height: 1.4; }
}

@media (max-width: 900px) { .intro__copy p, .ybyw__copy p, .ybyw__copy h2, .why .fcard p, .steps p, .hero h1 { max-width: none; } }