:root{
  --bg:#0b0d10; --panel:#12151b; --text:#eef2ff; --muted:#b8c0d6; --muted2:#9aa4bf;
  --border:rgba(255,255,255,.08); --shadow:0 24px 80px rgba(0,0,0,.55);
  --shadow2:0 14px 40px rgba(0,0,0,.45); --gold:#d9b45a; --accent:#ff5a3d; --accent2:#ffb14a;
  --radius:26px; --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(255,90,61,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(217,180,90,.14), transparent 55%),
    radial-gradient(900px 900px at 60% 110%, rgba(100,170,255,.10), transparent 55%),
    var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(11,13,16,.68); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:44px; height:44px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.04); padding:6px; border:1px solid var(--border)}
.brand .title{font-weight:800; letter-spacing:.18em; font-size:14px; text-transform:uppercase}
.brand .sub{font-size:12px; color:var(--muted2); margin-top:2px}
.lang{display:flex; gap:8px; align-items:center}
.lang button{
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:14px; cursor:pointer; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.lang button.active{
  background:linear-gradient(180deg, rgba(217,180,90,.18), rgba(255,255,255,.04));
  border-color:rgba(217,180,90,.35); box-shadow:0 10px 30px rgba(217,180,90,.12);
}
.cta-row{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:11px 14px; border-radius:16px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--text); font-weight:800;
}
.btn.primary{
  background:linear-gradient(135deg, rgba(255,90,61,.95), rgba(255,177,74,.90));
  border-color:rgba(255,177,74,.45); box-shadow:0 18px 60px rgba(255,90,61,.25);
}
.btn svg{width:18px; height:18px}
.hero{padding:44px 0 26px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:stretch}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.hero-left{padding:26px}
.kicker{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); font-weight:700; letter-spacing:.06em; font-size:12px}
.kicker .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 0 0 6px rgba(255,90,61,.12)}
.welcome-line{margin:0; font-size:14px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--text); text-align:center}
.welcome-sub{margin:0; font-size:12px; letter-spacing:.04em; color:var(--muted); text-align:center}
.h1{margin:14px 0 10px; font-size:clamp(36px,5vw,56px); line-height:1.02; letter-spacing:.14em; text-transform:uppercase; font-weight:900}
.lead{color:var(--muted); font-size:16px; line-height:1.6; max-width:54ch}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pill{padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(0,0,0,.14); color:var(--muted); font-weight:700; font-size:13px}
.pill strong{color:var(--text)}
.brush-reveal{margin-top:18px; border-radius:18px; border:1px solid var(--border); background:rgba(0,0,0,.18); padding:14px}
.brush-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.brush-top .label{font-size:12px; color:var(--muted2); letter-spacing:.1em; text-transform:uppercase; font-weight:800}
.brush-track{position:relative; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid var(--border); height:54px}
.brush-track .paint{position:absolute; inset:0; width:0%; background:linear-gradient(135deg, rgba(255,90,61,.95), rgba(255,177,74,.92))}
.brush-track.unlocked .paint{opacity:0}
.brush-track .phone{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:.08em; font-size:18px}
.brush{position:absolute; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:18px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); display:grid; place-items:center; box-shadow:0 18px 60px rgba(0,0,0,.35)}
.brush svg{width:22px; height:22px; opacity:.92}
.hero-right{position:relative; display:flex; flex-direction:column}
.hero-photo{position:relative; height:100%; min-height:430px; display:flex; align-items:stretch}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(1.06) contrast(1.04)}
.hero-photo:after{content:""; position:absolute; inset:0; background:radial-gradient(700px 520px at 60% 10%, transparent, rgba(0,0,0,.55)), linear-gradient(180deg, transparent 40%, rgba(11,13,16,.80))}
.badge{position:absolute; left:18px; right:18px; bottom:18px; padding:14px; border-radius:20px; border:1px solid rgba(255,255,255,.14); background:rgba(11,13,16,.58); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:space-between; gap:12px}
.badge .name{font-weight:900; letter-spacing:.06em}
.badge .meta{color:var(--muted); font-size:13px}
.badge .icons{display:flex; gap:10px}
.badge .icons a{width:42px; height:42px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.05); display:grid; place-items:center}
.badge .icons svg{width:18px; height:18px}
.section{padding:28px 0}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:14px}
.h2{margin:0; font-size:28px}
.desc{color:var(--muted); margin:0; font-size:14px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card{padding:18px}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); line-height:1.6}
.list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.list li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); padding:12px; border:1px solid var(--border); border-radius:18px; background:rgba(0,0,0,.14)}
.check{width:22px; height:22px; border-radius:7px; background:rgba(217,180,90,.15); border:1px solid rgba(217,180,90,.35); display:grid; place-items:center; flex:0 0 auto; margin-top:1px}
.check svg{width:14px; height:14px; color:var(--gold)}
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.kpi .box{padding:14px; border-radius:18px; border:1px solid var(--border); background:rgba(0,0,0,.12)}
.kpi .big{font-size:20px; font-weight:900}
.kpi .small{font-size:12px; color:var(--muted2); margin-top:4px; letter-spacing:.06em; text-transform:uppercase}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.g-item{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--border); background:rgba(255,255,255,.03); box-shadow:var(--shadow2); cursor:pointer}
.g-item img{width:100%; height:240px; object-fit:cover}
.g-item .cap{position:absolute; left:12px; right:12px; bottom:12px; padding:10px 12px; border-radius:16px; background:rgba(11,13,16,.62); border:1px solid rgba(255,255,255,.14); color:var(--muted); font-weight:700; font-size:12px; backdrop-filter:blur(10px); display:none}
.modal{position:fixed; inset:0; z-index:100; display:none; place-items:center; background:rgba(0,0,0,.78); padding:18px}
.modal.open{display:grid}
.modal .frame{position:relative; width:min(980px,100%); border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:rgba(12,14,18,.85); backdrop-filter:blur(12px); box-shadow:0 30px 120px rgba(0,0,0,.7)}
.modal .top{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10)}
.modal .top .t{font-weight:800; color:var(--muted)}
.modal .close{width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); display:grid; place-items:center; cursor:pointer}
.mnav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff; font-size:28px; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:2}
.mnav.prev{left:12px}
.mnav.next{right:12px}
.mnav[hidden]{display:none}
.modal img{width:100%; height:auto; display:block}
.reviews{display:grid; grid-template-columns:1.25fr .75fr; gap:16px}
.review-list{display:grid; gap:12px}
.review{padding:16px; border-radius:22px; border:1px solid var(--border); background:rgba(0,0,0,.14)}
.stars{letter-spacing:2px; color:var(--gold); font-size:16px}
.review .txt{margin:8px 0 0; color:var(--muted); line-height:1.65}
.review .who{margin-top:10px; color:var(--muted2); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.form label{display:block; color:var(--muted2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; margin:12px 0 6px}
.field{width:100%; padding:12px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); outline:none}
textarea.field{min-height:110px; resize:vertical}
.star-picker{display:flex; gap:6px; align-items:center}
.star-picker button{width:38px; height:38px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04); cursor:pointer; color:var(--gold); font-size:18px}
.star-picker button.on{background:rgba(217,180,90,.14); border-color:rgba(217,180,90,.35)}
.smallnote{color:var(--muted2); font-size:12px; margin-top:10px; line-height:1.45}
.footer{padding:26px 0 40px; color:var(--muted2); text-align:center; font-size:13px}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{min-height:380px}
  .grid-2{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
  .badge{flex-direction:column; align-items:flex-start}
  .cta-row{display:none}
}
/* Phone reveal: hide real number until brushed */
.brush-track{ --reveal: 0%; }
.phone{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:.08em; font-size:18px; }
.phone-reveal{ opacity:0; transition: opacity .2s ease;  color: #ff8c00; }
.brush-track.unlocked .phone-reveal{ opacity:1; }

/* Reviews: keep section compact */
.review-list.limited{
  max-height: 520px;
  overflow: auto;
  padding-right: 6px;
}
.review-list.limited::-webkit-scrollbar{ width:10px; }
.review-list.limited::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

/* Full gallery modal */
.gallery-modal-body{
  max-height: min(72vh, 720px);
  overflow: auto;
  padding: 14px;
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

.phone-reveal{pointer-events:none; z-index:2; opacity:0; transition: opacity .25s ease;}
.brush-track.unlocked .phone-reveal{opacity:1;}

.kicker-logo{
  height: 190px;
  width: auto;
  max-width: min(86vw, 520px);
  opacity: .98;
  filter: drop-shadow(0 16px 42px rgba(0,0,0,.45));
}

/* Logo intro animation (runs on each page load) */
.logo-reveal{position:relative; display:inline-grid; place-items:center}
.logo-reveal .paint-splash{
  position:absolute; inset:-8% -6%;
  background: radial-gradient(closest-side at 30% 50%, rgba(255,165,0,.95), rgba(255,111,61,.92))
              , conic-gradient(from 210deg, rgba(255,183,74,.92), rgba(255,90,61,.92), rgba(255,183,74,.92));
  filter: blur(0.2px);
  opacity: .92;
  transform: translateX(-18%) rotate(-2deg);
  clip-path: inset(0 0 0 0 round 34px);
  animation: paintWipe 1.65s ease-in-out forwards;
  z-index:2;
}
.logo-reveal .hand-wipe{
  position:absolute;
  width: 74px; height: 74px;
  right: -12px; top: 44%;
  transform: translateY(-50%) rotate(-6deg);
  opacity:0;
  animation: handSwipe 1.65s ease-in-out forwards;
  z-index:3;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45));
}
.logo-reveal .hand-wipe svg{width:100%;height:100%}
.kicker-welcome{margin-top:2px; text-align:center; color: rgba(255,255,255,.86); font-weight:800; letter-spacing:.02em}
.kicker-welcome .line{display:block; font-size:14px}
.kicker-welcome .line.big{font-size:18px; margin-top:4px}

