/* ==========================================================================
   GEBI — Join Us page (careers)
   Loaded after css/styles.css (shared palette, header, sections, footer).

   The page has no artwork of its own, so it borrows the Advisory Board page's
   typographic heading block (and the clouds that back it), then runs: why work
   here -> open roles (one, the Key Note Speaker) -> the site's contact form.

   The same sheet dresses the Key Note Speaker role page (keynote-speaker.html),
   which reuses the heading block and its cards; its own rules are at the bottom,
   under "role page".
   ========================================================================== */

/* no hero artwork on this page, so the bar's sun disc would be the only piece of
   the landing-page painting left on screen */
.jn-page .site-header::before{display:none}

/* ---------- heading block ---------- */
.jn-hero{
  --t-head:3.8rem;   /* clears the fixed bar: .2rem padding x2 + 52px bar + 1px border */
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(20rem,30vw,27rem);
  background:var(--cream);
  padding:calc(var(--t-head) + clamp(2.5rem,6vw,4.5rem)) var(--pad) clamp(2rem,4vw,3.25rem);
}
.jn-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/advisory-clouds.webp) center top/cover no-repeat;
}
.jn-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(3rem,9vw,8rem);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,241,234,0),var(--cream));
}
.jn-hero-inner{max-width:var(--max-w);margin:0 auto}
.jn-hero h1{margin:0;font-size:clamp(2.4rem,6vw,4rem);line-height:1.04;letter-spacing:-.02em;max-width:22ch}
.jn-lede{
  margin:clamp(1rem,2vw,1.4rem) 0 0;max-width:56ch;
  font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;color:var(--ink-copy);
}
.jn-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(1.25rem,2.5vw,1.75rem) 0 0}

/* ---------- why work here ---------- */
.jn-ways{padding-top:0}
.jn-sec-head{max-width:58ch}
.jn-sec-head p{color:var(--ink-copy)}
.jn-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1rem,2vw,1.75rem);margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;padding:0;list-style:none;
}
.jn-card{
  display:flex;flex-direction:column;
  background:var(--cream-hi);border:1px solid var(--line);border-radius:26px;
  padding:clamp(1.15rem,2vw,1.6rem);
  box-shadow:0 10px 30px rgba(24,48,70,.08);
  transition:transform .22s,box-shadow .22s;
}
.jn-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(24,48,70,.16)}
.jn-kicker{
  margin:0 0 .55rem;font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.jn-card h3{font-family:var(--head);font-weight:600;font-size:1.22rem;line-height:1.22;color:var(--ink);margin:0 0 .6rem}
.jn-card p{font-size:.95rem;line-height:1.55;color:var(--ink-copy);margin:0 0 .75rem;max-width:none}
/* the meta line sinks to the foot of the card so cards of different lengths line up */
.jn-card .jn-meta{font-size:.88rem;color:var(--ink-soft);margin:auto 0 0;padding-top:.25rem}

/* ---------- open roles ---------- */
/* the honest state of the page: nothing is open, and it should read that way at a
   glance, so the panel is the full width of the column and carries its own label */
.jn-open{background:linear-gradient(180deg,rgba(206,229,240,.45),rgba(206,229,240,.12));padding:clamp(2.75rem,5.5vw,4.5rem) var(--pad)}
/* the panel and the expected-roles list sit side by side once there is room, so the
   band does not leave half its width empty on a desktop */
.jn-open-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);
  margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;align-items:start;
}
@media (min-width:900px){.jn-open-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.jn-empty{
  max-width:64ch;
  background:var(--cream-hi);border:1px solid var(--line);border-radius:26px;
  padding:clamp(1.25rem,2.4vw,1.9rem);
  box-shadow:0 10px 30px rgba(24,48,70,.08);
}
.jn-empty-tag{
  display:inline-block;margin:0 0 .8rem;
  font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(34,53,73,.08);border-radius:999px;padding:.3em .85em;
}
.jn-empty-lead{
  font-family:var(--head);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.25;
  color:var(--ink);margin:0 0 .6rem;max-width:none;
}
.jn-empty p:not(.jn-empty-tag):not(.jn-empty-lead){color:var(--ink-copy);font-size:.97rem;line-height:1.6}
.jn-empty a:not(.btn){color:var(--navy);font-weight:600}
.jn-empty-cta{margin:0;padding-top:.4rem;display:flex;flex-wrap:wrap;gap:.6rem}
.jn-sub{
  font-family:var(--head);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 0;
}
.jn-soon{
  margin:.9rem 0 0;padding:0;list-style:none;max-width:64ch;
  border-top:1px solid var(--line);
}
/* one row per expected role: the name left, the "not open" state right */
.jn-soon li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px solid var(--line);
}
.jn-soon-name{font-weight:600;font-size:1rem;color:var(--ink)}
.jn-soon-tag{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.2em .7em;
  white-space:nowrap;
}
/* the one live vacancy: the whole row is the link, so the padding moves from the
   row onto the anchor. `display:block` keeps the anchor full width, which is what
   lets its own space-between put the tag on the right like every other row */
