/* =========================================================
   CAREERS.CSS — Master Careers Template (careers.html "Why Join"
   and, going forward, Life at Tax Easy Hub, Current Openings,
   Internships, Hiring Process, and Apply Now all reuse this exact
   design language). An employer-branding template distinct from
   service.css, partnership.css, industry.css, and resources.css:
   a floating-card hero, rotating-gradient-border feature cards, a
   uniform 3D flip-card grid ("what makes us different" — deliberately
   NOT a bento/asymmetric-tile layout; that pattern is reserved for
   other templates and should not be reused here), a department grid,
   a CSS-column masonry culture gallery, a native scroll-snap story
   carousel for role-based employee stories (not fabricated
   individuals/photos — see .story-avatar), and a numbered two-column
   FAQ card grid (its own accordion logic in careers.js — deliberately
   distinct from main.css's plain .acc-item hairline list). Reuses
   main.css primitives (hero mechanics, buttons, cta-band, timeline-v)
   and home.css cross-page primitives (mini-grid, float-cards,
   img-reveal) but owns every component below.
   ========================================================= */

/* ---------- Hero: careers-specific mesh ---------- */
.hero.hero-careers{ background-image:none; background-color: var(--ink); }
.hero.hero-careers::before{
  background:
    radial-gradient(60% 60% at 88% 12%, rgba(10,154,144,.32), transparent 62%),
    radial-gradient(50% 55% at 8% 90%, rgba(13,48,90,.5), transparent 65%),
    repeating-linear-gradient(115deg, rgba(247,245,240,.03) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, rgba(14,21,38,.97), rgba(14,21,38,.92) 55%, rgba(14,21,38,1));
}

/* ---------- Hero: value-highlight pills (Grow / Innovate / Make an Impact) ---------- */
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin: 22px 0 0; }
.hero-tag{
  font-family: var(--f-mono); font-size:.74rem; letter-spacing:.03em; color: rgba(247,245,240,.75);
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:7px 16px; transition: background .3s, border-color .3s, transform .3s var(--ease), color .3s;
}
.hero-tag:hover{ background: rgba(10,154,144,.18); border-color: var(--teal); color: var(--paper); transform: translateY(-2px); }

/* ---------- Hero: floating culture cards (reuses .float-card's glass
   panel + bob animation from home.css, laid out as a static staggered
   grid instead of home.css's absolute fc-1..fc-4 dashboard positions) ---------- */
