@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;600;700;800&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', var(--font-sans);
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #14b8a6;
  --text: #0b1b33;
  --text-light: #64748b;
  --border: #e2e8f0;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.06);
  --shadow: 0 12px 40px -12px rgba(0,0,0,0.08);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.15);
  --radius: 24px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --role-owner: #92400e;
  --role-head: #b45309;
  --role-supervisor: #1d4ed8;
  --role-painter: #0f766e;
  --role-helper: #6d28d9;
}

[data-theme='dark'] {
  --bg: #020617;
  --surface: #0f172a;
  --surface-hover: #1e293b;
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --text: #f8fafc;
  --text-light: #94a3b8;
  --border: #334155;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.45);
  --shadow: 0 12px 40px -12px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(24px) saturate(1.4);
  background: rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 14px 0;
  transition: background var(--transition);
}
[data-theme='dark'] header { background: rgba(2,6,23,0.7); border-color: rgba(255,255,255,0.04); }
.flex-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; text-decoration: none; }
.logo span { color: var(--primary); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  text-decoration: none;
  font-weight: 500;
  opacity: 0.8;
  position: relative;
  transition: opacity 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.4s;
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.btn-primary {
  display: inline-block;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  box-shadow: 0 4px 16px rgba(37,99,235,0.25);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); background: var(--primary-hover); }
.light-btn { background: #fff; color: var(--primary); box-shadow: none; }
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, #0f172a 100%);
  color: #fff;
  text-align: center;
}
.hero .bg-glow {
  position: absolute;
  top: -20%;
  right: -15%;
  width: 70%;
  height: 120%;
  background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.hero .content { position: relative; z-index: 2; max-width: 780px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}
.hero .highlight { color: #ffd700; }
.hero p { font-size: 1.2rem; opacity: 0.9; margin: 0 auto 30px; max-width: 600px; }

/* ============================================================
   CARTOON PAINTER (hero) — pure SVG + CSS animation
   The painter gently bobs while his roller sweeps up and down a
   wall, leaving a growing band of paint and a small drip. A
   "living" touch that reinforces the brand is run by a real,
   friendly painter — not a stock sticker.
   ============================================================ */
.painter {
  position: absolute;
  right: clamp(8px, 4vw, 70px);
  bottom: 0;
  width: clamp(150px, 22vw, 300px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: painter-enter 1s ease 0.4s forwards;
}
.painter svg { width: 100%; height: auto; display: block; }
@keyframes painter-enter { to { opacity: 1; } }

/* Body bobs gently, like he's working */
.painter-body { transform-origin: 103px 272px; animation: painter-bob 2.6s ease-in-out infinite; }
@keyframes painter-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Painted band grows from top, then resets, looping like a fresh coat */
.paint-band {
  transform-origin: 150px 40px;
  transform-box: fill-box;
  animation: band-fill 2.8s ease-in-out infinite;
}
@keyframes band-fill {
  0%   { transform: scaleY(0.08); opacity: 0.5; }
  45%  { transform: scaleY(1); opacity: 1; }
  90%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Roller sweeps up and down the wall */
.roller-arm { transform-origin: 138px 40px; animation: roller-sweep 2.8s ease-in-out infinite; }
@keyframes roller-sweep {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(150px); }
  50%  { transform: translateY(150px); }
  55%  { transform: translateY(150px); }
  100% { transform: translateY(0); }
}

/* Drip falls a little each cycle */
.drip { animation: drip-fall 2.8s ease-in infinite; }
@keyframes drip-fall {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  60%  { opacity: 1; transform: translateY(120px); }
  61%  { opacity: 0; }
  100% { opacity: 0; transform: translateY(0); }
}

@media (max-width: 700px) {
  .painter { opacity: 0.55; width: clamp(120px, 30vw, 180px); }
}

/* ------------------------------------------------------------
   LINE-ART PAINTER MASCOT — small corner mascot on every page
   (injected by js/script.js on non-home pages). Reuses the same
   line-drawn SVG + keyframes as the hero painter.
   ------------------------------------------------------------ */
.painter-mascot {
  position: fixed;
  right: clamp(10px, 2.5vw, 30px);
  bottom: clamp(10px, 2.5vw, 30px);
  width: clamp(72px, 9vw, 116px);
  z-index: 40;
  pointer-events: none;
  color: var(--text, #1f2937);
  opacity: 0.85;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
  animation: painter-enter 1s ease 0.3s forwards, mascot-wave 5s ease-in-out 1s infinite;
}
.painter-mascot svg { width: 100%; height: auto; display: block; }
/* gentle peek/hide wave so the mascot feels alive but stays unobtrusive */
@keyframes mascot-wave {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-1.5deg); }
}
@media (max-width: 700px) {
  .painter-mascot { width: clamp(60px, 16vw, 84px); opacity: 0.7; }
}
.section { padding: 80px 0; }
.surface-section { background: var(--surface); }
.section-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: -0.02em;
}
.section-title span { color: var(--primary); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card, .testimonial, .about-card, .contact-form, .contact-details, .policy-page {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card {
  padding: 32px;
  text-align: center;
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.card .icon { font-size: 3rem; margin-bottom: 14px; }
.card h3, .about-card h3, .contact-details h3 { font-size: 1.3rem; margin-bottom: 8px; }
.card p, .about-copy p, .testimonial p, .contact-details p, .policy-page p { color: var(--text-light); }
.card img { width: 100%; height: 220px; object-fit: cover; border-radius: 16px; margin-bottom: 16px; }
.process-step { text-align: center; padding: 20px; }
.process-step .number {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.testimonial { padding: 28px; border-left: 6px solid var(--primary); }
.testimonial .name { margin-top: 12px; font-weight: 600; }
.testimonial .role { color: var(--text-light); font-size: 0.95rem; }
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 14px;
  padding: 18px 22px;
  cursor: pointer;
}
.faq-item .question { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.faq-item .answer { max-height: 0; overflow: hidden; color: var(--text-light); transition: max-height 0.4s ease; }
.faq-item.open .answer { max-height: 200px; margin-top: 12px; }
.cta-card {
  background: linear-gradient(135deg, var(--primary), #0f172a);
  color: #fff;
  padding: 60px 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.cta-card h2 { font-size: 2.2rem; margin-bottom: 12px; }
.centered-actions { text-align: center; margin-top: 34px; }
.about-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: start; }
.about-copy, .about-card { padding: 32px; }
.about-card { background: var(--surface); }
.contact-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: start; }
.contact-form { padding: 34px; }
.contact-details { padding: 34px; }
.form-group { margin-bottom: 18px; }
.form-status {
  margin-top: 14px;
  font-weight: 600;
  color: var(--primary);
  min-height: 1.5em;
}
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-control {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
textarea.form-control { resize: vertical; }
.policy-page { padding: 40px; max-width: 860px; margin: 0 auto; }
.policy-page p { margin-bottom: 16px; }
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 34px; }
.footer-col h4 { font-family: var(--font-display); margin-bottom: 12px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--text-light); text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { text-align: center; border-top: 1px solid var(--border); padding-top: 20px; color: var(--text-light); font-size: 0.95rem; }
.footer-bottom a { color: var(--primary); }
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  background: #25d366;
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.3);
  transition: transform 0.3s;
}
.whatsapp-float:hover { transform: scale(1.05); }
.theme-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.mobile-toggle { display: none; border: none; background: none; font-size: 1.8rem; color: var(--text); cursor: pointer; }
.progress-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.reveal, .reveal-left, .reveal-right { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateY(0) translateX(0); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }

/* ============================================================
   PAGE ANIMATIONS
   Each animation below is intentional and tied to the website's
   purpose (a premium *painting* service). The metaphors echo how
   paint is applied: colour fills in, a brush wipes across, a coat
   reveals what is underneath, and a process moves from start to
   finish. Animations are subtle and professional, never bouncy.
   ============================================================ */

/* Respect users who prefer reduced motion — disable non-essential motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
  .paint-fill, .paint-wipe, .roller-reveal { animation: none !important; clip-path: none !important; }
  .cta-pulse, .float-soft, .icon-brush { animation: none !important; }
}

/* --- 1. HERO: content rises into place in stages ---------------
   Meaning: the page "comes to life" the way a freshly painted
   wall settles into view — heading first, then message, then the
   call to action. A calm, staged entrance signals a premium brand. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .content > * { opacity: 0; animation: hero-rise 0.9s ease forwards; }
.hero .content h1   { animation-delay: 0.15s; }
.hero .content p    { animation-delay: 0.4s; }
.hero .content a, .hero .content .btn-primary { animation-delay: 0.6s; }

/* ============================================================
   PAINTER SCENE — a cartoon painter transforms a home
   Real, timed acting: the painter walks in with paint, brushes the
   wall (arm swings + paint strokes appear), steps out, the whole
   house becomes freshly painted, the owner comes out to shake hands,
   payment is handed over, and the painter leaves. The whole story is
   driven by a CSS animation timeline + a JS replay control.
   ============================================================ */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.hero-split__text { max-width: 100%; }

.painter-scene {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.ps-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #bfe3ff 0%, #d8f0ff 38%, #d8f0ff 38%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.5);
}
.ps-sky { position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, #9fd0ff, #d8f0ff); }
.ps-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, #8bc34a, #689f38); }
.ps-cloud {
  position: absolute; background: #fff; border-radius: 50%;
  width: 50px; height: 18px; opacity: 0.9;
  box-shadow: 18px -10px 0 -2px #fff, 36px 0 0 -4px #fff;
  animation: ps-cloud-drift 18s linear infinite;
}
.ps-cloud--1 { top: 12%; left: -10%; }
.ps-cloud--2 { top: 22%; left: -30%; animation-duration: 26s; animation-delay: -8s; width: 38px; }
@keyframes ps-cloud-drift { from { transform: translateX(0); } to { transform: translateX(550px); } }

/* The house */
.ps-house {
  position: absolute;
  left: 50%; bottom: 30%;
  transform: translateX(-50%);
  width: 46%; aspect-ratio: 1 / 1.05;
}
.ps-roof {
  position: absolute; top: -22%; left: -8%; right: -8%; height: 30%;
  background: #8d5524;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ps-wall {
  position: absolute; inset: 0;
  background: #d9cbb0; /* unpainted, dull */
  border-radius: 4px;
  transition: background 1.2s ease;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);
}
/* When painted, the wall turns a fresh, clean colour */
.ps-wall.painted { background: #f4f1ea; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.03), inset 0 8px 24px rgba(255,255,255,0.6); }
.ps-door {
  position: absolute; left: 42%; bottom: 0; width: 16%; height: 44%;
  background: #6b4f2a; border-radius: 4px 4px 0 0;
}
.ps-window { position: absolute; width: 22%; height: 26%; background: #bfe3ff; border: 3px solid #f4f1ea; border-radius: 3px; }
.ps-window--l { left: 8%; top: 18%; }
.ps-window--r { right: 8%; top: 18%; }

/* Paint strokes that appear while painting */
.ps-stroke {
  position: absolute; width: 80%; height: 14%;
  background: linear-gradient(90deg, rgba(244,241,234,0.0), rgba(244,241,234,0.95), rgba(244,241,234,0.0));
  border-radius: 8px;
  opacity: 0; transform: scaleX(0); transform-origin: left center;
  left: 10%;
}
.ps-stroke--1 { top: 22%; }
.ps-stroke--2 { top: 50%; }
.ps-stroke--3 { top: 76%; }

/* Cartoon painter */
.ps-painter {
  position: absolute;
  bottom: 28%;
  left: -25%;
  width: 22%;
  z-index: 6;
  animation: ps-walk-in 2.2s ease forwards;
}
.ps-painter svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.2)); }
@keyframes ps-walk-in {
  0%   { left: -25%; }
  100% { left: 22%; }
}
/* gentle walk bob */
.ps-painter svg { animation: ps-bob 0.5s ease-in-out infinite; }
@keyframes ps-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Painting phase: painter pauses, arm swings, strokes appear */
.ps-painter.painting svg { animation: none; }
.ps-painter.painting { animation: ps-walk-in 2.2s ease forwards, ps-arm-work 0.45s ease-in-out 2.3s 6; }
@keyframes ps-arm-work {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px) rotate(2deg); }
}
.ps-stroke.show { opacity: 1; transform: scaleX(1); transition: opacity 0.25s, transform 0.5s ease; }

