/* =====================================================================
   JustWork design tokens: the ONLY place raw values live.
   Pages and components use var(--token) exclusively.
   Layout concept: wide white editorial grid, navy ink, one red accent
   (logo B "order from chaos"), dark bands for the human sections.
   Single light theme by choice (approved design); body background is explicit.
   ===================================================================== */
:root {
  /* Color */
  --brand: #B5451B;            /* terra del Pilbara, chosen 08/11 */
  --brand-hover: #8F3514;
  --brand-soft: #FBEDE6;
  --navy: #14213D;
  --dots: #111111;
  --footer-bg: #211D1B;         /* warm charcoal footer (benchmark: dark footer 8/12) */
  --footer-ink: #D9D2CC;
  --footer-line: rgba(255, 255, 255, .12);             /* logo dots: black, chosen 08/11 */
  --navy-900: #0B1428;
  --ink: #14213D;
  --muted: #4B5563;
  --muted-on-dark: #C5CBD8;
  --line: #E5E7EB;
  --line-dark: #24314F;
  --surface: #F6F7F9;
  --white: #FFFFFF;
  --focus: #1D4ED8;
  --overlay: rgba(11, 20, 40, .55);
  --pattern-ink: rgba(20, 33, 61, .07);       /* logo-grid background pattern */
  --map-land: #C3CAD8;                        /* map dots */
  --map-id: #B5451B;                          /* region map: Indonesia (brand terra) */
  --map-au: #E9B79F;                          /* region map: Australia (lighter terra) */
  --map-other: #E8EBF0;                       /* region map: neighbours */
  --halo: rgba(246, 247, 249, .92);           /* text halo on the map */

  /* Type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(36px, 4.4vw, 60px);
  --fs-h2: clamp(28px, 3.2vw, 44px);
  --fs-h3: 22px;
  --fs-stat: clamp(36px, 4vw, 52px);
  --fs-counter: clamp(44px, 5.2vw, 68px);
  --fs-map-label: 20px;
  --fs-lead: clamp(18px, 1.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-xs: 13px;
  --fs-eyebrow: 13px;
  --fs-faq: 18px;
  --fs-plus: 26px;
  --fs-chat: 14px;
  --fs-prose-h2: 24px;
  --fs-prose-h3: 19px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fw-display: 800;            /* headlines: thicker, chosen 09/11 */
  --fw-eyebrow: 700;
  --fw-lead: 500;
  --fw-subtitle: 700;           /* card / step / plan / FAQ titles, chosen 09/11 */
  --lh-tight: 1.12;
  --lh-head: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.65;
  --ls-display: -0.015em;
  --ls-head: -0.01em;
  --ls-eyebrow: .12em;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(64px, 9vw, 120px);
  --container: 1200px;
  --prose: 720px;
  --gutter: clamp(20px, 4vw, 40px);
  --col-gap: 24px;
  --nav-h: 88px;
  --btn-h: 52px;
  --hero-h: 560px;
  --avatar: 56px;
  --chat-btn: 60px;
  --icon-lg: 44px;
  --icon-tile: 48px;
  --icon-xl: 64px;
  --stat-min: 300px;
  --pattern-size: 32px;
  --process-gap: 48px;
  --role-photo-h: 240px;
  /* Layout rhythm (audit 09/11): one value per job */
  --page-top: clamp(48px, 7vw, 96px);      /* top padding of hero and page heads */
  --page-bottom: clamp(56px, 7vw, 104px);  /* bottom padding of hero and page heads */
  --head-gap: var(--s-4);                  /* eyebrow > title > line > lead */
  --head-after: var(--s-7);                /* section head > content */
  --grid-gap: var(--col-gap);              /* every card grid, both directions */
  --card-pad: clamp(20px, 2.2vw, 28px);    /* inside every card */
  --card-gap: var(--s-3);                  /* between lines inside a card */
  --card-min: 260px;                       /* card width before wrapping */
  --card-min-wide: 300px;
  --card-min-sm: 220px;
  --contact-pad: clamp(32px, 6vw, 80px);
  --contact-min: 320px;
  --founder-max: 340px;
  --chat-max: 290px;
  --close-size: 28px;
  --social-size: 40px;
  --mark: 8px;                             /* eyebrow square */
  --rule-w: 48px; --rule-h: 3px;           /* line under section titles */
  --brand-square: 96px;                    /* terra square behind the hero photo */
  --brand-square-sm: 64px;
  --check: 20px;
  --page-head-media-h: clamp(240px, 32vw, 380px);
  --hero-video-h: clamp(560px, 82vh, 760px);
  --video-overlay: linear-gradient(90deg, rgba(20, 16, 14, .82) 0%, rgba(20, 16, 14, .62) 45%, rgba(20, 16, 14, .25) 100%);
  --city-h: clamp(420px, 62vh, 620px);
  --city-overlay: linear-gradient(0deg, rgba(20, 16, 14, .85) 0%, rgba(20, 16, 14, .35) 60%, rgba(20, 16, 14, .15) 100%);
  --on-dark-soft: rgba(255, 255, 255, .86);

  /* Radius */
  --r-xs: 2px; --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;
  --r-card: var(--r-lg);

  /* Shadow */
  --sh-1: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 8px rgba(20, 33, 61, .06);
  --sh-2: 0 16px 40px rgba(20, 33, 61, .14);

  --sh-card: 0 1px 2px rgba(33, 29, 27, .05), 0 8px 24px rgba(33, 29, 27, .07);
  --sh-lift: 0 2px 4px rgba(33, 29, 27, .06), 0 18px 40px rgba(33, 29, 27, .12);
  --sh-brand: 0 10px 24px rgba(181, 69, 27, .28);
  --hero-glow: radial-gradient(60% 80% at 85% 20%, rgba(181, 69, 27, .10), transparent 70%);
  /* Spotlight (Aceternity-style light beam), replaces the dots, chosen 09/11 */
  --spotlight: radial-gradient(ellipse at center, rgba(181, 69, 27, .30), rgba(224, 137, 79, .10) 40%, transparent 65%);
  --spotlight-soft: radial-gradient(ellipse at center, rgba(181, 69, 27, .14), transparent 62%);
  --spotlight-dark: radial-gradient(ellipse at center, rgba(224, 137, 79, .16), transparent 62%);
  --lift: -3px;

  /* Motion */
  --t-fast: .15s;
  --t-reveal: .7s;
  --reveal-shift: 18px;
  --t-arc: 2.4s;

  color-scheme: light;
}
@media (max-width: 960px) { :root { --hero-h: 380px; } }
@media (max-width: 640px) { :root { --nav-h: 72px; --btn-h: 48px; --fs-body: 16px; --hero-h: 300px; } }