/* =========================================================
   Example post cards — 12 bespoke designs (v2)
   Sized in cqw so every card scales with its tile.
   ========================================================= */

.pc { position: relative; container-type: inline-size; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff; background: #111; font-family: Poppins, sans-serif; box-shadow: var(--shadow); line-height: 1.15; }
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc h4, .pc h5, .pc p { margin: 0; letter-spacing: 0; }
.pc img { max-width: none; }
.pc .pc-photo, .pc .pmve-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; aspect-ratio: auto; transform: none; }
.tile .pc, .wall-tile .pc { width: 100%; }
.tile .pc { transition: transform .25s ease; }
.tile:hover .pc { transform: translateY(-4px); }
.wall-tile { aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; }
.wall-tile .pc { box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }

/* Shared bits */
.pc-logo { position: absolute; top: 5cqw; left: 5cqw; z-index: 5; background: #fff; border-radius: 2.6cqw; padding: 2cqw 2.8cqw; display: inline-flex; align-items: center; box-shadow: 0 1cqw 4cqw rgba(0,0,0,.2); }
.pc-logo img { display: block; height: 7cqw; width: auto; max-width: 40cqw; object-fit: contain; }
.pc-logo--clear { background: rgba(255,255,255,.88); backdrop-filter: blur(6px); }
.pc-ico { position: absolute; right: 7cqw; bottom: 9cqw; font-size: 16cqw; opacity: .14; }

/* Carousel slides that advance on their own */
.pc-slides { position: absolute; inset: 0; display: flex; width: 300%; animation: pc-slide 10.5s cubic-bezier(.7,0,.2,1) infinite; }
.pc-slide { position: relative; width: 33.3334%; height: 100%; flex: 0 0 33.3334%; padding: 9cqw 8cqw; display: flex; flex-direction: column; justify-content: center; }
@keyframes pc-slide { 0%, 28% { transform: translateX(0); } 33%, 61% { transform: translateX(-33.3334%); } 66%, 94% { transform: translateX(-66.6667%); } 100% { transform: translateX(0); } }
.pc-dots { position: absolute; left: 0; right: 0; bottom: 4.5cqw; display: flex; justify-content: center; gap: 1.6cqw; z-index: 6; }
.pc-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 99px; background: currentColor; opacity: .35; animation: pc-dot 10.5s infinite; }
.pc-dots .d1 { animation-delay: -7s; } .pc-dots .d2 { animation-delay: -3.5s; }
@keyframes pc-dot { 0%, 30% { opacity: 1; width: 5cqw; } 33.4%, 100% { opacity: .35; width: 1.8cqw; } }
.pc-num { font-size: 4cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4cqw; }
.pc-slide h5 { font-size: 9.5cqw; font-weight: 700; line-height: 1.05; margin-bottom: 4cqw; }
.pc-slide p { font-size: 4.6cqw; line-height: 1.45; opacity: .85; max-width: 80%; }

