/* ═══════════════════════════════════════════════
   CAREERS, GREEN & LIME DESIGN (careers.html only)
   Loaded after careers.css, home-v8.css and green-lime-base.css,
   scoped under body.gl. Re-skins the live Careers markup.
   ═══════════════════════════════════════════════ */

/* ── HERO: two columns like the live page; headline, lead and status on the left,
   "What we look for" as a glass card on the right (the bottom row's wrapper steps aside) ── */
.gl .gl-hero.car-hero .gl-hero-inner{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:72px;align-content:center}
.gl .car-hero .gl-hero-inner>*{grid-column:1}
.gl .car-hero .gl-eyebrow{justify-self:start}
.gl .gl-hero.car-hero h1{max-width:14ch;font-size:min(64px,5.6vw)}
.gl .car-hero .gl-hero-bottom{display:contents}
.gl .car-hero .gl-hero-bottom>div:first-child{grid-column:1;margin-top:32px}
.gl .car-hero .hero-values-card{grid-column:2;grid-row:1 / span 3;align-self:center}
.gl .page-hero-status{margin-top:28px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--gl-line-dark)}
.gl .status-dot{background:var(--gl-lime)}
.gl .status-text{font-size:14px;letter-spacing:0;color:#fff}
.gl .hero-values-card{padding:28px 30px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid var(--gl-line-dark)}
.gl .hero-values-card::before{display:none}
.gl .hvc-label{margin-bottom:18px;font-size:13px;letter-spacing:.14em;color:var(--gl-lime)}
.gl .hvc-item{gap:14px;border-bottom-color:var(--gl-line-dark)}
.gl .hvc-icon{width:36px;height:36px;margin-top:0;border-radius:10px;background:var(--gl-lime)}
.gl .hvc-icon svg{width:16px;height:16px;stroke:var(--gl-brand);stroke-width:2.2}
.gl .hvc-text{font-size:15px;font-weight:700;color:#fff}
.gl .hvc-sub{margin-top:4px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.68)}

/* ── WHY WORK HERE: each point on its own white card ── */
.gl .why-section{padding:110px 0;background:none}
.gl .why-inner,.gl .values-inner,.gl .positions-inner,.gl .life-inner,.gl .process-inner{max-width:calc(var(--gl-max) + 2 * var(--gl-gutter));padding:0 var(--gl-gutter)}
.gl .why-header,.gl .values-header,.gl .positions-header,.gl .process-header{margin-bottom:var(--gl-head)}
.gl .why-header h2,.gl .values-header h2,.gl .positions-header h2{max-width:20ch}
.gl .why-item,.gl .why-item:last-child{gap:48px;margin-top:16px;padding:40px;background:#fff;border:1px solid var(--gl-line);border-radius:22px}
.gl .why-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:20px;border-radius:12px;background:var(--gl-lime-soft);font-size:14px;letter-spacing:.04em;color:var(--gl-brand)}
.gl .why-title{letter-spacing:-.03em;color:var(--gl-ink)}
.gl .why-body p{font-size:16px;line-height:1.7;color:var(--gl-muted)}
.gl .why-body strong{color:var(--gl-ink)}

/* ── WHAT WE VALUE: service-card pattern (number, icon tile, turns green on hover) ── */
.gl .values-section{padding:0 0 110px;background:none}
.gl .values-grid{gap:20px}
.gl .value-card{padding:36px 32px 34px;background:#fff;border:1px solid var(--gl-line);border-radius:22px;transition:background-color .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease}
.gl .value-card::before{display:none}
.gl .value-card .gl-card-num{position:absolute;top:32px;right:32px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--gl-muted);transition:color .35s ease}
.gl .value-icon{width:58px;height:58px;margin-bottom:24px;border-radius:16px;background:var(--gl-lime-soft);transition:background-color .35s ease}
.gl .value-icon svg{width:26px;height:26px;stroke:var(--gl-brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gl .value-name{font-size:20px;letter-spacing:-.02em;color:var(--gl-ink);transition:color .35s ease}
.gl .value-desc{font-size:15px;line-height:1.65;color:var(--gl-muted);transition:color .35s ease}
@media(hover:hover){
  .gl .value-card:hover{background:var(--gl-brand);border-color:var(--gl-brand);transform:translateY(-6px);box-shadow:0 24px 48px rgba(6,57,47,.22)}
  .gl .value-card:hover .gl-card-num{color:var(--gl-lime)}
  .gl .value-card:hover .value-icon{background:var(--gl-lime)}
  .gl .value-card:hover .value-name{color:#fff}
  .gl .value-card:hover .value-desc{color:rgba(255,255,255,.78)}
}

/* ── OPEN POSITIONS: each role is its own rounded card; main.js togglePosition still opens them ── */
.gl .positions-section{padding:0 0 110px;background:none}
.gl .positions-list{gap:14px;border:0;border-radius:0;overflow:visible}
.gl .position-item,.gl .position-item:last-child{overflow:hidden;background:#fff;border:1px solid var(--gl-line);border-radius:22px;transition:border-color .3s ease,box-shadow .3s ease}
.gl .position-item.open{border-color:var(--gl-brand);box-shadow:0 18px 40px rgba(6,57,47,.08)}
.gl .position-header{gap:20px;padding:28px 32px}
.gl .position-header:hover{background:#fafcf8}
.gl .position-item.open .position-header{background:none}
.gl .position-title{margin-bottom:12px;font-size:21px;letter-spacing:-.02em;color:var(--gl-ink)}
.gl .position-item.open .position-title{color:var(--gl-brand)}
.gl .position-meta{gap:8px}
.gl .position-tag{padding:5px 12px;border-radius:999px;background:var(--gl-cream);border:1px solid var(--gl-line);font-size:12px;letter-spacing:0;color:var(--gl-muted)}
.gl .position-item.open .position-tag{background:var(--gl-lime-soft);border-color:transparent;color:var(--gl-brand)}
.gl .pos-chevron{width:44px;height:44px;padding:12px;border-radius:50%;background:var(--gl-cream);stroke:var(--gl-brand);stroke-width:2}
.gl .position-item.open .pos-chevron{background:var(--gl-lime);stroke:var(--gl-brand)}
.gl .position-body-inner{padding:0 32px 36px}
.gl .pos-summary{font-size:16px;color:var(--gl-muted);border-bottom-color:var(--gl-line)}
.gl .pos-col-title{font-size:13px;letter-spacing:.14em;color:var(--gl-brand)}
.gl .pos-list li{gap:12px;font-size:15px;color:var(--gl-ink)}
.gl .pos-tick{width:22px;height:22px;margin-top:0;background:var(--gl-lime)}
.gl .pos-tick svg{width:11px;height:11px;stroke:var(--gl-brand);stroke-width:3}
.gl .pos-nice{font-size:14px;color:var(--gl-muted);border-bottom-color:var(--gl-line)}
.gl .pos-nice strong{color:var(--gl-ink)}
.gl .pos-apply{gap:12px;min-height:48px;padding:10px 10px 10px 22px;border-radius:999px;background:var(--gl-brand);font-size:15px;letter-spacing:0;transition:background-color .2s ease,transform .2s ease}
.gl .pos-apply:hover{background:var(--gl-mid);transform:translateY(-2px)}
.gl .pos-apply>svg{stroke:var(--gl-lime)}
.gl .pos-apply .gl-arr{background:var(--gl-lime);color:var(--gl-brand)}
.gl .pos-apply:hover .gl-arr{transform:rotate(45deg)}

/* ── SPECULATIVE APPLICATIONS ── */
.gl .spec-section{--t2:var(--gl-muted);padding:0 0 110px;background:none}
.gl .spec-inner{gap:64px}
.gl .spec-right{padding:40px;background:#fff;border-color:var(--gl-line);border-radius:22px}
.gl .spec-card-label,.gl .life-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gl-brand)}
.gl .spec-card-label::before,.gl .life-label::before{content:"";flex-shrink:0;width:8px;height:8px;margin-left:4px;border-radius:50%;background:var(--gl-lime);box-shadow:0 0 0 4px rgba(198,241,107,.4)}
.gl .spec-card-title{font-size:24px;letter-spacing:-.025em;color:var(--gl-ink)}
.gl .spec-card-body{font-size:15px;color:var(--gl-muted)}
.gl .spec-email{gap:10px;min-height:44px;padding-bottom:4px;font-size:17px;color:var(--gl-brand);border-bottom:2px solid var(--gl-lime);overflow-wrap:anywhere}
.gl .spec-note{font-size:13px;color:var(--gl-muted)}

/* ── LIFE AT TRENDTIVE: three coloured tiles (lime, white, dark teal) ── */
.gl .life-section{padding:0 0 110px;background:none;overflow:visible}
.gl .life-section::before{display:none}
.gl .life-label{margin-bottom:18px}
.gl .life-h2{margin-bottom:var(--gl-head);color:var(--gl-ink)}
.gl .life-grid{gap:16px}
.gl .life-card{display:flex;flex-direction:column;gap:18px;padding:34px 32px;border:0;border-radius:22px}
.gl .life-card:nth-child(1){background:var(--gl-lime)}
.gl .life-card:nth-child(2){background:#fff;border:1px solid var(--gl-line)}
.gl .life-card:nth-child(3){background:var(--gl-dteal)}
.gl .life-card-title{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.03em}
.gl .life-card-body{font-size:15px;line-height:1.65}
.gl .life-card:nth-child(1) .life-card-title{color:var(--gl-brand)}
.gl .life-card:nth-child(1) .life-card-body{color:var(--gl-brand)}
.gl .life-card:nth-child(2) .life-card-title{color:var(--gl-ink)}
.gl .life-card:nth-child(2) .life-card-body{color:var(--gl-muted)}
.gl .life-card:nth-child(3) .life-card-title{color:var(--gl-lime)}
.gl .life-card:nth-child(3) .life-card-body{color:rgba(255,255,255,.78)}

/* ── HOW TO APPLY: process steps on the closing dark panel ── */
.gl .process-section{margin-bottom:var(--gl-panel-m);padding:110px 0}
.gl .process-inner{position:relative;z-index:1}
.gl .process-timeline{padding:0;background:none;border:0;border-radius:0}
.gl .timeline-steps{gap:16px}
.gl .timeline-steps::before{display:none}
.gl .timeline-step,.gl .timeline-step:last-child{align-items:flex-start;text-align:left;padding:30px 28px 32px;background:rgba(255,255,255,.05);border:1px solid var(--gl-line-dark);border-radius:22px;transition:background-color .3s ease,border-color .3s ease}
.gl .timeline-step:hover{background:rgba(255,255,255,.1);border-color:var(--gl-lime)}
.gl .timeline-dot,.gl .timeline-step:hover .timeline-dot{width:auto;height:auto;margin-bottom:22px;background:none;border:0;border-radius:0;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--gl-lime)}
@supports (-webkit-text-stroke:1px black){
  .gl .timeline-dot{color:transparent;-webkit-text-stroke:1.5px var(--gl-lime)}
  .gl .timeline-step:hover .timeline-dot{color:var(--gl-lime)}
}
.gl .timeline-step-title{margin-bottom:10px;font-size:20px;letter-spacing:-.02em;color:#fff}
.gl .timeline-step-sub{max-width:none;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}
.gl .timeline-step-sub strong{color:#fff}

/* the shared base only turns the eyebrow lime for .gl-eyebrow on dark panels; this page uses .sec-label there */
.gl .gl-panel-dark .sec-label{color:var(--gl-lime)}
.gl .gl-panel-dark .sec-label::before{box-shadow:0 0 0 4px rgba(198,241,107,.18)}

/* ── RESPONSIVE ── */
@media(max-width:1080px){
  .gl .gl-hero.car-hero .gl-hero-inner{grid-template-columns:minmax(0,1fr)}
  .gl .gl-hero.car-hero h1{font-size:min(75px,7.2vw)}
  .gl .car-hero .hero-values-card{grid-column:1;grid-row:auto;margin-top:40px;max-width:600px}
  .gl .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1024px){
  .gl .why-item,.gl .why-item:last-child{gap:20px}
}
@media(max-width:860px){
  .gl .life-grid,.gl .timeline-steps{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media(max-width:640px){
  .gl .why-section{padding:76px 0}
  .gl .values-section,.gl .positions-section,.gl .spec-section,.gl .life-section{padding:0 0 76px}
  .gl .process-section{padding:76px 0}
  .gl .why-item,.gl .why-item:last-child{padding:28px 22px}
  .gl .values-grid{grid-template-columns:minmax(0,1fr)}
  .gl .value-card{padding:30px 24px 28px}
  .gl .value-card .gl-card-num{top:28px;right:24px}
  .gl .position-header{gap:14px;padding:22px 20px}
  .gl .position-title{font-size:18px}
  .gl .position-body-inner{padding:0 20px 28px}
  .gl .pos-apply{width:100%;justify-content:space-between}
  .gl .spec-right{padding:28px 22px}
  .gl .spec-email{font-size:16px}
  .gl .life-card{padding:28px 24px}
  .gl .timeline-step,.gl .timeline-step:last-child{padding:26px 22px}
  .gl .timeline-dot,.gl .timeline-step:hover .timeline-dot{font-size:52px}
  .gl .hero-values-card{padding:24px 22px}
  .gl .gl-hero.car-hero h1{font-size:min(8.4vw,46px)}
  .gl .car-hero .gl-hero-bottom>div:first-child{margin-top:24px}
  .gl .car-hero .hero-values-card{margin-top:32px}
}

@media(prefers-reduced-motion:reduce){
  .gl .value-card,.gl .pos-apply,.gl .timeline-step{transition:none}
  .gl .value-card:hover,.gl .pos-apply:hover{transform:none}
}