/* Painter walks out (to the right) after painting */
.ps-painter.leaving {
  animation: ps-walk-out 2s ease forwards;
}
@keyframes ps-walk-out {
  0% { left: 22%; }
  100% { left: 105%; }
}
.ps-painter.leaving svg { animation: ps-bob 0.5s ease-in-out infinite; }

/* Owner walks in from the house door */
.ps-owner {
  position: absolute;
  bottom: 28%;
  left: 44%;
  width: 18%;
  z-index: 6;
  opacity: 0;
  transform: translateX(0);
}
.ps-owner svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.2)); }
.ps-owner.show { opacity: 1; animation: ps-owner-walk 1.6s ease forwards; }
@keyframes ps-owner-walk {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-40%); }
}
.ps-owner.show svg { animation: ps-bob 0.45s ease-in-out infinite; }

/* Painter comes back a little for handshake */
.ps-painter.handshake {
  animation: ps-handshake-approach 1s ease forwards;
}
@keyframes ps-handshake-approach {
  0% { left: 105%; }
  100% { left: 70%; }
}
.ps-painter.handshake svg { animation: none; }

/* Money that flies between them */
.ps-money {
  position: absolute;
  bottom: 46%;
  left: 60%;
  width: 8%;
  opacity: 0;
  z-index: 7;
}
.ps-money svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.ps-money.show { opacity: 1; animation: ps-money-fly 1.2s ease forwards; }
@keyframes ps-money-fly {
  0% { opacity: 0; transform: translateX(0) scale(0.6); }
  30% { opacity: 1; transform: translateX(-30%) scale(1); }
  100% { opacity: 0; transform: translateX(-60%) scale(0.8); }
}

/* Painter leaves for good */
.ps-painter.farewell {
  animation: ps-farewell 2s ease forwards;
}
@keyframes ps-farewell {
  0% { left: 70%; }
  100% { left: 105%; }
}
.ps-painter.farewell svg { animation: ps-bob 0.5s ease-in-out infinite; }
.ps-owner.farewell { opacity: 1; animation: ps-owner-back 1.4s ease forwards; }
@keyframes ps-owner-back {
  0% { transform: translateX(-40%); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.ps-caption { margin-top: 14px; font-size: 0.9rem; color: var(--text-light); min-height: 1.2em; text-align: center; }
.ps-replay {
  margin-top: 8px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.25s, transform 0.25s;
}
.ps-replay:hover { background: var(--border); transform: translateY(-1px); }

@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; gap: 18px; }
  .hero-split__text { text-align: center; }
  .ps-stage { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cloud, .ps-painter svg, .ps-owner.show svg, .ps-painter.leaving svg, .ps-painter.farewell svg { animation: none !important; }
}

/* --- 2. HERO highlight: colour sweeps into the word ------------
   Meaning: the highlighted word literally "fills with paint",
   reinforcing that this is a painting business. */
@keyframes paint-fill {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}
.hero .highlight {
  background: linear-gradient(90deg, #ffd700, #ffb300) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 0% 100%;
  animation: paint-fill 1.4s ease 0.5s forwards;
  padding: 0 0.05em;
}

/* --- 3. SERVICE / VALUE ICONS: a single brush-pop ---------------
   Meaning: the icon tilts and settles like a brush touching the
   wall once — a small, deliberate flourish on reveal. */
@keyframes icon-brush {
  0%   { transform: scale(0.6) rotate(-18deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.card.visible .icon, .about-card.visible .icon { animation: icon-brush 0.6s ease forwards; }

/* --- 4. PORTFOLIO / RECENT WORK: paint-roller image reveal ------
   Meaning: the photo is uncovered the way a roller reveals the
   finished colour beneath — a horizontal wipe. Shows
   transformation, the core promise of painting. */
@keyframes roller-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.roller-reveal { clip-path: inset(0 100% 0 0); }
.roller-reveal.visible { animation: roller-reveal 1.1s ease forwards; }

/* --- 5. PROCESS STEPS: a connecting line that fills --------------
   Meaning: the line that joins steps 1 → 2 → 3 fills as you scroll,
   showing your project progressing from consultation to a finished
   result. Progress made visible. (Fill is driven by JS.) */
.process-line {
  position: absolute;
  left: 0; right: 0; top: 30px;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  z-index: 0;
  max-width: 760px;
  margin: 0 auto;
}
.process-line::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
  transition: width 0.6s ease;
}
.process-line.visible::after { width: 100%; }
.process-step { position: relative; z-index: 1; }

/* --- 6. CTA BUTTON: a gentle pulse ------------------------------
   Meaning: a soft, slow breathing pulse on the main action button
   to quietly invite the visitor to get a quote — attention without
   being loud. */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(37,99,235,0.25); }
  50%      { box-shadow: 0 14px 34px rgba(37,99,235,0.45); }
}
.cta-card .btn-primary { animation: cta-pulse 2.8s ease-in-out infinite; }

/* --- 7. WHATSAPP FLOAT: gentle float ---------------------------
   Meaning: a barely-there up-and-down drift so the chat button
   feels approachable and alive, not a static sticker. */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.whatsapp-float { animation: float-soft 3.2s ease-in-out infinite; }

/* --- 8. FAQ: rotate the +/− toggle -----------------------------
   Meaning: the toggle spins 45° when open, turning + into ×,
   so the state change is instantly legible. */
.faq-item .toggle { transition: transform 0.3s ease; display: inline-block; }
.faq-item.open .toggle { transform: rotate(45deg); }

/* --- 9. PAINT-WIPE: generic colour sweep for service cards -----
   Meaning: on hover a thin band of brand colour wipes across the
   top of a card, like a brush loading colour onto a surface. */
@keyframes paint-wipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.card:hover::before { transform: scaleX(1); }

/* --- 10. FORM FOCUS: colour fills the input border -------------
   Meaning: when a field is selected, brand colour fills in — the
   same idea as paint being applied, applied to the form. */
.form-control:focus { animation: paint-fill 0.4s ease forwards; }

/* ============================================================
   PORTFOLIO — richer project grid with paint-transform animation
   Each card's image starts as a grayscale "before"; on hover a
   colourful "after" wipes in from the left like a roller laying
   a fresh coat, with a moving seam line. Cards stagger in as
   they scroll into view, zoom gently, and lift on hover.
   ============================================================ */
.pf-hero { text-align: center; padding-bottom: 0; }
.pf-intro {
  max-width: 640px; margin: 0 auto 28px;
  color: var(--text-light); font-size: 1.05rem; line-height: 1.7;
}

/* Filter bar */
.pf-filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 8px;
}
.pf-filter-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-light);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
  position: relative; overflow: hidden;
}
.pf-filter-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease; z-index: -1;
}
.pf-filter-btn:hover { color: #fff; border-color: transparent; }
.pf-filter-btn:hover::after { transform: scaleX(1); }
.pf-filter-btn.active {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff; border-color: transparent;
}

.pf-grid-section { padding-top: 32px; }
.pf-grid { transition: opacity .3s ease; }
.pf-grid.filtering { opacity: .45; }

/* Card */
.pf-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; }
.pf-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--primary); }

