/* =============================================
   Chancery Dental Sections — Plugin CSS v1.0
   All classes prefixed cds- to avoid conflicts
============================================= */

:root {
  --cds-c:    #A62461;
  --cds-t:    #7ABFB8;
  --cds-g:    #BDBEBF;
  --cds-d:    #0D0D0D;
  --cds-bg:   #faf9f7;
  --cds-b:    rgba(13,13,13,0.1);
  --cds-hf:   'Raleway','Helvetica Neue',sans-serif;
  --cds-bf:   'Open Sans','Georgia',sans-serif;
  --cds-r:    12px;
  --cds-br:   24px;
}

/* ---- ANIMATIONS ---- */
@keyframes cds-fadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes cds-slideUp  { from{transform:translateY(105%)} to{transform:translateY(0)} }
@keyframes cds-scrollX  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes cds-colUp    { from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes cds-colDown  { from{transform:translateY(-50%)} to{transform:translateY(0)} }

/* =============================================
   SHARED
============================================= */
.cds-sec-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cds-hf); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cds-t);
  margin-bottom: 24px;
}
.cds-sec-label::before {
  content: ''; display: block; width: 20px; height: 1.5px; background: var(--cds-t);
}
.cds-sh2 {
  font-family: var(--cds-hf);
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 900; line-height: 0.9; letter-spacing: -0.035em; color: var(--cds-d);
}
.cds-sl  { display: block; overflow: hidden; }
.cds-sl-i {
  display: block; opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.cds-sh2.cds-vis .cds-sl-i                      { opacity:1; transform:translateY(0); }
.cds-sh2.cds-vis .cds-sl:nth-child(2) .cds-sl-i { transition-delay:0.07s; }
.cds-sh2.cds-vis .cds-sl:nth-child(3) .cds-sl-i { transition-delay:0.14s; }
.cds-sh2.cds-vis .cds-sl:nth-child(4) .cds-sl-i { transition-delay:0.21s; }
.cds-sh2.cds-vis .cds-sl:nth-child(5) .cds-sl-i { transition-delay:0.28s; }
.cds-sh2.cds-vis .cds-sl:nth-child(6) .cds-sl-i { transition-delay:0.35s; }
.cds-sh2.cds-vis .cds-sl:nth-child(7) .cds-sl-i { transition-delay:0.42s; }
.cds-acc-c { color: var(--cds-c); }
.cds-acc-t { color: var(--cds-t); }

/* =============================================
   HERO
============================================= */
.cds-hero {
  display: grid; grid-template-columns: 52% 48%;
  height: 100vh; max-height: 100vh;
  background: var(--cds-bg); overflow: hidden; position: relative;
}
.cds-hero-left {
  padding: 60px 52px; display: flex; flex-direction: column;
  justify-content: center; height: 100%; overflow: hidden;
}
.cds-hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--cds-b); border-radius: 50px;
  padding: 6px 16px 6px 6px; margin-bottom: 36px; width: fit-content;
  opacity: 0; animation: cds-fadeUp 0.55s 0.05s cubic-bezier(0.16,1,0.3,1) forwards;
}
.cds-pill-avs { display: flex; }
.cds-pav {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--cds-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cds-hf); font-size: 9px; font-weight: 800; color: #fff;
}
.cds-pav:not(:first-child) { margin-left: -7px; }
.cds-pav1 { background: var(--cds-c); }
.cds-pav2 { background: var(--cds-t); color: var(--cds-d); }
.cds-pav3 { background: var(--cds-g); color: var(--cds-d); }
.cds-pill-txt  { font-family: var(--cds-hf); font-size: 12px; font-weight: 600; color: rgba(13,13,13,0.6); }
.cds-pill-txt strong { color: var(--cds-d); }
.cds-pill-star { color: var(--cds-c); }
.cds-hero-heading {
  font-family: var(--cds-hf);
  font-size: clamp(46px, 6.5vw, 96px);
  font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; color: var(--cds-d);
  margin-bottom: 28px;
}
.cds-hero-heading .cds-line  { display: block; overflow: hidden; }
.cds-hero-heading .cds-line-inner {
  display: block;
  animation: cds-slideUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
.cds-hero-heading .cds-line:nth-child(1) .cds-line-inner { animation-delay: 0.06s; }
.cds-hero-heading .cds-line:nth-child(2) .cds-line-inner { animation-delay: 0.16s; }
.cds-hero-heading .cds-line:nth-child(3) .cds-line-inner { animation-delay: 0.26s; }
.cds-hero-heading em { font-style: italic; color: var(--cds-c); font-weight: 800; }
.cds-hero-desc {
  font-family: var(--cds-bf); font-size: 15px; line-height: 1.75;
  color: rgba(13,13,13,0.5); max-width: 380px; margin-bottom: 32px;
  opacity: 0; animation: cds-fadeUp 0.6s 0.46s cubic-bezier(0.16,1,0.3,1) forwards;
}
.cds-hero-btns {
  display: flex; gap: 12px; flex-wrap: wrap;
  opacity: 0; animation: cds-fadeUp 0.6s 0.56s cubic-bezier(0.16,1,0.3,1) forwards;
}
.cds-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cds-c); color: #fff;
  padding: 13px 26px; border-radius: var(--cds-br);
  font-family: var(--cds-hf); font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  transition: opacity 0.2s, transform 0.2s; text-decoration: none;
}
.cds-btn-primary:hover { opacity: 0.86; transform: translateY(-2px); color: #fff; }
.cds-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--cds-d);
  padding: 13px 26px; border-radius: var(--cds-br);
  border: 1px solid rgba(13,13,13,0.18);
  font-family: var(--cds-hf); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  transition: border-color 0.2s, transform 0.2s; text-decoration: none;
}
.cds-btn-secondary:hover { border-color: rgba(13,13,13,0.45); transform: translateY(-2px); color: var(--cds-d); }

