/* =========================================================
   home.css — JETORA top-page redesign (2026-09)
   Loaded ONLY on / , after styles.css. Scoped to the homepage;
   :root overrides here do not reach other pages since they
   never load this file. styles.css itself is not modified.
   ========================================================= */

:root{
  --bg:#FFFDF8;
  --bg-soft:#F7F1E2;
  --ink:#17212B;
  --muted:#55636F;
  --line:#E7DFCC;
  --blue:#16324F;      /* Deep Navy — reused for interactive/text-accent role */
  --accent:#FF7043;    /* Orange */
  --yellow:#FFD54F;
  --sky:#74C7EC;
  --mint:#72D6B9;
  --lightblue:#EAF6FC;
}

/* richer reveal for homepage sections: styles.css already gives
   opacity fade + IntersectionObserver wiring via app.js's generic
   `.reveal` handling — this only adds the translate component. */
.reveal{transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{transform:none}
}

/* ---------- scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);z-index:60;transition:width .1s linear}

/* ---------- header (homepage variant) ---------- */
.site-header.home-header-scrolled{box-shadow:0 4px 18px rgba(23,33,43,.08)}
.home-nav{display:flex;gap:28px;font-size:14px;font-weight:700;color:var(--ink)}
.home-nav a{opacity:.75}
.home-nav a:hover{opacity:1}
.home-header-inner{display:flex;align-items:center;gap:32px;flex:1;justify-content:flex-end}
.home-nav-cta{
  background:var(--ink);color:#fff;font-weight:800;font-size:13.5px;
  padding:10px 18px;border-radius:100px;white-space:nowrap;
}
.home-nav-cta:hover{background:var(--blue)}
@media(max-width:860px){
  .home-nav{display:none}
}

/* ---------- HERO ---------- */
.home-hero{background:var(--bg);padding:56px 24px 48px}
.home-hero-inner{
  max-width:var(--max);margin:auto;
  display:grid;grid-template-columns:52% 48%;gap:40px;align-items:center;
  min-height:0;
}
.home-eyebrow{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--accent);
  margin:0 0 16px;opacity:0;animation:home-fade-up .6s ease .05s forwards;
}
.home-h1{
  font-size:clamp(34px, 2.6vw + 22px, 56px);
  line-height:1.12;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0;
  opacity:0;animation:home-fade-up .6s ease .15s forwards;
}
.home-subhead{
  font-size:clamp(19px, 1vw + 15px, 24px);font-weight:800;color:var(--blue);
  margin:18px 0 0;position:relative;display:inline-block;
  opacity:0;animation:home-fade-up .6s ease .3s forwards;
}
.home-marker{position:relative;white-space:nowrap}
.home-marker:after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:9px;
  background:var(--yellow);z-index:-1;border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  animation:home-marker-draw .5s ease .9s forwards;
}
.home-lead{
  font-size:clamp(15px, .4vw + 14px, 17px);color:var(--muted);line-height:1.8;font-weight:500;
  margin:22px 0 0;max-width:440px;
  opacity:0;animation:home-fade-up .6s ease .45s forwards;
}
.home-hero-ctas{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:28px 0 0;
  opacity:0;animation:home-fade-up .6s ease .6s forwards;
}
.home-cta-primary{min-height:52px;padding:0 28px;font-size:16px}
.home-cta-secondary{
  display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px;color:var(--ink);
  border-bottom:1.5px solid var(--line);padding-bottom:3px;
}
.home-cta-secondary:hover{color:var(--accent);border-color:var(--accent)}
.home-cta-secondary span{transition:transform .2s ease}
.home-cta-secondary:hover span{transform:translateX(3px)}
.home-cta-note{
  font-size:12.5px;color:var(--muted);margin:14px 0 0;
  opacity:0;animation:home-fade-up .6s ease .7s forwards;
}
@keyframes home-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-marker-draw{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .home-eyebrow,.home-h1,.home-subhead,.home-lead,.home-hero-ctas,.home-cta-note{opacity:1;animation:none}
  .home-marker:after{transform:scaleX(1);animation:none}
}