/* Media with before/after paint reveal.
   The "before" is the SAME image desaturated (grayscale) shown via a
   ::before layer; the real colour image sits beneath as the "after".
   On hover the desaturated layer wipes away right→left (transform-origin:
   right, scaleX→0), so colour reveals left→right like a roller laying a
   fresh coat, with a glowing seam line travelling along the boundary. */
.pf-media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--border);
}
.pf-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.pf-card:hover .pf-img { transform: scale(1.08); }

.pf-media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--pf-img);
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(.92) contrast(.95);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .85s cubic-bezier(.65,.05,.36,1);
  z-index: 2;
}
/* Moving "roller seam" line that travels along the colour boundary */
.pf-media::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 0 0 14px rgba(37,99,235,.55);
  z-index: 3;
  opacity: 0;
  transition: left .85s cubic-bezier(.65,.05,.36,1), opacity .25s ease;
}
.pf-card:hover .pf-media::before { transform: scaleX(0); }
.pf-card:hover .pf-media::after { left: 100%; opacity: 1; }

/* Badges & tags */
.pf-badge {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.pf-tag {
  position: absolute; bottom: 12px; left: 12px; z-index: 4;
  background: var(--primary); color: #fff;
  padding: 5px 12px; border-radius: 8px;
  font-size: .82rem; font-weight: 600;
  transform: translateY(6px); opacity: 0;
  transition: transform .35s ease .05s, opacity .35s ease .05s;
}
.pf-card:hover .pf-tag { transform: translateY(0); opacity: 1; }

/* Body */
.pf-body { padding: 22px 22px 26px; }
.pf-body h3 { font-size: 1.25rem; margin-bottom: 4px; }
.pf-meta {
  font-size: .82rem; color: var(--primary); font-weight: 600;
  margin-bottom: 12px; opacity: .85;
}
.pf-body p { color: var(--text-light); font-size: .94rem; line-height: 1.6; }

/* Staggered scroll-in entrance for every card */
.pf-card.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.pf-card.reveal.visible { opacity: 1; transform: translateY(0); }
.pf-card.reveal:nth-child(3n+2).visible { transition-delay: .08s; }
.pf-card.reveal:nth-child(3n+3).visible { transition-delay: .16s; }

/* CTA band */
.pf-cta {
  background: linear-gradient(135deg, var(--primary), #1e40af);
  color: #fff;
  border-radius: 22px;
  margin: 20px auto;
  max-width: 1000px;
}
.pf-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pf-cta-copy h2 { color: #fff; font-family: var(--font-display); margin-bottom: 6px; }
.pf-cta-copy p { color: rgba(255,255,255,.9); margin: 0; }

@media (max-width: 560px) {
  .pf-cta { padding: 36px 22px; text-align: center; }
  .pf-cta-inner { justify-content: center; flex-direction: column; }
}

/* Reduced motion + print: keep before/after & zoom calm */
@media (prefers-reduced-motion: reduce) {
  .pf-media::before, .pf-media::after,
  .pf-img, .pf-card.reveal { transition: none !important; animation: none !important; }
  .pf-media::before { transform: scaleX(.0); }
  .pf-card.reveal { opacity: 1; transform: none; }
}

/* ============================================================
   PAINTER PROFILE PAGE
   ============================================================ */
.pp-hero { padding-top: 64px; }
.pp-hero-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 48px; align-items: center;
}
.pp-avatar { max-width: 320px; }
.pp-avatar svg { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.12)); animation: float-soft 4s ease-in-out infinite; }
.pp-avatar img.pp-photo {
  width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover;
  border-radius: 24px; border: 6px solid var(--surface); box-shadow: var(--shadow-lg);
  animation: float-soft 4s ease-in-out infinite;
}
.pp-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.pp-name { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: 10px; }
.pp-tagline { font-size: 1.2rem; color: var(--primary); font-weight: 600; margin-bottom: 16px; }
.pp-bio { color: var(--text-light); font-size: 1.05rem; line-height: 1.75; margin-bottom: 24px; }
.pp-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 28px 18px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.stat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stat-num { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--primary); }
.stat-label { display: block; margin-top: 4px; color: var(--text-light); font-size: .9rem; }

