/* Kisaka & Company — Careers, job posting and RFP pages. */
/* ===== Portfolio ===== */
.portfolio
   {
      background: #FDFDFD;
      overflow-x: hidden;
   }

.portfolio .portfolio-slider .owl-stage-outer
   {
      overflow: hidden;
   }

.portfolio .owl-nav
   {
      display: none;
   }

.kisaka-vfield-wrap--error .kisaka-job-upload__label
   {
      border-color: #cb1f34 !important;
      box-shadow: 0 0 0 1px rgba(203, 31, 52, 0.18);
   }

#kisaka-rfp-form
   {
      scroll-margin-top: calc(var(--kisaka-header-h) + 16px);
   }

.kisaka-job-posting-page
   {
      --job-rule: #e3e7ef;
      --job-ink: #2C2D3F;
      --job-body: #4f5665;
      --job-muted: #7c8494;
      --job-accent: var(--kisaka-red, #cb1f34);
      --job-line: #d8dde7;

      /* Tracking is size-specific, never one value for everything: the small
         caps layers open up, the display line tightens as it grows. Two tokens
         so the whole page agrees instead of each rule guessing. */
      --job-track-caps: 0.18em;
      --job-track-label: 0.13em;
      background: #f6f7fb;
      color: var(--job-ink, #2C2D3F);
      font-family: var(--kisaka-font-family);
      overflow-x: clip;
   }

.kisaka-job-posting-page a
   {
      color: inherit;
   }

/* The posting is the far side of a click on a Careers role card, so it reads
   in the same face that card did — otherwise the job title changes typeface
   mid-journey. Google Sans Flex carries optical sizing, which this page needs:
   it runs one family from a 10px caps label to a 58px headline. */
.kisaka-job-posting
   {
      min-height: 100vh;
      padding: var(--kisaka-header-h) 22px 72px;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-optical-sizing: auto;
   }

/* Form controls do not inherit type; say so once rather than per control. */
.kisaka-job-posting input,
.kisaka-job-posting select,
.kisaka-job-posting textarea,
.kisaka-job-posting button
   {
      font-family: inherit;
      font-optical-sizing: auto;
   }

.kisaka-job-posting__container
   {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding-top: 20px;
   }

.kisaka-job-posting__topbar
   {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      margin-bottom: 30px;
   }

.kisaka-job-posting__all
   {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #7d8492;
   }

.kisaka-job-posting__all:hover
   {
      color: #cb1f34;
   }

.kisaka-job-posting__hero
   {
      margin-bottom: 58px;
   }

.kisaka-job-posting__eyebrow
   {
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: var(--job-track-caps, 0.18em);
      text-transform: uppercase;
      color: var(--job-accent, #cb1f34);
      margin: 0 0 20px;
   }

.kisaka-job-posting__hero h1
   {
      margin: 0;
      font-size: clamp(2rem, 6vw, 3.65rem);
      line-height: 1.04;

      /* Negative tracking because the line is large: letters read too far apart
         as they grow. Body copy below stays near zero. */
      letter-spacing: -0.03em;
      text-transform: capitalize;
      color: var(--job-ink, #2C2D3F);
      font-weight: 600;
      text-wrap: balance;
   }

/* These are the same facts, in the same order of importance, as the Careers
   card that was clicked to get here — so they get the same treatment: a plain
   line, not white capsules. A pill is a control you can press; none of these
   do anything, and dressing inert text as five buttons was the tell. The
   deadline joins the line rather than sitting alone underneath: it is one more
   fact about the role, just the most time-critical one. */
.kisaka-job-posting__meta
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 8px 22px;
      margin: 18px 0 0;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.4;
      color: var(--job-body, #4f5665);
   }

.kisaka-job-posting__fact
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 7px;
   }

.kisaka-job-posting__fact[hidden]
   {
      display: none;
   }

/* Masked strokes in one family, inheriting colour, so the glyphs sit at the
   same optical weight as the text instead of shouting in red. */
.kisaka-job-posting__fact::before
   {
      content: "";
      width: 15px;
      height: 15px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      background-color: currentColor;
      -webkit-mask: var(--job-fact-icon) center / contain no-repeat;
      mask: var(--job-fact-icon) center / contain no-repeat;
   }

.kisaka-job-posting__fact--type
   {
      --job-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
   }

.kisaka-job-posting__fact--location
   {
      --job-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
   }

.kisaka-job-posting__fact--availability
   {
      --job-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
   }

.kisaka-job-posting__fact--pay
   {
      --job-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
   }

/* The one fact with a clock running on it sits a step darker. */
.kisaka-job-posting__fact--deadline
   {
      color: var(--job-ink, #2C2D3F);
      font-weight: 500;
      --job-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
   }

.kisaka-job-posting__split
   {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0 34px;
   }

@media (min-width: 992px)
   {
      .kisaka-job-posting__split
         {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0;
         }

      .kisaka-job-posting__split .kisaka-job-posting__section + .kisaka-job-posting__section
         {
            border-left: 1px solid var(--job-rule, #e3e7ef);
            padding-left: 34px;
            margin-left: 34px;
         }

      .kisaka-job-posting__split .kisaka-job-posting__section + .kisaka-job-posting__section::before
         {
            content: none;
         }
   }

.kisaka-job-posting__section
   {
      position: relative;
      padding-top: 32px;
      padding-bottom: 30px;
      border-top: 0;
   }

/* Full-bleed so every section rule is the same line that sits under the nav. */
.kisaka-job-posting__section::before
   {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 1px;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      background: var(--job-rule, #e3e7ef);
      pointer-events: none;
   }

.kisaka-job-posting__section h2
   {
      margin: 0 0 16px;
      font-size: 11px;
      line-height: 1;
      letter-spacing: var(--job-track-caps, 0.18em);
      text-transform: uppercase;
      font-weight: 600;
      color: var(--job-accent, #cb1f34);
   }

.kisaka-job-posting__section p, .kisaka-job-posting__section li
   {
      margin: 0 0 14px;
      font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);

      /* Leading tracks size inversely: loose enough to read at this measure,
         not so airy the lines stop reading as one paragraph. Matches the role
         card copy this page continues from. */
      line-height: 1.7;
      letter-spacing: -0.005em;
      font-weight: 400;
      color: var(--job-body, #4f5665);
   }

.kisaka-job-posting__section ul
   {
      margin: 0;
      padding: 0;
      list-style: none;
   }

.kisaka-job-posting__section ul li
   {
      position: relative;
      padding-left: 18px;
   }

.kisaka-job-posting__section ul li::before
   {
      content: "";
      position: absolute;
      left: 2px;

      /* Half the first line box, so the dot stays on the optical centre of the
         first line at every step of the clamp instead of drifting at one size. */
      top: 0.85em;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--job-accent, #cb1f34);
   }

.kisaka-job-posting__section--apply p
   {
      margin-bottom: 20px;
   }

.kisaka-job-form
   {
      margin-top: 18px;
   }

.kisaka-job-form__group
   {
      margin: 0 0 18px;
      padding: 0;
      border: 0;
      display: block;
      width: 100%;
      clear: both;
   }

/* First, middle and last name share one row, and stack once the cells get
   too narrow to type a name into. */
.kisaka-job-form__row
   {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 14px;
   }

/* Required fields sit 13px down inside form-validate's error strip. The
   optional middle name has no strip, so it takes the same gap to line up. */
.kisaka-job-form__row .kisaka-job-form__group > input
   {
      margin-top: 13px;
   }

@media (max-width: 600px)
   {
      .kisaka-job-form__row
         {
            grid-template-columns: minmax(0, 1fr);
         }
   }

.kisaka-job-form__group--work-pref
   {
      margin-top: 2px;
   }

/* Only the field's own label, never a label nested inside a choice — that
   selector used to reach the radio captions too. */
.kisaka-job-form__group > label, .kisaka-job-form__group > legend
   {
      display: block;
      margin: 0 0 8px;
      font-size: 11px;
      letter-spacing: var(--job-track-label, 0.13em);
      text-transform: uppercase;
      font-weight: 600;
      color: #636b7b;
   }

/* The red span is the required asterisk and nothing else. Unscoped, it was
   painting every Yes/No/Remote caption red, so each option read as an error. */
.kisaka-job-form__group > label > span,
.kisaka-job-form__group > legend > span,
.kisaka-job-form__question > p > span
   {
      color: var(--job-accent, #cb1f34);
   }

.kisaka-job-form__group input[type="text"],
.kisaka-job-form__group input[type="email"],
.kisaka-job-form__group input[type="tel"],
.kisaka-job-form__group input[type="file"],
.kisaka-job-form__group select,
.kisaka-job-form__group textarea
   {
      width: 100%;
      border: 1px solid #d8dde7;
      background: #fff;
      color: #2C2D3F;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 0.9375rem;
      line-height: 1.5;

      /* iOS zooms a focused field below 16px; 15px plus this keeps it still. */
      -webkit-text-size-adjust: 100%;
   }

.kisaka-job-upload__input
   {
      position: absolute;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
   }

.kisaka-job-upload
   {
      position: relative;
   }

.kisaka-job-upload__label:hover
   {
      border-color: rgba(203, 31, 52, 0.55);
      background: rgba(203, 31, 52, 0.035);
   }

/* Feedback belongs on the press, not on release. */
.kisaka-job-upload__label:active
   {
      -webkit-transform: scale(0.995);
      -ms-transform: scale(0.995);
      transform: scale(0.995);
   }

.kisaka-job-upload__input:focus-visible + .kisaka-job-upload__label
   {
      border-color: rgba(203, 31, 52, 0.55);
      border-style: solid;
      -webkit-box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
      box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
   }

.kisaka-job-upload__icon i
   {
      color: inherit !important;
   }

.kisaka-job-upload__label:hover .kisaka-job-upload__icon
   {
      background: var(--job-accent, #cb1f34);
      color: #fff;
   }

.kisaka-job-upload__title
   {
      display: block;
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: -0.005em;
      text-transform: none;
      color: var(--job-ink, #2C2D3F) !important;
      margin-bottom: 4px;
   }

.kisaka-job-upload__meta
   {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      color: #7c8494 !important;
   }

.kisaka-job-upload__filename
   {
      margin: 10px 2px 0 !important;
      font-size: 0.8125rem !important;
      line-height: 1.5 !important;
      font-weight: 500;
      color: var(--job-body, #4f5665) !important;
      word-break: break-word;
   }

/* The hint that follows is guidance, not part of the status — separate them. */
.kisaka-job-upload + .kisaka-job-form__hint
   {
      margin-top: 10px;
   }

.kisaka-job-form__group textarea
   {
      resize: vertical;
      min-height: 120px;
   }

.kisaka-job-form__group input:focus,
.kisaka-job-form__group select:focus,
.kisaka-job-form__group textarea:focus
   {
      outline: none;
      border-color: rgba(203, 31, 52, 0.55);
      box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.1);
   }

/* Specificity has to beat `.kisaka-job-form__group > label`, which these sit
   inside — otherwise an answer renders as a 600-weight uppercase caps label. */
.kisaka-job-form__group .kisaka-job-form__choice
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 10px;
      margin: 0 0 10px;
      font-size: 0.9375rem;
      line-height: 1.4;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 400;
      color: var(--job-body, #4f5665);
      cursor: pointer;
   }

.kisaka-job-form__group .kisaka-job-form__choice > span
   {
      margin-left: 0;
      color: inherit;
   }

.kisaka-job-form__choice input[type="radio"]
   {
      width: 17px;
      height: 17px;
      margin: 0;
      accent-color: var(--job-accent, #cb1f34);
      -ms-flex-negative: 0;
      flex-shrink: 0;
      cursor: pointer;
   }

.kisaka-job-form__choices-row
   {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 24px;
      margin-bottom: 6px;
   }

.kisaka-job-form__choices-row .kisaka-job-form__choice
   {
      margin: 0;
   }

.kisaka-job-form__hint
   {
      margin: 8px 0 0;
      font-size: 0.8125rem !important;
      line-height: 1.6 !important;
      color: var(--job-muted, #7c8494) !important;
   }

.kisaka-job-form__group--legal
   {
      margin-top: 4px;
      margin-bottom: 22px;
   }

.kisaka-job-form .kisaka-contact-form-legal
   {
      font-size: 0.8125rem;
      line-height: 1.6;

      /* Was an off-system #555 — one greyscale on the page, not two. */
      color: var(--job-muted, #7c8494);
      text-align: left;
      margin: 0 0 12px;
   }

.kisaka-job-form .kisaka-contact-form-legal a
   {
      color: #CB1F34;
      text-decoration: underline;
   }

.kisaka-job-form .kisaka-contact-form-legal a:hover,
.kisaka-job-form .kisaka-contact-form-legal a:focus
   {
      color: #a01828;
   }

/* No rules between questions. The gap alone separates them. */
.kisaka-job-form__question
   {
      margin-bottom: 24px;
   }

.kisaka-job-form__question:last-child
   {
      margin-bottom: 0;
   }

.kisaka-job-form__question p
   {
      margin: 0 0 10px;
      font-size: 0.9375rem;
      line-height: 1.6;
      letter-spacing: -0.005em;
      color: var(--job-body, #4f5665);
   }

.kisaka-job-posting__apply:hover
   {
      background: #a8182b;
      color: #fff;
      -webkit-box-shadow: 0 10px 28px rgba(203, 31, 52, 0.26);
      box-shadow: 0 10px 28px rgba(203, 31, 52, 0.26);
   }

/* Same press and same focus ring as the Apply button on the Careers card that
   sent the visitor here — one control, two pages, one behaviour. */
.kisaka-job-posting__apply:active
   {
      -webkit-transform: scale(0.98);
      -ms-transform: scale(0.98);
      transform: scale(0.98);
   }

.kisaka-job-posting__apply:focus-visible
   {
      outline: 2px solid var(--kisaka-red-ink, #140809);
      outline-offset: 3px;
   }

/* On the posting form this is the Apply control, so drop the older filled
   rectangle and keep the invert, the arrow, and the scramble. */
button.kisaka-job-posting__apply.kisaka-careers-role__apply
   {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
   }

.kisaka-job-posting__apply.kisaka-careers-role__apply:hover,
.kisaka-job-posting__apply.kisaka-careers-role__apply:focus-visible
   {
      -webkit-box-shadow: none;
      box-shadow: none;
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-job-posting__apply:active, .kisaka-job-upload__label:active
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
         }
   }

@media (max-width: 767px)
   {
      .kisaka-job-posting
         {
            padding: var(--kisaka-header-h) 18px 48px;
         }

      .kisaka-job-posting__topbar
         {
            margin-bottom: 24px;
         }

      .kisaka-job-posting__section
         {
            padding-top: 24px;
            padding-bottom: 22px;
         }
   }

/* RFP submission runs on the posting shell: same container, same hairline
   sections, same Apply control. Two corrections it needs and the posting
   does not. */
/* Job titles are title-case, so the posting capitalises its headline; a
   sentence is not, and "Submit An RFP" is the tell. */
.kisaka-rfp-page .kisaka-job-posting__hero h1
   {
      text-transform: none;
   }

.kisaka-rfp-page .kisaka-job-posting__hero p:not(.kisaka-job-posting__eyebrow)
   {
      margin: 16px 0 0;
      max-width: 42em;
      font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
      line-height: 1.7;
      letter-spacing: -0.005em;
      font-weight: 400;
      color: var(--job-body, #4f5665);
   }

/* Mailtos sit in body copy on a page that otherwise inherits link colour from
   surrounding text. Red is the always-on tell they are links; the underline
   is reserved for hover, drawn with the same left-origin scaleX as the
   footer rules so it is a transform, not a decoration pop. */
.kisaka-rfp-page .kisaka-job-posting__hero p a
   {
      position: relative;
      color: var(--job-accent, #cb1f34);
      text-decoration: none;
   }

.kisaka-rfp-page .kisaka-job-posting__hero p a::after
   {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.08em;
      height: 1px;
      background: currentColor;
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
      transform-origin: 0% 50%;
      pointer-events: none;
   }

.kisaka-rfp-page .kisaka-job-posting__hero p a:focus-visible::after
   {
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1);
   }

@media (hover: hover) and (pointer: fine)
   {
      .kisaka-rfp-page .kisaka-job-posting__hero p a::after
         {
            -webkit-transition: -webkit-transform 160ms var(--kisaka-ease-out);
            transition: -webkit-transform 160ms var(--kisaka-ease-out);
            -o-transition: transform 160ms var(--kisaka-ease-out);
            transition: transform 160ms var(--kisaka-ease-out);
            transition: transform 160ms var(--kisaka-ease-out), -webkit-transform 160ms var(--kisaka-ease-out);
         }

      .kisaka-rfp-page .kisaka-job-posting__hero p a:hover::after
         {
            -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
            transform: scaleX(1);
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-rfp-page .kisaka-job-posting__hero p a::after
         {
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
         }
   }

/* ===== Kisaka — Careers: the call, then the roles The page was a breadcrumb band, an intro split, a filtered card grid and a CTA at the bottom. It is now two things: a dark stage that asks, and a light list that answers. The old .kisaka-careers-jobs__* rules above stay where they are — who_we_serve.html borrows the search and filter chrome from them. ===== */
/* --- The call ----------------------------------------------------------- */
/* Full window, so the ask is the whole first screen and the roles are a
   deliberate scroll rather than something you fall into. The triangle mask
   is Mubanga's CodePen (oNaBGLW); --call-plate is the field it punches. */
.kisaka-careers-call
   {
      --call-plate: var(--kisaka-page-plate, #140809);
      --call-ink: #f7f0e4;
      --call-ink-soft: rgba(247, 240, 228, 0.72);
      --call-ink-lead: rgba(247, 240, 228, 0.82);
      --call-size: 64px;
      position: relative;
      isolation: isolate;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      padding: calc(var(--kisaka-header-h, 72px) + clamp(56px, 12vh, 132px)) 0 clamp(48px, 9vh, 104px);
      background: var(--call-plate);
      color: var(--call-ink);
      overflow: hidden;
      box-sizing: border-box;
   }

.kisaka-careers-call__bg
   {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
   }

.kisaka-careers-triangles
   {
      --gap: 0.125rem;
      --triangle-base: 3rem;
      --triangle-base-height: calc(1.733 * var(--triangle-base));
      --triangle-width: calc(var(--triangle-base) - var(--gap));
      --triangle-height: calc(var(--triangle-base-height) - var(--gap));
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: radial-gradient(#4a1822, #140809);
      background-size: 400% 400%;
      background-position: 100% 100%;
      -webkit-animation: kisaka-careers-triangles-bg 20s alternate infinite;
      animation: kisaka-careers-triangles-bg 20s alternate infinite;
   }

.kisaka-careers-triangles__glow
   {
      position: absolute;
      width: 50vw;
      height: 100vw;
      background: radial-gradient(circle closest-side, var(--kisaka-glow-color), transparent);
      -webkit-animation: kisaka-careers-triangles-glow 5.2s ease infinite alternate;
      animation: kisaka-careers-triangles-glow 5.2s ease infinite alternate;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
   }

.kisaka-careers-triangles__grid
   {
      display: grid;
      grid-template-columns: repeat(var(--columns), calc(var(--triangle-base) * 2 + var(--gap)));
      width: 100%;
      height: 100%;
   }

.kisaka-careers-triangles__set
   {
      display: inline-block;
      position: relative;
      width: calc(var(--triangle-base) * 2 + var(--gap));
      height: var(--triangle-base-height);
   }

.kisaka-careers-triangles__set--offset
   {
      -webkit-transform: translateX(calc(-1 * var(--triangle-base) - 0.5 * var(--gap)));
      -ms-transform: translateX(calc(-1 * var(--triangle-base) - 0.5 * var(--gap)));
      transform: translateX(calc(-1 * var(--triangle-base) - 0.5 * var(--gap)));
   }

.kisaka-careers-triangles__set::before, .kisaka-careers-triangles__set::after
   {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: var(--gap);
      border-right: var(--triangle-width) solid transparent;
      border-left: var(--triangle-width) solid transparent;
   }

.kisaka-careers-triangles__set::before
   {
      left: calc(-1 * var(--triangle-base));
      border-bottom: var(--triangle-height) solid #140809;
   }

.kisaka-careers-triangles__set::after
   {
      right: calc(var(--gap) * 2.5);
      border-top: var(--triangle-height) solid #140809;
   }

/* The mesh is the picture. The scrim only holds the left edge and the
   baseline so the type stays cream on dark. */
.kisaka-careers-call__scrim
   {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: -webkit-linear-gradient(left, rgba(20, 8, 9, 0.72) 0%, rgba(20, 8, 9, 0.28) 46%, rgba(20, 8, 9, 0.06) 100%), -webkit-linear-gradient(top, rgba(20, 8, 9, 0.42) 0%, rgba(20, 8, 9, 0.08) 42%, rgba(20, 8, 9, 0.62) 100%);
      background: linear-gradient(to right, rgba(20, 8, 9, 0.72) 0%, rgba(20, 8, 9, 0.28) 46%, rgba(20, 8, 9, 0.06) 100%), linear-gradient(to bottom, rgba(20, 8, 9, 0.42) 0%, rgba(20, 8, 9, 0.08) 42%, rgba(20, 8, 9, 0.62) 100%);
      pointer-events: none;
   }

.kisaka-careers-call__inner
   {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0 var(--kisaka-header-pad-x, clamp(28px, 4vw, 64px));
      box-sizing: border-box;
      text-align: left;
   }

@media only screen and (min-width: 768px)
   {
      .kisaka-careers-call__inner
         {
            padding-left: var(--kisaka-logo-inset);
         }
   }

.kisaka-careers-call__eyebrow
   {
      margin-bottom: clamp(28px, 5vh, 56px);
      text-align: left;
   }

.kisaka-careers-call__label
   {
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-align: left;
      color: var(--call-ink-soft);
      white-space: nowrap;
   }

/* One column, left edge. The cue keeps its own measure so the paragraph does
   not stretch with the headline. */
.kisaka-careers-call__composition
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: clamp(24px, 4vh, 40px);
   }

.kisaka-careers-call__title
   {
      margin: 0;
      width: max-content;
      max-width: 100%;
      font-family: var(--kisaka-font-family, sans-serif);
      font-size: clamp(2.75rem, 1.4rem + 6.4vw, 7.25rem);
      font-weight: 700;

      /* Tight leading and negative tracking because the type is large — a fixed
         value that suits the meta line would read as gaps at this size. */
      line-height: 0.96;
      letter-spacing: -0.045em;
      text-align: left;
      color: var(--call-ink);
   }

/* No overflow mask on the line: at 0.98 leading it clips the tail of the Q and
   the y, and the rise is short enough that it does not need one. */
.kisaka-careers-call__line
   {
      display: block;
   }

.kisaka-careers-call__line--accent
   {
      color: var(--kisaka-red-glow, #e8485c);

      /* The question changes voice. The statement is the firm's expanded
         grotesk; the ask is the wordmark's serif, italic, so the two lines
         read as two speakers rather than one heading in two colours. A touch
         larger because a serif italic sits optically smaller than a heavy
         sans at the same size, and shorter leading because its ascenders
         are all it has up there. */
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-style: italic;
      font-weight: 500;
      font-optical-sizing: auto;
      font-size: 1.06em;
      line-height: 0.9;
      letter-spacing: -0.02em;

      /* A hair of air: the italic's ascenders otherwise meet the g of
         "waiting." on the line above. */
      margin-top: 0.05em;
   }

.kisaka-careers-call__ask
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: 20px;
   }

.kisaka-careers-call__cue
   {
      margin: 0;
      max-width: 30em;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
      font-weight: 400;
      line-height: 1.55;
      letter-spacing: -0.005em;
      text-align: left;
      color: var(--call-ink-lead);
   }

/* Same control as Apply on the roles below, cut a size up: this one sits
   under a 116px headline, not beside a row title. The wrapper takes the
   stage rise so the button can keep its own press scale. */
.kisaka-careers-call__jump
   {
      display: inline-block;
   }

.kisaka-careers-call__jump .kisaka-careers-role__apply
   {
      min-height: 52px;
      padding: 14px 22px;
      gap: 10px;
      font-size: 12px;
   }

.kisaka-careers-call .kisaka-careers-role__apply:focus-visible
   {
      outline-color: rgba(247, 240, 228, 0.9);
   }

@media only screen and (min-width: 1100px)
   {
      .kisaka-careers-call
         {
            --call-size: 70px;
         }
   }

/* --- The call: arrival --------------------------------------------------- */
/* js/kisaka-careers-roles.js adds .is-armed, then .is-visible on the next
   frame. Everything below hangs off those two classes, so with no JS the stage
   is the finished picture rather than a blank screen. */
.kisaka-careers-call.is-armed [data-kisaka-call-rise]
   {
      opacity: 0;
      -webkit-transform: translate3d(0, 22px, 0);
      transform: translate3d(0, 22px, 0);
      -webkit-transition: opacity 620ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), -webkit-transform 620ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 620ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 620ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

.kisaka-careers-call.is-armed.is-visible [data-kisaka-call-rise]
   {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }

.kisaka-careers-call.is-armed .kisaka-careers-call__line:nth-child(1)
   {
      -webkit-transition-delay: 120ms;
      -o-transition-delay: 120ms;
      transition-delay: 120ms;
   }

.kisaka-careers-call.is-armed .kisaka-careers-call__line:nth-child(2)
   {
      -webkit-transition-delay: 220ms;
      -o-transition-delay: 220ms;
      transition-delay: 220ms;
   }

.kisaka-careers-call.is-armed .kisaka-careers-call__cue
   {
      -webkit-transition-delay: 340ms;
      -o-transition-delay: 340ms;
      transition-delay: 340ms;
   }

.kisaka-careers-call.is-armed .kisaka-careers-call__jump
   {
      -webkit-transition-delay: 420ms;
      -o-transition-delay: 420ms;
      transition-delay: 420ms;
   }

/* --- The roles ----------------------------------------------------------- */
.kisaka-careers-roles
   {
      --roles-ink: #080808;
      --roles-body: #5a5d6b;
      --roles-hairline: #e8eaef;
      --roles-accent: var(--kisaka-red, #cb1f34);
      position: relative;
      z-index: 1;
      padding: clamp(72px, 12vh, 140px) 0 clamp(80px, 13vh, 152px);
      background: #fff;
      color: var(--roles-ink);
   }

.kisaka-careers-roles__inner
   {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 72px);
      box-sizing: border-box;
   }

.kisaka-careers-roles__grid
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: clamp(32px, 5vw, 56px);
   }

@media only screen and (min-width: 992px)
   {
      .kisaka-careers-roles__grid
         {
            display: grid;
            grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr);
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: start;
            gap: clamp(48px, 6vw, 110px);
         }
   }

/* Careers: one screen per panel
   Hero, jobs, footer CTA. js/kisaka-careers-panels.js parks a flick on each.
   The jobs list still scrolls inside its park — the page stays put — but it
   does not grow a visible scrollbar. The wheel is enough. */
@media only screen and (min-width: 992px)
   {
      .kisaka-careers-page [data-kisaka-careers-panel]
         {
            box-sizing: border-box;
            min-height: 100vh;
            min-height: 100svh;
            min-height: 100dvh;
         }

      .kisaka-careers-call, .kisaka-careers-roles
         {
            height: 100vh;
            height: 100svh;
            height: 100dvh;
            overflow: hidden;
         }

      .kisaka-careers-roles
         {
            padding-top: calc(var(--kisaka-header-h, 72px) + clamp(24px, 4vh, 56px));
            padding-bottom: clamp(40px, 7vh, 88px);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
         }

      .kisaka-careers-roles__inner
         {
            max-height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            min-height: 0;
         }

      .kisaka-careers-roles__grid
         {
            --roles-list-fade: clamp(48px, 6vh, 72px);
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            min-height: 0;
            grid-template-rows: 100%;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
         }

      .kisaka-careers-roles__rail
         {
            grid-column: 1;
            grid-row: 1;
            -ms-flex-item-align: start;
            align-self: start;
            max-height: 100%;
            overflow: visible;
            position: relative;
            z-index: 5;
         }

      .kisaka-careers-roles__list
         {
            grid-column: 2;
            grid-row: 1;
            position: relative;
            min-height: 0;
            max-height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
         }

      .kisaka-careers-roles__list::-webkit-scrollbar
         {
            display: none;
            width: 0;
            height: 0;
         }

      /* Fades live on the grid, not in the scroller, so they stay on the
         visible top and bottom of the jobs column as the rows move. The
         top wash is parked above the first title — it still catches a
         row as it leaves, it just no longer sits on the opening role. */
      .kisaka-careers-roles__grid::before, .kisaka-careers-roles__grid::after
         {
            content: "";
            grid-column: 2;
            grid-row: 1;
            width: 100%;
            height: var(--roles-list-fade);
            pointer-events: none;
            z-index: 4;
         }

      .kisaka-careers-roles__grid::before
         {
            -ms-flex-item-align: start;
            align-self: start;
            -webkit-transform: translate3d(0, calc(var(--roles-list-fade) * -0.62), 0);
            -ms-transform: translateY(calc(var(--roles-list-fade) * -0.62));
            transform: translate3d(0, calc(var(--roles-list-fade) * -0.62), 0);
            background: -webkit-linear-gradient( top, #ffffff 0%, rgba(255, 255, 255, 0.92) 28%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0) 100% );
            background: linear-gradient( 180deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 28%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0) 100% );
         }

      .kisaka-careers-roles__grid::after
         {
            -ms-flex-item-align: end;
            align-self: end;
            background: -webkit-linear-gradient( bottom, #ffffff 0%, rgba(255, 255, 255, 0.92) 28%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0) 100% );
            background: linear-gradient( 0deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 28%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0) 100% );
         }
   }

.kisaka-careers-roles__title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
      font-weight: 600;
      line-height: 1.02;
      letter-spacing: -0.035em;
      color: var(--roles-ink);
   }

.kisaka-careers-roles__title-accent
   {
      color: var(--roles-accent);
   }

/* The honest answer for most people is still an email, so it gets its own
   block rather than a line inside a paragraph. */
.kisaka-careers-roles__contact
   {
      margin-top: clamp(28px, 5vh, 56px);
   }

.kisaka-careers-roles__contact-label
   {
      margin: 0 0 8px;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--roles-body);
   }

.kisaka-careers-roles__contact-link
   {
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--roles-accent);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 6px;
      -webkit-transition: color 0.24s ease, text-underline-offset 0.24s ease;
      -o-transition: color 0.24s ease, text-underline-offset 0.24s ease;
      transition: color 0.24s ease, text-underline-offset 0.24s ease;
   }

.kisaka-careers-roles__contact-link:hover, .kisaka-careers-roles__contact-link:focus-visible
   {
      color: var(--kisaka-red-700, #9e1829);
      text-underline-offset: 4px;
   }

/* --- The rail's arrival --------------------------------------------------- */
/* Armed by js/kisaka-careers-roles.js, exactly as the call stage is, so with no
   script the rail is the finished picture rather than three invisible boxes.
   Title, then filters, then the address — the order the eye takes them in. */
.kisaka-careers-roles__rail.is-armed > *
   {
      opacity: 0;
      -webkit-transform: translate3d(0, 18px, 0);
      transform: translate3d(0, 18px, 0);
      -webkit-transition: opacity 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), -webkit-transform 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

.kisaka-careers-roles__rail.is-armed > *:nth-child(2)
   {
      -webkit-transition-delay: 80ms;
      -o-transition-delay: 80ms;
      transition-delay: 80ms;
   }

.kisaka-careers-roles__rail.is-armed > *:nth-child(3)
   {
      -webkit-transition-delay: 150ms;
      -o-transition-delay: 150ms;
      transition-delay: 150ms;
   }

.kisaka-careers-roles__rail.is-armed.is-visible > *
   {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
   }

/* --- The rail's filters -------------------------------------------------- */
/* Quiet boxes, the same hairline and radius family as the row's chevron, so
   the kit reads as part of the list rather than as a widget parked next to it.
   The form is hidden in the markup and revealed by script, so a control that
   would not work is never on the page. */
.kisaka-careers-filters
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 10px;
      margin-top: clamp(28px, 4vh, 44px);
      max-width: 340px;
      position: relative;
      z-index: 2;
   }

.kisaka-careers-filters:has(.nice-select.open)
   {
      z-index: 8;
   }

.kisaka-careers-filters[hidden]
   {
      display: none;
   }

.kisaka-careers-filters__search
   {
      position: relative;
   }

.kisaka-careers-filters__input
   {
      width: 100%;
      height: 48px;
      margin: 0;
      padding: 0 44px 0 16px;
      border: 1px solid var(--roles-hairline);
      border-radius: 12px;
      background: #fff;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.9375rem;
      font-weight: 400;
      letter-spacing: -0.005em;
      color: var(--roles-ink);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      box-sizing: border-box;
      -webkit-transition: border-color 0.24s ease, -webkit-box-shadow 0.24s ease;
      transition: border-color 0.24s ease, box-shadow 0.24s ease, -webkit-box-shadow 0.24s ease;
   }

.kisaka-careers-filters__input::-webkit-input-placeholder
   {
      color: #9aa0ad;
   }

.kisaka-careers-filters__input::-moz-placeholder
   {
      color: #9aa0ad;
   }

.kisaka-careers-filters__input:-ms-input-placeholder
   {
      color: #9aa0ad;
   }

.kisaka-careers-filters__input::placeholder
   {
      color: #9aa0ad;
   }

/* The type-in-a-box UI Chrome adds to search inputs fights the icon. */
.kisaka-careers-filters__input::-webkit-search-decoration,
.kisaka-careers-filters__input::-webkit-search-cancel-button,
.kisaka-careers-filters__input::-webkit-search-results-button,
.kisaka-careers-filters__input::-webkit-search-results-decoration
   {
      -webkit-appearance: none;
   }

.kisaka-careers-filters__input:focus
   {
      outline: none;
      border-color: var(--roles-accent);
      -webkit-box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
      box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
   }

.kisaka-careers-filters__search-icon
   {
      position: absolute;
      top: 50%;
      right: 15px;
      width: 18px;
      height: 18px;
      margin-top: -9px;
      fill: none;
      stroke: #9aa0ad;
      stroke-width: 2;
      stroke-linecap: round;
      pointer-events: none;
      -webkit-transition: stroke 0.24s ease;
      -o-transition: stroke 0.24s ease;
      transition: stroke 0.24s ease;
   }

.kisaka-careers-filters__input:focus + .kisaka-careers-filters__search-icon
   {
      stroke: var(--roles-accent);
   }

/* Label sits on its control, not in the gap above it. The form gap is the
   only space between the search and Discipline, and between each field. */
.kisaka-careers-filters__field
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 6px;
      position: relative;
      z-index: 1;
   }

.kisaka-careers-filters__field:has(.nice-select.open)
   {
      z-index: 4;
   }

.kisaka-careers-filters__label
   {
      display: block;
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.625rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #8b8f9b;
   }

/* js/main.js runs niceSelect over every select on the site, so the control the
   reader actually sees is the div it builds. These rules dress that div; the
   native select underneath stays hidden and keeps the value. Do not hide by
   .kisaka-careers-filters__native — niceSelect copies that class onto the div. */
.kisaka-careers-filters__select
   {
      position: relative;
   }

.kisaka-careers-filters__select > select
   {
      display: none !important;
      pointer-events: none !important;
   }

.kisaka-careers-filters__select .nice-select
   {
      width: 100%;
      float: none;
      height: 48px;
      margin: 0;
      line-height: 46px;
      padding: 0 42px 0 16px;
      border: 1px solid var(--roles-hairline);
      border-radius: 12px;
      background: #fff;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.9375rem;
      font-weight: 400;
      letter-spacing: -0.005em;
      color: var(--roles-ink);
      box-sizing: border-box;
      -webkit-transition: border-color 0.24s ease, -webkit-box-shadow 0.24s ease;
      transition: border-color 0.24s ease, box-shadow 0.24s ease, -webkit-box-shadow 0.24s ease;
   }

.kisaka-careers-filters__select .nice-select:hover
   {
      border-color: #c9cdd8;
   }

.kisaka-careers-filters__select .nice-select.open,
.kisaka-careers-filters__select .nice-select:focus
   {
      border-color: var(--roles-accent);
      -webkit-box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
      box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
   }

/* nice-select draws its caret as a rotated square border. Same chevron weight
   as the row's disclosure, so the two read as one family. */
.kisaka-careers-filters__select .nice-select::after
   {
      right: 18px;
      width: 7px;
      height: 7px;
      border-bottom: 2px solid #8b8f9b;
      border-right: 2px solid #8b8f9b;
      margin-top: -5px;
   }

.kisaka-careers-filters__select .nice-select .list
   {
      width: 100%;
      margin-top: 6px;
      background: #fff;
      border: 1px solid var(--roles-hairline);
      border-radius: 12px;
      -webkit-box-shadow: 0 18px 44px rgba(26, 27, 38, 0.16);
      box-shadow: 0 18px 44px rgba(26, 27, 38, 0.16);
      overflow: hidden;
      z-index: 20;
   }

.kisaka-careers-filters__select .nice-select .option
   {
      padding: 0 16px;
      min-height: 40px;
      line-height: 40px;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.9375rem;
      font-weight: 400;
      color: var(--roles-body);
   }

.kisaka-careers-filters__select .nice-select .option:hover,
.kisaka-careers-filters__select .nice-select .option.focus,
.kisaka-careers-filters__select .nice-select .option.selected.focus
   {
      background: #f6f7fb;
      color: var(--roles-ink);
   }

.kisaka-careers-filters__select .nice-select .option.selected
   {
      font-weight: 500;
      color: var(--roles-accent);
   }

.kisaka-careers-filters__foot
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      gap: 12px;
      min-height: 20px;
   }

.kisaka-careers-filters__count
   {
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: var(--roles-body);
   }

.kisaka-careers-filters__clear
   {
      padding: 0;
      border: 0;
      background: none;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--roles-accent);
      cursor: pointer;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
   }

.kisaka-careers-filters__clear[hidden]
   {
      display: none;
   }

.kisaka-careers-filters__clear:hover
   {
      color: var(--kisaka-red-700, #9e1829);
   }

.kisaka-careers-filters__clear:focus-visible
   {
      outline: 2px solid var(--roles-accent);
      outline-offset: 3px;
   }

/* A hairline above every row and one under the last: the list reads as ruled
   paper, not as seven floating cards. .is-last is the filtered list's own last
   row, which is rarely the markup's. */
.kisaka-careers-role
   {
      border-top: 1px solid var(--roles-hairline);
   }

.kisaka-careers-role:last-child, .kisaka-careers-role.is-last
   {
      border-bottom: 1px solid var(--roles-hairline);
   }

/* Rows rise once, on first sight, and stay risen — see the note in
   js/kisaka-careers-roles.js about why these carry no wow classes. */
.is-enhanced .kisaka-careers-role
   {
      opacity: 0;
      -webkit-transform: translate3d(0, 18px, 0);
      transform: translate3d(0, 18px, 0);
      -webkit-transition: opacity 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), -webkit-transform 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      transition: opacity 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 560ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }

.is-enhanced .kisaka-careers-role.is-in
   {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
   }

/* Nothing matched. The way out sits in the sentence, because that is where the
   reader is looking. */
.kisaka-careers-roles__empty
   {
      margin: 0;
      padding: clamp(28px, 5vh, 48px) 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      font-weight: 400;
      line-height: 1.6;
      color: var(--roles-body);
   }

.kisaka-careers-roles__empty[hidden]
   {
      display: none;
   }

.kisaka-careers-roles__empty-clear
   {
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      font-weight: 500;
      color: var(--roles-accent);
      cursor: pointer;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
   }

.kisaka-careers-roles__empty-clear:hover
   {
      color: var(--kisaka-red-700, #9e1829);
   }

.kisaka-careers-roles__empty-clear:focus-visible
   {
      outline: 2px solid var(--roles-accent);
      outline-offset: 3px;
   }

.kisaka-careers-role__head
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: 20px;
      padding: clamp(24px, 3.5vh, 38px) 0 12px;
   }

@media only screen and (min-width: 768px)
   {
      .kisaka-careers-role__head
         {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            gap: clamp(24px, 4vw, 64px);
         }
   }

.kisaka-careers-role__ident
   {
      min-width: 0;
   }

.kisaka-careers-role__eyebrow
   {
      margin: 0 0 10px;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--roles-accent);
   }

.kisaka-careers-role__title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.03em;
      text-transform: capitalize;
      color: var(--roles-ink);
      -webkit-transition: color 160ms ease;
      -o-transition: color 160ms ease;
      transition: color 160ms ease;
   }

/* The meta line is the four facts that decide whether to read further.
   Each fact carries its own glyph — clock, rank, workplace, pin — so the
   row scans as four labelled chips rather than a dotted sentence. Masked
   Lucide strokes, one family, so they sit at the same optical weight as
   the 15px copy and inherit its colour. */
.kisaka-careers-role__meta
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 8px 22px;
      margin: 14px 0 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.4;
      color: var(--roles-body);
   }

.kisaka-careers-role__meta span
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 7px;
   }

.kisaka-careers-role__meta span::before
   {
      content: "";
      width: 16px;
      height: 16px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      background-color: currentColor;
      -webkit-mask: var(--role-meta-icon) center / contain no-repeat;
      mask: var(--role-meta-icon) center / contain no-repeat;
   }

.kisaka-careers-role__meta span:nth-child(1)
   {
      --role-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
   }

.kisaka-careers-role__meta span:nth-child(2)
   {
      --role-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
   }

.kisaka-careers-role__meta span:nth-child(3)
   {
      --role-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V8l7-5 7 5v13'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3Cpath d='M9 10h.01M15 10h.01M9 14h.01M15 14h.01'/%3E%3C/svg%3E");
   }

.kisaka-careers-role[data-mode="hybrid"] .kisaka-careers-role__meta span:nth-child(3)
   {
      --role-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
   }

.kisaka-careers-role__meta span:nth-child(4)
   {
      --role-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
   }

.kisaka-careers-role__actions
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      gap: 14px;
   }

/* Apply sits next to a title, not in a hero. Size to the word, keep the
   scramble and invert, and answer on press-down. */
.kisaka-careers-role__apply, .kisaka-careers-role__apply:visited
   {
      position: relative;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap: 6px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      min-width: 0;
      min-height: 36px;
      padding: 8px 14px;
      border: 1px solid var(--kisaka-red, #cb1f34);
      border-radius: var(--kisaka-btn-radius, 8px);
      background: var(--kisaka-red, #cb1f34);
      color: #fff;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      -webkit-transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, -webkit-transform 100ms ease-out;
      transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, transform 100ms ease-out;
   }

.kisaka-careers-role__apply:hover, .kisaka-careers-role__apply:focus-visible
   {
      color: var(--kisaka-red, #cb1f34);
      background: #fff;
      border-color: var(--kisaka-red, #cb1f34);
      text-decoration: none;
   }

.kisaka-careers-role__apply:active
   {
      -webkit-transform: scale(0.97);
      -ms-transform: scale(0.97);
      transform: scale(0.97);
   }

.kisaka-careers-role__apply:focus-visible
   {
      outline: 2px solid var(--roles-ink, #080808);
      outline-offset: 3px;
   }

.kisaka-careers-role__apply > span:first-child
   {
      white-space: nowrap;
   }

@media (pointer: coarse)
   {
      .kisaka-careers-role__apply, .kisaka-careers-role__apply:visited
         {
            min-height: 44px;
            padding: 10px 16px;
         }
   }

@media (hover: hover) and (pointer: fine)
   {
      /* The title is not a control. Red is only for the word being pointed at —
         never for the row, the meta, or Apply. */
      .kisaka-careers-role__title:hover
         {
            color: var(--roles-accent);
         }
   }

/* The description sits in the row, always. Apply is how you reach the posting. */
.kisaka-careers-role__detail
   {
      display: block;
   }

.kisaka-careers-role__detail-inner
   {
      padding-bottom: clamp(24px, 4vh, 40px);
   }

.kisaka-careers-role__desc
   {
      margin: 0;
      max-width: 62ch;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: -0.005em;
      color: var(--roles-body);
   }

/* Narrow: the four facts wrap. Icons stay — they are the labels, not
   separators — and the gap does the separating on its own. */
@media only screen and (max-width: 767px)
   {
      .kisaka-careers-role__meta
         {
            gap: 8px 18px;
         }

      .kisaka-careers-role__actions
         {
            width: auto;
         }
   }

@media only screen and (max-width: 991px)
   {
      .kisaka-careers-filters
         {
            max-width: none;
         }
   }

@media only screen and (min-width: 992px)
   {
      .kisaka-careers-roles::before
         {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: calc(var(--kisaka-header-h, 72px) + clamp(56px, 8vh, 88px));
            background: -webkit-linear-gradient( top, #ffffff 0, #ffffff var(--kisaka-header-h, 72px), rgba(255, 255, 255, 0.92) calc(var(--kisaka-header-h, 72px) + clamp(56px, 8vh, 88px) * 0.28), rgba(255, 255, 255, 0.55) calc(var(--kisaka-header-h, 72px) + clamp(56px, 8vh, 88px) * 0.58), rgba(255, 255, 255, 0) 100% );
            background: linear-gradient( 180deg, #ffffff 0, #ffffff var(--kisaka-header-h, 72px), rgba(255, 255, 255, 0.92) calc(var(--kisaka-header-h, 72px) + clamp(56px, 8vh, 88px) * 0.28), rgba(255, 255, 255, 0.55) calc(var(--kisaka-header-h, 72px) + clamp(56px, 8vh, 88px) * 0.58), rgba(255, 255, 255, 0) 100% );
            pointer-events: none;
            z-index: 6;
         }
   }

/* Reduced motion: the stage still arrives — it just cross-fades instead of
   travelling. The description is already on the page, so there is nothing to
   open. */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-careers-triangles, .kisaka-careers-triangles__glow
         {
            -webkit-animation: none;
            animation: none;
         }

      .kisaka-careers-call.is-armed [data-kisaka-call-rise]
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            -webkit-transition: opacity 240ms ease;
            -o-transition: opacity 240ms ease;
            transition: opacity 240ms ease;
         }

      .kisaka-careers-call.is-armed.is-visible [data-kisaka-call-rise]
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
         }

      .kisaka-careers-role__apply
         {
            -webkit-transition-duration: 1ms;
            transition-duration: 1ms;
         }

      .kisaka-careers-role__apply:active
         {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
         }

      .is-enhanced .kisaka-careers-role
         {
            -webkit-transform: none;
            transform: none;
            -webkit-transition: opacity 240ms ease;
            -o-transition: opacity 240ms ease;
            transition: opacity 240ms ease;
         }

      .is-enhanced .kisaka-careers-role.is-in
         {
            -webkit-transform: none;
            transform: none;
         }

      .kisaka-careers-roles__rail.is-armed > *
         {
            -webkit-transform: none;
            transform: none;
            -webkit-transition: opacity 240ms ease;
            -o-transition: opacity 240ms ease;
            transition: opacity 240ms ease;
         }

      .kisaka-careers-roles__rail.is-armed.is-visible > *
         {
            -webkit-transform: none;
            transform: none;
         }
   }