@keyframes paintWipe{
  0%{clip-path: inset(0 0 0 0 round 34px); opacity:.92}
  55%{clip-path: inset(0 0 0 0 round 34px); opacity:.92}
  100%{clip-path: inset(0 0 0 100% round 34px); opacity:0}
}
@keyframes handSwipe{
  0%{opacity:0; transform: translate(40px,-50%) rotate(-10deg)}
  20%{opacity:1}
  65%{opacity:1; transform: translate(-220px,-50%) rotate(6deg)}
  100%{opacity:0; transform: translate(-280px,-50%) rotate(10deg)}
}

@media (max-width: 560px){
  .kicker-logo{height: 150px;}
  .logo-reveal .hand-wipe{width: 62px; height: 62px; right: -10px}
  .kicker-welcome .line.big{font-size:16px}
}

.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.why-card{position:relative}
.why-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);margin-bottom:10px}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{position:relative}
.step-n{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(255,90,61,.95), rgba(255,177,74,.90));border:1px solid rgba(255,177,74,.45);font-weight:900;box-shadow:0 18px 60px rgba(255,90,61,.22);margin-bottom:10px}
.cta-band{padding:10px 0 28px}
.cta-inner{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.cta-title{font-size:20px;font-weight:900;letter-spacing:.04em}
.cta-sub{margin-top:6px;color:var(--muted)}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){.why-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr}.cta-inner{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}

/* Bigger top logo + transparent background */
.kicker-logo{ height: 72px !important; background: transparent !important; }
@media (max-width: 560px){
  .kicker-logo{ height: 56px !important; }
}
header img, .kicker img, .kicker-logo{ background: transparent !important; }

.phone-hidden{display:none !important;}
.brush-track{ --reveal: 0%; }
.phone-reveal{
  opacity: 0;
  transition: opacity .12s ease;
  color:#ff8c00;
  clip-path: inset(0 calc(100% - var(--reveal,0%)) 0 0);
}
.brush-track.revealing .phone-reveal{ opacity: 1; }

.brush-big{width:140px;height:80px;left:calc(var(--reveal, 0%) - 70px);top:-44px;background:transparent;border:none;border-radius:0;display:block;pointer-events:none;background-image:url('../img/brush_orange.svg');background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
@media (max-width:560px){
  .brush-big{ width: 240px !important; }
}

/* Hero video background */
.hero.hero-video{ position: relative; overflow: hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-video{ width:100%; height:100%; object-fit:cover; }
.hero-bg-overlay{ position:absolute; inset:0; background: radial-gradient(1200px 600px at 20% 20%, rgba(0,0,0,.35), rgba(0,0,0,.70)); }
.hero-grid{ position: relative; z-index: 1; }

/* Paint rail */
.paint-rail{ position: fixed; left: 14px; top: 14px; width: 220px; height: calc(100vh - 28px); pointer-events:none; z-index: 50; }
.paint-brush{ width: 220px; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
.paint-stream{ position:absolute; left: 36px; top: 78px; width: 14px; height: calc(100% - 140px); background: linear-gradient(180deg, rgba(255,138,0,.95), rgba(255,90,61,.85)); border-radius: 999px; box-shadow: 0 20px 60px rgba(255,90,61,.18); opacity:.65; }
#paintDrops{ position:absolute; inset:0; }
.paint-drop{ position:absolute; left: 34px; top: 88px; width: 18px; height: 28px; background: linear-gradient(180deg, rgba(255,177,74,.98), rgba(255,90,61,.92)); border-radius: 999px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); animation: dropFall var(--dur) linear forwards; }
.paint-drop:after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px; width: 16px; height: 16px; background: inherit; border-radius: 50%; opacity:.85; }
@keyframes dropFall{ from{ transform: translateY(0); opacity:1; } to{ transform: translateY(calc(100vh + 120px)); opacity:.0; } }

/* Puddle at footer */
footer{ position: relative; overflow: hidden; }
.paint-puddle{ position:absolute; left: -40px; bottom: -50px; width: 260px; height: 200px; background: radial-gradient(circle at 40% 40%, rgba(255,177,74,.95), rgba(255,90,61,.88)); filter: blur(0px); border-radius: 55% 45% 60% 40% / 55% 60% 40% 45%; opacity:.85; box-shadow: 0 40px 120px rgba(255,90,61,.20); }
.paint-puddle:before{ content:""; position:absolute; inset: 24px 48px 54px 22px; background: rgba(255,255,255,.10); border-radius: inherit; transform: rotate(-8deg); }

@media (max-width:560px){
  .paint-rail{ left: 8px; top: 10px; width: 170px; }
  .paint-brush{ width: 170px; }
  .paint-stream{ left: 28px; width: 12px; }
  .paint-drop{ left: 26px; }
}


/* Premium video hero */
.hero.hero-video{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); }
.hero-bg-overlay{ position:absolute; inset:0; background: radial-gradient(1200px 600px at 20% 20%, rgba(0,0,0,.20), rgba(0,0,0,.70)); }
.hero .container{ position:relative; z-index:1; }

/* Brand paint drip */
.brand-drip{ position:fixed; left:10px; top:10px; width:110px; height:100vh; pointer-events:none; z-index:50; }
.brand-brush{ width:110px; height:auto; display:block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.drip-line{ position:absolute; left:48px; top:82px; width:10px; height:calc(100vh - 120px); background: linear-gradient(to bottom, rgba(255,140,0,.0), rgba(255,140,0,.75), rgba(255,140,0,.15)); border-radius:999px; opacity:.55; }
.paint-drop{ position:absolute; left:46px; top:78px; width:14px; height:14px; border-radius:999px; background: radial-gradient(circle at 35% 35%, rgba(255,220,150,.9), rgba(255,140,0,1) 55%, rgba(255,90,61,1)); box-shadow: 0 10px 18px rgba(0,0,0,.25); animation: dropFall var(--dur,3.2s) linear forwards; }
@keyframes dropFall{ from{ transform:translateY(0) scale(.95); opacity:1;} to{ transform:translateY(var(--fall,78vh)) scale(1.02); opacity:.15;} }

/* Footer puddle */
.footer-puddle{ position:absolute; left:-20px; bottom:-22px; width:220px; height:120px; background: radial-gradient(closest-side at 45% 35%, rgba(255,220,150,.95), rgba(255,140,0,1) 55%, rgba(255,90,61,1)); border-radius: 120px 140px 120px 180px; filter: blur(.2px); opacity:.85; transform: rotate(-6deg); box-shadow: 0 28px 80px rgba(255,90,61,.18); }

@media (max-width:560px){
  .brand-drip{ left:6px; width:90px; }
  .brand-brush{ width:90px; }
  .drip-line{ left:40px; }
  .paint-drop{ left:38px; }
  .footer-puddle{ width:180px; height:100px; }
}

.footer-wrap{position:relative; padding-bottom:40px;}

/* v12: remove drip decoration */
.paint-rail, .brand-drip, .footer-puddle{ display:none !important; }

/* v12: hero video is inline (not background) */
.hero{ position:relative; }
.hero-bg{ display:none !important; }
.hero-media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.hero-video-card{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.hero-inline-video{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
@media (max-width: 980px){
  .hero-media{ grid-template-columns: 1fr; }
  .hero-inline-video{ aspect-ratio: 16 / 9; }
}

/* v14: hero columns so video fits next to Daniel */
.hero .hero-grid{ grid-template-columns: 0.9fr 1.1fr !important; }
@media (max-width: 980px){ .hero .hero-grid{ grid-template-columns: 1fr !important; } }
.hero-inline-video{ object-fit: contain !important; background: rgba(0,0,0,.22); }

/* v14: phone reveal area */
#phoneSlot{display:block; min-height:38px; font-weight:800; font-size:30px; letter-spacing:.4px; color:#ff8c00;}
#phoneSlot{width:100%;max-width:360px;margin:14px auto 0;overflow:hidden;}
#phoneReveal{opacity:0;transition:opacity .2s ease;}
#phoneReveal.active{opacity:1;}
#phoneSlot.revealed #phoneKnob{display:none;}
#phoneSlot.revealed .brush-big{display:none;}

.brush-track{ position:relative; overflow:hidden !important; } /* hide side overflow */
.brush.brush-big{
  width: 320px !important;
  height: auto !important;
  position:absolute !important;
  top:-22px !important; /* can stick out upward */
  left:50%;
  transform: translate(-50%,-50%) rotate(-8deg) !important;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.35));
  z-index:6;
  pointer-events:none;
}
@media(max-width:560px){ .brush.brush-big{ width:260px !important; top:-18px !important; } }

/* v14: remove "Project X" labels overlaying thumbnails */
.gallery .cap{ display:none !important; }

#phoneNumberSlot{display:none;}

/* Phone reveal knob */
.knob{position:absolute;top:50%;left:calc(var(--reveal, 0%) - 24px);transform:translateY(-50%);width:48px;height:48px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 12px 24px rgba(0,0,0,.25);}
#phoneSlot.revealed .knob{display:none;}

/* --- Overrides: Phone reveal layout + realistic brush --- */
#phoneSlot{ position:relative; overflow:hidden; }
#phoneSlot .paint-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; border-radius:14px; }
#phoneSlot .brush{ position:absolute; left:0; top:0; width:190px; height:120px; background:transparent; background-image:url('../img/brush-realistic.svg'); background-repeat:no-repeat; background-position:center; background-size:contain; border:none; border-radius:0; box-shadow:none; pointer-events:none; filter:drop-shadow(0 10px 22px rgba(0,0,0,.35)); opacity:1; }
#phoneSlot .brush svg{ display:none !important; }
#phoneSlot .phone.unlocked{ color:#ff8a00; text-shadow:0 10px 22px rgba(0,0,0,.55); }

/* --- Overrides: Phone reveal layout + realistic brush --- */
#phoneSlot{ position:relative; overflow:hidden; }
#phoneSlot .paint-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; border-radius:14px; }
#phoneSlot .brush{
  position:absolute;
  left:0;
  top:0;
  width:190px;
  height:120px;
  background-image:url('../img/brush-realistic.svg');
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:4;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
  transform: translate(-50%, -75%);
}
#phoneSlot .brush svg{ display:none; }
#phoneSlot .phone.unlocked{ color:#ff8a00; text-shadow:0 4px 14px rgba(255,138,0,.35); }