* { box-sizing: border-box; }
:root { --gold: #c8b393; --ink: #080808; --muted: rgba(255,255,255,.58); }
html, body { background: var(--ink); color: #fff; margin: 0; }
body { font-family: Poppins, sans-serif; }
a { color: inherit; text-decoration: none; }
.detail-page { min-height: 100vh; overflow: hidden; }
.detail-header { align-items: center; display: flex; justify-content: space-between; padding: 24px clamp(20px, 6vw, 88px); position: absolute; width: 100%; z-index: 5; }
.detail-logo img { height: 44px; width: auto; }
.detail-nav { align-items: center; background: rgba(8,8,8,.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); border-radius: 100px; display: flex; gap: 24px; padding: 11px 24px; }
.detail-nav a, .detail-tool { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.detail-nav a:hover, .detail-nav .active { color: var(--gold); }
.detail-nav-group { position: relative; }
.detail-nav-menu { background: rgba(12,12,12,.97); border: 1px solid rgba(200,179,147,.25); border-radius: 12px; display: flex; flex-direction: column; gap: 0; left: 50%; min-width: 190px; opacity: 0; padding: 8px; pointer-events: none; position: absolute; top: calc(100% + 4px); transform: translate(-50%, -6px); transition: opacity .2s ease, transform .2s ease; visibility: hidden; z-index: 10; }
.detail-nav-menu::before { content: ''; height: 8px; left: 0; position: absolute; right: 0; top: -8px; }
.detail-nav-group:hover .detail-nav-menu, .detail-nav-group:focus-within .detail-nav-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; }
.detail-nav-menu a { border-radius: 7px; display: block; font-size: 10px; letter-spacing: .06em; padding: 9px 10px; white-space: nowrap; }
.detail-nav-menu a:hover { background: rgba(200,179,147,.12); }
.detail-tools { display: flex; gap: 9px; }
.detail-tool { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.detail-hero { align-items: flex-end; background-position: center; background-size: cover; display: flex; min-height: 620px; padding: 150px clamp(24px, 10vw, 150px) 76px; position: relative; }
.detail-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.18)), linear-gradient(0deg, rgba(0,0,0,.8), transparent 72%); content: ''; inset: 0; position: absolute; }
.detail-hero-copy { max-width: 700px; position: relative; }
.eyebrow { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .27em; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 500; line-height: .98; margin: 22px 0; }
h1 em, h2 em { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-weight: 400; }
.detail-hero p, .detail-copy p { color: var(--muted); font-size: 14px; line-height: 1.85; margin: 0; max-width: 530px; }
.detail-content { margin: auto; max-width: 1180px; padding: 95px clamp(24px, 7vw, 80px); }
.detail-intro { display: grid; gap: 45px; grid-template-columns: 1.1fr .9fr; margin-bottom: 80px; }
h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 400; line-height: 1.05; margin: 14px 0 0; }
.detail-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.detail-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 28px; transition: background .4s ease, border-color .4s ease, transform .4s ease; }
.detail-card:hover { background: rgba(200,179,147,.04); border-color: rgba(200,179,147,.3); transform: translateY(-4px); }
.detail-card-icon { align-items: center; background: rgba(200,179,147,.1); border-radius: 50%; color: var(--gold); display: flex; font-size: 20px; height: 48px; justify-content: center; width: 48px; }
.detail-card i { color: var(--gold); font-size: 28px; }
.detail-card h3 { font-size: 17px; font-weight: 500; margin: 18px 0 8px; }
.detail-card p { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 0; }

.detail-capabilities { margin-top: 100px; }
.detail-capabilities-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.detail-capability { align-items: flex-start; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; display: flex; gap: 16px; padding: 24px; transition: background .4s ease, border-color .4s ease; }
.detail-capability:hover { background: rgba(200,179,147,.04); border-color: rgba(200,179,147,.25); }
.detail-capability-icon { align-items: center; background: rgba(200,179,147,.1); border-radius: 50%; color: var(--gold); display: flex; flex-shrink: 0; font-size: 18px; height: 42px; justify-content: center; width: 42px; }
.detail-capability h4 { font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.detail-capability p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }

.detail-steps { border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); margin-top: 88px; padding-top: 30px; }
.detail-step { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 24px; transition: background .4s ease, border-color .4s ease, transform .4s ease; }
.detail-step:hover { background: rgba(200,179,147,.04); border-color: rgba(200,179,147,.25); transform: translateY(-4px); }
.detail-step strong { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400; display: block; }
.detail-step h3 { font-size: 13px; font-weight: 500; margin: 7px 0; }
.detail-step p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0; }

.detail-stats { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.12); }
.detail-stat { text-align: center; }
.detail-stat-num { color: var(--gold); display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1; margin-bottom: 8px; }
.detail-stat-label { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
body.light-mode .detail-stat-label { color: rgba(20, 18, 14, .55) !important; }
@media (max-width: 760px) { .detail-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; } }

