/* ==========================================================
   SERVICE-DETAIL.CSS — Individual service landing page styles
   ========================================================== */

/* ── SERVICE HERO (extends .page-hero) ── */
.service-hero {
    position:   relative;
    padding:    160px 64px 100px;
    background: var(--forest);
    overflow:   hidden;
}

/* Interior page — video background */
.service-hero__bg-wrap {
    position: absolute;
    inset:    0;
}
.service-hero__bg-placeholder {
    position:   absolute;
    inset:      0;
    background:
        radial-gradient(ellipse at 65% 35%, rgba(46,92,71,0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 75%, rgba(15,42,25,0.5) 0%, transparent 55%),
        linear-gradient(150deg, #0d1a12 0%, #1b3a2d 45%, #0f2018 100%);
}
.service-hero__video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    opacity:         0.7;
    display:         block;
}
.service-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        150deg,
        rgba(26,61,40,0.22)  0%,
        rgba(46,102,68,0.08) 45%,
        rgba(26,61,40,0.28)  100%
    );
    pointer-events: none;
}

/* Hazardous page — photo background (background-image injected via wp_add_inline_style in functions.php) */
.service-hero--hazardous {
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* Environmental page — photo background (background-image injected via wp_add_inline_style in functions.php) */
.service-hero--environmental {
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}
.service-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        88deg,
        transparent 0px, transparent 3px,
        rgba(201,169,110,0.025) 3px, rgba(201,169,110,0.025) 6px
    );
    pointer-events: none;
}
.service-hero__inner {
    max-width:     var(--container-max);
    margin-inline: auto;
    position:      relative;
}
.service-hero__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  20px;
}
.service-hero__badge::before {
    content:    '';
    width:      28px;
    height:     0.5px;
    background: var(--gold);
}
.service-hero__title {
    font-family:   var(--font-heading);
    font-size:     clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight:   300;
    color:         #fff;
    line-height:   1.0;
    margin-bottom: 24px;
}
.service-hero__title em {
    font-style:  normal;
    font-weight: 300;
    color:       var(--amber-pale);
}
.service-hero__desc {
    font-size:    15px;
    font-weight:  300;
    color:        rgba(255,255,255,0.55);
    line-height:  1.85;
    max-width:    580px;
    margin-bottom: 40px;
}
.service-hero__ctas {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
}
.service-hero__stats {
    display:         flex;
    gap:             48px;
    margin-top:      64px;
    padding-top:     40px;
    border-top:      0.5px solid rgba(201,169,110,0.18);
    flex-wrap:       wrap;
}
.service-hero__stat-num {
    font-family:    var(--font-heading);
    font-size:      clamp(2rem, 3.5vw, 2.8rem);
    font-weight:    300;
    color:          var(--gold);
    line-height:    1;
    display:        block;
    margin-bottom:  6px;
}
.service-hero__stat-label {
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
}