.pp-philosophy { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent); }
.pp-quote { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.pp-quote blockquote {
  font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.5; color: var(--text); font-style: italic; position: relative; padding: 0 24px;
}
.pp-quote blockquote::before { content: "“"; position: absolute; left: -8px; top: -20px; font-size: 4rem; color: var(--primary); opacity: .25; }
.pp-process { max-width: 760px; margin: 0 auto; list-style: none; counter-reset: step; padding: 0; }
.pp-process li {
  counter-increment: step; position: relative; padding: 16px 0 16px 64px; border-bottom: 1px solid var(--border);
  color: var(--text-light); font-size: 1.02rem; line-height: 1.6;
}
.pp-process li:last-child { border-bottom: none; }
.pp-process li::before {
  content: counter(step); position: absolute; left: 0; top: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-family: var(--font-display); font-weight: 700;
  display: grid; place-items: center;
}
.pp-process li strong { color: var(--text); }

.pp-contact { text-align: center; max-width: 760px; }
.pp-contact h2 { font-family: var(--font-display); margin-bottom: 24px; }
.pp-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.pp-contact-item {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 14px; text-decoration: none; color: var(--text); font-weight: 600;
  transition: transform .25s ease, border-color .25s ease;
}
a.pp-contact-item:hover { transform: translateY(-4px); border-color: var(--primary); color: var(--primary); }
.pp-contact-item span:first-child { font-size: 1.3rem; }
.pp-note { color: var(--text-light); font-size: .92rem; }

@media (max-width: 760px) {
  .pp-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .pp-avatar { margin: 0 auto; }
  .pp-cta { justify-content: center; }
}

/* ============================================================
   ADMIN PAGE — project manager (localStorage based)
   ============================================================ */
.adm-sub { color: var(--text-light); margin-bottom: 30px; max-width: 640px; }
.adm-sub a { color: var(--primary); }
.adm-gate { display: flex; justify-content: center; }
.adm-gate-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 30px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); text-align: center;
}
.adm-gate-card h3 { font-family: var(--font-display); margin-bottom: 10px; }
.adm-gate-note { color: var(--text-light); font-size: .85rem; line-height: 1.6; margin-bottom: 18px; }
.adm-gate-note code { background: var(--surface-hover); padding: 1px 6px; border-radius: 5px; font-size: .82rem; }
.adm-gate-form { display: flex; gap: 10px; }
.adm-gate-form .form-control { flex: 1; }
.adm-gate-error { color: #dc2626; font-size: .9rem; margin-top: 12px; }

.adm-panel { animation: fade-in .4s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Admin tabs */
.adm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 2px solid var(--border); }
.adm-tab {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  padding: 12px 18px; font-weight: 700; color: var(--text-light); cursor: pointer;
  font-size: .98rem; transition: color .2s, border-color .2s; margin-bottom: -2px;
}
.adm-tab:hover { color: var(--primary); }
.adm-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.adm-tabpane { animation: fade-in .3s ease; }

.adm-preview { margin-top: 10px; }
.adm-preview img { max-width: 160px; max-height: 200px; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.adm-form { display: flex; flex-direction: column; gap: 14px; }
.adm-form h3 { font-family: var(--font-display); margin-bottom: 4px; }
.adm-field { display: flex; flex-direction: column; gap: 5px; }
.adm-field > span { font-size: .85rem; font-weight: 600; color: var(--text); }
.adm-field small { color: var(--text-light); font-size: .78rem; }
.adm-field .form-control { width: 100%; }
.adm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.adm-form-actions { display: flex; gap: 12px; margin-top: 6px; }
.adm-form-actions .btn-ghost { border: 1.5px solid var(--border); }

.btn-ghost {
  display: inline-block; text-decoration: none; background: transparent;
  color: var(--text); border: 1.5px solid var(--border);
  padding: 10px 22px; border-radius: 999px; font-weight: 600; cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.adm-danger:hover { border-color: #dc2626; color: #dc2626; }

.adm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-list-head h3 { font-family: var(--font-display); }
.adm-list-tools { display: flex; gap: 8px; }
.adm-empty { color: var(--text-light); font-style: italic; }
.adm-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.adm-item {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface-hover);
}
.adm-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--border); }
.adm-item-body { flex: 1; min-width: 0; }
.adm-item-title { font-weight: 700; color: var(--text); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-item-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 999px; }
.adm-item-meta { font-size: .8rem; color: var(--text-light); margin-top: 2px; }
.adm-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-item-actions button { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .8rem; color: var(--text); transition: border-color .2s, color .2s; }
.adm-item-actions .edit:hover { border-color: var(--primary); color: var(--primary); }
.adm-item-actions .del:hover { border-color: #dc2626; color: #dc2626; }

.adm-export-box { margin-top: 28px; }
.adm-export-box p { color: var(--text-light); font-size: .88rem; margin-bottom: 8px; }
.adm-export-box code { background: var(--surface-hover); padding: 1px 5px; border-radius: 4px; }

/* Badge for user-added projects on the portfolio grid */
.pf-badge.user { background: var(--accent, #16a34a); }

@media (max-width: 860px) {
  .adm-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-avatar svg, .adm-panel { animation: none; }
}

/* ============================================================
   COLOR STUDIO (advanced) — full-scene live paint preview
   Four scenes (living, bedroom, kitchen, exterior) are stacked in
   one stage; only the active scene is shown, so switching never
   breaks layout. Every paintable element is a .paint-surface div
   positioned inline. Finishes add a sheen overlay; lighting adds a
   colour wash; the coverage slider interpolates toward the chosen
   colour so clients literally watch paint cover the wall.
   ============================================================ */
.cs-hero {
  background: linear-gradient(135deg, var(--primary), #1e40af);
  color: #fff;
  padding: 56px 0 44px;
  text-align: center;
}
.cs-hero-title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 12px; }
.cs-hero-title span { color: #ffd24d; }
.cs-hero-sub { max-width: 640px; margin: 0 auto; opacity: 0.95; font-size: 1.05rem; }
.cs-section { padding-top: 40px; }

.studio-advanced {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

/* --- Stage (left) --- */
.stage-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.scene-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.scene-tab {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.scene-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: #2a2a2a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.scene {
  position: absolute;
  inset: 0;
  display: none;
  perspective: 1100px;
}
.scene.active { display: block; }

/* Paintable surfaces */
.paint-surface {
  position: absolute;
  background-color: #e8e3d8;
  transition: background-color 0.5s ease;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.paint-surface.selected { box-shadow: inset 0 0 0 3px var(--primary), inset 0 0 0 1px rgba(0,0,0,0.04); z-index: 5; }
.paint-surface:hover { box-shadow: inset 0 0 0 3px rgba(37,99,235,0.5); }

/* Finish sheen overlays — applied via .scene[data-finish] .paint-surface::after */
.paint-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 0.4s ease;
}
.scene[data-finish="flatmatte"] .paint-surface::after { background: rgba(0,0,0,0.0); }
.scene[data-finish="matte"] .paint-surface::after { background: rgba(0,0,0,0.0); }
.scene[data-finish="eggshell"] .paint-surface::after { background: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(0,0,0,0.05)); }
.scene[data-finish="pearl"] .paint-surface::after { background: linear-gradient(125deg, rgba(255,255,255,0.12), rgba(0,0,0,0.04) 55%); }
.scene[data-finish="satin"] .paint-surface::after { background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(0,0,0,0.04) 60%); }
.scene[data-finish="semigloss"] .paint-surface::after { background: linear-gradient(115deg, rgba(255,255,255,0.34), rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.08)); }
.scene[data-finish="highgloss"] .paint-surface::after { background: linear-gradient(110deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08) 40%, rgba(0,0,0,0.1)); }
.scene[data-finish="metallic"] .paint-surface::after { background: linear-gradient(105deg, rgba(255,255,255,0.45), rgba(212,175,55,0.18) 35%, rgba(0,0,0,0.12) 70%, rgba(255,255,255,0.3)); }
.scene[data-finish="textured"] .paint-surface::after {
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.06) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, rgba(0,0,0,0.05) 1px, transparent 1.5px);
  background-size: 12px 12px, 14px 14px, 16px 16px;
}
.scene[data-finish="distemper"] .paint-surface::after { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.04), rgba(0,0,0,0.08)); }

