:root {
  --paper:#f7f8f4;
  --surface:#edf0e8;
  --ink:#193e35;
  --body:#374940;
  --muted:#667069;
  --line:#d8dfd4;
  --accent:#dfed93;
  --ease:cubic-bezier(.2,0,0,1);
  font-family:"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
  scroll-padding-top:32px
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
  outline:3px solid #7a9227;
  outline-offset:5px
}

::selection {
  color:var(--ink);
  background:var(--accent)
}

.wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}

.skip-link {
  position:fixed;
  left:20px;
  top:12px;
  padding:16px;
  background:var(--ink);
  color:var(--paper);
  z-index:10;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  display:flex;
  align-items:center;
  min-height:112px;
  gap:40px;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:17px;
  font-weight:750;
  letter-spacing:.07em;
  min-height:44px
}

.brand-logo {
  display:block;
  width:286px;
  height:auto;
}

.header-caption {
  font-size:14px;
  color:var(--muted);
  margin-left:auto
}

.header-link {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px;
  font-weight:500;
  min-height:44px
}

.header-link .icon {
  width:18px;
  height:18px
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:650px;
  position:relative;
  align-items:center;
  padding-block:48px 56px;
  gap:32px
}

.hero-copy {
  padding-block:20px
}

.eyebrow {
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:500
}

.small-line {
  width:24px;
  height:1px;
  background:var(--ink)
}

h1,h2,p {
  margin:0
}

h1,h2 {
  text-wrap:balance
}

h1 {
  font-weight:500;
  font-size:clamp(76px,7.8vw,114px);
  letter-spacing:-.065em;
  line-height:1.02;
  margin-top:28px
}

h1 span {
  display:block;
  font-size:.64em;
  letter-spacing:-.055em;
  line-height:1.25
}

.salary {
  margin-top:36px
}

.salary-amount {
  display:block;
  font-size:37px;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.2
}

.salary-caption {
  display:block;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  margin-top:10px
}

.hero-actions {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:36px
}

.button {
  border:0;
  cursor:pointer;
  font-family:inherit;
  min-height:56px;
  padding:0 24px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  transition:background-color 150ms var(--ease),scale 150ms var(--ease),box-shadow 150ms var(--ease)
}

.button:active {
  scale:.96
}

.button-primary {
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 1px 2px #12392c16,0 3px 5px #12392c10;
  padding-right:22px
}

.button-primary:hover {
  background:#285548
}

.button-icon {
  width:56px;
  padding:0;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--line),0 1px 3px #12392c08
}

.button-icon:hover {
  background:var(--surface)
}

.arrow-down {
  transform:rotate(90deg)
}

.arrow-up {
  transform:rotate(-45deg)
}

.hero-art {
  align-self:stretch;
  min-height:480px;
  position:relative;
  background:var(--surface);
  border-radius:4px;
  overflow:hidden;
  background-image:linear-gradient(#193e3506 1px,transparent 1px),linear-gradient(90deg,#193e3506 1px,transparent 1px);
  background-size:40px 40px
}

.hero-art img {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain;
  outline:1px solid oklch(0 0 0 / .1);
  outline-offset:-1px
}

.art-coordinate {
  position:absolute;
  top:27px;
  left:28px;
  font-family:monospace;
  letter-spacing:.09em;
  font-size:11px;
  color:var(--muted);
  z-index:1
}

.art-caption {
  position:absolute;
  bottom:23px;
  left:28px;
  right:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:500
}

.art-cross {
  font-size:26px;
  font-weight:300
}

.art-corner {
  position:absolute;
  width:8px;
  height:8px;
  border-color:#839386;
  border-style:solid;
  z-index:1
}

.corner-tl {
  left:12px;
  top:12px;
  border-width:1px 0 0 1px
}

.corner-tr {
  right:12px;
  top:12px;
  border-width:1px 1px 0 0
}

.corner-bl {
  left:12px;
  bottom:12px;
  border-width:0 0 1px 1px
}

.corner-br {
  right:12px;
  bottom:12px;
  border-width:0 1px 1px 0
}

.facts {
  border-block:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr 1.6fr;
  padding-block:10px
}

.fact {
  padding:25px 26px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  line-height:1.5
}

.fact:nth-child(3n+1) {
  padding-left:0
}

.fact:nth-child(3n) {
  padding-right:0
}

.fact:nth-child(-n+3) {
  border-bottom:1px solid var(--line)
}

.fact-label {
  font-size:13px;
  color:var(--muted)
}

.fact-value {
  font-size:18px;
  font-weight:450;
  letter-spacing:-.015em
}

.fact-full {
  justify-content:center
}

.fact-contract .fact-value,.fact-place .fact-value {
  font-size:16px;
  max-width:34ch
}

.details-layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:clamp(48px,7.5vw,120px);
  padding-block:88px 72px
}

