/* ==========================================================================
   HYRZA — Recruitment site design system
   Palette sampled directly from the Hyrza logo (navy + blue arrow).
   ========================================================================== */

:root{
  /* This site is designed light-only — there is no dark palette anywhere in
     here. "only light" opts out of browser-level auto-darkening (Chrome's Auto
     Dark Theme on Android, Samsung Internet's dark mode). Without it those
     features repaint the page dark, and since the logo is a PNG they can't
     invert it with everything else: its navy strokes end up on a dark header
     and all but disappear. Plain `light` is not enough — the `only` keyword is
     what refuses the forced darkening. */
  color-scheme: only light;

  /* --- Color tokens (from logo) --- */
  --ink:        #0B1933;   /* logo navy — primary text, dark sections */
  --ink-soft:   #545E72;   /* secondary text */
  --paper:      #F5F6F8;   /* cool neutral background */
  --paper-2:    #FFFFFF;   /* card surfaces */
  --line:       #E1E4EA;   /* hairline borders */
  --line-dark:  #223050;   /* hairlines on dark bg */
  --accent:     #4B83B6;   /* logo blue — primary CTA / links / numbers */
  --accent-ink: #FFFFFF;   /* text on solid accent buttons */
  --accent-2:   #E8A33D;   /* bounty gold — reward highlight (tags, ref codes) */
  --accent-2-ink: #6B4B12; /* text on light-gold tag backgrounds */
  --accent-2-soft: #FCEFD8;
  --accent-soft:       #E7EEF6; /* light-blue tag background (experience level) */
  --accent-soft-border:#C6D8E9;
  --accent-soft-text:  #2E5478;
  --danger:     #C24B3F;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;

  --container: 100%;   /* full-width: content fills the screen, logo hard-left (was 1180px centered) */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.2rem,5vw,3.6rem);}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;color:var(--ink-soft);}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--accent-2);
  display:inline-block;
}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink);color:var(--paper-2);}
.btn-primary:hover{background:#242938;}
.btn-accent{background:var(--accent);color:var(--accent-ink);}
.btn-accent:hover{box-shadow:0 6px 18px rgba(75,131,182,.4);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:.85rem;}

/* --------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,245,241,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* When the mobile menu is open, drop the blur: backdrop-filter on this
   ancestor otherwise creates a new containing block for any position:fixed
   descendant (like .nav-links below), which breaks its "fixed to viewport"
   sizing/position and causes it to render squashed/overlapping page content. */
.site-header.menu-open{
  backdrop-filter:none;
  background:var(--paper);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
  max-width:var(--container);margin:0 auto;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.25rem;
}
.brand-mark{
  height:42px;
  width:auto;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand-mark img{
  height:100%;
  width:auto;
  object-fit:contain;
  display:block;
}
/* dark-background variant (footer) — uses the recolored logo image
   (assets/logo-footer.png), sized the same way as the default. */
.brand-mark.on-dark{}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-weight:500;font-size:.95rem;color:var(--ink-soft);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:none;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;}

@media (max-width:860px){
  .nav-links{
    position:fixed;inset:76px 0 0 0;
    z-index:55;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px;
    gap:22px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    border-top:1px solid var(--line);
  }
  .nav-links.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  /* 1.1rem text is only ~21px tall; the padding takes each link to a ~44px
     touch target without moving them apart visually. */
  .nav-links a{font-size:1.1rem;padding:11px 0;}
  .nav-links li{width:100%;}
  .nav-toggle{display:block;padding:10px 6px;}
  .nav-cta .btn-ghost{display:none;}
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.hero{
  padding:72px 0 88px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}
.hero h1{margin-bottom:20px;}
.hero-lead{font-size:1.1rem;max-width:46ch;}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-note{
  margin-top:22px;font-size:.85rem;color:var(--ink-soft);
  font-family:var(--font-mono);
}

/* Ticket stack visual in hero — renders the most recent open roles.
   Geometry comes from --i / --count set in JS, so any card count works.
   --fan-step is how far each card sits below the one above: it has to stay
   larger than a card's title block, or the titles disappear behind the next
   card and the fan turns to mush. */
.ticket-stack{
  position:relative;
  --fan-step:100px;
  --col-gap:20px;
  /* Cards cap at 330px but shrink to share whatever width the hero column
     actually has, so a 2-column fan can never spill off the right edge on a
     mid-size screen. The 54px is the row-by-row drift (3 rows x 18px). */
  --card-w:min(330px, calc((100% - (var(--cols, 1) - 1) * var(--col-gap) - 54px) / var(--cols, 1)));
  height:calc((var(--rows, 4) - 1) * var(--fan-step) + 170px);
}
.mini-ticket{
  position:absolute;
  top:calc(var(--row) * var(--fan-step));
  left:calc(var(--col) * (var(--card-w) + var(--col-gap)) + var(--row) * 18px);
  z-index:var(--i);
  width:100%;
  max-width:var(--card-w);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:20px 22px;
  box-shadow:0 18px 40px -18px rgba(18,21,28,.25);
}
/* Alternating tilt keeps the scattered-tickets look without needing a rule
   per card. Each card sits above the previous one, so the sliver left showing
   is the title rather than the tags. */
.mini-ticket:nth-child(odd){transform:rotate(-2deg);}
.mini-ticket:nth-child(even){transform:rotate(2deg);}
.mini-ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.mini-ticket-top h4{margin:0;font-size:1rem;line-height:1.3;}
.mini-ticket-top .tag{flex-shrink:0;}
.mini-ticket-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}

/* Nudge the fan left so it sits nearer the headline instead of hugging the
   right edge. Only above 1400px, where the 2-column fan runs and there's
   slack to give — on narrower screens the fan is already close to the text. */
@media (min-width:1601px){
  .ticket-stack{transform:translateX(-70px);}
}

/* Mid-size screens: the 1.1/.9 hero split doesn't leave the fan room for two
   columns, and a 1920x1080 monitor at 150% OS scaling lands here (the browser
   only sees ~1280px), not up in the 1600+ range. Even out the split so those
   screens get the same two-column fan instead of one long column. */
@media (min-width:1250px) and (max-width:1600px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:36px;}
}

