/* TET Embu Motors - public website. Colours are tokens; brand colour comes from Settings. */
:root{--bg:#f6f6f4;--surface:#fff;--surface-2:#efefec;--ink:#14161a;--ink-2:#3a3f47;--muted:#646b75;--line:#e1e1dc;--brand:#b3261e;--brand-ink:#fff;--accent:#111827;--good:#167a4f;--warn:#8a5a00;--warn-bg:#fdf0cf;--bad:#b3261e;--shadow:0 1px 2px rgba(20,22,26,.06),0 12px 28px -16px rgba(20,22,26,.25);--r:14px;--font:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Bricolage Grotesque","Public Sans",ui-sans-serif,system-ui,sans-serif;color-scheme:light}
:root[data-theme=dark]{--bg:#0e1013;--surface:#171a1f;--surface-2:#1f2329;--ink:#f1f2f4;--ink-2:#c9ccd2;--muted:#9aa0aa;--line:#2a2f37;--accent:#e5e7eb;--warn:#f0c15a;--warn-bg:#3a2e10;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -16px rgba(0,0,0,.7);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#0e1013;--surface:#171a1f;--surface-2:#1f2329;--ink:#f1f2f4;--ink-2:#c9ccd2;--muted:#9aa0aa;--line:#2a2f37;--accent:#e5e7eb;--warn:#f0c15a;--warn-bg:#3a2e10;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -16px rgba(0,0,0,.7);color-scheme:dark}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800}h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700}h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}.muted{color:var(--muted)}.lead{font-size:1.15rem;color:var(--ink-2)}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}.hide-sm{display:inline}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 14px;z-index:99}.skip:focus{left:8px;top:8px}
.ic{flex:none;vertical-align:-3px}.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 60%,#fff);outline-offset:2px}
.only-dark{display:none}:root[data-theme=dark] .only-light{display:none}:root[data-theme=dark] .only-dark{display:inline}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .only-light{display:none}:root:not([data-theme]) .only-dark{display:inline}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .95rem var(--font);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.btn-ghost{background:transparent;border-color:var(--line)}
.btn-wa{background:#1fa855;border-color:#1fa855;color:#fff}.btn.block{display:flex;width:100%;margin-top:10px}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
/* top bars */
.util{background:var(--accent);color:var(--bg);font-size:.82rem}.util a{color:inherit}.util-in{display:flex;justify-content:space-between;gap:16px;padding:7px 0;flex-wrap:wrap}
.util-r{display:flex;gap:18px}.util .ic{margin-right:6px}
.head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);margin-right:auto}.logo:hover{text-decoration:none}
.logo img{height:40px;width:auto}.logo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand);color:var(--brand-ink)}
.logo-text{font:800 1.2rem var(--display)}
.nav{display:flex;align-items:center;gap:6px}.nav a{padding:8px 14px;border-radius:999px;color:var(--ink-2);font-weight:600}
.nav a:hover{background:var(--surface-2);text-decoration:none}.nav a.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.nav .nav-cta{color:#fff;margin-left:8px}.nav .nav-cta:hover{background:#1fa855}.nav-toggle{display:none}
/* hero */
.hero{padding:clamp(36px,7vw,84px) 0;background:radial-gradient(1000px 420px at 85% -10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent),var(--bg)}
.hero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.eyebrow{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--brand)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.finder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
/* forms */
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.f label{font-weight:600;font-size:.88rem}.req{color:var(--bad)}
.f input,.f select,.f textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--bad)}.err{color:var(--bad);font-size:.84rem}.hint{color:var(--muted);font-size:.82rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.formgrid .wide{grid-column:1/-1}
/* trust band */
.band{background:var(--surface);border-block:1px solid var(--line)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 0}
.trust div{display:flex;flex-direction:column;gap:4px}.trust .ic{color:var(--brand)}.trust span{color:var(--muted);font-size:.92rem}
/* sections */
.sec{padding:clamp(36px,6vw,72px) 0}.sec.alt{background:var(--surface-2)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}.more{font-weight:700;display:inline-flex;align-items:center;gap:6px}
.page-top{padding:34px 0 10px}.page-top h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-img{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.card:hover .card-img img{transform:scale(1.04)}
.ph{display:grid;place-items:center;width:100%;height:100%;color:var(--muted);opacity:.55}.ph.big{aspect-ratio:4/3}
.tag{position:absolute;left:12px;top:12px;background:var(--accent);color:var(--bg);font:700 .72rem var(--font);letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.tag-warn{background:var(--warn-bg);color:var(--warn)}.tag-new{background:var(--brand);color:var(--brand-ink)}
.card-body{padding:16px 18px 18px}.card-body h3{margin:0 0 6px;font-size:1.05rem}.card-body h3 a{color:var(--ink)}
.price{font:800 1.3rem var(--display);color:var(--brand);margin:0 0 10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price small{font:600 .72rem var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.price.big{font-size:2rem}
.spec{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:.85rem;margin:0}.spec span{display:inline-flex;align-items:center;gap:5px}
/* steps / cta */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}.steps.two{grid-template-columns:1fr 1fr;margin:24px 0}
.steps>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font:800 1.1rem var(--display);margin-bottom:12px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--accent);color:var(--bg);border-radius:var(--r);padding:clamp(24px,4vw,44px)}
.cta h2{color:inherit}.cta p{margin:0;opacity:.85;max-width:60ch}
/* browse */
.browse{display:grid;grid-template-columns:280px 1fr;gap:28px;padding:18px 0 56px;align-items:start}
.filters{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.filters summary{font:700 1.05rem var(--display);cursor:pointer;margin-bottom:12px;list-style:none}.filters summary::-webkit-details-marker{display:none}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:28px}.pager a{padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);font-weight:600}
.pager a.on{background:var(--brand);border-color:var(--brand);color:#fff}.pager a:hover{text-decoration:none;border-color:var(--brand)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:36px;text-align:center}
/* detail */
.crumbs{padding:18px 0 6px;color:var(--muted);font-size:.9rem}
.detail{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;padding-bottom:48px;align-items:start}
.gallery{margin-bottom:20px}.g-main{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.g-main img{width:100%;height:100%;object-fit:cover}
.g-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:10px}
.g-th{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--surface-2)}.g-th.on{border-color:var(--brand)}.g-th img{width:100%;height:100%;object-fit:cover}
.sold-banner{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.72);color:#fff;text-align:center;font:800 1.6rem var(--display);padding:14px;letter-spacing:.2em;text-transform:uppercase}
.panel-s{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,28px);margin-bottom:20px}
.panel-s.ok{border-color:var(--good)}.panel-s.ok h2{color:var(--good)}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 24px;margin:0}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.specs dt{color:var(--muted)}.specs dd{margin:0;font-weight:600;text-align:right}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 18px}.feat li{display:flex;gap:8px;align-items:center}.feat .ic{color:var(--good)}
.buybox{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.buybox h1{font-size:1.6rem}.enq{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.enq h2{font-size:1.15rem}
/* contact / forms */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:56px}.form-page{max-width:820px;padding-bottom:56px}
.info{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}.info li{display:flex;gap:12px;align-items:flex-start}.info .ic{color:var(--brand);margin-top:3px}
.map{width:100%;height:280px;border:0;border-radius:12px;margin-top:18px}
.prose-wrap{padding-bottom:56px}
/* flashes */
.flashes{width:min(1200px,100% - 32px);margin:16px auto 0}.flash{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:8px}
.flash.success{background:color-mix(in srgb,var(--good) 14%,var(--surface));border-color:var(--good)}.flash.error{border-color:var(--bad)}.flash.warning{background:var(--warn-bg)}
.flash-x{display:none}
/* footer */
.foot{background:var(--accent);color:var(--bg);margin-top:40px}.foot a{color:inherit;opacity:.9}.foot h3{color:inherit}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:32px;padding:44px 0}.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-base{border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);font-size:.85rem;padding:16px 0}.foot-base .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.soc a{margin-right:12px}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:50;width:56px;height:56px;border-radius:50%;background:#1fa855;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}.wa-float:hover{text-decoration:none;transform:scale(1.06)}
.narrow{max-width:640px;margin:48px auto}
@media (max-width:900px){
 .hero-in,.browse,.detail,.contact,.foot-grid,.steps,.steps.two,.trust{grid-template-columns:1fr}
 .filters,.buybox{position:static}.nav-toggle{display:inline-grid}.hide-sm{display:none}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px;flex-direction:column;align-items:stretch}
 .nav.open{display:flex}.nav .nav-cta{margin:6px 0 0}.head-in{position:relative}.cta{flex-direction:column;align-items:flex-start}
 .formgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===================== motion ===================== */