.contents {
  align-self:start;
  position:sticky;
  top:40px
}

.contents .eyebrow {
  color:var(--muted);
  margin-bottom:22px
}

.contents nav {
  display:flex;
  flex-direction:column;
  gap:3px
}

.contents nav a {
  display:flex;
  align-items:center;
  min-height:49px;
  gap:20px;
  padding:0 14px;
  font-size:14px;
  border-radius:4px;
  transition:background-color 150ms var(--ease),color 150ms var(--ease)
}

.contents nav a span {
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.contents nav a .icon {
  margin-left:auto;
  width:16px;
  height:16px;
  opacity:0;
  transition:opacity 150ms var(--ease)
}

.contents nav a:hover {
  background:var(--surface)
}

.contents nav a.is-active {
  background:var(--surface);
  font-weight:500
}

.contents nav a.is-active .icon {
  opacity:1
}

.save-link {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  font-size:13px;
  color:var(--muted);
  margin-top:28px;
  padding-left:14px
}

.save-link:hover {
  color:var(--ink)
}

.save-link .icon {
  width:17px;
  height:17px
}

.description {
  min-width:0
}

.section-heading {
  display:flex;
  gap:16px;
  align-items:baseline;
  margin-bottom:30px
}

.section-number {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--muted)
}

h2 {
  font-size:32px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.035em
}

.text-section {
  scroll-margin-top:36px;
  padding-bottom:44px
}

.text-section+.text-section {
  border-top:1px solid var(--line);
  padding-top:38px
}

.text-section p {
  font-size:17px;
  line-height:1.8;
  color:var(--body);
  max-width:72ch;
  text-wrap:pretty
}

.text-section p+p {
  margin-top:26px
}

.text-section strong {
  font-weight:600;
  color:var(--ink)
}

.conditions {
  padding-bottom:0
}

.conditions ul {
  padding:0;
  margin:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:17px
}

.conditions li {
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:17px;
  line-height:1.6;
  color:var(--body);
  text-wrap:pretty
}

.conditions li .icon {
  width:20px;
  height:20px;
  margin-top:3px;
  stroke-width:1.6
}

.location {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:40px 48px 48px;
  background:var(--ink);
  color:var(--paper);
  border-radius:6px;
  scroll-margin-top:28px
}

.location-top {
  display:flex;
  align-items:center;
  gap:17px
}

.location-top .section-number {
  color:#b6c3b9
}

.location h2 {
  font-size:17px;
  letter-spacing:-.01em;
  line-height:1.4
}

.location-pin {
  margin-left:auto;
  color:var(--accent)
}

.address {
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.25;
  letter-spacing:-.04em;
  margin-top:43px;
  position:relative;
  z-index:1;
  max-width:75%
}

.address span {
  display:block;
  color:var(--accent)
}

.button-map {
  margin-top:32px;
  background:var(--accent);
  color:var(--ink);
  gap:28px;
  position:relative;
  z-index:1;
  box-shadow:0 2px 4px #09261e22
}

.button-map:hover {
  background:#eff8b8
}

.location-graphic {
  position:absolute;
  right:-125px;
  bottom:-280px;
  width:620px;
  height:620px;
  transform:rotate(-23deg);
  z-index:-1
}

.location-graphic i {
  position:absolute;
  border:1px solid #9eaf9229;
  inset:calc(var(--i)*28px);
  border-radius:50%
}

.location-graphic i:nth-child(1) {
  --i:0
}

.location-graphic i:nth-child(2) {
  --i:1
}

.location-graphic i:nth-child(3) {
  --i:2
}

.location-graphic i:nth-child(4) {
  --i:3
}

.location-graphic i:nth-child(5) {
  --i:4
}

.location-graphic i:nth-child(6) {
  --i:5
}

.location-graphic i:nth-child(7) {
  --i:6
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:118px;
  font-size:12px;
  color:var(--muted)
}

.site-footer a {
  display:flex;
  align-items:center;
  gap:24px;
  min-height:44px
}

.site-footer .icon {
  width:16px;
  height:16px
}

@media(min-width:1600px) {
  .hero {
    min-height:690px
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    min-height:570px;
    gap:24px
  }
  .hero-art {
    min-height:440px
  }
  h1 {
    font-size:84px
  }
  .salary-amount {
    font-size:33px
  }
  .details-layout {
    grid-template-columns:220px minmax(0,1fr);
    gap:48px
  }
  .header-caption {
    display:none
  }
  .header-link {
    margin-left:auto
  }
}

