@import url("./fonts.css");

/* ===== p40 jump one-inspired: sidebar nav + orange display headers + skyline ===== */
:root{
  --p40-bg: #ffffff;
  --p40-ink: #111111;
  --p40-mute: #6b6b6b;
  --p40-line: #e6e6e6;
  --p40-side: #0a0a0a;
  --p40-side-ink: #ffffff;
  --p40-accent: #ff5c00;
  --p40-accent-ink: #ffffff;
  --p40-soft: #f4f4f2;
  --p40-side-w: 200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.p40-body{
  font-family: var(--p40-font-jp);
  color: var(--p40-ink);
  background: var(--p40-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}

.p40-skip{position:absolute;left:-9999px}
.p40-skip:focus{position:fixed;left:8px;top:8px;background:#000;color:#fff;padding:8px;z-index:9999}

/* ===== Sidebar ===== */
.p40-side{
  position: fixed;
  top:0; left:0; bottom:0;
  width: var(--p40-side-w);
  background: var(--p40-side);
  color: var(--p40-side-ink);
  z-index: 50;
  display:flex;
  flex-direction:column;
  border-right: 1px solid #000;
}
.p40-side__brand{
  padding: 24px 20px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.p40-side__logo{
  width: 36px; height:36px;
  border-radius:50%;
  background: var(--p40-side-ink);
  color: var(--p40-side);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--p40-font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
}
.p40-side__brandtxt{
  display:flex; flex-direction:column; line-height:1.1;
}
.p40-side__brandtxt strong{
  font-family: var(--p40-font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.p40-side__brandtxt small{
  font-size: 9px;
  letter-spacing: 0.18em;
  color:#bbb;
  margin-top:2px;
}
.p40-side__nav{
  display:flex; flex-direction:column;
  padding: 8px 0;
  border-top: 1px solid #222;
  margin-top: 6px;
}
.p40-side__nav a{
  display:block;
  padding: 12px 20px;
  font-family: var(--p40-font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #1a1a1a;
  position: relative;
}
.p40-side__nav a:hover{background:#161616}
.p40-side__nav a.is-current{color: var(--p40-accent)}
.p40-side__welcome{
  margin-top: auto;
  background: var(--p40-accent);
  color: var(--p40-accent-ink);
  padding: 14px 18px;
  font-family: var(--p40-font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.55;
}
.p40-side__welcome b{display:block; font-size:14px; letter-spacing:0.06em}

.p40-entry-tab{
  position: fixed;
  top: 0;
  right: 0;
  background: var(--p40-accent);
  color: #fff;
  padding: 14px 28px;
  font-family: var(--p40-font-ui);
  font-size: 14px;
  letter-spacing: 0.18em;
  z-index: 60;
}

/* ===== Page shell ===== */
.p40-page{
  margin-left: var(--p40-side-w);
  min-height: 100vh;
}

/* ===== Hero band (orange w/ skyline) ===== */
.p40-hero{
  position: relative;
  background: var(--p40-accent);
  color: #fff;
  padding: 60px 8% 0;
  overflow: hidden;
}
.p40-hero__eyebrow{
  font-family: var(--p40-font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  opacity:.9;
  margin-bottom: 8px;
}
.p40-hero__title{
  font-family: var(--p40-font-display);
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}
.p40-hero__title em{
  font-style: normal;
  display: inline-block;
  background: #fff;
  color: var(--p40-accent);
  padding: 0 .12em;
}
.p40-hero__jp{
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  max-width: 720px;
}
.p40-hero__sub{
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.8;
  max-width: 640px;
  opacity:.95;
}
.p40-hero__bottom{
  margin-top: 40px;
  position: relative;
  height: 80px;
}
/* skyline silhouette */
.p40-skyline{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 72px;
  background:
    linear-gradient(to top, #0a0a0a 0%, #0a0a0a 100%);
  -webkit-mask:
    linear-gradient(#000,#000),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 72' preserveAspectRatio='none'><path fill='black' d='M0 72 V40 H30 V20 H50 V40 H80 V10 H110 V40 H140 V25 H170 V40 H200 V5 H225 V40 H260 V30 H290 V40 H320 V15 H350 V40 H380 V25 H410 V40 H440 V0 H470 V40 H500 V20 H525 V40 H560 V30 H590 V40 H620 V10 H650 V40 H680 V20 H710 V40 H740 V5 H770 V40 H800 V25 H830 V40 H860 V15 H895 V40 H925 V30 H960 V40 H990 V10 H1020 V40 H1055 V20 H1085 V40 H1115 V25 H1145 V40 H1180 V35 H1200 V72 Z'/></svg>");
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(#000,#000),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 72' preserveAspectRatio='none'><path fill='black' d='M0 72 V40 H30 V20 H50 V40 H80 V10 H110 V40 H140 V25 H170 V40 H200 V5 H225 V40 H260 V30 H290 V40 H320 V15 H350 V40 H380 V25 H410 V40 H440 V0 H470 V40 H500 V20 H525 V40 H560 V30 H590 V40 H620 V10 H650 V40 H680 V20 H710 V40 H740 V5 H770 V40 H800 V25 H830 V40 H860 V15 H895 V40 H925 V30 H960 V40 H990 V10 H1020 V40 H1055 V20 H1085 V40 H1115 V25 H1145 V40 H1180 V35 H1200 V72 Z'/></svg>");
  mask-composite: intersect;
  mask-size: 100% 100%;
  background-color: #0a0a0a;
}

/* ===== Hero illustration tower ===== */
.p40-tower{
  position: absolute;
  right: 8%;
  bottom: 72px;
  width: 60px;
  height: 130px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 130'><rect x='25' y='0' width='10' height='40' fill='black'/><polygon points='10,40 50,40 50,90 10,90' fill='black'/><rect x='28' y='90' width='4' height='40' fill='black'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 130'><rect x='25' y='0' width='10' height='40' fill='black'/><polygon points='10,40 50,40 50,90 10,90' fill='black'/><rect x='28' y='90' width='4' height='40' fill='black'/></svg>") no-repeat center / contain;
}

/* ===== Section base ===== */
.p40-section{
  padding: 96px 8% 120px;
  background: #fff;
}
.p40-section--soft{ background: var(--p40-soft) }
.p40-section--dark{ background: #0a0a0a; color:#fff }
.p40-section__title{
  font-family: var(--p40-font-display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  text-align: center;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.p40-section__sub{
  text-align:center;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--p40-mute);
  margin: 0 0 56px;
}
.p40-section__lead{
  text-align:center;
  max-width: 720px;
  margin: 0 auto 60px;
  font-size: 14px;
  line-height: 2;
}

/* ===== Numbers ===== */
.p40-numbers{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--p40-line);
  border-left: 1px solid var(--p40-line);
}
.p40-num{
  padding: 36px 24px;
  border-right: 1px solid var(--p40-line);
  border-bottom: 1px solid var(--p40-line);
  text-align: center;
}
.p40-num__v{
  font-family: var(--p40-font-display);
  font-size: 68px;
  line-height: 1;
  color: var(--p40-accent);
}
.p40-num__v small{
  font-size: 22px;
  margin-left: 4px;
  color: var(--p40-ink);
}
.p40-num__l{
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: 0.06em;
}
.p40-num__n{
  font-size: 11px;
  color: var(--p40-mute);
  margin-top: 4px;
}

/* ===== Works grid (jobs preview) ===== */
.p40-works{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--p40-ink);
  border: 1px solid var(--p40-ink);
}
.p40-work{
  background: #fff;
  padding: 36px 28px;
  position: relative;
  display:flex;
  flex-direction:column;
  min-height: 320px;
}
.p40-work__no{
  font-family: var(--p40-font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--p40-accent);
}
.p40-work__title{
  font-size: 22px;
  font-weight: 900;
  margin: 8px 0 4px;
  letter-spacing: 0.02em;
}
.p40-work__sub{
  font-size: 12px;
  color: var(--p40-mute);
  margin: 0 0 16px;
  letter-spacing: 0.06em;
}
.p40-work__lead{
  font-size: 13px;
  line-height: 1.85;
  margin: 0 0 20px;
}
.p40-work__more{
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--p40-font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 10px 22px;
  border: 1px solid var(--p40-ink);
  transition: .2s;
}
.p40-work__more:hover{background: var(--p40-ink); color: #fff}

/* ===== Voice / Instructor cards ===== */
.p40-voices{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.p40-voice{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
  background: #fff;
  padding: 24px;
  border: 1px solid var(--p40-line);
}
.p40-voice img{
  width: 180px; height: 180px; object-fit: cover;
  filter: grayscale(0.1);
}
.p40-voice__name{
  font-family: var(--p40-font-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0;
}
.p40-voice__attr{
  font-size: 11px;
  color: var(--p40-mute);
  letter-spacing: 0.1em;
  margin: 4px 0 12px;
}
.p40-voice__quote{
  font-size: 14px;
  line-height: 1.9;
  font-weight: 500;
}

/* ===== Marquee ===== */
.p40-marquee{
  background: var(--p40-accent);
  color: #fff;
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--p40-font-display);
  font-size: 26px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.p40-marquee__track{
  display:inline-block;
  padding-left: 100%;
  animation: p40-marq 22s linear infinite;
}
.p40-marquee__track span{ margin: 0 24px }
@keyframes p40-marq{
  from{ transform: translateX(0) }
  to{ transform: translateX(-100%) }
}

/* ===== Jobs index (jobs/index.njk) ===== */
.p40-jobs__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--p40-ink);
  border: 1px solid var(--p40-ink);
}
.p40-jobcard{
  background: #fff;
  padding: 32px 28px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
}
.p40-jobcard__code{
  font-family: var(--p40-font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--p40-accent);
}
.p40-jobcard__title{
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  letter-spacing: 0.02em;
}
.p40-jobcard__sub{
  font-size: 12px;
  color: var(--p40-mute);
  letter-spacing: 0.06em;
}
.p40-jobcard__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 8px;
}
.p40-jobcard__meta span{
  font-size: 11px;
  padding: 4px 10px;
  background: var(--p40-soft);
  letter-spacing: 0.05em;
}
.p40-jobcard__lead{
  font-size: 13px;
  line-height: 1.85;
  flex:1;
}
.p40-jobcard__more{
  align-self: flex-start;
  font-family: var(--p40-font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 10px 24px;
  background: var(--p40-ink);
  color: #fff;
}
.p40-jobcard__more:hover{ background: var(--p40-accent) }

/* ===== Job detail ===== */
.p40-job__hero{
  background: var(--p40-accent);
  color: #fff;
  padding: 80px 8% 100px;
  position: relative;
}
.p40-job__hero__eyebrow{
  font-family: var(--p40-font-ui);
  font-size: 12px;
  letter-spacing: 0.24em;
  opacity:.9;
}
.p40-job__hero__title{
  font-family: var(--p40-font-display);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;
  margin: 12px 0 8px;
  letter-spacing: 0.01em;
}
.p40-job__hero__sub{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 24px;
}
.p40-job__hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.p40-job__hero__meta span{
  font-family: var(--p40-font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  background: #fff;
  color: var(--p40-accent);
  padding: 8px 14px;
}
.p40-job__sec{
  padding: 64px 8% 72px;
  border-bottom: 1px solid var(--p40-line);
}
.p40-job__sec h2{
  font-family: var(--p40-font-display);
  font-size: 34px;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 6px solid var(--p40-accent);
}
.p40-job__sec p{ font-size: 14px; line-height: 2 }
.p40-job__sec ul{ padding-left: 1.2em; margin: 0 }
.p40-job__sec li{ font-size: 14px; line-height: 2 }

/* ===== Day schedule ===== */
.p40-day{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
}
.p40-day__row{
  display: contents;
}
.p40-day__t{
  font-family: var(--p40-font-display);
  font-size: 26px;
  color: var(--p40-accent);
  padding: 18px 0 18px 4px;
  border-bottom: 1px solid var(--p40-line);
  letter-spacing: 0.04em;
}
.p40-day__b{
  padding: 20px 0 18px 24px;
  border-bottom: 1px solid var(--p40-line);
  border-left: 2px solid var(--p40-ink);
}
.p40-day__b b{
  display:block;
  font-size: 15px;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.p40-day__b p{ font-size: 13px; margin: 0; line-height: 1.8; color: #333 }

/* ===== Requirements table ===== */
.p40-reqtable{
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--p40-ink);
}
.p40-reqtable th,
.p40-reqtable td{
  text-align: left;
  vertical-align: top;
  padding: 22px 20px;
  border-bottom: 1px solid var(--p40-line);
  font-size: 14px;
  line-height: 1.85;
}
.p40-reqtable th{
  width: 220px;
  background: var(--p40-soft);
  font-family: var(--p40-font-ui);
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ===== FAQ ===== */
.p40-faqlist{
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--p40-ink);
}
.p40-faqlist details{
  border-bottom: 1px solid var(--p40-line);
  padding: 0;
}
.p40-faqlist summary{
  padding: 24px 28px 24px 70px;
  list-style: none;
  cursor: pointer;
  position: relative;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p40-faqlist summary::-webkit-details-marker{ display:none }
.p40-faqlist summary::before{
  content: "Q";
  position: absolute;
  left: 28px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--p40-font-display);
  color: var(--p40-accent);
  font-size: 24px;
}
.p40-faqlist summary::after{
  content: "+";
  position: absolute;
  right: 28px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--p40-font-display);
  font-size: 22px;
}
.p40-faqlist details[open] summary::after{ content: "−" }
.p40-faqlist__a{
  padding: 0 28px 28px 70px;
  font-size: 14px;
  line-height: 2;
  color: #333;
  position: relative;
}
.p40-faqlist__a::before{
  content: "A";
  position: absolute;
  left: 28px; top: -2px;
  font-family: var(--p40-font-display);
  color: var(--p40-ink);
  font-size: 24px;
}

/* ===== Apply form ===== */
.p40-form{
  display:flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.p40-form__row{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.p40-form__row label{
  font-family: var(--p40-font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  display:flex;
  gap: 8px;
  align-items:center;
}
.p40-form__row label .req{
  font-size: 10px;
  background: var(--p40-accent);
  color: #fff;
  padding: 2px 8px;
  letter-spacing: 0.12em;
}
.p40-form__row input,
.p40-form__row select,
.p40-form__row textarea{
  font: inherit;
  padding: 14px 16px;
  border: 1px solid var(--p40-ink);
  background: #fff;
  border-radius: 0;
  font-size: 14px;
  width: 100%;
}
.p40-form__row textarea{ min-height: 140px; resize: vertical }
.p40-form__submit{
  align-self: center;
  font-family: var(--p40-font-display);
  font-size: 20px;
  letter-spacing: 0.18em;
  background: var(--p40-accent);
  color: #fff;
  border: 0;
  padding: 20px 60px;
  cursor: pointer;
}
.p40-form__submit:hover{ background: var(--p40-ink) }

/* ===== Company history ===== */
.p40-history{
  border-top: 2px solid var(--p40-ink);
}
.p40-history__row{
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 22px 0;
  border-bottom: 1px solid var(--p40-line);
  font-size: 14px;
  line-height: 1.85;
}
.p40-history__y{
  font-family: var(--p40-font-display);
  font-size: 24px;
  color: var(--p40-accent);
  letter-spacing: 0.04em;
}

/* ===== Message block ===== */
.p40-message{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.p40-message img{
  width: 280px; height: 280px; object-fit: cover;
}
.p40-message h3{
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 16px;
  line-height: 1.4;
}
.p40-message p{
  font-size: 14px;
  line-height: 2;
  white-space: pre-line;
}
.p40-message__name{
  margin-top: 24px;
  font-family: var(--p40-font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.p40-message__name b{
  display:block;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ===== Footer ===== */
.p40-foot{
  background: #0a0a0a;
  color: #fff;
  margin-left: var(--p40-side-w);
  padding: 64px 8% 40px;
}
.p40-foot__cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-bottom: 1px solid #222;
  padding-bottom: 40px;
}
.p40-foot__col h4{
  font-family: var(--p40-font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--p40-accent);
  margin: 0 0 12px;
}
.p40-foot__col ul{ list-style:none; padding:0; margin:0 }
.p40-foot__col li{ margin: 6px 0 }
.p40-foot__col a{ font-size: 12px; color: #ccc }
.p40-foot__col a:hover{ color: #fff }
.p40-foot__bot{
  padding-top: 24px;
  display:flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 880px){
  :root{ --p40-side-w: 0px }
  .p40-side{
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
  }
  .p40-side__brand{ flex: 1 1 auto }
  .p40-side__nav{
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid #222;
    margin-top: 0;
  }
  .p40-side__nav a{
    flex: 1 1 33%;
    text-align:center;
    border-bottom: 1px solid #1a1a1a;
    padding: 10px 4px;
    font-size: 11px;
  }
  .p40-side__welcome{ display:none }
  .p40-entry-tab{ padding: 10px 14px; font-size: 11px }
  .p40-page, .p40-foot{ margin-left: 0 }
  .p40-section{ padding: 64px 6% 80px }
  .p40-hero{ padding: 40px 6% 0 }
  .p40-tower{ right: 6%; bottom: 60px; width: 44px; height: 100px }
  .p40-numbers{ grid-template-columns: repeat(2, 1fr) }
  .p40-works{ grid-template-columns: 1fr }
  .p40-jobs__grid{ grid-template-columns: 1fr }
  .p40-voices{ grid-template-columns: 1fr }
  .p40-voice{ grid-template-columns: 1fr; }
  .p40-voice img{ width: 100%; height: auto; aspect-ratio: 1/1 }
  .p40-foot__cols{ grid-template-columns: repeat(2, 1fr) }
  .p40-message{ grid-template-columns: 1fr }
  .p40-message img{ width: 100%; height: auto; aspect-ratio: 1/1 }
  .p40-day{ grid-template-columns: 80px 1fr }
  .p40-reqtable th{ width: 120px; padding: 14px 10px }
  .p40-reqtable td{ padding: 14px 10px }
  .p40-history__row{ grid-template-columns: 90px 1fr }
}