/* ==========================================================================
   Heritage Crest Build — reusable service-page template
   Used by all inner service pages (roofing-services, kitchens, bathrooms, etc.)
   ========================================================================== */

:root {
    --sp-gold: #ac8d56;
    --sp-cream: #f7f5f1;
    --sp-text: #1a1a1a;
    --sp-muted: #555;
    --sp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.service-page { background: #fff; }

/* ---------- Hero ---------- */
.sp-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 540px;
    max-height: 820px;
    overflow: hidden;
    background: #0a0a0a;
}
.sp-hero video,
.sp-hero img.sp-hero-poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Static-image hero: contain so the WHOLE photo shows (no crop). Background frames it. */
.sp-hero img.sp-hero-still {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    background: #0a0a0a;
}
.sp-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0.1) 35%,
        rgba(0,0,0,0.55) 100%);
    z-index: 1;
}
.sp-hero-text {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    color: #fff; padding: 0 24px;
}
.sp-hero-text .sp-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    color: var(--sp-gold);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.32em; text-transform: uppercase;
    margin-bottom: 18px;
}
.sp-hero-text .sp-eyebrow::before,
.sp-hero-text .sp-eyebrow::after {
    content: ""; width: 36px; height: 1px;
    background: var(--sp-gold); display: inline-block;
}
.sp-hero-text h1 {
    font-size: clamp(36px, 6.5vw, 72px);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin: 0; line-height: 1.05;
    color: #fff; text-transform: uppercase;
    /* whole words only: style.css's site-wide break-word split "GROUNDWORK/S"
       and "DEVELOPMENT/S" onto a second line on phones */
    word-break: normal;
    overflow-wrap: normal;
}
/* On small phones the title shrinks with the screen so its longest word
   (DEVELOPMENTS, GROUNDWORKS, AGRICULTURAL) still fits inside the 24px gutters.
   Below 480px both rules equal the normal size until the word would not fit. */
@media (max-width: 480px) {
    .sp-hero-text h1 { font-size: min(36px, calc((100vw - 48px) / 8.2)); }
    /* Demo 2's theme-v2.css sets a wider serif at 42px with a heavier selector */
    html body.theme-v2 .sp-hero .sp-hero-text h1 { font-size: min(42px, calc((100vw - 48px) / 8.8)); }
}

/* ---------- Intro ---------- */
.sp-intro {
    background: #fff;
    padding: 90px 24px 70px;
}
.sp-intro-wrap {
    max-width: 880px; margin: 0 auto;
}
.sp-intro-lead {
    font-size: 22px; font-weight: 600;
    color: var(--sp-text); margin: 0 0 22px;
    letter-spacing: -0.005em;
    line-height: 1.35;
}
.sp-intro p {
    font-size: 16px; line-height: 1.8;
    color: var(--sp-muted);
    margin: 0 0 18px;
}
.sp-intro p:last-child { margin-bottom: 0; }

/* ---------- Image gallery slider ---------- */
.sp-gallery {
    background: #fff;
    padding: 30px 0 90px;
}
.sp-gallery-wrap {
    max-width: 1280px; margin: 0 auto;
    padding: 0 24px;
}
.sp-gallery .owl-carousel .item {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.sp-gallery .owl-carousel .item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sp-gallery .owl-dots {
    text-align: right;
    margin-top: 14px;
    padding-right: 6px;
}
.sp-gallery .owl-dots .owl-dot {
    display: inline-block;
    margin: 0 2px;
    padding: 6px 4px !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(0,0,0,0.45);
    background: none !important;
    border: 0 !important;
    transition: color 0.2s ease;
}
.sp-gallery .owl-dots .owl-dot.active {
    color: var(--sp-gold);
}
.sp-gallery .owl-dots .owl-dot span { display: none; }
.sp-gallery .owl-dot::before {
    content: attr(data-num);
    font-variant-numeric: tabular-nums;
}

/* ---------- Portfolio header ---------- */
.sp-portfolio-header {
    background: #fff;
    text-align: center;
    padding: 30px 24px 10px;
}
.sp-portfolio-inner { max-width: 720px; margin: 0 auto; }
.sp-portfolio-header h2 {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--sp-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 16px;
    display: inline-block;
}
.sp-portfolio-header h2::after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 2px;
    background: var(--sp-gold);
}
.sp-portfolio-header p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sp-muted);
    margin: 0;
}

