/* Page-level CSS extracted from the imported design.
   The design system itself lives in _ds/modernist-*/styles.css. */
body{margin:0;background:var(--color-bg);color:var(--color-text);text-wrap:pretty;font-family:var(--font-body),"Noto Sans HK",system-ui,sans-serif}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent)}

/* <image-slot> replacement: the authoring component rendered a cover-fitted
   image absolutely inside its container; a plain <img> does the same. */
.slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot-box{position:relative;overflow:hidden}

/* the design's style-hover attribute on the carousel arrows */
.rail-btn:hover{background:oklch(0.78 0.15 80);color:oklch(0.34 0.07 232)}

/* ---------------------------------------------------------------------
   Added during import — the source design is authored desktop-only and
   overflows horizontally below ~860px. Delete this block for a pixel-exact
   match to the .dc.html.
   --------------------------------------------------------------------- */
.nav{flex-wrap:wrap;row-gap:10px}
@media (max-width:860px){
  .positions-grid{grid-template-columns:minmax(0,1fr)!important}
  .positions-rail{position:static!important}
}
@media (max-width:560px){
  .job-row{grid-template-columns:88px minmax(0,1fr)!important}
  .job-row .job-main{grid-column:1/-1}
}
/* below 380px the hero's 340px and the FAQ's 300px column floors exceed the
   available width and push the page into horizontal scroll */
@media (max-width:380px){
  .hero-grid,#faq{grid-template-columns:minmax(0,1fr)!important}
}

/* --- form validation feedback (added for the Laravel build) --- */
.field-error{font-size:12.5px;line-height:1.5;color:var(--color-accent-700);margin:0}
.input.is-invalid{border-color:var(--color-accent);border-width:2px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}