@media(max-width:760px) {
  :root {
    scroll-padding-top:18px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    min-height:82px;
    gap:12px
  }
  .brand {
    font-size:12px;
    letter-spacing:.06em;
    gap:9px
  }
  .brand-logo {
    width:clamp(172px,50vw,230px);
  }
  .header-link {
    font-size:12px;
    gap:8px;
    white-space:nowrap
  }
  .header-link .icon {
    width:16px;
    height:16px
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:36px 32px;
    gap:32px;
    min-height:0
  }
  .hero-copy {
    padding:0
  }
  .eyebrow {
    font-size:10px
  }
  h1 {
    font-size:clamp(72px,15.4vw,100px);
    margin-top:23px;
    line-height:1.02
  }
  h1 span {
    font-size:.66em
  }
  .salary {
    margin-top:26px
  }
  .salary-amount {
    font-size:32px
  }
  .salary-caption {
    font-size:14px;
    margin-top:8px
  }
  .hero-actions {
    margin-top:27px
  }
  .button {
    font-size:13px;
    min-height:54px
  }
  .button-icon {
    width:54px
  }
  .hero-art {
    height:350px;
    min-height:0
  }
  .hero-art img {
    object-fit:contain;
    height:118%;
    top:-8%
  }
  .art-coordinate {
    top:22px;
    left:24px
  }
  .art-caption {
    bottom:18px;
    left:24px;
    right:24px;
    font-size:9px
  }
  .facts {
    grid-template-columns:1fr 1fr;
    padding-block:0
  }
  .fact {
    padding:22px 14px!important;
    min-height:100px;
    border-bottom:1px solid var(--line)
  }
  .fact:nth-child(odd) {
    padding-left:0!important
  }
  .fact:nth-child(even) {
    padding-right:0!important
  }
  .fact-contract {
    grid-column:1/-1;
    padding-left:0!important;
    min-height:0
  }
  .fact-schedule {
    padding-left:0!important;
    padding-right:14px!important
  }
  .fact-hours {
    padding-left:14px!important;
    padding-right:0!important
  }
  .fact-place {
    grid-column:1/-1;
    padding-left:0!important;
    border-bottom:0;
    min-height:0
  }
  .fact-label {
    font-size:12px
  }
  .fact-value {
    font-size:17px
  }
  .fact-contract .fact-value {
    max-width:none;
    font-size:15px
  }
  .fact-place .fact-value {
    font-size:15px
  }
  .details-layout {
    display:block;
    padding-block:36px 42px
  }
  .contents {
    position:static;
    margin-bottom:38px
  }
  .contents>.eyebrow,.contents .save-link {
    display:none
  }
  .contents nav {
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:8px;
    gap:4px;
    scrollbar-width:thin
  }
  .contents nav a {
    min-height:44px;
    white-space:nowrap;
    padding:0 12px;
    font-size:12px;
    gap:8px
  }
  .contents nav a span,.contents nav a .icon {
    display:none
  }
  .section-heading {
    gap:12px;
    margin-bottom:23px
  }
  h2 {
    font-size:29px
  }
  .text-section p {
    font-size:16px;
    line-height:1.75
  }
  .text-section {
    padding-bottom:32px
  }
  .text-section+.text-section {
    padding-top:30px
  }
  .conditions {
    padding-bottom:0
  }
  .conditions li {
    font-size:16px;
    gap:12px
  }
  .location {
    padding:28px 24px 32px
  }
  .location-top {
    gap:12px
  }
  .location h2 {
    font-size:14px
  }
  .location-pin {
    width:19px;
    height:19px
  }
  .address {
    font-size:clamp(25px,6.8vw,38px);
    margin-top:32px;
    max-width:100%;
    line-height:1.4
  }
  .button-map {
    margin-top:24px;
    padding-inline:18px;
    gap:24px
  }
  .location-graphic {
    opacity:.5;
    right:-380px
  }
  .site-footer {
    min-height:96px;
    font-size:11px
  }
  .site-footer a {
    gap:8px
  }
}

@media(max-width:360px) {
  .hero-actions .button-primary {
    padding-inline:16px;
    gap:12px;
    font-size:12px;
    white-space:nowrap;
  }
  .hero-actions .button-icon {
    flex-shrink:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important
  }
  .button:active {
    scale:1
  }
}