/* ---------- Career Canvas ---------- */
.home-canvas{position:relative;width:100%;aspect-ratio:1/1;max-width:480px;margin:auto}
.home-canvas-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.canvas-line{
  fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:4 3;transition:stroke .25s ease,stroke-width .25s ease;
}
.canvas-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:112px;height:112px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;text-align:center;font-size:11px;font-weight:800;
  letter-spacing:.03em;line-height:1.4;box-shadow:0 10px 30px rgba(22,50,79,.28);
  z-index:2;
}
.canvas-card{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:0 6px 18px rgba(23,33,43,.07);min-width:132px;max-width:150px;
  transition:transform .2s ease,box-shadow .2s ease;cursor:default;z-index:1;
}
.canvas-card .card-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.canvas-card strong{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.5}
.card-1{--accent-c:var(--sky)} .card-2{--accent-c:var(--mint)} .card-3{--accent-c:var(--accent)} .card-4{--accent-c:var(--yellow)}
.canvas-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px;background:var(--accent-c)}
.canvas-card:hover{transform:translate(-50%,calc(-50% - 4px)) rotate(-1.5deg);box-shadow:0 12px 26px rgba(23,33,43,.14)}
.canvas-card.card-2:hover,.canvas-card.card-4:hover{transform:translate(-50%,calc(-50% - 4px)) rotate(1.5deg)}
.home-canvas:has(.card-1:hover) .canvas-line[data-line="1"],
.home-canvas:has(.card-2:hover) .canvas-line[data-line="2"],
.home-canvas:has(.card-3:hover) .canvas-line[data-line="3"],
.home-canvas:has(.card-4:hover) .canvas-line[data-line="4"]{
  stroke:var(--accent);stroke-width:2;stroke-dasharray:none;
}

/* ---------- generic homepage section shell ---------- */
.home-section{max-width:var(--max);margin:auto;padding:80px 24px;border-top:1px solid var(--line)}
.home-h2{font-size:clamp(26px,1.6vw + 20px,38px);font-weight:800;color:var(--ink);line-height:1.4;margin:0 0 26px}

/* ---------- Section 2: what consultants do ---------- */
.home-questions{display:grid;gap:10px;margin:0 0 26px}
.home-question{
  font-size:clamp(20px,1.4vw + 15px,28px);font-weight:800;color:var(--blue);margin:0;
  padding:14px 0;border-bottom:1px dashed var(--line);
}
.home-answer{font-size:16px;color:var(--muted);line-height:1.9;max-width:640px;margin:0 0 18px}

