/* ═══════════════════════════════════════════════
   DC Treatment Showcase – Full-Width Editorial
   ═══════════════════════════════════════════════ */

.dc-ts {
    --ac: #A78278;
    --dk: #1a1a2e;
    --tx: #444;
    --max: 1400px;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Block section ── */
.dc-ts .ts-block {
    position: relative;
    overflow: hidden;
    padding: clamp(50px, 7vw, 100px) clamp(20px, 4vw, 50px);
}

/* Alternating backgrounds */
.dc-ts .ts-block:nth-child(odd) {
    background: #faf8f6;
}
.dc-ts .ts-block:nth-child(even) {
    background: #fff;
}

/* ── Grid layout ── */
.dc-ts .ts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    max-width: var(--max);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.dc-ts .ts-grid[data-img="left"] .ts-media { order: -1; }

/* ── Watermark number ── */
.dc-ts .ts-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    font-size: clamp(140px, 18vw, 280px);
    font-weight: 700;
    color: rgba(167,130,120,.03);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

/* ── Floating elements per block ── */
.dc-ts .ts-fl {
    position: absolute; pointer-events: none; z-index: 1;
}
.dc-ts .ts-fl--orb {
    width: clamp(120px, 14vw, 240px);
    height: clamp(120px, 14vw, 240px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,130,120,.05) 0%, transparent 65%);
    animation: tsFloat 20s ease-in-out infinite;
}
.dc-ts .ts-block:nth-child(1) .ts-fl--orb { top: -40px; right: -30px; }
.dc-ts .ts-block:nth-child(2) .ts-fl--orb { bottom: -50px; left: -40px; animation-delay: 4s; }
.dc-ts .ts-block:nth-child(3) .ts-fl--orb { top: -30px; left: -50px; animation-delay: 8s; }

.dc-ts .ts-fl--ring {
    width: clamp(60px, 7vw, 100px);
    height: clamp(60px, 7vw, 100px);
    border: 1.5px solid rgba(167,130,120,.06);
    border-radius: 50%;
    animation: tsSpin 32s linear infinite;
}
.dc-ts .ts-block:nth-child(1) .ts-fl--ring { bottom: 15%; left: 5%; }
.dc-ts .ts-block:nth-child(2) .ts-fl--ring { top: 12%; right: 6%; animation-direction: reverse; }
.dc-ts .ts-block:nth-child(3) .ts-fl--ring { bottom: 10%; right: 4%; }

.dc-ts .ts-fl--dots {
    width: 56px; height: 56px;
    background: radial-gradient(circle, rgba(167,130,120,.08) 1px, transparent 1px);
    background-size: 8px 8px;
    animation: tsPulse 10s ease-in-out infinite;
}
.dc-ts .ts-block:nth-child(1) .ts-fl--dots { top: 20%; right: 8%; }
.dc-ts .ts-block:nth-child(2) .ts-fl--dots { bottom: 18%; left: 7%; animation-delay: 3s; }
.dc-ts .ts-block:nth-child(3) .ts-fl--dots { top: 15%; right: 10%; animation-delay: 6s; }

.dc-ts .ts-fl--dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(167,130,120,.14);
    animation: tsFloat 8s ease-in-out infinite;
}
.dc-ts .ts-block:nth-child(1) .ts-fl--dot { top: 35%; left: 12%; animation-delay: 1s; }
.dc-ts .ts-block:nth-child(2) .ts-fl--dot { top: 28%; right: 15%; animation-delay: 5s; }
.dc-ts .ts-block:nth-child(3) .ts-fl--dot { bottom: 30%; left: 10%; animation-delay: 3s; }

.dc-ts .ts-fl--line {
    width: 100px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,130,120,.06), transparent);
}
.dc-ts .ts-block:nth-child(1) .ts-fl--line { bottom: 30%; right: 2%; transform: rotate(-8deg); }
.dc-ts .ts-block:nth-child(2) .ts-fl--line { top: 40%; left: 1%; transform: rotate(12deg); }
.dc-ts .ts-block:nth-child(3) .ts-fl--line { bottom: 35%; right: 3%; transform: rotate(-15deg); }

@keyframes tsFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes tsSpin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes tsPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

/* ── Text column ── */
.dc-ts .ts-text { position: relative; }

.dc-ts .ts-sub {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.dc-ts .ts-sub__bar {
    width: 32px; height: 2px;
    background: var(--ac); border-radius: 1px;
}
.dc-ts .ts-sub__txt {
    font-family: 'Cinzel', serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--ac);
}

.dc-ts .ts-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3.2vw, 42px);
    font-weight: 400; color: var(--dk);
    line-height: 1.15; margin: 0 0 clamp(14px, 2vw, 24px);
    text-wrap: balance;
}

.dc-ts .ts-body {
    font-size: clamp(14px, 1.1vw, 16px);
    color: var(--tx);
    line-height: 1.85;
}
.dc-ts .ts-body p { margin: 0 0 10px; }
.dc-ts .ts-body p:last-child { margin-bottom: 0; }
.dc-ts .ts-body ul, .dc-ts .ts-body ol {
    padding-left: 20px; margin: 0 0 10px;
}
.dc-ts .ts-body li { margin-bottom: 4px; }
.dc-ts .ts-body strong { font-weight: 600; color: var(--dk); }