/* Text-only hero and application form. */
.hero {
  display:block;
  min-height:0;
  padding-block:64px 72px;
}
.hero-copy {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  column-gap:56px;
  padding:0;
}
.hero-copy>.eyebrow {
  grid-column:1/-1;
  margin-bottom:28px;
}
.hero h1 {
  grid-row:2/4;
  margin:0;
}
.hero .salary {
  margin:16px 0 0;
  align-self:end;
}
.hero-actions {
  margin-top:26px;
  align-self:start;
}
.application {
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.application h2 {
  margin-bottom:28px;
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.field-group,.floating-field {
  min-width:0;
}
.floating-field {
  position:relative;
}
.floating-field input,.floating-field textarea {
  display:block;
  width:100%;
  min-height:66px;
  border:1px solid #aab7a9;
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  line-height:1.5;
  padding:27px 17px 12px;
  outline:none;
  transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease);
}
.floating-field textarea {
  min-height:136px;
  resize:vertical;
}
.floating-field label {
  position:absolute;
  left:18px;
  top:22px;
  color:var(--muted);
  font-size:16px;
  line-height:1.25;
  transform-origin:top left;
  cursor:text;
  transition:transform 150ms var(--ease),color 150ms var(--ease);
}
.floating-field input:focus+label,
.floating-field input:not(:placeholder-shown)+label,
.floating-field textarea:focus+label,
.floating-field textarea:not(:placeholder-shown)+label {
  transform:translateY(-13px) scale(.75);
}
.floating-field input:focus,.floating-field textarea:focus {
  border-color:var(--ink);
  box-shadow:0 0 0 2px #193e3525;
}
.floating-field input[aria-invalid="true"] {
  border-color:#a0372b;
}
.floating-field input[aria-invalid="true"]:focus {
  box-shadow:0 0 0 2px #a0372b25;
}
.field-error {
  margin:8px 2px 0;
  color:#963b30;
  font-size:13px;
  line-height:1.5;
}
.form-actions {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
}
.form-actions .button {
  flex-shrink:0;
  gap:16px;
  padding-inline:18px;
}
.privacy-note {
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
  max-width:32ch;
  text-wrap:pretty;
}
.form-status {
  font-size:14px;
  line-height:1.6;
  color:var(--body);
  margin-top:18px;
}
.map-panel {
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.map-panel iframe {
  display:block;
  width:100%;
  height:460px;
  border:0;
}
[hidden] {
  display:none!important;
}
.button-map[aria-expanded="true"] .icon {
  transform:rotate(-90deg);
}
@media(max-width:1000px) {
  .hero-copy { column-gap:32px; }
  .hero h1 { font-size:72px; }
  .form-actions { flex-direction:column;align-items:flex-start;gap:14px; }
  .privacy-note { max-width:48ch; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .hero { padding-block:36px 42px; }
  .hero-copy { display:block; }
  .hero-copy>.eyebrow { margin-bottom:23px; }
  .hero h1 { font-size:clamp(72px,15.4vw,100px); }
  .hero .salary { margin-top:28px; }
  .application { margin-top:36px;padding-top:30px; }
  .application h2 { font-size:27px;text-wrap:initial; }
  .form-actions .button { width:100%;gap:12px;padding-inline:12px;font-size:13px; }
  .map-panel iframe { height:400px; }
}
@media(prefers-reduced-motion:reduce) {
  .floating-field label,.floating-field input,.floating-field textarea { transition:none; }
}
@media print {
  .application,.map-panel { display:none; }
  .site-header,.hero-art,.hero-actions,.contents,.button-map,.site-footer,.skip-link {
    display:none
  }
  .wrap {
    width:100%
  }
  .hero {
    display:block;
    min-height:0;
    padding:20px 0
  }
  .hero-copy {
    padding:0
  }
  h1 {
    font-size:44px
  }
  h1 span {
    display:inline;
    font-size:1em
  }
  .salary {
    margin-top:15px
  }
  .salary-amount {
    font-size:25px
  }
  .details-layout {
    display:block;
    padding-block:25px
  }
  .text-section p,.conditions li {
    font-size:11pt;
    line-height:1.5
  }
  .text-section {
    padding-bottom:20px
  }
  .text-section+.text-section {
    padding-top:20px
  }
  .location {
    background:transparent;
    color:var(--ink);
    padding:20px 0;
    border-top:1px solid var(--line)
  }
  .address {
    font-size:25px;
    margin-top:15px
  }
  .address span {
    color:var(--ink)
  }
  .location-graphic {
    display:none
  }
  h2 {
    font-size:23px
  }
  .fact {
    padding-block:12px
  }
  .fact-value {
    font-size:14px
  }
}
