/* ============================================================
   SKIP HIRE — GLOBAL DESIGN SYSTEM
   Design tokens, reset, typography, buttons, icon system.
   Loaded on every page.
============================================================ */

/* ============================================================
   TOKENS
============================================================ */

:root {
  --yellow:       #F5C800;
  --yellow-dk:    #D9AE00;
  --yellow-bg:    #FFFBE6;
  --charcoal:     #111111;
  --charcoal-2:   #1C1C1C;
  --charcoal-3:   #2A2A2A;
  --charcoal-4:   #3A3A3A;
  --white:        #FFFFFF;
  --off-white:    #F4F4F2;
  --mid-gray:     #E2E2E0;
  --text-primary: #111111;
  --text-secondary:#555550;
  --text-muted:   #999990;

  --f-head: 'Outfit', sans-serif;
  --f-body: 'Inter', sans-serif;

  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 500ms;

  --nav-h:  64px;
  --wrap:   1160px;
  --pad:    clamp(1.25rem, 4vw, 3rem);

  /* Section vertical rhythm */
  --sv: clamp(4rem, 8vw, 7rem);
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

input, select, textarea { font-family: inherit; }

/* ============================================================
   UTILITIES
============================================================ */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   TYPOGRAPHY SYSTEM
============================================================ */
.t-label {
  font-family: var(--f-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.t-caption {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
}
.t-body {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}
.t-body-lg {
  font-family: var(--f-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
}
.t-h4 {
  font-family: var(--f-head);
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.t-h3 {
  font-family: var(--f-head);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-h2 {
  font-family: var(--f-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.t-h1 {
  font-family: var(--f-head);
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.t-display {
  font-family: var(--f-head);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

/* ============================================================
   BUTTONS
============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    outline-color var(--t-fast) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--t-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-yellow {
  background: var(--yellow);
  color: var(--charcoal);
}
.btn-yellow:hover { background: var(--yellow-dk); }

.btn-charcoal {
  background: var(--charcoal);
  color: var(--white);
}
.btn-charcoal:hover { background: var(--charcoal-3); }

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  outline: 2px solid var(--charcoal);
  outline-offset: 0;
  padding: calc(0.875rem - 2px) calc(2rem - 2px);
}
.btn-outline:hover {
  background: var(--charcoal);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  outline: 2px solid rgba(255,255,255,0.3);
  outline-offset: 0;
  padding: calc(0.875rem - 2px) calc(2rem - 2px);
}
.btn-outline-light:hover {
  background: var(--white);
  color: var(--charcoal);
  outline-color: var(--white);
}

.btn-lg { padding: 1.125rem 2.5rem; font-size: 0.9375rem; }
.btn-sm { padding: 0.625rem 1.375rem; font-size: 0.75rem; }

.btn-yellow:disabled { background: var(--mid-gray); color: var(--text-muted); cursor: not-allowed; }
.btn-yellow:disabled:hover svg { transform: none; }
.btn-full { width: 100%; justify-content: center; }

/* ============================================================
   ICON SYSTEM — consistent 20×20 stroke icons
============================================================ */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg {
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ============================================================
   SECTION SHARED
============================================================ */
.section {
  padding: var(--sv) 0;
}
.section--charcoal { background: var(--charcoal); }
.section--yellow   { background: var(--yellow); }
.section--white    { background: var(--white); }
.section--offwhite { background: var(--off-white); }

/* Section label + heading combo */
.section-intro { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-intro--center { text-align: center; }
.section-intro__label {
  display: block;
  margin-bottom: 0.875rem;
}
.section-intro__label--dark { color: rgba(255,255,255,0.35); }
.section-intro__label--yellow { color: var(--yellow-dk); }
.section-intro__label--charcoal { color: var(--charcoal-4); }
.section-intro__title { display: block; }
.section-intro__title--light { color: var(--white); }
.section-intro__title--charcoal { color: var(--charcoal); }
.section-intro__sub {
  display: block;
  margin-top: 1rem;
  max-width: 520px;
  color: var(--text-secondary);
}
.section-intro--center .section-intro__sub { max-width: 100%; }
.section-intro__sub--light { color: rgba(255,255,255,0.58); }