/*
 * Compatibility layer for the legacy landing page markup on the Jobick frontend template.
 * Re-themes the previous landing helpers (variables, .grid, .card, .btn-ghost, .reveal ...)
 * so the existing content renders inside the Jobick layout. Scoped to .landing-legacy.
 */
.landing-legacy{
    --navy-900:#fff; --navy-800:#f6f7fb; --navy-700:#eef0f6;
    --ink:#1e1e2d; --muted:#6e6e6e; --slate:#828690; --line:rgba(0,0,0,.09);
    --sky:var(--primary); --sky-2:var(--primary); --amber:var(--primary); --teal:var(--primary);
    --card:#fff; --card-2:#fff;
    --radius:16px; --maxw:1160px;
    --shadow:0 20px 60px -25px rgba(0,0,0,.25);
    --grad:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:var(--ink);
    overflow-x:hidden;
}
.landing-legacy section{position:relative}
.landing-legacy h1,.landing-legacy h2,.landing-legacy h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;color:var(--ink)}
.landing-legacy h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:700}
.landing-legacy h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:700}
.landing-legacy h3{font-size:1.2rem;font-weight:600}
.landing-legacy p{color:var(--muted)}
.landing-legacy .gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.landing-legacy .btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.landing-legacy .btn-ghost:hover{background:var(--navy-800)}
.landing-legacy .btn-lg{padding:.9rem 1.8rem}
.landing-legacy .btn-primary{color:#fff}

.landing-legacy .section-pad{padding:96px 0}
.landing-legacy .center{text-align:center}
.landing-legacy .lead{font-size:1.15rem;max-width:640px}
.landing-legacy .grid{display:grid;gap:22px}
.landing-legacy .cols-2{grid-template-columns:repeat(2,1fr)}
.landing-legacy .cols-3{grid-template-columns:repeat(3,1fr)}
.landing-legacy .cols-4{grid-template-columns:repeat(4,1fr)}
.landing-legacy .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .25s,border-color .25s,box-shadow .25s}
.landing-legacy .card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow)}
.landing-legacy .icon-badge{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--rgba-primary-1);color:var(--primary);margin-bottom:16px;font-size:1.5rem}

.landing-legacy .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.25;z-index:0;pointer-events:none}
.landing-legacy .glow-sky,.landing-legacy .glow-teal{background:radial-gradient(circle,var(--rgba-primary-3),transparent 70%)}

.landing-legacy .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.landing-legacy .reveal.in{opacity:1;transform:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulseGlow{0%,100%{opacity:.2}50%{opacity:.4}}

.landing-legacy input[type=text],.landing-legacy input[type=email],.landing-legacy textarea,.landing-legacy select{color:var(--ink)}

.page-content > .flash{max-width:1160px;margin:20px auto 0;padding:0 22px}
.flash .alert{background:var(--rgba-primary-1);border:1px solid var(--rgba-primary-3);color:var(--ink);padding:14px 18px;border-radius:12px}
.flash .alert.err{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.4)}

@media(max-width:900px){
    .landing-legacy .cols-3,.landing-legacy .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
    .landing-legacy .section-pad{padding:70px 0}
    .landing-legacy .cols-2,.landing-legacy .cols-3,.landing-legacy .cols-4{grid-template-columns:1fr}
}

/* The Jobick header is static (not fixed), so the old fixed-header clearance is reduced */
.landing-legacy .hero{padding-top:70px}
.landing-legacy .head{padding-top:60px}
.landing-legacy .legal{padding-top:60px}

/* =====================================================================
   TanTrace brand (from the logo): espresso #3B2417, copper #DA9C71
   ===================================================================== */