.career-floats{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.career-floats .float-card{ position:relative; width:auto; top:auto; left:auto; z-index:auto; }
.career-floats .float-card:nth-child(even){ margin-top:34px; }
.career-floats .float-card:nth-child(5){ grid-column: span 2; max-width:280px; margin:8px auto 0; }
.float-card.fc-5{ animation-delay:2.4s; }
@media (max-width: 560px){
  .career-floats{ grid-template-columns:1fr; }
  .career-floats .float-card:nth-child(even){ margin-top:0; }
  .career-floats .float-card:nth-child(5){ grid-column: span 1; max-width:none; margin-top:0; }
}

/* ---------- Section 1 & 5: rotating-gradient-border feature cards
   (Why Join Tax Easy Hub / Benefits & Perks) ---------- */
.feature-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; margin-top:44px; }
@media (max-width: 960px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature-card{ position:relative; height:100%; border-radius: var(--radius-lg); padding:1px; transition: transform .45s var(--ease); }
.feature-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(140deg, var(--navy-brand), var(--teal) 70%, var(--teal-soft));
  opacity:0; transition: opacity .5s var(--ease);
}
.feature-card:hover{ transform: translateY(-7px); }
.feature-card:hover::before{ opacity:1; }
.feature-card-inner{
  position:relative; z-index:1; overflow:hidden; height:100%; background: var(--white); border-radius: calc(var(--radius-lg) - 1px);
  padding: 30px 24px 26px; text-align:center; box-shadow: var(--shadow-card); transition: box-shadow .45s var(--ease);
  display:flex; flex-direction:column; align-items:center;
}
.feature-card:hover .feature-card-inner{ box-shadow: var(--shadow-lift); }
.feature-card-inner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--navy-brand), var(--teal));
  transform: scaleX(0); transform-origin:left; transition: transform .45s var(--ease);
}
.feature-card:hover .feature-card-inner::before{ transform: scaleX(1); }
.feature-card .icon{
  width:54px; height:54px; border-radius:15px; margin:0 auto 16px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.3rem;
  transition: transform .45s var(--ease), background .3s, color .3s, box-shadow .45s var(--ease);
}
.feature-card:hover .icon{ transform: scale(1.12) rotate(-8deg); background: var(--teal-deep); color:#fff; box-shadow: 0 10px 22px -6px rgba(10,154,144,.5); }
.feature-card h3, .feature-card h4{ font-size:1rem; margin:0 0 .4em; color: var(--ink); }
.feature-card p{ font-size:.86rem; color: var(--slate-soft); margin:0; }

/* ---------- Section 3: "What Makes Us Different" — uniform 3D flip cards.
   Every tile is the same size; the differentiator content lives on a
   hover-revealed back face instead of asymmetric tile sizing. ---------- */
.flip-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:20px; margin-top:44px; }
@media (max-width: 960px){ .flip-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .flip-grid{ grid-template-columns: repeat(2,1fr); } }
.flip-card{ height:196px; perspective:1200px; }
.flip-card-inner{
  position:relative; width:100%; height:100%; text-align:center;
  transition: transform .6s var(--ease); transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{ transform: rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius: var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px;
}
.flip-front{ background: var(--white); border:1px solid var(--rule); box-shadow: var(--shadow-card); }
.flip-front .icon{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.25rem; transition: transform .4s var(--ease);
}
.flip-card:hover .flip-front .icon{ transform: scale(1.1) rotate(-6deg); }
.flip-front strong{ font-family: var(--f-display); font-size:.96rem; color: var(--ink); line-height:1.3; }
.flip-back{
  background: linear-gradient(135deg, var(--navy-brand), var(--teal-deep) 130%); color:#fff;
  transform: rotateY(180deg); box-shadow: var(--shadow-lift);
}
.flip-back p{ font-size:.82rem; line-height:1.45; margin:0; color: rgba(255,255,255,.92); }

/* ---------- Section 6: "Meet Our Teams" — rotating-gradient-border
   department cards (distinct from the plain .mini-card used for
   Section 2's value tiles) ---------- */
.dept-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:18px; margin-top:44px; }
@media (max-width: 992px){ .dept-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .dept-grid{ grid-template-columns: repeat(2,1fr); } }
.dept-card{ position:relative; border-radius: var(--radius-lg); padding:1px; transition: transform .4s var(--ease); }
.dept-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(140deg, var(--navy-brand), var(--teal) 70%, var(--teal-soft));
  opacity:0; transition: opacity .5s var(--ease);
}
.dept-card:hover{ transform: translateY(-6px); }
.dept-card:hover::before{ opacity:1; }
.dept-card-inner{
  position:relative; z-index:1; background: var(--white); border-radius: calc(var(--radius-lg) - 1px);
  padding: 26px 18px; text-align:center; box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease);
}
.dept-card:hover .dept-card-inner{ box-shadow: var(--shadow-lift); }
.dept-card .icon{
  width:46px; height:46px; border-radius:13px; margin:0 auto 14px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.1rem; transition: transform .4s var(--ease), background .3s, color .3s;
}
.dept-card:hover .icon{ transform: scale(1.12) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.dept-card h4{ font-size:.92rem; margin:0; color: var(--ink); }

/* ---------- Section 7: "Employee Success Stories" — native scroll-snap
   carousel (its own component, not the shared .testi-slider fade-slider
   used for client testimonials elsewhere on the site) ---------- */
.story-carousel{ margin-top:44px; }
.story-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 6px 14px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.story-track::-webkit-scrollbar{ display:none; }
.story-card{
  scroll-snap-align:start; flex:0 0 min(380px,86%); background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); padding:32px 30px; box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.story-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.story-stars{ color: var(--teal-deep); letter-spacing:.2em; margin-bottom:14px; }
.story-card p{ font-family: var(--f-display); font-size:1.06rem; font-weight:400; color: var(--ink); margin:0 0 22px; line-height:1.45; }
.story-who{ display:flex; align-items:center; gap:12px; }
.story-avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal)); color:#fff; font-size:1.05rem;
}
.story-who strong{ display:block; font-size:.9rem; color: var(--ink); }
.story-who span{ font-size:.78rem; color: var(--slate-soft); }
.story-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:22px; }
.story-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--rule); background: var(--white);
  display:grid; place-items:center; cursor:pointer; color: var(--ink);
  transition: border-color .25s, color .25s, transform .25s;
}
.story-arrow:hover{ border-color: var(--teal); color: var(--teal); transform: scale(1.08); }
.story-dots{ display:flex; gap:8px; }
.story-dots button{ width:8px; height:8px; border-radius:50%; background: var(--rule); border:0; cursor:pointer; padding:0; transition: background .25s, transform .25s; }
.story-dots button.active{ background: var(--teal); transform: scale(1.3); }
@media (max-width: 640px){ .story-card{ flex-basis:88%; padding:26px 22px; } }

