/* H2O v0.1.0 inner pages: intro hero (template IntroSection), service detail, about, contact. */

.intro { position: relative; min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); background: var(--navy-2); isolation: isolate; }
.intro__bg { position: absolute; inset: 0; z-index: -2; }
.intro__bg img, .intro__bg video { width: 100%; height: 100%; object-fit: cover; }
.intro::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(19 33 58 / .35) 0%, rgb(19 33 58 / .2) 40%, rgb(19 33 58 / .86) 100%); }
.intro__content { padding: 18rem 0 8rem; }
.intro h1 { font-size: 9.6rem; max-width: 16ch; }
.intro .tone--accent { color: var(--orange); }
.intro__lead { max-width: 64rem; margin-top: 2.4rem; font-size: 2rem; font-weight: 500; }
@media (max-width: 767px) { .intro h1 { font-size: 5.6rem; } .intro__content { padding: 14rem 0 5.6rem; } .intro__lead { font-size: 1.7rem; } }

.detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8rem; padding: 12rem 0 4rem; align-items: start; }
.detail__copy p { font-size: 2rem; line-height: 1.55; }
.detail__copy p + p { margin-top: 2.4rem; }
.detail__copy [data-reveal="buttons"] { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 4rem; }
.detail__side { position: sticky; top: 14rem; padding: 4rem; border-radius: 1.6rem; background: var(--fill); }
.detail__side h2 { font-size: 4rem; }
.detail__side ul { margin-top: 2.4rem; }
.detail__side li { padding: 1.4rem 0; border-top: 1px solid var(--line); font-weight: 500; display: flex; gap: 1.2rem; align-items: center; }
.detail__side li::before { content: ''; width: .8rem; height: .8rem; border-radius: 50%; background: var(--orange); flex: none; }
.detail--about { grid-template-columns: 1fr 1fr; }
.detail__lead { font: 500 3rem/1.3 var(--text); letter-spacing: -.01em; }
@media (max-width: 900px) { .detail, .detail--about { grid-template-columns: 1fr; gap: 4rem; padding-top: 8rem; } .detail__side { position: static; } .detail__lead { font-size: 2.4rem; } }

/* Services page: jump links, then one full section per service (sides alternate) */
.jump { padding: 4rem 0 0; }
.jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.jump__link { display: inline-block; padding: 1.1rem 2rem; border-radius: 99rem; background: var(--fill); font: 600 1.6rem/1 var(--text); text-decoration: none; transition: background-color .25s, color .25s; }
.jump__link:hover, .jump__link:focus-visible { background: var(--navy); color: var(--white); }
.svc { padding: 9rem 0 0; scroll-margin-top: 10rem; }
.svc + .svc { border-top: 1px solid var(--line); margin-top: 3rem; }
.svc__top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 7.2rem; align-items: start; }
.svc:nth-of-type(even) .svc__copy { order: 2; }
.svc__title { text-align: left; font-size: 6.4rem; }
.svc__lead { margin-top: 2.4rem; font: 500 2.4rem/1.35 var(--text); }
.svc__copy > p:not(.svc__lead) { margin-top: 2rem; font-size: 1.8rem; line-height: 1.6; }
.svc__review { margin-top: 3.2rem; padding: 2.8rem 3.2rem; border-left: 4px solid var(--orange); border-radius: 0 1.2rem 1.2rem 0; background: var(--fill); }
.svc__review p { font: 500 2rem/1.4 var(--text); }
.svc__review figcaption { margin-top: 1.4rem; font: 800 2rem/1 var(--display); text-transform: uppercase; color: var(--orange-ink); }
.svc__buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 3.6rem; }
.svc__side { display: grid; gap: 1.6rem; position: sticky; top: 12rem; }
.svc__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.6rem; background: var(--navy-2); }
.svc__video { width: 100%; height: 100%; object-fit: cover; }
.svc__list { padding: 3.2rem; border-radius: 1.6rem; background: var(--fill); }
.svc__list h3 { font: 800 3.2rem/1 var(--display); text-transform: uppercase; }
.svc__list ul { margin-top: 1.6rem; }
.svc__list li { display: flex; gap: 1.2rem; align-items: center; padding: 1.2rem 0; border-top: 1px solid var(--line); font-weight: 500; }
.svc__list li::before { content: ''; width: .8rem; height: .8rem; border-radius: 50%; background: var(--orange); flex: none; }
.gallery--svc { padding: 4.8rem 0 0; }
@media (max-width: 900px) {
  .svc__top { grid-template-columns: 1fr; gap: 4rem; }
  .svc:nth-of-type(even) .svc__copy { order: 0; }
  .svc__side { position: static; }
}
@media (max-width: 767px) { .svc { padding-top: 6.4rem; } .svc__title { font-size: 4.4rem; } .svc__lead { font-size: 2rem; } .jump__link { font-size: 1.5rem; padding: 1rem 1.6rem; } }
@media (max-width: 767px) { .pull blockquote p { font-size: 2.4rem; } }

.lines { padding: 10rem 0 4rem; }
.lines__row { display: grid; grid-template-columns: 14rem 1fr auto; align-items: center; gap: 2.4rem; padding: 3.2rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.lines__row:first-child { border-top: 1px solid var(--line); }
.lines__kind { font-weight: 500; color: rgb(29 48 73 / .7); }
.lines__value { font: 800 5.2rem/1 var(--display); text-transform: uppercase; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 3px no-repeat; transition: background-size .45s var(--ease); justify-self: start; padding-bottom: .4rem; overflow-wrap: anywhere; }
a.lines__row:hover .lines__value, a.lines__row:focus-visible .lines__value { background-size: 100% 3px; }
.lines__row svg { width: 2.4rem; color: var(--orange-ink); }
.lines__row:nth-child(2) .lines__value { text-transform: none; font: 500 3.6rem/1.1 var(--text); }
@media (max-width: 767px) { .lines__row { grid-template-columns: 1fr auto; gap: .8rem 1.6rem; } .lines__kind { grid-column: 1 / -1; } .lines__value { font-size: 3.6rem; } .lines__row:nth-child(2) .lines__value { font-size: 2.2rem; } }

.area { padding: 10rem 0; }
.area__map { margin: 5.6rem auto 0; max-width: 110rem; border-radius: 1.6rem; overflow: hidden; background: var(--navy-2); }
.area__map .map { width: 100%; height: auto; }
.area__towns { columns: 4; column-gap: 3.2rem; margin-top: 5.6rem; }
.area__towns li { padding: 1rem 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-weight: 500; }
@media (max-width: 900px) { .area__towns { columns: 2; } }