/* UstadFix homepage — dark "luxe" restyle (reference: LUMA concept video). Scoped to body.lux so no other page changes. */
body.lux{--bg:#0b0b0c;--bg2:#101012;--card:#141416;--card2:#1b1b1e;--line:rgba(255,255,255,.1);--tx:#f2ede4;--mut:#a59d90;--acct:#e8caa0;--gold:#e8caa0;--gold-tx:#1a140b;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;background:var(--bg);color:var(--tx)}
html[data-theme=light] body.lux{--bg:#f6f1e8;--bg2:#fbf8f2;--card:#fffdf9;--card2:#efe8da;--line:rgba(30,22,10,.14);--tx:#1c1710;--mut:#6b6254;--acct:#8a5a1f;--gold:#1c1710;--gold-tx:#f6f1e8}
/* announcement bar */
.lux .annc{background:var(--gold);color:var(--gold-tx);text-align:center;font-size:.78rem;letter-spacing:.04em;padding:9px 14px}
.lux .annc a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-inline-start:8px}
/* header */
.lux .top{background:rgba(11,11,12,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
html[data-theme=light] .lux .top{background:rgba(246,241,232,.86)}
/* hero */
.lux .hero7{padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,88px);background:none;min-height:min(78vh,720px);display:flex;align-items:center}
.lux .hero7bg{opacity:1;-webkit-mask-image:none;mask-image:none;background:linear-gradient(90deg,var(--bg) 8%,rgba(11,11,12,.72) 48%,rgba(11,11,12,.25) 100%),url(/toyota/corolla-e120/img/car/front34.webp) 78% center/cover no-repeat;filter:saturate(.85) contrast(1.05)}
html[data-theme=light] .lux .hero7bg{background:linear-gradient(90deg,var(--bg) 8%,rgba(246,241,232,.8) 50%,rgba(246,241,232,.3) 100%),url(/toyota/corolla-e120/img/car/front34.webp) 78% center/cover no-repeat}
.lux .eyebrow7{background:none;border:0;padding:0;border-radius:0;color:var(--acct);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.lux .eyebrow7::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acct);flex:none}
.lux .hero7 h1{font-size:clamp(2.3rem,7vw,4.8rem);font-weight:500;letter-spacing:-.035em;line-height:1.02;max-width:880px;margin-bottom:22px}
.lux .hero7 h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--tx)}
.lux .hero7 .lead{color:var(--mut);font-size:clamp(1rem,1.5vw,1.12rem);max-width:520px}
/* car picker */
.lux .big7{background:rgba(20,20,22,.72);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:14px;box-shadow:none;max-width:520px;padding:18px;margin:26px 0 18px;backdrop-filter:blur(8px)}
html[data-theme=light] .lux .big7{background:rgba(255,253,249,.8)}
.lux .big7 h2{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600;margin:0 0 10px}
.lux .big7 select{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--tx)}
.lux .big7 select:focus{border-color:var(--acct);box-shadow:0 0 0 3px rgba(232,202,160,.18)}
/* buttons */
.lux .hbtn{background:var(--gold);color:var(--gold-tx)!important;border-radius:6px;box-shadow:none;font-size:.88rem;letter-spacing:.02em;padding:12px 22px}
.lux .hbtn:nth-child(n+2){background:transparent;color:var(--tx)!important;border:1px solid var(--line)}
.lux .hbtn::after{content:"\2197";margin-inline-start:8px;font-size:.95em}
html[dir=rtl] .lux .hbtn::after{content:"\2196"}
.lux .hbtn:hover{box-shadow:none;transform:translateY(-1px)}.lux .hbtn:nth-child(n+2):hover{border-color:var(--acct)}
/* stats strip */
.lux .stats7{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);max-width:560px}
.lux .stats7 div{display:flex;flex-direction:column}.lux .stats7 b{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}.lux .stats7 span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
/* sections */
.lux .feats7{padding-top:20px}
.lux .feats7 h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.02em;margin:64px 0 26px}
html[dir=rtl] .lux .feats7 h2{font-family:inherit}
.lux .featgrid{counter-reset:f;gap:0;border-top:1px solid var(--line)}
.lux .feat{counter-increment:f;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:22px 4px;box-shadow:none;display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:start}
.lux .feat:hover{transform:none;box-shadow:none;border-color:var(--line);background:rgba(232,202,160,.05)}
.lux .feat .fi{display:none}
.lux .feat::before{content:counter(f,decimal-leading-zero);grid-row:1/3;font-size:.78rem;letter-spacing:.14em;color:var(--acct);padding-top:4px}
.lux .feat h3{margin:0 0 4px;font-size:1.08rem;font-weight:600}.lux .feat p{grid-column:2}
@media(min-width:800px){.lux .featgrid{grid-template-columns:1fr 1fr;column-gap:56px}}
/* car cards as image tiles */
.lux .carlist{gap:16px}
.lux .carcard{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--bg2);min-height:340px;justify-content:flex-end}
.lux .carcard img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;filter:saturate(.85);transition:transform .6s}
.lux .carcard:hover{transform:none;border-color:var(--acct)}.lux .carcard:hover img{transform:scale(1.04)}
.lux .carcard>span{position:relative;padding:60px 20px 20px;background:linear-gradient(180deg,transparent,rgba(8,8,9,.92) 55%);color:#f2ede4}
.lux .carcard small,.lux .carcard em{color:#c7bfb1}.lux .carcard strong{font-family:var(--serif);font-weight:400;font-size:1.55rem;letter-spacing:-.01em}
html[dir=rtl] .lux .carcard strong{font-family:inherit}
.lux .carcard>span>span{font-size:.88rem;color:#d9d2c6}.lux .carcard b{color:var(--acct)}
html[data-theme=light] .lux .carcard b{color:#e8caa0}
/* FAQ */
.lux .faq7 details{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:10px 4px}
.lux .faq7 details:last-child{border-bottom:1px solid var(--line)}
.lux .faq7 summary h3{font-weight:500;font-size:1.05rem}
.lux .faq7 summary::after{content:"+";float:inline-end;color:var(--acct)}.lux .faq7 details[open] summary::after{content:"\2212"}
.lux .faq7 details>div{color:var(--mut)}
/* footer */
.lux .sitelinks{border-top:1px solid var(--line)}
@media(max-width:600px){.lux .hero7{min-height:0}.lux .hero7bg{background-position:70% center}}
@media(prefers-reduced-motion:reduce){.lux .carcard img{transition:none}.lux .carcard:hover img{transform:none}}
/* mobile fixes: legibility over photo, buttons fit the screen */
@media(max-width:700px){
.lux .hero7bg{background:linear-gradient(180deg,rgba(11,11,12,.8) 0%,rgba(11,11,12,.86) 100%),url(/toyota/corolla-e120/img/car/front34.webp) 70% center/cover no-repeat}
html[data-theme=light] .lux .hero7bg{background:linear-gradient(180deg,rgba(246,241,232,.86) 0%,rgba(246,241,232,.92) 100%),url(/toyota/corolla-e120/img/car/front34.webp) 70% center/cover no-repeat}
.lux .hbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lux .hbtns .hbtn{width:100%;flex:none;white-space:normal;text-align:center}
.lux .hbtns .hbtn:first-child{grid-column:1/-1}
}

/* ---- r8: hero background shows all three cars (Passo · Vitz · Corolla), whole car visible ---- */
.lux .hero7bg{display:block;background:none!important;filter:none;overflow:hidden}
.lux .hero7bg span{position:absolute;bottom:3%;width:48%;aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:saturate(.95) contrast(1.05) brightness(.88);
  -webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 100%);mask-image:radial-gradient(closest-side,#000 52%,transparent 100%)}
.lux .hero7bg span:nth-child(1){left:-6%}
.lux .hero7bg span:nth-child(2){left:26%}
.lux .hero7bg span:nth-child(3){left:58%}
.lux .hero7bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.5) 38%,rgba(11,11,12,.05) 100%),linear-gradient(180deg,rgba(11,11,12,.35),transparent 28%)}
html[data-theme=light] .lux .hero7bg span{filter:saturate(1.05) contrast(1.08) brightness(.97)}
html[data-theme=light] .lux .hero7bg::after{background:linear-gradient(90deg,rgba(246,241,232,.9) 0%,rgba(246,241,232,.3) 36%,rgba(246,241,232,0) 100%),linear-gradient(180deg,rgba(246,241,232,.35),transparent 24%)}
html[dir=rtl] .lux .hero7bg span:nth-child(1){left:auto;right:-6%}
html[dir=rtl] .lux .hero7bg span:nth-child(2){left:auto;right:26%}
html[dir=rtl] .lux .hero7bg span:nth-child(3){left:auto;right:58%}
html[dir=rtl] .lux .hero7bg::after{background:linear-gradient(270deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.5) 38%,rgba(11,11,12,.05) 100%),linear-gradient(180deg,rgba(11,11,12,.35),transparent 28%)}
html[dir=rtl][data-theme=light] .lux .hero7bg::after{background:linear-gradient(270deg,rgba(246,241,232,.9) 0%,rgba(246,241,232,.3) 36%,rgba(246,241,232,0) 100%),linear-gradient(180deg,rgba(246,241,232,.35),transparent 24%)}
.lux .hero7 .wrap{z-index:1}
.lux .hero7 h1,.lux .hero7 .lead{text-shadow:0 1px 18px rgba(0,0,0,.45)}
html[data-theme=light] .lux .hero7 h1,html[data-theme=light] .lux .hero7 .lead{text-shadow:none}
@media(max-width:700px){
 .lux .hero7bg span{width:78%;bottom:auto}
 .lux .hero7bg span:nth-child(1){top:2%;left:auto;right:-10%}
 .lux .hero7bg span:nth-child(2){top:34%;left:-12%;right:auto}
 .lux .hero7bg span:nth-child(3){top:64%;left:auto;right:-10%}
 html[dir=rtl] .lux .hero7bg span:nth-child(1){right:auto;left:-10%}
 html[dir=rtl] .lux .hero7bg span:nth-child(2){left:auto;right:-12%}
 html[dir=rtl] .lux .hero7bg span:nth-child(3){right:auto;left:-10%}
 .lux .hero7bg::after,html[dir=rtl] .lux .hero7bg::after{background:linear-gradient(180deg,rgba(11,11,12,.72),rgba(11,11,12,.78))}
 html[data-theme=light] .lux .hero7bg::after,html[dir=rtl][data-theme=light] .lux .hero7bg::after{background:linear-gradient(180deg,rgba(246,241,232,.8),rgba(246,241,232,.86))}
}
/* the "new guide" notice now lives inside the hero, so the menu bar above is identical on every page */
.lux .newpill{display:flex;width:fit-content;max-width:100%;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 18px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(20,20,22,.6);font-size:.78rem;letter-spacing:.03em;backdrop-filter:blur(6px)}
html[data-theme=light] .lux .newpill{background:rgba(255,253,249,.8)}
.lux .newpill a{color:var(--acct);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(min-width:701px){.lux .hero7{padding-bottom:clamp(120px,15vw,220px)}.lux .hero7bg span{bottom:1%}}