/* ---------- Section 8: "Life at Tax Easy Hub" — CSS-column masonry gallery ---------- */
.gallery-masonry{ column-count:3; column-gap:20px; margin-top:44px; }
@media (max-width: 860px){ .gallery-masonry{ column-count:2; } }
@media (max-width: 560px){ .gallery-masonry{ column-count:1; } }
.gallery-tile{ break-inside: avoid; margin-bottom:20px; }
.gallery-tile .img-reveal{ position:relative; }
.gallery-tile img{ width:100%; display:block; }
.gallery-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:34px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(14,21,38,.85));
  color:#fff; font-family: var(--f-display); font-size:1rem;
  opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery-tile:hover .gallery-cap{ opacity:1; transform:none; }

/* ---------- Section 9: FAQ — numbered two-column card grid (its own
   accordion logic in careers.js; deliberately distinct from main.css's
   plain hairline-divider .acc-item list used on other pages) ---------- */
.faq-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:40px; align-items:start; }
@media (max-width: 760px){ .faq-grid{ grid-template-columns: 1fr; } }
.faq-card{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); transition: border-color .35s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.faq-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.faq-card.open{ border-color: var(--teal); }
.faq-q{
  width:100%; display:flex; align-items:center; gap:14px; background:none; border:0; cursor:pointer;
  padding:18px 18px; text-align:left; font-family: var(--f-display); font-size:1rem; color: var(--ink);
}
.faq-num{
  flex-shrink:0; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-family: var(--f-mono); font-size:.78rem;
  transition: background .3s, color .3s;
}
.faq-card.open .faq-num{ background: var(--teal-deep); color:#fff; }
.faq-q-text{ flex:1; }
.faq-toggle{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center;
  color: var(--teal-deep); transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.faq-card.open .faq-toggle{ transform: rotate(180deg); background: var(--teal-deep); color:#fff; border-color: var(--teal-deep); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a p{ padding: 0 18px 20px 66px; margin:0; color: var(--slate-soft); font-size:.9rem; }

/* ---------- Sticky apply button (careers template only) ---------- */
.sticky-apply{
  position: fixed; right:26px; bottom:172px; z-index:1130; display:flex; align-items:center; gap:12px;
  background: var(--ink); color: var(--paper); border-radius:999px; padding: 12px 20px 12px 12px;
  box-shadow: var(--shadow-lift); border:1px solid var(--ink-line); cursor:pointer;
  transform: translateX(140%); transition: transform .5s var(--ease);
}
.sticky-apply.show{ transform: translateX(0); }
.sticky-apply .sa-icon{ width:34px; height:34px; border-radius:50%; background: var(--teal); color: var(--ink); display:grid; place-items:center; font-size:.9rem; flex-shrink:0; }
.sticky-apply span{ font-size:.83rem; white-space:nowrap; }
@media (max-width: 860px){ .sticky-apply{ display:none; } }