/* USPs */
.dc-ts .ts-usps {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: clamp(16px, 2vw, 28px);
}
.dc-ts .ts-usp {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 50px;
    background: rgba(167,130,120,.05);
    border: 1px solid rgba(167,130,120,.1);
    font-size: 12px; font-weight: 500; color: var(--tx);
    transition: all .25s;
}
.dc-ts .ts-usp:hover {
    background: rgba(167,130,120,.14);
    border-color: rgba(167,130,120,.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(167,130,120,.1);
}
.dc-ts .ts-usp svg {
    width: 12px; height: 12px; color: var(--ac); flex-shrink: 0;
}

/* ── Image column ── */
.dc-ts .ts-media {
    position: relative;
}
.dc-ts .ts-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 60px rgba(26,26,46,.08), 0 4px 12px rgba(26,26,46,.03);
}
.dc-ts .ts-img-wrap img {
    width: 100%; aspect-ratio: 4/5;
    object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.dc-ts .ts-img-wrap:hover img {
    transform: scale(1.05);
}

/* Gold overlay */
.dc-ts .ts-img-wrap::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(167,130,120,.12) 0%, transparent 40%),
                linear-gradient(340deg, rgba(26,26,46,.1) 0%, transparent 50%);
    mix-blend-mode: multiply; pointer-events: none;
}

/* Number badge on image */
.dc-ts .ts-num {
    position: absolute; top: 20px; left: 20px; z-index: 3;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    font-family: 'Cinzel', serif;
    font-size: 14px; font-weight: 700;
    color: var(--ac);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Image floating micro-deco */
.dc-ts .ts-img-deco {
    position: absolute; pointer-events: none; z-index: 2;
}
.dc-ts .ts-img-deco--dots {
    width: 40px; height: 40px;
    background: radial-gradient(circle, rgba(255,255,255,.25) 1px, transparent 1px);
    background-size: 7px 7px;
    bottom: 16px; right: 16px;
    animation: tsPulse 9s ease-in-out infinite;
}
.dc-ts .ts-img-deco--ring {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(255,255,255,.16);
    border-radius: 50%;
    top: 20px; right: 20px;
    animation: tsSpin 16s linear infinite;
}

/* Accent shape behind image */
.dc-ts .ts-img-accent {
    position: absolute;
    width: 80%; height: 80%;
    border-radius: 20px;
    z-index: -1;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.dc-ts .ts-block:nth-child(odd) .ts-img-accent {
    bottom: -14px; right: -14px;
    background: rgba(167,130,120,.06);
    border: 1px solid rgba(167,130,120,.08);
}
.dc-ts .ts-block:nth-child(even) .ts-img-accent {
    bottom: -14px; left: -14px;
    background: rgba(26,26,46,.03);
    border: 1px solid rgba(26,26,46,.04);
}
.dc-ts .ts-media:hover .ts-img-accent {
    transform: translate(4px, 4px);
}

/* ── Divider between blocks ── */
.dc-ts .ts-divider {
    max-width: 200px; height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgba(167,130,120,.15), transparent);
}

/* ── CTA row ── */
.dc-ts .ts-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 50px);
}
.dc-ts .ts-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 14px 32px; border-radius: 50px;
    font-size: 13px; font-weight: 550; letter-spacing: .3px;
    text-decoration: none;
    transition: all .3s cubic-bezier(.16,1,.3,1);
}
.dc-ts .ts-btn svg { width: 15px; height: 15px; }
.dc-ts .ts-btn--fill {
    background: var(--ac); color: #fff;
}
.dc-ts .ts-btn--fill:hover {
    background: color-mix(in oklch, var(--ac) 78%, black);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(167,130,120,.3);
    color: #fff;
}
.dc-ts .ts-btn--ghost {
    background: transparent; color: var(--ac);
    border: 1.5px solid rgba(167,130,120,.2);
}
.dc-ts .ts-btn--ghost:hover {
    background: rgba(167,130,120,.06);
    border-color: var(--ac); color: var(--ac);
}

/* ── Scroll-driven reveal ── */
@keyframes tsRevealText {
    from { opacity: 0; transform: translateY(2rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tsRevealImg {
    from { opacity: 0; transform: translateY(2.5rem) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dc-ts .ts-text {
    animation: tsRevealText linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}
.dc-ts .ts-media {
    animation: tsRevealImg linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
}
@supports not (animation-timeline: view()) {
    .dc-ts .ts-text,
    .dc-ts .ts-media {
        opacity: 1; transform: none; animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dc-ts .ts-text, .dc-ts .ts-media,
    .dc-ts .ts-fl, .dc-ts .ts-img-deco {
        animation: none !important; opacity: 1; transform: none;
    }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .dc-ts .ts-grid {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vw, 40px);
    }
    .dc-ts .ts-grid[data-img="left"] .ts-media { order: 0; }
    .dc-ts .ts-media { max-width: 500px; }
    .dc-ts .ts-img-wrap img { aspect-ratio: 4/3; }
    .dc-ts .ts-watermark { font-size: clamp(100px, 20vw, 180px); }
    .dc-ts .ts-fl--ring, .dc-ts .ts-fl--dot,
    .dc-ts .ts-fl--line { display: none; }
}
@media (max-width: 520px) {
    .dc-ts .ts-block { padding: 36px 16px; }
    .dc-ts .ts-img-accent { display: none; }
    .dc-ts .ts-img-wrap { border-radius: 14px; }
    .dc-ts .ts-cta { flex-direction: column; padding: 28px 16px; }
    .dc-ts .ts-btn { width: 100%; justify-content: center; }
    .dc-ts .ts-fl--orb, .dc-ts .ts-fl--dots { display: none; }
}