/* ==========================================================
   SERVICE-DETAIL.CSS — Benigens Group
   Shared styles for all three service landing pages
   ========================================================== */

/* ── Service hero (darker, more dramatic than inner page hero) ── */
.ben-svc-hero {
    background:    var(--charcoal);
    padding:       120px 80px 100px;
    position:      relative;
    overflow:      hidden;
}
.ben-svc-hero::before {
    content:   '';
    position:  absolute;
    inset:     0;
    background:radial-gradient(ellipse at 70% 50%, rgba(30,144,255,0.12), transparent 60%);
    pointer-events: none;
}
.ben-svc-hero-inner {
    max-width: 1300px;
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       80px;
    align-items:center;
    position:  relative;
    z-index:   1;
}
.ben-svc-hero-label {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  20px;
}
.ben-svc-hero-label::before {
    content:      '';
    display:      inline-block;
    width:        28px;
    height:       1px;
    background:   var(--gold);
}
.ben-svc-hero-title {
    font-family:   var(--font-display);
    font-size:     clamp(2.8rem, 6vw, 4.5rem);
    font-weight:   400;
    line-height:   1.05;
    color:         #fff;
    margin-bottom: 24px;
}
.ben-svc-hero-title em {
    font-style: italic;
    color:      var(--gold);
}
.ben-svc-hero-sub {
    font-family:   var(--font-body);
    font-size:     16px;
    font-weight:   300;
    color:         rgba(255,255,255,0.6);
    line-height:   1.85;
    margin-bottom: 40px;
    max-width:     500px;
}
.ben-svc-hero-ctas {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}
/* Right pane: proof card */
.ben-svc-proof-card {
    border:         0.5px solid rgba(30,144,255,0.25);
    padding:        44px 40px;
    background:     rgba(255,255,255,0.03);
    backdrop-filter:blur(8px);
}
.ben-svc-proof-eyebrow {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
    margin-bottom:  28px;
    padding-bottom: 16px;
    border-bottom:  0.5px solid rgba(255,255,255,0.08);
}
.ben-svc-proof-stat {
    margin-bottom: 28px;
    padding-bottom:28px;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.ben-svc-proof-stat:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ben-svc-proof-num {
    font-family:  var(--font-display);
    font-size:    52px;
    font-weight:  400;
    color:        #fff;
    line-height:  1;
    margin-bottom:6px;
}
.ben-svc-proof-num em {
    font-style:  italic;
    font-size:   28px;
    color:       var(--gold);
}
.ben-svc-proof-lbl {
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
    margin:         0;
}

/* ── What's included ── */
.ben-svc-includes {
    padding:    100px 80px;
    background: var(--bone);
}
.ben-svc-includes-inner {
    max-width: 1300px;
    margin:    0 auto;
}
.ben-svc-includes-grid {
    display:              grid;
    grid-template-columns:1fr 1fr;
    gap:                  80px;
    align-items:          start;
}
.ben-svc-includes-left {}
.ben-svc-includes-heading {
    font-family:   var(--font-display);
    font-size:     48px;
    font-weight:   400;
    line-height:   1.08;
    color:         var(--ink);
    margin-bottom: 20px;
}
.ben-svc-includes-heading em { font-style: italic; }
.ben-svc-includes-body {
    font-family:   var(--font-body);
    font-size:     15px;
    font-weight:   300;
    color:         var(--muted);
    line-height:   1.85;
    margin-bottom: 32px;
}
.ben-svc-feature-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            0;
}
.ben-svc-feature-item {
    display:      flex;
    align-items:  flex-start;
    gap:          16px;
    padding:      20px 0;
    border-bottom:0.5px solid rgba(13,27,46,0.1);
}
.ben-svc-feature-item:last-child { border-bottom: none; }
.ben-svc-feature-icon {
    width:           40px;
    height:          40px;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          0.5px solid rgba(30,144,255,0.35);
    border-radius:   50%;
    color:           var(--gold);
    margin-top:      2px;
}
.ben-svc-feature-title {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    500;
    color:          var(--ink);
    letter-spacing: 0.04em;
    margin-bottom:  5px;
}
.ben-svc-feature-desc {
    font-family: var(--font-body);
    font-size:   13px;
    font-weight: 300;
    color:       var(--muted);
    line-height: 1.7;
    margin:      0;
}
/* Right: visual card */
.ben-svc-includes-right {
    position: sticky;
    top: 100px;
}
.ben-svc-card-dark {
    background:    var(--charcoal);
    padding:       44px 40px;
    position:      relative;
    overflow:      hidden;
}
.ben-svc-card-dark::before {
    content:      '';
    position:     absolute;
    bottom:       -60px;
    right:        -60px;
    width:        240px;
    height:       240px;
    border-radius:50%;
    border:       0.5px solid rgba(30,144,255,0.1);
    pointer-events:none;
}
.ben-svc-card-num {
    font-family:    var(--font-display);
    font-style:     italic;
    font-size:      80px;
    font-weight:    400;
    color:          rgba(30,144,255,0.15);
    line-height:    1;
    margin-bottom:  16px;
}
.ben-svc-card-title {
    font-family:   var(--font-display);
    font-size:     28px;
    font-weight:   400;
    color:         #fff;
    line-height:   1.2;
    margin-bottom: 16px;
}
.ben-svc-card-title em { font-style: italic; color: var(--gold); }
.ben-svc-card-body {
    font-family: var(--font-body);
    font-size:   13px;
    font-weight: 300;
    color:       rgba(255,255,255,0.5);
    line-height: 1.8;
    margin-bottom:32px;
}
.ben-svc-card-tags {
    display:  flex;
    gap:      8px;
    flex-wrap:wrap;
}
.ben-svc-tag {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.6);
    padding:        6px 12px;
    border:         0.5px solid rgba(255,255,255,0.12);
}