/* Below ~1250px two columns would squeeze the cards too narrow to read, so
   collapse the fan into a single column. */
@media (max-width:1249px){
  .ticket-stack{
    --card-w:min(330px, calc(100% - 130px));   /* one column again: full width back */
    height:calc((var(--count, 4) - 1) * var(--fan-step) + 170px);
  }
  .mini-ticket{
    top:calc(var(--i) * var(--fan-step));
    left:calc(var(--i) * 18px);
  }
}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  /* No room to fan sideways on a phone — stack straight down instead of
     letting the lower cards run off the edge. */
  .mini-ticket{max-width:100%;left:0;}
  /* ...and with no second column to absorb them, all 8 cards would make a
     ~1600px hero: about four phone screens before the visitor reaches the
     stats or anything else. Show the 3 newest here; the jobs page still
     lists every open role. */
  .mini-ticket:nth-child(n+4){display:none;}
  .ticket-stack{
    margin-top:20px;
    height:calc((min(var(--count, 3), 3) - 1) * var(--fan-step) + 170px);
  }
}

/* --------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------- */
.stats{
  background:var(--ink);
  color:var(--paper);
  padding:52px 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:700;
  color:var(--accent);
}
.stat-label{font-size:.88rem;color:#B7BCC8;margin-top:4px;}
@media (max-width:760px){
  .stats-grid{grid-template-columns:1fr 1fr;row-gap:28px;}
}

/* --------------------------------------------------------------------
   Section basics
   -------------------------------------------------------------------- */
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.section-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

#how-it-works{scroll-margin-top:90px;}

/* --------------------------------------------------------------------
   Steps ("how it works") — numbered because it IS a real sequence
   -------------------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.step{position:relative;padding-top:8px;}
.step-num{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--accent-2);
  border:1px solid var(--accent-2);
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------
   Industry / feature grid
   -------------------------------------------------------------------- */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.tile{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px;
  transition:border-color .15s ease, transform .15s ease;
}
.tile:hover{border-color:var(--ink);transform:translateY(-2px);}
.tile h4{margin-bottom:8px;}
.tile p{margin:0;font-size:.92rem;}
@media (max-width:900px){.tile-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.tile-grid{grid-template-columns:1fr;}}

/* 2-column variant — used where there are exactly 4 tiles, so a 3-col
   grid would leave one orphaned in its own row. */
.tile-grid-2col{grid-template-columns:repeat(2,1fr);}
@media (max-width:640px){.tile-grid-2col{grid-template-columns:1fr;}}

/* Industry pills — count-agnostic layout: reads fine whether there's
   1 industry or 10, unlike a fixed grid sized for a specific count. */
.industry-pills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.industry-pill{
  display:inline-flex;
  align-items:center;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 20px;
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
}

/* --------------------------------------------------------------------
   Employer band (small, secondary section on homepage)
   -------------------------------------------------------------------- */
.employer-band{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius-l);
  padding:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.employer-band h3{color:var(--paper);margin-bottom:10px;}
.employer-band p{color:#C4C9D4;max-width:44ch;margin:0;}

/* --------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------- */
.cta-banner{
  text-align:center;
  padding:80px 24px;
  background:linear-gradient(180deg, var(--paper) 0%, var(--accent-2-soft) 100%);
  border-top:1px solid var(--line);
}
.cta-banner h2{margin-bottom:14px;}
.cta-banner p{max-width:52ch;margin:0 auto 28px;}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:#AEB4C0;
  padding:56px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line-dark);
}
.footer-grid h5{
  color:var(--paper);font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 14px;font-family:var(--font-mono);font-weight:500;
}
.footer-grid a{display:block;padding:6px 0;font-size:.92rem;color:#AEB4C0;}
.footer-grid a:hover{color:var(--paper);}
.footer-brand p{color:#8F95A3;font-size:.9rem;max-width:34ch;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:22px;font-size:.82rem;color:#7A8091;flex-wrap:wrap;gap:12px;
}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  /* 6px padding leaves a ~34px target; 11px gets these to ~44px. */
  .footer-grid a{padding:11px 0;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   JOBS PAGE
   ========================================================================== */
.jobs-layout{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:40px;
  align-items:flex-start;
}
.filters{
  position:sticky;top:96px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:24px;
}
.filter-group{margin-bottom:26px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group h5{
  font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 12px;
}
.filter-option{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;
  font-size:.92rem;
  cursor:pointer;
}
.filter-option input{accent-color:var(--ink);width:16px;height:16px;}
.filter-count{margin-left:auto;color:var(--ink-soft);font-size:.8rem;font-family:var(--font-mono);}
.filters-reset{
  margin-top:18px;
  font-size:.85rem;
  color:var(--accent-2);
  font-weight:600;
  background:none;border:none;padding:0;
}

.jobs-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.jobs-search{
  flex:1;min-width:220px;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:999px;
  padding:11px 18px;
}
.jobs-search input{border:none;background:none;outline:none;width:100%;font-size:.95rem;}
.jobs-count{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft);white-space:nowrap;}

.mobile-filter-toggle{display:none;}
@media (max-width:920px){
  .jobs-layout{grid-template-columns:1fr;}
  .filters{
    position:fixed;inset:0;z-index:60;
    border-radius:0;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .22s ease;
    padding:20px;
  }
  .filters.open{transform:translateX(0);}
  .mobile-filter-toggle{
    display:inline-flex;
  }
  /* Search takes the full first row, so Filters and the result count sit on
     their own row directly beneath it. */
  .jobs-search{flex:1 1 100%;}
  .mobile-filter-toggle{order:2;}
  .jobs-count{order:3;margin-left:auto;}
  .filters-close{
    display:flex;justify-content:flex-end;margin-bottom:10px;
  }
  /* Touch targets: 33px rows are a coin-flip to hit with a thumb. */
  .filter-option{padding:11px 0;}
  .filter-option input{width:20px;height:20px;}
}

/* Bounty ticket job card — the signature element */
.job-ticket{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:24px 26px;
  margin-bottom:18px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
}
/* perforated notch effect */
.job-ticket::before,.job-ticket::after{
  content:"";
  position:absolute;
  width:18px;height:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
}
.job-ticket::before{left:-10px;}
.job-ticket::after{right:-10px;}

.job-ticket-code{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--accent-2);
  margin-bottom:8px;
  display:block;
}
.job-ticket h3{margin-bottom:6px;}
.job-ticket .company{color:var(--ink-soft);font-size:.9rem;margin-bottom:12px;}
.job-tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{
  font-size:.76rem;
  font-family:var(--font-mono);
  padding:5px 10px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-soft);
}
.tag-accent{background:var(--accent-2-soft);border-color:#F0D6A3;color:var(--accent-2-ink);}
.tag-blue{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--accent-soft-text);}