/* ---------- Sub-section ---------- */
.sp-sub {
    padding: 70px 24px;
    background: #fff;
}
.sp-sub--shaded { background: var(--sp-cream); }

.sp-type-num {
    display: inline-block;
    color: var(--sp-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    margin-bottom: 8px;
}
.sp-sub-wrap {
    max-width: 1280px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: center;
}
.sp-sub--alt .sp-sub-wrap {
    grid-template-columns: 1.6fr 1fr;
}
.sp-sub--alt .sp-sub-text { order: 2; }
.sp-sub--alt .sp-sub-img  { order: 1; }

.sp-sub-text h2 {
    font-size: 28px; font-weight: 500;
    margin: 0 0 14px;
    color: var(--sp-text);
    letter-spacing: -0.005em;
    position: relative;
    padding-bottom: 14px;
}
.sp-sub-text h2::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 2px;
    background: var(--sp-gold);
}
.sp-sub-text p {
    font-size: 15px; line-height: 1.75;
    color: var(--sp-muted);
    margin: 0 0 22px;
}
.sp-sub-text .sp-read-more {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sp-text);
    background: transparent;
    border: 1px solid var(--sp-text);
    text-decoration: none;
    transition: background 0.3s var(--sp-ease),
                color 0.3s var(--sp-ease),
                border-color 0.3s var(--sp-ease);
}
.sp-sub-text .sp-read-more:hover {
    background: var(--sp-gold);
    color: #fff;
    border-color: var(--sp-gold);
}

.sp-sub-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.sp-sub-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s var(--sp-ease);
}
.sp-sub-img:hover img { transform: scale(1.04); }

/* ---------- Related projects strip ---------- */
.sp-related {
    background: var(--sp-cream);
    padding: 80px 24px 90px;
}
.sp-related-wrap { max-width: 1280px; margin: 0 auto; }

.sp-related h2 {
    font-size: 22px; font-weight: 500;
    margin: 0 0 30px;
    color: var(--sp-text);
    position: relative;
    padding-bottom: 14px;
    display: inline-block;
}
.sp-related h2::after {
    content: ""; position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 2px;
    background: var(--sp-gold);
}