/* ── OVERVIEW SECTION ── */
.svc-overview {
    padding:    96px 64px;
    background: var(--off-white);
}
.svc-overview__inner {
    max-width:             var(--container-max);
    margin-inline:         auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           center;
}
.svc-overview__visual {
    position: relative;
}
.svc-overview__img-block {
    width:        100%;
    aspect-ratio: 4/3;
    background:   linear-gradient(145deg, #2d5c47 0%, #1b3a2d 100%);
    position:     relative;
    overflow:     hidden;
}
.svc-overview__img-block.v2 { background: linear-gradient(145deg, #3d5c3a 0%, #1f3020 100%); }
.svc-overview__img-block.v3 { background: linear-gradient(145deg, #4a4028 0%, #2a2015 100%); }
.svc-overview__img-block.v4 { background: linear-gradient(145deg, #3a2820 0%, #1a1008 100%); }
.svc-overview__img-block img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.svc-overview__num {
    position:    absolute;
    bottom:      -16px;
    right:       -16px;
    font-family: var(--font-heading);
    font-size:   140px;
    font-weight: 300;
    color:       rgba(201,169,110,0.07);
    line-height: 1;
    user-select: none;
}
.svc-overview__text { display: flex; flex-direction: column; gap: 24px; }
.svc-overview__text h2 {
    font-family: var(--font-heading);
    font-size:   clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    color:       var(--ink);
    line-height: 1.1;
}
.svc-overview__text h2 em { font-style: italic; color: var(--emerald); }
.svc-overview__divider { width: 40px; height: 0.5px; background: var(--gold); }
.svc-overview__text p {
    font-size:   15px;
    font-weight: 300;
    color:       var(--stone);
    line-height: 1.9;
}

/* ── INCLUDES SECTION ── */
.svc-includes {
    padding:    96px 64px;
    background: var(--parchment);
}
.svc-includes__inner {
    max-width:     var(--container-max);
    margin-inline: auto;
}
.svc-includes__header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             32px;
    margin-bottom:   64px;
    flex-wrap:       wrap;
}
.svc-includes__header h2 {
    font-family: var(--font-heading);
    font-size:   clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    color:       var(--ink);
    line-height: 1.1;
}
.svc-includes__header h2 em { font-style: italic; color: var(--emerald); }
.svc-includes__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2px;
}
.svc-includes__card {
    background:     #fff;
    padding:        36px 32px;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    border-bottom:  2px solid transparent;
    transition:     border-color 0.3s, transform 0.3s;
}
.svc-includes__card:hover {
    border-color: var(--gold);
    transform:    translateY(-4px);
}
.svc-includes__icon {
    width:           44px;
    height:          44px;
    border:          0.5px solid rgba(201,169,110,0.4);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.3s, border-color 0.3s;
}
.svc-includes__card:hover .svc-includes__icon {
    background:   var(--gold);
    border-color: var(--gold);
}
.svc-includes__card:hover .svc-includes__icon svg {
    stroke: var(--ink) !important;
}
.svc-includes__card-title {
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink);
}
.svc-includes__card-text {
    font-size:   13px;
    font-weight: 300;
    color:       var(--stone);
    line-height: 1.75;
}

/* ── PROJECT GALLERY SLIDESHOW ── */
.svc-slideshow {
    padding:    96px 64px;
    background: var(--ink);
    position:   relative;
    overflow:   hidden;
}
.svc-slideshow::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        88deg,
        transparent 0px, transparent 3px,
        rgba(201,169,110,0.025) 3px, rgba(201,169,110,0.025) 6px
    );
    pointer-events: none;
}
.svc-slideshow__inner {
    max-width:     var(--container-max);
    margin-inline: auto;
    position:      relative;
}
.svc-slideshow__header { margin-bottom: 48px; }
.svc-slideshow__header h2 {
    font-family: var(--font-heading);
    font-size:   clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    color:       #fff;
    line-height: 1.1;
    margin-top:  16px;
}
.svc-slideshow__header h2 em { font-style: italic; color: var(--amber-pale); }

.svc-slideshow__track-wrap {
    position:      relative;
    overflow:      hidden;
    aspect-ratio:  16/7;
    background:    #0d1a12;
}
.svc-slideshow__track {
    display:    flex;
    height:     100%;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-slideshow__slide {
    flex:       0 0 100%;
    height:     100%;
    overflow:   hidden;
}
.svc-slideshow__slide img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.svc-slideshow__btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           48px;
    height:          48px;
    background:      rgba(0,0,0,0.55);
    border:          0.5px solid rgba(201,169,110,0.35);
    color:           var(--gold);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background 0.25s, border-color 0.25s;
    z-index:         2;
}
.svc-slideshow__btn:hover {
    background:   rgba(201,169,110,0.18);
    border-color: var(--gold);
}
.svc-slideshow__btn--prev { left:  16px; }
.svc-slideshow__btn--next { right: 16px; }

/* ── VIDEO GALLERY ── */
.svc-video-gallery__wrap {
    aspect-ratio: unset;
    background:   #000;
}
.svc-video-gallery__track {
    align-items: stretch;
}
.svc-video-gallery__slide {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #000;
    max-height:      72vh;
}
.svc-video-gallery__slide video {
    width:      100%;
    height:     100%;
    max-height: 72vh;
    object-fit: contain;
    display:    block;
}
.svc-video-gallery__hint {
    text-align:     center;
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.15em;
    color:          rgba(255,255,255,0.28);
    margin-top:     20px;
    text-transform: uppercase;
}

/* ── TABBED GALLERY NAV ── */
.svc-gallery-tabs__nav {
    display:   flex;
    gap:       4px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.svc-gallery-tabs__tab {
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
    background:     rgba(255,255,255,0.05);
    border:         0.5px solid rgba(201,169,110,0.15);
    padding:        12px 28px;
    cursor:         pointer;
    transition:     color 0.25s, background 0.25s, border-color 0.25s;
}
.svc-gallery-tabs__tab:hover {
    color:        rgba(255,255,255,0.75);
    border-color: rgba(201,169,110,0.35);
}
.svc-gallery-tabs__tab--active {
    color:        var(--gold);
    background:   rgba(201,169,110,0.1);
    border-color: var(--gold);
}
.svc-gallery-tabs__panel--hidden { display: none; }

.svc-slideshow__dots {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin-top:      28px;
}
.svc-slideshow__dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   rgba(201,169,110,0.25);
    border:       none;
    cursor:       pointer;
    transition:   background 0.3s, transform 0.3s;
    padding:      0;
}
.svc-slideshow__dot--active {
    background: var(--gold);
    transform:  scale(1.35);
}

/* ── PROCESS SECTION ── */
.svc-process {
    padding:    96px 64px;
    background: var(--forest);
    position:   relative;
    overflow:   hidden;
}
.svc-process::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        88deg,
        transparent 0px, transparent 3px,
        rgba(201,169,110,0.025) 3px, rgba(201,169,110,0.025) 6px
    );
    pointer-events: none;
}
.svc-process__inner {
    max-width:     var(--container-max);
    margin-inline: auto;
    position:      relative;
}
.svc-process__header { margin-bottom: 64px; }
.svc-process__header h2 {
    font-family: var(--font-heading);
    font-size:   clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    color:       #fff;
    line-height: 1.1;
    margin-top:  16px;
}
.svc-process__header h2 em { font-style: italic; color: var(--amber-pale); }
.svc-process__steps {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2px;
}
.svc-process__step {
    background:     rgba(255,255,255,0.04);
    border:         0.5px solid rgba(201,169,110,0.1);
    padding:        40px 32px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    transition:     background 0.3s;
}
.svc-process__step:hover { background: rgba(201,169,110,0.07); }
.svc-process__step-num {
    font-family:    var(--font-heading);
    font-size:      48px;
    font-weight:    300;
    color:          rgba(201,169,110,0.25);
    line-height:    1;
}
.svc-process__step-title {
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--gold);
}
.svc-process__step-text {
    font-size:   14px;
    font-weight: 300;
    color:       rgba(255,255,255,0.5);
    line-height: 1.8;
}

