/* ============ Portfolio ============ */
.portfolio { background: #fdf6f5; padding: 3.5rem 0 3rem; }
.with-rules { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.with-rules::before, .with-rules::after { content: ""; height: 1px; width: 120px; background: var(--rose-light); }

.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 2rem; }
.filters button {
  font: 500 .74rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.1rem; cursor: pointer; white-space: nowrap; transition: .2s;
}
.filters button:hover { border-color: var(--rose); }
.filters button.on { background: var(--rose); border-color: var(--rose); color: #fff; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem; }
.video-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(150,80,90,.07); display: flex; flex-direction: column; }
.video-frame { position: relative; aspect-ratio: 9 / 16; background: #efe2e2; }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #efe2e2; display: block; }
.play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; border: 2.5px solid #fff; cursor: pointer;
  background: rgba(120, 70, 70, .35); color: #fff; backdrop-filter: blur(6px); transition: .25s;
}
.play .icon { width: 26px; height: 26px; margin-left: 4px; }
.play:hover, .play:focus-visible { background: var(--rose); transform: scale(1.06); }
.video-meta { padding: .9rem 1rem 1.1rem; text-align: center; flex: 1; }
.video-cat { margin: 0; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-dark); }
.video-meta h3 { font-size: 1.3rem; margin: .3rem 0 .25rem; }
.video-desc { margin: .35rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ============ Services ============ */
.services { background: var(--blush-2); padding: 2.6rem 0; border-block: 1px solid var(--line); }
.services-inner { text-align: center; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: flex-start; gap: .7rem; padding: .3rem 0; text-align: left; }
.checklist li .icon-check { margin-top: .22em; }
.services-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: .2rem 2.5rem; margin-top: 1.2rem; }

/* ============ About ============ */
.about { padding: 3.5rem 0; background: #fdf6f5; }
.about-grid { display: grid; grid-template-columns: 380px 1fr; gap: 3.5rem; align-items: center; }
.about-photos { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.about-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: 0; transition: opacity 1s; }
.about-photos img.show { opacity: 1; }
.dots { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; }
.dots button { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; background: transparent; cursor: pointer; padding: 0; }
.dots button.on { background: #fff; }
.about-text { max-width: 40rem; }
.about-text .section-title { text-align: left; margin-bottom: 1rem; }
.about-text p { font-size: 1.08rem; font-weight: 300; line-height: 1.75; margin: 0 0 1rem; }
.about-text strong { font-weight: 500; color: var(--plum); }
.about-text .btn { margin-top: .6rem; }