/* 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}

/* --- legal pages (privacy policy, terms, collection statement) --- */
.legal{max-width:760px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(20px,5vw,48px) clamp(40px,6vw,80px);font-size:15.5px;line-height:1.85}
.legal h1{font-family:var(--font-heading),'Noto Sans HK',sans-serif;font-weight:var(--font-heading-weight);font-size:clamp(28px,4vw,44px);line-height:1.15;letter-spacing:-.015em;margin:0}
.legal h2{font-family:var(--font-heading),'Noto Sans HK',sans-serif;font-size:19px;line-height:1.4;margin:36px 0 10px}
.legal p,.legal ul,.legal ol{margin:0 0 14px}
.legal ul,.legal ol{padding-left:1.4em}
.legal li{margin:0 0 6px}
.legal a{text-decoration:underline}
.legal-meta{font-size:13px;color:color-mix(in srgb,var(--color-text) 65%,transparent);margin:14px 0 0}
.legal-callout{border:2px solid var(--color-divider);padding:18px 20px;margin:24px 0}
.legal-callout p:last-child{margin:0}
.legal-contact{list-style:none;padding:0!important;border-top:2px solid var(--color-divider);padding-top:14px!important}