/* Right columns */
.cds-hero-right {
  display: flex; gap: 12px; overflow: hidden; position: relative;
  height: 100%; padding: 24px 40px 24px 16px;
}
.cds-hero-right::before,
.cds-hero-right::after {
  content: ''; position: absolute; left: 0; right: 0; height: 160px;
  z-index: 10; pointer-events: none;
}
.cds-hero-right::before { top: 0; background: linear-gradient(to bottom, var(--cds-bg) 0%, transparent 100%); }
.cds-hero-right::after  { bottom: 0; background: linear-gradient(to top, var(--cds-bg) 0%, transparent 100%); }
.cds-hcol { flex: 1; overflow: hidden; position: relative; height: 100%; }
.cds-hcol-inner { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.cds-hcol-1 .cds-hcol-inner { animation: cds-colUp   24s linear infinite; }
.cds-hcol-2 .cds-hcol-inner { animation: cds-colDown 32s linear infinite; }
.cds-hcol-3 .cds-hcol-inner { animation: cds-colUp   20s linear infinite; animation-delay: -8s; }
.cds-hcard {
  border-radius: var(--cds-r); flex-shrink: 0; overflow: hidden;
  position: relative; cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.cds-hcard:hover { transform: scale(1.03); }
.cds-hcard-bg  { position: absolute; inset: 0; }
.cds-hcard-ov  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0.04) 55%, transparent 100%); }
.cds-hcard-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; z-index: 2; }
.cds-hcard-tag {
  display: inline-block; width: fit-content;
  padding: 3px 9px; border-radius: 50px;
  background: rgba(255,255,255,0.13);
  font-family: var(--cds-hf); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8);
  margin-bottom: 7px; backdrop-filter: blur(6px);
}
.cds-hcard-name { font-family: var(--cds-hf); font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.cds-hcard-sub  { font-family: var(--cds-bf); font-size: 11px; color: rgba(255,255,255,0.52); margin-top: 4px; }

/* =============================================
   TRUST STRIP
============================================= */
.cds-trust {
  border-top: 1px solid var(--cds-b); border-bottom: 1px solid var(--cds-b);
  padding: 16px 0; overflow: hidden; background: #fff;
}
.cds-trust-track {
  display: flex; width: max-content;
  animation: cds-scrollX 28s linear infinite;
}
.cds-trust-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 40px; white-space: nowrap;
  font-family: var(--cds-hf); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(13,13,13,0.35);
}
.cds-trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cds-c); flex-shrink: 0; }

