/* Services page */

/* hero: same photo as home with a red title panel */
.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__panel { position: relative; z-index: 1; margin-top: calc(141 * var(--s)); width: calc(959 * var(--s)); min-width: min(100%, 520px); min-height: calc(346 * var(--s)); background: var(--brand); padding: calc(82 * var(--s)) calc(60 * var(--s)) calc(60 * var(--s)) var(--gutter); }
.hero__panel h1 { color: var(--white); font-size: var(--t-60); line-height: .91; max-width: calc(824 * var(--s)); }
/* phones: red title panel first at the top of the page, the photo stacked under it */
@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero__panel { order: -1; margin: 0; width: 100%; padding: 28px var(--gutter); }
  .hero__img { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 2048 / 1536; }
}

/* service strip under the hero: brand brown on phones (red on desktop, as on home) */
@media (max-width: 900px) { .strip { background: var(--brand-2); } }

/* intro with the red mark */
.sintro { text-align: center; padding: calc(55 * var(--s)) var(--gutter) calc(82 * var(--s)); display: flex; flex-direction: column; align-items: center; }
.sintro img { width: calc(230 * var(--s)); min-width: 110px; }
.sintro h2 { font-size: var(--t-80); line-height: .81; margin-top: calc(12 * var(--s)); }
.sintro p { margin: calc(23 * var(--s)) 0 0; max-width: calc(1005 * var(--s)); line-height: 1.1; }
@media (max-width: 900px) { .sintro { padding: 40px var(--gutter); } .sintro p { line-height: 1.45; } }

/* six tiles, alternating alignment so they read toward the centre */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(62 * var(--s)) calc(58 * var(--s)); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: calc(18 * var(--s)); min-height: calc(337 * var(--s)); background: var(--ink-3); color: var(--white); padding: calc(62 * var(--s)) calc(57 * var(--s)) calc(40 * var(--s)); font-family: var(--font-head); font-weight: 900; font-size: var(--t-60); text-transform: uppercase; line-height: .91; transition: background .2s var(--ease); }
.tile:nth-child(odd) { align-items: flex-end; text-align: right; padding-right: calc(58 * var(--s)); }
.tile:hover { background: var(--brand); }
.tile img { width: calc(108 * var(--s)); min-width: 52px; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; gap: 12px; padding: 0 var(--gutter); }
  .tile, .tile:nth-child(odd) { align-items: flex-start; text-align: left; padding: 24px; min-height: 0; }
}

/* beige gable: not sure which building */
/* the peak tip sits one tile-row gap (62px) below the tiles so it never overlaps them */
.notsure { margin-top: calc(var(--roof-h) + 62 * var(--s)); text-align: center; padding: 0 var(--gutter) calc(126 * var(--s)); }
.notsure__inner { position: relative; }
.notsure h2 { font-size: var(--t-80); line-height: .81; max-width: calc(1161 * var(--s)); margin-inline: auto; }
.notsure__sub { margin: calc(34 * var(--s)) auto 0; max-width: calc(1029 * var(--s)); font-family: var(--font-head); font-weight: 900; font-size: var(--t-32); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); line-height: .85; }
.notsure__phone { display: inline-block; margin-top: calc(43 * var(--s)); font-family: var(--font-head); font-weight: 900; font-size: var(--t-80); color: var(--brand); line-height: 1; }
@media (max-width: 900px) {
  .notsure { margin-top: calc(var(--roof-h) + 10px); padding-bottom: 110px; }
  .notsure__sub { line-height: 1.1; }
}

@media (max-width: 900px) { .sintro p, .sintro h2, .notsure h2, .notsure__sub, .hero__panel h1 { max-width: none; } }