.page-in{animation:pageIn .6s ease both}@keyframes pageIn{from{opacity:0}to{opacity:1}}
.js .reveal{opacity:0;transform:translateY(32px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger>.reveal:nth-child(2){transition-delay:.08s}.js .stagger>.reveal:nth-child(3){transition-delay:.16s}
.js .stagger>.reveal:nth-child(4){transition-delay:.24s}.js .stagger>.reveal:nth-child(5){transition-delay:.32s}.js .stagger>.reveal:nth-child(6){transition-delay:.4s}
.js .stagger>.reveal:nth-child(n+7){transition-delay:.1s}
.js .stagger>div{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.js .stagger.in>div{opacity:1;transform:none}.js .stagger.in>div:nth-child(2){transition-delay:.15s}.js .stagger.in>div:nth-child(3){transition-delay:.3s}
.js .stagger.grid>div{opacity:1;transform:none}
/* hero */
.hero{position:relative;overflow:hidden}.hero-in{position:relative;z-index:2}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;z-index:1;animation:float 14s ease-in-out infinite}
.blob.b1{width:380px;height:380px;background:var(--brand);right:-80px;top:-100px}
.blob.b2{width:300px;height:300px;background:#f59e0b;left:-100px;bottom:-120px;animation-delay:-6s;opacity:.22}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.15)}}
.hero h1{background:linear-gradient(100deg,var(--ink) 30%,var(--brand) 60%,var(--ink) 90%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-220% center}}
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.hero-copy>*:nth-child(2){animation-delay:.1s}.hero-copy>*:nth-child(3){animation-delay:.2s}.hero-copy>*:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.road{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:repeating-linear-gradient(90deg,var(--line) 0 28px,transparent 28px 56px);animation:dash 1.2s linear infinite}
@keyframes dash{to{background-position:-56px 0}}
.car-run{position:absolute;bottom:3px;left:-60px;color:var(--brand);animation:drive 11s linear infinite}
@keyframes drive{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 120px))}}
.btn-primary{position:relative;overflow:hidden}.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover::after{transform:translateX(120%)}
.hero-cta .btn-primary{animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}50%{box-shadow:0 0 0 12px transparent}}
/* counters + marquee */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:30px 0;text-align:center}
.counters b{display:block;font:800 clamp(2rem,4vw,3rem) var(--display);color:var(--brand);line-height:1}.counters span{color:var(--muted);font-size:.9rem}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg);padding:14px 0}
.track{display:flex;gap:14px;width:max-content;animation:scroll 28s linear infinite}.marquee:hover .track{animation-play-state:paused}
.track a{white-space:nowrap;padding:8px 22px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink-2);font-weight:700;background:var(--surface);transition:.2s}
.track a:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none;transform:scale(1.06)}
@keyframes scroll{to{transform:translateX(-33.333%)}}
.trust>div{transition:transform .25s}.trust>div:hover{transform:translateY(-5px)}.trust .ic{transition:transform .4s}.trust>div:hover .ic{transform:rotate(-8deg) scale(1.25)}
/* cards */
.card{transform-style:preserve-3d;will-change:transform}.js .card.reveal.in{transition:transform .2s ease-out,box-shadow .2s,opacity .7s}
.card .price{transition:transform .25s}.card:hover .price{transform:translateX(4px)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));opacity:0;transition:opacity .3s}.card:hover .card-img::after{opacity:1}
.tag{animation:tagIn .6s .3s both}@keyframes tagIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.steps>div{transition:transform .25s,box-shadow .25s}.steps>div:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.steps>div:hover .n{animation:wob .6s}
@keyframes wob{25%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(8deg)}}
.cta{background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--brand)),var(--accent));background-size:200% 100%;animation:grad 9s ease infinite}
@keyframes grad{50%{background-position:100% 0}}
.wa-float{animation:waPulse 2.4s infinite}@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(31,168,85,.6)}70%{box-shadow:0 0 0 18px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}
.head{transition:box-shadow .3s,padding .3s}.head.stuck{box-shadow:0 8px 24px -14px rgba(0,0,0,.4)}.head.stuck .head-in{padding:7px 0}
.nav a{position:relative}.nav a:not(.nav-cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--brand);transform:scaleX(0);transition:transform .25s}.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.pop{animation:rise .8s .15s both}.g-main img{transition:opacity .25s,transform .6s}.g-main:hover img{transform:scale(1.03)}.g-main[data-lightbox]{cursor:zoom-in}
.g-th{transition:transform .2s}.g-th:hover{transform:translateY(-3px)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:grid;place-items:center;animation:pageIn .25s}.lb img{max-width:92vw;max-height:86vh;border-radius:10px;animation:zoom .35s cubic-bezier(.2,.7,.2,1)}
@keyframes zoom{from{opacity:0;transform:scale(.9)}}
.lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer}.lb button:hover{background:var(--brand)}
.lb .x{top:18px;right:18px}.lb .p{left:18px;top:50%}.lb .n2{right:18px;top:50%}.lb .c{position:absolute;bottom:18px;color:#fff;font-weight:600}
@media (max-width:900px){.counters{grid-template-columns:1fr 1fr}.car-run{animation-duration:8s}}
@media (prefers-reduced-motion:reduce){.js .reveal,.js .stagger>div{opacity:1!important;transform:none!important}.blob,.car-run,.road,.track,.hero h1,.wa-float,.cta,.hero-cta .btn-primary{animation:none!important}}