/* Decorative props (non-paintable furniture/scenery) */
.prop { position: absolute; pointer-events: none; }
.prop-window {
  background: #bfe3ff;
  border: 5px solid #f4f1ea;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.prop-window .sun {
  position: absolute; top: 12%; right: 12%;
  width: 26%; aspect-ratio: 1;
  background: radial-gradient(circle, #fff7cc, #ffd24d);
  border-radius: 50%;
  transition: opacity 0.5s ease;
}
.prop-sofa {
  left: 24%; bottom: 16%; width: 44%; height: 16%;
  background: #6c757d; border-radius: 14px 14px 4px 4px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.28);
}
.prop-sofa::after { content:""; position:absolute; top:-30%; left:6%; right:6%; height:42%; background:#5a6268; border-radius:12px 12px 0 0; }
.prop-rug { left: 22%; bottom: 14%; width: 48%; height: 6%; background: #b08968; border-radius: 6px; opacity: 0.9; }
.prop-plant { width: 8%; aspect-ratio: 1/1.4; background: linear-gradient(#5a8f5a,#3f6b3f); border-radius: 50% 50% 8px 8px; }
.prop-frame { background: #c0392b; border: 4px solid #d4af37; border-radius: 2px; }

/* Bedroom props */
.prop-bed { left: 28%; bottom: 18%; width: 44%; height: 18%; background: #eef2f5; border-radius: 10px 10px 4px 4px; box-shadow: 0 10px 16px rgba(0,0,0,0.2); }
.prop-bed::after { content:""; position:absolute; top:0; left:0; right:0; height:34%; background:#cfd8e3; border-radius:10px 10px 0 0; }
.prop-headboard { left: 26%; bottom: 36%; width: 48%; height: 10%; background: #6b4f2a; border-radius: 8px 8px 0 0; }
.prop-lamp { width: 7%; aspect-ratio: 1/1.6; background: #f4d35e; border-radius: 50% 50% 6px 6px; box-shadow: 0 0 18px rgba(244,211,94,0.5); }

/* Kitchen props */
.prop-counter { left: 20%; bottom: 16%; width: 60%; height: 10%; background: #3a3a3a; border-radius: 4px; box-shadow: 0 8px 14px rgba(0,0,0,0.25); }
.prop-hood { left: 44%; bottom: 44%; width: 12%; height: 8%; background: #9aa0a6; border-radius: 6px 6px 0 0; }
.prop-stove { left: 40%; bottom: 16%; width: 20%; height: 10%; background: #1f1f1f; border-radius: 4px; }

/* Bathroom props */
.prop-tub { left: 22%; bottom: 16%; width: 56%; height: 14%; background: #f4f8fb; border: 4px solid #d6e6ed; border-radius: 20px; box-shadow: 0 8px 14px rgba(0,0,0,0.2); }
.prop-sink { right: 10%; bottom: 30%; width: 16%; height: 10%; background: #f4f8fb; border: 3px solid #d6e6ed; border-radius: 6px 6px 4px 4px; }
.prop-mirror { background: #d6e6ed; border: 4px solid #9aa0a6; border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.15); }

/* Kids' room props */
.prop-crib { left: 26%; bottom: 18%; width: 46%; height: 22%; background: #f4f1ea; border: 4px solid #d4af37; border-radius: 8px 8px 4px 4px; box-shadow: 0 10px 16px rgba(0,0,0,0.18); }
.prop-crib::after { content:""; position:absolute; top:30%; left:6%; right:6%; height:36%; background:repeating-linear-gradient(90deg, #d4af37 0 3px, transparent 3px 14px); opacity:0.6; }
.prop-toy { right: 12%; bottom: 18%; width: 12%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ffd24d, #f59e0b); border-radius: 50%; }
.prop-toy::after { content:""; position:absolute; top:0; right:-30%; width:70%; height:70%; background:radial-gradient(circle at 35% 30%, #f87171, #c0392b); border-radius:50%; }
.prop-balloon { width: 7%; aspect-ratio: 1/1.25; background: radial-gradient(circle at 35% 30%, #ff9aa2, #e74c6a); border-radius: 50% 50% 48% 48%; }
.prop-balloon::after { content:""; position:absolute; bottom:-26%; left:48%; width:2px; height:30%; background:#6b4f2a; }

/* Dining props */
.prop-table { left: 30%; bottom: 20%; width: 40%; height: 12%; background: #6b4f2a; border-radius: 8px; box-shadow: 0 10px 16px rgba(0,0,0,0.22); }
.prop-table::after { content:""; position:absolute; top:100%; left:8%; right:8%; height:42%; background: linear-gradient(#5a3a1a,#4a2a0a); border-radius: 0 0 6px 6px; }
.prop-chair-l { left: 18%; bottom: 20%; width: 11%; height: 22%; background: #4a2a0a; border-radius: 6px 6px 2px 2px; }
.prop-chair-l::after { content:""; position:absolute; top:-30%; left:0; right:0; height:30%; background:#3a1a00; border-radius: 8px 8px 2px 2px; }
.prop-chair-r { right: 18%; bottom: 20%; width: 11%; height: 22%; background: #4a2a0a; border-radius: 6px 6px 2px 2px; }
.prop-chair-r::after { content:""; position:absolute; top:-30%; left:0; right:0; height:30%; background:#3a1a00; border-radius: 8px 8px 2px 2px; }
.prop-pendant { background: #d4af37; border-radius: 0 0 50% 50%; box-shadow: 0 0 18px rgba(212,175,55,0.5); }
.prop-pendant::after { content:""; position:absolute; top:-30%; left:42%; width:16%; height:30%; background:#9aa0a6; }

/* Office props */
.prop-desk { left: 24%; bottom: 20%; width: 52%; height: 12%; background: #6b4f2a; border-radius: 6px; box-shadow: 0 8px 14px rgba(0,0,0,0.22); }
.prop-desk::after { content:""; position:absolute; top:100%; left:8%; right:8%; height:38%; background: linear-gradient(#5a3a1a,#4a2a0a); border-radius: 0 0 6px 6px; }
.prop-monitor { left: 38%; bottom: 32%; width: 24%; height: 22%; background: #1f2937; border: 4px solid #0f172a; border-radius: 4px; }
.prop-monitor::after { content:""; position:absolute; top:100%; left:38%; width:24%; height:18%; background:#1f2937; }
.prop-chair { left: 44%; bottom: 18%; width: 12%; height: 16%; background: #1f2937; border-radius: 8px 8px 4px 4px; }
.prop-chair::after { content:""; position:absolute; top:-40%; left:0; right:0; height:40%; background:#111827; border-radius: 8px 8px 2px 2px; }

/* Exterior props */
.prop-sun {
  left: 70%; top: 8%; width: 12%; aspect-ratio: 1;
  background: radial-gradient(circle, #fff7cc, #ffd24d 60%, #ffb347);
  border-radius: 50%; box-shadow: 0 0 40px rgba(255,210,77,0.6);
}
.prop-tree { width: 14%; aspect-ratio: 1/1.6; }
.prop-tree::before { content:""; position:absolute; bottom:0; left:42%; width:16%; height:50%; background:#5a3a1a; }
.prop-tree::after { content:""; position:absolute; top:0; left:0; right:0; height:75%; background:radial-gradient(circle at 50% 60%, #4a7c3a, #2f5223); border-radius:50%; }
.prop-tree-sm { width: 9%; aspect-ratio: 1/1.8; }
.prop-tree-sm::before { content:""; position:absolute; bottom:0; left:40%; width:20%; height:45%; background:#5a3a1a; }
.prop-tree-sm::after { content:""; position:absolute; top:0; left:0; right:0; height:78%; background:radial-gradient(circle at 50% 60%, #4a7c3a, #2f5223); border-radius:50%; }
.prop-window-ext { background: #bfe3ff; border: 4px solid #f4f1ea; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

/* Lighting wash */
.scene-light {
  position: absolute; inset: 0; pointer-events: none;
  transition: background 0.5s ease;
  background: rgba(255, 245, 200, 0.0);
  z-index: 20;
}
.scene[data-light="night"] .scene-light { background: rgba(20, 24, 60, 0.45); }
.scene[data-light="night"] .prop-window,
.scene[data-light="night"] .prop-window-ext { background: #1a2b50; }
.scene[data-light="night"] .prop-window .sun,
.scene[data-light="night"] .prop-sun { opacity: 0.2; }

/* On-photo readout (HUD) — selected surface size + square feet, over the picture */
.stage-hud {
  position: absolute;
  right: 14px; top: 14px;
  z-index: 6;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  backdrop-filter: blur(6px);
  pointer-events: none;
  font-size: 0.82rem;
  max-width: 62%;
}
.stage-hud-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stage-hud-name { font-weight: 700; }
.stage-hud-dim { font-family: monospace; color: rgba(255,255,255,0.75); }
.stage-hud-sqft { font-family: monospace; font-size: 1.05rem; }
.stage-hud-total { font-family: monospace; font-size: 0.78rem; color: rgba(255,255,255,0.8); text-align: right; }

/* Coverage slider */
.coverage {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.coverage label { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.coverage input[type="range"] { flex: 1; accent-color: var(--primary); }
.coverage span { font-family: monospace; font-size: 0.9rem; min-width: 42px; text-align: right; }

/* --- Controls (right) --- */
.controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.ctrl-group { margin-bottom: 20px; }
.ctrl-group h3 { font-size: 1rem; margin-bottom: 10px; }

.surface-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.surface-tab {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.surface-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.palette { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.swatch {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active::after {
  content: "✓";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-weight: 700;
}
.custom-colour { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.custom-colour label { font-size: 0.9rem; color: var(--text-light); }
#customColor { width: 42px; height: 42px; border: none; border-radius: 8px; cursor: pointer; background: none; }
#customColor::-webkit-color-swatch-wrapper { padding: 0; }
#customColor::-webkit-color-swatch { border: 2px solid var(--border); border-radius: 8px; }
.custom-hex { font-family: monospace; font-size: 0.9rem; }
.harmony { font-size: 0.8rem; color: var(--text-light); margin-top: 8px; min-height: 1em; }

.finish-tabs, .preset-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.finish-tab, .preset-tab {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.finish-tab.active, .preset-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.finish-note { font-size: 0.8rem; color: var(--text-light); margin-top: 8px; min-height: 1em; }

.scheme-summary { margin-bottom: 14px; }
.scheme-summary .ss-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px; font-size: 0.82rem;
}
.scheme-summary .ss-row + .ss-row { border-top: 1px solid var(--border); }
.scheme-summary .ss-chip {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0;
}
.scheme-summary .ss-name { flex: 1; color: var(--text-light); }
.scheme-summary .ss-hex { font-family: monospace; }

.ctrl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ctrl-actions .btn-secondary {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.25s;
}
.ctrl-actions .btn-secondary:hover { background: var(--border); }
.ctrl-actions .btn-primary { flex: 1; min-width: 140px; text-align: center; }

/* --- Area & square feet estimator --- */
.area-hint { font-size: 0.8rem; color: var(--text-light); margin-bottom: 10px; }
.area-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  margin-bottom: 12px;
}
.area-field { display: flex; flex-direction: column; gap: 4px; }
.area-field label { font-size: 0.72rem; color: var(--text-light); font-weight: 600; }
.area-field input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}
.area-field input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.area-field--out {
  justify-content: flex-end;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}
.area-out-label { font-size: 0.72rem; color: var(--text-light); font-weight: 600; }
.area-out-value { font-family: monospace; font-size: 0.95rem; font-weight: 700; }

.area-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.area-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.area-row + .area-row { border-top: 1px solid var(--border); }
.area-row:hover { background: var(--surface-hover); }
.area-row.active { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.area-row input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.area-row-name { flex: 1; }
.area-row-dim { color: var(--text-light); font-family: monospace; font-size: 0.74rem; }
.area-row-val { font-family: monospace; font-weight: 600; min-width: 72px; text-align: right; }

.area-total {
  border: 1px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.area-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
}
.area-total-row + .area-total-row { margin-top: 4px; }
.area-total-row strong { font-family: monospace; font-size: 1rem; }

.area-paint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.area-paint label { font-size: 0.8rem; color: var(--text-light); font-weight: 600; }
.area-paint select {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.area-estimate { font-size: 0.85rem; font-weight: 700; color: var(--primary); margin-left: auto; }
.area-reset {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.25s;
}
.area-reset:hover { background: var(--border); }

/* How-it-works cards */
.cs-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.cs-how-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cs-how-ic { font-size: 2rem; margin-bottom: 8px; }
.cs-how-card h3 { font-size: 1rem; margin-bottom: 8px; }
.cs-how-card p { font-size: 0.85rem; color: var(--text-light); }

@media (max-width: 900px) {
  .studio-advanced { grid-template-columns: 1fr; }
  .cs-how-grid { grid-template-columns: repeat(2, 1fr); }
  .palette { grid-template-columns: repeat(9, 1fr); }
}
@media (max-width: 560px) {
  .palette { grid-template-columns: repeat(6, 1fr); }
  .cs-how-grid { grid-template-columns: 1fr; }
  .ctrl-actions .btn-secondary, .ctrl-actions .btn-primary { width: 100%; text-align: center; }
  .area-inputs { grid-template-columns: 1fr 1fr; }
  .area-field--out { grid-column: 1 / -1; }
  .area-row-dim { display: none; }
}

@media (max-width: 900px) {
  .about-grid, .contact-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mobile-toggle { display: block; }
  .nav-links { display: none; flex-direction: column; width: 100%; padding-top: 12px; }
  .nav-links.open { display: flex; }
  .hero h1 { font-size: 2.8rem; }
  .section-title { font-size: 2.1rem; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TEAM & ROLES
   Role colours are shared by the badges, the team cards and the
   role pickers so a member's role is recognisable everywhere.
   ============================================================ */

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--role-painter);
  white-space: nowrap;
}
.role-badge.role-owner { background: var(--role-owner); }
.role-badge.role-head { background: var(--role-head); }
.role-badge.role-supervisor { background: var(--role-supervisor); }
.role-badge.role-painter { background: var(--role-painter); }
.role-badge.role-helper { background: var(--role-helper); }

/* --- Team page --- */
.tm-hero { text-align: center; padding-bottom: 0; }
.tm-title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: 12px; }
.tm-title span { color: var(--primary); }
.tm-sub { max-width: 720px; margin: 0 auto; color: var(--text-light); font-size: 1.05rem; }

.tm-roles-section { padding-top: 40px; padding-bottom: 0; }
.tm-role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  text-align: center;
  transition: transform var(--transition), border-color var(--transition);
}
.tm-role-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.tm-role-ic { font-size: 2rem; margin-bottom: 8px; }
.tm-role-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.tm-role-card p { color: var(--text-light); font-size: .86rem; line-height: 1.6; }
.tm-role-count {
  display: inline-block;
  margin-top: 12px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 3px 12px;
}

.tm-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.tm-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-filter {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: .85rem;
  transition: background .25s, color .25s, border-color .25s;
}
.tm-filter:hover { border-color: var(--primary); color: var(--primary); }
.tm-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tm-empty { text-align: center; color: var(--text-light); font-style: italic; }

.tm-card { display: block; text-decoration: none; color: inherit; padding: 26px 22px; border-top: 4px solid var(--border); }
.tm-card.role-owner { border-top-color: var(--role-owner); }
.tm-card.role-head { border-top-color: var(--role-head); }
.tm-card.role-supervisor { border-top-color: var(--role-supervisor); }
.tm-card.role-painter { border-top-color: var(--role-painter); }
.tm-card.role-helper { border-top-color: var(--role-helper); }
.tm-media { position: relative; display: grid; place-items: center; margin-bottom: 16px; }
.tm-media .role-badge { position: absolute; top: -4px; right: 0; }
.tm-photo, .tm-initials {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
}
.tm-initials {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-family: var(--font-display); font-size: 2rem; font-weight: 800;
}
.tm-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.tm-title-line { color: var(--primary); font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.tm-tagline { color: var(--text-light); font-size: .9rem; line-height: 1.6; }
.tm-stats { display: block; margin-top: 10px; color: var(--text-light); font-size: .82rem; }
.tm-toolbar-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: .85rem; color: var(--primary); }

/* --- Member profile: role controls --- */
.pp-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-badges .pp-eyebrow { margin-bottom: 0; }
.pp-role-card { text-align: left; padding: 30px; }
.pp-role-heading { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 10px; }
.pp-role-note { color: var(--text-light); font-size: .92rem; line-height: 1.7; margin-bottom: 20px; }
.pp-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pp-role-option {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; cursor: pointer;
  background: var(--surface-hover);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text);
  transition: border-color .25s, transform .25s, background .25s;
}
.pp-role-option:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--primary); }
.pp-role-option.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.pp-role-option:disabled { opacity: .45; cursor: not-allowed; }
.pp-role-option .pro-ic { font-size: 1.4rem; }
.pp-role-option .pro-label { font-weight: 700; }
.pp-role-option .pro-desc { font-size: .78rem; color: var(--text-light); line-height: 1.5; }
.pp-role-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pp-role-status { margin-top: 14px; font-weight: 600; color: var(--primary); min-height: 1.4em; }
.pp-role-status.is-error { color: #dc2626; }

.pp-lock-section { padding: 26px 0 0; }
.pp-lock-note { text-align: center; color: var(--text-light); font-size: .88rem; }
.pp-lock-note a { color: var(--primary); font-weight: 600; }

/* --- Admin: role picker + member avatar in the roster --- */
.adm-item-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-weight: 800; font-size: .95rem;
}
.adm-item-actions { flex-wrap: wrap; justify-content: flex-end; }
.adm-item-actions .edit { text-decoration: none; display: inline-block; }
.adm-role-select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: .8rem;
  cursor: pointer;
}

@media (max-width: 700px) {
  .tm-toolbar { flex-direction: column; align-items: stretch; }
  .adm-item { flex-wrap: wrap; }
  .adm-item-actions { width: 100%; justify-content: flex-start; }
}

/* --- Daily work log (worklog.html) --- */
.wl-daybar {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 24px;
}
.wl-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 170px; }
.wl-field > span { font-size: .8rem; font-weight: 600; color: var(--text-light); }
.wl-field .form-control { width: 100%; }
/* ERP approval badge in the logged-days history */
.wl-appr { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.wl-appr-ok { background: rgba(22,163,74,.14); color: #15803d; }
.wl-appr-wait { background: rgba(217,119,6,.14); color: #b45309; }
.wl-appr-bad { background: rgba(220,38,38,.14); color: #b91c1c; }
[data-theme='dark'] .wl-appr-ok { color: #4ade80; }
[data-theme='dark'] .wl-appr-wait { color: #fbbf24; }
[data-theme='dark'] .wl-appr-bad { color: #f87171; }
.wl-status {
  margin-left: auto; align-self: center;
  font-size: .82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
}
.wl-status-open { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.wl-status-submitted { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }

.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.wl-preview img { max-width: 100%; max-height: 240px; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; }
.wl-hint { font-size: .85rem; min-height: 1.2em; color: var(--primary); }

.wl-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: var(--surface);
}
.wl-thumb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px;
  object-fit: cover; background: var(--surface-hover);
}
.wl-thumb-empty { display: grid; place-items: center; font-size: 1.4rem; }
.wl-item-body { flex: 1; min-width: 0; }
.wl-item-title { font-weight: 700; color: var(--text); }
.wl-item-meta { font-size: .8rem; color: var(--text-light); margin-top: 2px; }
.wl-item-val { font-family: monospace; font-weight: 700; white-space: nowrap; }
.wl-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wl-item-actions button {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; cursor: pointer; font-size: .8rem; color: var(--text);
  transition: border-color .2s, color .2s;
}
.wl-item-actions .edit:hover { border-color: var(--primary); color: var(--primary); }
.wl-item-actions .del:hover { border-color: #dc2626; color: #dc2626; }

.wl-totals {
  margin-top: 18px; padding: 16px; border-radius: 14px;
  background: var(--surface-hover); border: 1px solid var(--border);
}
.wl-total-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wl-total-main span { font-weight: 600; color: var(--text-light); }
.wl-total-main strong { font-family: monospace; font-size: 1.5rem; color: var(--primary); }
.wl-total-sub { font-size: .82rem; color: var(--text-light); margin-top: 2px; }
.wl-breakdown { list-style: none; padding: 12px 0 0; margin: 10px 0 0; border-top: 1px dashed var(--border); }
.wl-breakdown li { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-light); padding: 2px 0; }
.wl-breakdown li span:last-child { font-family: monospace; color: var(--text); }

.wl-submit-row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.wl-submit-row .btn-primary { flex: 1; }
.wl-empty { color: var(--text-light); font-style: italic; }

.wl-history-card { margin-top: 28px; }
.wl-hist-note { font-size: .78rem; color: var(--text-light); }
.wl-history { display: flex; flex-direction: column; gap: 8px; }
.wl-hist-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  background: var(--surface); color: var(--text); font: inherit;
  transition: border-color .2s, background .2s;
}
.wl-hist-row:hover { border-color: var(--primary); }
.wl-hist-row.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.wl-hist-date { font-weight: 700; font-family: monospace; }
.wl-hist-proj { color: var(--text-light); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-hist-val { font-family: monospace; font-weight: 700; }

/* --- Work log: day rates (labour + paint) --- */
.wl-rates {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 24px;
}
.wl-rates .wl-field { flex: 0 1 200px; }
.wl-rates-note { align-self: center; font-size: .78rem; color: var(--text-light); margin-left: auto; }

/* --- Work log: on-photo measurement --- */
.wl-measure {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px dashed var(--border); border-radius: 14px; padding: 14px;
  background: var(--surface-hover);
}
.wl-measure-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wl-measure-title { font-weight: 700; font-size: .9rem; }
.wl-measure-mode { font-size: .78rem; color: var(--text-light); font-family: monospace; }
.wl-canvas {
  width: 100%; height: auto; max-height: 460px; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--border); background: #0b1220;
  touch-action: none; cursor: crosshair; display: block;
}
.wl-measure-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-measure-tools .btn-ghost { border: 1.5px solid var(--border); }
.wl-measure-tools button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wl-measure-calib { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wl-calib-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wl-presets-label { font-size: .8rem; font-weight: 600; color: var(--text-light); }
.wl-calib-presets .btn-ghost { border: 1.5px solid var(--border); }
.wl-measure-out {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.wl-measure-out span { font-size: .82rem; font-weight: 600; color: var(--text-light); }
.wl-measure-out strong { font-family: monospace; font-size: 1.2rem; color: var(--primary); }
.wl-measure-note { color: var(--text-light); font-size: .76rem; }

/* --- Work log: measured badge + labour/paint rows --- */
.wl-tag {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary);
  padding: 2px 8px; border-radius: 999px;
}
.wl-econ { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.wl-econ-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .85rem; padding: 3px 0; }
.wl-econ-row span { color: var(--text-light); }
.wl-econ-row strong { font-family: monospace; color: var(--text); }
.wl-econ-hint span { font-style: italic; }

@media (max-width: 860px) {
  .wl-grid { grid-template-columns: 1fr; }
  .wl-measure-calib { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .wl-status { margin-left: 0; }
  .wl-item { flex-wrap: wrap; }
  .wl-item-actions { width: 100%; justify-content: flex-end; }
  .wl-rates-note { margin-left: 0; }
}


/* ============================================================
   PAINT MY PHOTO (Color Studio)
   ============================================================ */
.cs-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.cs-hero-actions .btn-primary,
.cs-hero-actions .btn-secondary { text-decoration: none; }

.pmp-lead { max-width: 760px; margin: 0 auto 34px; text-align: center; color: var(--text-light); font-size: 1.02rem; line-height: 1.6; }

.pmp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }

/* --- left: stage --- */
.pmp-stage-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.pmp-source-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pmp-file { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pmp-canvas-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #0b1220; min-height: 240px; display: flex; align-items: center; justify-content: center; }
#pmpCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.pmp-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #cbd5e1; padding: 24px; }
.pmp-empty-ic { font-size: 2.4rem; }
.pmp-empty p { max-width: 320px; font-size: 0.95rem; }
.pmp-empty[hidden] { display: none; }

.pmp-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pmp-tool.active, .pmp-finish.active, .pmp-tex.active, .pmp-atype.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pmp-hint { margin-top: 12px; font-size: 0.92rem; color: var(--text-light); min-height: 1.3em; }

/* --- right: controls --- */
.pmp-controls { display: flex; flex-direction: column; gap: 18px; }
.pmp-controls .ctrl-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.pmp-controls .ctrl-group h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 12px; }

.pmp-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px; }
.pmp-swatch { width: 100%; aspect-ratio: 1; border-radius: 9px; border: 2px solid var(--border); background: var(--sw); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.pmp-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pmp-swatch.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

.pmp-custom { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pmp-custom label { font-size: 0.9rem; color: var(--text-light); }
.pmp-custom input[type="color"] { width: 46px; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: none; cursor: pointer; padding: 2px; }
.pmp-hex { width: 110px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-family: monospace; }

.pmp-finishes, .pmp-textures, .pmp-area-type { display: flex; flex-wrap: wrap; gap: 8px; }
.pmp-finish, .pmp-tex, .pmp-atype { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-size: 0.88rem; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.pmp-finish:hover, .pmp-tex:hover, .pmp-atype:hover { border-color: var(--primary); }

.pmp-note { font-size: 0.83rem; color: var(--text-light); margin-top: 10px; line-height: 1.5; }
.pmp-slider-label { display: block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 6px; }
.pmp-slider-label span { color: var(--text); font-weight: 600; }
.pmp-controls input[type="range"] { width: 100%; accent-color: var(--primary); }

.pmp-area-hint { font-size: 0.86rem; color: var(--text-light); margin-bottom: 12px; }
.pmp-area-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pmp-area-inputs label { display: block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 4px; }
.pmp-area-inputs input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); }
.pmp-area-out { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pmp-area-out span { color: var(--text-light); font-size: 0.9rem; }
.pmp-area-out strong { font-size: 1.3rem; font-family: var(--font-display); }

.pmp-material { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pmp-mat-row { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "ic label amt" "ic label pack"; align-items: center; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.pmp-mat-ic { grid-area: ic; font-size: 1.15rem; }
.pmp-mat-label { grid-area: label; font-size: 0.9rem; color: var(--text); }
.pmp-mat-amt { grid-area: amt; font-weight: 700; font-family: var(--font-display); text-align: right; }
.pmp-mat-pack { grid-area: pack; font-size: 0.78rem; color: var(--text-light); text-align: right; }

@media (max-width: 900px) {
  .pmp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pmp-tools { gap: 8px; }
  .pmp-finish, .pmp-tex, .pmp-atype { flex: 1 1 auto; text-align: center; }
}


/* ============================================================
   PAINTER ERP (erp.html) — projects, approvals, billing, reports
   ============================================================ */
.erp-lead { color: var(--text-light); max-width: 720px; margin-bottom: 20px; }
.erp-h4 { font-family: var(--font-display); margin: 26px 0 12px; font-size: 1.02rem; }
.erp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.erp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm);
}
.erp-card + .erp-card { margin-top: 22px; }
.erp-card h3 { font-family: var(--font-display); margin-bottom: 14px; }
.erp-empty { color: var(--text-light); font-size: .92rem; }
.erp-empty a { color: var(--primary); }

/* KPIs */
.erp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.erp-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
}
.erp-kpi-label { color: var(--text-light); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.erp-kpi-value { font-family: var(--font-display); font-size: 1.5rem; }
.erp-kpi-sub { color: var(--text-light); font-size: .84rem; }
.erp-kpi-ok { border-left: 4px solid #16a34a; }
.erp-kpi-warn { border-left: 4px solid #d97706; }
.erp-kpi-bad { border-left: 4px solid #dc2626; }

/* Lists / rows */
.erp-list { list-style: none; }
.erp-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.erp-list .erp-row:last-child { border-bottom: none; }
.erp-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.erp-row-sub { color: var(--text-light); font-size: .85rem; }
.erp-row-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.erp-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Badges */
.erp-badge { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.erp-badge-approved { background: rgba(22,163,74,.14); color: #15803d; }
.erp-badge-pending { background: rgba(217,119,6,.14); color: #b45309; }
.erp-badge-rejected { background: rgba(220,38,38,.14); color: #b91c1c; }
.erp-badge-open { background: rgba(22,163,74,.14); color: #15803d; }
[data-theme='dark'] .erp-badge-approved, [data-theme='dark'] .erp-badge-open { color: #4ade80; }
[data-theme='dark'] .erp-badge-pending { color: #fbbf24; }
[data-theme='dark'] .erp-badge-rejected { color: #f87171; }

/* Mini buttons */
.erp-mini {
  background: var(--surface-hover); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 6px 11px; font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.erp-mini:hover { border-color: var(--primary); }
.erp-mini.erp-ok { background: rgba(22,163,74,.12); color: #15803d; }
.erp-mini.erp-danger { background: rgba(220,38,38,.1); color: #b91c1c; }
[data-theme='dark'] .erp-mini.erp-ok { color: #4ade80; }
[data-theme='dark'] .erp-mini.erp-danger { color: #f87171; }

/* Forms */
.erp-form { display: flex; flex-direction: column; gap: 8px; }
.erp-form label { font-size: .86rem; font-weight: 600; margin-top: 6px; }
.erp-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.erp-form-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Tables */
.erp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.erp-table th, .erp-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.erp-table th { color: var(--text-light); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.erp-table tbody tr:hover { background: var(--surface-hover); }

/* Billing */
.erp-bill-out { margin-top: 18px; }
.erp-bill-head h3 { font-family: var(--font-display); margin-bottom: 4px; }
.erp-bill-total {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 18px 0; padding: 18px; border-radius: 14px;
  background: var(--surface-hover); border: 1px solid var(--border);
}
.erp-bill-total > div { display: flex; flex-direction: column; gap: 3px; }
.erp-bill-total span { color: var(--text-light); font-size: .8rem; }
.erp-bill-total strong { font-family: var(--font-display); font-size: 1.05rem; }
.erp-bill-total .erp-grand { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 12px; }
.erp-bill-total .erp-grand strong { font-size: 1.6rem; color: var(--primary); }
.erp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

/* Callouts */
.erp-callout { border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-size: .9rem; }
.erp-callout-warn { background: rgba(217,119,6,.1); border-left: 4px solid #d97706; }
.erp-callout-bad { background: rgba(220,38,38,.08); border-left: 4px solid #dc2626; }
.erp-subtabs { margin-bottom: 18px; }

@media (max-width: 900px) {
  .erp-kpis { grid-template-columns: repeat(2, 1fr); }
  .erp-two { grid-template-columns: 1fr; }
  .erp-bill-total { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .erp-form-row { grid-template-columns: 1fr; }
  .erp-kpis { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK RECORD, GALLERY & CREW GALLERY
   The profile's record band is DERIVED from the work log (js/gallery.js),
   so these styles only present evidence — they do not assert anything.
   ============================================================ */
.pp-record-sub { max-width: 720px; margin: -8px auto 26px; text-align: center; color: var(--text-light); font-size: 1rem; }
.pp-record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.pp-record-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 22px 16px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;
}
.pp-record-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pp-record-ic { font-size: 1.8rem; }
.pp-record-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.pp-record-label { color: var(--text-light); font-size: .86rem; }
.pp-record-window { text-align: center; color: var(--text-light); font-size: .92rem; margin-top: 18px; }
.pp-record-projects { max-width: 720px; margin: 22px auto 0; }
.pp-record-projects h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 10px; text-align: center; }
.pp-record-projects ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; }
.pp-record-projects li { background: var(--surface-hover); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: .9rem; }
.pp-record-empty, .pp-gallery-empty { text-align: center; color: var(--text-light); padding: 24px; }

/* --- gallery grid on the profile page --- */
.pp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.pp-gallery-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s, border-color .3s; font: inherit; color: inherit;
}
.pp-gallery-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.pp-gallery-media { display: block; aspect-ratio: 4 / 3; background: var(--surface-hover); }
.pp-gallery-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-gallery-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; }
.pp-gallery-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 16px; }
.pp-gallery-body strong { font-family: var(--font-display); }
.pp-gallery-meta { color: var(--text-light); font-size: .82rem; }

/* --- self-edit card --- */
.pp-edit-card { padding: 28px; }
.pp-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pp-field span { font-size: .86rem; font-weight: 600; }
.pp-edit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.pp-edit-subhead { font-family: var(--font-display); font-size: 1.05rem; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.pp-claim-note { color: var(--text-light); }
.pp-preview { margin: 12px 0; }
.pp-preview img { max-width: 260px; border-radius: 12px; border: 1px solid var(--border); }

/* --- gallery list in the editor --- */
.pp-glist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-glist-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-hover); }
.pp-glist-item img, .pp-glist-noimg { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--surface); flex: none; }
.pp-glist-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pp-glist-body span { color: var(--text-light); font-size: .82rem; }
.pp-glist-del { border: none; background: none; cursor: pointer; font-size: 1.1rem; padding: 6px; border-radius: 8px; }
.pp-glist-del:hover { background: rgba(220,38,38,.12); }

/* --- lightbox --- */
.pp-lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .85); padding: 24px; animation: pp-fade .2s ease;
}
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
.pp-lb-figure { max-width: min(900px, 92vw); max-height: 88vh; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-lb-figure img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 14px; background: #0b1220; }
.pp-lb-figure figcaption { color: #f8fafc; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.pp-lb-figure figcaption span { color: #cbd5e1; font-size: .88rem; }
.pp-lb-close, .pp-lb-nav {
  position: absolute; border: none; cursor: pointer; color: #fff; background: rgba(255,255,255,.12);
  border-radius: 999px; width: 46px; height: 46px; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.pp-lb-close { top: 20px; right: 20px; }
.pp-lb-nav { top: 50%; transform: translateY(-50%); }
.pp-lb-prev { left: 20px; }
.pp-lb-next { right: 20px; }
.pp-lb-close:hover, .pp-lb-nav:hover { background: rgba(255,255,255,.28); }

/* --- crew gallery page --- */
.cg-section { padding-top: 30px; }
.cg-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.cg-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-project-filter { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-light); }
.cg-project-filter .form-control { width: auto; min-width: 180px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.cg-card { margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.cg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cg-media { display: block; padding: 0; border: none; cursor: pointer; aspect-ratio: 4 / 3; background: var(--surface-hover); }
.cg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; }
.cg-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; }
.cg-body strong { font-family: var(--font-display); }
.cg-meta { color: var(--text-light); font-size: .82rem; }
.cg-by { color: var(--text-light); font-size: .82rem; }
.cg-by a { color: var(--primary); font-weight: 600; }
.cg-empty { text-align: center; color: var(--text-light); padding: 30px; }
.cg-cta { text-align: center; margin-top: 40px; }
.cg-cta p { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 14px; }

@media (max-width: 640px) {
  .pp-edit-card { padding: 20px; }
  .cg-toolbar { flex-direction: column; align-items: stretch; }
}