/* ── Process (service-specific) ── */
.ben-svc-process {
    padding:    100px 80px;
    background: var(--cream);
    border-top: 0.5px solid rgba(26,26,26,0.08);
}
.ben-svc-process-inner {
    max-width: 1300px;
    margin:    0 auto;
}
.ben-svc-process-header {
    max-width:     600px;
    margin-bottom: 64px;
}
.ben-svc-steps {
    display:              grid;
    grid-template-columns:repeat(5, 1fr);
    gap:                  0;
    border-top:           0.5px solid rgba(13,27,46,0.12);
}
.ben-svc-step {
    padding:        40px 28px;
    border-right:   0.5px solid rgba(13,27,46,0.12);
    position:       relative;
    transition:     background 0.35s;
}
.ben-svc-step:last-child { border-right: none; }
.ben-svc-step:hover      { background: rgba(255,255,255,0.7); }
/* Connector line */
.ben-svc-step:not(:last-child)::after {
    content:   '';
    position:  absolute;
    top:       52px;
    right:     -1px;
    width:     1px;
    height:    20px;
    background:var(--gold);
    opacity:   0.4;
}
.ben-svc-step-num {
    font-family:    var(--font-display);
    font-style:     italic;
    font-size:      40px;
    font-weight:    400;
    color:          rgba(30,144,255,0.3);
    line-height:    1;
    margin-bottom:  16px;
}
.ben-svc-step-title {
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink);
    margin-bottom:  10px;
}
.ben-svc-step-body {
    font-family: var(--font-body);
    font-size:   12px;
    font-weight: 300;
    color:       var(--muted);
    line-height: 1.75;
    margin:      0;
}

/* ── Result / Case Study ── */
.ben-svc-result {
    padding:    0;
    background: var(--charcoal);
    overflow:   hidden;
}
.ben-svc-result-grid {
    display:              grid;
    grid-template-columns:1fr 1fr;
    min-height:           480px;
}
.ben-svc-result-img {
    position:   relative;
    background: #0d1e3a;
    overflow:   hidden;
}
.ben-svc-result-img img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    filter:      brightness(0.55) saturate(0.8);
    position:    absolute;
    inset:       0;
}
.ben-svc-result-img-overlay {
    position:  absolute;
    inset:     0;
    background:linear-gradient(to right, transparent, rgba(20,20,20,0.5));
}
.ben-svc-result-copy {
    padding:         64px 60px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             20px;
}
.ben-svc-result-eyebrow {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var(--gold);
}
.ben-svc-result-heading {
    font-family: var(--font-display);
    font-size:   40px;
    font-weight: 400;
    color:       #fff;
    line-height: 1.1;
}
.ben-svc-result-heading em { font-style: italic; color: var(--gold); }
.ben-svc-result-body {
    font-family: var(--font-body);
    font-size:   14px;
    font-weight: 300;
    color:       rgba(255,255,255,0.55);
    line-height: 1.85;
    margin:      0;
}
.ben-svc-result-stats {
    display:    flex;
    gap:        40px;
    flex-wrap:  wrap;
    padding-top:24px;
    border-top: 0.5px solid rgba(255,255,255,0.1);
}
.ben-svc-result-stat-num {
    font-family: var(--font-display);
    font-size:   36px;
    font-weight: 400;
    color:       #fff;
    line-height: 1;
    margin-bottom:4px;
}
.ben-svc-result-stat-num em { font-style: italic; color: var(--gold); font-size: 20px; }
.ben-svc-result-stat-lbl {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
    margin:         0;
}