:root{
    --primary:#8B5A3C; --primary-hover:#6F4630; --primary-dark:#3B2417;
    --rgba-primary-1:rgba(139,90,60,.10); --rgba-primary-2:rgba(139,90,60,.20); --rgba-primary-3:rgba(139,90,60,.30);
    --rgba-primary-4:rgba(139,90,60,.40); --rgba-primary-5:rgba(139,90,60,.50); --rgba-primary-05:rgba(139,90,60,.05);
    --title:#3B2417;
    --tt-espresso:#3B2417; --tt-copper:#DA9C71; --tt-cream:#FBF6F0; --tt-sand:#F1E6DA;
}
:root{--header-height:120px}
.logo-header{width:auto}
.logo-header img,.footer-logo img{height:110px;width:auto;max-width:none}
.is-fixed .logo-header img{height:84px}
.footer-logo img{height:110px}
@media(max-width:991px){:root{--header-height:80px}.logo-header img{height:70px}}
.landing-legacy{--ink:var(--tt-espresso)}

/* Hero */
.landing-legacy .tt-hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(218,156,113,.28),transparent 60%),var(--tt-cream);padding:70px 0 90px;overflow:hidden}
.landing-legacy .tt-hero-title{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;font-weight:700;color:var(--tt-espresso);margin-bottom:1.1rem}
.landing-legacy .tt-hero-title span{display:block;color:var(--primary)}
.landing-legacy .tt-hero-lead{font-size:1.1rem;max-width:520px;color:#6b5a4f}
.tt-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:1.6rem 0}
.tt-hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;color:var(--tt-espresso);font-weight:500;font-size:.92rem}
.tt-hero-points i{color:var(--primary);margin-right:.3rem}
.landing-legacy .btn-primary{background:var(--primary);border-color:var(--primary)}
.landing-legacy .btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}

/* Showcase sections */
.landing-legacy .tt-showcase{padding:84px 0}
.landing-legacy .tt-showcase.tt-alt{background:var(--tt-cream)}
.tt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.tt-head h2{margin-bottom:.4rem}
.tt-head p{margin:0;max-width:560px}
.tt-person{text-align:center}
.tt-avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;font-size:1.9rem;color:var(--tt-copper);background:var(--tt-espresso);box-shadow:0 0 0 6px var(--tt-sand);overflow:hidden}
.tt-avatar img{width:100%;height:100%;object-fit:cover}
.tt-person .tt-avatar{font-size:1.3rem;font-weight:700}
a.tt-person{display:block;text-decoration:none;color:inherit}
a.tt-person:hover{color:inherit}
.tt-role{margin-bottom:.3rem}
.tt-meta{font-size:.88rem;margin-bottom:1rem}
.tt-meta i{color:var(--tt-copper);margin-right:.25rem}
.tt-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.tt-region{position:relative;border-top:4px solid var(--tt-copper)}
.tt-region p{margin:0}
.tt-grade-score{font-size:1.5rem;font-weight:700;color:var(--primary);margin-bottom:.3rem}
.tt-grade p{margin:0}
@media(max-width:991px){.tt-journey{margin:1rem auto 0}.landing-legacy .tt-hero{padding:40px 0 70px}}