.job-ticket-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.job-salary{font-family:var(--font-mono);font-size:.85rem;color:var(--ink);}

@media (max-width:600px){
  .job-ticket{grid-template-columns:1fr;text-align:left;}
  .job-ticket-side{align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%;}
}

.empty-state{
  text-align:center;
  padding:60px 20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-m);
  color:var(--ink-soft);
}

/* ==========================================================================
   APPLY MODAL / FORM
   ========================================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(18,21,28,.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--paper-2);
  border-radius:var(--radius-l);
  max-width:620px;width:100%;
  padding:36px;
  position:relative;
  margin:auto;
}
.modal-close{
  position:absolute;top:20px;right:20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.modal-eyebrow{font-family:var(--font-mono);font-size:.75rem;color:var(--accent-2);margin-bottom:6px;}
.modal h2{margin-bottom:4px;font-size:1.5rem;}
.modal-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:26px;}

.form-row{margin-bottom:18px;}
.form-row label{
  display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;
}
.form-row .hint{font-weight:400;color:var(--ink-soft);font-size:.8rem;}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=number],
.form-row select,
.form-row textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  background:var(--paper);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--ink);}
.form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){.form-two-col{grid-template-columns:1fr;}}

.radio-row{display:flex;gap:18px;flex-wrap:wrap;}
.radio-option{display:flex;align-items:center;gap:8px;font-size:.9rem;}

.file-drop{
  border:1.5px dashed var(--line);
  border-radius:var(--radius-s);
  padding:22px;
  text-align:center;
  background:var(--paper);
  font-size:.88rem;
  color:var(--ink-soft);
  cursor:pointer;
}
.file-drop.has-file{border-color:var(--accent-2);color:var(--ink);}
.file-drop input{display:none;}

.consent-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.82rem;color:var(--ink-soft);
  margin:22px 0;
}
.consent-row input{margin-top:3px;}
.consent-row a{color:var(--ink);text-decoration:underline;}

.form-error{color:var(--danger);font-size:.8rem;margin-top:5px;display:none;}
.form-row.invalid input,.form-row.invalid select,.form-row.invalid textarea{border-color:var(--danger);}
.form-row.invalid .form-error{display:block;}

.form-success{
  text-align:center;padding:30px 10px;
}
.form-success .icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent-2-soft);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:1.6rem;
}

/* ==========================================================================
   LEGAL PAGES (privacy / terms)
   ========================================================================== */