/* ── Pricing ── */
.ben-svc-pricing {
    padding:    100px 80px;
    background: var(--bone);
}
.ben-svc-pricing-inner {
    max-width: 1300px;
    margin:    0 auto;
}
.ben-svc-pricing-header {
    text-align:      center;
    margin-bottom:   64px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             14px;
}
.ben-svc-pricing-heading {
    font-family: var(--font-display);
    font-size:   48px;
    font-weight: 400;
    color:       var(--ink);
    line-height: 1.08;
}
.ben-svc-pricing-heading em { font-style: italic; }
.ben-svc-tiers {
    display:              grid;
    grid-template-columns:repeat(3, 1fr);
    gap:                  0;
    border:               0.5px solid rgba(13,27,46,0.12);
}
.ben-svc-tier {
    padding:        48px 40px;
    border-right:   0.5px solid rgba(13,27,46,0.12);
    display:        flex;
    flex-direction: column;
    gap:            0;
    position:       relative;
    transition:     background 0.35s;
}
.ben-svc-tier:last-child    { border-right: none; }
.ben-svc-tier:hover         { background: rgba(255,255,255,0.6); }
.ben-svc-tier--featured {
    background: var(--charcoal);
    border-color: var(--charcoal);
}
.ben-svc-tier--featured:hover { background: #0d1e3a; }
.ben-svc-tier-badge {
    font-family:    var(--font-body);
    font-size:      9px;
    font-weight:    400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--charcoal);
    background:     var(--gold);
    padding:        4px 10px;
    display:        inline-block;
    margin-bottom:  20px;
    align-self:     flex-start;
}
.ben-svc-tier-name {
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  10px;
}
.ben-svc-tier--featured .ben-svc-tier-name { color: rgba(255,255,255,0.5); }
.ben-svc-tier-price {
    font-family:   var(--font-display);
    font-size:     52px;
    font-weight:   400;
    color:         var(--ink);
    line-height:   1;
    margin-bottom: 6px;
}
.ben-svc-tier--featured .ben-svc-tier-price { color: #fff; }
.ben-svc-tier-price em {
    font-family:  var(--font-body);
    font-style:   normal;
    font-size:    14px;
    font-weight:  300;
    color:        var(--muted);
}
.ben-svc-tier--featured .ben-svc-tier-price em { color: rgba(255,255,255,0.4); }
.ben-svc-tier-desc {
    font-family:   var(--font-body);
    font-size:     13px;
    font-weight:   300;
    color:         var(--muted);
    line-height:   1.7;
    margin-bottom: 32px;
    padding-bottom:24px;
    border-bottom: 0.5px solid rgba(13,27,46,0.1);
}
.ben-svc-tier--featured .ben-svc-tier-desc {
    color:        rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.1);
}
.ben-svc-tier-items {
    list-style:     none;
    padding:        0;
    margin:         0 0 36px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    flex:           1;
}
.ben-svc-tier-items li {
    font-family:  var(--font-body);
    font-size:    13px;
    font-weight:  300;
    color:        var(--ink);
    display:      flex;
    align-items:  center;
    gap:          10px;
    line-height:  1.5;
}
.ben-svc-tier--featured .ben-svc-tier-items li { color: rgba(255,255,255,0.75); }
.ben-svc-tier-items li::before {
    content:      '';
    width:        4px;
    height:       4px;
    border-radius:50%;
    background:   var(--gold);
    flex-shrink:  0;
}
.ben-svc-tier-cta {
    margin-top: auto;
}
.ben-svc-tier--featured .btn-secondary {
    border-color: rgba(255,255,255,0.4);
    color:        #fff;
}