/* Hero: coffee journey animation (36s loop: road + sea, then air + air) */
.tt-based{margin:0 0 1rem;color:var(--tt-espresso);font-weight:500}
.tt-based i{color:var(--tt-copper);margin-right:.4rem}
.tt-journey{max-width:580px;margin-left:auto}
.tt-scene{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.tt-scene text{font-family:inherit}
.tt-scene .tt-bag-a,.tt-scene .tt-truck,.tt-scene .tt-ship,.tt-scene .tt-bag-b,.tt-scene .tt-bag-c,.tt-scene .tt-score,.tt-scene .tt-plane,.tt-scene .tt-bag-p,.tt-scene .tt-jet,.tt-scene .tt-bag-j{animation-duration:36s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;opacity:0}
.tt-scene .tt-bag-a{offset-path:path("M120 168 C 170 222, 240 230, 300 198");offset-rotate:0deg;animation-name:ttBagA}
.tt-scene .tt-truck{animation-name:ttTruck;transform:translate(-110px,324px)}
.tt-scene .tt-bag-b{animation-name:ttBagB}
.tt-scene .tt-ship{animation-name:ttShip;transform:translate(536px,322px)}
.tt-scene .tt-bag-c{animation-name:ttBagC}
.tt-scene .tt-score{animation-name:ttScore;transform-box:fill-box;transform-origin:center}
.tt-scene .tt-plane{animation-name:ttPlane;transform:translate(-80px,150px)}
.tt-scene .tt-bag-p{animation-name:ttBagP}
.tt-scene .tt-jet{animation-name:ttJet;transform:translate(510px,282px)}
.tt-scene .tt-bag-j{animation-name:ttBagJ}
.tt-scene .tt-bob{animation:ttBob 3.2s ease-in-out infinite}
.tt-scene .tt-prop{transform-box:fill-box;transform-origin:center;animation:ttSpin .25s linear infinite}
.tt-scene .tt-wave{animation:ttWave 4s linear infinite}
.tt-scene .tt-cloud{animation:ttCloud 40s linear infinite alternate}
.tt-scene .tt-tree{transform-box:fill-box;transform-origin:50% 100%;animation:ttSway 4s ease-in-out infinite}
/* farm -> lab (both runs) */
@keyframes ttBagA{0%,3%{offset-distance:0%;opacity:1}12%,17%{offset-distance:100%;opacity:1}17.1%,49.9%{offset-distance:100%;opacity:0}50%{offset-distance:0%;opacity:0}53%{offset-distance:0%;opacity:1}62%,70%{offset-distance:100%;opacity:1}70.5%,100%{offset-distance:100%;opacity:0}}
@keyframes ttScore{0%,13%{opacity:0;transform:translateY(10px) scale(.8)}15%,19%{opacity:1;transform:none}21%,62%{opacity:0;transform:translateY(-6px)}63%,64%{opacity:0;transform:translateY(10px) scale(.8)}65%,69%{opacity:1;transform:none}71%,100%{opacity:0;transform:translateY(-6px)}}
/* run 1: road, then sea */
@keyframes ttTruck{0%{transform:translate(-110px,324px);opacity:1}17%,22%{transform:translate(340px,324px);opacity:1}34%,40%{transform:translate(430px,324px);opacity:1}42%,100%{transform:translate(430px,324px);opacity:0}}
@keyframes ttBagB{0%,20.5%{opacity:0;transform:translate(-41px,-22px) scale(.9)}21.5%,35.5%{opacity:1;transform:translate(-41px,-22px) scale(.9)}36.2%{opacity:1;transform:translate(24px,-76px) scale(.9)}37%{opacity:1;transform:translate(90px,-26px) scale(.9)}37.3%,100%{opacity:0;transform:translate(90px,-26px) scale(.9)}}
@keyframes ttShip{0%{transform:translate(536px,322px);opacity:0}1.5%,38%{transform:translate(536px,322px);opacity:1}48.5%{transform:translate(720px,316px);opacity:1}49.5%,100%{transform:translate(720px,316px);opacity:0}}
@keyframes ttBagC{0%,37%{opacity:0}37.3%,48.5%{opacity:1}49.5%,100%{opacity:0}}
/* run 2: air, then air */
@keyframes ttPlane{0%,61%{transform:translate(-80px,160px);opacity:0}62%{transform:translate(-60px,160px);opacity:1}70%,72%{transform:translate(300px,166px);opacity:1}84%{transform:translate(400px,302px);opacity:1}87%,88%{transform:translate(400px,302px);opacity:1}90%,100%{transform:translate(400px,302px);opacity:0}}
@keyframes ttBagP{0%,70%{opacity:0}70.5%,84.5%{opacity:1}85.5%,100%{opacity:0}}
@keyframes ttJet{0%,49.9%{transform:translate(510px,282px);opacity:0}50.5%,88%{transform:translate(510px,282px);opacity:1}92%{transform:translate(590px,276px);opacity:1}96%{transform:translate(680px,220px) rotate(-14deg);opacity:1}99%{transform:translate(780px,140px) rotate(-18deg);opacity:1}100%{transform:translate(780px,140px) rotate(-18deg);opacity:0}}
@keyframes ttBagJ{0%,85.5%{opacity:0}86%,99%{opacity:1}100%{opacity:0}}
@keyframes ttSpin{to{transform:rotate(360deg)}}
@keyframes ttBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ttWave{from{transform:translateX(0)}to{transform:translateX(-24px)}}
@keyframes ttCloud{from{transform:translateX(-30px)}to{transform:translateX(120px)}}
@keyframes ttSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.tt-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 0;padding:0}
.tt-steps li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;font-size:.82rem;font-weight:500;color:#8a7a6f;text-align:center;animation-duration:36s;animation-iteration-count:infinite}
.tt-steps li i{font-size:1.05rem}
.tt-ico{display:flex;gap:.45rem}
.tt-steps .s1{animation-name:ttS1}.tt-steps .s2{animation-name:ttS2}.tt-steps .s3{animation-name:ttS3}.tt-steps .s4{animation-name:ttS4}
@keyframes ttS1{0%,12%{background:var(--tt-sand);color:var(--tt-espresso)}12.1%,49.9%{background:transparent;color:#8a7a6f}50%,62%{background:var(--tt-sand);color:var(--tt-espresso)}62.1%,100%{background:transparent;color:#8a7a6f}}
@keyframes ttS2{0%,12%{background:transparent;color:#8a7a6f}12.1%,21%{background:var(--tt-sand);color:var(--tt-espresso)}21.1%,62%{background:transparent;color:#8a7a6f}62.1%,71%{background:var(--tt-sand);color:var(--tt-espresso)}71.1%,100%{background:transparent;color:#8a7a6f}}
@keyframes ttS3{0%,21%{background:transparent;color:#8a7a6f}21.1%,36%{background:var(--tt-sand);color:var(--tt-espresso)}36.1%,71%{background:transparent;color:#8a7a6f}71.1%,86%{background:var(--tt-sand);color:var(--tt-espresso)}86.1%,100%{background:transparent;color:#8a7a6f}}
@keyframes ttS4{0%,36%{background:transparent;color:#8a7a6f}36.1%,50%{background:var(--tt-sand);color:var(--tt-espresso)}50.1%,86%{background:transparent;color:#8a7a6f}86.1%,100%{background:var(--tt-sand);color:var(--tt-espresso)}}
@media (prefers-reduced-motion:reduce){.tt-scene *,.tt-steps li{animation:none!important}.tt-scene .tt-truck,.tt-scene .tt-ship,.tt-scene .tt-bag-a,.tt-scene .tt-bag-b,.tt-scene .tt-bag-c,.tt-scene .tt-score,.tt-scene .tt-plane,.tt-scene .tt-jet,.tt-scene .tt-bag-p,.tt-scene .tt-bag-j{opacity:0}.tt-scene .tt-truck{opacity:1;transform:translate(340px,324px)}.tt-scene .tt-ship{opacity:1;transform:translate(536px,322px)}.tt-scene .tt-bag-a{opacity:1;offset-distance:100%}}

/* Page loader in brand colours */
#loading-area .loader .ball{background:var(--tt-copper)!important}
#loading-area .loader .ball.two,#loading-area .loader .ball.four{background:var(--tt-espresso)!important}

/* Footer links: black, not the template blue */
.site-footer a,.site-footer .widget_links ul li a,.site-footer .footer-bottom .copyright-text a{color:#000!important}
.site-footer a:hover,.site-footer .widget_links ul li a:hover{color:var(--primary)!important}
.cta-band{background:var(--tt-cream);border:1px solid var(--line);border-radius:26px;padding:56px;text-align:center}
.site-footer p,.site-footer .copyright-text{color:#3B2417!important}
.site-footer .footer-top .p-50{padding-top:24px!important;padding-bottom:24px!important}
@media(min-width:992px){
    .header-nav .nav > li > a{padding-top:calc(var(--header-height)/2 - 8px);padding-bottom:calc(var(--header-height)/2 - 8px)}
    .header-nav .nav > li.sub-menu-down > a{padding-right:22px}
}