/* ============================================================
   Trayza Recruitment — Design tokens
   Palette C · Counsel  +  Type pair: Bespoke Serif / Cabinet Grotesk
   ============================================================ */

:root {
  /* base */
  --bg:        #F4F1EC;
  --surface:   #ECE7DD;
  --surface-2: #E2DCCE;

  /* ink */
  --ink:       #1B2A3D;
  --ink-soft:  #5C6A7A;
  --ink-mute:  #8A95A4;  /* 2.70:1 on --bg (AA fail) — use only on --surface or darker */

  /* accent (brushed brass) */
  --accent:    #B58652;  /* fill / decorative — 2.87:1 on --bg, NOT for text on --bg */
  --accent-2:  #8C5F30;  /* text links, icon stroke on --bg — 4.91:1 passes AA */

  /* dark climax */
  --night:     #11203A;
  --night-ink: #F0E6D4;
  --night-soft:#9BA8BC;

  /* utility */
  --rule:      #D7CFBF;
  --success:   #4F7A52;
  --danger:    #B7402E;

  /* type families (declared with system fallbacks until Task 2 ships woff2) */
  --display: 'Bespoke Serif', 'Times New Roman', Georgia, serif;
  --body:    'Cabinet Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* fluid type scale */
  --fs-d1: clamp(44px, 4.8vw, 88px);
  --fs-d2: clamp(40px, 5vw, 88px);
  --fs-d3: clamp(28px, 3.2vw, 56px);
  --fs-lg: clamp(17px, 1.2vw, 19px);
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-label: 11px;

  /* radii */
  --r-card: 16px;
  --r-pill: 9999px;
}

html, body { background: var(--bg); color: var(--ink); font-family: var(--body); }

/* Tailwind utility hooks */
.font-display { font-family: var(--display); }
.font-body    { font-family: var(--body); }

/* eyebrow / label — default colour is --ink-soft (4.91:1 on --bg, AA pass).
   Override to --ink-mute only when placed on --surface or darker. */
.label-eyebrow {
  font-family: var(--body);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* hairline rule */
.rule { border-top: 1px solid var(--rule); }

/* italic accent inside display headlines */
.headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
}

/* reduced motion: collapse animation/transition durations and delays to near-zero,
   disable smooth scroll. Colours and layout untouched. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        .001ms !important;
    animation-delay:           .001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       .001ms !important;
    transition-delay:          .001ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ============================================================
   Self-hosted FontShare web fonts
   ============================================================ */

@font-face {
  font-family: 'Bespoke Serif';
  src: url('/fonts/bespoke-serif-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bespoke Serif';
  src: url('/fonts/bespoke-serif-400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bespoke Serif';
  src: url('/fonts/bespoke-serif-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Header + drawer behaviour
   ============================================================ */
html { scroll-behavior: smooth; }
body { padding-top: 0; }   /* header is fixed overlay, not in flow */

#site-header.is-hidden { transform: translateY(-100%); }

/* Tailwind v4 uses CSS `translate` property (separate from `transform`).
   `translate-x-full` sets translate:100%, so we override with `translate`, not `transform`. */
#drawer.is-open { translate: 0 0; }
#drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   §1 Hero
   ============================================================ */
#hero {
  isolation: isolate;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) auto auto;
  padding: 0 1.5rem 1.5rem;
}

@media (min-width: 1024px) {
  #hero { padding-inline: 5rem; }
}

/* layered headline — silhouette split lands when poster mask asset arrives.
   Until then we ship a single navy-on-vignette layer for legibility.
   text-shadow + max-w improves readability on top of the autoplay video. */
.hero-headline {
  grid-row: 2;
  align-self: center;
  color: var(--ink);
  text-shadow: 0 1px 32px rgba(244,241,236,0.7), 0 2px 8px rgba(244,241,236,0.55), 0 0 1px rgba(244,241,236,0.4);
}

#hero .hero-copy {
  grid-row: 3;
  margin-bottom: 1.5rem;
}

#hero-scroll {
  grid-row: 4;
  justify-self: center;
}

/* darker left-edge scrim so navy headline reads on any video frame (kitchen / opera house / cafe) */
#hero::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 60%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(244,241,236,0.55) 0%, rgba(244,241,236,0.20) 60%, rgba(244,241,236,0) 100%);
}

/* If the video plays, lift contrast with a soft scrim only over text band */
#hero::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(180deg, rgba(244,241,236,0) 0%, rgba(244,241,236,0.55) 70%, rgba(244,241,236,0.85) 100%);
  pointer-events: none; z-index: 1;
}
.hero-headline,
#hero p,
#hero-scroll { z-index: 2; }

/* ============================================================
   §5 Industries — segmented tabs
   ============================================================ */
.ind-tab {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -.005em;
  color: var(--ink-soft);
  position: relative; padding-bottom: .25rem;
  cursor: pointer;
}
.ind-tab.is-active { color: var(--ink); }
.ind-tab.is-active::after {
  content: ''; position: absolute; left:0; right:0; bottom:-17px;
  height: 2px; background: var(--accent);
}
.ind-tab.is-soon { opacity: .45; cursor: not-allowed; }
.ind-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* dark variant for hairline (defensive — Tailwind border-[var(--night-soft)]/30 covers normal case) */
#climax .rule { border-top-color: rgba(155,168,188,.3); }

/* §4 Process — Screen / Visa lodge / Arrival sequential reveal.
   First <li> (Match) is rendered active from the start; the next three
   start invisible+offset and animate in on viewport intersection.
   Note: <ol>'s first child is the <span class="...rail">, so the four
   <li>s sit at nth-child 2~5. We target nth-child(n+3) = li 2,3,4. */
#process ol > li:nth-child(n+3) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: transform, opacity;
}
#process ol > li.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  #process ol > li:nth-child(n+3) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}