/* Product pages: each page sets --pa (accent), --pb (second accent), --pd (dark), --pl (light), --pi (text on accent)
   from its hero theme, so the same sections take on a different identity per product. */

/* Shared elements recoloured to the page theme */
.sv-title { letter-spacing: -.02em; }
.sv-intro { background: var(--pl); }
.sv-btn { background: var(--pa); color: var(--pi); }
.sv-contact-big, .sv-faq summary::marker { color: var(--pa); }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 .78rem/1 var(--sv-font); letter-spacing: .14em; text-transform: uppercase; color: var(--pa); }
.pp-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.pp-btn { padding: 14px 30px; font-size: .95rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--pa) 35%, transparent); }
.pp-btn-ghost { display: inline-flex; gap: 8px; align-items: center; font: 600 .95rem var(--sv-font); color: inherit; text-decoration: none; padding: 12px 4px; border-bottom: 2px solid var(--pa); }
.pp-btn-ghost i { font-style: normal; transition: transform .2s; }
.pp-btn-ghost:hover i { transform: translate(3px, -2px); }
.pp-checks { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.pp-checks li { position: relative; padding-left: 30px; line-height: 1.5; }
.pp-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--pa) 16%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Scroll reveal (progressive: browsers without view timelines just show content) */
@supports (animation-timeline: view()) {
  .pp-tile, .pp-case, .pp-opts li, .pp-steps li, .pp-plan { animation: ppRise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@keyframes ppRise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Hero ---------- */
.pp-hero { position: relative; overflow: hidden; padding: 70px 0 90px; background: var(--pl); }
.pp-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.pp-hero h1 { font: 800 clamp(2.2rem, 4.4vw, 3.7rem)/1.08 var(--sv-font); letter-spacing: -.03em; margin: 0 0 18px; color: var(--pd); }
.pp-lead { font-size: 1.1rem; line-height: 1.7; max-width: 560px; margin: 0; opacity: .85; }
.pp-stats { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 34px; }
.pp-stats strong { display: block; font: 800 1.9rem/1 var(--sv-font); color: var(--pd); }
.pp-stats span { font-size: .85rem; opacity: .7; }

/* Dashboard layout (dark tech) */
.lay-dashboard { background: radial-gradient(1000px 500px at 85% 10%, color-mix(in srgb, var(--pa) 45%, transparent), transparent 60%), radial-gradient(700px 400px at 0% 100%, color-mix(in srgb, var(--pb) 25%, transparent), transparent 60%), var(--pd); color: #e7e9f5; }
.lay-dashboard h1, .lay-dashboard .pp-stats strong { color: #fff; }
.lay-dashboard h1 { background: linear-gradient(90deg, #fff 40%, var(--pb)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lay-dashboard .pp-eyebrow { color: var(--pb); }
.lay-dashboard .pp-stats li { border-left: 2px solid color-mix(in srgb, var(--pa) 70%, transparent); padding-left: 14px; }
.pp-dash { position: relative; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); box-shadow: 0 40px 80px rgba(0,0,0,.45); transform: perspective(1200px) rotateY(-10deg) rotateX(4deg); animation: ppHover 7s ease-in-out infinite; }
@keyframes ppHover { 50% { transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(-8px); } }
.pp-dash-top { display: flex; gap: 6px; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pp-dash-top i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.pp-dash-top span { margin-left: 10px; font-size: .8rem; opacity: .7; }
.pp-dash-body { padding: 18px; display: grid; gap: 16px; }
.pp-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pp-dash-kpis div { background: rgba(255,255,255,.07); border-radius: 12px; padding: 12px; }
.pp-dash-kpis small { display: block; font-size: .7rem; opacity: .65; }
.pp-dash-kpis b { font-size: 1.25rem; color: #fff; }
.pp-dash-kpis b.warn { color: #fbbf24; }
.pp-dash-chart { height: 120px; display: flex; align-items: flex-end; gap: 10px; padding: 10px; background: rgba(255,255,255,.04); border-radius: 12px; }
.pp-dash-chart span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, var(--pa), var(--pb)); transform-origin: bottom; animation: ppBar 1.6s cubic-bezier(.2,.8,.2,1) both; }
.pp-dash-chart span:nth-child(2n) { animation-delay: .15s; } .pp-dash-chart span:nth-child(3n) { animation-delay: .3s; }
@keyframes ppBar { from { transform: scaleY(0); } }
.pp-dash-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .8rem; }
.pp-dash-rows li { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; }
.pp-dash-rows i { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.pp-dash-rows i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--pb); animation: ppGrow 2s ease-out both; }
@keyframes ppGrow { from { width: 0; } }
.pp-dash-toast { position: absolute; right: -18px; bottom: -22px; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; background: #fff; color: #111; font: 600 .82rem var(--sv-font); box-shadow: 0 16px 40px rgba(0,0,0,.35); animation: svFloat 4s ease-in-out infinite; }
.pp-dash-toast b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ef4444; color: #fff; }

/* Phone layout (warm / fresh) */
.lay-phone { background: radial-gradient(600px 600px at 80% 40%, color-mix(in srgb, var(--pb) 40%, transparent), transparent 65%), var(--pl); }
.lay-phone h1 { color: var(--pd); }
.lay-phone h1::after { content: ""; display: block; width: 90px; height: 8px; margin-top: 18px; border-radius: 8px; background: var(--pa); }
.pp-phone-wrap { position: relative; display: grid; place-items: center; min-height: 520px; }
.pp-phone-wrap::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--pa); opacity: .14; animation: svPulse 5s ease-in-out infinite; }
.pp-phone { position: relative; width: 250px; aspect-ratio: 9 / 18.5; border-radius: 38px; padding: 10px; background: #111; box-shadow: 0 30px 60px rgba(0,0,0,.25), inset 0 0 0 2px #333; }
.pp-phone::before { content: ""; position: absolute; top: 16px; left: 50%; width: 70px; height: 18px; translate: -50% 0; border-radius: 12px; background: #111; z-index: 2; }
.pp-phone-screen { height: 100%; border-radius: 30px; background: #fff; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 44px 14px 14px; color: #222; }
.pp-ph-head { font: 800 1.05rem var(--sv-font); color: var(--pd); }
.pp-ph-banner { border-radius: 16px; padding: 14px; color: var(--pi); background: linear-gradient(135deg, var(--pa), color-mix(in srgb, var(--pa) 60%, var(--pb))); }
.pp-ph-banner b { display: block; font-size: .95rem; }
.pp-ph-banner span { font-size: .72rem; opacity: .9; }
.pp-ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-ph-grid span { min-height: 58px; border-radius: 12px; padding: 8px; display: flex; align-items: flex-end; font: 700 .72rem var(--sv-font); background: color-mix(in srgb, var(--pa) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pa) 18%, #fff); }
.pp-ph-track { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 600; padding: 10px; border-radius: 12px; background: #f4f4f5; }
.pp-ph-track i { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 #22c55e88; animation: ppPing 1.6s infinite; }
@keyframes ppPing { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pp-ph-row { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 10px; background: #f6f6f7; font-size: .7rem; font-weight: 600; }
.pp-ph-row i { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--pa); opacity: .85; }
.pp-ph-cta { margin-top: auto; height: 38px; border-radius: 12px; background: var(--pa); }
.pp-float { position: absolute; padding: 12px 18px; border-radius: 999px; background: #fff; font: 700 .85rem var(--sv-font); color: var(--pd); box-shadow: 0 14px 30px rgba(0,0,0,.12); animation: svFloat 5s ease-in-out infinite; }
.pp-float::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--pa); }
.pp-float.f0 { top: 70px; left: 0; } .pp-float.f1 { top: 220px; right: -10px; animation-delay: -1.6s; } .pp-float.f2 { bottom: 70px; left: 20px; animation-delay: -3.2s; }

/* Map layout (taxi) */
.lay-map { background: var(--pd); color: #f5f5f5; padding: 90px 0 110px; }
.lay-map h1 { color: #fff; }
.lay-map h1 span, .lay-map .pp-stats strong { color: var(--pa); }
.lay-map .pp-btn { color: var(--pi); }
.pp-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.pp-route { animation: svDash 1.2s linear infinite; }
.pp-ride-card { justify-self: end; width: min(360px, 100%); padding: 22px; border-radius: 22px; background: #fff; color: #111; box-shadow: 0 30px 60px rgba(0,0,0,.4); animation: svFloat 6s ease-in-out infinite; }
.pp-ride-card p { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #f4f4f5; font-weight: 600; }
.pp-ride-card .dot { width: 12px; height: 12px; border-radius: 50%; }
.pp-ride-card .dot.a { background: #22c55e; } .pp-ride-card .dot.b { background: #ef4444; }
.pp-ride-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.pp-ride-types span { padding: 12px 6px; border-radius: 12px; text-align: center; font: 700 .8rem var(--sv-font); border: 2px solid #eee; }
.pp-ride-types span.on { border-color: var(--pa); background: color-mix(in srgb, var(--pa) 18%, #fff); }
.pp-ride-card b { display: block; padding: 14px; border-radius: 12px; text-align: center; background: var(--pa); color: var(--pi); }

/* Editorial layout (ecommerce) */
.lay-editorial { background: var(--pl); padding-bottom: 0; }
.lay-editorial .pp-hero-grid { grid-template-columns: 1fr; text-align: left; }
.lay-editorial h1 { font-size: clamp(2.6rem, 7vw, 6rem); line-height: .98; max-width: 1050px; font-weight: 800; }
.lay-editorial h1::first-line { color: var(--pd); }
.lay-editorial .pp-lead { max-width: 640px; font-size: 1.15rem; }
.lay-editorial .pp-stats { gap: 0; border-top: 1px solid rgba(0,0,0,.12); margin-top: 44px; }
.lay-editorial .pp-stats li { flex: 1; min-width: 160px; padding: 20px 20px 20px 0; border-right: 1px solid rgba(0,0,0,.12); }
.lay-editorial .pp-stats li:last-child { border-right: 0; }
.lay-editorial .pp-stats strong { color: var(--pb); font-size: 2.4rem; }
.lay-editorial .pp-eyebrow { color: var(--pb); }
.pp-marquee { margin-top: 60px; overflow: hidden; background: var(--pd); color: #fff; padding: 22px 0; }
.pp-marquee > div { display: flex; gap: 28px; width: max-content; animation: sv-scroll 30s linear infinite; font: 700 clamp(1.2rem, 2.4vw, 2rem) var(--sv-font); text-transform: uppercase; letter-spacing: .02em; }
.pp-marquee i { color: var(--pb); font-style: normal; }

/* Centred layout (devotional) */
.lay-centered { text-align: center; background: radial-gradient(900px 500px at 50% 0%, color-mix(in srgb, var(--pb) 22%, transparent), transparent 70%), var(--pl); padding-bottom: 40px; }
.lay-centered .pp-hero-grid { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
.lay-centered h1 { max-width: 860px; margin-inline: auto; color: var(--pd); font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.01em; }
.lay-centered .pp-lead { margin-inline: auto; max-width: 680px; }
.lay-centered .pp-actions, .lay-centered .pp-stats { justify-content: center; }
.lay-centered .pp-eyebrow::after { content: ""; width: 22px; height: 2px; background: currentColor; }
.lay-centered .pp-stats li { padding: 14px 24px; border-radius: 999px; background: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--pa) 15%, transparent); }
.lay-centered .pp-stats strong { display: inline; font-size: 1.3rem; margin-right: 6px; color: var(--pa); }
.pp-art { width: min(560px, 100%); margin-top: 10px; }

/* ---------- Bento ---------- */
.pp-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 18px; margin-top: 30px; }
.pp-tile { position: relative; overflow: hidden; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid #ececf3; display: flex; flex-direction: column; gap: 8px; transition: transform .25s, box-shadow .25s; }
.pp-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(20,20,60,.12); }
.pp-tile h3 { margin: 6px 0 0; font: 700 1.15rem/1.3 var(--sv-font); }
.pp-tile p { margin: 0; opacity: .75; line-height: 1.6; }
.pp-tile.size-wide { grid-column: span 2; } .pp-tile.size-tall { grid-row: span 2; } .pp-tile.size-big { grid-column: span 2; grid-row: span 2; }
.pp-tile.size-big { background: linear-gradient(150deg, var(--pa), color-mix(in srgb, var(--pa) 55%, var(--pb))); color: #fff; border: 0; justify-content: flex-end; }
.pp-tile.size-big p { opacity: .9; } .pp-tile.size-big h3 { font-size: 1.6rem; }
.pp-tile-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--pa) 12%, #fff); }
.pp-tile-ic img { width: 28px; height: 28px; }
.pp-fig { font: 800 clamp(2.6rem, 5vw, 4.4rem)/1 var(--sv-font); letter-spacing: -.03em; color: var(--pa); }
.pp-tile.size-big .pp-fig { color: #fff; }
.pp-tile.size-big .pp-tile-ic { background: rgba(255,255,255,.18); }
.pp-tile.size-big .pp-tile-ic img { filter: brightness(0) invert(1); }
.pp-bento-sec.style-dark { background: var(--pd); color: #e7e9f5; }
.pp-bento-sec.style-dark .sv-title { color: #fff; }
.pp-bento-sec.style-dark .sv-intro { background: rgba(255,255,255,.07); color: #d6d9ee; }
.pp-bento-sec.style-dark .pp-tile:not(.size-big) { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.pp-bento-sec.style-dark .pp-tile:not(.size-big) .pp-tile-ic { background: rgba(255,255,255,.08); }
.pp-bento-sec.style-dark .pp-tile:not(.size-big) .pp-tile-ic img { filter: brightness(0) invert(1); opacity: .9; }
.pp-bento-sec.style-dark .pp-tile:hover { box-shadow: 0 24px 50px rgba(0,0,0,.4); border-color: color-mix(in srgb, var(--pb) 50%, transparent); }

/* ---------- Role tabs ---------- */
.pp-roles-box { margin-top: 30px; }
.pp-roles-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; margin: 0 auto 36px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--pl); }
.pp-roles-tabs button { border: 0; background: none; padding: 12px 26px; border-radius: 999px; font: 700 .92rem var(--sv-font); cursor: pointer; color: inherit; transition: background .2s, color .2s; }
.pp-roles-tabs button[aria-selected="true"] { background: var(--pa); color: var(--pi); box-shadow: 0 8px 18px color-mix(in srgb, var(--pa) 35%, transparent); }
.pp-roles-panel { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: center; max-width: 980px; margin: 0 auto; animation: ppFade .4s ease; }
@keyframes ppFade { from { opacity: 0; translate: 0 12px; } }
.pp-phone.sm { width: 240px; margin: 0 auto; }
.pp-roles-copy h3 { font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.2 var(--sv-font); margin: 0 0 12px; }
.pp-roles-copy > p { opacity: .8; line-height: 1.7; }
.pp-roles-copy .pp-checks { grid-template-columns: 1fr 1fr; }

/* ---------- Case studies ---------- */
.pp-case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; margin-top: 70px; }
.pp-case.flip .pp-case-mock { order: 2; }
.pp-case-mock { position: relative; padding: 40px; border-radius: 28px; background: color-mix(in srgb, var(--mc) 14%, #fff); display: grid; place-items: center; }
.pp-case-mock::after { content: ""; position: absolute; width: 180px; height: 180px; right: 24px; top: 24px; border-radius: 50%; background: var(--mc); opacity: .18; filter: blur(4px); }
.pp-browser { position: relative; z-index: 1; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.15); transition: transform .4s; }
.pp-case:hover .pp-browser { transform: translateY(-8px) rotate(-1deg); }
.pp-br-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f1f3; }
.pp-br-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d8; }
.pp-br-bar span { margin-left: 10px; flex: 1; padding: 4px 12px; border-radius: 8px; background: #fff; font-size: .72rem; color: #666; }
.pp-br-body { padding: 18px; display: grid; gap: 14px; }
.pp-br-hero { position: relative; min-height: 150px; border-radius: 12px; padding: 20px; color: #fff; background: linear-gradient(120deg, var(--mc), color-mix(in srgb, var(--mc) 50%, #000)); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.pp-br-hero b { font: 800 1.5rem var(--sv-font); }
.pp-br-hero span { font-size: .8rem; opacity: .85; }
.pp-br-hero em { position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; border: 18px solid rgba(255,255,255,.18); }
.pp-br-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pp-br-cards i { aspect-ratio: 3 / 4; border-radius: 10px; background: color-mix(in srgb, var(--mc) 16%, #f4f4f5); }
.pp-case-mock .pp-phone { z-index: 1; width: 220px; }
.pp-case-mock .pp-ph-banner { background: var(--mc); }
.pp-case-mock .pp-ph-grid span { background: color-mix(in srgb, var(--mc) 12%, #fff); border-color: transparent; }
.pp-case-mock .pp-ph-cta { background: var(--mc); }
.pp-case-copy { position: relative; }
.pp-case-no { position: absolute; top: -40px; right: 0; font: 800 6rem/1 var(--sv-font); color: color-mix(in srgb, var(--pa) 10%, transparent); pointer-events: none; }
.pp-case-copy h3 { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--sv-font); margin: 0 0 14px; }
.pp-case-copy > p { line-height: 1.7; opacity: .8; }
.pp-metrics { list-style: none; display: flex; gap: 28px; padding: 18px 0; margin: 10px 0 18px; border-block: 1px solid rgba(0,0,0,.1); }
.pp-metrics strong { display: block; font: 800 1.7rem/1 var(--sv-font); color: var(--pa); }
.theme-ride ~ * .pp-metrics strong, .pp-metrics strong { color: var(--pa); }
.pp-metrics span { font-size: .8rem; opacity: .7; }

/* ---------- Options strip ---------- */
.pp-opts { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pp-opts li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; border-radius: 20px; background: #fff; border: 2px solid #efefef; transition: transform .2s, border-color .2s, background .2s; }
.pp-opts li:hover { transform: translateY(-6px); border-color: var(--pa); background: color-mix(in srgb, var(--pa) 7%, #fff); }
.pp-opts img { width: 40px; height: 40px; margin-bottom: 6px; }
.pp-opts b { font: 800 1.05rem var(--sv-font); }
.pp-opts span { font-size: .85rem; opacity: .75; line-height: 1.5; }
.pp-opts em { position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 999px; font: 700 .68rem var(--sv-font); font-style: normal; background: var(--pa); color: var(--pi); }
.pp-opts.style-tickets li { border: 0; border-radius: 16px; background: var(--pl); padding-left: 28px; }
.pp-opts.style-tickets li::before, .pp-opts.style-tickets li::after { content: ""; position: absolute; left: -10px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; border-radius: 50%; background: #fff; }
.pp-opts.style-tickets li::after { left: auto; right: -10px; }
.pp-opts.style-tickets li:hover { background: color-mix(in srgb, var(--pa) 12%, var(--pl)); }
.pp-opts.style-chips { display: flex; flex-wrap: wrap; justify-content: center; }
.pp-opts.style-chips li { flex-direction: row; align-items: center; padding: 12px 22px; border-radius: 999px; }
.pp-opts.style-chips img { width: 22px; height: 22px; margin: 0; }
.pp-opts.style-chips span { display: none; }

/* ---------- Steps row ---------- */
.pp-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 24px; position: relative; }
.pp-steps::before { content: ""; position: absolute; top: 28px; left: 5%; right: 5%; height: 2px; background: repeating-linear-gradient(90deg, var(--pa) 0 10px, transparent 10px 18px); opacity: .5; }
.pp-steps li { position: relative; text-align: center; }
.pp-steps span { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 18px; background: var(--pa); color: var(--pi); font: 800 1rem var(--sv-font); box-shadow: 0 0 0 8px #fff, 0 12px 24px color-mix(in srgb, var(--pa) 35%, transparent); transform: rotate(-6deg); transition: transform .3s; }
.pp-steps li:hover span { transform: rotate(0) scale(1.08); }
.pp-steps h3 { font: 700 1.05rem var(--sv-font); margin: 0 0 6px; }
.pp-steps p { margin: 0; font-size: .9rem; opacity: .75; line-height: 1.55; }

/* ---------- Pricing ---------- */
.pp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 30px; align-items: stretch; }
.pp-plan { position: relative; display: flex; flex-direction: column; padding: 30px 24px; border-radius: 24px; background: #fff; border: 1px solid #e6e6ef; }
.pp-plan h3 { font: 800 1.2rem var(--sv-font); margin: 0 0 4px; }
.pp-plan > p { margin: 0; font-size: .88rem; opacity: .7; min-height: 2.6em; }
.pp-price { margin: 18px 0 6px; }
.pp-price strong { font: 800 2.4rem/1 var(--sv-font); letter-spacing: -.02em; }
.pp-price span { font-size: .85rem; opacity: .65; }
.pp-plan .pp-checks { font-size: .9rem; margin-bottom: 22px; }
.pp-plan > a { margin-top: auto; text-align: center; justify-content: center; }
.pp-plan.hot { background: var(--pd); color: #e8e9f6; border: 0; transform: translateY(-12px); box-shadow: 0 30px 60px color-mix(in srgb, var(--pa) 35%, transparent); }
.pp-plan.hot .pp-checks li::before { background-color: color-mix(in srgb, var(--pb) 40%, #fff); }
.pp-plan em { position: absolute; top: -13px; left: 24px; padding: 5px 14px; border-radius: 999px; font: 700 .72rem var(--sv-font); font-style: normal; background: linear-gradient(90deg, var(--pa), var(--pb)); color: #fff; }
.pp-note { text-align: center; margin-top: 26px; font-size: .88rem; opacity: .7; }

/* ---------- CTA band ---------- */
.pp-cta-sec { padding: 40px 0 70px; }
.pp-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 54px 56px; border-radius: 30px; color: var(--pi); background: linear-gradient(120deg, var(--pa), color-mix(in srgb, var(--pa) 55%, var(--pb))); }
.pp-cta::before { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 40px solid rgba(255,255,255,.14); animation: svSpin 30s linear infinite; }
.pp-cta h2 { position: relative; margin: 0 0 8px; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--sv-font); color: inherit; max-width: 640px; }
.pp-cta p { position: relative; margin: 0; opacity: .9; max-width: 560px; }
.pp-cta .pp-actions { position: relative; margin: 0; }
.pp-btn-inv { background: var(--pi); color: var(--pa); padding: 14px 30px; }
.theme-ride ~ .pp-cta-sec .pp-btn-inv { color: var(--pa); }
.pp-btn-line { padding: 12px 26px; border-radius: 999px; border: 2px solid currentColor; color: inherit; text-decoration: none; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pp-hero-grid, .pp-case, .pp-roles-panel { grid-template-columns: 1fr; gap: 40px; }
  .pp-case.flip .pp-case-mock { order: 0; }
  .pp-bento { grid-template-columns: 1fr 1fr; }
  .pp-steps { grid-template-columns: 1fr 1fr; }
  .pp-steps::before { display: none; }
  .pp-dash { transform: none; animation: none; }
  .pp-ride-card { justify-self: start; }
}
@media (max-width: 600px) {
  .pp-hero { padding: 44px 0 60px; }
  .pp-bento { grid-template-columns: 1fr; }
  .pp-tile.size-wide, .pp-tile.size-big { grid-column: auto; }
  .pp-tile.size-tall, .pp-tile.size-big { grid-row: auto; }
  .pp-steps { grid-template-columns: 1fr; }
  .pp-roles-copy .pp-checks { grid-template-columns: 1fr; }
  .pp-roles-tabs { border-radius: 18px; }
  .pp-roles-tabs button { padding: 10px 16px; }
  .pp-phone-wrap { min-height: 460px; }
  .pp-phone-wrap::before { width: 300px; height: 300px; }
  .pp-float { font-size: .75rem; padding: 9px 14px; }
  .pp-case-mock { padding: 22px; }
  .pp-metrics { flex-wrap: wrap; gap: 18px; }
  .pp-cta { padding: 36px 24px; }
  .pp-dash-rows li { grid-template-columns: 100px 1fr; }
  .pp-dash-toast { right: 8px; }
  .pp-plan.hot { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-dash, .pp-dash-toast, .pp-float, .pp-ride-card, .pp-marquee > div, .pp-cta::before, .pp-route, .pp-phone-wrap::before { animation: none; }
}

/* Headings take the colour of their card so they stay readable on dark and accent backgrounds */
.pp-tile h3, .pp-plan h3, .pp-cta h2, .pp-roles-copy h3, .pp-case-copy h3, .pp-steps h3 { color: inherit; }
.pp-bento-sec.style-dark .pp-tile h3, .pp-plan.hot h3, .pp-tile.size-big h3 { color: #fff; }
.pp-roles-panel[hidden] { display: none; }

/* Plot-map layout (real estate): luxury green with a serif headline and an interactive venture layout */
.lay-plots { background: radial-gradient(800px 500px at 90% 20%, color-mix(in srgb, var(--pb) 22%, transparent), transparent 60%), var(--pl); }
.lay-plots h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: var(--pd); }
.lay-plots h1 em, .lay-plots .pp-eyebrow { color: var(--pb); }
.lay-plots .pp-stats strong { color: var(--pa); font-family: Georgia, serif; }
.pp-plotmap { position: relative; padding: 18px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px rgba(15, 42, 28, .18); }
.pp-plotmap svg { display: block; width: 100%; height: auto; }
.pp-plot { cursor: pointer; outline: none; }
.pp-plot rect { stroke: #fff; stroke-width: 3; transition: transform .2s, filter .2s; transform-box: fill-box; transform-origin: center; }
.pp-plot text { font: 700 15px Arial, sans-serif; fill: #fff; pointer-events: none; }
.pp-plot.is-open rect { fill: #3f9a62; } .pp-plot.is-hold rect { fill: #d9a93a; } .pp-plot.is-sold rect { fill: #b9bfb6; }
.pp-plot:hover rect, .pp-plot:focus rect, .pp-plot.is-active rect { transform: scale(1.08); filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); stroke: var(--pd); }
.pp-plot.is-open:not(.is-active) rect { animation: ppPlot 3s ease-in-out infinite; }
.pp-plot.is-open:nth-of-type(3n) rect { animation-delay: -1s; } .pp-plot.is-open:nth-of-type(4n) rect { animation-delay: -2s; }
@keyframes ppPlot { 50% { fill: #57b47a; } }
.pp-plotcard { position: absolute; left: -36px; bottom: -30px; width: 230px; padding: 18px; border-radius: 18px; background: var(--pd); color: #f4efe0; box-shadow: 0 20px 40px rgba(0,0,0,.3); animation: svFloat 6s ease-in-out infinite; }
.pp-plotcard small { display: block; font-size: .72rem; opacity: .7; letter-spacing: .04em; }
.pp-plotcard b { display: block; margin: 6px 0; font: 700 1.15rem Georgia, serif; }
.pp-plotcard p { margin: 8px 0 12px; color: var(--pb); font-weight: 700; }
.pp-plotcard a { display: block; text-align: center; padding: 10px; border-radius: 10px; background: var(--pb); color: var(--pd); font-weight: 700; text-decoration: none; }
.pp-plot-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.pp-plot-badge.is-open { background: #3f9a62; } .pp-plot-badge.is-hold { background: #d9a93a; color: #222; } .pp-plot-badge.is-sold { background: #8a9187; }
.pp-plot-legend { list-style: none; display: flex; justify-content: flex-end; gap: 16px; margin: 12px 4px 0; padding: 0; font-size: .8rem; font-weight: 600; }
.pp-plot-legend li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; }
.pp-plot-legend .is-open::before { background: #3f9a62; } .pp-plot-legend .is-hold::before { background: #d9a93a; } .pp-plot-legend .is-sold::before { background: #b9bfb6; }
body:has(.theme-estate) .sv-title, body:has(.theme-estate) .pp-case-copy h3 { font-family: Georgia, "Times New Roman", serif; }

/* Search layout (job board): lime on ink, a big search bar and job cards popping in */
.lay-search { background: var(--pd); color: #e9eadf; }
.lay-search h1 { color: #fff; }
.lay-search h1::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 16px; border-radius: 10px; background: var(--pa); }
.lay-search .pp-eyebrow { color: var(--pa); }
.lay-search .pp-btn { color: var(--pi); }
.lay-search .pp-stats strong { color: var(--pa); }
.lay-search .pp-btn-ghost { border-color: var(--pa); }
.pp-jobs { position: relative; min-height: 440px; }
.pp-jobsearch { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 10px 10px 22px; border-radius: 18px; background: #fff; color: #555; box-shadow: 0 20px 50px rgba(0,0,0,.4); font-size: .95rem; }
.pp-jobsearch i { font-style: normal; padding: 0 14px; border-left: 1px solid #e5e5e5; color: #222; font-weight: 600; }
.pp-jobsearch b { padding: 14px 24px; border-radius: 12px; background: var(--pa); color: var(--pi); }
.pp-trending { margin: 16px 4px 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; opacity: .9; }
.pp-trending span { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
.pp-jobcard { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; margin-bottom: 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); animation: ppCardIn .7s cubic-bezier(.2,.8,.2,1) both; }
.pp-jobcard.j1 { margin-left: 40px; animation-delay: .25s; } .pp-jobcard.j2 { margin-left: 10px; animation-delay: .5s; }
.pp-jobcard em { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--pb); color: #fff; font: 800 .9rem var(--sv-font); font-style: normal; }
.pp-jobcard.j1 em { background: var(--pa); color: var(--pi); } .pp-jobcard.j2 em { background: #ff7a59; }
.pp-jobcard b { display: block; color: #fff; }
.pp-jobcard span { font-size: .8rem; opacity: .7; }
.pp-jobcard i { font-style: normal; font-size: .75rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--pa); color: var(--pi); }
@keyframes ppCardIn { from { opacity: 0; translate: 40px 0; } }
.pp-jobtoast { position: absolute; right: 0; bottom: 0; padding: 12px 18px; border-radius: 12px; background: var(--pa); color: var(--pi); font-weight: 700; box-shadow: 0 14px 30px rgba(0,0,0,.4); animation: svFloat 4s ease-in-out infinite, ppCardIn .7s .9s both; }
body:has(.theme-jobs) .pp-tile.size-big, body:has(.theme-jobs) .pp-tile.size-big h3 { color: var(--pi); }
body:has(.theme-jobs) .pp-tile.size-big .pp-fig { color: var(--pi); }
body:has(.theme-jobs) .pp-tile.size-big .pp-tile-ic img { filter: none; }
@media (max-width: 980px) { .pp-plotcard { position: static; width: auto; margin-top: 14px; animation: none; } .pp-jobs { min-height: 0; } .pp-jobtoast { position: static; display: inline-block; } }
@media (max-width: 600px) { .pp-jobsearch { grid-template-columns: 1fr auto; } .pp-jobsearch i { display: none; } .pp-jobcard.j1, .pp-jobcard.j2 { margin-left: 0; } .pp-plot-legend { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .pp-plot rect, .pp-plotcard, .pp-jobcard, .pp-jobtoast { animation: none; } }
/* Job theme: lime is for fills only; text on light backgrounds uses the violet accent for contrast */
body:has(.theme-jobs) .sv-contact-big, body:has(.theme-jobs) .pp-metrics strong, body:has(.theme-jobs) .pp-cases .pp-eyebrow,
body:has(.theme-jobs) .pp-steps-sec .pp-eyebrow, body:has(.theme-jobs) .pp-bento-sec.style-light .pp-fig, body:has(.theme-jobs) .pp-case-no { color: var(--pb); }
body:has(.theme-jobs) .pp-btn-ghost { border-color: var(--pb); }
body:has(.theme-jobs) .lay-search .pp-btn-ghost { border-color: var(--pa); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Real-estate-only sections ===== */
.pp-split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 34px; }
.pp-split-head .sv-title { text-align: left; margin: 0; }
.pp-split-head p { margin: 0; opacity: .8; line-height: 1.7; }
.pp-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pp-listing { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #e7e2d4; transition: transform .3s, box-shadow .3s; }
.pp-listing:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(15, 42, 28, .16); }
.pp-listing-top { position: relative; height: 150px; background: linear-gradient(160deg, color-mix(in srgb, var(--lc) 70%, #fff), var(--lc)); }
.pp-listing-top svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-listing-tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--pd); font: 700 .72rem var(--sv-font); letter-spacing: .04em; }
.pp-listing-open { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 999px; background: var(--pb); color: var(--pd); font: 700 .72rem var(--sv-font); }
.pp-listing-body { padding: 18px 20px 20px; }
.pp-listing h3 { margin: 0 0 4px; font: 700 1.12rem/1.3 Georgia, "Times New Roman", serif; color: var(--pd); }
.pp-listing-loc { margin: 0 0 14px; font-size: .82rem; opacity: .65; }
.pp-listing-bar { height: 6px; border-radius: 6px; background: #ece8dc; overflow: hidden; }
.pp-listing-bar i { display: block; height: 100%; width: var(--p); background: var(--lc); border-radius: inherit; animation: ppGrow 1.6s ease-out both; }
.pp-listing-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: .82rem; }
.pp-listing-meta strong { font: 700 1.05rem Georgia, serif; color: var(--pa); }
.pp-center { text-align: center; margin-top: 30px; }

.pp-numlist-sec { background: var(--pd); color: #efe9d8; }
.pp-numlist { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.pp-numlist-head { position: sticky; top: 110px; }
.pp-numlist-head .sv-title { text-align: left; color: #fff; }
.pp-numlist-head p { opacity: .75; line-height: 1.7; }
.pp-numlist ol { list-style: none; margin: 0; padding: 0; }
.pp-numlist li { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.pp-numlist li span { font: 400 3rem/1 Georgia, serif; color: var(--pb); transition: transform .3s; }
.pp-numlist li:hover span { transform: translateX(8px); }
.pp-numlist li h3 { margin: 6px 0; font: 700 1.2rem var(--sv-font); color: #fff; }
.pp-numlist li p { margin: 0; opacity: .7; line-height: 1.6; }

.pp-tracker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.pp-tracker-grid .sv-title { text-align: left; }
.pp-tracker-intro { line-height: 1.7; opacity: .8; }
.pp-tracker { padding: 26px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(15, 42, 28, .14); border: 1px solid #ebe6d7; }
.pp-tracker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.pp-tracker-head b { font: 700 1.1rem Georgia, serif; }
.pp-tracker-head span { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pa) 12%, #fff); color: var(--pa); font-size: .75rem; font-weight: 700; }
.pp-tracker ol { list-style: none; margin: 0; padding: 0; }
.pp-tracker li { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding-bottom: 24px; }
.pp-tracker li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: #e4e0d2; }
.pp-tracker li.is-done:not(:last-child)::before { background: var(--pa); }
.pp-tracker li i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #d8d3c4; background: #fff; display: grid; place-items: center; font-style: normal; }
.pp-tracker li.is-done i { background: var(--pa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; border-color: var(--pa); }
.pp-tracker li.is-current i { border-color: var(--pb); animation: ppPing 1.8s infinite; }
.pp-tracker li.is-current i::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pb); }
.pp-tracker li b { display: block; font-weight: 700; }
.pp-tracker li span { font-size: .85rem; opacity: .7; }
.pp-tracker li em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f1eee4; }
.pp-tracker li.is-done em { background: color-mix(in srgb, var(--pa) 14%, #fff); color: var(--pa); }
.pp-tracker li.is-current em { background: color-mix(in srgb, var(--pb) 25%, #fff); color: #6b5212; }

/* ===== Job-mela-only sections ===== */
.pp-ticker { overflow: hidden; background: var(--pa); color: var(--pi); padding: 20px 0; border-block: 3px solid var(--pd); }
.pp-ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: sv-scroll 26s linear infinite; font: 600 1.05rem var(--sv-font); white-space: nowrap; }
.pp-ticker-track strong { font: 800 2rem/1 var(--sv-font); letter-spacing: -.02em; margin-right: 4px; }
.pp-ticker-track i { font-style: normal; opacity: .4; font-size: 1.6rem; }
.pp-ticker-live { padding: 6px 14px; border-radius: 999px; background: var(--pd); color: var(--pa); font-weight: 800; font-size: .8rem; letter-spacing: .1em; }

.pp-dual { display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; border-radius: 32px; overflow: hidden; }
.pp-panel { position: relative; padding: 50px 46px; display: flex; flex-direction: column; overflow: hidden; }
.pp-panel.p0 { background: var(--pa); color: var(--pi); }
.pp-panel.p1 { background: var(--pd); color: #e9eadf; }
.pp-panel::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 40px; transform: rotate(20deg); transition: transform .6s; }
.pp-panel.p0::after { background: rgba(0,0,0,.07); }
.pp-panel.p1::after { background: color-mix(in srgb, var(--pb) 45%, transparent); }
.pp-panel:hover::after { transform: rotate(60deg) scale(1.1); }
.pp-panel-eyebrow { margin: 0 0 12px; font: 800 .75rem var(--sv-font); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pp-panel h3 { margin: 0 0 12px; font: 800 clamp(1.6rem, 2.8vw, 2.3rem)/1.1 var(--sv-font); color: inherit; }
.pp-panel.p1 h3 { color: #fff; }
.pp-panel > p { line-height: 1.7; opacity: .85; }
.pp-panel ul { list-style: none; padding: 0; margin: 14px 0 26px; display: grid; gap: 10px; }
.pp-panel li { padding-left: 26px; position: relative; }
.pp-panel li::before { content: "\2192"; position: absolute; left: 0; font-weight: 800; }
.pp-panel.p1 li::before { color: var(--pa); }
.pp-panel a { position: relative; z-index: 1; margin-top: auto; align-self: flex-start; padding: 14px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.pp-panel.p0 a { background: var(--pd); color: var(--pa); }
.pp-panel.p1 a { background: var(--pa); color: var(--pi); }

.pp-board-sec { background: var(--pl); }
.pp-board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; margin-top: 30px; }
.pp-col { padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #e6e8dc; min-height: 280px; }
.pp-col header { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 14px; }
.pp-col header b { font: 800 .9rem var(--sv-font); text-transform: uppercase; letter-spacing: .06em; }
.pp-col header b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: #c9ccd4; }
.pp-col.c1 header b::before { background: var(--pb); }
.pp-col.c2 header b::before { background: #ff9f43; }
.pp-col.c3 header b::before { background: var(--pa); box-shadow: 0 0 0 2px var(--pd); }
.pp-col header span { padding: 3px 10px; border-radius: 999px; background: var(--pd); color: #fff; font-size: .75rem; font-weight: 700; }
.pp-card { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; padding: 12px; border-radius: 14px; background: var(--pl); border: 1px solid transparent; animation: ppDrop .6s var(--d) cubic-bezier(.2,.8,.2,1) both; transition: transform .2s, border-color .2s; }
.pp-card:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--pb); }
@keyframes ppDrop { from { opacity: 0; translate: 0 -16px; } }
.pp-card em { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--pb); color: #fff; font: 800 .8rem var(--sv-font); font-style: normal; }
.pp-col.c3 .pp-card em { background: var(--pa); color: var(--pi); }
.pp-col.c3 .pp-card { background: color-mix(in srgb, var(--pa) 25%, #fff); }
.pp-card b { display: block; font-size: .88rem; }
.pp-card span { font-size: .75rem; opacity: .65; }

@media (max-width: 980px) {
  .pp-split-head, .pp-numlist, .pp-tracker-grid, .pp-dual { grid-template-columns: 1fr; gap: 26px; }
  .pp-dual { gap: 0; }
  .pp-numlist-head { position: static; }
  .pp-list-grid, .pp-board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pp-list-grid, .pp-board { grid-template-columns: 1fr; }
  .pp-numlist li { grid-template-columns: 60px 1fr; }
  .pp-numlist li span { font-size: 2.2rem; }
  .pp-panel { padding: 36px 26px; }
  .pp-col { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp-ticker-track, .pp-card, .pp-listing-bar i { animation: none; } }

/* ===== Web-studio page: collage hero, filterable gallery, big hover list ===== */
.lay-collage { background: var(--pd); color: #ece8df; padding: 80px 0 110px; }
.lay-collage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%); }
.lay-collage .pp-hero-grid { grid-template-columns: 1fr 1.05fr; }
.lay-collage h1 { color: #fff; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.045em; }
.lay-collage h1::after { content: "."; color: var(--pa); }
.lay-collage .pp-eyebrow { color: var(--pb); }
.lay-collage .pp-btn-ghost { border-color: var(--pa); color: #fff; }
.lay-collage .pp-stats strong { color: #fff; font-size: 2.4rem; }
.lay-collage .pp-stats strong::after { content: ""; display: block; width: 26px; height: 4px; margin-top: 8px; background: var(--pa); border-radius: 4px; }
.pp-collage { position: relative; height: 470px; }
.pp-shot { position: absolute; margin: 0; width: 78%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px rgba(0,0,0,.55); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pp-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pp-shot.s0 { top: 0; left: 0; rotate: -7deg; z-index: 1; }
.pp-shot.s1 { top: 70px; right: 0; rotate: 5deg; z-index: 2; }
.pp-shot.s2 { bottom: 0; left: 14%; rotate: -2deg; z-index: 3; }
.pp-collage:hover .pp-shot.s0 { translate: -20px -10px; } .pp-collage:hover .pp-shot.s1 { translate: 20px -6px; } .pp-collage:hover .pp-shot.s2 { translate: 0 14px; }
.pp-sticker { position: absolute; z-index: 4; right: 2%; bottom: 8%; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; background: var(--pa); color: #fff; font: 800 .9rem/1.1 var(--sv-font); text-align: center; text-transform: uppercase; animation: svSpin 16s linear infinite; box-shadow: 0 16px 34px rgba(255, 91, 46, .45); }

.pp-gallery-sec { background: var(--pl); }
.pp-gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 34px; }
.pp-gallery-head .sv-title { text-align: left; margin: 0 0 8px; font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.035em; }
.pp-gallery-head p { margin: 0; max-width: 520px; opacity: .75; }
.pp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-filters button { border: 1.5px solid #d9d4c8; background: transparent; border-radius: 999px; padding: 10px 18px; font: 600 .88rem var(--sv-font); cursor: pointer; color: inherit; transition: background .2s, color .2s, border-color .2s; }
.pp-filters button sup { font-size: .65rem; }
.pp-filters button[aria-pressed="true"], .pp-filters button:hover { background: var(--pd); color: #fff; border-color: var(--pd); }
.pp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pp-work { position: relative; animation: ppFade .45s ease both; }
.pp-work[hidden] { display: none; }
.pp-work.size-wide { grid-column: span 2; }
.pp-work-frame { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.08); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.pp-work-img { aspect-ratio: 16 / 10; overflow: hidden; }
.pp-work.size-wide .pp-work-img { aspect-ratio: 16 / 7.6; }
.pp-work-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position 4s ease, scale .6s; }
.pp-work:hover .pp-work-frame { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.pp-work:hover .pp-work-img img { object-position: bottom; scale: 1.02; }
.pp-work-info { padding: 16px 4px 0; }
.pp-work-info span { font: 700 .72rem var(--sv-font); letter-spacing: .1em; text-transform: uppercase; color: var(--pa); }
.pp-work-info h3 { margin: 6px 0 4px; font: 800 1.35rem var(--sv-font); letter-spacing: -.02em; color: var(--pd); }
.pp-work-info p { margin: 0 0 10px; font-size: .9rem; opacity: .75; line-height: 1.55; }
.pp-work-info a { font-weight: 700; color: var(--pd); text-decoration: none; border-bottom: 2px solid var(--pa); }

.pp-hlist-sec .wrap { position: relative; }
.pp-hlist { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid #dedbd2; }
.pp-hlist li { display: grid; grid-template-columns: 60px 1fr 1fr 40px; gap: 20px; align-items: center; padding: 26px 8px; border-bottom: 1px solid #dedbd2; transition: background .3s, padding .3s; cursor: default; }
.pp-hlist li:hover { background: var(--pd); color: #fff; padding-inline: 24px; }
.pp-hl-no { font: 700 .85rem var(--sv-font); opacity: .5; }
.pp-hlist h3 { margin: 0; font: 800 clamp(1.4rem, 3vw, 2.4rem)/1.1 var(--sv-font); letter-spacing: -.03em; color: inherit; }
.pp-hlist p { margin: 0; opacity: .7; font-size: .95rem; }
.pp-hlist li > i { font-style: normal; font-size: 1.6rem; color: var(--pa); transition: transform .3s; }
.pp-hlist li:hover > i { transform: rotate(45deg); }
.pp-hl-preview { position: absolute; top: 0; left: 0; z-index: 5; width: 300px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transition: opacity .25s; }
.pp-hl-preview.on { opacity: 1; }

@media (max-width: 980px) {
  .lay-collage .pp-hero-grid { grid-template-columns: 1fr; }
  .pp-collage { height: 360px; }
  .pp-gallery { grid-template-columns: 1fr 1fr; }
  .pp-hlist li { grid-template-columns: 44px 1fr 30px; }
  .pp-hlist p { grid-column: 2; }
}
@media (max-width: 600px) {
  .pp-collage { height: 260px; }
  .pp-sticker { width: 86px; height: 86px; font-size: .7rem; }
  .pp-gallery { grid-template-columns: 1fr; }
  .pp-work.size-wide { grid-column: auto; }
  .pp-work.size-wide .pp-work-img { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .pp-sticker, .pp-work { animation: none; } .pp-work-img img { transition: none; } }

/* ===== Conversion layout (clean theme): hero with estimate form, showcase, results, services ===== */
.lay-form { background: radial-gradient(900px 500px at 0% 0%, color-mix(in srgb, var(--pa) 12%, transparent), transparent 60%), radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--pb) 10%, transparent), transparent 60%), #fff; padding: 56px 0 70px; }
.lay-form .pp-hero-grid { grid-template-columns: 1.05fr .95fr; align-items: start; }
.lay-form .pp-hero-copy { padding-top: 24px; }
.lay-form .pp-eyebrow { padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--pa) 10%, #fff); letter-spacing: .08em; }
.lay-form .pp-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pb); }
.lay-form h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.12; }
.lay-form .pp-stats { margin-top: 26px; }
.lay-form .pp-stats li { padding: 14px 20px; border-radius: 16px; background: #fff; border: 1px solid #e4ecf4; box-shadow: 0 8px 20px rgba(11, 37, 64, .05); }
.lay-form .pp-stats strong { color: var(--pa); font-size: 1.6rem; }
.pp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; }
.pp-trust li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid #e4ecf4; font: 600 .84rem var(--sv-font); }
.pp-trust li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--pb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.pp-estimate { position: relative; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid #e2eaf3; box-shadow: 0 30px 70px rgba(11, 37, 64, .12); }
.pp-estimate::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, var(--pa), var(--pb)); }
.pp-estimate h2 { margin: 0; font: 800 1.35rem/1.25 var(--sv-font); color: var(--pd); }
.pp-estimate-sub { margin: 6px 0 18px; color: var(--pb); font-weight: 700; font-size: .9rem; }
.pp-estimate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-estimate label { display: grid; gap: 6px; font: 600 .8rem var(--sv-font); color: #3c4b5c; }
.pp-estimate label.full { grid-column: 1 / -1; }
.pp-estimate input, .pp-estimate select, .pp-estimate textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #dbe4ee; border-radius: 12px; background: #f8fbfe; font: 400 .95rem var(--sv-font); color: #0b2540; transition: border-color .2s, box-shadow .2s, background .2s; }
.pp-estimate input:focus, .pp-estimate select:focus, .pp-estimate textarea:focus { outline: none; border-color: var(--pa); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa) 15%, transparent); }
.pp-estimate .pp-btn { width: 100%; margin-top: 18px; padding: 16px; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.pp-estimate .g-recaptcha { margin-top: 14px; }
.pp-estimate-note { margin: 10px 0 0; text-align: center; font-size: .78rem; color: #6b7a8a; }

.pp-show { margin-top: 26px; }
.pp-show-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.pp-show-tabs button { padding: 10px 18px; border-radius: 999px; border: 1.5px solid #dbe4ee; background: #fff; font: 600 .86rem var(--sv-font); cursor: pointer; color: inherit; transition: all .2s; }
.pp-show-tabs button[aria-selected="true"] { background: var(--pa); border-color: var(--pa); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--pa) 30%, transparent); }
.pp-show-panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; padding: 34px; border-radius: 28px; background: var(--pl); animation: ppFade .4s ease; }
.pp-show-panel[hidden] { display: none; }
.pp-show-img { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px rgba(11, 37, 64, .14); }
.pp-show-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pp-show-copy h3 { margin: 0 0 12px; font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.2 var(--sv-font); color: var(--pd); }
.pp-show-copy > p { line-height: 1.7; opacity: .85; }
.pp-show-label { margin: 18px 0 8px; font: 800 .74rem var(--sv-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa); }
.pp-show-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 20px; }
.pp-show-copy dl div { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e2eaf3; }
.pp-show-copy dt { font: 800 .7rem var(--sv-font); letter-spacing: .08em; text-transform: uppercase; color: #6b7a8a; }
.pp-show-copy dd { margin: 4px 0 0; font-weight: 600; font-size: .9rem; color: var(--pd); }

.pp-results-sec { background: var(--pl); }
.pp-results { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.pp-result { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid #e2eaf3; transition: transform .25s, box-shadow .25s; }
.pp-result:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(11, 37, 64, .12); }
.pp-result header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.pp-result-tag { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pb) 12%, #fff); color: #13803e; font: 800 .7rem var(--sv-font); letter-spacing: .08em; text-transform: uppercase; }
.pp-result-place { font-size: .82rem; color: #6b7a8a; }
.pp-result-place::before { content: "⌖ "; }
.pp-result h3 { margin: 0 0 16px; font: 800 1.45rem var(--sv-font); color: var(--pd); }
.pp-result h3 a { color: inherit; text-decoration: none; }
.pp-result h3 a:hover { color: var(--pa); }
.pp-result-metrics { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; margin: 0 0 18px; }
.pp-result-metrics li { padding: 14px; border-radius: 14px; background: var(--pl); }
.pp-result-metrics strong { display: block; font: 800 1.7rem/1 var(--sv-font); color: var(--pa); }
.pp-result-metrics span { font-size: .8rem; color: #5b6b7b; }
.pp-result-row { display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; margin-top: 12px; }
.pp-result-row::before { content: "!"; grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #fff1e6; color: #c2410c; font-weight: 800; }
.pp-result-row.so::before { content: "✓"; background: #e8f7ee; color: #15803d; }
.pp-result-row b { font: 800 .72rem var(--sv-font); letter-spacing: .1em; text-transform: uppercase; color: #6b7a8a; }
.pp-result-row p { margin: 2px 0 0; line-height: 1.6; font-size: .93rem; }

.pp-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.pp-svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px; border-radius: 20px; background: #fff; border: 1px solid #e2eaf3; transition: transform .25s, border-color .25s, box-shadow .25s; }
.pp-svc-card:hover { transform: translateY(-6px); border-color: var(--pa); box-shadow: 0 20px 44px rgba(11, 37, 64, .1); }
.pp-svc-card.popular { border: 2px solid var(--pa); }
.pp-svc-no { position: absolute; right: 14px; bottom: -10px; font: 800 5rem/1 var(--sv-font); color: color-mix(in srgb, var(--pa) 7%, transparent); transition: color .3s; }
.pp-svc-card:hover .pp-svc-no { color: color-mix(in srgb, var(--pa) 14%, transparent); }
.pp-svc-card em { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: var(--pa); color: #fff; font: 700 .68rem var(--sv-font); font-style: normal; }
.pp-svc-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--pa) 10%, #fff); }
.pp-svc-ic img { width: 28px; height: 28px; }
.pp-svc-card h3 { margin: 4px 0 0; font: 800 1.08rem var(--sv-font); color: var(--pd); }
.pp-svc-card h3 a { color: inherit; text-decoration: none; }
.pp-svc-card p { position: relative; margin: 0; font-size: .9rem; line-height: 1.6; color: #4d5d6d; }
.pp-svc-tag { position: relative; align-self: flex-start; margin-top: auto; padding: 5px 12px; border-radius: 8px; background: var(--pl); font: 700 .74rem var(--sv-font); color: var(--pa); }

@media (max-width: 1100px) { .pp-svc { grid-template-columns: repeat(2, 1fr); } }

/* ===== Print-on-demand hero: CMYK dots and a recolourable T-shirt ===== */
.lay-printshop { background: radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--pa) 16%, transparent) 0 120px, transparent 121px), radial-gradient(circle at 18% 85%, color-mix(in srgb, var(--pb) 18%, transparent) 0 90px, transparent 91px), radial-gradient(circle at 92% 12%, rgba(250, 204, 21, .25) 0 70px, transparent 71px), var(--pl); }
.lay-printshop h1 { color: var(--pd); }
.lay-printshop h1::after { content: ""; display: block; width: 150px; height: 8px; margin-top: 16px; border-radius: 8px; background: linear-gradient(90deg, #00a3e0 0 33%, #e6007e 33% 66%, #facc15 66%); }
.pp-print { position: relative; display: grid; justify-items: center; gap: 18px; }
.pp-print-stage { position: relative; width: min(400px, 100%); aspect-ratio: 1; border-radius: 32px; background: #fff; box-shadow: 0 30px 60px rgba(26, 20, 48, .15); display: grid; place-items: center; }
.pp-print-stage svg { width: 82%; }
.pp-print-stage [data-shirt] { transition: fill .45s ease; }
.pp-print-logo { animation: svPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pp-print-price { position: absolute; left: -18px; bottom: 26px; padding: 10px 16px; border-radius: 12px; background: var(--pd); color: #fff; font: 700 .85rem var(--sv-font); box-shadow: 0 12px 26px rgba(0,0,0,.25); }
.pp-swatches { display: flex; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px rgba(26, 20, 48, .1); }
.pp-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #ddd; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pp-swatches button[aria-pressed="true"] { transform: scale(1.18); box-shadow: 0 0 0 2px var(--pd); }
.pp-float.pf0 { top: 30px; right: -10px; } .pp-float.pf1 { top: 46%; left: -24px; animation-delay: -1.5s; } .pp-float.pf2 { bottom: 70px; right: 0; animation-delay: -3s; }

/* ===== Construction hero: blueprint grid and an animated timeline ===== */
.lay-gantt { background: linear-gradient(rgba(234, 88, 12, .06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(234, 88, 12, .06) 1px, transparent 1px) 0 0 / 32px 32px, var(--pl); }
.lay-gantt h1 { color: var(--pd); }
.lay-gantt h1::before { content: ""; display: block; width: 60px; height: 10px; margin-bottom: 18px; background: repeating-linear-gradient(-45deg, var(--pb) 0 8px, var(--pd) 8px 16px); border-radius: 3px; }
.lay-gantt .pp-stats strong { color: var(--pa); }
.pp-gantt { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #ebe5da; box-shadow: 0 30px 60px rgba(28, 25, 23, .14); }
.pp-gantt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pp-gantt-head b { font: 800 1.05rem var(--sv-font); }
.pp-gantt-head span { padding: 4px 12px; border-radius: 999px; background: #dcfce7; color: #15803d; font: 700 .75rem var(--sv-font); }
.pp-gantt-weeks { display: grid; grid-template-columns: 120px repeat(6, 1fr); font: 700 .7rem var(--sv-font); color: #a8a29e; margin-bottom: 6px; }
.pp-gantt-weeks span:first-child { grid-column: 2; }
.pp-gantt-body { position: relative; display: grid; gap: 10px; }
.pp-gantt-today { position: absolute; top: -6px; bottom: -6px; left: calc(120px + (100% - 120px) * .58); width: 2px; background: var(--pa); z-index: 1; }
.pp-gantt-today::before { content: attr(data-today); position: absolute; top: -18px; left: -16px; font: 700 .65rem var(--sv-font); color: var(--pa); }
.pp-gantt-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; font: 600 .82rem var(--sv-font); }
.pp-gantt-row > div { position: relative; height: 26px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), #f1ece4 calc(100% / 6 - 1px) calc(100% / 6)); }
.pp-gantt-row i { position: absolute; top: 3px; bottom: 3px; left: calc(100% / 6 * var(--s)); width: calc(100% / 6 * var(--l)); border-radius: 6px; background: linear-gradient(90deg, var(--pa) var(--d), color-mix(in srgb, var(--pa) 25%, #fff) var(--d)); transform-origin: left; animation: ppBarX .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--k) * .15s); }
@keyframes ppBarX { from { transform: scaleX(0); } }
.pp-gantt-foot { display: flex; justify-content: space-between; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--pd); color: #fff; font-size: .85rem; }
.pp-gantt-foot b { color: var(--pb); }

/* ===== Fitness hero: dark, energetic, animated activity rings ===== */
.lay-rings { background: radial-gradient(600px 400px at 80% 30%, color-mix(in srgb, var(--pb) 35%, transparent), transparent 70%), radial-gradient(500px 400px at 10% 90%, color-mix(in srgb, var(--pa) 25%, transparent), transparent 70%), var(--pd); color: #e9e7f5; }
.lay-rings h1 { color: #fff; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; }
.lay-rings .pp-eyebrow { color: #22d3ee; }
.lay-rings .pp-btn-ghost { border-color: var(--pa); }
.lay-rings .pp-stats strong { color: #fff; }
.pp-rings { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; padding: 28px; border-radius: 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.pp-rings svg { width: 100%; max-width: 280px; }
.pp-ring { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: ppRing 1.8s cubic-bezier(.2,.8,.2,1) .3s forwards; }
@keyframes ppRing { to { stroke-dashoffset: var(--off); } }
.pp-rings-legend p { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; margin: 0 0 14px; min-width: 170px; font-size: .9rem; }
.pp-rings-legend i { width: 12px; height: 12px; border-radius: 50%; }
.pp-rings-legend .r0 i { background: #ff2d55; } .pp-rings-legend .r1 i { background: #7c3aed; } .pp-rings-legend .r2 i { background: #22d3ee; }
.pp-rings-legend b { color: #fff; }
.pp-score { position: absolute; left: -26px; bottom: -26px; padding: 14px 20px; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 20px 40px rgba(0,0,0,.4); animation: svFloat 5s ease-in-out infinite; }
.pp-score small { display: block; font-size: .72rem; color: #666; }
.pp-score b { font: 800 2rem/1.1 var(--sv-font); color: var(--pa); }
.pp-score span { display: block; font-size: .75rem; color: #16a34a; font-weight: 700; }
@media (max-width: 980px) { .pp-print-price { left: 8px; } .pp-score { position: static; margin-top: 10px; grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 600px) { .pp-gantt-weeks, .pp-gantt-row { grid-template-columns: 84px 1fr; } .pp-gantt-weeks { grid-template-columns: 84px repeat(6, 1fr); } .pp-gantt-today { left: calc(84px + (100% - 84px) * .58); } .pp-rings { grid-template-columns: 1fr; justify-items: center; } .pp-float.pf1 { left: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-print-logo, .pp-gantt-row i, .pp-score { animation: none; } .pp-ring { animation: none; stroke-dashoffset: var(--off); } }
@media (max-width: 980px) {
  .lay-form .pp-hero-grid, .pp-show-panel, .pp-results { grid-template-columns: 1fr; }
  .pp-show-panel { padding: 20px; gap: 24px; }
}
@media (max-width: 600px) {
  .pp-estimate { padding: 22px 18px; }
  .pp-estimate-grid, .pp-show-copy dl { grid-template-columns: 1fr; }
  .pp-svc { grid-template-columns: 1fr; }
  .pp-result { padding: 22px 18px; }
}

/* ===== Estate theme polish: Fraunces display serif + Manrope text, softer premium details ===== */
body:has(.theme-estate) { --re-serif: "Fraunces", Georgia, serif; --re-sans: "Manrope", system-ui, sans-serif; }
body:has(.theme-estate) main, body:has(.theme-estate) main p, body:has(.theme-estate) main li,
body:has(.theme-estate) main a, body:has(.theme-estate) main button, body:has(.theme-estate) main input,
body:has(.theme-estate) main select, body:has(.theme-estate) main textarea, body:has(.theme-estate) main span,
body:has(.theme-estate) main b, body:has(.theme-estate) main small { font-family: var(--re-sans); }
body:has(.theme-estate) main h1, body:has(.theme-estate) main h2, body:has(.theme-estate) .sv-title,
body:has(.theme-estate) .pp-listing h3, body:has(.theme-estate) .pp-plotcard b, body:has(.theme-estate) .pp-tracker-head b,
body:has(.theme-estate) .pp-numlist li span, body:has(.theme-estate) .pp-listing-meta strong, body:has(.theme-estate) .lay-plots .pp-stats strong {
  font-family: var(--re-serif); font-weight: 600; letter-spacing: -.015em; font-variation-settings: "SOFT" 50, "WONK" 0;
}
body:has(.theme-estate) .lay-plots h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.06; letter-spacing: -.025em; }
body:has(.theme-estate) .lay-plots h1 em { font-style: italic; font-weight: 500; }
body:has(.theme-estate) .lay-plots .pp-eyebrow { font: 700 .74rem var(--re-sans); letter-spacing: .2em; }
body:has(.theme-estate) .lay-plots p { font-size: 1.05rem; line-height: 1.75; color: #3d4a42; }
body:has(.theme-estate) .sv-title { color: var(--pd); line-height: 1.12; }
body:has(.theme-estate) .pp-numlist-sec .sv-title { color: #fff; }
body:has(.theme-estate) .pp-numlist li h3, body:has(.theme-estate) .pp-tracker li b { font: 700 1.08rem var(--re-sans); }
body:has(.theme-estate) .pp-numlist li span { font-weight: 500; color: var(--pb); }
body:has(.theme-estate) .pp-plot text { font-family: var(--re-sans); font-weight: 800; }

/* Cards: warmer paper surface, cleaner borders */
body:has(.theme-estate) .pp-listing { border-color: #ebe5d3; box-shadow: 0 2px 0 #f1ecdf; }
body:has(.theme-estate) .pp-listing-body { padding: 20px 22px 22px; }
body:has(.theme-estate) .pp-listing-loc::before { content: "◉ "; color: var(--pb); font-size: .7rem; }
body:has(.theme-estate) .pp-listing-tag, body:has(.theme-estate) .pp-listing-open { font-family: var(--re-sans); }
body:has(.theme-estate) .pp-tracker { border-radius: 24px; }
body:has(.theme-estate) .pp-plotcard { border: 1px solid rgba(201,162,74,.35); }

/* FAQ, CTA band and contact block match the estate look */
body:has(.theme-estate) .sv-faq details, body:has(.theme-estate) .faq-item { border-color: #e9e3d1; border-radius: 16px; }
body:has(.theme-estate) .pp-cta { background: radial-gradient(600px 300px at 85% 0%, rgba(201,162,74,.35), transparent 60%), linear-gradient(120deg, var(--pd), var(--pa)); }
body:has(.theme-estate) .pp-cta::before { border-color: rgba(201,162,74,.22); }
body:has(.theme-estate) .pp-cta h2 { font-family: var(--re-serif); font-weight: 600; letter-spacing: -.01em; }
body:has(.theme-estate) main .sv-btn, body:has(.theme-estate) main .pp-btn { letter-spacing: .01em; }
body:has(.theme-estate) .sv-contact-h { font-family: var(--re-sans); font-weight: 700; }
body:has(.theme-estate) .sv-contact-big { font-family: var(--re-serif); font-weight: 600; font-style: italic; letter-spacing: -.02em; color: var(--pa); }
body:has(.theme-estate) .sv-faq summary { font: 700 1rem var(--re-sans); color: var(--pd); padding: 18px 52px 18px 22px; }
body:has(.theme-estate) .sv-faq summary::after { color: var(--pb); }
body:has(.theme-estate) .sv-faq details[open] { background: var(--pl); border-color: color-mix(in srgb, var(--pb) 45%, #fff); }
body:has(.theme-estate) .sv-contact select { border-radius: 999px; padding: 12px 16px; border: 1px solid #1c2a22; background-color: #fff; }
body:has(.theme-estate) .sv-contact h2, body:has(.theme-estate) .sv-contact h3 { font-family: var(--re-serif); font-weight: 600; }
body:has(.theme-estate) .lay-plots .pp-plotcard p { color: var(--pb); font-size: 1rem; line-height: 1.4; font-weight: 700; }
/* Animated cut icons sit in a soft badge and pop on hover */
.pp-opts.style-tickets img { width: 56px; height: 56px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.06); transition: transform .3s; }
.pp-opts.style-tickets li:hover img { transform: scale(1.12) rotate(-4deg); }

/* ===== Fresh (meat) theme polish ===== */
body:has(.theme-fresh) .sv-intro { background: none; padding: 0; max-width: 640px; margin: 10px auto 34px; font-size: 1.05rem; line-height: 1.7; color: #5a524c; }
body:has(.theme-fresh) .sv-title { letter-spacing: -.02em; }
body:has(.theme-fresh) .sv-title::after { content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--pa), var(--pb)); }
body:has(.theme-fresh) .pp-numlist .sv-title::after, body:has(.theme-fresh) .pp-tracker-grid .sv-title::after, body:has(.theme-fresh) .pp-split-head .sv-title::after { margin-left: 0; }
body:has(.theme-fresh) .pp-opts.style-tickets li { box-shadow: 0 1px 0 #f0e4d3; }
body:has(.theme-fresh) .pp-opts.style-tickets li:hover { background: #fff; box-shadow: 0 18px 36px rgba(214, 40, 57, .12); }
body:has(.theme-fresh) .pp-tracker-sec, body:has(.theme-fresh) .pp-steps-sec { background: var(--pl); }
body:has(.theme-fresh) .pp-tracker { border-color: #f1e3d2; box-shadow: 0 30px 60px rgba(214, 40, 57, .1); }
body:has(.theme-fresh) .pp-tracker li.is-done i { background-color: var(--pb); border-color: var(--pb); }
body:has(.theme-fresh) .pp-tracker li.is-done:not(:last-child)::before { background: var(--pb); }
body:has(.theme-fresh) .pp-tracker li.is-done em { background: color-mix(in srgb, var(--pb) 14%, #fff); color: #1d6f65; }
body:has(.theme-fresh) .pp-tracker li.is-current i { border-color: var(--pa); }
body:has(.theme-fresh) .pp-tracker li.is-current i::after { background: var(--pa); }
body:has(.theme-fresh) .pp-tracker li.is-current em { background: color-mix(in srgb, var(--pa) 12%, #fff); color: var(--pa); }
body:has(.theme-fresh) .pp-tracker-head span { background: color-mix(in srgb, var(--pa) 10%, #fff); color: var(--pa); }
body:has(.theme-fresh) .pp-numlist li span { color: #ff8a8a; }
body:has(.theme-fresh) .pp-cta { background: radial-gradient(500px 260px at 90% 0%, rgba(42,157,143,.45), transparent 60%), linear-gradient(120deg, #b81e2e, var(--pa)); }
body:has(.theme-fresh) .sv-faq details[open] { background: var(--pl); border-color: #f0d9c4; }
body:has(.theme-fresh) .sv-faq summary::after { color: var(--pa); }

/* Lottie animation in the closing banner. */
.pp-cta.has-lottie { padding-right: 220px; }
.pp-cta-lottie { position: absolute; right: 28px; top: 50%; width: 170px; height: 170px; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 760px) {
  .pp-cta.has-lottie { padding-right: 24px; padding-top: 150px; }
  .pp-cta-lottie { top: 12px; right: 50%; width: 130px; height: 130px; transform: translateX(50%); }
}
@media (min-width: 761px) {
  /* The lamp sits in the row between the text and the buttons, so it can never cover a button. */
  .pp-cta.has-lottie { padding-right: 24px !important; }
  .pp-cta.has-lottie .pp-cta-lottie { position: static; transform: none; flex: none; order: 1; margin-left: auto; width: 150px; height: 150px; }
  .pp-cta.has-lottie .pp-actions { order: 2; }
}
@media (max-width: 760px) {
  /* Phones: the lamp sits above the heading instead of on top of it. */
  .pp-cta.has-lottie { padding-top: 22px !important; display: flex; flex-direction: column; }
  .pp-cta.has-lottie .pp-cta-lottie { position: static; transform: none; order: -1; width: 110px; height: 110px; margin: 0 auto 4px; }
}