/* =============================================
   SERVICES
============================================= */
.cds-services { padding: 112px 52px; background: var(--cds-bg); }
.cds-services-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.cds-svc-rows { display: flex; flex-direction: column; gap: 0; }
.cds-svc-row {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px 0; border-bottom: 1px solid var(--cds-b); cursor: pointer;
}
.cds-svc-row:first-child { border-top: 1px solid var(--cds-b); }
.cds-svc-row:hover .cds-svc-row-img { transform: scale(1.04); }
.cds-svc-row-thumb { width: 96px; height: 96px; border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.cds-svc-row-img { width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.cds-svc-row-content { flex: 1; min-width: 0; }
.cds-svc-row-title { font-family: var(--cds-hf); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--cds-d); margin-bottom: 7px; }
.cds-svc-row-desc  { font-family: var(--cds-bf); font-size: 13px; line-height: 1.7; color: rgba(13,13,13,0.5); margin-bottom: 12px; }
.cds-svc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cds-svc-tag {
  padding: 4px 10px; border-radius: 50px;
  border: 1px solid rgba(13,13,13,0.13);
  font-family: var(--cds-hf); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; color: rgba(13,13,13,0.5);
  transition: border-color 0.2s, color 0.2s;
}
.cds-svc-row:hover .cds-svc-tag { border-color: var(--cds-c); color: var(--cds-c); }

/* =============================================
   HOW IT WORKS
============================================= */
.cds-how { padding: 112px 52px; background: #fff; border-top: 1px solid var(--cds-b); }
.cds-how-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 28px; }
.cds-how-perks { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.cds-how-perk { display: flex; align-items: center; gap: 9px; font-family: var(--cds-hf); font-size: 13px; font-weight: 600; color: rgba(13,13,13,0.65); }
.cds-how-check { width: 20px; height: 20px; border-radius: 6px; background: var(--cds-c); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cds-how-check svg { width: 10px; height: 10px; }
.cds-how-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 52px; }
.cds-how-col {
  border: 1px solid var(--cds-b); border-radius: var(--cds-r); overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.cds-how-col.cds-vis { opacity: 1; transform: translateY(0); }
.cds-how-col:nth-child(2) { transition-delay: 0.1s; }
.cds-how-col:nth-child(3) { transition-delay: 0.2s; }
.cds-how-col:hover { border-color: rgba(13,13,13,0.2); }
.cds-hcw { height: 200px; position: relative; overflow: hidden; border-bottom: 1px solid var(--cds-b); background: var(--cds-bg); }
/* Kanban */
.cds-mk { padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.cds-mk-card { background: #fff; border: 1px solid var(--cds-b); border-radius: 8px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; }
.cds-mk-label { font-family: var(--cds-hf); font-size: 12px; font-weight: 700; color: var(--cds-d); letter-spacing: -0.01em; }
.cds-mk-date  { font-family: var(--cds-bf); font-size: 11px; color: rgba(13,13,13,0.38); }
.cds-mk-badge { padding: 3px 9px; border-radius: 50px; font-family: var(--cds-hf); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.cds-mk-b-todo { background: #fdf0f6; color: var(--cds-c); }
.cds-mk-b-prog { background: #f0f9f8; color: #1a7a74; }
.cds-mk-b-rev  { background: #f5f5f5; color: #555; }
/* Collage */
.cds-img-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 16px; height: 100%; }
.cds-ic { border-radius: 7px; overflow: hidden; }
.cds-ic:first-child { grid-row: span 2; }
/* Receive */
.cds-recv-widget { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; padding: 20px; }
.cds-recv-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--cds-c); display: flex; align-items: center; justify-content: center; }
.cds-recv-icon svg { width: 24px; height: 24px; }
.cds-recv-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cds-recv-tag { padding: 4px 10px; border-radius: 50px; background: var(--cds-bg); border: 1px solid var(--cds-b); font-family: var(--cds-hf); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: rgba(13,13,13,0.5); }
/* Col body */
.cds-hcb { padding: 22px; }
.cds-hcb-step  { font-family: var(--cds-hf); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(13,13,13,0.3); margin-bottom: 8px; }
.cds-hcb-title { font-family: var(--cds-hf); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--cds-d); margin-bottom: 8px; }
.cds-hcb-desc  { font-family: var(--cds-bf); font-size: 13px; line-height: 1.7; color: rgba(13,13,13,0.5); }

/* =============================================
   PORTFOLIO
============================================= */
.cds-portfolio { padding: 112px 52px; background: var(--cds-bg); }
.cds-port-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.cds-port-hdr .cds-sh2 { max-width: 480px; }
.cds-port-arrows { display: flex; gap: 10px; align-items: center; padding-top: 8px; }
.cds-port-arr { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cds-b); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: #fff; }
.cds-port-arr:hover { border-color: var(--cds-c); background: #fdf0f6; }
.cds-port-arr svg { width: 16px; height: 16px; color: var(--cds-d); }
.cds-masonry { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.cds-mc {
  border-radius: var(--cds-r); overflow: hidden; position: relative; cursor: pointer;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s, transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.cds-mc.cds-vis { opacity: 1; transform: translateY(0); }
.cds-mc:hover { transform: scale(1.025) translateY(-3px) !important; }
.cds-mc-bg  { position: absolute; inset: 0; }
.cds-mc-ov  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0.06) 48%, transparent 100%); }
.cds-mc-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; z-index: 2; }
.cds-mc-name  { font-family: var(--cds-hf); font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.cds-mc-treat { font-family: var(--cds-bf); font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.cds-mc:nth-child(2) { transition-delay: 0.05s; }
.cds-mc:nth-child(3) { transition-delay: 0.10s; }
.cds-mc:nth-child(4) { transition-delay: 0.12s; }
.cds-mc:nth-child(5) { transition-delay: 0.17s; }
.cds-mc:nth-child(6) { transition-delay: 0.22s; }
.cds-mc:nth-child(7) { transition-delay: 0.25s; }
.cds-mc:nth-child(8) { transition-delay: 0.30s; }
.cds-mc:nth-child(9) { transition-delay: 0.35s; }

/* =============================================
   BENEFITS
============================================= */
.cds-benefits { padding: 112px 52px; background: #fff; border-top: 1px solid var(--cds-b); }
.cds-benefits-hdr { text-align: center; margin-bottom: 64px; }
.cds-benefits-hdr .cds-sh2 { display: inline-block; text-align: left; }
.cds-ben-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.cds-bcard {
  padding: 28px; border: 1px solid var(--cds-b); border-radius: var(--cds-r);
  background: var(--cds-bg);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, background 0.25s;
}
.cds-bcard.cds-vis { opacity: 1; transform: translateY(0); }
.cds-bcard:nth-child(2) { transition-delay: 0.07s; }
.cds-bcard:nth-child(3) { transition-delay: 0.14s; }
.cds-bcard:nth-child(4) { transition-delay: 0.21s; }
.cds-bcard:nth-child(5) { transition-delay: 0.28s; }
.cds-bcard:nth-child(6) { transition-delay: 0.35s; }
.cds-bcard:hover { border-color: var(--cds-c); background: #fff; transform: translateY(-3px) !important; }
.cds-bcard-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 18px; }
.cds-bci-crimson { background: #fdf0f6; border: 1px solid rgba(166,36,97,0.15); }
.cds-bci-teal    { background: #f0f9f8; border: 1px solid rgba(122,191,184,0.2); }
.cds-bcard-title { font-family: var(--cds-hf); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--cds-d); margin-bottom: 8px; }
.cds-bcard-desc  { font-family: var(--cds-bf); font-size: 13px; line-height: 1.72; color: rgba(13,13,13,0.48); }

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 960px) {
  .cds-hero { grid-template-columns: 1fr; height: auto; max-height: none; }
  .cds-hero-left { padding: 80px 24px 48px; height: auto; }
  .cds-hero-right { height: 420px; padding: 0 24px 24px; }
  .cds-services, .cds-how, .cds-portfolio, .cds-benefits { padding: 80px 24px; }
  .cds-services-inner { grid-template-columns: 1fr; gap: 48px; }
  .cds-how-cols { grid-template-columns: 1fr; }
  .cds-masonry { grid-template-columns: repeat(2,1fr); }
  .cds-ben-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px) {
  .cds-hero-heading { font-size: clamp(40px,13vw,60px); }
  .cds-hero-right { height: 320px; }
  .cds-hcol-3 { display: none; }
  .cds-ben-grid { grid-template-columns: 1fr; }
  .cds-masonry { grid-template-columns: 1fr; }
  .cds-how-top { flex-direction: column; }
}