/* ---------- Section 3: aptitude (asymmetric) ---------- */
.home-axis-asym{
  display:grid;grid-template-columns:1.3fr .8fr;grid-template-rows:auto auto;gap:18px;margin:0 0 34px;
}
.axis-block{
  border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--bg-soft);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:140px;
}
.axis-block.axis-large{grid-row:1 / 3;min-height:300px;background:var(--lightblue)}
.axis-block.axis-large-2{background:#FFF3E9}
.axis-no{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:10px}
.axis-block h3{font-size:clamp(20px,1vw + 16px,26px);font-weight:800;color:var(--ink);margin:0 0 4px}
.axis-en{font-size:13px;color:var(--muted);margin:0;font-weight:600}
.home-which-type{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 16px}
@media(max-width:768px){
  .home-axis-asym{grid-template-columns:1fr 1fr}
  .axis-block.axis-large{grid-row:auto;min-height:180px}
}
@media(max-width:480px){
  .home-axis-asym{grid-template-columns:1fr}
  .axis-block.axis-large{min-height:140px}
}

/* ---------- Section 4: career line ---------- */
.career-line{list-style:none;margin:0;padding:0;display:flex;gap:0;overflow-x:auto;padding-bottom:8px}
.career-node{
  position:relative;flex:1 0 140px;text-align:center;padding:0 8px;
}
.career-node:before{
  content:"";position:absolute;top:7px;left:-50%;right:50%;height:2px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform .6s ease;
}
.career-node:first-child:before{content:none}
.career-node.in-view:before{transform:scaleX(1)}
.node-dot{
  display:block;width:16px;height:16px;border-radius:50%;background:var(--line);margin:0 auto 14px;
  position:relative;z-index:1;transition:background .3s ease,transform .3s ease;
}
.career-node.in-view .node-dot{background:var(--blue);transform:scale(1.15)}
.career-node h3{font-size:14.5px;font-weight:800;color:var(--muted);margin:0;transition:color .3s ease}
.career-node.in-view h3{color:var(--ink)}
.career-final .node-dot{background:var(--accent)}
.career-final h3{color:var(--accent)!important;font-weight:800}
@media(max-width:768px){
  .career-line{flex-direction:column;overflow-x:visible;align-items:flex-start;gap:0}
  .career-node{flex:none;width:100%;text-align:left;padding:0 0 0 34px;min-height:56px}
  .node-dot{position:absolute;left:0;top:2px;margin:0}
  .career-node:before{
    top:-2px;left:7px;right:auto;bottom:0;width:2px;height:auto;top:2px;
    transform:scaleY(0);transform-origin:top;
  }
  .career-node.in-view:before{transform:scaleY(1)}
  .career-node h3{padding:2px 0 26px}
}

/* ---------- Section 5: editorial article hub ---------- */
.editorial-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.editorial-card{
  display:block;border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;
  transition:border-color .2s ease,transform .2s ease;
}
.editorial-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.editorial-card .label{font-size:12px;color:var(--muted);display:block;margin-bottom:8px;font-weight:700}
.editorial-card strong{font-size:18px;font-weight:800;color:var(--ink);display:block;line-height:1.5}
.editorial-card p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.8}
.editorial-card.featured{background:var(--blue);border-color:var(--blue)}
.editorial-card.featured .label{color:rgba(255,255,255,.7)}
.editorial-card.featured strong{color:#fff;font-size:24px}
.editorial-card.featured p{color:rgba(255,255,255,.82)}
.editorial-side{display:grid;gap:14px}
.editorial-side .editorial-card strong{font-size:15.5px}
@media(max-width:768px){
  .editorial-grid{grid-template-columns:1fr}
}

/* ---------- Final CTA ---------- */
.home-final-cta{
  background:linear-gradient(135deg, var(--lightblue), var(--bg-soft));
  text-align:center;padding:88px 24px;border-top:1px solid var(--line);
}
.home-final-cta .home-h2{margin:0 auto 14px}
.home-final-sub{font-size:16px;color:var(--muted);margin:0 0 30px;line-height:1.8}
.home-final-btn{min-height:56px;padding:0 36px;font-size:17px}

/* ---------- footer tagline (homepage only) ---------- */
.footer-tagline{font-size:12.5px;color:var(--muted);margin:4px 0 0;font-weight:600}

/* =========================================================
   Responsive tuning at named checkpoints (1440 / 1280 / 768 / 390)
   ========================================================= */
@media(max-width:1280px){
  .home-hero-inner{gap:28px}
  .home-canvas{max-width:420px}
}
@media(max-width:1024px){
  .home-hero-inner{grid-template-columns:1fr;gap:44px}
  .home-hero-right{order:2}
  .home-canvas{max-width:380px;margin:0 auto}
}
@media(max-width:768px){
  .home-hero{padding:40px 20px 40px}
  .home-header-inner{gap:14px}
  .home-nav-cta{padding:9px 14px;font-size:12.5px}
  .home-section{padding:56px 20px}
  .home-final-cta{padding:64px 20px}
}
@media(max-width:600px){
  .home-hero-inner{gap:36px}
  .home-canvas{max-width:300px}
  .canvas-center{width:88px;height:88px;font-size:9.5px}
  .canvas-card{min-width:104px;max-width:116px;padding:9px 10px}
  .canvas-card strong{font-size:11.5px}
  .canvas-card .card-tag{font-size:9px}
}
@media(max-width:390px){
  .home-h1{font-size:32px}
  .home-canvas{max-width:260px}
}