/* Reels */
.pc-reel-ui { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.pc-reel-side { position: absolute; right: 4cqw; bottom: 16cqw; display: grid; gap: 5cqw; font-size: 5.6cqw; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pc-reel-audio { position: absolute; left: 5cqw; bottom: 6.5cqw; display: flex; align-items: center; gap: 2cqw; font-size: 3.2cqw; font-weight: 500; max-width: 70%; overflow: hidden; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pc-reel-audio i { animation: pc-spin 3s linear infinite; }
.pc-reel-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1.1cqw; background: rgba(255,255,255,.25); }
.pc-reel-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: pc-progress 8s linear infinite; }
@keyframes pc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pc-spin { to { transform: rotate(360deg); } }
@keyframes pc-kb { 0% { transform: scale(1.02); } 100% { transform: scale(1.16) translate(-2%, -2%); } }
.pc-kb { animation: pc-kb 8s ease-in-out infinite alternate; }

/* Stories */
.pc-bars { position: absolute; top: 3cqw; left: 3.5cqw; right: 3.5cqw; display: flex; gap: 1.2cqw; z-index: 9; }
.pc-bars i { flex: 1; height: .9cqw; border-radius: 9px; background: rgba(255,255,255,.35); overflow: hidden; }
.pc-bars b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); animation: pc-storybar 15s linear infinite; }
.pc-bars .b1 b { animation-name: pc-storybar-2; } .pc-bars .b2 b { animation-name: pc-storybar-3; }
@keyframes pc-storybar { 0% { transform: scaleX(0); } 33.3%, 100% { transform: scaleX(1); } }
@keyframes pc-storybar-2 { 0%, 33.3% { transform: scaleX(0); } 66.6%, 100% { transform: scaleX(1); } }
@keyframes pc-storybar-3 { 0%, 66.6% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.pc-story-head { position: absolute; top: 7cqw; left: 4cqw; right: 4cqw; display: flex; align-items: center; gap: 3cqw; z-index: 9; font-size: 3.4cqw; font-weight: 600; }
.pc-story-head .pc-logo { position: static; padding: 1.4cqw 2.2cqw; border-radius: 99px; }
.pc-story-head .pc-logo img { height: 5cqw; }
.pc-avatar { width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #db0072, #3156fe); color: #fff; font-size: 3.6cqw; box-shadow: 0 0 0 .6cqw #fff; }
.pc-story-head span { opacity: .85; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* ---------- 1. Heritage (dental) ---------- */
.pc--heritage { background: #f6efe4; color: #1f2a37; }
.pc--heritage .pc-frame { position: absolute; inset: 3.5cqw; border: .5cqw solid #c9a15a; border-radius: 3cqw; z-index: 3; pointer-events: none; }
.pc--heritage .pc-logo { top: 7cqw; left: 7cqw; padding: 0; overflow: hidden; width: 14cqw; height: 14cqw; border-radius: 50%; justify-content: center; box-shadow: 0 0 0 .5cqw #c9a15a; }
.pc--heritage .pc-logo img { height: 100%; width: 100%; max-width: none; object-fit: cover; transform: scale(1.35); }
.pc-est { position: absolute; top: 10cqw; left: 7cqw; font-size: 3.2cqw; letter-spacing: .22em; text-transform: uppercase; color: #a8803c; font-weight: 600; }
.pc--heritage .pc-serif { position: absolute; left: 7cqw; top: 25cqw; width: 50cqw; font-size: 9.6cqw; z-index: 4; }
.pc-serif { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 10.5cqw; line-height: 1.02; letter-spacing: -.02em; }
.pc-serif em { font-style: italic; font-weight: 500; color: #b5853a; }
.pc-arch { position: absolute; right: 7cqw; bottom: 7cqw; width: 44cqw; height: 62cqw; border-radius: 22cqw 22cqw 2cqw 2cqw; overflow: hidden; z-index: 2; box-shadow: 0 2cqw 6cqw rgba(31,42,55,.25); }
.pc-stamp { position: absolute; left: 35cqw; bottom: 17cqw; width: 26cqw; height: 26cqw; z-index: 4; display: grid; place-items: center; background: #1f2a37; border-radius: 50%; color: #f4d6a0; }
.pc-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: pc-spin 18s linear infinite; }
.pc-stamp text { fill: #f4d6a0; font-size: 8.4px; font-weight: 600; letter-spacing: 1.3px; font-family: Poppins, sans-serif; }
.pc-stamp span { font-size: 7cqw; }
.pc--heritage .pc-cta { position: absolute; left: 7cqw; bottom: 9cqw; z-index: 4; font-size: 3.8cqw; font-weight: 600; display: flex; gap: 2cqw; align-items: center; border-bottom: .4cqw solid #c9a15a; padding-bottom: 1cqw; }

/* ---------- 2. Legal carousel ---------- */
.pc--legal { background: radial-gradient(120% 90% at 100% 0%, #3b3594, transparent 60%), #1c1850; color: #fff; }
.pc--legal .pc-slide--cover .pc-logo { top: 7cqw; left: 8cqw; }
.pc-big5 { font-size: 64cqw; font-weight: 800; line-height: .8; color: transparent; -webkit-text-stroke: .8cqw #b9adff; margin: 10cqw 0 0 -2cqw; letter-spacing: -.05em; }
.pc--legal .pc-slide--cover h4 { font-size: 8.6cqw; font-weight: 700; line-height: 1.05; margin-top: -4cqw; }
.pc--legal .pc-slide--cover h4 span { display: block; color: #b9adff; }
.pc-swipe { margin-top: 5cqw; font-size: 3.6cqw; opacity: .8; display: flex; gap: 2cqw; align-items: center; }
.pc-swipe i { animation: pc-nudge 1.4s ease-in-out infinite; }
@keyframes pc-nudge { 50% { transform: translateX(1.6cqw); } }
.pc--legal .pc-num { color: #b9adff; font-size: 14cqw; letter-spacing: -.02em; -webkit-text-stroke: .4cqw #b9adff; color: transparent; }
.pc--legal .pc-dots { color: #fff; }

/* ---------- 3. Roof reel (before/after wipe) ---------- */
.pc--roof { background: #111; }
.pc-ba { position: absolute; inset: 0; }
.pc-ba-after, .pc-ba-before { position: absolute; inset: 0; }
.pc-ba-before { clip-path: inset(0 50% 0 0); animation: pc-wipe 5s ease-in-out infinite alternate; }
.pc-ba-before .pc-photo { filter: grayscale(1) contrast(.85) brightness(.75) sepia(.35); }
.pc-ba-after .pc-photo { filter: saturate(1.25) contrast(1.05); }
.pc-ba-line { position: absolute; top: 0; bottom: 0; left: 50%; width: .8cqw; background: #e8b923; box-shadow: 0 0 4cqw rgba(232,185,35,.8); animation: pc-wipe-line 5s ease-in-out infinite alternate; z-index: 2; }
@keyframes pc-wipe { from { clip-path: inset(0 85% 0 0); } to { clip-path: inset(0 15% 0 0); } }
@keyframes pc-wipe-line { from { left: 15%; } to { left: 85%; } }
.pc-ba-tag { position: absolute; top: 20cqw; z-index: 3; font-size: 3.2cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 1.2cqw 2.6cqw; border-radius: 99px; }
.pc-ba-tag--b { left: 5cqw; background: rgba(0,0,0,.6); }
.pc-ba-tag--a { right: 5cqw; background: #e8b923; color: #141414; }
.pc-hazard { position: absolute; left: -10%; right: -10%; bottom: 25cqw; height: 5cqw; background: repeating-linear-gradient(-45deg, #e8b923 0 4cqw, #141414 4cqw 8cqw); transform: rotate(-4deg); z-index: 3; animation: pc-hazard 2s linear infinite; background-size: 11.3cqw 100%; }
@keyframes pc-hazard { to { background-position: 11.3cqw 0; } }
.pc-caps { position: absolute; left: 5cqw; right: 16cqw; bottom: 38cqw; z-index: 4; display: flex; flex-wrap: wrap; gap: 1.4cqw 2.4cqw; }
.pc-caps span { font-family: Anton, Impact, sans-serif; font-size: 10cqw; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 .6cqw 0 #000, 0 0 3cqw rgba(0,0,0,.6); opacity: 0; animation: pc-pop 8s infinite; }
.pc-caps span:nth-child(2) { animation-delay: .4s; } .pc-caps span:nth-child(3) { animation-delay: 1.2s; } .pc-caps span:nth-child(4) { animation-delay: 1.6s; }
.pc-caps .hl { color: #e8b923; }
@keyframes pc-pop { 0% { opacity: 0; transform: scale(.6) translateY(2cqw); } 4% { opacity: 1; transform: scale(1.12); } 7%, 85% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }

/* ---------- 4. Guard (security) ---------- */
.pc--guard { background: #0b0b0b; }
.pc--guard .pc-duo { filter: grayscale(1) contrast(1.25) brightness(.8); }
.pc--guard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(227,16,27,.25), rgba(0,0,0,.2) 40%, rgba(0,0,0,.92) 78%); z-index: 1; mix-blend-mode: multiply; }
.pc-cctv { position: absolute; inset: 4cqw; z-index: 3; pointer-events: none; }
.pc-cctv i { position: absolute; width: 8cqw; height: 8cqw; border-color: rgba(255,255,255,.75); border-style: solid; border-width: 0; }
.pc-cctv i:nth-child(1) { top: 0; left: 0; border-top-width: .6cqw; border-left-width: .6cqw; }
.pc-cctv i:nth-child(2) { top: 0; right: 0; border-top-width: .6cqw; border-right-width: .6cqw; }
.pc-cctv i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: .6cqw; border-left-width: .6cqw; }
.pc-cctv i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: .6cqw; border-right-width: .6cqw; }
.pc-scan { position: absolute; left: 0; right: 0; height: 18cqw; background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent); animation: pc-scan 4s linear infinite; }
@keyframes pc-scan { from { top: -18cqw; } to { top: 100%; } }
.pc-rec { position: absolute; top: 7cqw; right: 8cqw; z-index: 4; font-family: ui-monospace, Menlo, monospace; font-size: 3.2cqw; letter-spacing: .1em; display: flex; align-items: center; gap: 1.6cqw; }
.pc-rec b { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #e3101b; box-shadow: 0 0 3cqw #e3101b; animation: pc-blink 1s steps(2) infinite; }
@keyframes pc-blink { 50% { opacity: .15; } }
.pc--guard .pc-logo { top: 7cqw; left: 8cqw; }
.pc--guard .pc-logo img { height: 5.6cqw; }
.pc-slash { position: absolute; left: -10cqw; bottom: 34cqw; width: 70cqw; height: 2cqw; background: #e3101b; transform: rotate(-8deg); z-index: 3; box-shadow: 0 0 5cqw rgba(227,16,27,.7); }
.pc-anton { font-family: Anton, Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .9; }
.pc--guard .pc-anton { position: absolute; left: 8cqw; bottom: 16cqw; z-index: 4; font-size: 15cqw; }
.pc--guard .pc-anton span { color: #e3101b; font-size: 22cqw; }
.pc--guard .pc-sub { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; z-index: 4; font-size: 3.8cqw; opacity: .85; }

/* ---------- 5. Fireworks reel ---------- */
.pc--fireworks { background: #07060a; }
.pc--fireworks .pc-photo { opacity: .75; }
.pc--fireworks::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,0) 40%, rgba(18,4,4,.9) 85%); z-index: 1; }
.pc-bursts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pc-bursts i { position: absolute; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; color: #ffd36b; box-shadow: 0 -12cqw 0 0 currentColor, 8.5cqw -8.5cqw 0 0 currentColor, 12cqw 0 0 0 currentColor, 8.5cqw 8.5cqw 0 0 currentColor, 0 12cqw 0 0 currentColor, -8.5cqw 8.5cqw 0 0 currentColor, -12cqw 0 0 0 currentColor, -8.5cqw -8.5cqw 0 0 currentColor; animation: pc-burst 2.6s ease-out infinite; opacity: 0; }
.pc-bursts .f1 { top: 22%; left: 72%; color: #ff4f6d; }
.pc-bursts .f2 { top: 14%; left: 30%; color: #ffd36b; animation-delay: .9s; }
.pc-bursts .f3 { top: 36%; left: 52%; color: #7ae0ff; animation-delay: 1.7s; }
@keyframes pc-burst { 0% { transform: scale(.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.pc--fireworks .pc-logo--round { padding: 1cqw; border-radius: 50%; width: 22cqw; height: 15cqw; justify-content: center; border-radius: 99px; }
.pc--fireworks .pc-logo img { height: 12cqw; }
.pc-date { position: absolute; left: 6cqw; bottom: 47cqw; z-index: 4; font-size: 3.6cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #ffd36b; }
.pc--fireworks .pc-anton { position: absolute; left: 6cqw; bottom: 18cqw; z-index: 4; font-size: 17cqw; }
.pc-glow { animation: pc-flicker 3s infinite; text-shadow: 0 0 2cqw rgba(255,90,60,.9), 0 0 8cqw rgba(255,60,40,.6); }
@keyframes pc-flicker { 0%, 100% { text-shadow: 0 0 2cqw rgba(255,90,60,.9), 0 0 8cqw rgba(255,60,40,.6); } 45% { text-shadow: 0 0 1cqw rgba(255,90,60,.5), 0 0 4cqw rgba(255,60,40,.3); } 50% { text-shadow: 0 0 3cqw rgba(255,200,90,1), 0 0 10cqw rgba(255,80,40,.8); } }
.pc-sticker { position: absolute; right: 16cqw; bottom: 46cqw; z-index: 5; background: #e1251b; color: #fff; font-weight: 800; font-size: 3.6cqw; text-transform: uppercase; text-align: center; line-height: 1.1; width: 20cqw; height: 20cqw; border-radius: 50%; display: grid; place-items: center; transform: rotate(12deg); box-shadow: 0 0 0 1cqw rgba(255,255,255,.9); animation: pc-wobble 2.4s ease-in-out infinite; }
@keyframes pc-wobble { 50% { transform: rotate(-6deg) scale(1.06); } }

/* ---------- 6. Driving carousel ---------- */
.pc--driving { background: #fff; color: #111; }
.pc-road { position: absolute; left: 0; right: 0; bottom: 0; height: 15cqw; background: #222; z-index: 0; overflow: hidden; }
.pc-road i { position: absolute; left: 0; top: 50%; width: 200%; height: 1.2cqw; margin-top: -.6cqw; background: repeating-linear-gradient(90deg, #fff 0 8cqw, transparent 8cqw 16cqw); animation: pc-lanes 1s linear infinite; }
@keyframes pc-lanes { to { transform: translateX(-16cqw); } }
.pc--driving .pc-slides { bottom: 15cqw; height: auto; }
.pc--driving .pc-slide { padding-bottom: 6cqw; }
.pc--driving .pc-slide--cover .pc-logo { box-shadow: none; padding: 0; top: 7cqw; left: 8cqw; }
.pc--driving .pc-slide--cover .pc-logo img { height: 7cqw; }
.pc-lplate { position: absolute; top: 6cqw; right: 8cqw; width: 18cqw; height: 18cqw; border: 1cqw solid #ef0c15; border-radius: 2cqw; background: #fff; color: #ef0c15; font-weight: 800; font-size: 14cqw; display: grid; place-items: center; transform: rotate(8deg); box-shadow: 0 2cqw 5cqw rgba(0,0,0,.18); animation: pc-wobble 3s ease-in-out infinite; }
.pc--driving .pc-slide--cover h4 { font-size: 10cqw; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin-top: 18cqw; }
.pc--driving .pc-slide--cover h4 span { display: block; color: #ef0c15; font-size: 14cqw; }
.pc--driving .pc-num { width: 13cqw; height: 13cqw; border-radius: 50%; background: #ef0c15; color: #fff; display: grid; place-items: center; font-size: 6cqw; letter-spacing: 0; }
.pc--driving .pc-ico { bottom: 4cqw; color: #ef0c15; opacity: .15; }
.pc--driving .pc-dots { bottom: 19cqw; color: #111; }

/* ---------- 7. Care story ---------- */
.pc--care { background: #003f7d; }
.pc--care::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,30,70,.45) 0%, transparent 25%, transparent 45%, rgba(0,47,100,.92) 80%); z-index: 1; }
.pc-hire { position: absolute; left: 6cqw; right: 6cqw; bottom: 40cqw; z-index: 4; font-size: 10.5cqw; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
.pc-hire mark { background: linear-gradient(transparent 55%, #2fa8ff 55%); background-size: 0% 100%; background-repeat: no-repeat; color: #fff; animation: pc-mark 5s ease-in-out infinite; }
@keyframes pc-mark { 0%, 10% { background-size: 0% 100%; } 30%, 100% { background-size: 100% 100%; } }
.pc-poll { position: absolute; left: 10cqw; right: 10cqw; bottom: 12cqw; z-index: 4; background: #fff; color: #10233f; border-radius: 4cqw; padding: 4cqw; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.3); transform: rotate(-2deg); }
.pc-poll p { font-size: 3.8cqw; font-weight: 700; text-align: center; margin-bottom: 3cqw; }
.pc-poll div { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.pc-poll span { text-align: center; font-size: 3.6cqw; font-weight: 700; padding: 2.4cqw 0; border-radius: 2.4cqw; background: #eaf3ff; color: #005db8; }
.pc-poll span:last-child { background: linear-gradient(90deg, #2fa8ff, #005db8); color: #fff; animation: pc-pulse 2s ease-in-out infinite; }
@keyframes pc-pulse { 50% { box-shadow: 0 0 0 1.4cqw rgba(47,168,255,.25); } }
.pc-swipeup { position: absolute; left: 0; right: 0; bottom: 3.5cqw; z-index: 4; text-align: center; font-size: 3.2cqw; font-weight: 600; display: grid; justify-items: center; gap: .6cqw; }
.pc-swipeup i { animation: pc-up 1.4s ease-in-out infinite; }
@keyframes pc-up { 50% { transform: translateY(-1.4cqw); } }

/* ---------- 8. Bridal editorial ---------- */
.pc--bridal { background: #2b2522; color: #fff; text-align: center; }
.pc-soft { filter: saturate(.85) brightness(.95); }
.pc-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,37,34,.55), rgba(43,37,34,0) 30%, rgba(43,37,34,0) 50%, rgba(43,37,34,.85) 88%); z-index: 1; }
.pc-hairline { position: absolute; inset: 4.5cqw; border: .35cqw solid rgba(255,248,236,.75); z-index: 2; }
.pc--bridal .pc-logo { left: 50%; transform: translateX(-50%); top: 8cqw; background: transparent; box-shadow: none; padding: 0; backdrop-filter: none; }
.pc--bridal .pc-logo img { height: 9cqw; filter: brightness(0) invert(1); }
.pc-caps-sm { position: absolute; left: 0; right: 0; z-index: 3; font-size: 3cqw; letter-spacing: .32em; text-transform: uppercase; font-weight: 500; opacity: .9; }
.pc--bridal .pc-caps-sm { bottom: 38cqw; }
.pc--bridal .pc-foot { bottom: 10cqw; }
.pc--bridal .pc-serif { position: absolute; left: 6cqw; right: 6cqw; bottom: 15cqw; z-index: 3; font-size: 12.5cqw; font-weight: 500; line-height: .98; }
.pc--bridal .pc-serif em { color: #f3dfc2; }
.pc-shimmer { background: linear-gradient(100deg, #fff 40%, #f6e2c4 50%, #fff 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pc-shimmer 4s ease-in-out infinite; }
.pc-shimmer em { -webkit-text-fill-color: #f3dfc2; }
@keyframes pc-shimmer { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }

/* ---------- 9. Carpet carousel ---------- */
.pc--carpet { background: #f3efe9; color: #1b1b1b; }
.pc--carpet .pc-slide { padding: 9cqw 8cqw; }
.pc--carpet .pc-slide--cover { justify-content: flex-end; padding-bottom: 12cqw; }
.pc-room { position: absolute; left: 0; right: 0; top: 0; height: 52%; overflow: hidden; border-bottom-left-radius: 30cqw; }
.pc--carpet .pc-slide--cover .pc-logo { top: 5cqw; left: auto; right: 5cqw; }
.pc--carpet .pc-slide--cover .pc-logo img { height: 8cqw; }
.pc--carpet h4 { font-size: 9cqw; font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
.pc--carpet h4 em { font-family: Fraunces, Georgia, serif; font-style: italic; color: #3f8a85; font-weight: 500; }
.pc-swatches { display: flex; gap: 2cqw; margin-top: 4cqw; }
.pc-swatches i { width: 9cqw; height: 9cqw; border-radius: 50%; box-shadow: inset 0 0 0 .4cqw rgba(0,0,0,.08); animation: pc-bob 3s ease-in-out infinite; }
.pc-swatches i:nth-child(1) { background: #c9b8a0; } .pc-swatches i:nth-child(2) { background: #70b7b3; animation-delay: .2s; } .pc-swatches i:nth-child(3) { background: #8b8f97; animation-delay: .4s; } .pc-swatches i:nth-child(4) { background: #2f3a4a; animation-delay: .6s; }
@keyframes pc-bob { 50% { transform: translateY(-1.2cqw); } }
.pc--carpet .pc-num { color: #3f8a85; }
.pc-swatch { position: absolute; right: -10cqw; bottom: -10cqw; width: 55cqw; height: 55cqw; border-radius: 50%; }
.pc-swatch--loop { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25) 0 1.2cqw, transparent 1.4cqw) 0 0 / 4cqw 4cqw, #8b8f97; }
.pc-swatch--twist { background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 .8cqw, transparent .8cqw 2.4cqw), #c9b8a0; }
.pc--carpet .pc-dots { color: #1b1b1b; }

/* ---------- 10. Gift reel ---------- */
.pc--gift { background: #f7e4dc; color: #3a2a2e; }
.pc-blush { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 45%, #fff6f1, transparent 70%), linear-gradient(180deg, #f9e8e0, #ecc9bb); }
.pc--gift .pc-logo { left: 50%; transform: translateX(-50%); }
.pc--gift .pc-logo img { height: 9cqw; }
.pc-script { position: absolute; top: 22cqw; left: 0; right: 0; text-align: center; font-family: Caveat, cursive; font-size: 9cqw; color: #b0676b; z-index: 3; transform: rotate(-4deg); }
.pc-float { position: absolute; left: 12cqw; right: 12cqw; top: 34cqw; height: 52cqw; z-index: 2; animation: pc-float 4s ease-in-out infinite; filter: drop-shadow(0 4cqw 4cqw rgba(120,60,60,.25)); }
.pc-float .pc-photo { border-radius: 6cqw; object-fit: cover; }
@keyframes pc-float { 50% { transform: translateY(-2.5cqw) rotate(-1.5deg); } }
.pc-sparkles i { position: absolute; z-index: 4; width: 4cqw; height: 4cqw; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pc-twinkle 2.2s ease-in-out infinite; }
.pc-sparkles i:nth-child(1) { top: 36cqw; left: 10cqw; } .pc-sparkles i:nth-child(2) { top: 40cqw; right: 12cqw; animation-delay: .5s; width: 6cqw; height: 6cqw; } .pc-sparkles i:nth-child(3) { top: 80cqw; left: 16cqw; animation-delay: 1s; } .pc-sparkles i:nth-child(4) { top: 30cqw; left: 46cqw; animation-delay: 1.4s; width: 3cqw; height: 3cqw; } .pc-sparkles i:nth-child(5) { top: 74cqw; right: 20cqw; animation-delay: .8s; }
@keyframes pc-twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.pc--gift h4 { position: absolute; left: 6cqw; right: 16cqw; bottom: 14cqw; z-index: 4; font-size: 8.4cqw; font-weight: 700; line-height: 1.04; color: #3a2a2e; }
.pc--gift h4 span { display: block; font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; color: #b0676b; }
.pc--gift .pc-reel-side, .pc--gift .pc-reel-audio { color: #3a2a2e; text-shadow: none; }
.pc--gift .pc-reel-bar i { background: #b0676b; }

/* ---------- 11. Baby story ---------- */
.pc--baby { background: #eef4fb; color: #2d3f66; }
.pc-pastel { position: absolute; inset: 0; background: radial-gradient(40cqw 40cqw at 0% 0%, #f7d7f2, transparent 70%), radial-gradient(50cqw 50cqw at 100% 60%, #cfe3f7, transparent 70%), #f6f8fc; }
.pc--baby .pc-bars i { background: rgba(45,63,102,.18); } .pc--baby .pc-bars b { background: #2d3f66; }
.pc--baby .pc-story-head span { color: #2d3f66; text-shadow: none; }
.pc--baby .pc-story-head .pc-logo { box-shadow: 0 1cqw 3cqw rgba(45,63,102,.15); }
.pc-polaroid { position: absolute; left: 14cqw; top: 20cqw; width: 56cqw; height: 56cqw; background: #fff; padding: 3cqw 3cqw 10cqw; transform: rotate(-5deg); box-shadow: 0 3cqw 8cqw rgba(45,63,102,.2); z-index: 2; }
.pc-polaroid .pc-photo { position: relative; height: 100%; }
.pc-tag { position: absolute; right: 9cqw; top: 46cqw; z-index: 3; width: 26cqw; height: 15cqw; background: #e7a6e7; border-radius: 2cqw 2cqw 2cqw 2cqw; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); display: grid; place-items: center; transform-origin: 0 50%; animation: pc-swing 3s ease-in-out infinite; color: #fff; font-size: 3cqw; text-align: center; line-height: 1.15; }
.pc-tag b { font-size: 3.8cqw; }
@keyframes pc-swing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-6deg); } }
.pc--baby h4 { position: absolute; left: 7cqw; right: 7cqw; bottom: 17cqw; z-index: 3; font-size: 8.4cqw; font-weight: 800; line-height: 1.05; text-align: center; }
.pc--baby h4 em { font-family: Caveat, cursive; font-style: normal; font-size: 12cqw; color: #c86bc8; font-weight: 700; margin-right: .12em; }
.pc-link { position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); z-index: 3; background: #fff; color: #2d6fd6; font-size: 3.6cqw; font-weight: 700; padding: 2.2cqw 4.4cqw; border-radius: 99px; white-space: nowrap; box-shadow: 0 1cqw 4cqw rgba(45,63,102,.15); display: flex; gap: 1.6cqw; align-items: center; }

/* ---------- 12. Skirting blueprint ---------- */
.pc--skirting { background: #33492f; color: #f2f7ee; }
.pc-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 6cqw 6cqw; }
.pc--skirting h4 { position: absolute; left: 7cqw; top: 22cqw; z-index: 2; font-size: 11cqw; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pc--skirting h4 span { color: #b5dfa6; font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; }
.pc-profiles { position: absolute; left: 6cqw; right: 6cqw; bottom: 17cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; z-index: 2; }
.pc-profiles figure { margin: 0; text-align: center; }
.pc-profiles svg { width: 100%; height: 30cqw; overflow: visible; }
.pc-profiles path { fill: rgba(181,223,166,.12); stroke: #b5dfa6; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: pc-draw 6s ease-in-out infinite; }
.pc-profiles figure:nth-child(2) path { animation-delay: .4s; } .pc-profiles figure:nth-child(3) path { animation-delay: .8s; } .pc-profiles figure:nth-child(4) path { animation-delay: 1.2s; }
@keyframes pc-draw { 0% { stroke-dashoffset: 220; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }
.pc-profiles figcaption { font-size: 3cqw; font-weight: 600; margin-top: 2cqw; letter-spacing: .04em; opacity: .9; }
.pc--skirting .pc-cta { position: absolute; left: 7cqw; bottom: 7cqw; z-index: 2; font-size: 3.8cqw; font-weight: 700; color: #33492f; background: #b5dfa6; padding: 2cqw 4cqw; border-radius: 99px; display: flex; gap: 2cqw; align-items: center; }

/* Captions under tiles */
.tile figcaption { align-items: center; }
.tiles { align-items: start; }

/* Still for visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	.pc *, .pc *::before, .pc *::after { animation: none !important; }
	.pc-ba-before { clip-path: inset(0 50% 0 0); }
	.pc-bars b { transform: scaleX(1); }
	.pc-caps span { opacity: 1; }
	.pc-profiles path { stroke-dashoffset: 0; }
}

/* Captions under the example tiles */
.tile-client { display: grid; line-height: 1.3; font-size: .82rem; }
.tile-client strong { color: var(--ink); font-size: .9rem; font-weight: 600; }
.tiles-note { margin: 28px 0 0; font-size: .85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }