/* Listing Rescue by Ecom Era
   Layout: white stage, black ink, brand gold used as a highlighter and a light source, never as wallpaper.
   One bold moment per page (the before/after scan), everything around it quiet. */
:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --paper-2:#F7F6F1;
  --ink:#111111;
  --ink-2:#32373C;
  --mute:#5F5B52;
  --line:#E7E4DA;
  --gold:#FFD000;
  --gold-deep:#E8B800;
  --gold-soft:rgba(255,208,0,.22);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--paper)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--display);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(42px,6.6vw,96px);font-weight:800}
h2{font-size:clamp(32px,4.6vw,60px);font-weight:800}
h3{font-size:22px;font-weight:700}
p{margin:0}
.lede{color:var(--mute);font-size:clamp(17px,1.6vw,20px);max-width:58ch}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
section{padding-block:clamp(64px,9vw,128px)}
.stack{display:grid;gap:16px}
.hl{background:linear-gradient(transparent 58%,var(--gold) 58%,var(--gold) 92%,transparent 92%);padding-inline:.06em}
.hl.anim{background-size:0 100%;background-repeat:no-repeat;animation:mark 1s .8s cubic-bezier(.7,0,.2,1) forwards}
@keyframes mark{to{background-size:100% 100%}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 24px;font:700 16px var(--body);text-decoration:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);position:relative;overflow:hidden}
.btn.gold:hover{box-shadow:5px 5px 0 var(--ink)}
.btn.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 5s 2s infinite}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.sm{padding:10px 18px;font-size:14px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.gold:focus-visible{outline-color:var(--ink)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;padding-block:12px}
.nav .logo img{height:26px;width:auto}
.nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .logo span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-left:1px solid var(--line);padding-left:10px}
.nav .sp{flex:1}
.nav .links{display:flex;gap:18px}
.nav .links a{color:var(--mute);text-decoration:none;font-weight:600;font-size:14px}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink)}
.nav .menu{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:700 14px var(--body);cursor:pointer;color:var(--ink)}
@media(max-width:940px){
  .nav .links{display:none}
  .nav .menu{display:inline-flex}
  .nav.open .links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:16px max(20px,env(safe-area-inset-left,0px)) 22px;gap:14px}
  .nav.open .links a{font-size:17px}
  .nav .btn.sm{display:none}
}