.detail-gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
.detail-gallery-item { aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; position: relative; }
.detail-gallery-item::after { background: linear-gradient(to top, rgba(0,0,0,.65), transparent 55%); content: ''; inset: 0; position: absolute; }
.detail-gallery-item img { display: block; height: 100%; object-fit: cover; transition: transform .7s ease; width: 100%; }
.detail-gallery-item:hover img { transform: scale(1.08); }
.detail-gallery-item span { bottom: 14px; color: #fff; font-size: 10px; font-weight: 700; left: 14px; letter-spacing: .1em; position: absolute; text-transform: uppercase; z-index: 1; }
@media (max-width: 760px) { .detail-gallery { grid-template-columns: repeat(2, 1fr); } }

.detail-feature { overflow: hidden; padding: 140px clamp(24px, 7vw, 80px); position: relative; text-align: center; width: 100%; }
.detail-feature-bg { background-position: center; background-size: cover; filter: blur(3px) brightness(.55); inset: -12px; position: absolute; transform: scale(1.03); z-index: 0; }
.detail-feature-video { filter: brightness(.55); height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: 0; }
.detail-feature::before { background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); content: ''; inset: 0; position: absolute; z-index: 0; }
.detail-feature-content { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.detail-feature blockquote { color: #fff; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 4vw, 3rem); font-style: italic; font-weight: 400; line-height: 1.3; margin: 0 0 20px; }
.detail-feature cite { color: var(--gold); font-size: 11px; font-style: normal; letter-spacing: .2em; text-transform: uppercase; }

.detail-card, .detail-capability, .detail-step, .detail-gallery-item { transition: background .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease; }
.detail-card:hover, .detail-capability:hover { box-shadow: 0 20px 40px rgba(0,0,0,.35); }

.detail-why { border-top: 1px solid rgba(255,255,255,.12); margin-top: 100px; padding-top: 34px; }
.detail-why-grid { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.detail-why-grid h4 { font-size: 15px; font-weight: 500; margin: 0 0 8px; }
.detail-why-grid p { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 0; }
body.light-mode .detail-why-grid p { color: rgba(20, 18, 14, .58) !important; }
@media (max-width: 760px) { .detail-why-grid { grid-template-columns: 1fr; gap: 24px; } }

.detail-cta { background: linear-gradient(135deg, rgba(200,179,147,.06) 0%, rgba(200,179,147,.02) 100%); border-bottom: 1px solid rgba(200,179,147,.12); border-top: 1px solid rgba(200,179,147,.12); padding: 90px clamp(24px, 7vw, 80px); text-align: center; }
.detail-cta-inner { margin: 0 auto; max-width: 640px; }
.detail-cta-goldline { background: linear-gradient(to right, var(--gold), transparent); height: 1px; margin: 0 auto 24px; width: 48px; }
.detail-cta h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.15; margin: 0 0 16px; }
.detail-cta-sub { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 36px; }
.detail-cta-actions { align-items: center; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.detail-cta-primary, .detail-cta-secondary { align-items: center; border-radius: 100px; display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; justify-content: center; letter-spacing: .2em; max-width: 320px; padding: 16px 36px; text-transform: uppercase; transition: all .3s ease; width: 100%; }
.detail-cta-primary { background: var(--gold); color: #080808; }
.detail-cta-primary:hover { background: #fff; }
.detail-cta-secondary { border: 1px solid rgba(255,255,255,.2); color: #fff; }
.detail-cta-secondary:hover { border-color: var(--gold); color: var(--gold); }

.detail-footer { color: rgba(255,255,255,.42); display: flex; font-size: 10px; justify-content: space-between; padding: 24px clamp(24px, 7vw, 80px); }

body.light-mode .detail-card p,
body.light-mode .detail-capability p,
body.light-mode .detail-step p,
body.light-mode .detail-cta-sub {
    color: rgba(20, 18, 14, .58) !important;
}
body.light-mode .detail-card,
body.light-mode .detail-capability,
body.light-mode .detail-step {
    background: rgba(0, 0, 0, .025) !important;
    border-color: rgba(0, 0, 0, .08) !important;
}
body.light-mode .detail-card:hover,
body.light-mode .detail-capability:hover,
body.light-mode .detail-step:hover {
    background: rgba(200, 179, 147, .1) !important;
}
body.light-mode .detail-cta h2 {
    color: #16140f !important;
}
body.light-mode .detail-cta-secondary {
    border-color: rgba(0, 0, 0, .18) !important;
    color: #16140f !important;
}
body.light-mode .detail-cta-secondary:hover {
    border-color: var(--gold) !important;
    color: #8a7550 !important;
}

@media (max-width: 760px) { .detail-nav { display: none; } .detail-header { padding: 20px; } .detail-hero { min-height: 620px; padding: 130px 24px 56px; } .detail-intro, .detail-grid, .detail-capabilities-grid { grid-template-columns: 1fr; } .detail-intro { gap: 22px; margin-bottom: 55px; } .detail-steps { grid-template-columns: repeat(2, 1fr); margin-top: 60px; } .detail-footer { flex-direction: column; gap: 10px; } }