.sp-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sp-related-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    display: block;
    background: #1a1a1a;
    text-decoration: none;
    color: inherit;
}
.sp-related-tile img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.8s var(--sp-ease),
                filter 0.4s var(--sp-ease);
}
.sp-related-tile:hover img {
    transform: scale(1.05);
    filter: brightness(0.85);
}
.sp-related-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 50%,
        rgba(0,0,0,0.78) 100%);
    z-index: 1;
}
.sp-related-label {
    position: absolute; bottom: 18px; left: 18px; right: 18px;
    z-index: 2;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.sp-related-label .sp-related-eyebrow {
    display: block;
    color: var(--sp-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sp-sub-wrap,
    .sp-sub--alt .sp-sub-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .sp-sub--alt .sp-sub-text { order: 1; }
    .sp-sub--alt .sp-sub-img  { order: 2; }
    .sp-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .sp-hero { height: 65vh; min-height: 420px; }
    .sp-intro { padding: 60px 18px 40px; }
    .sp-intro-lead { font-size: 19px; }
    .sp-sub { padding: 40px 18px; }
    .sp-related { padding: 60px 18px 70px; }
    .sp-related-grid { grid-template-columns: 1fr; }
}

/* ---------- Photo slideshow hero (js/hero-slides.js) ----------
   Slides cross-fade over 1s and zoom slowly while shown. A leaving slide keeps
   its zoom until it has faded out, then resets unseen, so nothing jumps. */
.sp-hero-slides { position: absolute; inset: 0; }
.sp-hero-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1s ease, transform 0s linear 1s;
}
.sp-hero-slide.is-active {
    opacity: 1;
    transform: scale(1.06);
    transition: opacity 1s ease, transform 4.5s linear;
}
@media (prefers-reduced-motion: reduce) {
    .sp-hero-slide, .sp-hero-slide.is-active { transform: none; transition: opacity 1s ease; }
}

/* ---------- More about the service: strengths, how a job runs, questions (Dan, 9 Oct) ---------- */
.sp-more { background: var(--sp-cream); padding: 90px 24px; }
.sp-more-wrap { max-width: 1120px; margin: 0 auto; }
.sp-more-head { max-width: 820px; margin: 0 0 48px; }
.sp-more h2 {
    font-size: 30px; font-weight: 500; margin: 0 0 22px; color: var(--sp-text);
    letter-spacing: -0.005em; position: relative; padding-bottom: 14px;
}
.sp-more h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--sp-gold); }
.sp-more-head p { font-size: 16px; line-height: 1.8; color: var(--sp-muted); margin: 0 0 16px; }
.sp-more-head p:last-child { margin-bottom: 0; }
.sp-more h3 {
    font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--sp-gold); margin: 0 0 22px;
}
.sp-more-block + .sp-more-block { margin-top: 56px; }
.sp-more-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 30px; list-style: none; margin: 0; padding: 0; }
.sp-more-points[data-n="3"], .sp-more-points[data-n="5"], .sp-more-points[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .sp-more-points, .sp-more-points[data-n] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sp-more-points, .sp-more-points[data-n] { grid-template-columns: 1fr; } }
.sp-more-points li { border-top: 2px solid var(--sp-gold); padding-top: 16px; }
.sp-more-points strong, .sp-more-steps strong { display: block; font-size: 17px; font-weight: 600; color: var(--sp-text); margin: 0 0 8px; }
.sp-more-points span, .sp-more-steps span { display: block; font-size: 15px; line-height: 1.7; color: var(--sp-muted); }
.sp-more-steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px 26px; list-style: none; margin: 0; padding: 0; }
.sp-more-steps li { counter-increment: step; position: relative; padding-top: 52px; }
.sp-more-steps li::before {
    content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0;
    width: 38px; height: 38px; border: 1px solid var(--sp-gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--sp-gold); letter-spacing: .04em;
}
.sp-more-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin: 0; }
.sp-more-faq div { background: #fff; padding: 22px 24px; border-radius: 4px; }
.sp-more-faq dt { font-size: 17px; font-weight: 600; color: var(--sp-text); margin: 0 0 8px; line-height: 1.4; }
.sp-more-faq dd { font-size: 15px; line-height: 1.7; color: var(--sp-muted); margin: 0; }
@media (max-width: 860px) {
    .sp-more { padding: 60px 18px; }
    .sp-more h2 { font-size: 25px; }
    .sp-more-head { margin-bottom: 36px; }
    .sp-more-faq { grid-template-columns: 1fr; gap: 16px; }
    .sp-more-block + .sp-more-block { margin-top: 44px; }
}

/* ---------- Clear banners (Dan, 25 Oct: "clean up the foggy images") ----------
   Computers get photos two to a frame, phones one per frame; only the showing set loads.
   The shade is lighter so the photos read clearly, with a soft shadow keeping the heading legible. */
.sp-hero-slides--narrow { display: none; }
@media (max-width: 760px) {
    .sp-hero-slides--wide { display: none; }
    .sp-hero-slides--narrow { display: block; }
}
.sp-hero--clear::after {
    background:
        radial-gradient(ellipse 60% 42% at 50% 50%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.04) 62%, rgba(0,0,0,0.40) 100%);
}
.sp-hero--clear .sp-hero-text h1,
.sp-hero--clear .sp-hero-text .sp-eyebrow { text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45); }
body.theme-v2 .sp-hero.sp-hero--clear::after {
    background:
        radial-gradient(ellipse 60% 42% at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.06) 62%, rgba(0,0,0,0.46) 100%);
}

/* Period page linked sections (Dan, 25 Oct): a moving carousel that opens the project photos */
.sp-sub-img--slides { position: relative; cursor: pointer; background: #1a1a1a; }
.sp-sub-img--slides .sp-hero-slides { position: absolute; inset: 0; }
.sp-sub-img--slides:focus-visible { outline: 3px solid var(--sp-gold); outline-offset: 3px; }