/* Page-level CSS extracted from the imported design.
   The design system itself lives in _ds/modernist-<id>/styles.css. */

/* Career Harbour palette: swaps the design system's red accent for teal, so every
   .btn-primary, link and accent rule picks up the brand without touching the
   design system file. --color-hub-gold is the mark's dot. */
:root{
  --color-accent:#0b6e60;
  --color-accent-100:#e8f6f3;
  --color-accent-200:#c9ebe4;
  --color-accent-300:#9bd9cc;
  --color-accent-400:#5fbfac;
  --color-accent-500:#1f9a84;
  --color-accent-600:#0d8270;
  --color-accent-700:#0a5f53;
  --color-accent-800:#08463e;
  --color-accent-900:#062d28;
  --color-hub-gold:#f2b632;
}
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}

/* --- landing scroll reveal ---
   html.motion is set by a head script unless the visitor prefers reduced
   motion, so without JS everything simply shows. A [data-reveal] element gets
   .is-visible once it scrolls into view, which plays its own .reveal (or the
   .reveal elements inside it) in --i order. */
html.motion .reveal{opacity:0;transform:translateY(24px)}
html.motion .reveal.reveal-right{transform:translateX(40px)}
html.motion .reveal.reveal-zoom{transform:scale(.96)}
html.motion .is-visible .reveal,html.motion .reveal.is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 120ms)}

.job-card .slot{transition:transform .5s ease}
.job-card:hover .slot{transform:scale(1.05)}

/* --- landing 點樣運作 timeline ---
   Three steps joined by a line; plays in order when #how is revealed. */
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative}
.how-steps::before,.how-steps::after{content:"";position:absolute;top:31px;left:32px;right:calc((100% - 64px) / 3 - 32px);height:2px}
.how-steps::before{background:color-mix(in srgb,var(--color-bg) 22%,transparent)}
.how-steps::after{background:var(--color-hub-gold);transform-origin:left center}
.how-step{position:relative}
.how-dot{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--color-hub-gold);background:var(--color-hub-gold);color:var(--color-accent-900)}
.how-body{margin-top:22px}

html.motion .how .how-steps::after{transform:scaleX(0)}
html.motion .how .how-dot{background:var(--color-accent-800);color:var(--color-hub-gold);transform:scale(.85)}
html.motion .how .how-body{opacity:0;transform:translateY(18px)}
html.motion .how.is-visible .how-steps::after{transform:none;transition:transform 1.4s cubic-bezier(.65,0,.35,1) .2s}
html.motion .how.is-visible .how-dot{background:var(--color-hub-gold);color:var(--color-accent-900);transform:none;transition:background .35s ease,color .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * .6s + .2s)}
html.motion .how.is-visible .how-body{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i) * .6s + .35s)}

@media (max-width:720px){
  .how-steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .how-steps::before,.how-steps::after{display:none}
  .how-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start}
  .how-step:not(:last-child)::after{content:"";position:absolute;left:31px;top:64px;bottom:-28px;width:2px;background:var(--color-hub-gold);transform-origin:center top}
  html.motion .how .how-step:not(:last-child)::after{transform:scaleY(0)}
  html.motion .how.is-visible .how-step:not(:last-child)::after{transform:none;transition:transform .5s ease;transition-delay:calc(var(--i) * .6s + .5s)}
  .how-body{margin-top:6px}
}