/* ── FAQ ── */
.ben-svc-faq {
    padding:    100px 80px;
    background: var(--cream);
}
.ben-svc-faq-inner {
    max-width: 860px;
    margin:    0 auto;
}
.ben-svc-faq-header {
    margin-bottom: 56px;
}
.ben-faq-item {
    border-top:  0.5px solid rgba(13,27,46,0.1);
    padding:     24px 0;
}
.ben-faq-item:last-child { border-bottom: 0.5px solid rgba(13,27,46,0.1); }
.ben-faq-q {
    font-family:    var(--font-display);
    font-size:      22px;
    font-weight:    400;
    color:          var(--ink);
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    gap:            16px;
    user-select:    none;
    line-height:    1.3;
}
.ben-faq-q .ben-faq-icon {
    width:      22px;
    height:     22px;
    flex-shrink:0;
    border:     0.5px solid rgba(13,27,46,0.2);
    border-radius:50%;
    display:    flex;
    align-items:center;
    justify-content:center;
    color:      var(--muted);
    transition: transform var(--transition-fast), background var(--transition-fast);
}
.ben-faq-item.is-open .ben-faq-icon {
    background: var(--gold);
    border-color: var(--gold);
    color:      #fff;
    transform:  rotate(45deg);
}
.ben-faq-a {
    display:     none;
    font-family: var(--font-body);
    font-size:   14px;
    font-weight: 300;
    color:       var(--muted);
    line-height: 1.85;
    padding-top: 16px;
    margin:      0;
}
.ben-faq-item.is-open .ben-faq-a { display: block; }

/* ── Service-specific CTA band ── */
.ben-svc-cta {
    background:     var(--charcoal);
    padding:        100px 80px;
    text-align:     center;
    position:       relative;
    overflow:       hidden;
}
.ben-svc-cta::before {
    content:      '';
    position:     absolute;
    top:          -80px;
    left:         50%;
    transform:    translateX(-50%);
    width:        600px;
    height:       600px;
    border-radius:50%;
    border:       0.5px solid rgba(30,144,255,0.1);
    pointer-events:none;
}
.ben-svc-cta-inner {
    max-width: 640px;
    margin:    0 auto;
    position:  relative;
    z-index:   1;
    display:   flex;
    flex-direction: column;
    align-items:center;
    gap: 0;
}
.ben-svc-cta-heading {
    font-family:   var(--font-display);
    font-size:     52px;
    font-weight:   400;
    color:         #fff;
    line-height:   1.05;
    margin-bottom: 20px;
}
.ben-svc-cta-heading em { font-style: italic; color: var(--gold); }
.ben-svc-cta-sub {
    font-family:   var(--font-body);
    font-size:     15px;
    font-weight:   300;
    color:         rgba(255,255,255,0.5);
    line-height:   1.85;
    margin-bottom: 40px;
    max-width:     480px;
}
.ben-svc-cta-btns {
    display:     flex;
    gap:         16px;
    flex-wrap:   wrap;
    justify-content:center;
}
.ben-svc-cta-note {
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    300;
    letter-spacing: 0.12em;
    color:          rgba(255,255,255,0.3);
    margin-top:     24px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ben-svc-hero { padding: 80px 32px 64px; }
    .ben-svc-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .ben-svc-proof-card { padding: 36px 28px; }
    .ben-svc-includes,
    .ben-svc-process,
    .ben-svc-pricing,
    .ben-svc-faq,
    .ben-svc-cta { padding: 72px 32px; }
    .ben-svc-includes-grid { grid-template-columns: 1fr; gap: 48px; }
    .ben-svc-includes-right { position: static; }
    .ben-svc-steps { grid-template-columns: repeat(2,1fr); }
    .ben-svc-step:nth-child(2) { border-right: none; }
    .ben-svc-result-grid { grid-template-columns: 1fr; }
    .ben-svc-result-img { min-height: 280px; }
    .ben-svc-result-copy { padding: 48px 32px; }
    .ben-svc-tiers { grid-template-columns: 1fr; }
    .ben-svc-tier { border-right: none; border-bottom: 0.5px solid rgba(13,27,46,0.12); }
    .ben-svc-tier--featured { border-color: transparent; }
    .ben-svc-cta-heading { font-size: 38px; }
    .ben-svc-includes-heading { font-size: 36px; }
}
@media (max-width: 600px) {
    .ben-svc-steps { grid-template-columns: 1fr; }
    .ben-svc-hero-title { font-size: 2.4rem; }
    .ben-svc-cta-heading { font-size: 30px; }
    .ben-svc-result-stats { gap: 24px; }
}