.legal-hero{padding:64px 0 24px;border-bottom:1px solid var(--line);}
.legal-updated{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);}
.legal-body{
  max-width:760px;margin:0 auto;padding:56px 24px 100px;
}
.legal-body h2{font-size:1.3rem;margin-top:2.2em;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p,.legal-body li{color:var(--ink-soft);font-size:.98rem;}
.legal-body ul{margin:0 0 1em;padding-left:20px;list-style:disc;}
.legal-body li{margin-bottom:6px;}
.legal-toc{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:22px 26px;margin-bottom:40px;
}
.legal-toc h5{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;}
.legal-toc a{display:block;padding:4px 0;font-size:.9rem;color:var(--ink-soft);}
.legal-toc a:hover{color:var(--ink);}

/* ==========================================================================
   ABOUT PAGE extras
   ========================================================================== */
.value-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:700px){.value-list{grid-template-columns:1fr;}}

.split{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
@media (max-width:860px){.split{grid-template-columns:1fr;}}

.placeholder-art{
  aspect-ratio:4/3;
  border-radius:var(--radius-l);
  background:
    radial-gradient(circle at 30% 30%, rgba(232,163,61,.35), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(31,140,107,.3), transparent 55%),
    var(--ink);
  position:relative;
  overflow:hidden;
}
.placeholder-art::after{
  content:"REPLACE WITH PHOTO";
  position:absolute;bottom:16px;left:16px;
  font-family:var(--font-mono);font-size:.7rem;
  color:rgba(255,255,255,.55);
  letter-spacing:.06em;
}

/* Animated brand illustration — alternative to a photo placeholder.
   Same footprint/rounding as .placeholder-art, but this is meant to be
   final, not a stand-in. */
.brand-art{
  aspect-ratio:4/3;
  border-radius:var(--radius-l);
  background:var(--ink);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-art svg{display:block;width:100%;height:100%;}

/* Vortex variant — dark hole pulling in a resume, echoing the
   "black hole" line in the homepage headline. */
.brand-art-vortex .ring{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  opacity:.35;
}
.brand-art-vortex .ring-2{opacity:.25;}
.brand-art-vortex .ring-3{opacity:.2;}
.brand-art-vortex .vortex-rings{
  transform-box:fill-box;
  transform-origin:center;
  animation:vortex-spin 26s linear infinite;
}
.brand-art-vortex .void-core{
  fill:var(--accent-2);
  animation:core-pulse 3s ease-in-out infinite;
}
.brand-art-vortex .falling-doc{
  transform-box:fill-box;
  transform-origin:center;
  animation:spiral-in 7s ease-in infinite;
}
@keyframes vortex-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes core-pulse{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}
@keyframes spiral-in{
  0%{transform:translate(95px,-72px) scale(1) rotate(0deg);opacity:1;}
  35%{transform:translate(55px,-38px) scale(.8) rotate(70deg);opacity:1;}
  65%{transform:translate(18px,-10px) scale(.5) rotate(170deg);opacity:.75;}
  90%{transform:translate(2px,-1px) scale(.18) rotate(280deg);opacity:.25;}
  100%{transform:translate(0,0) scale(.05) rotate(320deg);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .brand-art-vortex .vortex-rings,
  .brand-art-vortex .void-core,
  .brand-art-vortex .falling-doc{animation:none;}
  .brand-art-vortex .falling-doc{opacity:1;transform:translate(60px,-45px) scale(.9) rotate(20deg);}
}

/* Hub variant — one central point (Hyrza) drawing a connection out to
   each industry, one after another, in a continuous loop. */
.brand-art-hub .spoke-line{
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  fill:none;
  stroke-dasharray:100;
  animation:spoke-draw 8s ease-in-out infinite;
}
.brand-art-hub .spoke-node{
  fill:var(--accent);
  transform-box:fill-box;transform-origin:center;
  animation:spoke-dot 8s ease-in-out infinite;
}
.brand-art-hub .hub-core{
  fill:var(--accent);
  transform-box:fill-box;transform-origin:center;
  animation:core-pulse 3s ease-in-out infinite;
}
@keyframes spoke-draw{
  0%{stroke-dashoffset:100;opacity:.4;}
  8%{opacity:1;}
  30%{stroke-dashoffset:0;opacity:1;}
  75%{stroke-dashoffset:0;opacity:1;}
  92%{opacity:.3;}
  100%{stroke-dashoffset:100;opacity:.4;}
}
@keyframes spoke-dot{
  0%,8%{opacity:0;transform:scale(.5);fill:var(--accent);}
  28%{fill:var(--accent-2);}
  32%{opacity:1;transform:scale(1.3);fill:var(--accent-2);}
  40%{fill:var(--accent);}
  75%{opacity:1;transform:scale(1);fill:var(--accent);}
  92%,100%{opacity:0;transform:scale(.5);fill:var(--accent);}
}
@media (prefers-reduced-motion: reduce){
  .brand-art-hub .spoke-line{animation:none;stroke-dashoffset:0;opacity:.8;}
  .brand-art-hub .spoke-node{animation:none;opacity:1;transform:scale(1);}
  .brand-art-hub .hub-core{animation:none;}
}

/* Funnel variant — a pool of candidates on the left, filtered through
   Hyrza (the pulsing hub), arriving one at a time at the company on the
   right — "no volume commitments, just people worth your time." */
.brand-art-funnel .funnel-guide{
  stroke:var(--accent);
  stroke-width:1;
  stroke-dasharray:4 4;
  opacity:.2;
}
.brand-art-funnel .funnel-pool circle{
  fill:var(--accent);
  opacity:.35;
}
.brand-art-funnel .company-ring{
  fill:none;
  stroke:var(--paper);
  stroke-width:1.5;
  opacity:.6;
}
.brand-art-funnel .company-core{
  fill:var(--paper);
  opacity:.9;
}
.brand-art-funnel .hub-core{
  fill:var(--accent);
  transform-box:fill-box;transform-origin:center;
  animation:core-pulse 3s ease-in-out infinite;
}
.brand-art-funnel .travel-dot{
  fill:var(--accent);
  opacity:0;
}
.brand-art-funnel .travel-a{animation:travel-a 9s ease-in-out infinite;}
.brand-art-funnel .travel-b{animation:travel-b 9s ease-in-out infinite;animation-delay:-4.5s;}
@keyframes travel-a{
  0%{transform:translate(0,0);opacity:0;fill:var(--accent);}
  6%{opacity:.9;}
  35%{transform:translate(130px,60px);opacity:1;fill:var(--accent-2);}
  70%{transform:translate(270px,60px);fill:var(--paper);opacity:1;}
  92%{opacity:1;}
  100%{transform:translate(270px,60px);opacity:0;fill:var(--accent);}
}
@keyframes travel-b{
  0%{transform:translate(0,0);opacity:0;fill:var(--accent);}
  6%{opacity:.9;}
  35%{transform:translate(145px,-30px);opacity:1;fill:var(--accent-2);}
  70%{transform:translate(285px,-30px);fill:var(--paper);opacity:1;}
  92%{opacity:1;}
  100%{transform:translate(285px,-30px);opacity:0;fill:var(--accent);}
}
@media (prefers-reduced-motion: reduce){
  .brand-art-funnel .travel-dot{animation:none;opacity:0;}
}

/* ==========================================================================
   TOUCH TARGETS — phones
   --------------------------------------------------------------------------
   Lives at the end of the file on purpose: these override sizes declared in
   the component blocks above, and every selector here has the same
   specificity as the rule it corrects, so source order is what wins.
   ~44px is the smallest control a thumb hits reliably.
   ========================================================================== */
@media (max-width:760px){
  .btn-sm{padding:12px 18px;}
  .filters-reset{padding:12px 0;}
  .modal-close{width:40px;height:40px;}
}