/* ── COMPLIANCE / STANDARDS BAND ── */
.svc-compliance {
    padding:    64px;
    background: var(--ink);
}
.svc-compliance__inner {
    max-width:       var(--container-max);
    margin-inline:   auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             48px;
    flex-wrap:       wrap;
}
.svc-compliance__text h3 {
    font-family:   var(--font-heading);
    font-size:     clamp(1.4rem, 2vw, 1.8rem);
    font-weight:   300;
    color:         #fff;
    margin-bottom: 8px;
    margin-top:    12px;
}
.svc-compliance__text p {
    font-size:   14px;
    font-weight: 300;
    color:       rgba(255,255,255,0.45);
    line-height: 1.7;
    max-width:   480px;
}
.svc-compliance__badges {
    display:   flex;
    gap:       12px;
    flex-wrap: wrap;
}
.svc-compliance__badge {
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--gold);
    border:         0.5px solid rgba(201,169,110,0.35);
    padding:        10px 20px;
}

/* ── RELATED SERVICES ── */
.svc-related {
    padding:    96px 64px;
    background: var(--off-white);
}
.svc-related__inner {
    max-width:     var(--container-max);
    margin-inline: auto;
}
.svc-related__header { margin-bottom: 48px; }
.svc-related__header h2 {
    font-family: var(--font-heading);
    font-size:   clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 300;
    color:       var(--ink);
    line-height: 1.1;
    margin-top:  14px;
}
.svc-related__header h2 em { font-style: italic; color: var(--emerald); }
.svc-related__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2px;
}
.svc-related__card {
    background:     var(--parchment);
    padding:        40px 32px;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    border-bottom:  2px solid transparent;
    transition:     border-color 0.3s, transform 0.3s;
    text-decoration: none;
}
.svc-related__card:hover {
    border-color: var(--gold);
    transform:    translateY(-4px);
}
.svc-related__card-num {
    font-family: var(--font-heading);
    font-size:   42px;
    font-weight: 300;
    color:       rgba(201,169,110,0.18);
    line-height: 1;
}
.svc-related__card-title {
    font-family: var(--font-heading);
    font-size:   clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 300;
    color:       var(--ink);
    line-height: 1.2;
}
.svc-related__card-text {
    font-size:   13px;
    font-weight: 300;
    color:       var(--stone);
    line-height: 1.75;
    flex:        1;
}
.svc-related__card-link {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-top:     auto;
    transition:     gap 0.3s;
}
.svc-related__card:hover .svc-related__card-link { gap: 14px; }

/* ── CTA BAND (reuses .services-cta-band from services.css) ── */

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .service-hero        { padding: 140px 28px 80px; }
    .svc-overview        { padding: 64px 28px; }
    .svc-overview__inner { grid-template-columns: 1fr; gap: 48px; }
    .svc-includes        { padding: 64px 28px; }
    .svc-includes__grid  { grid-template-columns: 1fr 1fr; }
    .svc-slideshow       { padding: 64px 28px; }
    .svc-process         { padding: 64px 28px; }
    .svc-process__steps  { grid-template-columns: 1fr 1fr; }
    .svc-compliance      { padding: 48px 28px; }
    .svc-compliance__inner { flex-direction: column; align-items: flex-start; }
    .svc-related         { padding: 64px 28px; }
    .svc-related__grid   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .service-hero__stats { gap: 32px; }
    .svc-includes__grid  { grid-template-columns: 1fr; }
    .svc-process__steps  { grid-template-columns: 1fr; }
    .svc-related__grid   { grid-template-columns: 1fr; }
    .svc-includes__header { flex-direction: column; align-items: flex-start; }
}