.jn-soon .jn-soon-live{display:block;padding:0}
.jn-soon-live a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;justify-content:space-between;
  padding:.85rem 0;text-decoration:none;
}
.jn-soon-live a:hover .jn-soon-name{text-decoration:underline;text-underline-offset:4px}
/* the live role is the one row that goes somewhere, so its name carries the link
   colour at rest as well */
.jn-soon-live .jn-soon-name{color:var(--navy)}
.jn-soon-tag--open{background:var(--navy);border-color:var(--navy);color:#fff}
.jn-foot{margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;font-size:.95rem;color:var(--ink-soft);max-width:60ch}
.jn-foot a{color:var(--navy);font-weight:600}

.jn-mail{white-space:nowrap}
.contact .jn-mail{color:var(--ink)}

@media (max-width:600px){
  .jn-hero{min-height:0}
  .jn-hero-actions .btn{justify-content:space-between}
}
/* on a phone the longest role name and its tag cannot share a line, so they stack
   for every row rather than only for the one that runs out of room */
@media (max-width:480px){
  .jn-soon li,.jn-soon-live a{flex-direction:column;gap:.35rem;align-items:flex-start}
}

/* ==========================================================================
   ROLE PAGE (keynote-speaker.html)
   One role, so the page is short: the same heading block, then who it is for,
   what the role is, what it gives back, and the route to the contact form.
   ========================================================================== */

/* the state line above the heading: the same Open pill the careers page uses */
.jn-role-tag{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem;max-width:none;
}
.jn-role-meta{
  font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* the voluntary note: the one thing a reader must not misread, so it sits in the
   heading block, one step quieter than the lede but still read before the buttons */
.jn-role-note{
  margin:clamp(.9rem,1.8vw,1.25rem) 0 0;max-width:56ch;
  font-size:.95rem;line-height:1.55;color:var(--ink-soft);
}

/* the one-line instruction that sits directly above every Apply Here button:
   what to send, said once, where the reader is already reaching for the button */
.jn-role-apply{
  margin:clamp(1.1rem,2.2vw,1.5rem) 0 0;max-width:56ch;
  font-size:.98rem;line-height:1.55;font-weight:600;color:var(--ink-copy);
}
/* the button row keeps its own gap, so the note does not double the spacing */
.jn-role-apply + .jn-hero-actions{margin-top:.9rem}

/* a plain list of what the role asks for and gives back: real bullets, spaced
   like body copy so it reads as prose rather than as a form */
.jn-points{margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;padding:0;list-style:none;max-width:66ch}
.jn-points li{position:relative;padding:0 0 .95rem 1.6rem;font-size:.98rem;line-height:1.6;color:var(--ink-copy)}
.jn-points li:last-child{padding-bottom:0}
.jn-points li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--navy);opacity:.55}

/* the "what it gives back" band: the same sky wash as the open-roles band, so the
   two careers pages read as one */
.jn-role-why{background:linear-gradient(180deg,rgba(206,229,240,.45),rgba(206,229,240,.12))}

/* the closing block: the ask, then the two ways back into the careers page */
.jn-role-cta{max-width:62ch}
.jn-role-cta .jn-hero-actions{margin-top:clamp(1.5rem,3vw,2rem)}

@media (max-width:600px){
  .jn-role-tag{flex-direction:column;align-items:flex-start;gap:.4rem}
}