/* breadcrumbs */
.crumbs{font:500 12px var(--mono);color:var(--mute);letter-spacing:.04em;display:flex;gap:8px;flex-wrap:wrap;padding-top:28px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(36px,5vw,72px) 0}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.hgrid>*{min-width:0}
@media(max-width:900px){.hgrid{grid-template-columns:1fr}}
.hero h1{margin-top:18px}
.hero .lede{margin-top:22px}
.hero .cta{margin-top:26px}
.swap{display:inline-block;overflow:hidden;vertical-align:bottom;height:1.04em}
.swap span{display:block;animation:sw .55s cubic-bezier(.2,.8,.2,1)}
@keyframes sw{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.trust{margin-top:24px;color:var(--mute);font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.trust b{color:var(--ink);font-family:var(--display);font-size:18px}
.trust i{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.stage{position:relative;aspect-ratio:1/1.05;max-width:560px;width:100%;justify-self:center;perspective:1200px}
.ring{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--gold) 0 38%,transparent 39%),conic-gradient(from 0deg,var(--ink) 0 2%,transparent 2% 8%,var(--ink) 8% 10%,transparent 10% 100%);animation:spin 40s linear infinite}
.ring::after{content:"";position:absolute;inset:-4%;border-radius:50%;border:2px dashed var(--ink);opacity:.22;animation:spin 60s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.card3d{position:absolute;inset:11% 14% 9%;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 40px 90px rgba(17,17,17,.2),0 2px 0 var(--ink);padding:14px;transition:transform .25s ease-out;display:flex;flex-direction:column;gap:10px}
.scan{position:relative;flex:1;border-radius:14px;overflow:hidden;background:#fff}
.scan img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.scan .aft{clip-path:inset(0 0 0 var(--w,100%))}
.beam{position:absolute;top:0;bottom:0;left:var(--w,100%);width:4px;margin-left:-2px;background:var(--gold);box-shadow:0 0 0 1px var(--ink),0 0 24px 6px var(--gold-soft)}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.cap b{font:700 16px var(--display)}
.cap span{font:500 12px var(--mono);color:var(--mute);white-space:nowrap}
.flo{position:absolute;width:24%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 18px 40px rgba(17,17,17,.18);background:#fff;transition:transform .3s ease-out}
.f1{left:-2%;top:4%;rotate:-8deg;animation:bob 6s ease-in-out infinite}
.f2{right:-3%;top:10%;rotate:7deg;animation:bob 7s ease-in-out .8s infinite}
.f3{left:2%;bottom:4%;rotate:6deg;animation:bob 6.5s ease-in-out .4s infinite}
.f4{right:0;bottom:-1%;rotate:-6deg;animation:bob 7.5s ease-in-out 1.2s infinite}
@keyframes bob{50%{translate:0 -12px}}
.sticker{position:absolute;right:6%;top:-1%;width:108px;height:108px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;text-align:center;font:800 14px/1.05 var(--display);letter-spacing:.04em;animation:spin 18s linear infinite;box-shadow:0 10px 30px rgba(17,17,17,.25)}
.sticker span{animation:spin 18s linear infinite reverse}
@media(max-width:520px){.sticker{width:84px;height:84px;font-size:12px}}
.marq{margin-top:clamp(36px,5vw,64px);background:var(--ink);padding-block:14px;overflow:hidden;transform:rotate(-1.2deg);margin-inline:-2%}
.mtrack{display:flex;gap:12px;width:max-content;animation:mq 50s linear infinite}
.mtrack img{width:96px;height:96px;object-fit:cover;border-radius:10px;background:#fff}
.mtrack em{font:800 28px/96px var(--display);color:var(--gold);font-style:normal;padding-inline:14px;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
.load{animation:in .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}
@keyframes in{from{opacity:.001;transform:translateY(18px)}}

/* page hero (inner pages) */
.phero{padding-block:clamp(20px,3vw,40px) clamp(48px,6vw,80px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero h1{font-size:clamp(40px,5.6vw,80px);margin-top:16px;max-width:16ch}
.phero .lede{margin-top:18px}
.phero .cta{margin-top:26px}
.phero .art{position:absolute;right:-60px;top:40px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--gold) 0 40%,transparent 41%);opacity:.9;z-index:-1}
@media(max-width:900px){.phero .art{display:none}}

/* reel */
.reel{margin-top:32px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 80px rgba(17,17,17,.1);aspect-ratio:16/9}
.reel video{width:100%;height:100%;object-fit:cover}
.disc{font-size:14px;border:1px solid var(--line);border-left:4px solid var(--gold);background:var(--paper-2);padding:10px 14px;border-radius:8px;max-width:76ch;margin-top:16px}

/* stats */
.strip{border-block:1px solid var(--line);padding-block:30px}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:720px){.strip .wrap{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font:800 clamp(36px,4.6vw,58px)/1 var(--display);font-variant-numeric:tabular-nums}
.stat span{color:var(--mute);font-size:14px}

/* grids */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.cols3,.cols2{grid-template-columns:1fr}}
.cols3>*,.cols2>*{min-width:0}
.prob{border-top:2px solid var(--gold);padding-top:20px}
.prob h3{margin-bottom:8px}
.prob p{color:var(--mute)}

/* before/after */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,420px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:32px 16px;scrollbar-width:thin}
.case{scroll-snap-align:start;min-width:0}
.ba{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#fff;touch-action:pan-y;cursor:ew-resize;user-select:none;border:1px solid var(--line);box-shadow:0 18px 40px rgba(17,17,17,.08);max-width:100%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;margin-left:-1.5px;background:var(--gold)}
.ba .knob{position:absolute;top:50%;left:var(--x,50%);width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:var(--ink);font:700 14px var(--mono);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.tag{position:absolute;top:12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;padding:6px 9px;border-radius:6px}
.tag.l{left:12px}.tag.r{right:12px;color:var(--gold)}
.meta{display:flex;justify-content:space-between;gap:10px;margin-top:14px;align-items:baseline}
.meta b{font:700 18px var(--display)}
.meta span{color:var(--mute);font:500 12px var(--mono);white-space:nowrap}

/* client band */
.band{background:var(--ink);color:#fff}
.band .lede{color:#CFCAB8}
.band .eyebrow{color:#fff}
.band h2 em{font-style:normal;color:var(--gold)}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mosaic img,.mosaic video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#222}
.mosaic .big{grid-column:span 2;grid-row:span 2}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 7px var(--ink)}
.band .ticks li::before{box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 7px var(--ink)}

/* deliverables */
.deliv{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
@media(max-width:1000px){.deliv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.deliv{grid-template-columns:1fr}}
.dv{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--paper);transition:transform .25s,box-shadow .25s}
.dv:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,17,17,.08)}
.dv .n{font:800 44px/1 var(--display);font-variant-numeric:tabular-nums}
.dv .n small{font:600 14px var(--body);color:var(--mute)}
.dv p{color:var(--mute);font-size:15px}
.dv .go{margin-top:auto;font:600 13px var(--mono);letter-spacing:.04em}

/* films */
.films{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
@media(max-width:900px){.films{grid-template-columns:repeat(2,1fr)}}
.films figure{margin:0}
.films video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:#000}
.films figcaption{font:500 12px var(--mono);color:var(--mute);margin-top:8px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step .n{font:500 13px var(--mono);display:inline-block;background:var(--gold);padding:3px 8px;border-radius:6px}
.step h3{margin:10px 0 6px}
.step p{color:var(--mute)}
.line{height:2px;background:var(--line);margin-top:40px;position:relative;overflow:hidden}
.line i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}

/* prices */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media(max-width:1000px){.prices{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prices{grid-template-columns:1fr}}
.price{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--paper-2);display:flex;flex-direction:column;gap:10px}
.price.hot{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 24px 60px rgba(17,17,17,.18)}
.price.hot p,.price.hot .amt small,.price.hot li{color:#CFCAB8}
.price.hot .amt{color:var(--gold)}
.price .amt{font:800 46px/1 var(--display);font-variant-numeric:tabular-nums}
.price .amt small{font:600 15px var(--body);color:var(--mute)}
.price h3{font:700 18px var(--body)}
.price p{color:var(--mute);font-size:15px}
.price ul{margin:6px 0 0;padding-left:18px;font-size:15px;color:var(--mute);display:grid;gap:4px}
.price .btn{margin-top:auto;justify-content:center}
.free{margin-top:14px;border:2px dashed var(--ink);border-radius:var(--r);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.free b{font-size:18px}
.free div div{color:var(--mute)}

/* guarantee */
.promise{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,44px);background:var(--paper-2)}
@media(max-width:700px){.promise{grid-template-columns:1fr}}
.seal{width:132px;height:132px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);display:grid;place-items:center;text-align:center;font:800 15px/1.1 var(--display);box-shadow:4px 4px 0 var(--ink)}

/* faq */
.faq{max-width:820px;margin-top:32px}
details{border-bottom:1px solid var(--line);padding-block:20px}
summary{cursor:pointer;font:700 19px var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin-top:12px;max-width:66ch}

/* form */
.formcard{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3.5vw,36px);background:#fff;box-shadow:0 30px 80px rgba(17,17,17,.08)}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font:700 14px var(--body)}
.field small{color:var(--mute);font-size:13px}
.field input,.field textarea,.field select{width:100%;font:16px var(--body);padding:13px 14px;border:1px solid #D6D2C4;border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--gold);border-color:var(--ink)}
.hp{position:absolute;left:-5000px}
.formnote{font-size:13px;color:var(--mute);margin-top:12px}
.fmsg{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--paper-2);border-left:4px solid var(--gold);font-size:15px}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.inline-form input{flex:1 1 200px;min-width:0;font:16px var(--body);padding:14px 16px;border:1px solid var(--ink);border-radius:999px}

/* work page */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:none;border:1px solid var(--line);color:var(--mute);border-radius:999px;padding:7px 14px;font:600 13px var(--body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:32px}
.wcard{border:0;padding:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.wcard .pic{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.wcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s,transform .6s}
.wcard .pic .b4{opacity:0}
.wcard:hover .pic .b4,.wcard:focus-visible .pic .b4{opacity:1}
.wcard:hover .pic .af{opacity:0}
.wcard .badge{position:absolute;left:10px;bottom:10px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--gold);padding:5px 8px;border-radius:6px}
.wcard .badge.client{background:var(--gold);color:var(--ink)}
.wcard .meta{margin-top:10px}
.modal{position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.97);overflow-y:auto;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal .in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:860px){.modal .in{grid-template-columns:1fr}}
.modal .in>*{min-width:0}
.modal .close{position:sticky;top:0;float:right;z-index:2}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal button{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;aspect-ratio:1}
.gal img{width:100%;height:100%;object-fit:cover}
.zoom{position:fixed;inset:0;z-index:70;background:rgba(17,17,17,.92);display:grid;place-items:center;padding:24px}
.zoom img{max-height:88vh;border-radius:10px;background:#fff}
.aplus img{width:100%;border-radius:10px;border:1px solid var(--line);margin-top:10px}

/* article */
.article{padding-block:clamp(40px,6vw,72px)}
.article .body{max-width:720px}
.article .body h2{font-size:clamp(26px,3vw,36px);margin:44px 0 14px}
.article .body h3{margin:28px 0 10px}
.article .body p{margin:0 0 16px;font-size:18px;line-height:1.7}
.article .body ul,.article .body ol{font-size:18px;line-height:1.7;padding-left:22px;margin:0 0 18px}
.article .body li{margin-bottom:6px}
.article .body table{border-collapse:collapse;width:100%;font-size:15px}
.article .body th,.article .body td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.article .body th{background:var(--paper-2)}
.tablewrap{overflow-x:auto;margin:0 0 20px}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:28px 0;background:var(--paper-2)}
.toc b{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.toc ol{margin:10px 0 0;padding-left:20px;font-size:16px}
.byline{font:500 13px var(--mono);color:var(--mute);margin-top:18px}
.callout{border:2px solid var(--ink);border-radius:var(--r);padding:22px 24px;margin:36px 0;background:var(--gold);box-shadow:4px 4px 0 var(--ink)}
.callout p{margin:0 0 14px!important;font-size:17px!important}
.callout .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform .25s}
.card:hover{transform:translateY(-3px)}
.card span{font:500 12px var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.card h3{font-size:20px}
.card p{color:var(--mute);font-size:15px}
.thumbrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
@media(max-width:700px){.thumbrow{grid-template-columns:repeat(2,1fr)}}
.thumbrow img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#fff}

/* closing + footer */
.close h2{font-size:clamp(44px,7vw,100px)}
footer{border-top:1px solid var(--line);padding-block:48px 36px;color:var(--mute);font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid>*{min-width:0}
.fgrid b{display:block;color:var(--ink);font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.fgrid a{display:block;text-decoration:none;margin-bottom:8px}
.fgrid a:hover{color:var(--ink)}
.fgrid img{height:24px;width:auto;margin-bottom:12px}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:32px;padding-top:20px}
.fbot i{color:var(--ink);background:var(--gold);padding:2px 8px;border-radius:4px}

/* sticky mobile cta */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.95);border-top:1px solid var(--line);display:none}
.mcta .btn{width:100%;justify-content:center}
@media(max-width:700px){.mcta{display:block}footer{padding-bottom:110px}}

/* reveal */
.rv{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s}
.js .rv.pre{transform:translateY(24px);opacity:.3}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv.pre{transform:none;opacity:1}.hl.anim{background-size:100% 100%}}

/* search results mockup */
.serp{margin-top:32px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(17,17,17,.08)}
.serp-top{background:var(--ink);color:#fff;display:flex;gap:14px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.serp-q{flex:1 1 220px;min-width:0;display:flex;background:#fff;border-radius:8px;overflow:hidden}
.serp-q span{flex:1;min-width:0;color:#333;padding:9px 12px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-q i{width:44px;background:var(--gold)}
.seg{display:inline-flex;border:1px solid #555;border-radius:999px;overflow:hidden;flex:none}
.seg button{background:none;border:0;color:#ddd;padding:8px 16px;font:700 13px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.serp-picks{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.serp-picks .chip{white-space:nowrap}
.serp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px}
@media(max-width:820px){.serp-grid{grid-template-columns:repeat(2,1fr)}.serp-grid .tile:nth-child(n+5){display:none}}
.tile{position:relative;border:1px solid #eee;border-radius:10px;padding:10px;font:13px/1.35 Arial,Helvetica,sans-serif;color:#0F1111;min-width:0;transition:transform .4s,box-shadow .4s,opacity .4s}
.tile .im{aspect-ratio:1;background:#F7F7F7;border-radius:6px;display:grid;place-items:center;overflow:hidden;position:relative}
.tile .im img,.tile .im svg{width:100%;height:100%;object-fit:contain}
.tile .sp{font-size:11px;color:#565959;margin-top:6px}
.tile .nm{margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.tile .st{color:#DE7921;font-size:12px;letter-spacing:1px}
.tile .st small{color:#007185;letter-spacing:0}
.tile .pr{font-size:18px;margin-top:2px}
.tile .pr sup{font-size:11px}
.tile.us{outline:3px solid transparent;outline-offset:-1px}
.serp.after .tile.us{outline-color:var(--gold);box-shadow:0 18px 40px rgba(17,17,17,.14);transform:translateY(-4px)}
.serp.after .tile:not(.us){opacity:.82}
.tile .you{position:absolute;top:-10px;left:12px;background:var(--ink);color:var(--gold);font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:5px;opacity:0;transition:opacity .4s}
.serp.after .tile .you{opacity:1}
.tile .im .us-img{transition:opacity .5s}
.serp-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 16px 16px;color:var(--mute);font-size:13px}

/* listing score tool */
.score{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.score{grid-template-columns:1fr}}
.score>*{min-width:0}
.qcard{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3.5vw,36px);background:#fff;box-shadow:0 30px 80px rgba(17,17,17,.08)}
.qprog{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin-bottom:22px}
.qprog i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s}
.qstep{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.qtext{font:700 clamp(22px,2.6vw,30px)/1.15 var(--display);margin:10px 0 6px;text-wrap:balance}
.qhelp{color:var(--mute);font-size:15px;margin-bottom:18px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;font:600 16px var(--body);background:#fff;text-align:left;color:var(--ink);transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--gold)}
.qnav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.qslide{animation:qs .35s cubic-bezier(.2,.8,.2,1)}
@keyframes qs{from{opacity:.001;transform:translateX(18px)}}
.gradecard{border:2px solid var(--ink);border-radius:22px;padding:clamp(22px,3.5vw,32px);background:#fff;box-shadow:6px 6px 0 var(--ink);position:sticky;top:90px}
.ringwrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ring2{width:150px;height:150px;flex:none;position:relative}
.ring2 svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring2 .bg{stroke:var(--paper-2)}
.ring2 .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.ring2 .num{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:800 44px/1 var(--display)}
.ring2 .num small{display:block;font:500 11px var(--mono);letter-spacing:.1em;color:var(--mute)}
.lgrade{font:800 64px/1 var(--display)}
.lgrade+p{color:var(--mute)}
.fixes{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;counter-reset:f}
.fixes li{counter-increment:f;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;border-top:1px solid var(--line);padding-top:12px}
.fixes li::before{content:counter(f);width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font:700 14px var(--mono)}
.fixes b{display:block}
.fixes span{color:var(--mute);font-size:15px}
.gradecard.empty .ring2 .num,.gradecard.empty .lgrade{color:#C9C4B4}
.hero-score{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font:600 15px var(--body);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.hero-score b{background:var(--ink);color:var(--gold);font:500 11px var(--mono);letter-spacing:.1em;padding:4px 7px;border-radius:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* wide screens: use the space */
@media (min-width:1400px){.wrap{max-width:min(1520px,92vw);padding-left:clamp(24px,3vw,56px);padding-right:clamp(24px,3vw,56px)}.hgrid{grid-template-columns:1fr 1fr}.stage{max-width:min(720px,42vw)}}
@media (min-width:1900px){.wrap{max-width:1680px}.stage{max-width:800px}body{font-size:18px}}
@media (min-width:2300px){.wrap{max-width:1880px}.stage{max-width:880px}body{font-size:19px}}
/* bigger header */
.nav .wrap{padding-block:18px;gap:clamp(16px,2vw,32px)}
.nav .logo img{height:clamp(28px,2.3vw,36px)}
.nav .logo span{font-size:12px}
.nav .links{gap:clamp(16px,1.9vw,34px)}
.nav .links a{font-size:clamp(15px,1.05vw,17.5px)}
.nav .btn.sm{padding:13px 24px;font-size:clamp(15px,1vw,16.5px)}
@media(max-width:1180px) and (min-width:941px){.nav .logo span{display:none}}
@media(max-width:940px){.nav .wrap{padding-block:14px}.nav .logo img{height:30px}.nav .menu{padding:10px 18px;font-size:15px}}
.mosaic{min-width:0}
.mosaic img,.mosaic video{height:auto}
@media(max-width:420px){.nav .logo span{display:none}.nav .logo img{height:28px}}